LoginSignup
27

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-05-26
.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);
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
27