优先使用svg，请查看以下比较。
1、渲染方式不同
icon font：采用的是字体渲染，icon font在一倍屏幕下渲染效果并不好，在细节部分锯齿还是很明显的。
SVG：它是传统图片格式的一种，自身提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果等能力，它还具备了传统图片没有的矢量功能，在任何高清设备都很高清。在浏览器中使用的是图形渲染，所以就是实实在在的路径。
2、网络加载
iconfont：icon font 可能会失效，因为：
它被跨域加载，而没有使用正确的 CORS 头信息（Firefox和IE9不支持对icon font字体的跨域访问，需要在图标字体文件所在服务器配置Header参数“Access-Control-Allow-Origin”允许当前域名才可以。而且，经过验证，必须将参数“Access-Control-Allow-Origin”配置为“”才可以，配置为“.当前域名”并不可以，不知道啥原因）。
因为任何原因，字体文件加载失败（网络抽风，服务器故障等）。
Chrome一些奇怪的漏洞会跳过 @font-face 规则，并使用 fallback 的字体取代它。
一些浏览器不支持 @font-face。在所有的原因中，字体加载失败是最常见的（如果字体加载失败，会出现下图所示情况，这常常会让人抓狂）。
SVG：inline SVG 是在文档流中，只要浏览器支持，它就会显示（这会让我们对自己的代码更自信）。
3、性能
SVG 性能 优于 icon font
icon font主要在页面用Unicode符号调用对应的图标，这种方式不管是浏览器，搜索引擎和对无障碍方面的能力都没有SVG好
文章来源地址https://www.toymoban.com/diary/web/181.html
文章来源：https://www.toymoban.com/diary/web/181.html
到此这篇关于svg与 iconfont字体图标对比,应该优先选择哪个？的文章就介绍到这了,更多相关内容可以在右上角搜索或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
