如何在 @font-face 聲明中使用本機字體來優化 Web 效能？

@font-face：在不下載瀏覽器的情況下使用本地字體

為了優化網頁效能，瀏覽器通常會下載透過@指定的字體字體聲明。如果使用者的系統已經擁有該字體，這可能是多餘的。為了避免這種情況，請考慮在 @font-face 聲明中使用「local」關鍵字。

套用「local」關鍵字

「local」關鍵字讓您透過系統安裝的名稱來引用字型。要利用此功能，只需指定以下內容：

<code class="css">@font-face {
  font-family: 'DejaVu Serif';
  src: local('DejaVu Serif'), ...;
}</code>

透過將「本地」放在 src 清單中的第一位，瀏覽器將在下載之前嘗試使用本地安裝的 DejaVu Serif 版本。

進一步最佳化

要進行更全面的字體最佳化，請考慮以下步驟：

• 指定多種字體格式：這可以提高各種瀏覽器之間的相容性。
• 使用字體託管服務：Font Squirrel 等服務提供最佳化的 Web 字體並管理快取以增強效能。
• 利用 CSSFontLoading API：此 API 可讓您檢查字體是否已載入並準備就緒供使用，減少不必要的字體載入。

以上是如何在 @font-face 聲明中使用本機字體來優化 Web 效能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！