使用字型顯示功能控製字型效能

決定網路字型在載入時的行為,是重要的效能調整技巧。新的 @font-face 字型顯示描述元可讓開發人員根據載入所需的時間,決定網頁字型的轉譯 (或備用) 方式。

今日的字型轉譯差異

透過 Web Fonts,開發人員能夠將豐富的字體排版納入專案,但如果使用者尚未擁有某種字體,瀏覽器就得花點時間下載。由於網路不穩定,因此這個下載時間可能會對使用者體驗造成負面影響。畢竟,如果文字太耗時顯示就會費神,這會是件好事!

為減輕字型下載緩慢的風險,大多數瀏覽器會實作逾時,之後便會使用備用字型。這很有用,但瀏覽器在實作過程中會有所不同。

瀏覽者 逾時 備用 交換
Chrome 35 以上版本 3 秒
Opera 3 秒
Firefox 3 秒
Internet Explorer 0 秒
Safari 無逾時
  • Chrome 和 Firefox 有三秒逾時,之後文字會以備用字型顯示。如果字型調整為下載,最終發生交換,而文字會使用預期的字型重新轉譯。
  • Internet Explorer 有零秒逾時,因此能立即轉譯文字。如果您要求的字型尚無法使用,則會使用備用選項,並在要求的字型可供使用時重新轉譯文字。
  • Safari 沒有逾時行為 (或至少沒有基準網路逾時)。

更糟的是,開發人員對於決定這些規則對應用程式的影響有限,注重效能的開發人員可能會偏好使用備用字型的更快初始體驗,且只在有機會下載後,再於後續造訪時使用更適合的網頁字型。使用 Font 載入 API 等工具,可能會覆寫某些預設瀏覽器行為並達到效能提升,但必須編寫大量的 JavaScript,屆時就必須內嵌至頁面或從外部檔案要求這類 JavaScript,因而產生額外的 HTTP 延遲。

為了修正這種情況,CSS 工作小組提議新的 @font-face 描述元、font-display 和對應屬性,用於控制可下載的字型在完整載入前的轉譯方式。

字型下載時間軸

與部分瀏覽器現在實作的現有字型逾時行為類似,font-display 會將字型下載的生命週期分為三個主要週期。

  1. 第一個週期是字型區塊期間。在這段期間,如果系統未載入字型,凡是嘗試使用它的元素,都必須改為顯示隱形的備用字型。如果字型在區塊期間成功載入,系統會照常使用該字型。
  2. 字型替換期間會在字型區塊期結束後立即發生。在這段期間,如果系統未載入字型,任何嘗試使用它的元素都必須改為以備用字型進行算繪。如果字型在交換期間成功載入,系統會照常使用該字型。
  3. 字型故障期間會在字型切換期結束後立即發生。如果這段期間開始時尚未載入字型,系統會將其標示為失敗載入,導致正常的字型備用廣告。否則系統會照常使用字型。

瞭解這些經期後,您就能使用 font-display,根據下載項目或下載時間決定字型的顯示方式。

哪種字型最適合你?

如要使用 font-display 描述元,請在規則中加入 @font-face

@font-face {
    font-family: 'Arvo';
    font-display: auto;
    src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

font-display 目前支援下列 auto | block | swap | fallback | optional 值範圍。

自動

auto 會使用使用者代理程式採用的任何字型顯示策略。大多數瀏覽器目前都有類似 block 的預設策略。

阻擋

block 可讓字型有個較短的區塊週期 (在大多數情況下建議使用 3 秒),以及無限的替換週期。換句話說,如果未載入字型,瀏覽器會先繪製「隱藏」文字,但在載入字型後立即切換該字型。因此,瀏覽器會建立匿名字型,其中包含與所選字型類似的指標,但所有字符都不含「墨水」的字樣。只有在網頁必須能夠使用特定類型的文字時,才應使用這個值。

翻譯

swap 可讓字型套用零秒的區塊週期和無限的替換週期。也就是說,如果瀏覽器未載入字型,瀏覽器會立即使用備用選項繪製文字,但會在載入後立即換掉該字型。與區塊類似,只有在顯示特定字型的文字對網頁非常重要時,才應使用該值,但無論選擇何種字型,都仍會收到正確的訊息。標誌文字非常適合切換,因為使用合理的備用字詞顯示公司名稱,卻可以正常使用官方字體。

備用廣告

fallback 為字型提供極小的區塊期間 (在大多數情況下建議使用 100 毫秒以下),以及較短的替換期限 (在多數情況下建議使用 3 秒)。也就是說,如果字型未載入,系統一開始會以備用方式算繪字型,但字型會在載入後立即替換。不過,如果經過的時間過久,備用內容將用於網頁其餘部分的生命週期。備用是很適合用來讓使用者盡快開始閱讀的內容,因為您希望使用者會在載入新字型時,就將文字移動到其他地方,藉此幹擾使用體驗。

選填

optional 可為字型提供極小的區塊期間 (在大多數情況下建議使用 100 毫秒以下),以及零秒交換期。與備用機制類似,如果下載字型較「有備好」,但對於體驗來說並不重要,這會是很好的選擇。optional 值會交由瀏覽器決定是否啟動字型下載,而它可能會選擇不進行下載,或者可能會視使用者認為最適合的內容,以低優先順序執行。這在使用者連線訊號較弱時,縮減字型可能不適合資源使用時。

瀏覽器支援

font-display 目前在電腦版 Chrome 49 推出實驗性網路平台功能旗標,現在於 Android 的 Opera 和 Opera 中推出。

示範

查看範例來為 font-display 拍個照。對於注重效能的開發人員而言 這是一項實用的工具