如何检测使用 @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中文网其他相关文章！