【css】font-weightで文字を太くする方法！指定できる数値をわかりやすく解説

疑問ちゃん

文字を細くしたり、太くしたい！

そんな時はfont-weightです。

font-weightとは？

font-weightとは、文字を太くしたり、細くしたりできるプロパティです。

こんな感じに普通より太くできます。

p{
      font-weight: 指定できる値;
    }

セレクタに、font-weight：指定できる値;を記述するだけです。

セレクタについては上の記事が参考になると思います。

・100,200,300,400,500,600,700,800,900

9種類の数値で指定できます。フォントの種類によって実際に表示される太さが異なります。

100がもっとも細く、400が標準の太さで初期値、900がもっとも太くなります。

・bold

フォントの一般的な太字の太さにします。700を指定した場合と同様の結果になります。

・normal

フォントの標準の太さにします。400を指定した場合と同様の結果になります。

・bolder

一段階太くします。

・lighter

一段階細くします。

注意してほしいのが、太さを細かく指定できるようになってますが、日本語の環境では太さの異なる日本語フォントがそれほど多くインストールされていることは期待できません。なので値としてはシンプルに「bold」使用するのがいいでしょう。

またstrong要素など最初から太字の場合に、標準状態に戻した場合は、「nomal」を指定してあげましょう。

strong要素については上の記事が参考になると思います。

まとめ

font-weightが効かないって場合は、そのフォントが細かい数値に対応しているか調べて見るのがいいと思います。

それではまた。