FontFace API 用來控制字體加載

這個 API 提供一個構造函數FontFace()，返回一個字體對象。

new FontFace(family, source, descriptors)

FontFace()構造函數接受三個參數。

• family：字符串，表示字體名，寫法與 CSS 的@font-face的font-family屬性相同。
• source：字體文件的 URL（必須包括 CSS 的url()方法），或者是一個字體的 ArrayBuffer 對象。
• descriptors：對象，用來定製字體文件。該參數可選。

var fontFace = new FontFace(
  'Roboto',
  'url(https://fonts.example.com/roboto.woff2)'
);
fontFace.family // "Roboto"

FontFace()返回的是一個字體對象，這個對象包含字體信息。注意，這時字體文件尚未開始加載。

字體對象包含如下屬性。

• FontFace.family：字符串，表示字體的名字，等同於 CSS 的font-family屬性。
• FontFace.display：字符串，指定字體加載期間如何展現，等同於 CSS 的font-display屬性。它有五個可能的值：auto（由瀏覽器決定）、block（字體加載期間，前3秒會顯示不出內容，而後只要還沒完成加載，就一直顯示後備字體）、fallback（前100毫秒顯示不出內容，後3秒顯示後備字體，而後只要字體還沒完成加載，就一直顯示後備字體）、optional（前100毫秒顯示不出內容，而後只要字體尚未完成加載，就一直顯示後備字體），swap（只要字體沒有完成加載，就一直顯示後備字體）。
• FontFace.style：字符串，等同於 CSS 的font-style屬性。
• FontFace.weight：字符串，等同於 CSS 的font-weight屬性。
• FontFace.stretch：字符串，等同於 CSS 的font-strentch屬性。
• FontFace.unicodeRange：字符串，等同於descriptors對象的同名屬性。
• FontFace.variant：字符串，等同於descriptors對象的同名屬性。
• FontFace.featureSettings：字符串，等同於descriptors對象的同名屬性。
• FontFace.status：字符串，表示字體的加載狀態，有四個可能的值：unloaded、loading、loaded、error。該屬性只讀。
• FontFace.loaded：返回一個 Promise 對象，字體加載成功或失敗，會致使該 Promise 狀態改變。該屬性只讀。

字體對象的方法，只有一個FontFace.load()，該方法會真正開始加載字體。它返回一個 Promise 對象，狀態由字體加載的結果決定。

var f = new FontFace('test', 'url(x)');
f.load().then(function () {
  // 網頁能夠開始使用該字體
});