font-weight
Updated / Published
font-weightプロパティは文字のウエイト(重さ)を指定します。文字のウエイト(重さ)とは太さのことです。
- 値
normalboldbolderlighter100-900inherit
- 初期値
normal- 適用対象
- すべての要素
- 継承
- する
- メディア
- visual
font-weightプロパティの値
値には絶対キーワードが2種類と相対キーワードが2種類に100から900までの数値を指定できます。
normal- 標準(
400相当)。 bold- 太字表示(
700相当)。 bolder- 親要素より継承したフォントより重いウェイトのフォントに対応する数値の中で、最も近いフォントを要求。該当するウェイトのフォントがなければ、フォントを変更するのではなく、数値を
100大きくする。継承値が既に900の場合は、それ以上太くならない。 lighter- 親要素より継承したフォントより軽いウェイトのフォントに対応する数値の中で、最も近いフォントを要求。該当するウェイトのフォントがなければ、フォントを変更するのではなく、数値を
100小さくする。継承値が既に100の場合は、それ以上細くならない。 100-900100,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 ; }