Less 无法实现 CSS 自定义属性级别的运行时字体切换，但可通过命名空间+混合封装语义化字体栈（如.fonts.code()）实现集中管理与按需调用；单变量不满足多场景分层覆盖需求，且引号/空格处理易出错，关键在声明与引用分离及团队语义共识。
直接结论：
Less 中无法像 CSS 自定义属性那样“运行时”动态切换字体族，但可以通过变量 + 混合（
）+ 命名空间组合实现集中定义、按需复用、语义化调用——关键不在“变量化”，而在“可维护的声明与引用分离”。
为什么不能只用一个
变量？
单纯定义
看似简洁，但实际项目中很快会遇到问题：
标题、正文、代码块、按钮等场景需要不同优先级的字体栈（比如代码块必须用
，不能 fallback 到
）
深色模式或特定组件可能需替换整个栈（如用
替代
），单变量无法分层覆盖
构建工具（如 webpack + less-loader）不会解析字体栈里的引号和逗号逻辑，直接拼接易出错
推荐结构：用命名空间 + 默认混合封装字体栈
把字体族按语义分组，用 Less 命名空间隔离，再通过混合统一输出，避免重复写
：
使用时直接调用：
或
。这样既集中管理，又保留语义区分，修改某类字体只需改一处。
立即学习
“
前端免费学习笔记（深入）
”；
如何支持主题/环境差异化字体？
用带参数的混合 + 条件判断，而不是硬编码多个变量：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
调用：
。注意：
能正确解析命名空间内变量，但
必须是字面量（不能是变量值），所以适合有限主题场景；若需完全动态，建议交由 JS 运行时控制 class 类名，Less 只提供预设 class。
容易被忽略的坑：字体名中的空格与引号
Less 编译器对字体名处理很敏感：
含空格的字体名（如
）
必须加引号
，否则编译报错或被截断为
系统字体栈中
、
等
不加引号
，加了反而导致浏览器忽略该词
不要在变量里拼接引号，比如
—— 这会让最终 CSS 变成
（多一层引号），浏览器无法识别
最稳妥写法是：系统字体不加引号，自定义字体加双引号，整个栈用逗号分隔，不额外包裹。
真正难的不是定义变量，而是让设计师、前端、主题开发者对同一套命名达成共识，并在所有
调用点保持语义一致性——比如什么时候该用
，什么时候该用
，这比语法本身更影响长期维护成本。
.font-stack()@font-family-base@font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;monospacesans-serif"SF Mono""Consolas"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()@typeSF Pro DisplaySF-apple-systemBlinkMacSystemFont@sans: '"Inter", sans-serif';font-family: "Inter", sans-serif;.font-stack().fonts.code().fonts.mono()