1

非同期モードのGoogleWebfontLoader(GWL)をFont Awesomeフォントと組み合わせると、非常に奇妙な動作が発生します。

GWLを使用していくつかのカスタムフォントをロードすると、FontAwesomeフォントが2回ロードされます。これは私がGWLに使用するコードです:

<script type="text/javascript">
    WebFontConfig = {
        custom: { families: ['proxima-nova', 'museo-slab'], urls: ['evacss/font-families.css'] }
    };
    (function () {
        var wf = document.createElement('script');
        wf.src = 'evajs/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
    })();
</script>

evacss / font-families.cssの中に、上記の2つのフォント(proxima-novaとmuseo-slab)のフォントファミリーの定義があります。フォントがありません。素晴らしい定義があります。

それからこれの前に私は古典を持っています

<link rel="stylesheet" type="text/css" href="evacss/font-awesome.css"> 

Wichは独自のフォントファミリー定義で素晴らしいフォントをロードします

しかし、結果は次のとおりです。 クリックして見る

GWLスクリプトを削除し、Font Awesome Cssをそのままにしておくと、FontAwesomeの1回の読み込みで期待される結果になります。

クリックして見る

このバージョンのGWLでも同じ動作が発生します

<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
    WebFont.load({
        custom: { families: ['proxima-nova', 'museo-slab'], urls: ['evacss/font-families.min.css'] }
    });
</script>

webfont.jsがFontAwesomeのダブルダウンロードをトリガーする理由を本当に理解していません(GWLで参照していない外部フォントファミリーのより一般的な方法で)

4

1 に答える 1

1

このバグはFirebugに起因します。Chromeで試すか、Firebugなしで接続をリッスンしてください。

于 2013-03-29T20:02:38.087 に答える