CSS Google Fonts

Begindev 编辑部 March 25, 2026

使用 Web 字体（Web Fonts）可以创建视觉上吸引人且符合品牌调性的网站。虽然浏览器自带一些默认字体，但它们非常有限，往往会让网站看起来千篇一律。

Google Fonts 提供了一个庞大的免费开源字体库，可以轻松集成到你的项目中，极大地扩展了你的设计可能性并提升整体用户体验。

本章将指导你如何将 Google Fonts 引入到你的 CSS 中，从而提升文本样式，打造更具吸引力的网页。

1. 理解 Google Fonts

Google Fonts 是一个免费服务，提供大量开源字体集合。你无需下载这些字体文件并将其托管在自己的服务器上，Google 会负责托管和分发，确保在不同浏览器和设备上具有快速的加载时间和兼容性。

1.1 使用 Google Fonts 的好处

低成本 (Accessibility)：Google Fonts 是免费的，降低了设计师和开发者的成本门槛。
多样性 (Variety)：该库提供广泛的字体风格、粗细和字符集，允许进行多样化的设计选择。
性能 (Performance)：Google 的基础设施确保字体高效交付，最大限度地减少对网站加载时间的影响。
跨浏览器兼容性：Google Fonts 旨在不同浏览器和操作系统之间无缝工作。
易于集成：将 Google Fonts 添加到网站是一个简单的过程，只需极少的代码。

2. 选择合适的字体

选择正确的字体对于传达预期的信息和创建连贯的设计至关重要。在选择字体时，请考虑以下因素：

易读性 (Readability)：优先选择易于阅读的字体，特别是对于正文文本。
清晰度 (Legibility)：确保单个字符清晰可辨。
目的 (Purpose)：选择符合网站目的和基调的字体。俏皮的字体可能适合儿童网站，而更正式的字体可能适合商业网站。
字体搭配 (Font Pairing)：考虑不同字体如何协同工作。将衬线字体 (Serif) 与无衬线字体 (Sans-serif) 搭配使用可以创造视觉趣味和层次感。
粗细和样式：尝试不同的字体粗细（如常规、粗体）和样式（如斜体）来增加强调并创建视觉层次。

3. 将 Google Fonts 添加到你的网站

主要有两种方法可以将 Google Fonts 添加到你的网站：使用 HTML 中的 <link> 标签或使用 CSS 中的 @import 规则。

3.1 方法 1：使用 `<link>` 标签 (推荐)

这是添加 Google Fonts 最推荐和最常用的方法，因为它允许浏览器并行下载字体文件，通常性能更好。

选择字体：访问 Google Fonts 网站 (https://fonts.google.com/)。浏览或搜索你想要使用的字体。
选择样式：点击你选择的字体。通过点击每个样式旁边的 "+ Select this style" 按钮来选择你需要的样式（粗细和斜体）。屏幕右侧会出现一个侧边栏，显示你已选的样式。
复制代码：在侧边栏的 "Use on the web" 下，选择 <link> 选项。复制提供的 <link> 标签代码。
粘贴到 HTML：将 <link> 标签粘贴到 HTML 文档的 <head> 部分。确保将它们放在你自己的 CSS 样式表链接之前。

HTML 示例：

<!DOCTYPE html>
<html>
<head>
  <title>现代教程</title>
  <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=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css"> </head>
<body>
  <h1>欢迎来到现代教程网</h1>
  <p>这是一些使用 Roboto 字体的文本。</p>
</body>
</html>

在这个例子中：选择了 Roboto 字体，包含 400 (常规) 和 700 (粗体) 两种粗细。

3.2 方法 2：使用 `@import` 规则

这种方法允许你直接将字体导入到 CSS 文件中。

选择字体：遵循 <link> 方法中的步骤 1 和 2。
复制代码：在侧边栏的 "Use on the web" 下，选择 @import 选项。复制提供的 @import 规则。
粘贴到 CSS：将 @import 规则粘贴到 CSS 文件的最顶部。

CSS 示例：

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

body {
  font-family: 'Roboto', sans-serif;
}
h1 {
  font-weight: 700;
}

注意：虽然 @import 方法很方便，但在某些情况下（尤其是旧浏览器或网络较差时）可能会稍微影响性能，因为它可能会延迟 CSS 文件的解析。通常首选 <link> 方法。

4. 在 CSS 中应用 Google Fonts

一旦将 Google Font 添加到网站，你就可以使用 CSS 中的 font-family 属性将其应用到特定元素。

body {
  font-family: 'Roboto', sans-serif;
}
h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700; /* 使用粗体 */
}
p {
  font-family: 'Lato', sans-serif;
  font-style: italic;
}

font-family 属性中的第一个值是 Google Fonts 指定的字体名称。
第二个值（如 sans-serif）是后备字体 (Fallback Font)。

4.1 使用字体粗细和样式

Google Fonts 通常有多种粗细（例如 100, 300, 400, 700, 900）。要使用这些变体，你必须在 Google Fonts 网站上显式选择它们。

例如，如果你只选择了 Roboto 的 400 粗细，即使你在 CSS 中写了 font-weight: 700，浏览器也只能尝试“伪造”一个粗体效果（这通常看起来很丑），或者回退到默认字体。

正确做法：

在 Google Fonts 链接中包含 wght@400;700。
在 CSS 中应用：

h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700; /* 对应引入的 Bold 700 */
}

4.2 后备字体 (Fallback Fonts)

在 font-family 属性中指定后备字体至关重要。这确保了即使 Google Font 加载失败，你的文本仍然可读。选择与你的 Google Font 风格相似的通用字体族：

serif: Times New Roman, Georgia
sans-serif: Arial, Helvetica
monospace: Courier New

5. 优化 Google Fonts 性能

虽然 Google Fonts 性能很好，但你可以采取一些措施进一步优化：

限制字体数量：使用过多的字体会增加 HTTP 请求数量并减慢网站速度。建议每个项目最多使用 2-3 种字体。
只选择必要的样式：只勾选你实际需要的粗细和样式。不要把 Thin 100 到 Black 900 全选了，这会显著增加文件大小。
使用 font-display 属性：Google Fonts 的嵌入代码现在默认包含 &display=swap。这指示浏览器使用 font-display: swap 策略：

auto：使用浏览器默认策略。
block：在字体加载完成前，文本是隐藏的。
swap：（推荐）先显示后备字体，字体加载完成后再进行替换。通常这是性能和用户体验的最佳选择。
fallback：类似 swap，但浏览器等待加载的时间更短。
optional：浏览器根据当前网络状况决定是否加载该字体。

如何使用：在请求 URL 的末尾添加 &display=swap 参数。

HTML 方式：

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

CSS @import 方式：

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