3

我在我的网站上安装了 typekit，通常的两行 js 就在开头的 head 标签之后，但它非常慢/对字体加载没有响应，这可以通过刷新页面完全解决，之后 typekit 字体加载完美而真实迅速地。但从用户的角度来看，他们永远不会知道这样做，因此他们将使用默认字体。

我将 typekit js 作为在元标记之前和加载 jquery、jquery-ui 和其他脚本之前的开头标记下的第一件事。

有没有其他人遇到过这个问题？

4

1 回答 1

1

似乎对我有用的是以异步模式加载脚本 - 正如 typekit 博客上所指定的那样，我在下面复制了它

标准异步模式

第一种模式是最基本的。它基于 Steve Souders 等网络性能专家编写的模式，并用于其他 JavaScript 嵌入代码，如 Google Analytics。

<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 对象并将默认值替换为您自己的套件 ID。您可以将 JavaScript 字体事件回调添加到 TypekitConfig 对象。

优点：

异步加载工具包（加载时不会阻止进一步的页面呈现）。

缺点：

向您的 html 页面添加比标准 Typekit 嵌入代码更多的字节。在无法使用字体事件控制或隐藏的所有浏览器中导致初始 FOUT。

于 2012-05-31T16:26:30.860 回答