在将异步模式下的 Google Webfont Loader (GWL) 与 Font Awesome 字体组合时,我遇到了一个非常奇怪的行为。
如果我使用 GWL 加载几个自定义字体,Font Awesome 字体会加载 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 我有上面两种字体(proxima-nova 和 museo-slab)的字体系列定义
然后在此之前我有经典
<link rel="stylesheet" type="text/css" href="evacss/font-awesome.css">
使用自己的字体系列定义加载字体很棒
但结果是这样的:
如果我删除 GWL 脚本并只保留我的 Font Awesome Css,那么结果就是预期的结果,它只需要一次加载 Font Awesome。
此版本的 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 会触发我的 Font Awesome 的双重下载(以更通用的方式用于外部字体系列,我在 GWL 中没有以任何方式引用)