font-weight

表示するフォントのウェイト (太さ) を指定する

Last update: 2008-08-19

指定した要素内に表示するフォントの大きさををfont-weight: プロパティ値によって設定する。
プロパティ値にはキーワードか数値を定義する。それぞれのプロパティ値は以下の通り。

normal
指定したフォントファミリの標準フォントを表示する
bold
指定したフォントファミリの Bold フォントで表示する
lighter
親要素に指定されたフォントよりも一段細いフォントで表示するが、ファミリに該当フォントがなければ変更されない
bolder
親要素に指定されたフォントよりも一段太いフォントで表示するが、ファミリに該当フォントがなければ変更されない
100, 200, 300, 400, 500, 600, 700, 800, 900
指定したフォントファミリの中で、数値によってどのサイズを表示するかを指定する
400 が標準サイズで、小さい数値は細く、大きい数値は太くなる
700 は bold に相当する
inherit
親要素の値を継承する

テスト

欧文フォント

Futra を指定した。これは Windows ではユーザがインストールしていなければ存在しないと思う。Mac OS はデフォルトでインストールされている。
各 dd 要素に font-weight プロパティを設定した。ちなみに Futura のファミリは Bold, Bold Italic, Italic の４書体を、Adobe のフォントをインストールしていれば7書体のファミリを持っている。

normal
The quick brown fox jumps over the lazy dog
bold
The quick brown fox jumps over the lazy dog
lighter
The quick brown fox jumps over the lazy dog
bolder
The quick brown fox jumps over the lazy dog
200
The quick brown fox jumps over the lazy dog
500
The quick brown fox jumps over the lazy dog

よく分からないが、Normal と Bold のコントロールが利いていない。Safari も同じ。CSS の書き方に問題があるのだろうか？

日本語フォント

フォント指定は "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", sans-serif、各 dd 要素に font-weight プロパティを設定した。

normal
あのイーハトーヴォのすきとほった風
bold
あのイーハトーヴォのすきとほった風
lighter
あのイーハトーヴォのすきとほった風
bolder
あのイーハトーヴォのすきとほった風
200
あのイーハトーヴォのすきとほった風
500
あのイーハトーヴォのすきとほった風

結果は欧文フォントと同様のはずだ。

▲ Return to Top