読者です 読者をやめる 読者になる 読者になる

font-family の選ばれ方

CSS / Less

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

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

まとめ

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

font-family: "Georgia", "Hiragino Mincho ProN", "Hiragino Mincho ProN W3", "MS P明朝", serif;

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