less通过map变量集中管理字体粗细值并批量生成css类，但实际生效依赖字体文件是否包含对应字重；需确保map键值、class名、@font-face声明三者严格一致，且不同字体家族应使用独立map。
Less 本身不生成字体粗细，它只负责把 @font-weights 这类 Map 变量编译成静态 CSS 规则；真正在页面上生效的粗细，取决于你引入的字体文件是否实际包含对应字重。
为什么用 Map 而不是一堆独立变量
直接写 @font-weight-light: 300;、@font-weight-bold: 700; 看似简单，但当项目要支持 9 档字重（100–900）、还要按语义命名（thin、extralight、semibold）时，维护成本陡增。Map 把键值对集中管理，配合循环可批量产出 class 或 font-face 声明。
常见错误现象：改了 @font-weights[bold] 的值，但 HTML 里 class="fw-bold" 没变——因为 class 名和 Map 键没联动，或 mixin 没读取最新值。
实操建议：
- 定义 Map 时用语义键名，避免数字键：
@font-weights: { thin: 100, extralight: 200, light: 300, normal: 400, medium: 500, semibold: 600, bold: 700, extrabold: 800, black: 900 }; - 用
.each()遍历生成 class：.each(@font-weights, .(@weight, @key) { .fw-@{key} { font-weight: @weight; } }); - 别在 Map 里混单位，
bold: 700px是错的——font-weight只接受无单位数字
Map + font-face 声明必须严格对应
Map 定义的是“想用什么字重”，@font-face 才决定“能不能用上”。比如你设了 semibold: 600，但引入的字体文件只提供了 400 和 700 两个文件，浏览器会 fallback 到最接近的可用字重（通常是 700），font-weight: 600 就形同虚设。
实操建议：
- 每个
@font-face块必须显式声明font-weight，且值要和 Map 中的值一致：@font-face { font-family: "Inter"; src: url("fonts/inter-semibold.woff2") format("woff2"); font-weight: 600; /* 必须和 @font-weights[semibold] 一致 */ font-display: swap; } - 用
font-weight范围声明（如font-weight: 600 700;）虽合法，但 Less 无法校验范围是否覆盖 Map 中的键，容易漏配 - 检查最终生成的 CSS，确认每个
.fw-xxxclass 对应的font-weight值，和实际加载的@font-face的font-weight完全匹配
不同字体家族的字重映射不能共用一套 Map
同一套 @font-weights Map 不能直接复用于多个字体家族。例如 Inter 支持 100–900 全字重，而系统默认的 sans-serif 通常只有 400 和 700。若强行用 .fw-thin 去调 sans-serif，浏览器找不到 100 字重，就会降级为 400，视觉上毫无变化。
实操建议：
- 为每个字体家族单独建 Map：
@font-weights-inter、@font-weights-system - 用 mixin 封装字体族 + 字重组合逻辑：
.font-inter(@weight: normal) { font-family: "Inter", -apple-system, sans-serif; font-weight: @font-weights-inter[@weight]; } - 避免在全局 class（如
.fw-light）中硬编码字体族，它只管粗细；字体族应由更高层容器或组件控制
真正容易被忽略的是：Map 只是组织手段，它不解决字体文件缺失、浏览器 fallback 行为、或 CSS 层叠覆盖的问题。调试时优先看 DevTools 的 “Computed” 面板里 font-weight 最终计算值，再反查是哪条规则、哪个字体文件在起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
