javascript - Internet Explorer 10: $(window).load がカスタム フォントを待機していません。

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 フォント 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#Eventsfontactive 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 } );
});