Windows版Firefoxで美しい(かもしれない)アンチエイリアスを実現する

今のところ、Windowsで最も美しく文字描画を行えるのはMacTypeが最強ということで異論はないと思うのだけど、FirefoxだったらMacTypeなしでもそれなりにきれいな文字描画が可能ですよ、と。MacType等フリーソフトを導入できない/しにくい環境で活躍するはず。

ハードウェアアクセラレーションによる文字描画に対応しているWindows Vista SP2以降である必要がある。たぶん。

方法

1. [オプション]-[詳細]-[一般]の[ハードウェアアクセラレーションを使用する (可能な場合)」のチェックがONになっていることを確認する
2. Anti-Aliasing Tuner アドオンを導入し、[Anti-aliasing Mode]を[ClearType]に、[Rendering Mode]を[Natural Symmetric]にする*1
3. 最後に重要な設定。Stylish アドオンもしくは、ユーザースタイルシートに下記内容を定義する*2。

* {
-moz-transform: rotate(0.0001deg) !important;
}

するとデフォルトで↓だったのが・・・(縮小されちゃってるのでクリックして実寸で見てね)

↓こうなる。(縮小されちゃってるのでクリックして実寸で見てね)

自分がいいと思うのは

• ビットマップフォントが使われなくなり、美しい (ＭＳ Ｐゴシック)
• transformによりヒンティングが無効になるので、字形が崩れないし文字の高さが揃うので美しい (「美」の横棒の間隔とか、メイリオの「日」が大きすぎるのが直ったりとか)
• ベースラインや描画幅は変わらないので、崩れたりしない*3。

みたいなところ。MacTypeと比べるとちょっとにじみすぎな感じがあるがデフォルトよりはだいぶましということで。Firefox限定ですが*4、お試しアレ。

参考

allcreatives.net » Smoother @font-face embedding in IE 7 & 8

追記 (2012/08/31)

全要素にCSS transformまでかけてしまうと、デザイン崩れが激しくて使い物にならない(Googleの検索窓とかが消えてしまったり)。ヒント情報を持たないフォント(M+とか)を使って、DirectDrawの設定までにとどめるのが実用性とのバランスがとれていいかもしれない。

*1:アドオンがインストールできない事情がある場合、about:configからgfx.font～系の設定を直接いじればOK

*2:全ての要素に一律設定しているが、これのせいでデザイン崩れが起きることもあるようなので、必要に応じて絞ると良い

*3:MacTypeはこれが原因で崩れる

*4:IEやChromeで同じことをやろうとしてもうまくいかない。IEだと一昔前のFaxみたいな品質になる。Chromeだと小さすぎる回転角の指定は無視される。