先日、フォント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制作・システム開発クリエイティブ集団
ページトップへ