font-weight
font-weight は CSS のプロパティで、フォントの太さ（あるいは重み）を指定します。実際に表示されるフォントの太さは、現在設定されている font-family に依存する場合があります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 2 | 12 | 1 | 1 | 18 | 1 | |
| CSS @ ルール | ||||||
| font-weight は CSS の @font-face 記述子で、作成者は、@font-face アットルールで指定したフォントに対して、単一のフォントの太さ、またはフォントの太さの範囲を指定することができます。これは、CSS ルールで目的のフォントの太さが設定されたときに、ブラウザーが適切なフォントを選択するために使用されます。 | 4 | 12 | 3.5 | 3.1 | 18 | 2 |
| CSS プロパティ | ||||||
bold | 2 | 12 | 1 | 1 | 18 | 1 |
bolder | 2 | 12 | 1 | 1 | 18 | 1 |
lighter | 2 | 12 | 1 | 1 | 18 | 1 |
normal | 2 | 12 | 1 | 1 | 18 | 1 |
number `<数値>` 構文 | 62 | 17 | 61 | 11 | 62 | 11 |
| その他 | ||||||
| font-weight 属性は、同じフォント ファミリ内の他のフォントと比較した、テキストのレンダリングに使用されるグリフの太さまたは明るさを指します。 | 2 | 12 | 1 | 1 | 18 | 1 |
基本構文
CSS
.light { font-weight: 300; }
.regular { font-weight: normal; }
.bold { font-weight: bold; }
.heavy { font-weight: 900; }ライブデモ
実務での使いどころ
-
見出しと本文の視覚的階層
見出しにbold（700）、本文にnormal（400）を設定し、テキストの重要度を太さで視覚的に表現します。
注意点
- 指定したウェイトがフォントファミリーに存在しない場合、ブラウザが最も近いウェイトを選択するか、合成太字を生成します。
アクセシビリティ
- 太字だけで情報を伝えず、セマンティックHTML（strong）やARIA属性で意味を補完してください。