預載如何顯著減少 Web 渲染中的字體載入延遲？

有效緩解網頁渲染中的字體載入延遲

透過@font-face嵌入自訂字體是網頁設計中的常見做法，但它可能會引入閃爍效果，其中文字最初以預設系統字體呈現，然後在完成後切換到自訂字體。這種不希望的延遲是由字體檔案的非同步載入引起的。

透過「預先載入」搶佔字體載入

為了最大限度地減少這種延遲，業界標準解決方案是利用由現代瀏覽器。此屬性使瀏覽器能夠在渲染頁面內容之前優先載入字體檔案。

透過合併預加載，您可以指示瀏覽器非同步啟動指定字體檔案的加載，從而為渲染做好準備一旦頁面請求渲染文字就使用。結果是無縫過渡，應用自訂字體時沒有任何可察覺的延遲。

例如，請考慮以下程式碼片段：

<link
  rel="preload"
  href="assets/fonts/xxx.woff"
  as="font"
  type="font/woff"
  crossorigin
/>

掌握的其他資源

要進一步了解這個主題，我們建議探索以下資源：

• [我可以使用： link-rel-preload](https://caniuse.com/#feat=link-rel-preload)
• [rel=preload 的文件- MDN](https://developer.mozilla.org/ en-US/docs/Glossary/Prefetch_and_preload)
• [Web 字體的預先載入提示 - Bram斯坦](https://bramstein.com/blog/2013/01/14/preload-hint-web-fonts/)

以上是預載如何顯著減少 Web 渲染中的字體載入延遲？的詳細內容。更多資訊請關注PHP中文網其他相關文章！