2.7css精灵图 字体图标 三角 用户界面样式 布局技巧 文字溢出省略号

精灵图（sprites）

精灵图的目的：为了有效减少服务器接受和发送请求的次数，提高页面的加载速度

background-position: x y;

使用精灵图核心：

1. 精灵图技术针对背景图片使用。把多个小背景图片合到一张大图片中
2. 移动距离就是这个目标图片的x和y坐标，且精灵图一般都是负值（一般情况都是往左往上移动，所以数值是负值）
3. 使用精灵图时要精确测量每个小背景图片的大小和位置

精灵图有诸多优点，但缺点很明显：

1. 图片文件还是较大
2. 图片本身放大和缩小会失真
3. 一旦图片制作完毕想要换非常复杂

字体图标

字体图标的优点：

1. 轻量级：一个图标字体要比一系列图像小，一旦字体加载，图标可以马上渲染出来，减少了服务器请求
2. 灵活性：本质是文字，可以随意改变颜色，产生阴影、透明效果、旋转等
3. 兼容性：几乎支持所有浏览器

注意：字体图标不能代替精灵技术，只是对工作中图标部分的提升和优化

总结：1、如果遇到结构和样式比较简单的小图标，就用字体图标

1. 如果遇到结构和样式复杂一点的小图片，就用精灵图

1. 字体图标下载：

  icommon字库、阿里iconfont字库

1. 字体图标引入（引入html页面）：

下载完毕之后，注意原先的文件不要删，后面会用。

1. 把下载包里面的 fonts 文件夹放入页面根目录下

（2）在 CSS 样式中全局声明字体：

简单理解把这些字体文件通过css引入到我们页面中。

一定注意字体文件路径的问题。

@font-face {

font-family: 'icomoon';

src: url('fonts/icomoon.eot?7kkyc2');

src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),

url('fonts/icomoon.ttf?7kkyc2') format('truetype'),

url('fonts/icomoon.woff?7kkyc2') format('woff'),

url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');