font-weight
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
,900
の100
刻みで指定。
数値指定は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 ; }