css变量中带空格的字体名必须将引号写入变量值内，如--font-main: "helvetica neue", sans-serif；font shorthand不支持var()，须显式声明font-family。
CSS变量里写带空格的字体名必须加引号
直接写 font-family: var(--font-main) 但变量值是 Helvetica Neue 这种带空格的，浏览器会把它拆成两个独立字体名 Helvetica 和 Neue，导致回退失败或渲染异常。
根本原因是 CSS 变量值在解析时不会自动包裹引号 —— 它只是字符串替换，不是语法重解析。所以你得把引号“写进变量值里”，而不是靠外部加。
- ✅ 正确写法：
--font-main: "Helvetica Neue", "Segoe UI", sans-serif; - ❌ 错误写法：
--font-main: Helvetica Neue, Segoe UI, sans-serif;（没引号，空格即分隔符） - ⚠️ 注意：引号必须是双引号或单引号，且要成对出现在整个字体族字符串最外层，不能只包部分
多个字体名混用时，逗号和引号的嵌套要小心
比如想定义一个含中文、英文、fallback 的完整链："PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif。这个字符串作为变量值，必须整体用引号包裹，否则 CSS 解析器会在第一个逗号处就截断。
实操中常见错误是漏掉末尾的 sans-serif 或者把引号只加在前几个字体上：
- ✅ 安全写法：
--font-ui: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; - ❌ 危险写法：
--font-ui: "PingFang SC", Hiragino Sans GB, Microsoft YaHei, sans-serif;（后两个没引号，空格触发分割） - ? 小技巧：把整条字体链当做一个“原子字符串”来对待，复制粘贴到变量值里时，先全选再加一层外层双引号
JavaScript 动态设置 font-family 变量时别忘了转义引号
如果用 JS 修改 style.setProperty('--font-main', newValue)，而 newValue 是拼出来的字体字符串，引号容易出错。
- ✅ 推荐方式：用模板字符串 + 双引号包裹整个值：
el.style.setProperty('--font-main', '"Inter", "SF Pro Display", system-ui'); - ❌ 容易翻车：
el.style.setProperty('--font-main', '"Inter", SF Pro Display, system-ui');（SF Pro Display没引号） - ⚠️ 注意：JS 字符串里的双引号不需要额外转义，只要保证最终塞进 CSS 变量的值是合法字体声明即可；但如果你用单引号写 JS 字符串，里面混双引号就不用转义，更安全
font-family 变量无法被 font shorthand 简写覆盖
这是个隐藏陷阱：你设了 --font-main: "Roboto", sans-serif;，然后在某元素上写 font: 16px/1.4 var(--font-main); —— 看似合理，但 CSS 规范里 font shorthand **不接受自定义属性作为字体族值**，会静默失败，回退到浏览器默认字体。
必须显式写 font-family：
- ✅ 有效：
font-size: 16px; line-height: 1.4; font-family: var(--font-main); - ❌ 无效：
font: 16px/1.4 var(--font-main);（即使控制台不报错，字体也不会生效） - ? 验证方法：打开 DevTools → Elements → 查看 computed font-family，如果显示
var(--font-main)而不是展开后的字体列表，说明没生效
font 简写能兜住所有场景，结果上线后字体突然变成 Times New Roman，排查半天才发现是 shorthand 不支持变量。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
