新趋势：使用 inline SVG 取代 icon font

本文为译文，原文标题：inline SVG VS icon font，链接：via 。

译者注：本文只比较以 inline 方式写入文档流的 SVG 方案，不讨论以 background-image 方式写入 CSS 的方案。

构建网站的图标系统有很多选择：如果 icon 使用位图，那么可以选择 CSS Sprite ；如果使用矢量图标，也有很多方案，其中两种方案是 inline SVG 或 icon font 。

针对二者的特点，我们来做一下比较。

图标是矢量的

矢量图标有很大的优势：可调整大小而不失品质，在视网膜屏幕上也可以清晰显示，文件尺寸也非常小。

icon font	inline SVG
浏览器认为这是文本，所以会对其使用抗锯齿。这可能导致图标不如你想象的那么锐利。	真正的矢量

举一个我个人最近的例子，在 CodePen 项目中，一些 icon font 明显比那些 SVG 要模糊。（译者注：其实通过固定字号的 henting 可以解决这个问题）

CSS 控制

icon font	inline SVG
您可以通过 CSS 控制大小（ 使用 font-size ）， 颜色，阴影，旋转等。	和 icon font 一样，你可以使用同样的控制器。更赞的是，你可以： 1. 控制图标的各个部分 2. 使用 CSS 控制 SVG 特有的属性，如描边属性。

这个回合里，SVG 的最大亮点是，这种格式的图标可以是彩色的。

定位

icon font	inline SVG
定位 icon font 可能是一个令人沮丧的过程。这些图标是通过伪元素插入的，它依赖于line-height ， vertical-align ，letter-spacing ， word-spacing ，字体字形设计（它的四周有留白吗？它有字距信息吗？）。如果字符有相关特效，伪元素将会显示这些特效	SVG 的显示尺寸就是它本身的尺寸

诡异的问题

icon font	inline SVG
icon font 可能会失效，因为： 1. 它被跨域加载，而没有使用正确的 CORS 头信息，Firefox不喜欢这样。 2. 因为任何原因，字体文件加载失败（网络抽风，服务器故障等）。 3. 一些奇怪的 Chrome 漏洞会跳过 @font-face 规则，并使用fallback 的字体取代它。 4.  一些神奇的浏览器不支持 @font-face。 在所有的原因中，字体加载失败是最常见的。	inline SVG 是在文档流中，如果浏览器支持，它就会显示。

语义

icon font	inline SVG
如果是正确地使用，你会 通过空的伪元素 <span>显示你的图标。这是否合适、是否符合语意，取决于你如何看待这样类写法。	图标是小的图像。<svg>的语意是「我是个图片。」这看起来似乎好些。

无障碍（针对残障人士）

icon font	inline SVG
使用 icon font 必须要非常小心，以确保做到无障碍访问。基本上，你需要做到这篇文章 里所描述的。你必须一直很小心，以确保该图标本身不可朗读（但别的文本部分可读），并且，这种情况难以检测故障。	研究表明，使用元素的适当的组合和属性，如 <title><desc> 和 aria-labelledby 可以很好地透过浏览器传达信息。并且，没有奇怪的故障状态。

易用

icon font	inline SVG
使用预创建的 icon-font 实际上是不专业不负责的（因为有太多闲置图标白白占用空间），而自己创建 icon font 从来不是一件容易的事。我认为最好的工具是PICTOS Server （仅限于PICTOS 自家的图标），以及 IcoMoon（免费登录以保存项目）。Fontello 有一个API，可惜没有看到基于它制作的好工具。	inline SVG 更容易，因为如果需要你可以完全手动制作。或者使用类似IcoMoon工具（无论哪种输出方式）。或者使用这个 构建工具 。

浏览器兼容性

icon font	inline SVG
很广泛。即使是 IE 6。	还不错，问题出在 IE 8 和 Android 2.3-。可以使用 fallback 规则，但不完美。

赢家

这一切都取决于浏览器支持。如果你的项目只兼容到 IE9+/安卓3+，inline SVG几乎在所有方面都比 icon font 要好。如果您需要更广泛的浏览器兼容性，我觉得 inline SVG 方案会带来很多麻烦，所以不建议尝试（比如文件需要一个 PNG 副本，需要插入额外的元素以显示降级后的 PNG 版本，隐藏对应 SVG 元素…这太麻烦了） 。

---

原文链接：Inline SVG vs Icon Fonts