font-family
font-familyプロパティは、フォントのファミリを指定します。
この際、表示されるフォントは半角カンマ(,
)区切りで複数指定する事によって先に指定したフォントファミリから優先されて表示されます。
- 対応ブラウザ
-
プロパティの解説
- 値
- [[ <フォントファミリ名>|<総称ファミリ> ] [, <フォントファミリ名>|<総称ファミリ>]* ]|inherit
- 初期値
- UA(ブラウザなど)に依存
- 適用される要素
- 全ての要素
- 継承
- します
- パーセント値
- N/A
- メディア
- visual
値の解説
- <フォントファミリ名>
-
verdana
などのフォントファミリ名を指定します。
複数指定する場合は、半角カンマ(,
)区切りの優先順リストで指定します。この際、先に記載したフォントファミリの中からユーザの環境で利用できるフォントファミリが表示されていきます。
フォントファミリ名に空白類文字が含まれる場合は、"Hiragino Kaku Gothic Pro"
のように引用符('
)もしくは二重引用符("
)で囲む必要があります。 - <総称ファミリ>
-
総称ファミリ(generic family)は、指定したフォントファミリ名が利用できないユーザ環境の場合に、最低限意図したフォントに近いフォントを表示します。そのため、最後の指定には総称ファミリ名を指定するようにします。
総称ファミリ名には、serif、sans-serif、cursive、fantasy、monospaceの5種類があり、これらはキーワードになるため、引用符で囲まずに記述します。
総称ファミリ(generic family)について
指定できる5つの総称ファミリは、それぞれのキーワードでどの様なフォントを選択するかが定義されています。
- serif
-
日本語の明朝体に相当するフォントです。
具体的には、「MS P明朝」「ヒラギノ明朝 Pro W3」「Times New Roman」「Century」「Georgia」など。 - sans-serif
-
日本語のゴシック体に相当するフォントです。
具体的には、「MS Pゴシック」「メイリオ」「ヒラギノ角ゴ Pro W3」「Arial」「Verdana」など。 - cursive
-
日本語の草書体に相当するフォントで、手書き風の文字なども含まれます。
具体的には、「Caflisch Script」「Snell」「Comic Sans MS」など。 - fantasy
-
装飾がメインのフォントです。
具体的には、「fantasy」「Critter」「alba」など。 - monospace
-
等幅フォントです。
具体的には、「MS ゴシック」「Osaka-等幅」「Courier New」「Andale Mono」など。
これら、総称ファミリは指定したフォントファミリ全てが利用できない場合の最終手段な訳ですが、フォントファミリの指定が何もなくともブラウザデフォルトのフォントが反映されるので、フォントに対してどうこうってのが無いのなら何も指定しないのも手です。
font-familyのサンプル
<div class="item">
<p class="serifSample">
総称ファミリ「serif」に相当するサンプルです。
</p>
<p class="sansSample">
総称ファミリ「sans-serif」に相当するサンプルです。
</p>
<p class="cursiveSample">
総称ファミリ「cursive」に相当するサンプルです。
</p>
<p class="monospaceSample">
総称ファミリ「monospace」に相当するサンプルです。
</p>
</div>
div.item {
margin: 20px;
}
div.item p {
font-size: 250%;
margin-bottom: 1em;
}
div.item p.serifSample {
font-family: "MS 明朝", "Times New Roman", serif;
}
div.item p.sansSample {
font-family: Verdana, "MS Pゴシック", sans-serif;
}
div.item p.cursiveSample {
font-family: "Comic Sans MS", cursive;
}
div.item p.monospaceSample {
font-family: "MS ゴシック", "Courier New", "Osaka-等幅", monospace;
}
4種類試してみます。
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
総称ファミリ「serif」に相当するサンプルです。
総称ファミリ「sans-serif」に相当するサンプルです。
総称ファミリ「cursive」に相当するサンプルです。
総称ファミリ「monospace」に相当するサンプルです。
日本語だと扱えるフォントが少ないので残念です...。
そのためって訳では有りませんが、ユーザ環境に指定したフォントが入っていなくとも任意のフォントが表示できるようにCSS3で策定中のウェブフォント(Web Fonts)という@font-face
を使ったフォントの埋め込みが有ります。
これはIEでは(独自で)かなり前から実装されていたみたいですが、Safari 3.1~やFirefox 3.5~で実装され色んなところで話題になっています。ただ、現状ではライセンスや容量の問題など色々抱えており今後どうなるかな、と言った感じです。この辺りに関して詳しく知りたい方は、「Web Fonts」でググってみたり「@font-face」辺りでググると色々情報が見つかって幸せになれるかもです。