CSSの文字の太さを微調整する方法【意外と知らない?】

CSS
HTML、CSSコーディングでサイト模写をしていて、お手本のサイト通りに文字の太さを変えたい。font-weightプロパティで標準の太さを表すnormalと太字を表すboldならよく使うから分かるけど、もう少し太さを微調整したいのになあ。という疑問にお答えします。

HTML、CSSコーディングでサイト模写をしていて、お手本のサイト通りに文字の太さを変えたい。font-weightプロパティで標準の太さを表すnormalと太字を表すboldならよく使うから分かるけど、もう少し太さを微調整したいのになあ。という疑問にお答えします。

CSSで文字の太さを微調整する方法についてご紹介します。

ボクもnormalかboldしか使わないのだけれど、サイト模写をしていてお手本サイトの文字を見ると、アレっ?これなんかfont-weightがnormalよりも細いなあということがあって、意外とfont-weightを細くしたり、微調整する方法を知らなかったので、今回ご紹介します。

それでは、CSSで文字の太さを微調整する方法についてみてみましょう。

CSSで文字の太さを微調整する方法

CSSで文字の太さを微調整する方法

font-weightプロパティーで、数字で太さを調節できる方法があります。

100から900までの数字を使って文字、フォント、テキストの太さを調節します。

font-weightがnormalは、数値では400で表せます。

font-weightがboldは、数値では700で表せます。

以上から、100が一番細字で、900が一番太字になります。

normalより細くしたいとき:300〜100を設定します。

boldより太くしたいとき:800か900を設定します。

ただし、文字の種類やサイズなどに依存するみたいなので、100〜900のすべてに対して設定が効く訳ではない感じですので、その辺は変更しつつ試してみましょう。

例えば、試したところ、font-sizeが150pxの大きな文字では、font-weightのnormalより細くはできない感じでした。すなわち400以下の細さは設定しても文字の太さは変わりませんでした。

まず、通常の太さであるnormalがこちら。

まず、通常の太さであるnormalがこちら。

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

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

まとめ

  • font-weightの微調整には、font-weightプロパティの100〜900までの数値で設定できる。
  • normalは400、boldは700と同じ。
  • 使う文字サイズやfont-familyなど、環境に依存するので、100〜900まですべての数値が適用される訳ではないので、その辺は試して確認。

ということですね。

以上、normalとboldは日常的に使うので、覚えているけれど、数値で太さを変えたり、normalより細くする方法は意外と記憶から消えてしまいがちですね。

少しでも数値をいじって試してみると、記憶に残りやすいです。

それでは、サイト模写や、HTML、CSSの習得ってかなり大変ですが、コツコツと積み上げて行きましょう。

コメント

タイトルとURLをコピーしました