font-weightでフォントの太さを指定する【CSS】

font-weightはフォントの太さを指定するプロパティです。

{font-weight: 太さ;}

font-weightではboldという値を指定することが多いですが、他にもフォントの太さを指定する方法があります。

フォントの太さの指定方法

font-weightで太さの値を指定する方法は以下のようなものがあります。

まず数値による指定方法ですが、100、200、300、400、500、600、700、800、900の9段階で指定することができます。

ただし、この9段階に対応しているフォントは少なくて、ブラウザもすべての値を正確には反映することはできません。

ちなみに600以上で太文字が適用されます。

normalは通常の太さです。

数値だと400を指定したときと同じ太さになります。

boldを指定すると太字になります。

数値の700を指定した場合と同じ太さといわれていますが、600と比較してみてもあんまり違いがわからないです。

太字（600）
太字（bold）

上の太字が数値の600を指定した文字で、下の太字がboldで指定した文字です。

bolderは継承した値を基準にして、相対的に1段階太く表示します。

1段階というのは数値にして+100です。

たとえば、500が基準になっていて1段階太くなると600になります。

lighterはbolderと反対で、継承した値を基準にして、相対的に1段階細く表示します。

1段階細くなるというのは、数値にして-100ということです。