我们如何检测 CSS `@font-face` 字体何时加载以防止图标显示损坏？

检测 CSS @font-face 的字体加载状态

问题：
使用集成字体时@font-face，图标最初可能显示为带有 ⓘ 符号的无样式圆圈，而不是其预期设计。出现此问题的原因是字体文件需要时间加载。

查询：
我们如何确定 @font-face 字体文件是否已加载以确保正确的图标显示？

答案：

jQuery-FontSpy.js 插件：

此开源插件检测字体加载状态通过比较以 Comic Sans MS（一种广泛使用的字体）呈现的字符串的宽度与以您希望的自定义​​字体呈现的相同字符串的宽度加载。当宽度不同时，自定义字体已成功加载。

自定义：

• onLoad：字体加载时添加的类已加载。
• onFail: 如果字体失败则添加类
• testFont: 一种广泛使用的字体，如“Comic Sans MS”。
• testString: 用于宽度比较的独特字符串。
• 延迟：字体宽度之间的时间检查。
• 超时： 假设字体失败之前等待的最长时间。

用法：

1. 将 jQuery-FontSpy.js 插件包含在您的HTML。
2. 将 .bannerTextChecked 类应用到您想要检测其字体加载的元素。
3. 初始化插件：

4. 定义自定义 CSS 类以根据字体加载控制元素可见性

示例：

附加说明：

• FontAwesome 兼容性当前为不支持。
• 了解更多详细信息和现场演示，请访问：https://patrickmarabeas.github.io/jQuery-FontSpy.js

以上是我们如何检测 CSS `@font-face` 字体何时加载以防止图标显示损坏？的详细内容。更多信息请关注PHP中文网其他相关文章！