图标字体路径必须用变量拼接而非硬编码，因CSS中url路径基于CSS文件位置解析，变量可统一控制源头；需定义$icon-font-path并确保末尾无斜杠，font-family名也应抽成带引号的变量统一使用，content插值需用双引号包裹合法Unicode转义字符串如"\e900"。
图标字体路径必须用变量拼接，不能硬编码
你写 url("fonts/icon.woff2") 时，这个路径是相对于 CSS 文件位置解析的，不是 HTML 页面。一旦 CSS 被打包或部署到不同目录，路径就断了。Sass 变量能让你统一控制路径源头，避免每个 @font-face 都手改。
推荐做法是定义一个基础路径变量：$icon-font-path: "../assets/fonts/"，然后所有字体引用都用 url("#{$icon-font-path}icon.woff2")。注意末尾不加斜杠，否则拼出来可能是 fonts//icon.woff2 —— 浏览器会 404。
- 路径变量必须在所有
@font-face之前声明，且确保被正确@use或@import - 如果项目用 webpack/vite，
~@/static/fonts/这类别名路径需确认构建工具是否支持；Sass 本身不解析~，它只是字符串拼接 - 不要把路径写成
$icon-font-path: "/static/fonts/"（绝对路径），这会让本地开发和 CDN 部署行为不一致
font-family 名称必须严格匹配，大小写和引号都不能错
生成的 CSS 类里写 font-family: "icon-font"，但 @font-face 里定义的是 font-family: icon-font（没引号）——这两者在浏览器眼里是两个不同字体，图标直接不显示。
最稳妥的方式是：把字体族名也抽成变量，比如 $icon-font-family: "icon-font"，然后在 @font-face 和所有图标类中统一使用 font-family: #{$icon-font-family}。
立即学习“前端免费学习笔记（深入）”；
- 变量值带双引号，是因为 CSS 中 font-family 值含空格或特殊字符时必须引起来；即使没空格，加引号也更安全
- 别用
unquote($icon-font-family)想“去掉引号”，这会让 Sass 输出font-family: icon-font，而实际需要的是font-family: "icon-font" - uni-app 等框架中若用
~@/static/font/iconfont.css这种写法，本质是让构建工具替换路径，Sass 编译阶段看不到它，所以仍要靠变量兜底
content 插值必须用双引号包裹 Unicode 转义字符串
Sass 不会自动把 "e900" 变成 Unicode 字符，必须人工保证格式合法：content: "#{$code}"，其中 $code 的值是 "\e900"（注意是双反斜杠 + 十六进制小写）。
常见错误是：$code: e900（没反斜杠）、$code: "e900"（少反斜杠）、$code: "\E900"（大写 E 在某些旧浏览器下失效）。这些都会让 content 渲染成文字或方块。
- 图标码点映射表建议用 map：
$icons: ("home": "\e900", "user": "\e901")，比 list 更可靠 - 循环生成类时，务必用
@each $name, $code in $icons，而不是@for，避免索引错位 - 别在循环里写
@import或嵌套@media，Sass 编译会报错或输出冗余 CSS
字体文件 MIME 类型和格式回退容易被忽略
现代项目基本只用 .woff2，但老版本 Android 或 IE 可能 fallback 失败。Sass 不能帮你判断该用哪种格式，但它能帮你干净地写出多格式 src 回退。
用 mixin 封装是最省心的做法：@mixin icon-font-face($family, $filename) { @font-face { font-family: #{$family}; src: url("#{$icon-font-path}#{$filename}.woff2") format("woff2"), url("#{$icon-font-path}#{$filename}.woff") format("woff"); font-display: swap; } }
-
font-display: swap是关键，它让文本先显示，图标异步加载后替换，避免空白期 - src 列表顺序很重要：浏览器按从左到右尝试，.woff2 必须放最前（体积小、兼容好）
- 别漏掉
format("woff2")，否则某些浏览器无法识别 MIME 类型，尤其在 Nginx 等服务器未配好字体 MIME 类型时
\e 开头的合法十六进制。 
