使用Google字体的link / @ import / js方法的性能注意事项

时间:2014-05-16 14:00:27

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

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

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

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

我假设一个人有能力无限制地使用任何方法。感谢

1 个答案:

答案 0 :(得分:1)

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

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

这个简单的技巧可以节省往返Google服务器的数据。此外,请将您的链接放在&#39;在您的页面上的任何JS调用之前调用。

不幸的是,当一个外部CSS文件使用@import指令链接到另一个外部CSS文件时,Internet Explorer的性能很差。如果它没有出现性能问题,那么将@import放在使用字体的同一个CSS文件中会有额外的灵活性,但为了获得最佳性能,请使用&#39;链接&#39;基本HTML文件中的标记。