我們如何偵測 CSS `@font-face` 字體何時載入以防止圖示顯示損壞？

偵測CSS @font-face 的字型載入狀態

問題：
使用整合字型時@ font-face，圖示最初可能顯示為帶有ⓘ 符號的無樣式圓圈，而不是其預期設計。出現此問題的原因是字體檔案需要時間載入。

查詢：
我們如何確定 @font-face 字體檔案是否已載入以確保正確的圖示顯示？

答案：

jQuery-FontSpy.js 外掛程式：

此開源外掛程式來偵測字體狀態透過比較Sans MS（廣泛使用的字體）呈現的字串的寬度與以您想要的自訂字體呈現的相同字串的寬度載入。當寬度不同時，自訂字體已成功載入。

自訂：

• onLoad：字體載入時新增的類別已載入。
• onFail: 如果字體失敗則加入類別
• testFont: 一個廣泛使用的字體，如「Comic Sans MS」。
• testString: 用於寬度比較的獨特字串。
• 延遲：字體寬度之間的時間檢查。
• 超時： 假設字體失敗之前等待的最長時間。

用法：

1. 將 jQuery-FontSpy.js 外掛程式包含在您的HTML。
2. 將 .bannerTextChecked 類別套用到您想要偵測其字型載入的元素。
3. 初始化外掛：

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

4. 定義自訂 CSS類以根據字體加載控制元素可見性

示例：

.hideMe {
  visibility: hidden !important;
}

.fontFail {
  visibility: visible !important;
  /* Style to resemble the custom font */
}

附加說明：

• FontAwesome 相容性目前為不支援。
• 了解更多詳細資訊和現場演示，請造訪：https://patrickmarabeas.github.io/jQuery-FontSpy.js

以上是我們如何偵測 CSS `@font-face` 字體何時載入以防止圖示顯示損壞？的詳細內容。更多資訊請關注PHP中文網其他相關文章！