使用手冊取消

字體事件

搜尋

上次更新時間 2021年4月29日

Fonts

瀏覽字型

用於動態子集的 JavaScript 字體載入會包含字體事件。字體事件可讓您根據字體處於作用中、仍在載入中還是因某種原因而無法使用等狀態來自訂您的網頁。

字體事件還無法提供給 CSS 字體載入使用。如果您的網站上正在使用預設或 @import CSS 內嵌程式碼，您可以納入另一個 JavaScript 程式庫來自訂您的字體載入。

在 CSS 中使用字體事件

為了幫助您更有效控制當字體正在載入或非作用中時的頁面顯示方式，JavaScript 內嵌程式碼提供一組字體事件，當字體載入到頁面時會觸發這些事件。

有三個主要的字體事件，每個事件都有對應的類別名稱 (在括號中)：

載入 (.wf-loading)：正在載入網頁字體
作用中 (.wf-active)：網頁字體作用中
非作用中 (.wf-inactive)：網頁字體非作用中

與這些事件相關聯的 CSS 類別會在載入期間附加到 HTML 元素。這些類別可以在樣式表中使用，以控制載入字體時如何設定頁面的樣式。例如：

.wf-loading {
/* styles to use when web fonts are loading */
}

.wf-active {
/* styles to use when web fonts are active */
}

.wf-inactive {
/* styles to use when web fonts are inactive */
}

字體事件類別的常見用法為控制無樣式文字閃現 (FOUT) 以及針對不支援網頁字體或已關閉網頁字體的瀏覽器定義備用字體和樣式。包含備用字體和樣式始終都是好的做法，因為瀏覽器、作業系統和用戶偏好設定的某些組合會導致頁面上的字體無效。

JavaScript 字體事件

這些字體事件也可以透過 Typekit.load 方法當做 JavaScript 回呼勾點使用。當您呼叫 Typekit.load 時，可以傳遞包含回呼函數的物件，而且當載入期間發生不同字體事件時，將會叫用這些回呼函數。例如：

<script>
  try {
    Typekit.load({
      loading: function() {
        // JavaScript to execute when fonts start loading
      },
      active: function() {
        // JavaScript to execute when fonts become active
      },
      inactive: function() {
        // JavaScript to execute when fonts become inactive
      }
    })
  } catch(e) {}
</script>

JavaScript 回呼可於載入字體時用來新增類似淡入等效果，或是根據呈現文字的維度來針對顯示版面執行複雜的數學調整。

除了這些基本字體事件之外，也有提供各個字體變體的更精細的字體事件。這些事件的類別名稱是字體系列名稱、字體變體說明及字體事件名稱的組合。舉例來說，將一般 400 粗細的 Gesta 新增到專案中會產生像是 wf-gesta-n4-loading 和 wf-gesta-n4-active 的字體事件類別。在 JavaScript 端，可以使用 fontloading、fontactive 和 fontinactive 回呼，並且可以為每個個別變體傳遞字體系列和字體說明。

使用字體事件：管理無樣式文字閃現 (FOUT)

每個瀏覽器都以自己的方式處理網頁字體的載入。如果瀏覽器最初顯示帶有備用字體的文字，然後於載入完成後切換到連結的字體，您可能會看到無樣式文字閃現 (或稱為 FOUT)。

載入字體時，.wf-loading 的類別會套用到 HTML 元素。載入字體後，該類別會變更為 .wf-active。所以，您可以將以下項目新增到樣式表中：

.wf-loading h1 {
/* styles to use while fonts are loading */
}

.wf-active h1 {
/* styles to use after fonts have loaded */
}

然後您可以調整樣式以減少 FOUT 的震顫，例如，確定閃現的字體和載入的網頁字體看起來大小相同。或者，您也可以隱藏文字，直到字體完全載入為止。例如：

<style>
.wf-loading h1 {
font-family: "droid-sans";
visibility: hidden;
}
.wf-active h1 {
visibility: visible;
}
</style>

<body>
<h1>This headline will be hidden until Droid Sans is completely loaded.</h1>
</body>

「樣式備用字體」一節有提供使用字體事件設定 CSS 樣式的更多範例。

使用字體事件：樣式備用字體

字體會當做資產載入到網頁中，就像影像或影片一樣。根據作業系統、網頁瀏覽器、已安裝的延伸特性、用戶偏好設定和連線速度的組合，有時可能無法載入網頁字體。在這些情況下，將改用 CSS 堆疊中的備用字體。

例如，您可以在使用濃縮的網頁字體時，調整備用字體的大小，如此一來，即便無法載入網頁字體，您的版面也會保持一致。方法如下：

.headline {
/* These fallback styles are used by default */
font-family: Arial, sans-serif;
font-size: 18px; /* Smaller size for non-condensed fallback font */
}

.wf-active .headline {
/* These styles are used when web fonts are active */
font-family: "proxima-nova-extra-condensed",Arial, sans-serif;
font-size: 24px;  /* Larger size for condensed font */
}

使用字體事件：為動態專案模擬不可見文字閃現 (FOIT)

根據預設，動態專案在呈現網頁字體樣式的文字時，將會出現無樣式文字閃現 (FOUT)。這表示瀏覽器將會在載入網頁字體時呈現備用字體，然後在網頁字體可用時切換到網頁字體。這與網頁字體呈現的替代做法不同，該做法是瀏覽器將會隱藏文字，同時下載網頁字體然後顯示文字，並在網頁字體載入完成時，使用網頁字體設定文字樣式。這稱為不可見文字閃現 (FOIT)。

FOUT 做法讓頁面更直接可用，尤其是在網路連線速度較慢的情況下，但如果您偏好 FOIT 做法，則可以使用字體事件在所有瀏覽器中模擬此做法。字體事件是新增到元素的三個類別：

.wf-loading：載入字體時新增；
.wf-active：至少載入一種字體時新增；
.wf-inactive:：未載入任何字體時新增。

您可以在 CSS 中使用這三個類別來模擬 FOIT 載入，其方式是在 wf-loading 類別作用中時隱藏文字，並在 wf-active 或 wf-inactive 類別作用中時顯示文字：

.wf-loading {
/* styles to use when web fonts are loading */
}

.wf-active {
/* styles to use when web fonts are active */
}

.wf-inactive {
/* styles to use when web fonts are inactive */
}

例如，如果 h1 和 p 元素正在使用網頁字體，則在載入字體時使用此 CSS 來隱藏這些元素。

.wf-loading h1, .wf-loading p {
visibility: hidden;
}

.wf-active h1, .wf-active p, .wf-inactive h1, .wf-inactive p {
visibility: visible;
}

更快、更輕鬆地獲得協助

新的使用者？