3

私のサイトにtypekitをインストールしました。これは、開始ヘッドタグの直後の通常の2行のjsですが、フォントの読み込みが非常に遅い/応答しないため、ページを更新することで完全に修正されます。その後、typekitフォントが完全に読み込まれます。早く。ただし、ユーザーの観点からは、そうすることを知らないため、デフォルトのフォントが提供されます。

typekit jsは、メタタグの前、およびjquery、jquery-ui、その他のスクリプトをロードする前の、開始ヘッドタグの下にあります。

他の誰かがこれに問題を抱えていますか？

4

1 に答える 1

1

私にとってはうまくいったように見えたのは、スクリプトを非同期パターンでロードすることでした-typekitブログで指定されているように、iveはそれを以下にコピーしました

標準の非同期パターン

この最初のパターンが最も基本的です。これは、Steve SoudersなどのWebパフォーマンスの専門家によって記述され、GoogleAnalyticsなどの他の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オブジェクトを編集し、デフォルトを独自のキットIDに置き換えます。TypekitConfigオブジェクトにJavaScriptフォントイベントコールバックを追加できます。

利点：

キットを非同期でロードします（ロード中にそれ以上のページレンダリングをブロックしません）。

短所：

標準のTypekit埋め込みコードよりも多くのバイトをhtmlページに追加します。フォントイベントで制御または非表示にできないすべてのブラウザで初期FOUTを発生させます。

于 2012-05-31T16:26:30.860 に答える