@font-face是定义字体的唯一可靠方式，路径须相对于CSS文件、需设font-display:swap、多字重须分别声明、font-family名称须严格一致，本地调试须用服务器避免CORS。
@font-face 是唯一可靠的方式，直接在 CSS 文件里定义字体来源。用 <link> 引 Google Fonts 本质也是加载含 @font-face 的 CSS，但控制力更弱。
路径写错是 404 的最常见原因
字体文件路径永远相对于 CSS 文件位置，不是 HTML 文件。比如：css/style.css 里写 src: url('fonts/Inter.woff2')，那字体必须放在 css/fonts/Inter.woff2；若误写成 ../fonts/Inter.woff2 或 /fonts/Inter.woff2，浏览器大概率报 Failed to load resource: the server responded with a status of 404 ()。
- 建议把字体统一放在 CSS 文件同级或子目录（如
css/fonts/），避免路径跳转出错 - 开发时用浏览器 DevTools 的 Network 面板看请求 URL，确认实际发出的路径是否符合预期
-
file://协议下字体必然被 CORS 阻止，本地调试必须起一个简易服务器（如npx serve或 VS Code Live Server）
@font-face 必须加 font-display: swap
不加的话，现代浏览器默认会等待字体加载完成才渲染文字（FOIT），造成页面长时间空白或布局抖动。加上 font-display: swap 后，浏览器先用系统字体撑开内容，等自定义字体就绪再无感替换。
- 只支持
swap、fallback、optional等值，auto行为不可控，别用 - 多个字重需分别声明：粗体要用单独的
@font-face块，并配font-weight: 700，不能靠浏览器“猜” - 中文字体体积大，务必做子集化（如只保留中文常用字+ASCII），否则首屏加载延迟明显
<link> 引 Google Fonts 时 rel="stylesheet" 不可省略
Google Fonts 提供的链接本质是返回一段含 @font-face 的 CSS 内容，如果漏掉 rel="stylesheet"，浏览器不会解析它，字体完全不会注册进系统。
- 错误写法：
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap">（缺rel） - 正确写法：
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter&display=swap"> -
display=swap参数必须显式带上，否则服务端返回的 CSS 不含font-display: swap - 自托管字体比 CDN 更可控，尤其涉及合规、离线或定制子集时
font-family 名称拼写和引用必须逐字一致
你在 @font-face 里写的 font-family: 'MyFont'，后续所有 font-family 声明都得严格匹配——包括引号、空格、大小写。浏览器不会自动纠错。
立即学习“前端免费学习笔记（深入）”；
- 推荐全用英文小写加连字符，比如
font-family: 'inter-var'，避免引号内带空格或特殊符号引发解析歧义 - 不要依赖字体文件名，比如
SourceHanSansCN-Regular.otf里的 “CN” 不代表你font-family就该叫'Source Han Sans CN'，按你@font-face中定义的为准 - 检查是否被更高优先级 CSS 覆盖：比如某个组件 class 设置了
font-family: system-ui，且权重高于你的全局规则，字体照样不生效
font-display 缺失导致的“字体存在但看不见”。调试时先打开 Network 面板盯住字体请求状态，再查 Elements 面板里 computed font-family 是否如预期，比反复改 CSS 更快。 
