Less变量存字体图标Unicode值需声明为字符串（如@icon-home: "\e900"），伪元素中用@{icon-home}插值，配合字体路径、font-family等变量统一管理，确保Unicode与实际字体文件匹配。
怎么用Less变量存字体图标Unicode值
直接把 Unicode 写进 @font-face 或伪元素里容易出错，也难维护。Less 变量能帮你把图标和编码解耦，改一个地方就全局生效。
关键不是“能不能”，而是变量得声明成字符串，否则 Less 会尝试计算或转义——比如 @icon-home: "\e900" 必须带引号，写成 @icon-home: \e900 会被编译成乱码或报错。
-
@icon-home: "\e900"✅ 字符串形式，安全可用 -
@icon-home: e900❌ Less 当作变量名或单位处理，编译失败 - Unicode 值建议统一用小写、4位（如
\e900），避免\ue900或\U0001f600这类变体，CSS 不认
伪元素中插入变量值要加双括号
Less 的插值语法 @{xxx} 是唯一能安全展开变量的地方。直接写 content: @icon-home 会原样输出字符串字面量，浏览器不识别；必须用插值包裹。
常见错误是漏掉大括号，或者多套一层引号：
-
content: "@{icon-home}"✅ 编译后是content: "\e900" -
content: @icon-home❌ 输出content: "\e900"（带引号的字符串，非 Unicode） -
content: "@{icon-home}"和content: @{icon-home}效果一样，但后者更标准
.icon-home::before {
content: @{icon-home};
}
字体图标路径和 font-family 怎么配合变量管理
字体文件路径、font-family 名称、权重这些常变项，全塞进变量里，比硬编码强得多。尤其换图标库时，只改几行变量就能切过去。
注意：字体路径变量要带引号；font-family 如果含空格或特殊字符，也必须引起来，否则编译后 CSS 无效。
-
@icon-font-path: "./fonts/iconfont"→ 后续拼接.woff2用 -
@icon-font-name: "my-icon-font"→font-family: "@{icon-font-name}" - 多个字体格式用
@import+ 变量组合，别手写一堆src: url(...)
为什么 Unicode 映射在不同字体下可能失效
同一个 Unicode 码位（比如 \e900），在不同字体文件里可能对应不同图标，甚至空白。这不是 Less 的问题，而是字体设计本身决定的。
所以变量只是“搬运工”，真正起作用的是你加载的字体文件是否包含该码位。调试时别只盯着 Less 编译结果，要检查：
- 浏览器开发者工具里，
::before元素的content是否正确解析为图标（而非方块或问号） - 实际加载的字体文件是否完整，有没有 404 或 CORS 问题
- 字体是否设置了
font-display: block导致闪动或 fallback 到系统字体
变量再干净，字体没对上，图标照样不出来
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
