メイリオフォント を指定してしたテキストを、Windows のGoogle Chrome から見たら「文字が潰れて表示される…」なんて場合に、CSSのtext-shadowを使った回避策のご紹介です。
もっとスマートな方法が他にもあるのかもしれませんが、今回はテキストの周囲にうっすら同色の影を付け、「肉付け」させることで潰れて見るのを防ぐ方法になります。
text-shadow でフォントが潰れないように表示させてみる
CSSのtext-shadowプロパティを使えば、アンチエイリアスがかかったような見え方になります。|
1 2 3 4 5 |
.font { font-family: "メイリオ","Meiryo"; color:#000; text-shadow:0 0 1px rgba(0,0,0,0.4) } |
text-shadowの値を変更することで、テキストの太さを微調整することもできます。
↓Windows のGoogle Chromeからだとギザって見える以下の文字が
↓text-shadowの処理を施すことで、このように見え方が変化します。
コメント