@font-face 怎么用:下载字体并生成自托管 CSS

@font-face 是 CSS 中声明自定义字体的规则：你告诉浏览器字体叫什么名字、文件在哪里、对应哪个字重和字形，之后在样式里用 font-family 引用这个名字即可。适合需要自托管 Google Fonts、避免依赖第三方字体 CDN 的站点。基本流程是：用 Google Webfonts Helper 选字体并下载文件与 CSS 片段，把文件放进项目目录，修正 CSS 中的路径，再在页面样式中引用并验证。

@font-face 的关键描述符

一条 @font-face 规则至少需要 font-family 和 src，其余描述符决定浏览器在什么情况下选用这个文件。

src 中多个来源按顺序尝试，浏览器选第一个支持的格式。现代浏览器普遍支持 woff2，woff 作为旧浏览器回退即可，eot、ttf、svg 主要服务于很老的浏览器，按目标用户决定是否保留。

用 Google Webfonts Helper 下载字体和 CSS

Google Webfonts Helper（gwfh.mranftl.com）的用途是把 Google Fonts 转为自托管资源：选择字体后，它提供 eot、ttf、svg、woff、woff2 文件和对应的 CSS 片段，可打包为 zip 下载。

具体步骤：

1. 在站点中搜索并选中需要的字体家族。
2. 勾选需要的字重和字符集（如 latin）。字符集选得越多，文件越大。
3. 选择浏览器支持范围，决定生成哪些格式。
4. 复制生成的 @font-face CSS 片段，并下载字体文件压缩包。
5. 解压后把字体文件放入项目目录，例如 assets/fonts/。

预期结果是：你得到一个包含字体文件的目录，以及一段每个字重一条的 @font-face 代码。

修正路径并在页面中引用

生成的 CSS 片段里，src 的路径通常指向下载包内的相对位置，需要改成你项目中的实际路径。假设字体文件放在 assets/fonts/，CSS 文件在 assets/css/，则相对路径要写成 ../fonts/文件名.woff2。

@font-face {
  font-family: "MyFont";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/myfont-400.woff2") format("woff2"),
       url("../fonts/myfont-400.woff") format("woff");
}

然后在页面样式中引用：

body {
  font-family: "MyFont", system-ui, sans-serif;
}

font-family 后面的回退字体在自定义字体加载完成前或加载失败时生效，不要省略。

验证是否生效

• 打开浏览器开发者工具的 Network 面板，刷新页面，确认字体文件请求返回 200，而不是 404。
• 在 Elements 面板选中文字，查看 Computed 样式里的 font-family 是否为你声明的名字。
• 临时把回退字体改成差异明显的字体（如 serif），对比文字外观是否变化，判断自定义字体是否真正应用。

常见失败与排查

路径错误导致 404。 最常见的问题。CSS 中的相对路径是相对于 CSS 文件本身，而不是 HTML 页面。检查 Network 面板中请求的 URL 是否指向正确位置。

字重不匹配。 只声明了 font-weight: 400，却在样式里用 font-weight: 700，浏览器会合成加粗或回退到其他字体。需要为每个用到的字重单独声明一条 @font-face，或使用可变字体并在 font-weight 中写范围。

格式不被支持。 只提供 woff2 时，极老的浏览器无法加载。若目标用户包含旧环境，保留 woff 回退。

跨域问题。 字体文件与页面不同源时，服务器需要返回允许跨域的响应头，否则浏览器会拒绝加载字体。自托管到同域目录通常不会遇到这个问题。

字符缺失。 下载时只勾选了部分字符集，页面中出现该字符集之外的文字会显示为回退字体。按内容语言选择足够覆盖的字符集。