文字の種類を指定する

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要素にフォントの種類を複数指定する サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!