概要
CSSプロパティ｢font-family｣は、フォントの種類を指定することができます。フォントの種類はカンマで区切って複数指定することができ、最上位から優先されます。これは、閲覧するユーザーの環境で利用可能なフォントが異なっている為で、候補を多く用意しておくことで開発者が意図するフォントで表示することができるからです。
<p class="font-family">フォントファミリーを指定します</p>
<style>
.font-family {
font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
</style>また [csssp]@font-face[/cssp] を使ってwebフォントを使用するケースも昨今では増えてきています。これは、webサーバー上のフォントを読み込んで表示させるので、指定フォントがない場合でも様々なデバイスで同じ表示をさせることができます。
値の指定方法
{ font-family: 値, 値, ...}間に半角スペースの入るフォント名はクォーテーション（もしくはダブルクォーテーション）ではさみこみます。
| 値 | 説明 |
|---|---|
| フォント名 | 'MS PGothic' などフォント名を指定します |
| キーワード | sans-serifなどの総称フォントファミリーを指定します |
総称フォントファミリーの指定
総称フォントファミリーを指定しておくと、指定したフォントファミリーが一切入っていないブラウザで閲覧された場合に、ブラウザの解釈によって、その系統のフォントを判別して表示されます。この総称フォントファミリーは以下のような種類があります。
プロパティの種類について
｢font｣プロパティで指定できるそれぞれの値の一覧です。詳細は各ページを参照してみてください。
| プロパティ名 | 説明 |
|---|---|
| font | フォントに関する指定をまとめて行うショートハンドプロパティ |
| font-style | フォントのスタイルを指定する |
| font-variant | フォントのスモールキャップ指定する |
| font-weight | フォントの太さを指定する |
| font-size | フォントのサイズを指定する |
| font-family | フォントの種類を指定する |
| font-size-adjust | フォントのサイズを調整する |
| font-stretch | フォントを縦長・横長にする |
使用例
基本的にフォント指定はページ全体で指定しますので以下のようにbodyに指定することが多いでしょう。
<p>フォントファミリーを指定します</p>
<style>
body {
font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic'
}
</style>