font-weight：文字フォントの太さを指定する

font-weightプロパティの説明

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の仕様書により以下の名称に対応しています。

相対的なフォントの太さを示す対応表

lighterやbolderを使ってフォントの太さを相対的に指定する場合、以下の内容で算出されます。

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プロパティの書き方を見ていきましょう。以下の例は、単純なキーワード指定による文字の太さの比較です。

.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;
}

<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>

続いて、数値による指定で文字の太さの比較をします。採用される太さはフォントファミリーが持つ文字セットの種類に依存します。可変フォント（Variable fonts）を使用する祭には、より細かな指定が可能です。