font-family
Updated / Published
font-familyプロパティは要素内の文字の表示書体となるフォントを指定します。値にはフォント名、または総称ファミリ名を指定します。総称ファミリ名が指定された場合は、UA の環境設定に指定されているフォントが自動的に選ばれて、そのフォントで表示されます。
フォント名の指定は複数指定が可能で、各フォント名をカンマ（,）区切りで指定します。複数指定した場合は、ユーザの利用している環境（コンピュータ）にインストールされているフォントが指定順に優先して反映されます。また、"ＭＳ Ｐゴシック" のようにフォント名にスペースを含む場合は、フォント名の前後をシングルクォーテーション（'）、またはダブルクォーテション（"）の引用符で括る必要があります。
総称ファミリ
sans-serif- ゴシック体や"
Arial"のようにヒゲのない書体 serif- 明朝体のように文字の上下にヒゲのある書体
monospace- "
ＭＳ ゴシック"や"Courier New"のような固定幅フォント fantasy- 装飾系のフォント
cursive- 手書き風（筆写体・筆記体）
"cursive" と "fantasy" については現在の主要な視覚環境の UA に具体的なフォントが割り当てられていないため、指定されても効果がない UA もあるようです。総称ファミリは指定していたフォントが全て使えなかった場合にも対処できる様に値の最後には総称ファミリを指定しておくことが推奨されています。
font-family : Arial,'ＭＳ Ｐゴシック',sans-serif ;たとえば、上記の指定の場合、英数字の欧文フォント対象部分には、Windows・Macintosh の両プラットフォーム（OS）で共に "Arial" が適用され、漢字・平仮名・カタカナの和文フォント対象部分は Windows のみに "ＭＳ Ｐゴシック" が適用され、Macintosh では総称ファミリの "sans-serif" 系統のフォントの中からユーザが UA の環境設定に指定している何れかのフォントが自動的に選択されて、そのフォントで表示されます。
Windows・Macintosh の両プラットフォーム（OS）に共通して標準的にインストールされている欧文フォント名に "Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana" などがあります。
font-familyプロパティの実装状況
- IE
- ◯
- Firefox
- ◯
- Opera
- ◯
- Chrome
- ◯
- Safari
- ◯：和文フォントの日本語表記は無効、英文字表記の場合のみ認識
- iOS
- ◯：書体はSafariと同じく英文字表記の場合のみ認識
日本語書体にヒラギノ系フォントがインストールされており、iOS6より明朝の指定も可 - Android
- ◯：書体はSafariと同じく英文字表記の場合のみ認識
日本語書体に明朝系フォントがインストールされていない、またAndroid3以前の標準フォント 'Droid Sans' の日本語書体である Droid Sans Japanese は（font-weight:bold;を指定しても）太字にならない（機種で個別に対応するものもある、Android4以降の標準フォントである Roboto には日本語書体にモトヤフォントが採用されており太字可）
Safari特有のファミリ名の解釈
Safariでは、"ヒラギノ角ゴ ProN W6" のようにフォント名の中に日本語が含まれているものは無効です。"HiraKakuProN-W6" のように英文字表記にする必要があります。たとえば、通常、Mac版Safariに対してヒラギノ角ゴ ProN W6をWindows版Safariに対してメイリオをそれぞれ適用したい場合は次のように記述します。
body{
font-family : "HiraKakuProN-W6", "ヒラギノ角ゴ ProN W6", Meiryo, メイリオ, sans-serif;
}Mac版Safariでは1つ目のHiraKakuProN-W6が認識でき、その他のMac版ブラウザでは1つ目の指定は無視されても、2つ目のヒラギノ角ゴ ProN W6が認識できます。そして、Windows版Safariでは通常Windows環境にはヒラギノフォントは存在しないので、存在しない指定フォントは無視され、3つ目のMeiryoが認識できます。その他のWindows版ブラウザでは3つ目の指定までが無視されても、4つ目のメイリオが認識できることになるでしょう。
CSSファイル内に非ASCII文字列を含む場合
CSSファイル内の文字列にASCII文字列以外を含む場合は文字化けを起こすことがあります。それには、UAが文字エンコーディングを決定するのに次の手順で試しているのですが、1つでも結果が得られると止めてしまい、その際に間違った文字エンコーディングで解釈してしまうことがあるためです。
<meta http-equiv="Content-Type" content="text/html; charset=xxx" />またはHTML5の場合は<meta charset="xxx" />のcharset属性の値、ただしHTTPレスポンスヘッダでCSSファイル用に文字エンコーディングを設定している場合はHTTPレスポンスヘッダで得られた値- CSSファイルの始めにある文字のUnicodeのバイト順の値
@charsetルールで指定された値link要素のcharset属性で指定された値（ただし、HTML5ではlink要素のcharset属性は廃止されたため、この方法は使うべきではありません）。- ここまで試して結果が得られなかった場合は、最終的にUAは文字コードがUTF-8であると仮定する
このためUAが文字エンコーディングを誤って文字化けを起こさないように、@charsetルールで文字コードを必ず指定すること、あわせて非ASCII文字列を用いる際には16進表記のUnicodeへエスケープして使うことをおすすめします。16進表記のUnicodeとは、ヒラギノ角ゴ ProN W6 であれば、\30D2\30E9\30AE\30CE\89D2\30B4 ProN W6 のように非ASCII文字列をエスケープして表記します。
ヒラギノ角ゴ ProN W6とメイリオを用いた表記であれば、次のように記述しておくことで間違った解釈が起こるようなことはなく安全でしょう。
body{
font-family : "HiraKakuProN-W6", "\30D2\30E9\30AE\30CE\89D2\30B4 ProN W6", Meiryo, "\30E1\30A4\30EA\30AA", sans-serif;
}