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

W3C作業草案,

この文書の詳細情報
このバージョン:
https://www.w3.org/TR/2024/WD-css-fonts-4-20240201/
最新公開バージョン:
https://www.w3.org/TR/css-fonts-4/
編集者草案:
https://drafts.csswg.org/css-fonts-4/
以前のバージョン:
履歴:
https://www.w3.org/standards/history/css-fonts-4/
フィードバック:
CSSWG課題リポジトリ
仕様内インライン
編集者:
Chris Lilley (W3C)
以前の編集者:
John Daggett (招待 専門家)
(元 Apple Inc.)
この仕様への編集提案:
GitHub 編集者
テストスイート:
https://wpt.fyi/results/css/css-fonts/

Copyright © 2024 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.

概要

この仕様書は、既存の CSS Fonts 3 仕様への修正と追加機能を定義します。

CSS は、構造化文書（HTMLやXMLなど）の画面表示や印刷などのレンダリングを記述するための言語です。

この文書のステータス

このセクションは、公開時点での文書のステータスについて説明します。 現在のW3C出版物一覧やこの技術報告書の最新改訂版は、 W3C技術報告書インデックス https://www.w3.org/TR/ で確認できます。

この文書は CSS作業グループによって 作業草案 として 勧告ルート を用いて公開されました。 作業草案としての公開は W3C やその会員による承認を意味しません。

この文書はドラフトであり、 いつでも更新、置換、または他の文書によって廃止される可能性があります。 この文書を進行中の作業以外として引用するのは不適切です。

ご意見は GitHubで課題を提出（推奨）するか、 件名に仕様コード「css-fonts」を含めてください。例: “[css-fonts] …コメント概要…”。 すべての課題やコメントは アーカイブされています。 または、(アーカイブ済み) 公開メーリングリスト www-style@w3.org へ送信することもできます。

この文書は 2023年11月3日 W3Cプロセス文書 に基づいて管理されています。

この文書は W3C特許ポリシーの下で運用されているグループによって作成されました。 W3Cは、グループの成果物に関連して提出された特許開示の公開リストを管理しています。 そのページには特許開示の方法も記載されています。 個人が特許の実際の知識を持っており、その特許が必須クレームを含むと考える場合、 W3C特許ポリシー第6節に従って情報を開示しなければなりません。

以下の機能は「リスクあり」とされており、CR期間中に削除される可能性があります：

「リスクあり」はW3Cプロセスにおける専門用語であり、必ずしも機能が削除や遅延の危険にあることを意味しません。 この用語は、WGが機能の相互運用性のある実装がタイムリーに行われるか疑問があると判断した場合に付されます。 こうすることで、WGは提案勧告段階に移行する際、まずその機能を除外した新しい候補勧告を公開せずに機能を削除することが可能になります。

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種類あります：

  1. すべてのUnicode文字に適用され、必ずローカルフォントにマッチする汎用（例：monospaced）。

  2. すべてのUnicode文字に適用されるが、システムによってはローカルフォントにマッチしない場合がある汎用（例：ui-rounded）。

  3. 書記体系ごとに限定され、一部の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
ウィンドウのステータスバーで使われるフォント。
テスト

2.1.1. <family-name> の構文 

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

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

注: これは、引用符なしのフォントファミリー名ではほとんどの句読点や先頭の数字をエスケープしなければならないことを意味します。

これを説明するため、以下の宣言は無効です: 
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;

フォントファミリー値定義において 事前定義キーワードや、CSS全域キーワードと誤解され得る識別子は使用できません。

注: つまり、<generic-family>名やシステムフォント名、 CSS全域キーワードと同じ名前のフォントが本当にある場合は、必ず引用符で囲む必要があります。

この例のように、汎用ファミリーなどに似た珍しいフォント名は 引用符で囲むことで有効となります: 
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">

キーワード値（例: CSS全域キーワード inherit や <generic-family> の serif など）と同じ名前のフォントファミリー名は 混同を防ぐために必ず引用符で囲んでください。 ユーザーエージェントは、これらのキーワードを<family-name>型に一致するものとして扱ってはなりません。

2.1.2. <generic-family> の構文 

<generic-family> = generic( <custom-ident>+ ) | <string> | <custom-ident>+
最近定義された汎用フォントファミリーは関数構文で識別されます: 
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は一致しません:
family and face names
ファミリー名と個別フェイス名

注: 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汎用ファミリーより大きい場合が多いです。

注: serifとsans-serifは少数の書記体系にしか適用されません。 CSSで汎用ファミリーとして使われるのは歴史的な理由で、 初期Web開発がラテン文字中心だったことが由来です。 より適切で広く使える名称としては「modulated」や「monoline」等が考えられますが、 Web互換性のため変更できません。

CSSでは「serif」という用語を任意のスクリプトのフォントに適用しますが、 各スクリプト固有の名称（例：明朝体（日本語）、宋体（中国語）、バタン（韓国語））の方が馴染み深い場合もあります。 アラビア語の場合、ナスフ体はserifに対応します。

serifは必ず1つ以上の一致するフォントフェイスにマッピングされなければなりません。

注: そのフォントフェイスの文字カバー率は保証されません。 そのため、serifがマッピングされてもすべてのコンテンツに使われるとは限りません。

sample serif fonts
セリフ体フォントの例
sans-serif
サンセリフ体フォント（CSS用語）は、一般的にコントラストが低く（縦横の線がほぼ同じ太さ）、 ストロークの末端は装飾がなくシンプルです。 サンセリフ体もプロポーショナル間隔です。 太さの違いはserifより少ないことが多いです。 CSSでは「sans-serif」を任意のスクリプトに適用しますが、 各スクリプト固有の名称（ゴシック（日本語）、黒体（中国語）、グリム（韓国語））の方が馴染み深い場合もあります。

sans-serifは必ず1つ以上の一致するフォントフェイスにマッピングされなければなりません。

注: そのフォントフェイスの文字カバー率は保証されません。 そのため、sans-serif がマッピングされてもすべてのコンテンツに使われるとは限りません。

sample sans-serif fonts
サンセリフ体フォントの例
cursive
カーシブ体フォントは一般的に筆記体スタイルで、 印刷文字よりも手書きのペンやブラシに近い見た目です。 CSSではどんなスクリプトにも「cursive」を適用しますが、 Chancery、Brush、Swing、Scriptなどフォント名で使われる場合もあります。
sample cursive fonts
カーシブ体フォントの例
fantasy
ファンタジー体フォントは主に装飾的または表現的なフォントで、 装飾的・表現的なグリフを持ちます。 実際の文字を表さないPiやピクチャーフォントは含みません。
sample fantasy fonts
ファンタジー体フォントの例
monospace
モノスペース体フォントの唯一の条件はすべてのグリフが同じ幅であることです。 コンピューターコードの表示に使われることが多いです。

monospaceは必ず1つ以上の一致するフォントフェイスにマッピングされなければなりません。

注: そのフォントフェイスの文字カバー率は保証されません。 そのため、monospaceがマッピングされてもすべてのコンテンツに使われるとは限りません。

sample monospace fonts
モノスペース体フォントの例
system-ui
この汎用フォントファミリーは、（他の§ 2.1.5 汎用フォントファミリーと同様に複合フォントである場合もあり）、 プラットフォームのデフォルトユーザーインターフェースフォントでテキストを描画します。 クロスプラットフォームUAは各プラットフォームごとに異なるフォントを使うべきです。 system-uiの目的はWebコンテンツをOSの外観や操作性に統合することです。
テスト

実際に使われるフォントは、Unicodeカバー範囲やコンテンツ言語などの要素によって決まります。

他の汎用フォントファミリー同様、 system-uiの具体的インストールフォントへの代替は算出スタイルに影響しません。 
<div id="system-text" style="font-family: system-ui"></div>
...
window.getComputedStyle(document.getElementById("system-text")).getPropertyValue("font-family");

上記スクリプトは system-uiが実際にどのシステムUIフォント集合に展開されるかを知るべきではありません。 特に、上記スクリプトは全プラットフォームで "system-ui" という結果を返すべきです。

math
このフォントファミリーは数式表現に使用されます。

この種のフォントは、階層的な数式レイアウトを補助する追加データ（例：OpenType MATHテーブル）を含む場合があります。 特に、数式組版に役立つスタイルや伸縮グリフバリアントを含む場合があります。

generic(fangsong)
このフォントファミリーは中国語の仿宋（Fang Song）書体用です。 Fang Songは宋体（serif）と楷書体（generic(kai)）の中間に位置する緩やかな形式です。 横線が傾き、端の装飾が小さく、宋体に比べて線の太さの変化が少ないのが特徴です。 Fang Songは中国政府の公式文書によく使われます。

注: generic(fangsong)はローカルインストールフォントに一致しない場合がありますが、一致する場合はFang Songスタイルになります。

仿宋体フォントによる中国語テキスト例
generic(kai)
このフォントファミリーは簡体字・繁体字中国語に使われます。 主要な書体で、中国語テキストに筆書体スタイルを提供します。 手書き感が顕著で、公式文書や教科書によく使われます。 台湾の公文書はほぼ全て楷書体（Kai）を使います。 他書体と組み合わせて、見出し・引用・会話文など本文と区別したい部分にも使われます。

注: generic(kai)はローカルインストールフォントに一致しない場合がありますが、一致する場合はKaiスタイルになります。

楷書体フォントによる中国語テキスト例
generic(nastaliq)
このフォントファミリーはウルドゥー語やカシミール語の標準書体であり、 ペルシャ語などでも詩など文学ジャンルで好まれます。 主な特徴は、連結文字の傾いたベースラインと、 基本文字やダイアクリティカルマークの複雑な形状・配置です。 多くのグリフや合字に独特の形があります。 ウルドゥー語やカシミール語ではナスフ体へのフォールバックは避けるべきです。

注: generic(nastaliq)はローカルインストールフォントに一致しない場合がありますが、一致する場合はNastaliqスタイルになります。

السلام علیکم
ウルドゥー語 Nastaliq フォント例 (Noto Nastaliq Urdu)
السلام علیکم
ウルドゥー語 Naskh フォント例 (Scheherazade New)
ui-serif
このフォントファミリーはシステムのUI用セリフ体バリアントです。 ui-serifの目的は WebコンテンツをOSの外観・操作性に統合することです。

注: ui-serifは 適切なシステムフォントがないプラットフォームではマッピングされない場合があります。

sample ui-serif font
macOS Catalina・iOS 13のUI用セリフ体フォント例: New York
ui-sans-serif
このフォントファミリーはシステムのUI用サンセリフ体バリアントです。 ui-sans-serifの目的は WebコンテンツをOSの外観・操作性に統合することです。

注: ui-sans-serifは 適切なシステムフォントがないプラットフォームではマッピングされない場合があります。

sample ui-sans-serif font
macOS Catalina・iOS 13のUI用サンセリフ体フォント例: San Francisco
ui-monospace
このフォントファミリーはシステムUIのモノスペース体バリアントです。 ui-monospaceの目的は WebコンテンツをOSの外観・操作性に統合することです。

注: ui-monospaceは 適切なシステムフォントがないプラットフォームではマッピングされない場合があります。

sample ui-monospace font
macOS Catalina・iOS 13のUI用モノスペース体フォント例: SF Mono
ui-rounded
このフォントファミリーはシステムUIの丸み付きバリアントです。 ui-roundedの目的は WebコンテンツをOSの外観・操作性に統合することです。

注: ui-rounded は適切なシステムフォントがないプラットフォームではマッピングされない場合があります。

sample ui-rounded font
macOS Catalina・iOS 13のUI用丸み付きフォント例: SF Rounded

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

名前: font-weight
値: <font-weight-absolute> | bolder | lighter
初期値: normal
適用対象: すべての要素とテキスト
継承: はい
パーセンテージ: 該当なし
算出値: 数値（下記参照）
正規順序: 文法による
アニメーションタイプ: 算出値型による
テスト

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）

注: フォントによっては内部で独自のウェイト名の対応づけを持つ場合もありますが、CSSではそのマッピングは無視されます。

normal
400 と同じです。
bold
700 と同じです。
bolder
継承値より太いウェイトを指定します。 § 2.2.1 相対ウェイト参照。
lighter
継承値より細いウェイトを指定します。 § 2.2.1 相対ウェイト参照。

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 プロパティ

名前: font-width
値: normal | <percentage [0,∞]> | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
初期値: normal
適用対象: すべての要素とテキスト
継承: はい
パーセンテージ: 未解決
算出値: パーセンテージ（下記参照）
正規順序: 文法による
アニメーションタイプ: 算出値型による
テスト

font-width プロパティは、フォントファミリーからノーマル・凝縮・拡張フェイスを選択します。 値はパーセンテージ、または以下の表で定義されるパーセンテージにマッピングされるキーワードで指定します:

絶対キーワード値 数値値
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となります。

テスト

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

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

名前: font-style
値: normal | italic | oblique <angle [-90deg,90deg]>?
初期値: normal
適用対象: すべての要素とテキスト
継承: はい
パーセンテージ: 該当なし
算出値: 指定されたキーワード、および指定されていれば角度（度）
正規順序: 文法による
アニメーションタイプ: 算出値型による;normalは oblique 0deg としてアニメーションする
テスト

font-style プロパティは、イタリック体やオブリーク体フェイスの選択を可能にします。 イタリックは一般的に筆記体風で、オブリークは通常レギュラーフェイスを傾けたものです。

Palatinoの「a」やBaskervilleの「N」をグレーで人工的に傾斜させた表示と、 実際のイタリックバージョンを比較します:
artificial sloping vs. real italics
人工的な傾斜と実際のイタリック体の違い

値の意味は以下の通りです:

normal
ノーマルフェイス（イタリックでもオブリークでもない）に一致します。 これは "oblique 0" の値を表します。
italic
イタリックフェイスにラベル付けされたフォント、 存在しなければオブリークフェイスに一致します。
oblique <angle [-90deg,90deg]>?
オブリークフェイスの一致を制御します。 正の角度は時計回りの傾斜、負の角度は反時計回りの傾斜を示します。 <angle>がない場合は 14deg となります。 （フォント内で独自の「oblique」対応付けがある場合もありますが、CSSでは無視されます。） 小数および負の値も許容されますが、-90deg未満または90deg超は無効です。 オブリークフェイスが存在せず、font-synthesis-styleがautoの場合、合成オブリークフェイスが生成されます。

フォントファミリーはイタリックもオブリークも持たない場合、イタリックだけ、オブリークだけ、両方、様々な角度の複数オブリーク、またはその組み合わせを持つ場合があります。 フォントマッチング処理は要求された角度と符号が一致し、（複数ある場合）最も近い角度のフォントを選択します。 一般的に、要求角度が11deg以上ならより大きな角度、そうでなければより小さな角度が優先されます。 （詳細は§ 5 フォントマッチングアルゴリズム参照） TrueType／OpenTypeバリアブルフォントは slntバリエーションでオブリーク値を、 italバリエーションで値1を指定してイタリック値を実装します。

注: OpenTypeのslnt軸は、 正の角度が反時計回りの傾斜を意味し、CSSとは逆方向です。 CSS実装はバリエーション利用時この逆転を考慮します。

垂直書字モードで正・負のオブリークはどちらに傾斜すべきか？ 逆方向の傾斜（垂直書字で必要）をどう実現するか？

