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

1. はじめに

CSS Fonts Level 4仕様 ([CSS-FONTS-4]) では、 CSSが文書内でフォントを選択・使用するための制御方法について説明しています。 これにはバリアブルフォントやカラーフォントへの対応も含まれます。 ここで述べる内容は、CSS Fonts Level 4で定義されたプロパティやルールへの追加や変更点です。

この仕様は現在、CSS Fonts Level 4仕様に対する差分（デルタ）となっています。 ここに記載されていないことが削除されたと仮定しないでください。

1.1. 値の定義

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

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

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

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

2.1.1. ジェネリックフォントファミリー

CSS Fonts Level 4 の CSS Fonts 4 § 2.1.3 ジェネリックフォントファミリー に加え、以下の新しいジェネリックフォントファミリーも定義されます。

xxx

xxxジェネリックフォントファミリーのプレースホルダーテキスト。

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

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

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

同じフォントサイズでも、 テキストの見かけの大きさや可読性は フォント設計の違いにより異なります。 例えば、 ラテン文字やキリル文字のような 大文字・小文字を区別する二重書体では、 小文字の高さと大文字の高さの比率が 可読性の決定的な要因となります。 フォントのフォールバックが発生する場合、 フォールバック先のフォントは 希望するフォントファミリーと 主要なタイポグラフィメトリクスの比率が異なることがあり、 その結果、異なる大きさに見えたり、 可読性が低下したりする場合があります。

font-size-adjust プロパティは、 フォントのフォールバックが発生した際に テキストの可読性や見かけの大きさを 維持するための手段を提供します。 これは使用するフォントサイズを調整し、 指定したメトリックがどのフォントを使っても同じになるようにします。

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

none

特別な font-size の調整は行われません。

ex-height | cap-height | ch-width | ic-width | ic-height

正規化対象のフォントメトリックを指定します。 省略時は ex-height になります：

ex-height

フォントのアスペクト値を正規化します。 x-ハイトをフォントサイズで割った値を用います。

cap-height

フォントのキャップハイトを正規化します。 キャップハイトをフォントサイズで割った値を用います。

ch-width

フォントの横方向狭ピッチを正規化します。 “0”（U+0030）のアドバンス幅をフォントサイズで割った値を用います。

ic-width

フォントの横方向広ピッチを正規化します。 “水”（CJK水漢字、U+6C34）のアドバンス幅をフォントサイズで割った値を用います。

ic-height

フォントの縦方向広ピッチを正規化します。 “水”（CJK水漢字、U+6C34）のアドバンス高さをフォントサイズで割った値を用います。

w3c/csswg-drafts/6384[css-fonts-5] font-size-adjustでメトリックが欠損している場合

<number [0,∞]>

各フォントの使用サイズは、 選択したフォントメトリックが 算出された font-size のこの指定された比率になるように正規化されます。 つまり各グリフについて、使うフォントサイズ u は以下のように計算されます：

u  =  ( m / m′ ) s

各値の意味：

s  =  算出された 'font-size!!property' の値
m  =  'font-size-adjust' プロパティで指定したメトリック
m′ =  実際のフォントにおける該当メトリック
u  =  調整後に使われるフォントサイズ

負の値は無効です。

from-font

指定したメトリックの <number> を 最初に利用可能なフォントに基づいて計算します。

w3c/csswg-drafts/6384[css-fonts-5] font-size-adjustでメトリックが欠損している場合

下記のスタイルは希望するフォントファミリーとしてVerdanaを定義していますが、 Verdanaが利用できない場合はFuturaやTimesが使われます。 また、ある段落には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よりも可読性が下がります。

注: ダイアクリティカルマーク（発音記号など）が付くテキストでは、 x-ハイトが大きすぎると記号が狭くなってかえって可読性が下がる場合があります。

下図は各フォントでテキストをレンダリングした比較です。 列ごとにVerdana、Futura、Timesの順で表示しています。 各行内のセルでは同じfont-sizeを使い、赤線でx-ハイトの違いを示しています。 上半分では各行で同じfont-size値を指定しています。 下半分でも同様ですが、こちらは font-size-adjust プロパティを0.545に設定しているため、 実際のフォントサイズが調整されて各行でVerdanaのx-ハイトが保たれます。 下半分では小さいテキストでも比較的読みやすさが維持されている点に注目してください。

