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

初期値 normal
適用対象 全ての要素、::first-letterおよび::first-line
継承 する
アニメーション フォントの太さ
対応ブラウザ caniuseで確認

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

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

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

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)を使用する祭には、より細かな指定が可能です。

font-weightに関連するCSSプロパティ

フォント・文字色
color 文字の色を指定する
font フォントに関する様々な機能を一括で指定する
font-family 文字フォントの種類を指定する
font-feature-settings OpenTypeフォントの拡張書体の特性を制御する
font-kerning フォントの文字詰め(カーニング)を制御する
font-language-override 文字を表示する祭に使用する言語情報を一時的に変更する
font-size 文字フォントの大きさを指定する
font-size-adjust 現在のフォントサイズを基準に小文字の大きさを相対的に調整する
font-stretch 表示させるフォントの幅広や幅狭のフェイスを指定する
font-style フォントを筆記体や斜体で表示するかどうかを指定する
font-synthesis 太字や斜体に対応していないフォントの加工を制御する
font-variant フォントの表示形式やブラウザの合成規則を一括で指定する
font-variant-alternates 文字フォントの代替字体(グリフ)の選定を制御する
font-variant-caps 文字列に適用されるキャピタライゼーションルールを制御する
font-variant-east-asian 東アジアの言語で使われる字体を制御する
font-variant-ligatures 隣り合った文字フォントの合字(リガチャ)を制御する
font-variant-numeric 数値に関する文字表記を制御する
font-variant-position 上付き文字や下付き文字として配置されるべき字体の使用を制御する
font-weight 文字フォントの太さを指定する