CSS：精灵图 字体图标

一、精灵图

使用精灵图的原因

减少故武器的访问次数，防止服务器负荷过重

精灵图原理

把网页制作需要用到的小图片组合成网页效果做成一张大图传至服务器，网页制作时通过background-position调动大图位置来使用其中的一小部分作为图标，设定与图标大小一样的盒子，盒子外部分的图片网页上不会显示。

background-position:x y;

x向右，y向下为正，默认图片靠盒子左上角，按需要位置来移动。

精灵图缺点

不好更换，文件大，缩小放大会失真

二、字体图标

看上去是图标，实际上是文字，无论如何放大缩小都不会失真，可以随意变换大小、颜色、位置。

优点

1.轻量级（比图片小，容易加载，减轻服务器负荷）
2.灵活
3.兼容所有浏览器

缺点

结构样式简单，不能用于制作复杂样式

使用

1.下载

（1）icommon
（2）阿里iconfont

2.追加

将select.json文件导入，选择要新加的图标，再重新下载后替换原来的文件夹即可。

代码

//字体声明，把下面写入style
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?kdr3rq');
  src:  url('fonts/icomoon.eot?kdr3rq#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?kdr3rq') format('truetype'),
    url('fonts/icomoon.woff?kdr3rq') format('woff'),
    url('fonts/icomoon.svg?kdr3rq#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

三角

1.盒子的高、宽为0
2.指定透明实现边框
3.根据需要设置颜色

/* 三角 */
        
        .sanjiao {
            width: 0;
            height: 0;
            border: 15px solid transparent;
            /* 位置 */
            border-left-color: rgb(168, 127, 127);
        }