イタリックやオブリークフェイスがない場合、非オブリークフェイスを人工的な傾斜操作で合成することができます。 この人工的なオブリークフェイスの利用はfont-synthesisで無効化できます。

注: オブリークフェイスはレギュラーのグリフを人工的に傾けて模擬できますが、 本物のオブリークとは異なり、傾斜しても光学的な線の太さが保たれません。 合成より実際のオブリークフォント利用が望ましいです。

フォントマッチングの観点では、 ユーザーエージェントはitalicをobliqueの同義語として扱っても構いません。 両者を厳密に区別するUAは、italicに対して合成してはなりません。

注: 合成手法は、キリル文字などイタリック形状が大きく異なる文字種には不適切な場合があります。 可能なら実際のイタリックフォントを利用してください。

注: 多くの文字種では、ノーマルフェイス内で筆記体を混ぜる伝統がありません。 中国語・日本語・韓国語フォントはほぼイタリックやオブリークを持ちません。 複数文字種対応フォントでも、イタリックフェイスでアラビア文字など特定文字種のグリフが省略される場合があります。 UAはフォント間で合成する際、フェイスごとの文字マップの違いを考慮すべきです。 イタリックフェイスはローマンフェイスと異なる文字マップを持つことがあります。

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

名前: font-size
値: <absolute-size> | <relative-size> | <length-percentage [0,∞]> | math
初期値: medium
適用対象: すべての要素とテキスト
継承: はい
パーセンテージ: 親要素のフォントサイズを参照
算出値: 絶対長
正規順序: 文法による
アニメーションタイプ: 算出値型による
テスト

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

注: グリフがEMボックスにどの程度収まるかは要件がありません。 同じfont-sizeでもフォントごとに見かけの大きさが異なる場合があります。 また、グリフがEMボックス外に大きくはみ出ることもあり、 包含ブロックをはみ出すと インクオーバーフローになることがあります。

値の意味は以下の通りです:

<absolute-size>
<absolute-size>キーワードは、ユーザーエージェントが計算して保持するフォントサイズ表の項目を参照します。 § 2.5.1 絶対サイズキーワード対応表参照。

値の例:

[ 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程度）で親要素に対し拡大・縮小しても構いません。 この比率は要素ごとに変化する場合があります。

注: 視覚障害者はデフォルトより高い比率をUAに要求し、可読性を上げる場合があります。 また、UAは段落本文とタイトルテキストを検出した場合、比率を変更する場合もあります。

<length-percentage [0,∞]>
長さ値は絶対フォントサイズ（UAのフォント表とは無関係）を指定します。 負の長さは無効です。

パーセンテージ値は親要素の算出font-sizeに対する絶対フォントサイズを指定します。 負のパーセンテージは無効です。

注: パーセンテージやフォント相対長（emや rem）を使うと、スタイルシートの堅牢性とカスケード性が向上します。

math
数学的スケーリング規則を適用して font-sizeプロパティの算出値を決定する必要があります。
以下のスタイルシートは font-sizeの指定方法を様々に示しています。 
p { font-size: 12pt; }
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }

注: このプロパティの使用値は、 font-size-adjustの影響で算出値と異なる場合があります。 ただし、子要素は算出font-size値を継承し、 font-size-adjustの影響は受けません（そうでなければ効果が累積してしまうため）。

特定のフォントサイズが利用できない場合、このプロパティの実際値は使用値と異なることがあります。

font-sizeはレスポンシブなタイポグラフィのためにクランプ可能です。 
font-size: clamp(10px, ..., 36px);

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

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

CSS絶対サイズ値 xx-small x-small small medium large x-large xx-large xxx-large
倍率 3/5 3/4 8/9 1 6/5 3/2 2/1 3/1
HTML見出し h6 h5 h4 h3 h2 h1
HTML font サイズ 1 2 3 4 5 6 7

注: CSS1では隣接インデックス間の倍率が1.5と提案されていましたが、ユーザー体験上大きすぎました。 CSS2ではコンピュータ画面用の倍率が1.2とされましたが、小サイズで依然として問題が生じました。 新しい倍率は各インデックスごとに変化し、可読性を改善しています。

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

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

名前: font-size-adjust
値: none | <number [0,∞]>
初期値: none
適用対象: すべての要素とテキスト
継承: はい
パーセンテージ: 該当なし
算出値: 数値またはキーワードnone
正規順序: 文法による
アニメーションタイプ: 算出値型による
テスト

同じフォントサイズでも、文字の見かけサイズや実際の可読性はフォントごとに異なります。 ラテンやキリルなど大文字・小文字の区別がある文字種では、 小文字の高さ（x-height）が大文字と比べてどれくらいかが可読性の決定要素となります。 これは一般にアスペクト値と呼ばれ、フォントのx-heightをフォントサイズで割った値です。

注: 発音記号などが使われるテキストでは、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・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 の有無によるテキスト比較

このプロパティにより、著者は要素のアスペクト値を指定でき、 第一候補フォントのx-heightを維持できます（置換される場合も含む）。 値の意味は以下の通りです:

none
フォントのx-heightを維持しません。
<number [0,∞]>
以下の計算で使われるアスペクト値を指定します: 
c  =  ( a / a' ) s

各記号の意味:

s  =  font-size値
a  =  aspect value（font-size-adjustプロパティで指定）
a' =  実際のフォントのaspect value
c  =  使用する調整後フォントサイズ

負の値は無効です。

この値は選択されたすべてのフォントに適用されますが、通常はfont-familyリストの最初のフォントのアスペクト値に基づいて指定すべきです。 正確に指定すると、上記式の(a/a')項は最初のフォントで1になり、調整は行われません。 不正確に指定すると、最初のフォントで古いユーザーエージェントで表示が異なります（font-size-adjust未対応の場合）。

font-size-adjustの値は、font-sizeの使用値に影響しますが、算出値には影響しません。 フォントメトリクスに基づく相対単位（exやch）のサイズには影響しますが、 em単位のサイズには影響しません。 line-heightの数値値は算出font-sizeに基づくため、 font-size-adjustはline-heightの使用値に影響しません。

注: CSSでは著者はline-heightをfont-sizeの倍数で指定することが多いです。 font-size-adjustプロパティはfont-sizeの使用値に影響するため、 このプロパティ使用時はline-height設定に注意してください。 tight（詰めすぎ）な設定にすると、行が重なって表示される場合があります。

著者は、同じ内容のスパンを比較し、aspect値を算出できますが、 異なるfont-size-adjustプロパティを指定します。 同じfont-sizeを使用した場合、スパンは font-size-adjust値がそのフォントに対して正確であれば一致します。

ボーダー付きの2つのスパンを用いて、フォントのaspect値を決定します。 両方のスパンはfont-sizeが同じですが、 font-size-adjustプロパティは右側のスパンのみに指定します。 まず値を0.5として始め、 aspect値を調整していくことで、 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
Futuraのアスペクト値0.5設定例

右のボックスが左より少し大きいので、このフォントのアスペクト値は0.5未満です。 枠線が揃うまで値を調整してください。

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

名前: font
値: [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | <system-family-name>
初期値: 個別プロパティを参照
適用対象: すべての要素とテキスト
継承: はい
パーセンテージ: 個別プロパティを参照
算出値: 個別プロパティを参照
正規順序: 文法による
アニメーションタイプ: 個別プロパティを参照
テスト

このプロパティの構文は、フォント関連の複数プロパティを一括設定する 伝統的なタイポグラフィ略記法に基づいています。 歴史的・後方互換の理由から、ほぼ略記プロパティです。

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プロパティのすべてのサブプロパティは、 明示的に設定・暗黙的にリセットグループで まず初期値にリセットされます。

次に、明示的に設定グループの 値が略記で指定されていれば、その値に設定されます。 許容値・初期値の定義は個別プロパティ定義を参照してください。

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）を設定します。 残り2つのプロパティ（font-styleとfont-weight）にはnormalキーワードが適用されます。

6個目のルールはfont-style、font-width、font-size、 font-familyを設定し、 他のフォントプロパティは初期値になります。

7個目のルールはfont-styleをoblique 25deg、 font-weightを753、 font-widthをcondensedに設定します。 このルールの25degは "oblique" キーワードの直後でなければなりません。

CSS 2.1でfont-widthプロパティが定義されていなかったため、 fontルール内で font-width値を使う場合、 古いユーザーエージェント向けのバージョンも併記してください： 

p {
  font: 80% sans-serif;   /* 旧UA向け */
  font: condensed 80% sans-serif;
}

システムフォントは全体としてのみ設定可能です。 すなわち、フォントファミリー・サイズ・ウェイト・スタイルなど すべて同時に設定されます。 その後、必要に応じて個別に変更できます。 指定された特徴のフォントがプラットフォームに存在しない場合は、 ユーザーエージェントが適切に代替（例：captionフォントの小さい版を small-captionフォントに使うなど）するか、 UAのデフォルトフォントを代用してください。 通常フォントと同様、 システムフォントで個々のプロパティが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 }

例えば、あるシステムのドロップダウンメニュー用フォントが 9ポイントCharcoal、ウェイト600の場合、 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: 視覚
テスト

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

auto
ボールドフェイスの合成が許可されます
none
ボールドフェイスの合成は許可されません

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

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

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

auto
オブリークフェイスの合成が許可されます
none
オブリークフェイスの合成は許可されません

縦書きテキストでは、正のオブリーク角度の場合、グリフは傾けられ、行上側の端が行右側へ、行下側の端が行左側へ移動します。 負のオブリーク角度の場合、グリフは傾けられ、行上側の端が行左側へ、行下側の端が行右側へ移動します。 傾斜はグリフの中心を基準とします。

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
適用対象: すべての要素とテキスト
継承: はい
パーセンテージ: 該当なし
算出値: 指定キーワード
正規順序: 文法による
アニメーションタイプ: 離散
テスト

このプロパティはfont-synthesis-weight、 font-synthesis-style、 font-synthesis-small-caps、 font-synthesis-position の略記プロパティです。値のマッピングは以下の通りです:

font-synthesis値 font-synthesis-weight値 font-synthesis-style値 font-synthesis-small-caps値 font-synthesis-position値
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秒 はい はい

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

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

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

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ページの内容が他のページに影響することになり、攻撃者が攻撃ベクトルとして利用できます。 これらの制限はキャッシュ挙動には影響せず、 フォントは他のウェブリソース同様にキャッシュされます。

この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-patch | incremental-range | incremental-auto ]
<font-features-tech>= [features-opentype | features-aat | features-graphite]
<color-font-tech>= [color-COLRv0 | color-COLRv1 | color-SVG | color-sbix | color-CBDT ]
テスト

フォーマット識別にはキーワードが推奨されますが、 後方互換の理由から以下の文字列も受理され、 同等の現行標準構文と同じ効果となります。

文字列形式 同等構文
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)
テスト

注: CSS WGは今後このフォーマット文字列リストの拡張を予定していません。

コンポーネント値が正しくパースされ、 UAがサポートするフォントフォーマットまたはフォント技術であれば サポート対象リストに追加します。 パースエラーや未サポートのフォーマット・技術の場合は サポート対象リストに追加しません。

この処理後にサポート対象エントリがない場合は、 src記述子の値はパースエラーです。

これらのパース規則により、 特定のフォント技術やフォーマットをサポートしないUAでも フォントのグレースフルフォールバックが可能になります。

例えば、インクリメンタル転送非対応時は パフォーマンス最適化のためwoff2圧縮版フォントを提供します。 その後、range-request方式によるインクリメンタル転送用に、 生の非圧縮OpenTypeフォントを提供し、 クライアントがバイトレンジリクエストを行えるようにします。 
@font-face {
  font-family: "MyIncrementallyLoadedWebFont";
  src: url("FallbackURLForBrowsersWhichDontSupportIncrementalLoading.woff2") format("woff2");
  src: url("MyIncrementallyLoadedWebFont.otf") format(opentype)  tech(incremental-range);
}

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

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

テスト

適合するユーザーエージェントは、 フラグメント識別子が不明または未対応の場合、 フォントリソースのダウンロードをスキップしなければなりません。 例えば、OpenTypeコレクション未対応の古いユーザーエージェントは リスト内の次のurlにスキップします。

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のレコードにあります （詳細は[OPENTYPE]）。 PostScript名はOSXの全フォントとWindowsのPostScript CFFフォントでよく使われます。 フルフォント名（nameID=4）はWindowsのTrueTypeグリフフォントで一意キーとして使われます。

OpenTypeフォントでフルフォント名のローカライズが複数ある場合は、 US英語バージョン（Windows言語ID=0x409、Macintosh言語ID=0）を使うか、 US英語名がなければ最初のローカライズ名を使ってください （OpenType仕様ではすべてのフォントでUS英語名含有が推奨されています）。 システムロケールがオランダ語のときにオランダ語名でマッチ、など 他言語名でマッチするUAは非適合です。

注: これは英語優先という意味ではなく、 フォントバージョンやOSローカライズ間のマッチ不一致を避けるためです。 スタイル名（例: "Bold"）は多言語にローカライズされるため、 利用可能なローカライズのセットが プラットフォームやフォントバージョンで大きく異なります。

family名（nameID=1）とstyle名（nameID=2）の連結でマッチするUAは非適合です。

注: これにより、 通常は参照できない大ファミリー内フェイスも参照可能になります。

ローカルフォントや他文書の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; }

下記例では、適合UAは'gentium.eot'フォントを決してロードしません。 理由はsrc記述子の最初の定義で使われているものの、 同じ@font-face規則内の 2つ目の定義で上書きされるためです:

@font-face {
font-family: MainText;
src: url(gentium.eot);                     /* 古いUA用 */
src: local("Gentium"), url(gentium.woff);  /* src定義を上書き */
}

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

名前: font-style
対象: @font-face
値: auto | normal | italic | oblique [ <angle [-90deg,90deg]>{1,2} ]?
初期値: auto
名前: font-weight
対象: @font-face
値: auto | <font-weight-absolute>{1,2}
初期値: auto
名前: font-width
対象: @font-face
値: auto | <'font-width'>{1,2}
初期値: auto
テスト

これらの記述子はフォントフェイスの特性を定義し、スタイルを特定フェイスにマッチングする過程で使われます。 複数の@font-face規則でファミリーが定義されている場合、 ユーザーエージェントはファミリー内のすべてのフェイスをダウンロードするか、 これらの記述子を使って文書で実際に使われているスタイルにマッチするフォントフェイスだけを選択的にダウンロードすることができます。 これら記述子の値の意味は、対応するフォントプロパティと同じですが、相対キーワード（bolderやlighter）は使えません。 記述子が省略された場合、初期値が使われます。 指定値が同名プロパティの許容値範囲外の場合、パースエラー扱いとなります。

これら3つの記述子では値のかわりに範囲指定もできます。 単一値の場合は開始点と終了点が同じ範囲と同じ意味です。 ユーザーエージェントは範囲の開始点と終了点の算出値を入れ替えることで、減少方向の範囲を禁止します。 両端は包括的です。 範囲は下記フォントマッチングアルゴリズムで使用されます。

テスト

これら3記述子のauto値は以下の効果があります:

