用@font-face+Unicode字体图标需确保woff2/woff/eot格式按序声明、font-weight/font-style设为normal、font-display:swap，并严格匹配字符码位与字体文件私有区字形，否则显示方块。
直接用 @font-face + Unicode 字符是最可控、最轻量的字体图标方案，但必须注意字体文件格式、CSS 声明顺序和字符映射一致性，否则图标会显示为方块或乱码。
怎么让自定义字体图标在所有浏览器里都显示出来
关键不是“支持所有浏览器”，而是“覆盖主流场景下最可能出问题的环节”。.woff2 是首选格式，压缩率高、兼容性好（Chrome 36+、Firefox 39+、Safari 10+、Edge 14+），但 IE11 只认 .eot 和 .woff；所以声明时得按降序兜底：
- src 里先写
url('iconfont.woff2') format('woff2')，再补url('iconfont.woff') format('woff')，最后加url('iconfont.eot')（IE专用） - 不要省略
font-weight和font-style，哪怕都是normal，否则 Safari 有时会忽略该字体族 -
font-display: swap必须加上，否则图标加载前会空白几帧，用户看到文字内容闪动
为什么用了 @font-face 图标还是显示成方块
常见原因不是字体没加载，而是字符没对上。字体图标本质是把 SVG 路径转成了某个 Unicode 码位（比如 U+E600），你 HTML 里写的字符必须严格匹配这个码位：
- 如果用的是 iconfont.cn 下载的包，打开
demo_fontclass.html，找到对应图标的 class（如icon-home），它背后实际是伪元素 +content: "\e600"，不是直接写文字 - 如果自己用 FontCreator 做字体，必须确认：你在字形编辑器里把图标画在了 U+E600 这个位置，且导出时勾选了“包含私有区字符”（Private Use Area）
- 浏览器开发者工具里检查元素，看 computed 样式中
font-family是否生效，再看content值是否被正确解析 —— 如果显示为"\e600"但没渲染，大概率是字体文件里根本没这个码位的字形
i 标签里直接写 Unicode 字符能用吗
能，但极不推荐。例如 看似简单，实际埋了三个坑：
- HTML 实体写法（
）在某些构建工具（如 Vite、Webpack）里会被转义或截断，变成纯文本E600 - 无法统一控制图标尺寸和颜色：每个
i都得单独加style="font-size:24px; color:#333;"，维护成本高 - 语义错误：
i表示斜体，不是图标容器；应该用span或带语义的svg，至少加aria-hidden="true"
正确做法是统一用 class 控制，比如 ，然后在 CSS 里用伪元素注入字符：.icon-home::before { content: "\e600"; }。
字体图标和 inline SVG 哪个更值得投入
取决于你的项目规模和交互需求。字体图标适合「大量同风格小图标 + 需要动态换色/缩放」的场景，比如后台系统的菜单栏、按钮图标；inline SVG 更适合「单个图标需响应事件、动画或精细路径控制」的情况，比如带 hover 缩放的分享按钮、可点击的关闭叉号。
容易被忽略的一点是：字体图标一旦引入，整个字体文件（哪怕只用 3 个图标）都会下载；而 inline SVG 是按需加载，体积更可控。如果你项目里总共就 5 个图标，别折腾字体，直接复制 SVG 代码进 HTML —— 简单、可靠、无额外请求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
