正在加载...

CSS 网页字体

你已经会用 font-family、字号和字重。网页字体加载访客设备上未必自带的字形 —— 用 @font-face 声明，再像其他字体一样使用字族名，并平静地以后备收尾。

@font-face 的组成部分

📊 一眼看清 @font-face

部分 日常用途
font-family 你起的名字，随后在 CSS 中使用
src 字体文件位置（url(...)，常带 format(...)）
font-weight / font-style 该文件代表哪种字形（regular、bold、italic…）
font-display 字体加载时文字如何表现（例如 swap）

想成两步就够：用 @font-face 注册字形，再在普通规则里 调用同一个字族名。漏掉任一步，栈就永远找不到自定义文件。

最小 @font-face

给字形起清晰名称，把 src 指向站点（或 CDN）上的字体文件。

基础 @font-face

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}

提供多种格式

现代浏览器优先 woff2。其后列出 woff 可覆盖较旧浏览器。最好的格式写在最前。

先 woff2 后 woff

css
CSS Code 
@font-face {
font-family: "Site Sans";
src:
url("/fonts/site-sans.woff2") format("woff2"),
url("/fonts/site-sans.woff") format("woff");
font-weight: 400;
font-style: normal;
}

font-display — 更早显示文字

font-display: swap 让浏览器先显示后备文字，字体到达后再替换 —— 往往好过长时间看不见文字。

Display swap

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}

使用你声明的字族

@font-face 之后，在规则里调用相同的 font-family 名称 —— 并保留通用后备。

应用自定义字族

css
CSS Code 
body {
font-family: "Site Sans", system-ui, "Segoe UI", sans-serif;
font-size: 1rem;
line-height: 1.6;
}

平静的自托管习惯

只托管需要的字重，优先 woff2，设置 font-display，并始终保留系统/通用栈。

使用已加载粗体的标题

css
CSS Code 
@font-face {
font-family: "Site Sans";
src: url("/fonts/site-sans-bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}

h1 {
font-family: "Site Sans", Georgia, serif;
font-weight: 700;
}

自己动手

  1. 写一个带自定义 font-family 名称和 woff2 src 的 @font-face 块。
  2. 为 woff 增加第二行 src。
  3. 设置 font-display: swap。
  4. 在 body 上应用 "Your Name", sans-serif。
  5. 若有粗体文件，为字重 700 另加一个 @font-face —— 再在标题上用 font-weight: 700。

常见错误

  • 声明了 @font-face 却从不在 font-family 里用那个确切名称
  • 省略后备栈（文件失败时版面会坏）
  • 加载大量未使用的字重与样式（页面变慢）
  • 没有 font-display 策略却让文字长时间不可见
  • 把本课与 text-shadow / 效果混在一起（下一课才讲）

小结

  • @font-face 注册自定义字族名并指向字体文件
  • 优先 woff2，可选再备 woff
  • font-display: swap 常在加载时保持文字可读
  • 在 CSS 中用同一字族名并带系统/通用后备
  • 只加载需要的字形；text-shadow 等效果是后续课程

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 28 的 35
Css 教程