如何在 CSS 文件中调用 Google API 字体？ [复制]答案

【问题标题】：How do I call Google APIs fonts in CSS file? [duplicate]如何在 CSS 文件中调用 Google API 字体？ [复制]
【发布时间】：2018-03-03 20:58:25
【问题描述】：

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">

如何在 CSS 文件中调用上述 Google 字体系列链接？

【问题讨论】：

所有你需要做的就是谷歌它。在提出任何问题之前，您应该体面地（重新）search，尝试解决问题，说明您研究的内容以及为什么它在您的情况下不起作用。此外，谷歌字体还为您提供@import 替代<link>。

标签： css fonts

【解决方案1】：

您可以从 Google 字体列表中选择字体。选择您想要的字体后，您可以按页面底部的“(x) family selected”面板。有像@import 这样的好例子。

导入必须始终是 CSS 文件的第一件事，否则它不起作用。

【讨论】：

【解决方案2】：

在您的 css 文件中使用 @import。

更好将链接放在您的 html 头部，@import 按顺序加载，最好避免

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');
body, html{
  font-family: "Montserrat";
}

&lt;h1&gt;Font Face&lt;/h1&gt;

【讨论】：

【解决方案3】：

使用@import 在您的 CSS 中包含 Google 字体样式表。确保将 @import 语句放在 CSS 文件的最顶部，在任何其他规则之前。

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');

#p{
  font-family: 'Montserrat', sans-serif;
}

<p id="p">Montserrat font.</p>
<p>Default font.</p>

【讨论】：

【解决方案4】：

你必须使用@import：

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');

【讨论】：

【解决方案5】：

将此代码放在 CSS 的顶部：

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');

这是JSFiddle demo。

【讨论】：