CSS フォント読み込みモジュール レベル 3

1. はじめに

CSS では、作者が @font-face 規則を介して Web からカスタムフォントを読み込むことができます。 スタイルシートを作成する際には簡単に使用できますが、 スクリプトを介して動的に使用することははるかに困難です。

さらに、CSS では、ユーザーエージェントが実際にフォントをいつ読み込むかを選択できます。 フォントフェイスがページ上の何かによって現在使用されていない場合、 ほとんどのユーザーエージェントは関連するファイルをダウンロードしません。 つまり、後でそのフォントフェイスを使用すると、 ユーザーエージェントがようやく使用を認識してフォントファイルのダウンロードと解析を開始するため、遅延が発生します。

この仕様は、CSS のフォントフェイスに対するスクリプト用インターフェイスを定義し、 フォントフェイスを容易に作成できるようにし（FontFace インターフェイスを介して）、 スクリプトから読み込めるようにします（document.fonts を介して）。 また、個々のフォント、 またはページ全体のすべてのフォントの読み込み状態を追跡するためのメソッドも提供します。

この 仕様では、動作を定義するために通常の ES オブジェクトを使用している箇所がいくつかあります。 たとえば、内部で Promise を使用するさまざまな箇所や、 内部で Set を使用する FontFaceSet などです。 ここでの意図は、これらのオブジェクト （およびそのプロトタイプチェーン）が変更されていない初期状態であり、 作者が行ったいかなる操作にも影響されないことだと考えています。 これは適切な意図でしょうか？ もしそうなら、この仕様ではどのように示すべきでしょうか？

1.1. 値

この仕様では Promise を使用します。 これは ECMAScript 6 で定義されています。 MDN には、Promise を紹介する有用な チュートリアル資料があります。

1.2. タスクソース

この仕様でタスクをキューに入れる場合は常に、 そのタスクを「font loading」タスクソースにキューに入れます。

2. FontFace インターフェイス

FontFace インターフェイスは、単一の使用可能なフォントフェイスを表します。 CSS の @font-face 規則は暗黙的に FontFace オブジェクトを定義します。 また、URL またはバイナリデータから手動で構築することもできます。

typedef (ArrayBuffer or ArrayBufferView) BinaryData;

dictionary FontFaceDescriptors {
  CSSOMString style = "normal";
  CSSOMString weight = "normal";
  CSSOMString stretch = "normal";
  CSSOMString unicodeRange = "U+0-10FFFF";
  CSSOMString variant = "normal";
  CSSOMString featureSettings = "normal";
  CSSOMString variationSettings = "normal";
  CSSOMString display = "auto";
  CSSOMString ascentOverride = "normal";
  CSSOMString descentOverride = "normal";
  CSSOMString lineGapOverride = "normal";
};

enum FontFaceLoadStatus { "unloaded", "loading", "loaded", "error" };

[Exposed=(Window,Worker)]
interface FontFace {
  constructor(CSSOMString family, (CSSOMString or BinaryData) source,
                optional FontFaceDescriptors descriptors = {});
  attribute CSSOMString family;
  attribute CSSOMString style;
  attribute CSSOMString weight;
  attribute CSSOMString stretch;
  attribute CSSOMString unicodeRange;
  attribute CSSOMString variant;
  attribute CSSOMString featureSettings;
  attribute CSSOMString variationSettings;
  attribute CSSOMString display;
  attribute CSSOMString ascentOverride;
  attribute CSSOMString descentOverride;
  attribute CSSOMString lineGapOverride;

  readonly attribute FontFaceLoadStatus status;

  Promise<FontFace> load();
  readonly attribute Promise<FontFace> loaded;
};

オブジェクトは文書間を移動できるため、 どの文書を参照しているのかが明確になるよう、 「the document」へのすべての言及を明確化する必要があります。

すべての FontFace オブジェクトは、内部に [[FontStatusPromise]] スロットを持ち、 これはフォントの状態を追跡します。 最初は保留状態であり、 フォントが正常に読み込まれて解析された場合に履行され、エラーが発生した場合に拒否されます。

すべての FontFace オブジェクトはさらに、 内部 [[Urls]] および [[Data]] スロットも持ちます。 そのうち一方は null で、もう一方は null ではありません（null ではない方は、 どのデータが渡されたかに基づいてコンストラクターによって設定されます）。

2.1. コンストラクター

