css变量中font-family的引号必须仅包裹含空格的专有字体名，如--font-main: "helvetica neue", sans-serif；通用字体族不加引号；外层引号会导致语法错误；font简写属性不可直接使用var()替代font-family。
font-family变量值里引号必须写进字符串内部
CSS变量不解析语法，只做字符串替换。如果你把--font-main设成Helvetica Neue, sans-serif，浏览器会把空格当分隔符，拆成Helvetica和Neue两个字体名，导致回退链断裂。
正确做法是把引号作为值的一部分写进去：
-
--font-main: "Helvetica Neue", "Segoe UI", sans-serif;✅ -
--font-zh: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;✅ - 通用字体族如
sans-serif不能加引号，否则会被当成自定义字体名处理 ❌
别给CSS变量值加外层引号
写成--font-main: "Helvetica Neue, sans-serif";看似省事，但双引号会被存为字面量——后续font-family: var(--font-main)会变成font-family: "Helvetica Neue, sans-serif";，多了一层非法引号，直接触发语法错误。
变量值应保持裸字符串状态：
-
--font-main: "Helvetica Neue", sans-serif;（引号仅包裹含空格的专有字体名） --font-ja: "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif;- 所有逗号、空格、字体名之间不额外加引号或转义
JS动态设置时引号容易漏掉
用el.style.setProperty('--font-main', ...)拼接字符串时，JS里的引号和CSS里的引号容易错位。
安全写法是用模板字符串+外层双引号包裹整个字体链：
-
el.style.setProperty('--font-main', '"Inter", "SF Pro Display", system-ui');✅ -
el.style.setProperty('--font-main', `"Inter", "SF Pro Display", system-ui`);✅（反引号更清晰） - 避免：
"Inter", SF Pro Display, system-ui——SF Pro Display被拆成三个词 ❌
font shorthand不能用var()替代font-family
你不能写font: 16px/1.4 var(--font-main);，因为font简写属性要求每个子值（size、line-height、family）独立解析，而var()展开后只是一个token，浏览器无法从中拆出字体族。
必须显式声明：
font-size: 16px;line-height: 1.4;font-family: var(--font-main);
中英混排字体链里引号位置和逗号分隔是硬规则，少一个引号、多一层外括、漏掉sans-serif，都可能让整条链在某些系统上失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
