CSSフォントローディングモジュール レベル3

1. はじめに

CSSは、@font-face規則を使って、ウェブからカスタムフォントを著者が読み込むことを可能にします。 スタイルシートを作成する際には簡単ですが、 スクリプトで動的に利用するのはかなり難しくなります。

さらに、CSSではユーザーエージェントが実際にフォントをロードするタイミングを選択できます。 ページ上でフォントフェイスが現在何も使われていない場合、 多くのユーザーエージェントは関連ファイルをダウンロードしません。 つまり、後からそのフォントフェイスを使用すると、 ユーザーエージェントが利用を検知してフォントファイルのダウンロードと解析を開始するまで遅延が発生します。

この仕様は、CSSのフォントフェイスに対するスクリプティングインターフェイスを定義し、 フォントフェイスを簡単に作成（FontFace インターフェイス経由） およびスクリプトからロード（document.fonts経由）できるようにします。 また、個々のフォントやページ全体のフォントのロード状況を追跡するメソッドも提供します。

この仕様書のいくつかの箇所では、通常のESオブジェクトを使って挙動を定義しています。 例えば内部的にPromiseを利用したり、 FontFaceSetがSetを内部で使うなどです。 ここで意図しているのは、これらのオブジェクト（およびそのプロトタイプチェーン）がプリスティンであり、 著者が行ったいかなる操作にも影響されないことだと思っています。 この意図は良いものでしょうか？ もしそうなら、仕様書内でどう記載すべきでしょうか？

1.1. 値

この仕様では、Promise（ ECMAScript 6で定義）を使用します。 MDNにはPromiseを導入する良いチュートリアル資料があります。

1.2. タスクソース

この仕様がタスクをキューするときは、"font loading"タスクソースにキューします。

2. FontFaceインターフェイス

FontFace インターフェイスは、1つの利用可能なフォントフェイスを表します。 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]]を持っています。 初期状態はpendingで、 フォントが正常にロード・解析された場合やエラーが発生した場合にfulfillまたはrejectされます。

すべてのFontFace オブジェクトにはさらに、 内部スロット[[Urls]]と[[Data]]も含まれます。 片方はnullで、もう片方はnullではありません（コンストラクターで渡されたデータによって設定されます）。

2.1. コンストラクター

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

FontFace(family, source, descriptors)メソッドが呼び出されたとき、以下の手順を実行します：

1. font faceを新しいFontFace オブジェクトとして作成する。 font faceのstatus 属性を"unloaded"に設定し、 内部スロット[[FontStatusPromise]] を新しいpending状態のPromise オブジェクトに設定する。

   family引数と descriptors 引数の各メンバーを、CSS@font-face規則の各記述子の文法に従ってパースする。 source 引数がCSSOMStringの場合は、 src記述子の文法に従ってパースする。 いずれかが正しくパースできない場合は、 font faceの[[FontStatusPromise]] を"SyntaxError"という名前のDOMExceptionでrejectし、 font faceの該当属性を空文字列に設定し、 font faceのstatus 属性を"error"に設定する。 それ以外の場合は、解析された値のシリアライズを各属性に設定する。

   注: 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でfulfillし、 status 属性を"loaded"に設定する。

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

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

      2. font faceをFontFaceSetの [[LoadingFonts]] リストから削除する。 そのリストの最後の項目だった場合（空になった場合）はFontFaceSetをloadedに切り替える。

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

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

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

      2. font faceをFontFaceSetの [[LoadingFonts]] リストから削除する。 そのリストの最後の項目だった場合（空になった場合）はFontFaceSetをloadedに切り替える。

注: 新しく構築されたFontFaceオブジェクトは、 文書やWorkerスレッドのコンテキストに関連するFontFaceSetに自動的に追加されません。 そのため、構築直後のフォントはプリロードできても、 明示的にFontFaceSetに追加しない限り実際には利用できません。 FontFaceSetの詳細は次節を参照してください。

2.2. load()メソッド

