全局字体管理需定义语义化变量（如@font-family-sans、@font-size-sm），图标路径与class前缀须统一维护，用mixin封装字体加载逻辑并引用变量，构建时确保url路径相对于输出CSS文件正确。
Less变量定义字体族与字号层级
全局字体管理的核心是把 @font-family-base、@font-size-base 这类基础值抽成变量，而不是在每个选择器里写死 font-family: "Helvetica Neue", sans-serif。这样做不是图省事，而是让设计系统可维护——改一处，全站响应。
- 变量名要带语义，比如
@font-family-sans比@ff1更可靠，协作时别人一眼知道用途 - 字号建议用
rem单位 + 基准缩放，例如@font-size-sm: 0.875rem（对应 14px），避免直接写像素导致响应式断裂 - 别在变量里拼接引号或逗号，
@font-family-base: "Inter", -apple-system, sans-serif是错的；正确写法是@font-family-base: "Inter", -apple-system, sans-serif（Less 允许不加引号，但多个字体必须用逗号分隔且整体不包裹）
图标字体路径与 class 前缀统一控制
用 icon font（如 Font Awesome 5 的 webfonts/ 目录）时，最常踩的坑是 @font-face 声明路径和 CSS class 前缀脱节——改了字体文件位置，忘了同步更新 @fa-font-path，结果图标变方块。
- 所有图标相关变量集中放在一个
icons.less文件里，包括：@icon-font-path、@icon-font-name、@icon-class-prefix -
@icon-font-path必须是相对于最终生成 CSS 文件的路径，不是 Less 源文件路径；Webpack 或 gulp-less 下容易搞反，建议用../../webfonts这种显式相对路径，别依赖@import的嵌套层级 - class 前缀变量（如
@icon-class-prefix: "ic"）要和 HTML 中写的class="ic-home"严格一致，Less 编译时不会校验是否匹配，出错只能手动排查
通过 mixin 注入字体加载逻辑与回退策略
只定义变量不够，字体加载失败时需要降级显示。Less 本身不执行运行时逻辑，但可以用 mixin 封装常用组合声明，保证每次调用都带 font-display: swap 和备用字体链。
- 写一个
.font-sans()mixin，内部包含font-family、font-display、line-height等高频组合，而不是零散调用 - 不要在 mixin 里硬编码字体名，而是引用前面定义的变量：
font-family: @font-family-sans，这样变量一改，所有调用点自动生效 - 注意
font-display兼容性：IE 完全不支持，如果项目还要兼容 IE，这个属性得单独抽离或用条件编译（Less 不原生支持，需靠构建工具处理）
构建后 CSS 中字体路径失效的排查重点
Less 编译完，CSS 里 url(...) 路径变成 404，90% 是因为 @icon-font-path 值没对齐输出目录结构。这不是 Less 的 bug，是路径解析规则被忽略。
- 检查构建工具输出的 CSS 文件所在目录，再看它引用的字体路径是否能从该目录一层层 navigate 到字体文件；例如 CSS 在
/dist/css/app.css，那@icon-font-path: "../webfonts"才对得上 - Less 的
url()不会自动重写路径，它只是字符串拼接；如果你用 Webpack 的file-loader把字体 hash 化了，就得配合resolve-url-loader或改用 CSS-in-JS 方案 - 图标 class 生成后没效果？打开 DevTools 查元素 computed 样式，看
font-family是否真的应用了你定义的字体名，还是被其他样式覆盖或拼写错误
字体和图标看着简单，但变量、路径、mixin、构建四者咬合稍有偏差，就卡在“明明写了却没生效”上。最容易被忽略的是：变量值是否真被注入到最终 CSS，而不是只存在于某个未被 import 的 less 文件里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
