目次
フォントプロパティの設定は、スタイルシートの最も一般的な使用方法の一つとなるでしょう。しかし、フォントを分類するための明確で普遍的に受け入れられる分類法は存在せず、あるフォントファミリーに適用される用語が他のファミリーには適切でない場合があります。例えば、『italic』は斜体テキストを表すためによく使用されますが、斜体テキストは Oblique, Slanted, Incline, Cursive または Kursiv とも表記されることがあります。そのため、典型的なフォント選択プロパティを特定のフォントにマッピングするのは容易な問題ではありません。
フォントプロパティの普遍的な分類法が存在しないため、プロパティをフォントフェイスに一致させる作業は慎重に行う必要があります。プロパティは明確に定義された順序で一致させることで、（同じフォントフェイスのライブラリが各ユーザーエージェントに提供されていると仮定して）この一致プロセスの結果が可能な限り一貫性を保つようにします。
（上記のアルゴリズムは、各文字に対してCSS 2.2プロパティを再訪する必要を回避するように最適化できます。）
上記(2)のプロパティごとの一致ルールは以下の通りです。
| 名前: | font-family |
|---|---|
| 値: | [[ <family-name> | <generic-family> ] [, [ <family-name>| <generic-family>] ]* ] | inherit |
| 初期値: | ユーザーエージェントに依存 |
| 適用対象: | すべての要素 |
| 継承: | はい |
| パーセンテージ: | N/A |
| メディア: | 視覚 |
| 計算値: | 指定通り |
このプロパティの値は、フォントファミリー名および/または汎用ファミリー名の優先順位リストです。 他の多くのCSSプロパティとは異なり、コンポーネント値は代替を示すためにカンマで区切られます:
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' は有効なキーワードにも有効なフォントファミリー名にもなり得ないためです。
汎用フォントファミリーはフォールバックメカニズムであり、指定されたフォントが選択できない最悪の場合に、スタイルシート作成者の意図の一部を保持する手段です。最適なタイポグラフィ制御を行うには、特定の名前付きフォントをスタイルシートで使用するべきです。
すべてのCSS実装において、5つの汎用フォントファミリーが存在するものと定義されています（必ずしも5つの実際のフォントに対応する必要はありません）。ユーザーエージェントは、それぞれのファミリーの特性を可能な限り表現する合理的なデフォルト選択肢を提供するべきです。
ユーザーエージェントは、汎用フォントの代替選択肢をユーザーが選択できるようにすることを推奨します。
CSSで使用される用語としてのセリフフォントのグリフは、仕上げのストローク、フレアまたは先細りの端、または実際のセリフ付きの端（スラブセリフを含む）がある傾向があります。セリフフォントは通常、プロポーショナルに間隔が取られています。また、太いストロークと細いストロークの間の変化が、'sans-serif' 汎用フォントファミリーのフォントよりも大きいことがよくあります。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 |
| 日本語フォント | リュウミン Light-KL, 教科書ICA, 太明 A101 |
| アラビアフォント | Bitstream Cyberbit |
| チェロキー語フォント | Lo Cicero Cherokee |
CSSで使用される用語としてのサンセリフフォントのグリフは、ストロークの端がシンプルで、フレア、クロスストローク、その他の装飾がほとんどまたはまったくない傾向があります。サンセリフフォントは通常、プロポーショナルに間隔が取られています。また、セリフファミリーのフォントと比較して、太いストロークと細いストロークの間の変化が少ないことがよくあります。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 |
| 日本語フォント | 新ゴ, 平成角ゴシック W5 |
| アラビアフォント | MS Tahoma |
CSSで使用される用語としての筆記体フォントのグリフは、通常、結合ストロークや斜体フォント以上の筆記体特性を持っています。グリフは部分的または完全に接続されており、その結果、印刷された文字よりも手書きのペンやブラシの文字に似ています。一部のスクリプト（例えばアラビア語）のフォントはほぼ常に筆記体です。CSSでは、特定のスクリプトに対して他の名前がより親しまれている場合でも、どのスクリプトに対しても筆記体フォントを適用するために 'cursive' という用語を使用します（例えば、Chancery、Brush、Swing、Scriptなどの名前がフォント名に使用されます）。
この説明に合致するフォントの例は以下の通りです:
| ラテンフォント | Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery |
| キリルフォント | ER Architekt |
| ヘブライフォント | Corsiva |
| アラビアフォント | DecoType Naskh, Monotype Urdu 507 |
CSSで使用されるファンタジーフォントは、主に装飾的でありながら文字を表現しています（文字を表現しないPiフォントやピクチャフォントとは対照的です）。例として以下が挙げられます:
| ラテンフォント | Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz |
等幅フォントの唯一の基準は、すべてのグリフが同じ固定幅であることです。（これにより、アラビア語などのスクリプトが非常に特異に見えることがあります。）その効果は手動タイプライターに似ており、コンピューターコードのサンプルを設定するためによく使用されます。
この説明に合致するフォントの例は以下の通りです:
| ラテンフォント | 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 |
| 適用対象: | すべての要素 |
| 継承: | はい |
| パーセンテージ: | N/A |
| メディア: | 視覚 |
| 計算値: | 指定通り |
'font-style' プロパティは、フォントファミリー内でノーマル（「ローマン」または「アップライト」とも呼ばれることがあります）、イタリック、およびオブリークのフェイスを選択します。
'normal' の値はユーザーエージェントのフォントデータベースで「ノーマル」と分類されるフォントを選択し、'oblique' は「オブリーク」とラベル付けされたフォントを選択します。'italic' の値は「イタリック」とラベル付けされたフォント、またはそれが利用できない場合は「オブリーク」とラベル付けされたフォントを選択します。
ユーザーエージェントのフォントデータベースで「オブリーク」とラベル付けされたフォントは、実際にはノーマルフォントを電子的に傾けて生成された可能性があります。
フォント名に Oblique、Slanted、または Incline を含むフォントは、通常、ユーザーエージェントのフォントデータベースで「オブリーク」とラベル付けされます。Italic、Cursive、または Kursiv を含むフォント名は、通常「イタリック」とラベル付けされます。
h1, h2, h3 { font-style: italic }
h1 em { font-style: normal }
上記の例では、'H1' 内の強調されたテキストはノーマルフェイスで表示されます。
| 名前: | font-variant |
|---|---|
| 値: | normal | small-caps | inherit |
| 初期値: | normal |
| 適用対象: | すべての要素 < |
| 継承: | はい |
| パーセンテージ: | N/A |
| メディア: | 視覚 |
| 計算値: | 指定通り |
フォントファミリー内のもう一つのバリエーションはスモールキャップスです。スモールキャップスフォントでは、小文字が大文字に似ていますが、サイズが小さく、わずかに異なる比率を持っています。'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 |
| 適用対象: | すべての要素 |
| 継承: | はい |
| パーセンテージ: | N/A |
| メディア: | 視覚 |
| 計算値: | テキスト参照 |
'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 }
フォント（フォントデータ）は通常、太さを記述する名前を持つ1つ以上のプロパティを持っています。これらの太さ名には普遍的な意味が存在しません。それらの主な役割は、単一のフォントファミリー内で異なる暗さのフェイスを区別することです。フォントファミリー間での使用は非常に多様です。例えば、あるフォントを「太字」と考える場合、そのフォントは Regular, Roman, Book, Medium, Semi- または DemiBold, Bold, または Black と記述されることがあります。これは、フォントの「ノーマル」フェイスがデザイン内でどれだけ黒いかによります。このような名前の標準的な使用法が存在しないため、CSS 2.2 の太さプロパティ値は数値スケールで与えられ、値 '400'（または 'normal'）はそのファミリーの「ノーマル」テキストフェイスに対応します。そのフェイスに関連付けられた太さ名は通常、Book, Regular, Roman, Normal または時には Medium です。
ファミリー内で他の太さを数値の太さ値に関連付けることは、そのファミリー内での暗さの順序を維持することのみを意図しています。しかし、以下のヒューリスティックにより、この場合の割り当て方法が示されます:
フォントファミリーの太さがCSSスケールにマッピングされると、欠けている太さは次のように選択されます:
以下の2つの例は一般的なマッピングを示しています。
「Rattlesnake」ファミリーの4つの太さを仮定します（最も軽いものから最も暗いものまで）: Regular, Medium, Bold, Heavy。
| 利用可能なフェイス | 割り当て | 欠けている部分を埋める |
|---|---|---|
| "Rattlesnake Regular" | 400 | 100, 200, 300 |
| "Rattlesnake Medium" | 500 | |
| "Rattlesnake Bold" | 700 | 600 |
| "Rattlesnake Heavy" | 800 | 900 |
「Ice Prawn」ファミリーの6つの太さを仮定します: Book, Medium, Bold, Heavy, Black, ExtraBlack。 この場合、ユーザーエージェントは「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" | (なし) |
'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 |
上記の表は、ノーマルおよびボールドフェイスに加えて、細字および極太フェイスを含むフォントファミリーを前提として、次の相対的なbolderまたはlighterのフェイスを選択することに相当します。特定の要素に使用される正確な太さ値を細かく制御したい場合は、相対的な太さではなく数値を使用することをお勧めします。
各 'font-weight' 値に対して暗いフェイスが存在することは保証されていません。例えば、一部のフォントにはノーマルおよびボールドフェイスしかない場合がありますが、他のフォントには8つのフェイスウェイトがある場合もあります。ユーザーエージェントがフォントファミリー内のフェイスをどのように太さ値にマッピングするかについての保証はありません。唯一の保証は、特定の値のフェイスが、より軽い値のフェイスよりも暗くなることが保証されているということです。
| 名前: | font-size |
|---|---|
| 値: | <absolute-size> | <relative-size> | <length> | <percentage> | inherit |
| 初期値: | medium |
| 適用対象: | すべての要素 |
| 継承: | はい |
| パーセンテージ: | 継承されたフォントサイズを参照 |
| メディア: | 視覚 |
| 計算値: | 絶対的な長さ |
フォントサイズはタイポグラフィで使用されるエムスクエアに対応します。ただし、特定のグリフはエムスクエアの外にはみ出す場合があります。値の意味は以下の通りです:
[ 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単位あたり9ピクセル未満のフォントサイズを作成しないようにするべきです。
注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 |
| 初期値: | 個別のプロパティを参照 |
| 適用対象: | すべての要素 |
| 継承: | はい |
| パーセンテージ: | 個別のプロパティを参照 |
| メディア: | 視覚 |
| 計算値: | 個別のプロパティを参照 |
'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'）に設定されます。4番目のルールでは、'font-weight' が 'bold' に、'font-style' が 'italic' に設定され、暗黙的に 'font-variant' が 'normal' に設定されます。
5番目のルールでは、'font-variant' ('small-caps')、'font-size'（親のフォントの120%）、'line-height'（フォントサイズの120%）、および 'font-family' ('fantasy') が設定されます。これにより、キーワード 'normal' は残りの2つのプロパティ、'font-style' と 'font-weight' に適用されます。
以下の値は システムフォント を参照します:
システムフォントは全体としてのみ設定できます。つまり、フォントファミリー、サイズ、太さ、スタイルなどがすべて同時に設定されます。 その後、必要に応じてこれらの値を個別に変更することができます。指定された特性を持つフォントが特定のプラットフォームに存在しない場合、ユーザーエージェントはインテリジェントに代替する（例: 'small-caption' フォントには '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 }
特定のシステムでドロップダウンメニューに使用されるフォントが、例えば9ポイントの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;
}