CSSでテキストにアンチエイリアスをかける

  • 30
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。
.antialias {
    transform: rotate(0.028deg);
    -o-transform: rotate(0.028deg);
    -ms-transform: rotate(0.028deg);
    -moz-transform: rotate(0.028deg);
    -webkit-transform: rotate(0.028deg);
}

IE9以上のブラウザであれば、これでMacとほぼ同じレベルのアンチエイリアスがかかる。
よっぽどでかい要素だったりborderがついている要素でなければ傾きは全く気にならないレベル

Google Chromeだと若干細めに文字がレンダリングされるから細字のフォントには注意。

追記(2015/10/16)

antialiasのclassをつけた要素の中に画像が入ると若干荒くなる
対策としては画像だけ角度を戻せばOK

.antialias {
    transform: rotate(0.028deg);
    -o-transform: rotate(0.028deg);
    -ms-transform: rotate(0.028deg);
    -moz-transform: rotate(0.028deg);
    -webkit-transform: rotate(0.028deg);
}

.antialias img{
    transform: rotate(-0.028deg);
    -o-transform: rotate(-0.028deg);
    -ms-transform: rotate(-0.028deg);
    -moz-transform: rotate(-0.028deg);
    -webkit-transform: rotate(-0.028deg);
}