如何使用 @font-face 檢測字體何時加載以避免 FOUC？

使用@font-face 偵測字體的載入狀態

Web 開發人員經常會遇到圖示或字體顯示為佔位符字符，直到字體檔案完全加載。這可能會分散用戶的注意力或破壞用戶體驗。要解決這個問題，了解字體何時加載至關重要。

字體載入偵測問題

在問題中提到的具體場景中，Font-Awesome由於字體檔案載入延遲，圖示最初顯示為 。目標是在字體加載之前隱藏這些圖標，增強網站的視覺外觀和功能。

字體載入偵測解決方案

在等待整個過程時頁面載入可能不可行，有一些方法可以確定字體是否已被專門載入。一種有效的方法是比較以兩種不同字體呈現的字串的寬度。

jQuery-FontSpy.js 外掛程式

為了簡化此過程，jQuery-FontSpy .js 外掛程式已開發完畢，可在GitHub (https://github.com /patrickmarabeas/jQuery-FontSpy.js) 上取得。該插件提供了一種直觀的方法來檢測字體加載並相應地應用樣式。

使用 jQuery-FontSpy.js

要使用該插件，請將插件的 JavaScript 檔案包含在您的專案並在目標元素上初始化它。您可以根據字體載入狀態指定要新增或刪除的自訂類別。例如：

<span class="bannerTextChecked">FontAwesome Icon</span>

$(document).ready(function() {
    $('.bannerTextChecked').fontSpy({
        onLoad: 'hideMe',
        onFail: 'fontFail anotherClass'
    });
});

用於 FOUC 刪除的 CSS

要完全刪除無樣式內容的 Flash (FOUC)，請套用適當的CSS規則：

.hideMe {
    visibility: hidden !important;
}

.fontFail {
    visibility: visible !important;
    /* fallback font */
    /* apply necessary styling to avoid layout issues with the fallback font */
}

結論

透過利用字體載入偵測技術，您可以透過確保字體僅在完全載入時顯示來增強使用者體驗。 jQuery-FontSpy.js 讓這個過程變得毫不費力，讓您能夠根據特定字體的載入狀態添加樣式。

以上是如何使用 @font-face 檢測字體何時加載以避免 FOUC？的詳細內容。更多資訊請關注PHP中文網其他相關文章！