これらのフォントフェイススタイル属性の値は、 元のフォントデータが示すスタイルのかわりに使われます。 これにより、著者は元データの構成と異なる場合でも 柔軟にフェイスを組み合わせることができます。 合成ボールド・合成オブリークを実装するUAは、 フォントデータが示すスタイル属性ではなく、 記述子が必要と示す場合のみ合成処理を適用しなければなりません。 ただし、@font-faceで定義されたフォントに適用されるバリアブル値は、 これら記述子で指定された値とフォントファイル自身がサポートする値の両方でクランプされます。

本節で定義されたフォント記述子は、 @font-face規則で定義されたフォント集合から ファミリー内のフォントを選択するために使われます。

単一のレギュラーフェイスを持つファミリーを考えます:

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

未スタイルテキストは@font-face規則で定義された レギュラーフェイスで表示されます:

regular face display

しかし、イタリックテキストは別フェイスが定義されていないため、 多くのユーザーエージェントでレギュラーフェイスのグリフを合成オブリークで表示します:

synthetic italics display

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

@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 weight、normal stretch、italic style属性を与えています。 イタリックテキスト表示時はこのフォントが使われ、 イタリックテキストに最適なマッチとなります。 これにより、タイプデザイナーが設計したグリフで表示され、 レギュラーフェイスの合成オブリークではなくなります:

real italics display

特定ファミリー内のフェイス選択の詳細はフォントマッチング節を参照。

フォントは互換性のある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規則がLastimaに指定されていれば、 100〜399以外の値でもlastima-varfont.woffが使われる場合があります。 詳細は§ 5 フォントマッチングアルゴリズム参照。

上記のように、複数の@font-face規則を ひとつのファミリーにまとめて、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規則は lastima-varfont-lightrange.woffをfont-weightが100〜399の時に、 lastima-varfont-heavyrange.woffをfont-weightが400〜700の時に使うことを示しています。

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

歴史的理由により、font-stretch記述子が存在します。 これはレガシー名エイリアスであり、 font-widthと同じ機能です。

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

名前: unicode-range
対象: @font-face
値: <urange>#
初期値: U+0-10FFFF
テスト

この記述子は、宣言されたフォントフェイスがサポートする可能性のあるUnicodeコードポイント集合を定義します。 記述子値はカンマ区切りのUnicode範囲（<urange>）値のリストです。 これら範囲の合併が、ユーザーエージェントが特定テキストランに対して フォントリソースをダウンロードするかどうか判断する際のヒントとなるコードポイント集合を定義します。

各<urange>値は UNICODE-RANGEトークンであり、 "U+"または"u+"の接頭辞の後に以下3種のいずれかの形式のコードポイント範囲が続きます。 これら形式に合致しない範囲は無効となり、宣言は無視されます。

単一コードポイント（例: U+416）
Unicodeコードポイント。1〜6桁の16進数で表記
区間範囲（例: 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の カンマ区切りリスト内で範囲が重複しても構いません。 これら範囲の合併が対応するフォントに使えるコードポイント集合となります。 UAはこの集合外のコードポイントに対してフォントをダウンロード・使用してはなりません。 UAは同じ集合を表す異なるリストへ正規化しても構いません。

関連フォントがunicode-rangeで 定義されたコードポイント全てにグリフを持つとは限りません。 フォント使用時、有効文字マップは unicode-rangeで定義されたコードポイントと フォントの文字マップの 積集合になります。 これにより、著者は基底フォントがサポートする厳密な範囲を気にせず広範囲を指定できます。

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

同じファミリー・スタイル記述子値でunicode範囲が異なる複数@font-face規則を使うことで、 異なるスクリプトごとに異なるフォントグリフを混在させる複合フォントが作れます。 これは、単一スクリプトのみを含むフォント（例: ラテン、ギリシャ、キリル）を組み合わせたり、 著者がよく使う文字とあまり使わない文字でフォントを分割する用途にも使えます。 UAは必要なフォントのみダウンロードするため、ページ帯域削減にも役立ちます。

同じファミリー・スタイル記述子値の@font-face規則でunicode範囲が重複する場合は、 逆順（後に定義された規則が先にチェックされる）となります。

特定言語や文字用例:

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からこのコードポイントが除外されます。次に日本語フォントを評価しますが、U+3000-9FFFおよびU+ff??はU+21E8を含まないため日本語フォントはダウンロードされません。最後にフォールバックフォントが検討されます。@font-face規則のフォールバックフォントはunicode-rangeを定義していないため、値は全Unicodeコードポイント範囲となり、このフォントがダウンロードされて矢印文字の描画に使われます。

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

名前: font-feature-settings
対象: @font-face
値: normal | <feature-tag-value>#
初期値: normal
テスト
名前: font-variation-settings
対象: @font-face
値: normal | [ <string> <number>]#
初期値: normal
テスト

これらの記述子は、@font-face規則で定義されたフォントがレンダリングされる際に適用される初期設定を定義します。フォント選択には影響しません。 値は、下記で定義される対応するfont-feature-settingsやfont-variation-settingsプロパティの値と同じですが、 CSS全域キーワードは省かれます。複数のフォント機能記述子・プロパティ・バリエーションが使用され、名前付きインスタンスも併用する場合、 テキストレンダリングへの累積効果は下記§ 7 フォント機能・バリエーション解決で説明されます。

これらの記述子は、@font-face規則が表現するフォントオブジェクト自体に機能やバリエーション値を設定します。 要素全体ではなく、要素内の一部グリフだけがその機能でレンダリングされる場合もあります（§ 5.3 クラスターのマッチング参照）。

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

名前: font-named-instance
対象: @font-face
値: auto | <string>
初期値: auto

font-named-instance記述子がauto以外の値に設定された場合、 § 7 フォント機能・バリエーション解決の該当ステージで、 フォントファイル内の最初の名前付きインスタンスで、ローカライズ名が指定した<string>に一致するものを探します（§ 5.1 ローカライズ名のマッチング参照）。 一致する名前付きインスタンスがなければ、記述子はautoと同じ扱いになります。 あれば、その名前付きインスタンスのバリエーション軸値が§ 7 フォント機能・バリエーション解決でこの位置に適用されます。

例えば、下記@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;
}

注: font-weight、font-width、font-style プロパティで指定したバリエーション軸値は font-named-instance記述子値の前に適用されるため、 名前付きインスタンス利用時もこれらプロパティ値を変更する必要はありません。

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

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

@font-face規則は、文書内で利用された場合のみフォントリソースを遅延ロードできるよう設計されています。 スタイルシートは多くのフォントのライブラリを含められますが、実際に使われるものだけがダウンロードされます。 ユーザーエージェントは、対象ページで適用されるスタイル規則で参照されているフォントだけをダウンロードしなければなりません。 ページで利用されるかどうかに関係なく、@font-face規則で定義されたすべてのフォントをダウンロードするUAは非適合です。 文字フォールバックでフォントがダウンロードされる場合、ユーザーエージェントは当該テキストランの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-familyリストに含めることで、 ページの大きな再描画を避けることが推奨されます。

4.8.2. フォント取得要件

フォントを取得するために、選択された<url>urlと@font-faceruleに対し、fetchurlを行う。 スタイルシートはruleの親CSSスタイルシートとし、 destinationは"font"、CORSモードは"cors"で、processResponseはres（response）およびnull・失敗・バイトストリームstreamに対し次の手順を実行する:

  1. streamがnullなら終了。

  2. streamの型に従いフォントをロードする。

注: 著者への影響として、特別な設定をしない限りクロスオリジンでフォントは通常ロードされません。 サイトはHTTPヘッダーAccess-Control-Allow-Originを使うことで、フォントデータのクロスサイトロードを明示的に許可できます。 他のスキームでは、fetchアルゴリズムで許可されている範囲を超える明示的許可機構は定義も必須でもありません。

テスト
以下の例では、ドキュメントが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規則で定義されたフォントフェイスがダウンロードや利用可能になるタイミングに応じてどのように表示されるかを決定します。

名前: font-display
対象: @font-face
値: auto | block | swap | fallback | optional
初期値: auto
テスト

注: これら値の動作について、ユーザーエージェントはより高度な制御や微妙な時間設定を行ったり、font-display構文で直接表現できない挙動を提供したりできます。また、著者が指定した挙動を利用者が好みに応じて上書きできるようにすることもあります（例: すべてのフォントに0sのblock periodを強制するなど）。

auto
フォント表示ポリシーはユーザーエージェント依存です。

注: 多くのブラウザはblockと似たポリシーをデフォルトにしています。

block
フォントフェイスに短いblock period（多くの場合3s推奨）と無限のswap periodを与えます。

注: つまり、最初は「不可視」テキストを描画し、ローディング完了次第フォントフェイスに切り替えます。

この値は、特定フォントで描画しないとページが使えない場合にのみ使い、小さなテキスト断片だけに使うべきです。

例えば、設計が悪い「アイコンフォント」では「⎙」（プリンタ）アイコンを「P」など無関係な文字に割り当てる場合があります。この場合、フォールバックフォントで描画すると意図しない文字が表示され、アイコンの代わりにページ上に紛らわしい文字が散らばります。こうした場合は一時的な空白の方がフォールバックフォントよりもましです。

（ただし、最終的にはフォールバックフォントが使われます。紛らわしい文字だらけよりもリンク等がまったく表示されないよりはましです。）

より良い解決策はアクセシビリティへの配慮の節で説明されています。

swap
フォントフェイスに極めて短いblock period（多くの場合100ms以下推奨）と無限のswap periodを与えます。

注: つまり、フォントフェイス未ロード時は即座にフォールバックで描画し、ローディング完了次第フォントフェイスに切り替えます。

この値は、特定フォントで描画が非常に重要だが、どんなフォントでも正しく意味が伝わる場合に使うべきです。小さなテキスト断片だけに使うべきです。

例えば、サイトのロゴ表示用にカスタムフォントを使う場合、正しく表示されることはブランド上重要ですが、どんなフォントでも最低限ロゴとして意味は伝わります。
fallback
フォントフェイスに極めて短いblock period（多くの場合100ms以下推奨）と短いswap period（多くの場合3s推奨）を与えます。

注: つまり、最初はフォールバックで描画し、ローディング完了次第フォントフェイスに切り替えます。ただし一定時間経過後は、残りのページ表示期間中ずっとフォールバックフォントが使われます。

この値は本文など、選択したフォントの利用が望ましいが、フォールバックでも問題ない場合に使います。大きなテキスト領域に適しています。

例えば、本文など大きなテキスト領域では、素早く描画されることが最優先です。読んでいる途中にフォント切り替えでテキストが「ずれる」と集中が途切れるため、切り替えによる視覚的な「ジャンプ」は避けるべきです。
optional
フォントが「即座」にロードできる場合（テキストの「初回描画」に間に合う場合）、そのフォントを使います。

それ以外の場合、block periodとswap periodがどちらもローディング前に失効したものとして扱います。この場合、UAはフォントダウンロードを中止または低優先度でダウンロードすることもあり得ます。UAが有益と判断すれば、ダウンロード自体を開始せず即座にフォールバックフォントで描画することもあります。

optionalフォントはローディングによるページレイアウトの「ジャンプ」を決して引き起こしてはならない。UAは、optionalフォント利用時に遅いローカルキャッシュからのロードを待つため描画を若干遅延しても良いが、一度フォールバックフォントで描画されたら、その後はoptionalフォントで再描画してはなりません。

この値は本文など、選択フォントが飾り的「あると嬉しい」場合に使います。初回表示の高速化が重要な場合に推奨されます。

例えば、本文はブラウザデフォルトフォントでも十分可読ですが、ダウンロードフォントを使うとより魅力的でサイトの美観に合います。初回訪問者は表示速度の方が重要なのでoptionalが有効です。再訪問時にはフォントがダウンロード済みとなり、意図通りの表示が得られるでしょう。

非常に遅い回線のユーザーは「意図通り」表示にならない場合もありますが、optionalにより、サイトが重すぎて離脱することを防げます。

optionalフォントの利用可能性を高めるには、UAがプリロード状況確認やキャッシュの最適化等のヒューリスティクスを使うことが推奨されます。ただし著者はこの挙動に依存できません。optionalはフォントが使われない可能性があるため、より確実に使いたい場合はfallbackの利用を検討してください。

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

font-display記述子は、@font-feature-values規則でフォントファミリー単位の「デフォルト」表示ポリシーを設定し、同じファミリーを対象とする@font-face規則の表示挙動を決定します。@font-face規則でfont-displayが省略された場合、UAは該当ファミリー用にfont-display値を@font-feature-valuesで設定されていればそれを、なければfont-display: autoを使います。

このメカニズムにより、フォントファミリー全体のデフォルト表示ポリシーを一括設定できます。また、@font-face規則が第三者フォントファウンダリから提供されて著者が直接制御できない場合でも、該当フォントファミリーの表示ポリシーを設定できます。ファミリー全体でデフォルトポリシーを設けることで、ランサムノート効果（異なるフェイスが混在する見た目）も防げます。

名前: font-display
対象: @font-feature-values
値: auto | block | swap | fallback | optional
初期値: auto

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

名前: font-language-override
対象: @font-face
値: normal | <string>
初期値: normal

この記述子は@font-face規則で定義されたフォントが描画される際に適用される初期設定を定義します。フォント選択には影響しません。値は下記で定義されるfont-language-overrideプロパティの値と同じですが、inherit値は除外されます。複数のフォント機能記述子・プロパティ・バリエーションの累積効果は§ 7 フォント機能・バリエーション解決で説明されます。

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

名前: ascent-override
対象: @font-face
値: normal | <percentage [0,∞]>
初期値: normal
テスト
名前: descent-override
対象: @font-face
値: normal | <percentage [0,∞]>
初期値: normal
テスト
名前: line-gap-override
対象: @font-face
値: normal | <percentage [0,∞]>
初期値: normal
テスト

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

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

注: ユーザーエージェントはフォントファイル内の異なるデータをメトリクス値として利用する場合があり、結果としてテキストレイアウトが異なることがあります。

記述子値がパーセンテージの場合、対応メトリクス値は使用フォントサイズにそのパーセンテージを掛けた値になります。負の値はパース時に無効です。

パーセンテージは要素ごとに異なるフォントサイズに対して解決されます。 
@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を使います。

ローカルフォールバックフォントのメトリクス値をウェブフォントに合わせて上書きすることで、切り替え時のレイアウトシフトを抑制できます。 
@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"

画像はUAがウェブフォントへ切り替えた際にも上下にずれることがありません。

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テーブル） が不足している場合があります。

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

