使用jQuery知道何时加载@ font-face字体？

使用jQuery检测@font-face字体加载完成

基础概念

@font-face是CSS3的一个规则，允许开发者定义自定义字体并在网页中使用。当使用@font-face加载字体时，浏览器需要下载字体文件，这可能导致字体加载延迟（FOIT - Flash of Invisible Text）。

检测字体加载的方法

1. 使用document.fonts API（现代浏览器）

现代浏览器提供了FontFace API，可以通过document.fonts来检测字体是否加载完成：

// 定义字体
const font = new FontFace('MyFont', 'url(MyFont.woff2)');

// 加载字体并检测
document.fonts.add(font);
font.load().then(() => {
    console.log('字体已加载');
    // 在这里执行字体加载后的操作
}).catch((error) => {
    console.error('字体加载失败:', error);
});

2. 使用jQuery的回调方法（兼容旧浏览器）

对于不支持FontFace API的旧浏览器，可以使用定时检测元素宽度的方法：

(function($) {
    $.fn.fontLoaded = function(fontFamily, callback) {
        var $test = $('<span style="visibility:hidden;position:absolute;top:-9999px;left:-9999px;">Hg</span>')
            .css('font-family', 'sans-serif')
            .appendTo('body');
        
        var originalWidth = $test.width();
        $test.css('font-family', fontFamily + ', sans-serif');
        
        var checkFont = function() {
            if ($test.width() !== originalWidth) {
                $test.remove();
                callback();
            } else {
                setTimeout(checkFont, 50);
            }
        };
        
        checkFont();
    };
})(jQuery);

// 使用方法
$(document).fontLoaded('MyCustomFont', function() {
    console.log('自定义字体已加载');
    // 执行相关操作
});

3. 使用FontFaceObserver库

这是一个专门用于检测字体加载的轻量级库：

// 首先引入FontFaceObserver库
// <script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.1.0/fontfaceobserver.js"></script>

var font = new FontFaceObserver('MyFont', {
    weight: 400
});

font.load().then(function () {
    console.log('字体已加载');
    $('body').addClass('fonts-loaded');
}).catch(function () {
    console.log('字体加载失败');
});

应用场景

防止文字闪烁(FOIT)：在字体加载完成前隐藏文字或显示备用字体
字体依赖的布局：某些布局可能依赖特定字体的尺寸
自定义字体图标：确保图标字体加载完成后再显示
字体测量：需要精确测量使用自定义字体的文本尺寸时

常见问题及解决方案

问题1：字体加载检测不准确

原因：浏览器缓存可能导致检测失效解决：确保每次检测都使用新的测试元素

问题2：跨域字体无法检测

原因：某些浏览器限制跨域字体检测解决：确保字体文件有正确的CORS头

问题3：性能问题

原因：频繁检测可能影响性能解决：合理设置检测间隔，或使用现代API替代

最佳实践

优先使用现代的document.fonts API
对于旧浏览器，使用回退方案
考虑使用字体加载CSS类来控制样式变化
提供适当的加载状态和错误处理

/* 字体加载前的样式 */
body {
    font-family: fallback-font, sans-serif;
    visibility: hidden;
}

/* 字体加载后的样式 */
body.fonts-loaded {
    font-family: MyCustomFont, sans-serif;
    visibility: visible;
}

通过以上方法，你可以有效地检测@font-face字体的加载状态，并在加载完成后执行相应的操作。