概要へ移動

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

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

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

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

（表） 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

bold、bolder、600以上の指定で太くなっている。

Emmet : fw

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