0Pricing
CSS Academy · 课时

字体系列与 Web 安全字体

设置字体系列，并了解哪些字体可以安全地在所有浏览器中使用。

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

font-family 属性

font-family 属性设置元素的字体。您需要提供一个字体堆栈：按首选程度从高到低排列、以逗号分隔的字体名称列表，并以通用字体系列结尾。

<p>This text renders in the page's body font stack.</p>

通用字体系列

CSS 定义了五种通用字体系列作为备用方案：

  • serif — 带装饰性笔画的字体（Times、Georgia）
  • sans-serif — 不带笔画的简洁字体（Arial、Helvetica）
  • monospace — 等宽字体（Courier、Consolas）
  • cursive — 手写风格字体
  • fantasy — 装饰性展示字体

网页安全字体

网页安全字体几乎预装在所有操作系统中。您可以直接使用它们，而无需加载外部字体文件：

  • 无衬线字体：Arial、Helvetica、Verdana、Trebuchet MS
  • 衬线字体：Georgia、Times New Roman
  • 等宽字体：Courier New、Consolas

包含空格的字体名称

包含空格的字体名称必须用引号括起来：

<p class="serif-example">"Times New Roman", Times, serif</p>
<p class="sans-example">"Open Sans", sans-serif</p>

字体堆栈最佳实践

构建字体堆栈时，请依次包括：

  1. 您首选的字体（可能未安装）
  2. 一到两个相似的备用字体
  3. 作为最后方案的通用字体系列
<p class="font-stack">Georgia &rarr; Palatino Linotype &rarr; serif fallback</p>

系统界面字体

现代设计通常使用系统字体——操作系统的原生界面字体。这种字体具有原生外观，并且完全无需下载：

<p class="system-ui-text">This uses your OS's native UI font.</p>

代码的等宽字体堆栈

代码编辑器和终端需要使用等宽字体堆栈：

<p>Inline <code>const x = 1;</code> code.</p>
<pre>function hello() {
  return "world";
}</pre>

继承 font-family

大多数元素会从父元素继承 font-family。在某些浏览器中，部分表单元素（<input>、<textarea>）默认不会继承字体，因此请显式设置：

<input type="text" placeholder="Input" />
<textarea placeholder="Textarea"></textarea>
<select><option>Select</option></select>
<button>Button</button>

检查可用字体

您可以在 @font-face 中使用 local() 函数检查系统字体是否可用。浏览器会先尝试使用本地字体，然后再下载。

<p class="my-font-text">Text using MyFont (local match or fallback)</p>

Unicode 范围子集化

加载字体时，请在 @font-face 中使用 unicode-range，只加载所需的字符范围，从而减少多语言网站的下载大小。

<p class="inter-text">Basic Latin text (U+0000&ndash;00FF range)</p>

可变字体概览

可变字体通过字体变体轴，在单个文件中包含整个字体系列（字重、宽度和样式）。对于排版内容丰富的设计，它们可以大幅减少 HTTP 请求数量。

快速检查

对于 sans-serif 字体堆栈，最后应使用哪种通用字体系列作为备用方案？

回顾

font-family 属性接受一个以通用字体系列结尾的字体堆栈。网页安全字体无需加载即可在各种环境中使用。系统界面字体堆栈无需产生 HTTP 开销，就能带来原生体验。包含空格的字体名称必须始终加引号。

常见问题解答

「字体系列与 Web 安全字体」课时是免费的吗？

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

「字体系列与 Web 安全字体」这节课中我会学到什么？

设置字体系列，并了解哪些字体可以安全地在所有浏览器中使用。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

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

「字体系列与 Web 安全字体」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 字体系列与 Web 安全字体
  2. 字体大小、粗细与样式
  3. 文本对齐、装饰与间距
  4. Google Fonts 与 @font-face
← 返回 CSS Academy