## 精灵图:
项目中将多张小图片,合并成为一张大图片,这张大图片称为精灵图
精灵图的优点:
可以减少服务器发送次数,减轻服务器的压力,提高页面加载速度
字体图标
使用字体图标技巧实现网页中简洁的图标效果
字体图标的优点
- 灵活性:可以灵活的修改样式(尺寸,颜色等)
- 轻量级:体积小,渲染快,降低服务器请求次数
- 兼容性:几乎兼容所有主流浏览器
- 使用方便
字体图标的使用:
步骤一:复制相关文件到本地(fonts)目录下,并且引入字体图标css文件.
步骤二:标签使用字体图标
使用字体图标的几种方式:
- 类名:
- 引入字体图标样式表
调用图标对应的类名,必须调用2个类名
- iconfont类:基本样式,包含字体的使用等
- icon-xxx:图标对应的类名
2.unicode编码
- html
- css
3.在线引入
- 复制链接后,记得添加http:或https:
4.伪元素
- 通过查看iconfont.css文件
常用的图标库:
Iconfont：www.iconfont.cn/ 阿里巴巴字体库
字体包下载步骤:
- 登录图标库
- 选择图标,加入购物车
- 进入购物车
- 添加到项目
- 下载到本地(或在线引入)
