4. FontFace API

#FontFaceAPI

FontFace API は、フォントの読み込みを制御するために使用されます。

この API は、フォントオブジェクトを返すコンストラクター FontFace() を提供します。

新しい FontFace(ファミリー、ソース、記述子)

FontFace() コンストラクターは 3 つのパラメーターを受け取ります。

family: フォント名を表す文字列。CSS の @font-face の font-family 属性と同じように記述されます。
source: フォントファイルの URL (CSS url() メソッドを含む必要があります)、またはフォントの ArrayBuffer オブジェクト。
descriptors: フォントファイルをカスタマイズするために使用されるオブジェクト。このパラメータはオプションです。

var fontFace = 新しい FontFace(
  「ロボット」、
  「url(https://fonts.example.com/roboto.woff2)」
);

fontFace.family // "ロボト"

FontFace() は、フォント情報を含むフォントオブジェクトを返します。この時点ではフォントファイルの読み込みが開始されていないことに注意してください。

フォントオブジェクトには次のプロパティが含まれます。

FontFace.family: フォントの名前を示す文字列。CSS の font-family プロパティに相当します。
FontFace.display: 読み込み中にフォントを表示する方法を指定する文字列。CSS の font-display プロパティに相当します。可能な値は 5 つあります: auto (ブラウザによって決定される)、block (フォントの読み込み中、コンテンツは最初の 3 秒間表示されず、その後は読み込みが終了するまでフォールバックフォントが表示されます)は完了していません)、 fallback (最初の 100 ミリ秒はコンテンツを表示できません。次の 3 秒でフォールバックフォントが表示され、その後フォントの読み込みが完了していない限りフォールバックフォントが表示されます) 、optional (最初の 100 ミリ秒はコンテンツは表示されません。その後、フォントがロードされていない限り、ロードが完了すると、フォールバックフォントが常に表示されます)、swap (フォントがロードされていないため、フォールバックフォントが常に表示されます)。
FontFace.style: CSS の font-style プロパティに相当する文字列。
FontFace.weight: CSS の font-weight プロパティに相当する文字列。
FontFace.stretch: CSS の font-stretch プロパティに相当する文字列。
FontFace.unicodeRange: 文字列。descriptors オブジェクト内の同じ名前のプロパティに相当します。
FontFace.variant: 文字列。descriptors オブジェクト内の同じ名前のプロパティに相当します。
FontFace.featureSettings: 文字列。descriptors オブジェクト内の同じ名前のプロパティに相当します。
FontFace.status: フォントの読み込みステータスを示す文字列。4 つの値が考えられます: unloaded、loading、loaded、error。このプロパティは読み取り専用です。
FontFace.loaded: Promise オブジェクトを返します。フォントの読み込みが成功または失敗すると、Promise の状態が変化します。このプロパティは読み取り専用です。

フォントオブジェクトのメソッドは FontFace.load() だけで、実際にフォントの読み込みを開始します。フォントの読み込み結果によって状態が決定される Promise オブジェクトを返します。

var f = new FontFace('test', 'url(x)');

f.load().then(function() {
  //Web ページはこのフォントの使用を開始できます
});