[解決済み] フォント(@font-face)がすでに読み込まれているかどうかを知るには？

質問

Font-Awesomeを使っていますが、フォントファイルが読み込まれないのに、アイコンは.NETで表示されます。

そこで、これらのアイコンに 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）の話ではないです。フォントはページ全体より先にロードされる可能性があるからです。

どのように解決するのですか？

GitHubで公開中です。 https://github.com/patrickmarabeas/jQuery-FontSpy.js

基本的に、このメソッドは 2 つの異なるフォントで文字列の幅を比較することで動作します。テストするフォントとして 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 */
}

EDIT: FontAwesomeの互換性は、正しく動作せず、異なるバージョンで問題が発生したため、削除しました。修正方法はこちらです。 https://github.com/patrickmarabeas/jQuery-FontFaceSpy.js/issues/1