新規でサイトを作る時に悩ましいのがfont指定をどうするか。 という事で調べてみました。

できるだけOSのシステムフォントが表示されるようにしたいです。

• Windows XP⇒MS　Pゴシック
• Windows Vista⇒メイリオ
• Windows７⇒メイリオ
• Mac OS-X⇒ヒラギノ系

font-family指定は左から順番に該当するものを優先して表示するので記述順も重要です。 Mac-OSにMicrosoft Officeをインストールしているとメイリオ、MP　Pゴシックがインストールされている可能性が高いのでヒラギノ角ゴを先に記述します。

Safariは日本語のフォントファミリー名を認識しないので欧文表記も併記します。

という事で下記のように落ち着きました。

 
font-family:’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,'メイリオ’,Meiryo,’ＭＳ Ｐゴシック’,'MS P Gothic’, sans-serif;

但し、メイリオを指定しているとWindows VistaのIE7で文字が汚く表示されてしまうので

font-family: sans-serif;

だけの方が賢明なのかもしれません。

◎参考サイト

font-familyはメイリオが先かヒラギノが先かという命題を本気で調べた
http://webbingstudio.com/weblog/think/entry-137.html
資料：日本のコーダーのfont-family指定
http://webbingstudio.com/archives/uploads/2010/06/font_family_jp.html

CSSに設定するfont-family(フォントファミリー)って結局なにがエエねんって言う人の今んとこまとめ
http://www.hamashun.com/blog/2007/01/os_1.html

font-familyの憂鬱
http://webtech-walker.com/archive/2008/06/03010036.html