この手順では、 特定のフォントファミリーについて すべてのフォントスタイルプロパティが初期値に設定されていた場合に選ばれるフェイスを デフォルトフェイスと定義します。

  1. ある要素に対して算出されたフォントプロパティ値を用いて、ユーザーエージェントはfont-familyプロパティで指定された最初のファミリー名から処理を開始します。

  2. ファミリー名が汎用ファミリーキーワードの場合、ユーザーエージェントは使用すべき適切なフォントファミリー名を参照します。ユーザーエージェントは、要素の言語や文字のUnicode範囲に基づいて汎用フォントファミリーを選択することもできます。

  3. その他のファミリー名については、ユーザーエージェントは@font-face規則で定義されたフォントをまず探し、 次に利用可能なインストール済みフォント（フォントエイリアスも含む場合あり）を探します。 名前のマッチングは上記§ 5.1 ローカライズ名のマッチングで説明した方法に従います。 ある@font-face規則で定義されたフェイスのフォントリソースが利用不可または無効なフォントデータの場合、そのフェイスはファミリーに存在しないものとして扱います。@font-face規則で定義されたファミリーにフェイスが1つも存在しない場合、そのファミリーは存在しないものとして扱い、この場合プラットフォームフォントとの名前一致は行ってはなりません。

  4. フォントファミリーの一致があれば、ユーザーエージェントはそのファミリー内のフェイス集合を集め、以下の順序で他のフォントプロパティを用いて集合を絞り込み、最終的に1つのフェイスにします。フォントによってはfont-width、font-style、font-weightなどの複数値をサポートすることがあります。この場合、アルゴリズムは各対応組み合わせを一意のフォントとして扱います。アルゴリズムでそのようなフォントが最終的に選ばれる場合、font-width、font-style、font-weightの値をレイアウト・描画前に適用しなければなりません。これら値の適用はApply font matching variationsステップ（§ 7 フォント機能・バリエーション解決参照）で行います。 @font-face規則で記述子値が同じだがunicode-range値が異なるフェイス群は、このステップでは1つの複合フェイスとみなします：

    テスト

    1. 最初にfont-widthを試します。フォントに幅値のバリエーションが無い場合は、プロパティ定義の対応表で値がマッピングされます。 マッチ集合に希望するfont-width値を含むフェイスがあれば、希望値を含まないフェイスは集合から除外されます。希望値を含むフェイスがない場合、以下の規則で幅値を選びます：

      • 希望する幅値が100%以下なら、まず希望値未満の幅値を降順で、次に希望値超の幅値を昇順で探し、合致するものが見つかるまで続けます。

      • それ以外の場合、希望値超の幅値を昇順で、次に希望値未満の幅値を降順で探し、合致するものが見つかるまで続けます。

      最も近い幅値が決定したら、それを含まないフェイスは集合から除外します。

      この検索アルゴリズムは距離関数的に考えられ、ファミリー内で最小距離値を持つものが選ばれ、それ以外は除外されます。

      例えば、A/B/Cの3つのフォントがあり、それぞれfont-width記述子の対応範囲が異なる場合、"font-width: 125%"でスタイルされた要素の検索アルゴリズムは次のように視覚化できます：

      algorithm

      上記グラフで各フォントの幅範囲が示されています。Bが全ファミリーで最小幅値を含むためアルゴリズムではBが選ばれます。Bが除外されればCが最小距離となり選ばれます。

      前例と同様、"font-width: 75%"指定時の距離グラフ：

      distance graph

      Bが最小値なのでBが選ばれますが、Bが除外されればAが最小距離で選ばれます。

    2. 次にfont-styleを試します（§ 5.2 フォントスタイルのマッチング参照）。 フォントにイタリックやオブリーク角度のバリエーションがない場合は、font-styleプロパティ定義の記述に従い値がマッピングされます。

      font-style値がitalicの場合：

      1. 集合にイタリック値で希望値を含むフェイスがあれば、希望値を含まないフェイスは除外。

      2. なければ希望値超のイタリック値を昇順で、次に希望値未満を降順で0まで探す。ここでは正値のみ。

      3. なければ11deg以上のオブリーク値を昇順で、次に11deg未満を降順で0まで探す。ここも正値のみ。

        オブリーク優先閾値は平均角度より低くすべき

      4. なければ0以下のイタリック値を降順で。

      5. なければ0deg以下のオブリーク値を降順で。

        前例同様、"font-style: italic"指定の距離グラフ：

        distance graph

        Dが最小値で選ばれ、除外されればE、さらにC、B（オブリーク値考慮で即選ばれない）、Aの順。

      font-style値がobliqueでangleが11deg以上の場合：

      1. 集合に希望値を含むオブリーク値があれば希望値含まないフェイスは除外。

      2. なければ希望値超のオブリーク値を昇順で、次に希望値未満を降順で0まで（正値のみ）。

      3. バリアブルフォントでslnt軸があれば指定値をセットし、それ以外でfont-synthesis-style値がautoなら、ジオメトリシアリングで希望値に合成。

      4. なければ1以上のイタリック値を昇順で、次に1未満を降順で0まで。

      5. なければ0deg以下のオブリーク値を降順で。

      6. なければ0以下のイタリック値を降順で。

        前例同様、"font-style: oblique 40deg"指定の距離グラフ：

        distance graph

        Dが最小値で選ばれ、除外されればE、C、B（イタリック値考慮）、Aの順。

      font-style値がobliqueでangleが0deg以上11deg未満の場合：

      1. 集合に希望値含むオブリーク値があれば希望値含まないフェイス除外。

      2. なければ希望値未満オブリーク値を降順で0まで、次に希望値超を昇順で（正値のみ）。

      3. バリアブルフォントはslnt軸で指定値セット、それ以外はfont-synthesis-style値がautoならジオメトリシアリングで合成。

      4. なければ1未満イタリック値を降順で0まで、次に1超を昇順で（正値のみ）。

      5. なければ0deg以下のオブリーク値を降順で。

      6. なければ0以下のイタリック値を降順で。

      前例同様、"font-style: oblique 13deg"指定時の距離グラフ：

      distance graph

      Dが最小値で選ばれ、除外されればC、E、B（イタリック値考慮）、Aの順。

      font-style値がobliqueでangleが0deg未満-11deg超の場合は、上記#lesser-oblique-stepsを符号反転・方向逆転で、angleが-11deg以下なら#greater-oblique-stepsを符号反転・方向逆転で。

      font-style値がnormalの場合：

      1. 0以上のオブリーク値を昇順で。

      2. なければ0以上のイタリック値を昇順で。

      3. なければ0未満オブリーク値を降順でマッチまで。

      4. なければ0未満イタリック値を降順でマッチまで。

      前例同様、"font-style: normal"指定時の距離グラフ：

      distance graph

      Cが最小値で選ばれ、除外されればB（イタリック値考慮）、Aの順。

      上記探索でオブリーク角が見つかれば、それを含まないフェイスは除外。イタリック値が見つかった場合も同様に除外。

      ユーザーエージェントはイタリックとオブリークフォントを区別しなくてもよい。そうした場合は上記font-styleのマッチング手順は両値を共通スケールにマッピングして行う（詳細未定義だがイタリック値1はオブリーク角11degと同値にマッピング）。@font-face規則で定義されたファミリーでは、イタリック・オブリークフェイスはfont-style記述子値で区別する。

      イタリックやオブリークフェイスがないファミリーについては、font-synthesisプロパティ値で許可されていれば合成オブリークフェイスを生成することもできます。

    3. 続いてfont-weightでマッチング。フォントが重みバリエーションを持たない場合はプロパティ定義のリストで値がマッピングされます。bolder/lighterなど相対値の場合は、継承値を元に有効値を算出（font-weightプロパティ定義参照）。上記手順後、希望値含むfaceがあれば希望値含まないface除外。無ければ以下の規則で重み値選択：

      • 希望重み値が400〜500の場合は、希望値以上を昇順で500まで、次に希望値未満を降順、次に500超を昇順で探しマッチまで。

      • 希望値が400未満の場合は、希望値以下を降順、次に希望値超を昇順でマッチまで。

      • 希望値が500超の場合は、希望値以上を昇順、次に希望値未満を降順でマッチまで。

      前例同様、"font-weight: 400"指定の距離グラフ：

      distance graph

      Bが最小距離で選ばれ、B除外ならC、D、A、Eの順。

      前例同様、"font-weight: 450"の距離グラフ：

      distance graph

      Cが最小距離で選ばれ、C除外ならD、B、A、E。

      前例同様、"font-weight: 500"の距離グラフ：

      distance graph

      Dが最小距離で選ばれ、除外されればB、C、B、A、E。

      前例同様、"font-weight: 300"の距離グラフ：

      distance graph

      Bが最小距離で選ばれ、除外されればA、C。

      最も近い重み値が決定したら、それを含まないfaceは集合から除外します。

      注: [CSS-FONTS-3]と本仕様の間でfont-weightプロパティのアニメーション挙動に小変更あり。従来は補間値が100単位に丸められマッチング、現仕様では任意値で丸めずマッチング。これはアルゴリズムの不連続性による微妙な違いです。

    4. 最後にfont-sizeはUA依存の許容マージン内でマッチさせる必要があります（通常スケーラブルフォントは整数ピクセルに丸め、ビットマップフォントは許容20%程度の場合も）。em単位などの更なる計算は使用値ベースで行います。

    上記手順後もマッチ集合に複数フォントが残る場合があります。その場合UAは集合から1つ選び、以降の処理を続けます。選択基準はUAやOSで異なり得ますが、同一文書内の2要素間では異なってはなりません。

  5. 一致したフェイスが@font-face規則で定義されている場合、UAは以下の手順で1つのフォントを選びます：

    1. フォントリソースが未ロードで、unicode-range記述子値で該当文字が含まれていればフォントをロード。

    2. ダウンロード後、有効文字マップが該当文字をサポートしていればそのフォントを選択。

    一致フェイスが複合フェイスの場合は、それを構成する各faceに対し、複合フェイス内で@font-face規則定義の逆順で上記手順を適用します。

    ダウンロード中は、UAはフォントがダウンロード完了まで待つか、一度代替フォントメトリクスで描画し、ダウンロード後に再描画します。

  6. 一致フェイスが存在しない、または一致フェイスに該当文字のグリフが含まれない場合は、次のファミリー名を選択し、上記3手順を繰り返します。ファミリー内の他のfaceからグリフを探してはなりません。但し、UAはデフォルトフェイスが該当グリフをサポートし、かつfont-synthesisプロパティ値で合成が許可されていれば、合成オブリーク版などを代用してもよい（例：イタリックfaceがアラビア文字グリフ未対応の場合にレギュラーフェイスの合成イタリック版を使用）。

  7. 評価すべきフォントファミリーがなくなり、一致フェイスが見つからなければ、UAはインストール済みフォントフォールバック手順で最適な表示用フォントを探します。この結果はUAごとに異なります。

  8. どのフォントでも特定文字が表示できない場合、UAはその文字が表示できないことを何らかの方法で示すべきです（例：Last Resort Fontなどの記号的グリフやデフォルトフォントの欠落文字グリフを使用）。

この処理の最適化は許可されますが、実装がアルゴリズム通りに動作する場合に限ります。 マッチングは明確に定義された順序で行われ、 同じ利用可能フォントと描画技術があれば、ユーザーエージェント間でできるだけ一貫した結果となるようにしています。

最初に利用可能なフォントは、 例えばフォント相対長（exなど）や line-heightプロパティの定義で使われますが、 これは、unicode-rangeによって U+0020（スペース）が除外されていない最初のフォントであり、 font-familyリストの順（または利用できない場合はUAのデフォルトフォント）で決定されます。

@font-face規則経由でなくファミリー名で直接参照されたインストール済みフォントは、 unicode-rangeが Unicode全コード空間をカバーしているものとみなします。

テスト

注: そのフォントに実際にスペース文字グリフがあるかどうかは関係ありません。

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

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

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

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

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

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

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

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

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

テスト

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 forms, spanish
language specific forms, italian
language specific forms, french

要素の内容言語が文書言語の規則で既知の場合、 ユーザーエージェントは内容言語からOpenType言語システムを推定し、 OpenTypeフォントでグリフ選択・配置時にそれを使わなければなりません。 書記体系が明示指定されていれば、 内容言語により暗黙指定されるものより優先されます。

OpenTypeフォントでは、特定言語のタイポグラフィ慣習で表示したい場合や フォントが当該言語を明示サポートしない場合（共通慣習の言語はサポートしている場合）など、 OpenType言語を明示宣言する必要がある場合があります。 そのためのプロパティがfont-language-overrideです。

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

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

カーニングは、グリフ間の間隔を文脈に応じて調整することです。 このプロパティはメトリックカーニング（フォント内の調整データを利用したカーニング）を制御します。

auto
カーニングの適用はユーザーエージェントの裁量に任せる指定です
normal
カーニングを適用する指定です
none
カーニングを適用しない指定です

カーニングデータを含まないフォントでは、このプロパティは目に見える効果を持ちません。 OpenTypeフォントのレンダリング時、[OPENTYPE] 仕様はデフォルトでカーニング有効を推奨しています。 カーニング有効時は、該当するOpenTypeカーニング機能が有効化されます（横組みの組版モードや縦組みのsideways typesettingではkern機能、upright typesettingの縦組みモードではvkrn機能）。 ユーザーエージェントは、 OpenType仕様に詳細があるkernテーブルだけでカーニングをサポートするフォントにも対応しなければなりません。 letter-spacingプロパティが定義されている場合、 カーニング調整はデフォルト間隔の一部とみなし、 letter-spacing調整はカーニング後に適用されます。

auto指定時、 ユーザーエージェントは カーニングの適用有無を テキストサイズ・スクリプト・その他処理速度に影響する要素等 複数要因で判断できます。 適切なカーニングを強制したい場合はnormalで明示的に有効化してください。 一方で、パフォーマンス重視の場面ではカーニング無効を選ぶ著者もいるかもしれません。 ただし、現代の優秀な実装ではカーニングの利用がテキストレンダリング速度に大きな影響を与えることは通常ありません。

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

名前: font-variant-ligatures
値: normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]
初期値: normal
適用対象: 全要素とテキスト
継承: はい
パーセンテージ: 該当なし
算出値: 指定値通り
正規順序: 文法による
アニメーションタイプ: 離散
テスト

合字や文脈形は、グリフを組み合わせてより調和した形状を作る手法です。

<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フォントでは、一般的な合字はデフォルトで有効です。
common ligature example
no-common-ligatures
一般的な合字（OpenType機能: liga, clig）を無効化します。
discretionary-ligatures
任意合字（OpenType機能: dlig）を有効化します。 どの合字が任意かは書体設計者が決定するため、著者は各フォントのドキュメントを参照してどの合字が任意扱いかを確認してください。
discretionary ligature example
no-discretionary-ligatures
任意合字（OpenType機能: dlig）を無効化します。
historical-ligatures
歴史的合字（OpenType機能: hlig）を有効化します。
historical ligature example
no-historical-ligatures
歴史的合字（OpenType機能: hlig）を無効化します。
contextual
文脈的代替（OpenType機能: calt）を有効化します。 厳密には合字機能ではありませんが、合字同様、周囲文脈に合わせてグリフ形状を調和させるためによく使われます。 OpenTypeフォントでは、この機能もデフォルトで有効です。
contextual alternate example
no-contextual
文脈的代替（OpenType機能: calt）を無効化します。

必須合字（複雑スクリプトの正しい描画に必要）は、上記設定（none等）には影響されません（OpenType機能: rlig）。

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

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

このプロパティは、タイポグラフィ的な下付き・上付きグリフを有効化するために使います。 これらはデフォルトグリフと同じemボックス内で設計された代替グリフであり、 デフォルトグリフと同じベースライン上に配置され、 ベースラインやサイズの再配置・拡大縮小は行いません。 周囲のテキストと調和するように明確に設計されており、 行の高さに影響せず可読性を高めます。

比較：本物の下付きグリフと合成下付きグリフ

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

