比较 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 WebpackremovingTagAttrs 选项,可以在打包时批量去除图标本身的颜色,再通过 CSS fill 覆盖颜色

字体图标

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

SVG 在线转 iconfont

感谢

  • Camille Wu

参考文章

评论