【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で太字にするぐらいしかできないのが悲しいところだ。

スポンサーリンク
おすすめの記事