正确写法是用带引号字符串定义字体变量，如@font-family-base: "Helvetica Neue", Arial, sans-serif；需在body等选择器中显式应用，注意中英字体分设变量、跨平台fallback及编译链路验证。
Less变量定义字体族的正确写法
全局字体族必须用变量统一管理，否则后续修改会散落在各处。直接在 @font-family-base 里写字符串就行，但要注意引号——不加引号会被Less当变量解析，加单引号或双引号才按字面量处理。
-
@font-family-base: "Helvetica Neue", Arial, sans-serif;✅ 安全，浏览器可识别 -
@font-family-base: Helvetica Neue, Arial, sans-serif;❌ Less报错：undefined variableHelvetica - 中文字体名含空格或中文时，必须加引号，例如
"PingFang SC"、"Microsoft YaHei"
如何让字体变量生效到所有CSS规则
变量本身不会自动注入样式，得显式用在选择器里。常见错误是只定义了变量，却忘了在 body 或 html 上应用。
- 基础写法：
body { font-family: @font-family-base; } - 若项目用CSS Reset或Normalize，需覆盖其默认
font-family，尤其注意button、input、textarea等表单控件，它们常自带系统字体 - 想全局生效，可用通配符（慎用）：
* { font-family: @font-family-base !important; }—— 但会干扰图标字体和代码块等特殊场景
热更新失败？检查Less编译链路是否读取了最新变量
改了 @font-family-base 却没看到效果，大概率不是变量写错了，而是编译缓存或引用路径问题。
- 确认主Less文件（如
main.less）真正@import了存放变量的文件（如variables.less），且顺序在所有样式规则之前 - Webpack + less-loader 场景下，修改
variables.less后需触发重编译；某些旧版配置未开启modifyVars或 watch 模式，会导致热更新失效 - Vite 用户注意：
lessOptions.modifyVars是运行时注入，和@import变量是两套机制，混用易冲突
中英混排与fallback字体链的坑
中文字体和英文字体加载逻辑不同，硬塞进同一变量容易导致部分字符回退到系统默认字体，看起来“突然变细”或“字形不一致”。
- 推荐拆成两个变量：
@font-family-en和@font-family-zh，再组合使用：font-family: @font-family-en, @font-family-zh; - 避免把
"Noto Sans CJK SC"放在英文列表后面——它体积大、加载慢，且对纯英文内容无优化，应作为中文fallback而非主力 - Mac / Windows / iOS 对同一字体名渲染差异大，
"Segoe UI"在Win下有效，在Mac上根本不存在，必须配合理解 fallback 机制
改字体看着简单，但跨平台渲染、编译链路、fallback顺序这三块最容易漏掉验证。每次调整后，至少要在Chrome（Win/mac）、Safari（iOS）里点开开发者工具，手动检查 computed 面板里的 font-family 实际值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
