【问题标题】:Performance considerations of link/@import/js method of using Google Fonts使用 Google 字体的 link/@import/js 方法的性能注意事项
【发布时间】:2014-07-05 00:25:49
【问题描述】:

使用 Google 字体时,可以使用 3 种方法将它们包含到网站中,这 3 种方法是 <link>@import 和 javascript。

我想知道在确定哪种方法最合适时应该考虑哪些因素,以及使用一种方法与另一种方法对字体的影响。如:

  • 添加的数据大小
  • 字体渲染差异
  • 页面加载速度
  • 并行加载

我假设一个人能够不受限制地使用任何方法。谢谢

【问题讨论】:

    标签: performance webfonts google-webfonts google-font-api


    【解决方案1】:

    link 方法允许您在一次调用中组合多个字体请求,如下所示:

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid +Sans|Lobster">
    

    这个简单的技巧可以节省到 Google 服务器的往返行程。此外,将您的“链接”调用放在页面上的任何 JS 调用之前。

    不幸的是,当一个外部 CSS 文件使用 @import 指令链接到另一个外部 CSS 文件时,Internet Explorer 的性能很差。如果不是因为性能问题,最好将@import 放在使用字体的同一个 CSS 文件中具有额外的灵活性,但为了获得最佳性能,请将“链接”标签放在基本 HTML 文件中。

    【讨论】:

      猜你喜欢
      • 2015-06-24
      • 1970-01-01
      • 2011-07-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-01-24
      • 1970-01-01
      • 2014-04-08
      相关资源
      最近更新 更多