font-weight

font-weight は、フォントの太さを指定する時に使用する属性です。

名前:font-weight
:normal | bold | bolder | lighter | <number>
初期値:normal
適用対象:全ての要素
継承:する
パーセンテージ:n/a
メディア:visual(視覚的)
計算値:numeric weight value(数値のweight値)
正規順序:per grammar(文法ごと)
アニメーション:discrete(離散的)

Value(値)

normal
初期値(normal=数値の400)
数値
100~900の数値を100刻み「100、200、300、400、500、600、700、800、900」で指定。(フォントの種類によっては、数値に応じた太さが無い場合もある。)
bold
太字(bold=数値の700)
lighter
一段階細くなる(数値100が指定されている時は太くできません。)
bolder
一段階太くなる(数値900が指定されている時は太くできません。)

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { font-weight: normal; }
   p.test2 { font-weight: 500; }
   p.test3 { font-weight: bold; }
   p.test4 { font-weight: lighter; }
   p.test5 { font-weight: bolder; }
  </style>
 </head>
 <body>
   <p class="test1">normal</p>
   <p class="test2">500</p>
   <p class="test3">bold</p>
   <p class="test4">lighter</p>
   <p class="test5">bolder</p>
 </body>
</html>

display

normal

500

bold

lighter

bolder

weight値 詳細

<値と名前>
weight name和訳
100Thin極細
200Extra Light (Ultra Light)超細
300Light
400Normal標準 (Regular)
500Medium
600Semi Bold (Demi Bold)やや太
700Bold
800Extra Bold (Ultra Bold)超太
900Black (Heavy)極太
<書体とweight値サンプル>
A A A A A A A A A
100200300 400500600 700800900

三角矢印 書体に数値に応じたweight値が無い場合は、それに近いweight値に置き換えられます。

上に戻る