CSSfont-weight プロパティは、フォントの重み (あるいは太さ) を指定します。実際に表示されるフォントの重みは使用している font-family に依存する場合があります。フォントによっては normal 及び bold のみで利用できます。

構文

/* キーワード値 */
font-weight: normal;
font-weight: bold;

/* 親要素に対して相対的なキーワード値 */
font-weight: lighter;
font-weight: bolder;

/* 数値のキーワード値 */
font-weight: 1
font-weight: 100;
font-weight: 100.6;
font-weight: 123;
font-weight: 200;
font-weight: 300;
font-weight: 321;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-weight: 1000;

/* グローバル値 */
font-weight: inherit;
font-weight: initial;
font-weight: unset;

font-weight プロパティは、以下の一覧から選択した単一のキーワードで指定します。

normal
通常のフォントの重みです。 400 と同じです。
bold
太字のフォントの重みです。 700 と同じです。
lighter
フォントの重みを親要素よりも (フォントで利用可能な重みの中で) 一段階細く設定します。
bolder
フォントの重みを親要素よりも (フォントで利用可能な重みの中で) 一段階太く設定します。
<number>
1 以上 1000 以下の <number> 値です。数値が大きいと、数値が小さい物より重みが太い (又は同じ) ことを表します。よく使用される値は、以下の一般的な重み名との対応にあるように、共通の重み名に対応しています。

font-weight 仕様書の古いバージョンでは、プロパティはキーワード値のみを受け付け、 100, 200, 300, 400, 500, 600, 700, 800, 900 の数値でした。 CSS Fonts Level 4 では、1~1000の任意の数値を受け付けるように構文を拡張しました。これにより、フォントの重みをもっと細かい範囲で提供する可変フォントが利用できます。なお、これはまだすべてのブラウザーが対応しているわけではありません。

重みのフォールバック

ちょうど一致する重みが利用できない場合、実際に表示される重みを定めるために以下の規則が使用されます。

  • 対象となる重みがが 400500 で指定された場合
    • 利用できる重みを、対象値から 500 までの間で昇順で探します。
    • 一致するものがなければ、対象値未満の利用できる重みを降順で探します。
    • 一致するものがなければ、 500 より大きい重みを昇順で探します。
  • 重みが 400 未満で指定された場合、対象値以下の重みを降順で探します。一致するものがなければ、対象値より大きい重みを昇順で探します。
  • 重みが 500 より大きく指定された場合、対象値以上の重みを昇順で探します。一致するものがなければ、対象値より小さい重みを降順で探します。

相対重みの意味

lighter または bolder を指定する場合は、要素の絶対的な重みを算出するために以下の表を使用します。

継承値 bolder lighter
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700

一般的な重み名との対応

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" バリエーションが様々な幅を実装するために使用されます。

以下の例を動作させるには、 CSS Fonts Level 4 の font-weight が 1~1000 の任意の数を取れる構文に対応したブラウザーが必要です。

HTML

<header>
    <input type="range" id="weight" name="weight" min="1" max="1000" />
    <label for="weight">Weight</label>
</header>
<div class="container">
    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
</div>

CSS

/*
Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans)
and is used here under the terms of its license:
https://github.com/LettError/mutatorSans/blob/master/LICENSE
*/

@font-face {
  src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf');
  font-family:'MutatorSans';
  font-style: normal;
}

label {
  font: 1rem monospace;
  white-space: nowrap;
}

.container {
  max-height: 150px;
  overflow-y: auto;
}

.sample {
  text-transform: uppercase;
  font: 1.5rem 'MutatorSans', sans-serif;
}

JavaScript

let weightLabel = document.querySelector('label[for="weight"]');
let weightInput = document.querySelector('#weight');
let sampleText = document.querySelector('.sample');

function update() {
  weightLabel.textContent = `font-weight: ${weightInput.value};`;
  sampleText.style.fontWeight = weightInput.value;
}

weightInput.addEventListener('input', update);

update();

形式文法

<font-weight-absolute> | bolder | lighter

where
<font-weight-absolute> = normal | bold | <number>

HTML

<p>
  Alice was beginning to get very tired of sitting by her sister on the
  bank, and of having nothing to do: once or twice she had peeped into the
  book her sister was reading, but it had no pictures or conversations in
  it, 'and what is the use of a book,' thought Alice 'without pictures or
  conversations?'
</p>

<div>I'm heavy<br/>
  <span>I'm lighter</span>
</div>

CSS

/* 段落のテキストを太字にします */
p {
  font-weight: bold;
}

/* div 要素のテキストの重みを normal より 2 段階太くしますが、
   標準的な bold より細くします */
div {
 font-weight: 600;
}

/* span 要素のテキストの重みを親要素より  
   1 段階細くします */
span {
  font-weight: lighter;
}

結果

アクセシビリティの考慮事項

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

仕様書

仕様書 策定状況 コメント
CSS Fonts Module Level 4
font-weight の定義
草案 font-weight で 1~1000 の任意の数を受け付けるよう定義。
CSS Fonts Module Level 3
font-weight の定義
勧告候補 変更なし
CSS Transitions
font-weight の定義
草案 font-weight がアニメーション可能と定義された
CSS Level 2 (Revision 1)
font-weight の定義
勧告 変更なし
CSS Level 1
font-weight の定義
勧告 初回定義

初期値normal
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承あり
メディア視覚
計算値the keyword or the numerical value as specified, with bolder and lighter transformed to the real value
アニメーションの種類font weight
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応212133.51.3
<number> syntax62 ?61 なし ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応1 あり あり463.1 あり
<number> syntax ?62 ?61 ? ? ?

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Uemmra3, momdo, aokashi, yyss, teoli, SphinxKnight, fscholz, Sebastianz, ethertank
最終更新者: mfuji09,