丁鹿学堂前端培训：前端性能优化css篇（一）
css使用字体图标
使用字体图标的好处
- 放大以后不会失真
- 可以很方便设置图标的颜色
- 字体图标比图片占用资源少，可以作为性能优化的点。
字体图标的使用
使用阿里巴巴矢量图标库可以使用字体图标。
1.进入阿里巴巴iconfont字体网站，选择自己想要的图标，加入到购物车。
2.点击购物车，选择下载代码
3.下载的是一个压缩文件，解压后把incofont.ttf 和iconfont.css放入到自己的项目文件里
4 在使用页面中引入css文件，使用的哪个图标，就去找对应的类名即可。
对应的类名在下载的demo_index.html里查找即可
<link rel="stylesheet" href="./iconfont.css">
<i class="iconfont icon-1"></i>
css使用精灵图
精灵图又称雪碧图，来源于英文sprite，是一种图片合成技术，将各种小图片合并到一个大图片上，利用css的背景图定位显示不同的图标。
使用精灵图的好处
1.减小网页http请求的数量，加快网页响应速度，减少服务器压力
2.减少图片的总大小
具体使用
本质上是利用背景图定位显示不同的小图标。
<style>
.spriticon{
background-image: url(../imgs/xx.png);
background-repeat: no-repeat;
background-position: -200px 90px;
display: inline-block;
width:100px;
height: 100px;
}
</style>