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:盒子应用样式