less 无法实现 css 自定义属性级别的运行时字体切换，但可通过命名空间+混合封装语义化字体栈（如.fonts.code()）实现集中管理与按需调用；单变量不满足多场景分层覆盖需求，且引号/空格处理易出错，关键在声明与引用分离及团队语义共识。
直接结论：Less 中无法像 CSS 自定义属性那样“运行时”动态切换字体族，但可以通过变量 + 混合（.font-stack()）+ 命名空间组合实现集中定义、按需复用、语义化调用——关键不在“变量化”，而在“可维护的声明与引用分离”。
为什么不能只用一个 @font-family-base 变量？
单纯定义 @font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 看似简洁，但实际项目中很快会遇到问题：
- 标题、正文、代码块、按钮等场景需要不同优先级的字体栈（比如代码块必须用
monospace，不能 fallback 到sans-serif） - 深色模式或特定组件可能需替换整个栈（如用
"SF Mono"替代"Consolas"），单变量无法分层覆盖 - 构建工具（如 webpack + less-loader）不会解析字体栈里的引号和逗号逻辑，直接拼接易出错
推荐结构：用命名空间 + 默认混合封装字体栈
把字体族按语义分组，用 Less 命名空间隔离，再通过混合统一输出，避免重复写 font-family:：
.fonts {
@serif: "Charter", "Noto Serif", serif;
@sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
.base() { font-family: @sans; }
.heading() { font-family: @sans; }
.body() { font-family: @sans; }
.code() { font-family: @mono; }
.ui() { font-family: @sans; }
}
使用时直接调用：.fonts.base(); 或 .fonts.code();。这样既集中管理，又保留语义区分，修改某类字体只需改一处。
如何支持主题/环境差异化字体？
用带参数的混合 + 条件判断，而不是硬编码多个变量：
.font-stack(@type: base, @theme: light) when (@type = code) {
font-family: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
}
.font-stack(@type: base, @theme: light) when (@type = heading) and (@theme = dark) {
font-family: "Inter", "SF Pro Display", -apple-system, sans-serif;
}
.font-stack(@type: base, @theme: light) when (@type = base) {
font-family: .fonts.@type();
}
调用：.font-stack(heading, dark);。注意：.fonts.@type() 能正确解析命名空间内变量，但 @type 必须是字面量（不能是变量值），所以适合有限主题场景；若需完全动态，建议交由 JS 运行时控制 class 类名，Less 只提供预设 class。
容易被忽略的坑：字体名中的空格与引号
Less 编译器对字体名处理很敏感：
- 含空格的字体名（如
SF Pro Display）必须加引号，否则编译报错或被截断为SF - 系统字体栈中
-apple-system、BlinkMacSystemFont等不加引号，加了反而导致浏览器忽略该词 - 不要在变量里拼接引号，比如
@sans: '"Inter", sans-serif';—— 这会让最终 CSS 变成font-family: "Inter", sans-serif;（多一层引号），浏览器无法识别
最稳妥写法是：系统字体不加引号，自定义字体加双引号，整个栈用逗号分隔，不额外包裹。
真正难的不是定义变量，而是让设计师、前端、主题开发者对同一套命名达成共识，并在所有 .font-stack() 调用点保持语义一致性——比如什么时候该用 .fonts.code()，什么时候该用 .fonts.mono()，这比语法本身更影响长期维护成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
