如何知道一个字体（@ font-face）是否已经加载？

问题描述

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

I'm using Font-Awesome, but while the font files are not loaded, the icons appear with .

因此，我希望这些图标具有 display：none 。

So, I want these icons to have display:none while files are not loaded.

@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;
}

我如何知道这些文件已加载，显示图标？

How do I know that these files have been loaded and I'm finally able to show the icons?

编辑：
当页面加载（onload）时，我不说话，

I'm not talking when the page is loaded (onload), because the font could be loaded before the whole page.

推荐答案

现在在GitHub上：

Now on GitHub: https://github.com/patrickmarabeas/jQuery-FontSpy.js

本质上，该方法通过比较字符串在两种不同字体中的宽度。我们使用Comic Sans作为测试对象的字体，因为它是最安全的网络字体之一，希望与您将使用的任何自定义字体足够不同。此外，我们使用非常大的字体大小，所以即使很小的差异将是显而易见的。当计算Comic Sans字符串的宽度时，font-family将更改为您的自定义字体，并返回Comic Sans。选中时，如果字符串元素宽度相同，则Comic Sans的后备字体仍在使用。如果没有，你的字体应该是可操作的。

Essentially the method works by comparing the width of a string in two different fonts. We are using Comic Sans as the font to test against, because it is the most different of the web safe fonts and hopefully different enough to any custom font you will be using. Additionally we are using a very large font-size so even small differences will be apparent. When the width of the Comic Sans string has been calculated, the font-family is changed to your custom font, with a fallback to Comic Sans. When checked, if the string element width is the same, the fallback font of Comic Sans is still in use. If not, your font should be operational.

我将字体加载检测的方法重写到一个jQuery插件，旨在给开发者提供样式元素的能力，字体是否已加载。添加了故障安全计时器，如果自定义字体加载失败，则用户没有内容。这只是糟糕的可用性。

I rewrote the method of font load detection into a jQuery plugin designed to give the developer the ability to style elements based upon whether the font has been loaded or not. A fail safe timer has been added so the user isn’t left without content if the custom font fails to load. That’s just bad usability.

我还添加了更多的控制，在字体加载过程中会发生什么，失败与添加和删除类。你现在可以做任何你喜欢的字体。我只建议修改字体大小，行间距等，让你的回退字体尽可能接近自定义，以便您的布局保持完好，用户获得预期的体验。

I have also added greater control over what happens during font loading and on fail with the inclusion of classes addition and removal. You can now do whatever you like to the font. I would only recommend modifying the fonts size, line spacing, etc to get your fall back font as close to the custom as possible so your layout stays intact, and users get an expected experience.

以下是演示：

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

Throw the following into a .js file and reference it.

(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兼容性，因为它不能正常工作，并遇到不同版本的问题。您可以在这里找到一个解决问题的方法：

FontAwesome compatibility removed as it didn't work properly and ran into issues with different versions. A hacky fix can be found here: https://github.com/patrickmarabeas/jQuery-FontFaceSpy.js/issues/1

这篇关于如何知道一个字体（@ font-face）是否已经加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！