应用错误收集

使用@import在CSS中或CSS中的Google字体？

时间：2015-04-28 20:55:23

标签： html css fonts google-font-api

（我在这里有点新意，所以如果这不是问的地方，请告诉我）

通常我会将<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,400italic,700' rel='stylesheet' type='text/css'>添加到我页面的<head>中。有几页，总是有可能出现不一致/错误，加上每页更新都会让人头痛。

我可以在主CSS文件的第一行使用@import url(http://fonts.googleapis.com/css?family=Open+Sans);吗？

此优点是更新一个CSS文件，而不是更新<head>中的每个页面。但是我已经阅读了一些答案，说可能存在资源加载问题......但是这个讨论是在3年前进行的。无法找到解决此问题的当前答案。

EDIT
为了避免SO认为这是重复的，我问的是2015年哪种方法更好。我不会问如何在任何一种方法下将Google字体添加到网站。

2 个答案:

答案 0 :(得分：2)

如果你在CSS中使用@import规则，浏览器不能并行下载引用的脚本，只是因为在进行任何下载之前必须解析携带脚本！

示例＃1

style1.css和style2.css使用<link>标记加载：

Example #1

示例＃2

style1.css使用<link>标记加载，style2.css使用@import规则加载：

Example #2

要启用并行下载，请改用<link> html标记。

或者，您可以在不使用@import规则的情况下内联CSS;样式表预处理器可以帮助您（例如Sass）。您可以尝试使用Node.js任务运行器（gulp，grunt）来自动执行此类任务。

答案 1 :(得分：-1)

在css中导入是可以的，几年前在IE6这样的软件中出现了问题（只有一个文件被加载进行多次导入），但正如你所说这是史前的，无论如何，如果你想这样做真的很好考虑使用一些加载器，如提到here，但只要您的网页将在线加入，导入即可。