• RSS

[CSS]Windows のChrome でメイリオフォントが潰れて表示される場合の対処法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

メイリオフォント を指定してしたテキストを、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 からだとギザって見える以下の文字が
Windows のChrome でメイリオフォントが潰れて表示される場合の対処法

↓text-shadow の処理を施すことで、このように見え方が変化します。
Windows のChrome でメイリオフォントが潰れて表示される場合の対処法



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す