用@font-face加载自定义图标字体需声明font-family、正确设置src路径（相对css文件）、提供woff2/woff双格式、添加font-display: block，并用unicode码位配合::before+content调用。
怎么用 @font-face 加载自定义图标字体
直接用 @font-face 是最轻量、兼容性最好的方式，不需要依赖第三方图标库或构建工具。关键不是“能不能加”，而是字体格式和路径是否匹配。
- 必须提供至少
.woff2（现代浏览器）和.woff（兼容旧版）两种格式，IE9+ 才能稳定显示 -
src中的路径要相对于 CSS 文件位置，不是 HTML；本地开发时常见错误是写成./fonts/iconfont.woff却把 CSS 放在子目录里 -
font-family名称建议用中划线分隔（如"my-icon-font"），避免和系统字体冲突，也方便后续 CSS 选择器识别 - 别漏掉
font-display: block，否则图标可能闪动或延迟渲染
SVG 字体 vs Unicode 字体：选哪种方案
现在几乎没人真用 SVG 字体（.svg 格式字体），它已被 Chrome 38+ 废弃，且无法用伪元素 + content 控制单个图标。实际只用 Unicode 字体（.ttf/.woff）配合字符映射。
- Unicode 方案：每个图标对应一个私有 Unicode 码位（如
\ue601），用::before+content插入，支持 CSS 控制颜色/大小，但需维护字符表 - 不要试图用 ASCII 字符（如
a、x）当图标——容易被输入法、自动更正、SEO 抓取干扰 - 如果项目需要动态换图标或支持 RTL，优先考虑 inline SVG 或
<use></use>引用 sprite，而不是字体方案
如何生成可直接用的图标字体文件
用 iconfont.cn 在线生成最省事，但导出后仍需手动验证三件事：字体是否嵌入了全部图标、CSS 类名是否冲突、unicode 值有没有重复。
- 上传 SVG 时，确保每个文件只有一个
<path></path>，无渐变、滤镜、<defs></defs>—— 这些会被字体工具忽略 - 导出的
iconfont.css里，检查.icon-xxx::before { content: '\ue601'; }的\u值是否唯一；重复会导致多个图标显示成同一个 - 本地测试时，在 DevTools 的 Elements 面板里右键图标元素 → “Edit as HTML”，手动把
content改成另一个码位（如\ue602），看是否立刻切换图标——这是验证映射是否生效的最快方式
为什么图标突然不显示？常见断点排查顺序
字体图标失效很少是“完全不能用”，多数是局部环境或组合条件触发的隐性问题。
- 打开 Network 面板，过滤
woff，确认字体文件返回 200 且 size > 0；404 或空响应说明路径错，0 KB 常见于 Webpack 的file-loader没配type: 'asset' - 在 Elements 面板选中图标元素，看 Computed 标签页里
font-family是否命中你定义的字体名；没命中说明 CSS 优先级被覆盖，或@font-face加载失败 - 用
window.getComputedStyle(el).getPropertyValue('font-family')在 Console 里查真实计算值，比肉眼判断更可靠 - 移动端 Safari 对
font-display: swap处理不稳定，若图标偶发空白，换成block或删掉该声明再试
真正麻烦的不是生成字体，而是让每个图标在所有上下文里都按预期渲染——比如伪元素的 vertical-align、父容器的 line-height、甚至字体抗锯齿开关（macOS 的 -webkit-font-smoothing）都会影响对齐和清晰度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
