字体路径错误致@font-face失效，应使用绝对路径并提供woff2/woff双格式；font-display推荐swap；多变体需独立@font-face声明；local()基本弃用。
字体文件路径写错导致@font-face不生效
浏览器根本不会加载字体，控制台也常无报错，只默默回退到系统默认字体。问题多出在 src 里的路径没对上实际部署位置，尤其当 CSS 和字体文件不在同一级目录时。
-
url()里的路径是相对于 CSS 文件所在位置计算的，不是 HTML 页面位置 - 推荐用绝对路径（如
url("/fonts/inter-var.woff2")），避免相对路径嵌套出错 - woff2 格式优先，但必须同时提供 woff 作为降级（老版 iOS Safari 不支持 woff2）
- 检查网络面板里字体请求是否返回 404 或 403 —— 这比看样式面板更直接
@font-face 的 font-display 属性怎么选
它决定字体加载期间文本如何渲染，直接影响用户是否看到“闪动”或“空白”。默认值 auto 行为不可控，多数场景应显式设置。
-
font-display: swap：立即用系统字体显示，等自定义字体加载完再替换 —— 最常用，兼顾性能与可用性 -
font-display: optional：只在字体缓存命中时使用，否则永不加载 —— 适合非关键品牌字体，减少首屏阻塞 -
font-display: block：短时间隐藏文本（约 3s），再 fallback —— 易造成“文字闪现”，慎用 - 注意：Safari 对
optional支持较晚（15.4+），若需兼容旧版，别用
多个 @font-face 定义同名字体但不同字重/样式时的坑
浏览器靠 font-family + font-weight + font-style 三者组合匹配，漏配或配错会导致字体“用不上”——比如写了 font-weight: 600 却只定义了 normal 和 bold。
- 每个变体（如 Regular、Medium、Bold、Italic）都得单独一个
@font-face块 -
font-weight推荐用数字（如400,500,700），别用normal/bold这类关键词，后者只是别名且映射不统一 -
font-style别漏掉italic变体，哪怕只是用oblique模拟，也得显式声明 - 用 Chrome DevTools 的“Computed”面板点开
font-family，看最终解析出的字体名和实际加载的文件是否一致
本地字体（local()）在现代项目中基本不用
local() 声明本意是复用用户系统已安装的同名字体，减少下载，但实际兼容性和可靠性太差，现在几乎没人靠它省流量。
- Windows/macOS/Linux 对字体名的命名规则完全不同（比如 “Helvetica Neue” 在 macOS 是
local("HelveticaNeue")，Windows 可能叫local("HelveticaNeue-Roman")） - Chrome 从 93 起限制
local()只能匹配极少数系统字体（如 “Arial”, “Times New Roman”），其他一律忽略 - 真正想复用系统字体，直接写
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif更稳妥 - 如果字体文件本身体积小（local() 省心得多
local() 已经形同虚设。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
