关于什么时候用精灵图什么时候用字体图标
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
好了以上就是我对精灵图和字体图标的理解了，欢迎小伙伴评论区留言评论！
关于什么时候用精灵图什么时候用字体图标相关推荐
- html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...
CSS高级技巧目录 1.精灵图 使用原因:一个网页往往会有很多小的背景图片作为装饰,为了有效减少接收和发送请求的次数,提供页面加载速度,所以出现了精灵技术.核心原理就是将小图片整合到一张图里,这样浏览 ...
- CSS 6 精灵图 字体图标 CSS三角 用户界面样式 vertical-align 溢出文字省略号 常见布局技巧
目录 1.精灵图 1.1为什么需要精灵图 1.2精灵图(sprites)的使用 1.3精灵图使用案例 2.字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引 ...
- 005_HTML制作炫酷登录界面（CSS精灵图、背景图片局部显示）
效果: 说明: 输入框由三部分组成: 装局部图标的span 显示提示文字的span 接受用户输入的input 交互效果 刚打开页面,所有输入框显示提示文字 当input获得焦点,提示文字消失 当inp ...
- svg矢量图字体图标iconfont的制作
前端拿到设计稿 若是存在SVG矢量图需要处理成字体图标,图片放大也不会模糊 ,svg也可以在项目中直接使用,但是兼容性不太好.以iconfont字体图标库为例,在字体图标库里创建一个项目. 步骤如下: ...
- JS循环精灵图背景-遍历背景图片
利用for循环设置一组元素的精灵图背景 如果用css做,需要每个小盒子都设置一遍,才能得到相应的图标 分析: 1.首先精灵图图片排列是有规律的 2.核心:利用for循环,修改背景位置 精灵图来源:卷皮 ...
- html精灵图坐标如何确定,如何使用HTML中的精灵图
在我们进行网页布局的时候经常会遇到以下的情况 一排或多排文字上/下/左/右会有对应的小图标或图片,比如下图, 1.png 如果一张图片一张图片的去引入,不仅费时费力,还费资源. 那这个时候该如何去快速 ...
- 二倍图（精灵图的用法）
1.引入图片.在fireworks中限制宽高,然后把宽高设置成现在的一半 2,采用切片工具进行切片,获取精灵图的坐标 转载于:https://www.cnblogs.com/qdxbls/p/1105 ...
- web前端入门学习 css（7）css高级技巧 （精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录 精灵图 为什么需要精灵图? 精灵图的使用 精灵图课堂案例 用精灵图拼出自己的名字 字体图标 字体图标的下载 字体图标的引入 字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
- 教你玩转CSS 精灵图/雪碧图
目录 精灵图/雪碧图 图像拼合 - 简单实例 图像拼合 - 创建一个导航列表 图像拼合s - 悬停效果 精灵图/雪碧图 精灵图/雪碧图就是图像拼合 也就是单个图像的集合. 有许多图像的网页可能需要很长 ...
最新文章
- JupyterLab 3.0发布！
- SFB 项目经验-65-使用域管理员安装不了Exchange 2010 SP3 CU21
- YUV与像素值之间的关系
- AUTOSAR从入门到精通100讲（八十二）-AutoSAR之基础篇CanNM
- 转整型_156.Ruby烘焙大理石豆沙吐司解锁大理石花纹整型
- java质因数算法_Java实现的质因数分解操作示例【基于递归算法】
- pandas从dataframe中选择部分行、列
- golang使用go-sql-driver实现mysql增删改操作
- CMOS门电路(OD门、传输门、双向模拟开关、三态门)
- 基于javaSwing、MySQL的酒店客房管理系统（附源码）
- weka API,创建线性回归时出现缺少no.uib.cipr.matrix和org.netlib.blas的解决方案
- ArcGIS地理配准（Georeferencing）详解
- 基于python下django框架 实现校园排课选课系统详细设计
- 【dgl学习】dgl的构图和使用
- 从零基础开始学习(一) esp32 micro python编程软件环境Thonny的安装
- OpenCV检测手指个数
- 神舟战神k650d系列风扇强冷如何开启
- 如何防范SQL注入式攻击？
- 用python计算准确率_Python下的scikit-learn预测准确率计算（代码实例）
- [Matlab] 论文画图技巧：预测曲线图