font-weight（フォントの太さ）プロパティ

最終更新：2026-09-13

font-weight font-weight（フォントの太さ）プロパティ

font-weight プロパティはテキストの太さを設定します。名前付きキーワードのほか、1〜1000 の数値を受け付け、太字は見出しや強調によく使われます。

カテゴリ
初期値	normal
継承	はい
適用対象	all
アニメーションタイプ	font-weight
CSS バージョン	CSS1
状態	標準

📝 構文

font-weight: normal | bold | bolder | lighter | <number [1,1000]>;

⚙️ 値

値	タイプ	説明
`normal \| bold \| bolder \| lighter`	キーワード	定義済みの太さのキーワード
`<number [1,1000]>`	タイプ	数値による太さ（例: 400 や 700）

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
font-weight	✓ v2	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： 400 は normal、700 は bold と等価です。これらが最もよく使われる 2 つの値です。

注意： すべてのフォントがすべての太さを持っているわけではありません。不足している太さはブラウザーによって最も近い利用可能なものに一致され、描画結果が異なる場合があります。

❓ よくある質問

Qfont-weight の bolder と lighter キーワードの意味は何ですか？

Aこれらは相対キーワードです。bolder は親要素より 1 段階太く、lighter は 1 段階細くします。たとえば親が 400 の場合、bolder は 700 に解決されます。親がすでに最も太い場合はそのままです。継承された相対調整に便利ですが、数値の方がより正確に制御できます。

QCSS の font-weight プロパティで数値を使うにはどうすればよいですか？

Aこのプロパティは 1〜1000 の数値を受け付けます。通常のフォントは 100 単位の太さ（100、200、…、900）しか用意していないことが多く、400 が normal、700 が bold に対応します。可変フォント（variable font）は中間の任意の値を取れ、CSS で太さの遷移をアニメーションさせることもできます。

Qfont-weight: bold を設定してもテキストに効果が見られないのはなぜですか？

A一般的な原因は次のとおりです。選択したフォントに太字のフェイスがないため、ブラウザーが最も近い太さに置き換えるか太字を合成する。あるいは後続のルールが宣言を上書きしている。中国語のシステムフォントは通常 regular と bold の 2 段階しかなく、800 や 900 などの値は bold に吸収されて見た目が変わりません。