FontFace は、 フォントフェイスファイルを指す URL、 またはフォントフェイスのバイナリ表現を含む ArrayBuffer （または ArrayBufferView） のいずれかから構築できます。

FontFace(family, source, descriptors) メソッドが呼び出された場合、 次の手順を実行します:

1. font face を新しい FontFace オブジェクトとします。 font face の status 属性を "unloaded" に設定し、 その内部 [[FontStatusPromise]] スロットを、新しい保留中の Promise オブジェクトに設定します。

   family 引数と、 descriptors 引数のメンバーを、 CSS の @font-face 規則の対応する記述子の文法に従って解析します。 source 引数が CSSOMString である場合、 CSS の src 記述子の文法に従って解析します。これは @font-face 規則の記述子です。 いずれかが正しく解析できなかった場合、 font face の [[FontStatusPromise]] を "SyntaxError" という名前の DOMException で拒否し、 font face の対応する属性を空文字列に設定し、 font face の status 属性を "error" に設定します。 それ以外の場合は、font face の対応する属性を解析済みの 値の直列化結果に設定します。

   注: これは、source 引数として URL をそのまま渡す、 たとえば "http://example.com/myFont.woff" のような形式では 動作しないことを意味する点に注意してください。少なくとも url() 関数で囲む必要があり、 "url(http://example.com/myFont.woff)" のようにします。 この不便さと引き換えに、 複数のフォールバックを指定したり、 各フォールバックのフォントタイプを指定したり、 ローカルフォントを簡単に参照したりできます。

   相対 URL を解決できるように、 ベース URL を定義する必要があります。 文書の URL にすべきでしょうか？ これは Worker に対しても正しいでしょうか。 それとも Worker 自身の URL を使用すべきでしょうか？ それは常に定義されているでしょうか？

   font face を返します。 font face の status が "error" の場合、 このアルゴリズムを終了します。 それ以外の場合、 残りの手順を非同期で完了します。

2. source 引数が CSSOMString であった場合、 font face の内部 [[Urls]] スロットをその文字列に設定します。

   source 引数が BinaryData であった場合、 font face の内部 [[Data]] スロットを渡された引数に設定します。

3. font face の [[Data]] スロットが null でない場合、 次の手順を同期的に実行するタスクをキューに入れます:

   1. font face の status 属性を "loading" に設定します。

   2. font face が属する各 FontFaceSet について:

      1. FontFaceSet の [[LoadingFonts]] リストが空の場合、FontFaceSet を loading に切り替えます。

      2. font face を FontFaceSet の [[LoadingFonts]] リストに追加します。

   非同期で、その中のデータをフォントとして解析することを試みます。 これが完了したら、 成功したか否かにかかわらず、 次の手順を同期的に実行するタスクをキューに入れます:

   1. 読み込みが成功した場合、font face は解析されたフォントを表すようになります。 font face の [[FontStatusPromise]] を font face で履行し、 その status 属性を "loaded" に設定します。

      font face が属する各 FontFaceSet について:

      1. font face を FontFaceSet の [[LoadedFonts]] リストに追加します。

      2. font face を FontFaceSet の [[LoadingFonts]] リストから削除します。 font がそのリストの最後の項目であった場合 （したがってリストが空になった場合）、FontFaceSet を loaded に切り替えます。

   2. それ以外の場合、 font face の [[FontStatusPromise]] を "SyntaxError" という名前の DOMException で拒否し、 font face の status 属性を "error" に設定します。

      font face が属する各 FontFaceSet について:

      1. font face を FontFaceSet の [[FailedFonts]] リストに追加します。

      2. font face を FontFaceSet の [[LoadingFonts]] リストから削除します。 font がそのリストの最後の項目であった場合 （したがってリストが空になった場合）、FontFaceSet を loaded に切り替えます。

注: 新しく構築された FontFace オブジェクトは、 文書に関連付けられた FontFaceSet または Worker スレッドのコンテキストに自動的に追加されません。 これは、新しく構築されたフォントをプリロードすることはできますが、 FontFaceSet に明示的に追加されるまでは実際には使用できないことを意味します。 FontFaceSet のより完全な説明については、次のセクションを参照してください。

2.2. load() メソッド

load() メソッドは、FontFace の URL ベースのフォントフェイスに対して、フォントデータの要求と読み込みを強制します。 バイナリデータから構築されたフォント、 またはすでに読み込み中もしくは読み込み済みのフォントに対しては、 何もしません。

load() メソッドが呼び出された場合、 次の手順を実行します:

