【font-weight】フォントの太さを指定

font-weightプロパティでは、フォントの太さを指定することができます。 値にboldを指定すると太字のフォントとなり、normal(初期値)を指定すると標準の太さ(未設定時の太さ)となります。

また上記のキーワード以外にも100~900の9種類の数値で指定することもできますが、それ以外の数値を指定してもフォントの太さが変更されることはありません。 なお数値で400はnormal相当、700はboldに相当する太さとなります。

書式

  • font-weight : ……… フォントの太さを指定する

★:normal、bold、数値、bolder、lighter、inherit

数値(100、200、300、400、500、600、700、800、900)
100~900の数値でフォントの太さを指定します。標準の太さを「400」として、それよりも数値が大きければ太いフォント、小さければ細いフォントとなります。ですが一般的なフォントファミリーには、これら9種類の太さが用意されているわけではないため、異なる数値を指定しても太さが変わらない場合があります。ですので、一般的にはキーワードの「bold」「normal」が使用されています。
normal
標準の太さのフォントです。数値で「400」を指定した場合と同じ太さとなります。
bold
太字のフォントです。数値で「700」を指定した場合と同じ太さとなります。
bolder、lighter
bolderを指定すると、数値の100~900の範囲で、現在の太さよりも1段階太くなり、lighterを指定すると現在の太さよりも1段階細くなります。ですが、該当する太さのフォントが用意されていない場合は、表示上の変化はありません(内部的に持つ値としては変更されます)。

使用した時の例

.sample1 {font-weight:normal;}
.sample2 {font-weight:bold;}
.sample3 {font-weight:lighter;}
.sample4 {font-weight:bolder;}
.sample5 {font-weight:100;}
.sample6 {font-weight:200;}
.sample7 {font-weight:300;}
.sample8 {font-weight:400;}
.sample9 {font-weight:500;}
.sample10 {font-weight:600;}
.sample11 {font-weight:700;}
.sample12 {font-weight:800;}
.sample13 {font-weight:900;}
<div class="sample1">「normal」初期値の太さです(400相当)</div>
<div class="sample2">「bold」太字です(700相当)</div>
<div class="sample3">「lighter」100~900の範囲で1段階細くなります</div>
<div class="sample4">「bolder」100~900の範囲で1段階太くなります</div>
<div class="sample5">「100」</div>
<div class="sample6">「200」</div>
<div class="sample7">「300」</div>
<div class="sample8">「400」</div>
<div class="sample9">「500」</div>
<div class="sample10">「600」</div>
<div class="sample11">「700」</div>
<div class="sample12">「800」</div>
<div class="sample13">「900」</div>

ブラウザ上の表示例

「normal」初期値の太さです(400相当)
「bold」太字です(700相当)
「lighter」100~900の範囲で1段階細くなります
「bolder」100~900の範囲で1段階太くなります
「100」
「200」
「300」
「400」
「500」
「600」
「700」
「800」
「900」

対応ブラウザなどのデータ

初期値 normal 値の継承 継承する
適用可能な要素 すべての要素
メディア visual / font
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~