CSS Academy · 课时

Google Fonts 与 @font-face

Q: 「Google Fonts 与 @font-face」这节课中我会学到什么？

从 Google Fonts 加载外部字体，或使用 @font-face 规则定义自定义字体。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

从 Google Fonts 加载外部字体，或使用 @font-face 规则定义自定义字体。

第 4 / 4 课13 个步骤

Google Fonts 与 @font-face 是 CoddyKit 上的免费 CSS Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

为什么使用自定义字体

网页安全字体只有少数几种选择。自定义字体可以精准匹配品牌形象。主要有两种方式：Google Fonts（托管服务）和 @font-face（自行托管）。

Google Fonts 设置

访问 fonts.google.com，选择字体系列和字重，然后将 <link> 标签复制到 HTML 的 <head> 中：

<p>Add these tags to your document's <code>&lt;head&gt;</code>:</p>
<pre><code>&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"&gt;</code></pre>

在 CSS 中使用 Google Fonts

添加链接后，在 font-family 字体栈中通过名称引用该字体：

<h1>Playfair Display Heading</h1>
<p>Roboto body text below the heading.</p>

Google Fonts API 参数

display=swap 参数使用字体显示交换策略：文本会立即使用回退字体显示，等自定义字体加载完成后再切换。这样可以避免加载期间文本不可见。

@font-face 基础

@font-face 允许您加载自行托管的自定义字体文件。请定义字体系列名称和文件来源：

<p class="brand-text">Custom brand typeface text</p>

WOFF2：现代格式

WOFF2（Web 开放字体格式 2）是推荐使用的格式。它具有最佳的压缩效果（通常比 WOFF 小 30%），并且受到所有现代浏览器的支持。请始终加入 WOFF 作为回退格式。

使用 @font-face 设置多个字重

为每种字重和样式组合声明一个 @font-face 代码块。使用相同的 font-family 名称，以便浏览器自动选择正确的文件：

<p>Regular weight 400 text with <strong>bold weight 700 text</strong> inline.</p>

font-display 属性

font-display 描述符控制字体加载行为：

swap — 立即显示回退字体，准备就绪后切换（推荐）
block — 文本最多隐藏 3 秒
fallback — 短暂隐藏，然后永久使用回退字体
optional — 仅在字体已缓存时使用

<p class="swap-text">Text swaps in once Inter loads.</p>

可变字体 @font-face

可变字体定义的是轴的取值范围，而不是固定的字重值：

<p class="variable-text">Variable weight text (550)</p>

预加载关键字体

预加载最重要的字体文件，以减少阻塞渲染的延迟。请在样式表之前添加 <link rel="preload">：

<p>Add this to your document's <code>&lt;head&gt;</code> to preload the font file:</p>
<pre><code>&lt;link rel="preload" href="./fonts/inter.woff2" as="font" type="font/woff2" crossorigin&gt;</code></pre>

使用 local() 跳过下载

在 src 中使用 local()，在下载之前检查用户是否已经安装该字体：

<p class="roboto-text">Uses local Roboto if installed</p>

快速检查

哪种字体格式具有最佳的压缩效果，并且获得最广泛的现代浏览器支持？

在交互式课程中回答

回顾

Google Fonts 通过 <link> 标签提供易于使用的托管字体。使用 WOFF2 格式的 @font-face 自行托管字体，并设置 font-display: swap 以获得最佳性能。预加载关键字体，并使用 local() 避免不必要的下载。

免费开始

用 AI 导师学习 CSS — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 40
课程: 159

免费开始学习查看完整课程

常见问题解答

「Google Fonts 与 @font-face」课时是免费的吗？

是的 — 「Google Fonts 与 @font-face」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「Google Fonts 与 @font-face」这节课中我会学到什么？

从 Google Fonts 加载外部字体，或使用 @font-face 规则定义自定义字体。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「Google Fonts 与 @font-face」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy