font-weight

概要

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

構文

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 より大きい場合の発見法を使用します。

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

相対ウェイトの意味

lighter または bolder を指定する場合は、要素の絶対的なウェイトを算出するために以下の表を使用します:

一般的なウェイト名との対応

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

結果

仕様

ブラウザ実装状況