丁鹿学堂前端培训：前端性能优化css篇（一）

css使用字体图标

使用字体图标的好处

1. 放大以后不会失真
2. 可以很方便设置图标的颜色
3. 字体图标比图片占用资源少，可以作为性能优化的点。

字体图标的使用

使用阿里巴巴矢量图标库可以使用字体图标。
1.进入阿里巴巴iconfont字体网站，选择自己想要的图标，加入到购物车。
2.点击购物车，选择下载代码
3.下载的是一个压缩文件，解压后把incofont.ttf 和iconfont.css放入到自己的项目文件里
4 在使用页面中引入css文件，使用的哪个图标，就去找对应的类名即可。
对应的类名在下载的demo_index.html里查找即可

"stylesheet" href="./iconfont.css">
 "iconfont icon-1">
1
2

css使用精灵图

精灵图又称雪碧图，来源于英文sprite，是一种图片合成技术，将各种小图片合并到一个大图片上，利用css的背景图定位显示不同的图标。

使用精灵图的好处

1.减小网页http请求的数量，加快网页响应速度，减少服务器压力
2.减少图片的总大小

具体使用

本质上是利用背景图定位显示不同的小图标。

    
1
2
3
4
5
6
7
8
9
10