
HTML、CSSコーディングでサイト模写をしていて、お手本のサイト通りに文字の太さを変えたい。font-weightプロパティで標準の太さを表すnormalと太字を表すboldならよく使うから分かるけど、もう少し太さを微調整したいのになあ。という疑問にお答えします。
CSSで文字の太さを微調整する方法についてご紹介します。
ボクもnormalかboldしか使わないのだけれど、サイト模写をしていてお手本サイトの文字を見ると、アレっ?これなんかfont-weightがnormalよりも細いなあということがあって、意外とfont-weightを細くしたり、微調整する方法を知らなかったので、今回ご紹介します。
それでは、CSSで文字の太さを微調整する方法についてみてみましょう。
CSSで文字の太さを微調整する方法

font-weightプロパティーで、数字で太さを調節できる方法があります。
100から900までの数字を使って文字、フォント、テキストの太さを調節します。
font-weightがnormalは、数値では400で表せます。
font-weightがboldは、数値では700で表せます。
以上から、100が一番細字で、900が一番太字になります。
normalより細くしたいとき:300〜100を設定します。
boldより太くしたいとき:800か900を設定します。
例えば、試したところ、font-sizeが150pxの大きな文字では、font-weightのnormalより細くはできない感じでした。すなわち400以下の細さは設定しても文字の太さは変わりませんでした。
まず、通常の太さであるnormalがこちら。

つぎに、一番細くするために、font-weightを100にしてみました。それがこちらで、太さが変わってないのが分かります。

まとめ
ということですね。
以上、normalとboldは日常的に使うので、覚えているけれど、数値で太さを変えたり、normalより細くする方法は意外と記憶から消えてしまいがちですね。
少しでも数値をいじって試してみると、記憶に残りやすいです。
それでは、サイト模写や、HTML、CSSの習得ってかなり大変ですが、コツコツと積み上げて行きましょう。
コメント