1. font face を、このメソッドが呼び出された FontFace オブジェクトとします。
2. font face の [[Urls]] スロットが null である、 またはその status 属性が "unloaded" 以外である場合、 font face の [[FontStatusPromise]] を返し、これらの手順を中止します。
3. それ以外の場合、 font face の status 属性を "loading" に設定し、 font face の [[FontStatusPromise]] を返して、 このアルゴリズムの残りを非同期で実行し続けます。
4. font face の [[Urls]] スロットの値を使用し、 [CSS-FONTS-3] で定義される方法でフォントの読み込みを試みます。 これは、@font-face 規則の src 記述子の値であるかのように扱います。
5. 読み込み操作が完了したら、 成功したか否かにかかわらず、 次の手順を同期的に実行するタスクをキューに入れます:
   1. 読み込みの試行が失敗した場合、 font face の [[FontStatusPromise]] を 名前が "NetworkError" の DOMException で拒否し、 font face の status 属性を "error" に設定します。

      font face が属する各 FontFaceSet について:

      1. font face を FontFaceSet の [[FailedFonts]] リストに追加します。

      2. font face を FontFaceSet の [[LoadingFonts]] リストから削除します。 font がそのリストの最後の項目であった場合 （したがってリストが空になった場合）、FontFaceSet を loaded に切り替えます。

   2. それ以外の場合、font face は読み込まれたフォントを表すようになります。 font face の [[FontStatusPromise]] を font face で履行し、font face の status 属性を "loaded" に設定します。

      font face が属する各 FontFaceSet について:

      1. font face を FontFaceSet の [[LoadedFonts]] リストに追加します。

      2. font face を FontFaceSet の [[LoadingFonts]] リストから削除します。 font がそのリストの最後の項目であった場合 （したがってリストが空になった場合）、FontFaceSet を loaded に切り替えます。

ユーザーエージェントは、 特定のフォントフェイスがページ上の何かをレンダリングするために必要であると判断した場合、 自らフォントの読み込みを開始できます。 この場合、 ここで説明されている対応する FontFace の load() メソッドを呼び出したかのように動作しなければなりません。

注: 一部の UA は「フォントキャッシュ」を利用しており、 同じフォントを同じページまたは同一オリジン内の複数のページで 複数回ダウンロードする必要をなくしています。 複数の FontFace オブジェクトを フォントキャッシュ内の同じエントリに対応付けることができます。 つまり、FontFace オブジェクトが、 FontFaceSet に含まれていなくても、 同じフォントデータを指す別の FontFace オブジェクトが （まったく別のページ上にある場合であっても！） 読み込まれたために、予期せず読み込みを開始する可能性があります。

2.3. CSS の @font-face 規則との相互作用

CSS の @font-face 規則は、対応する FontFace オブジェクトを自動的に定義し、 規則が解析されると、そのオブジェクトは文書の フォントソースに自動的に配置されます。 この FontFace オブジェクトは CSS 接続済みです。

@font-face 規則に対応する FontFace オブジェクトでは、 family、 style、 weight、 stretch、 unicodeRange、 variant、 および featureSettings 属性が、 @font-face 規則内の対応する記述子と同じ値に設定されます。 両者の間には双方向の接続があります。 @font-face 記述子に加えられた変更は、 対応する FontFace 属性に即座に反映され、 その逆も同様です。

FontFace が 文書間で転送されると、CSS 接続済みではなくなります。

FontFace オブジェクトの内部 [[Urls]] スロットは、@font-face 規則の src 記述子の値に設定され、 src 記述子に加えられた変更を反映します。

それ以外の点では、CSS の @font-face 規則によって作成された FontFace オブジェクトは、 手動で作成されたものと同一です。

@font-face 規則が文書から削除された場合、対応する FontFace オブジェクトはもはや CSS 接続済みではありません。 この接続は、いかなる方法でも復元できません （ただし、@font-face をスタイルシートに再び追加すると、 まったく新しい FontFace オブジェクトが作成され、 これは CSS 接続済みになります）。

@font-face 規則の src 記述子が新しい値に変更された場合、 元の接続済み FontFace オブジェクトは CSS 接続済みであることを停止しなければなりません。 新しい src を反映する新しい FontFace を作成し、@font-face に CSS 接続しなければなりません。 （これにより、古い FontFace オブジェクトが、それが現れる任意の フォントソースから削除され、 新しいオブジェクトが追加されます。）

