sprite&iconfont

简述：CSS雪碧图是一种处理网页背景图像的方式，将一个页面涉及到的所有零星背景图像都集中到一张大图。

使用雪碧图的好处：有效减少服务器接收和发送请求的次数，提高了页面的加载速度。

使用：bg-image、bg-repeat、bg-position；

给div大小：所需背景图像的大小；

再通过background-position: x y; 进行移动。

 

---

---

 

 

字体图标 : 可以做出与图片一样的事情，如改变透明度、旋转度…

本质:文字 so 可以改颜色、阴影、大小等效果 besides兼容性好

各种字体图标字库

Icomoon字库：http://www.icomoon.io

阿里icon font字库：http://www.iconfont.cn/

字体图标的使用：

Step1：下载字体解压压缩包

将fonts放到网站目录中；

Step2：css中声明自定义字体 (@font-face{…})

Step3：定义字体的样式 （盒子引用字体再各自定义样式也ok）

Step4：盒子应用样式

 

转载于:https://www.cnblogs.com/jinfengJeff/p/11101290.html