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

2020年11月27日 2024年10月7日

文字の太さを変えたい時に便利なのが、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で太字にするぐらいしかできない場合があるのが悲しいところだ。