2.4. フォントに関する情報の検出

FontFace オブジェクトには、フォントファイルの内容に関するさまざまな読み取り専用情報が含まれます。

[Exposed=(Window,Worker)]
interface FontFaceFeatures {
  /* CSSWG では、ここに何を含めるかについてまだ議論中です */
};

[Exposed=(Window,Worker)]
interface FontFaceVariationAxis {
  readonly attribute DOMString name;
  readonly attribute DOMString axisTag;
  readonly attribute double minimumValue;
  readonly attribute double maximumValue;
  readonly attribute double defaultValue;
};

[Exposed=(Window,Worker)]
interface FontFaceVariations {
  readonly setlike<FontFaceVariationAxis>;
};

[Exposed=(Window,Worker)]
interface FontFacePalette {
  iterable<DOMString>;
  readonly attribute unsigned long length;
  getter DOMString (unsigned long index);
  readonly attribute boolean usableWithLightBackground;
  readonly attribute boolean usableWithDarkBackground;
};

[Exposed=(Window,Worker)]
interface FontFacePalettes {
  iterable<FontFacePalette>;
  readonly attribute unsigned long length;
  getter FontFacePalette (unsigned long index);
};

partial interface FontFace {
  readonly attribute FontFaceFeatures features;
  readonly attribute FontFaceVariations variations;
  readonly attribute FontFacePalettes palettes;
};

注: この読み取り専用データは、 font-feature-settings、font-variation-settings、 および @font-palette-values で どの値が受け入れられるかを作者が把握できるようにすることを目的としています。

3. FontFaceSet インターフェイス

dictionary FontFaceSetLoadEventInit : EventInit {
  sequence<FontFace> fontfaces = [];
};

[Exposed=(Window,Worker)]
interface FontFaceSetLoadEvent : Event {
  constructor(CSSOMString type, optional FontFaceSetLoadEventInit eventInitDict = {});
  [SameObject] readonly attribute FrozenArray<FontFace> fontfaces;
};

enum FontFaceSetLoadStatus { "loading", "loaded" };

[Exposed=(Window,Worker)]
interface FontFaceSet : EventTarget {
  constructor(sequence<FontFace> initialFaces);

  setlike<FontFace>;
  FontFaceSet add(FontFace font);
  boolean delete(FontFace font);
  undefined clear();

  // 読み込み状態が変化したときのイベント
  attribute EventHandler onloading;
  attribute EventHandler onloadingdone;
  attribute EventHandler onloadingerror;

  // 必要に応じて読み込みを確認し、開始する
  // すべての読み込みが完了したときに Promise を履行する
  Promise<sequence<FontFace>> load(CSSOMString font, optional CSSOMString text = " ");

  // fontlist 内のすべてのフォントが読み込み済みかどうかを返す
  // （利用できない場合でも読み込みは開始しない）
  boolean check(CSSOMString font, optional CSSOMString text = " ");

  // フォント読み込みとレイアウト操作が完了したことを非同期で通知する
  readonly attribute Promise<FontFaceSet> ready;

  // 読み込み状態。1 つ以上のフォントが読み込み中なら "loading"、それ以外は "loaded"
  readonly attribute FontFaceSetLoadStatus status;
};

FontFaceSet オブジェクトには、内部 [[LoadingFonts]]、[[LoadedFonts]]、 および [[FailedFonts]] スロットもあり、 これらはすべて空のリストに初期化されます。 また、[[ReadyPromise]] スロットもあり、 これは新しい保留中の Promise に初期化されます。

フォントファミリーは使用された場合にのみ読み込まれるため、 コンテンツは、フォントの読み込みがいつ発生するかを把握する必要がある場合があります。 作者は、ここで定義されているイベントとメソッドを使用することで、 特定のフォントが利用可能であることに依存する処理をより細かく制御できます。

FontFaceSet は、次のいずれかが真である場合、環境で保留中です:

• 文書がまだ読み込み中である

• 文書に保留中のスタイルシート要求がある

• 文書に、ユーザーエージェントにフォントを要求させる可能性がある、 または最近読み込まれたフォントに依存する、保留中のレイアウト操作がある

注: 考え方としては、FontFaceSet が 環境で保留中でなくなった時点で、 その後文書に何も変更が加えられない限り、 作者は、測定したときの要素のサイズや位置が「正しい」ことを前提にできるということです。 上記の条件がこの保証を完全に捉えていない場合は、 そうなるように修正する必要があります。

