svg与 iconfont字体图标对比,应该优先选择哪个?

 

原标题:svg与 iconfont字体图标对比,应该优先选择哪个?

优先使用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好




教你如何每天领取饿了么红包,饿了么优惠卷,饿了么会员?

教你如何每天领取美团红包,美团优惠卷,美团会员?

其他相关文章
    领支付宝红包赞助服务器费用
    微信公众号:小猪波罗蜜
    关注公众号,回复999,可联系站长解答疑问哦。每天分享更多有趣的事儿,有趣有料!
    99人已关注

    觉得文章有用就打赏一下文章作者

    支付宝扫一扫打赏

    微信图片_20190322181744_03.jpg

    微信扫一扫打赏

    请作者喝杯咖啡吧~

    支付宝扫一扫领取红包,优惠每天领

    二维码1

    zhifubaohongbao.png

    二维码2

    zhifubaohongbao2.png