Culture27

font-familyの指定はウェイトなしのアルファベット表記のみでほぼよさそう

  • Published:

下記のコードはフォントの指定によく使われていると思います。

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

同じフォントを日本語表記とアルファベット表記の両方で指定しているのは、各ブラウザの解釈や挙動が異なるなどの理由からです。ただ、最近のブラウザはどうなんだろうかとちょっと気になったので調べました。

結果としては下記の表になりました。詳細はデモページを見てください。

  • Parallels上のWin7: IE6-8(IE6,7はIETester), Chrome15, Firefox8, Safari5, Opera11
  • Mac OS X 10.6.8: Chrome15, Firefox8, Safari5, Opera11
  • 文字コード: UTF-8
指定方法 IE Chrome Safari Firefox Opera
Win WinMac WinMac WinMac WinMac
日本語表記 ○ ○× ○× ○○ ○×
日本語表記（ウェイトあり） - -× -× -△(*1) -×
アルファベット表記 ○ ○○ ○○ ○○ ○△(*2)
アルファベット表記（ウェイトあり） - -× -× -△(*1) -○
ポストスクリプト × ×× ×× ×× ××
ポストスクリプト（ウェイトあり） - -○ -○ -× -×
  • *1: ウェイトは無視され、ウェイトなしのものが適用される。
  • *2: ウェイトありで指定しないと適用されないものもある。

まとめ

ウェイトなしのアルファベット表記だけで多くのブラウザに対応できそうです。
問題が出るかもしれないのはMac Operaだけです。

記事の冒頭で挙げたコードは下記のようにすることができると思います。

font-family: 'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif;

Mac Operaですが、メイリオ、ＭＳ Ｐゴシックが入ってなければ、sans-serifが最後にあるのでヒラギノ角ゴ Pro W3が適用されます。もしくは、VerdanaやTahomaなどを指定すれば日本語部分はヒラギノになります...。

もしかすると今回の検証だけでは足りないかもしれませんが時間がないので今回はこのへんで。