3.1. イベント

フォント読み込みイベントにより、各フォントを個別に監視する代わりに、 文書全体のフォント読み込み動作に簡単に応答できます。 loading イベントは 文書がフォントの読み込みを開始したときに発火し、 loadingdone および loadingerror イベントは、 文書のフォント読み込みが完了したときに発火し、 それぞれ、正常に読み込まれたフォント または読み込みに失敗したフォントを含みます。

以下は、FontFaceSet オブジェクトが IDL 属性としてサポートしなければならない イベントハンドラー（および対応するイベントハンドラーイベント型）です:

FontFaceSet target で、名前が e、任意の font faces を伴う フォント読み込みイベントを発火するとは、 FontFaceSetLoadEvent インターフェイスを使用して、名前が e の単純イベントを発火することであり、 さらに次の条件も満たすことを意味します:

1. fontfaces 属性は、font faces をフィルタリングして、 target に含まれる FontFace オブジェクトのみを含めた結果で初期化されます。

与えられた FontFaceSet について、 FontFaceSet を loading に切り替えるよう求められた場合、 ユーザーエージェントは次の手順を実行しなければなりません:

1. font face set を、与えられた FontFaceSet とします。
2. font face set の status 属性を "loading" に設定します。
3. font face set の [[ReadyPromise]] スロットが現在履行済みの Promise を保持している場合、 新しい保留中の Promise に置き換えます。
4. font face set で、名前が loading の フォント読み込みイベントを発火するタスクをキューに入れます。

与えられた FontFaceSet について、 FontFaceSet を loaded に切り替えるよう求められた場合、 ユーザーエージェントは次の手順を実行しなければなりません:

1. font face set を、与えられた FontFaceSet とします。

2. font face set が 環境で保留中である場合、 それを 環境で停止中としてマークし、 このアルゴリズムを終了します。

3. font face set の status 属性を "loaded" に設定します。

4. font face set の [[ReadyPromise]] 属性の値を font face set で履行します。

5. 次の手順を同期的に実行するタスクをキューに入れます:

   1. loaded fonts を、font face set の [[LoadedFonts]] スロットの（空の場合もある）内容とします。

   2. failed fonts を、font face set の [[FailedFonts]] スロットの（空の場合もある）内容とします。

   3. [[LoadedFonts]] および [[FailedFonts]] スロットを空のリストにリセットします。

   4. font face set で、loaded fonts を伴う、名前が loadingdone の フォント読み込みイベントを発火します。

   5. font face set の failed fonts が空でない場合、 font face set で、failed fonts を伴う、名前が loadingerror の フォント読み込み イベントを発火します。

FontFaceSet が 環境で保留中から 環境で保留中ではない状態へ移行するたびに、 ユーザーエージェントは次の手順を実行しなければなりません:

1. FontFaceSet が 環境で停止中であり、かつその [[LoadingFonts]] リストが空の場合、FontFaceSet を loaded に切り替えます。

2. FontFaceSet が 環境で停止中である場合、 そのマークを解除します。

FontFaceSet source から、与えられたフォント文字列 font、 任意のサンプルテキスト text、 および任意の allow system fonts フラグについて、 一致する フォントフェイスを検索するよう求められた場合、 次の手順を実行します:

1. font プロパティの CSS 値構文を使用して font を解析します。 構文エラーが発生した場合、 構文エラーを返します。

   解析された値が CSS 全体キーワードである場合、 構文エラーを返します。

   すべての相対長を、対応するプロパティの初期値に対して絶対化します。 （たとえば、bolder のような相対フォントウェイトは、初期値 normal に対して評価されます。）

2. text が明示的に指定されていない場合、 単一のスペース文字（U+0020 SPACE）を含む文字列とします。
3. font family list を font から解析されたフォントファミリーのリストとし、 font style を font から解析されたその他のフォントスタイル属性とします。
4. available font faces を、source 内の 利用可能なフォントフェイスとします。 allow system fonts フラグが指定されている場合、 すべてのシステムフォントを available font faces に追加します。
5. matched font faces を最初は空のリストとします。
6. font family list 内の各ファミリーについて、 フォントマッチング規則を使用して、available font faces から font style に一致するフォントフェイスを選択し、 それらを matched font faces に追加します。 unicodeRange 属性を使用するため、これは単一のフォントフェイスだけではない場合があります。
7. matched font faces が空の場合、 found faces フラグを false に設定します。 それ以外の場合は true に設定します。
8. matched font faces 内の各フォントフェイスについて、 定義された unicode-range が、 text 内の少なくとも 1 文字のコードポイントを含まない場合、 そのフォントフェイスをリストから削除します。

   注: したがって、text が空文字列の場合、 すべてのフォントが削除されます。

