15 フォント

目次

注: この仕様の複数の節は、他の仕様によって更新されている。置換された仕様および節のリストの詳細は、最新のCSS Snapshotにおける"Cascading Style Sheets (CSS) — 公式の定義"を参照されたい。

CSS Working Groupはまた、CSS level 2 revision 2 (CSS 2.2).を開発している。

15.1 概論

フォントプロパティの設定は、スタイルシートの最も一般的な用途の中の1つである。残念ながら、フォントを分類するための明確に定義された普遍的に受け入れる分類は存在せず、一方のフォントファミリーに適用される条件は、他方のフォントファミリーに適切でないかもしれない。たとえば、'itaric'は一般に傾斜したテキストを分類するために使用されるが、傾斜したテキストはまた、Oblique、Slanted、Incline、CursiveKursivと名付けられてもよい。したがって、特定のフォントに典型的なフォント選択プロパティを対応づけることは単純な問題ではない。

15.2 フォントのマッチングアルゴリズム

フォントプロパティの普遍的な分類で一般に認められたものはないので、フォント書体へのプロパティのマッチングは慎重に行わなければならない。プロパティは、このマッチング処理の結果がユーザーエージェントを横断してできるだけ一貫していることを保証するために十分に定義された順序で照合される(フォント書体の同じライブラリがそれらの各々に提示されると仮定する)。

  1. ユーザーエージェントは、認識するすべてのフォントの関連するCSS 2.1のプロパティのデータベースを作成する(またはアクセスする)。2つのフォントがまったく同じ特性を持つ場合、ユーザーエージェントはそのフォントのうちの1つを選択する。
  2. 与えられた要素でかつその要素内の各文字に対して、ユーザーエージェントはその要素に適用されるフォントのプロパティを翻訳する。プロパティの完全なセットを使用して、ユーザーエージェントは仮のフォントファミリーを選択するために'font-family'プロパティを使用する。残りのプロパティは、各プロパティで記述されるマッチングの基準に従ってそのフォントファミリーに対して検証される。残りのすべてのプロパティの一致がある場合、その特定の要素または文字に一致するフォント書体となる。
  3. ステップ2によって処理されている'font-family'内に一致するフォント書体が存在せず、かつフォントセットで次の選択肢の'font-family'がある場合、次の選択肢の'font-family'とともにステップ2を繰り返す。
  4. 一致するフォント書体があるが、フォントが現在の文字に対するグリフを含まず、かつフォントセットで次の選択肢の'font-family'がある場合、次の選択肢の'font-family'とともにステップ2を繰り返す。
  5. 2で選択したフォントファミリー内にフォントが存在しない場合、。デフォルトのフォントの中で得ることができる最良の一致を使用して、ユーザーエージェント依存のデフォルトの'font-family'を使用し、手順2を繰り返す。特定の文字がこのフォントを用いて表示することができない場合、ユーザーエージェントはその文字に適したフォントを決定するために他の手段を使用してもよい。ユーザーエージェントは、なるべくならユーザーエージェントに利用可能なフォント書体のいずれか由来の"欠落文字"のグリフで、ユーザーエージェントによって選択される可視シンボルへの適切なフォントを持たない各文字を対応づけるべきである。

(上記のアルゴリズムは、各文字のCSS 2.1プロパティを再検討することを避けるために最適化することができる。)

上記の(2)からのプロパティごとの一致規則は次のとおり:

  1. 'font-style'を最初に試みる。CSSキーワード'italic'(推奨)または'oblique'に分類されるユーザーエージェントのフォントデータベースでいずれかの書体がある場合、'Italic'は満たされる。そうでなければ、値は正確に一致しなければならないか、font-styleは失敗する。
  2. 'font-variant'を次に試みる。'small-caps'は、(1) 'small-caps'として分類されるフォント、(2)スモールキャップが合成されたフォント、(3)すべての小文字が大文字に置き換えられたフォントと一致する。スモールキャップフォントは、電子的に通常のフォントからスケーリングした大文字で合成されてもよい。'normal'は、通常の(非スモールキャップの)変体と一致する。フォントは、通常の変体を持つために失敗することはできない。スモールキャップとして唯一使用可能なフォントは、'normal'書体または'small-caps'書体のいずれかとして選択可能にすることになる。
  3. 'font-weight'は次で一致され、失敗することはない。('font-weight'は下記を参照のこと。)
  4. 'font-size'は、ユーザーエージェント依存の許容誤差範囲内で一致されなければならない。(典型的には、ビットマップフォントの許容誤差は20%である一方、スケーラブルフォントのサイズは最も近い整数ピクセルに丸められる。)たとえば、他のプロパティで'em'の値による追加の計算は、'font-size'の算出値に基づく。

