根本原因不是字体族名写错，而是css变量文件未加载或作用域不匹配：先查network中.css请求是否200，排除404/403/0/block；再确认content-type为text/css、变量定义在:root下且位于使用前，同时@font-face的font-family值须与变量内容完全一致。
根本原因不是字体族名写错了，而是 --font-main 这类变量压根没被浏览器读到——变量定义所在的 CSS 文件加载失败，或变量作用域未覆盖使用位置。
检查 CSS 变量文件是否真正加载成功
变量定义（比如 :root { --font-main: "Inter", sans-serif; }）必须存在于已成功加载的 CSS 文件中。浏览器不会报错，但 var(--font-main) 会退化为初始值或直接失效。
- 打开开发者工具 → Network 面板 → 刷新 → 筛选
.css→ 找到你引入变量的文件（如vars.css） - 状态码不是
200？常见情况：404（路径错）、403（服务器拒访）、0或blocked（file://协议下被拦截、CSP 限制、广告屏蔽器干扰） - 即使状态码是
200，也要点开该请求 → Headers → 确认Content-Type: text/css；若为text/plain或application/octet-stream，Nginx/Apache 未配 MIME 类型，本地用python -m http.server也会出问题
@font-face 和 CSS 变量要分开验证
变量里存的是字体族名字符串，它不负责加载字体文件。如果 font-family: var(--font-main) 不生效，可能变量对了，但字体本身没加载。
- 在 Network 面板过滤
woff2、ttf，确认对应字体请求返回200且Content-Length > 0 -
@font-face中的font-family值（如'Inter'）必须和变量里写的完全一致：大小写、引号、空格都不能差——"Inter"≠Inter≠'inter' - 确保
@font-face规则本身没有语法错误：比如src末尾多逗号、format('woff2')写成format('woff 2')或'woff2'拼错，Safari 和旧 Chrome 会静默忽略整条规则
变量作用域与调用时机容易被忽略
var(--font-main) 能不能取到值，取决于它被声明的位置和你在哪里用它。
- 变量必须在使用前定义，且按 CSS 级联顺序生效：如果变量定义在
.theme-dark选择器内，而你在body上直接用font-family: var(--font-main)，那它根本不可见 - 全局变量务必写在
:root下，而不是某个 class 或 tag 选择器里 - 避免在同一样式表里“先用后定义”：CSS 是自上而下解析的，
p { font-family: var(--font-main); }必须出现在:root { --font-main: ... }之后，否则取到的是unset - 动态插入的 CSS（如 JS 创建
<style></style>）可能晚于渲染，导致首屏文字闪动或回退；加font-display: swap可缓解，但不能解决变量未定义问题
最常卡住的地方其实是路径和作用域：变量文件 404 了，或者 @font-face 的 font-family 名和变量里写的对不上——这两处一错，其余都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
