<head> 中的 Google 字体或带有 @import 的 CSS 中的 Google 字体？

Posted 2023-03-15

技术标签:

【中文标题】<head> 中的 Google 字体或带有 @import 的 CSS 中的 Google 字体？【英文标题】：Google Fonts in <head> or in CSS with @import? 【发布时间】：2015-07-07 21:55:43 【问题描述】：

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

通常我将<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 年前的讨论。找不到解决此问题的当前答案。

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

【问题讨论】：

是的，如果您在 CSS 文件中包含 @import，则可以从使用该 CSS 文件的任何页面访问该字体。是的，你可以，这里有一个帖子供你参考：***.com/questions/14676613/… 所以不会有任何资源加载问题？找不到最近的答案——一切似乎都是 2 到 3 年前人们说有的时候。喜欢这个：***.com/questions/12316501/… 你可以捆绑你的css，所以只有一个请求：love2dev.com/#!article/… 【参考方案1】：

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

【讨论】：

【参考方案2】：

如果您在 CSS 中使用@import 规则，浏览器将无法并行下载引用的脚本，因为在进行任何下载之前必须解析承载脚本！

示例 #1

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

示例 #2

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

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

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

【讨论】：

再次 - 该问题/答案是 3 年前。现在还有问题吗？ @chris，我已经更新了答案，我希望它表明这仍然是相关的:)。感谢您付出额外的努力并提供重要信息 - 非常感谢。