小粋空間  -  a cheap joke and a play on words site

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

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

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

１．font-familyとは？

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

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

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

サンプル

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

２．フォントファミリー名がずらずらと並んでいるのは？

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

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

３．記述のお作法は？

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

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

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

４．「sans-serif」や「serif」は何？

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

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

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

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

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

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

５．欧文フォントと和文フォントの表記順序は？

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

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

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

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

６．設定でよく使われている和文フォントは？

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

• Windows 7／Windows Vista：メイリオ
• WindowsXP：ＭＳ Ｐゴシック
• Mac：ヒラギノ角ゴ Pro W3

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

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

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

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

７．和文フォントの表記順序は？

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

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

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

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

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

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

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

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

「メイリオ」→「ヒラギノ角ゴ Pro W3」→「ＭＳ Ｐゴシック」

８．Safariはフォント名に日本語が含まれるものは無効？

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

９．Firefoxは日本語フォントのアルファベット表記は無効？

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

１０．当ブログのfont-family

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

変更前

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

変更前のひとつ前の記事の表示（Windows Vista）

変更後

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

変更後のひとつ前の記事の表示（Windows Vista）

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

１１．参考サイト

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

• font-family - スタイルシートリファレンス
• font-family CSS フォント
• CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係
• メイリオとヒラギノのfont-family振り分けを考える

• 
• ツイート
• google
• facebook