比较 SVG 与字体图标 - 缺点与解决方案

如果要为网站增加矢量图标，其中两个选项是使用 SVG 和使用字体图标，两种方式各有千秋，以下是我个人做的比较。

SVG

在阅读这一部分前，可以先参考文章 HTML中嵌入SVG图片的N种方式，了解一下不同的 SVG 嵌入页面的方式。

缺点	解决方案
如果将 SVG 放在静态资源目录，通过路径引用至页面，SVG 将造成额外的 HTTP 请求	在 HTML 中内嵌 <svg> 标签
如果在 HTML 中内嵌 <svg> 标签，HTML 会显得杂乱且无法复用	使用 SVG Inline Loader for Webpack 可以用 require 的方式向 HTML 插入 SVG
图标本身带的颜色（类似 fill="#ccc"）无法覆盖	移除 SVG 本身的颜色。使用 SVG Inline Loader for Webpack 的 removingTagAttrs 选项，可以在打包时批量去除图标本身的颜色，再通过 CSS fill 覆盖颜色

字体图标

缺点	解决方案
因为字体图标本身是一个字符，所以会受到系统级反锯齿（如 ClearType 和 Retina）影响，导致本来锐利的小尺寸的图标边缘不锐利	使用 font-smooth 样式控制图标的反锯齿，在 Chrome 下测试没有成功，未找到更好的解决办法
当遇到网络较差，或者用户使用了屏蔽网页字体的插件时，图标会变成口口	在字体文件加载完成之前尝试隐藏所有图标
无法显示彩色图标	目前发现有网站是把彩色图标拆分成单色图标，再叠加显示，用 SVG 显然更方便
定位不准	这个大多数前端开发应该都有感触，典型就是复选框和文字标签对不齐，要检查图标的 CSS line-height，vertical-align，letter-spacing，word-spacing，display, 寻找对不齐的原因
维护（增加、删除图标）困难	使用阿里的 iconfont 服务来管理字体图标是很好的办法
对屏幕阅读器等辅助功能不友好	需要做适配，可以参考 Bulletproof Accessible Icon Fonts

SVG 在线转 iconfont

• https://icomoon.io/app/

图片转网站图标（favicon）工具

• https://www.websiteplanet.com/zh-hans/webtools/favicon-generator/

感谢

• Camille Wu

参考文章

• Inline SVG vs Icon Fonts [CAGEMATCH]
• HTML中嵌入SVG图片的N种方式