石輪っぷり!
メイリオ と Arial と UTF-8 と IE との変な関係
2010年3月21日 23時16分 | コメント(0) | トラックバック(0)
※この投稿は180日以上前のものです。最新の情報とは異なる場合があります。
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 って嫌なブラウザです。
トラックバック(0件)
- :

コメント(0件)
コメントする