15.3 フォントファミリー'font-family'プロパティ

'font-family'
値:  [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit
初期値:  ユーザーエージェントに依存
適用対象:  すべての要素
継承:  yes
パーセンテージ:  利用不可
メディア:  visual
算出値:  指定される

プロパティ値は、フォントファミリー名と総称ファミリー名の両方またはいずれか一方の優先順位のリストである。

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

多くのフォントは"欠落文字"のグリフ、典型的には四角を提供するが、その名前が示すように、これはフォントで見つけることができない文字に一致すると考えるべきではない。(しかし、グリフは、"欠落文字"の文字コードポイントU+FFFDに一致すると見なされるべきである)。

2種類のフォントファミリー名が存在する:

<family-name>
最適なフォントファミリーの名称。上記の例で、"Gill"および"Helvetica"は、フォントファミリーである。
<generic-family>
上記の例で、最後の値は総称ファミリー名である。次の総称ファミリーが定義される:

スタイルシートの設計者は、最後の代替手段として総称フォントファミリーを提示することが奨励される。総称フォントファミリー名はキーワードであり、引用符で囲んではならない。

フォントファミリー名は、文字列として引用符で囲まれる、または1つ以上の識別子のシーケンスとして引用符なしのいずれかで与えられなければならない。これは、各トークンの開始時にほとんどの句読文字と数字が、引用符なしのフォントファミリー名にエスケープされなければならないことを意味する。

たとえば、以下の宣言は不正である:

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: "New Century Schoolbook", serif }

<BODY STYLE="font-family: '21st Century', fantasy">

キーワード値('inherit'、'serif'、'sans-serif'、'monospace'、'fantasy'、'cursive')と偶然同じになるフォントファミリーはキーワードとの混乱を防ぐために、引用符で囲まなければならない。キーワード'initial'と'default'は、将来の使用のために予約されており、フォント名として使用する場合も引用符で囲まなければならない。ユーザーエージェントは、'<family-name>'型に一致するものとしてこれらのキーワードを考慮してはならない。

15.3.1 総称フォントファミリー

総称フォントファミリーは、指定したフォントのいずれも選択することができないという最悪の場合において、スタイルシート著者の意図の一部を維持するためのフォールバックメカニズムである。最適な印刷制御のために、特定の指定されたフォントをスタイルシートで使用すべきである。

すべての5つの汎用フォントファミリーは、すべてのCSSの実装で存在するように定義される(5つの異なる実際のフォントを必ずしも対応させる必要はない)。ユーザーエージェントは、各ファミリーの特性だけでなく、可能な限り基本的な技術で許される限度内で表現する総称フォントファミリーのために合理的なデフォルトの選択肢を提供すべきである。

ユーザーエージェントは、ユーザーが総称フォントの代替選択肢を選択できるようにすることを奨励する。

15.3.1.1 serif

CSSで使用される用語serif(セリフ)フォントのグリフは、ストローク仕上げ、フレア、または先細り端を持つ傾向にある、または実際に(スラブセリフを含む)セリフ先端を持つ。serifフォントは一般的にプロポーショナルフォントである。serifフォントは、しばしば'sans-serif'総称フォントファミリー由来のフォントよりも線の太さに大きな違いを表す。Mincho(日本語)、SungまたはSong(中国語)、TotumまたはKodig(韓国語)などの特定のスクリプト名がより身近かもしれないが、CSSは任意のスクリプトフォントに適用する用語'serif'を使用する。このように説明される任意のフォントは、一般的な'serif'ファミリーを表すために使用されてもよい。

この説明に適合するフォントの例は次のとおり:

ラテン語フォント Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
ギリシャ語フォント Bitstream Cyberbit
キリル文字フォント Adobe Minion Cyrillic, Excelsior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinist
ヘブライ語フォント New Peninim, Raanana, Bitstream Cyberbit
日本語フォント Ryumin Light-KL, Kyokasho ICA, Futo Min A101
アラビア語フォント Bitstream Cyberbit
チェロキー語フォント Lo Cicero Cherokee

