一、精灵图

1.1、为什么要使用精灵图？

浏览器每解析到一张图片就会向服务器发起请求，请求服务器将图片发送过来，如果网页中有大量的图片，例如一千张，那就得请求一千次，这样服务器的压力就会很多，所以将一些小背景整合到一张图片（精灵图）上，就只需要请求一次，服务器的压力就大大的得到了缓解。

1.2、精灵图使用的核心

精灵技术主要针对于背景图片使用，就是把多个小背景整合到一张图片中；
这个大图片也称为sprites，精灵图，或者雪碧图；
移动背景图片位置，此时可以使用background-position；
移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标系是x向右是正方向，y向下正方向；
因为一般情况下都是往上往左移动，所以数值是负值；
使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

二、字体图标

2.1、字体图标的产生

字体图标使用场景：主要用于显示网页中通用、常用的小图标。

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

图片文件还是比较大的；
图片本身放大和缩小会失真；
一旦图片制作完毕想要跟换非常复杂；

此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

2.2、字体图标的优点

轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求；
灵活性：本质其实是文字，可以随意的改变颜色，产生阴影，透明效果，旋转等；
兼容性：几乎支持所有的浏览器，请放心使用；

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

总结：

如果遇到一些结构和样式比价简单的小图标，就用字体图标；
如果遇到一些结构和样式复杂一点的小图片，就用精灵图；

2.3、字体图标的下载

推荐下载网站：

icomoon字库 http://icomoon.io
IcoMoon成立于2011年，推出了第一个自定义图标字体生成器，它允许用于选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。
阿里iconfont字库 http://www.iconfont.cn
这个是阿里妈妈M2UX的一个iconfont字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。重点是，免费！

例如：使用icomoon下载字体图标

①、进入网站，点击右侧框选部分

②、直接选择自己需要的图标，底部中间框选部分会显示选择的个数

③、把图标生成字体，点击右侧底部框选部分Generate Font

④、点击右侧底部框选部分下载字体图标Download

⑤、下载结果

2.4、字体图标的使用

注意：下载完毕之后，注意原先的文件不要删除，后期更新字体图标的时有用

①、把下载包里面的fonts文件夹放入页面根目录下

②、在CSS样式中全局声明字体：简单理解把这些字体文件通过CSS引入到我们的页面中，一定注意字体文件路径问题。

将下载包里的style.css中的第一部分复制到我们的CSS样式表中：

③、从下载包中的demo.html中将字体图标复制到要想使用的地方并指定字体即可

或者：

<div>\ea50
</div>

2.5、字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的selection.json重新上传，然后选中自己想要的图标，重新生成字体图标并压缩，然后替换原来的文件即可。

CSS-- 精灵图和字体图标相关推荐

CSS精灵图、字体图标、三角、鼠标样式、用户界面样式、溢出省略号
[CSS精灵图.字体图标.三角.鼠标样式.用户界面样式.溢出省略号] 本文档是个人对 Pink 老师课程的总结归纳及补充,转载请注明出处! 一.精灵图 1.1 为什么需要精灵图? 一个网页中往往会应用 ...
CSS精灵图、字体图标
精灵图.字体图标文章目录精灵图.字体图标精灵图原理代码字体图标使用流程 1.下载兼容性字体文件包到本地 2.把字体文件包引入到html页面中精灵图一个页面上可能有很多小图标,每个图标 ...
CSS精灵图和字体图标及下载
精灵图和字体图标精灵图 1.1为什么需要精灵图? 1.2精灵图的使用 1.3精灵图总结字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引入 2.4字体图 ...
CSS精灵图及字体图标
一.精灵图(重点) 1.1为什么需要精灵图网页中往往会有很多的小背景图像作为修饰,当频繁向服务器发送请求时,服务器压力过大,降低加载速度. 使用精灵图的目的:减少服务器的请求次数,提高加载速度例子 ...
CSS精灵图和字体图标
精灵图精灵技术目的: 为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度. 使用非常简单,只是把所有图片放在一张大图上,然后通过背景图片添加,在移动位置,放在需要的位置处. 随便下载了一个 ...
CSS - 精灵图和字体图标
文章目录前言一.精灵图的使用二.字体图标下载字体图标引入字体图标追加字体图标前言为了有效地减少服务器接收和发送请求的次数, 提高页面的加载速度, 出现了CSS精灵技术. 一.精灵图的使 ...
html精灵图坐标如何确定,CSS实现精灵图与字体图标
精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源. 为了减少资源的访问次数,将多个常用的图片集合到一张图片中(网页的缓 ...
【CSS进阶】精灵图、字体图标、用户界面样式、常见布局技巧、初始化、CSS三角
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍精灵图.字体图标.CSS三角.用户界面样式.vertical-align.常见布局技巧.初始化思 ...
CSS精灵技术与字体图标
CSS精灵技术(sprite) 精灵技术产生的背景当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当 ...
web前端入门学习 css（7）css高级技巧（精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录精灵图为什么需要精灵图? 精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加 css三角(用边框border制作) 案例:京东三 ...

CSS-- 精灵图和字体图标

一、精灵图

1.1、为什么要使用精灵图？

1.2、精灵图使用的核心

二、字体图标

2.1、字体图标的产生

2.2、字体图标的优点

2.3、字体图标的下载

2.4、字体图标的使用

2.5、字体图标的追加

CSS-- 精灵图和字体图标相关推荐

最新文章

热门文章

CSS-- 精灵图和字体图标

一、精灵图

1.1、为什么要使用精灵图？

1.2、 精灵图使用的核心

二、 字体图标

2.1、字体图标的产生

2.2、字体图标的优点

2.3、字体图标的下载

2.4、字体图标的使用

2.5、字体图标的追加

CSS-- 精灵图和字体图标相关推荐

最新文章

热门文章

1.2、精灵图使用的核心

二、字体图标