@font-face降级需严格按浏览器解析逻辑排序：.woff2（format('woff2')）排第一，.woff（format('woff')）次之，.ttf用format('truetype')置末尾；src顺序错或format值非法会导致整条规则被忽略，font-display: swap为必备配置。
直接给结论：@font-face 降级不是“多塞几个格式就行”，而是按浏览器实际解析逻辑控制顺序——.woff2 必须排第一，.woff 紧跟，.ttf 写成 format('truetype') 放末尾；漏掉任一环节，IE9、旧 Safari 或 Android 4.4 就可能彻底跳过整条规则。
为什么 src 顺序错了整个 @font-face 都会被忽略
浏览器解析 src 是“从左到右，遇到第一个它能识别的格式就停”，但前提是它得能**语法上合法解析该行**。如果第一个是 .eot（IE专用），非 IE 浏览器看到 format('embedded-opentype') 无法识别，部分旧版 WebKit 会直接放弃整条 @font-face 声明，后面再好的 .woff2 也进不了加载队列。
- Chrome/Firefox/Safari 12+：优先吃
.woff2，识别失败才往下看 - Safari ≤ 10、Android 4.4：不认识
.woff2，但认.woff；若.woff不在第二位，它可能连试都不试 - IE9：只认
.eot和.woff，且对format()值敏感——写format('eot')会失效，必须是format('embedded-opentype')
format() 的字符串值不能凭感觉写
format() 不是文件后缀映射表，是 W3C 规范定义的关键字。写错就等于告诉浏览器“这个源我不要”，它会静默跳过那一项，不报错也不警告。
-
.woff2→ 必须用format('woff2')（不是'woff2.0'或'web-open-font-format-2'） -
.woff→format('woff')（唯一合法值） -
.ttf或.otf→ 只能用format('truetype')或format('opentype')；写format('ttf')在 Safari 和 Chrome 中直接丢弃该源 - 末尾不能有逗号：
url('a.woff2') format('woff2'),这种悬空逗号会让 Safari 解析失败
font-display: swap 是现代项目底线配置
不加 font-display，浏览器默认行为是 FOIT（Flash of Invisible Text）：最多阻塞渲染 3 秒，用户盯着白块或布局跳动。这不是字体没加载，是浏览器在“等它”。
-
font-display: swap;：立刻用后备字体渲染，加载完自动替换——最稳妥，视觉无空白 -
font-display: optional;：弱网下直接跳过请求，适合装饰性图标字体 - 别用
block：移动端用户 3 秒不见字，大概率已划走 - 该声明必须写在
@font-face块内，写在外部选择器里无效
路径和字体名不一致比 404 更难排查
路径 404 能在 Network 面板一眼看到；但路径对了、名字大小写或引号不匹配，浏览器会默默回退到系统字体，控制台零报错。
- 相对路径以 CSS 文件为基准，不是 HTML 页面——
../fonts/krona.woff2在/css/app.css里才有效 -
font-family: 'Krona One'声明后，调用时必须严格写成font-family: 'Krona One', sans-serif;；少引号、大小写错（如'krona one'）、多空格，全都不命中 - Linux 服务器区分
KronaOne.woff2和kronaone.woff2，本地开发不报错，上线就失效 - Webpack/Vite 项目中，
src/assets/fonts/下的文件需用new URL('./krona.woff2', import.meta.url)，不能直接写相对路径
真正容易被忽略的是：字体加载成功 ≠ 渲染成功。Krona One 这类西文字体压根不含中文字符，font-family: 'Krona One', sans-serif 遇到中文文案时，浏览器会立即切到 sans-serif 对应的系统字体（Mac 用 PingFang，Windows 用 Microsoft YaHei），这不是 bug，是预期行为——兜底链必须自己写清楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
