@font-face不生效主因是声明被作用域隔离、src末尾多逗号致浏览器静默丢弃、font-family名称大小写或引号不一致；路径须以CSS文件为基准，且需为http(s)协议下相对或绝对路径。
字体不显示，八成不是文件坏了，而是@font-face写法或路径出了硬伤——浏览器直接忽略整条规则，连报错都不给。
为什么@font-face写了却没生效？
常见现象是 DevTools Network 面板里根本看不到字体请求，或者请求 404；也可能是请求成功但文字仍用系统字体。根本原因往往就三条：
-
@font-face块被塞进<style scoped>、CSS-in-JS 或@import引入的文件里，导致解析顺序靠后或作用域隔离 -
src里多了一个逗号（比如url(...) 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/目录下用绝对路径
多字重、斜体必须分开声明
浏览器不会自动加粗或倾斜你声明的常规体。你写strong { font-weight: 700; }，但@font-face里只定义了font-weight: 400，那<strong>就回退到系统字体。
立即学习“前端免费学习笔记（深入）”；
- 每个字重（400/700）、每种样式（
normal/italic）都要单独一个@font-face块 -
font-weight优先用数值（400、700），别用bold——部分解析器不认这个别名 -
font-style: italic必须对应真实存在的斜体文件（如myfont-italic.woff2），不能指望浏览器“生成”斜体
font-display: swap为什么不能省？
不加它，现代浏览器默认 FOIT（Flash of Invisible Text）：字体没加载完，文字干脆不渲染，白屏几秒。加了才先用系统字体撑开布局，等自定义字体就绪再替换。
- 必须写在
@font-face块内部，不能丢到外部选择器里 - 别用
font-display: optional——字体可能永远不加载；也别用block——不可见时间拉太长 - 兼容性没问题：Chrome 49+、Firefox 60+、Safari 11.1+ 都支持，老版本忽略该属性但不影响基础加载
最容易被跳过的其实是font-family名称匹配——它不校验文件内容，只做字符串比对。引号类型、空格、大小写差一点，整个字体链就断了。