個別値の意味は以下の通りです：

normal
以下に挙げる機能はどれも有効化しません。
sub
下付き文字用のバリアント（OpenType機能: subs）を有効化します。
super
上付き文字用のバリアント（OpenType機能: sups）を有効化します。

下付き・上付き文字の持つ意味的特性から、連続テキストランに対して値がsubやsuperのとき、ラン内の全文字にバリアントグリフがない場合は、通常グリフを縮小して合成したものを使うべきです。 この処理はランごとに行い、バリアントグリフと合成グリフが混在して揃わないことを避けます。 OpenTypeフォントで下付き・上付きグリフが足りない場合、ユーザーエージェントは必ず合成した下付き・上付きグリフを生成しなければなりません。

バリアント上付きグリフと合成上付きグリフの比較

上付きバリアント（左）、合成上付き（中央）、混在の不揃い（右）

テキストデコレーションが下付き・上付きグリフを含むランだけに適用される場合は、合成グリフを使うことで装飾の配置トラブルを避けられます。

従来のユーザーエージェントはsubやsup要素にfont-sizeやvertical-alignを使って下付き・上付き文字を合成していました。 後方互換的な方法で下付き・上付き文字を定義するため、著者は[CSS3-CONDITIONAL]の条件付き規則を使うことが推奨されます。これにより旧UAでも旧方式で描画されます。

font-size: smallerがよく使われるので、下付き・上付きテキストに実際に適用されるスケーリング率はサイズによって異なります。 大きいテキストでは1/3ほど縮小されることが多いですが、小さいテキストでは縮小率はもっと小さくなります。 これにより、小さな文字サイズでも可読性が保てます。 ユーザーエージェントは合成グリフ生成時にこうした点を考慮すべきです。

OpenTypeフォント形式では、OS/2 テーブルに下付き・上付きメトリクスがありますが、実際は正確でない場合もあり、合成グリフ生成時の根拠にはなりません。

著者は、フォントが通常下付き・上付きグリフを一部文字（例：ラテン数字）しか持たないことに注意すべきです。 句読点や文字の下付き・上付きグリフはあまり提供されません。 このプロパティの合成フォールバック規則は常に表示されることを保証しますが、フォントがすべての文字のバリアントグリフを持たない場合は見た目が期待と異なる場合があります。

このプロパティは累積的ではありません。 下付きや上付きの中の要素に適用しても、 下付き・上付きグリフの位置が入れ子にはなりません。 このプロパティ値が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プロパティ対応UAでは下付きバリアントグリフを選択し、ベースラインやフォントサイズの調整なく描画します。 古いUAではfont-variant-position定義を無視し、従来の下付きデフォルトで描画されます。

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

名前: font-variant-caps
値: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps
初期値: normal
適用対象: 全要素とテキスト
継承: はい
パーセンテージ: 該当なし
算出値: 指定値通り
正規順序: 文法による
アニメーションタイプ: 離散
テスト

このプロパティは、スモールキャピタル・プチキャピタル・タイトル用などに使われる代替グリフの選択を可能にします。これらのグリフは周囲の通常グリフと調和するように特別に設計されており、単純にサイズを調整した場合に失われるウェイトや可読性を保つことができます。

個別値の意味は以下の通りです：

normal
以下の機能はどれも有効化しません。
small-caps
スモールキャピタル（OpenType機能: smcp）を有効化します。 スモールキャピタルグリフは、通常大文字の形を保ちながら小文字サイズに縮小されます。
small-caps example
all-small-caps
大文字・小文字両方にスモールキャピタル（OpenType機能: c2sc, smcp）を有効化します。
petite-caps
プチキャピタル（OpenType機能: pcap）を有効化します。
all-petite-caps
大文字・小文字両方にプチキャピタル（OpenType機能: c2pc, pcap）を有効化します。
unicase
大文字にスモールキャピタル、小文字は通常グリフ（OpenType機能: unic）を有効化します。
titling-caps
タイトル用キャピタル（OpenType機能: titl）を有効化します。 大文字グリフは通常小文字と組み合わせて使うよう設計されていますが、タイトル用に大文字のみの連続で使うと強すぎる場合があり、タイトル用キャピタルはこの用途に特化しています。

これらグリフの利用可否は、フォントのfeature listで該当機能が定義されているかどうかによります。 ユーザーエージェントはスクリプト単位で可否を判断してもよいですが、個々の文字単位で判断してはなりません。

一部フォントはこのプロパティの一部または全ての機能をサポートしない場合があります。 CSS 2.1との後方互換のため、small-capsやall-small-capsが指定されていて、フォントにスモールキャピタルグリフがない場合、 ユーザーエージェントはスモールキャピタルを合成すべきです。 例えば通常フォントの小文字グリフを、大文字グリフを縮小したものに置き換えます（all-small-capsの場合は大文字・小文字両方を置き換え）。

synthetic vs. real 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

略語が多いテキストでスモールキャピタルを使うと可読性が向上する例

引用文をイタリック、1行目のみスモールキャピタルで描画する例：

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
適用対象: 全要素とテキスト
継承: はい
パーセンテージ: 該当なし
算出値: 指定値通り
正規順序: 文法による
アニメーションタイプ: 離散
テスト

数字の書式制御を指定します。下記例は、これらの値の組み合わせによって、対応フォントでタブ形式データの描画方法が変化することを示しています。通常の段落テキストではプロポーショナル数字が使われ、表形式では桁揃えのためタブラー数字が使われます：

combining number styles

数字スタイルの利用例

可能な組み合わせ：

<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）を有効化します。
diagonal fraction example
stacked-fractions
ライニング積分数（OpenType機能: afrc）を有効化します。
stacked fraction example
ordinal
序数用文字形（OpenType機能: ordn）を有効化します。
ordinals example
slashed-zero
スラッシュ付きゼロ（OpenType機能: zero）を有効化します。
slashed zero example

ordinalの場合、序数形は多くの場合上付き文字と同じ形ですが、マークアップは異なります。

上付きの場合、variantプロパティは上付き要素にだけ適用されます：

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

序数の場合、variantプロパティは序数全体（または段落全体）に適用されます：

.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
適用対象: 全要素とテキスト
継承: はい
パーセンテージ: 該当なし
算出値: 指定値通り
正規順序: 文法による
アニメーションタイプ: 離散
テスト 
<feature-value-name> = <ident>

任意の文字について、フォントはその文字のデフォルトグリフ以外にも様々な代替グリフを提供できます。 このプロパティは、それらの代替グリフの選択を制御するものです。

下記プロパティ値の多くでは、複数の異なる代替グリフが利用できます。何種類の代替があるか、何を意味するかはフォントごとに異なるため、値定義内でフォント固有と明記されています。 このような代替の性質がフォント固有であるため、@font-feature-values規則を使って、 特定フォントファミリーまたはファミリー集合ごとにフォント固有の数値<feature-index>とカスタム<feature-value-name>を関連付けて定義し、 このプロパティで特定代替を選択できるようにします：

@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型で定義されていない場合も、算出値は定義されていた場合と同じになります。 ただし、未定義の<feature-value-name>識別子を含むプロパティ値は、 グリフ選択時に無視されます。

/* これら2つのスタイル規則は実質的に同じ */

p { font-variant-alternates: swash(unknown-value); } /* 未定義値は無視 */
p { font-variant-alternates: normal; }

これにより、あるフォント集合用に値を定義・利用しても、フォールバック時にファミリー名が異なれば無視されます。対応外の値は無視されます。これらの値は汎用フォントファミリーには適用されません。

個別値の意味は以下の通りです：

normal
以下の機能はどれも有効化しません。
historical-forms
歴史的形（OpenType機能: hist）を有効化します。
historical form example
stylistic(<feature-value-name>)
スタイリスティック代替（フォント固有, OpenType機能: salt <feature-index>）を有効化します。
stylistic alternate example
styleset(<feature-value-name>#)
スタイリスティックセット（フォント固有, OpenType機能: ss<feature-index>。OpenTypeではss01〜ss20を定義）を有効化します。
styleset example
character-variant(<feature-value-name>#)
特定文字バリアント（フォント固有, OpenType機能: cv<feature-index>。OpenTypeではcv01〜cv99を定義）を有効化します。
swash(<feature-value-name>)
スワッシュグリフ（フォント固有, OpenType機能: swsh <feature-index>, cswh <feature-index>）を有効化します。
swash example
ornaments(<feature-value-name>)
デフォルトグリフを装飾に置き換えます（フォント固有, OpenType機能: ornm <feature-index>）。 一部フォントは多くの文字の装飾グリフを代替として提供する場合がありますが、任意文字（例：英数字）を装飾で表示するのは意味論的に不適切です。フォント設計者は、装飾全体（UnicodeのDingbatsブロック等で明示符号化されたもの以外）は箇条書き文字（U+2022）の代替として符号化し、著者がornaments()で希望グリフを選択できるよう推奨します。
ornaments example
annotation(<feature-value-name>)
代替注釈形（フォント固有, OpenType機能: nalt <feature-index>）を有効化します。
alternate annotation form example

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

上記font-variant-alternatesの値のうちいくつかはフォント固有とラベルされています。 1つの機能に対してフォントは単一グリフだけでなく、複数の字形バリエーションを定義でき、 それぞれに数値インデックスを割り当てて、どれを有効化するか選べるようになっています。

こうした数値インデックスはfaceごとに固有です。 例えば、あるフォントフェイスでswsh 1はQ大文字のスワッシュ字形を有効化しますが、 別のフォントフェイスでは&記号のスワッシュ字形を有効化するかもしれません。 そのため、font-feature-settingsでインデックスを指定する場合、 著者はどのフォントが要素で使われるか正確に知っている必要があります。 フォールバックにより異なるフォントが選ばれると、意図しない機能が有効化される可能性があります！ また、異なるフォントを使う要素で同じ機能を簡単に有効化できず、 それぞれに対応したfont-feature-settings値を個別に設定する必要があります。

この問題を解決するため、 @font-feature-values規則では、 フォントフェイスごとに特定featureインデックスに人間に分かりやすい名前を割り当てられます。 この分かりやすい名前を使えば、どのフォントが使われても（すべてのフォントに同じ名前を定義していれば）、 著者は同じ機能を簡単に有効化でき、定義のないフォントでは何も起きないため、 間違って無関係な機能を有効化してしまう心配もありません。

共通名で値を定義すれば、下記のように異なるフォント集合に対して1つのスタイル規則でカバーできます。 下記例のどちらかのフォントが見つかった場合、丸数字グリフが使用されます：

@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);
}

どちらかのフォントで"circled"形だけを明示的に有効化したい場合、 font-feature-valuesを使うと、 著者はどのフォントが実際に使われるか確実に知っている必要があります。 "Otaru Kisa"を想定してfont-feature-values: nalt 1;と書いた場合、 Otaru Kisaでは丸数字が有効になりますが、Taisho Gothicにフォールバックした場合はnalt 1が boxed文字を有効化してしまうからです！

6.9.1. 基本構文

@font-feature-values規則の前置部には、 フォントファミリー名のリストがあり、 その後に複数のfeature-value-block（特別な補助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> }
テスト

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

@font-feature-valuesブロックの内容は <declaration-rule-list>を受け付けます。 これらのリスト項目は次のいずれかです：

または

同じ<font-feature-value-type>を複数回指定するのは有効です。 それぞれの内容は連結されてカスケードされます。 各<feature-value-block>は、 宣言（フォント機能値宣言）リストを受け付け、 宣言名は任意の識別子でよく、 値は1つ以上の非負<integer>リストでなければなりません。

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

注: 各機能名は1つの <feature-value-block>内でのみ一意です。 異なる<feature-value-block>間や、別の<feature-value-block>型が 別個の@font-feature-values規則にある場合は、 名前を再利用しても衝突しません。

<family-name>ごとに、 @font-feature-values前置部内で、 各フォント機能値宣言が (ファミリー名, 機能ブロック名, 宣言名)のタプルと宣言値の整数リストとの対応を定義します。 同じタプルが文書内で複数回現れる場合（1ブロック内など）、 最後に定義されたものが使われます。

例：以下はすべて同じフォント機能値セットを定義します： 
/* デフォルト */
@font-feature-values foo {
    @swash { pretty: 1; cool: 2; }
}

/* 宣言名の繰り返し */
@font-feature-values foo {
    @swash { pretty: 0; pretty: 1; cool: 2; }
}

/* 同種ブロック複数 */
@font-feature-values foo {
    @swash { pretty: 1; }
    @swash { cool: 2; }
}

/* 同一ファミリー複数規則 */
@font-feature-values foo {
    @swash { pretty: 1; }
}
@font-feature-values foo {
    @swash { cool: 2; }
}

フォント機能値宣言内で構文エラーがある場合は、その宣言のみが無効・無視され、 それが含まれる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のtwo-storey形 */
        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プロパティのフォント固有機能値の多くは、 単一値指定（例：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の値は構文エラーではありませんが、機能は有効化されません。

@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で2値指定は構文エラー */
  }
}

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は無視されますが、構文エラーにはならず、機能も有効化されません。 2値指定時は1つ目が機能番号、2つ目が値です。3値以上指定すると構文エラーとなり、その定義は無視されます。

@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; } /* 3値は構文エラー、無視 */
  @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 {
  /* betaの第3代替形、gammaの第1代替形を使用 */
  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);
}
ビザンティン印章の文字変体を使ったテキスト表示

文字変体で表示したビザンティン印章テキスト

上図の赤いテキストは、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
適用対象: 全要素とテキスト
継承: はい
パーセンテージ: 該当なし
算出値: 指定値通り
正規順序: 文法による
アニメーションタイプ: 離散
テスト

東アジアテキストのグリフ置換・サイズ調整を制御できます。

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

各値の意味は次の通りです：

normal
以下の機能はどれも有効化しません。
jis78
JIS78字形（OpenType機能: jp78）で描画します。
JIS78 form example
jis83
JIS83字形（OpenType機能: jp83）で描画します。
jis90
JIS90字形（OpenType機能: jp90）で描画します。
jis04
JIS2004字形（OpenType機能: jp04）で描画します。

各種JISバリアントは異なる日本の国家標準で定義された字形を反映しています。 フォントは通常最新の国家標準に準拠した字形を持ちますが、 例えば看板の再現など、古い字形バリアントが必要な場合もあります。

simplified
簡体字形（OpenType機能: smpl）で描画します。
traditional
伝統字形（OpenType機能: trad）で描画します。

simplifiedとtraditional値は、 時代とともに簡略化された文字の字形を制御しますが、 古い伝統字形が今も使われる場合もあります。 どの文字・字形が該当するかは、フォント設計の文脈によって多少異なります。

traditional form example
full-width
全角バリアント（OpenType機能: fwid）で描画します。
proportional-width
プロポーショナル幅バリアント（OpenType機能: pwid）で描画します。
proportionally spaced Japanese example
ruby
ルビ用バリアントグリフ（OpenType機能: ruby）を描画します。 ルビテキストは通常本文より小さいため、フォント設計者は読みやすい特別なグリフを用意することがあります。 選択されるのはグリフのみで、スケーリングや行レイアウトへの他の変更はありません。

下の赤いルビテキストは、上がデフォルトグリフ、下がルビバリアントグリフです。 線の太さの違いに注意してください。

