font-weight

font-weightCSS のプロパティで、フォントの太さ (あるいは重み) を指定します。実際に表示されるフォントの太さは、現在設定されている font-family に依存する場合があります。

構文

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

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

/* 数値のキーワード値 */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;// normal
font-weight: 500;
font-weight: 600;
font-weight: 700;// bold
font-weight: 800;
font-weight: 900;

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

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

normal
通常のフォントの太さです。 400 と同じです。
bold
太字のフォントの太さです。 700 と同じです。
lighter
フォントの太さが親要素よりも相対的に1つ細くなります。相対的な太さの計算には、フォントの太さが4つのみ考慮されることに注意してください。下記の相対的な太さの意味を参照してください。
bolder
フォントの太さが親要素よりも相対的に1つ太くなります。相対的な太さの計算には、フォントの太さが4つのみ考慮されることに注意してください。下記の相対的な太さの意味を参照してください。
<number>
1 以上 1000 以下の <number> 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の一般的な太さ名との対応にあるように、共通の太さ名に対応しています。

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

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

太さのフォールバック

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

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

相対的な太さの意味

以下の表は、 lighter または bolder を指定する場合に要素の絶対的な太さを算出する方法を示しています。

なお、相対的な太さを使用した場合、 thin (100), normal (400), bold (700), heavy (900) の4つの太さのみが考慮されます。 font-family でもっと多くの太さが利用できる場合であっても、相対的な太さの計算の用途では無視されます。

継承値 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 の数値は、おおよそ以下の太さ名に対応します (OpenType 仕様書を参照してください)。

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

可変フォント

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

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 の値が 100 (Thin/Hairline) または 200 (Extra Light) の場合、特にフォントのコントラスト比が低い場合は、テキストを読むのが難しくなることがあります。

公式定義

初期値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

形式文法

<font-weight-absolute> | bolder | lighter

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]>

Setting font weights

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;
}

結果

仕様書

仕様書 状態 備考
CSS Fonts Module Level 4
font-weight の定義
草案 font-weight で 1~1000 の任意の数を受け付けるよう定義。
CSS Fonts Module Level 3
font-weight の定義
勧告候補 変更なし
CSS Level 2 (Revision 1)
font-weight の定義
勧告 変更なし
CSS Level 1
font-weight の定義
勧告 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
font-weightChrome 完全対応 2Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
<number> syntaxChrome 完全対応 62Edge 完全対応 17Firefox 完全対応 61IE 未対応 なしOpera 完全対応 49Safari 完全対応 11WebView Android 完全対応 62Chrome Android 完全対応 62Firefox Android 完全対応 61Opera Android 完全対応 46Safari iOS 完全対応 11Samsung Internet Android 完全対応 8.0

凡例

完全対応  
完全対応
未対応  
未対応