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-face ルールで指定されたフォントの太さを指定することができます。別に font-weight プロパティを使用して、テキストを表示する文字の太さや細さを設定することができます。

特定のフォントファミリーについて、同じフォントファミリーの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 font-weight 記述子を使用してフォントフェイスの太さを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。

一般に、特定のフォントファミリーには限られた太さのみが利用できます。指定された太さが存在しない場合、近い太さが使用されます。太字がないフォントでは、ふつうはユーザーエージェントが合成します。これを抑止するには、 font-synthesis プロパティを使用してください。

構文

css
/* 単一の値 */
font-weight: normal;
font-weight: bold;
font-weight: 400;

/* 複数の値 */
font-weight: normal bold;
font-weight: 300 500;

font-weight プロパティは、以下に挙げる値のうちの一つを使用して記述します。

値

normal

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

bold

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

<number>

1 以上 1000 以下の <number> 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の一般的な太さの名前との対応にあるように、共通の太さの名前に対応しています。

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

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

一般的な太さの名前との対応

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

アクセシビリティの考慮

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

公式定義

関連するアット規則@font-face
初期値normal
計算値指定通り

形式文法

font-weight = 
  auto                         |
  <font-weight-absolute>{1,2}  

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

例

@font-face ルールにおける通常のフォントの太さの設定

以下の例は、ローカルの Open Sans フォントを見つけるか、またはそれをインポートして、通常の太さのフォントを使用することができます。

css
@font-face {
  font-family: "Open Sans";
  src:
    local("Open Sans") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-weight: 400;
}

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報