いまさら聞けないCSS font-familyのまとめ

いまさら聞けないCSS font-familyのまとめ

Posted at August 13,2012 2:34 AM
Tag:[CSS, font-family]

CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。

font-family

認識誤りがありましたらどこかでつぶやいてください。

1.font-familyとは?

通常のフォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものを「フォントファミリー」といいます。

「Arial」「Vernada」「ヒラギノ角ゴPro W3」「MS Pゴシック」などがフォントファミリー名です。

このフォントファミリー名を指定するためのプロパティが「font-family」です。

サンプル

body {
    font-family: Verdana,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic",sans-serif;
}

2.フォントファミリー名がずらずらと並んでいるのは?

font-familyプロパティは左に書いたものから優先的に適用され、OS(PC)で利用しているフォントの条件に合致したものを適用します。PCに別のフォントをインストールすればそれも適用対象になるようです。

OS(PC)によって表示できるフォント、あるいはブラウザによって読み込み動作が異なるので、それらに対応できるよう、複数のフォントファミリー名を記述します。

3.記述のお作法は?

フォントファミリー名に空白が含まれる場合、必ずシングル(ダブル)クォーテーションで括ります。

例えば「Times New Roman」は「'Times New Roman'」と記述します。「ヒラギノ角ゴ Pro W3」は「'ヒラギノ角ゴ Pro W3'」と記述します。

日本語フォント名はアルファベット表記も可能です。例えば「ヒラギノ角ゴ Pro W3」は「'Hiragino Kaku Gothic Pro'」と書くことができます。

4.「sans-serif」や「serif」は何?

「総称ファミリー」というもので、指定したフォントファミリーをユーザーが利用できない場合に、最低限のフォントファミリーを提供するためのものです。フォールバック的なものでしょうか。

総称ファミリーには次の5種類があります。

  • sans-serif:ゴシック系のフォント
  • serif:明朝系のフォント
  • cursive:筆記体・草書体のフォント
  • fantasy:装飾的なフォント
  • monospace:等幅フォント

総称ファミリー名は一番最後に記述します。

例えば次のように記述すれば、「Verdana」「Helvetica」「Arial」が適用されなかった(ということはないと思いますが)場合に、「sans-serif」が適用されます。

body {
    font-family: Verdana,Helvetica,Arial,sans-serif;
}

5.欧文フォントと和文フォントの表記順序は?

欧文フォントと和文フォントに、それぞれ別のフォントファミリーを適用したい場合、欧文フォントを和文フォントより先に記述します。

次のように記述すれば、半角英数文字に「Verdana」が適用されます。

body {
    font-family: Verdana,"メイリオ","ヒラギノ角ゴ Pro W3","MS Pゴシック",sans-serif;
}

欧文フォントを和文フォントより後に記述すると、半角英数文字に和文フォントが適用されてしまうようです(=和文フォントが適用されなかったときにしか欧文フォントが適用されなくなります)。

6.設定でよく使われている和文フォントは?

よく使われているかどうか分かりませんが、OSのデフォルト和文フォントは次のようになっているようです。

  • Windows 7/Windows Vista:メイリオ
  • WindowsXP:MS Pゴシック
  • Mac:ヒラギノ角ゴ Pro W3

Windows 7/Windows Vistaの「メイリオ」と、Macの「ヒラギノ角ゴ Pro W3」は、きれいに表示されます。

なお、Windows 7/Windows Vistaでブラウザに表示されるフォントは、和文フォント指定なし+総称ファミリ「sans-serif」を設定すると、「メイリオ」ではなく「MS Pゴシック」になるので、OSのデフォルトフォントとブラウザのデフォルトフォントは異なるようです。

ブラウザのデフォルトフォントについては以下のページが参考になります。

フォントカタログ5・ブラウザのデフォルトフォント

7.和文フォントの表記順序は?

6項にあげた、3つの和文フォントを並べて記述するケースで考えます。

まず、Windowsできれいなフォントを表示させたい場合、「メイリオ」を「MS Pゴシック」より先に記述します。これで、Windows 7/Windows Vistaには「メイリオ」、Windows XP(メイリオがインストールされていない)に「MS Pゴシック」が適用されます。

あと、「ヒラギノ角ゴ Pro W3」と「メイリオ」のどちらを先にするかですが、

  • 「メイリオ」→「ヒラギノ角ゴ Pro W3」の順で記述すると、Microsoft Officeの入ったMacにメイリオが適用されてしまう
  • 「ヒラギノ角ゴ Pro W3」→「メイリオ」の順で記述すると、ヒラギノをインストールしたWindowsに「ヒラギノ角ゴ Pro W3」が適用されてしまう(Windows+ヒラギノはアンチエイリアスが無効になった状態で表示されてしまう)

ということで、一長一短のようです。

設定のよしあしは別として、どちらを先に設定しているかは下記のページが参考になると思います。

ウェビンブログ - font-familyはメイリオが先かヒラギノが先かという命題を本気で調べた

個人的には「メイリオ」を先にして、次の順番にしています。

「メイリオ」→「ヒラギノ角ゴ Pro W3」→「MS Pゴシック」

8.Safariはフォント名に日本語が含まれるものは無効?

以前はそのような動作だったようですが、Safari 5はどちらでも大丈夫みたいです。

9.Firefoxは日本語フォントのアルファベット表記は無効?

以前はそのような動作だったようですが、最近のFirefoxはどちらでも大丈夫みたいです。

10.当ブログのfont-family

10個のまとめにしようと思いましたが9つしかなかったので、このブログの変更前後の設定を公開してお茶を濁します。

変更前

font-family: Verdana,Arial,sans-serif;

変更前のひとつ前の記事の表示(Windows Vista)
変更前

変更後

font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","MS Pゴシック",sans-serif;

変更後のひとつ前の記事の表示(Windows Vista)
変更後

変更前の設定に和文フォントを3つ加えました。変更前はかなりいい加減でしたね。

11.参考サイト

参考サイトは以下です。ありがとうございました。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)