ruby variant example

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
適用対象: 全要素とテキスト
継承: はい
パーセンテージ: 該当なし
算出値: 指定値通り
正規順序: 文法による
アニメーションタイプ: 離散
テスト

font-variantプロパティは、font-variantの全サブプロパティの略記指定です：

normal値は、font-variantの全サブプロパティを初期値にリセットします。 none値は 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
適用対象: 全要素とテキスト
継承: はい
パーセンテージ: 該当なし
算出値: 指定値通り
正規順序: 文法による
アニメーションタイプ: 離散
テスト

このプロパティはOpenTypeフォント機能に対する低レベル制御を提供します。 あまり一般的でないが特定用途で必要となるフォント機能へのアクセス手段として意図されています。

著者は下記表のフォント機能を設定するためにfont-feature-settingsを使わないでください。 代わりにより高レベルな代替プロパティを使ってください。その理由は：
  1. 高レベルプロパティは個別にカスケードします。全部をfont-feature-settingsリストでまとめて設定する必要はありません。
  2. 一部高レベルプロパティは、フォント機能非対応フォントでも合成可能です。
このフォント機能を設定したい場合 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値の構文は以下の通りです：

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

<opentype-tag>は大文字小文字区別のOpenType機能タグです。 OpenType仕様 [OPENTYPE]に従い、 featureタグは4文字のASCII文字列です。 4文字より長い/短い文字列や、U+20–7E範囲外の文字を含むタグは無効です。 タグはフォントに定義されているfeatureタグと一致すればよいので、 明示的に登録されたOpenType機能に限定されません。 フォントが独自featureタグを定義する場合は OpenType仕様のタグ名規則 [OPENTYPE-FEATURES]に従うべきです。

フォントに存在しないfeatureタグは無視されます。 ユーザーエージェントはこれらのfeatureタグを元に合成したフォールバック動作をしてはなりません。 唯一の例外として、ユーザーエージェントはカーニングデータをkernテーブルで持つがGPOSテーブルにkern機能がないフォントに対し kern機能を合成的にサポートしてもよいです。

一般には、カーニングを明示的に有効・無効化したい場合は font-kerningプロパティを使って下さい。 このプロパティはどちらのカーニングデータタイプにも必ず効きます。

値が存在する場合はグリフ選択のインデックスを示します。 <integer>値は0以上でなければなりません。 0は機能無効化を示し、ブール機能では1で機能有効化です。 非ブール機能では1以上で有効化＋選択インデックスを示します。 onは1と同義、offは0と同義です。 値を省略すると1が仮定されます。

font-feature-settingsの算出値はマップなので、 指定値内の重複タグは保存されません。 同じfeatureタグが複数回現れた場合、最後の指定値が優先されます。

算出値は重複除去後のfeatureタグを コード単位で昇順にソートしたものになります。 

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 科学用下付き数字と三分幅数字を有効化 */
font-feature-settings: "sinf" "twid";  /* 無効：カンマ区切りリスト必要 */
font-feature-settings: "silly" off;    /* 無効：タグが長すぎ */
font-feature-settings: "PKRN";         /* PKRN=1 独自機能を有効化 */
font-feature-settings: sinf;           /* 無効：タグは文字列必須 */

フォントでサポートされる範囲を超える値を指定した場合、挙動は明示的に未定義です。 ブール機能では通常有効化、非ブール機能では通常0と同等ですが、 どちらもフォント設計（lookup方式）によって挙動が異なります。

OpenType仕様で常に必須とされる機能（例えば必須合字"rlig"）の無効化は、実装によって無視される場合があります。

テスト

OpenType featureタグ向けに定義されていますが、 将来的には他の現代フォント形式の機能タグも追加される可能性があります。 他形式で定義された機能は、可能な限りOpenType登録タグのパターンに従うべきです。

下記日本語テキストは半角カナ文字で描画されます：

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

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

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

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

通常、著者は要素のコンテンツ言語を設定することで、言語固有のグリフ置換や配置を制御できます（上記参照):

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

場合によっては、コンテンツ言語とは異なる言語システムを指定する必要があります（他言語のタイポグラフィ慣習を模倣する場合など）。 font-language-overrideプロパティで、 フォントの言語システムを明示的に指定し、コンテンツ言語によるシステムを上書きできます。

値の意味は次の通りです：

normal
OpenTypeフォント描画時、要素のコンテンツ言語を元にOpenType言語システムを推定します
<string>
4文字の大文字小文字区別OpenType言語システムタグを1つ指定し、 要素の言語によるシステムの代わりにそのOpenType言語システムを使用します。 文字列が4文字未満の場合は末尾にスペース(U+0020)でパディングして4文字にしてから比較します。

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

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

前節で説明したように、 フォント機能やバリエーションは様々な方法で有効化できます。 font-variantやfont-feature-settings、fontfont-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でno-common-ligaturesを指定した場合です。

テスト

アラビア語Arabicや モンゴル語Mongolian、 デーバナーガリーDevanagariなど複雑スクリプトの処理には 追加機能が必要です。 縦書きテキスト内の立て書きテキストには 縦用代替（OpenType機能: vert）を有効化します。

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

一般的なフォント機能プロパティやフォント固有プロパティの解決順序は下記の通りです（優先度が高い順）。 この順序で、テキストランに影響するフォント機能の一覧が構築されます。

  1. デフォルトで有効化されるフォント機能（スクリプト必須機能）を適用します。 詳細は§ 7.1 デフォルト機能参照。

  2. フォント一致アルゴリズムにより font-weight、 font-width、 font-style で有効化されるバリエーションを適用します。

    font-style値の適用は フォント選択の影響を受けます。 このプロパティはイタリックやオブリークフォントの選択に使われる場合があるためです。 適用される値はフォント一致アルゴリズムで決定される最も近い値です。 ユーザーエージェントはfont-styleプロパティで1つだけ値を適用しなければならず、 "ital"と"slnt"両方を同時に設定してはなりません。

    選択されたフォントが@font-face規則で定義されている場合、 このステップで適用する値は font-weight、 font-width、 font-style の各ディスクリプタの値にクランプ（制限）します。

    次に、このステップで適用する値は フォントがサポートする値にクランプ（再度制限）します。

  3. lang/xml:langの継承値で指定された言語を適用します。

  4. フォントが@font-face規則で定義されている場合、 @font-face規則の font-language-overrideディスクリプタで指定された フォント言語オーバーライドを適用します。

  5. フォントが@font-face規則で定義されており、 その@font-face規則に font-named-instanceディスクリプタが none以外で1つ以上有効で、 ロードされたフォントリソースがその名前のインスタンスを持つ場合（§ 5.1 ローカライズ名一致ルール参照）、 そのインスタンスが表現する全バリエーション値を適用します。 これらの値もフォントがサポートする値にクランプされます。

  6. フォントが@font-face規則で定義されている場合、 @font-face規則の font-variation-settingsディスクリプタで指定された フォントバリエーションを適用します。

  7. フォントが@font-face規則で定義されている場合、 @font-face規則の font-feature-settingsディスクリプタで指定された フォント機能を適用します。

  8. font-language-overrideプロパティ値による フォント言語オーバーライドを適用します。

  9. font-optical-sizingプロパティ値による フォントバリエーションを適用します。

  10. font-variantプロパティ値、 関連するfont-variantサブプロパティ、 OpenType機能を使う他のCSSプロパティ（例:font-kerning）で指定された フォント機能を適用します。

  11. font-variantや font-feature-settings以外のプロパティで決定される 機能設定を適用します。例えば、 letter-spacingプロパティ値を非デフォルトに設定すると オプション合字が無効化されます。

  12. font-variation-settingsプロパティ値による フォントバリエーションを適用します。これらの値もフォントがサポートする値にクランプします。

  13. font-feature-settingsプロパティ値による フォント機能を適用します。

テスト

この優先順により、著者は@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
適用対象: 全要素とテキスト
継承: はい
パーセンテージ: 該当なし
算出値: キーワードnormalまたは各項目が文字列＋数値のリスト
正規順序: 文法による
アニメーションタイプ: （本文参照）
テスト

このプロパティはOpenTypeやTrueTypeのフォントバリエーションを低レベルで制御します。 特定用途でのみ必要となる、あまり一般的でないフォントバリエーションにアクセスする手段として意図されています。

著者は下記表のバリエーション軸設定にfont-variation-settingsを使わないでください。 代わりにより高レベルな代替プロパティを使ってください。その理由は：
  1. 高レベルプロパティは個別にカスケードします。全部をfont-variation-settingsリストでまとめて設定する必要はありません。
  2. 一部高レベルプロパティは、フォントバリエーション非対応フォントでも合成可能です。
このバリエーション軸を設定したい場合 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文内の他の軸値は無視されません。

バリエーション軸がフォントでサポートされていても、設定値がフォントの定義範囲を超えている場合は、フォントがサポートする最も近い値にクランプ（制限）されます。

値は小数や負数も許容されます。

注: 傾斜体はfont-styleプロパティを使う方が望ましいです。 ただしslnt軸を直接font-variation-settingsで使う場合、正の角度は反時計回り（CSSとは逆方向）で定義されていることに注意してください。

同じ軸名が複数回現れる場合、最後に現れた値がそれ以前の値を上書きします。この重複除去は算出値を取得することで確認できます。

算出値には重複除去された軸名がコード単位の昇順で並びます。

OpenType / TrueTypeバリエーション向けに定義されていますが、他の現代フォント形式でバリエーションをサポートする場合は将来的に軸が追加される可能性があります。 他形式で定義されるバリエーションも、可能な限り登録済みバリエーション軸のパターンに従うべきです。

font-variation-settingsのアニメーションは、以下の仕組みで可能です。2つのfont-feature-settings宣言の「プロパティ集合」が同じ（順番は不問）ならアニメーション可能です。 重複プロパティが後勝ちで適用されるため、プロパティ数が異なっても「同じ集合」なら「like」と見なします。 2つが「like」なら、それぞれの値がペアでアニメーションします。そうでない場合はアニメーション不可であり、その場合は未定義のタイミングでfrom値がto値に切り替わります。

9. カラーフォント対応

カラーフォントでは、グリフの輪郭（エッジ）だけでなく、 グリフ内部に使われる色もフォントファイル内で記述できます。

多色フォントの例
Multicolore（Ivan Filipov 作）
多色フォントの例
Magical Unicorn Neue Pro（Arthur Reinders Folmer 作）

絵文字など用途によっては、フォント内で色が固定されている方が適切です。 一方で、スタイルシートから色を制御したい場合もあります。

テスト

CSSではこれを制御する方法が2つあります。 font-paletteプロパティは、 フォント内に含まれる複数のパレットから一つを選択できます。 @font-palette-values規則は、 パレット内の一部の色を上書きしたり、 全く新しいパレットを作成することもできます。

9.1. カラーフォントパレットの制御: font-paletteプロパティ

多くのカラーフォント形式では、グリフ内の色をパラメータ化できます。 これらのフォントでは、ジオメトリ記述時に色はインデックス参照されます。 インデックスは現在有効なパレット内で、 フォント内のルックアップテーブルによって解決されます。 ただし、多くのフォントは複数パレットを含み、 どれもフォントデザイナーが視覚的に調和する色セットを選定しています。

さらに一部のカラーフォント形式では、 通常の無色アウトライン字形と着色済み字形の両方を提供することもあります。

名前: font-palette
値: normal | light | dark | <palette-identifier> | <palette-mix()>
初期値: normal
適用対象: 全要素とテキスト
継承: はい
パーセンテージ: 該当なし
算出値: 指定キーワード・識別子または<palette-mix()>関数。<palette-mix()>が結果的にパレットと同等の場合は単一キーワードや識別子に単純化されます。
正規順序: 文法による
アニメーションタイプ: 算出値による
テスト

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
一部カラーフォント形式は、特定のパレットがlight（白に近い背景）で使えることを示すメタデータを含みます。 このキーワードはユーザーエージェントが フォントファイル内でそのようにマークされた最初のパレットを使用させます。 フォント形式がこのメタデータを持たない場合や該当パレットがない場合、 この値はnormalと同じ挙動になります。
dark
一部カラーフォント形式は、特定のパレットがdark（黒に近い背景）で使えることを示すメタデータを含みます。 このキーワードはユーザーエージェントが フォントファイル内でそのようにマークされた最初のパレットを使用させます。 フォント形式がこのメタデータを持たない場合や該当パレットがない場合、 この値はnormalと同じ挙動になります。
<palette-identifier>
この値は使用するCSS定義パレットを識別します。 ユーザーは@font-palette-values規則でパレットを定義できます。 該当する@font-palette-values規則がなければ、 この値はnormalと同じ挙動になります。

<palette-identifier>は <dashed-ident>として構文解析されます。

注: こうしたCSS定義パレットは フォント内既存パレットへの参照・既存パレットの改変・完全新規パレットのいずれの場合もあり得ます。

<palette-mix()>
この値は、<palette-identifier>、 パレットキーワードnormal・light・dark、 または他の<palette-mix()>値によって識別される2つのパレット間の補間位置を定義します。

フォントのグリフは、最初と二番目のパレットで一致する色インデックスごとに補間して作成されるパレットで描画されます。 必要なら<palette-mix()>関数は再帰的に解決されます。

各パレット色の補間は、<color-mix()>関数のルールに従います。

パーセンテージの正規化はCSS Color 5 § 2.1 Percentage Normalizationに従います。

テスト

注: lightや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;
}
「Animate」という単語がピンクと黄色パレット間でアニメーションする例。
Nabla Color by typearture.com - フォント内のパレット1と7間のアニメーション。
テスト

さらに例と画像を追加してください。

9.2. ユーザー定義フォントカラーパレット: @font-palette-values規則

@font-palette-values規則はカラーパレットを定義し、 そのカラーパレットを特定フォントに関連付けます。 これにより、Web著者はフォントファイル内の既存パレットだけでなく、 任意の<color>を カラーフォント内で利用できます。

注: OpenType CPALテーブルはsRGB色に制限されています。 <color> は@font-palette-valuesにて任意のCSS色を指定可能です。 一部実装は現状APIがsRGBのみ対応のため指定色をsRGBに変換することがありますが、 これは一時的な制限と想定されています。著者はこのsRGB変換を前提にすべきではありません。

さらに、この規則と特定フォントの関連付けによって、 パレット名が異なるフォントごとに異なる適用をされるため、 複数フォントを要素で使う場合（フォントフォールバック等）に 複数フォントで類似色を使えます。

注: Web著者は1つのフォントに複数パレットを作成して Webコンテンツの複数テーマを作ったり、 複数フォントに合わせたマッチングパレットを作ってデザインの一貫性を保つこともできます。

@font-palette-values規則は フォントで使う色パレットを表します。 パレットは色の順序付きコレクションです。 @font-palette-valuesを使うことで 著者はフォント内の既存パレット参照・著者定義色でパレット新規作成・ フォントのパレットから著者指定色で一部上書きなどが可能です。

パレットは常に完全でなければならず、色が欠けるパレットは定義できません。 欠けている色がある場合は、base-paletteディスクリプタで指定した フォント内パレットから補われます。

数式関数（calc()等）や var()、env()も @font-palette-values規則内のディスクリプタ値で有効です。 これらはルート要素のコンテキストで評価されます。相対単位もルート要素のコンテキストで評価されます。

