font-familyの指定

CSS2008年2月24日

CSSでのfont-familyの指定が、実はWEB制作者にとってかなりのくせ者です。
文字コードによって表示が変化するうえ、閲覧する人の持っているフォントによってかなりの変化が出てしまうからです。

font-familyを何も指指定しなければ、デフォルトで設定されているフォントで表示されますが、文字コードがUTF-8だとWinのIE6で英数文字が「Times New Roman」になってしまいます。
これはあまり見栄えとしてよろしくないものだと私は考えています。

さらに気をつけなければいけないのは、MacのSafari では「ヒラギノ角ゴ Pro W3」など日本語が含まれるものは無効になってしいます。
なのでSafariでヒラギノ角ゴを指定したい場合は 「Hiragino Kaku Gothic Pro」と表記しなくてはなりません。

Firefoxでは「Hiragino Kaku Gothic Pro」など日本語フォントのアルファベット表記は適用されないので、SafariとFirefox両方で問題なく表示するには「'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro'」と両方表記する必要があります。

以上の事を踏まえたうえで、どういった指定をすればよいのか考えてみました。
独学Webデザイナーの覚書では下記のように指定しています。

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

どういう意図で指定しているかというと、

• Macではヒラギノ
• XPではMS Pゴシック
• Vistaではメイリオ

狙いとしては、デフォルトのフォントで表示させましょうということです。
ただ、この指定にもやはり弱点はあり、「Windowsのマシンにヒラギノをインストールしている」場合、Windowsでアンチエイリアスがかからない、ギザギザの状態で表示されます。
ただ、そういう人はほとんどいないに等しいので、あまり気にする必要はないと考えます。

フォントファミリーの指定はターゲットブラウザを何にするのかによっても多少変わってくるので、「これが正しい」といったものは無いです。あくまでもひとつの例としてご参考にして頂ければと思います。