目次
フォントプロパティの設定は、スタイルシートの最も一般的な用途の中の1つである。残念ながら、フォントを分類するために明確に定義されかつ普遍的に受け入れられる分類は存在せず、一方のフォントファミリーに適用される条件は、他方のフォントファミリーに適切でないかもしれない。たとえば、'italic'は一般に傾斜したテキストを分類するために使用されるが、傾斜したテキストはまた、Oblique、Slanted、Incline、Cursive、Kursivと名付けられてもよい。したがって、特定のフォントに典型的なフォント選択プロパティを対応づけることは単純な問題ではない。
フォントプロパティの普遍的な分類で一般に認められたものはないので、フォント書体へのプロパティのマッチングは慎重に行わなければならない。プロパティは、このマッチング処理の結果がユーザーエージェントを横断してできるだけ一貫していることを保証するために明確に定義された順序で照合される（フォント書体の同じライブラリーがそれらの各々に提示されると仮定する）。
（上記のアルゴリズムは、各文字のCSS 2.2プロパティを再検討することを避けるために最適化することができる。）
上記の(2)からのプロパティごとの一致規則は次のとおり：
| プロパティ名： | font-family |
|---|---|
| 値： | [[ <family-name> | <generic-family> ] [, [ <family-name>| <generic-family>] ]* ] | inherit |
| 初期値： | ユーザーエージェントに依存 |
| 適用要素： | すべての要素 |
| 継承： | yes |
| パーセンテージ： | 利用不可 |
| メディア： | visual |
| 算出値： | 指定される |
プロパティ値は、フォントファミリー名と総称ファミリー名の両方またはいずれか一方の優先順位のリストである。
body { font-family: Gill, Helvetica, sans-serif }
多くのフォントは"欠落文字"のグリフ、典型的には四角を提供するが、その名前が示すように、これはフォントで見つけることができない文字に一致すると考えるべきではない。（しかし、グリフは、"欠落文字"の文字コードポイントU+FFFDに一致すると見なされるべきである）。
2種類のフォントファミリー名が存在する：
スタイルシートの設計者は、最後の代替手段として総称フォントファミリーを提示することが奨励される。総称フォントファミリー名はキーワードであり、引用符で囲んではならない。
フォントファミリー名は、文字列として引用符で囲まれる、または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'、'default'、'initial'、または総称フォントキーワード（'serif'、'sans-serif'、'monospace'、'fantasy'、'cursive'）と偶然同じになる引用符で囲まれないフォントファミリー名は、'<family-name>'型と一致しない。これらの名前は、同じ名前をもつキーワードとの混乱を防ぐために引用符で囲まなければならない。したがって、'font-family: Times, inherit'は無効な宣言であることに注意する。なぜなら、その位置における'inherit'は、妥当なキーワードでもなく妥当なフォントファミリー名でもないからである。
総称フォントファミリーは、指定したフォントのいずれも選択することができないという最悪の場合において、スタイルシート著者の意図の一部を維持するためのフォールバックメカニズムである。最適な印刷制御のために、特定の指定されたフォントをスタイルシートで使用すべきである。
すべての5つの汎用フォントファミリーは、すべてのCSSの実装で存在するように定義される（5つの異なる実際のフォントを必ずしも対応させる必要はない）。ユーザーエージェントは、各ファミリーの特性だけでなく、可能な限り基本的な技術で許される限度内で表現する総称フォントファミリーのために合理的なデフォルトの選択肢を提供すべきである。
ユーザーエージェントは、ユーザーが総称フォントの代替選択肢を選択できるようにすることを奨励する。
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 |
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 |
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 |
CSSで使用されるFantasy（ファンタジー）フォントは、（文字を表すものでない、パイフォントまたはピクチャフォントとは対照的に）文字の表現を含むようにしつつ、主に装飾的である。例を以下に示す：
| ラテン語フォント | Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz |
monospace（モノスペース）フォントの唯一の基準は、すべてのグリフが同じ固定幅を持つことである。（これは、アラビア語などのいくつかのスクリプトをこの上なく奇妙に見えるようにすることになる。）その効果は手動のタイプライターに似ており、多くの場合コンピューターコードのサンプルを設定するために使用される。
この説明に適合するフォントの例は次のとおり：
| ラテン語フォント | Courier, MS Courier New, Prestige, Everson Mono |
| ギリシャ語フォント | MS Courier New, Everson Mono |
| キリル文字フォント | ER Kurier, Everson Mono |
| 日本語フォント | Osaka Monospaced |
| チェロキー語フォント | Everson Mono |
| プロパティ名： | 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、Cursive、Kursivの名前を持つフォントは、'italic'と分類される。
h1, h2, h3 { font-style: italic }
h1 em { font-style: normal }
上記の例において、'H1'内の強調テキストは、通常の書体で出現する。
| プロパティ名： | font-variant |
|---|---|
| 値： | normal | small-caps | inherit |
| 初期値： | normal |
| 適用要素： | すべての要素 |
| 継承： | yes |
| パーセンテージ： | 利用不可 |
| メディア： | visual |
| 算出値： | 指定される |
フォントファミリー内の変化のもう一つの種類は、スモールキャップである。スモールキャップフォントにおける小文字は大文字に似ているが、わずかに異なる全体のバランスを持つ。'font-variant'プロパティは、そのフォントを選択する。
'normal'の値は、スモールキャップフォントでないフォントを選択し、'small-caps'は、スモールキャップフォントを選択する。スモールキャップフォントが通常のフォントを取得し、かつスケーリングされた大文字で小文字を置き換えることによって作成される場合、CSS 2.2で仕様を満たす（必須ではない）。最後の手段として、大文字がスモールキャップフォントの代替として使用される。
次の例は、スモールキャップで'H3'要素を、斜体で強調を、そしてスモールキャップと斜体で'H3'要素の強調をもたらす：
h3 { font-variant: small-caps }
em { font-style: oblique }
古いスタイルの数字、スモールキャップの数字、縮小や拡大された文字などのフォントのような、フォントファミリーの別の亜種が同様にあってもよい。CSS 2.2はこれらを選択するプロパティを持たない。
注：このプロパティがテキストに大文字への変換をもたらす場合、'text-transform'が適用される場合と同じ結果となる。
| プロパティ名： | 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、Bold、Blackとして表されるかもしれない。名前の標準的な慣用法がないため、CSS 2.2におけるウェイトプロパティの値は、値'400'（または'normal'）がそのファミリーに対する'normal'テキスト書体に相当する数値スケールで与えられる。典型的にその書体に関連付けられるウェイト名は、Book、Regular、Roman、Normal、Mediumとなる。
数字で表したウェイト値へのあるファミリー内の他のウェイトの関連性は、そのファミリー内の濃さの順序を維持するためにのみ意図される。しかし、次の経験則は、この場合に割り当てがどのようにされるかを伝える。
一旦フォントファミリーのウェイトがCSSのスケールにマッピングされると、不足するウェイトは次のように選択される：
次の2つの例は、典型的なマッピングを示す。
"Rattlesnake"ファミリーで、薄いものから濃いものへRegular、Medium、Bold、Heavyの4つのウェイトを仮定する。
| 利用可能な書体 | 割り当て | 空きの埋め方 |
|---|---|---|
| "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"に数値の割り当てを決めていないことに注意する。
| 利用可能な書体 | 割り当て | 空きの埋め方 |
|---|---|---|
| "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 |
|---|---|---|
| 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書体のみを持つ。ユーザーエージェントがウェイトの値にファミリー内のフォント書体にどのようにマッピングするかを保証しない。唯一の保証は、与えられた値の書体がより薄い値の書体と同程度のウェイトを持つことである。
| プロパティ名： | font-size |
|---|---|
| 値： | <absolute-size> | <relative-size> | <length> | <percentage> | inherit |
| 初期値： | medium |
| 適用要素： | すべての要素 |
| 継承： | yes |
| パーセンテージ： | 継承されたフォントサイズを参照 |
| メディア： | visual |
| 算出値： | 絶対値 |
フォントサイズは、活版印刷で使用されるem正方形の概念に相当する。特定のグリフがem正方形の外側にあふれるかもしれないことに注意する。値は次の意味を持つ：
[ 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であったが、これはまだ小さいサイズの問題を作成した。実装の経験は、隣接する絶対的なサイズのキーワードの間に固定比率が問題であることを実証しており、この仕様はそのような固定比率を推奨しない。
要素のフォントサイズを計算する場合、長さおよびパーセンテージの値はフォントサイズ表を考慮すべきでない。
負の値は許可されない。
その他のプロパティで、'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 }
| プロパティ名： | 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'フォントの小型版は'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;
}