font-family值需严格字符串匹配，引号、大小写、空格缺一不可；src路径须相对于css文件；@font-face需按兼容性降序声明多格式并准确标注format()；本地file://协议下字体静默失败，须用本地服务器运行。
font-family 名字写错就完全不生效
浏览器不会校验你写的 font-family 值是否对应真实字体内容，只做字符串精确匹配。大小写、空格、引号缺一不可。
常见错误包括：font-family: MyFont（漏引号）、font-family: "myfont"（小写）、font-family: My Font（空格没引号）——这三种都会让后续所有 font-family: "MyFont" 失效。
建议统一用双引号包裹，且命名避免空格和特殊字符；如果必须含空格（如 "Fira Code"），引号绝对不能省。
src 路径必须相对于 CSS 文件，不是 HTML 页面
很多人把字体放在 assets/fonts/myfont.woff2，却在 CSS 里写 src: url("fonts/myfont.woff2")，结果浏览器实际请求的是根目录下的 /fonts/myfont.woff2，返回 404。
正确做法是：假设 CSS 文件路径为 css/style.css，字体在 assets/fonts/，则写成：src: url("../assets/fonts/myfont.woff2")。
验证方式很简单：打开浏览器开发者工具 → Network 面板 → 刷新页面 → 筛选 font 或 woff2，看请求 URL 是不是你预期的路径。
多格式声明顺序和 format() 字符串必须准确
现代浏览器优先加载 woff2，但 IE11 和旧 Android WebView 会直接跳过整条 @font-face 规则，如果只写了 woff2。
推荐按兼容性降序排列，并显式标注 format()：
@font-face {
font-family: "MyFont";
src: url("../assets/fonts/myfont.woff2") format("woff2"),
url("../assets/fonts/myfont.woff") format("woff"),
url("../assets/fonts/myfont.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
注意：format("woff2") 不能写成 format("woff 2") 或 format("WOFF2")；ttf 对应 format("truetype")，不是 "ttf"。
本地开发用 file:// 协议会静默失败
双击 HTML 文件在 Chrome 中打开，或用 VS Code Live Server 以外的方式本地预览，字体大概率不显示——Chrome 因 CORS 策略静默拒绝加载字体文件，控制台无报错，Network 面板也看不到请求。
解决办法只有两个：
• 改用本地服务器（如 npx serve、python3 -m http.server 或 Vite/webpack dev server）
• 构建时确保字体被构建工具识别：Webpack 需要 url(./xxx) 写法，Vite 支持 url('./xxx')，否则字体不会复制进输出目录。
这个限制特别容易被忽略，尤其对刚接触前端部署的人——它不是代码错，是运行环境卡住的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
