font-family
CSSの書き方
font-family:値,値 … ;
| CSSの詳細情報 | |||||
|---|---|---|---|---|---|
| プロパティ名 | font-family | 対応ブラウザ | Windows | MAC | |
| 読み方 | フォントファミリー | IE 5.0以上/FF1.0/NS7.1/OP8.0 | SF/IE5.0 | ||
| 意味 | フォントの種類 | CSSレベル | CSSレベル1 | ||
| 設定値 | フォント名 | 対象 | すべての要素 | ||
| デフォルト | ブラウザに依存 | 継承 | する | ||
解説
明朝体やゴシック体など、フォントの種類を変えるためのスタイルシートです。
値として有効な指定は「固有のフォント名（MSゴシックなど）」、「フォントの大まかな種類（グループ）のみの指定」、「複数のフォントによる指定」の3種類の方法があります。
固有のフォント名で指定する
MSゴシック、Arialなど個別のフォントを指定する方法です。
指定したフォントが閲覧している人のパソコンにインストールされていた場合、ブラウザは該当のフォントで表示します。
一方、指定したフォントが用意されていない場合、最も似たフォントで表示されます。
フォント名を直接指定するこの場合では、フォント名は正しく記述する必要があります。
例えば、「大文字/小文字」、「全角/半角」、「スペース」も一字一句同じにする必要があります。
フォントの大まかな種類（グループ）のみの指定
多くのフォントを大まかな種類に分け、そのグループ名で指定する方法です。
特定のフォントを指定しているわけではないので、そのグループに属するフォントが一つでもあれば、自動的に選ばれて表示されます。
スタイルシートではフォントグループを以下のように定めています。
以下のグループ名を一つまたは複数、値に記述します。
| フォントグループ | |
|---|---|
| 設定値 | グループ内容 |
| serif | 明朝系（飾りのある）フォント |
| sans-serif | ゴシック系（飾りのない）フォント |
| fantasy | 装飾系フォント |
| cursive | 草書体系フォント |
| monospace | 等幅系フォント |
複数のフォントによる指定
固有のフォント名やフォントのグループ名を複数記述する指定方法です。
記述順に優先度が低くなります。
最初に書いたフォントがない場合は2番目のフォントに、2番目がなければ3番目に…のような順序にフォントが選ばれます。
従って、フォントの取りこぼしがないように、最初は「固有のフォント名」で書き始めて、後に「フォントのグループ名」を書くのが一般的です。
なお、複数記述する場合は「フォント名，グループ名」のように名前同士を「,（半角カンマ）」で区切ります。
ref,アクセシビリティを考えたフォント指定
CSS/HTMLサンプル
body { font-family:Verdana,Arial,Helvetica,sans-serif; }
BODY要素にフォントの種類を複数指定する サンプル
