如何偵測使用 @font-face 載入自訂字體的時間？

如何偵測自訂字體 (@font-face) 的載入？

使用 @font-face 合併自訂字體時規則，確定字體檔案何時成功載入至關重要。如果不了解這些，您可能會遇到佔位符字元（例如“”）顯示的問題，直到字體可用為止。

解決方案：jQuery FontSpy.js

一個流行的解決方案是jQuery FontSpy.js 插件，它允許您根據自訂字體是否具有樣式元素

實現

要使用FontSpy.js，請按照以下步驟操作：

1. 包括插件的 JavaScript 檔案在你的專案。


2. 將 fontSpy 函數套用於將顯示自訂字體的元素。


3. 配置 onLoad 和 onFail 類別等選項當字體載入或載入失敗時套用，分別。

插件的工作原理是比較以兩種不同字體顯示的字串的寬度。當寬度不同時，表示自訂字體已成功載入。

程式碼範例

考慮以下程式碼片段，它將FontSpy.js 套用於具有class my-icons:

<br> $(document).ready(function() {<br> $('.my-icons').fontSpy({<pre class="brush:php;toolbar:false">onLoad: 'show-icons',
onFail: 'hide-icons'

});
});

一次自訂字體載入後，show-icons 類別將應用於元素，使圖示可見。如果字型載入失敗，將會套用 hide-icons 類別。

其他注意事項

• 後備字體：指定fontSpy 配置中的後備字體，用於在自訂字體失敗時顯示load.
• 超時： FontSpy.js包含一個超時機制來防止無限等待。配置超時選項以避免潛在的延遲。
• 瀏覽器支援： FontSpy.js 支援現代瀏覽器，包括 Chrome、Firefox、Safari 和 Edge。
• 跨源字體： FontSpy.js 處理跨源字體載入無縫連接。

以上是如何偵測使用 @font-face 載入自訂字體的時間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！