font-family の選ばれ方

いろんなフォントで表示のテストしようとしてつまずいたのでメモ。
jsdo.it でこんなテストを書いた。

• font-family の適用順の調査 - jsdo.it - Share JavaScript, HTML5 and CSS

Safari 5

• フォントの分類やウェイト情報を利用できる
• ヒラギノ明朝は "Hiragino Mincho ProN" のように英語名、ウェイトは付けずに指定する
• Georgia の指定で、和文がヒラギノ明朝になる
• UserAgent を表示している部分が Helvetica になっている（指定は sans-serif）

Chrome 19

• Safari とほぼ同じ
• ヒラギノ明朝を使いたい場合は "Hiragino Mincho ProN" のように英語名、ウェイトは付けずに指定する
• Windows 版は Safari より OpenType の対応が進んでいる
• なぜか UserAgent で Safari を名乗っている

Firefox 12

• フォントの分類やウェイト情報を利用できる
• ヒラギノ明朝は "Hiragino Mincho ProN", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN", "ヒラギノ明朝 ProN W3" のどれでも利用できる
• cursive に割り当てられているフォントがない？

Opera 11

• ヒラギノのファミリーを認識できておらず、フォントを重ねて太字を表現している
• ヒラギノ明朝は "Hiragino Mincho ProN W3" と英語名、ウェイトありで指定する
• Georgia の指定で、和文がヒラギノ明朝になる
• Georgia のベースラインがヒラギノに較べて下がりすぎている
• cursive はヒラギノ明朝

まとめ

一部のブラウザでは serif の欧文書体を指定するだけで、和文が明朝体になる。
Georgia と明朝体で表示させたいときは次のように指定する。

font-family: "Georgia", "Hiragino Mincho ProN", "Hiragino Mincho ProN W3", "ＭＳ Ｐ明朝", serif;

Opera で太字が汚いのは仕方ない。