font-weight

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

試してみましょう

font-weight: normal;

font-weight: bold;

font-weight: lighter;

font-weight: bolder;

font-weight: 100;

font-weight: 900;

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

section {
  font-size: 1.2em;
}

構文

css
/* <font-weight-absolute> キーワード値 */
font-weight: normal;
font-weight: bold;

/* <font-weight-absolute> 数値のキーワード値 [1,1000] */
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: lighter;
font-weight: bolder;

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

font-weight プロパティは、<font-weight-absolute> 値または以下の一覧にある相対的な太さの値で指定します。

値

normal

通常のフォントの太さです。 400 と同じです。

bold

太字のフォントの太さです。 700 と同じです。

<number>

1 以上 1000 以下の <number> 値です。数値が大きいと、数値が小さいものより太さが太い（または等しい）ことを表します。これにより、可変フォントをきめ細かく制御することができます。可変フォントではない場合、指定した通りの太さが利用できない場合は、太さの代替アルゴリズムが使用されます。100 で割り切れる数値は、下記の一般的な太さ名との対応の節で説明されている一般的な太さ名に対応しています。

lighter

フォントの太さが親要素よりも相対的に 1 つ細くなります。相対的な太さの計算に考慮されるフォントの太さは 4 つのみであることに注意してください。下記の相対的な太さの意味を参照してください。

bolder

フォントの太さが親要素よりも相対的に1つ太くなります。相対的な太さの計算に考慮されるフォントの太さは 4 つのみであることに注意してください。下記の相対的な太さの意味を参照してください。

太さの代替

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

  • 対象となる太さがが 400～500 で指定された場合

    • 利用できる太さを、対象値から 500 までの間で昇順で探します。
    • 一致するものがなければ、対象値未満の利用できる太さを降順で探します。
    • 一致するものがなければ、 500 より大きい太さを昇順で探します。

  • 太さが 400 未満で指定された場合、対象値以下の太さを降順で探します。一致するものがなければ、対象値より大きい太さを昇順で探します。

  • 太さが 500 より大きく指定された場合、対象値以上の太さを昇順で探します。一致するものがなければ、対象値より小さい太さを降順で探します。

メモ: 代替のウェイトアルゴリズムはレンダリングだけに使用されます。プロパティの計算値は指定値のままです。

相対的な太さの意味

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

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

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

このデモでは、font-weight: 500; を設定して読み込みます。 .sample セレクター内にある font-weight プロパティの値を変更すると、テキストの太さが変わります（200、700、など）。下記のコードブロック内の "Play" をクリックするとこの例を MDN Playground で編集できます。

html
<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>
css
@font-face {
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/MutatorSans.ttf");
  font-family: "MutatorSans";
  font-style: normal;
  font-weight: 1 1000;
}

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

アクセシビリティ

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

公式定義

初期値normal
適用対象すべての要素とテキスト。 ::first-letterおよび::first-line にも適用されます。
継承あり
計算値指定された通りのキーワードまたは数値であり、 bolder および lighter は実数に変換される
アニメーションの種類フォントの太さ

形式定義

font-weight = 
  <font-weight-absolute>  |
  bolder                  |
  lighter                 

<font-weight-absolute> = 
  normal             |
  bold               |
  <number [1,1000]>

例

フォントの太さの設定

HTML

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

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

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

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

結果

仕様書

Specification
CSS Fonts Module Level 4
# font-weight-prop

ブラウザーの互換性

関連情報