如何加速Typekit加载

时间:2017-04-05 14:32:30

标签: css fonts adobe typeface typekit

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

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

1 个答案:

答案 0 :(得分:0)

默认情况下,工具包设置为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);

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