我在我的网站上安装了 typekit,通常在开头的 head 标签后面有两行 js,但加载字体非常慢/无响应,这可以通过刷新页面来完全解决,之后 typekit 字体完美地加载迅速地。但从用户的角度来看,他们永远不会知道要这样做,因此他们将获得默认字体。
我将 typekit js 作为元标记之前以及加载 jquery、jquery-ui 和其他脚本之前的开头头标记下的第一件事。
还有其他人遇到过这个问题吗?
对我来说似乎有用的是以异步模式加载脚本 - 正如 typekit 博客上所指定的,我在下面复制了它
标准异步模式
第一个模式是最基本的。它基于 Steve Souders 等 Web 性能专家编写的模式,并在 Google Analytics 等其他 JavaScript 嵌入代码中使用。
<script type="text/javascript">
TypekitConfig = {
kitId: 'abc1def'
};
(function() {
var tk = document.createElement('script');
tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';
tk.type = 'text/javascript';
tk.async = 'true';
tk.onload = tk.onreadystatechange = function() {
var rs = this.readyState;
if (rs && rs != 'complete' && rs != 'loaded') return;
try { Typekit.load(TypekitConfig); } catch (e) {}
};
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(tk, s);
})();
</script>
此模式使用单个内联标记将新的脚本元素动态添加到页面,这会加载套件而不会阻止进一步的渲染。附加一个事件侦听器,一旦脚本完成加载,该事件侦听器就会调用 Typekit.load()。
如何使用它:
将此片段放在顶部,以便尽快开始下载。
编辑突出显示的 TypekitConfig 对象,并将默认值替换为您自己的 Kit ID。
您可以将 JavaScript 字体事件回调添加到 TypekitConfig 对象。
优点:
异步加载套件(加载时不会阻止进一步的页面呈现)。
缺点:
与标准 Typekit 嵌入代码相比,向 html 页面添加更多字节。
在所有浏览器中导致无法通过字体事件控制或隐藏的初始 FOUT。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)