font-weightプロパティは、フォントの太さ（重さ）を指定します。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

normal｜bold｜bolder｜lighter｜100｜200｜300｜400｜500｜600｜700｜800｜900｜inherit

初期値

normal

適用される要素

全ての要素

継承

します

パーセント値

N/A

メディア

visual

値の解説

100 - 900

9段階でフォントの太さが変化します。
100が最も細く900が最も太くなりますが、フォントファミリーに9段階の太さが無い場合や、UA（ブラウザなど）の実装によって数値を変更しても、変化が無い場合が有ります。（実際には2段階しか変化が有りません...）

normal

標準の太さ。400と同じです。

bold

太字。700と同じです。

bolder

継承された太さより1段階太くします。900の場合変化しません。

lighter

継承された太さより1段階細くします。100の場合変化しません。

font-weightのサンプル

ul li.sampleWeight01 {
  font-weight: normal;
}
ul li.sampleWeight02 {
  font-weight: bold;
}
ul li.sampleWeight03 {
  font-weight: bolder;
}
ul li.sampleWeight04 {
  font-weight: lighter;
}
ul li.sampleWeight05 {
  font-weight: 100;
}
ul li.sampleWeight06 {
  font-weight: 800;
}

<ul>
<li class="sampleWeight01">フォントの太さ。font-weight</li>
<li class="sampleWeight02">フォントの太さ。font-weight</li>
<li class="sampleWeight03">フォントの太さ。font-weight</li>
<li class="sampleWeight04">フォントの太さ。font-weight</li>
<li class="sampleWeight05">フォントの太さ。font-weight</li>
<li class="sampleWeight06">フォントの太さ。font-weight</li>
</ul>

殆ど変化が有りませんが、このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

• フォントの太さ。font-weight
• フォントの太さ。font-weight
• フォントの太さ。font-weight
• フォントの太さ。font-weight
• フォントの太さ。font-weight
• フォントの太さ。font-weight