Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

この記事は技術レビューを必要としています。ぜひご協力ください

概要

font-weight は、フォントのウェイト(あるいは太さ)を指定するための CSS プロパティです。normal および bold のみ使用できるフォントもあります。

初期値normal
適用対象全要素. It also applies to ::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
正規順序形式文法で定義される一意のあいまいでない順序

構文

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;

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

フォールバック

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

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

このセクションは、技術的レビュー待ちの状態です

第 3 項および 4 項は元々以下のようになっていました:

  • ウェイトがちょうど 400 である場合は、500 を使用します。500 が使用できない場合は、500 より小さい場合の発見法を使用します。
    • 問題点: "フォントウェイトが 500 より小さい場合" の発見法はありません。第 2 の発見法により、これは "400 より小さい場合" であると思われます。
  • ウェイトがちょうど 500 である場合は、400 を使用します。400 が使用できない場合は、400 より小さい場合の発見法を使用します。
    • 問題点: このケースでは第 2 の発見法が "500 より小さい場合" になっていますので、この発見法は冗長です。第 1 の発見法により、これは "500 より大きい場合" であると思われます。

この修正点がコードベースに基づく規則と合っているかを確認して、警告ボックスを削除してください。

これは、normal および bold しか提供しないフォントでは 100 から 500 が normal、600 から 900 が bold になることを意味します。

相対ウェイトの意味

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)

補間

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 の定義
勧告 初期の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 2.0 1.0 (1.7 or earlier) 3.0 3.5 1.3
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 1.0 1.0 (1.0) 6.0 6.0 3.1

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

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