15.3.1.2 sans-serif

CSSで使用される用語sans-serif(サンセリフ)フォントのグリフは、プレーンなストローク端を持つ傾向がある。フレア、クロスストローク、他の装飾はほとんどまたは一切ない。sans-serifフォントは、一般的にプロポーショナルフォントである。sans-serifフォントは、しばしば'serif'ファミリーの提供するフォントに比べて、線の太さの変化はほとんどない。Gothic(日本語)、Kai(中国語)、またはPathang(韓国語)などの特定のスクリプト名がより身近かもしれないが、CSS は任意のスクリプトフォントに適用する用語'sans-serif'を使用する。このように説明される任意のフォントは、一般的な'sans-serif'ファミリーを表すために使用されてもよい。

この説明に適合するフォントの例は次のとおり:

ラテン語フォント MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
ギリシャ語フォント Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
キリル文字フォント Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
ヘブライ語フォント Arial Hebrew, MS Tahoma
日本語フォント Shin Go, Heisei Kaku Gothic W5
アラビア語フォント MS Tahoma

15.3.1.3 cursive

CSSで使用される用語cursive(カーシヴ)フォントのグリフは、一般にイタリック体の書体の範囲を超えてストローク接合または他の筆記体の特性のいずれかを持つ。グリフは部分的または完全に接続され、そしてその結果は印刷文字よりも手書きのペンや毛筆のように見える。アラビア語など、一部のスクリプトのためのフォントは、ほとんどがcursiveである。Chancery、Brush、Swing、Scriptなどの他の名前もフォント名に使用されるが、CSSは任意のスクリプトのフォントに適用する用語'cursive'を使用する。

この説明に適合するフォントの例は次のとおり:

ラテン語フォント Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery
キリル文字フォント ER Architekt
ヘブライ語フォント Corsiva
アラビア語フォント DecoType Naskh, Monotype Urdu 507

15.3.1.4 fantasy

CSSで使用されるFantasy(ファンタジー)フォントは、(文字を表すものでない、パイフォントまたはピクチャフォントとは対照的に)文字の表現を含むようにしつつ、主に装飾的である。例を以下に示す:

ラテン語フォント Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz

15.3.1.5 monospace

monospace(モノスペース)フォントの唯一の基準は、すべてのグリフが同じ固定幅を持つことである。(これは、アラビア語などのいくつかのスクリプトをこの上なく奇妙に見えるようにすることになる。)その効果は手動のタイプライターに似ており、多くの場合コンピュータコードのサンプルを設定するために使用される。

この説明に適合するフォントの例は次のとおり:

ラテン語フォント Courier, MS Courier New, Prestige, Everson Mono
ギリシャ語フォント MS Courier New, Everson Mono
キリル文字フォント ER Kurier, Everson Mono
日本語フォント Osaka Monospaced
チェロキー語フォント Everson Mono

15.4 フォントスタイル'font-style'プロパティ

'font-style'
値:  normal | italic | oblique | inherit
初期値:  normal
適用対象:  すべての要素
継承:  yes
パーセンテージ:  利用不可
メディア:  visual
算出値:  指定される

'font-style'プロパティは、フォントファミリー内の通常体("roman"や"upright"とも呼ばれる)、イタリック体、オブリーク体の書体から選択する。

'oblique'は'oblique'と分類されるフォントを選択する一方、'normal'の値は、ユーザーエージェントのフォントデータベースで'normal'として分類されるフォントを選択する。'italic'の値は'italic'と分類される、または'italic'が利用できない場合は、'oblique'と分類されるフォントを選択する。

ユーザーエージェントのフォントデータベースで'oblique'と分類されるフォントは、実際にはコンピュータ上で通常のフォントを斜めにして生成したものであってもよい。

一般的に、Oblique、Slanted、Inclineの名前を持つフォントは、ユーザーエージェントのフォントデータベースで'oblique'と分類される。一般的に、Italic、CursiveKursivの名前を持つフォントは、'italic'と分類される。

h1, h2, h3 { font-style: italic }
h1 em { font-style: normal }

上記の例において、'H1'内の強調テキストは、通常の書体で出現する。

15.5 スモールキャップ'font-variant'プロパティ

'font-variant'
値:  normal | small-caps | inherit
初期値:  normal
適用対象:  すべての要素
継承:  yes
パーセンテージ:  利用不可
メディア:  visual
算出値:  指定される

