1、精灵图
（1）为什么需要精灵图
一个网页中往往会应用到很多小的背景图片，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器的压力过大，这将大大降低页面的加载速度，精灵图是将图片放到一张里面，这样的话只要请求一次就可以了
精灵图的出现降低了服务器的压力，提高了图片的加载速度
（2）精灵图的核心
主要针对于背景图片的使用，把许多小的背景图片整合到一张大的图片中。对于其他图片，因为是需要频繁地更换的，因此，不适合用精灵图
例如：王者荣耀官网精灵图
图片来源：王者荣耀官网
查看源码：
从该图片的属性可以看出，该图片是作用于背景图片的
2、精灵图的使用
先确定图片的位置：
左上角的位置为（0,0），因此，需要将图片沿x轴向左移动，y轴保持不变，y的坐标为0，x的坐标为负数
3、字体图标
（1）优点
能够解决图片文件较大、图片缩小后会失真、制作完毕后修改起来比较复杂的问题。虽然看上去是图标，但是本质上是文字。字体图标要比图片小，减小了服务器的压力；可以更改相应的属性来更改图标的样式，使用起来更加方便。
（2）iconfont：https://www.cnblogs.com/zhai1997/p/13177312.html
（3）字体图标网站
icomoom：https:///
阿里巴巴：iconfont
4、icomoom网站图标的选择
进入app：
选择自己想要的图标：
点击底部导航可以选择更多图标：
5、编辑图标
点击编辑：
可以点击按钮实现图标的缩放、旋转：
6、下载图标
点击Generate Font：
显示已经选择的图标：
下载：
7、字体图标的使用
将下载的图标的压缩包打开：
将fonts目录复制到工程目录里面：四种字体文件是为了处理浏览器的兼容性问题
复制样式：style.css
打开demo.html：复制小方框
指定字体：
更改样式：
8、字体图标的追加
点击import：
选择json文件：
加载以前的图标：
继续添加，添加完成后重新下载，然后更改工程中的相应的文件即可。
到此这篇字体图标怎么使用图片（字体图标的用法）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/bcyy/53320.html