不能在 variables.less 里直接写 @font-face，因为 Less 的 @import 是静态展开机制，会导致所有导入它的模块重复输出该规则，引发字体多次声明、重复请求、CSS 体积膨胀和加载异常；variables.less 应仅定义字体名、路径等参数，@font-face 必须单独抽离至 fonts/base.less 并由主入口显式导入一次。
为什么不能在 variables.less 里直接写 @font-face
Less 的 @import 是静态展开机制，一旦 variables.less 中混入 @font-face 规则，所有 import 它的模块都会原样复制一遍该声明。结果是：同一字体被多次输出、浏览器重复请求、CSS 体积膨胀、控制台可能不报错但字体加载异常。这不是复用，是污染。
-
variables.less只应定义参数：如@font-weui-family、@font-weui-path、@font-weui-weights -
@font-face必须单独抽离到fonts/base.less，由主入口（如app.less）显式导入一次 - 若项目需多套字体（如中英分离、深色模式专用），变量命名要带语义前缀，例如
@font-zh-sans和@font-en-sans，避免覆盖冲突
如何用 mixin 封装 woff2/woff 降级链
硬编码 src 路径和格式组合极易出错，尤其当字体路径随环境变化（本地开发 vs CDN）时。用 mixin 封装可确保格式顺序、font-display 策略统一，且支持局部覆盖。
- 基础封装示例：
.define-font(@family, @path) { @font-face { font-family: @family; src: url('@{path}.woff2') format('woff2'), url('@{path}.woff') format('woff'); font-display: swap; } } - 调用时传入变量而非字符串：
.define-font(@font-weui-family, @font-weui-path);，避免引号嵌套错误 - 不要在 mixin 内写
font-weight: 400,700这类列表——Less 不解析 CSS 语法，会原样输出导致无效；应拆成多个独立@font-face块，每个对应一个字重 - 若需支持 IE9（仅支持 EOT），得额外加
url('@{path}.eot')，但注意 EOT 不支持font-display，且现代项目通常已放弃
怎么处理中英字体栈 fallback 冲突
中文字体文件通常内嵌西文，但渲染质量差；西文字体又不包含中文。若把 "PingFang SC", "Helvetica" 这样混写，某些浏览器（如旧版 Safari）会因第一个字体缺失而跳过整条栈，直接 fallback 到 serif。
- 推荐分层声明：用命名空间隔离中英字体栈，例如
.fonts-zh { .sans() { ... } }和.fonts-en { .sans() { ... } } - 西文字体必须前置：安全写法是
"Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif，中文字体如"PingFang SC", "Hiragino Sans GB"放在西文之后 - 避免在 mixin 中拼接带空格或引号的值，例如
@font-stack: "Inter" "PingFang SC"会导致编译失败；应始终用变量存单个字体名，再由 mixin 组合输出 - 若需动态切换（如深色模式换 SF Mono），不要改
font-family值本身，而是通过 class 切换预设命名空间：.theme-dark .fonts-code { .mono(); }
font-variation-settings 怎么安全接入 Less 流程
font-variation-settings 不是普通属性，它依赖字体文件是否真正支持轴、浏览器是否启用插值、以及加载时机。直接在组件里写 font-variation-settings: 'wght' 600 极易失效且无法降级。
立即学习“前端免费学习笔记（深入）”；
- 必须配合
@font-face中的format('woff2-variations')，否则 Firefox 可能静默降级为普通 woff2，'wght'设置完全被忽略 - 不要用 mixin 封装通用
font-variation-settings调用，而应在@font-face块内明确声明支持范围：@font-face { font-family: 'InterVar'; src: url('../fonts/inter-var.woff2') format('woff2-variations'); font-weight: 100 900; font-stretch: 75% 125%; } - 实际使用时，优先走标准属性：
font-weight: 600，仅在需要微调（如段落内某词加粗到 637）时才用font-variation-settings，且必须包裹@supports (font-variation-settings: normal) - 可变字体的 fallback 必须是独立
@font-face块，用不同font-family名（如InterVar-fallback）并显式设font-weight: 600，不能靠同一个 family 名自动匹配
@fonts），它对 Less 无效——必须在 @font-weui-path 变量里写死相对路径，或改用 postcss-url 等后处理插件接管。 
