CSSのfont-weight属性の使用例を詳しく解説

ユーザー エージェントがフォント変形の重みをどのように決定するかを理解するには、まずキーワード 100 ～ 900 について説明し、次にそれがどのように継承されるかを見ていきます。

フォントの太さ | 太字 | 200 | 600 | 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 と同じ

font-weight が与えられます。

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 割り当てられたキー フォント: Null 割り当てられた番号: 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 サイトの他の関連記事を参照してください。