javascript - 如何知道字体(@font-face)是否已经加载？

Question

我正在使用 Font-Awesome，但在未加载字体文件时，图标显示为 。

因此，我希望这些图标在未加载文件时显示 display:none。

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

我怎么知道这些文件已经加载并且我终于可以显示图标了？

编辑: 我不是在说页面加载时(onload)，因为字体可以在整个页面加载之前加载。

Answer 1

现在在 GitHub 上:https://github.com/patrickmarabeas/jQuery-FontSpy.js

本质上，该方法通过比较两种不同字体的字符串宽度来工作。我们使用 Comic Sans 作为测试字体，因为它是网络安全字体中最不同的，并且希望与您将使用的任何自定义字体有足够的不同。此外，我们使用了非常大的字体大小，因此即使是很小的差异也会很明显。计算出 Comic Sans 字符串的宽度后，字体系列将更改为您的自定义字体，并回退到 Comic Sans。勾选时，如果字符串元素宽度相同，则仍在使用Comic Sans的后备字体。如果没有，您的字体应该可以使用。

我将字体加载检测方法重写到一个 jQuery 插件中，旨在让开发人员能够根据字体是否已加载来设置元素样式。添加了一个故障安全计时器，因此如果自定义字体加载失败，用户不会没有内容。这只是糟糕的可用性。

我还通过添加和删除类来更好地控制字体加载期间和失败时发生的情况。您现在可以对字体做任何您喜欢的事情。我只建议修改字体大小、行间距等，让您的后备字体尽可能接近自定义，这样您的布局保持完整，用户获得预期的体验。

这是一个演示:http://patrickmarabeas.github.io/jQuery-FontSpy.js

将以下内容放入 .js 文件中并引用它。

(function($) {

    $.fontSpy = function( element, conf ) {
        var $element = $(element);
        var defaults = {
            font: $element.css("font-family"),
            onLoad: '',
            onFail: '',
            testFont: 'Comic Sans MS',
            testString: 'QW@HhsXJ',
            delay: 50,
            timeOut: 2500
        };
        var config = $.extend( defaults, conf );
        var tester = document.createElement('span');
            tester.style.position = 'absolute';
            tester.style.top = '-9999px';
            tester.style.left = '-9999px';
            tester.style.visibility = 'hidden';
            tester.style.fontFamily = config.testFont;
            tester.style.fontSize = '250px';
            tester.innerHTML = config.testString;
        document.body.appendChild(tester);
        var fallbackFontWidth = tester.offsetWidth;
        tester.style.fontFamily = config.font + ',' + config.testFont;
        function checkFont() {
            var loadedFontWidth = tester.offsetWidth;
            if (fallbackFontWidth === loadedFontWidth){
                if(config.timeOut < 0) {
                    $element.removeClass(config.onLoad);
                    $element.addClass(config.onFail);
                    console.log('failure');
                }
                else {
                    $element.addClass(config.onLoad);
                    setTimeout(checkFont, config.delay);
                    config.timeOut = config.timeOut - config.delay;
                }
            }
            else {
                $element.removeClass(config.onLoad);
            }
        }
        checkFont();
    };

    $.fn.fontSpy = function(config) {
        return this.each(function() {
            if (undefined == $(this).data('fontSpy')) {
                var plugin = new $.fontSpy(this, config);
                $(this).data('fontSpy', plugin);
            }
        });
    };

})(jQuery);

将它应用到你的元素中

.bannerTextChecked {
        font-family: "Lobster";
        /* don't specify fallback font here, do this in onFail class */
}

$(document).ready(function() {

    $('.bannerTextChecked').fontSpy({
        onLoad: 'hideMe',
        onFail: 'fontFail anotherClass'
    });

});

删除那个 FOUC!

.hideMe {
    visibility: hidden !important;
}

.fontFail {
    visibility: visible !important;
    /* fall back font */
    /* necessary styling so fallback font doesn't break your layout */
}

编辑:FontAwesome 兼容性被删除，因为它不能正常工作并且遇到不同版本的问题。可以在这里找到一个 hacky 修复程序:https://github.com/patrickmarabeas/jQuery-FontFaceSpy.js/issues/1