アトトックラボ

2010年12月09日

CSS でメイリオを指定する時の Windows XP 対策

Posted by Nobuyuki Sato

最近はさすがに順調にシェアも落ちてきている Internet Explorer 6 だが、未だに導入されたままになっている Windows XP プレインストール PC が多いことも確かだ。

そこでそれを逆手に取った CSS ハックが今回紹介するもの。

ClearType とメイリオの組み合わせは賛否両論あるものの、ユニバーサルフォントをキレイなアンチエイリアスで表示出来る点は評価しておきたいし、ウェブもいつまでもビットマップフォントにばかりも頼っていられない時期にさしかかっているだろう。

しかし Windows XP の初期設定では ClearType はオフになっている (Windows Vista 以降はデフォルトでオンになっていたはず) ので、仮にユーザーがメイリオをなにかのきっかけで導入していても ClearType をオンに設定していないと、特に小さな文字サイズでは表示が無残なことになってしまう。

なので、以下のように CSS を書いてみることにしてみた。

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

まず最初に全てのブラウザに向けてメイリオを最上位に設定したフォント設定を読み込む。
その次に "_要素" とすることで Internet Explorer 6 しか読み込まないハックされたコードを書く。

Internet Explorer 6 = Windows XP 以下のバージョンにしか導入されていない (Windows Vista は IE7、Windows 7 は IE8 がデフォルト) ので、これで Internet Explorer 6 を使っていて ClearType を有効にしていない、且つメイリオを何かのきっかけでインストールしてしまっている Windows XP ユーザーには MS Pゴシックで表示されるようになる。また、Windows Vista 以降の Windows を使っているユーザーにはメイリオで表示されるようになるからくりだ。

CSS でフォントを指定すること自体に賛否両論はあるものの、デザイン意図上、テキストにはどうしてもゴシック系のフォントを使いたい場合には有効なハックになるはずだ。