如何在 CSS 中使用 Google 字体？

为网页选择合适的字体是任何网页设计的重要方面。使用 Google 字体的好处在于，我们可以为网站获得优雅的字体。Google Fonts API 使每个人都能更轻松、更快速地使用网络字体。这些字体已在各种浏览器配置上进行了测试。

无需进行任何编程，只需将一个特殊的样式表链接添加到我们的 HTML 文档中，然后在 CSS 样式中引用您选择的字体系列即可。

要开始使用 Google 字体 API，有两个步骤，如下所示：

• 首先，我们需要添加一个样式表链接来请求所需的网络字体。

• 然后，我们可以在样式表或内联样式中，用所需的网络字体来设置元素的样式。

需要注意的是，在 CSS 样式中指定网络字体时，我们应始终至少指定一种备用安全字体（web-safe font），以避免出现意外行为。我们可以将通用字体名称（如 **sans-serif** 或 **serif**）添加到列表末尾，以便在需要时 浏览器 会将其用作默认字体。

使用 @import

我们可以从网络字体服务（如 Google Fonts）导入字体系列。这需要放在 <style> 标签中。

如何在样式表 URL 中指定样式和字体系列

要查看字体列表，请点击以下链接：

我们需要从 Google Fonts API 开始，构建 URL，以确定在样式表链接中使用的 URL。

然后，我们需要添加 **family=** URL 参数，其中包含一个或多个字体系列名称和样式。

例如，如果我们想请求 Roboto 字体，则可以这样做：

注意：如果字体系列名称中有空格，请用加号 (+) 替换。

假设我们要请求 **Open Sans;** 字体，则可以这样写：

如果要请求多个字体系列，名称之间应使用管道符 (|) 分隔。例如：

让我们通过一些例子来理解在 CSS 中使用 Google 字体。

示例

输出

示例 - 使用 @import 规则

输出

示例

在此示例中，我们使用的是字体系列名称 **Chelsea Market**，其中有空格，因此我们用 **加号 (+)** 替换了空格。

输出

示例

在此示例中，我们使用的是多个字体系列名称，它们之间用管道符 (|) 分隔。

输出