@font-face失效主因是规则被静默丢弃：作用域隔离、src末尾多逗号、font-family名称大小写或引号不一致；路径须以css文件为基准，且需http(s)协议下相对或绝对路径。
@font-face 能用，但几乎每次都会因为几个硬伤直接失效——不是字体坏了，是规则写得浏览器根本不认。
为什么写了 @font-face 却没请求字体文件？
DevTools Network 面板里完全看不到字体请求，说明整条 @font-face 规则被浏览器静默丢弃了。常见原因有：
-
@font-face块被塞进了<style scoped></style>、CSS-in-JS 的动态样式块，或通过@import引入的子 CSS 文件里——解析顺序靠后或作用域隔离导致失效 -
src里多了一个尾随逗号，比如url('a.woff2') format('woff2'),（末尾逗号），Safari 和旧版 Chrome 会直接忽略整条规则 -
font-family值用了中文引号（‘MyFont’）或调用时漏引号（font-family: MyFont），大小写不一致也会失配
src 路径怎么写才不会 404？
浏览器永远以当前 CSS 文件所在路径为基准解析相对路径，不是 HTML 页面位置，也不是网站根目录。
- 假设 CSS 在
/css/main.css，字体在/fonts/inter.woff2，那必须写url('../fonts/inter.woff2') - 打开 DevTools → Network → Filter “Font”，看实际发出的请求 URL 是什么，和你文件真实路径比对，比猜快得多
- 本地双击 HTML（
file://协议）时，Chrome 会因 CORS 拒绝加载字体，务必用本地服务器测试（如npx serve） - Vite/Webpack 中，
url('./fonts/x.woff2')若没被识别为资源，构建后文件可能根本没复制过去——确认是否启用assetsInlineLimit，或把字体放public/目录下用绝对路径url('/fonts/x.woff2')
多字重、斜体为什么还是用系统字体？
浏览器不会自动加粗或倾斜你声明的常规体。它只做精确匹配。
- 每个字重（
400、700）、每种样式（normal、italic）都要单独一个@font-face块 -
font-weight优先用数值（400、700），别用bold——部分解析器不认这个别名 -
font-style: italic必须对应真实存在的斜体文件（如myfont-italic.woff2），不能指望浏览器“生成”斜体 -
format()的值必须和后缀严格对应：.woff2→'woff2'，.ttf→'truetype'，写成'ttf'会被 Safari/旧 Android 静默忽略
font-display: swap 为什么不能省？
不加它，现代浏览器默认 FOIT（Flash of Invisible Text）：字体没加载完，文字干脆不渲染，白屏几秒。
- 加了
font-display: swap才先用系统字体撑开布局，等自定义字体就绪再替换，用户感知不到中断 - 它必须写在
@font-face块内部，不能丢到外部选择器里 - 别用
font-display: optional——字体可能永远不加载；也别用block——不可见时间拉太长
最常被忽略的是：font-family 名称在声明和调用两端必须**完全一致**（包括引号、大小写、空格），且 font-weight / font-style 必须和实际文件一一对应——差一个字符，浏览器就当没这回事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
