font-weightプロパティの説明
CSSのfont-weightプロパティは、文字フォントの太さを指定します。画面に表示されるフォントの太さは、font-familyで指定されている文字セットの種類に依存します。
指定できる値は、あらかじめ用意されているキーワードや文字の重みの段階を表す数値です。しかし、全てのフォントファミリーが多様な文字の太さを持っているわけではないため、理想的な太さを提案する意味に留まります。
font-weightに指定できる値
normal- 通常のフォントの太さを表します。数値では
400に該当します。 bold- 太字を表します。数値では
700に該当します。 lighter- 親要素よりも一段階細いフォントであることを表します。基準となる太さに対して、thin（100）、normal（400）、bold（700）のいずれかの太さになります。
bolder- 親要素よりも一段階太いフォントであることを表します。基準となる太さに対して、normal（400）、bold（700）、heavy（900）のいずれかの太さになります。
<number>- 1から1000の数字を使って文字の太さを表します。任意の数値を使用できますが、一般的には伝統的なキーワードと関連性のある数値を採用します。フォントファミリーが指定された値に対応していない場合は、以下の規則に従って太さの代替が行われます。
400から500の間でフォントの太さが指定された場合、利用できる太さを指定値から順に500へ昇順で探します。見つからなければ降順で探し、400に至っても該当するものがなければ、500以上で利用可能な太さを探します400未満の値でフォントの太さが指定された場合、指定値から降順で利用可能なものを探します。一致するものがなければ、指定値よりも大きい太さを昇順で探します。500以上の値でフォントの太さが指定された場合、指定値から昇順で利用可能なものを探します。一致するものがなければ、指定値よりも小さい太さを降順で探します。
一般的なフォントの太さと数値の対応表
<number>で示す値は、OpenTypeの仕様書により以下の名称に対応しています。
| 値 | 太さ |
|---|---|
| 100 | Thin |
| 200 | ExtraLight UltraLight |
| 300 | Light |
| 400 | Normal Regular |
| 500 | Medium |
| 600 | DemiBold SemiBold |
| 700 | Bold |
| 800 | ExtraBold UltraBold |
| 900 | Black |
| 950 | ExtraBlack UltraBlack |
相対的なフォントの太さを示す対応表
lighterやbolderを使ってフォントの太さを相対的に指定する場合、以下の内容で算出されます。
| 値 | lighter | bolder |
|---|---|---|
| 100 | 100 | 400 |
| 200 | 100 | 400 |
| 300 | 100 | 400 |
| 400 | 100 | 700 |
| 500 | 100 | 700 |
| 600 | 400 | 900 |
| 700 | 400 | 900 |
| 800 | 700 | 900 |
| 900 | 700 | 900 |
font-weightの使い方とサンプルコード
font-weightプロパティの構文は以下の通りです。
/* キーワード値 */
font-weight: normal;
font-weight: bold;
font-weight: lighter;
font-weight: bolder;
/* <number>値 */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
/* グローバル値 */
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: unset;
font-weightの実例
それでは実際にfont-weightプロパティの書き方を見ていきましょう。以下の例は、単純なキーワード指定による文字の太さの比較です。
<section class="samp_box">
<p id="fw_n">font-weight: normal;</p>
<p id="fw_b">font-weight: bold;</p>
<p id="fw_ler">font-weight: lighter;</p>
<p id="fw_ber">font-weight: bolder;</p>
</section>
.samp_box {
overflow: auto;
width: 100%;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box p {
margin: 1rem 0 0;
padding: .3rem;
background: #fff;
}
#fw_n {
font-weight: normal;
}
#fw_b {
font-weight: bold;
}
#fw_ler {
font-weight: lighter;
}
#fw_ber {
font-weight: bolder;
}
続いて、数値による指定で文字の太さの比較をします。採用される太さはフォントファミリーが持つ文字セットの種類に依存します。可変フォント（Variable fonts）を使用する祭には、より細かな指定が可能です。