9. matched font faces と found faces フラグを返します。

3.2. load() メソッド

load() メソッドは、FontFaceSet において、指定されたフォントリスト内のすべてのフォントが 読み込み済みで利用可能かどうかを判定します。 いずれかのフォントがダウンロード可能なフォントで、まだ読み込まれていない場合、 ユーザーエージェントはそれら各フォントの読み込みを開始します。 これは Promise を返し、 すべてのフォントが読み込まれて使用可能になると履行され、 いずれかのフォントが正常に読み込めなかった場合は拒否されます。

load( font, text ) メソッドが 呼び出された場合、 次の手順を実行します:

1. font face set を、このメソッドが呼び出された FontFaceSet オブジェクトとします。 promise を新しく作成された Promise オブジェクトとします。
2. promise を返します。 残りの手順を非同期で完了します。
3. 関数に渡された font および text 引数を使用して font face set から一致するフォントフェイスを検索し、 font face list を戻り値とします （found faces フラグは無視します）。 構文エラーが返された場合、 promise を SyntaxError 例外で拒否し、 これらの手順を終了します。
4. 次の手順を同期的に実行するタスクをキューに入れます:
   1. font face list 内のすべてのフォントフェイスについて、 それぞれの load() メソッドを呼び出します。
   2. font face list 内の各フォントフェイスの [[FontStatusPromise]] を 順番にすべて待機した結果で promise を解決します。

3.3. check() メソッド

check() メソッドは、FontFaceSet において、指定されたテキストを特定のフォントリストで「安全に」 レンダリングできるかどうか、すなわち後で「フォントスワップ」が発生しないかどうかを判定します。 指定されたテキストとフォントの組み合わせが、 未読み込みまたは現在読み込み中のフォントを使用しようとせずにレンダリングされる場合、 このメソッドは true を返します。 それ以外の場合は false を返します。

check( font, text) メソッドが 呼び出された場合、 次の手順を実行します:

1. font face set を、このメソッドが呼び出された FontFaceSet オブジェクトとします。
2. 関数に渡された font および text 引数を使用し、システムフォントも含めて、 font face set から一致するフォントフェイスを検索し、 font face list を返されたフォントフェイスのリスト、 found faces を返された found faces フラグとします。 構文エラーが返された場合、 SyntaxError 例外を投げ、 これらの手順を終了します。
3. font face list が空である、 または font face list 内のすべてのフォントが、status 属性が "loaded" であるかシステムフォントである場合、 true を返します。 それ以外の場合は false を返します。

3.4. ready 属性

読み込まれるフォントの数は、特定のテキスト片にいくつのフォントが使用されるかに依存するため、 場合によっては、フォントを読み込む必要があるかどうかが事前には分からないことがあります。 ready 属性には、文書のフォント読み込みが完了したときに解決される Promise が含まれます。 これにより、作者は、フォント読み込みによって影響を受ける可能性のあるコンテンツを調べる前に、 どのフォントが読み込まれたか、または読み込まれていないかを追跡し続ける必要を避けられます。

注: 作者は、特定の ready promise が履行されるのは 1 回だけであるものの、 その履行後にさらにフォントが読み込まれる可能性があることに注意する必要があります。 これは、loadingdone イベントの発火を監視することに似ています。 ただし、ready Promise に渡されたコールバックは、 対象のフォントがすでに読み込まれているためフォント読み込みが発生しない場合でも、 常に呼び出されます。 どのフォントが必要か、また正確にいつ読み込まれるかを追跡する必要なしに、 コードをフォント読み込みと同期させる簡単な方法です。

注: ready promise が履行されるまでに、 ユーザーエージェントが複数回のフォント読み込みを繰り返す必要がある場合があることに注意してください。 これはフォントフォールバックの場合に発生することがあります。 たとえば、fontlist 内の 1 つのフォントが読み込まれたものの、 特定のグリフを含んでおらず、 fontlist 内の他のフォントを読み込む必要がある場合です。 ready promise は、レイアウト操作が完了し、 追加のフォント読み込みが不要になった後にのみ履行されます。

