transform:rotate() を使うと CSS だけでテキストにアンチエイリアスがかけられる
MS P ゴシックなどの ClearType でないフォントが使われてしまう場合に、CSS だけでテキストのジャギーを抑えてアンチエイリアスをかける方法があった。
CSS で、transform:rotate(0.001deg); を指定することでハードウェア・アクセラレーションを有効にし、テキストにアンチエイリアスをかけることができた。
0.001deg と、ほぼ視認できない程度に回転させてやっている。360deg でも効くブラウザもあるようだが、当方ではダメだった。お好みで 0.0028deg など、もう少し数字を増やすとアンチエイリアスの程度を少しだけイジれる。
以下のサンプルは「MS P ゴシック」がインストールされている Windows 端末でないと違いを実感できないと思うが、実際に違いを確認してもらいたい。
- デモ : Anti-Aliasing by transform: rotate();
- コード : frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes
あんまりアンチエイリアスがかかっていると、コントラストが落ちて文字がボヤけて見えて、それはそれでイマイチなので、ほどよくかけたいところ。
ブラウザのデフォルトスタイルのせいなのか、IE だけ MS P ゴシックが適用されてしまう、とかいった事象もあるので、そういう時のためにあえてベンダープレフィックスを使って、-ms-transform だけ指定しておく、というのもアリかも。