【问题标题】: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 文件中。