load() メソッドは、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でrejectし、 font faceのstatus 属性を"error"に設定する。

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

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

      2. font faceをFontFaceSetの [[LoadingFonts]] リストから削除する。 そのリストの最後の項目だった場合（空になった場合）はFontFaceSetをloadedに切り替える。

   2. それ以外の場合は、font faceがロード済みのフォントを表すようになり、 font faceの[[FontStatusPromise]] をfont faceでfulfillし、 font faceのstatus 属性を"loaded"に設定する。

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

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

      2. font faceをFontFaceSetの [[LoadingFonts]] リストから削除する。 そのリストの最後の項目だった場合（空になった場合）はFontFaceSetをloadedに切り替える。

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

注: 一部のUAは「フォントキャッシュ」を利用して、 同じフォントをページ内や同一オリジンの複数ページで何度もダウンロードすることを避けます。 複数のFontFaceオブジェクトが同じフォントキャッシュのエントリにマッピングされる場合があり、 そのためFontFaceオブジェクトが 予期せずロードを開始することがあります。 たとえそれがFontFaceSetに所属していなくても、 他のFontFaceオブジェクトが 同じフォントデータを参照している場合（まったく別のページでも！）ロードが始まることがあります。

2.3. CSSの@font-face規則との連携

CSSの@font-face規則は、該当するFontFaceオブジェクトを自動的に定義し、規則がパースされると同時にドキュメントのfont sourceに自動的に配置されます。 このFontFaceオブジェクトはCSS接続済みです。

@font-face規則に対応するFontFace オブジェクトは、family、 style、 weight、 stretch、 unicodeRange、 variant、 featureSettings の属性に、@font-face規則の該当する記述子の値が設定されます。 これらは双方向に連携しており、@font-face記述子に変更があると、即座に対応するFontFace属性に反映され、逆も同様です。

FontFaceが文書間で転送された場合、CSS接続済みでなくなります。

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

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

@font-face規則がドキュメントから削除されると、対応するFontFaceオブジェクトはCSS接続済みでなくなります。 この連携はどの手段でも復元できません（ただし、@font-faceをスタイルシートに再追加すれば、新しいFontFaceオブジェクトが作成され、それはCSS接続済みとなります）。

@font-face規則のsrc記述子が新たな値に変更された場合、 元のCSS接続済みFontFaceオブジェクトはCSS接続済みでなくなる必要があります。 新しいsrcを反映する新しいFontFaceオブジェクトが作成され、CSS接続済みとして@font-faceに連携されます。 （これにより古いFontFaceオブジェクトはfont sourcesから削除、新しいものが追加されます）

2.4. フォント情報の取得

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

[Exposed=(Window,Worker)]
interface FontFaceFeatures {
  /* The CSSWG is still discussing what goes in here */
};

[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();

  // events for when loading state changes
  attribute EventHandler onloading;
  attribute EventHandler onloadingdone;
  attribute EventHandler onloadingerror;

  // check and start loads if appropriate
  // and fulfill promise when all loads complete
  Promise<sequence<FontFace>> load(CSSOMString font, optional CSSOMString text = " ");

  // return whether all fonts in the fontlist are loaded
  // (does not initiate load if not available)
  boolean check(CSSOMString font, optional CSSOMString text = " ");

  // async notification that font loading and layout operations are done
  readonly attribute Promise<FontFaceSet> ready;

  // loading state, "loading" while one or more fonts loading, "loaded" otherwise
  readonly attribute FontFaceSetLoadStatus status;
};

FontFaceSetオブジェクトは、内部に[[LoadingFonts]]、[[LoadedFonts]]、[[FailedFonts]]スロットを持ち、すべて空リストで初期化されます。 また、[[ReadyPromise]]スロットを持ち、これは新しいpending状態のPromiseで初期化されます。

フォントファミリーは使用されたときだけロードされるため、 コンテンツがフォントのロードタイミングを把握する必要がある場合があります。 著者はここで定義されたイベントやメソッドを使って、 特定フォントの利用可能性に依存するアクションをより細かく制御できます。

FontFaceSetは、次のいずれかが真の場合、環境でpendingです：

• 文書がまだロード中の場合

• 文書にスタイルシートリクエストがpendingの場合

• 文書に、ユーザーエージェントがフォントリクエストする可能性がある、または最近ロードされたフォントに依存するレイアウト処理がpendingの場合

注: FontFaceSetが環境でpendingでなくなった時点で、以降文書に変化がなければ、著者はサイズや位置の測定値が「正しい」と信頼できます。 上記条件がこの保証を十分に表現できていなければ、修正が必要です。

