javascript - Internet Explorer 10 : $(window). 加载不等待自定义字体。

Question

我在 IE10 中遇到问题，调用 JavaScript 函数应该在加载自定义字体后发生。在 IE9 和 IE8 中，将调用包装在 $(window).load 中会阻止调用在加载字体之前执行。然而，在 IE10 中，调用仍在事件上执行，但字体尚未加载。有人对可能发生的事情有建议吗？预先感谢您的帮助。

(function() {
    var resizeAndAttachHandlers = function (context) {
        // This code gets executed before fonts are loaded 
    };

    namespace('$.mynamespace').initialize() {
        $(window).load(function (context) {
            resizeAndAttachHandlers(context);
        });
    };
})(); 

$(document).ready(function() {
    $.mynamespace.initialize({
        .
        .
        .
    }); 
});  

Answer 1

谷歌网络字体 API

如果您的字体是从 Google Web Fonts API、TypeKit、Ascender、Fonts.com 或 Fontdeck 加载的，那么您可以使用 Google WebFont Loader https://developers.google.com/webfonts/docs/webfont_loader

加载程序具有您可以响应的特定事件 https://developers.google.com/webfonts/docs/webfont_loader#Events听起来您可能会对指示 Web 字体何时完成加载的 fontactive 回调感兴趣。

var WebFontConfig = {
    google: {
        families: [ "Tangerine", "Cantarell" ]
    },
    fontactive: function( fontName ) {
        console.log( "The font has loaded!", fontName );
    }
};
(function() {
    var webFont = document.createElement( "script" ), script;

    webFont.src = "//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js";
    webFont.async = "true";

    script = document.getElementsByTagName( "script" )[ 0 ];
    script.parentNode.insertBefore( webFont, script );
})();

您可以从以下 jsFiddle http://jsfiddle.net/wE2W5/ 运行以上代码

字体检测库

如果这对您来说似乎很繁重，那么可以使用 fontdetect 库 http://www.atomicjetpacks.com/blog/8你可以考虑使用

$( document ).ready( function() { 
    fontDetect.onFontLoaded( "MyCustomFont", 
        function fontLoaded() {
            console.log( "The font has loaded!" );
        }, 
        function fontError() {}, 
        { msTimeout: 3000 } );
});