https://s3-us-west-2.amazonaws.com/secure.notion-static.com/aef2e883-60ad-4dbc-9bd4-547b7a050689/smoothing1.jpg

CSS3のfont-smoothingプロパティを使用することで、フォントのアンチエイリアスを調節することができます。※Windowsはブラウザに関わらず対応していません Mac版のSafariやOpera、ChromeなどのWebkit系とFirefoxのみ、プレフィックス付きで独自実装しているみたいです。 WebkitとFirefoxで別のプレフィックスをつける必要があり、値も違ってくるので注意が必要です。

CSS

Webkit用CSS

Webkitには-webkit-を付与。

.example{
    -webkit-font-smoothing: none; //ぎざぎざ
    -webkit-font-smoothing: antialiased; //なめらか
    -webkit-font-smoothing: subpixel-antialiased; //デフォルト値
}

デモのキャプチャ (OSX Yosemite / Chrome41)

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2bf44c7e-0d7b-4384-83cd-57fa3f4bc36d/webkit-1.png

noneはアンチエイリアスをかけないので、ひどくガタガタ。antialiasedは少し細身でなめらか、色が薄くなっています。

Firefoxには-moz-osx-をつけます。Webkitとは使用する値が違うので注意。

.example{
    -moz-osx-font-smoothing: grayscale; //なめらか
    -moz-osx-font-smoothing: unset; //デフォルトに戻す
    -moz-osx-font-smoothing: inherit; //親要素から継承
    -moz-osx-font-smoothing: auto; //システムのデフォルトに応じる
}

デモのキャプチャ (OSX Yosemite / Firefox33)

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3b5542fe-e6e0-4117-96c4-8d7a6f6b8d7a/firefox-1.png

Firefoxにはアンチエイリアスをかけないnoneがありません。antialiasedは少し細身でなめらか、色が薄くなっています。unsetとinheritは通常使いません。

bodyに一括指定する

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

サイト全体に適用する場合は、bodyに-webkit-と-moz-osx-の両方を記述すればOKです。

注意すべき点

CSS3の標準ではない

this is non-standard and should not be used.