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

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

現今的字型顯示差異

Web Fonts 可讓開發人員將豐富的字體排版整合至 但如果使用者尚未擁有 瀏覽器必須花一些時間下載瀏覽器因為網路 下載時可能會出現不流暢的情形,進而可能對 無須專人管理畢竟,如果文字清晰 沒有什麼時間可以顯示!

為了降低字型下載速度緩慢的風險,大多數瀏覽器都會 逾時,系統稍後就會使用備用字型。這是一項很實用的技巧,但 可惜的是,瀏覽器的實際導入方式不同。

瀏覽器 逾時 備用 交換
Chrome 35 以上版本 3 秒
Opera 3 秒
Firefox 3 秒
Internet Explorer 0 秒
Safari 未設定逾時
  • Chrome 和 Firefox 設有三秒逾時時間,超過這個時間後才會顯示文字 並產生備用字型如果字型可以下載, 並使用所需字型重新轉譯文字。
  • Internet Explorer 的逾時設定為零秒,因此可立即顯示文字 算繪。如果要求的字型尚無法使用,系統會使用備用字型, 要求的字型之後會重新轉譯。
  • Safari 沒有逾時行為 (或沒有基準網路以外的任何內容) 逾時)。

更糟的是,開發人員無法掌控要如何 這些規則都會對應用程式造成影響注重效能的開發人員可能會希望 使用者可以享有使用備用字型的初始體驗,並且只使用備用字型 等到廣告有機會下載應用程式後,才回訪,成為一種比較好的網頁字型。 使用 Font 正在載入 API 等工具,或許可以覆寫 預設的瀏覽器行為並改善效能,但這與 但必須編寫少量 JavaScript 的費用,此後必須 嵌入網頁中或透過外部檔案要求,同時產生 HTTP 延遲時間。

為修正這種情況,CSS 工作團隊提議採用 @font-face 描述元、font-display 以及 控制可下載字型在完全載入之前的顯示方式。

字型下載時間表

類似部分瀏覽器採用的現有字型逾時行為 現在,font-display 會將字型下載的生命週期區隔為三大 。

  1. 第一個時段是「字型區塊期間」,這段期間 字型未載入,任何嘗試使用該字型的元素必須改為顯示 顯示隱藏的備用字型如果系統在 YAML 檔案中成功載入字型 字型在區塊時段中,系統就會正常使用字型。
  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 屬性會讓字型處於簡短的區塊 (在大多數情況下,建議使用 3) 以及無限的交換週期換句話說,瀏覽器會繪製「隱藏」文字 字型會先調換字型, 載入。為此瀏覽器會建立含有指標的匿名字型 與所選字型類似,但所有字符都不含「墨水」。 只有在轉譯特定字體中的文字時,才需要使用這個值 網頁必須要有圖片才能使用

翻譯

swap 表示字型表面為零秒區塊,且可無限切換。 也就是說,在字型方面,瀏覽器立即繪製文字並提供備用選項 並未載入,但字型在載入後立即交換。與區塊類似 只有在顯示特定字型的文字為 但以任何字型顯示都會以正確的文字呈現 訊息標誌文字適合用來替換文字,因為 使用合理的備用名稱來確保訊息有效,但 最後使用官方字體

備用

備用 可讓字型面臨極小的區塊時段 (100 毫秒以下 在大多數情況下建議使用) 和短暫的交換期 (建議為三秒) 大多數的情況下)。換句話說,字型在顯示時會有備用的 表示字型在載入後會自動更換。不過 如果時間過久,系統就會在網頁的其餘部分 至今。備用很適合用於修改內文等情境 例如使用者盡快開始閱讀,且請勿打擾 新的字型載入時,文字會隨時間改變。

選用

optional 會將字型的區塊長度極小 (100 毫秒以下 此建議) 和 0 秒的交換週期。與備用廣告類似 這個選項適合在下載字型時 但對使用體驗而言無關緊要optional 值則取決於 瀏覽器決定是否要啟動字型下載作業,而下載字型後 也能視主要因素而定 這些內容最切合使用者需求當使用者來自某些網路位置時 連線訊號微弱並拉近字型,可能就不是資源的最佳運用方式。

瀏覽器支援

font-display 目前採用實驗性 Web Platform 功能標記 ,並在 Opera 和 Opera for Android 中出貨。

示範

請參閱這份範例,瞭解如何 font-display 拍。對於注重效能的開發人員來說,這也可以 提供實用工具!