font-size-adjust の値は 使用される font-size 値に影響しますが、算出値には影響しません。 したがって、exやchなどフォントメトリックに基づく相対単位には影響しますが、em単位の大きさには影響しません。 また line-height の数値値は 算出された font-size に対して適用されるため、font-size-adjust は 使用される line-height 値には影響しません。

注: font-size-adjust は line-height の計算には考慮されないため、 行の高さを厳しめに指定するとテキストが重なってしまう場合があります。 例えば、アスペクト値の低いフォントが高いフォントに正規化されると、 アセンダやディセンダが line-height: 1 の行ボックス外にはみ出す可能性があります。

font-size-adjust の調整は 選択された任意のフォントに適用されますが、 一般的な使い方では font-family リストの最初（最優先）のフォントの該当メトリック値を基準にすることが多いです。 これを正確に指定すれば、 調整式の (m/m′) の項は 最初のフォントについては 1 となり、調整は行われません。 その他のフォントは一致するように調整されます。 値が不正確に指定された場合、 font-size-adjust に対応していない古いユーザーエージェントでは familyリスト最初のフォントの表示が異なって見えることがあります。

作者は、同じ内容のspanを 異なる font-size-adjust で比較することで 任意のフォントの アスペクト値 を計算できます。 同じfont-sizeを使った場合、font-size-adjust の値が フォントに合っていれば2つのspanの大きさが揃います。

2つの枠付きspanを使って フォントの アスペクト値 を測定します。 両者の font-size は同じですが、 右側のspanだけ font-size-adjust が指定されています。 0.5から始めて、 2つの枠が揃うまで値を調整できます。

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

span {
  border: solid 1px red;
}

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

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

右側のボックスの方が少し大きいため、このフォントの アスペクト値 は0.5より小さいことがわかります。 値を調整して2つのボックスが揃うようにします。

注: 指定したメトリックが @font-face で 例えば size-adjust などで上書きされている場合、 計算には上書き後のメトリックが使われます。 そのため font-size-adjust と size-adjust を同時に使うと size-adjustは見かけ上効果がないように見えます。

3. フォントリソース

3.1. @font-face 規則

注: ディスクリプタは要素ごとではなくフォントごとに適用されます。 一つの要素内で複数のフォントが使用される場合があります（例えば first available font で未対応の文字用など）。

3.2. フォント参照: src ディスクリプタ

3.2.1. src ディスクリプタのパース

src ディスクリプタ値は、CSS Syntax 3 § 5.3.11 コンポーネント値のカンマ区切りリストのパースに従ってパースしなければなりません。 その後、各コンポーネント値を次の文法に従ってパースします：

<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 ]

コンポーネント値が正しくパースされ、かつ CSS Fonts 4 § 11.2 フォントフォーマット または CSS Fonts 4 § 11.1 フォント技術 に該当するサポート済みであれば、サポートされるソース一覧に追加します。 コンポーネント値のパースでエラーが発生した場合や、フォーマットや技術が未サポートの場合は、サポートソース一覧に追加しません。

この処理の最後にサポートされるエントリが1つもない場合、src ディスクリプタの値はパースエラーとなります。

これらのパース規則により、特定のフォント技術やフォント形式をサポートしないユーザーエージェントでもフォントのフォールバックが柔軟に行えます。

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

3.3. フォントプロパティディスクリプタ: font-size

auto

フォントは任意のフォントサイズにマッチします

<number>

1つだけ <number> を指定した場合はその特定のフォントサイズのみにマッチします。 2つの <number> を指定した場合は その範囲のフォントサイズにマッチします。

3.4. グリフサイズ乗数: size-adjust ディスクリプタ

size-adjust ディスクリプタは、このフォントのグリフのアウトラインやメトリックに乗算する倍率を指定します。 これにより、著者は同じ font-size で異なるフォントのデザインを調和できるようになります。

このフォントに関連するすべてのメトリック（グリフアドバンス、ベースラインテーブル、@font-face ディスクリプタによる上書きなど）および描画されるグリフ画像は、指定されたパーセンテージで拡大縮小されます。 そのため、フォントメトリック由来の値（ex や ch 単位、from-font 値の text-decoration-thickness など）も このフォントをソースとする場合に影響を受けます。 ただし、算出された font-size（およびそこから派生する em 単位や text-underline-offset のパーセンテージなど）は影響を受けません。

