前端经验

字体图标的使用

字体图标的优势

1. 性能好，可以减少http请求。
2. 解决图标放大失真问题。
3. 解决图片占用内存问题。

图片格式分类

1. 位图图片：bmp，jpg，gif，png。（大小改变时可能出现锯齿状）。
2. 矢量图图片：以svg格式为代表，可缩放矢量图形（Scalable Vector Graphics）。SVG是一种使用XML格式定义的图像。（颜色和字体可选范围较小）

字体图标出现的背景

雪碧图处理图标

• 首先载入带有所有图标的图片。
• 利用定位截取想要的图标。

.bgImg{
	background: url(img/logos.png);
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	background-repeate: no-repeate;
	width: 16px;
	height: 16px;
}
.help{
	background-position: -48px -150px;
}

优势：当有大量的小图标时，可减少请求次数，网页加载速度更快，减少阻塞网络的情况，用户体验不好。

缺点：需要先设置背景图片，再通过精灵图中小图标的宽度和位置，设置对应的div宽高和背景定位坐标。设计人员后期的维护难度较大，编码也比较难（对定位精准性要求较大）。

字体图标的使用

• 一般会再建一个新的css文件来设置font-family和字体颜色，一来可以整体设置，二来当新字体图标覆盖时，文字的样式可以保持原先的状态。

星级评分