必须用@font-face规则声明本地字体，不能用link或@import；路径须相对于css文件，推荐woff2格式并加font-display:swap。
用 @font-face 声明本地字体，不是 link 或 import
浏览器不支持直接通过 <link rel="stylesheet"> 或 CSS @import 加载本地字体文件。必须用 CSS 的 @font-face 规则显式声明字体来源，否则字体不会被解析和应用。
常见错误是把字体当成普通 CSS 文件引入，结果样式里写了 font-family: "MyFont" 却完全没生效——根本原因是字体资源压根没注册进浏览器的字体表。
-
@font-face必须写在 CSS 中（可以是<style></style>块内，或外部 CSS 文件），不能只靠 HTML 标签 - 字体文件路径是相对于 CSS 文件的位置，不是相对于
index.html——这点极易出错 - 推荐优先使用
woff2格式（压缩率高、现代浏览器全支持），备选woff
src 里的路径怎么写才不会 404？
路径写错是 404 的最常见原因。假设你的项目结构是：
project/
├── index.html
├── css/
│ └── style.css
└── fonts/
└── Inter-Regular.woff2
那么在 css/style.css 里写 src: url("../fonts/Inter-Regular.woff2") 才对；如果写成 url("fonts/Inter-Regular.woff2")，浏览器会去 css/fonts/ 下找，自然 404。
- 绝对路径（如
url("/fonts/Inter-Regular.woff2")）可避免相对路径混乱，但要求服务器根目录下真有/fonts/ - 开发时用 VS Code 插件（如 “Paste JSON as Code” 或路径自动补全）能减少手误
- Chrome DevTools 的 Network 面板里搜
.woff2，一眼看出是否加载成功或返回 404
为什么字体加载了却没渲染？检查 font-family 和 font-weight
字体文件加载成功 ≠ 自动替换页面文字。你得在 CSS 里明确指定使用它，且匹配 @font-face 中定义的 font-family 和 font-weight 值。
例如：
@font-face {
font-family: "Inter";
src: url("../fonts/Inter-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
对应使用时必须写：
p {
font-family: "Inter", sans-serif;
font-weight: 400; /* 必须和 @font-face 里一致 */
}
- 如果用了
font-weight: 500但@font-face只声明了400，浏览器会 fallback 到系统字体 - 字体名带空格或特殊字符，
font-family值必须用英文双引号包裹，如"Helvetica Neue" - 多个字重需分别声明多个
@font-face块（400、600、700各一个）
字体加载阻塞渲染？加 font-display: swap
默认情况下，浏览器会等待字体加载完成才渲染文字，造成“空白闪烁”或延迟显示。加 font-display: swap 能让浏览器先用备用字体渲染，等自定义字体就绪后立刻替换。
这是现代字体加载的必备项，不加的话用户可能看到几秒空白或布局跳动。
-
font-display: swap是目前兼容性最好、体验最稳的选择（Chrome 49+、Firefox 41+、Safari 11.1+） - 不要用
block（过度阻塞）或optional（可能永不加载） - 注意：
swap会导致一次字体切换，若设计上不允许跳变，需配合font-face-observer等库做更精细控制
字体加载本身简单，但路径、匹配规则、display 行为这三处一错，就卡在“明明文件放对了却看不到效果”。尤其是路径相对于 CSS 文件而非 HTML 这一点，几乎每个新手都会栽一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
