フォントについて考えてみる…。

WindowsVistaが発売されてからWindows系OSにはフォントとして、
メイリオというフォントが追加されました。

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

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

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

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

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

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

ブラウザのデフォルトフォント

２．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）によって表示できるフォント、あるいはブラウザによって読み込み動作が異なるので、それらに対応できるよう、複数のフォントファミリー名を記述します。

４．「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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

９．当ブログのfont-family

以前は、
メイリオもしくは、ヒラギノ角ゴをメインに以下Font-familyで

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

ヒラギノが好みの方は

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

指定しようと思っていましたがメイリオは、
等幅が広い為レイアウト的にズレたりしてしまうので、少々避けていました。

そこで、
現在は、

body {
    font-family: Sans-serif;
    font-size: 14px;
    line-height: 1.3;
    font-weight: normal;
}

というsans-serifのみの設定に指定にしています。

１０．参考サイト

参考サイトは以下です。

font-family－スタイルシートリファレンス
font-family CSS フォント
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 - webデザイナーのナナメガキ
萌えないごみの日: 【CSS】font-familyを指定するな。ユーザー選択に任せよ。
CSS上級者を悩ませるフォント指定を探究するぜ2011 autumn | DAICHIFIVE blog

ありがとうございました。