如何加速Typekit加载

Question

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

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

Answer 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);

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