iconfont（图标字体）

可以缩放的矢量图标。你可以使用CSS对它们进行修改:大小，颜色，阴影等。体积特别的小。可能几百个图标才几十KB。
优点：

高清保真，因为是SVG图形
灵活性，可以设置大小，颜色等
兼容性好，支持IE6
开源的字体库很多
减少HTTP请求

缺点：

维护自己的字体库麻烦一些
图表字体只能被渲染为单色的

使用中可能会遇到的坑：
1、webkit浏览器会在加缘加粗1个像素
这个问题在间距比较小的时候就会比较明显。解决文案是加一个font-smoothing的属性：-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
2、注意缓存：加版本号

iconfont 的 symbol引用(多色图标)

优缺点：

支持多色图标了，不再受单色限制
通过一些技巧，支持像字体那样，通过font-size,color来调整样式
兼容性较差，支持 ie9+,及现代浏览器
浏览器渲染svg的性能一般，还不如png

使用办法：
第一步：拷贝项目下面生成的symbol代码：在本地项目中引入iconfont.js(在线的可能读取不出来)
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
第二步：加入通用css代码（引入一次就行）：

<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
</style>

第三步：挑选相应图标并获取类名，应用于页面：

icon-xxx(点击Unicode/Font class/Symbol中的Symbol，然后对应的图标点击复制就可以)
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use>
</svg>

雪碧图

除了叫雪碧图外，它还有很多名字，css sprite, css 精灵等。原理就是将一些小图标合并到一张图片上，然后用css的背景定位来显示需要显示的部分。
优点：

减少对服务器的请求次数比如页面有五个图标，把他们放到一张背景图上，只需要加载一次。然后用css定位从这张图片来取就可以了；因为浏览器同一时间能够加载的资源数是一定的，IE 8是6个，Chrome是6个，Firefox是8个
提高页面的加载速度减少了页面的请求次数，自然会提高了页面的加载速度

缺点：

维护麻烦，如果修改其中的一张图，你需要修改整张图
高清失真，为了适应不同的分辨率，可能要准备多个规格的图片

SVG

SVG的兼容性，除了IE 8不支持，其它的都还好
有几种使用SVG的方法：
1. 直接copy到页面
<%@includefile=“loc-svg.jsp”%>
缺点是浏览器没办法缓存，同时会阻碍页面的加载。优点是由于是内联的，可以直接用CSS控制svg的样式
2. 使用embed/object
<embed src="loc.svg" width="100" height="200"/>
除此之外，还可以使用img标签，将svg的路径作为src属性，这种方法的缺点是没办法用CSS控制样式。还可以转化为base64的方式。
3. 合并SVG
通过一个个的symbol，将多个svg合在了一起，同时将每个symbol svg定义一个id，使用的时候会用到

<svg><symbolviewBox="0 0 101.557.9" id="active-triangle"><pathfill="#15c0f1"d="M10.4.5L50.7 57.1 1.1.5h99.3z"/><symbolviewBox="0 0 101.5 57.9"id="logo"><pathfill="#15c0f1"d="M120.4.5L50.7 57.1 1.1.5h99.3z"/>
</svg>

使用的时候通过外链的办法将svg引到页面上，如要用到上面定义的logo，通过“文件名#ID”的方式：

<svgviewBox="0 0 100 100"><usexlink:href="icon.svg#logo"></use>
</svg>

然而IE不支持外链，但是写个插件让IE支持，原理是检测到浏览器不支持外链的时候就将其外链替换成相应的svg内容。使用SVG的还有highCharts和d3.js等。

iconfont与雪碧图的优缺点相关推荐

css雪碧图及优缺点
[前言] 做开发的小伙伴可能经常遇到雪碧图,那么究竟什么是雪碧图呢? [简介] 官方解释: CSS雪碧图即CSS Sprite(精灵),在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将 ...
CSS 雪碧图及其优缺点
CSS Sprites简介:国内叫雪碧图或者雪碧精灵.它允许将网页中多个零星小图都包含到一张大图中去,减少每个图的 HTTP 请求来提高图片加载效率,通过 background-image.backg ...
在html中雪碧图的坐标怎么看,详解CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
python大佬教你爬虫反爬：破解雪碧图反爬
前言我们都知道,HTTP 协议即超文本传输协议,是 Web 应用的基础,HTTP 协议又是基于 TCP 协议的,而 TCP 连接的建立是需要时间和资源的.当网页加载时,会需要下载图片资源,如果有非常 ...
CSS Sprite雪碧图详解
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
【夯实基础--CSS】=＞高级技巧（雪碧图/滑动门/CSS三角形/字体图标(iconfont)等）
CSS高级技巧 CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
CSS 背景图标（雪碧图、精灵图、iconfont）
目录雪碧图(精灵图) icon-font 雪碧图(精灵图) 特点: 一个网站有很多背景图(一般是系统UI图片, 不是用户自己上传的那种)时, 会多次向服务器发起请求, 造成服务器压力. 为了解决这个 ...
雪碧图的概念及优缺点，以及行盒的简述
什么是雪碧图?它的优缺点是什么? 1.雪碧图的概念:实际是指CSS中的图片拼合技术,将多个背景图拼合在同一张图片上,在使用时按照需求对图片位置进行改动. 优点:当多个图片合成一张图片时,减少了加载网页 ...
【前端基础知识】精灵图/雪碧图的实现以及优缺点
精灵图/雪碧图的实现以及优缺点是什么? 为什么?(优点) 如何使用? 是什么? 精灵图也称雪碧图,就是很多张图片放在一张图片上,用户只需请求一张图片就可以拿到所有需要的图片.开发人员利用背景图的位置 ...

iconfont与雪碧图的优缺点

iconfont（图标字体）

iconfont 的 symbol引用(多色图标)

雪碧图

SVG

iconfont与雪碧图的优缺点相关推荐

最新文章

热门文章