@font-palette-values規則は @font-palette-valuesアットキーワードと ディスクリプタ宣言ブロックからなります。構文は次の通りです： 

@font-palette-values <dashed-ident> {
    <declaration-list>
}
テスト

@font-palette-values規則はこの仕様で定義されるディスクリプタのみ受け付けます。

Bixa Colorのカラーパレットを変更する例。 
@font-palette-values --Cooler {
    font-family: Bixa;
    base-palette: 1;
    override-colors:
        1 #7EB7E4;
}
色の上書き例
Bixa Color by 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-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; /* ...ピンクをlimeで上書き */
}

h1 {
  font-family: Bixxxa;
  font-palette: --ToxicGreen;
}

h2 {
  font-family: Bungeehee;
  font-palette: --ToxicGreen;
}

Roel Nieskensによる例

注: ファミリ名が複数物理フォントで共有されている場合 （unicode-rangeで複合フォントを作る等）で それぞれのフォントが異なるパレットを持つ場合、 @font-palette-valuesで部分パレット指定すると 意図通りにならない可能性が高いです。 この場合は完全なパレット定義を与える方が良いです。

上記例で、 2つのフォントファミリーが互換パレット名を持つよう設定されているので 以下のように書くこともできます： 
h3 {
  font-family: Bixxxa, Bungeehee;
  font-palette: --ToxicGreen;
}

これでそれぞれのフォントで異なるパレット番号でも 正しく目的のパレットを適用できます。

一連の@font-palette-values規則が 文書内で利用可能な著者定義パレットを決定します。

著者定義カラーパレットは それを参照する文書でのみ利用可能でなければなりません。 参照しない文書で著者定義カラーパレットを利用すると セキュリティ漏洩となり、 攻撃者による攻撃ベクトルとなり得ます。

このアットルールはCSSの前方互換構文解析規則に従います。 宣言ブロック内のプロパティ同様、 ユーザーエージェントが未対応のディスクリプタ宣言は無視されなければなりません。 @font-palette-values規則には font-familyディスクリプタが必須です。 これが無い場合は@font-palette-values規則は 無効となり完全に無視されなければなりません。

ユーザーエージェントがプラットフォーム資源不足や カラーフォント非対応、カラーフォント無効化機能実装時は、 @font-palette-values規則は単に無視されるべきです。 この仕様で定義された個々のディスクリプタ挙動は変更されるべきではありません。

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

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

この記述子は、このパレットが適用されるフォントファミリーを定義します。 § 5 フォントマッチングアルゴリズムと同じフォントファミリーリストを使います。 このパレットは、これらのファミリ名を持つフォントにのみ適用されます。 この記述子の値は、名前付きフォントファミリーのみ許可されることを意味し、 一般フォントを含むリストを指定した場合は構文エラーとなります。 フォントファミリーリスト内で構文エラーが発生した場合、 この記述子は無視されます （CSS OMには残りますが、どのフォントファミリーにもマッチしません）。

9.2.2. ベースパレットの指定: base-palette記述子

名前: base-palette
対象: @font-palette-values
値: light | dark | <integer [0,∞]>
初期値: 該当なし
light
一部カラーフォント形式は、特定のパレットがlight（白に近い背景）で使えることを示すメタデータを含みます。 このキーワードはフォントファイル内でそのようにマークされた最初のパレットを識別します。 フォント形式がこのメタデータを持たない場合や該当パレットがない場合、 この値は0と同様に扱われます。
dark
一部カラーフォント形式は、特定のパレットが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ブロックで表す カラーパレット内の単一色を上書きします。

Handover Sansの3番目のカラーパレット名を変更する例 
@font-palette-values --Augusta {
    font-family: Handover Sans;
    base-palette: 3;
}

この記述子が@font-palette-values規則内に存在しない場合、 またはフォントがbase-palette値のインデックスでパレットを持たない場合は、 0が指定されたかのように扱われます。 フォントがカラーパレットを持たない場合、 この@font-palette-values規則で表す 初期カラーパレットには色が含まれません。 パレット内の色は、override-color記述子で @font-palette-values規則内で上書きできます。

9.2.3. パレットの色の上書き: override-colors記述子

名前: override-colors
対象: @font-palette-values
値: [ <integer [0,∞]> <color> ]#
初期値: 該当なし

この記述子は、 この@font-palette-values規則で表される 初期カラーパレットの色を上書きします。

指定された<color>は 絶対色でなければなりません。

override-colors記述子は、 パレットインデックスと色のカンマ区切りリストを取ります。 リストの各項目は、パレットへのエントリと置き換える色のタプルを表します。

この記述子値内の各キー／値ペアについて、 初期パレット（base-palette記述子で指定）の 該当キーの色が、この記述子値で指定した色に上書きされます。 初期パレットのインデックス範囲外のキーは無視されます。

override-colors記述子内のパレットインデックスは （0基準の）パレットインデックスです。

整数値は0から始まります。

複数の異なるキー／値ペアが同じ色インデックス（名前または整数）を指定した場合、 描画には最後のキーが使われます。シリアライズ時は両方のキー／値ペアが存在します。

注: これは、2つの異なる要素で同じ値のfont-paletteを使っても、 @font-palette-values規則内の変数値が 2要素の文脈で異なるため、異なるパレットが使われることがあるという意味です。

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);
}

注: CPALテーブルのバージョン0および1で指定される色はsRGBです。

9.3. テキスト表示スタイルの選択: font-variant-emojiプロパティ

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

このプロパティはWeb著者が、 特定の絵文字コードポイントで絵文字表示・テキスト表示のどちらを使うか選択できます。 従来は、Variation Selector 15（U+FE0E）やVariation Selector 16（U+FE0F）を コードポイントに付加することで表示スタイルを選択していました。 しかしfont-variant-emojiを使うことで、 バリエーションセレクタの代わりにデフォルトの表示スタイルを設定できます。

Unicodeが絵文字表示シーケンスに寄与するものと指定した コードポイントだけが このプロパティの影響を受けます。 このCSS仕様内では、これらの文字を 絵文字表示参加コードポイント と呼びます。 他の文字にはこのプロパティの効果はありません。

このプロパティはフォントフォールバックに影響することが想定されていますが、 font-variant-emojiとフォントフォールバックの 具体的な挙動は明示的に未指定です。 ただし、バリエーションセレクタはクラスターマッチングセクションで定義された 先行クラスタ内に含まれている必要があります。 この挙動の自然な結果として、 バリエーションセレクタは前の文字と異なるフォントで描画されてはなりません。 つまり、フォントフォールバックは （値の説明通り）対応するバリエーションセレクタが意図されたかのように動作し、 その後フォールバック（クラスターフォールバック含む）が実施され、 付加されたバリエーションセレクタの表示意図を考慮しなければなりません。

font-variant-emojiが使われていても、 要素内容にVariation Selector 15（U+FE0E）やVariation Selector 16（U+FE0F）が含まれていれば、 font-variant-emojiで指定した描画が上書きされます。 つまりfont-variant-emojiは デフォルト表示スタイルを設定しますが、描画対象のテキストはそれを上書き可能です。

注: 絵文字表示シーケンスの扱いは プラットフォームごとに慣習が異なります。 クロスプラットフォーム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プロパティ値に応じて、 絵文字デフォルト・テキストデフォルト・テキスト専用のいずれかで描画します。 FE0E VARIATION SELECTOR-15やU+FE0F VARIATION SELECTOR-16が存在する場合、 個々の表示参加コードポイントのデフォルト表示を上書きします。
U+1F6CB COUCH AND LAMPの絵文字表示をしたい場合、 CustomEmoji.ttfがUAの絵文字表示対応の概念に従うようにして、下記のようにします： 
@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つのメカニズムで表現されます：

Webフォントは、@font-face規則が関連付けられているか、FontFaceSetを所有するDocument以外のDocumentではアクセスできません。他のデバイス上のアプリケーションもWebフォントにアクセスできてはなりません。

インストール済みフォントはWebフォントであってはならず、Webフォントはインストール済みフォントであってはなりません。

Webフォントはインストール済みフォントをシャドウするため、インストール済みフォントとWebフォントが同じファミリ名を持つ場合、インストール済みフォントは利用できません。

10.3. プリインストールフォントとユーザーインストールフォント

ユーザーはデバイスにフォントをインストールすることができます。 ユーザーインストールフォントは、ユーザーが「インストール」ボタンをクリックする、 または特定ディレクトリにファイルをコピーするなど、明示的な操作によってインストールされます。 このようなフォントはユーザーインストールフォントであり、同時にインストール済みフォントでもあります。 Webコンテンツの著者はユーザーインストールフォントの存在を前提にすべきではありません。 なぜなら、特定フォントをインストールする操作をユーザーが実行している保証はないからです。

ユーザーインストールフォントがフォントマッチングアルゴリズムとどのように相互作用するかは、フォントマッチングアルゴリズムの説明を参照してください。

ユーザーインストールフォントでないインストール済みフォントはプリインストールフォントです。特定バージョンのOSを利用する全ユーザーが同じプリインストールフォントセットを持つ可能性が高いです。そのため、こうしたOSをターゲットにするWebコンテンツ著者は、font-familyプロパティでこれらフォントのファミリ名を利用することができます。

10.4. システムフォント

システムフォントは、system-ui 汎用フォントファミリ名で使われるフォントです。これはプリインストールフォントの例です。

テスト

11. フォント技術とフォーマット

11.1. フォント技術

features-opentype、features-aat、features-graphite技術は フォント機能のサポートを指し、[OPENTYPE]ではGSUB およびGPOS テーブル、 [AAT-FEATURES]ではmorx とkerx テーブル、 [GRAPHITE]では Silf、Glat 、Gloc 、Feat 、Sill テーブルなどで実装されています。 Graphite Table Format参照。 § 6 フォント機能プロパティはこれらとの相互作用を説明します。

variations技術はフォントバリエーションのサポートを指し、[OPENTYPE]ではavar, cvar, fvar, gvar, HVAR, MVAR, STAT, VVAR テーブル、 [AAT-FEATURES]ではavar, cvar, fvar, gvar テーブルなどで実装されています。 § 2 基本フォントプロパティや§ 8 フォントバリエーションプロパティで関連プロパティを説明します。

color-colrv0、color-colrv1、color-svg、color-sbix、color-cbdt技術は 様々なカラーフォントファイル技術を指します。 それぞれの技術は (COLR, SVG, sbix またはCBDT) [OPENTYPE]や [AAT-FEATURES]フォント内のテーブルとして実装され、要件を満たすためにサポートが必要です。

palettes技術はフォントパレットのサポートを指し、[OPENTYPE]や[AAT-FEATURES]ではCPAL テーブルで一般的に実装されています。 § 9 カラーフォント対応はこれら機能との相互作用プロパティを説明します。

incremental-patch、incremental-range、incremental-auto技術は インクリメンタルフォント転送[IFT]のクライアント対応であり、 patch-subset、range-request、またはこれら2つの方式の自動ネゴシエーションを指します。

背景情報は[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（非推奨） .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
テスト

TrueTypeとOpenTypeの一般的な利用の重複を考慮し、 フォーマットヒント"truetype"と"opentype"は同義として扱わなければなりません。 "opentype"のヒントは フォントがPostscript CFF形式グリフデータを含むことや OpenTypeレイアウト情報を含むことを意味するものではありません （詳細は付録A参照）。

12. オブジェクトモデル

@font-faceや@font-feature-values規則の内容は、 以下のCSSオブジェクトモデル拡張でアクセスできます。

テスト

12.1. CSSFontFaceRule インターフェース

CSSFontFaceRuleインターフェースは<@font-face>規則を表します。

[Exposed=Window]
interface CSSFontFaceRule : CSSRule {
  readonly attribute CSSStyleDeclaration 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;
};

[Exposed=Window]
interface CSSFontFeatureValuesMap {
  maplike<CSSOMString, sequence<unsigned long>>;
  undefined set(CSSOMString featureValueName,
         (unsigned long or sequence<unsigned long>) values);
};
fontFamily 型CSSOMString
指定した機能値セットが定義される1つ以上のフォントファミリーのリスト。
値マップ 型CSSFontFeatureValuesMap（readonly）
指定したfont-variant-alternates値タイプごとに機能値名に関連付けられた値のマップ

CSSFontFeatureValuesRuleの各値マップ属性は、対応するfeature value blockで定義された値を反映します。 例えばannotation属性は@annotation feature value block内の値を持ち、ornaments属性は@ornaments feature value block内の値を持ちます。他も同様です。

CSSFontFeatureValuesMapインターフェースはデフォルトのMapクラスメソッドを使いますが、setメソッドは動作が異なります。符号なし整数列を受け取り、指定したfeatureValueNameに関連付けます。デフォルトMapクラスのメソッドと同様に動作しますが、符号なしlong値1つは単一値のシーケンスとして扱われます。値の数が不正な場合は例外を投げます。対応するfeature value blockが値数制限を持つ場合、setメソッドは入力シーケンスが制限を超えるとInvalidAccessError例外を投げます。複数値機能値定義の説明でタイプごとの最大値数を参照してください。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値のシリアライズの原則に従います。

テスト

13.2. フォント関連at規則のシリアライズ

個別ディスクリプタで特記されていない限り、 このモジュールで定義されるat規則のディスクリプタは CSSOM § 6.7.2 CSS値のシリアライズの原則に従います。

特に、短い表現の原則に従い、 範囲値を受け入れるディスクリプタで 開始値と終了値が同じ場合（範囲がゼロ）、 ディスクリプタは範囲ではなく単一値としてシリアライズされます。

テスト
例えば以下の規則 
@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; }
}

付録A: プラットフォームフォントプロパティからCSSプロパティへの対応

この付録は、他セクションで説明されている問題や状況の背景として含まれています。あくまで参考情報です。

CSSのフォントプロパティは、使用する下位フォントフォーマットに依存しないよう設計されています。 ビットマップフォント、Type1フォント、SVGフォント、一般的なTrueTypeやOpenTypeフォントを指定するためにも使えます。 しかしTrueTypeやOpenTypeの仕様には、著者が混乱しやすく、プラットフォームごとに実装者が課題となる部分が多くあります。

TrueTypeはAppleで開発され、 TrueType [TRUETYPE]は画面と印刷の両方向けアウトラインフォントフォーマットとして設計されました。 MicrosoftはAppleとともにTrueTypeフォーマットの開発に参加し、両プラットフォームでTrueTypeフォントがサポートされています。 TrueTypeのフォントデータは、4文字タグで区別される一連のテーブルで構成され、各テーブルには特定種類のデータが格納されています。 例えば、著作権・ライセンス情報を含む名称情報はnameテーブルに格納されます。 character map（cmap）テーブルには文字エンコーディングからグリフへの対応が含まれています。 Appleは後に高度なタイポグラフィ機能をサポートするため追加テーブルを導入し、これがApple Advanced Typography（AAT）フォントと呼ばれるようになりました。 MicrosoftとAdobeは高度なタイポグラフィ向けに別のテーブルセットを開発し、OpenType [OPENTYPE]フォーマットと呼ばれています。 OpenType仕様はISOで標準化され、Open Font Format [OPEN-FONT-FORMAT]となっています。

