@font-face生效需同时满足路径正确、格式完整、名称严格匹配；路径须相对CSS文件，src按woff2→woff→ttf顺序声明并配font-display:swap，font-family大小写及引号必须完全一致。
@font-face 能用，但路径错、格式漏、名字不一致，字体就白配了。
src 路径必须相对于 CSS 文件位置，不是 HTML 页面
很多人把 myfont.woff2 放在 assets/fonts/ 下，却在 CSS 里写 src: url("fonts/myfont.woff2")，结果浏览器实际请求的是根目录下的 /fonts/myfont.woff2，404 报错。
- 用浏览器开发者工具的 Network 面板 看真实请求 URL，比猜路径快得多
- 推荐统一用相对路径：假设 CSS 在
css/style.css，字体在assets/fonts/，就写src: url("../assets/fonts/myfont.woff2") - 禁用
file://协议本地双击打开 HTML 测试——Chrome 会因 CORS 静默拒绝加载字体 - Webpack/Vite 等构建工具中，字体文件需被识别为资源（比如通过
url(./xxx)或@import），否则不会复制进输出目录
font-family 名字是自定义标识符，大小写和引号必须严格匹配
font-family 值只是个“别名”，它不关联文件名、也不校验字体内容。你写 font-family: "MyFont"，后面所有 font-family: "MyFont" 才能命中；写成 MyFont（没引号）、myfont（小写）或 "My Font"（空格漏引号）都会失效。
- 含空格或特殊字符必须加双引号或单引号：
font-family: "Fira Code"，否则 CSS 解析失败 - 多个
@font-face可共用同一个font-family名，靠font-weight和font-style区分粗细/斜体（例如都叫"MyFont"，一个设font-weight: 400，另一个设font-weight: 700） - 浏览器不校验你写的
font-weight: 700是否真对应那个 WOFF2 文件——填错会导致“字体加载成功但显示为默认字体”的假象
src 列表要按兼容性排序，format() 字符串必须准确
只放 .woff2 是最省流量的，但 IE11、旧 Android WebView 会直接跳过整条 @font-face 规则。现代项目仍需 fallback。
- 顺序必须是：WOFF2 → WOFF → TTF/OTF（
format("woff2")必须写对，少引号、多空格、写成"woff 2"都会让该条失效） - 正确写法：
src: url("font.woff2") format("woff2"), url("font.woff") format("woff"), url("font.ttf") format("truetype") - 服务器要配置正确 MIME 类型：
font/woff2、font/woff，否则部分浏览器拒载 -
font-display: swap必须加——避免 FOIT（字体加载期间文字空白），让文本先用备用字体显示，等自定义字体就绪再替换
CORS 问题会导致静默失败，尤其字体托管在 CDN 或跨域服务时
字体文件如果放在非同源域名（比如 https://cdn.example.com/fonts/），而服务端没配 Access-Control-Allow-Origin，Chrome/Firefox 就会加载失败且控制台不报错，只在 Network 面板里显示“Failed to load resource”。
- 检查 Network 面板中字体请求的 Response Headers，确认有
Access-Control-Allow-Origin: *或具体域名 - 本地开发时，用
npx serve或 VS Code Live Server 启服务，别用file:// - 若字体来自第三方 CDN（如 Fontsource），优先选已处理好 CORS 的包，而非手动上传到自己静态目录
最容易被忽略的是：字体文件本身是否真支持你声明的 font-weight 和 font-style。很多免费字体只提供 normal + 400，你却写了 font-weight: 600，浏览器找不到匹配项，就会退回到系统字体——这时候查路径、查网络、查 CORS 全都没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
