css：精灵图和字体图标（精灵图和icomoom字体图标的使用）

时间 2020-07-06

标签 css 精灵字体图标 icomoom 使用栏目 CSS 繁體版

原文原文链接

一、精灵图css

（1）为何须要精灵图html

一个网页中每每会应用到不少小的背景图片，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，形成服务器的压力过大，这将大大下降页面的加载速度，精灵图是将图片放到一张里面，这样的话只要请求一次就能够了json

精灵图的出现下降了服务器的压力，提升了图片的加载速度浏览器

（2）精灵图的核心服务器

主要针对于背景图片的使用，把许多小的背景图片整合到一张大的图片中。对于其余图片，由于是须要频繁地更换的，所以，不适合用精灵图app

例如：王者荣耀官网精灵图svg

图片来源：王者荣耀官网字体

查看源码：网站

从该图片的属性能够看出，该图片是做用于背景图片的url

二、精灵图的使用

先肯定图片的位置：

左上角的位置为（0,0），所以，须要将图片沿x轴向左移动，y轴保持不变，y的坐标为0，x的坐标为负数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        .box{
            width:60px;
            height:60px;
            margin:100px auto;
            background:url(img/index.png) no-repeat 0;
            background-position: -182px 0;
        }
        </style>
    </head>
    <body>
    <div class="box"></div>
    </body>
</html>

三、字体图标

（1）优势

可以解决图片文件较大、图片缩小后会失真、制做完毕后修改起来比较复杂的问题。虽然看上去是图标，可是本质上是文字。字体图标要比图片小，减少了服务器的压力；能够更改相应的属性来更改图标的样式，使用起来更加方便。

（2）iconfont：http://www.javashuo.com/article/p-venntvlt-mq.html

（3）字体图标网站

icomoom：https://icomoon.io/

阿里巴巴：iconfont

四、icomoom网站图标的选择

进入app：

选择本身想要的图标：

点击底部导航能够选择更多图标：

五、编辑图标

点击编辑：

能够点击按钮实现图标的缩放、旋转：

六、下载图标

点击Generate Font：

显示已经选择的图标：

下载：

七、字体图标的使用

将下载的图标的压缩包打开：

将fonts目录复制到工程目录里面：四种字体文件是为了处理浏览器的兼容性问题

复制样式：style.css

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

打开demo.html：复制小方框

    <body>
   　　 <span></span>
    </body>

指定字体：

span{
             font-family: 'icomoon';
         }

更改样式：

span{
             font-family: 'icomoon';
             font-size: 40px;
             color: greenyellow;
         }

八、字体图标的追加

点击import：

选择json文件：

加载之前的图标：

继续添加，添加完成后从新下载，而后更改工程中的相应的文件便可。