3.1. イベント

フォントロードイベントを使うことで、ドキュメント全体のフォントロード挙動に簡単に対応でき、個々のフォントごとに監視する必要がなくなります。 loadingイベントは ドキュメントがフォントのロードを開始した際に発火し、 loadingdoneおよびloadingerrorイベントは ドキュメントのフォントロードが完了した際に発火し、それぞれ成功したフォント・失敗したフォントを含みます。

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

eという名前のフォントロードイベントを発火するには、FontFaceSetのtargetで、オプションとしてfont facesを指定し、以下の条件を満たすFontFaceSetLoadEventインターフェイスを使って単純なイベントを発火することを意味します：

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]] スロットが現在fulfilledなpromiseを保持している場合、新しいpending promiseに置き換える。
4. font face setにloading という名前のフォントロードイベントを発火するタスクをキューする。

指定されたFontFaceSetについてFontFaceSetをloadedに切り替えるよう要求された場合、ユーザーエージェントは以下の手順を実行します：

1. font face setを指定されたFontFaceSetとする。

2. font face setが環境でpendingの場合、 それを環境でstuckとマークし、このアルゴリズムを終了します。

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

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

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が空でない場合、failed fontsを使ってloadingerror という名前のフォントロードイベントを発火する。

FontFaceSetが環境でpendingからpendingでなくなった際、ユーザーエージェントは以下の手順を実行しなければなりません：

1. もしFontFaceSet が環境にスタックされている状態で、 その[[LoadingFonts]] リストが空の場合、FontFaceSetをloaded状態に切り替える。

2. もしFontFaceSet が環境にスタックされている状態なら、 その印付けを解除する。

FontFaceSetからマッチするフォントフェイスを探すには、 source（FontFaceSet）、font（フォント文字列）、オプションのサンプルテキストtext、オプションのallow system fontsフラグを指定し、以下の手順を実行します：

1. fontをfontプロパティのCSS値構文でパースする。 構文エラーが発生した場合は、構文エラーを返す。

   パースされた値がCSS全体キーワードの場合は、構文エラーを返す。

   すべての相対長さは、対応するプロパティの初期値に対して絶対化する（例：bolderは初期値normalに対して評価される）。

2. textが明示的に指定されていなければ、U+0020 SPACEのみからなる1文字の文字列とする。
3. font family listをfontからパースしたフォントファミリーリスト、font styleをその他のスタイル属性とする。
4. available font facesをsource内の利用可能なフォントフェイスのリストとする。 allow system fontsフラグが指定されていれば、すべてのシステムフォントも追加する。
5. matched font facesを空リストで初期化する。
6. font family list内の各familyに対し、フォントマッチングルールを使ってavailable font facesからfont styleに一致するフォントフェイスを選び、matched font facesに追加する。 unicodeRange 属性の利用により、1つ以上のフォントフェイスが選ばれる場合がある。
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を返し、 全てのフォントがロード・利用可能になった時にfulfilledとなり、 いずれかのフォントのロードに失敗した場合はrejectされます。

load( font, text ) メソッドが呼び出された際、以下の手順を実行します：

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

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 属性には、ドキュメントのフォントロードが完了した時にresolveされるPromiseが格納されます。 これにより、著者はどのフォントがロード済みかを個別に管理せずとも、フォントロードに影響されるコンテンツを安全に参照できます。

注: ready promiseは1度だけfulfilledになりますが、その後でもさらにフォントがロードされる可能性があります。 これはloadingdone イベントを監視するのに似ていますが、ready Promiseのコールバックは、対象フォントがすでにロード済みの場合でも必ず呼び出されます。 必要なフォントやロードタイミングを逐一管理せずに、コードをフォントロードに同期させるシンプルな方法です。

注: UAはready promiseがfulfilledされるまで複数回にわたってフォントロードを繰り返す場合があります。 これはフォントフォールバック等で、フォントリスト内の一つがロードされても該当グリフがない場合に他のフォントもロードされるケースです。 ready promiseはレイアウト処理が完了し、追加のフォントロードが不要になった時点でのみfulfilledされます。

注: このready 属性が返すPromiseはrejectされることはなく、必ずfulfilledになります。 これはFontFaceのload() メソッドが返すPromiseと異なります。

