4

大量のGoogleWebフォントを1つのページに読み込むためのより良い方法はありますか？

ページの読み込み中に特定のものの読み込みを遅らせる可能性がありますか？または、ユーザーが特定のポイントまでスクロールダウンした後にのみ特定のフォントをロードしますか？

仕方がないのですが、いくつかのフォントをロードするより良い方法があると思います。Googleの「フォントコレクション」に2つまたは3つ入れた後、ページの読み込みは明らかにかなり高くなっています。

たくさんのフォントを使ってデザインすることで厄介なことをしようとはしていませんが、見本のようなもので、たくさんのフォントを表示するためのより良い方法を考えようとしています。

最良の例は、 Myfontsの無限スクロールだと思います。これらのフォントはWebフォントを使用して表示されないことは知っていますが、Webフォントをロードする同様の方法があるはずです。つまり、グーグルはどのようにしてこれらすべてのフォントをホームページにロードするのでしょうか？

4

1 に答える 1

2

これがうまくいくかどうかはわかりませんが、Google Web FontsにはJavaScriptメソッドが用意されており、フォントをいつ使用するかを設定できます。（ページの読み込みが完了した後にフォントを読み込むのではないでしょうか？）

ライブデモをお試しください。

例（フォントGlass Antiquaを使用）：

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Glass+Antiqua::latin' ] }
  };
  var YOURFUNCTION = function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  };

  //Maybe 10 seconds later?
  setTimeout(YOURFUNCTION, 10000);

  //Document Ready?
  $("body").ready(YOURFUNCTION);
</script>

デモ： http： //jsfiddle.net/DerekL/bkV7E/

于 2012-02-28T01:16:19.990 に答える