注: この ready 属性によって返される Promise は、 FontFace の load() メソッドによって返される Promise とは異なり、 常に履行されるだけで、 拒否されることはありません。

3.5. CSS フォント読み込みおよびマッチングとの相互作用

[CSS-FONTS-3] のフォントマッチングアルゴリズムがユーザーエージェントによって自動的に実行される場合、 マッチング対象となるフォントフェイスの集合は、文書の フォントソース内のフォントの集合に、 任意のローカルフォントフェイスを加えたものと正確に一致しなければなりません。

ユーザーエージェントがフォントフェイスを読み込む必要がある場合、 対応する FontFace オブジェクトの load() メソッドを呼び出すことによって読み込まなければなりません。

（これは、同じアルゴリズムを実行しなければならないという意味であり、 オブジェクトの load プロパティに現在格納されている値を文字どおり呼び出すという意味ではありません。）

document.styleSheets[0].insertRule(
  "@font-face { font-family: newfont; src: url(newfont.woff); }", 0);
document.body.style.fontFamily = "newfont, serif";

var f = new FontFace("newfont", "url(newfont.woff)");
document.fonts.add(f);
document.body.style.fontFamily = "newfont, serif";

var f = new FontFace("newfont", "url(newtest.woff)", {});

/* 新しい {{FontFace}} は {{FontFaceSet}} に追加されていないため、
   'font-family' プロパティからは認識できず、
   代わりに serif が使用される */
document.body.style.fontFamily = "newfont, serif";

var f = new FontFace("newfont", "url(newfont.woff)", {});
f.load().then(function (loadedFace) {
  document.fonts.add(loadedFace);
  document.body.style.fontFamily = "newfont, serif";
});

4. FontFaceSource ミックスイン

interface mixin FontFaceSource {
  readonly attribute FontFaceSet fonts;
};

Document includes FontFaceSource;
WorkerGlobalScope includes FontFaceSource;

何らかの方法でフォントを使用できる文書、Worker、またはその他のコンテキストは、FontFaceSource ミックスインを含まなければなりません。 コンテキストの fonts 属性の値は、その フォント ソースであり、 特に定義されていない限り、 フォント関連の操作で使用されるすべてのフォントを提供します。 「the font source」を参照する操作は、その操作が行われている関連コンテキストの フォントソースを参照するものとして解釈しなければなりません。

これらのコンテキストのいずれかで行われるフォント関連の操作について、 フォントソース内の FontFace オブジェクトが、その 利用可能なフォント フェイスです。

4.1. Worker の FontFaceSource

Worker 文書内では、フォント ソースは初期状態では空です。

注: FontFace オブジェクトは 通常どおり構築して追加でき、 これは Worker 内の CSS フォントマッチングに影響します （たとえば、OffscreenCanvas にテキストを描画する場合など）。

4.2. CSS の @font-face 規則との相互作用

文書の フォント ソースの 集合 エントリには、初期状態で、文書または Shadow Root の CSS スタイルシート内にあるすべての CSS @font-face 規則から、 すべての CSS 接続済み FontFace オブジェクトを 文書順で格納しなければなりません。 @font-face 規則がスタイルシートに追加または削除されたり、 @font-face 規則を含むスタイルシートが 追加または削除されたりすると、 対応する CSS 接続済み FontFace オブジェクトも 文書の フォントソースに追加または削除されなければならず、 この順序を維持しなければなりません。

手動で追加されたすべての FontFace オブジェクトは、 CSS 接続済みのものより後に並べなければなりません。

FontFaceSet オブジェクトの add() メソッドが CSS 接続済み FontFace オブジェクトを引数として呼び出された場合、 オブジェクトがすでに集合に含まれていれば、 操作は何もしないものでなければなりません。 それ以外の場合も、操作は何もしてはならず、 InvalidModificationError を投げなければなりません。

FontFaceSet オブジェクトの delete() メソッドが CSS 接続済み FontFace オブジェクトを引数として呼び出された場合、 操作は何もしないものでなければならず、 false を返さなければなりません。

注: 作者は、削除された FontFace への参照を、 フォントソースから自動的に削除された後でも保持できます。 ただし、§ 2.3 CSS の @font-face 規則との相互作用で指定されているとおり、 その時点で FontFace はもはや CSS 接続済みではありません。

注: この仕様の将来のバージョンでは、 ローカルフォントとやり取りしたり、照会したりする方法も定義されることが期待されています。

5. API の例

