CSS精灵图与字体图标

CSS精灵图与字体图标

1. 精灵图

当用户访问一个网站时，须要向服务器发送请求，网页上的每张图像都要通过一次请求才能展示给用户。然而，一个网页中每每会应用不少小的背景图像做为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大下降页面的加载速度。为了有效地减小服务器接受和发送请求的次数，提升页面的加载速度，出现了CSS精灵技术。

精灵图主要针对与小的背景图片使用。咱们在网页中看到的一些小图片，好比下图中圈起来的部分

当你去查看原图时，会发现显示出来的是这样的

这就是精灵图的应用。使用精灵图时主要经过background-position调整坐标来显示不一样的小图案。

默认精灵图的左上角对齐坐标的原点

当要移动精灵图来显示不一样的图案时，只能往X的负半轴（左方）和Y的负半轴（上方）移动。对于精灵图而言是往左上角移动了，故X坐标和Y坐标都应该为负数。

2. 字体图标

2.1 字体图标的产生

使用场景：主要用于显示网页中通用、经常使用的一些小图标。

精灵图虽然有不少优势，可是缺点也很明显：

1. 图片文件仍是比较大的
2. 图片自己放大和缩小会失真
3. 一旦图片制做完毕想要更换很是复杂

此时，字体图标iconfont的出现很好的解决了以上的问题。

字体图标展现的是图标，本质属于字体。

2.2 字体图标的优势

1. 轻量级：一个图标字体比一系列的图像要小，一旦字体加载了，图标就会立刻渲染出来，减小了服务器请求。
2. 灵活性：本质实际上是文字，能够随意改变颜色、产生阴影、透明效果、旋转等等。
3. 兼容性：几乎支持全部的浏览器。

注：字体图标不能替代精灵技术，只是对工做中图标部分技术的提高和优化。

总结：

• 结构和样式比较简单的小图标，就用字体图标
• 结构和样式复杂一点的，就用精灵图

2.3 字体图标的使用

2.3.1 字体图标的下载

这里推荐阿里妈妈M2UX的一个iconfont字体图标字库，这个是免费的，包含了淘宝图标库和阿里妈妈图标库。可使用AI制做图标上传生成。

http://www.iconfont.cn

打开以后是这样的

登陆支持GitHub帐号登陆和新浪微博登陆，要登陆以后才能下载图标。

找到须要的图标后，添加到购物车中，方便后续一块儿打包下载。

上图是购物车里的图标，下面有三种选择：

1. 添加至项目：将选中的图标添加到云端的项目中，方便多人协做，也不会弄丢。
2. 下载素材：将选中的图标下载到本地中。能够根据本身的需求选择颜色、像素、图标格式。

3. 下载代码：经过代码来引入字体图标。下载后打开压缩包里的html文件，里面有引入的几种方法的说明。注意下载代码后要将解压后的文件夹放到你的项目的font文件夹中！否则会引入不成功

2.3.2 字体图标的在线使用

这种方法方便修改每一个图标的样式，并且也方便添加和删除图标，还能多人协做，也能转让项目，我的推荐使用这种方法。

首先点进上方导航栏的“资源管理”->“个人项目”

经过“查看在线连接”，生成代码，将代码复制到你的项目的css文件中。这里也是有三种引入方式，自行选择。