原文：https://github.com/blog/2112-delivering-octicons-with-svg

GitHub.com 现在不再使用字体来输出图标了。我们把代码库中所有的 Octicon 替换成了 SVG 版本。虽然这些改动并不那么明显，但你马上就能体会到 SVG 图标的优点。

Octicon 上的对比

切换到 SVG 以后，图标会作为图片渲染而非文字，这使其在任何分辨率下都能很好地在各种像素值下显示。可以比较一下左侧放大后的字体版本和右侧清晰的 SVG 版本。

为何使用 SVG？

图标字体渲染问题

图标字体从来只是一种 hack。我们之前使用一个自定义字体，并将图标作为 Unicode 符号。这样图标字体就可以通过打包后的 CSS 来引入。只要简单地在任意元素上添加一个 class，图标就可以显示出来。然后我们只使用 CSS 就能即时改变图标的尺寸和颜色了。

不幸的是，虽然这些图标是矢量图形，但在 1x 显示屏下的渲染效果并不理想。在基于 WebKit 的浏览器下，图标可能会在某些窗口宽度下变得模糊。因为此时图标是作为文本输出的，本来用于提高文本可读性的次像素渲染技术反而使图标看起来糟糕许多。

对页面渲染的改进

因为我们直接将 SVG 注入 HTML，所以不再会出现图标字体下载、缓存、渲染过程中出现的样式闪动（这也是我们选择这种方式更主要的原因）。

页面闪动

关于web字体图标，市面上已经有一些好的在线工具来管理和生成，iconfont和icomoon都可以将svg图标转换成font图标以便在网页上使用。但是如果你想要更多：ttf、woff、eot、otf统统拿来用，svg、图片统统可导入，图标效果实时可调整，只需要在线动动鼠标，就可以完成呢。 那就需要一个好用的在线font编辑工具，FontEditor，你需要的东西都在这里。

Fontmin 是一个纯 JavaScript 实现的字体子集化方案。

提供了 ttf 子集化，eot/woff/svg 格式转换，css 生成 等功能，助推 webfont 发展，提升网页文字体验。

See the Pen Fontmin Example by Firede (@firede) on CodePen.

关于字体，长久以来，前端工程师们 进行了各种探索：图片，siFR，Cufon，@font-face ...

@font-face 似乎是个不错的方案，Adobe TypeKit , Google Fonts 都在使用这个方案。但是，中文字体 因为字符集巨大，浏览器、操作系统国情 等原因，发展受到了很大限制。所以，时至今日，大多数网站的中文字体还是上图片。图片字体的悲伤：SEO 不友好，不具备的可编辑性，不支持 Accessibility 原则 ... 差评！

随着 PC 的更新换代，操作系统的升级，移动设备的崛起，@font-face 兼容性已经不足为患。ttf, svg, eot, woff 总有一款适合您。那么剩下的主要问题就是中文字符集过大了。

以上，我们的解决方案就是：基于 edp 和 fontmin，按需提取字型，多格式转换，自动化构建字体。