如何知道是否已加载字体(@ 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作为要测试的字体,因为它是最安全的Web安全字体,并且希望与您将使用的任何自定义字体完全不同.此外,我们使用非常大的字体大小,因此即使很小的差异也会很明显.当计算了Comic Sans字符串的宽度时,font-family将更改为您的自定义字体,并返回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

Answer 2

试试由Google和Typekit开发的WebFont Loader(github repo).

此示例首先以默认的serif字体显示文本; 然后在加载字体后,它会以指定的字体显示文本.(此代码在所有其他现代浏览器中重现Firefox的默认行为.)

Answer 3

以下是其他解决方案的不同方法.

我正在使用FontAwesome 4.1.0来构建WebGL纹理.这让我想到使用一个小画布渲染一个fa-square,然后检查该画布中的一个像素来测试它是否已经加载:

function waitForFontAwesome( callback ) {
   var retries = 5;

   var checkReady = function() {
      var canvas, context;
      retries -= 1;
      canvas = document.createElement('canvas');
      canvas.width = 20;
      canvas.height = 20;
      context = canvas.getContext('2d');
      context.fillStyle = 'rgba(0,0,0,1.0)';
      context.fillRect( 0, 0, 20, 20 );
      context.font = '16pt FontAwesome';
      context.textAlign = 'center';
      context.fillStyle = 'rgba(255,255,255,1.0)';
      context.fillText( '\uf0c8', 10, 18 );
      var data = context.getImageData( 2, 10, 1, 1 ).data;
      if ( data[0] !== 255 && data[1] !== 255 && data[2] !== 255 ) {
         console.log( "FontAwesome is not yet available, retrying ..." );
         if ( retries > 0 ) {
            setTimeout( checkReady, 200 );
         }
      } else {
         console.log( "FontAwesome is loaded" );
         if ( typeof callback === 'function' ) {
            callback();
         }
      }
   }

   checkReady();
};

因为它使用画布它需要一个相当现代的浏览器,但它也可以在IE8上与polyfill一起使用.

Answer 4

实际上，有一个很好的方法可以了解所有字体是否开始下载或加载完成并陷入某些错误，但不仅仅是针对特定字体，请注意以下代码：

document.fonts.onloading = () => {
  // do someting when fonts begin to download
};

document.fonts.onloadingdone = () => {
  // do someting when fonts are loaded completely
};

document.fonts.onloading = () => {
  // do someting when fonts fall into some error
};

还有一个返回的选项，Promise它可以处理.then函数：

document.fonts.ready
 .then(() => console.log('do someting at the final with each status'))