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

Posted 2023-03-15

【中文标题】如何在 CSS 文件中调用 Google API 字体？ [复制]

【英文标题】：How do I call Google APIs fonts in CSS file? [duplicate]

【发布时间】：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>。

【参考方案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";

<h1>Font Face</h1>

【参考方案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。