font-weight: boldより更に文字を太くする方法を解説！

CSSのfont-weightプロパティは文字の太さを調整するプロパティです。指定できる値はboldやnormalなどキーワードでの指定と、100〜900など数値による指定が可能です。

font-weightプロパティについて構文や使い方を確認したい方は下記を参考にしましょう。

さて、このfont-weightプロパティですが、キーワードのboldを指定すると太字にすることが出来ます。

今回はこの太字の状態から、更に太くしたい場合にはどうするのか解説していきます。

font-weight: boldは数値の指定では700に相当します。数値の指定は900が一番太いので、まずは数値を900に設定してみて太さを確認しましょう。

フォントによってはfont-weightの値がboldでも900でも変わらない場合があります。この太さで問題なければ、これでOKで、もっと太くしたい方は続きを読みましょう。

font-weight: 900から更に文字を太くするにはtext-shadowで文字と同色で縁取りをします。

下記のサンプルコードを見てみましょう。

上記のプレビューの一番下にある、文字はfont-weight: 900よりも更に太く表示されます。

このtext-shadowを使った縁取りですが、今回は0.5px分だけ黒の影を上下左右斜めの8方向に付け影を重ねる事で縁取りを実現しています。

text-shadowの縁取りについて更に理解を深めたい方は下記を参考にしてみてましょう。