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

2020年11月27日 2020年11月27日

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

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

Contents

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

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

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

<!--HTML-->
<p>この文字は通常</p>
<p class="fwb">この文字は太字に変更</p>

/*CSS*/
.fwb{font-weight:bold;}

<p>この文字は通常</p>

<p class="fwb">この文字は太字に変更</p>

/*CSS*/

.fwb{font-weight:bold;}

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

この文字は通常

この文字は太字に変更

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

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

文字を細くしたいなら、

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

まぁ初心者の僕は太くするばかりで細くする方はあまり使ったことはない(笑)

しかもだ！

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

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

そういうわがままな要望だって色々出てくるはずだ。

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

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

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

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

boldは数値としては700だ。

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