確保載入網站字型時文字會持續顯示
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
字型通常是大型檔案,載入時間較慢。部分瀏覽器會先隱藏文字,直到字型載入為止。
會導致隱藏的文字 (FOIT) 閃爍。
Lighthouse 字體顯示稽核失敗的原因
Lighthouse 會標示任何可能閃爍顯示不可見文字的字型網址:
。
如何避免顯示隱藏的文字
font-display
API 會指出在 font-face
樣式中使用字型時,字型會如何顯示。如果自訂字型尚未就緒,下列 font-display
值會指示瀏覽器使用系統字型:
CSS 範例
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'),
url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
format('woff2');
font-display: swap;
}
Google 字型範例
將 &display=swap
/&display=optional
/&display=fallback
參數加到 Google Fonts 網址結尾:
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
如何避免因延遲字型造成的版面配置轉移
暫時顯示系統字型,會將 FOIT 換成未設定文字的閃光 (FOUT)。這麼做可提早算繪內容,進而改善 FCP 和 LCP,但當自訂字型取代臨時系統字型時,FOIT 和 FOUT 對 CLS 的影響都相同。
您可以搭配 font-display: optional
使用預先載入功能,藉此降低字型載入作業對 CLS 的影響。不過,過度使用預先載入機制可能會對載入指標造成負面影響。建議您執行 A/B 測試,確保預先載入字型不會帶來任何效果
以免發生效能迴歸問題
堆疊專屬指南
Drupal
在主題中定義自訂字型時,指定 @font-display
。
Magento
在定義自訂字型時指定 @font-display
。
資源
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2024-04-02 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2024-04-02 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2024-04-02 (世界標準時間)。"]]