CSS におけるフォントの太字属性 font-weight とその動作原理の詳細な説明

I 太字 | 太字 | 600 | 900 | フォント太さの継承

font-weight はすべての要素に適用されます

ユーザー エージェントがフォント変形のウェイトをどのように決定するかを理解するには、まずキーワード 100 ～ 900 について説明し、次にそれがどのように継承されるかを見ていきます。 これらの数値キーワードは、フォントの関連特性とのマッピング関係を定義するために使用されます。つまり、フォントの太さを 9 つのレベルに分けます。たとえば、OpenType は 9 値の数値レベルを使用します。フォントがこのレベルになった後、これらの数値は各レベルに直接マッピングされます。たとえば、100 は最も軽いフォントの歪みにマッピングされ、900 は最も重いフォントの歪みに対応します。

実際、これらの数値にはフォントの太さに関する重要な規則はありません。 CSS では、各数値に対応するフォントのウェイトは、その前の数値に対応するフォントのウェイトより小さくてはいけないと規定されています。

このように、100、200、300、400 はすべて同じ太さのフォント変形に対応し、500 と 600 はより太いフォント変形に対応し、700、800、900 は別のより太いフォント変形に対応する可能性があります。 。

この数字は通常のものと同じように定義されており、

700 は太字

に対応します。

フォント変形名は同等です。

400 は通常の

に相当します。他の数値は

font-weight 属性キーワードに対応しませんが、通常のフォント バリアント名に対応できます。フォント バリアントに「Normal」、「REGULAR」、「Roman」、または「Book」のタグが付いている場合、そのフォント バリアントには 400 が割り当てられ、「Medium」のタグが付いているフォント バリアントには 500 が割り当てられます。

ただし、「Medium」とマークされたフォント バリアントが使用可能な唯一のフォントである場合、500 に対応することはできません。 特定のフォント ファミリのフォント ウェイトが 9 つ未満の場合、ユーザー エージェントはさらに多くの作業を行う必要があります。この場合、事前に定義された方法でギャップを埋める必要があります:

値 500 が割り当てられていない場合は、400 と同じ フォントウェイトが与えられます。

300 が割り当てられていない場合は、400 よりもわずかに明るいフォント バリアントに対応します。明るいフォントが利用できない場合、300 は 400 と同様のグレードに相当します。通常、これは「標準」と「中」の場合に当てはまります。 100 と 200 についても同じ方法が使用されます。

600が割り当てられていない場合は、400よりも少し重いフォント変形に対応します。そのようなフォントが利用できない場合、600 は 500 と同様に特定のフォント バリアントに対応します。この方式は700、800、900でも採用されています。

理解を容易にするために、フォント ウェイト割り当ての 3 つの

例を見てみましょう。まず、フォント ファミリ Karrank% が OpenType フォントであり、対応する 9 つのウェイト レベルが定義されていると仮定します。

ここで、これらの数字は各レベルに対応しており、キーワードのnormalとboldがそれぞれ400と700に割り当てられています。 2 番目の例では、この記事の冒頭で説明したフォント ファミリ Zurich を考慮します。そのフォント バリアントにも以下のウェイト値が割り当てられていると仮定します。

フォント形式: Zurich Light 割り当てられたキーワード: 空 割り当てられた数値: 100,200,300

フォント形式: Zurich Regular 割り当てられたキーワード: ノーマル 割り当てられた数値: 400

フォント形式: Zurich Medium 割り当て済みキーワード: 空 割り当てられた数値: 500

フォント形式: Zurich Bold 割り当てられたキーワード: 太字 割り当てられた数値: 600,700

フォント スタイル: Zurich Black 割り当てられたキーワード: 空 割り当てられた数値: 800

フォント形式: Zurich UltraBlack 割り当てられたキーワード: 空 割り当てられた番号: 900

最初の 3 つの番号は、最も明るいフォントに割り当てられます。通常フォントはキーワード400と通常に対応します。 数字の500には中くらいのフォントが割り当てられています。 600 にはフォント バリアントが割り当てられていないため、600 と 700 は一緒に同じフォント バリアントの太字フォントに対応します。最後に、800 と 900 がそれぞれ Black と UltraBlack

フォント バリアントに割り当てられます。
この状況は、上位 2 つの厚さレベルが割り当てられている場合にのみ発生します。 それ以外の場合、ユーザー エージェントはそれらを無視して、800 と 900 を太字フォントに割り当てるか、2 つの黒フォント バリアントのいずれかに割り当てる可能性があります。最後に、Times フォントを見てみましょう。以下に示すように、TimesRegulal と TimesBold の 2 つのフォント バリアントしかありません。

フォント形式: Times Regular 割り当てられたキーワード: 通常 割り当てられた数値: 100,200,300,400,500

フォント形式: TimesBold 割り当てられたキーワード: 太字 割り当てられた数値: 600,700,800,900

キーは通常の太字です 割り当てはかなり簡単です。これらの番号は、100 ～ 300 が Regular フォントに割り当てられていますが、500 は Medium フォントがないため、Standard フォントに割り当てられており、400 と同じになります。

残りのうち、700 は常に太字フォントに割り当てられますが、800 と 900 は、より太字のフォントがないため、同様に太字フォントに割り当てられます。最後に、600 が次の

太字フォントに割り当てられます。もちろん、太字フォントのみです。

フォントの太さは継承できます。段落が太字に設定されている場合、次のように、すべての子要素が太字のフォントを継承します。

以上がCSS におけるフォントの太字属性 font-weight とその動作原理の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。