关于什么时候用精灵图什么时候用字体图标

1一个网页中往往会应用到很多小的背景图作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求图片，造成服务器压力过大，这将大大降低页面的加载速度。

因此，为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了css精灵图技术（也称css雪碧）

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要请求一次就行了

精灵图的技术目的

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。

使用精灵图的核心

1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图中

2.这个图片也称sprites 精灵图，雪碧图

3.移动背景图片位置，此时可以使用backgrund-position

4移动背景图片位置，此时可以使用background-position

5.因为一般情况下都是往上往左移动，所以值是负值

6.使用精灵图的时候需要精准测量，每个小背景图片的大小和位置

接下来附上一张精灵图的图片，因为可能很多刚入门前端的同学还不知道什么是精灵图，以下是王者荣耀官网的精灵图。

2.字体图标

字体图标的产生

字体图标使用场景，主要用于显示网页中通用常用的一些小图标

精灵图是有诸多优点的，但是缺点很明显

1.图片文件还是比较大

2.图片本身放大和缩小会失真

3.一旦图片制作完了想要更换很麻烦

此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont

字体图标可以为前端工程师提供一种方便有效的使用方式，展示的是图标，本质是属于字体。

  字体图标的优点 

1 轻量级 一个图标要比一系列的图像要小，一旦字体加载了，图标就会马上，渲染出来，减少了服务器请求

2.灵活性： 本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等

3。兼容性：几乎所有的浏览器，请放心使用

注意： 字体图标不能替代精灵技术，只是对工作的图标部分技术的提升和优化

总结：如果用到一些结构和样式比较简单的样式，就用字体图标，如果到一些结构样式比较复杂的就用精灵图！

字体图标的下载与引入 

教程：https://blog.csdn.net/m0_56698268/article/details/124570739

好了以上就是我对精灵图和字体图标的理解了，欢迎小伙伴评论区留言评论！