読者です 読者をやめる 読者になる 読者になる

Corredor

ウェブ、プログラミングの勉強メモ。

transform:rotate() を使うと CSS だけでテキストにアンチエイリアスがかけられる

MS P ゴシックなどの ClearType でないフォントが使われてしまう場合に、CSS だけでテキストのジャギーを抑えてアンチエイリアスをかける方法があった。

CSS で、transform:rotate(0.001deg); を指定することでハードウェア・アクセラレーションを有効にし、テキストにアンチエイリアスをかけることができた

0.001deg と、ほぼ視認できない程度に回転させてやっている。360deg でも効くブラウザもあるようだが、当方ではダメだった。お好みで 0.0028deg など、もう少し数字を増やすとアンチエイリアスの程度を少しだけイジれる。

以下のサンプルは「MS P ゴシック」がインストールされている Windows 端末でないと違いを実感できないと思うが、実際に違いを確認してもらいたい。

See the Pen Anti-Aliasing by transform:rotate(); by Neos21 (@Neos21) on CodePen.

あんまりアンチエイリアスがかかっていると、コントラストが落ちて文字がボヤけて見えて、それはそれでイマイチなので、ほどよくかけたいところ。

ブラウザのデフォルトスタイルのせいなのか、IE だけ MS P ゴシックが適用されてしまう、とかいった事象もあるので、そういう時のためにあえてベンダープレフィックスを使って、-ms-transform だけ指定しておく、というのもアリかも。

参考