font-face声明中src路径错误是最常见失败原因，必须相对于css文件位置而非html页面；需用开发者工具network面板查404真实url；推荐用相对路径如"../assets/fonts/myfont.woff2"；禁用file://协议本地测试；构建工具需识别字体为资源；font-family名自定义但须完全一致且引号包裹；多@font-face可共用名，靠font-weight/style区分；woff2应优先但需fallback；cors问题会导致静默失败；font-display: swap用于优化显示时机。
font-face声明里src路径写错是最常见的失败原因
相对路径必须相对于CSS文件位置，不是HTML页面位置。很多人把字体文件放在assets/fonts/下，却在CSS里写src: url("fonts/myfont.woff2")，结果浏览器实际请求的是@#@#@#@#@#@#@#@#@#@0（根目录下），而不是@#@#@#@#@#@#@#@#@#@1。
- 用开发者工具的Network面板看404请求的真实URL，比猜路径快得多
- 推荐统一用相对路径：
src: url("../assets/fonts/myfont.woff2")（假设CSS在css/style.css） - 不要用
file://协议本地测试，Chrome会因CORS拒绝加载字体 - Webpack/Vite等构建工具中，字体需被识别为资源（比如
@import或url(./xxx)），否则不会复制到输出目录
font-family名字是自定义的，但必须和使用处完全一致
@font-face里的font-family值只是个标识符，不关联文件名或字体真实名称。它唯一作用是让后续font-family: "MyCustomFont"能匹配上。
- 名字里带空格或特殊字符必须用引号包裹：
font-family: "Fira Code"，否则解析失败 - 多个
@font-face块可以共用同一个font-family名，靠font-weight和font-style区分粗细和斜体 - 浏览器不校验字体文件内容是否真匹配你写的
font-weight: 700，填错会导致“字体加载了但显示为默认字体”的假象
WOFF2优先级最高，但得配fallback字体链
现代浏览器都支持.woff2，压缩率比.woff高30%，应放在src列表最前面。但仅提供WOFF2会让IE11、旧Android WebView直接忽略整个规则。
- 正确顺序：
src: url("font.woff2") format("woff2"), url("font.woff") format("woff"), url("font.ttf") format("truetype") -
format()括号里的字符串必须准确，错写成"woff2"（少引号）或"woff 2"都会让该条失效 - 必须配CSS fallback：
font-family: "MyFont", system-ui, -apple-system, sans-serif，否则字体加载失败时页面文字可能消失或变成方块
CORS问题在跨域字体加载时静默失败
如果字体托管在CDN或另一个域名，且服务端没返回Access-Control-Allow-Origin: *，Chrome/Firefox会加载失败，但控制台只报“Failed to decode downloaded font”，不提CORS。
- 本地开发时，用
npx serve或VS Code Live Server起HTTP服务，别双击打开HTML - Nginx配置示例：
location ~ .(woff2?|eot|ttf|otf)$ { add_header Access-Control-Allow-Origin *; } - 开发阶段临时禁用Chrome安全策略（仅调试用）：
chrome --user-data-dir=/tmp/chrome --unsafely-treat-insecure-origin-as-secure="@#@#@#@#@#@#@#@#@#@2" --user-data-dir=/tmp/chrome2
字体加载时机不可控，font-display: swap能避免文本长时间空白，但这属于进阶控制——先确保字体文件能正确加载，再调显示行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
