web之精灵图与字体图标的使用

精灵图

sprite

为什么会有精灵图的出现呢？

​ 在一个网页中，我们会用到各式各样的图片

  • 服务器会频繁地接收和发送请求图片，服务器加载速度会变慢
实质
  • 多张小的背景图片合并为一张大图片
原理

多个图片放在一个图片中 服务器端只需接收一次 就能得到多个小图片

特点

  • 对简单的背景图设置

  • 降低服务器的压力

过程

  • 导入精灵图

  • 移动背景图片位置：background-position（x,y）

  • 大图片向左与向上移动 x与y都为负值

使用精灵图的过程就是剪刀（大盒子）裁剪大图片上某一小背景图（小盒子）的过程

精灵图案例
  • 精灵图准备：

  • 度量尺寸：

  • 代码实现：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            display: inline-block;
            background: url("精灵图.jpg") no-repeat;
        }
        .box1{
            width:180px;
            height:216px;
            background-position:-750px 0px;
        }
        .box2{
            width:180px;
            height:216px;
            background-position:-563px 0px;
        }
        .box3{
            width:180px;
            height:216px;
            background-position:-376px 0px;
        }
        .box4{
            width:180px;
            height:216px;
            background-position:-190px 0px;
        }
    </style>
</head>
<body>
    <span class="box1"></span>
    <span class="box2"></span>
    <span class="box3"></span>
    <span class="box4"></span>
</body>
</html>
  • 效果显示：

字体图标

字体图标的产生

应用：主要用于网页中的一些小图标

精灵图的缺点

  • 图片本身放大和缩小会出现失真的情况

  • 一旦图片切片完成后需要更换写起来十分复杂

一种技术就是字体图标iconfont 它可以为前端工程师提供高效的图标使用方式

展示的是图标，实质是字体，可以使用字体样式去变换该字体图标

字体图标的下载与使用
  • 下载：icomoon字库
1
http://icomoon.io

选择所想要的图标样式下载，然后进行解压

点击右下方的generate Font

下载后解压压缩包，将fonts文件夹拷贝一份放在项目的根目录下

复制fonts文件夹

将fonts文件夹复制到该项目根目录下

在css中引入下载的字体样式

引入方式

打开style.css文档复制其中的字体样式 引入到.html的css样式中即可

1
2
3
4
5
6
7
8
9
10
11
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?91jje5');
  src:  url('fonts/icomoon.eot?91jje5#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?91jje5') format('truetype'),
    url('fonts/icomoon.woff?91jje5') format('woff'),
    url('fonts/icomoon.svg?91jje5#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

在demo.html文档中找到所需的图标样式或者再次登录该网址下载的地方，复制后面的样式以某标签的形式加入到html当中，css中为其标签设置font-family: ‘icomoon’;即可引用

将后面的那个复制下来 在所处的标签为其设置css属性 设置font-family: ‘icomoon’;即可引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';//此处命名可以发生变化，但在引用时该处的命名应该与引用时命名相同 否则不生效
            src: url('fonts/icomoon.eot?91jje5');
            src: url('fonts/icomoon.eot?91jje5#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?91jje5') format('truetype'),
                url('fonts/icomoon.woff?91jje5') format('woff'),
                url('fonts/icomoon.svg?91jje5#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span{
            font-family: 'icomoon';
        }
    </style>
</head>

<body>
    <span></span>
</body>
</html>

浏览器显示效果呈现

添加新的字体图标

在icomoon字库中的左上角找到import icons,点击进入

然后选择selection.json文档,然后选择需要新加的字体图标后download即可

优点：

字体图标的字体已经在浏览器向服务器请求一次数据时拿到了 后续添加新的字体图标就不需要再次向服务器请求 减少了服务器的压力