最好的字體加載策略以及如何執行它們

掌握Web字體加載策略：實用指南

扎克·萊瑟曼（Zach Leatherman）的字體加載策略綜合指南一直是Web開發人員的寶貴資源。但是，大量的選項可能是壓倒性的。本文簡化了最佳方法，重點是實用性和執行。

關鍵策略：

Leatherman擁護兩種主要策略：

1. 與課堂的福特：一種適合大多數情況的多功能方法，無論字體是自託管還是使用字體託管服務。
2. 關鍵Foft：最性能的選項，但僅限於自託管字體。

在深入研究之前，讓我們澄清術語：

• FOIT（無形文本的閃光）：文本被隱藏在Web字體加載之前。
• Fout（未風格的文本閃光燈）：最初顯示系統字體，然後由Web字體替換。
• Foft（人造文本閃光燈）：一種更複雜的方法，涉及首先加載羅馬字體，然後再加載其他樣式。

字體託管選項：

1. 雲提供商（例如，Google字體，Adobe字體）：通常更易於實現，但由於阻礙行為而效果通常更低。 Google字體的display=swap參數通過啟用Fout提供了略有改進。

   <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap" rel="stylesheet">

2. 自我託管：需要字體許可，並涉及使用@font-face以及可能的font-display: swap 。這允許更大的控制和優化。

自託管字體和實施：

@font-face允許在CSS中聲明字體：

 @font-face {
  字體家庭：Lato；
  src：url（'to to to to-lato.woff2'）格式（'woff2'），
       URL（'to to to-lato.woff'）格式（'woff'）;
  / * ...其他重量和样式... */
}

html {
  字體家庭：Lato，sans-serif;
}

font-display: swap觸發Fout for自託管字體。

fout with class（既適用於雲和自主字體）：

該策略使用JavaScript使字體異步加載，將重新塗片分組並適應用戶偏好。如果用戶已經安裝了字體，它還允許跳過字體加載。

1. 正常加載字體（通過<link>用於雲託管或@font-face以進行自構托）。

2. 在A中使用CSS字體加載API（或FontfaceObserver以更廣泛的兼容性）<script> tag:</script>

   if ('fonts' in document) {
     Promise.all([
       document.fonts.load('1em Lato'),
       // ... other weights and styles ...
     ]).then(_ => {
       document.documentElement.classList.add('fonts-loaded');
     });
   }

3. Use CSS to style the text:

   body {
     font-family: sans-serif; /* System font */
   }
   
   .fonts-loaded body {
     font-family: Lato, sans-serif; /* Web font */
   }

4. Optimize for repeat visits using sessionStorage:

   if (sessionStorage.fontsLoaded) {
     document.documentElement.classList.add('fonts-loaded');
   } else {
     // ... font loading code ...
   }

FOFT (Flash of Faux Text):

This advanced technique loads the Roman font first, then other styles. "Critical FOFT" optimizes this by loading only essential characters initially. While offering performance gains, it's more complex to implement.

Choosing the Right Strategy:

• Cloud-Hosted, Simple: Use font-display: swap if provided by the host; otherwise, use FOUT with Class.
• Self-Hosted, Simple: @font-face font-display: swap is the easiest approach, especially for a small number of font files.
• Self-Hosted, Advanced: Consider Standard FOFT or Critical FOFT for performance optimization, especially with many font files.

This streamlined guide provides a clear path to choosing and implementing the optimal font loading strategy for your project. Remember to prioritize a JavaScript-free approach when feasible, particularly with limited font files.

以上是最好的字體加載策略以及如何執行它們的詳細內容。更多資訊請關注PHP中文網其他相關文章！