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

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

密鑰點：

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

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

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

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

此延遲下載通常會導致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：