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

Google Web Fonts 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听起来你会对fontactive回调感兴趣，以指示何时web字体完成加载。

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

Answer 2

尝试使用window.onload = function() {}