正确加载阿里图标库需手写@font-face声明，指定woff2/woff/ttf格式及自定义font-family；伪元素content必须用\uxxxx Unicode转义；路径须匹配项目结构，Vue/Vite/React中注意静态资源目录与引用方式。
如何用 @font-face 正确加载阿里图标库的字体文件
阿里图标库（iconfont.cn）导出的字体包默认不直接支持 @font-face 的跨域或路径配置，直接复制下载页给的 CSS 会失效——核心原因是字体路径没对、格式声明缺失、或 CORS 阻止了本地 font 文件加载。
正确做法是：下载完整压缩包（含 iconfont.woff2、iconfont.woff、iconfont.ttf 等），把字体文件放到项目静态资源目录（如 src/assets/fonts/），再手写 @font-face 声明。
- 必须声明全部主流格式，优先级按浏览器兼容性排序：
woff2→woff→ttf -
font-family名称要自定义且唯一（如"iconfont-ali"），避免和系统字体冲突 -
src中每个url()后必须跟format("xxx")，否则 Safari 和旧版 Edge 会忽略 - 如果用 Webpack/Vite，确保字体路径能被正确解析（Vite 中建议用
src/assets/fonts/iconfont.woff2这类相对路径，而非./iconfont.woff2）
@font-face {
font-family: "iconfont-ali";
src: url("./fonts/iconfont.woff2") format("woff2"),
url("./fonts/iconfont.woff") format("woff"),
url("./fonts/iconfont.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: inline-block;
}
为什么伪元素 ::before 中 content 值必须用 Unicode 字符
阿里图标库生成的字体本质是“字符映射”，每个图标对应一个 Unicode 码点（如 \e601），不是 SVG 或 class 名。伪元素 content 只接受字符串或 Unicode 转义，不能写 content: "home" 或 content: url(...)。
你必须从 iconfont.cn 项目页「复制代码」区域获取每个图标的 Unicode 值（注意是带反斜杠的转义形式，如 \e601），而不是「字体图标」标签页里显示的 HTML 实体（如 ）。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
content: "";（直接粘贴乱码字符，编码易错且不可维护） - 正确写法：
content: "\e601";（Unicode 转义，稳定、可读、支持 CSS 压缩） - 如果用 SCSS/Less，可用变量存 Unicode 值，但最终编译后仍为
\e601形式 -
font-family必须显式设为刚才定义的字体族名，否则系统会 fallback 到默认字体，显示成方框
.icon-home::before {
font-family: "iconfont-ali";
content: "\e601";
speak: none;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
在 Vue/React 组件中使用时常见的路径与作用域问题
单文件组件（SFC）里，CSS 部分的 url() 是相对于该 CSS 文件位置解析的，不是相对于组件文件，也不是相对于 HTML 入口。很多人把字体放错目录，或用了 ~assets/... 这类别名路径，导致构建后 404。
- Vue CLI 项目：字体放在
public/fonts/下，@font-face中用绝对路径/fonts/iconfont.woff2（注意开头的/） - Vite 项目：推荐放
public/fonts/，同样用/fonts/...；若放src/assets/，需配合new URL(..., import.meta.url)动态导入（仅适用于 JS 中创建样式，不适用于纯 CSS） - React + CRA：同 Vue CLI，
public/是安全区；不要在src/下 CSS 里写../public/fonts/...，CRA 不处理这种引用 - 全局样式需确保只注入一次，重复定义
@font-face不报错但浪费解析开销
图标显示异常时优先检查这三件事
字体加载成功 ≠ 图标能正常显示。常见黑屏、方块、错位，往往卡在细节。
- 打开浏览器 DevTools → Network 标签页，筛选
font，确认woff2等文件返回 200 且 size > 0KB；若 404，立刻核对路径和服务器静态资源配置 - 选中伪元素，在 Elements 面板看 computed 样式，确认
font-family最终生效值是你定义的"iconfont-ali"，且没有被其他规则覆盖 - 右键图标 → “检查元素”，看
content值是否正确渲染为 Unicode 字符（DevTools 里可能显示为小方块，但鼠标悬停 tooltip 会显示\e601）；若显示为空或原始字符串，说明content值写错了格式
Unicode 映射一旦生成就固定，但图标项目更新后，旧的 \e601 可能指向新图标——所以别手写 Unicode，每次更新务必重新复制。
