font-familyプロパティ。

font-familyプロパティの扱い。

• 読み飛ばす

継承の有無

font-familyプロパティは、上位要素からの継承があります。

対象セレクタ

対象となるセレクタに制限はありません。

対象メディア

視覚系のメディア全てが対象となります。

font-familyプロパティの書式。

font-familyプロパティの書式は、以下のようになります。

font-family: 値

値としては、以下のものが取れます。

• 読み飛ばす

inherit

一番近い上位要素で指定されたフォントを継承します。

一個以上のフォント

フォントについては、以下に挙げるものが使えます。

これらのフォントは、「,」で区切って複数指定する事が出来ます。

複数指定されている場合、各文字毎に実装されているフォントを前から順に見出します。

• 例えば日本語文書で漢字・仮名文字と半角英字が混入している場合、日本語のフォント名とラテン文字のフォント名が指定されていれば、それぞれ適切なフォントが選択されます。

フォントとしては、以下のものが使えます。

実装されるフォント名

例えばウィンドウズでは"ＭＳ ゴシック"などのフォント名でインストールされておりますが、こう言ったフォント名を直接指定します。

• 空白文字が含まれる場合は「"」または「'」の引用符で囲む事が望まれます。
• 仕様上は、引用符で囲まなくても
  • フォント名の前後の空白は無視され、
  • フォント名の途中にある空白文字は一文字に纏められる

  事になっておりますが、実装上の問題があり得るので、引用符で囲むのが無難でしょう。

フォント系統のキーワード

仕様で規定されているフォント系統を表すキーワードです。

現在、以下の五つが規定されております。

serif

セリフを持つフォント。日本語では明朝体が該当します。

sans-serif

セリフを持たないフォント。ゴシック体が該当します。

cursive

草書体(筆記体)フォント。

fantasy

装飾文字フォント。

monospace

等幅フォント。日本語では等幅ゴシック体とする事が多いようです。

この値を指定する事で、指定されたフォント名が実装されていない環境でも適切なフォントが選択されるようになります。

• キーワードは引用符で囲んではいけません。

font-familyプロパティの記述例。

• 読み飛ばす

例えば、"ＭＳ Ｐゴシック"(ウィンドウズの不等幅ゴシック体), "Osaka"(マッキントッシュの不等幅ゴシック体)及びゴシック体を指定する場合は、

* {
    font-family: "ＭＳ Ｐゴシック", "Osaka", sans-serif;
    }

と記述します。

この場合、優先順位としては

1. "ＭＳ Ｐゴシック"
2. "Osaka"
3. 閲覧者が環境設定でゴシック体として指定したフォント

となります。

font-familyプロパティの仕様上の注意。

font-familyプロパティの使用上の注意。

• 仕様上はフォント名を引用符で囲まなくてもフォロー出来るようになっておりますが、実際にはフォロー出来ない場合が多いようですので、必ずフォント名は引用符で囲んでおきましょう。
• フォントは環境により様々ですので、必ずフォントキーワードを最終的な選択肢として利用出来るようにしておきましょう。
• 特に、OS標準でないフォントは誰もがインストールしているとは言えないので、必ず代わりのフォントも指定しておきましょう。
• また、日本語フォントには半角英数字が含まれている事を忘れないで下さい。つまり、複数フォントを指定する際にラテン文字のフォントを日本語フォントより後方に記述すると、ラテン文字にも前方で指定している日本語フォントが撰ばれてしまい、折角の指定が無視されてしまいます(しかし、インターネットエクスプローラで問題が生じる事があります)。

font-familyプロパティの実装上の注意。

font-family: "Arial", "ＭＳ ゴシック", "Osaka-等幅", monospace;