4

有没有更好的方法将大量 Google Web 字体加载到单个页面中？

也许在页面加载时延迟加载某些内容？或者可能只在用户向下滚动到特定点后加载某些字体？

我不禁想到有更好的方法来加载几种字体。在谷歌“字体集合”中放入 2 或 3 后，页面加载显然非常高。

我并不是想通过使用一堆字体来设计变得俗气，但我试图想出一种更好的方法来显示很多字体——有点像一本标本书。

我想最好的例子是Myfonts上的无限滚动。我知道这些字体不是使用网络字体显示的，但我认为应该有类似的方式来加载网络字体。我的意思是，谷歌如何在主页上加载所有这些字体？

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 回答