font-weight

font-weight は CSS の記述子で、 @font-face 規則で指定されたフォントの太さを指定することができます。別に font-weight プロパティを使用して、テキストを表示する文字の太さや細さを設定することができます。

特定のフォントファミリについて、同じフォントファミリの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 font-weight 記述子を使用してフォントフェイスの太さを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。

一般に、特定のフォントファミリには限られた太さのみが利用できます。指定された太さが存在しない場合、近い太さが使用されます。太字がないフォントでは、ふつうはユーザーエージェントが合成します。これを抑止するには、 font-synthesis プロパティを使用してください。

構文

/* 単一の値 */
font-weight: normal;
font-weight: bold;
font-weight: 400;

/* 複数の値 */
font-weight: normal bold; 
font-weight: 300 500;

font-weight プロパティは、以下に挙げる値のうちの一つを使用して記述します。

normal
通常のフォントの太さです。 400 と同じです。
bold
太字のフォントの太さです。 700 と同じです。
<number>
1 以上 1000 以下の <number> 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の一般的な太さ名との対応にあるように、共通の太さ名に対応しています。

font-weight 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は、これらの値のいずれかに変換されます。

CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、可変フォントが導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。

良くある太さ名の対応

100 から 900 の数値は、おおよそ以下の太さ名に対応します。

太さ名
100 Thin (Hairline)
200 Extra Light (Ultra Light)
300 Light
400 Normal
500 Medium
600 Semi Bold (Demi Bold)
700 Bold
800 Extra Bold (Ultra Bold)
900 Black (Heavy)

可変フォント

多くのフォントは、一般的な太さ名との対応の中の数値の一つに対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、もっと高い又は低い粒度の太さの範囲に対応しており、これにより、デザイナーは選択した太さをより詳細に制御することができます。

TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。

アクセシビリティの考慮

弱視の人は、 font-weight の値が 100 (Thin/Hairline) または 200 (Extra Light) の場合、特にフォントのコントラスト比が低い場合は、テキストを読むのが難しくなることがあります。

公式定義

関連する @規則@font-face
初期値normal
計算値指定値

形式文法

<font-weight-absolute>{1,2}

where
<font-weight-absolute> = normal | bold | <number <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[1,1000]>

@font-face 規則における通常のフォントの太さの設定

以下の例は、ローカルの Open Sans フォントを見つけるか、またはそれをインポートして、通常の太さのフォントを使用することができます。

@font-face {
  font-family: "Open Sans";
  src: local("Open Sans") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-weight: 400;
}

仕様書

仕様書 状態 備考
CSS Fonts Module Level 4
font-weight の定義
草案
CSS Fonts Module Level 3
font-weight の定義
勧告候補

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
font-weightChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 4Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 2Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報