CSSフォントモジュールレベル4

1. 導入

本仕様は、CSS3 Fonts仕様（[CSS-FONTS-3]）で記述された基本的なフォント機能を含み、さらに拡張します。

1.1. 値の定義

この仕様は、CSSプロパティ定義の慣例（[CSS2]）に従い、値定義構文（[CSS-VALUES-3]）を使用します。この仕様で定義されていない値型は、CSS Values & Units[CSS-VALUES-3]で定義されています。他のCSSモジュールとの組み合わせによって、これらの値型の定義が拡張される場合があります。

プロパティ固有の値に加えて、この仕様で定義されているすべてのプロパティは CSS全域キーワードをプロパティ値として受け付けます。可読性のため、明示的に繰り返して記載していません。

2. 基本フォントプロパティ

文字を描画する際に使用される特定のフォントフェイスは、フォントファミリーと、その要素に適用される他のフォントプロパティによって決定されます。この構造により、各設定を独立して変更することが可能です。

2.1. フォントファミリー: font-family プロパティ

名前:	font-family
値:	[ <family-name> \| <generic-family> ]#
初期値:	ユーザーエージェントによる
適用対象:	すべての要素とテキスト
継承:	はい
パーセンテージ:	該当なし
算出値:	リスト（各項目は文字列または<generic-family> キーワード）
正規順序:	文法による
アニメーションタイプ:	離散

テスト

このプロパティは、フォントファミリー名または汎用ファミリー名の優先リストを指定します。フォントファミリーは、ウェイト・幅・傾斜の異なるフェイスのセットを定義します。 CSSは、ファミリー名と他のフォントプロパティの組み合わせにより、個々のフェイスを選択します。この選択機構を使うことで、デザインアプリケーションなどでよくあるスタイル名によるフェイス選択ではなく、フォールバック時にもある程度の規則性を保ったテキスト表示が可能となります。

構成値はコンマ区切りのリストで、代替候補を示します。ユーザーエージェントはファミリー名のリストを順に探索し、利用可能なフォントで描画する文字のグリフを含むものが見つかるまで試します。（§ 5.3 クラスターマッチング参照。）これにより、プラットフォームごとの利用可能フォントの違いや、個々のフォントがサポートする文字範囲の違いに対応できます。

body {
    font-family: Helvetica, Verdana, sans-serif;
}

Helveticaが利用可能な場合、それが描画に使われます。 HelveticaもVerdanaも存在しない場合は、汎用フォントファミリー sans-serif が使用されます。

フォントファミリー名には3種類あり、このプロパティで使用できるのは2種類です：

<family-name>

フォントファミリーの名前。前述の例における Helvetica や Verdana など。

これはローカルにインストールされたフォントの場合もあれば、ウェブフォントの場合もある。

<generic-family>

各 <generic-family> キーワードは一般的なフォントの選択を表し、指定された汎用フォントカテゴリに属する、 1つ以上のローカルインストールフォントの別名として機能する。このため <generic-family> は、作者がより具体的に指定したフォントが利用できない場合のフォールバックとして使用できる。

汎用ファミリーには次の 3 種類がある：

すべての Unicode 文字に適用され、かつローカルにインストールされたフォントに常にマッチするもの。例：monospaced。
すべての Unicode 文字に適用されるが、システムによってはローカルにインストールされたフォントにマッチしない場合があるもの。例：ui-rounded。
特定の文字体系に依存し、 Unicode 文字の一部にのみ適用され、かつシステムによってはローカルにインストールされたフォントにマッチしない場合があるもの。例：generic(fangsong)。

堅牢性を高めるため、作者は最後の代替として汎用フォントファミリーを付け加えることが推奨される。また、該当する場合には、個別に名前を挙げたフォントファミリーが利用できないときでも特定のスタイルを優先できるよう、より具体的な汎用フォントファミリーを使うことが望ましい。

なお、<generic-family> キーワードは引用符で囲むことはできない（そうすると <family-name> として解釈される）。

汎用ファミリーキーワードの集合は、 § 2.1.5 汎用フォントファミリーに定義されている。

<system-family-name>

ローカルにインストールされたシステムフォントであり、その使用には一定の制約がある。特に、font-family プロパティでは使用できないが、 font 省略記法では使用できる。

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

caption: キャプション付きコントロール（ボタン、ドロップダウンなど）に使用されるフォント。
icon: アイコンにラベル付けするために使用されるフォント。
menu: メニュー（ドロップダウンメニューやメニューリストなど）に使用されるフォント。
message-box: ダイアログボックスに使用されるフォント。
small-caption: 小さなコントロールをラベル付けするために使用されるフォント。
status-bar: ウィンドウのステータスバーに使用されるフォント。

Tests

system-fonts-serialization.tentative.html (live test) (source)

2.1.1. <family-name> の構文

<family-name> = <string> | <custom-ident>+

汎用ファミリーやシステムフォントファミリー以外のフォントファミリー名は、<string>として引用符で囲むか、 1つ以上の<custom-ident>の連続として引用符なしで指定しなければなりません。

Note: これは、もし実際にその名前が <generic-family> 名のいずれか、あるいはシステムフォント名、もしくは CSS 全域キーワード (CSS-wide keywords) のいずれかと同じであるフォントを本当に持っている場合には、その名前を必ず引用符で囲まなければならない、という意味である。

これを説明するために、次のような風変わりなフォントファミリー名は、引用符で囲まれているため有効である：

font-family: "sans-serif", sans-serif;
font-family: "default", sans-serif;
font-family: "initial", sans-serif;
font-family: "inherit", sans-serif;

<family-name> として識別子の並びが与えられた場合、計算値は、その並びのすべての識別子を単一のスペースで連結して文字列に変換した名前となる。

エスケープの誤りを避けるため、空白、数字、またはハイフン以外の句読点文字を含むフォントファミリー名は引用符で囲むことが推奨される：

フォントファミリー名を引用符で囲むことで、エスケープの間違いを防ぐことができる。

body { font-family: "New Century Schoolbook", serif }

<body style="font-family: '21st Century', fantasy">

font-family キーワード値（たとえば CSS 全域キーワードである inherit や、 <generic-family> キーワードである serif など）とたまたま同じであるフォントファミリーの名前は、同名のキーワードと混同されないよう引用符で囲まなければならない。 UA は、これらのキーワードを <family-name> 型に一致するものとして扱ってはならない。

2.1.2. <generic-family> の構文

<generic-family> = <generic-script-specific>| <generic-complete> | <generic-incomplete>
<generic-script-specific> = generic(fangsong) | generic(kai) | generic(khmer-mul) |  generic(nastaliq)
<generic-complete> = serif | sans-serif | system-ui | cursive | fantasy | math | monospace
<generic-incomplete> = ui-serif | ui-sans-serif | ui-monospace | ui-rounded

構文が衝突しにくくなるよう、より最近定義された汎用フォントファミリーは、関数形式の構文で識別される。

body { font-family: "Adobe Fangsong Std R", generic(fangsong), serif}

この例における最初の選択肢は、Fang Song（仿宋）スタイルの特定の名前付きフォントである。ファミリー名には空白文字が含まれているため、引用符で囲まれている。 2つ目は、最近追加されたスクリプト固有の汎用フォントである。これは unicode-range 固有であり、システムによっては実際にインストールされたフォントにマッチしない場合もあるが、存在する場合は要求されたスタイルの一例となる。 3つ目は汎用のユニバーサルフォントであり、すべてのシステムで必ずマッチすることが保証されている。

2.1.3. <system-family-name> の構文

<system-family-name> = caption | icon | menu | message-box | small-caption | status-bar

2.1.4. フェイスとファミリーの関係

フォントファミリー名は、フォントフェイスの集合に付けられた名前のみを指定します。個々のフェイス自体は指定しません。

例として、以下のフォントが利用可能な場合、 Futuraは一致しますが、Futura Mediumは一致しません:

注: CSSで選択に使うフォント属性の定義はフォント分類体系を定義することを意図していません。タイプデザイナーの考えるファミリーは、標準的な軸（ウェイト（font-weight）、幅（font-width）、傾斜（font-style））以外の軸で変化するフェイス集合になることも多いです。ファミリーはそのファミリー固有の軸でも変化します。 CSSのフォント選択機構は、代替が必要な場合に「最も近い」一致を決定する手段を提供するだけです。

注: フォントをファミリーにグループ化する方法はプラットフォームのフォント管理APIによって異なります。例えば、Windows GDI APIでは1ファミリーに4フェイスしかグループ化できませんが、 DirectWrite APIやCore Text API、その他のプラットフォームではさまざまなウェイト・幅・傾斜を持つファミリーをサポートしています。（詳細は付録A: プラットフォームのフォントプロパティとCSSプロパティの対応を参照。）

フォントファミリー名の照合方法については、下記 § 5.1 ローカライズ名のマッチングを参照してください。

2.1.5. 汎用フォントファミリー

汎用フォントファミリーは、CSSで定義された標準名を持つフォントファミリーですが、システムにインストールされている既存のフォントファミリーへのエイリアスです。ただし、1つの汎用フォントファミリーは文字のUnicode範囲や要素のコンテンツ言語、ユーザーの設定やシステムの設定などに基づき、異なる書体を組み合わせた複合フェイスとなる場合もあります。異なる汎用フォントファミリーが同じ使用フォントにマッピングされることもあります。

テスト

注: 汎用フォントファミリーは、多くのプラットフォームで広く実装されることを意図しています。一方、任意の<family-name>は通常プラットフォーム固有名です。汎用ファミリーはプラットフォームごとに異なるフォントにマッピングされることが想定されています。多くのプラットフォームで特定のデザインを維持したい場合、具体的なフォントにこだわらずこれらの汎用ファミリー名を指定することができます。

ユーザーエージェントは、各汎用ファミリーの性格をできるだけ反映した適切なデフォルト選択肢を提供するべきです。また、ユーザーに汎用フォントファミリーの代替フェイスを選択できるようにすることが推奨されます。

serif

セリフ体フォントは、文字の字形に仕上げのストロークや末端が広がったり細くなったりする処理、あるいは実際のセリフ（スラブセリフを含む）が付いた終端を持つものを表す。セリフ体フォントは一般にプロポーショナル幅である。しばしば、sans-serif 汎用フォントファミリーのフォントよりも、太いストロークと細いストロークの差が大きい。

Note: serif および sans-serif は、ごく一部の文字体系にしか適用されない。 CSS における汎用フォントファミリーとしてのこれらの用法は歴史的なものであり、初期の Web 開発がラテン文字中心であったことを反映している。より適切で広く適用可能な名前としては、たとえば "modulated" や "monoline" などがあり得ただろう。しかし、Web 互換性の理由から、これらの名前を変更することはできない。

CSS は「serif」という用語を、どの文字体系のフォントにも適用されるものとして用いている。実際には、特定の文字体系では別の名前の方がなじみ深い場合もある。たとえば、日本語では明朝、中国語では宋体や宋、韓国語ではBatangなどである。アラビア文字については、Naskh スタイルが serif に相当する。

serif は、常に少なくとも 1 つ以上のマッチしたフォントフェイスに対応付けられていなければならない。

Note: そのフォントフェイスの文字集合カバーについては何の保証もない。したがって、フォント serif が対応付けられるフォントは、すべてのコンテンツに対して使用されるとは限らない。

sans-serif

サンセリフ体フォントの字形は、 CSS におけるこの用語の意味では、一般にコントラストが小さく（縦画と横画の太さがほぼ同じで）、ストロークの終端は装飾のない（末端の広がりや横棒、その他の装飾がない）形状を持つ。サンセリフ体フォントも一般にプロポーショナル幅である。 serif ファミリーのフォントと比べると、しばしば太いストロークと細いストロークの差が小さい。 CSS は「sans-serif」という用語を、どの文字体系のフォントにも適用されるものとして用いているが、実際には特定の文字体系では別の名前の方がなじみ深い場合もある。たとえば、日本語ではゴシック、中国語では黒体（Hei）、韓国語では Gulim などである。

sans-serif は、常に少なくとも 1 つ以上のマッチしたフォントフェイスに対応付けられていなければならない。

Note: そのフォントフェイスの文字集合カバーについては何の保証もない。したがって、フォント sans-serif が対応付けられるフォントは、すべてのコンテンツに対して使用されるとは限らない。

cursive

筆記体 (cursive) フォントの字形は一般にスクリプトスタイルを用い、結果として、印刷された活字というよりも、ペンやブラシで手書きした文字のように見える。 CSS は「cursive」という用語を、どの文字体系のフォントにも適用されるものとして用いているが、実際のフォント名では Chancery、Brush、Swing、Script など他の名称が使われている場合もある。

fantasy

ファンタジー体フォントは、主に装飾的または表現的なフォントであり、文字の装飾的または表現的な表現を含む。実際の文字を表さない Pi フォントや絵文字フォントは含まない。

monospace

等幅フォントの唯一の条件は、すべての字形が同じ固定幅を持つことである。これはしばしば、コンピュータコードのサンプルを表示するのに用いられる。

monospace は、常に少なくとも 1 つ以上のマッチしたフォントフェイスに対応付けられていなければならない。

Note: そのフォントフェイスの文字集合カバーについては何の保証もない。したがって、フォント monospace が対応付けられるフォントは、すべてのコンテンツに対して使用されるとは限らない。

system-ui

この汎用フォントファミリーは、テキストをユーザーインターフェイスの既定フォントでレンダリングできるようにする（これは、他の § 2.1.5 Generic font families と同様、合成フォントである場合もある）。どのフォントを使うかは、UA が動作しているプラットフォームに依存する。クロスプラットフォームな UA では、サポートする各プラットフォームごとに異なるフォントを使うべきである。 system-ui の目的は、 Web コンテンツがネイティブ OS のルック＆フィールに溶け込めるようにすることである。これはハイブリッドアプリケーションや Web アプリケーション、クロスプラットフォームアプリケーションにとって有用である。

Tests

実際にどのフォントが使われるかは、プラットフォームのサポート状況、プラットフォームの言語、ロケール設定、ユーザの設定、Unicode カバー範囲、コンテンツの言語などの要因によって決まる。 UA はオプションとして、既定のユーザーインターフェイスの見た目により近づけるために、 system-ui 使用時にプラットフォームが提供するテキストレンダリングエンジンを利用することもできる。

他の汎用フォントファミリーと同様に、 system-ui に対して特定のインストールフォントを代入しても、計算スタイルには影響しない。

<div id="system-text" style="font-family: system-ui"></div>
...
window.getComputedStyle(document.getElementById("system-text")).getPropertyValue("font-family");

上のスクリプトは、 system-ui がシステムのユーザーインターフェイスフォントの集合にどのように展開されるかについて何も知るべきではない。特に、上のスクリプトはどのプラットフォームでも、結果として "system-ui" を返すべきである。

Note: system-ui は、既定のユーザーインターフェイスフォントに影響を与える要因が複数あるため、プラットフォーム環境への依存度が非常に高く、テキストレンダリングのサポートレベルも様々である。そのため、表示される書体が一部のエンドユーザにとって望ましくないものになる可能性がある（例：古いバージョンの Windows で、簡体字中国語ユーザが等幅のセリフ体フォントを割り当てられる場合がある； lang 属性が、lang="uk" をロシア語ロケールで、あるいは lang="ja" を中国語ロケールで使用した場合などに、表示フォントに影響しない場合がある）。一部のオペレーティングシステムベンダは system-ui をカスタマイズする手段を提供していないのに対し、 UA は一般に汎用フォントファミリー sans-serif や serif をユーザがカスタマイズできるようにしている。名前が示すとおり、system-ui は Web アプリケーションにおける UI 要素向けの使用を意図しており、長いテキスト段落や記事向けではない。

math

このフォントファミリーは、数式の表記に使用されることを意図している。

この種のフォントには、式組版の階層的な処理を助けるための追加データ（たとえば OpenType MATH テーブル）を含む場合がある。特に、数学の式組に有用な、スタイル違いや伸縮用の字形バリエーションを含んでいることがある。

generic(fangsong)

このフォントファミリーは、中国語における仿宋体 (Fang Song) の書体に用いられる。 Fang Song は、 Song（serif）と Kai（generic(kai)）の中間に位置する、ややカジュアルな書体である。一般に、水平線がやや傾いており、終端の飾りは小さく、画の太さの変化も Song スタイルと比べて少ない。 Fang Song はしばしば、中国政府の公文書で用いられる。

Note: generic(fangsong) は、ローカルにインストールされたフォントに対応付けられない場合もあるが、対応付けられる場合、そのフォントは Fang Song スタイルである。

仿宋体フォントの例で表示した中国語テキスト

generic(kai)

このフォントファミリーは、簡体字および繁体字中国語で使用される。中国語テキストのための書道風スタイルを提供する主要な書体であり、顕著な手書きの特徴を持つ。 Kai は公文書や教科書で広く用いられている。台湾の多くの公文書では、本文全体に Kai が使用される。また Kai は他の書体と組み合わせて、本文とは区別する必要があるテキスト（見出し、参考文献、引用、会話文など）に用いられることもある。

Note: generic(kai) は、ローカルにインストールされたフォントに対応付けられない場合もあるが、対応付けられる場合、そのフォントは Kai スタイルである。

楷書体フォントの例で表示した中国語テキスト

generic(khmer-mul)

このフォントファミリーは、クメール語（カンボジアで使用される言語）において、タイトルや見出し、あるいは重要な名前や名詞を強調するために用いられる。通常の本文に用いられる直立体（âksâr chôr）スタイルと比べると、 âksâr mul はより太く丸みを帯びた文字形を特徴とし、合字の形も多く含まれることがある。

見た目にはより太く重いスタイルであるものの、 generic(khmer-mul) における通常テキストのフォントウェイトは変わらず（400）のままである。

Note: generic(khmer-mul) は、ローカルにインストールされたフォントに対応付けられない場合もあるが、対応付けられる場合、そのフォントは âksâr mul スタイル��ある。

クメール語テキストの表示例：（上）âksâr chôr スタイル（Khmer OS Battambang で組版）；（中央）âksâr mul スタイル（Khmer OS Moul v6 で組版、合字なし）；（下）âksâr mul スタイル（Khmer OS Moul v4 で組版、2 つの合字あり）。いずれのフォントも Dan Hong による。

generic(nastaliq)

このフォントファミリーは、ウルドゥー語およびカシミール語における標準的な書字スタイルであり、ペルシア語や他の諸言語のテキストにおいても、特に詩などの文学的なジャンルでよく好まれるスタイルである。主な特徴として、連結した文字のベースラインが傾斜していること、そして基底文字とダイアクリティカルマークの双方について、全体として複雑な字形処理と位置決めが行われていることが挙げられる。多くの字形や合字に独特の形がある。ウルドゥー語やカシミール語などの言語については、フォールバックとして naskh スタイルに戻すべきではない。

Note: generic(nastaliq) は、ローカルにインストールされたフォントに対応付けられない場合もあるが、対応付けられる場合、そのフォントは Nastaliq スタイルである。

السلام علیکم — Nastaliq フォント（Noto Nastaliq Urdu）で表示したウルドゥー語テキスト

ui-serif

このフォントファミリーは、システムのユーザーインターフェイスにおけるセリフ体バリエーションに使用される。 ui-serif の目的は、 Web コンテンツがネイティブ OS のルック＆フィールに溶け込めるようにすることである。

Note: ui-serif は、適切なシステムフォントを持たないプラットフォームではいずれのフォントにも対応付けられないものと想定される。

Note: 想定される問題については、 system-ui に関する注��も参照のこと。

sample ui-serif font — macOS Catalina および iOS 13 における ui-serif フォントの例：New York

ui-sans-serif

このフォントファミリーは、システムのユーザーインターフェイスにおけるサンセリフ体バリエーションに使用される。 ui-sans-serif の目的は、 Web コンテンツがネイティブ OS のルック＆フィールに溶け込めるようにすることである。

Note: ui-sans-serif は、適切なシステムフォントを持たないプラットフォームではいずれのフォントにも対応付けられないものと想定される。

Note: 想定される問題については、 system-ui に関する注記も参照のこと。

sample ui-sans-serif font — macOS Catalina および iOS 13 における ui-sans-serif フォントの例：San Francisco

ui-monospace

このフォントファミリーは、システムのユーザーインターフェイスにおける等幅バリエーションに使用される。 ui-monospace の目的は、 Web コンテンツがネイティブ OS のルック＆フィールに溶け込めるようにすることである。

Note: ui-monospace は、適切なシステムフォントを持たないプラットフォームではいずれのフォントにも対応付けられないものと想定される。

Note: 想定される問題については、 system-ui に関する注記も参照のこと。

sample ui-monospace font — macOS Catalina および iOS 13 における ui-monospace フォントの例：SF Mono

ui-rounded

このフォントファミリーは、システムのユーザーインターフェイスにおける角丸スタイルのバリエーションに使用される。 ui-rounded の目的は、Web コンテンツがネイティブ OS のルック＆フィールに溶け込めるようにすることである。

Note: ui-rounded は、適切なシステムフォントを持たないプラットフォームではいずれのフォントにも対応付けられないものと想定される。

Note: 想定される問題については、 system-ui に関する注記も参照のこと。

sample ui-rounded font — macOS Catalina および iOS 13 における ui-rounded フォントの例：SF Rounded

2.2. フォントウェイト: font-weight プロパティ

Name:	font-weight
Value:	<font-weight-absolute> \| bolder \| lighter
Initial:	normal
Applies to:	すべての要素およびテキスト
Inherited:	yes
Percentages:	n/a
Computed value:	数値（後述）
Canonical order:	文法どおり
Animation type:	計算値の型による

Tests

font-weight プロパティは、フォント内のグリフの太さ、すなわち黒みの度合いやストロークの太さを指定する。

このプロパティは次の値を受け付ける：

<font-weight-absolute> = [ normal | bold | <number [1,1000]> ]

各値の意味は次のとおり：

<number [1,1000]>

各数値は、それ以前の値と比べて少なくとも同等以上に濃い太さを示す。 1 以上 1000 以下��値のみが有効であり、それ以外の値はすべて無効となる。数値の値は、典型的には以下に示すよく使われるウェイト名に対応する。

100 - Thin（極細）
200 - Extra Light（Ultra Light、特細）
300 - Light（細）
400 - Normal（標準）
500 - Medium（中太）
600 - Semi Bold（Demi Bold、やや太）
700 - Bold（太）
800 - Extra Bold（Ultra Bold、特太）
900 - Black（Heavy、極太）

Note: フォント自体が内部で独自のウェイト名マッピングを持っている場合があるが、そのようなフォント内部のマッピングは CSS では考慮されない。

normal

400 と同じ。

bold

700 と同じ。

bolder

継承された値よりも太いウェイトを指定する。 § 2.2.1 Relative Weights を参照。

lighter

継承された値よりも細いウェイトを指定する。 § 2.2.1 Relative Weights を参照。

9 段階以外のスケールを使うフォント形式は、自身のスケールを CSS のスケールに対応付けるべきであり、その際、400 はおおよそ Regular, Book, Roman とラベル付けされるフェイスに、 700 はおおよそ Bold とラベル付けされるフェイスに対応するようにする。あるいは、上記のスケールにおおよそ対応するスタイル名からウェイトを推測してもよい。このスケールは相対的なものであり、値が大きいウェイトのフェイスがそれより小さい値のフェイスよりも細く見えてはならない。スタイル名からウェイトを推測する場合は、ロケールによってスタイル名が異なる点に注意して扱う必要がある。

2.2.1. 相対ウェイト

bolderとlighterは親要素のウェイトに対する相対値を示します。算出ウェイトは継承されたfont-weight値から以下の表に従い決定されます。

継承値 (`w`)	bolder	lighter
`w` < 100	400	変化なし
100 ≤ `w` < 350	400	100
350 ≤ `w` < 550	700	100
550 ≤ `w` < 750	900	400
750 ≤ `w` < 900	900	700
900 ≤ `w`	変化なし	700

注: 上記表は、normal・bold・thin・heavyフェイスを持つフォントファミリーで次の相対的な太さ・細さのフェイスを選択するのと同等です。要素ごとに厳密なウェイト制御が必要な場合は相対値ではなく数値で指定してください。

2.2.2. ウェイトが無い場合

特定のフォントファミリーで利用可能なウェイトが少ない場合がよくあります。存在しないウェイトを指定した場合は、近いウェイトのフェイスが使用されます。一般に、太いウェイトはより重いフェイス、細いウェイトはより軽いフェイスにマッピングされます。（厳密な定義は§ 5 フォントマッチングアルゴリズム参照）

この例は各ウェイトに対してどのフェイスが使われるかを示します。グレーの部分は指定したウェイトのフェイスが存在しないため、近いウェイトのフェイスが使われることを示します。

weight mappings for a family with 400, 700 and 900 weights — 400、700、900ウェイトフェイスを持つフォントファミリーのウェイト対応例

weight mappings for a family with 300, 600 weights — 300、600ウェイトフェイスを持つフォントファミリーのウェイト対応例

多くのユーザーエージェントは、フォントに特定のウェイトがあるとみなしますが、これは多くの場合上記9段階の数値に対応します。ほとんどのフォントはこの通りですが、ウェイトの幅を設定できるフォントもあります。その場合、ユーザーエージェントは指定値にできるだけ近いウェイトのフェイスを使用します（正確なアルゴリズムは§ 5 フォントマッチングアルゴリズム参照）。特に、ウェイト幅を持つフォントを使用するユーザーエージェントは、その範囲内の各ウェイトにフォントが存在するかのように振る舞うべきです。 TrueType／OpenTypeのバリエーション対応フォントでは、 wghtバリエーションでウェイト変化を実装します。小数点ウェイトも有効です。

タイポグラファーには好まれませんが、実際のボールドフェイスがないファミリーでは、ユーザーエージェントがボールドフェイスを合成することがよくあります。フォントマッチングの観点では、これらのフェイスはファミリー内に存在するものとして扱う必要があります。この合成を避けたい場合は、font-synthesisプロパティを使用してください。

2.3. フォント幅: font-width プロパティ

Name:	font-width
Value:	normal \| <percentage [0,∞]> \| ultra-condensed \| extra-condensed \| condensed \| semi-condensed \| semi-expanded \| expanded \| extra-expanded \| ultra-expanded
Initial:	normal
Applies to:	すべての要素およびテキスト
Inherited:	yes
Percentages:	解決されない
Computed value:	パーセンテージ（後述）
Canonical order:	文法どおり
Animation type:	計算値の型による

Tests

font-width プロパティは、フォントファミリーの中から normal（標準幅）、 condensed（狭い幅）、または expanded（広い幅）のフェイスを選択する。値はパーセンテージとして指定するか、または次の表で定義されるようにパーセンテージに対応付けられたキーワードとして指定する：

絶対キーワード値	数値（パーセンテージ）
ultra-condensed	50%
extra-condensed	62.5%
condensed	75%
semi-condensed	87.5%
normal	100%
semi-expanded	112.5%
expanded	125%
extra-expanded	150%
ultra-expanded	200%

<percentage [0,∞]> の値は、グリフの幅の割合を表し、 100%は「ノーマル」グリフの幅（フォントデザイナーによる定義）になります。 0%未満の値は無効です。

指定した幅のフェイスが存在しない場合、100%未満はより狭いフェイス（存在すれば）、無ければ広いフェイスにマッピングされます。逆に100%以上はより広いフェイス（存在すれば）、無ければ狭いフェイスにマッピングされます。一部のフォントは幅の範囲をサポートしますが、指定値がフォントに無い場合は、同じマッピング規則で最も近い値が使われます（厳密なアルゴリズムは§ 5 フォントマッチングアルゴリズム参照）。 TrueType／OpenTypeバリアブルフォントは wdthバリエーションで幅変化を実装します。

下図は、9種類のfont-widthプロパティ設定が離散的な幅を持つフォントファミリーのマッチングにどう影響するかを示しています。グレーは指定幅のフェイスが存在せず、別の幅に置き換えられることを表します:

width mappings for a family with condensed, normal and expanded faces — 凝縮・ノーマル・拡張幅フェイスを持つフォントファミリーの幅マッピング例

getComputedStyle() は、著者による値指定方法やキーワードの有無に関係なく、値を常に<percentage>としてシリアライズします。

2.3.1. フォント幅: font-stretch 旧名エイリアス

歴史的な理由から、 font-stretch プロパティが存在します。これは旧名エイリアスであり、 font-widthと同じ動作をします。

例えば、旧名font-stretchを見出し（h1）に使用した例です。

h1 {font-stretch: condensed; }

その見出しのfont-widthの指定値は condensedとなります。

例えば、font-widthを見出し（h1）に使用した例です。

h1 {font-width: condensed; }

その見出しのfont-stretchの指定値は condensedとなります。

Tests

ユーザーエージェントは、該当するフェイスや幅バリエーション軸を持たないフォントファミリーについて、凝縮・拡張フェイスを合成してはなりません。特に、幾何学的な伸縮を行ってはなりません。

2.4. フォントスタイル: font-style プロパティ

Name:	font-style
Value:	normal \| italic \| left \| right \| oblique <angle [-90deg,90deg]>?
Initial:	normal
Applies to:	すべての要素およびテキスト
Inherited:	yes
Percentages:	n/a
Computed value:	指定されたキーワード��、指定されていれば角度（度数）
Canonical order:	文法どおり
Animation type:	計算値の型による。normal は oblique 0deg としてアニメーションする

Tests

font-style プロパティは、イタリック体またはオブリーク体のフェイスを選択できるようにする。イタリック体は一般に筆記体風の形状を持ち、オブリーク体は通常、正体を傾けたバージョンである。

灰色で示された Palatino の "a" と Baskerville の "N" の人工的に傾けたレンダリングを、実際のイタリック体と比較すると次のようになる：

artificial sloping vs. real italics — 人工的な傾斜と本来のイタリック体の比較

各値の意味は次のとおり：

normal: 正体として分類されるフェイス、すなわちイタリックでもオブリークでもないフェイスにマッチする。これはオブリーク値 "0" を表す。
italic: イタリック体としてラベル付けされたフォント、それが存在しない場合はオブリーク体にマッチする。傾きの角度と向きは規定されない。
left: イタリック体としてラベル付けされ、正の（時計回りの）傾斜を持つフォントにマッチする。そのようなイタリック体が存在しない場合は、正の傾斜を持つオブリーク体にマッチする。
right: イタリック体としてラベル付けされ、負の（反時計回りの）傾斜を持つフォントにマッチする。そのようなイタリック体が存在しない場合は、負の傾斜を持つオブリーク体にマッチする。
oblique <angle [-90deg,90deg]>?: オブリーク体フェイスに対するマッチングを制御する。正の角度は時計回りの傾斜を表し、負の角度は反時計回りの傾斜を表す。 <angle> が省略された場合は、14deg を表す。（フォントが内部的に "oblique" への独自のマッピングを持っていることもあるが、そのようなフォント内部のマッピングは考慮されない。）小数値および負の値も受け付けるが、 -90deg 未満または 90deg を超える値は無効である。オブリーク体フェイスが存在せず、かつ font-synthesis-style が auto の場合、合成オブリーク体フェイスが生成される。

negative slant — 負の傾斜を持つイタリック体。フォントは Mf Autumn Breeze（作者：Misti Hammers）。

フォントファミリーには、イタリック体もオブリーク体も含まれない場合、イタリック体のみでオブリーク体がない場合、オブリーク体のみでイタリック体がない場合、オブリーク体とイタリック体の両方がある場合、異なる角度の複数のオブリーク体がある場合、あるいはそれらをさまざまに組み合わせた構成が存在し得る。フォントマッチングルーチンは、要求された角度と同じ符号を持ち、（そのようなフェイスが複数ある場合は）要求された角度に最も近いフォントを選択する。一般に、要求された角度が 11deg 以上の場合はより大きな角度が優先され、それ以外の場合はより小さな角度が優先される。（§ 5 Font Matching Algorithm を参照。）バリエーションを使用する TrueType／OpenType フォントでは、オブリーク値の実装に slnt バリエーションが使用され、イタリック値の実装に、値 1 を持つ ital バリエーションが使用される。

Note: OpenType の slnt 軸は、正の角度を反時計回りの傾斜として定義しており、これは CSS の方向とは逆である。 CSS の実装では、バリエーションを利用してオブリーク体を生成する際に、この点を考慮に入れる。

縦書きモードでは、正および負のオブリークはどちらの方向に傾くべきか？（縦書きに必要な）反対方向の次元での傾きはどのように実現するか？

イタリック体またはオブリーク体フェイスが利用できない場合、非オブリーク体フェイスを人工的にオブリーク変形してレンダリングすることで、オブリーク体フェイスを合成してもよい。これらの人工的にオブリーク化されたフェイスの使用は、 font-synthesis プロパティを使って無効化できる。

Note: オブリーク体フェイスは、正体のグリフを人工的に傾けることで模倣することもできるが、これは真のオブリーク体とは同等ではない。真のオブリーク体では、傾斜があっても視覚的なストロークの太さが適切に保たれる。合成版に頼るよりも、常に実際のオブリークフォントを使う方が望ましい。

フォントマッチングの目的においては、ユーザーエージェントは italic を oblique の同義語として扱ってもよい。これらの値を区別して扱うユーザーエージェントにおいては、 italic に対して合成を行ってはならない。

Note: 合成によるアプローチは、イタリック体の字形が大きく異なるスクリプト（たとえばキリル文字）には適さない場合があることにも注意すべきである。合成版に頼るよりも、常に実際のイタリックフォントを使う方が望ましい。

Note: 多くの文字体系には、正体で組まれたテキストの中に筆記体を混在させる伝統がない。中国語、日本語、韓国語のフォントには、ほとんど常にイタリック体やオブリーク体フェイスが存在しない。複数のスクリプトをサポートするフォントでは、イタリック体フェイスにおいて、アラビア文字のような特定のスクリプトをサポート字形集合から省いていることもある。ユーザーエージェントがフォント間で合成を実装する際は、ファミリー内でイタリック体フェイスがローマン体フェイスとは異なる文字マップを持ち得るため、フェイス間で文字マップに関する前提を安易に置かないように注意すべきである。

2.5. フォントサイズ: font-size プロパティ

Name:	font-size
Value:	<absolute-size> \| <relative-size> \| <length-percentage [0,∞]> \| math
Initial:	medium
Applies to:	すべての要素およびテキスト
Inherited:	yes
Percentages:	親要素のフォントサイズを参照する
Computed value:	絶対長さ
Canonical order:	文法どおり
Animation type:	計算値の型による

Tests

このプロパティは、フォントから得られるグリフの望ましい高さを示す。スケーラブルフォントの場合、font-size はフォントの EM 単位に適用されるスケール係数である。非スケーラブルフォントの場合、font-size は絶対単位に変換され、同じ絶対座標空間を用いて、フォントに宣言されたフォントサイズと照合される。

Note: グリフが EM ボックスにどの程度きちんと収まるべきかについての要件はない。個々のフォントは、同じ font-size でレンダリングされた場合でも、見かけ上の視覚的な大きさが異なり得る。さらに、グリフは EM ボックスの外へ任意の距離だけ描画される可能性があり、その結果として containing block からはみ出した場合、 ink overflow を引き起こすことがある。

各値の意味は次のとおり：

<absolute-size>

<absolute-size> キーワードは、ユーザーエージェントによって計算・保持されるフォントサイズの表の項目を参照する。 § 2.5.1 Absolute Size Keyword Mapping Table を参照。

取り得る値は次のとおり：

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