フォントファミリー内の変化のもう一つの種類は、スモールキャップである。スモールキャップフォントにおける小文字は大文字に似ているが、わずかに異なる全体のバランスを持つ。'font-variant'プロパティは、そのフォントを選択する。

'normal'の値は、スモールキャップフォントでないフォントを選択し、'small-caps'は、スモールキャップフォントを選択する。スモールキャップフォントが通常のフォントを取得し、かつスケーリングされた大文字で小文字を置き換えることによって作成される場合、CSS 2.1で仕様を満たす(必須ではない)。最後の手段として、大文字がスモールキャップフォントの代替として使用される。

次の例は、スモールキャップで'H3'要素を、斜体で強調を、そしてスモールキャップと斜体で'H3'要素の強調をもたらす:

h3 { font-variant: small-caps }
em { font-style: oblique }

古いスタイルの数字、スモールキャップの数字、縮小や拡大された文字などのフォントのような、フォントファミリーの別の亜種が同様にあってもよい。CSS 2.1はこれらを選択するプロパティを持たない。

注:このプロパティがテキストに大文字への変換をもたらす場合、'text-transform'が適用される場合と同じ結果となる。

15.6 フォントの太さ'font-weight'プロパティ

'font-weight'
値:  normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
初期値:  normal
適用対象:  すべての要素
継承:  yes
パーセンテージ:  利用不可
メディア:  visual
算出値:  テキスト参照

'font-weight'プロパティは、フォントのウェイトを選択する。値'100'から'900'までは、各数値が少なくとも先行するものと同じ濃さであるウェイトを示す順列を構成する。キーワード'normal'は'400'と同義であり、'bold'は'700'と同義である。'normal'と'bold'以外のキーワードは、フォント名と数値尺度とがしばしば混同されることが示されており、したがって9値のリストが選ばれた。

p { font-weight: normal }   /* 400 */
h1 { font-weight: 700 }     /* bold */

'bolder'および'lighter'値は、親から継承されたウェイトを基準とするフォントのウェイトを選択する:

strong { font-weight: bolder }

フォント(フォントデータ)は典型的に、値がフォントの"weight"を記述している名前である1つ以上のプロパティを持つ。一般に容認される、フォントのウェイト名に普遍的な意味は存在しない。ウェイト名の主な役割は、単一のフォントファミリー内の異なる濃さの書体を区別することである。フォントファミリーを横断した慣用法は非常にさまざまである。たとえば、太字であると考えられるフォントは、フォントの"normal"書体がデザイン内でどの程度黒いかにより、Regular、Roman、Book、Medium、Semi-DemiBold、BoldBlackとして表されるかもしれない。名前の標準的な慣用法がないため、CSS 2.1におけるウェイトプロパティの値は、値'400'(または'normal')がそのファミリーに対する'normal'テキスト書体に相当する数値スケールで与えられる。典型的にその書体に関連付けられるウェイト名は、Book、Regular、Roman、NormalMediumとなる。

数字で表したウェイト値へのあるファミリー内の他のウェイトの関連性は、そのファミリー内の濃さの順序を維持するためにのみ意図される。しかし、次の経験則は、この場合に割り当てがどのようにされるかを伝える。

一旦フォントファミリーのウェイトがCSSのスケールにマッピングされると、不足するウェイトは次のように選択される:

次の2つの例は、典型的なマッピングを示す。

"Rattlesnake"ファミリーで、薄いものから濃いものへRegular、Medium、Bold、Heavyの4つのウェイトを仮定する。

フォントウェイトのマッピング例(1)
利用可能な書体 割り当て 空きの埋め方
"Rattlesnake Regular" 400 100, 200, 300
"Rattlesnake Medium" 500  
"Rattlesnake Bold" 700 600
"Rattlesnake Heavy" 800 900

"Ice Prawn"ファミリーでBook、Medium、Bold、Heavy、Black、ExtraBlackの6つのウェイトを仮定する。この場合、ユーザーエージェントは"Ice Prawn ExtraBlack"に数値の割り当てを決めていないことに注意する。

フォントウェイトのマッピング例(2)
利用可能な書体 割り当て 空きの埋め方
"Ice Prawn Book" 400 100, 200, 300
"Ice Prawn Medium" 500  
"Ice Prawn Bold" 700 600
"Ice Prawn Heavy" 800  
"Ice Prawn Black" 900  
"Ice Prawn ExtraBlack" (none)  

