CSSリファレンス

font-weightの意味と使い方

「font-weight」はフォントの太さを指定します。「bold」を指定すると一般的な太字になります。同じフォントファミリーに異なる太さのフォントがある場合、「lighter」は1段階細いフォントに、bolderは1段階太いフォントに設定されます。また、太さは100〜900の数値で指定することもできます。(実際には9段階の違いをブラウザ上で表現できる環境はほとんどありません。特に日本語の場合は、標準状態か太字の2段階しか表現できないことがほとんどです。現実的にfont-weightの値は「normal」か「bold」のいずれかであると考えておくのが妥当です)

値の指定方法

数値

標準の太さを400とし、数値が大きくなればより太いフォント、数値が小さくなればより細いフォントで表示されます。全てのフォントが100, 200, 300, 400, 500, 600, 700, 800, 900の9種類の太さを揃えているわけではないので、指定した値によっては太さが変わらないこともあります。


normal

標準の太さ。数値で400を指定した場合と同じ効果になります。


bold

太字のフォント。数値で700を指定した場合と同じ結果になります。


bolder,lighter

現在のフォントよりも太い、もしくは細いフォントを指定します。該当する太さのフォントが利用できない場合は、表示上の変化はありません。


関連プロパティ

  • font:フォントに関する指定をまとめて行う
  • font-style:フォントをイタリック体・斜体にする