文章/答案/技术大牛

发布

社区首页 >问答首页 >如何加载大量的Google Web字体？

问如何加载大量的Google Web字体？
EN

Stack Overflow用户

提问于 2012-02-10 05:26:02

回答 1查看 1.4K关注 0票数 4

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

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

我不禁想有一种更好的方法来加载几种字体。在Google "Font Collection“中放入2或3之后，页面负载显然相当高。

我并不是想用一堆字体来设计俗气，但我正在尝试想出一种更好的方式来显示很多字体--有点像样本书。

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

css

font-face

webfonts

google-webfonts

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-02-28 09:16:20

我不知道这是否适用于您，但是Google Web字体确实提供了一个JavaScript方法，您可以设置何时使用该字体。(也许可以在页面加载完成后加载字体？)

试试现场的demo。

示例(使用字体)：

<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/

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9219042

复制

相似问题

问如何加载大量的Google Web字体？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何加载大量的Google Web字体？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何加载大量的Google Web字体？
EN