如何加快 Typekit 加载速度

【问题标题】：How to speed up Typekit loading如何加快 Typekit 加载速度
【发布时间】：2017-04-05 14:32:29
【问题描述】：

当您重新加载一个页面并且 Typekit 需要半秒钟才能赶上页面的其余部分时，有没有其他人发现它真的很令人沮丧。

Before loading 和 after loading。我明白在这里使用精简字体对我的情况没有帮助，但你知道.. 它适合品牌。

【问题讨论】：

我假设您已经告诉 typekit 使用缓存 (blog.typekit.com/2016/01/21/…)，并确保早加载 typekit 脚本（但仍然是异步的），而不是“在身体的尽头”。您想在标题之后立即启动脚本加载，并在脚本标记中使用 async 关键字。
迈克，感谢您的回复。我会通读这篇博文，它现在已经缓存了！

标签： css fonts adobe typeface typekit

【解决方案1】：

默认情况下套件设置为async: true，改成async: false

请参阅下面的示例代码。

(function(d) {
        var config = {
            kitId: '', // Your kit id
            scriptTimeout: 3000,
            async: true
          },
          h = d.documentElement,
          t = setTimeout(function() {
            h.className = h.className.replace(/\bwf-loading\b/g, '') + ' wf-inactive';
          }, config.scriptTimeout),
          tk = d.createElement('script'),
          f = false,
          s = d.getElementsByTagName('script')[0],
          a;
        h.className += ' wf-loading';
        tk.src = 'https://use.typekit.net/' + config.kitId + '.js';
        tk.async = false;
        tk.onload = tk.onreadystatechange = function() {
          a = this.readyState;
          if (f || (a && a != 'complete' && a != 'loaded')) return;
          f = true;
          clearTimeout(t);
          try {
            Typekit.load(config);
          } catch (e) {}
        };
        s.parentNode.insertBefore(tk, s);
      })(document);

这将停止字体渲染，直到它们被下载并准备好使用。

【讨论】：