フォントの種類は自分が見てほしいと思っているフォントで、サイトを見てほしい場合に指定します。
指定しない場合は、ブラウザののデフォルトのフォントで表示されますが、それだとブラウザによって閲覧イメージがかなり変わってしまう場合があります。、時には、サイトの表示がくずれてしまったり、サイト作成者が意図していようなトラブルが起こることがあります。
そのため、font-familyは指定しておくのが、オススメです。
font-familyは以下の５つのグループがあります。
[フォントの一般分類名]
| serif | 明朝系のフォント |
| sans-serif | ゴシック系のフォント |
| cursive | 草書体、筆記体系のフォント |
| fantasy | 装飾的なフォント |
| monospace | 等幅のフォント |
font-familyを指定する際の注意点は以下の３つです。
- サポートするOSを検討する。
- サポートするブラウザを検討する。
- 使ってほしいフォントは左から順に列挙する。
- 指定の最後にフォントの一般分類名を記述する。
font-familyの指定例
サポートするOS：Windows Vista, Windows XP, (Mac OS)
サポートするブラウザ：(IE7), IE8, FF3, Safari4, Google Chrome 2
の場合
font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
IE7, Mac OSについては評価環境がなかったので、実行確認はできていませんが、不具合あればご指摘ください。
1.各OSでの表示フォントを決める
各OSにてで以下のフォントで表示する設定を考えるとします。
| Windows Vista | ：メイリオ |
| Windows XP | ：ＭＳ Ｐゴシック |
| Mac OS | ：ヒラギノ角ゴPro W3 |
2.サポートするブラウザを決める
サポートするブラウザはIE8, IE7, FF3(Firefox3), Google Chrome2, Safari4としてそれぞれの検討点を考えます。
| IE7, IE8 | ：注意点は特になし |
| FF3 | ：日本語フォントのアルファベット表記は適用されないので、日本語で指定する ＝＞ヒラギノ角ゴPro W3とメイリオはそのまま日本語でしていする |
| Google Chrome2 | ：注意点は特になし |
| Safari4 | ：日本語表記のフォントは適用されないので、表記をアルファベットにする。 ・ヒラギノ角ゴPro W3 => Hiragino Kaku Gothic Pro ・メイリオ => Meiryo |
3.使ってほしいフォントは左から順に列挙する
- Mac OSでmicrosoft Officeがインストールされていると、”MS P ゴシック”が表示フォントに使われる可能性があるので、それをさけるために”ヒラギノ角ゴPro W3”を先頭に表記する。
- Windows Vistaで”メイリオ”で表示させるために、”MS P ゴシック”よりも前に指定する
4.指定の最後にフォントの一般分類名を記述する。
ゴシック系フォントの一般分類名である”sans-serif”を最後に指定する。
以上のことから
font-familyの指定例
サポートするOS：Windows Vista, Windows XP, (Mac OS)
サポートするブラウザ：(IE7), IE8, FF3, Safari4, Google Chrome 2
の場合
font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
※ヒラギノとブラウザの関係、OSとフォントの関係については以下のサイトを参照してください。
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係
※各フォントグループの表示イメージ、詳細な説明は以下のサイトが参考になります。
コメントする