包括谷歌Web字体链接或导入？

将Google Web字体添加到页面的首选方式是什么？

1. 通过链接标签？

     <link href ='http：//fonts.googleapis.com/css？family = Judson：400,400italic，700'rel ='stylesheet'type ='text / css'> 

2. 通过在样式表中导入？

     @import url（http://fonts.googleapis.com/css?family=Kameron:400,700）; 

3. 或使用Web字体加载器

   https://developers.google.com/webfonts/docs/webfont_loader

Answer 1

对于90％以上的情况，您可能需要<link>标记。 作为一个经验法则，你想要避免@import规则，因为它们推迟了被包含的资源的加载，直到文件被提取。如果你有一个构build过程“扁平化”@的导入，那么你创build另一个问题网页字体：像Google WebFonts这样的dynamic提供程序可以为特定于平台的字体版本提供服务，因此，如果只是内联内联，那么最终会在某些平台上出现破损的字体。

现在，你为什么要使用Web字体加载器？ 如果您需要完全控制字体的加载方式。 大多数浏览器将推迟到屏幕上绘制内容，直到所有的CSS下载和应用 – 这避免了“无风格内容的闪光”的问题。 缺点是..你可能有一个额外的暂停和延迟，直到内容可见。 使用JS加载器，您可以定义字体的显示方式和时间。例如，您甚至可以在屏幕上显示原始内容之后将其淡入。

再次，90％的情况是<link>标签：使用一个好的CDN，字体会快速下降，甚至更可能被提供出caching。

欲了解更多信息，并深入了解谷歌Web字体，请看这个GDLvideo： https : //www.youtube.com/watch?v=sqesm0euf9M