フォントをtext-shadowで綺麗な太字にする方法！

2015/03/13 2017/09/10

2015-9-22：追記

この記事ではフォントの太さの調整に”text-shadow”を使う方法を提案していますが、最近WEBフォントの存在を知りこちらがより有意義な方法かもしれないと思い始めています。

従来のbold指定部分を、書体の美しいWEBフォント “Noto Sans Japanese” などに置き換えるのです。

参考Google 日本語WEBフォント “Noto Sans Japanese”の太字がかなり綺麗！

ブログなどで太文字表現をする際に、 font-weight:bold; っていう指定方法があります。個別記事タイトルやh2(みだし)などを強調してメリハリをつける事が出来ます。

ただこの”bold”ですが、フォントにメイリオを指定している場合とても野暮ったく見えて仕方ありません；；ダサイを通り越して馬鹿っぽく見えます、、、個人的見解ですけど。

text-shadowで太字表現！？

綺麗な太字が表示できない、、、過去に文字に影をつけるCSSである text-shadow を試してみたけどイマイチな仕上がりで妥協して”bold”を使い続けていました。

ところが最近ふと閃(ひらめ)きましたw

その結果がこちらです。

※この方法(text-shadow)は使用するフォントによっては見難くなってしまう事があります。”メイリオ” や “ＭＳＰゴシック” なら行ける気がします。

記事タイトルの部分です。

太文字Aは、 font-weight:bold; 指定。

太文字Bは、 text-shadow: 0.1px 0.5px 0 #333; 指定。

どうでしょうか見た感じ？

まあ、好みの問題かも。

text-shadowの値は、
｢横のずれpx　縦のずれpx　ほかしpx　#色｣となります。

さきほど閃いた＿と言った部分は”text-shadow”の各値に1px以下の数値を適用させてみた点です。ブラウザ上(firefox･ie･chrome)で表示が確認出来ました。正直スマートフォンでは怪しいです；；とくにAndroidでは、text-shadow自体は問題なく使用出来るようですが、ぼかし値に0を指定するとtext-shadowが無効になってしまうという情報がありましたので；；

このへんの詳細は未確認で御座います；；ただ仮にtext-shadowが適用されない場合でも通常のフォント表示になるだけですから、｢まっいいか｣＿って思っています。

あとディスプレイの解像度なども関係するかもしれません。いろいろ問題はあるわけですが、bold表示が好きではない私はあえて諸々のリスクを冒してでも｢影による太字｣を採用してみたわけです！

それにしても、text-shadowに1px以下の指定が有効だったとは、、、；；