注: size-adjust ディスクリプタは font-size-adjust プロパティと同様に、exハイトを揃えることでフォントごとに調整を行いますが、 同様に 算出された font-size には影響しません。

3.5. 行の高さのフォントメトリック上書き: ascent-override, descent-override, line-gap-override ディスクリプタ

ascent-override, descent-override, line-gap-override ディスクリプタは、それぞれフォントの ascentメトリック、descentメトリック、line gapメトリック を指定します。 最初の値はx軸用、2つ目の値はy軸用（省略時は normal が既定）です。

normal

対応するメトリック値はフォントから通常通り取得され、このディスクリプタが@font-faceブロックに存在しない場合と同様に扱われます。

注: 一部のフォント形式ではこうしたメトリックの取得元が複数存在するため、ユーザーエージェントやプラットフォームによってテキストのレイアウトが異なる場合があります。

<percentage>

対応するメトリックは、指定されたパーセンテージと使用フォントサイズを乗算した値で置き換えられます。

font-size-adjust プロパティは size-adjust ディスクリプタの後に適用されます。

注: font-size-adjust を size-adjust の後に適用すると、size-adjust の効果が見かけ上なくなります。

注: これらのディスクリプタはいずれも算出された font-size、line-height、フォント相対長の計算には影響しません。 ただし line-height: normal や、より一般的にはインラインレベルコンテンツのベースライン整列の挙動には影響する可能性があります。

注: これらのメトリックは ブロック軸でのみ適用されるため、y軸の値は縦組みの 組版モード でのみ使用されます。

@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>

@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%;
  size-adjust: 96%;
}

<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"

3.6. 上付き・下付きメトリック上書き: superscript-position-override, subscript-position-override,superscript-size-override, subscript-size-override ディスクリプタ

superscript-position-override, subscript-position-override, superscript-size-override, subscript-size-override ディスクリプタは それぞれ、フォントの上付きオフセット・下付きオフセット・上付きサイズ・下付きサイズのメトリック値を指定します。 これらは font-variant-position でグリフ合成が必要な場合に使われます。 最初の値はx軸用、2つ目の値はy軸用（省略時は1つ目の値を使用）です。

normal

UAがフォントまたはヒューリスティックから適切なメトリック値を決定します。

from-font

フォントデータ内の対応するメトリック値が使用されます（存在しない場合は normal と同じ）。

<percentage>

対応するメトリックは指定したパーセンテージと使用フォントサイズを乗算した値に置き換えられます。

注: これらのメトリックは ブロック軸でのみ適用されるため、y軸の値は縦組みの 縦書き組版モードでのみ使用されます。

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

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

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

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

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

7. セキュリティ上の考慮事項

この仕様に関して新たなセキュリティ上の考慮事項は報告されていません。

8. プライバシー上の考慮事項

この仕様に関して新たなプライバシー上の考慮事項は報告されていません。

9. 謝辞

まず、編集者はこのモジュールの前レベルの貢献者全員に感謝したいと思います。

次に、PDFReactorのDerKoun氏、GoogleのXiaocheng Hu氏、MozillaのJonathan Kew氏に、本レベル5の改良への貢献に感謝します。

10. 変更点

10.1. 2021年12月21日WD 以降の変更点

• font-size記述子の初期値を修正
• font-size-adjust numberの文法に範囲を設定
• local()の文法をfont-face-nameの代わりにfamily-nameを使用するよう変更
• 最新のインクリメンタルフォントダウンロードキーワードに更新
• 一貫性のためCSS Conditional 5および11.1 Font techと同様にfeature-*を複数形に
• 範囲表記で無限大を∞で正規化
• tech()関数のタイプミス修正

10.2. 2021-07-29 WD 以降の変更点

• technology を tech に名称変更
• セキュリティとプライバシーを別セクションに分離
• font-technology の文法を修正
• CSS Fonts 4からsrc記述子のパースに関するセクションをコピー

10.3. 2021-06-29 FPWD 以降の変更点

• 警告の注意書きを削除
• インクリメンタルフォント技術をサポートに追加