このページで解説するコードの実行結果。

実行結果
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

フォントの太さを指定する。普通はboldくらいしか使わない。

なぜならば、普通のフォント・ファミリーfont-familyは、2種類くらいの太さしか用意してないから。

(表) font-weightの設定値
設定値太さデフォルト
normal普通
bold太い
bolderより太い
lighterより細い
100一番細い
200
300
400normalと同じ
500
600
700boldと同じ
800
900一番太い

CSS : font-weight
.normal {    font-weight:   normal;  }
.bold   {    font-weight:   bold;    }
.bolder {    font-weight:   bolder;  }
.lighter{    font-weight:   lighter; }
.w100   {    font-weight:   100;  }
.w200   {    font-weight:   200;  }
.w300   {    font-weight:   300;  }
.w400   {    font-weight:   400;  }
.w500   {    font-weight:   500;  }
.w600   {    font-weight:   600;  }
.w700   {    font-weight:   700;  }
.w800   {    font-weight:   800;  }
.w900   {    font-weight:   900;  }
div {
    color:              navy;           /*  文字の色 */
    border:             2px solid blue; /*  境界線 */
    margin:             5px;            /*  外側の余白 */
    padding:            5px 10px;       /*  内側の余白 */
    font-size:          2em;            /*  文字の大きさ */
    display:            inline-block;   /*  横並び */
}
HTML : 適用するHTML
<div class="normal">  normal     </div>
<div class="bold">    bold       </div>
<div class="bolder">  bolder     </div>
<div class="lighter"> lighter    </div>
<div class="w100">    100        </div>
<div class="w200">    200        </div>
<div class="w300">    300        </div>
<div class="w400">    400        </div>
<div class="w500">    500        </div>
<div class="w600">    600        </div>
<div class="w700">    700        </div>
<div class="w800">    800        </div>
<div class="w900">    900        </div>
実行結果
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

boldbolder600以上の指定で太くなっている。

Emmet : fw

記述Visual Studio Code
fwfont-weight: normal;
fwbfont-weight: bold;
fwbrfont-weight: bolder;
fwlrfont-weight: lighter;