“ＭＳＰゴシック” をメイリオみたいにアンチエイリアスさせるCSS3ハック

Posted : 2012-02-06 20:30:55 by namba
CSS3 ハック
共有

CSS3 を使って Windows から見るブラウザ上の "MS Pゴシック" をメイリオみたいに、アンチエイリアスさせて表示する方法を発見してしまったので紹介します。

さて、↓の２つのの文字を見比べてください。
実はどちらも同じ "MS Pゴシック"なんです（Chromeで画像化しています）。

CSS3 の transform を使う

さて、これをどうやって実現しているかと言うと、CSS3 の transform を使って、アンチエイリアスさせたいテキストを、少しだけ縦方向に拡大しています。

.clear-type {
  -webkit-transform-origin: 0 0;
  -webkit-transform: scale(1, 1.01);
     -moz-transform-origin: 0 0;
     -moz-transform: scale(1, 1.01);
      -ms-transform-origin: 0 0;
      -ms-transform: scale(1, 1.02); /* IE9だけ1.02 */
       -o-transform-origin: 0 0;
       -o-transform: scale(1, 1.01);
}

簡単ですね。使う場合は、clear-type クラスを使いたい文字に設定してください。これで "ＭＳＰゴシック" や "ＭＳＰ明朝" にもアンチエイリアスがかかるようになります。

なお、IE9にも対応しています。
ClearType が有効な XP, Vista, 7 で有効です。

アンチエイリアスされる原理

Windowsには、元々ClearTypeと呼ばれるフォントを美しく表示する機能があります。ただ、MS～系のフォントの場合は、サイズが16pt以下の場合、ビットマップフォントが使われるようです（詳しくはWikiで）。

試しに、Chromeでサイズごとに並べてみました。適用前では、17pt以降に、ClearTypeが適用されているのがわかると思います。

ここで紹介している方法では、CSS3の transform を使って微妙に縦横比を狂わせているのですが、そのことでビットマップフォントが無効なるんだと思います（実際はよくわかりません）。

実際の例

1) ＭＳＰゴシック

"ＭＳＰゴシック"で、スタイルの適用前後を比べるとこんな感じです。
少し太く見えますね。初めてみるフォントみたいです。

実際に見る

2) ＭＳＰ明朝

"ＭＳＰ明朝" でやるとこんな感じになります。
こっちは、個人的にかなり好きかもしれない！

実際に見る

＜注意事項＞　　

小さいフォントサイズでは、かえって読みにくくなるかもしれません。
17pt以上では、既に適用されているため変化しません。
テクニックというよりは、ハックに近いものですので、使うかどうかは自己責任でお願いします。
対応環境は、ClearTypeが有効なWindows（XP, Vista, 7）+ transform に対応しているブラウザ（Webkit, Firefox, IE9+, Opera）です。Macでは確認していません。もし使われる場合は、JavaScriptなどでWindows のみにスタイルを適用した方いいかもしれません。