3.5. CSSフォントのロードとマッチングとの連携

[CSS-FONTS-3]のフォントマッチングアルゴリズムがUAにより自動実行される際、対象となるフォントフェイスの集合は、ドキュメントのfont sourceに含まれるフォントに加え、ローカルフォントフェイスの集合でなければなりません。

UAがフォントフェイスのロードを必要とする場合は、該当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;

任意のドキュメント、ワーカー、またはフォントを利用できる他のコンテキストは、FontFaceSourceミックスインを含める必要があります。 コンテキストのfonts属性の値は、そのfont sourceとなり、 特に指定がなければフォント関連操作で使われる全フォントを提供します。 「font source」を参照する操作は、該当コンテキストのfont sourceを指すものとして解釈されます。

これらコンテキスト内で行われるフォント関連操作では、font source内のFontFaceオブジェクトが利用可能なフォントフェイスとなります。

4.1. WorkerのFontFaceSource

Workerドキュメント内では、font sourceは初期状態で空です。

注: FontFaceオブジェクトは通常通り構築して追加でき、 Worker内のCSSフォントマッチング（例えばOffscreenCanvasでテキスト描画等）に影響します。

4.2. CSSの@font-face規則との連携

ドキュメントのfont sourceのset entriesは、すべてのCSS@font-face規則から得られるCSS接続済みFontFaceオブジェクトで初期化され、ドキュメント順に並べられます。 @font-face規則やそれを含むスタイルシートの追加／削除に伴い、 対応するCSS接続済みFontFaceオブジェクトもドキュメントのfont sourceから追加・削除され、この順序を保ちます。

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

FontFaceSetオブジェクトのadd()メソッドにCSS接続済みFontFaceオブジェクトを渡した場合、オブジェクトがすでにセット内にある場合はno-op、 そうでなければ何もせずInvalidModificationErrorをthrowします。

FontFaceSetオブジェクトのdelete()メソッドにCSS接続済みFontFaceオブジェクトを渡した場合はno-opとして、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("Hello!", 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 Last Call Working Draftからの変更点：

• フォント情報取得用IDLを追加
• FontFaceSet.clear()がCSS接続済み項目をクリアしないことを明確化
• はじめにでdocument.fontsに言及
• フォントロードはシャドウルートにも適用
• 指定フォントが存在しない場合はエラーを投げず、ロードも発生しない
• WebIDLとの整合性向上
• constructor()メソッド構文へ変更
• マッチングアルゴリズムの空文字列処理を明確化
• FontFaceSourceをmixin化
• CanvasProxyをOffscreenCanvasに変更
• FontFaceと@font-faceの整合性向上、variationSettingsとfontDisplay追加
• ID Lで一貫して[Exposed]を利用
• DOMStringよりCSSOMStringを優先
• check()の説明文改善
• 最近ロードされたフォントに依存するレイアウト処理は完了を待つ必要があることを明確化
• loadイベント発火時のエッジケースを網羅
• 非同期イベントキューイングを同期呼び出しより優先
• fonts.readyは関数ではなくプロパティ
• 存在しないフォントと必要グリフが欠けているフォントの区別
• 複数メソッドの手順を明確化
• load()とcheck()でグローバルキーワードや相対値の扱いを明確化
• src引数のパースはCSS @font-face src記述子と同様
• CSS接続済みフォント削除は効果なし、falseを返すことを明確化
• 重複フォント追加の効果はなし
• 手動追加FontFaceオブジェクトの順序明確化
• loadイベントはセット内に残っているfaceのみ含むことを明確化
• variationSettings とdisplayを@font-faceと同期
• fontfaces をFrozenArrayに変更し、IDL慣例に合わせた
• FontFaceSetにロード中フォントを追加した際のloadingイベント発火とPromise処理を追加
• 非同期アルゴリズムを"queue a task"記述に修正、タイミングの明確化
• 複数参照を最新版へ更新
• IDL修正
• その他のタイポ修正と文法ミス訂正

謝辞

Google Fontsチームの数名のメンバー、ならびにBoris Zbarsky、Jonas Sicking、ms2gerからフォントロードイベントについて有益なフィードバックをいただきました。

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

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

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

本仕様に対してセキュリティ上の懸念は提出されていません。