優化性能的Web字體：最新的狀態

>本文是Siteground合作夥伴關係的貢獻。 感謝您支持我們的讚助商。 67％的網站現在使用自定義的Web字體。 但是，這種廣泛的採用提出了績效和用戶體驗挑戰。 本文探討了Web字體實施中的常見陷阱，並提供解決方案，包括既定的解決方法和未來的標準。

密鑰點：

在67％的網站上使用的自定義Web字體，由於其大小和加載時間，可能會對性能和用戶體驗產生負面影響，可能會導致無形文本（FOIT）。 優化自定義字體涉及使用瀏覽器兼容格式（優先級WOFF2），僅加載必要的樣式和限製字符集的字體最小化字體。

>對抗FOIT，考慮使用系統字體，使用Web字體加載程序進行異步加載或利用CSS字體加載API進行顆粒狀控制。

>
• > CSS
屬性提供高級字體加載管理，儘管瀏覽器支持仍然不完整。
• >雖然未風格的文本（fout）可能會持續存在，但可以通過將後備字體指標（x-height and Width）與自定義字體對齊。
自定義Web字體的魅力：
• >網站訪問者優先考慮內容。 因此，出色的排版對於可讀性，可讀性和品牌標識至關重要。 自定義Web字體（未在用戶設備上預安裝的字體）登錄出色的印刷設計。 儘管CSSfont-display規則已啟用了廣泛採用，但字體文件的固有大小會影響站點性能。 有效的字體加載至關重要。
>
• 理解隱形文本的閃光

>使用自定義字體的典型方法 - 通過CSS

定義它們並依賴默認瀏覽器行為 - 是次優的。 瀏覽器通常會延遲字體加載，直到CSS解析完成。 此外，正如Zach Leatherman的亮點一樣，字體下載需要特定條件：> 使用指定的

的HTML元素 @font-face在Webkit和blink瀏覽器中，該元素不得為空。

對於支持Unicode範圍描述符的瀏覽器，內容必須與指定的範圍匹配。

此延遲下載通常會導致FOIT：文本隱形性，直到字體負載為止。 FOIT的瀏覽器處理各不相同：

眨眼和Firefox使用三秒鐘的超時；如果字體未加載，則會顯示一個後備字體，可能導致Fout（未風格的文本閃光）。
> Safari，Android的默認瀏覽器和BlackBerry在字體加載之前不顯示文本，使用戶留有空白。
• IE/Edge直接顯示後備字體，一種更易於用戶友好的方法。
>
雖然福特比FOIT的破壞性不大，但理想情況下，應避免兩者。 但是，許多專家都認為福特比FOIT更可取。

>優化自定義字體文件：

> 幾種策略最小化字體文件大小：

1. >最小化字體：

   使用少量精心選擇的字體。 >

>瀏覽器兼容的格式：優先級WOFF2，倒退到Woff。 示例：

2. @font-face {
     font-family: 'Open Sans';
     src: local('Open Sans'), local('OpenSans'),
          url('fonts/open-sans.woff2') format('woff2'),
          url('fonts/open-sans.woff') format('woff');
   }

   >僅加載必要的樣式：
避免加載未使用的字體變化（斜體，粗體等）。
3. >

   >

   >子集字符集：
僅包含頁面上使用的字符。 （有關詳細信息

4. 地址foit：

幾種方法減輕foit：

避免自定義字體（系統字體後備）：一種簡單的，儘管在美學上較少令人愉悅，但解決方案是僅依靠系統字體。 示例：

1. Web字體加載程序：此JavaScript庫異步加載字體，顯示後備直到自定義字體可用。

   body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   }

>
2. CSS字體加載API：該標準API可對字體加載進行精細元素的控制，從而可以使用系統字體，直到準備好自定義字體為止。 （有關教程，請參見Manuel Matuzovic的“從CSS字體加載開始”）。
   未來：CSS
：
3. >

   > CSS 屬性提供了對字體加載和後備行為的顆粒狀控制。 值包括，

   ，
，

和

。 雖然瀏覽器支持仍然有限，但它代表了Web字體加載的未來。 > font-display 緩解福特：

font-display當上述方法解決foit時，可能仍會發生fout。 最大程度地減少其影響涉及使用Monica Dinculescu的字體樣式匹配器等工具將後備字體的X-Height和Width與自定義字體的尺寸匹配。 > autoblock結論： swap fallback有效的Web字體管理需要優化文件大小並控製字體加載行為。 這裡討論的方法以及提供的資源提供了有效的解決方案，以增強網站性能和用戶體驗。 optional

常見問題（常見問題解答）：

>（原始輸入的常見問題解答部分已經寫得很好，不需要對此重寫進行重大修改。）

）原始FAQ部分保留了。

以上是優化性能的Web字體：最新的狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！