【CSS】Windowsでフォントがジャギる時の対処法

先日、フォントMPLUSを使用してコーディングをしていました。
表示確認の時にMacでは綺麗に表示されているのに、Windowsでは文字がジャギってる。(画像わかりにくくてすみません)

Macではアンチエイリアスが効いてるけど、Windowsでは効いてないので汚くなるようdす。
20px以下ぐらいからジャぎるみたいです。明朝体とかもですね。

Windows10からはClearTypeの設定をオンにしたら綺麗に表示されるらしいけど、まだまだ浸透してないのでしょうか?

解決策

cssで、transform:rotate()を指定してあげます。
要素を回転表示させてあげると、少しぼやけて逆に綺麗に表示されるって理論らしいです。

数値は0.001degぐらいから効果あるようです。(Windows FF、IE edge、IE10で表示確認)

See the Pen wvGOpwx by あさと (@mpi_design) on CodePen.

するとWindowsでも綺麗に表示されました👏

インライン要素への適用

今回はaタグにもアンチエイリアス効かせたかったのですが、先ほどの対処だけではまだジャギってました。。

いろいろ試したところ、display:block(inline-blockでも可)を追加するとtransformが反映されました。transformはインライン要素には効かないようなので、インライン要素はブロックにしてあげて指定しましょう。

出典:Windowsも含めブラウザでフォントをきれいに表示する | 株式会社なないろ 京都でNo1を目指すWeb制作・システム開発クリエイティブ集団

ページトップへ