document.fonts.ready.then(function() {
  var content = document.getElementById("content");
  content.style.visibility = "visible";
});

function drawStuff() {
  var ctx = document.getElementById("c").getContext("2d");

  ctx.fillStyle = "red";
  ctx.font = "50px MyDownloadableFont";
  ctx.fillText("こんにちは！", 100, 100);
}

document.fonts.load("50px MyDownloadableFont")
              .then(drawStuff, handleError);

function measureTextElements() {
  // これで、ダウンロード可能なフォントのメトリックを使用して
  // コンテンツを測定できる
}

function doEditing() {
  // 追加のフォント読み込みを引き起こす可能性のあるコンテンツ／レイアウト操作
  document.fonts.ready.then(measureTextElements);
}

<style>
@font-face {
  font-family: latin-serif;
  src: url(latinserif.woff) format("woff"); /* 漢字／かなを含まない */
}
@font-face {
  font-family: jpn-mincho;
  src: url(mincho.woff) format("woff");
}
@font-face {
  font-family: unused;
  src: url(unused.woff);
}

body { font-family: latin-serif, jpn-mincho; }
</style>
<p>納豆はいかがでしょうか

変更点

2014年5月 CSS Font Loading 最終草案作業草案からの変更点:

• フォント情報を検出するための IDL を追加しました。
• FontFaceSet.clear() が CSS 接続済み項目を消去しないことを明確化しました。
• はじめにで document.fonts に言及しました。
• フォント読み込みが、文書だけでなく Shadow Root にも適用されるようにしました。
• 指定されたフォントが 1 つも存在しない場合はフォント読み込みが発生しないため、エラーを投げないようにしました。
• WebIDL との整合性を向上しました。
• constructor() メソッド構文に切り替えました。
• マッチ対象の文字列が空の場合の、一致するフォントフェイスアルゴリズムの動作を明確化しました。
• FontFaceSource をミックスインに変更しました。
• 従来の用語 CanvasProxy を OffscreenCanvas に変更しました。
• FontFace と @font-face を調和させ、variationSettings と fontDisplay を追加しました。
• IDL 全体で [Exposed] を一貫して使用するようにしました。
• DOMString より CSSOMString を優先するようにしました。
• check() の導入説明を改善しました。
• 最近読み込まれたフォントに依存するレイアウト操作を完了できるようにしなければならないことを明確化しました。
• 読み込みイベントを発火する際のより多くのエッジケースをカバーしました。
• 同期呼び出しよりも非同期イベントキューイングタスクを優先するようにしました。
• fonts.ready は関数ではなくプロパティです。
• 存在しないフォントと、存在するが必要なグリフを持たないフォントを区別しました。
• いくつかのメソッドについて、手順の順序を正確に列挙しました。
• load() および check() 関数におけるグローバルキーワードと相対値の処理を明確化しました。
• src 引数の解析は、CSS @font-face src 記述子の解析と同じであることを明確化しました。
• CSS 接続済みフォントを削除しようとしても効果がなく、false を返すことを明確化しました。
• 重複するフォントの追加は効果がないことを明確化しました。
• 手動で追加された FontFace オブジェクトの順序を明確化しました。
• 読み込みイベントには、集合内にまだ存在するフェイスのみが含まれることを明確化しました。
• variationSettings および display を追加し、 @font-face と同期しました。
• fontfaces を FrozenArray に変更し、 適切な IDL の慣例に合わせました。
• 読み込み中のフォントが FontFaceSet に追加された場合に、loading イベントを発火し、Promise を処理するようにしました。
• 副作用のタイミングが明確に定義されるよう、 非同期アルゴリズムを "queue a task" という表現を使用するよう修正しました。
• いくつかの参照を最新バージョンに更新しました。
• IDL を修正しました。
• さまざまな誤字および文法上の誤りを修正しました。

謝辞

Google Fonts チームの複数のメンバーがフォント読み込みイベントについて有益なフィードバックを提供してくれました。 Boris Zbarsky、Jonas Sicking、ms2ger からも同様にフィードバックをいただきました。

プライバシーに関する考慮事項

FontFaceSet オブジェクトは、ユーザーがインストールしているフォントに関する情報を漏洩しますが、 既存の @font-face 規則とまったく同じ方法です。 新しい情報が漏洩することはなく、 また、目立って容易な方法で漏洩することもありません。

セキュリティに関する考慮事項

この仕様について、セキュリティ上の考慮事項は提起されていません。