2008年05月08日

font-familyに「メイリオ」を指定すると、Windows XP + IE6での表示がものすごく汚くなる件

 マイクロソフトから「メイリオ」(Meiryo)のWindows XP版がリリースされました。

XP用「メイリオ」フォントも公開 - ITmedia News
Microsoft、Windows XP向けメイリオフォントを公開 - PC Watch
Japanese ClearType fonts for Windows XP(ダウンロードページ)

 メイリオはWindows Vista用に開発されたClearType対応日本語フォントで、新しいスムージング技術に対応することで、非常に明瞭(Meiryo)な表示が可能だとされています。

 そこで、さっそくダウンロードし、Windows XPにインストール。自分のサイトのfont-familyにメイリオの指定も追加してみました。

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

 そしてリロード。

IE6でメイリオ


????!


メイリオ/MS Pゴシック比較表

 きれいに表示されるはずのメイリオで、文字が潰れてしまっています。特にFirefoxでは、font-weightの指定も効いていないのか、かなり貧相な表示になってしまいました。

 調べてみると、メイリオがきれいに表示されるのはIE7を使ったときだけで、それ以外では従来方式のアンチエイリアスもかからないということらしいです。

 そのため、font-familyにメイリオを指定すると、IE7以外ではかなり汚く表示されることになります。Firefoxの利用者が増える一方で、IE7がそれほど普及しているとも思えない現時点では、MS Pゴシックあたりを指定しておいたほうが無難のようです。無理をしてまでメイリオを使いたい理由もないですしねー

追記:
 「画面のプロパティ」の[デザイン]→[効果]→[次の方法でスクリーンフォントのふちを滑らかにする]で「ClearType」を有効にすれば、Windows XP上のIE6やFirefoxでもメイリオがきれいに表示されるようです。
 しかし、Windows XPではClearTypeがデフォルトで無効。ユーザーによる設定が必要になるので、やはり、font-familyへのメイリオ指定は避けておいたほうが無難そうです。

追記2:
 よく考えたら、わざわざメイリオをインストールしておいて、ClearTypeを無効のままにしておくってのは考えにくい。メイリオがあるときはメイリオを、なければMS Pゴシックを使うという設定で問題ないはず(下記はMac対策もしたfont-familyの設定の例)。

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

posted by momose at 15:27| Comment(2) | TrackBack(0) | 技術TIPS/まとめ
この記事へのコメント
Browser.js
http://browserjs.blog102.fc2.com/
というサイトを参考にされ、
Microsoft から別途
ClearType Tuning というのもダウンロードしインストール
してみて下さい。
文字のギザギザがとれきれいになりますよ。
Posted by 通りすがりの素浪人 at 2008年05月08日 19:25
通りすがりの素浪人さん、こんにちは。

> Microsoft から別途
> ClearType Tuning というのもダウンロードしインストール
> してみて下さい。

 僕はサイト運営者なので、手元のWebブラウザ上だけできれいに表示されるようになってもあまり意味がないんです。
 CSSハックを使ってIE7、IE6、そのほかそれぞれに向けて別のフォントを指定するという方法もあるようなのですが、そこまでしてまでメイリオを使う必要はないだろうというのが今回の結論です。

Posted by momose at 2008年05月09日 07:36
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/96048999

この記事へのトラックバック