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