hamashun.com

Vistaの発売に伴って、font-familyにメイリオを追加しているサイトをいくつか見かけます。
でも、XPのFirefoxなんかで見ると、アンチエイリアスが効いてなくてジャギジャギに表示されてたりするんですよね。

他にも、font-familyの値としてメイリオとMeiryoなど、指定の仕方もサイトによってまちまちだったりします。
これはどういう事なのかな、と思ったので、少し調べてみました。

メイリオがジャギジャギに見える理由

どうやらXPでは、IE7以外のブラウザではアンチエイリアスが効かない状態で表示されるようです。
アンチが切れたメイリオは、個人的には見れた物じゃないという印象です。
これは、Clear Typeをインストールする事で対応できます。
血統の森+はてな - Windows Xpでメイリオ+Fx/Operaでもマトモに表示の記事が詳しく解説されています。

Web制作という観点で見ると、ユーザーに「Clear Typeをインストールしてください」とは言えないのが苦しいところですね。
まあ、そもそもXPのメイリオ自体、ユーザーが望んでインストールしないと入らないんですけれどｗ

メイリオ？ Meiryo?

何故かどちらの表記も見かけます。 その理由は、ブラウザごとの解釈の違いにありました。
Safariは日本語で書かれたfont-familyを無視するとの事です。 つまり、

読まない：ヒラギノ角ゴ Pro W3
読み込む：Hiragino Kaku Gothic Pro

こういう事ですね。
で、Firefoxは逆にローマ字での指定が効かないので、両方の指定をするのが無難だと言えるようです。
Appleの日本語サイトがローマ字と日本語の両方で指定していたので、恐らく間違いないと思います。

細かいTips

日本語に斜体は効かない

なんとビックリ。 メイリオの日本語文字は、斜体に対応していません。
これは公式でWindows Vista のメイリオ フォントの文字列が斜体にならないことがあると発表されています。

メイリオは印刷に不向き？

という意見がチラホラと聞かれます。
印刷用スタイルシートを作成する際は、検証した方が良いかもしれません。

Macにもメイリオ？

Macotish Blog :: マックでメイリオ？という記事で紹介されています。 自己責任でどうぞ。

AAがズレる

一部で大きな問題になりますねｗ

font-famiylの指定

では、実際にfont-familyの値には、どのように指定すれば良いのでしょうか。
例として、和文フォントのみを挙げて考えてみます。

ヒラギノ→メイリオ→ＭＳＰゴシック
「ヒラギノはメイリオより美しい！」という意見が多かったので、こんな順番にしてみました。
ただし、メイリオがインストールされていてアンチが効かない場合には、微妙な表示になります（個人差はあるでしょうけれど）。

メイリオ→ＭＳＰゴシック→ヒラギノ
WinXPにヒラギノがインストールされている場合、やはりアンチが切れてよろしくないので、ヒラギノの指定を最後に持ってきたタイプです。
ただし、Mac版マイクロソフトオフィスがインストールされていると、MacでもＭＳＰゴシックでの表示になるというデメリットも。
まあ、ヒラギノをインストールしてるWinやオフィスを入れてるMacがどれだけあるのかは知りませんけれどｗ

結局どうするのさ？

メイリオがキレイに表示される環境ではメイリオを指定したいけど、それ以外の環境には指定したくない･･････。 そんな感じです。
そうなると、もうブラウザごとに振り分けるのが、現在でベターな手段と言えるのではないでしょうか。

例えば、Yahoo!の検索結果ページではCSSハックを使ってIE7にのみ、Meiryoを指定しています。
もちろん、ハック以外の方法で振り分けても良いと思います。