迹忆客 专注技术分享

在本篇文章中，我们将学习一些在 CSS 中导入 Google 字体的方法。

在 CSS 中使用 @import 规则导入 Google 字体

CSS @import 规则用于在样式表中导入另一个样式表。我们可以在 url() 函数中将样式表指定为字符串。

我们还可以使用 @import 规则在 CSS 中导入外部字体。例如，我们可以在 url() 函数中使用 Google 字体，并使用 font-family 属性设置字体。

Google Fonts 有多种字体可供我们选择。我们可以从网站上获取字体的 URL。

例如，转到 Google Fonts 网站并选择 Roboto 字体。然后，单击右侧边栏中的@import 单选按钮。

接下来，复制 style 标签之间的 URL。类似地，在 HTML 中，创建 h1 和 p 标签。

在 CSS 中，在样式表的顶部编写 @import 规则并将 Roboto 字体 URL 粘贴到 url() 函数中。选择字体 Outfit 并获取 URL。

接下来，选择 h1 标签并使用 font-family 属性设置字体 Outfit。同样，在段落中设置字体 Roboto。

这样，我们就可以在样式表中导入 google 字体。

但是，不鼓励使用 @import 规则导入 Google 字体。这是因为除非获取文件，否则字体不会显示在网页上。

示例代码：

<h1> Title </h1>
<p>This is Roboto font.</p>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');

h1 {
 font-family: 'Outfit', sans-serif;
}

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

在 CSS 中使用 link 标签导入 Google 字体

link 标签是在 HTML 中导入 Google 字体的最合适的方式。鼓励使用 link 标签，因为它预加载了字体。

我们可以在 link 标签的 href 属性中指定字体 URL。我们可以从 Google Fonts 网站生成所有 link 标签。

例如，转到 Google Fonts 网站并选择 Comforter Brush 字体。选择 link 单选按钮并复制生成的 link 标签。

然后，将标签粘贴到 HTML 中并创建一个 p 标签并在其中写入一些文本。接下来，在 CSS 中选择 p 标记并将 font-family 属性设置为 Comforter Brush。

我们在前两个 link 标签中使用了 preconnect 作为 rel 属性。它让浏览器知道用户需要 href 属性中的资源，以便浏览器可以发起对资源的抢占式连接。

这样，我们就可以使用 link 标签在 CSS 中导入 Google 字体。

示例代码：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comforter+Brush&display=swap" rel="stylesheet"> 

<p>Comforter Brush font.</p>

p {
 font-family: 'Comforter Brush', cursive;
}