フォントのサイズはこれ以上調整できない、フォントの太さもBoldにしているのでこれ以上太くできない。
そんな時にtext-shadowを使うことで文字を太く見える方法があったのでメモします。もっとよりよい方法があれば教えていただきたいです。
ゴール
- フォントサイズ（font-size）はいじらない
- フォントの太さ（font-weight）もいじらない
- それでも、文字を大きく見せたい
画像：
対応
CSSのtext-shadowを使う。
/* offset-x | offset-y | blur-radius | color */ text-shadow: 0 0 1px black
offset-x, offset-yを設定することで、影を作る文字との相対的な位置を指定します。
blur-radiusでぼかす大きさを指定します。文字を大きくする目的ではあまり大きい値は設定できません。中途半端に大きくすると文字がにじんで見づらいです。大きい場合は、本来の目的の影を付けることができます。
colorは影の色を指定できます。
詳しい内容は参考情報を参考にしてください。もしくは、Codepenで動作確認してみてください。
ソースコード
<p class="font">文字サイズ24px</p> <p class="font bold">文字サイズ24px bold</p> <p class="font bold shadow">文字サイズ24px bold shadow</p>
.font{ font-size: 24px; } .bold{ font-weight: bold; } .shadow{ text-shadow: 0px 0px 1px black; }
終わりに
font-size, font-weightで今まで対応してきたのですが、それ以外の方法でアプローチしなければならない事象に遭遇してしまいました。
CSS難しい…。
この記事がお役に立ちましたら、各種SNSでのシェアや、今後も情報発信しますのでフォローよろしくお願いします。
参考情報
