在CSS中使用font-display屬性可以控制網頁字體的加載行為，以優化用戶在字體下載過程中的體驗。font-display為你提供了幾種不同的選項，使你可以決定瀏覽器在字體下載時如何展示文本。這些選項包括：
auto: 瀏覽器默認的字體展示策略。block: 瀏覽器在字體文件加載過程中短時間內將文本渲染為不可見，之後使用回退字體，直到字體文件加載完成。swap: 瀏覽器立即顯示回退字體，在字體文件加載完成後替換為請求的字體，這是提高內容可見性的推薦選項。fallback: 瀏覽器在短時間內顯示回退字體，如果在這段時間內字體文件還未加載完成，則繼續使用回退字體，避免後續的字體閃爍。optional: 瀏覽器在短時間內嘗試加載字體，但如果字體文件加載失敗或時間太長，則放棄加載，這種情況下可能一直使用回退字體。
為了符合PageSpeed Insights的建議，通常推薦使用swap選項，因為它確保了文字在字體加載過程中始終可見，同時也允許字體文件一旦下載完成立即使用，從而提升用戶體驗。
假設你的CSS中有一個@font-face規則，用於加載一個WOFF字體文件，你可以這樣添加font-display屬性：
@font-face {
font-family: 'MyWebFont';
src: url('mywebfont.woff2') format('woff2'),
url('mywebfont.woff') format('woff');
font-display: swap; /* 推薦用於改善字體加載的性能 */
}
在這個例子中，當MyWebFont字體被請求時，瀏覽器將立即使用回退字體顯示文本，並在WOFF文件下載完成後切換到MyWebFont。這樣不僅保證了在字體加載過程中文本的可見性，還提供了一旦字體可用就立即優化顯示的機會，對於改善頁面的加載性能和用戶體驗非常有幫助。
發布者：彬彬筆記，轉載請註明出處：https://www.binbinbiji.com/zh-hant/css/3208.html
