图标字体 101

图标字体是一种字样，其中的字形——通常是字母和数字——被替换为象形符号。图标字体不渲染字母"A"，而是渲染一个主页图标、搜索放大镜或购物车图标。

由于图标存储在字体文件中，它们的行为与文字完全一样。你可以用 font-size 将其缩放到任意大小，用 color 改变颜色，添加文字阴影，应用 CSS 过渡，甚至为其添加动画——而无需触碰任何一个图片文件。

这种方式带来了几个实际好处：

• 分辨率无关——矢量轮廓在任何屏幕密度下都能清晰缩放
• 极小的体积——一个压缩字体文件替代了数十个独立图片资源
• CSS 控制——颜色、大小、阴影、不透明度和悬停状态都可以用文字样式免费实现
• 单次 HTTP 请求——整个图标集通过一次网络往返加载完毕

在早期网络中，开发者依赖单独的图片或 CSS 图片精灵——大型合成图片，其中每个图标占据一个固定的矩形区域。精灵减少了 HTTP 请求，但很脆弱：添加或调整图标意味着重新生成整个精灵表并手动更新像素偏移量。

2012 年前后，Font Awesome 和 IcoMoon 等项目推广了一种更简洁的替代方案：将图标打包为映射到 Unicode 私有使用区的字体字形。设计师只需更改一个 @font-face 声明即可替换整套图标集，开发者可以用与文字相同的 CSS 来控制图标样式。这项技术迅速普及，并仍然是采用单色图标的设计系统的可靠、低开销之选。

十多年来，"图标字体 vs 内联 SVG"的争论一直是前端讨论的常见话题。两种方式都有效——正确的选择取决于你的项目需求。

图标字体

• 单次 HTTP 请求——一个字体文件提供所有图标
• 极简 CSS 样式——像普通文字一样修改 color、font-size 和 text-shadow
• 仅支持单色——每个字形只支持单一填充色
• 即插即用——添加一个样式表链接，使用 CSS 类，搞定

内联 SVG

• 多色支持——每条路径可以有独立的填充、描边或渐变
• 默认无障碍——<title> 和 aria-label 为屏幕阅读器提供真实语义
• 可单独缓存——未使用的图标永远不会被下载
• 精细控制——对单条路径添加动画，为每个元素应用滤镜

SVG 精灵

• 将多个 SVG 合并到单个 <symbol> 精灵表
• 通过 <use href="#icon-name"> 引用图标
• 兼具两者优点——单次请求、多色、无障碍——但需要更复杂的构建管道

图标字体可以打包为五种文件格式，各有不同的压缩方式、浏览器支持和使用场景。以下是一目了然的对比：

不确定应该包含哪些格式？使用这个实用决策指南：

• 只选一种——使用 WOFF2。它提供最佳压缩（Brotli），覆盖 97%+ 的浏览器。
• 需要支持 IE 11——使用 WOFF2 + WOFF。WOFF 覆盖不支持 Brotli 解码的剩余浏览器。
• 需要支持 IE 8——使用 WOFF2 + WOFF + EOT。EOT 是 Internet Explorer 6-8 能理解的唯一格式。
• 桌面应用——使用 TTF。它是 Windows、macOS 和 Linux 上操作系统级字体渲染的原生格式。
• 调试字体问题——检查 SVG Font。其 XML 结构人类可读，便于验证字形路径和元数据。

深入了解每种格式，掌握其内部机制、浏览器兼容性和最佳实践：

了解如何在项目中使用这些格式：