CSS

この記事では、文字の太さを指定するCSSのfont-weightプロパティと、数値・boldの使い分けを説明します。

font-weight

　font-weightプロパティは、フォントの太さを指定する際に使用します。 9段階の太さを指定することができますが、一般的なフォントでは9種類の太さが用意されていることはあまりなく、フォントの太さとして実際に指定する値は「bold」のみで事足りることが多いようです。

数値で指定した場合のサンプル

テキスト ( Text )：標準
テキスト ( Text )：100
テキスト ( Text )：200
テキスト ( Text )：300
テキスト ( Text )：400 (= 標準)
テキスト ( Text )：500
テキスト ( Text )：600
テキスト ( Text )：700 (= bold)
テキスト ( Text )：800
テキスト ( Text )：900

キーワードで指定した場合のサンプル

テキスト ( Text )：標準
テキスト ( Text )：normal
テキスト ( Text )：bold
テキスト ( Text )：lighter
テキスト ( Text )：bolder

数値で指定した場合


テキスト ( Text )：標準<br>
<span style="font-weight:100;">テキスト ( Text )：100</span><br>
<span style="font-weight:200;">テキスト ( Text )：200</span><br>
<span style="font-weight:300;">テキスト ( Text )：300</span><br>
<span style="font-weight:400;">テキスト ( Text )：400 (= 標準)</span><br>
<span style="font-weight:500;">テキスト ( Text )：500</span><br>
<span style="font-weight:600;">テキスト ( Text )：600</span><br>
<span style="font-weight:700;">テキスト ( Text )：700 (= bold)</span><br>
<span style="font-weight:800;">テキスト ( Text )：800</span><br>
<span style="font-weight:900;">テキスト ( Text )：900</span>

キーワードで指定した場合


テキスト ( Text )：標準<br>
<span style="font-weight:normal;">テキスト ( Text )：normal</span><br>
<span style="font-weight:bold;">テキスト ( Text )：bold</span><br>
<span style="font-weight:lighter;">テキスト ( Text )：lighter</span><br>
<span style="font-weight:bolder;">テキスト ( Text )：bolder</span>

値

数値で指定

　100、200、300、400、500、600、700、800、900でフォントの太さを指定します。太さが9種類用意されているフォントはあまりないため、数値を上下させても太さが変化しないことがあります。標準の太さは400で、数値が小さくなるほど細く、大きくなるほど太くなります。

キーワードで指定

normal: 標準の太さです。（数値で400を指定した場合と同じ）
bold: 一般的な太字の太さです。（数値で700を指定した場合と同じ）
lighter: 相対的に一段階細くします。
bolder: 相対的に一段階太くします。
inherit: 継承。