文字の太さを設定する

font-weightで文字を装飾することができます。

100～900までの数字で設定する方法と、boldなどのキーワードを指定する方法があります。
100が一番細く、900が一番太い設定で、400が標準の太さの設定です。
100～900の９種類がありますが、ブラウザによっては太さが変わらない場合もあります。

また、キーワードにはnormal(普通)、bold(太い)、bolder(現在より１段階太い)、lighter(現在より１段階細い)があります。

一般的にboldを使います。

例

<div style="font-weight:100">100の設定</div>
<div style="font-weight:200">200の設定</div>
<div style="font-weight:300">300の設定</div>
<div style="font-weight:400">400の設定</div>
<div style="font-weight:500">500の設定</div>
<div style="font-weight:600">600の設定</div>
<div style="font-weight:700">700の設定</div>
<div style="font-weight:800">800の設定</div>
<div style="font-weight:900">900の設定</div>
<div style="font-weight:normal">normalの設定</div>
<div style="font-weight:bold">boldの設定</div>
<div style="font-weight:bolder">bolderの設定</div>
<div style="font-weight:lighter">lighterの設定</div>

結果

100の設定

200の設定

300の設定

400の設定

500の設定

600の設定

700の設定

800の設定

900の設定

normalの設定

boldの設定

bolderの設定

lighterの設定

まとめ

文字の装飾はtext-decorationで設定する。
00～900までの数字で設定する方法と、boldなどのキーワードを指定する方法がある。

文字の太さを設定する

例

結果

まとめ

関連リンク