新趋势：使用 SVG 替代 icon font

本文为译文，原文标题：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 可以解决这个问题）

SVG 和 icon font 比较

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 的显示尺寸就是它本身的尺寸

看看伪元素如何超出了它本身的界定框。

SVG 的界定框的大小就是 SVG 本身的大小。

诡异的问题

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

• inline SVG
  inline SVG 是在文档流中，如果浏览器支持，它就会显示。

语义

• icon font
  如果是正确地使用，你会 通过空的伪元素
  显示你的图标。这样是否合适或者符合语意的，取决于你如何看待这类写法。

• inline SVG
  图标是小的图像。 的语意是说“我是个图片。”——这看起来似乎好些。

无障碍（针对残障人士）

• icon font
  使用 icon font 必须要非常小心，以确保做到无障碍访问。基本上，你需要做到这篇文章 里所描述的。你必须一直很小心，以确保该图标本身不可朗读（但别的文本部分可读）（译者注：浏览器会认为 icon font 是「文本」从而朗读，而视觉障碍人士并不需要这些无意义的「文本」）。

• inline SVG
  我不是专家，但研究表明，使用元素的适当的组合和属性，如