【CSS】文字の太さを変えたいなら、font-weightプロパティを使う！

文字の太さを変えたい時に便利なのが、font-weightプロパティだ。

• 「見出しをもっと太くして目立つようにしたい！」
• 「ここの文字は少し細めにしたい！」

という時にこのfont-weightが使える。

文字を太くしたい場合はfont-weight:bold

文字を太くしたい場合に手っ取り早いのは

font-weight:boldを設定することだ。

表示される画面（↓枠線内）

こんな感じで文字の太さをサクッと変更できる。

文字の太さを細くするなら、font-weight:lighter

文字を太くすることが出来るなら、逆も出来る。

文字を細くしたいなら、

font-weight:lighterを設定すればいい。

ただし、font-weight:boldによって太字になるけど、font-weight:lighterを設定しても細字にならないことが多々ある。

それは使用するフォント（游ゴシック体など）で細字の設定が用意されていないからなのだ。

数値で文字の太さを指定することも可能！

• 「font-weight:bold よりも少しだけ太くしたい！」
• 「通常よりは太くしたいけど、boldよりは細めにしたい！」

もちろん、そういう要望だって色々出てくるはずだ。

そういう時は　font-weight:数値　と指定してしまえばOKだ。

指定する数値は100刻みで設定する。

• font-weight:100
• font-weight:200
• font-weight:300
• font-weight:400
• font-weight:500
• ...

って感じで設定をしていけばいい。

ちなみにfont-weight:normal が通常の文字の太さなのだが、数値としては400だ。

boldは数値としては700だ。

これも使うフォントによって数値設定で細かく指定しても、boldで太字にするぐらいしかできない場合があるのが悲しいところだ。