'bolder'と'lighter'値は親要素のウェイトに対する相対値を示す。継承されるウェイト値に基づいて、使用するウェイトは下記のテーブルを使用して計算される。子要素は計算されたウェイトではなく、'bolder'または'lighter'の値を継承する。

'bolder'と'lighter'の意味
継承値 bolder lighter
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700

上記の表は、薄い書体と濃い書体と一緒にnormalとbold書体を含むフォントファミリーを前提として、次の相対的なbolderまたはlighter書体を選択することと同じである。与えられた要素に使用される正確なウェイト値のより細かい制御を望む著者は、相対的なウェイトの代わりに数値を使用すべきである。

'font-weight'値のそれぞれに対してより重いウェイトがあることを保証するものではない。たとえば、8つの書体のウェイトを持つものがある一方で、一部のフォントはnormalとbold書体のみを持つ。ユーザーエージェントがウェイトの値にファミリー内のフォント書体にどのようにマッピングするかを保証しない。唯一の保証は、与えられた値の書体がより薄い値の書体と同程度のウェイトを持つことである。

15.7 フォントの大きさ'font-size'プロパティ

'font-size'
値:  <absolute-size> | <relative-size> | <length> | <percentage> | inherit
初期値:  medium
適用対象:  すべての要素
継承:  yes
パーセンテージ:  継承されたフォントサイズを参照
メディア:  visual
算出値:  絶対値

フォントサイズは、活版印刷で使用されるem正方形の概念に相当する。特定のグリフがem正方形の外側にあふれるかもしれないことに注意する。値は次の意味を持つ:

<absolute-size>
<absolute-size>キーワードは、ユーザーエージェントによって計算および保持されるフォントサイズテーブルへのインデックスである。可能な値は次の通り:

[ xx-small | x-small | small | medium | large | x-large | xx-large ]

次の表は、HTMLの見出しと絶対フォントサイズとのマッピングのためのユーザーエージェントのガイドラインを提供する。'medium'値は、ユーザーの推奨フォントサイズであり、かつ基準の中間値として使用される。

CSS絶対サイズ値 xx-small x-small small medium large x-large xx-large  
HTMLフォントサイズ 1   2 3 4 5 6 7

実装者は、'medium'フォントサイズと特定のデバイスとの相対的な絶対サイズのキーワードおよびその特性(たとえば、デバイスの解像度)に対するスケーリング係数のテーブルを構築すべきである。

異なるメディアは、異なるスケーリング係数を必要としてもよい。また、テーブルを計算する際に、ユーザーエージェントはフォントの品質と可用性を考慮に入れるべきである。テーブルは、フォントファミリーごとに異なってもよい。

注1。 読みやすさの維持のために、このガイドラインを適用するユーザーエージェントは、それでもなお、コンピュータのディスプレイ上にem単位で9px未満の結果となるfont-sizeの作成を避けるべきである。

注2。 CSS1において、隣接するインデックス間の提案されるスケーリング係数は1.5であったが、これはユーザーエクスペリエンスから大きすぎることが判明した。CSS2において、隣接したインデックスの間のコンピュータの画面に対して提案されるスケーリング係数は1.2であったが、これはまだ小さいサイズの問題を作成した。実装の経験は、隣接する絶対的なサイズのキーワードの間に固定比率が問題であることを実証しており、この仕様はそのような固定比率を推奨しない

<relative-size>
<relative-size>キーワードは、フォントサイズおよび親要素のフォントサイズのテーブルに対して相対的に解釈される。可能な値は次のとおり:[ larger | smaller ]。たとえば、親要素が'medium'のフォントサイズを持つ場合、'larger'の値は現在の要素のフォントサイズを'large'にする。親要素のサイズがテーブルのエントリーに近くない場合、ユーザーエージェントはテーブルのエントリーとの間を補間する、または最も近いものに丸めるのも自由である。数値がキーワードを超えた場合、ユーザーエージェントはテーブル値を推定してもよい。

要素のフォントサイズを計算する場合、長さおよびパーセンテージの値はフォントサイズ表を考慮すべきではない。

負の値は許可されない。

その他のプロパティで、'em'および'ex'長さの値は、現在の要素の計算されたフォントサイズを参照する。'font-size'プロパティで、この長さの単位は親要素の計算されたフォントサイズを参照する。

