非同期モードの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で参照していない外部フォントファミリーのより一般的な方法で)