多くの場合、Microsoft WindowsやLinuxで使用されるフォントデータは、 TrueType形式がプラットフォームごとの明示的な違いを許容しているため、 AppleのMac OS Xで使用されるデータと若干異なります。 これにはフォントメトリクス、名前、そして文字マップデータが含まれます。

特に、フォントファミリー名データはプラットフォーム間で扱いが異なります。 TrueTypeやOpenTypeフォントでは、ファミリー名はnameテーブルのname ID 1のレコードに含まれます。 複数ロケール用に複数名を格納できますが、MicrosoftはUS英語版名を必ず含むよう推奨しています。 Windowsでは後方互換性のため、このファミリー名は最大4フェイスに限定されています。 より大きなグループ化には"preferred family"（name ID 16）や"WWS family"（name ID 21）が使えます。 OSXなど他プラットフォームにはこの制約がなく、ファミリー名で全グループ化を定義します。

その他nameテーブルデータは、ファミリー内の特定フェイスを一意に識別する名称を提供します。 フルフォント名（name ID 4）やPostscript名（name ID 6）は、単一フェイスを一意に示します。 例えばGill SansファミリーのBoldフェイスはfullnameが"Gill Sans Bold"、Postscript名が"GillSans-Bold"です。 フェイスごとに複数ローカライズfullnameがあっても、Postscript名は常に限定されたASCII文字のみの一意名です。

プラットフォームごとにフォント検索に使う名称が異なります。 例：WindowsのGDI CreateIndirectFont APIではファミリー名またはfullnameでフェイス検索、Mac OS XのCTFontCreateWithName APIではfullname・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上のユーザーエージェントは、インストール・描画時に不正または悪意あるフォントを検出するフォントサニタイザを使い、利用を防いでいます。

16. アクセシビリティ考慮事項

テキストの視覚的レンダリングにフォントを使うことは、一般にアクセシビリティへ影響を与えるべきではありません。 例えば、スクリーンリーダーを使ってテキストを音声化する場合、フォントはダウンロードされず、 そのフォントに何が含まれていても影響を受けません。

ただし、フォントグリフで伝達される意味と文字で伝達される意味が同じであるという前提です。

歴史的には、これは常に成立していたわけではありません。 例えば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. 2021年12月21日作業草案からの変更点 （リンク）

18.2. 2021年7月29日作業草案からの変更点 （リンク）

18.3. 2020年11月17日作業草案からの変更点 （リンク）

18.4. 2019年11月13日作業草案からの変更点 （リンク）

18.5. 2018年9月20日作業草案からの変更点 （リンク）

18.6. 2018年4月10日作業草案からの変更点 （リンク）

18.7. CSS Fonts 3（2018年9月20日勧告）からの変更点 （リンク）

これは CSS Fonts 4 における、CSS Fonts 3 との比較での変更点のまとめです。

適合性

文書の慣例

適合性要件は、記述的な主張と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はアクセシブルな代替手段を提供しなければならない。

テスト

この仕様の内容に関連するテストは、ここに示すような “Tests” ブロックで記載される場合があります。 このようなブロックは非規範です。

適合性クラス

本仕様への適合性は、以下3つの適合クラスについて定義されます：

スタイルシート
CSS スタイルシート。
レンダラー
UA（ユーザーエージェント）。スタイルシートのセマンティクスを解釈し、それを使用する文書をレンダリングします。
オーサリングツール
UA（ユーザーエージェント）。スタイルシートを作成します。

スタイルシートが本仕様に適合するには、 このモジュールで定義された文法を使うすべての文が、汎用CSS文法とこのモジュールで定義された各機能の個別文法に従って妥当でなければなりません。

レンダラーが本仕様に適合するには、 スタイルシートを適切な仕様どおりに解釈することに加え、本仕様で定義された全機能を正しく構文解析し、文書を適切にレンダリングする必要があります。ただし、デバイスの制限によりUAが文書を正しくレンダリングできない場合でも、UAの非適合とはなりません（例：モノクロモニターでは色表示は不要）。

オーサリングツールが本仕様に適合するには、 作成するスタイルシートが汎用CSS文法およびこのモジュールで定義された各機能の個別文法に従って構文的に正しいこと、かつ本モジュールで記載されるスタイルシートのその他適合要件を満たす必要があります。

部分実装

著者が前方互換パース規則を利用してフォールバック値を割り当てられるよう、CSSレンダラーは、サポートしないat規則・プロパティ・値・キーワード・その他構文要素を無効として扱い（適切に無視）、使えるレベルのサポートがないものを全て無視しなければなりません。特に、UAはサポートしない値を一部だけ無視して、サポートされる値だけを複数値プロパティ宣言で適用してはならない：値が無効とみなされた場合（サポート外値は無効）、CSSでは宣言全体が無視されます。

不安定・独自機能の実装

将来の安定CSS機能との衝突を避けるため、CSSWGはベストプラクティスに従い、不安定機能や独自拡張CSSの実装を推奨します。

非実験的実装

仕様が現行標準（Candidate Recommendation）段階に達したら、非実験的実装が可能となり、実装者は仕様どおりに正しく実装できているCRレベルの機能については、プレフィックスなしでリリースすべきです。

CSSの相互運用性を確立・維持するため、CSSワーキンググループは非実験的CSSレンダラーが、いずれかCSS機能のプレフィックスなし実装をリリースする前に、実装レポート（必要ならそのテストケース）をW3Cに提出するよう依頼しています。W3Cに提出されたテストケースはCSSワーキンググループによるレビューと修正の対象となります。

テストケース・実装レポート提出の詳細はCSSワーキンググループWebサイト https://www.w3.org/Style/CSS/Test/ を参照してください。 質問は public-css-testsuite@w3.org メーリングリストへ。

索引

この仕様で定義されている用語

引用で定義された用語

参考文献

規範参考文献

[AAT-FEATURES]
Apple Advanced Typography Font Feature Registry. URL: https://developer.apple.com/fonts/TrueType-Reference-Manual/RM09/AppendixF.html
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. 2022年1月13日. CR. URL: https://www.w3.org/TR/css-cascade-5/
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley; Lea Verou. CSS Color Module Level 4. 2022年11月1日. CR. URL: https://www.w3.org/TR/css-color-4/
[CSS-COLOR-5]
Chris Lilley; et al. CSS Color Module Level 5. 2022年6月28日. WD. URL: https://www.w3.org/TR/css-color-5/
[CSS-COLOR-ADJUST-1]
Elika Etemad; et al. CSS Color Adjustment Module Level 1. 2022年6月14日. CR. URL: https://www.w3.org/TR/css-color-adjust-1/
[CSS-ENV-1]
CSS Environment Variables Module Level 1. 編集者草案. URL: https://drafts.csswg.org/css-env-1/
[CSS-FONTS-4]
John Daggett; Myles Maxfield; Chris Lilley. CSS Fonts Module Level 4. 2021年12月21日. WD. URL: https://www.w3.org/TR/css-fonts-4/
[CSS-INLINE-3]
Dave Cramer; Elika Etemad. CSS Inline Layout Module Level 3. 2023年4月1日. WD. URL: https://www.w3.org/TR/css-inline-3/
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin. CSS Syntax Module Level 3. 2021年12月24日. CR. URL: https://www.w3.org/TR/css-syntax-3/
[CSS-TEXT-4]
Elika Etemad; et al. CSS Text Module Level 4. 2023年10月20日. WD. URL: https://www.w3.org/TR/css-text-4/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 2022年12月1日. CR. URL: https://www.w3.org/TR/css-values-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. 2023年12月18日. WD. URL: https://www.w3.org/TR/css-values-4/
[CSS-VARIABLES-1]
Tab Atkins Jr.. CSS Custom Properties for Cascading Variables Module Level 1. 2022年6月16日. CR. URL: https://www.w3.org/TR/css-variables-1/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. 2019年7月30日. CR. URL: https://www.w3.org/TR/css-writing-modes-4/
[CSS2]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 2011年6月7日. REC. URL: https://www.w3.org/TR/CSS21/
[CSS22]
Bert Bos. Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification. 2016年4月12日. WD. URL: https://www.w3.org/TR/CSS22/
[CSS3TEXT]
Elika Etemad; Koji Ishii; Florian Rivoal. CSS Text Module Level 3. 2023年9月3日. CR. URL: https://www.w3.org/TR/css-text-3/
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). 2021年8月26日. WD. URL: https://www.w3.org/TR/cssom-1/
[FETCH]
Anne van Kesteren. Fetch 現行標準. URL: https://fetch.spec.whatwg.org/
[GRAPHITE]
Graphite technical overview. 2012年. URL: https://scripts.sil.org/cms/scripts/page.php?site_id=projects&item_id=graphite_techAbout
[HTML]
Anne van Kesteren; et al. HTML 現行標準. URL: https://html.spec.whatwg.org/multipage/
[I18N-GLOSSARY]
Richard Ishida; Addison Phillips. Internationalization Glossary. 2024年1月23日. NOTE. URL: https://www.w3.org/TR/i18n-glossary/
[INFRA]
Anne van Kesteren; Domenic Denicola. Infra 現行標準. URL: https://infra.spec.whatwg.org/
[OPENTYPE]
OpenType specification. URL: http://www.microsoft.com/typography/otspec/default.htm
[OPENTYPE-FEATURES]
OpenType feature registry. URL: http://www.microsoft.com/typography/otspec/featurelist.htm
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. 1997年3月. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[RFC8081]
C. Lilley. The "font" Top-Level Media Type. 2017年2月. Proposed Standard. URL: https://www.rfc-editor.org/rfc/rfc8081
[UNICODE]
The Unicode Standard. URL: https://www.unicode.org/versions/latest/
[UTS51]
Mark Davis; Ned Holbrook. Unicode Emoji. 2023年9月5日. Unicode Technical Standard #51. URL: https://www.unicode.org/reports/tr51/tr51-25.html
[WEBIDL]
Edgar Chen; Timothy Gu. Web IDL 現行標準. URL: https://webidl.spec.whatwg.org/

参考情報文献

[CHARMOD-NORM]
Addison Phillips; et al. Character Model for the World Wide Web: String Matching. 2021年8月11日. NOTE. URL: https://www.w3.org/TR/charmod-norm/
[CSS-DISPLAY-3]
Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 3. 2023年3月30日. CR. URL: https://www.w3.org/TR/css-display-3/
[CSS-FONT-LOADING-3]
Tab Atkins Jr.. CSS Font Loading Module Level 3. 2023年4月6日. WD. URL: https://www.w3.org/TR/css-font-loading-3/
[CSS-FONTS-3]
John Daggett; Myles Maxfield; Chris Lilley. CSS Fonts Module Level 3. 2018年9月20日. REC. URL: https://www.w3.org/TR/css-fonts-3/
[CSS-OVERFLOW-3]
Elika Etemad; Florian Rivoal. CSS Overflow Module Level 3. 2023年3月29日. WD. URL: https://www.w3.org/TR/css-overflow-3/
[CSS-TRANSFORMS-1]
Simon Fraser; et al. CSS Transforms Module Level 1. 2019年2月14日. CR. URL: https://www.w3.org/TR/css-transforms-1/
[CSS3-CONDITIONAL]
David Baron; Elika Etemad; Chris Lilley. CSS Conditional Rules Module Level 3. 2022年1月13日. CR. URL: https://www.w3.org/TR/css-conditional-3/
[IFT]
Chris Lilley; Garret Rieger; Myles Maxfield. Incremental Font Transfer. 2023年5月30日. WD. URL: https://www.w3.org/TR/IFT/
[OPEN-FONT-FORMAT]
Information technology — Coding of audio-visual objects — Part 22: Open Font Format. URL: http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009%28E%29.zip
[PFE-report]
Chris Lilley. Progressive Font Enrichment: Evaluation Report. 2020年10月15日. Note. URL: https://www.w3.org/TR/PFE-evaluation/
[TRUETYPE]
TrueType™ Reference Manual. URL: https://developer.apple.com/fonts/TrueType-Reference-Manual/
[UAX29]
Josh Hadley. Unicode Text Segmentation. 2023年8月16日. Unicode Standard Annex #29. URL: https://www.unicode.org/reports/tr29/tr29-43.html
[WINDOWS-GLYPH-PROC]
John Hudson. Windows Glyph Processing. URL: http://www.microsoft.com/typography/developers/opentype/default.htm

プロパティ索引

名前 値 初期値 適用対象 継承 %値 アニメーションタイプ 正規順序 算出値 メディア
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参照 算出値タイプによる 文法による 絶対長
font-size-adjust none | <number [0,∞]> none 全要素およびテキスト はい 該当なし 算出値タイプによる 文法による 数値またはキーワード none
font-style normal | italic | 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 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 全要素およびテキスト はい 未解決 算出値タイプによる 文法による パーセンテージ（下記参照）

@font-face 記述子

名前 値 初期値
ascent-override normal | <percentage [0,∞]> normal
descent-override normal | <percentage [0,∞]> normal
font-display auto | block | swap | fallback | optional auto
font-family <family-name> 該当なし
font-feature-settings normal | <feature-tag-value># normal
font-language-override normal | <string> normal
font-named-instance auto | <string> auto
font-style auto | normal | italic | oblique [ <angle [-90deg,90deg]>{1,2} ]? auto
font-variation-settings normal | [ <string> <number>]# normal
font-weight auto | <font-weight-absolute>{1,2} auto
font-width auto | <'font-width'>{1,2} auto
line-gap-override normal | <percentage [0,∞]> normal
src <font-src-list> 該当なし
unicode-range <urange># U+0-10FFFF

@font-feature-values 記述子

名前 値 初期値
font-display auto | block | swap | fallback | optional auto

@font-palette-values 記述子

名前 値 初期値
base-palette light | dark | <integer [0,∞]> 該当なし
font-family <family-name># 該当なし
override-colors [ <integer [0,∞]> <color> ]# 該当なし

IDL索引

[Exposed=Window]
interface CSSFontFaceRule : CSSRule {
  readonly attribute CSSStyleDeclaration style;
};

partial interface CSSRule {  const unsigned short FONT_FEATURE_VALUES_RULE = 14;
};
[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;
};

[Exposed=Window]
interface CSSFontFeatureValuesMap {
  maplike<CSSOMString, sequence<unsigned long>>;
  undefined set(CSSOMString featureValueName,
         (unsigned long or sequence<unsigned long>) values);
};

[Exposed=Window]interface CSSFontPaletteValuesRule : CSSRule {
  readonly attribute CSSOMString name;
  readonly attribute CSSOMString fontFamily;
  readonly attribute CSSOMString basePalette;
  readonly attribute CSSOMString overrideColors;
};

課題索引

垂直書きモードで、正と負のオブリークはどちらの方向に傾斜すべきか？ 垂直書きで必要となる逆方向の傾斜はどう実現するか？ ↵
fallback および optionalは、ファミリー内の一部フェイスのみ使用され、他はフォールバックが必要となり、「身代金メモ」風の見た目になることがある。 全フォントが同じ挙動（全てswap、または全てfallback）となるべきか？ フォントファミリー単位で挙動を制御する@font-feature-valuesも参照。 ↵
streamの種類に応じてフォントをロードする。 ↵
オブリークをノーマルより優先する閾値は、平均角度より低くすべき。 ↵
さらに例と画像を追加する。 ↵