アプリケーションは、コンテキストに応じて明示的なサイズを再解釈してもよいことに注意する。たとえば、内部のVRシーンのフォントは射影歪みのために異なるサイズを得てもよい。

例:

p { font-size: 16px; }
@media print {
	p { font-size: 12pt; }
}
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }

15.8 フォントの略式プロパティ'font'プロパティ

'font'
値:  [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
初期値:  個々のプロパティを参照
適用対象:  すべての要素
継承:  yes
パーセンテージ:  個々のプロパティを参照
メディア:  visual
算出値:  個々のプロパティを参照

'font'プロパティは、下記の場合を除き、'font-style''font-variant''font-weight''font-size''line-height''font-family'をスタイルシートの同じ場所で設定する略式プロパティである。このプロパティの構文は、フォントに関連する複数のプロパティを設定する伝統的な活版印刷の略式表記法に基づくものである。

すべてのフォント関連のプロパティは、最初に前項に掲げるものを含むプロパティの初期値にリセットされる。次に、'font'略式記法で明示的な値を与えられるそのプロパティは、その値に設定される。許可される値と初期値の定義については、以前に定義されたプロパティを参照のこと。

p { font: 12px/14px sans-serif }
p { font: 80% sans-serif }
p { font: x-large/110% "New Century Schoolbook", serif }
p { font: bold italic large Palatino, serif }
p { font: normal small-caps 120%/120% fantasy }

2番目の規則で、フォントサイズのパーセント値('80%')は親要素のフォントサイズを参照する。3番目の規則で、行の高さのパーセンテージは、要素自体のフォントサイズを参照する。

最初の3つの規則で、'font-style'、'font-variant'、'font-weight'が明示的に言及されず、これらは初期値('normal')が3つすべてに設定されることを意味する。4番目の規則は、'font-weight'を'bold'、'font-style'を'italic'に設定し、暗黙的に'font-variant'を'normal'に設定する。

5番目の規則は、'font-variant'('small-caps')、'font-size'(親のフォントの120%)、'line-height'(フォントサイズの120%)、'font-family'('fantasy')に設定する。残りの2つのプロパティ'font-style'と'font-weight'に、キーワード'normal'が適用される。

次の値は、システムフォントを参照する:

caption
キャプションのコントロールに使用されるフォント(たとえば、ボタン、ドロップダウンなど)。
icon
アイコンの表示に使用されるフォント。
menu
メニューに使用されるフォント(たとえば、ドロップダウンメニューやメニューリスト)。
message-box
ダイアログボックスに用いるフォント。
small-caption
小さなコントロールの表示に使用するフォント。
status-bar
ステータスバーに用いるフォント。

システムフォントのみが、まとめて設定されてもよい。フォントファミリー、サイズ、ウェイト、スタイルなどは、同時にすべて設定される。必要に応じて、これらの値は個別に変更してもよい。指定された特性をもつフォントが指定されたプラットフォーム上に存在しない場合、ユーザーエージェントは、インテリジェントな代替(たとえば、'caption'フォントの小型版は'small-caption'フォントに使用されるかもしれない)、またはユーザーエージェントのデフォルトフォントのいずれかに置き換えるべきである。システムフォントの個々のプロパティのいずれかがオペレーティングシステムの使用可能なユーザー設定の一部ではない場合、正常なフォントとして、それらのプロパティは初期値に設定されるべきである。

このプロパティが"ほぼ"略式プロパティであるその理由は、システムフォントは'font-family'自身でなく、このプロパティのみで指定可能であるので、'font'は、著者がプロパティのサブプロパティ以上の操作を行うことを可能にするためである。しかし、'font-weight'などのような個々のプロパティは、今までどおりシステムフォントから取得した値を独立して変化させることができる。

例:

button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
button p { font: menu }
button p em { font-weight: bolder }

特定のシステム上のドロップダウンメニューに使用するフォントが、たとえば、9ptのCharcoalで600ウェイトの場合、あたかもこの規則が有効であったかのようにBUTTONの子孫のP要素は表示される:

button p { font: 600 9px Charcoal }

'font'略式プロパティは、明示的に初期値に値を与えられていないプロパティをリセットするので、これは以下の宣言と同じ効果がある。

button p {
  font-family: Charcoal;
  font-style: normal;
  font-variant: normal;
  font-weight: 600;
  font-size: 9px;
  line-height: normal;
}