<relative-size>

<relative-size> キーワードは、親要素の計算済み font-size および場合によってはフォントサイズ表に対して相対的に解釈される。取り得る値は：

[ larger | smaller ]

親要素が絶対サイズキーワード対応表におけるキーワードのフォントサイズを持つ場合、 larger はフォントサイズを表の次の項目に計算してもよく、 smaller は表の前の項目に計算してもよい。たとえば、親要素のフォントサイズが font-size:medium のとき、子要素に larger を指定すると、子要素のフォントサイズを font-size:large にしてもよい。

上記のキーワード表の次／前の項目を用いる代わりに、ユーザーエージェントは単純な比率を用いて、親要素に対して相対的にフォントサイズを増減させてもよい。具体的な比率は規定されないが、おおよそ 1.2〜1.5 程度であるべきである。この比率は要素ごとに異なってもよい。

Note: 視覚障害のあるユーザーは、可読性を高めるために、ユーザーエージェントに対して既定より大きい比率を使用するよう要求するかもしれない。また、ユーザーエージェントは、段落テキストかタイトルテキストかを検出して、それぞれで異なる比率を用いることを選択してもよい。

<length-percentage [0,∞]>

長さ値は、（ユーザーエージェントのフォント表とは無関係な）絶対的なフォントサイズを指定する。負の長さは無効である。

パーセンテージ値は、親要素の計算済み font-size に対する絶対的なフォントサイズを指定する。負のパーセンテージは無効である。

Note: パーセンテージ値や、フォント相対長（em や rem など）の使用は、より堅牢でカスケード性の高いスタイルシートにつながる。

math

数式用の特別なスケーリング規則を、 font-size プロパティの計算値を決定する際に適用しなければならない。

次のスタイルシートは、フォントサイズを指定するさまざまな方法を示す。

p { font-size: 12pt; }
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }

Note: このプロパティの使用値は、 font-size-adjust により計算値と異なる場合がある。しかし、子要素は計算済みの font-size 値を継承し、これは font-size-adjust の影響を受けない（そうでなければ font-size-adjust の効果が累積してしまう）。

このプロパティの実際の値は、一部のフォントサイズが利用できないことにより、使用値と異なり得る。

font-size は、レスポンシブタイポグラフィのためにクランプできる。

font-size: clamp(10px, ..., 36px);

2.5.1. 絶対サイズキーワード対応表

以下の表は、絶対サイズの倍率とHTML見出し・絶対フォントサイズへのマッピングについて、ユーザーエージェント向けガイドラインを示します。 medium値が基準の中央値となります。ユーザーエージェントは、異なるフォントや表示デバイスに応じてこれらの値を微調整しても構いません。

CSS absolute-size values	xx-small	x-small	small	medium	large	x-large	xx-large	xxx-large
scaling factor	3/5	3/4	8/9	1	6/5	3/2	2/1	3/1
HTML headings	h6		h5	h4	h3	h2	h1
HTML `font` sizes	1		2	3	4	5	6	7

Note: CSS1 では、隣接するインデックス間の推奨スケーリング係数は 1.5 だったが、実際のユーザー体験から、これは大きすぎることが判明した。 CSS2 では、コンピュータ画面に対する隣接インデックス間の推奨スケーリング係数は 1.2 とされたが、それでも小さいサイズに問題が生じていた。新しいスケーリング係数はインデックスごとに変化し、より良い可読性を提供する。

可読性を維持するため、これらのガイドラインを適用する UA は、 EM 単位あたり 9 デバイスピクセル未満のフォントサイズを作り出すことは避けるべきである。

2.6. 相対サイズ指定: font-size-adjust プロパティ

Name:	font-size-adjust
Value:	none \| <number [0,∞]>
Initial:	none
Applies to:	すべての要素およびテキスト
Inherited:	yes
Percentages:	N/A
Computed value:	数値、またはキーワード none
Canonical order:	文法どおり
Animation type:	計算値の型による

Tests

同じフォントサイズであっても、テキストの見かけの大きさや実効的な可読性はフォントによって異なる。ラテン文字やキリル文字のように大小文字を区別する二系列の文字体系（bicameral scripts）では、小文字の高さが大文字に対してどの程度か、という相対的な高さが可読性を左右する要因となる。これは一般にアスペクト値 (aspect value) と呼ばれ、フォントの x-height をフォントサイズで割った値に等しい。

Note: 分音記号（ダイアクリティカルマーク）を用いるテキストでは、 x-height が大きすぎると分音記号が詰まりすぎてしまい、逆に可読性が低下する。

フォントフォールバックが起こる状況では、フォールバックフォントは望んでいたフォントファミリーと同じアスペクト値を持たない場合があり、その結果、可読性が低くなる可能性がある。 font-size-adjust プロパティは、フォントフォールバックが発生したときにテキストの可読性を保つための手段である。これは、使用されるフォントにかかわらず x-height が同じになるように font-size を調整することで実現される。

下記のスタイル定義では、希望するフォントファミリーとして Verdana を指定しているが、 Verdana が利用できない場合には Futura か Times が使われる。そのうち 1 つの段落には font-size-adjust も指定されている。

p {
  font-family: Verdana, Futura, Times;
}
p.adj {
  font-size-adjust: 0.545;
}

<p>Lorem ipsum dolor sit amet, ...</p>
<p class="adj">Lorem ipsum dolor sit amet, ...</p>

Verdana は比較的高いアスペクト値 0.545 を持っており、小文字が大文字に対して相対的に背が高い。そのため、小さなサイズでもテキストが可読に見える。 Times はアスペクト値が 0.447 と低く、フォールバックが発生した場合、 font-size-adjust も指定しておかないと、小さいサイズでは Verdana に比べてテキストの可読性が低くなってしまう。

これらの各フォントでテキストがどのように表示されるかを下図に示す。列はそれぞれ Verdana、Futura、Times でレンダリングされたテキストを示す。各行のセル内では同じ font-size 値が使われており、 x-height の違いを示すために赤い線が引かれている。上半分では、各行が同じ font-size 値でレンダリングされている。下半分でも同様だが、この半分では font-size-adjust プロパティも 0.545 に設定されており、 Verdana の x-height を各行で維持できるように実際のフォントサイズが調整されている。下半分では、小さなテキストでも各行にわたって比較的読みやすさが保たれている点に注目してほしい。

text with and without 'font-size-adjust' — font-size-adjust の有無によるテキストの比較

このプロパティにより、作者は要素に対してアスペクト値 (aspect value) を指定できる。これにより、最初に選択されるフォントについて、代替されるかどうかに関わらずその x-height が実質的に維持される。各値の意味は次のとおり：

none

フォントの x-height を維持しない。

<number [0,∞]>

以下の計算式で使用されるアスペクト値 (aspect value) を指定し、調整後のフォントサイズを算出する：

