« 『あとで読む』を後で読む為の5つの工夫 | Back To Blog Top | Daily Link 2007-02-26 | Note »
Vista後のメイリオ及びfont-familyについて
Vistaの発売に伴って、font-familyにメイリオを追加しているサイトをいくつか見かけます。
でも、XPのFirefoxなんかで見ると、アンチエイリアスが効いてなくてジャギジャギに表示されてたりするんですよね。
他にも、font-familyの値としてメイリオとMeiryoなど、指定の仕方もサイトによってまちまちだったりします。
これはどういう事なのかな、と思ったので、少し調べてみました。
メイリオがジャギジャギに見える理由
どうやらXPでは、IE7以外のブラウザではアンチエイリアスが効かない状態で表示されるようです。
アンチが切れたメイリオは、個人的には見れた物じゃないという印象です。
これは、Clear Typeをインストールする事で対応できます。
血統の森+はてな - Windows Xpでメイリオ+Fx/Operaでもマトモに表示の記事が詳しく解説されています。
Web制作という観点で見ると、ユーザーに「Clear Typeをインストールしてください」とは言えないのが苦しいところですね。
まあ、そもそもXPのメイリオ自体、ユーザーが望んでインストールしないと入らないんですけれどw
メイリオ? Meiryo?
何故かどちらの表記も見かけます。 その理由は、ブラウザごとの解釈の違いにありました。
Safariは日本語で書かれたfont-familyを無視するとの事です。 つまり、
読まない:ヒラギノ角ゴ Pro W3
読み込む:Hiragino Kaku Gothic Pro
こういう事ですね。
で、Firefoxは逆にローマ字での指定が効かないので、両方の指定をするのが無難だと言えるようです。
Appleの日本語サイトがローマ字と日本語の両方で指定していたので、恐らく間違いないと思います。
細かいTips
- 日本語に斜体は効かない
- なんとビックリ。 メイリオの日本語文字は、斜体に対応していません。
これは公式でWindows Vista のメイリオ フォントの文字列が斜体にならないことがあると発表されています。 - メイリオは印刷に不向き?
- という意見がチラホラと聞かれます。
印刷用スタイルシートを作成する際は、検証した方が良いかもしれません。 - Macにもメイリオ?
- Macotish Blog :: マックでメイリオ?という記事で紹介されています。 自己責任でどうぞ。
- AAがズレる
- 一部で大きな問題になりますねw
font-famiylの指定
では、実際にfont-familyの値には、どのように指定すれば良いのでしょうか。
例として、和文フォントのみを挙げて考えてみます。
ヒラギノ→メイリオ→MSPゴシック
「ヒラギノはメイリオより美しい!」という意見が多かったので、こんな順番にしてみました。
ただし、メイリオがインストールされていてアンチが効かない場合には、微妙な表示になります(個人差はあるでしょうけれど)。
メイリオ→MSPゴシック→ヒラギノ
WinXPにヒラギノがインストールされている場合、やはりアンチが切れてよろしくないので、ヒラギノの指定を最後に持ってきたタイプです。
ただし、Mac版マイクロソフトオフィスがインストールされていると、MacでもMSPゴシックでの表示になるというデメリットも。
まあ、ヒラギノをインストールしてるWinやオフィスを入れてるMacがどれだけあるのかは知りませんけれどw
結局どうするのさ?
メイリオがキレイに表示される環境ではメイリオを指定したいけど、それ以外の環境には指定したくない・・・・・・。 そんな感じです。
そうなると、もうブラウザごとに振り分けるのが、現在でベターな手段と言えるのではないでしょうか。
例えば、Yahoo!の検索結果ページではCSSハックを使ってIE7にのみ、Meiryoを指定しています。
もちろん、ハック以外の方法で振り分けても良いと思います。