本文为译文，原文标题：inline SVG VS icon font，链接：via 。
如果你正在为网站构建图标系统，你会有很多选择。如果你的 icon 需要使用位图，那么可能会选择 CSS Sprite 。如果使用矢量图标（近期更普遍使用的方案），你也会有一些选择，其中的两种方案是使用 inline SVG 或 icon font 。
针对二者的特点，我们来做一下比较。
（译者住：本文只比较以 inline 方式写入文档流的 SVG 方案，不讨论以 CSS background 写入背景图的方案。）
图标是矢量的
矢量图标有很大的优势：可调整大小而不失品质，在视网膜屏幕上也可以清晰显示，文件尺寸也非常小。
icon font：
浏览器认为这是文本，所以会对其使用抗锯齿。这可能导致图标不如你想象的那么锐利。inline SVG：
真正的矢量
举一个我个人最近的例子，在 CodePen 项目中，一些 icon font 明显比那些 SVG 要模糊。（译者注：其实通过固定字号的 henting 可以解决这个问题）
CSS 控制
icon font
您可以通过 CSS 控制图标大小（ 使用font-size）， 颜色，阴影，旋转等。inline SVG
和 icon font 一样，你可以使用同样的控制器。更赞的是，你可以 1）控制图标的各个部分 2）使用 CSS 控制 SVG 特有的属性，如描边属性。
这个回合里，SVG 的最大亮点是，这种格式的图标可以是彩色的。
定位
icon font：
定位 icon font 可能是一个令人沮丧的过程。这些图标是通过伪元素插入的，它依赖于line-height，vertical-align，letter-spacing，word-spacing，字体字形设计（它的四周有留白吗？它有字距信息吗？）。如果字符有相关特效，伪元素将会显示这些特效inline SVG
SVG 的显示尺寸就是它本身的尺寸
诡异的问题
icon font
icon font 可能会失效，因为：1. 它被跨域加载，而没有使用正确的 CORS 头信息，Firefox不喜欢这样。 2. 因为任何原因，字体文件加载失败（网络抽风，服务器故障等）。3. 一些奇怪的 Chrome 漏洞会跳过 @font-face 规则，并使用 fallback 的字体取代它。4. 一些神奇的浏览器不支持 @font-face。
在所有的原因中，字体加载失败是最常见的。inline SVG
inline SVG 是在文档流中，如果浏览器支持，它就会显示。
语义
icon font
如果是正确地使用，你会 通过空的伪元素<span>
显示你的图标。这样是否合适或者符合语意的，取决于你如何看待这类写法。inline SVG
图标是小的图像。<svg>的语意是说“我是个图片。”——这看起来似乎好些。
无障碍（针对残障人士）
icon font
使用 icon font 必须要非常小心，以确保做到无障碍访问。基本上，你需要做到这篇文章 里所描述的。你必须一直很小心，以确保该图标本身不可朗读（但别的文本部分可读）（译者注：浏览器会认为 icon font 是「文本」从而朗读，而视觉障碍人士并不需要这些无意义的「文本」）。inline SVG
我不是专家，但研究表明，使用元素的适当的组合和属性，如<title>
、<desc>和aria-labelledby可以很好地透过浏览器传达信息。并且，没有奇怪的故障状态。
易用
icon font
使用预创建的 icon-font 实际上是不专业不负责的（因为有太多闲置图标白白占用空间），而自己创建 icon font 从来不是一件容易的事。我认为最好的工具是PICTOS Server （仅限于PICTOS 自家的图标），以及 IcoMoon（免费登录以保存项目）。Fontello 有一个API，可惜没有看到基于它制作的好工具。inline SVG
inline SVG 更容易，因为如果需要你可以完全手动制作。或者使用类似IcoMoon工具（无论哪种输出方式）。或者使用这个 构建工具 。
浏览器兼容性
icon font
很广泛。即使是 IE 6。inline SVG
还不错，问题出在 IE 8 和 Android 2.3-。可以使用 fallback 规则，但不完美。
赢家
这一切都取决于浏览器支持。如果你的项目只兼容到 IE9+/安卓3+，inline SVG几乎在所有方面都比 icon font 要好。如果您需要更广泛的浏览器兼容性，我觉得 inline SVG 方案会带来很多麻烦，所以不建议尝试（比如文件需要一个 PNG 副本，需要插入额外的元素以显示降级后的 PNG 版本，隐藏对应 SVG 元素…这太麻烦了） 。
