less中@font-face不支持插值，src必须为静态字符串；可行方案是抽离至css文件或用构建工具处理；图标类需用.each()配合map生成，且content值须为"\uxxxx"格式，路径要相对于输出css文件位置，并显式声明font-family和font-style。
Less 里不能在 @font-face 中插值路径
直接写 @font-face { src: url("@{icon-font-path}/icon.woff2"); } 会编译失败或生成无效 CSS。Less 解析器对 @font-face 做了硬性限制：所有 src 值必须是静态字符串，不接受变量、函数或插值。这不是语法写错，而是语言设计如此。
真正可行的方案只有两个：
- 把
@font-face声明抽离到独立的.css文件中手动维护（推荐用于稳定图标库） - 改用构建工具（如 Webpack +
fontmin-webpack或 Vite 插件）自动合成字体并输出配套 CSS，Less 只管后续类名映射
别试图用 .for() mixin 包裹 @font-face——它只会让编译器报 Unrecognised input。
图标类名和 Unicode 码点必须用 .each() 配合 map 批量生成
.each() 是 Less 4.0+ 提供的安全循环方式，适合生成 .icon-home::before 这类规则。但必须满足三个条件：
- 图标数据得是
map结构，例如：@icon-map: ("home" "\e900" "search" "\e901"); -
content值必须带双引号和反斜杠："\e900"，不能写成e900或'\e900' - 循环体内要用
@key和@value，且显式拼接：.icon-@{key}::before { content: @value; }
漏掉任一条件，生成的 CSS 就不会渲染图标——浏览器看到的是字面量字符串，不是 Unicode 字符。
@icon-font-path 的值必须相对于最终 CSS 文件位置
很多人改了 @icon-font-path: "../webfonts" 却还是图标变方块，问题不在变量本身，而在路径计算逻辑：
- 假设编译后 CSS 输出到
dist/css/app.css，而字体文件在dist/webfonts/icon.woff2，那@icon-font-path就该是"../webfonts" - 绝对路径更稳妥：
@icon-font-path: "/webfonts"（适用于public/目录部署场景） -
resolve.alias（如@/fonts）对 Less 无效，写了也白搭
Webpack/Vite 不会重写变量拼接的路径，只处理字面量 url("...")。所以变量值必须让最终输出的 url("../webfonts/icon.woff2") 能被构建工具正确定位。
font-family 和 font-style 必须显式声明
仅靠 content 和路径还不够。少了这两行，某些字体在 Chrome/Firefox 下会渲染异常或完全不显示：
.icon-@{key}::before {
font-family: @icon-font-name;
font-style: normal;
content: @value;
}
@icon-font-name 必须加引号（如 "icomoon"），否则编译后可能丢掉空格或特殊字符；font-style: normal 是为了覆盖某些字体默认的 italic 倾斜行为——这个细节常被忽略，但影响实际显示效果。
批量生成时最容易漏掉的是 Unicode 码点格式和路径相对性——前者导致 content 不生效，后者让字体文件根本加载不了。这两个点一旦出错，调试时很难一眼看出根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
