字体栈中带空格的字体名如"segoe ui"必须加双引号，系统字体如-apple-system无需引号；css变量值不解析calc()或var()嵌套，需显式声明；兼容ie需双重font-family声明；变量名大小写敏感且须小写中划线命名。
字体栈必须用引号包裹英文空格名，但系统字体不用
写 --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 是对的；写 --font-sans: Inter, -apple-system, ... 会把 Inter 解析成自定义字体名（即使它存在），且后续逗号分隔失效。系统字体如 -apple-system、BlinkMacSystemFont 本身不含空格，不加引号也没问题；但带空格的字体名（如 "Segoe UI"、"Helvetica Neue"）必须加双引号，否则 CSS 解析器会在第一个空格处截断。
变量值里不能包含 calc() 或 var() 嵌套引用
CSS 自定义属性的值是纯字符串，浏览器不会在声明阶段解析函数。所以以下写法无效：
:root {
--font-base: "Inter";
--font-sans: var(--font-base), -apple-system, sans-serif; /* ❌ 不生效 */
}
正确做法是显式拼接，或用 JS 动态组合（需注意 XSS 风险）：
:root {
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
- 所有字体名、关键字（
sans-serif、serif、monospace）都属于合法字体族值，可直接写入变量 - 不要试图用
calc()拼接字符串——CSS 不支持字符串运算 - 变量之间无法直接引用拼接，
var(--a) var(--b)在 font-family 中会被当作两个独立字体族，而非一个连贯栈
IE 不支持 CSS 变量，但字体栈降级仍要保底
哪怕你放弃 IE，也得确保变量未生效时页面不崩。最简兜底方案是：在 :root 外再写一条无变量的 font-family 声明（利用层叠覆盖）：
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root {
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body {
font-family: var(--font-sans);
}
这样老浏览器跳过 var() 直接用第一条；新浏览器则用第二条覆盖。别依赖“IE 已死”就省掉这层防御——内网系统、政企项目里 IE11 还活得好好的。
字体变量名大小写敏感，且不能以数字开头
--Font-Sans 和 --font-sans 是两个不同变量；--1font 是非法名称，CSS 解析器会静默忽略整条声明。命名建议统一小写 + 中划线分隔：
- ✅
--font-sans、--font-serif、--font-mono - ❌
--FontSans（驼峰）、--fontSans（无分隔）、--base-font（语义模糊） - 变量名中出现中文、emoji、特殊符号（如
@、$）均非法
真正容易被忽略的是：团队协作时，有人手抖写成 --font-Sans，JS 脚本里又用 setProperty('--font-sans', ...)，结果字体死活切不动——查半天发现是大小写不一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