c  =  ( a / a' ) s

ここで：

s  =  font-size の値
a  =  アスペクト値（'font-size-adjust' プロパティで指定された値）
a' =  実際に使用されるフォントの アスペクト値
c  =  使用される調整後の font-size

負の値は無効である。

この値は選択された任意のフォントに適用されるが、典型的な使用法では、font-family リストの最初のフォントのアスペクト値に基づくべきである。正確に指定されていれば、上記の式における (a/a') の項は最初のフォントについて実質的に 1 となり、調整は行われない。不正確な値が指定されている場合、 font-family リストの最初のフォントでレンダリングされたテキストは、 font-size-adjust をサポートしない古いユーザーエージェントで異なる表示になる可能性がある。

font-size-adjust の値は、 font-size の使用値に影響するが、計算値には影響しない。また、ex や ch のようにフォントメトリクスに基づく相対単位の大きさには影響するが、 em 単位の大きさには影響しない。 line-height の数値値は font-size の計算済みサイズを参照するため、 font-size-adjust は line-height の使用値には影響しない。

Note: CSS では、作者はしばしば line-height を font-size の倍数として指定する。 font-size-adjust プロパティは font-size の使用値に影響するため、 font-size-adjust を使用する際には、行の高さの設定に注意する必要がある。この状況で行間を詰めすぎると、テキスト行同士が重なってしまう可能性がある。

作者は、同じ内容を持ちながら異なる font-size-adjust プロパティを指定した span 要素を比較することで、特定のフォントのアスペクト値を算出できる。同じ font-size を用いたとき、与えられたフォントに対して font-size-adjust の値が正確であれば、 2つの span は一致して表示される。

枠線付きの 2 つの span を使って、フォントのアスペクト値を求める。 2 つの span はどちらも同じ font-size を持っているが、 font-size-adjust プロパティは右側の span にだけ指定されている。 0.5 という値から開始し、 2 つの文字の周りの枠線が揃うまでアスペクト値を調整していくことができる。

p {
  font-family: Futura;
  font-size: 500px;
}

span {
  border: solid 1px red;
}

.adjust {
  font-size-adjust: 0.5;
}

<p><span>b</span><span class="adjust">b</span></p>

Futura with an aspect value of 0.5 — アスペクト値 0.5 の場合の Futura

右側のボックスは左側のボックスよりもわずかに大きいため、このフォントのアスペクト値は 0.5 より小さい値になる。ボックスが揃うまで値を調整していく。

2.7. フォント略記プロパティ: font プロパティ

Name:	font
Value:	[ [ <'font-style'> \|\| <font-variant-css2> \|\| <'font-weight'> \|\| <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ] \| <system-family-name>
Initial:	個々のプロパティを参照
Applies to:	すべての要素およびテキスト
Inherited:	yes
Percentages:	個々のプロパティを参照
Computed value:	個々のプロパティを参照
Canonical order:	文法どおり
Animation type:	個々のプロパティを参照

Tests

このプロパティの構文は、複数のフォント関連プロパティをまとめて設定する伝統的なタイポグラフィの略記法に基づいている。歴史的理由と後方互換性のため、ほぼショートハンドプロパティである。

font プロパティは、後述する点を除けば、 font-style、font-variant、 font-weight、font-width、 font-size、line-height、font-family をスタイルシート内の同じ箇所で設定するショートハンドプロパティである。

font-variant プロパティの値も含めることができるが、 CSS 2.1 でサポートされるものに限られる。 CSS Fonts Level 3 や 4 で追加された font-variant の値は、 font ショートハンドでは使用できない：

<font-variant-css2>= normal | small-caps

font-width プロパティの値も含めることができるが、 CSS Fonts Level 3 でサポートされるものに限られ、この仕様で追加された font-width の値は font ショートハンドでは使用できない：

<font-width-css3>= normal | ultra-condensed | extra-condensed | condensed |
semi-condensed | semi-expanded | expanded | extra-expanded |
ultra-expanded

したがって、font 関連プロパティと font プロパティとの相互作用について、次のような分類が得られる：

明示的に設定されるもの

これらのロングハンドプロパティは、 font ショートハンドプロパティを使って設定することもできる：

font-family
font-size
font-width
font-stretch (css3)
font-style
font-variant-caps (css2)
font-weight
line-height

暗黙にリセットされるもの

これらのプロパティは、 reset-only なサブプロパティであり、 font プロパティによって値を設定することはできないが、初期値へリセットされる：

font-feature-settings
font-kerning
font-language-override
font-optical-sizing
font-size-adjust
font-variant-alternates
font-variant-caps (css3 以降)
font-variant-east-asian
font-variant-emoji
font-variant-ligatures
font-variant-numeric
font-variant-position
font-variation-settings

独立してカスケードされるもの

これらのプロパティは（名前が "font-" で始まるにもかかわらず）ショートハンドプロパティではないため、 font プロパティによって設定もリセットもされない：

font-palette
font-synthesis-weight
font-synthesis-style
font-synthesis-small-caps

font プロパティのサブプロパティのうち、「明示的に設定されるもの」と「暗黙にリセットされるもの」のグループに属するものは、まず初期値にリセットされる。

次に、「明示的に設定されるもの」グループのうち、 font ショートハンドで明示的な値が与えられたプロパティが、その値に設定される。許可される値と初期値の定義については、各ロングハンドプロパティの定義を参照のこと。

p { font: 12pt/14pt 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 }
p { font: condensed oblique 12pt "Helvetica Neue", serif; }
p { font: condensed oblique 25deg 753 12pt "Helvetica Neue", serif; }

2 つ目の規則では、フォントサイズのパーセンテージ値（"80%"）は、親要素の計算済み font-size を参照する。 3 つ目の規則では、行の高さのパーセンテージ（"110%"）は、要素自身のフォントサイズを参照する。

最初の 3 つの規則では、 font-variant および font-weight を明示的に指定していないため、これらのプロパティには初期値（normal）が設定される。スペースを含むフォントファミリー名 "new century schoolbook" が引用符で囲まれている点にも注意。 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 に適用される。

6 つ目の規則では、 font-style、 font-width、 font-size、 font-family を設定し、その他のフォントプロパティは初期値に設定される。

7 つ目の規則では、 font-style を oblique 25deg に、 font-weight を 753 に、 font-width を condensed に設定する。この規則では、25deg が "oblique" キーワードの直後に置かれなければならない点に注意。

font-width プロパティは CSS 2.1 では定義されていなかったため、 font-width の値を font 規則内で使用する場合、作者は古いユーザーエージェントとの互換性のために追加のバージョンを含めるべきである：

p {
  font: 80% sans-serif;   /* 古いユーザーエージェント向け */
  font: condensed 80% sans-serif;
}

システムフォントは、フォントファミリー、サイズ、ウェイト、スタイル等を含め、ひとまとまりとしてのみ設定できる。それらの値は、必要であれば個別に変更することができる。指定された特性を持つフォントが特定のプラットフォームに存在しない場合、ユーザーエージェントは賢明な代替（例：caption フォントの小さい版を small-caption フォントに用いるなど）を行うか、ユーザーエージェント既定のフォントを代用すべきである。通常のフォントと同様、システムフォントにおいて個々のプロパティが OS のユーザー設定として存在しない場合、それらのプロパティは初期値に設定されるべきである。

このプロパティが「ほぼ」ショートハンドプロパティである理由は、システムフォントはこのプロパティでのみ指定でき、 font-family 自体では指定できないためである。そのため font は、 ��ブプロパティの単なる総和以上のことを作者に可能にしている。しかし、font-weight のような個々のプロパティには、システムフォントから取得した値が与えられ、それらは独立して変更することができる。

上記に挙げたシステムフォント用キーワードは、先頭位置に現れたときにのみキーワードとして扱われる点に注意。他の位置に現れた場合には、同じ文字列はフォントファミリー名の一部として扱われる：

font: menu;        /* システムメニュー用のフォント設定を使用 */
font: large menu;  /* "menu" というフォントファミリー名を使用 */

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

あるシステムにおいて、ドロップダウンメニューに使用されるフォントがたとえばウェイト 600 の 9 ポイント Charcoal だったとすると、 BUTTON の子孫である P 要素は、次の規則が有効であるかのように表示される：

button p { font: 600 9pt Charcoal }

font ショートハンドは、明示的に値が与えられていないプロパティをその初期値にリセットするため、これは次の宣言と同じ効果を持つ：

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

2.8. 合成フォントフェイスの制御

合成フォントフェイスは、フォントファミリーに適切なフェイスが存在しない場合に、要求されたフォントに近い外観を提供するためのフォールバック戦略です。

例えば、ユーザーエージェントは以下のような合成を行う場合があります:

各グリフの周囲に細いストロークを描くことでボールドフェイスを合成する
レギュラーグリフを小さなサイズで描画し、適切な位置に配置することでスモールキャップ・上付き・下付き文字を合成する
各グリフを幾何学的にシア（斜体化）することでオブリークフェイスを合成する

合成はフォールバック戦略であり、最終的な結果は、何もないよりは良いものの、本来デザインされたフェイスほどの品質にはなりません。

バリアブルフォント（フォントデザイナーが1つ以上のバリエーション軸を提供しているもの）は、フォント合成とはみなされません。そのため、バリアブルフォントの利用はfont-synthesisプロパティの影響を受けません。

2.8.1. 合成ボールドの制御: font-synthesis-weight プロパティ

名前:	font-synthesis-weight
値:	auto \| none
初期値:	auto
適用対象:	すべての要素とテキスト
継承:	はい
パーセンテージ:	該当なし
算出値:	指定キーワード
正規順序:	文法による
アニメーションタイプ:	離散
Media:	視覚

Tests

このプロパティは、フォントファミリーに太字フェイスが存在しない場合に、ユーザーエージェントが太字フォントフェイスを合成してよいかどうかを制御する。

auto: 太字フェイスの合成を許可する。
none: 太字フェイスの合成を許可しない。

2.8.2. 合成オブリークの制御: font-synthesis-style プロパティ

Name:	font-synthesis-style
Value:	auto \| none \| oblique-only
Initial:	auto
Applies to:	all elements and text
Inherited:	yes
Percentages:	N/A
Computed value:	specified keyword
Canonical order:	per grammar
Animation type:	discrete
Media:	visual

Tests

このプロパティは、フォントファミリーにオブリーク体フェイスが存在しない場合に、ユーザーエージェントがオブリーク体フォントフェイスを合成してよいかどうかを制御する。

auto: オブリーク体フェイスの合成を許可する。
none: オブリーク体フェイスの合成を許可しない。
oblique-only: オブリーク体フェイスの合成は許可されるが、 italic が指定されている場合のフォールバックとしては使用してはならない。

縦書きテキストでは、正のオブリーク角の場合、グリフはスキューされ、行の上側の縁が行の右側へ、行の下側の縁が行の左側へ移動する。負のオブリーク角の場合、グリフはスキューされ、行の上側の縁が行の左側へ、行の下側の縁が行の右側へ移動する。スキューはグリフの中心を基準に行われる。

Tests

synthetic-oblique-out-of-capabilities-range.html (live test) (source)

synthetic oblique in vertical text — 縦書きテキストにおける合成オブリーク体（正のオブリーク角）

2.8.3. 合成スモールキャップの制御: font-synthesis-small-caps プロパティ

名前:	font-synthesis-small-caps
値:	auto \| none
初期値:	auto
適用対象:	すべての要素とテキスト
継承:	はい
パーセンテージ:	該当なし
算出値:	指定キーワード
正規順序:	文法による
アニメーションタイプ:	離散

テスト

このプロパティは、フォントファミリーにスモールキャップフェイスが存在しない場合に、ユーザーエージェントがスモールキャップフェイスを合成することを許可するかどうかを制御します。

auto: スモールキャップフェイスの合成が許可されます
none: スモールキャップフェイスの合成は許可されません

2.8.4. 合成上付き・下付き文字の制御: font-synthesis-position プロパティ

名前:	font-synthesis-position
値:	auto \| none
初期値:	auto
適用対象:	すべての要素とテキスト
継承:	はい
パーセンテージ:	該当なし
算出値:	指定キーワード
正規順序:	文法による
アニメーションタイプ:	離散

テスト

このプロパティは、フォントがfont-variant-position用の上付き・下付きグリフを持たない場合に、ユーザーエージェントが上付き・下付き文字を合成することを要求するかどうかを制御します。

auto: 上付き・下付き文字の合成が要求されます
none: 上付き・下付き文字の合成は許可されません

2.8.5. 合成フェイスの制御: font-synthesis 略記プロパティ

名前:	font-synthesis
値:	none \| [ weight \|\| style \|\| small-caps \|\| position]
初期値:	weight style small-caps position
適用対象:	すべての要素とテキスト
継承:	はい
パーセンテージ:	該当なし
算出値:	指定キーワード
正規順序:	文法による
アニメーションタイプ:	離散

Tests

このプロパティは、font-synthesis-weight、 font-synthesis-style、 font-synthesis-small-caps、および font-synthesis-position プロパティのショートハンドである。値は次のように対応付けられる：

font-synthesis value	font-synthesis-weight value	font-synthesis-style value	font-synthesis-small-caps value	font-synthesis-position value
none	none	none	none	none
weight	auto	none	none	none
style	none	auto	none	none
small-caps	none	none	auto	none
position	none	none	none	auto
weight style	auto	auto	none	none
weight small-caps	auto	none	auto	none
weight position	auto	none	none	auto
style small-caps	none	auto	auto	none
style position	none	auto	none	auto
small-caps position	none	none	auto	auto
weight style small-caps	auto	auto	auto	none
weight style position	auto	auto	none	auto
weight small-caps position	auto	none	auto	auto
style small-caps position	none	auto	auto	auto
weight style small-caps position	auto	auto	auto	auto

次のスタイル規則は、合成されたオブリーク体のアラビア文字を使用しないようにしている：

*:lang(ar) { font-synthesis: none; }

3. フォントレンダリング制御

3.1. フォントレンダリング制御の序章

@font-faceによるWebフォントのダウンロード利用時、ユーザーエージェントはフォントのロード中にどう振る舞うかを知る必要があります。多くのWebブラウザは何らかのタイムアウト方式を採用しています:

ブラウザ	タイムアウト	フォールバック	スワップ
Chrome 35+	3秒	はい	はい
Opera	3秒	はい	はい
Firefox	3秒	はい	はい
Internet Explorer	0秒	はい	はい
Safari	3秒	はい	はい

ChromeとFirefoxは3秒タイムアウト後、フォールバックフォントでテキストを表示します。最終的にスワップが発生し、フォントが利用可能になると意図したフォントで再描画されます。
Internet Explorerはタイムアウト0秒で即座にテキスト描画します。要求フォントがまだ利用できなければフォールバックが使われ、フォントが利用可能になると後から再描画されます。

これらのデフォルト挙動は合理的ですが、ブラウザ間で一貫性がありません。さらに、どの方式も現代のユーザー体験・パフォーマンス重視アプリのすべてのユースケースを十分にカバーできません。

Font Loading API [CSS-FONT-LOADING-3] により上記挙動の一部を開発者がオーバーライド可能ですが、それにはスクリプトが必要となり、手間もかかり、最終的にはすべての合理的ケースをカバーする十分なフックを提供できません。さらに、開発者はロード用スクリプトをページ内にインラインするか外部ライブラリをロードする必要があり、追加のネットワーク遅延が発生し、テキスト描画が遅れます。

デザイン・パフォーマンス重視のWeb開発者は、 Webフォントがユーザー体験にどれほど重要かよく理解しています。この仕様は、フォントのタイムアウトやレンダリング挙動を制御する能力を提供します。具体的には、開発者が次の制御を行えます:

テキスト描画準備時のフォント表示ポリシー（ブロック、またはフォールバックで描画）を定義できる
意図したフォントが利用可能になった後の表示ポリシー（新しいフォントで再描画するか、フォールバックのままにするか）を定義できる
フォントごとにカスタムタイムアウト値を定義できる
要素ごとにカスタム表示・タイムアウトポリシーを定義できる

3.2. フォント表示タイムライン

ユーザーエージェントがページ上で特定のダウンロード済みフォントフェイスを初めて利用しようとする瞬間、フォントフェイスのフォントダウンロードタイマーが開始されます。このタイマーは、フォントフェイスに関連する3つの時間区間（ブロック区間、スワップ区間、失敗区間）を順に進み、フォントフェイスを使用する要素のレンダリング挙動を決定します:

最初の区間はフォントブロック区間です。この期間中、フォントフェイスが未ロードの場合、それを使おうとする要素は不可視フォールバックフォントフェイスで描画しなければなりません。フォントフェイスがブロック区間中にロードできれば、通常通りそのフォントフェイスが使われます。
2番目の区間はブロック区間直後に発生するフォントスワップ区間です。この期間中、フォントフェイスが未ロードの場合、それを使おうとする要素はフォールバックフォントフェイスで描画しなければなりません。フォントフェイスがスワップ区間中にロードできれば、通常通りそのフォントフェイスが使われます。
3番目の区間はスワップ区間直後に発生するフォント失敗区間です。この期間開始時にフォントフェイスがまだ未ロードならロード失敗とみなされ、通常のフォントフォールバックになります。それ以外の場合は通常通りフォントフェイスが使われます。

フォールバックフォントフェイスで描画するには、ユーザーエージェントは、要素のfont-familyリストですでにロード済みの最初のフォントフェイスを探し、それでテキストを描画します。この操作は他のフォールバックフォントのロードを開始してはなりません。

不可視フォールバックフォントフェイスで描画するには、 "フォールバックフォントフェイスで描画"通りにフォントフェイスを選びます。選択したフォントフェイスと同じメトリクスを持つ匿名フォントフェイスを作り、すべてのグリフを「不可視」（インク無し）としてレンダリングします。この操作も他のフォールバックフォントのロードを開始してはなりません。

fallbackやoptionalは、ファミリー内で一部フェイスだけが使われ、他がフォールバックとなり「ランサムノート風」な見た目になる可能性がある。ファミリー内すべてのフォントで同じ挙動にすべきか（全てスワップ、または全てフォールバック）？挙動の制御は@font-feature-valuesでファミリー単位で行うべきかも参照。

4. フォントリソース

4.1. @font-face 規則

@font-face規則を使うと、必要なときに自動的に取得・有効化されるフォントをリンクできます。これにより、著者はページのデザイン目標に合ったフォントを選択でき、利用可能なフォントがプラットフォームに依存するという制限がなくなります。一連のフォント記述子によって、フォントリソースの場所（ローカルまたは外部）と、個々のフェイスのスタイル特性を定義します。複数の@font-face規則を使って、多様なフェイスを持つフォントファミリーを構築できます。 CSSフォントマッチング規則により、ユーザーエージェントは必要なフェイスだけを選択的にダウンロードできます。

構文は以下の通りです:

@font-face {
  <declaration-list>
}

テスト

@font-face規則はこの仕様で定義された記述子を受け入れます。

各@font-face規則は、すべてのフォント記述子に、明示的または暗黙的に値を指定します。規則で明示的な値が指定されていないものは、この仕様で各記述子ごとに記載されている初期値になります。これらの記述子は、定義された@font-face規則の文脈内だけに適用され、文書言語要素には適用されません。どの要素に適用されるか、子要素への継承があるかという概念はありません。同じ記述子が@font-face規則内に複数回現れる場合は、最後の宣言のみが使われ、それ以前は無視されます。

ダウンロードフォントGentiumを使うには:

@font-face {
font-family: Gentium;
src: url(http://example.com/fonts/Gentium.woff);
}

p { font-family: Gentium, serif; }

ユーザーエージェントはGentiumをダウンロードし、段落要素のテキスト描画に使用します。フォント提供元サイトが利用できない場合は、デフォルトのserifフォントが使われます。

一連の@font-face規則によって、文書内で利用可能なフォントセットが定義されます。フォントマッチング時は、これらの規則で定義されたフォントがシステム上の他の利用可能なフォントよりも優先されます。

ダウンロードフォントは、それを参照する文書だけで利用可能です。これらのフォントを有効化する過程で、他のアプリケーションや同じフォントを直接リンクしない文書には利用可能にしてはなりません。ユーザーエージェント実装者は、他の文書で利用可能なフォントが存在しない場合にダウンロードフォントをインストール済みフォールバック手続きの一環として利用することを便利と考えるかもしれませんが、これはセキュリティリークにつながるため避けるべきです。 1ページの内容が他のページに影響することになり、攻撃者が攻撃ベクトルとして利用できます。これらの制限はキャッシュ挙動には影響せず、フォントは他のウェブリソース同様にキャッシュされます。

Tests

このat規則はCSSの将来互換パース規則に従います。宣言ブロック内のプロパティ同様、ユーザーエージェントがサポートしない記述子の宣言は無視されます。 @font-face規則にはfont-familyとsrc記述子が必要で、どちらかが欠けていれば、 @font-face規則はフォントマッチングアルゴリズム時に考慮されません。

ユーザーエージェントがプラットフォームリソースに制限がある場合や、ダウンロードフォントの利用を無効化する機能がある場合は、 @font-face規則は単純に無視されます。個々の記述子の挙動は、この仕様で定義された通り変更されません。

4.2. フォントファミリー: font-family 記述子

名前:	font-family
対象:	@font-face
値:	<family-name>
初期値:	該当なし

この記述子は、CSSフォントファミリー名のマッチングで使われるフォントファミリー名を定義します。フォントデータ内に含まれるファミリー名を上書きします。フォントファミリー名が、利用者環境で利用可能なファミリー名と同じ場合は、スタイルシートを使う文書では元のフォントが事実上隠されます。これにより、ウェブ著者はユーザー環境のファミリー名との競合を気にせず自由にfont-family名を選択できます。同様に、プラットフォームの代替フォントも使ってはなりません。

4.3. フォント参照: src 記述子

名前:	src
対象:	@font-face
値:	<font-src-list>
初期値:	該当なし

この記述子はフォントデータを含むリソースを指定します。値は外部参照またはローカルインストール済みフェイス名の優先順位付きカンマ区切りリストです。フォントが必要になったとき、ユーザーエージェントはリスト内の参照を順に処理し、最初に正常にパース・有効化できたものを使います。この記述子のパースは他の記述子より複雑です。パース規則は§ 4.3.1 src記述子のパースを参照。フォントの有効化にはファイルのダウンロードまたはディスクからの読み込み、パース、そしてUA依存の追加処理が含まれます。データが不正なフォントや、見つからないローカルフェイスは無視され、 UAは次のフォントをロードします。

4.3.1. src記述子のパース

<font-src-list> 生成規則を構文解析するには、リストを構文解析し、<font-src> のリストとして扱う。

<font-src> = <url> [ format( <font-format> ) ]? [ tech( <font-tech># ) ]?
  | local( <family-name> )

<font-format>= [ <string> | collection | embedded-opentype | opentype
  | svg | truetype | woff | woff2 ]

<font-tech>= [ <font-features-tech> | <color-font-tech>
  | variations | palettes | incremental ]

<font-features-tech>= [ features-opentype | features-aat | features-graphite ]

<color-font-tech>= [ color-COLRv0 | color-COLRv1 | color-SVG | color-sbix | color-CBDT ]

Tests

フォント形式を識別する際にはキーワードが推奨されるが、後方互換性の理由から次の文字列も受理され、同等の新しい構文が使用された場合と同じ効果を持つ。

文字列形式	同等の構文
format("woff2")	format(woff2)
format("woff")	format(woff)
format("truetype")	format(truetype)
format("opentype")	format(opentype)
format("collection")	format(collection)
format("woff2-variations")	format(woff2) tech(variations)
format("woff-variations")	format(woff) tech(variations)
format("truetype-variations")	format(truetype) tech(variations)
format("opentype-variations")	format(opentype) tech(variations)

Tests

format-specifiers-variations.html (live test) (source)

Note: CSS WG は、このフォーマット文字列の一覧を将来的に拡張することは想定していない。

コンポーネント値が正しく構文解析され、かつ UA がサポートするフォント形式またはフォント技術のものである場合、それをサポート済みソースのリストに追加する。コンポーネント値の構文解析がエラーになる場合や、その形式または技術がサポートされていない場合には、サポート済みソースのリストに追加してはならない。

この処理の結果、サポート済みのエントリが 1 つもない場合、 src 記述子の値は構文エラーとなる。

これらの構文解析規則により、特定のフォント技術やフォント形式をサポートしないユーザーエージェントに対しても、フォントのなめらかなフォールバックが可能になる。

たとえば、インクリメンタル転送がサポートされていない場合には、パフォーマンスを最適化するためにフォントの woff2 圧縮版が提供される。そのうえで、インクリメンタル転送用として、未圧縮の OpenType フォントが提供され、その一部がオンデマンドで読み込まれる。

@font-face {
  font-family: "MyIncrementallyLoadedWebFont";
  src: url("FallbackURLForBrowsersWhichDontSupportIncrementalLoading.woff2") format("woff2");
  src: url("MyIncrementallyLoadedWebFont.otf") format(opentype)  tech(incremental);
}

4.3.2. src 記述子内の個別項目のロード

CSSの他のURLと同様に、 URLは相対パスで指定することもでき、その場合は @font-face規則を含むスタイルシートの場所を基準に解決されます。 SVGフォントの場合、 URLはSVGフォント定義を含むドキュメント内の要素を指します。要素参照が省略された場合、最初に定義されたフォントへの参照が暗黙的に指定されます。同様に、複数のフォントを含むことができるフォントコンテナ形式では、ある@font-face規則ごとに一つだけフォントを読み込まなければなりません。読み込むフォントを示すためにフラグメント識別子が使われます；これは[RFC8081]で定義されているフォントのPostScript名を使用します。

テスト

font-opentype-collections.html (ライブテスト) (ソース)

適合するユーザーエージェントは、そのリソース内のフェイスの PostScript 名がフラグメント識別子と完全に一致しない限り、そのフェイスを使用してはならず、また、与えられたフラグメント識別子が有効な PostScript 名になり得ない場合には、そのリソースのダウンロードをスキップしなければならない。

src: url(fonts/simple.woff);       /* スタイルシートの場所基準でsimple.woffをロード */
src: url(/fonts/simple.woff);      /* 絶対パスでsimple.woffをロード */
src: url(fonts/coll.otc#foo);      /* コレクションcoll.otcからfooフォントをロード */
src: url(fonts/coll.woff2#foo);    /* woff2コレクションcoll.woff2からfooフォントをロード */
src: url(fonts.svg#simple);        /* id 'simple' のSVGフォントをロード */

4.3.3. src内の項目選択

外部参照はURLと、オプションでそのURLが参照するフォントリソースのフォーマットを示すヒントからなります。適合するユーザーエージェントは、フォーマットヒントが未対応・不明なフォントフォーマットを示した場合や、フォント技術が未対応の場合はフォントリソースのダウンロードをスキップしなければなりません。フォーマットヒントがなければ、ユーザーエージェントはフォントリソースをダウンロードすべきです。

例えば、WOFF 2フォントを可能ならロードし、それ以外はWOFF 1、さらにだめならOpenTypeフォントを使う例:

@font-face {
font-family: bodytext;
src: url(ideal-sans-serif.woff2) format("woff2"),
    url(ideal-sans-serif.woff) format("woff"),
  url(basic-sans-serif.ttf) format("opentype");
}

この例では、woff2が未対応の場合、未対応かつ架空の"zebra"フォーマットはスキップされ、 opentypeフォントがダウンロードされます:

src: url(ideal.woff2) format("woff2"),url(unsupported.zeb) format("zebra"),
url(basic.ttf) format("opentype");

ここではコレクション内の個別インスタンスをロードし、コレクション未対応なら個別フォントをダウンロードします。

@font-face {
  font-family: 源ノ角ゴシック Code JP;
  src: url(SourceHanCodeJP.otc#Regular) format("collection"),
    url(SourceHanCodeJP-Regular.ttf) format("opentype");
  }

4.3.3.1. ローカルフォントフォールバック

執筆者が、あるフォントについてまずローカルに存在するコピーを優先的に使用し、存在しない場合のみダウンロードさせたい場合には、 local() を使用できる。 local() へのローカルインストール済みの <family-name> 引数は、より大きなファミリーの中で単一のフォントフェイスを一意に識別する、フォーマット固有の文字列である。この名前はオプションで引用符で囲むことができる。引用符で囲まない場合、非引用フォントファミリー名の処理規則が適用される。つまり、その名前は空白で区切られた識別子の並びでなければならず、それらは 1 個のスペースで連結することで文字列へと変換される。このため、 CSS 全域キーワード（たとえば inherit）や、 <generic-family> のキーワード（たとえば serif）は local() の内部では使用できない。

/* Gentium のレギュラー・フェイス */
@font-face {
  font-family: MyGentium;
  src: local(Gentium),    /* ローカルに存在する Gentium を優先 */
    url(Gentium.woff);  /* それ以外の場合はダウンロード */
}

たとえば、次のような local() の使い方はエラーになる：

@font-face {
  font-family: foo;
  src: local(inherit);
}

OpenType および TrueType フォントでは、この文字列はローカルに存在するフォントの name テーブル内で、 PostScript 名またはフルフォント名とのみマッチングに使用される。どちらの種類の名前を使うかはプラットフォームやフォントによって異なるため、執筆者はプラットフォームをまたいで正しくマッチングされるよう、これら両方の名前を指定すべきである。特定フォント名に対するプラットフォーム側での置き換えは使用してはならない。

/* Gentium のボールド・フェイス */
@font-face {
  font-family: MyGentium;
  src: local(Gentium Bold),    /* フルフォント名 */
    local(Gentium-Bold),    /* PostScript 名 */
    url(GentiumBold.woff);  /* それ以外の場合はダウンロード */
  font-weight: bold;
}

@font-face 規則がファミリー内の単一フォントの特性を指定するのと同様に、 local() で使用される一意な名前も、フォントファミリー全体ではなく単一のフォントを指定する。 OpenType フォントデータの観点から定義すると、 PostScript 名はフォントの name テーブル内の nameID = 6 の name レコードに格納される（詳細は [OPENTYPE] を参照）。 PostScript 名は OSX 上のすべてのフォント、ならびに Windows 上の PostScript CFF フォントで一般的に用いられるキーである。フルフォント名（nameID = 4）は、 Windows 上で TrueType グリフを持つフォントの一意キーとして用いられる。

フルフォント名に複数のローカライズを持つ OpenType フォントでは、 US 英語版（Windows では language ID = 0x409、Macintosh では language ID = 0）を使用しなければならない。 US 英語のフルフォント名が利用できない場合には、最初のローカライズを使用する（OpenType 仕様では、すべてのフォントに最低限 US 英語名を含めることを推奨している）。他のフルフォント名にもマッチングを行う（たとえばシステムロケールがオランダ語のときにオランダ語名へマッチさせるなど）ユーザーエージェントは、適合していないとみなされる。

Note: これは英語を優先するためではなく、フォントのバージョンや OS ローカライズをまたぐマッチングの不整合を避けるためである。スタイル名（例："Bold"）は多くの言語にローカライズされることが多く、利用可能なローカライズの集合はプラットフォームやフォントのバージョンによって大きく異なるためである。

ファミリー名（nameID = 1）とスタイル名（nameID = 2）の連結に対してマッチングを行うユーザーエージェントは、適合していないとみなされる。

Note: これにより、それ以外の方法では参照できない、より大きなファミリーに属するフェイスを参照することも可能になる。

ローカルフォントを使用するか、別ドキュメント内の SVG フォントを参照する：

@font-face {
  font-family: Headline;
  src: local(Futura-Medium),
    url(images/fonts.svg#MyGeometricModern) format("svg");
}

プラットフォームごとに異なるローカル日本語フォントへエイリアスを作成する：

@font-face {
  font-family: jpgothic;
  src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic);
}

より大きなファミリー内でマッチさせることができないフォントフェイスを参照する：

@font-face {
  font-family: Hoefler Text Ornaments;
  /* Hoefler Text Regular と同じフォント特性を持つ */
  src: local(HoeflerText-Ornaments);
}

ローカライズされたフルネームは決してマッチしないため、以下のヘッダ用スタイル規則を含むドキュメントは、システムロケールのパラメータがフィンランド語に設定されているかどうかに関わらず、常に既定の serif フォントでレンダリングされる：

@font-face {
  font-family: SectionHeader;
  src: local("Arial Lihavoitu");  /* Arial Bold のフィンランド語フルネーム。マッチしてはならない */
  font-weight: bold;
}

h2 { font-family: SectionHeader, serif; }

下の例では、同じ src 記述子内で 2 回定義されており、2 回目の定義によって 1 回目が上書きされるため、適合するユーザーエージェントは 'gentium.eot' フォントを決して読み込むことはない：

@font-face {
  font-family: MainText;
  src: url(gentium.eot);                     /* 古いユーザーエージェント向け */
  src: local("Gentium"), url(gentium.woff);  /* src 定義を上書きする */
}

4.4. フォントプロパティ記述子: font-style、font-weight、font-width 記述子

Name:	font-style
For:	@font-face
Value:	auto \| normal \| italic \| left \| right \| oblique [ <angle [-90deg,90deg]>{1,2} ]?
Initial:	auto

Name:	font-weight
For:	@font-face
Value:	auto \| <font-weight-absolute>{1,2}
Initial:	auto

Name:	font-width
For:	@font-face
Value:	auto \| <'font-width'>{1,2}
Initial:	auto

Tests

これらの記述子はフォントフェイスの特徴を定義し、スタイルを特定のフェイスにマッチングする処理で使用される。同じフォントファミリーについて複数の @font-face 規則が定義されている場合、ユーザーエージェントはファミリー内のすべてのフェイスをダウンロードしてもよいし、ドキュメント内で実際に使用されているスタイルにマッチするフォントフェイスのみをこれらの記述子を使って選択的にダウンロードしてもよい。これらの記述子の値の意味は、対応するフォントプロパティに対するものと同じだが、相対キーワードである bolder や lighter は使用できない。これらの記述子が省略された場合、初期値が仮定される。指定された値が同名のプロパティで受け付けられる値の範囲外であれば、その記述子は構文エラーとして扱われる。

これら 3 つの記述子では、単一値の代わりに範囲指定も受け付ける。単一値が指定された場合は、始点と終点が同じ値である範囲と同じ意味を持つ。ユーザーエージェントは、減少方向の範囲を禁止するために、範囲の始点と終点の計算値を入れ替えなければならない。両端の値はどちらも包含的である。これらの範囲は、後述のフォントマッチングアルゴリズムで使用される。

Tests

これら 3 つの記述子に対する auto 値は、次のような効果を持つ：

フォント選択の目的においては、適切な normal 値（normal、 normal、または normal）が選択されたかのようにフォントが選択される
バリアーション軸のクランプに関しては、クランプは行われない

これらのフォントフェイススタイル属性の値は、基となるフォントデータが暗示するスタイルの代わりに使用される。これにより、元のフォントデータでの構成が異なる場合でも、執筆者はフェイスを柔軟な組み合わせで利用できる。合成ボールドや合成オブリークを実装するユーザーエージェントは、フォントデータが暗示するスタイル属性ではなく、これらのフォント記述子がそれを必要と示す場合にのみ合成スタイルを適用しなければならない。ただし、'@font-face' で定義されたフォントに適用されるバリアーション値は、これらの記述子で指定された値あるいはバリアーションパラメータの適用（要求された font-weight を満たすための wght 軸の操作など）によって暗示される値と、フォントファイル自体がサポートする値の両方によってクランプされる。

Tests

synthetic-bold-out-of-capabilities-range.html (live test) (source)

この節で定義されるフォント記述子は、特定のファミリーについて @font-face 規則で定義されたフォント集合の中から使用するフォントを選択するために利用される。

単一のレギュラーフェイスだけを含むファミリーを考える：

@font-face {
  font-family: BaskervilleSimple;
  src: url(baskerville-regular.woff2);
}

スタイル指定のないテキストは、 @font-face 規則で定義されたこのレギュラーフェイスで表示される：

しかし、イタリック体テキ��トは、別個のイタリックフェイスが定義されていないため、多くのユーザーエージェントではレギュラーフェイスのグリフに人工的なオブリークをかけたもので表示される：

次に、実際のイタリックフェイスが定義されているファミリーを考える：

@font-face {
  font-family: BaskervilleFull;
  src: url(baskerville-regular.woff2);
}

@font-face {
  font-family: BaskervilleFull;
  src: url(baskerville-italic.woff2);
  font-style: italic;
}

2 つ目の @font-face 規則は、フォントリソース baskerville-italic.woff に対し、ウェイト normal、幅 normal、スタイル italic の属性を付与している。イタリック体テキストを表示する際、ユーザーエージェントはこのフォントを使用する。これはイタリック体テキストに最も近いマッチであるためである。したがって、テキストは、レギュラーフェイスのグリフに人工的なオブリークをかけたものではなく、タイプデザイナーが設計したグリフによって表示される：

特定のフォントファミリー内でどのフェイスを選択するかを決定する処理の詳細については、フォントマッチングの節を参照。

フォントは、自身が対応可能な font-weight、 font-width、および font-style の範囲を広告してもよい。

@font-face {
  font-family: Lastima;
  src: url(lastima-varfont.woff2);
  font-weight: 100 399;
}

上記の @font-face 規則は、 lastima-varfont.woff を font-weight が 100〜399 のときに使用すべきであることを示している。同じ @font-face 規則で font-family: Lastima を指定する他の規則が存在するかどうかにもよるが、 font-weight の値が 100〜399 の範囲外であっても lastima-varfont.woff が使用される場合がある。詳細については、§ 5 Font Matching Algorithm を参照。

上記と同様に、複数の @font-face 規則を 1 つのファミリーにまとめ、 font-weight、 font-width、および／または font-style の複数の範囲にまたがるようにしてもよい：

@font-face {
  font-family: Lastima;
  src: url(lastima-varfont-lightrange.woff2);
  font-weight: 100 399;
}
@font-face {
  font-family: Lastima;
  src: url(lastima-varfont-heavyrange.woff2);
  font-weight: 400 700;
}

上記の @font-face 規則は、 font-weight が 100〜399 のときには lastima-varfont-lightrange.woff を、 font-weight が 400〜700 のときには lastima-varfont-heavyrange.woff を使用すべきであることを示している。

4.4.1. フォント幅: font-stretch レガシー名エイリアス

歴史的経緯により、 font-stretch ディスクリプタが存在し、これは legacy name alias であり、font-width ディスクリプタと同一の方法で機能します。

テスト

4.5. 文字範囲: unicode-range 記述子

Name:	unicode-range
For:	@font-face
Value:	<unicode-range-token>#
Initial:	U+0-10FFFF

Tests

font-face-unicode-range-2.html (live test) (source)
font-face-unicode-range-nbsp.html (live test) (source)
font-face-unicode-range.html (visual test) (source)

この記述子は、宣言対象となるフォントフェイスがサポートしている可能性のある Unicode コードポイントの集合を定義する。記述子の値は、Unicode 範囲トークン（<unicode-range-token>）値のカンマ区切りリストである。これらの範囲の和集合が、特定のテキスト実行に対してフォントリソースをダウンロードするかどうかを決定する際にユーザーエージェントへのヒントとして機能するコードポイント集合を定義する。

それぞれの <unicode-range-token> 値は、「U+」または「u+」という接頭辞に続き、以下に示す 3 つの形式のいずれかで表されるコードポイント範囲から成るトークンである。これらの形式のいずれにも当てはまらない範囲は無効であり、その宣言全体が無視される。

単一コードポイント（例: U+416）: 1〜6 桁の 16 進数で表された Unicode コードポイント
区間範囲（例: U+400-4ff）: ハイフンで区切られた 2 つの Unicode コードポイントで表され、範囲の開始コードポイントと終了コードポイント（いずれも包含）の両方を示す
ワイルドカード範囲（例: U+4??）: 末尾の '?' 文字が任意の 16 進数字を表すことで、それにより暗黙的に決まるコードポイント集合で定義される

個々のコードポイントは、 Unicode 文字コード表に対応する 16 進数の値で記述される。 Unicode コードポイント値は 0 以上 10FFFF 以下でなければならない。コードポイントの数字は ASCII 大文字小文字不区別で解釈される。区間範囲では、開始および終了コードポイントは上記の範囲内でなければならず、終了コードポイントは開始コードポイント以上でなければならない。

先頭の数字を欠いた（例: "U+???"）'?' によるワイルドカード範囲は有効であり、先頭に 0 が付いたワイルドカード範囲（例: "U+0???" = "U+0000-0FFF"）と等価である。 Unicode コードポイントの範囲を超えるワイルドカード範囲は無効である。このため、末尾の '?' ワイルドカード文字の個数は最大でも 5 個に制限される。これは、UNICODE-RANGE トークンが 6 個まで受け付けるにもかかわらず、である。

unicode-range 記述子宣言内のカンマ区切り Unicode 範囲リストでは、範囲同士が重なっていてもよい。これらの範囲の和集合が、対応するフォントを使用してよいコードポイント集合を定義する。ユーザーエージェントは、この集合の外側にあるコードポイントのためにフォントをダウンロードしたり使用したりしてはならない。ユーザーエージェントは、同じコードポイント集合を表す別の範囲リストへと正規化してもよい。

関連付けられたフォントが、 unicode-range 記述子によって定義されるコードポイント集合のすべてに対してグリフを持っていない場合もある。フォントが実際に使用される際の実効文字マップ (effective character map) は、 unicode-range で定義されたコードポイント集合と、フォントの文字マップとの共通部分である。これにより、執筆者は基になるフォントが正確にどのコードポイント範囲をサポートしているかを気にせず、より広い範囲という観点でサポート範囲を定義できる。

4.5.1. 文字範囲を使った複合フォント定義

同じファミリーかつ同じスタイル記述子値に対して異なる unicode-range を持つ複数の @font-face 規則を用いることで、スクリプトごとに異なるフォントのグリフを混在させる合成フォントを作成できる。これは、単一スクリプト（例：ラテン、ギリシア、キリル）のグリフしか含まないフォント同士を組み合わせる場合にも使えるし、よく使われる文字と使用頻度の低い文字をそれぞれ別フォントに分割する手段として執筆者が利用することもできる。ユーザーエージェントは必要なフォントだけを取得するため、ページの帯域幅削減に役立つ。

同じファミリーかつ同じスタイル記述子値を持つ一連の @font-face 規則について unicode-range が重複している場合、それらの規則は定義された順序とは逆順に並べ替えられる。すなわち、最後に定義された規則が特定の文字に対して最初にチェックされる。

特定の言語や文字に対するサンプル範囲：

unicode-range: U+A5;: 単一コードポイント（円／元記号）
unicode-range: U+0-7F;: 基本 ASCII 文字のコード範囲
unicode-range: U+590-5ff;: ヘブライ文字のコード範囲
unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;: 日本語の漢字・ひらがな・カタカナ各文字と円／元記号のコード範囲

BBC は非常に多くの言語でニュースサービスを提供しており、その多くはすべてのプラットフォームで十分にサポートされているとは限らない。 @font-face 規則を使えば、 BBC はこれら任意の言語向けにフォントを提供できる。これはすでに手動のフォントダウンロードを通じて行っていることと同様である。

@font-face {
  font-family: BBCBengali;
  src: url(fonts/BBCBengali.woff) format("woff");
  unicode-range: U+00-FF, U+980-9FF;
}

技術文書では、広範な記号セットが必要になることが多い。 STIX Fonts プロジェクトは、広い範囲の技術組版を標準化された方法でサポートするフォントを提供することを目的としたプロジェクトの一つである。次の例は、Unicode 内の数学記号や技術記号用の多くの範囲に対してグリフを提供するフォントを利用する方法を示している：

@font-face {
  font-family: STIXGeneral;
  src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
  unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
}

この例は、日本語フォント内で使用されるラテン文字のグリフを、別のフォントのグリフで上書きする方法を示している。最初の規則では範囲を指定してい��いため、既定で全範囲が対象となる。 2 つ目の規則で指定された範囲は重複しているが、後から定義されているため、こちらが優先される。

@font-face {
  font-family: JapaneseWithGentium;
  src: local(MSMincho);
  /* 範囲を指定していないため、既定で全範囲が対象 */
}

@font-face {
  font-family: JapaneseWithGentium;
  src: url(../fonts/Gentium.woff);
  unicode-range: U+0-2FF;
}

ラテン文字、日本語文字、その他の文字をそれぞれ別のフォントファイルに分離することで帯域幅を最適化するよう構成されたファミリーを考える：

/* フォールバックフォント - サイズ: 4.5MB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSansFallback.woff);
  /* 範囲を指定していないため、既定で全範囲が対象 */
}

/* 日本語グリフ - サイズ: 1.2MB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSansJapanese.woff);
  unicode-range: U+3000-9FFF, U+ff??;
}

/* ラテン、ギリシア、キリルに加え、
  一部の句読点と記号 - サイズ: 190KB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSans.woff);
  unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
}

単純なラテン文字のテキストでは、ラテン文字用フォントだけがダウンロードされる：

body { font-family: DroidSans; }

<p>This is that</p>

この場合、ユーザーエージェントはまずラテン文字を含むフォント（DroidSans.woff）の unicode-range を確認する。上記の文字はいずれも U+0-5FF の範囲に含まれるため、ユーザーエージェントはこのフォントをダウンロードし、そのフォントでテキストを描画する。

次に、矢印文字（⇨）を用いたテキストを考える：

<p>This &#x21e8; that<p>

ユーザーエージェントは再び、まずラテン文字を含むフォントの unicode-range を確認する。 U+2000-2300 には矢印のコードポイント（U+21E8）が含まれているため、ユーザーエージェントはフォントをダウンロードする。しかしこの文字については、ラテン用フォントには一致するグリフが存在しないため、フォントマッチングに用いられる実効 unicode-range からはこのコードポイントが除外される。次に、ユーザーエージェントは日本語フォントを評価する。日本語フォントの unicode-range（U+3000-9FFF および U+ff??）には U+21E8 が含まれていないため、ユーザーエージェントは日本語フォントをダウンロードしない。次にフォールバックフォントが検討される。フォールバックフォント用の @font-face 規則では unicode-range が定義されていないため、その値はすべての Unicode コードポイント範囲が既定となる。フォールバックフォントがダウンロードされ、矢印文字の描画に使用される。

4.6. フォント機能とバリエーション: font-feature-settings および font-variation-settings 記述子

Name:	font-feature-settings
For:	@font-face
Value:	normal \| <feature-tag-value>#
Initial:	normal

Tests

Name:	font-variation-settings
For:	@font-face
Value:	normal \| [ <string> <number>]#
Initial:	normal

Tests

これらの記述子は、@font-face 規則で定義されたフォントが描画されるときに適用される、初期設定を定義する。フォントの選択には影響しない。値は、後述の対応する font-feature-settings プロパティおよび font-variation-settings プロパティに対して定義されるものと同一だが、 CSS 全域キーワードは含まれない。名前付きインスタンスと共に、複数のフォント機能記述子・プロパティ・バリアーションが併用される場合、テキスト描画に対する累積的な効果については、後述の § 7 Font Feature and Variation Resolution に詳述されている。

これらの記述子は、 @font-face 規則が表すフォントオブジェクトに対して機能やバリアーションの値を設定し、要素全体に対して設定するわけではない。そのため、これらの記述子を使用する場合、 § 5.3 Cluster matching により、要素内の一部のグリフだけがその機能で描画されることがある。

4.7. バリアブルフォントの名前付きインスタンス利用: font-named-instance 記述子

Name:	font-named-instance
For:	@font-face
Value:	auto \| <string>
Initial:	auto

font-named-instance 記述子が auto 以外の値に設定されている場合、 § 7 Font Feature and Variation Resolution の適切な段階において、フォントファイルを検査し、 § 5.1 Localized name matching に示される規則に従って与えられた <string> と等しいローカライズ名を持つ最初の名前付きインスタンスをそのフォント内から探す。そのような名前付きインスタンスが存在しない場合、この記述子は 'font-named-instance/auto' という値を持つかのように扱われる。そうでなければ、見つかった名前付きインスタンスのバリアーション軸の値が、 § 7 Font Feature and Variation Resolution におけるこの位置で適用される。

たとえば、次の @font-face ブロックは、 "Grotesque" という名前付きインスタンスを適用するが、 "XHGT" 軸の値だけは 0.7 に上書きする。

@font-face {
  font-family: "AccuroVar";
  src: url("accurovar.otf") format("opentype");
  font-named-instance: "Grotesque";
  font-variation-settings: "XHGT" 0.7;
}

Note: font-weight、font-width、および font-style プロパティによって与えられるバリアーション軸の値は、 font-named-instance 記述子の値よりも先に適用されるため、名前付きインスタンスを利用したい場合でも、それらのプロパティの値を変更する必要はない。

4.8. フォントリクエストガイドライン

4.8.1. フォントロードガイドライン

@font-face 規則は、ドキュメント内で実際に使用されたときにのみフォントリソースをダウンロードする、レイジーローディングを可能にするよう設計されている。スタイルシートにはフォントライブラリ用の @font-face 規則を多数含めておき、そのうち一部だけを使用することもできる。ユーザーエージェントは、特定ページに対して適用可能なスタイル規則内で参照されているフォントだけをダ��ンロードしなければならない。ページ内で実際に使用されているかどうかを考慮せずに、 @font-face 規則で定義されたすべてのフォントをダウンロードするユーザーエージェントは非適合と見なされる。文字フォールバックのケースでフォントがダウンロードされる可能性がある場合、ユーザーエージェントは、特定のテキストランに対する font-family の計算値にそのフォントが含まれているときに限り、フォントをダウンロードしてもよい。

@font-face {
  font-family: GeometricModern;
  src: url(font.woff);
}

p {
  /* p 要素があるページでは、このフォントがダウンロードされる */
  font-family: GeometricModern, sans-serif;
}

h2 {
  /* h2 要素があるページでは、Futura がローカルに存在していても、このフォントがダウンロードされる場合がある */
  font-family: Futura, GeometricModern, sans-serif;
}

テキストコンテンツが、ダウンロード可能フォントが利用可能になる前に読み込まれる場合、ユーザーエージェントは、その font-display 記述子に従って該当する @font-face ブロックのテキストを描画しなければならない。フォントのダウンロードが失敗した場合には、ユーザーエージェントはテキストを可視状態で表示しなければならない。作者は、可能な限り大きなページのリフローを避けるため、ダウンロードフォントとメトリクスがよく一致するフォールバックフォントをフォントリスト内で使用することが推奨される。

4.8.2. フォント取得の要件

選択された <url> url と、@font-face の rule が与えられたときにフォントを取得 (fetch a font) するには、取得対象として url を用い、 ruleOrDeclaration に rule を指定し、 destination を "font", CORS モードを "cors" とし、さらに response res と、 null・failure もしくはバイトストリーム stream が与えられたときの processResponse として次の手順を実行する：

stream が null の場合、何もせず返る。
型に応じて、stream からフォントを読み込む。

Note: これが作者にとって意味するところは、特別な手順を踏まない限り、フォントは一般にクロスオリジンでは読み込まれないということである。サイトは、HTTP ヘッダー Access-Control-Allow-Origin を用いて明示的にフォントデータのクロスサイト読み込みを許可できる。他のスキームについては、 fetch アルゴリズムで許可されている範囲を超えてクロスオリジン読み込みを明示的に許可する仕組みは規定も要求もされていない。

Tests

test_datafont_same_origin.html (live test) (source)

以下の例では、ドキュメントが https://example.com/page.html にあり、すべての URL がユーザーエージェントにサポートされた有効なフォントリソースを指しているものと仮定する。

次に示す src 記述子値で定義されるフォントは読み込まれる：

/* 同一オリジン (ドメイン・スキーム・ポートがドキュメントと一致) */
src: url(fonts/simple.woff);

/* リダイレクトのない data URL は同一オリジンとして扱われる */
src: url("data:application/font-woff;base64,...");

/* クロスオリジン (異なるドメイン) */
/* 応答ヘッダー Access-Control-Allow-Origin が '*' に設定されている */
src: url(http://another.example.com/fonts/simple.woff);

次に示す src 記述子値で定義されるフォントは読み込みに失敗する：

/* クロスオリジン、異なるスキーム */
/* 応答ヘッダーに Access-Control-xxx が存在しない */
src: url(http://example.com/fonts/simple.woff);

/* クロスオリジン、異なるドメイン */
/* 応答ヘッダーに Access-Control-xxx が存在しない */
src: url(http://another.example.com/fonts/simple.woff);

4.9. フォントフェイスごとの表示制御: font-display 記述子

font-display 記述子は、 @font-face に対して、フォントフェイスがどのように表示されるかを、そのフォントがいつ・どのようにダウンロードされ、使用可能になるかに基づいて決定する。

Name:	font-display
For:	@font-face
Value:	auto \| block \| swap \| fallback \| optional
Initial:	auto

Tests

Note: これらすべての値について、ユーザーエージェントは、ユーザーにとってより有用な挙動を提供するために、若干異なる継続時間を用いたり、 font-display 構文では直接的に表現できないようなさらに高度な挙動を用いたりしてもよい。また、作者が選択した挙動をユーザーがより望ましいものに上書きできるようにしてもよい。たとえば、すべてのフォントに対して 0s のブロック期間を強制する、などである。

auto

フォント表示ポリシーはユーザーエージェント定義とする。

Note: 多くのブラウザーは、 block で規定されるものに似た既定ポリシーを持つ。

block

フォントフェイスに短いブロック期間（多くの場合 3s が推奨される）と、無限のスワップ期間を与える。

Note: 言い換えると、フォントが読み込まれていない場合、ブラウザーはいったん「見えない」テキストを描画するが、フォントフェイスが読み込まれ次第すぐに差し替える。

この値は、ページが利用可能であるために特定フォントでのテキスト描画が必須な場合にのみ使用しなければならない。また、ごく短いテキストに対してのみ使用しなければならない。

たとえば、設計の悪い「アイコンフォント」では、「⎙」（プリンタ）アイコンを「P」のような無関係な文字に割り当てている場合がある。このとき、フォールバックフォントでテキストが描画されると、本来のアイコンの代わりに、ページ上に意味不明な文字が散らばることになってしまう。このような場合、フォールバックフォントを使用するよりも、一時的に空白部分が表示されるほうがよい。

（ただし、最終的にはフォールバックフォントが使用される。ページ上のリンクなどが一切表示されないままであるよりは、多少意味不明な文字が散らばっているほうがまだましであるため。）

より良い解決策については、アクセシビリティに関する考慮事項の節で説明している。

swap

フォントフェイスに極めて短いブロック期間（多くの場合 100ms 以下が推奨される）と、無限のスワップ期間を与える。

Note: 言い換えると、フォントフェイスが読み込まれていない場合、ブラウザーは直ちにフォールバックフォントでテキストを描画するが、フォントフェイスが読み込まれ次第すぐに差し替える。

この値は、特定フォントでのテキスト描画がページにとって非常に重要だが、どのフォントで描画されても正しいメッセージが伝わる場合にのみ使用すべきである。これもごく短いテキストに対してのみ使用すべきである。

たとえば、あるサイトがロゴ表示のためのカスタムフォントを持つ場合、そのロゴを正しく描画することはブランディングの観点からかなり重要である。しかし、どのフォントで表示されたとしても、少なくとも混乱なく意図は伝わる。

fallback

フォントフェイスに極めて短いブロック期間（多くの場合 100ms 以下が推奨される）と、短いスワップ期間（多くの場合 3s が推奨される）を与える。

Note: 言い換えると、フォントフェイスが読み込まれていない場合、最初はフォールバックフォントでテキストが描画されるが、読み込まれ次第すぐに差し替えられる。しかし、一定時間を過ぎてしまった場合、ページのライフタイム中はそれ以降もフォールバックフォントが使われ続ける。

この値は本文テキストや、選択したフォントを使えると有用で望ましいが、フォールバックフォントで表示されても問題ないようなテキストに対して使用すべきである。大きな塊のテキストに対して適した値である。

たとえば、長い本文テキストでは、最も重要なのはテキストをできるだけ早く描画し、ユーザーがすぐに読み始められるようにすることである。さらに、一度読み始めたユーザーにとっては、新しいフォントが読み込まれて差し替えられた際にテキストが突然「ずれる」ことは望ましくない。これは集中を妨げ、読み進めていた位置を再び探さなければならなくなるためである。

optional

フォントが「即座に」読み込める（テキストの「最初の描画」に使えるだけのタイミングで利用可能になる）場合には、そのフォントが使用される。

それ以外の場合、フォントはブロック期間とスワップ期間の両方が読み込み完了前にすでに経過してしまったかのように扱われる。このためフォントが使用されない場合、ユーザーエージェントはフォントのダウンロードを中止したり、非常に低い優先度でダウンロ��ドしたりしてもよい。ユーザーエージェントがユーザーにとって有用だと判断するなら、フォントのダウンロード開始すら行わず、直ちにフォールバックフォントを使用してもよい。

optional なフォントは、読み込み途中でページのレイアウトが「ジャンプ」する原因になっては ならない。ユーザーエージェントは、おそらく遅いローカルキャッシュから読み込む時間を与えるために、 optional フォントを使用する要素の描画をわずかに遅らせてもよいが、いったんフォールバックフォントでテキストが画面に描画された後は、ページのライフタイム中、それを optional フォントで再描画してはならない。

この値は本文テキストや、選択されたフォントが純粋に装飾目的の「あると嬉しい」程度のものであるテキストに使用すべきである。ページを初回表示する際に、すべてが最初から完璧な見た目で表示されるまで時間をかけるよりも、できるだけ早くページを表示することのほうが重要な場合に常に使うべき値である。

たとえば、本文テキストはブラウザー既定のフォントでも十分読みやすいが、ダウンロード可能なフォントフェイスを使えばさらに見た目が良くなり、サイト全体の美観にもよりマッチするかもしれない。サイトを初めて訪れるユーザーは一般的に、表示の細かな点よりも、サイトがすぐに利用可能になることのほうを重要視する。 optional は、このようなケースに適した挙動を提供する。ユーザーが後で再訪したときには、望ましいフォントフェイスのダウンロードが完了しており、初回と 2 回目以降の訪問のどちらでも表示を遅くすることなく、「意図した」体験を提供できるかもしれない。

非常に遅い回線を使っているユーザーは、「意図した」体験を最終的に受け取れないかもしれない。しかし、optional によって、サイトを実際に利用できるようにし、読み込みが遅すぎるためにサイトを離れて別の場所へ行ってしまう事態を防ぐことができる。

optional なフォントがあるテキストの描画に間に合うタイミングで利用可能になる可能性を高めるために、ユーザーエージェントは、アクセスを高速化したり、テキスト描画を遅延させる価値があると判断するためのヒューリスティクスを用いることが推奨される。たとえば、そのフォントが HTML 内で preload されているかを確認したり、スタイルシート内でフォントが現れた時点で（ページで実際に使用されるか分かる前でも）ファイルをより高速なインメモリキャッシュへ移動したり、といっ��手法である。

しかし、これらのヒューリスティクスは作者が依拠できるものではない。 optional 値を用いた場合、フォントが一度も使用されない可能性があることを理解しておかなければならない。フォントが使用されることについてもう少し高い保証が必要な場合には、作者は fallback 値の使用を検討すべきである。

4.9.1. @font-feature-values によるフォントファミリーごとのフォント表示制御

font-display 記述子は、 @font-feature-values に対して、同じフォントファミリーを対象とする @font-face 規則における「既定」の font-display 値を設定することで、そのフォントファミリーがどのように表示されるかを決定する。 @font-face 規則内で font-display が省略されている場合、ユーザーエージェントは、関連するフォントファミリーに対して @font-feature-values で設定された font-display の値があればそれを用い、そうでなければ auto を既定値として用いる。

この仕組みは、フォントファミリー全体に対する既定の表示ポリシーを一括して設定するために使用できる。また、開発者が直接制御できない @font-face 規則に対して、表示ポリシーを指定できるようにもする。たとえば、フォントがサードパーティのフォントファウンドリから提供される場合、開発者は @font-face 規則自体を制御できないが、提供されたフォントファミリーに対する既定の font-display ポリシーを設定することは可能である。また、フォントファミリー全体に対して既定ポリシーを設定できることは、ランサムノート効果（つまり、フォントフェイスがバラバラになること）を避けるうえでも有用である。表示ポリシーがファミリー全体に適用されるためである。

Name:	font-display
For:	@font-feature-values
Value:	auto \| block \| swap \| fallback \| optional
Initial:	auto

4.10. 既定フォント言語の上書き: font-language-override 記述子

Name:	font-language-override
For:	@font-face
Value:	normal \| <string>
Initial:	normal

この記述子は、@font-face 規則で定義されたフォントが描画される際に適用される初期設定を定義する。フォントの選択には影響しない。値は、後述の font-language-override プロパティに対して定義されるものと同一だが、ここでは値 inherit が省かれている。複数のフォント機能記述子・プロパティ・バリアーションが併用される場合、テキスト描画への累積的な効果については後述の § 7 Font Feature and Variation Resolution に詳述される。

4.11. 既定フォントメトリクスの上書き: ascent-override・ descent-override・ line-gap-override 記述子

Name:	ascent-override
For:	@font-face
Value:	normal \| <percentage [0,∞]>
Initial:	normal

Tests

Name:	descent-override
For:	@font-face
Value:	normal \| <percentage [0,∞]>
Initial:	normal

Tests

Name:	line-gap-override
For:	@font-face
Value:	normal \| <percentage [0,∞]>
Initial:	normal

Tests

ascent-override・ descent-override・ line-gap-override 記述子は、それぞれフォントのアセントメトリクス・ディセントメトリクス・ラインギャップメトリクスを定義する。

記述子の値が normal の場合、対応するメトリクス値はフォントファイルから直接取得される。

Note: ユーザーエージェントは、フォントファイル内のどの情報をメトリクス値として用いるかが異なる場合があり、その結果としてテキストレイアウトも異なり得る。

記述子の値がパーセンテージである場合、対応するメトリクス値は与えられたパーセンテージに使用フォントサイズを掛けた値として解決される。負の値は構文解析時に無効となる。

パーセンテージは、要素ごとに異なるフォントサイズに対して解決される。

@font-face {
  font-family: overridden-font;
  ascent-override: 50%;
  ...
}

<span style="font-family: overridden-font; font-size: 20px;">
  Outer span content
  <span style="font-size: 150%;">Inner span content</span>
</span>

外側の span はアセント値として 10px を用いる一方、内側の span は 15px を用いる。

プライマリフォントが Web フォントである場合に、それとメトリクスを合わせるためにローカルフォールバックフォントのメトリクスを上書きできる。これにより、フォールバックからプライマリフォントへ切り替わる際のレイアウトシフトを抑えられる。

@font-face {
  font-family: cool-web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: fallback-to-local;
  src: local(Some Local Font);
  /* cool-web-font に合わせてメトリクス値を上書き */
  ascent-override: 125%;
  descent-override: 25%;
  line-gap-override: 0%;
}

<div style="font-family: cool-web-font, fallback-to-local">Title goes here</div>
<img src="https://example.com/largeimage" alt="A large image that you don’t want to shift"

ユーザーエージェントが Web フォントの読み込みを終えてそれに切り替えても、画像が垂直方向にずれることはない。

5. フォントマッチングアルゴリズム

以下のアルゴリズムは、フォントがテキストの個々のランにどのように関連付けられるかを説明する。ラン内の各文字について、あるフォントファミリーが選択され、その文字に対するグリフを含む特定のフォントフェイスが選ばれる。

フォントマッチングアルゴリズムで利用可能なインストール済みフォントの集合は、明示的に未定義とする。

既定のインストール済みフォント集合は UA・プラットフォーム・ロケールによって異なる。利用者が、ウェブページ描画に利用可能なインストール済みフォントと、それらフォントが（もしあれば）どの汎用フォントファミリーにマッピングされるかをカスタマイズできることが重要である。

UA は、そのフォントがどのようにインストールされたかに関わらず、すべてのインストール済みフォントをウェブに公開してもよい。そうすることは、自身の主要言語が OS に同梱されているフォントではサポートされていない利用者にとって、国際化の観点から好ましい特性を持つ可能性が高い。

UA は別の選択肢として、ウェブ上でのプライバシー保護のために、当初はユーザーがインストールしたフォントを一切公開しないようにしてもよい。利用者がインストールしているフォントの集合は、ウェブ全体で利用者を追跡するためのトラッキング手段としてしばしば用いられるからである。そのうえで、利用者は自身のニーズに応じて、その集合からフォントを追加・削除できるようにすべきである。

UA はハイブリッドな手法を選択してもよい。すなわち、国際化のために一部のユーザーインストールフォントは初期状態で公開し、それ以外は公開しない、という方法である。この場合でも、利用者はこの初期集合をカスタマイズできるべきである。

UA は、国際化とプライバシーとのバランスを取るために、既定でどのフォントをウェブに公開するかについて十分に吟味された決定を行うことが期待される。また、利用者が自分のニーズに合わせて利用可能なフォントを追加・削除できるよう、便利な手段を提供することも期待される。

テスト

5.1. ローカライズ名のマッチング

一部のフォントファイルフォーマットでは、フォントフェイスに特定の文字列（ファミリー名や名前付きインスタンスなど）の複数ローカライズを保持できます。ユーザーエージェントは、基盤となるプラットフォームのローカライズ、システムAPI、文書エンコーディングに関係なく、すべての名前を認識し正しくマッチしなければなりません。

例えば、下記の各フォントについて、著者はfont-familyプロパティにラテン名またはローカライズ名のいずれを使っても全てのシステムで同じ結果が得られます：

examples of localized family names — ローカライズされたファミリー名

ユーザーエージェントはこれらの名前を Unicode仕様[UNICODE]の「Default Caseless Matching」アルゴリズムに従い大文字小文字を区別せずマッチしなければなりません。このアルゴリズムはセクション3.13「Default Case Algorithms」に詳細があります。具体的には、文字列の正規化や言語固有の調整を行わずに適用します。このアルゴリズムで指定されるケースフォールディングは、 Unicode Character DatabaseのCaseFolding.txtファイル内でステータスフィールドが"C"または"F"のケースマッピングを使います。

注: 著者にとっては、プラットフォームフォントでもスタイルシート内の@font-face規則でもフォントファミリー名が大文字小文字を区別せずにマッチされることを意味します。特に合成文字（ダイアクリティカルマークなど）を使う場合は、実際のフォントファミリー名と同じ文字列シーケンスになるよう注意してください。例：小文字a（U+0061）＋合成リング（U+030A）を含むファミリー名は、見た目が同じでも合成シーケンスの代わりに合成済み小文字aリング（U+00E5）を使っている場合は マッチしません。

注: 実装者は、ケース無し文字列比較実装がこのアルゴリズム通りか必ず検証し、プラットフォームの文字列マッチ関数が locale固有の挙動や文字列正規化を行っている場合は注意してください。

5.2. フォントスタイルのマッチング

テキストラン内の特定文字に対してフォントを選ぶ手順は、 font-familyプロパティで指定されたフォントファミリーを順に調べ、他のフォントプロパティに基づいて適切なスタイルのフォントフェイスを選択し、その文字に対応するグリフが存在するかを判定します。これはフォントの文字マップ（各文字を対応するデフォルトグリフにマッピングするデータ）を使って行います。フォントがある文字をサポートするとは、 (1) 文字がそのフォントの文字マップに含まれ、 (2) 必要ならスクリプトに応じた字形処理情報も利用可能である場合です。

一部のレガシーフォントは、文字マップに該当文字を含んでも、テキストランでその文字を正しく描画するために必要な字形処理情報（例：OpenTypeレイアウトテーブルやGraphiteテーブル）が不足している場合があります。

基底文字の後に合成文字が続くコードポイント系列はわずかに異なる扱いとなります。詳細は下記クラスターのマッチング節を参照してください。

この手順においては、あるフォントファミリーに対する既定フォントフェイス (default font face)とは、すべてのフォントスタイル関連プロパティが初期値に設定されている場合に選択されるフェイスであると定義する。

特定の要素に対する計算済みフォントプロパティ値を用いて、ユーザーエージェントはまず、 font-family プロパティで指定された最初のファミリー名から処理を開始する。
そのファミリー名が汎用ファミリーキーワードである場合、ユーザーエージェントは使用すべき適切なフォントファミリー名を検索する。ユーザーエージェントは、含んでいる要素の言語や文字の Unicode 範囲に基づいて、使用する汎用フォントファミリーを選択してもよい。
その他のファミリー名については、ユーザーエージェントはまず @font-face 規則で定義されたフォントの中からファミリー名を検索し、次に利用可能なインストール済みフォント（フォントエイリアスを含んでもよい）の中から検索する。名前の照合は、上述の節で示した § 5.1 Localized name matching に従って行われる。ある @font-face 規則内のフェイスに対して定義されたフォントリソースが利用不可能であるか、無効なフォントデータを含んでいる場合、そのフェイスはファミリー内に存在しないものとして扱わなければならない。 @font-face 規則で定義されたあるファミリーについて、 1 つのフェイスも存在しない場合、そのファミリーは欠落しているものとして扱わなければならない。この場合、同名のプラットフォームフォントを対応付けてはならない。
フォントファミリーの一致が見つかった場合、ユーザーエージェントはそのファミリーに属するフォントフェイスの集合を構成し、以下に示す順序で他のフォントプロパティを用いてその集合を 1 つのフェイスに絞り込む。このグループ内には、 font-width・font-style・font-weight プロパティのある範囲をサポートするフォントが含まれている場合がある。この場合、このアルゴリズムは、サポートされる各値の組み合わせが集合内の一意なフォントであるかのように扱って進行する。このアルゴリズムによって最終的にそのようなフォントが選択された場合、 font-width・font-style・font-weight に対して特定の値を適用しなければならず、これはレイアウトや描画が行われる前に適用されなければならない。これらの値の適用は、 § 7 Font Feature and Variation Resolution に詳述されている Apply font matching variations の手順内で行われなければならない。また、フォント記述子値が同一で unicode-range の値だけが異なる一連の @font-face 規則で定義されたフェイス群は、この段階では 1 つの複合フォントフェイス (composite font face) と見なされる：
Tests
1. 最初に font-width を試す。フォントが、幅値の強さが変化するという概念を持たない場合、その幅値はプロパティ定義の表に従ってマッピングされる。マッチング集合内に、望ましい font-width 値を含む幅値を持つフェイスがある場合、望ましい幅値を含まない幅値を持つフェイスはマッチング集合から除外される。望ましい値を含むフェイスが 1 つもない場合は、次の規則に従って幅値を選択する：
  - 望ましい幅値が 100% 以下の場合、望ましい幅値未満の幅値を大きいほうから順にチェックし、その後で望ましい幅値より大きい幅値を小さいほうから順にチェックし、一致が見つかるまで続ける。
  - それ以外の場合は、望ましい幅値より大きい幅値を小さいほうから順にチェックし、その後で望ましい幅値未満の幅値を大きいほうから順にチェックし、一致が見つかるまで続ける。
  この処理によって最も近い幅値が決定されたら、その決定された幅値を含まない幅値を持つフェイスはマッチング集合から除外される。
  
  この探索アルゴリズムは、フォントファミリー内で距離が最小の値を持つフォントが選択され、その値を含まないフォントがすべて除外される距離関数として捉えることができる。
  あるフォントファミリーに A・B・C という 3 つのフォントがあり、それぞれに対応する font-width 記述子のサポート範囲があるとする。要素に "font-width: 125%" が指定されている場合、探索アルゴリズムは次のように可視化できる：
  
  上のグラフには、フォント A・B・C がサポートする幅の範囲が示されている。このとおり、ファミリー全体で最小の距離を含むのはフォント B であるため、このアルゴリズムではフォント B が選択される。ただし、もしフォント B がなんらかの理由でファミリーから除外されている場合には、次に距離が最小なのはフォント C となり、それが選択される。
  
  前の例と同様に、要素に "font-width: 75%" が指定されている場合の概念的な距離グラフは次のとおりである：
  
  このとおり、ファミリー全体で最小の距離を含むのはフォント B であるため、アルゴリズムではフ��ント B が選択される。ただし、もしフォント B が除外されている場合にはフォント A が次に距離の最小なフォントとなり、選択される。
2. 次に font-style を試す（§ 5.2 Matching font styles 参照）。フォントがイタリック度やオブリーク角の強さの違いという概念を持たない場合、そのスタイルは font-style プロパティ定義の記述に従ってマッピングされる。
  
  font-style の値が italic の場合：
  1. マッチング集合内に、マッピング後の italic 値を含むイタリック値を持つフェイスがある場合、望ましいマッピング済みイタリック値を含まないイタリック値を持つフェイスはマッチング集合から除外される。
  2. そうでない場合、望ましいイタリック値より大きいイタリック値を小さいほうから順にチェックし、その後で望ましいイタリック値未満の値を大きいほうから順にチェックし、 0 に達するまで続ける。この段階では、正のイタリック値だけがチェックされる。
  3. 一致が見つからない場合、 11deg 以上のオブリーク値を小さいほうから順にチェックし、その後で 11deg 未満のオブリーク値を大きいほうから順にチェックし、 0 に達するまで続ける。この段階では、正のオブリーク値だけがチェックされる。
    
    オブリークより normal を優先する閾値は、平均角度より低い値にすべきである。
  4. それでも一致が見つからない場合、 0 以下のイタリック値を大きいほうから順にチェックし、一致が見つかるまで続ける。
  5. それでも一致が見つからない場合、 0deg 以下のオブリーク値を大きいほうから順にチェックし、一致が見つかるまで続ける。
    
    前の例と同様に、要素に "font-style: italic" が指定されている場合の概念的な距離グラフは次のとおりである：
    
    このとおり、ファミリー全体で最小のイタリック値を含むのはフォント D であるため、このアルゴリズムではフォント D が選択される。ただし、フォント D が除外されている場合にはフォント E が次に距離の最小なフォントとなり、選択される。 E が除外されている場合には C が選択される。 C が除外されている場合、フォント B はただちには選択されず、まずオブリーク値が検討され、オブリーク値が選択される可能性がある。しかし、どのオブリーク値も選択されない場合はフォント B が選択され、その次にフォント A が続く。
  font-style の値が oblique で、要求された角度が 11deg 以上の場合：
  1. マッチング集合内に、 oblique の値を含むオブリーク値を持つフェイスがある場合、望ましいオブリーク値を含まないオブリーク値を持つフェイスはマッチング集合から除外される。
  2. そうでない場合、望ましいオブリーク値より大きいオブリーク値を小さいほうから順にチェックし、 0 に達するまで続け、その後で望ましいオブリーク値未満の値を大きいほうから順にチェックする。この段階では、正のオブリーク値だけがチェックされる。
  3. slnt 軸を持つ可変フォントについては、指定されたオブリーク値を slnt 値として設定することでマッチを生成する。そうでなく、かつ font-synthesis-style が auto の値を持つ場合、幾何学的なシアリングによって指定されたオブリーク値を再現することでフォールバックマッチを生成する。
  4. それでも一致が見つからない場合、 1 以上のイタリック値を小さいほうから順にチェックし、 0 に達するまで続け、その後で 1 を超えるイタリック値を大きいほうから順にチェックする。この段階では、正のイタリック値だけがチェックされる。
  5. それでも一致が見つからない場合、 0deg 以下のオブリーク値を大きいほうから順にチェックし、一致が見つかるまで続ける。
  6. それでも一致が見つからない場合、 0 以下のイタリック値を大きいほうから順にチェックし、一致が見つかるまで続ける。
    
    前の例と同様に、要素に "font-style: oblique 40deg" が指定されている場合の概念的な距離グラフは次のとおりである：
    
    このとおり、ファミリー全体で最小のオブリーク値を含むのはフォント D であるため、このアルゴリズムではフォント D が選択される。ただし、フォント D が除外されている場合にはフォント E が次に距離の最小なフォントとなり、選択される。 E が除外されている場合には C が選択される。 C が��外されている場合、フォント B はただちには選択されず、まずイタリック値が検討され、イタリック値が選択される可能性がある。しかし、どのイタリック値も選択されない場合はフォント B が選択され、その次にフォント A が続く。
  font-style の値が oblique で、要求された角度が 0deg 以上 11deg 未満の場合：
  1. マッチング集合内に、 oblique の値を含むオブリーク値を持つフェイスがある場合、望ましいオブリーク値を含まないオブリーク値を持つフェイスはマッチング集合から除外される。
  2. そうでない場合、望ましいオブリーク値未満の値を大きいほうから順にチェックし、 0 に達するまで続け、その後で望ましいオブリーク値より大きい値を小さいほうから順にチェックする。この段階では、正のオブリーク値だけがチェックされる。
  3. slnt 軸を持つ可変フォントについては、指定されたオブリーク値を slnt 値として設定することでマッチを生成する。そうでなく、かつ font-synthesis-style が auto の値を持つ場合、幾何学的なシアリングによって指定されたオブリーク値を再現することでフォールバックマッチを生成する。
  4. それでも一致が見つからない場合、 1 未満のイタリック値を大きいほうから順にチェックし、 0 に達するまで続け、その後で 1 を超えるイタリック値を小さいほうから順にチェックする。この段階では、正のイタリック値だけがチェックされる。
  5. それでも一致が見つからない場合、 0deg 以下のオブリーク値を大きいほうから順にチェックし、一致が見つかるまで続ける。
  6. それでも一致が見つからない場合、 0 以下のイタリック値を大きいほうから順にチェックし、一致が見つかるまで続ける。
  前の例と同様に、要素に "font-style: oblique 13deg" が指定されている場合の概念的な距離グラフは次のとおりである：
  
  このとおり、ファミリー全体で最小のオブリーク値を含むのはフォント D であるため、このアルゴリズムではフォント D が選択される。ただし、フォント D が除外されている場合にはフォント C が次に距離の最小なフォントとなり、選択される。 C が除外されている場合には E が選択される。 E が除外されている場合、フォント B はただちには選択されず、まずイタリック値が検討され、イタリック値が選択される可能性がある。しかし、どのイタリック値も選択されない場合はフォント B が選択され、その次にフォント A が続く。
  
  font-style の値が oblique で、要求された角度が 0deg 未満 -11deg 超のときは、上記の手順を値の符号を反転し、探索方向も反転して適用する。 font-style の値が oblique で、要求された角度が -11deg 以下のときは、上記の手順を値の符号を反転し、探索方向も反転して適用する。
  
  font-style の値が normal の場合：
  1. まず、0 以上のオブリーク値を小さいほうから順にチェックする。
  2. 一致が見つからない場合、 0 以上のイタリック値を小さいほうから順にチェックする。
  3. 一致が見つからない場合、 0deg 未満のオブリーク値を大きいほうから順にチェックし、一致が見つかるまで続ける。
  4. 一致が見つからない場合、 0 未満のイタリック値を大きいほうから順にチェックし、一致が見つかるまで続ける。
  前の例と同様に、要素に "font-style: normal" が指定されている場合の概念的な距離グラフは次のとおりである：
  
  このとおり、ファミリー全体で最小のオブリーク値を含むのはフォント C であるため、このアルゴリズムではフォント C が選択される。ただし、フォント C が除外されている場合にはフォント B はただちには選択されず、まずイタリック値が検討され、イタリック値が選択される可能性がある。しかし、どのイタリック値も選択されない場合はフォント B が選択され、その次にフォント A が続く。
  
  上記の探索でオブリーク角が見つかった場合、そのオブリーク角を含まないフェイスはすべてマッチング集合から除外される。そうでなくイタリック値が見つかっ��場合には、そのイタリック値を含まないフェイスがマッチング集合から除外される。
  
  ユーザーエージェントは、イタリックとオブリークを区別しなくてもよい。そのようなユーザーエージェントでは、上記の font-style のマッチング手順は、イタリック値とオブリーク角の両方を共通の尺度にマッピングすることで行われる。このマッピングの正確な内容は未定義だが、イタリック値 1 はオブリーク角 11deg と同じ値にマッピングされなければならない。 @font-face 規則で定義されたフォントファミリー内では、イタリックとオブリークのフェイスは font-style 記述子の値によって区別されなければならない。
  
  イタリックやオブリークフェイスを持たないファミリーについては、ユーザーエージェントは、 font-synthesis プロパティの値が許す場合に限り、合成オブリークフェイスを生成してもよい。
3. 次に font-weight を照合する。フォントがウェイトの強さの変化という概念を持たない場合、そのウェイトはプロパティ定義の一覧に従ってマッピングされる。相対ウェイト bolder/lighter が用いられている場合、実効のウェイトは、 font-weight プロパティ定義に記述されたとおり、継承されたウェイト値に基づいて計算される。上記の手順の後、マッチング集合に font-weight の望ましい値を含むウェイト値を持つフェイスがある場合、望ましい font-weight 値を含まないフェイスはマッチング集合から除外される。望ましい値を含むフェイスが 1 つもない場合は、次の規則に従ってウェイト値を選択する：
  - 望ましいウェイトが 400 から 500 の間（両端を含む）の場合、ターゲットウェイト以上の値を小さいほうから順にチェックし、 500 に達したらそれもチェックする。その後、ターゲットウェイト未満の値を大きいほうから順にチェックし、最後に 500 より大きいウェイトをチェックし、一致が見つかるまで続ける。
  - 望ましいウェイトが 400 未満の場合、望ましいウェイト以下の値を大きいほうから順にチェックし、その後で望ましいウェイトより大きい値を小さいほうから順にチェックし、一致が見つかるまで続ける。
  - 望ましいウェイトが 500 より大きい場合、望ましいウェイト以上の値を小さいほうから順にチェックし、その後で望ましいウェイト未満の値を大きいほうから順にチェックし、一致が見つかるまで続ける。
    Tests
    - font-weight-search-direction.html (live test) (source)
  前の例と同様に、要素に "font-weight: 400" が指定されている場合の概念的な距離グラフは次のとおりである：
  
  このとおり、ファミリー全体で最小の距離を含むのはフォント B であるため、このアルゴリズムではフォント B が選択される。ただし、フォント B が除外されている場合にはフォント C が次に距離の最小なフォントとなり、選択される。 C が除外されている場合には D が選択され、その後に A、さらに E が続く。
  
  前の例と同様に、要素に "font-weight: 450" が指定されている場合の概念的な距離グラフは次のとおりである：
  
  このとおり、ファミリー全体で最小の距離を含むのはフォント C であるため、このアルゴリズムではフォント C が選択される。ただし、フォント C が除外されている場合にはフォント D が次に距離の最小なフォントとなり、選択される。 D も除外されている場合には B が選択され、その後に A、さらに E が続く。
  
  前の例と同様に、要素に "font-weight: 500" が指定されている場合の概念的な距離グラフは次のとおりである：
  
  このとおり、ファミリー全体で最小の距離を含むのはフォント D であるため、このアルゴリズムではフォント D が選択される。ただし、フォント D が除外されている場合にはフォント B が次に距離の最小なフォントとなり、選択される。 B が除外されている場合には C が選択され、その後 B・A・E の順で続く。
  
  前の例と同様に、要素に "font-weight: 300" が指定されている場合の概念的な距離グラフは次のとおりである：
  
  このとおり、ファミリー全体で最小の距離を含むのはフォント B であるため、このアルゴリズムではフォント B が選択される。ただし、フォント B が除外されている場合にはフォント A が次に距離の最小なフォントとなり、選択される。 A が除外されている場合には C が選択される。
  
  この処理によって最も近いウェイトが決定されたら、そのウェイトを含まないフェイスはマッチング集合から除外される。
  
  Note: [CSS-FONTS-3] と本仕様の間には、 font-weight プロパティのアニメーションに関してわずかな挙動の違いがある。以前は、補間された font-weight の値は最も近い 100 の倍数に丸められ、フォントマッチングアルゴリズムはこの丸められた値に対して実行されていた。本仕様では、フォントマッチングアルゴリズムは任意の値を受け付けるため、丸めは行われない。この小さな挙動の違いは、フォントマッチングアルゴリズムが不連続であることに起因する。
4. 最後に font-size を、 UA 依存の許容誤差の範囲内でマッチさせなければならない。（通常、スケーラブルフォントのサイズはもっとも近い整数ピクセルに丸められ、ビットマップフォントの場合の許容誤差は最大 20% 程度になることがある。）その後の計算、たとえば他のプロパティでの em 値による計算は、指定された値ではなく、実際に使用される font-size の値を基準として行われる。
上記の手順を行っても、マッチング集合に複数のフォントが残ることがある点に注意すること。その場合、ユーザーエージェントはマッチング集合から 1 つのフォントを選択し、以降の処理はそのフォントについて続行しなければならない。どのフォントを選択するかという選択は、ユーザーエージェントや OS プラットフォームごとに異なってもよいが、同一ドキュメント内の 2 つの要素で結果が異なってはならない。
マッチしたフェイスが @font-face 規則で定義されている場合、ユーザーエージェントは単一のフォントを選択するために次の手順を用いなければならない：
1. フォントリソースがまだ読み込まれておらず、 unicode-range 記述子値で定義された文字範囲が対象の文字を含んでいる場合、そのフォントを読み込む。
2. ダウンロード完了後、実効文字マップ (effective character map) が対象の文字をサポートしている場合、そのフォントを選択する。
マッチしたフェイスが複合フェイス (composite face) である場合、ユーザーエージェントは、複合フェイスに含まれる各フェイスに対して、定義された @font-face 規則の逆順で、上記の手順を適用しなければならない。

ダウンロード中は、ユーザーエージェントはフォントがダウンロード完了するまで待つか、代替フォントのメトリクスで 1 度描画し、フォントのダウンロード完了後に再描画のいずれかを行わなければならない。
一致するフェイスが存在しない場合や、マッチしたフェイスが描画対象の文字に対するグリフを含んでいない場合、次のファミリー名が選択され、直前の 3 つのステップを繰り返す。ファミリー内の他のフェイスからグリフを取ってくることはしない。例外として、そのフェイスが対象のグリフをサポートしており、かつ font-synthesis プロパティの値がそれを許す場合には、ユーザーエージェントはオプションとして、既定フェイス (default face) の合成オブリーク版を代用してもよい。たとえば、イタリックフェイスがアラビア文字のグリフをサポートしていない場合には、レギュラーフェイスの合成イタリック版を使用してもよい。
評価すべきフォントファミリーがこれ以上なく、一致するフェイスが 1 つも見つからなかった場合、ユーザーエージェントは描画対象の文字に最もよくマッチするフォントを見つけるために、インストール済みフォントフォールバック (installed font fallback) 手順を実行する。この手順の結果はユーザーエージェントごとに異なり得る。
特定の文字について、どのフォントを用いても表示できない場合、ユーザーエージェントは、文字が表示されてい��いことを何らかの手段で示すべきである。具体的には、欠落グリフの記号的な表現（たとえば Last Resort Font の使用）か、既定フォントの「欠落文字」グリフを表示すべきである。

この処理に対する最適化は、実装がアルゴリズムを厳密に追従したかのように振る舞う限りにおいて認められる。マッチングはよく定義された順序で行われる。これは、利用可能なフォント集合とレンダリング技術が同一であるならば、ユーザーエージェント間で結果ができるだけ一貫するようにするためである。

最初に利用可能なフォント (first available font)とは、フォント相対長（たとえば ex）や、 line-height プロパティの定義などで用いられるもので、 U+0020（スペース）文字が unicode-range によって除外されていない最初のフォントとして定義される。ここでの「最初のフォント」は、 font-family リスト内のフォントファミリー（または 1 つも利用可能でない場合にはユーザーエージェントの既定フォント）に対して決定される。

@font-face 規則ではなく、ファミリー名を直接指定して参照されるインストール済みフォントは、 Unicode 全体をカバーする unicode-range を持つものとして扱われる。

Tests

Note: このフォントに実際にスペース文字のグリフが存在するかどうかは問題ではない。

5.3. クラスターマッチング

テキストに結合記号などが含まれる場合、理想的にはベース文字も記号も同じフォントで描画すべきです。そうすることで記号の位置が正しく決まります。このため、クラスタのフォントマッチングアルゴリズムは単独文字のマッチングよりも専門的です。バリエーションセレクタを含む系列（特定グリフ指定）では、ユーザーエージェントはベース文字のデフォルトグリフを使う前に必ずインストール済みフォントフォールバックで適切なグリフを探します。

結合記号や他の修飾子を含むコードポイント系列はグラフェムクラスタと呼ばれます（詳細は[CSS3TEXT]や [UAX29]参照）。ベース文字bと結合記号c1, c2…の系列からなるクラスタについて、全体のマッチングは次の手順で行います：

フォントリストの各ファミリーについて、前節のスタイル選択ルールでfaceを選ぶ。
1. 系列b + c1 + c2 …の全文字がそのフォントで完全にサポートされていれば、そのフォントをその系列に選択。
2. 複数コードポイント系列が1文字と正規等価で、その文字をフォントがサポートしていれば、系列全体に対してそのフォントを選択し、クラスタ全体に正規等価文字のグリフを用いる。
手順1でフォントが見つからなければ：
1. c1がバリエーションセレクタの場合、システムフォールバックでb + c1全体をサポートするフォントを探す。システムに該当フォントがなければ、b単独文字の通常マッチングで対応し、バリエーションセレクタは無視。注: バリエーションセレクタが2つ以上の系列はエンコーディングエラーとして扱い、後続セレクタは無視すること。[UNICODE]
2. それ以外の場合、ユーザーエージェントは任意でインストール済みフォントフォールバックでクラスタ全体をサポートするフォントを探してもよい。
手順2でもフォントが見つからなければ、手順1でマッチした系列で、完全にサポートされる最長系列を決め、残りの結合記号部分は単独文字用のルールで個別にマッチングを試みる。

5.4. 文字処理に関する課題

CSSのフォントマッチングは常にUnicode文字[UNICODE]を含むテキストランに対して行われるため、レガシーエンコーディングを使う文書はマッチング前に変換済みとみなされます。レガシーエンコーディングとUnicode両方の文字マップを持つフォントの場合、レガシーエンコーディング側の文字マップ内容はフォントマッチング結果に影響してはなりません。

フォントマッチング処理は、テキストランが正規化済みか非正規化か（詳細は[CHARMOD-NORM]参照）を前提としません。フォントは合成済み形式のみをサポートし、基底文字＋結合記号の分解形式をサポートしない場合もあります。著者は、コンテンツが正規化・非正規化のどちらか等も含め、必ず自分のコンテンツに合ったフォント選択を調整すべきです。

特定文字がPrivate-Use Area Unicodeコードポイントの場合、ユーザーエージェントはfont-familyリストで指定された汎用ファミリー以外のファミリーのみをマッチさせなければなりません。 font-familyリスト内のいずれのファミリーにも当該コードポイントのグリフがなければ、ユーザーエージェントはその文字に何らかの欠落グリフ記号を表示しなければならず、そのコードポイントに対してインストール済みフォントフォールバックを試みてはなりません。 U+FFFD（置換文字）のマッチング時、ユーザーエージェントはフォントマッチング処理を省略して直ちに欠落グリフ記号を表示してもよく、フォントマッチングで選ばれるフォントのグリフを表示する義務はありません。

一般的に、あるファミリーのフォントは同じか類似した文字マップを持ちます。ここで説明する処理は、文字マップが大きく異なるfaceを含むファミリーでも対応できるよう設計されています。ただし、このようなファミリーの利用は予期せぬ結果につながる可能性があるため、著者は注意してください。

Tests

6. フォント機能プロパティ

現代のフォント技術は、高度なタイポグラフィや言語固有のフォント機能を多数サポートしています。これらを利用することで、1つのフォントで多様な合字・文脈的/スタイリスティックな代替・タブラー/オールドスタイル数字・スモールキャピタル・自動分数・スワッシュ・言語固有の代替などを提供できます。著者がこれらのフォント機能を制御できるよう、 font-variantプロパティが拡張され、スタイリスティックなフォント機能を制御する一連のプロパティの略記として機能するようになりました。

6.1. グリフ選択と配置

この節は規範的ではありません

ラテン文字表示用のシンプルなフォントは非常に基本的な処理モデルを使います。フォントは各文字をその文字用グリフへマッピングする文字マップを持ちます。文字列内の後続文字のグリフは単純に横に並べて配置されます。 OpenTypeやAAT（Apple Advanced Typography）などの現代フォント形式はより高度な処理モデルを使います。ある文字のグリフは、文字自体のコードポイントだけでなく隣接文字、言語、スクリプト、テキストに有効な機能などに基づいて選択・配置されます。フォント機能は特定スクリプトで必須の場合もあり、デフォルトで有効推奨の場合や著者が任意で使うスタイリスティック機能の場合もあります。フォント選択・配置がテキスト処理全体のどの段階で行われるか（例: テキスト変換・向き・整列など）は、 CSS Text 3 § A Text Processing Order of Operationsで説明されています。

OpenTypeフォントのグリフ処理詳細については、 [WINDOWS-GLYPH-PROC]参照。

スタイリスティックなフォント機能は大きく2カテゴリに分類できます: 周囲文脈に応じてグリフ形状を調整するもの（カーニングや合字機能等）と、スモールキャピタル・下付き/上付き・代替など形状選択に影響するものです。

下記のfont-variantサブプロパティはこれらスタイリスティックなフォント機能制御に使います。特定スクリプト表示に必須な機能（例: アラビア語やインド系言語のOpenType機能等）は制御しません。これらはグリフ選択・配置に影響しますが、フォントマッチングの説明で述べたフォント選択には影響しません（CSS 2.1との互換のため必要な場合を除く）。

UA間で一貫した挙動を保証するため、個々のプロパティに対応するOpenTypeプロパティ設定も併記し、これが規範的です。他フォント形式を使う場合も、 CSSフォント機能プロパティ値を個別機能へマッピングする際の指針としてください。

6.2. 言語固有表示

OpenTypeは言語固有のグリフ選択・配置もサポートしており、言語によって特定の表示挙動が必要な場合に正しく描画できます。多くの言語は同じスクリプトを共有しますが、一部文字の形状が言語ごとに異なる場合があります。例：ロシア語とブルガリア語ではキリル文字の一部形状が異なります。ラテン文字では"fi"が明示的なfi合字（iに点が無い）で描かれるのが一般的ですが、トルコ語など点付きi・点無しiを区別する言語ではこの合字は使わないか、点付きバージョンを使うべきです。

テスト

language-specific-01.html（視覚テスト） (ソース)

以下の例は、スペイン語・イタリア語・フランス語の正書法に見られるスタイリスティックな伝統に基づく言語固有バリエーションを示しています：

要素のコンテンツ言語が文書言語の規則に従って既知である場合、ユーザーエージェントはコンテンツ言語から OpenType 言語システムを推論し、 OpenType フォントを用いてグリフを選択および配置する際にそれを使用することが求められる。書記体系が明示的に指定されている場合には、コンテンツ言語によって暗黙的に示される慣習的なものよりもその指定が優先されなければならない。

OpenType フォントについては、場合によっては使用する OpenType 言語を明示的に宣言する必要がある。たとえば、ある言語のテキストを、別の言語のタイポグラフィ上の慣習に従って表示したい場合や、フォントが特定の言語を明示的にはサポートしていないが、その言語と共通のタイポグラフィ上の慣習を持つ別の言語をサポートしている場合などである。この目的のために使用されるのが font-language-override プロパティである。

6.3. カーニング: font-kerningプロパティ

Name:	font-kerning
Value:	auto \| normal \| none
Initial:	auto
Applies to:	all elements and text
Inherited:	yes
Percentages:	n/a
Computed value:	as specified
Canonical order:	per grammar
Animation type:	discrete

Tests

カーニングとは、グリフ間の字間を文脈に応じて調整することである。このプロパティはメトリックカーニング、すなわちフォント内に含まれる調整データを利用するカーニングを制御する。

auto: カーニングを適用するかどうかをユーザーエージェントの裁量に委ねることを指定する
normal: カーニングを適用することを指定する
none: カーニングを適用しないことを指定する

カーニングデータを含まないフォントでは、このプロパティは視覚的な効果を持たない。 OpenType フォントでのレンダリング時には、 [OPENTYPE] 仕様において、既定でカーニングを有効にすることが推奨されている。カーニングが有効な場合、関連する OpenType カーニング機能が有効化される（横書きの組版モードおよび、縦書きの組版モードにおける横倒し組版では kern 機能、縦組みかつ縦組み組版モードでは vkrn 機能）。ユーザーエージェントは、 OpenType 仕様に詳述されているとおり、 kern フォントテーブル内のデータによってのみカーニングをサポートするフォントにも対応しなければならない。 letter-spacing プロパティが定義されている場合、カーニングによる調整は既定の字間の一部と見なされ、カーニング適用の後でレタースペーシングによる調整が行われる。

auto に設定されている場合、ユーザーエージェントは、カーニングを適用するかどうかを文字サイズ・スクリプト・その他テキスト処理速度に影響する要因など複数の要素に基づいて判断してよい。適切なカーニングを望む作者は、 normal を用いてカーニングを明示的に有効化すべきである。同様に、外観の精密さよりもパフォーマンスを重視するような状況では、カーニングを無効化したいと考える作者もいるだろう。しかし、設計の良いモダンな実装においては、カーニングの使用がテキスト描画速度に大きな影響を与えることは一般的にはない。

6.4. 合字: font-variant-ligaturesプロパティ

Name:	font-variant-ligatures
Value:	normal \| none \| [ `<common-lig-values>` \|\| `<discretionary-lig-values>` \|\| `<historical-lig-values>` \|\| `<contextual-alt-values>` ]
Initial:	normal
Applies to:	all elements and text
Inherited:	yes
Percentages:	n/a
Computed value:	as specified
Canonical order:	per grammar
Animation type:	discrete

Tests

合字およびコンテクスチュアルフォームは、グリフを組み合わせてより調和した字形を生成するための方法である。

<common-lig-values>        = [ common-ligatures | no-common-ligatures ]

<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]

<historical-lig-values>    = [ historical-ligatures | no-historical-ligatures ]

<contextual-alt-values>    = [ contextual | no-contextual ]

各値の意味は次のとおりである：

normal: normal の値は、既定の一般的な機能が有効になることを指定する。詳細は次節で詳述される。 OpenType フォントでは、一般的な合字およびコンテクスチュアルフォームは既定で有効であり、任意合字および歴史的合字は既定では無効である。
none: このプロパティの対象となるすべての種類の合字およびコンテクスチュアルフォームを明示的に無効にすることを指定する。合字が不要とみなされる状況では、これによりテキスト描画速度が向上する可能性がある。
common-ligatures: 一般的な合字の表示を有効にする（OpenType 機能：liga, clig）。 OpenType フォントでは、一般的な合字は既定で有効である。
no-common-ligatures: 一般的な合字の表示を無効にする（OpenType 機能：liga, clig）。
discretionary-ligatures: 任意合字の表示を有効にする（OpenType 機能：dlig）。どの合字が任意／オプションと見なされるかはタイプデザイナーが決定するため、作者は特定フォントの文書を参照して、どの合字が任意として扱われるかを確認する必要がある。
no-discretionary-ligatures: 任意合字の表示を無効にする（OpenType 機能：dlig）。
historical-ligatures: 歴史的合字の表示を有効にする（OpenType 機能：hlig）。
no-historical-ligatures: 歴史的合字の表示を無効にする（OpenType 機能：hlig）。
contextual: コンテクスチュアル代替字形の表示を有効にする（OpenType 機能：calt）。これは厳密には合字機能ではないが、合字と同様に、周囲の文脈と調和するようにグリフ形を整えるために一般的に用いられる。 OpenType フォントでは、この機能は既定で有効である。
no-contextual: コンテクスチュアル代替字形の表示を無効にする（OpenType 機能：calt）。

必須合字は、複雑スクリプトの文字を正しくレンダリングするために必要なものであり、上記の設定（none を含む）の影響を受けない（OpenType 機能：rlig）。

6.5. 下付き・上付きの形: font-variant-positionプロパティ

Name:	font-variant-position
Value:	normal \| sub \| super
Initial:	normal
Applies to:	all elements and text
Inherited:	yes
Percentages:	n/a
Computed value:	as specified
Canonical order:	per grammar
Animation type:	discrete

Tests

このプロパティは、組版用の下付き・上付きグリフを有効にするために用いられる。これらは、既定のグリフと同じ em ボックス内で設計された代替グリフであり、既定のグリフと同じベースライン上にレイアウトされることを意図している。その際、ベースラインの再位置決めやフォントサイズの変更は行われない。これらは周囲のテキストに合うように明示的に設計されており、行の高さに影響を与えることなく可読性を高めることができる。

comparison between real subscript glyphs and synthesized ones

下付きグリフ（上）と、典型的な合成下付き（下）の比較

各値の意味は次のとおりである：

normal: 以下に挙げる機能はいずれも有効にしない。
sub: 下付きバリアントの表示を有効にする（OpenType 機能：subs）。
super: 上付きバリアントの表示を有効にする（OpenType 機能：sups）。

下付きおよび上付きには意味的な性質があるため、特定の連続したテキストランに対する値が sub または super のいずれかである場合、そのラン内のすべての文字に対してバリアントグリフが利用可能でないときには、この機能を適用しない場合に使用されるグリフを縮小した形ですべての文字のグリフを合成しなければならない。これは、バリアントグリフと合成グリフが混在して位置が揃わなくなることを避けるため、ラン単位で行われる。指定された文字に対して下付きまたは上付きグリフを欠く OpenType フォントの場合、ユーザーエージェントは適切な下付きおよび上付きグリフを必ず合成しなければならない。

alternate superscripts vs. glyphs synthesized using superscript metrics

上付き代替グリフ（左）、合成された上付きグリフ（中央）、そしてその 2 つが誤って混在した例（右）

テキスト装飾が、上付きまたは下付きグリフを含むテキストランにのみ適用される状況では、装飾の位置に関する問題を避けるため合成グリフを用いてもよい。

これまでユーザーエージェントは、 sub 要素および sup 要素に対して、 font-size と vertical-align を用いて下付きおよび上付きのシミュレーションを行ってきた。下付きおよび上付きの後方互換な定義方法を提供するため、作者は条件付き規則 [CSS3-CONDITIONAL] を用いることが推奨される。これにより、古いユーザーエージェントでも旧来の仕組みによって下付きおよび上付きが表示される。

font-size: smaller がこれらの要素に対して用いられることが多いため、下付きおよび上付きテキストに適用される実効スケーリング係数は、サイズによって異なる。大きなテキストでは、フォントサイズは 3 分の 1 ほど小さくされることが多いが、小さなテキストサイズでは縮小率がかなり小さくなる場合もある。これにより、小さなテキストサイズの要素内でも下付きおよび上付きが読みやすく保たれる。ユーザーエージェントは、下付き・上付きグリフを合成する方法を決定する際、この点を考慮すべきである。

OpenType フォント形式では、下付きおよび上付きメトリクスは OS/2 テーブル [OPENTYPE] 内で定義されているが、実際には必ずしも正確ではないため、下付きおよび上付きグリフを合成する際にそれらに依拠することはできない。

作者は、フォントが通常、フォントでサポートされているすべての文字に対して下付きおよび上付きグリフを提供しているわけではない点にも注意すべきである。たとえば、ラテン数字に対する下付きおよび上付きグリフは用意されていることが多い一方で、句読点や文字に対するグリフは提供されていないことが多い。このプロパティのために定義された合成フォールバック規則は、下付きおよび上付きが常に表示されるようにすることを目指しているが、使用されるフォントが下付きや上付きに適した代替グリフをすべての文字について提供していない場合には、その見た目が作者の期待と一致しないことがあり得る。

このプロパティは累積��ではない。下付きまたは上付き内の要素に対してこのプロパティを適用しても、下付きや上付きグリフの配置がさらに入れ子になることはない。このプロパティの値が sub または super であるテキストラン内に含まれる画像は、値が normal である場合とまったく同じ��うに描画される。

これらの制約があるため、 font-variant-position をユーザーエージェントスタイルシート内で使用することは推奨されない。作者は、下付きや上付きが指定されたフォントによってサポートされる限られた文字集合のみを含む場合にこのプロパティを使用すべきである。

バリアントグリフは、既定のグリフが使用するものと同じベースラインを用いる。ベースライン方向での位置の移動は行われないため、バリアントグリフの使用はインラインボックスの高さにも行ボックスの高さにも影響しない。これにより、上付きおよび下付きバリアントは、行送りを一定に保つことが重要な、たとえば多段組レイアウトなどの状況に理想的である。

sub 要素に対する典型的なユーザーエージェント既定スタイル：

sub {  vertical-align: sub;
  font-size: smaller;
  line-height: normal;
}

古いユーザーエージェントでも下付きが表示されるようにしつつ、組版用の下付き文字を指定するために font-variant-position を使用する例：

@supports ( font-variant-position: sub ) {  sub {
    vertical-align: baseline;
    font-size: 100%;
    line-height: inherit;
    font-variant-position: sub;
  }
}

font-variant-position プロパティをサポートするユーザーエージェントは、下付きバリアントグリフを選択し、ベースラインやフォントサイズを調整することなくこれを描画する。古いユーザーエージェントは font-variant-position プロパティ定義を無視し、下付きに対する標準的な既定値を使用する。

6.6. キャピタライゼーション: font-variant-caps プロパティ

Name:	font-variant-caps
Value:	normal \| small-caps \| all-small-caps \| petite-caps \| all-petite-caps \| unicase \| titling-caps
Initial:	normal
Applies to:	all elements and text
Inherited:	yes
Percentages:	n/a
Computed value:	as specified
Canonical order:	per grammar
Animation type:	discrete

Tests

このプロパティは、スモールキャップやプチキャップ、タイトル用などに使われる代替グリフの選択を可能にする。これらのグリフは、周囲の通常のグリフとよくなじむように特別に設計されており、単にテキストを縮小して対応した場合に損なわれがちなウェイトと可読性を保つことができる。

各値の意味は次のとおりである：

normal: 以下に挙げる機能はいずれも有効にしない。
small-caps: スモールキャップの表示を有効にする（OpenType 機能：smcp）。スモールキャップグリフは一般に、大文字の字形を用いながら、小文字と同じ大きさに縮小して作られている。
all-small-caps: 大文字・小文字の両方に対してスモールキャップの表示を有効にする（OpenType 機能：c2sc, smcp）。
petite-caps: プチキャップの表示を有効にする（OpenType 機能：pcap）。
all-petite-caps: 大文字・小文字の両方に対してプチキャップの表示を有効にする（OpenType 機能：c2pc, pcap）。
unicase: 大文字にはスモールキャップ、小文字には通常の字形という混合表示を有効にする（OpenType 機能：unic）。
titling-caps: タイトル用大文字の表示を有効にする（OpenType 機能：titl）。大文字グリフはしばしば、小文字と組み合わせて用いることを前提に設計されている。それらを全大文字のタイトルシーケンスで用いると、強すぎる印象になることがある。タイトル用大文字は、まさにこの状況向けに設計されたものである。

これらのグリフが利用可能かどうかは、当該フォントの機能リスト内で対応する機能が定義されているかどうかに依存する。ユーザーエージェントは、スクリプトごとにこれを判断してもよいが、文字ごとに判断することは明示的に避けるべきである。

フォントによっては、このプロパティで説明されている機能の一部のみ、あるいはどれもサポートしていない場合もある。 CSS 2.1 との後方互換性のため、 small-caps または all-small-caps が指定されているにもかかわらず、そのフォントにスモールキャップグリフが存在しない場合、ユーザーエージェントはスモールキャップフォントをシミュレートすべきである。たとえば通常のフォントを用い、小文字のグリフを大文字グリフを縮小したものに置き換える（all-small-caps の場合は、大文字・小文字の両方のグリフを置き換える）。

合成スモールキャップと実フォントのスモールキャップの比較

font-feature-settings プロパティも、（CSS Fonts 3 とは異なり）スモールキャップフォントをシミュレートするかどうかの判断に影響を及ぼす。

#example1 { font-variant-caps: small-caps; }#example2 { font-variant-caps: small-caps; font-feature-settings: 'smcp' 0; }

スモールキャップをサポートしていないフォントでは、 #example1 と #example2 のどちらも合成スモールキャップで描画されるべきである。一方、スモールキャップをサポートしているフォントでは、 #example1 はネイティブのスモールキャップで描画される一方、 #example2 はネイティブ・合成いずれのスモールキャップも用いずに描画されるべきである。

周囲のテキストとの調和を図るため、これらの機能が有効な場合に大文字小文字を持たない文字に対する代替グリフをフォント側が提供していることもあるが、ユーザーエージェントがスモールキャップをシミュレートする際には、大文字小文字を持たないコードポイントについて代替字形をシミュレートしてはならない。

caseless characters with small-caps, all-small-caps enabled

small-caps / all-small-caps 有効時の大文字小文字を持たない文字の表示例

petite-caps または all-petite-caps が対応機能をサポートしていないフォントに指定された場合、このプロパティはそれぞれ small-caps または all-small-caps が指定されたかのように振る舞う。 unicase が対応機能をサポートしていないフォントに指定された場合、このプロパティは、小文字化された大文字だけに small-caps が適用されたかのように振る舞う。 titling-caps がこの機能をサポートしないフォントと共に指定された場合、このプロパティは視覚的な効果を持たない。合成スモールキャップグリフが用いられる場合、大文字・小文字を区別しないスクリプトについては、 small-caps・all-small-caps・petite-caps・ all-petite-caps・unicase のいずれも視覚的な効果を持たない。

ケーシング変換によってスモールキャップをシミュレートする場合、そのケーシング変換は text-transform プロパティに対して用いられるものと一致していなければならない。

最後の手段として、スモールキャップフォント内のグリフを通常フォントの縮小されていない大文字グリフで置き換え、テキスト全体を大文字表記として見せることもできる。

using all-small-caps in acronym-laden text

略語の多いテキストでスモールキャップを用いて可読性を向上させた例

引用文をイタリック体で表示し、先頭行のみスモールキャップにする例：

blockquote            { font-style: italic; }blockquote:first-line { font-variant: small-caps; }

<blockquote>I’ll be honor-bound to slap them like a haddock.</blockquote>

6.7. 数字書式: font-variant-numericプロパティ

名前:	font-variant-numeric
値:	normal \| [ <numeric-figure-values> \|\| <numeric-spacing-values> \|\| <numeric-fraction-values> \|\| ordinal \|\| slashed-zero ]
初期値:	normal
適用対象:	すべての要素およびテキスト
継承:	yes
パーセンテージ:	n/a
算出値:	指定どおり
正準順序:	文法による
アニメーション型:	離散値

Tests

数字表��の制御を指定する。次の例では、対応するフォントにおいてこれらの値の一部を組み合わせることで表形式データのレンダリングにどのような影響が出るかを示す。通常の段落テキストの中ではプロポーショナル数字を使用しつつ、桁をそろえる必要のある数値の列にはタブラー数字を使用して、列が正しく揃うようにしている:

数字スタイルの使用例

取り得る組み合わせ:

<numeric-figure-values>   = [ lining-nums | oldstyle-nums ]

<numeric-spacing-values>  = [ proportional-nums | tabular-nums ]

<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]

各個別の値は次の意味を持つ:

normal: 以下に挙げるいずれの機能も有効にしない。
lining-nums: ライニング数字の表示を有効にする (OpenType 機能: lnum)。
oldstyle-nums: オールドスタイル数字の表示を有効にする (OpenType 機能: onum)。
proportional-nums: プロポーショナル数字の表示を有効にする (OpenType 機能: pnum)。
tabular-nums: タブラー数字の表示を有効にする (OpenType 機能: tnum)。
diagonal-fractions: ライニング斜分数の表示を有効にする (OpenType 機能: frac)。
stacked-fractions: ライニング積み上げ分数の表示を有効にする (OpenType 機能: afrc)。
ordinal: 序数に用いられる文字形の表示を有効にする (OpenType 機能: ordn)。
slashed-zero: スラッシュ付きゼロの表示を有効にする (OpenType 機能: zero)。

ordinal の場合、序数の字形は上付き文字と同じであることが多いが、マークアップは異なる。

上付き文字では、バリアントプロパティは上付き文字を含むサブ要素にだけ適用される:

sup { font-variant-position: super; }
x<sup>2</sup>

序数では、バリアントプロパティは接尾辞だけでなく序数全��（またはそれを含む段落）に適用される:

.ordinal { font-variant-numeric: ordinal; }
<span class="ordinal">17th</span>

この場合、「th」だけが序数字形で表示され、数字はそのままの形で保持される。採用されている言語ごとの組版慣習によっては、序数の字形は上付き文字と異なることがある。例えばイタリア語では、序数字形のデザインに下線を含めることがある。

自動分数とオールドスタイル数字を使ってレンダリングした、シンプルなフランクステーキのマリネレシピ:

.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; }
<h4>Steak marinade:</h4>
<ul>
  <li><span class="amount">2</span> tbsp olive oil</li>
  <li><span class="amount">1</span> tbsp lemon juice</li>
  <li><span class="amount">1</span> tbsp soy sauce</li>
  <li><span class="amount">1 1/2</span> tbsp dry minced onion</li>
  <li><span class="amount">2 1/2</span> tsp italian seasoning</li>
  <li>Salt &amp; pepper</li>
</ul>

<p>Mix the meat with the marinade
and let it sit covered in the refrigerator
for a few hours or overnight.</p>

分数機能は段落全体ではなく値に対してのみ適用される点に注意。フォントはこの機能をしばしば、スラッシュ ('/') 文字の使用に基づく文脈依存ルールとして実装している。そのため、段落レベルのスタイルとして用いるには適していない。

6.8. 代替字形・スワッシュ: font-variant-alternatesプロパティ

名前:	font-variant-alternates
値:	normal \| [ stylistic(<feature-value-name>) \|\| historical-forms \|\| styleset(<feature-value-name>#) \|\| character-variant(<feature-value-name>#) \|\| swash(<feature-value-name>) \|\| ornaments(<feature-value-name>) \|\| annotation(<feature-value-name>) ]
初期値:	normal
適用対象:	すべての要素およびテキスト
継承:	yes
��ーセンテージ:	n/a
算出値:	指定どおり
正準順序:	文法による
アニメーション型:	離散値

Tests

<feature-index> = <integer [0,∞]>

<feature-value-name> = <ident>

任意の文字に対して、フォントはその文字の既定グリフに加えてさまざまな代替グリフを提供できる。このプロパティは、これらの代替グリフの選択を制御する。

以下に挙げる多くのプロパティ値では、利用可能な代替グリフが複数存在する。利用可能な代替の数とそれぞれが何を表すかはフォントごとに異なるため、値の定義ではそれぞれをフォント固有としている。こうした代替の性質がフォント固有であるため、特定のフォントファミリまたはファミリ集合に対して、フォント固有の数値の <feature-index> とカスタムの <feature-value-name> を対応付けて定義するのに @font-feature-values 規則を用いる。そのうえで、このプロパティでその値を指定して特定の代替を選択する:

@font-feature-values Noble Script { @swash { swishy: 1; flowing: 2; } }

p {
  font-family: Noble Script;
  font-variant-alternates: swash(flowing); /* スワッシュ代替 #2 を使用 */
}

特定の <feature-value-name> があるファミリや特定の機能タイプについて定義されていない場合でも、算出値はそれが定義されている場合と同じでなければならない。ただし、こうした未定義の <feature-value-name> 識別子を含むプロパティ値は、グリフ選択の際には無視されなければならない。

/* 次の 2 つのスタイル規則は事実上同じになる */

p { font-variant-alternates: swash(unknown-value); } /* 定義されていない値であり、無視される */
p { font-variant-alternates: normal; }

これにより、特定のフォントファミリ集合に対して値を定義・使用しつつ、フ��ールバックが発生した場合にはフォントファミリ名が異なるために無視されるようにできる。ある値が特定フォントでサポートされる範囲外である場合、その値は無視される。これらの値が汎用フォントファミリに適用されることは決してない。

各個別の値は次の意味を持つ:

normal: 以下に挙げるいずれの機能も有効にしない。
historical-forms: 歴史的字形の表示を有効にする (OpenType 機能: hist)。
stylistic(<feature-value-name>): スタイリスティック代替の表示を有効にする (フォント固有、OpenType 機能: salt <feature-index>)。
styleset(<feature-value-name>#): スタイリスティックセットでの表示を有効にする (フォント固有、OpenType 機能: ss<feature-index>。 OpenType では現在、ss01 から ss20 までが定義されている。)
character-variant(<feature-value-name>#): 特定の文字バリアントの表示を有効にする (フォント固有、OpenType 機能: cv<feature-index>。 OpenType では現在、cv01 から cv99 までが定義されている。)
swash(<feature-value-name>): スワッシュグリフの表示を有効にする (フォント固有、OpenType 機能: swsh <feature-index>, cswh <feature-index>)。
ornaments(<feature-value-name>): フォントに用意されている場合、既定グリフを装飾記号に置き換える (フォント固有、OpenType 機能: ornm <feature-index>)。一部のフォントでは、広範な文字集��に対して装飾記号グリフを代替として提供している場合がある。しかし任意の文字（例えば英数字）を装飾記号として表示するのは、データのセマンティクスを損ねるため望ましくない。フォントデザイナには、すべての装飾記号（Unicode の Dingbats ブロック等で明示的に符号化されたものを除き）を箇条書き記号 (U+2022) の代替として符号化し、著者が ornaments() を用いて望むグリフを選択できるようにすることを推奨する。
annotation(<feature-value-name>): 代替注釈字形の表示を有効にする (フォント固有、OpenType 機能: nalt <feature-index>)。

6.9. フォント固有の代替定義: @font-feature-values 規則

上に挙げた font-variant-alternates の取り得る値のうちいくつかはフォント固有とラベル付けされている。フォントはその機能に対して 1 つのグリフだけでなく、複数の候補グリフバリアントを定義でき、それぞれに数値インデックスを関連付けてどれを有効にするか選択できるようにしている。

これらの数値インデックスは書体ごとに固有であり、あるフォントフェイスの swsh 1 機能は大文字 Q のスワッシュ版を有効にする一方で、別のフォントフェイスでは & のスワッシュ版を有効にするかもしれない。そのため、font-feature-settings でインデックスを指定するには、著者は要素でどのフォントが使われるかを 正確に 把握している必要がある。（フォントフォールバックにより別のフォントが選択されるなどして）これを誤ると、意図とはまったく異なる、望ましくない機能を有効にしてしまう可能性がある！また、異なるフォントを持つ要素に対して類似の機能を簡単に有効にすることもできない。それぞれについて、望む機能に対応する正しい数値インデックスを用いて、別々の font-feature-settings の値を個別に設定しなければならない。

この問題を解決するために、 @font-feature-values 規則では、著者がフォントフェイスごとに特定の機能インデックスに対して人間にとって分かりやすい名前を割り当てられるようにしている。こうした分かりやすい名前を用いれば、著者は使用中のフォントにかかわらず（その名前をすべてのフォントに定義していれば）類似の機能を簡単に有効にでき、無関係な機能を誤って有効にしてしまう心配もなくなる（その名前が定義されていないフォントでは何も起きないだけである）。

共通の名前付き値を使うことで、著者は単一のスタイル規則で基本となるセレクタがフォントごとに異なるフォント集合を扱えるようになる。次の例でどちらかのフォントが見つかれば、囲み数字グリフが使用される:

@font-feature-values Otaru Kisa {
  @annotation { circled: 1; black-boxed: 3; }
}
@font-feature-values Taisho Gothic {
  @annotation { boxed: 1; circled: 4; }
}

h3.title {
  /* circled 形式は両方のフォントで定義されている */
  font-family: Otaru Kisa, Taisho Gothic;
  font-variant: annotation(circled);
}

@font-feature-values を使ってどちらかのフォントについて「circled」形式を明示的に有効にしようとすると、著者はどのフォントが使われるかを 確実に 把握していなければならない。「Otaru Kisa」が使われると想定して font-feature-settings: "nalt" 1; と書いた場合、 Otaru Kisa では「circled」文字が有効になるが、システムが Taisho Gothic にフォールバックした場合には、 Taisho Gothic では nalt 1 に boxed 文字を関連付けているため、 boxed 文字が有効になってしまう！

6.9.1. 基本構文

@font-feature-values 規則の前文（prelude）には、フォントファミリ名のリストが含まれ、その後に複数の feature value blocks と呼ばれる、特殊な種類の従属 at-規則を含むブロックが続く。各 feature value block には宣言が含まれ、著者が選んだ人間にとって分かりやすい名前（たとえば "flowing"）を、対応する機能のインデックスに対応付ける。

各 font feature value は、対応する font-variant-alternates プロパティの値と同じ意味を持つ。

@font-feature-values = @font-feature-values <family-name># { <declaration-rule-list> }

<font-feature-value-type> = <@stylistic> | <@historical-forms> | <@styleset> | <@character-variant>
  | <@swash> | <@ornaments> | <@annotation>

@stylistic = @stylistic { <declaration-list> }
@historical-forms = @historical-forms { <declaration-list> }
@styleset = @styleset { <declaration-list> }
@character-variant = @character-variant { <declaration-list> }
@swash = @swash { <declaration-list> }
@ornaments = @ornaments { <declaration-list> }
@annotation = @annotation { <declaration-list> }

Tests

@font-feature-values の前文は、 font-family プロパティの <family-name> の定義に合致するフォントファミリ名の、カンマ区切りリストである。これは、名前付きフォントファミリのみが許可されることを意味する。フォントファミリのリストに汎用フォントやシステムフォントを含める規則は構文エラーとなる。ただし、ユーザーエージェントが汎用フォントを特定の名前付きフォント（例: Helvetica）として定義している場合は、そのファミリ名に関連付けられた設定が使用される。 <family-name> リスト内で構文エラーが発生した場合、その @font-feature-values 規則全体は無効となり、無視されなければならない。

@font-feature-values ブロックはその内容として <declaration-rule-list> を受け取る。このリスト項目は次のいずれかである:

at-規則で、その名前が <font-feature-value-type> の at-keyword トークンのいずれかであるもの

または

font-display 記述子。

同じ <font-feature-value-type> を 2 回以上指定しても構文としては有効であり、その内容はカスケードにより統合される。各 feature value block は宣言のリスト、すなわち font feature value declarations を受け取る。このとき宣言名は任意の CSS 識別子でよく、値は 1 つ以上の非負の <integer> のリストでなければならない。

feature value blocks は任意の宣言名を受け付ける。これらの名前は標準 CSS の構文規則に従って識別子でなければならず、大文字小文字を区別する（したがって、foo: 1; と FOO: 2 は 2 つの異なる機能を定義する）。各宣言の値は文法 <integer [0,∞]>+ に一致しなければならず、そうでない場合、その宣言は無効となり無視される。

Note: 各機能名は、単一の feature value block 内でのみ一意である。異なる feature value blocks 間や、別々の @font-feature-values 規則内の同じ種類の feature value blocks 間では、名前を再利用しても衝突しない。

<family-name> が @font-feature-values の前文に現れるたびに、各 font feature value declaration は（ファミリ名, 機能ブロック名, 宣言名）というタプルと、宣言の値から得られる 1 つ以上の整数のリストとの対応付けを定義する。同じタプルが文書中で複数回現れた場合（たとえば 1 つのブロック内に複数回書かれている場合など）、最後に定義されたものが使用される。

たとえば、次の例はいずれも、まったく同じ集合のフォント機能値を定義している:

/* Default */
@font-feature-values foo {
  @swash { pretty: 1; cool: 2; }
}

/* Repeated declaration names */
@font-feature-values foo {
  @swash { pretty: 0; pretty: 1; cool: 2; }
}

/* Multiple blocks of the same type */
@font-feature-values foo {
  @swash { pretty: 1; }
  @swash { cool: 2; }
}

/* Multiple rules for the same family */
@font-feature-values foo {
  @swash { pretty: 1; }
}
@font-feature-values foo {
  @swash { cool: 2; }
}

font feature value declaration 内の構文エラーは、その宣言を無効として無視させるが、それが含まれている font feature value block 自体を無効にはしない。 @font-feature-values ブロック内の未知の at-規則（許可された at-keyword の事前定義リストのいずれも使っていないもの）は、その at-規則を無効として無視させるが、 @font-feature-values 規則自体を無効にはしない。

構文エラー処理を考慮す��と同等になる規則:

@font-feature-values Bongo {
  @swash { ornate: 1; }
  annotation { boxed: 4; } /* 本来は @annotation であるべき！ */
  @swash { double-loops: 1; flowing: -1; } /* 負の値 */
  @ornaments ; /* 不完全な定義 */
  @styleset { double-W: 14; sharp-terminals: 16 1 } /* ; が欠落 */
  redrum  /* たまたま残った編集ミス */
}

上の例は次のものと同等である:

@font-feature-values Bongo {
  @swash { ornate: 1; }
  @swash { double-loops: 1; }
  @styleset { double-W: 14; sharp-terminals: 16 1; }
}

あるファミリに対して複数の @font-feature-values 規則が定義されている場合、その結果としての値の定義は、それらの規則に含まれる定義の和集合となる。これにより、特定のフォントファミリについてサイト全体でグローバルに名前付き値の集合を定義しつつ、ページごとに特有の追加を行うことができる。

サイト全体とページ単位の両方の機能値を使用する例:

site.css:

@font-feature-values Mercury Serif {
  @styleset {
    stacked-g: 3; /* g, a の「二階建て」バージョン */
    stacked-a: 4;
  }
}

page.css:

@font-feature-values Mercury Serif {
  @styleset {
  geometric-m: 7; /* m の代替バージョン */
  }
}

body {
  font-family: Mercury Serif, serif;

  /* stacked g と代替 m の両方を有効化 */
  font-variant-alternates: styleset(stacked-g, geometric-m);
}

6.9.2. 複数値機能値定義

ほとんどのフォント固有の機能値は、 font-variant-alternates プロパティにおいて 1 つの値（例: 機能を有効にする swash()）を取る。

@font-feature-values Jupiter Serif {  @swash {
    swishy: 5;     /* ss05 = 1 を意味する */
    swirly: 2;     /* ss02 = 1 を意味する */
  }
}

character-variant() のプロパティ値と @character-variant 記述子は 2 つの値を許可し、 1 つ目の値で機能を有効にし、2 つ目の値でその機能に与える値を指定する。

@font-feature-values MM Greek {  @character-variant { alpha-2: 1 2; }   /* cv01 = 2 を意味する */
  @character-variant { beta-3: 2 3; }    /* cv02 = 3 を意味する */
}

styleset() のプロパティ値と @styleset 規則では、複数の値が有効にするスタイルセットを示す。 1 から 99 までの値は OpenType 機能 ss01 から ss99 を有効にする。ただし、OpenType 標準で正式に定義されているのは ss01 から ss20 までである。 OpenType フォントにおいて、99 より大きい値や 0 の値は構文エラーにはならないが、どの OpenType 機能も有効にしない。

@font-feature-values Mars Serif {  @styleset {
    alt-g: 1;        /* ss01 = 1 を意味する */
    curly-quotes: 3; /* ss03 = 1 を意味する */
    code: 4 5;       /* ss04 = 1, ss05 = 1 を意味する */
  }

  @styleset {
    dumb: 125;        /* 99 より大きいため無視される */
  }

  @swash {
    swishy: 3 5;     /* swash に 1 つより多い値があるため構文エラー */
  }
}

p.codeblock {
  /* ss03 = 1, ss04 = 1, ss05 = 1 を意味する */
  font-variant-alternates: styleset(curly-quotes, code);
}

<@character-variant> では、 1 から 99 までの単一の値は OpenType 機能 cv01 から cv99 の有効化を示す。 OpenType フォントにおいて、99 より大きい値や 0 の値は無視されるが、構文エラーにはならず、どの OpenType 機能も有効にしない。 2 つの値が指定された場合、 1 つ目の値が使用する機能を示し、 2 つ目の値がその機能に渡される値を示す。ある名前に 2 つを超える値が割り当てられた場合、構文エラーが発生し、その機能値定義全体が無視される。

@font-feature-values MM Greek {  @character-variant { alpha-2: 1 2; }   /* cv01 = 2 を意味する */
  @character-variant { beta-3: 2 3; }    /* cv02 = 3 を意味する */
  @character-variant { epsilon: 5 3 6; } /* 2 つを超える値のため構文エラー、この定義は無視される */
  @character-variant { gamma: 12; }      /* cv12 = 1 を意味する */
  @character-variant { zeta:   20 3; }   /* cv20 = 3 を意味する */
  @character-variant { zeta-2: 20 2; }   /* cv20 = 2 を意味する */
  @character-variant { silly: 105; }     /* 99 より大きいため無視される */
  @character-variant { dumb: 323 3; }    /* 99 より大きいため無視される */
}

#title {
  /* 第 3 の代替 beta と第 1 の代替 gamma を使用 */
  font-variant-alternates: character-variant(beta-3, gamma);
}

p {
  /* zeta-2 は zeta に続き、cv20 = 2 を意味する */
  font-variant-alternates: character-variant(zeta, zeta-2);
}

.special {
  /* zeta は zeta-2 に続き、cv20 = 3 を意味する */
  font-variant-alternates: character-variant(zeta-2, zeta);
}

Matching text on Byzantine seals using character variants

文字バリアントを用いたビザンツ帝国の印章テキストの表示

上の図では、赤色のテキストは、8 世紀のビザンツ帝国の印章に見られる文字形を模した文字バリアントを含むフォントでレンダリングされている。その 2 行下には、バリアントを持たないフォントで表示された同じテキストがある。印章で使用されている U と N の 2 種類のバリアントに注目されたい。

@font-feature-values Athena Ruby {  @character-variant {
    leo-B: 2 1;
    leo-M: 13 3;
    leo-alt-N: 14 1;
    leo-N: 14 2;
    leo-T: 20 1;
    leo-U: 21 2;
    leo-alt-U: 21 4;
  }
}

p {
  font-variant: discretionary-ligatures
  character-variant(leo-B, leo-M, leo-N, leo-T, leo-U);
}

span.alt-N {
  font-variant-alternates: character-variant(leo-alt-N);
}

span.alt-U {
  font-variant-alternates: character-variant(leo-alt-U);
}

<p>ENO....UP͞RSTU<span class="alt-U">U</span>͞<span class="alt-U">U</span>ΚΑΙTỤẠG̣IUPNS</p>

<p>LEON|ΚΑΙCONSTA|NTI<span class="alt-N">N</span>OS..|STOIBAṢ.|LIṢROM|AIO<span class="alt-N">N</span></p>

6.10. 東アジアテキスト描画: font-variant-east-asianプロパティ

名前:	font-variant-east-asian
値:	normal \| [ <east-asian-variant-values> \|\| <east-asian-width-values> \|\| ruby ]
初期値:	normal
適用対象:	すべての要素およびテキスト
継承:	yes
パーセンテージ:	n/a
算出値:	指定どおり
正準順序:	文法による
アニメーション型:	離散値

Tests

東アジア文字におけるグリフの字形置換とサイズ指定を制御できる。

<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]

<east-asian-width-values>   = [ full-width | proportional-width ]

各個別の値は次の意味を持つ:

normal: 以下に挙げるいずれの機能も有効にしない。
jis78: JIS78 形の描画を有効にする (OpenType 機能: jp78)。
jis83: JIS83 形の描画を有効にする (OpenType 機能: jp83)。
jis90: JIS90 形の描画を有効にする (OpenType 機能: jp90)。
jis04: JIS2004 形の描画を有効にする (OpenType 機能: jp04)。
各種 JIS バリアントは、それぞれの日本工業規格で定義されたグリフ形の違いを反映したものである。一般にフォントは、最新の規格で定義されたグリフを収録しているが、看板など既存の表示と揃える必要がある場合には、古いバリアントを用いることが求められることもある。
simplified: 簡体字形の描画を有効にする (OpenType 機能: smpl)。
traditional: 繁体字形の描画を有効にする (OpenType 機能: trad)。
simplified と traditional の値により、時代とともに簡略化されたものの、依然として一部の文脈では古い伝統的な字形が用いられている文字について、どちらのグリフ形を用いるかを制御できる。対象となる文字集合やグリフ形の細部は、そのフォントが想定している利用文脈によってある程度異なる。
full-width: 全角バリアントの描画を有効にする (OpenType 機能: fwid)。
proportional-width: プロポーショナル幅バリアントの描画を有効にする (OpenType 機能: pwid)。
ruby: ルビ用バリアントグリフの表示を有効にする (OpenType 機能: ruby)。ルビテキストは通常、対応する本文より小さく表示されるため、フォントデザイナはルビ専用グリフを設計し、既定グリフを単に縮小した場合よりも可読性を高めることができる。影響を受けるのはグリフの選択のみであり、フォントサイズのスケーリングや行レイアウトに影響するその他の変更は行われない。
下図の赤いルビテキストは、上段が既定グリフ、下段がルビ用バリアントグリフで表示されている。線の太さのわずかな違いに注目されたい。

6.11. フォント描画の総合略記: font-variantプロパティ

名前:	font-variant
値:	normal \| none \| [ [ <common-lig-values> \|\| <discretionary-lig-values> \|\| <historical-lig-values> \|\| <contextual-alt-values> ] \|\| [ small-caps \| all-small-caps \| petite-caps \| all-petite-caps \| unicase \| titling-caps ] \|\| [ stylistic(<feature-value-name>) \|\| historical-forms \|\| styleset(<feature-value-name>#) \|\| character-variant(<feature-value-name>#) \|\| swash(<feature-value-name>) \|\| ornaments(<feature-value-name>) \|\| annotation(<feature-value-name>) ] \|\| [ <numeric-figure-values> \|\| <numeric-spacing-values> \|\| <numeric-fraction-values> \|\| ordinal \|\| slashed-zero ] \|\| [ <east-asian-variant-values> \|\| <east-asian-width-values> \|\| ruby ] \|\| [ sub \| super ] \|\| [ text \| emoji \| unicode ] ]
初期値:	normal
適用対象:	すべての要素およびテキスト
継承:	yes
パーセンテージ:	n/a
算出値:	指定どおり
正準順序:	文法による
アニメーション型:	離散値

Tests

font-variant プロパティは、すべての font-variant 下位プロパティの一括指定用ショートハンドである。

font-variant-ligatures
font-variant-position
font-variant-caps
font-variant-numeric
font-variant-alternates
font-variant-east-asian
font-variant-emoji

値 normal は、 font-variant のすべての下位プロパティを初期値にリセットする。 none 値は、 font-variant-ligatures を 'font-variant-ligatures/none' に設定し、その他すべてのフォント機能プロパティを初期値にリセットする。他のショートハンドと同様に、 font-variant を使用すると、明示されていない font-variant の下位プロパティは初期値にリセットされる。

これは、 font-language-override、 font-feature-settings、または font-variation-settings の値はリセットしない。

6.12. 低レベルフォント機能設定制御: font-feature-settingsプロパティ

名前:	font-feature-settings
値:	normal \| <feature-tag-value>#
初期値:	normal
適用対象:	すべての要素およびテキスト
継承:	yes
パーセンテージ:	n/a
算出値:	指定どおり
正準順序:	文法による
アニメーション型:	離散値

Tests

このプロパティは、 OpenType フォント機能に対する低レベルな制御を提供する。広く使われてはいないが特定のユースケースで必要となるフォント機能へのアクセス手段として意図されている。

著者は下の表にあるフォント機能を設定するのに、 font-feature-settings を使うべきではない。代わりに、より高レベルの代替プロパティを使用すべきである。理由は次のとおり:

高レベルのプロパティは個別にカスケードされる。font-feature-settings 全体を設定しなくても、そのうち 1 つだけを設定できる。
一部の高レベルプロパティは、対応するフォント機能をサポートしていないフォントに対しても合成して機能を提供できる。

このフォント機能を設定したい場合	その場合 font-feature-settings の代わりに使うべきもの	補足
カーニング (`kern`) または縦組みカーニング (`vkrn`)	font-kerning: normal	font-kerning プロパティは、 writing-mode に応じて `kern` または `vkrn` 機能を設定する。
標準合字 (`liga`) またはコンテキスト合字 (`clig`)	font-variant-ligatures: common-ligatures
任意合字 (`dlig`)	font-variant-ligatures: discretionary-ligatures
歴史的合字 (`hlig`)	font-variant-ligatures: historical-ligatures
コンテキスト代替字形 (`calt`)	font-variant-ligatures: contextual
下付き文字 (`subs`)	font-variant-position: sub
上付き文字 (`sups`)	font-variant-position: super
スモールキャップ (`smcp`)	font-variant-caps: small-caps
大文字からのスモールキャップ (`c2sc`)	font-variant-caps: all-small-caps
プチキャップ (`pcap`)	font-variant-caps: petite-caps
大文字からのプチキャップ (`c2pc`)	font-variant-caps: all-petite-caps
ユニケース (`unic`)	font-variant-caps: unicase
タイトル文字 (`titl`)	font-variant-caps: titling-caps
ライニング数字 (`lnum`)	font-variant-numeric: lining-nums
オールドスタイル数字 (`onum`)	font-variant-numeric: oldstyle-nums
プロポーショナル数字 (`pnum`)	font-variant-numeric: proportional-nums
タブラー数字 (`tnum`)	font-variant-numeric: tabular-nums
分数 (`frac`)	font-variant-numeric: diagonal-fractions
代替分数 (`afrc`)	font-variant-numeric: stacked-fractions
序数 (`ordn`)	font-variant-numeric: ordinal
スラッシュ付きゼロ (`zero`)	font-variant-numeric: slashed-zero
歴史的字形 (`hist`)	font-variant-alternates: historical-forms
スタイリスティック代替 (`salt`)	font-variant-alternates: stylistic()	どの代替を使うかは、@font-feature-values 規則を記述して指定する。
文字バリアント 1 ～ 99 (`cv01` ～ `cv99`)	font-variant-alternates: character-variant()	どの文字バリアントを使うかは、@font-feature-values 規則を記述して指定する。
スワッシュ (`swsh`) またはコンテキストスワッシュ (`cswh`)	font-variant-alternates: swash()	どのスワッシュを使うかは、@font-feature-values 規則を記述して指定する。
装飾記号 (`ornm`)	font-variant-alternates: ornaments()	どの装飾記号を使うかは、@font-feature-values 規則を記述して指定する。
代替注釈字形 (`nalt`)	font-variant-alternates: annotation()	どの注釈字形を使うかは、@font-feature-values 規則を記述して指定する。
JIS78 形 (`jp78`)	font-variant-east-asian: jis78
JIS83 形 (`jp83`)	font-variant-east-asian: jis83
JIS90 形 (`jp90`)	font-variant-east-asian: jis90
JIS2004 形 (`jp04`)	font-variant-east-asian: jis04
簡体字形 (`smpl`)	font-variant-east-asian: simplified
繁体字形 (`trad`)	font-variant-east-asian: traditional
全角幅 (`fwid`)	font-variant-east-asian: full-width
プロポーショナル幅 (`pwid`)	font-variant-east-asian: proportional-width
ルビ用字形 (`ruby`)	font-variant-east-asian: ruby

たとえば、科学用下付き数字（化学式で用いられる小さな数字）を制御する font-variant の値は存在しない。可読性はそれらを用いることで向上するため、 font-feature-settings を使って有効化する必要がある:

.chem {
  font-feature-settings: 'sinf'
}

化学式における科学用下付き数字の例 — 科学用下付き数字は化学式の可読性を向上させる

このプロパティ値は全体が一度に設定される。 font-variant プロパティとは異なり、個々の機能を追加・削除することで継承された値を変更する手段はない。

normal の値は、このプロパティによるグリフ選択や位置決めの変更が一切起こらないことを意味する。

機能タグ値の構文は次のとおり:

<feature-tag-value> = <opentype-tag> [ <integer [0,∞]> | on | off ]?
<opentype-tag> = <string>

<opentype-tag> は大文字小文字を区別する OpenType 機能タグである。 OpenType 仕様 [OPENTYPE] で規定されているように、機能タグは 4 文字の ASCII 文字から成る。 4 文字より長い、あるいは短いタグ文字列や、 U+20–7E の範囲外の文字を含むタグは無効である。機能タグはフォント内で定義された機能タグと一致すればよく、 OpenType で明示的に登録された機能だけに限定されるわけではない。独自の機能タグを定義するフォントは、 OpenType 仕様 [OPENTYPE-FEATURES] で定められたタグ名のルールに従うべきである。

フォントに存在しない機能タグは無視される。ユーザーエージェントは、これらの機能タグに基づくフォールバック動作を合成しようとしてはならない。ただし例外として、ユーザーエージェントは、 kern テーブルの形でカーニングデータを含むが GPOS テーブル内に kern 機能サポートを持たないフォントに対して、合成的に kern 機能をサポートしてもよい。

一般に、著者はカーニングを明示的に有効・無効にするには font-kerning プロパティを使用すべきである。なぜならこのプロパティは、どちらの種類のカーニングデータを持つフォントにも常に作用するためである。

値が指定されている場合、それはグリフ選択に用いられるインデックスを表す。 <integer> 値は 0 以上でなければならない。値 0 は機能が無効であることを示す。ブール機能では、一般に値 1 が機能を有効にする。非ブール機能では、値 1 以上が機能を有効にし、かつ機能選択インデックスを示す。値 on は 1 と同義であり、 off は 0 と同義である。値が省略された場合は、1 が指定されたものとみなす。

font-feature-settings の算出値はマップであり、指定値に重複があっても保持してはならない。同じ機能タグが複数回現れた場合、最後に現れたものに関連付けられた値が、その軸に対する以前の値すべてに優先する。

算出値には、重複が取り除かれた機能タグが含まれ、それらはコードユニットの昇順でソートされる。

font-feature-settings: "sinf" 1;       /* sinf=1 科学用下付き数字を有効化 */
font-feature-settings: "sinf" on;      /* sinf=1 科学用下付き数字を有効化 */
font-feature-settings: 'sinf';         /* sinf=1 科学用下付き数字を有効化 */
font-feature-settings: "sinf" off;     /* sinf=0 科学用下付き数字を無効化 */
font-feature-settings: "sinf", 'twid'; /* sinf=1, twid=1 科学用下付き数字と 1/3 幅を有効化 */
font-feature-settings: "sinf" "twid";  /* 無効、カンマ区切りリストが必要 */
font-feature-settings: "silly" off;    /* 無効、タグが長すぎる */
font-feature-settings: "PKRN";         /* PKRN=1 カスタム機能を有効化 */
font-feature-settings: sinf;           /* 無効、タグは文字列でなければならない */

フォントがサポートする範囲を超える値が指定された場合の挙動は、明示的に未定義とされている。ブール機能では、一般にこうした値は機能を有効化する。非ブール機能では、範囲外の値は一般に 0 と同等とみなされる。ただし、いずれの場合も正確な挙動はフォントの設計（特に、その機能を定義するのにどの種類のルックアップを用いているか）に依存する。

実装は、 OpenType 仕様で常に必須とされている機能（たとえば必須合字 "rlig"）を無効にする指定を無視してもよい。

Tests

font-variant-ligatures-11.optional.html (live test) (source)

font-feature-settings は OpenType 機能タグ向けに定義されているが、将来的にはフォント機能をサポートする他のモダンなフォント形式に対する機能タグが追加される可能性がある。可能な限り、他形式のフォントに対して定義される機能も、登録済み OpenType タグのパターンに従うべきである。

次の日本語テキストは、半角カナでレンダリングされる:

body { font-feature-settings: "hwid"; /* 半角 OpenType 機能 */ }

<p>毎日カレー食べてるのに、飽きない</p>

6.13. フォント言語オーバーライド: font-language-overrideプロパティ

名前:	font-language-override
値:	normal \| <string>
初期値:	normal
適用対象:	すべての要素およびテキスト
パーセンテージ:	N/A
算出値:	指定された文字列またはキーワード none
正準順序:	文法による
アニメーション型:	離散値

Tests

通常、著者は要素のコンテンツ言語を設定することで、言語ごとのグリフ置換や位置決めの制御ができる。これは前述のとおりである:

<!-- S’gaw Karen 固有の機能を使ってテキストを表示 -->
<p lang="ksw">...</p>

場合によっては、著者がコンテンツ言語とは異なる言語システムを指定する必要がある。たとえば、別の言語の組版慣習を模倣する必要がある場合などである。 font-language-override プロパティにより著者は、コンテンツ言語から暗示される言語システムを上書きして、フォントの言語システムを明示的に指定できる。

各値は次の意味を持つ:

normal: OpenType フォントで描画するとき、要素のコンテンツ言語から OpenType の言語システムを推定することを指定する。
<string>: 大文字小文字を区別する 4 文字から成る単一の OpenType 言語システムタグを指定する。これは要素の言語によって暗示される言語システムの代わりに、使用する OpenType 言語システムを指定する。文字列が 4 文字未満の場合は、長さが 4 になるよう末尾にスペース (U+0020) を追加してから照合を行う。

未知の OpenType 言語システムタグは黙って無視され、グリフの選択や配置には影響しない。

世界人権宣言は非常に多くの言語に翻訳されている。トルコ語では、この文書の第 9 条は次のようにマークアップされることがある:

<body lang="tr"><h4>Madde 9</h4>
<p>Hiç kimse keyfi olarak tutuklanamaz, alıkonulanamaz veya sürülemez.</p>

ここでユーザーエージェントは、テキストを描画する際に lang 属性の値を用いて、 'fi' 合字を使わないよう適切にレンダリングする。この場合、font-language-override プロパティを使う必要はない。

しかし、特定の言語をサポートしていないフォントもあり得る。このような状況では、著者はそのフォントがサポートしている近縁言語の組版慣習を用いる必要が出てくる場合がある:

<body lang="mk">     <!-- マケドニア語 lang コード -->body { font-language-override: "SRB"; /* セルビア語 OpenType 言語タグ */ }

<h4>Члeн 9</h4>
<p>Никoj чoвeк нeмa дa бидe пoдлoжeн нa прoизвoлнo aпсeњe, притвoр или прoгoнувaњe.</p>

コンテンツ制作者は、指定されたフォントがセルビア語をサポートしていると分かっているため、ここではマケドニア語のテキストがセルビア語の組版慣習でレンダリングされることになる。

7. フォント機能とバリエーションの解決

前の節で説明したように、フォント機能やバリエーションはさまざまな方法で有効化できる。スタイル規則内で font-variant、 font-feature-settings、 font-variation-settings を用いるか、あるいは @font-face 規則内で用いることができる。これらの設定の和集合に対する解決順序は、以下で定義される。 CSS プロパティを通じて定義された機能は、レイアウトエンジンの既定機能の上に適用される。

7.1. デフォルト機能

OpenType フォントについて、ユーザーエージェントは特定のスクリプトと書字方向に対して OpenType ドキュメントで定義されている既定機能を有効にしなければならない。必須合字・共通合字・コンテキスト字形 (OpenType 機能: rlig, liga, clig, calt) に加えて、ローカライズ字形 (OpenType 機能: locl)、および合成文字やダイアクリティカルマークの正しい表示に必要な機能 (OpenType 機能: ccmp, mark, mkmk) を既定で有効にしなければならない。これらの機能は、 font-variant プロパティや font-feature-settings プロパティの値が normal である場合でも常に有効でなければならない。個々の機能は、著者によって明示的に上書きされた場合にのみ無効になる。例えば font-variant-ligatures が 'font-variant-ligatures/no-common-ligatures' に設定されている場合などである。

Tests

アラビア文字、モンゴル文字、デーヴァナーガリーのような複雑なスクリプトを処理するには、さらに追加の機能が必要となる。縦書きテキストラン内の横向きテキストについては、縦組み用代替字形 (OpenType 機能: vert) を有効にしなければならない。

7.2. 機能とバリエーションの優先順位

前節で述べたとおり、一般的なフォント機能プロパティ設定とフォント固有のフォント機能プロパティ設定は、以下の優先度の昇順で解決される。この順序は、特定のテキストランに影響するフォント機能の結合リストを構築するために用いられる。

既定で有効化されるフォント機能が適用される。ここには、特定のスクリプトに必要な機能も含まれる。これらについての説明は § 7.1 Default features を参照。
font-weight、 font-width、および font-style プロパティによって有効化されるフォントバリエーションが適用される。

font-style によって有効化される値の適用はフォントの選択に影響される。というのも、このプロパティはイタリック体または斜体のフォントを選択するかもしれないからである。適用される値は、フォントマッチングアルゴリズムによって決定される、最も近い一致値である。ユーザーエージェントは font-style プロパティに起因して設定される値を高々 1 つにしなければならず、 "ital" と "slnt" の両方を同時に設定してはならない。

選択されたフォントが @font-face 規則で定義されている場合、この段階で適用される値は、その @font-face 規則内の font-weight、 font-width、および font-style 記述子の値にクランプすべきである。

その後、この段階で適用された値は（必要であれば再度）、フォントがサポートする値の範囲にクランプされるべきである。
継承された lang/xml:lang の値で指定された言語が適用される。
フォントが @font-face 規則で定義されている場合、その @font-face 規則内の font-language-override 記述子によって暗示されるフォント言語オーバーライドが適用される。
フォントが @font-face 規則で定義されており、その @font-face ��則に 'font-named-instance/none' 以外の値を持つ有効な font-named-instance 記述子が少なくとも 1 つ含まれていて、読み込まれたフォントリソースが § 5.1 Localized name matching の規則に従ってその名前の名前付きインスタンスを含んでいる場合、その名前付きインスタンスで表されるすべてのバリエーション値が適用される。これらの値はフォントがサポートする値の範囲にクランプされる。
フォントが @font-face 規則で定義されている場合、その @font-face 規則内の font-variation-settings 記述子により暗示されるフォントバリエーションが適用される。
フォントが @font-face 規則で定義されている場合、その @font-face 規則内の font-feature-settings 記述子により暗示されるフォント機能が適用される。
font-language-override プロパティの値により暗示されるフォント言語オーバーライドが適用される。
font-optical-sizing プロパティの値により暗示されるフォントバリエーションが適用される。
font-variant プロパティ、関連する font-variant の下位プロパティ、および OpenType 機能を利用するその他の CSS プロパティ（例: font-kerning プロパティ）により暗示されるフォント機能が適用される。
font-variant や font-feature-settings 以外のプロパティによって決定される機能設定が適用される。たとえば、letter-spacing プロパティに既定値以外を設定すると、オプションの合字は無効になる。
font-variation-settings プロパティの値により暗示されるフォントバリエーションが適用される。これらの値は、フォントがサポートする値の範囲にクランプされるべきである。
font-feature-settings プロパティの値により暗示されるフォント機能が適用される。

Tests

この順序付けにより、著者は @font-face 規則内でフォントに対する一般的な既定値の集合を設定し、個々の要素に対するプロパティ設定でそれらを上書きできる。一般的なプロパティ設定は @font-face 規則内の設定を上書きし、低レベルのフォント機能設定は font-variant プロパティ設定を上書きする。

結合されたフォント機能設定のリストに、同じ機能に対する複数の値が含まれている場合には、最後の値が使用される。あるフォントが特定の基礎フォント機能をサポートしていない場合、テキストはその機能が有効化されていないかのように単にレンダリングされる。このときフォントフォールバックは発生せず、明示的に特定のプロパティに対して定義されている場合を除き、機能を合成しようとはしない。

7.3. 機能優先例

下記スタイルでは、段落中の数字はプロポーショナルで描画され、価格表のテーブル内ではタブラー形式で表示されます：

body {
  font-variant-numeric: proportional-nums;
}

table.prices td {
  font-variant-numeric: tabular-nums;
}

@font-face規則では、 local()をsrcディスクリプタで使うことでローカルフォントの機能も利用できます：

@font-face {
  font-family: BodyText;
  src: local("HiraMaruPro-W4");
  font-variant: proportional-width;
  font-feature-settings: "ital"; /* CJKテキスト内のラテン斜体機能 */
}

body { font-family: BodyText, serif; }

日本語フォント「ヒラギノ丸ゴ Pro」が利用可能な場合は使われます。テキスト描画時、かなはプロポーショナル配置され、ラテン文字はイタリック体になります。フォールバックserifフォントの場合はデフォルト描画となります。

下記例では、任意合字はダウンロードフォントでのみ有効化され、 "special"クラスのspan内では無効化されます：

@font-face {
  font-family: main;
  src: url(fonts/ffmeta.woff) format("woff");
  font-variant: discretionary-ligatures;
}

body         { font-family: main, Helvetica; }
span.special { font-variant-ligatures: no-discretionary-ligatures; }

さらに、font-feature-settingsで任意合字を有効化する場合：

body         { font-family: main, Helvetica; }
span         { font-feature-settings: "dlig"; }
span.special { font-variant-ligatures: no-discretionary-ligatures; }

この場合、任意の合字は 表示されます。これは、両方の font-feature-settings および font-variant-ligatures プロパティがこれらの span に適用されるためです。 no-discretionary-ligatures 設定が font-variant-ligatures を事実上 OpenTypeの "dlig" 機能を無効にしますが、 font-feature-settings がその後に解決されるため、 "dlig" の値で任意の合字が再度有効化されます。

8. フォントバリエーションプロパティ

注: このセクションで使われている技術は「フォントバリエーション」と呼ばれます。このようなフォントのインスタンスは「バリアブルフォント」とも呼ばれます。

8.1. 光学サイズ制御: font-optical-sizingプロパティ

名前:	font-optical-sizing
値:	auto \| none
初期値:	auto
適用対象:	全要素とテキスト
継承:	はい
パーセンテージ:	該当なし
算出値:	指定キーワード
正規順序:	文法による
アニメーションタイプ:	離散

テスト

タイポグラフィ的には、テキストはサイズによって微妙に異なる視覚表現が望ましい場合があります。例えば小さな文字サイズでは読みやすさのためにストロークが太くなりセリフも大きくなります。大きい文字サイズでは、より繊細な形状や太細のコントラストが強くなります。

auto: ユーザーエージェントはfont-sizeや画面のピクセル密度に応じてグリフ形状を変更してもよいです。 OpenTypeやTrueTypeのバリエーションフォントでは、"opsz"バリエーションを使うことが多いです。
none: ユーザーエージェントは光学サイズによるグリフ形状の変更をしてはなりません。

text with different optical sizes, normalized to similar physical sizes — Century Expandedの各サイズ（アナログ金属活字時代のもの）。異なる光学サイズが同一物理サイズに正規化されているが、スタイル特性維持や可読性向上のため設計が異なる。

font-sizeは"opsz"軸のバリエーション値選択時に考慮されるべきですが、他の要素も考慮される場合があります。

注: ユーザーエージェントは"opsz"軸に、 font-sizeの値に近い値を割り当てることが期待されます。ただし画面のピクセル密度や、テキストが読者網膜で占める立体角等も考慮できる場合があります。実験によると、他の要素を無視しfont-sizeのみで決定するのが最適な場合もあります。

ピクセル密度やテキストの視覚サイズによって font-optical-sizingのバリエーション値が変化する場合があります。ユーザー操作やスタイル変更でピクセル密度や視覚サイズが変化しても、その変更がレイアウト変更を引き起こさない限り、ユーザーエージェントは新しい値を選択してはなりません。レイアウト変更かどうかの判断はユーザーエージェント任意です。

注: ピンチズームなどはテキストのリフローを起こさなければレイアウト変更とはみなされません。アクセシビリティでテキストサイズを増加させる操作はリフローを引き起こすためレイアウト変更とみなされます。同様にtransformプロパティは通常リフローを起こさないためレイアウト変更とみなされません。どの操作がレイアウト変更かはユーザーエージェントが自由に決めてよいです。

フォントが直接対応していない場合、ユーザーエージェントは光学サイズを合成してはなりません。

レンダリングに使うフォントが対応していない値を"opsz"軸に指定してはなりません。選択値はフォントが対応する範囲にクランプ（制限）することで実現できます。

font-optical-sizingはfont-size-adjustと連動します。光学サイズ適用時、ユーザーエージェントは調整後のフォントサイズに応じた光学サイズ値を、上記制約の範囲で適用しなければなりません。

8.2. 低レベルフォントバリエーション設定制御: font-variation-settingsプロパティ

名前:	font-variation-settings
値:	normal \| [ <opentype-tag> <number> ]#
初期値:	normal
適用対象:	すべての要素およびテキスト
継承:	yes
パーセンテージ:	n/a
算出値:	キーワード normal または、各項目が文字列と数値のペアから成るリスト
正準順序:	文法による
アニメーション型:	本文参照

Tests

このプロパティは、OpenType または TrueType フォントバリエーションに対する低レベルの制御を提供する。広くは利用されていないが、特定のユースケースで必要となるフォントバリエーションへのアクセス手段として意図されている。

著者は、下表のいずれかのバリエーション軸を設定するのに font-variation-settings を使うべきではない。代わりに、より高レベルの代替プロパティを使用すべきである。理由は次のとおり:

高レベルのプロパティは個別にカスケードされる。font-variation-settings 全体を設定しなくても、そのうち 1 つだけを設定できる。
一部の高レベルプロパティは、対応するフォントバリエーションをサポートしていないフォントに対しても合成して機能を提供できる。

このバリエーション軸を設定したい場合	その場合 font-variation-settings の代わりに使うべきもの	補足
太さ (`wght`)	font-weight	font-weight プロパティは、 `wght` 軸が存在する場合にそれを設定する。
幅 (`wdth`)	font-width	font-width プロパティは、 `wdth` 軸が存在する場合にそれを設定する。
傾斜 (`slnt`) またはイタリック (`ital`)	font-style	font-style プロパティは、その値に応じて `slnt` 軸または `ital` 軸を設定する。
オプティカルサイズ (`opsz`)	font-optical-sizing	font-optical-sizing プロパティは、 `opsz` 軸が存在する場合にそれを設定する。

font-variation-settings の使用は、フォールバックフォントを使用する場合のようなフォント選択には影響しない。同じ軸に対してフォントプロパティを使用した場合にはフォント選択に影響が出る点とは対照的である。

可能な限り、著者は一般に（font-optical-sizing などの）フォントバリエーション関連の他のプロパティを使用し、このプロパティは、あまり使用されない特定のフォントバリエーションへアクセスする唯一の手段となる特殊なケースに限って使用すべきである。

たとえば、 font-weight: 700 を使う方が、 font-variation-settings: "wght" 700 を使うより望ましい。

normal の値は、このプロパティによってグリフ形状・マッチング・位置決めにいかなる変更も生じないことを意味する。

<opentype-tag> は、大文字小文字を区別する OpenType または TrueType のバリエーション軸名である。 OpenType / TrueType 仕様で定義されているように、軸名は 4 文字の ASCII 文字から成る。軸名文字列が 4 文字より長い、あるいは短い場合や、 U+20–7E のコードポイント範囲外の文字を含む場合は無効である。軸名はフォント内で定義された軸タグと一致しさえすればよく、 OpenType / TrueType で明示的に登録されたバリエーション軸に限られない。独自の軸名を定義するフォントは、 OpenType 仕様で定義されている名前規則に従うべきである。

ある軸がフォントでサポートされていない場合、その軸に対する値の設定は無視され、したがって何の効果も持たない。ユーザーエージェントは、これらの軸タグに基づくフォールバック動作を合成しようとしてはならない。同じ CSS の font-variation-settings 宣言内にある他の軸値は無視されない。

あるバリエーション軸がフォントでサポートされているものの、設定された値がフォントで定義された範囲より大きい、または小さい場合、その値はフォントがサポートする最も近い値にクランプされる。

値には小数や負の値も指定できる。

Note: 斜体の字形を得るには、 font-style プロパティを使用する方が望ましい。しかし、font-variation-settings を通じて slnt 軸を直接使用する場合は、正の角度が反時計回りの傾き（CSS とは逆方向）を意味することに注意しなければならない。

同じ軸名が複数回現れた場合、その軸に対して最後に現れた値がそれ以前のすべての値に優先する。この重複排除は、このプロパティの算出値にアクセスすることで観察することができる。

算出値には、重複の取り除かれた軸名が含まれ、それらはコードユニットの昇順でソートされる。

font-variation-settings は OpenType / TrueType バリエーション向けに明示的に定義されているが、将来的にはフォントバリエーションをサポー��する他のモダンなフォント形式に対するバリエーション軸が追加される可能性がある。可能な限り、他形式のフォントに対して定義されるバリエーションも、登録済みバリエーション軸のパターンに従うべきである。

font-variation-settings のアニメーションは、次のメカニズムを用いて行うことができる。 2 つの font-feature-settings 宣言は、それらが「類似 (like)」である場合に限り、相互にアニメーション可能である。「類似」な宣言とは、同じ集合のプロパティが（順不同で）現れる宣言を指す。後続の重複プロパティがそれ以前の重複プロパティを上書きするため、 2 つの宣言は、含まれるプロパティ数が異なっていても「類似」であり得る。 2 つの宣言が「類似」である場合、アニメーションは宣言内の対応する値どうしのペアごとに行われる。そうでない場合、アニメーションは行われない。この状況では、アニメーションの「from」値は、アニメーション中の未指定の時点で「to」値に切り替えられる。

9. カラーフォント対応

カラーフォントを用いると、フォントファイルにはグリフの縁を記述する輪郭だけでなく、グリフ内部に存在する色も記述できる。

an example multicolored font — Multicolore、Ivan Filipov 作

絵文字のような用途では、フォント内で色が固定されていることが適切な場合もある。一方で、スタイルシートから使用する色を制御する必要がある場合もある。

Tests

font-colorization.html (live test) (source)

CSS はこれを行うための 2 つの方法を提供する。 font-palette プロパティは、フォントに含まれる複数のパレットのうち 1 つを選択できる。 @font-palette-values 規則は、パレット内の 1 色以上を上書きしたり、まったく別のパレットを新たに作成したりすることを可能にする。

9.1. カラーフォントパレットの制御: font-paletteプロパティ

多くのカラーフォントファイル形式では、グリフ内の色をパラメータ化できる。これらのフォントでは、各グリフのジオメトリを記述する際に、色はインデックスによって参照される。これらのインデックスはフォント内部に存在するルックアップテーブルを用いて、現在アクティブなパレット内で解決される。しかし、多くのフォントは複数のパレットを含んでおり、それぞれがフォントデザイナーによって選ばれた見栄えの良い結果を与える補色関係にある色の集合から成っている。

加えて、一部のカラーフォントファイル形式では、着色されたバージョンに加えて、通常の、無着色のグリフアウトラインも提供される。

Name:	font-palette
Value:	normal \| light \| dark \| <palette-identifier> \| <palette-mix()>
Initial:	normal
Applies to:	all elements and text
Inherited:	yes
Percentages:	N/a
Computed value:	specified keyword, identifier or <palette-mix()> function. <palette-mix()> must be simplified to a single keyword or identifier if resulting palette is equivalent.
Canonical order:	per grammar
Animation type:	by computed value

Tests

以下のように定義される palette-mix() 関数を用いる:

<palette-mix()> = palette-mix(<color-interpolation-method> , [ [normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2})

normal

color-scheme プロパティが normal' 以外の値に設定されている場合、ユーザーエージェントは適切に、最初の light または dark パレットを選択するべきである。それ以外の場合、ユーザーエージェントは既定のパレットまたは既定のグリフ彩色でカラーフォントを表示する。

カラーフォント形式が前景色の使用を要求する場合、ユーザーエージェントは、color プロパティの算出値を考慮に入れるべきである。

COLR [OPENTYPE] テーブルでは、カラーインデックス 0xFFFF は color プロパティに従ってレンダリングされるべきである。

COLR/CPAL [OPENTYPE] フォントにおいては、 font-palette: normal は通常、フォント内のインデックス 0 のパレットでフォントを描画することを意味する。

light

一部のカラーフォント形式には、特定のパレットが明るい（白に近い）背景での使用に適していることを示すメタデータが含まれている。このキーワードは、ユーザーエージェントに対し、フォントファイル内でそのようにマークされた最初のパレットを使用させる。フォントファイル形式がこのメタデータを扱わない場合や、フォント内にそのようにマークされたパレットが存在しない場合、この値は normal のように振る舞う。

dark

一部のカラーフォント形式には、特定のパレットが暗い（黒に近い）背景での使用に適していることを示すメタデータが含まれている。このキーワードは、ユーザーエージェントに対し、フォントファイル内でそのようにマークされた最初のパレットを使用させる。フォントファイル形式がこのメタデータを扱わない場合や、フォント内にそのようにマークされたパレットが存在しない場合、この値は normal のように振る舞う。

<palette-identifier>

この値は使用する CSS 定義パレットを識別する。利用者は @font-palette-values 規則を用いてパレットを定義できる。該当��る @font-palette-values 規則が存在しない場合、この値は normal のように振る舞う。

<palette-identifier> は <dashed-ident> として構文解析される��

Note: このような CSS 定義パレットは、フォント内に既に存在するパレットへの参照、フォント内に既に存在するパレットの変更、あるいは完全に新しいパレットのいずれかであり得る。

<palette-mix()>

この値は、2 つのパレット値間の補間における位置を定義する。ここでパレット値は、 <palette-identifier>、パレットキーワード normal、 light、 dark、または別の <palette-mix()> 値によって指定される。

フォントのグリフは、引数として指定された 1 番目と 2 番目のパレットの対応するカラーインデックスどうしを補間して作成されたパレットによって描画されなければならない。必要であれば、<palette-mix()> 関数は再帰的に解決される。

各パレットカラーについて、補間は <color-mix()> 関数の規則に従う。

パーセンテージは、 CSS Color 5 § 3.2 Percentage Normalization に従って正規化される。

Tests

palette-mix-computed.html (live test) (source)

Note: 'font-palette/light' および 'font-palette/dark' という名前は、カラーパレット自体の色ではなく、そのカラーパレットが使用に適した背景を表している。

ダークモード有効時には、ダークモード用パレットを使用する。

@media (prefers-color-scheme: dark) {    .banner {font-palette: dark;
  }
}

パレット間をアニメーションする。

@font-palette-values --pink {
  font-family: Nabla;
  base-palette: 1;
}

@font-palette-values --yellow {
  font-family: Nabla;
  base-palette: 7;
}

@keyframes animate-palette {
  from {
    font-palette: --yellow;
  }
  to {
    font-palette: --pink;
  }
}

p {
  font-family: Nabla;
  animation: animate-palette 1.4s infinite alternate linear;
}

The word Animate animated between a pink and a yellow palette. — Nabla Color by typearture.com - フォント内のパレット 1 と 7 の間をアニメーション。

Tests

さらなる例と画像を追加すること。

9.2. ユーザー定義フォントカラーパレット: @font-palette-values規則

@font-palette-values 規則はカラーパレットを定義し、そのカラーパレットを特定のフォントに関連付ける。これによりウェブ著者は、フォントファイル内の既存パレットに限定されることなく、カラーフォント内部で使用する色として任意の <color> を選択できる。

Note: OpenType の CPAL テーブルは sRGB の色に制限されている。 <color> は @font-palette-values 内では任意の CSS 色を許可する。いくつかの実装は現在、sRGB に制限された API を使用しており、そのため指定された色を sRGB にマッピングする場合がある。これは一時的な制限であると想定されている。著者は、この sRGB へのマッピングに依存すべきではない。

さらに、この規則が特定のフォントと結び付いていることで、あるパレット名がフォントごとに異なる適用を持つことができる。これにより、要素内で複数のフォントが使用される場合（すなわちフォントフォールバック）でも、複数のフォント間で類似した色を使用できる。

Note: ウェブ著者は、単一のフォントに対して複数のパレットを作成し、ウェブコンテンツに複数のテーマを用意したいと思うかもしれない。また、複数のフォントに対して対応するパレットを作成し、異なるフォント群にまたがる一貫したデザインを実現したいと思うかもしれない。

@font-palette-values 規則は、フォントで使用されるカラーパレットを表す。パレットは順序付けられた色の集合から成る。 @font-palette-values を使用することで、ウェブ著者はフォント内に存在するパレットを参照できるだけでなく、著者定義の色で満たされたパレットを作成することもできる。さらに、フォント内のパレットから一連の色を上書きし、ウェブ著者が記述した色で置き換えることもできる。

パレットは常に完全であり、色が欠けたパレットを記述することはできない。もし色が欠けることになる場合、それらの色は base-palette 記述子で特定されるフォント内のパレットから取得される。

数学関数（calc() など）に加え、 var() や env() も、 @font-palette-values 規則内の記述子値として有効である。これらはルート要素のコンテキスト内で評価される。相対単位もルート要素のコンテキスト内で評価される。

@font-palette-values 規則は、 @font-palette-values という at-キーワードに続く記述子宣言ブロックから成る。構文は次のとおり:

@font-palette-values <dashed-ident> {
  <declaration-list>
}

Tests

@font-palette-values 規則は、本仕様で定義される記述子を受け付ける。

同じ名前で複数の @font-palette-values 規則が定義されている場合、文書内の後のものが有効となり、それ以前のものはすべて無視される。

Bixa Color のカラーパレットを変更する。

@font-palette-values --Cooler {
  font-family: Bixa;
  base-palette: 1;
  override-colors:
    1 #7EB7E4;
}

overriding a color — Bixa Color（Novo Typo 作）。上段はフォント内の色を使用、下段はオレンジを青に変更した例。

Handover Sans のカラーパレットを変更する。

@font-palette-values --Augusta {
  font-family: Handover Sans;
  base-palette: 3;
  override-colors:
    1 rgb(43, 12, 9),
    3 var(--highlight);
}

これらの記述子は、それが定義されている @font-palette-values 規則のコンテキスト内にだけ適用され、文書言語の要素には適用されない。ある @font-palette-values 規則内で同一の記述子が複数回現れる場合、最後の記述子宣言のみが使用され、それ以前のその記述子に対する宣言はすべて無視される。

これらの各パレットは、同じファミリ名を共有する @font-face それぞれに適用される。

2 つのカラーフォントを緑がかったパレットで使いたい。最初のフォント Bixxxa には既に使用できるパレットがあるが、 Bungeehee については緑のパレットにするために 1 色を上書きする必要がある。

@font-face {
  font-family: Bixxxa;
  src: url('./bixxxa.woff') format('woff');
}

@font-face {
  font-family: Bungeehee;
  src: url('./bungeehee.woff') format('woff');
}

@font-palette-values --ToxicGreen {
  font-family: Bixxxa;
  base-palette: 3; /* これは Bixxxa のグリーンパレット */
}


@font-palette-values --ToxicGreen {
  font-family: Bungeehee;
  base-palette: 7; /* これは Bungeehee のグリーンパレット… */
  override-colors: 2 lime; /* …ただしここだけピンクなので、ライムに上書きする */
}

h1 {
  font-family: Bixxxa;
  font-palette: --ToxicGreen;
}

h2 {
  font-family: Bungeehee;
  font-palette: --ToxicGreen;
}

Example by Roel Nieskens

Note: ファミリ名が複数の物理フォント間で共有されている場合（unicode-range を用いて複合フォントを作成した場合など）に、それらのフォントが異なるパレットを持っていると、 @font-palette-values で部分的なパレットを指定した場合の結果は、著者が意図したものにならない可能性が高い。このようなケースでは、完全なパレット定義を与える方がよい。

上記の例では、 2 つの異なるフォントファミリが互換性のある名前付きパレットを持つよう設定されているため、次のように書くことができる。

h3 {
  font-family: Bixxxa, Bungeehee;
  font-palette: --ToxicGreen;
}

これにより、各フォントでパレット番号が異なっていても、それぞれにおいて望ましいパレットが正しく適用される。

ある集合の @font-palette-values 規則は、それらの規則を含む文書内で使用可能な著者定義パレットがどれかを定義する。

著者定義のフォントカラーパレットは、それを参照する文書からのみ利用可能でなければならない。それを参照しない文書の外側で著者定義カラーパレットを使用することは、 1 つのページの内容が他のページに影響を及ぼし得ることを意味し、攻撃者が攻撃ベクトルとして利用し得るため、セキュリティ上の漏洩に該当する。

この at-規則は、CSS の前方互換パースルールに従う。宣言ブロック内のプロパティと同様に、ユーザーエージェントがサポートしない記述子の宣言は無視されなければならない。 @font-palette-values 規則には font-family 記述子が必要であり、これが欠けている場合、 @font-palette-values 規則は無効とみなされ、全体を無視しなければならない。

ユーザーエージェントがプラットフォーム資源に制限を持つ場合や、カラーフォントをサポートしない場合、あるいはカラーフォントを無効化する機能を実装している場合には、 @font-palette-values 規則は単に無視されなければならない。この仕様で定義される個々の記述子の挙動は変更してはならない。

9.2.1. フォントファミリー: font-family記述子

Name:	font-family
For:	@font-palette-values
Value:	<family-name>#
Initial:	N/A

この記述子は、このパレットが適用されるフォントファミリを定義し、その際には § 5 Font Matching Algorithm と同じフォントファミリのリストを用いる。このパレットが適用されるのは、これらのファミリ名を持つフォントに対してのみである。この記述子の値は、名前付きフォントファミリのみが許可されることを意味し、フォントファミリのリストに汎用フォントを含める規則は構文エラーとなる。フォントファミリ一覧の中で構文エラーが発生した場合、記述子は無視されなければならない（CSS OM には残るが、いかなるフォントファミリともマッチしない）。

9.2.2. ベースパレットの指定: base-palette記述子

Name:	base-palette
For:	@font-palette-values
Value:	light \| dark \| <integer [0,∞]>
Initial:	N/A

light: 一部のカラーフォント形式には、特定のパレットが明るい（白に近い）背景での使用に適していることを示すメタデータが含まれている。このキーワードは、フォントファイル内でそのようにマークされた最初の利用可能なパレットを識別する。フォントファイル形式がこのメタデータを扱わない場合や、フォント内にそのようにマークされたパレットが存在しない場合、この値は 0 と同様に振る舞う。
dark: 一部のカラーフォント形式には、特定のパレットが暗い（黒に近い）背景での使用に適していることを示すメタデータが含まれている。このキーワードは、フォントファイル内でそのようにマークされた最初の利用可能なパレットを識別する。フォントファイル形式がこのメタデータを扱わない場合や、フォント内にそのようにマークされたパレットが存在しない場合、この値は 0 と同様に振る舞う。
<integer [0,∞]>: フォント内の（ゼロ始まりの）数値パレットインデックスを識別する。

Banner Flag のカラーパレットを変更する。

@font-palette-values --Festival {
  font-family: Banner Flag;
  base-palette: 1;
  override-colors:
    0 rgb(123, 64, 27),
    1 darkblue,
    2 var(--highlight);
}

この記述子は、フォント内のどのパレットを、それを含む @font-palette-values 規則の初期値として使用するかを指定する。 @font-palette-values 規則内に override-colors キーが存在しない場合、その @font-palette-values 規則は、この記述子の値と同じインデックスを持つフォント内のパレットを表す。 override-colors キーが @font-palette-values 規則内に存在する場合、その記述子の値内の各項目は、この @font-palette-values ブロックが表すカラーパレット内の 1 色を上書きする。

Handover Sans の 3 番目のカラーパレットに名前を付ける。

@font-palette-values --Augusta {
  font-family: Handover Sans;
  base-palette: 3;
}

@font-palette-values 内にこの記述子が存在しない場合や、フォントが base-palette の値によるインデックス位置にパレットを含まない場合は、 0 が指定されたかのように振る舞う。フォントがどのようなカラーパレットも含まない場合、この @font-palette-values 規則が表す初期カラーパレットには色が含まれない。パレット内の色は、 @font-palette-values 規則内で override-colors 記述子を用いることで上書きすることができる。

9.2.3. パレットの色の上書き: override-colors記述子

Name:	override-colors
For:	@font-palette-values
Value:	[ <integer [0,∞]> <color> ]#
Initial:	N/A

この記述子は、この @font-palette-values 規則で表される初期カラーパレットに対して色を上書きする。

override-colors 記述子は、パレットインデックスと色の組のコンマ区切りリストを取る。コンマ区切りリスト内の各項目は、パレット内の 1 つのエントリとそれを置き換える色とのタプルを表す。

指定された各 <color> は絶対色でなければならず、そうでない場合、この記述子は無効となる。

この記述子の値に含まれる各キーと値のペアについて、初期パレット内（すなわち base-palette 記述子を用いて取得される）でそのキーを持つ色は、この記述子の値で指定された色に上書きされる。初期パレットのインデックス範囲外のキーは無視されるが、それによって記述子全体が無効になることはない。

override-colors 記述子内のパレットインデックスエントリは、（ゼロ始まりの）パレットインデックスエントリである。

整数値はゼロインデックスである。

複数の異なるキー / 値ペアのキーが（名前または整数によって）同じカラーインデックスを指す場合、描画の目的においては最後のキーが使用される。ただしシリアライズの目的では、両方のキー / 値ペアが存在したままとなる。

Note: これは、 2 つの��なる要素に同じ値の font-palette を使用しても、それら 2 つの要素のコンテキストによって @font-palette-values 規則内の変数の値が異なる適用を受ける可能性があるため、実際に使用されるパレットが異なる場合があることを意味する。

CSS から与えられる色（上書きや新規エントリとして）は、任意のサポートされている色空間を使用できる。

Blaka Ink のカラーパレットを変更する。

@font-palette-values --Festival {
  font-family: Blaka Ink;
  base-palette: 0;
  override-colors:
    0 oklch(0.63 0.12 105.7),
    1 color(display-p3 0.23 0.22 0.04),
    2 color(prophoto-rgb 0.37 0.27 0.09);
}

Note: CPAL テーブルのバージョン 0 および 1 で指定される色は、 sRGB である。

9.3. テキスト表示スタイルの選択: font-variant-emojiプロパティ

名前:	font-variant-emoji
値:	normal \| text \| emoji \| unicode
初期値:	normal
適用対象:	すべての要素およびテキスト
継承:	yes
パーセンテージ:	N/a
算出値:	指定されたキーワード
正準順序:	文法による
アニメーション型:	離散値

Tests

このプロパティにより、ウェブ著者は、特定の絵文字コードポイントに対して絵文字表示とテキスト表示のどちらを用いるかを選択できる。従来、これらの表示スタイルは、特定のコードポイントに Variation Selector 15 (U+FE0E) または Variation Selector 16 (U+FE0F) を付加することで選択されてきた。しかし、font-variant-emoji によって、ウェブ著者はバリエーションセレクタの代わりとなる既定の表示スタイルを設定できる。

Unicode が Unicode 絵文字表示シーケンスを構成するとして列挙しているコードポイントだけが、このプロパティの影響を受ける。この CSS 仕様では、これらの文字を Emoji Presentation Participating Code Points（絵文字表示参加コードポイント）と呼ぶ。このプロパティは他の文字には影響を持たない。

このプロパティはフォントフォールバックに影響を与えると想定されるが、フォントフォールバックと font-variant-emoji の相互作用の正確な性質は、あえて未規定とされている。ただし、前述のクラスター照合節で定義されるように、バリエーションセレクタは直前のクラスター内に含まれていなければならない。この挙動の自然な帰結として、バリエーションセレクタは直前の文字とは異なるフォントで描画されてはならない。したがって、これはフォントフォールバックを、値の説明にあるように、「付加された」バリエーションセレクタが意図されているかのように振る舞わせる。そのうえで、クラスターのフォールバック規則��含むフォントフォールバックが行われ、そこではこれらのバリエーションセレクタの表示上の選好を考慮に入れなければならない。

font-variant-emoji が使用されている場合でも、要素内容に Variation Selector 15 (U+FE0E) または Variation Selector 16 (U+FE0F) が存在する場合には、それが font-variant-emoji で指定されたレンダリングを上書きする。したがって、font-variant-emoji は既定の表示を設定するが、実際にレンダリングされるテキストはそれからオプトアウトすることができる。

Note: 各プラットフォームには、絵文字表示シーケンスをどのように扱うかについてそれぞれ異なる慣習がある。クロスプラットフォームな UA は、各プラットフォームの慣習に従いたい場合もあれば、すべてのプラットフォームで同じアプローチを用いたい場合もある。絵文字スタイルでのレンダリングが要求された場合、 UA はカラーテーブルを含まないフォントを無視したいと考えるかもしれない。別の UA は、任意のクラスターに対して用いるのと同じ機械的なクラスターフォールバックアルゴリズムを使用したいと考えるかもしれない。

FE0E VARIATION SELECTOR-15 および U+FE0F VARIATION SELECTOR-16 以外のバリエーションセレクタは、フォント選択にいかなる影響も持ってはならない。これらのうちのいずれかが存在していても、それ以前に選択されたフォントがそのバリエーションセレクタをサポートしていない場合、バリエーションセレクタは無視される。

BCP47 の -u- 拡張（lang や xml:lang が受け付ける言語タグへの拡張）は、特定の文字に対して絵文字表示かテキスト表示かを使用するかどうかを UA が決定する際には考慮されるべきではない。

normal: ユーザーエージェントは、絵文字表示参加コードポイントを絵文字スタイルまたはテキストスタイルのいずれかで描画することを選択できる。通常、ユーザーエージェントはこの決定を行う際にプラットフォームの慣習に従う。
text: 各コードポイントは、すべての絵文字表示参加コードポイントに U+FE0E VARIATION SELECTOR-15 が付加されているかのようにレンダリングされる。
emoji: 各コードポイントは、すべての絵文字表示参加コードポイントに U+FE0F VARIATION SELECTOR-16 が付加されているかのようにレンダリングされる。
unicode: 各コードポイントは、 [UTS51] に従い、 Emoji および Emoji_Presentation プロパティの値に応じて、 emoji-default・text-default・text-only のいずれかとしてレンダリングされる。 FE0E VARIATION SELECTOR-15 および U+FE0F VARIATION SELECTOR-16 が存在する場合、それらは個々の絵文字表示参加コードポイントの既定の表示を上書きする。

U+1F6CB COUCH AND LAMP の絵文字形式を表示するには、 CustomEmoji.ttf が、この文字の絵文字形式をサポートするかどうかについてユーザーエージェントの判断に従うものとして、次のように指定する:

@font-face {
  font-family: "Custom Emoji";
  src: url("CustomEmoji.ttf") format("truetype");
}
...
<div style="font-family: 'Custom Emoji'; font-variant-emoji: emoji;">&#x1F6CB;</div>

10. フォント分類

フォントは以下いずれかまたは複数のカテゴリに属する場合があります：

10.1. インストール済みフォント

フォントはデバイス全体にインストールされている場合があります。こうしたフォントは通常、CSSの概念を持たないアプリケーションでも含め、任意のアプリケーションで利用可能です。フォントオブジェクトの基となるファイルはユーザーのデバイス上に存在し、リモートリソースではありません。

インストール済みフォントはWebフォントであってはならず、Webフォントはインストール済みフォントであってはなりません。

10.2. Webフォント

フォントはリモートリソースによりバックアップされている場合があり、これはユーザーエージェントのリソース取得インフラで要求される必要があります。Webフォントは以下2つのメカニズムで表現されます：

@font-face規則
DocumentのFontFaceSetに属するFontFaceメンバー

Webフォントは、@font-face規則が関連付けられているか、FontFaceSetを所有するDocument以外のDocumentではアクセスできません。他のデバイス上のアプリケーションもWebフォントにアクセスできてはなりません。

インストール済みフォントはWebフォントであってはならず、Webフォントはインストール済みフォントであってはなりません。

Webフォントはインストール済みフォントをシャドウするため、インストール済みフォントとWebフォントが同じファミリ名を持つ場合、インストール済みフォントは利用できません。

10.3. プリインストールフォントとユーザーインストールフォント

ユーザーはデバイスにフォントをインストールすることができます。ユーザーインストールフォントは、ユーザーが「インストール」ボタンをクリックする、または特定ディレクトリにファイルをコピーするなど、明示的な操作によってインストールされます。このようなフォントはユーザーインストールフォントであり、同時にインストール済みフォントでもあります。 Webコンテンツの著者はユーザーインストールフォントの存在を前提にすべきではありません。なぜなら、特定フォントをインストールする操作をユーザーが実行している保証はないからです。

ユーザーインストールフォントがフォントマッチングアルゴリズムとどのように相互作用するかは、フォントマッチングアルゴリズムの説明を参照してください。

ユーザーインストールフォントでないインストール済みフォントはプリインストールフォントです。特定バージョンのOSを利用する全ユーザーが同じプリインストールフォントセットを持つ可能性が高いです。そのため、こうしたOSをターゲットにするWebコンテンツ著者は、font-familyプロパティでこれらフォントのファミリ名を利用することができます。

10.4. システムフォント

System Font は、system-ui ジェネリックフォントファミリ名で使用されるフォントです。これは Preinstalled Font の一例です。

追加のフォントスタイルとして ui-sans-serif、ui-serif、ui-monospace、および ui-rounded が提供されることがあり、システムがそれらを提供する場合はこれらも Preinstalled Font(s) になります。

テスト

11. フォント技術とフォーマット

11.1. フォント技術

The features-opentype, features-aat and features-graphite テクノロジーはフォント機能のサポートを指します。これらは一般に [OPENTYPE] の GSUB および GPOS テーブルで実装されるほか、[AAT-FEATURES] では morx および kerx テーブルを用いて実装され、[GRAPHITE] では Silf、 Glat 、 Gloc 、 Feat および Sill テーブルで実装されることがあり、これは Graphite Table Format に記載されています。 § 6 Font Feature Properties の節では、これらの機能と連動するプロパティについて説明します。

The variations テクノロジーはフォントのバリエーションのサポートを指します。一般に [OPENTYPE] の avar、 cvar、 fvar、 gvar、 HVAR、 MVAR、 STAT、および VVAR テーブルで実装されることが多く、また [AAT-FEATURES] では avar、 cvar、 fvar、 gvar テーブルが使用されます。 § 2 Basic Font Properties および § 8 Font Variation Properties の節では、これらの機能と連動するプロパティについて説明します。

The color-colrv0, color-colrv1, color-svg, color-sbix and color-cbdt テクノロジーは、さまざまな種類のカラーフォントファイル技術を指します。それぞれは COLR、 SVG、 sbix または CBDT の各テーブルを表し、 [OPENTYPE] または [AAT-FEATURES] フォント内に存在するもので、この要件を満たすためにはサポートが必要です。

The palettes テクノロジーはフォントパレットのサポートを指します。一般に [OPENTYPE] および [AAT-FEATURES] の CPAL テーブルで実装されます。 § 9 Color Font Support の節では、これらの機能と連動するプロパティについて説明します。

The incremental テクノロジーは、インクリメンタルフォント転送 [IFT] に対するクライアントのサポートを指します。

これらの背景については [PFE-report] を参照してください。

Web の作成者は tech() 関数を @font-face の src ディスクリプタ内で指定して、フォントの正しいレンダリングにそのサポートが必要であることを示すことができます。この仕組みは、要求されたサポートが存在しない場合に補助フォントへスムーズにフォールバックするために使用できます。

この @font-face ブロックは、ユーザーエージェントがサポートを持っている場合にカラーフォントを使用し、サポートがない場合はカラーフォントでないフォントにフォールバックする方法を示します。

@font-face {
  font-family: "Trickster";
  src: url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1),
  url("trickster-outline.otf") format(opentype);
}

11.2. フォントフォーマット

この仕様で定義されるフォーマット文字列は以下の通りです。 <font-format>値は下記フォーマットの同義語です。

文字列	フォント形式	一般的な拡張子	一般的なメディアタイプ
"collection"	OpenType Collection	.otc,.ttc	font/collection
"embedded-opentype"	Embedded OpenType	.eot	application/vnd.ms-fontobject
"opentype"	OpenType	.ttf, .otf	font/otf, font/ttf
"svg"	SVG Font (deprecated)	.svg, .svgz	image/svg+xml
"truetype"	TrueType	.ttf	font/ttf
"woff"	WOFF 1.0 (Web Open Font Format)	.woff	font/woff
"woff2"	WOFF 2.0 (Web Open Font Format)	.woff2	font/woff2

テスト

format-specifiers-variations.html (ライブテスト) (ソース)

TrueType と OpenType の一般的な使用が重複していることを考慮すると、フォーマットヒント "truetype" と "opentype" は同義語と見なされる必要があります; フォーマットヒント "opentype" は、フォントが Postscript CFF スタイルのグリフデータを含むことや、 OpenType のレイアウト情報を含むことを意味するわけではありません（詳細は付録 A を参照してください）。

12. オブジェクトモデル

次の @font-face および @font-feature-values ルールの内容は次の CSS オブジェクトモデルへの拡張を通じてアクセスできます。

テスト

idlharness.html (ライブテスト) (ソース)

12.1. `CSSFontFaceRule` インターフェース

この CSSFontFaceRule インターフェイスは <@font-face> ルールを表します。

[Exposed=Window]
interface CSSFontFaceDescriptors : CSSStyleDeclaration {
  attribute [LegacyNullToEmptyString] CSSOMString src;
  attribute [LegacyNullToEmptyString] CSSOMString fontFamily;
  attribute [LegacyNullToEmptyString] CSSOMString font-family;
  attribute [LegacyNullToEmptyString] CSSOMString fontStyle;
  attribute [LegacyNullToEmptyString] CSSOMString font-style;
  attribute [LegacyNullToEmptyString] CSSOMString fontWeight;
  attribute [LegacyNullToEmptyString] CSSOMString font-weight;
  attribute [LegacyNullToEmptyString] CSSOMString fontStretch;
  attribute [LegacyNullToEmptyString] CSSOMString font-stretch;
  attribute [LegacyNullToEmptyString] CSSOMString fontWidth;
  attribute [LegacyNullToEmptyString] CSSOMString font-width;
  attribute [LegacyNullToEmptyString] CSSOMString unicodeRange;
  attribute [LegacyNullToEmptyString] CSSOMString unicode-range;
  attribute [LegacyNullToEmptyString] CSSOMString fontFeatureSettings;
  attribute [LegacyNullToEmptyString] CSSOMString font-feature-settings;
  attribute [LegacyNullToEmptyString] CSSOMString fontVariationSettings;
  attribute [LegacyNullToEmptyString] CSSOMString font-variation-settings;
  attribute [LegacyNullToEmptyString] CSSOMString fontNamedInstance;
  attribute [LegacyNullToEmptyString] CSSOMString font-named-instance;
  attribute [LegacyNullToEmptyString] CSSOMString fontDisplay;
  attribute [LegacyNullToEmptyString] CSSOMString font-display;
  attribute [LegacyNullToEmptyString] CSSOMString fontLanguageOverride;
  attribute [LegacyNullToEmptyString] CSSOMString font-language-override;
  attribute [LegacyNullToEmptyString] CSSOMString ascentOverride;
  attribute [LegacyNullToEmptyString] CSSOMString ascent-override;
  attribute [LegacyNullToEmptyString] CSSOMString descentOverride;
  attribute [LegacyNullToEmptyString] CSSOMString descent-override;
  attribute [LegacyNullToEmptyString] CSSOMString lineGapOverride;
  attribute [LegacyNullToEmptyString] CSSOMString line-gap-override;
};

[Exposed=Window]
interface CSSFontFaceRule : CSSRule {
  [SameObject, PutForwards=cssText] readonly attribute CSSFontFaceDescriptors style;
};

12.2. `CSSFontFeatureValuesRule`インターフェース

次のように CSSRule インターフェイスが拡張されます：

partial interface CSSRule {  const unsigned short FONT_FEATURE_VALUES_RULE = 14;
};

CSSFontFeatureValuesRule インターフェイスは @font-feature-values ルールを表します。

[Exposed=Window]
interface CSSFontFeatureValuesRule : CSSRule {
  attribute CSSOMString fontFamily;
  readonly attribute CSSFontFeatureValuesMap annotation;
  readonly attribute CSSFontFeatureValuesMap ornaments;
  readonly attribute CSSFontFeatureValuesMap stylistic;
  readonly attribute CSSFontFeatureValuesMap swash;
  readonly attribute CSSFontFeatureValuesMap characterVariant;
  readonly attribute CSSFontFeatureValuesMap styleset;
  readonly attribute CSSFontFeatureValuesMap historicalForms;
};

[Exposed=Window]
interface CSSFontFeatureValuesMap {
  maplike<CSSOMString, sequence<unsigned long>>;
  undefined set(CSSOMString featureValueName,
    (unsigned long or sequence<unsigned long>) values);
};

fontFamily of type CSSOMString: 1 つ以上のフォントファミリのリストで、特定の一連のフィーチャ値が定義されている対象を示します。
value maps of type CSSFontFeatureValuesMap, readonly: 特定の font-variant-alternates 値タイプに対応する機能値の名前に紐づく、フィーチャ値のマップ

各 value map 属性は対応する feature value block によって定義された値を反映します。したがって annotation 属性は @annotation feature value block に含まれる値を含み、 ornaments 属性は @ornaments feature value block に含まれる値を含む、というように対応します。

CSSFontFeatureValuesMap インターフェイスはデフォルトの map クラスメソッドを使用しますが、set メソッドは動作が異なります。これは符号なし整数のシーケンスを取り、与えられた featureValueName に関連付けます。このメソッドはデフォルトの map クラスメソッドと同様に振る舞いますが、単一の unsigned long 値は単一要素のシーケンスとして扱われます。無効な数の値が渡された場合には例外を投げます。関連する feature value block が許可する値の数に制限がある場合、set に渡されたシーケンスがその制限を超えると InvalidAccessError 例外を投げます。許可される最大値の数の詳細は multi-valued feature value definitions の説明を参照してください。get メソッドは、たとえシーケンスが単一の値しか含まなくても常に値のシーケンスを返します。

12.3. `CSSFontPaletteValuesRule`インターフェース

[Exposed=Window]interface CSSFontPaletteValuesRule : CSSRule {
  readonly attribute CSSOMString name;
  readonly attribute CSSOMString fontFamily;
  readonly attribute CSSOMString basePalette;
  readonly attribute CSSOMString overrideColors;
};

fontFamilyやbasePaletteインターフェースは、対応するCSSプロパティ構文で構文解析されます。

13. シリアライズ

13.1. フォント関連プロパティのシリアライズ

個別プロパティで特記されていない限り、このモジュールで定義されるプロパティは CSSOM § 6.7.2 CSS値のシリアライズの原則に従います。

テスト

font-variant-serialization.html （ライブテスト）（ソース）

13.2. フォント関連at規則のシリアライズ

個別ディスクリプタで特記されていない限り、このモジュールで定義されるat規則のディスクリプタは CSSOM § 6.7.2 CSS値のシリアライズの原則に従います。

特に、短い表現の原則に従い、範囲値を受け入れるディスクリプタで開始値と終了値が同じ場合（範囲がゼロ）、ディスクリプタは範囲ではなく単一値としてシリアライズされます。

テスト

at-font-face-descriptors.html （ライブテスト）（ソース）

例えば以下の規則

@font-face {
  font-family: "foo";
  font-weight: 200 200;
}

は以下のようにシリアライズされます：

@font-face {
  font-family: "foo";
  font-weight: 200;
}

また、最後に定義された値だけを残す原則、および短い表現の原則に従い、複数指定のタプルや複数ブロックは、最後に定義された値のみを含む単一ブロックとしてシリアライズされます。

例えば以下の宣言：

/* 宣言名の繰り返し、および同種ブロック複数 */
@font-feature-values foo {
  @swash { pretty: 0; cool: 2; }
  @swash { pretty: 1; }
}

は以下のようにシリアライズされます：

/* 正規シリアライズ */
@font-feature-values foo {
    @swash { cool: 2; pretty: 1; }
}

テスト

font_feature_values_map_iteration.html (ライブテスト) (ソース)

付録A: プラットフォームフォントプロパティからCSSプロパティへの対応

この付録は、他の節で説明されているいくつかの問題や状況の背景資料として含まれています。情報提供のみを目的としたものとして扱うべきです。

CSS のフォントプロパティは使用される基礎となるフォント形式に依存しないよう設計されています; ビットマップフォント、 Type1 フォント、 SVG フォントに加えて一般的な TrueType や OpenType フォントを指定するために使用できます。しかし、TrueType および OpenType 形式のいくつかの側面は著者にとって混乱を招きやすく、異なるプラットフォームの実装者にとって課題をもたらすことがあります。

元々 Apple で開発された TrueType [TRUETYPE] は、画面と印刷の両方を対象としたアウトラインフォント形式として設計されました。 Microsoft は TrueType 形式の開発に Apple と共に参加し、それ以来両プラットフォームは TrueType フォントをサポートしてきました。 TrueType 形式のフォントデータは共通の４文字タグ名で区別される一連のテーブルで構成され、それぞれ特定の種類のデータを含みます。例えば、著作権やライセンス情報を含む命名情報は name テーブルに格納されます。文字マップ (cmap) テーブルは文字エンコーディングからグリフへのマッピングを含みます。 Apple は後に拡張タイポグラフィ機能をサポートするための追加テーブルを導入しました; これらは現在 Apple Advanced Typography、または AAT フォントと呼ばれます。 Microsoft と Adobe は上級タイポグラフィ用の別の一連のテーブルを開発し、その形式を OpenType [OPENTYPE] と呼びました。 OpenType 仕様は ISO により Open Font Format として標準化されています [OPEN-FONT-FORMAT]。

多くの場合、Microsoft Windows や Linux で使用されるフォントデータは Apple の Mac OS X で使用されるデータと若干異なります。これは TrueType 形式がプラットフォーム間で明示的な差異を許容していたためです。これにはフォントのメトリクス、名称、そして文字マップデータが含まれます。

具体的には、フォントファミリ名データはプラットフォームごとに異なる扱いがなされます。 TrueType および OpenType フォントについてはこれらの名前は name テーブルの name ID 1 の name レコードに格納されます。異なるロケール向けに複数の名前を格納することができますが、 Microsoft はフォントが常に少なくとも米国英語版の名前を含むことを推奨しています。 Windows では後方互換性の理由からこのファミリ名を最大 4 顔に制限するという判断を行いました; より大きなグループ化には "preferred family" (name ID 16) や "WWS family" (name ID 21) を使用できます。 OSX のような他のプラットフォームにはこの制限がないため、ファミリ名はすべての可能なグループ化を定義するために使用されます。

他の name テーブルデータはファミリ内の特定のフェイスを一意に識別するために使われる名前を提供します。フルフォント名 (name ID 4) と Postscript 名 (name ID 6) は単一のフェイスを一意に記述します。例えば、 Gill Sans ファミリのボールドフェイスはフルネームが "Gill Sans Bold" であり、 Postscript 名は "GillSans-Bold" です。単一のフェイスについて複数のローカライズされたフルネームが存在することがありますが、 Postscript 名は常に限定された ASCII 文字セットから作られる一意の名前です。

さまざまなプラットフォームでは、フォントを検索するために使用される名前が異なります。例えば、 Windows の GDI CreateIndirectFont API ではファミリ名またはフルネームのいずれかでフェイスを検索できますが、 Mac OS X では CTFontCreateWithName API 呼び出しがフルネームと Postscript 名を用いて特定のフェイスを検索するために使用されます。 Linux では fontconfig API によりこれらの名前のいずれを用いてもフォントを検索できます。プラットフォーム API が自動的に他のフォントを代替する状況では、返されたフォントが指定した名前に一致するかを検証する必要があるかもしれません。

特定のフェイスのウエイトは OS/2 テーブルの usWeightClass フィールドを通じて決定されるか、スタイル名 (name ID 2) から推測されます。同様に、幅は OS/2 テーブルの usWidthClass を通じて決定されるか、スタイル名から推測されます。歴史的な理由として、Windows GDI API で重み 200 以下の合成ボールド化に関連する問題があり、フォント設計者はこれらの重みを回避するために時折 OS/2 テーブルの値を歪めることがありました。

タイ語、アラビア語、デーヴァナーガリーのような文脈依存のシェーピングを用いる複雑なスクリプトをレンダリングするには、 OpenType または AAT フォントにのみ存在する機能が必要です。現在、複雑スクリプトのレンダリングは Windows と Linux で OpenType のフォント機能を用いてサポートされており、 Mac OS X では OpenType と AAT の両方のフォント機能が使用されています。

14. セキュリティ考慮事項

以下の自己レビュー質問票の項目9、16、17を参照してください。

15. プライバシー考慮事項

セキュリティ・プライバシー自己レビュー質問票に従い、§ 10 フォント分類を利用します。

15.1. この機能はウェブサイトや他の第三者にどのような情報を露出し、その露出はどのような目的で必要ですか？

この仕様はWebフォントの利用を許可します。 Webフォントは必要に応じてリクエストされますが、インストールはされません。ドキュメントやスタイルシートのオリジンがWebフォントと異なる場合、このネットワークリクエストでRefererヘッダーの情報が露出し、フォント提供者によって収集される可能性があります。

Webフォントに加えて、この仕様はインストール済みフォント（プリインストールフォント、ユーザーインストールフォント両方）の利用もCSS1から引き続き許可しています。

Webフォントはプラットフォーム間で一貫性がある利点があり、インストール済みフォントはダウンロード不要の利点があります。

一部のケース、特にサポートが十分でない言語や少数言語では、インストール済みフォントを利用することで、他に表示できない情報を表示できます。これは、その言語に対応する自由にライセンス可能なWebフォントが存在しない場合や、レイテンシやダウンロード時間の問題でWebフォントの利用が非現実的な場合（文字数の多い言語や遅い/従量制回線の場合）に特に重要です。

注: インストール済みフォントのセットはフォントマッチングアルゴリズムで明示的に未定義です。利用可能なフォントセットは指紋取得トラッカーによってユーザーのプライバシーを低減させます。しかし、インストール済みフォントの一部、あるいはユーザーインストールフォントの一部は、言語の可読性のために必要です。ユーザーエージェントは言語サポートやデザイン整合性の理由で全フォントを利用可能にする場合もあれば、プライバシーのため一部フォントを利用不可にする場合もあります。また、ユーザーが特定フォントの利用可否を明示的に選択できるUI（サイトごとなど）を提供する場合もあります。同じOS上であっても、異なるユーザーエージェントは異なるバランスを取ると想定されます。

ローカルリソースの描画を行うユーザーエージェント（HTML/CSS→PDFレンダラーやウェブベースワープロ等）では、すべてのインストール済みフォント（プリインストール・ユーザーインストール両方）にアクセスする必要があります。

攻撃者はインストール済みフォントを照会して指紋情報を取得する可能性があります。古い技術（特にAdobe Flashは全インストール済みフォント一覧をHTTPヘッダーで送信していた）と違い、現在は個別フォントごとに、フォントファミリ名を指定し、スクリプトやunicode-rangeを使ってそのフォントが特定文字をサポートしているかどうかを確認することで照会します。これには時間がかかり、数百以上のフォントを確認するとページ表示の遅延が目立ちます。

特にプライバシー重視の文脈では、一切Webフォントをダウンロードしない（ただし一部文字が正しく表示されないリスクあり）、または必要有無に関係なく全Webフォントを常時ダウンロードする（unicode-rangeを無視し、毎回大量の未使用フォントをダウンロード）の選択肢も考えられます。

15.2. この仕様は機能提供に必要な最小限の情報のみを露出していますか？

現在、ユーザーエージェントが正しく機能するためにはプリインストールフォントを露出すべきだという合意が形成されつつありますが、ユーザーインストールフォントの露出については合意がありません。この仕様はユーザーエージェントがフォントマッチングアルゴリズムにおいてユーザーインストールフォントを無視することを許可しています。既存のユーザーエージェントの中にもこれを実施しているものがあります。

必要最小限はユーザーの種類によって異なり、現在議論中です。ユーザーインストールフォント利用者の分類が若干拡張されています。

許容的な情報露出は指紋取得可能性を高めますが、制限的な情報露出は指紋取得リスクを低減する一方で機能性も低下し、少数言語環境ではウェブ利用自体が不可能になる場合もあります。

一部または全ユーザーインストールフォントの露出、あるいはオリジンごとの露出をユーザーが選択できるようにする可能性も議論されています。

悪意あるウェブページが多数のフォントをテストした場合にペナルティや無効化する「プライバシーバジェット」の可能性も議論されていますが、善意のページが少数のフォントだけをテストする場合は許容することも考えられています。

一部ユーザーエージェントは、プライベートブラウジング・シークレット・指紋耐性モードでは通常モードよりも制限されたプリインストールフォントセットを露出します。

15.3. この仕様は個人情報や個人識別情報、それに由来する情報をどのように扱いますか？

この仕様は個人情報を露出しません。

場合によっては個人識別情報が露出する可能性があります。例えば、日本在住者が条件付き有効化された日本語フォントを列挙できても、指紋取得リスクは大きくないでしょう。しかし欧州在住者で日本語IMEがテキスト入力メニューにある場合は指紋取得リスクとなります。

15.4. この仕様は機微情報をどのように扱いますか？

インストール済みフォントによる指紋取得は場合によっては機微情報を露出します。例えば、迫害される少数派が、その言語用フォントの利用によって機微情報を漏らすリスクがあります。これは第三者サービスからWebフォントをリクエストする場合や、プリインストール・ユーザーインストールフォントの露出によっても生じます。

15.5. この仕様はオリジンにブラウジングセッション間で持続する新しい状態を導入しますか？

いいえ。

特に、Webフォントは@font-face規則が関連付けられているかFontFaceSetを所有するDocument以外ではアクセスできません。他のアプリケーションもWebフォントにアクセスできません。これによりオリジン間の情報漏洩を防ぎます。

同様に、フォントパレット値はそれを参照する文書のみで利用可能でなければなりません。著者定義カラーパレットを参照しない文書で利用するとセキュリティ漏洩となり、 1ページの内容が他ページに影響し、攻撃ベクトルとなります。

15.6. この仕様は基盤プラットフォームのどのような情報（設定データ等）をオリジンに露出しますか？

system-uiキーワードはOSのデフォルトシステムUIフォントを指紋取得機構に露出します。

15.7. この仕様はオリジンがユーザー端末のセンサーへアクセスできるようにしますか

いいえ。

15.8. この仕様はオリジンにどのようなデータを露出しますか？他の機能と同一または類似の文脈で露出されるデータも記載してください。

スタイルシート経由で読み込まれる第三者Webフォントについては、スタイルシートのオリジンがRefererヘッダーで第三者に露出される場合があります。また、unicode-rangeと異なるsrc urlを組み合わせて慎重に利用することで、第三者がページで使われている文字を把握でき、 CJKのような文字数の多いスクリプトではプライバシーリスクとなります。

HTMLで事前ロードされた第三者Webフォントについても、同様にドキュメントのオリジンが露出されます。

15.9. この仕様は新しいスクリプト実行／ロード機構を有効にしますか？

いいえ。

特に、OpenTypeカラーフォント内のSVGについては、グリフ定義用SVGにscript要素を含めてはならず、含まれていても実行されません。

15.10. この仕様はオリジンが他のデバイスにアクセスできるようにしますか？

いいえ。

15.11. この仕様はオリジンがユーザーエージェントのネイティブUIを制御する手段を与えますか？

攻撃者がOSを判別し、OSに合わせたネイティブ風フォントを使うことでネイティブUIの偽装をするリスクがあります。

15.12. この仕様はウェブに一時的識別子を作成または露出しますか？

ありません。

15.13. この仕様はファーストパーティとサードパーティの文脈で挙動を区別しますか？

フォントロードでは、ユーザーエージェントは@font-face規則内URLに対し、[HTML]仕様で定義されたCORS対応fetchメソッドを使う必要があります。フェッチ時は"Anonymous"モードを使い、referrerをスタイルシートのURLに、originをドキュメントのURLに設定します。

通常は、著者が明示的にクロスオリジンロードを許可しない限り、クロスオリジンでフォントはロードされません。

15.14. この仕様はユーザーエージェントのプライベートブラウジングや「シークレット」モードでどのように動作しますか？

この仕様は区別しません。

一部ユーザーエージェントはこれらのモードでインストール済みフォントの露出をさらに制限します。

15.15. この仕様には「セキュリティ考慮事項」と「プライバシー考慮事項」セクションがありますか？

はい。

15.16. この仕様はデフォルトのセキュリティ特性をダウングレードできるようにしますか？

いいえ。

15.17. この質問票で本来問うべきだったことは？

悪意あるペイロードがアプリケーションやOS全体をクラッシュさせたり、リモートコード実行を引き起こす可能性があるかどうか問うべきでした。

実際、この脆弱性を持つOS上のユーザーエージェントは、インストール・描画時に不正または悪意あるフォントを検出するフォントサニタイザを使い、利用を防いでいます。

テキストの視覚的レンダリングにフォントを使うことは、一般にアクセシビリティへ影響を与えるべきではありません。例えば、スクリーンリーダーを使ってテキストを音声化する場合、フォントはダウンロードされず、そのフォントに何が含まれていても影響を受けません。

ただし、フォントグリフで伝達される意味と文字で伝達される意味が同じであるという前提です。

歴史的には、これは常に成立していたわけではありません。例えばWeb初期には「Symbol」などのフォントでラテン文字にギリシャ文字グリフを割り当てることが一般的でした。これは見た目は動作しますが、スクリーンリーダーでは機能せず、テキスト検索やインデックス作成も困難でした。なぜならマッピングがフォント固有だからです。 Unicodeの普及で、ギリシャ語テキストにはギリシャ文字を使い、フォントのギリシャ文字グリフがギリシャ文字にマッピングされるのが標準になりました。

残念ながら、この慣習はアイコンフォントの設計ミスによって現在も残っています。例えば、ラテン文字「P」にプリンターアイコンを割り当てるようなフォントです。このようなフォントはテキスト内に意味不明な文字列が散在し、テキスト検索やインデックス作成に悪影響を与え、アイコンフォントがロードされない場合の表示も理解しにくく、スクリーンリーダーの利用も阻害します。適切なフォント設計では、こうしたアイコンは意味のある文字列に割り当てるべきです。例えば、プリンターアイコンは"printer"という文字列やUnicode文字🖨 U+1F5A8（PRINTER）に割り当てるべきです。

17. 謝辞

CSSワーキンググループは以下の方々に感謝します：

Peter Constable（言語関連修正）

Nick Sherman（光学サイズ画像作成）

Richard Ishida（ウルドゥー語サンプル）

Munira TursunovaとDominik Röttsches（font-paletteアニメーション機能開発）

John Hudson（OpenType言語タグの詳細解説・ビザンチン印章表示の文字バリアント使用例提供）

Elika Etemad（'@font-feature-values'規則の初期設計アイデア提供）

Tab Atkins Jr.（Font Rendering Controlsセクションおよびfont-display 記述子セクションのテキスト提供） Ilya GrigorikとDavid Kuettel（これらセクションの開発協力）

18. 変更点

18.1. 2024年2月1日付ワーキングドラフトからの変更点 2024年2月1��ワーキングドラフト

<absolute-size> と <relative-size> の適切な型を作成 (Issue 1794)
複数の @font-palette-values ルールがある場合は最後のものが優先されると定義 (Issue 12981)
可変範囲へのクランプが暗黙のバリエーション軸にも影響することを明確化 (Issue 7999)
その他の ui-* 汎用フォントファミリに関する追加の明確化を行った (Issue 3658)
system-ui 汎用フォントファミリに関する注記を追加 (PR 12831), (Issue 3658)
フォントリソースの取得処理を整理 (Issue 12261)
override-colors 内の非絶対色はディスクリプタ全体を無効にし、個々の色だけを無効にするのではないことを明確化 (Issue 9555)
font-style ディスクリプタに left と right を追加 (Issue 9392)
font-style プロパティに left と right を追加 (Issue 9392)
font-synthesis-style の値として oblique-only を追加 (Issue 9390)
reset-only サブプロパティについて独自定義するのではなく Cascade 5 を参照するように変更 (Issue 11904)
絶対色が指定されていない場合、override-colors は無効であることを明確化 (Issue 9555)
Font Feature and Variation Resolution の誤字を修正
クメール例により良いフォントを使用
generic(khmer-mul) を追加
urange の代わりに unicode-range-token を使用
ユーザーによるフォントの追加/削除の要件を明確化
CSSFontFaceRule.style を他の CSS*Rule.style と一貫させた
修正した font の構文、font-variant-css2 と font-width-css3 の構文を簡素化 syntaxes
monospace を汎用フォントファミリとして復元（誤って削除されていた）
generic-family の構文を修正
フォントコレクションのフラグメント識別子としての PostScript 名の表現を改善
欠落していた @font-face ディスクリプタを追加
異なるディスクリプタのセットやプロパティを公開する宣言ブロックに対して別のインターフェースを使用
インクリメンタルフォント例を最新の IFT 仕様に更新
CSSFontFeatureValuesRule.historicalForms を定義

18.2. 2021年12月21日作業草案からの変更点（リンク）

リンク切れの修正
フォントマッチングアルゴリズムで、バリアブルフォント slnt 軸と合成オブリークの区別
フォントバリエーションがフォント合成とみなされないことを明確化
@font-face に auto 値を指定した場合、適切な "normal" 値を選択する効果を明確化
font-variant-emoji のフォントフォールバックでバリエーションセレクタ対応を改善
オブリーク角度は要求された符号と同じである必要があることを明確化
縦書きテキストにおける合成オブリークの定義
override-colors に CSS Color 5 の絶対色定義を使用
font-stretch を font-width のレガシー名エイリアスに変更
palette-mix() の文法で color-interpolation-method を必須化し、記述上の残りのプローズを削除
fang song と kai に関するジェネリックサンプル追加
ウルドゥー語サンプルに使用したフォント一覧追加
ユーザーがウェブページ描画に利用可能なインストール済みフォントのセットを変更可能でなければならない
ウルドゥー語のナスタリークとフォールバックナスクフォントの例追加
local() 内のキーワードはエラーであることを明確化
system-ui 汎用フォントファミリーが複合的であり、unicodeカバレッジやコンテンツ言語に影響されることを明確化
特定のタイポグラフィスタイルが普遍的に概念（格式や遊び心等）を伝えるという文化的主張を削除
ウルドゥー語、ペルシャ語他向けの generic(nastaliq) ファミリー追加
簡体字と繁体字中国語向け generic(kai) ファミリー追加
cursive と kaiti が同義である主張を削除
serif と sans-serif の汎用フォントファミリーの歴史的理由について注記追加
font-variant-emoji プロパティで十分な機能があるため emoji 汎用フォントファミリー削除
フォント形式表にInternet Media Types追加
インストール済みフォントの影響を Taxonomy から Font Matching Algorithm へ移動
font-family と src 記述子がもはや必須でないことを明確化（スクリプトで後から追加できるため）
generic(fangsong) を一貫して使用（スクリプト固有であることに注意）
新しい <system-family-name> の定義（指定方法に制約あり）
@font-feature-values の生成規則に抜けていた at-keyword 追加
@font-feature-values の文法をリファクタ
CSS Fonts 3 から本仕様へ移行時に落ちていた謝辞を復活
src属性の文法を <font-src-list> 生成規則で定義し直し、"see prose"を削除
存在しない参考情報へのリンク（切れ）を削除
3種類のジェネリックフォントファミリーについて記載（書記系固有か・ローカルインストールフォントに必ずマッチするか）
新しいgeneric()記法の導入
プラットフォームAPIの制限によりカラーフォントレンダリングがsRGBに制限される可能性について注記追加
"forcing colored glyphs not to be used" の残りの記述を削除
font-palette の算出値の改善
Nablaフォントのアニメーションパレット例追加
font-palette の文法・補間・パーセンテージ正規化の説明をCSS Color仕様参照で記述
color-scheme 使用が font-palette: normal に影響することを明確化
傾斜角度・font-feature-settings整数の範囲アノテーション追加
<family-name> の生成規則定義
ローカルインストールフォントに local(<family-name>) を使用
曖昧な記述子の自動リンク修正
<family-name> 生成規則のマークアップ修正
機能名・バリエーション名を文字列ではなく <opentype-tag> で定義
@font-palette-values のディスクリプタで一般数式関数（calc以外も）使用可を明確化
font-synthesis-position プロパティ追加
override-colors で非sRGB色の例追加
productionで rule-list を使用
URLリクエスト修飾子（crossorigin, referrerpolicy, integrity）追加
インクリメンタル技術キーワードを最新仕様に合わせて調整
font-feature-values で最後に定義された値を使用
font-feature-values と font-feature-settings を重複除去・ソート
ユーザーエージェントが特定ユーザーインストールフォントの利用可否を促すUIを推奨
プライバシーを保護しつつ可読性も保つバランスについてPrivacy Considerationsを改善
font のショートハンドに関する明確化（明示的設定・暗黙的リセット・暗黙的カスケード）
ゼロ範囲ディスクリプタの短い表現を明確化
最初に利用可能なフォントの定義を厳密化
unicode-range に emoji キーワード追加
OpenType仕様で常に必須とされているフォント機能のオフ要求は無視可能とした
font-feature-settings・font-variation-settingsに関する著者向けアドバイス明確化
font-variantサブプロパティ文法の読みやすさ改善
仕様に合致するよう例を修正
無効なfont-family記述子の無視の意味を明確化
@font-palette-valuesのfont-family記述子でリスト指定可能に
Web Platform Testsカバレッジ追加
font-paletteと'@font-palette-values'がat riskでなくなった
Web互換性のため、限定的な文字列形式のformat指定を許可
機能名を feature-*、features-* で統一
font-variant-emoji の初期値を auto から normal に変更（他のfont-variant-*と整合性）
font-variant-emojiの値をfont-variantショートハンドに追加
font-variantショートハンドに影響されるfont-variant-*プロパティの正規リスト追加
"system font fallback" を "installed font fallback" に名称変更（system fontとの混同防止）
プロパティ・ディスクリプタ値の範囲表記に更新
仕様に合わない例を修正
カラーフォントはデフォルトで有効化されないことを明確化
font-palette:light|dark の説明を追加
override-colors でキー／パレットインデックスの最後宣言を使用
override-colors の currentColor の例を削除
範囲外パレットインデックスは無視することを明確化
各種誤字修正・マークアップ修正

18.3. 2021年7月29日作業草案からの変更点（リンク）

パレット内の関数や相対長さはルート要素のコンテキストで評価されることを明確化
CSS Fonts 3 からの全体的な変更点セクション追加
font-palette-values の例を追加
技術名を tech に変更
math値をfont-sizeに追加
セキュリティとプライバシーを分離
OpenType, TrueType, Graphite テーブル定義へのリンク追加
"supports" を使っていた例を更新
src記述子のformatから古い"supports"を削除し新しい技術生成規則に置換
font-technology・font-formatを新しいセクションに移動
フォント取得とリソースタイミング報告を正式化、取得フォントに適用
override-color と base-palette から <string> 値を削除
競合override-colorsの正しい処理方法定義
完全なパレットの概念導入
override-colors の説明を明確化
FONT_PALETTE_VALUES_RULE と VIEWPORT_RULE の競合を削除
override-color 色の解決コンテキストを定義（要素ごとではない）
base-palette で dark/light パレット参照可能に
CSSFontPaletteValuesRule のプロパティをreadonlyに変更
palette-identifier を dashed-ident として構文解析（拡張性向上）
override-color記述子をoverride-colorsに改名（色リスト受け入れのため）
base-palette, override-colorで非負整数のみ許可を明確化
fontショートハンドプロパティの文法修正
CSSFontPaletteValuesRuleインターフェースIDLの複数修正
font-palette の "none" 値を削除
インクリメンタル要件を明確化
例をいくつか追加
supportsにインクリメンタルフォント技術追加
オブリークフォントマッチングのクリティカル角度を20度→11度に変更（WG決議）
@font-feature-values で font-display 許可（文では許可されていたが文法に未反映だった）

18.4. 2020年11月17日作業草案からの変更点（リンク）

Graphiteリファレンス追加
フォント機能技術キーワード opentype, aat, graphite 追加
バリアブルフォントが新規・実験的である旨の警告文言削除
導入部のCSS Fonts 3参照を参考情報に
COLRv1とCOLRv0の区別
アイコンフォントの設計良否をUnicodeコードポイントで説明
アクセシビリティに関する考察セクション追加
font-optical-sizing が font-size-adjust と連動することを明確化
ユーザーエージェントの表記を一貫して大文字小文字統一
font-stretch のシリアライズはキーワードでなく数値/パーセンテージであることを明確化
optionalフォントの読み込みヒューリスティクス提案
文法内の繰り返し項目の扱いを明確化
Fetch参照で"potentially CORS-enabled fetch"を置換
font-synthesis プロパティに missing small-caps値追加
どのプロパティがテキストに適用されるか明示
リンク更新
誤字・構文エラー修正

18.5. 2019年11月13日作業草案からの変更点（リンク）

JSなしでフォントのUnicode対応状況を調査できることを明確化
OpenTypeの機能タグが4文字であり、末尾がスペースで埋められることを明確化
フォントメトリクスのオーバーライド記述子を追加
デフォルトで有効なフォント機能へのリンクを追加
ebIDL仕様に合わせて（undefined、voidではない）調整
クロスオリジンの例をhttpsではなくhttpを使うよう修正
OpenTypeに従いfont-rangeが1から999の範囲であることを明確化
（プライバシー）unicode-rangeによるプライバシー攻撃の言及を追加
kernとvkrnの使い分けを明確化
フォントコレクション形式およびFont Collectionの例を追加
CBDTカラーフォントを追加
セキュリティ＆プライバシー付録を追加
ダークモードを含むパレット例を追加
フォントパレットエントリーの色空間を明確化
クロスサイトのフォント漏洩防止をRFC-2119のMUSTとした
カラーフォントの単色フォールバックを明確化
min-font-size、max-font-sizeの残りの参照を削除
色名がASCIIの大文字小文字を区別しないことを明確化
font-paletteに値noneを追加
font-paletteと@font-palette-valuesを危険（at-risk）としてマーク
すべての仕様で値定義参照を統一
optionalの動作をさらに明確化
すべての汎用フォントファミリーがフォントにマッピングされる必要はないことを明確化
汎用フォントファミリーの導入を再構成
汎用フォントファミリーの動機付けを追加
汎用絵文字ファミリーと文字サポートに関する注意を追加
italicがobliqueのフォールバックではないことを明確化
x-heightが大きすぎる場合の警告を追加
font-size-adjustのより良い例を追加
ui-sans-serifの例を追加
その他編集上の改善、誤字修正、リンク切れ修正、マークアップの改善

18.6. 2018年9月20日作業草案からの変更点（リンク）

標準フォントファミリーにプラットフォーム固有名の対応も推奨する注記追加
ui-serif, ui-sans-serif, ui-monospace, ui-rounded 汎用フォントファミリー追加
font-variant @font-face 記述子削除（WG決議による）
font-min-size, font-max-size 削除（WG決議による）
font-style normalは oblique 0deg としてアニメーションすること明確化
複合フォントに不完全なカラーパレットを指定するのが悪手な理由明確化
インターフェースに明示的な [Exposed=Window] 追加
正しい用語（Unicode emoji presentation sequence, Emoji Presentation Participating Code Points）使用
font-variation-settings の各文字列は数値1つとペアであること明確化
font-variant-numericプロパティ定義からtitling-capsを削除
カラーフォントの導入部改善
基本的な多色例追加
font variation settings はフォールバックフォント選択に影響しないこと明確化
italic角度とslnt軸方向の関係明確化
emoji・math汎用フォントファミリー定義
font-size: xxx-large 追加
ex単位のCSS Values定義へのリンク
font-feature-settings の科学的下付き文字の例追加
letter-spacingでオプション合字が無効化されること明確化
font-feature-settingsプロパティをCSS Fonts 3から移植
font-variantショートハンドプロパティをCSS Fonts 3から移植
font-variant-east-asianプロパティをCSS Fonts 3から移植
font-variant-numericプロパティをCSS Fonts 3から移植
font-variant-capsプロパティをCSS Fonts 3から移植
font-variant-positionプロパティをCSS Fonts 3から移植
font-variant-ligaturesプロパティをCSS Fonts 3から移植
font-kerningプロパティをCSS Fonts 3から移植
The CSSFontPaletteValuesRule インターフェースのIDL更新
@font-face 記述子の初期値を normal から auto に変更
font-stretch文法（font matching section）更新
font style matching の例を更新
フォントパレット説明の明確化
chが最初に利用可能なフォントを使うという主張をやめる
編集・例・マークアップの修正、リンク修正、インラインclosed issueの削除
規範的参照の最新版へのリンク

18.7. 2018年4月10日作業草案からの変更点（リンク）

font-variant-emoji に unicode値追加
property説明からmedia項目削除
font-synthesisをロングハンドに分割（将来の拡張性のため）
カラーパレット用 override-color 記述子追加
font-variant-alternates 用 feature-value-name 定義
@font-face src のパースルール明確化
バリアブルフォントの名前付きインスタンス利用許可
付録A：プラットフォームフォントプロパティからCSSプロパティへの対応（CSS Fonts 3から移植）
文字処理関連事項（CSS Fonts 3から移植）
クラスターマッチング（CSS Fonts 3から移植）
font-weight, font-style, font-stretch 記述子に新しい auto値追加
font-display 記述子の値名称明確化
名前付きパレットエントリサポート
Fang Song generic family の詳細追加
オブリークフォントのデフォルト角度を14度に変更
font-feature-values（CSS Fonts 3から移植）
未知・非対応フラグメント識別子の扱い明確化
font palettes の色レコードは0始まりであること明確化
新しいジェネリックフォントファミリーを一貫して使用
編集・例・マークアップ、リンク修正など

18.8. CSS Fonts 3（2018年9月20日勧告）からの変更点（リンク）

これは CSS Fonts 4 における、CSS Fonts 3 との比較での変更点のまとめです。

@font-face に font-display 記述子追加
@font-feature-values 規則追加
font-optical-sizing、font-variation-settings などフォントバリエーションプロパティ追加
カラーフォント対応追加
font-variant-alternates 用 feature-value-name 定義
font-weight, font-style, font-stretch 記述子に新しい auto 値追加
ui-serif, ui-sans-serif, ui-monospace, ui-rounded 汎用フォントファミリー追加
font-size: xxx-large 追加
フォントメトリック上書き記述子追加
汎用フォントファミリー導入の動機付け追加
フォント機能技術キーワード opentype, aat, graphite 追加
font-size に math値追加

適合性

文書の慣例

適合性要件は、記述的な主張とRFC 2119用語の組み合わせで表現されます。規範部分で使われる “MUST”（必須）、 “MUST NOT”（禁止）、 “REQUIRED”（必要）、 “SHALL”（しなければならない）、 “SHALL NOT”（してはならない）、 “SHOULD”（推奨）、 “SHOULD NOT”（非推奨）、 “RECOMMENDED”（推奨）、 “MAY”（許可）、 “OPTIONAL”（任意）といったキーワードはRFC 2119に記載されたとおりに解釈されます。ただし、可読性のため、これらの単語は本仕様書ではすべて大文字で表記されていません。

この仕様の全テキストは、明示的に非規範と記載されているセクション・例・注記を除き、規範的です。 [RFC2119]

この仕様の例は「例えば」などの語で導入されるか、 class="example" のように規範文から分離されています。

参考注記は「注：」で始まり、 class="note" で規範文から分離されます：

アドバイスは注意喚起のための規範セクションであり、 <strong class="advisement"> で他の規範文から分離されます： UAはアクセシブルな代替手段を提供しなければならない。

適合性クラス

本仕様への適合性は、以下3つの適合クラスについて定義されます：

スタイルシートが本仕様に適合するには、このモジュールで定義された文法を使うすべての文が、汎用CSS文法とこのモジュールで定義された各機能の個別文法に従って妥当でなければなりません。

レンダラーが本仕様に適合するには、スタイルシートを適切な仕様どおりに解釈することに加え、本仕様で定義された全機能を正しく構文解析し、文書を適切にレンダリングする必要があります。ただし、デバイスの制限によりUAが文書を正しくレンダリングできない場合でも、UAの非適合とはなりません（例：モノクロモニターでは色表示は不要）。

オーサリングツールが本仕様に適合するには、作成するスタイルシートが汎用CSS文法およびこのモジュールで定義された各機能の個別文法に従って構文的に正しいこと、かつ本モジュールで記載されるスタイルシートのその他適合要件を満たす必要があります。

部分実装

著者が前方互換パース規則を利用してフォールバック値を割り当てられるよう、CSSレンダラーは、サポートしないat規則・プロパティ・値・キーワード・その他構文要素を無効として扱い（適切に無視）、使えるレベルのサポートがないものを全て無視しなければなりません。特に、UAはサポートしない値を一部だけ無視して、サポートされる値だけを複数値プロパティ宣言で適用してはならない：値が無効とみなされた場合（サポート外値は無効）、CSSでは宣言全体が無視されます。

不安定・独自機能の実装

非実験的実装

仕様が現行標準（Candidate Recommendation）段階に達したら、非実験的実装が可能となり、実装者は仕様どおりに正しく実装できているCRレベルの機能については、プレフィックスなしでリリースすべきです。

CSSの相互運用性を確立・維持するため、CSSワーキンググループは非実験的CSSレンダラーが、いずれかCSS機能のプレフィックスなし実装をリリースする前に、実装レポート（必要ならそのテストケース）をW3Cに提出するよう依頼しています。W3Cに提出されたテストケースはCSSワーキンググループによるレビューと修正の対象となります。

名称	値	初期値	適用対象	継承	パーセンテージ	アニメーションタイプ	標準の順序	計算済み値	メディア
font	[ [ <'font-style'> \|\| <font-variant-css2> \|\| <'font-weight'> \|\| <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ] \| <system-family-name>	各プロパティを参照	すべての要素とテキスト	はい	各プロパティを参照	各プロパティを参照	文法に従う	各プロパティを参照
font-family	[ <family-name> \| <generic-family> ]#	ユーザーエージェントによる	すべての要素とテキスト	はい	該当なし	離散	文法に従う	リスト。各項目は文字列および/または <generic-family> キーワード
font-feature-settings	normal \| <feature-tag-value>#	normal	すべての要素とテキスト	はい	該当なし	離散	文法に従う	指定どおり
font-kerning	auto \| normal \| none	auto	すべての要素とテキスト	はい	該当なし	離散	文法に従う	指定どおり
font-language-override	normal \| <string>	normal	すべての要素とテキスト	はい	該当なし	離散	文法に従う	指定された文字列、またはキーワード none
font-optical-sizing	auto \| none	auto	すべての要素とテキスト	はい	該当なし	離散	文法に従う	指定されたキーワード
font-palette	normal \| light \| dark \| <palette-identifier> \| <palette-mix()>	normal	すべての要素とテキスト	はい	該当なし	計算済み値による	文法に従う	指定されたキーワード、識別子、または <palette-mix()> 関数。 <palette-mix()> による結果のパレットが同等であれば、単一のキーワードまたは識別子に簡約される必要があります。
font-size	<absolute-size> \| <relative-size> \| <length-percentage [0,∞]> \| math	medium	すべての要素とテキスト	はい	親要素のフォントサイズを参照	計算済み値の型による	文法に従う	絶対長さ
font-size-adjust	none \| <number [0,∞]>	none	すべての要素とテキスト	はい	該当なし	計算済み値の型による	文法に従う	数値またはキーワード none
font-style	normal \| italic \| left \| right \| oblique <angle [-90deg,90deg]>?	normal	すべての要素とテキスト	はい	該当なし	計算済み値の型による; normal は oblique 0deg としてアニメーション	文法に従う	指定されたキーワード、および角度が指定されている場合は度単位の角度
font-synthesis	none \| [ weight \|\| style \|\| small-caps \|\| position]	weight style small-caps position	すべての要素とテキスト	はい	該当なし	離散	文法に従う	指定されたキーワード
font-synthesis-position	auto \| none	auto	すべての要素とテキスト	はい	該当なし	離散	文法に従う	指定されたキーワード
font-synthesis-small-caps	auto \| none	auto	すべての要素とテキスト	はい	該当なし	離散	文法に従う	指定されたキーワード
font-synthesis-style	auto \| none \| oblique-only	auto	すべての要素とテキスト	はい	該当なし	離散	文法に従う	指定されたキーワード	視覚
font-synthesis-weight	auto \| none	auto	すべての要素とテキスト	はい	該当なし	離散	文法に従う	指定されたキーワード	視覚
font-variant	normal \| none \| [ [ <common-lig-values> \|\| <discretionary-lig-values> \|\| <historical-lig-values> \|\| <contextual-alt-values> ] \|\| [ small-caps \| all-small-caps \| petite-caps \| all-petite-caps \| unicase \| titling-caps ] \|\| [ stylistic(<feature-value-name>) \|\| historical-forms \|\| styleset(<feature-value-name>#) \|\| character-variant(<feature-value-name>#) \|\| swash(<feature-value-name>) \|\| ornaments(<feature-value-name>) \|\| annotation(<feature-value-name>) ] \|\| [ <numeric-figure-values> \|\| <numeric-spacing-values> \|\| <numeric-fraction-values> \|\| ordinal \|\| slashed-zero ] \|\| [ <east-asian-variant-values> \|\| <east-asian-width-values> \|\| ruby ] \|\| [ sub \| super ] \|\| [ text \| emoji \| unicode ] ]	normal	すべての要素とテキスト	はい	該当なし	離散	文法に従う	指定どおり
font-variant-alternates	normal \| [ stylistic(<feature-value-name>) \|\| historical-forms \|\| styleset(<feature-value-name>#) \|\| character-variant(<feature-value-name>#) \|\| swash(<feature-value-name>) \|\| ornaments(<feature-value-name>) \|\| annotation(<feature-value-name>) ]	normal	すべての要素とテキスト	はい	該当なし	離散	文法に従う	指定どおり
font-variant-caps	normal \| small-caps \| all-small-caps \| petite-caps \| all-petite-caps \| unicase \| titling-caps	normal	すべての要素とテキスト	はい	該当なし	離散	文法に従う	指定どおり
font-variant-east-asian	normal \| [ <east-asian-variant-values> \|\| <east-asian-width-values> \|\| ruby ]	normal	すべての要素とテキスト	はい	該当なし	離散	文法に従う	指定どおり
font-variant-emoji	normal \| text \| emoji \| unicode	normal	すべての要素とテキスト	はい	該当なし	離散	文法に従う	指定されたキーワード
font-variant-ligatures	normal \| none \| [ <common-lig-values> \|\| <discretionary-lig-values> \|\| <historical-lig-values> \|\| <contextual-alt-values> ]	normal	すべての要素とテキスト	はい	該当なし	離散	文法に従う	指定どおり
font-variant-numeric	normal \| [ <numeric-figure-values> \|\| <numeric-spacing-values> \|\| <numeric-fraction-values> \|\| ordinal \|\| slashed-zero ]	normal	すべての要素とテキスト	はい	該当なし	離散	文法に従う	指定どおり
font-variant-position	normal \| sub \| super	normal	すべての要素とテキスト	はい	該当なし	離散	文法に従う	指定どおり
font-variation-settings	normal \| [ <opentype-tag> <number> ]#	normal	すべての要素とテキスト	はい	該当なし	本文参照	文法に従う	キーワード normal、またはリスト。各項目は文字列と数値の組
font-weight	<font-weight-absolute> \| bolder \| lighter	normal	すべての要素とテキスト	はい	該当なし	計算済み値の型による	文法に従う	数値。下記参照
font-width	normal \| <percentage [0,∞]> \| ultra-condensed \| extra-condensed \| condensed \| semi-condensed \| semi-expanded \| expanded \| extra-expanded \| ultra-expanded	normal	すべての要素とテキスト	はい	未解決	計算済み値の型による	文法に従う	パーセンテージ。下記参照

CSSフォントモジュール レベル4

要約

この文書のステータス

1. 導入

1.1. 値の定義

2. 基本フォントプロパティ

2.1. フォントファミリー: font-family プロパティ

2.1.1. <family-name> の構文

2.1.2. <generic-family> の構文

2.1.3. <system-family-name> の構文

2.1.4. フェイスとファミリーの関係

2.1.5. 汎用フォントファミリー

2.2. フォントウェイト: font-weight プロパティ

2.2.1. 相対ウェイト

2.2.2. ウェイトが無い場合

2.3. フォント幅: font-width プロパティ

2.3.1. フォント幅: font-stretch 旧名エイリアス

2.4. フォントスタイル: font-style プロパティ

2.5. フォントサイズ: font-size プロパティ

2.5.1. 絶対サイズキーワード対応表

2.6. 相対サイズ指定: font-size-adjust プロパティ

2.7. フォント略記プロパティ: font プロパティ

2.8. 合成フォントフェイスの制御

2.8.1. 合成ボールドの制御: font-synthesis-weight プロパティ

2.8.2. 合成オブリークの制御: font-synthesis-style プロパティ

2.8.3. 合成スモールキャップの制御: font-synthesis-small-caps プロパティ

2.8.4. 合成上付き・下付き文字の制御: font-synthesis-position プロパティ

2.8.5. 合成フェイスの制御: font-synthesis 略記プロパティ

3. フォントレンダリング制御

3.1. フォントレンダリング制御の序章

3.2. フォント表示タイムライン

4. フォントリソース

4.1. @font-face 規則

4.2. フォントファミリー: font-family 記述子

4.3. フォント参照: src 記述子

4.3.1. src記述子のパース

4.3.2. src 記述子内の個別項目のロード

4.3.3. src内の項目選択

4.3.3.1. ローカルフォントフォールバック

4.4. フォントプロパティ記述子: font-style、font-weight、font-width 記述子

4.4.1. フォント幅: font-stretch レガシー名エイリアス

4.5. 文字範囲: unicode-range 記述子

4.5.1. 文字範囲を使った複合フォント定義

4.6. フォント機能とバリエーション: font-feature-settings および font-variation-settings 記述子

4.7. バリアブルフォントの名前付きインスタンス利用: font-named-instance 記述子

4.8. フォントリクエストガイドライン

4.8.1. フォントロードガイドライン

4.8.2. フォント取得の要件

4.9. フォントフェイスごとの表示制御: font-display 記述子

4.9.1. @font-feature-values による フォントファミリーごとのフォント表示制御

4.10. 既定フォント言語の上書き: font-language-override 記述子

4.11. 既定フォントメトリクスの上書き: ascent-override・ descent-override・ line-gap-override 記述子

5. フォントマッチングアルゴリズム

5.1. ローカライズ名のマッチング

5.2. フォントスタイルのマッチング

5.3. クラスターマッチング

5.4. 文字処理に関する課題

6. フォント機能プロパティ

6.1. グリフ選択と配置

6.2. 言語固有表示

6.3. カーニング: font-kerningプロパティ

6.4. 合字: font-variant-ligaturesプロパティ

6.5. 下付き・上付きの形: font-variant-positionプロパティ

6.6. キャピタライゼーション: font-variant-caps プロパティ

6.7. 数字書式: font-variant-numericプロパティ

6.8. 代替字形・スワッシュ: font-variant-alternatesプロパティ

6.9. フォント固有の代替定義: @font-feature-values 規則

6.9.1. 基本構文

6.9.2. 複数値機能値定義

6.10. 東アジアテキスト描画: font-variant-east-asianプロパティ

6.11. フォント描画の総合略記: font-variantプロパティ

6.12. 低レベルフォント機能設定制御: font-feature-settingsプロパティ

6.13. フォント言語オーバーライド: font-language-overrideプロパティ

7. フォント機能とバリエーションの解決

7.1. デフォルト機能

7.2. 機能とバリエーションの優先順位

7.3. 機能優先例

8. フォントバリエーションプロパティ

8.1. 光学サイズ制御: font-optical-sizingプロパティ

8.2. 低レベルフォントバリエーション設定制御: font-variation-settingsプロパティ

CSSフォントモジュールレベル4

4.9.1. @font-feature-values によるフォントファミリーごとのフォント表示制御

12.1. `CSSFontFaceRule` インターフェース

12.2. `CSSFontFeatureValuesRule`インターフェース

12.3. `CSSFontPaletteValuesRule`インターフェース

15.15. この仕様には「セキュリティ考慮事項」と「プライバシー考慮事項」セクションがありますか？

18.1. 2024年2月1日付ワーキングドラフトからの変更点 2024年2月1��ワーキングドラフト

18.2. 2021年12月21日作業草案からの変更点（リンク）

18.3. 2021年7月29日作業草案からの変更点（リンク）

18.4. 2020年11月17日作業草案からの変更点（リンク）

18.5. 2019年11月13日作業草案からの変更点（リンク）

18.6. 2018年9月20日作業草案からの変更点（リンク）

18.7. 2018年4月10日作業草案からの変更点（リンク）

18.8. CSS Fonts 3（2018年9月20日勧告）からの変更点（リンク）