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