Less中字体声明应分离配置与实现：variables.less只定义字体名、路径等变量，@font-face单独抽至fonts/base.less由主入口导入；用mixin封装woff2/woff降级链，支持环境覆盖；模块化字体需作用域前缀防冲突。
直接用 @font-face 声明字体时硬编码路径和格式，会导致多处重复、改一个字体要搜全项目替换——这不是优化，是埋雷。Less 的真正价值，在于把字体声明变成可配置、可复用、可条件编译的变量系统。
为什么不能在 variables.less 里直接写 @font-face
Less 的 @import 是静态展开的，一旦 variables.less 里包含 @font-face，所有 import 它的模块都会输出一遍该规则，造成：多个相同 @font-face 声明、字体文件被多次请求、CSS 体积膨胀、浏览器解析冗余。
实操建议：
- 把
@font-face声明单独抽成fonts/base.less，只由主入口（如app.less）显式@import -
variables.less只定义字体名、权重、路径前缀等参数，例如：@font-weui-family: 'weui';、@font-weui-path: '../fonts/weui'; - 需要动态生成多套字体时，用 mixin 封装，比如：
.define-font(@family, @path) { @font-face { font-family: @family; src: url('@{path}.woff2') format('woff2'), url('@{path}.woff') format('woff'); font-display: swap; } }
如何用 Less 变量控制 WOFF2 + WOFF 降级链
硬写两行 src 不仅难维护，还容易漏掉 format() 或写错顺序。用变量+ mixin 能确保每次生成都一致。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 定义字体后缀变量：
@font-ext-woff2: '.woff2';、@font-ext-woff: '.woff'; - 封装调用：
.define-weui-font() { .define-font(@font-weui-family, @font-weui-path); } - 调用时一行搞定：
.define-weui-font();，输出即含完整 fallback 链和font-display: swap - 若某环境禁用 WOFF2（如旧版 IE），可临时覆盖变量：
@font-ext-woff2: ''; // 空值让 mixin 跳过该行
按需加载字体时，Less 变量怎么配合 Webpack dynamic import
Less 本身不支持运行时加载，所谓“按需”必须靠构建时拆分 + JS 动态 import 触发样式加载。此时变量的作用是：让每个路由/组件的字体声明与它的 Less 入口强绑定，避免污染全局。
实操建议：
- 为每个功能模块建独立 Less 入口，如
route-profile.less，它只@import 'fonts/profile-fonts.less'; -
profile-fonts.less内使用变量定义专属字体：@font-profile-family: 'ProfileIcon';、@font-profile-src: '../fonts/profile-icons'; - Webpack 中用
import('./styles/route-profile.less')加载时，只会注入该模块所需字体，不会带出 dashboard 的图标字体 - 关键限制：这些模块级 Less 文件里不能含
@import（除(reference)外），否则less-loader无法正确提取依赖
最易被忽略的一点：字体变量命名必须带作用域前缀。比如 @font-btn-icon-family 和 @font-modal-title-family 看似啰嗦，但能防止团队协作中不同模块用同名变量互相覆盖——Less 变量不是 JS const，没有块级作用域，一撞就崩。
