Updated / Published

font-weightプロパティは文字のウエイト(重さ)を指定します。文字のウエイト(重さ)とは太さのことです。

  • normal
  • bold
  • bolder
  • lighter
  • 100-900
  • inherit
初期値
normal
適用対象
すべての要素
継承
する
メディア
visual

font-weightプロパティの値

値には絶対キーワードが2種類と相対キーワードが2種類に100から900までの数値を指定できます。

normal
標準(400相当)。
bold
太字表示(700相当)。
bolder
親要素より継承したフォントより重いウェイトのフォントに対応する数値の中で、最も近いフォントを要求。該当するウェイトのフォントがなければ、フォントを変更するのではなく、数値を100大きくする。継承値が既に900の場合は、それ以上太くならない。
lighter
親要素より継承したフォントより軽いウェイトのフォントに対応する数値の中で、最も近いフォントを要求。該当するウェイトのフォントがなければ、フォントを変更するのではなく、数値を100小さくする。継承値が既に100の場合は、それ以上細くならない。
100-900
100, 200, 300, 400, 500, 600, 700, 800, 900100刻みで指定。

数値指定は100から900の間で、100刻みで指定することができ、100が最も細く、900が最も太く表示される値になります。標準の "normal" のキーワードは数値指定の400に相当する太さで、"bold" が700に相当する太さです。なお、実際には100-500まではほとんど表示に変化がなく、600から太字で表示されるぐらいで、現状の UA では100から900までの数値指定は100-500が標準と600-900が太字の違いしか反映できていません。

font-weightプロパティの実装状況

IE
Firefox
Opera
Chrome
Safari
iOS
Android
◯:日本語書体の場合にAndroid4以降であれば標準フォントである Roboto の日本語書体にはモトヤフォントが採用されており太字表示が可能ですが、Android3以前の標準フォント 'Droid Sans' の日本語書体である Droid Sans Japanese では太字表示ができません(機種で個別に対応しているものもある)

サンプル

ul       { font-weight : normal ; }
.bold    { font-weight : bold ; }
.bolder  { font-weight : bolder ; }
.lighter { font-weight : lighter ; }
.s100     { font-weight : 100 ; }
.s200     { font-weight : 200 ; }
.s300     { font-weight : 300 ; }
.s400     { font-weight : 400 ; }
.s500     { font-weight : 500 ; }
.s600     { font-weight : 600 ; }
.s700     { font-weight : 700 ; }
.s800     { font-weight : 800 ; }
.s900     { font-weight : 900 ; }