font-family

概要

CSS の font-family プロパティを使うと、選択した要素に対して、フォントファミリー名と総称ファミリー名の両方、もしくはどちらか一方の優先順位リストを指定することができます。他のほとんどの CSS プロパティと異なり、各値が選択肢であることを示すには、それぞれをコンマで区切ります。ブラウザが選択するのは、コンピュータにインストール済み、もしくは @font-face @ 規則によって与えられる情報を使ってダウンロード可能な、リストの中で最上位のフォントです。

Web 製作者は、font-family リストの中に、総称ファミリーを少なくとも 1 つ、常に追加しておくべきです。指定したフォントが常にコンピュータにインストールされているとは限りませんし、@font-face @ 規則を使ってダウンロードできるとも限らないからです。総称ファミリーを使うことで、必要ならば、ブラウザに受け付け可能な代替フォントを選択させることができます。

font-size やその他のフォント関連プロパティを一度に設定するには、ショートハンドプロパティ font を使うと便利です。

注意: font-family プロパティでは、優先順位の高い方から低い方へ、フォントのリストを指定します。フォント選択は、ユーザのシステム上に存在する、リスト中の一番最初に指定されたフォントを選んで終わるとは 限りません。むしろ、フォント選択は 1 文字ずつ 行われます。なぜなら、利用可能なフォントが、その文字を表示するのに必要なグリフを欠いている場合には、そのフォントよりも順位の低い利用可能なフォントが試行されるからです。しかし、これは Internet Explorer では動作しません。

フォントが一部の stylevariantsize でのみ利用可能な場合、これらのプロパティがどのフォントファミリーを選択するかに影響する可能性があります。

構文

font-family:  family-or-generic-name [, family-or-generic-name]* 

family-or-generic-name には以下のいずれかを指定可能です。

family-name フォントファミリーの名称。例えば、"Times" や "Helvetica" はフォントファミリーです。空白を含むフォントファミリー名は、引用符で囲む必要があります。
generic-family

総称フォントファミリーは代替メカニズムです。このメカニズムによって、指定されたフォントがどれも利用できなかった場合、スタイルシート製作者の意図を多少なりとも保つことができます。総称ファミリー名はキーワードであり、引用符で囲んではいけません。総称フォントファミリーは、フォントファミリー名リストの最終選択肢である必要があります。

serif
グリフには仕上げのストロークがあり、張り出しているか、細長い先端を持ちます。つまり、実際のセリフ活字のような先端を持っています。
例:  Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif
sans-serif
グリフは、装飾付けされていないストロークの端を持ちます。
例: 'Trebuchet MS', 'Liberation Sans', 'Nimbus Sans L', sans-serif
cursive
草書体フォントのグリフには、一般に、続け書き、もしくは、イタリック体の特性以上に、その他の草書体の特性があります。グリフは、部分的に、あるいは完全につながっていて、仕上がりは、印刷された活字というよりは、手書きのペンまたは毛筆で書かれたように見えます。
fantasy
fantasy フォントは、遊び心に溢れた文字表現を含む、主として装飾的なフォントです。
monospace
すべてのグリフは等幅です。
例: "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace

妥当なファミリー名

フォントファミリー名は、引用符で囲まれた文字列か、引用符で囲まれていない 1 つ以上の識別子でなければなりません。これは、引用符で囲まれていないフォントファミリー名において、各トークンの冒頭に区切り記号文字や数字がある場合、エスケープしなければならないということを意味します。また、フォントファミリー名に半角スペースが含まれる場合は引用符で括る必要があります。

例えば、以下の宣言は妥当です:

font-family: 'Gill Sans Extrabold', sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

以下の宣言は 無効 です:

font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;

実際の表示を確認

body     { font-family: "Gill Sans Extrabold", Helvetica, sans-serif }

.receipt { font-family: Courier, "Lucida Console", monospace }

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本的なサポート 1.0 1.0 (1.7 or earlier) 3.0 3.5 1.0
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本的なサポート 1.0 1.0 (1) 6.0 6.0 1.0

仕様

仕様書 策定状況 コメント
CSS Fonts Module Level 3 勧告候補 特に変更なし
CSS Level 2 (Revision 1) 勧告 特に変更なし
CSS Level 1 勧告  

関連情報

Document Tags and Contributors

Contributors to this page: ethertank, Amigomr
最終更新者: ethertank,
サイドバーを隠す