自定义字体路径应相对于CSS文件而非HTML；@font-face需优先woff2、加font-display:swap；Google Fonts的必须含rel="stylesheet"且display=swap；font-family名称须逐字匹配；file://协议下字体因CORS被阻，需本地服务器或改用CDN。
用 @font-face 引入自定义字体时，src 路径写错最常见
本地字体文件（如 fonts/Roboto-Regular.woff2）的路径是相对于 CSS 文件位置计算的，不是 HTML 文件。很多人把路径写成相对于 HTML 的，结果浏览器 404 报错：Failed to load resource: the server responded with a status of 404 ()。
实操建议：
- 把字体文件放在和 CSS 文件同级或子目录下，比如
css/style.css和css/fonts/xxx.woff2 -
src中优先写woff2（体积小、兼容现代浏览器），再 fallback 到woff或truetype - 务必加
font-display: swap，避免文字长时间空白（FOIT）
示例：
@font-face {
font-family: 'MyFont';
src: url('fonts/MyFont.woff2') format('woff2'),
url('fonts/MyFont.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
rel="stylesheet" 不可省略
Google Fonts 提供的 标签本质是加载一个 CSS 文件，里面已经写了 @font-face 规则。如果漏掉 rel="stylesheet"，浏览器不会当作样式表解析，字体不会生效。
立即学习“前端免费学习笔记（深入）”；
常见错误写法：（缺 rel）
正确写法：
注意点：
-
display=swap必须显式加上，否则默认是auto，可能触发 FOIT - 多个字重用
wght@400;500;600合并在一个请求里，别分开写多条 - 不要在 CSS 里再重复写
@font-face去覆盖它，容易冲突
字体没生效？检查 font-family 名称是否完全匹配
声明时用的 font-family 值，必须和 @font-face 里的 font-family 字符串**逐字一致**（包括空格、连字符、大小写）。浏览器不自动标准化名称。
比如：
-
@font-face { font-family: 'IBM Plex Sans'; ... }→ 使用时必须写font-family: 'IBM Plex Sans'; - 不能简写成
font-family: IBM;或font-family: 'ibm plex sans'; - Google Fonts 返回的 CSS 里实际定义的是带引号的完整名，可在 DevTools 的 Fonts 面板里确认
调试技巧：打开 Chrome DevTools → Elements → 计算样式（Computed）→ 找 font-family，看最终解析值；再点 Fonts 面板，看哪些字体被加载、是否“failed”或“blocked”。
字体跨域问题：本地开发时 file:// 协议会拒绝加载字体
直接双击 HTML 打开（地址栏是 file:///xxx/index.html）时，浏览器出于安全限制，会拒绝加载 @font-face 中的本地字体文件，控制台报错：Access to font at 'xxx.woff2' from origin 'null' has been blocked by CORS policy.
这不是代码写错了，而是协议限制。解决方式只有两个：
- 用本地服务器启动，比如
npx serve、python3 -m http.server或 VS Code Live Server 插件 - 换成
引 Google Fonts（它本身支持跨域）
这个坑特别容易在开发初期忽略——代码全对，但就是不显示字体，直到换上服务器才突然正常。
