CSS - 精灵图和字体图标

---

前言

为了有效地减少服务器接收和发送请求的次数, 提高页面的加载速度, 出现了CSS精灵技术.

一、精灵图的使用

1. 精灵技术主要针对于背景图片使用 , 就是把多个小背景图片整合到一张大图中.
2. 移动背景图片位置, 用 background-position
3. 移动的距离就是这个目标图片的x和y坐标

二、字体图标

下载字体图标

http://icomoon.io
https://www.iconfont.cn

引入字体图标

1. 把下载包里面的fonts文件夹放入页面根目录下.
2. 字体声明

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?c9xd3i');
    src: url('fonts/icomoon.eot?c9xd3i#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?c9xd3i') format('truetype'),
        url('fonts/icomoon.woff?c9xd3i') format('woff'),
        url('fonts/icomoon.svg?c9xd3i#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

3. 使用字体图标
   复制这个图标
   
   直接在标签里面添加就可以.

追加字体图标

把压缩包里面的selection.json重新上传, 然后选中自己想要的新的图标, 重新下载压缩包, 并替换原来的文件.