35歳からのWEB遊びブログ

WindowsとMac環境でシステムフォントが異なっているのは周知の事実。
Windowsでもアンチエイリアスの効いたメイリオが主流になってきたため、「そろそろfont-familyにメイリオを入れようか思案中」を経て、最近はもっぱらCSSのfont-familyにメイリオを指定するようになった。

そこで、ちょっと気になるのがMac環境のこと。前出エントリーでも書いたが、私はWindows環境でヒラギノ角ゴシックをインストールしているという自己都合から、メイリオを先頭にした以下のような指定をしている。

body { font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

この指定をした場合にネックとなるケースが一つあり、Microsoft Office 2008にはメイリオフォントがバンドルされているため、Mac環境でもOffice 2008をインストールしている人はメイリオで表示されてしまうようだ。
Macは元々アンチエイリアスの効いたヒラギノ角ゴがデフォルトなので、勝手にWindowsのフォントであるメイリオに置き換えられるのを好まない人も多いだろう。

ヒラギノ角ゴを先に指定すれば話は済むのだが、Windowsではヒラギノはアンチエイリアスが無効になった状態で表示されてしまう。ヒラギノをインストールしている私は、自分のサイトのフォントがガタガタになっているのを見るのは嫌なのだ。さてさて、これはどうしたものか・・・

Safari向けのCSSハックを利用してみる

OSによってfont-familyの振り分けをしようとするとJavascriptを利用しなくてはいけなくなり、単独ファイルも増えて個人的には好ましくない。となると、やはりブラウザ用のハックを使って振り分ける方がベター。

WindowsにIEがデフォルトであるように、Macと言えばブラウザはSafariである。
そこで、Macユーザーがどういったブラウザを使っているかGoogle Analyticsで調べてみたのが右の画像（クリックで拡大表示）。

拡大画像の赤で囲んだ部分が今回関係するユーザー。やはりSafariユーザーが多い。
そこで、SafariとChromeのみに適用される@media screen and (-webkit-min-device-pixel-ratio:0)　を用いて、次のように指定してみた。

/*　通常指定　*/
body { font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

/*　Safari・Chrome用指定　*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
}

最初のbodyでの指定を、SafariとChromeのみ@media screen～で上書き指定するという方法。

上記ハックを利用して指定をした場合、
× 意図通り表示されないケース
　・ Mac環境　Firefox使用　Office2008あり
　・ Win環境　Safari・Chrome使用　ヒラギノあり

元々のメイリオ→ヒラギノの順でのfont-family指定のみの場合
× 意図通り表示されないケース
　・ Mac環境　Office2008あり

@media screen～のハック無し、ヒラギノ→メイリオの順でfont-familyを記述すると
× 意図通り表示されないケース
　・ Win環境　ヒラギノあり（自分が含まれる）

うーん・・・結局どの割合が高いかですよね・・・
Google Analyticsのデータは、ブラウザシェアチェックには結構公平（ユーザーが偏っていない）であろう二眼里程標の今年に入ってからのもの。
Mac＋FirefoxのユーザーがMac＋Safariの組み合わせの1/3以下という数値だったため、Safari用のハックを使った指定に変更してみました。

私は当面これで行こうと思うが、ヒラギノをインストールしていない普通のユーザーであれば@media screen～のハック無し、ヒラギノ→メイリオの順で記載するのが良いだろう（ただし、私的にはヒラギノで表示されるのでありがたくはない）。

根本的には、私自身がヒラギノを一旦アンインストールして、使う時だけインストールするというのがいいのかも知れない。