为什么会有iconfont，怎么产生的？和图片相比他有什么优势？
一、为什么会有 iconfont？它是怎么产生的？
早期网页需要图标的时候，大家都是直接用 图片（png、jpg、gif）。 但是问题很快暴露出来：
- 图标尺寸稍有变化就会 模糊
- 多套图标适配不同分辨率（1x/2x/3x）非常 麻烦
- 图标颜色要换？只能重新出图 —— 极其低效
- 一堆小图标会导致 大量 HTTP 请求，严重影响性能
👉 于是设计和前端开始找：有没有一种方式，让图标像文字一样自由缩放、随意变色、无损清晰，还能合并成一个文件？
答案：用“字体”来存图标！
字体本质上就是一个个矢量图。 既然文字能无损缩放、单色、轻量……那我们把图标也“当成字体的字”来处理不就行了吗？
于是就诞生了 icon font（图标字体）。
大概从 2010 年以后，随着 WebFont 技术成熟，iconfont 完整发展起来，并被 Bootstrap、FontAwesome 等推广。
二、iconfont 是如何实现的？
核心思路：
- 把每个图标以 SVG 矢量形式保存
- 把这些 SVG 做成字体文件（ttf、woff、woff2）
- 每个图标对应一个字符编码（如
\e601） - 用 CSS 来显示这个字符，视觉上看起来就是一个图标
你使用的时候就像这样：
或者：
这就是 iconfont 的本质。
三、iconfont 相比图片有什么优势？
下面全部都很关键，你前端开发肯定会用得到👇
✅ 1. 无损缩放，永远不会模糊
因为图标是矢量的。
无论在 Retine 屏、高分屏、8k 显示器……都 永远锐利清晰。
图片（png/jpg）如果放大就模糊，而 iconfont 不会。
✅ 2. 文件极小，性能很好
一个 iconfont 文件里可能打包几十到几百个图标，但只需要：
- 1 个 HTTP 请求
- 文件只有几 KB 到几十 KB
相比大量 png 图片：
- 每个图片都会走一次 HTTP 请求（除非合成雪碧图）
- 总量也大得多
✅ 3. 可以像文字一样用 CSS 调样式（非常灵活）
比如你要修改图标颜色，只需要：
不用让设计重新出图。
动画也能随便加，比如旋转图标：
✅ 4. 兼容性好（低版本浏览器也能用）
早期移动端、IE8 靠图片是痛点； 但字体技术支持非常早，iconfont 能兼容不少古老浏览器。
✅ 5. 天然支持多分辨率、多设备
不用再出：
- @1x
- @2x
- @3x
iconfont 自动适配所有设备。
四、那现在还有必要用 iconfont 吗？
有，但比过去 使用场景变窄了。
因为现在：
- SVG 图标 更灵活（支持多色、可直接嵌入、无依赖）
- 各 UI 库（Element Plus / Ant Design / Vant）都用 SVG icon
所以现在图标方案是：
| 图标方式 | 特点 | 使用趋势 |
|---|---|---|
| iconfont（图标字体） | 单色、轻量、高兼容性 | 仍然常用，但逐渐减少 |
| SVG Icon（推荐） | 多色、可控性强、现代 | 主流方案 |
| PNG/JPG | 位图、易模糊 | 仅剩图片类图标 |
五、总结一句话
iconfont 的出现，是为了让图标像文字一样：可缩放、可变色、可控、性能好。
它解决了图片图标的：
- 模糊
- 多套分辨率
- 样式不灵活
- 请求多、性能差
但是在今天，SVG 图标比 iconfont 更强，iconfont 更多作为兼容方案继续存在。