font-display

語法

/* Keyword values */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

值

auto

字型顯示策略由使用者代理定義。

block

為字型提供一個短的阻塞週期（通常約為 3 秒）和無限的交換週期。

交換

為字型提供一個極短的阻塞週期和無限的交換週期。

fallback

為字型提供一個極短的阻塞週期和一個短的交換週期。

可選

為字型提供一個極短的阻塞週期且沒有交換週期。

描述

@font-feature-values 的 font-display 描述符決定了字型顯示時間線；它透過為相同 font-family 名稱的 @font-face 設定預設的 font-display 值來做到這一點。當 @font-face 中省略 font-display 時，使用者代理首先查詢透過 @font-feature-values 為相關字體系列設定的 font-display 值。如果未找到任何值，使用者代理將對 font-display 使用 auto 值，在這種情況下，使用者代理將確定字型顯示策略。

字型顯示時間線基於一個計時器，該計時器在使用者代理嘗試使用特定的下載字型時開始。時間線分為三個時期，如下所示。這些時期決定了使用該字型的任何元素的渲染行為。

• 字型阻塞期：如果字型未載入，嘗試使用該字型的元素將使用不可見的備用字型進行渲染。瀏覽器會阻塞可見文字渲染，根據備用字型的度量為待顯示的文字留出空間。在阻塞期內，文字不可見。在阻塞期結束時，如果字型仍未載入，文字將以備用字型渲染。

• 字型交換期：交換期發生在阻塞期之後（如果有的話），並且在字型尚未成功載入的情況下。嘗試使用尚未載入字型的元素將使用下一個可用的備用字型進行渲染。先前不可見的備用字型被繪製到螢幕上。如果字型在交換期內成功載入，則以備用字型渲染的文字將更新（或交換）為新載入的字型。此步驟會觸發重繪。

• 字型失敗期：如果在交換期結束時或阻塞期結束時（如果像 optional 一樣沒有交換期）字型仍未載入，使用者代理會將該字型視為載入失敗。結果，內容將以備用字型可見。

font-display 描述符允許您為所有 @font-face 規則設定預設顯示策略，包括那些不受作者控制的規則，例如第三方 @font-face 規則。當透過 @font-feature-values 設定 font-display 值時，它將成為預設的 font-display 值，並應用於整個字體系列。但是，在單個 @font-face 塊中定義的任何 font-display 值都將覆蓋此預設值，但僅適用於定義了該描述符的那些塊。

示例

@font-feature-values "Leitura" {
  font-display: swap;
  @swash {
    fancy: 1;
  }
}

此示例中的 font-display 描述符將“Leitura”字型的預設 font-display 值設定為 swap，適用於所有 @font-face 塊。現在可能存在多個 @font-face 塊，為單個字體系列匯入多個字型檔案。如果其中一個 @font-face 塊包含 font-display 描述符，則指定的值將僅用於該特定字型檔案。所有其他不包含 font-display 描述符的塊將預設為 swap，而不是使用者代理的標準預設值 auto。

規範

瀏覽器相容性

目前沒有瀏覽器支援此功能。

另見

• font-display 描述符，用於 @font-face at-rule
• CSS 字型模組