2年半前にも書いたのですが、CSS でのフォント指定を次のように書くと、"メイリオ" フォントがインストールされている環境では、日本語は "メイリオ" で表示される筈なのですが、なぜか Internet Explorer では "MS Pゴシック" で表示されてしまいます。

font-family: Verdana, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;

でも、IE のインターネットオプションで、デフォルトのフォントを "メイリオ" に設定すると "メイリオ" で表示されます。つまり、font-family の指定の優先順位は無視されて、IE のデフォルトフォントでの表示になってしまうということ。Firefox など IE 以外のブラウザでは、デフォルトフォントが "MS Pゴシック" となっていても、ちゃんと font-family で指定した優先順位に従って "メイリオ" で表示されます。

これは、font-family の指定で、 "メイリオ" より前に英文フォントを指定していると、IE ではデフォルトフォントでの表示になってしまうのだと、今まで思っていました。

Verdana と Arial の指定を外せば "メイリオ" で表示されるのですが、英数字も含めて日本語フォントになってしまうので、Windows XP などのデフォルトで "メイリオ" がインストールされていない環境では英数字も "MS Pゴシック" での表示となり、"メイリオ" や Mac の "ヒラギノ角ゴ Pro W3" とのフォント幅の違いから、新着情報などの日付表記がある部分などで、レイアウトに変な違いがでたりします。

Verdana と Arial の指定を "メイリオ" の後にして、

font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", Meiryo, Verdana, Arial, "MS Pゴシック", sans-serif;

のようにすれば、"メイリオ" がインストールされてない環境での英数字は Verdana または Arial で表示されるのですが、"メイリオ" が適用される環境や、本来英数字を Verdana や Arial で表示したい Mac の環境でも日本語フォントでの表示になってしまいます。

ちなみに、Mac のフォントを "メイリオ" や "MS Pゴシック" より前に書いているのは、MS Office がインストールされた Mac で、Mac のフォントを優先させるため。

そのため、最近は fontdetect.js を IE の条件付きコメントで読み込ませ、IE では "メイリオ" がインストールされているかどうかを判別して、"メイリオ" があれば専用の CSS を適用させるなど、面倒なことをしていました。

それが、現在制作中のサイトでいろいろいじっていて、単に "メイリオ" より前に英文フォントを指定することによる IE の問題ではないということがわかりました。

まず、この現象は文字コードが UTF-8 の場合に発生するということ。Shift_JIS や EUC-JP の場合は Verdana と Arial を先頭に指定しても、IE でも問題なく font-family で指定した優先順位によるフォントで表示されます。

そして、もう一つ決定的なことが。それは、どうも Arial フォントの指定に問題があるということ。いや、問題があるのは IE なのですが...。

つまり、Arial フォントの指定をやめて、

font-family: Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;

とすれば、IE でも、そして UTF-8 でも正しく "メイリオ" で表示されます。

まあ、一般的に Mac も Windows も最近は Verdana フォントがインストールされているでしょうから、Arial フォントの指定がなくても影響はありません。

それにしても、IE の挙動にはほとほと困ります。次期 IE9 はかなり改善されるようですが、IE9 がリリースされても IE8 や IE7、さらには IE6 までもがしばらくは使い続けられるわけで、早く IE も古いバージョンのサポートを打ち切って欲しいものです。

(2010年 3月24日追記)
更に発覚。上記の表記で "メイリオ" で表示されるのは、IE8 の場合でした。IE7 ではやっぱり "MS Pゴシック" になります。それも、文字コードに関係なく。
なんだか、ホントに Internet Explorer って嫌なブラウザです。