一个网页中往往会应用很多小的背景图像作为装饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。
因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称为CSS Sprites 、CSS雪碧。)
核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器就只需要一次请求就可以了。
精灵技术目的:
为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度。
利用background-position抠出小图标
字体图标
字体图标使用场景:主要用于显示网页中通用、常用的一些小图标。
精灵图有诸多优点但是缺点也很明显。
1.图片文件还是比较大的。
2.图片本身放大和缩小会失真。
3.一旦图片制作完毕想要更换非常复杂。
此时,有一种技术的出现很好的解决了以上问题,就是字体图标iconfont。
字体图标可以为前端工程师提供一种高效方便的图标使用方式,展示是图标,本质属于字体。
字体图标的优点:
😳轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求。
😳灵活性:本质其实是文字,可以随意改变颜色、产生阴影、透明效果、旋转等
😳兼容性:几乎支持所有的浏览器,请放心使用
总结:
1.如果遇到一些结构和样式比较简单的小图标,就用字体图标。
2.如果遇到一些结构和样式比较复杂一点的小图标,就用精灵图。
字体图标使用三步:1.字体图标的下载
2.字体图标的引入(引入到我们html页面中)
3.字体图标的追加(以后添加新的小图标)
图标网:1.Icon Font & SVG Icon Sets ❍ IcoMoon(国外)
2.iconfont-阿里巴巴矢量图标库(国内)
字体图标使用:第一步:下载压缩包
第二部引入:1.把下载包里面的fonts文件夹放入页面根目录下
2.在CSS样式中全局声明字体:简单理解把这些字体文件通过css引入到我们页面中。
一定要注意字体文件路径问题。
3.html标签内添加小图标
4.为span添加字体属性
span {
font-family: 'icomoon';
}
字体图标的追加
如果原来的字体图标不够用了,需要添加新的字体图标到原来的字体文件中。
把压缩包里面的selection.json从新上传,然后选中自己想要的 新的图标,从新下载压缩包并替换原来文件。
CSS三角做法
把其他几个调成透明色就OK啦