We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

font-weight は、フォントのウェイト(あるいは太さ) を指定するための CSS プロパティです。実際に表示されるフォントのウェイトは使用している font-family による場合があります。normal および bold のみ使用できるフォントもあります。

構文

/* Keyword values */
font-weight: normal;
font-weight: bold;

/* 親要素に対する相対値 */
font-weight: lighter;
font-weight: bolder;

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

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

font-weight プロパティは下記のリストにある単一のキーワード値を使って指定されます。

normal
通常のフォントウェイトとなります。400 に相当します。
bold
太字のフォントウェイトとなります。700 に相当します。
lighter
フォントウェイトを継承値よりも一段階細く設定します(フォントの利用可能なウェイトの中で)。
bolder
フォントウェイトを継承値よりも一段階太く設定します(フォントの利用可能なウェイトの中で)。
100, 200, 300, 400, 500, 600, 700, 800, 900
normalbold以上のものを提供するフォントに対する数値のフォントウェイト。

ウェイトのフォールバック

合致するウェイトが使用できない場合は、実際にレンダリングするウェイトを決定するために以下の発見法を使用します:

  • ウェイトが 500 より大きい場合は、太いウェイトでもっとも近いものを使用します (存在しない場合は、細いウェイトでもっとも近いものを使用します)。
  • ウェイトが 400 より小さい場合は、細いウェイトでもっとも近いものを使用します (存在しない場合は、太いウェイトでもっとも近いものを使用します)。
  • ウェイトがちょうど 400 である場合は、500 を使用します。500 が使用できない場合は、ウェイトが 400 より小さい場合の発見法を使用します。
  • ウェイトがちょうど 500 である場合は、400 を使用します。400 が使用できない場合は、ウェイトが 500 より大きい場合の発見法を使用します。

つまり normalboldだけのあるフォントでは、100-500normal で、600-900bold となります。

相対ウェイトの意味

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 の値は、おおよそ以下のウェイト名に対応します:

Common weight name
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)

補間

font-weight 値は離散値 (100 の倍数) によって補間されます。補間は実数の空間で行われ、もっとも近い 100 の倍数に丸めることによって整数に変換されます。100 の倍数の中間値は、正の無限大に向けて丸めます。

形式文法

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

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 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 にも適用されます。
継承継承する
メディアvisual
計算値the keyword or the numerical value as specified, with bolder and lighter transformed to the real value
アニメーションの種類font weight
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応212133.51.3
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応1 あり あり463.1 あり

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

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