font-weight
テキストの太さ(ウェイト)を指定する基本的なフォントプロパティです。100〜900の数値またはnormal(400)、bold(700)のキーワードで指定します。バリアブルフォントでは1〜1000の任意の値を使用でき、きめ細かなウェイト制御が可能です。視覚的な階層構造の構築に欠かせません。
概要
テキストの太さ(ウェイト)を指定する基本的なフォントプロパティです。100〜900の数値またはnormal(400)、bold(700)のキーワードで指定します。バリアブルフォントでは1〜1000の任意の値を使用でき、きめ細かなウェイト制御が可能です。視覚的な階層構造の構築に欠かせません。
対応ブラウザ
デスクトップ
Chrome 2+
Edge 12+
Safari 1+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
CSS
.light { font-weight: 300; }
.regular { font-weight: normal; }
.bold { font-weight: bold; }
.heavy { font-weight: 900; } 実務での使いどころ
-
見出しと本文の視覚的階層
見出しにbold(700)、本文にnormal(400)を設定し、テキストの重要度を太さで視覚的に表現します。
注意点
- 指定したウェイトがフォントファミリーに存在しない場合、ブラウザが最も近いウェイトを選択するか、合成太字を生成します。
アクセシビリティ
- 太字だけで情報を伝えず、セマンティックHTML(strong)やARIA属性で意味を補完してください。