Web用にメイリオをXP環境でも使用する方法とCSSでのフォント設定まとめ

Windows Vistaの売りの一つだった見やすい「メイリオ(Meiryo)フォント」をWindows XPでも利用する方法と、Webサイトの表示フォントもメイリオに変更するCSS記述設定のまとめ。Vistaどころか次のWindows 7まで発売されて「標準でメイリオを表示できる環境」は広まってきているし、まだまだXPを使い続けるつもりの人でもメイリオの導入だけなら非常に簡単で効果もあるので、覚えておいて損はないかと。

Windows XP環境でメイリオをダウンロードして使用する

1. マイクロソフトからフォントをダウンロードする

マイクロソフトのダウンロードセンターにメイリオのフォントセットが用意されているので、普通にダウンロードしてインストール。(環境によっては「正規のWindowsか認証してください」と表示されるかもしれないので、指示に従って作業。)

ダウンロードした「VistaFont_JPN.EXE」を実行するだけなので、何も難しいところはないはず。

2. WindowsのClearTypeをONにする

メイリオはClearType用のフォントとして作られているので、フォントをインストールしただけだと下の画像のように逆に汚いギザギザの表示になってしまう。というわけで、Windows側の設定変更が必要。

Clear TypeがOFF環境でのメイリオ

デスクトップを右クリックし、「プロパティ」→「デザイン」→「効果」から「次の方法でスクリーンフォントの縁を滑らかにする」にチェックマークを付けて「ClearType」を選択。

Windowsの設定からClear TypeをONにする

Windows環境自体をメイリオにしたいならさらに「詳細設定」から環境設定が必要なものの、Webサイトの表示フォントとして使用するだけならこれで作業終了。デスクトップの表示自体をメイリオに変更したい場合は、以下のページで設定の変更方法が書かれているので参照のこと。

サイトのフォント設定をメイリオに変更する

自分の環境でも色々試した結果、ヒラギノとMS Pゴシックとメイリオの悩ましい関係で紹介されていた以下の設定が一番安定していて、トラブルも起きなかった。(下手にいじると「メイリオが入っていないWindows環境 + IE6&7」でフォント表示が変になること多数。)他のOSで見たときも特に問題はなかったので、安定した設定方法と言えるのでは。

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

問題点をあげるとすれば、メイリオが入っていないVista以前のWindows環境ではMS Pゴシックで表示されるため、同じページでもフォントが入っているか否かでページを表示したときの印象が相当変わってしまうこと。具体的には、メイリオは(MS Pゴシックに比べ)フォント幅が広く描画されるため、フォントサイズを変更していないのに1行に表示される文字数がかなり変わってしまう。また、場合によっては「MS Pゴシック前提のデザインだったので、メイリオにすると幅が変わってデザインが崩れる」という現象も起こってしまうようだ。(より身近な例だと「アスキーアートが壊れて困る」という話もあった。)

メイリオでの表示例

メイリオでの表示例

MS Pゴシックでの表示例

MS Pゴシックでの表示例

このデメリットがメリットを上回ってしまう、と考える場合は無理に変える必要はないかもしれない。ただ個人的には「メイリオ環境の人はより綺麗なフォントで閲覧できる」「メイリオ環境でなくても別に普段どおりに表示されるだけ」と考えているので、自分が「読みやすい」と感じたらどんどん変更して構わないんじゃなかろうか。