精灵图

精灵技术目的:

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

使用非常简单，只是把所有图片放在一张大图上，然后通过背景图片添加，在移动位置，放在需要的位置处。

随便下载了一个王者荣耀官方下载游戏的图，可以看一下，就是精灵图

把上面那个头的图，写一下代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {width: 60px;height: 60px;margin: 100px auto;background-image: url(王者荣耀.png);background-position: -182px 0;}</style>
</head><body><div class="box"></div>
</body></html>

效果：

非常的简单，只是需要精确的量取尺寸，可以借助FW工具，需要lvse的可以私信我哦

字体图标

主要用来制作网页上的一些小图标，举个例子，京东页面上小相机等等非常多，本质上还是字体。

非常好的应用，当然也可以用精良图制作，但是精灵图在本质上还是图片，非常的大，而字体图标的本质是文字，非常小哦！

并且，可以随意改变颜色，大小，内边距哦，而且放大后，不会失真，因为本质是文字！不需要向服务器请求了，兼容几乎所有的浏览器！

上面说了那么多，接下来让我们看看如何获得字体图标

字体图标下载

直接从网上下载：推荐网站 : http://icomoon.io icomoon字库免费哦

点击它，会显示如下窗口

还可以修改上面的图标哦，只需要点击上面的笔

字体图标引入

下载解压后

将font文件夹放入你的包包中

打开style.css 复制@font-face代码，放入你的css文件中，我偷懒写在一个地方了

打开demo.html

复制小框框，直接放在你的代码中，最后添加一下字体族就行

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?8ypcxm');src: url('fonts/icomoon.eot?8ypcxm#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?8ypcxm') format('truetype'), url('fonts/icomoon.woff?8ypcxm') format('woff'), url('fonts/icomoon.svg?8ypcxm#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}span {font-family: 'icomoon';}</style>
</head><body><span></span>
</body></html>

效果图

另外一种做法

span::before {font-family: 'icomoon';content: '\e947';}

span中就不需要添加内容了，e947是来自demo哦

当然可以改变图标的样式，本质是文字嘛，大家可以自己试试看哦！

字体图标的追加

当我们发现字体图标不够用时，我们不得不去放进来更多的字体图标，这时候，我们可以这样操作，首先还是打开，下载的网址，进入字体图标库里。

1.点击，将旧的

json文件打开，然后选择yes

2.选择你想要别的图标，点击

就可以下载新的压缩包，再把旧的替换掉，当然最后要把font变成新的喽，那里有你新加入的字体图标，将旧的删掉吧。

你是否学会了呢，给个赞吧，嘿嘿

字体图标有个更合适的使用方法,我做了个补充，有兴趣可以瞅瞅哦！

https://blog.csdn.net/weixin_53655745/article/details/120002705

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精灵技术. 一.精灵图的使 ...
html精灵图坐标如何确定,CSS实现精灵图与字体图标
精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源. 为了减少资源的访问次数,将多个常用的图片集合到一张图片中(网页的缓 ...
【CSS进阶】精灵图、字体图标、用户界面样式、常见布局技巧、初始化、CSS三角
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍精灵图.字体图标.CSS三角.用户界面样式.vertical-align.常见布局技巧.初始化思 ...
CSS精灵技术与字体图标
CSS精灵技术(sprite) 精灵技术产生的背景当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当 ...
web前端入门学习 css（7）css高级技巧（精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录精灵图为什么需要精灵图? 精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加 css三角(用边框border制作) 案例:京东三 ...

CSS精灵图和字体图标

精灵图

字体图标

字体图标下载

字体图标引入

字体图标的追加

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

最新文章

热门文章