FontFace

建構函式

FontFace()

構造並返回一個新的 FontFace 物件，該物件可以從 URL 指定的外部資源或 ArrayBuffer 構建。

例項屬性

FontFace.ascentOverride

一個字串，用於獲取或設定字型的升序度量 (ascent metric)。它等同於 ascent-override 描述符。

FontFace.descentOverride

一個字串，用於獲取或設定字型的降序度量 (descent metric)。它等同於 descent-override 描述符。

FontFace.display

一個字串，用於根據字型是否已下載以及何時準備好使用來決定如何顯示字型。

FontFace.family

一個字串，用於獲取或設定字型的字型族 (family)。它等同於 font-family 描述符。

FontFace.featureSettings

一個字串，用於獲取或設定字型中不常用但又無法透過字型變體屬性（variant properties）訪問的字型特性。它等同於 CSS 的 font-feature-settings 屬性。

FontFace.lineGapOverride

一個字串，用於獲取或設定字型的行間距度量 (line-gap metric)。它等同於 line-gap-override 描述符。

FontFace.loaded 只讀

返回一個 Promise，當建構函式中指定的字型載入完成後，該 Promise 會解析為當前的 FontFace 物件；如果發生語法錯誤，則會以 SyntaxError DOMException 拒絕。

FontFace.status 只讀

返回一個列舉值，指示字型的狀態，可以是 "unloaded"（未載入）、"loading"（正在載入）、"loaded"（已載入）或 "error"（錯誤）。

FontFace.stretch

一個字串，用於獲取或設定字型的拉伸 (stretch) 方式。它等同於 font-stretch 描述符。

FontFace.style

一個字串，用於獲取或設定字型的樣式 (style)。它等同於 font-style 描述符。

FontFace.unicodeRange

一個字串，用於獲取或設定字型所包含的Unicode 碼點範圍。它等同於 unicode-range 描述符。

FontFace.variant 非標準

一個字串，用於獲取或設定字型的變體 (variant)。

FontFace.variationSettings

一個字串，用於獲取或設定字型的變體設定 (variation settings)。它等同於 font-variation-settings 描述符。

FontFace.weight

一個字串，包含字型的字重 (weight)。它等同於 font-weight 描述符。

FontFace.load()

根據當前物件的建構函式中傳遞的要求（包括位置或源緩衝區）載入字型，並返回一個 Promise，該 Promise 解析為當前的 FontFace 物件。

示例

以下程式碼使用 URL "my-font.woff" 的資料和一些字型描述符來定義一個字型。為了演示，我們還透過屬性定義了 stretch 描述符。

// Define a FontFace
const font = new FontFace("my-font", 'url("my-font.woff")', {
  style: "italic",
  weight: "400",
});

font.stretch = "condensed";

接下來，我們使用 FontFace.load() 載入字型，並利用返回的 Promise 來跟蹤載入完成或報告錯誤。

// Load the font
font.load().then(
  () => {
    // Resolved - add font to document.fonts
  },
  (err) => {
    console.error(err);
  },
);

要實際使用字型，我們需要將其新增到 FontFaceSet 中。我們可以選擇在載入字型之前或之後進行此操作。

更多示例請參閱 CSS 字型載入 API > 示例。

規範

瀏覽器相容性

另見

• @font-face