精灵图
精灵技术目的:
为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度。
使用非常简单,只是把所有图片放在一张大图上,然后通过背景图片添加,在移动位置,放在需要的位置处。
随便下载了一个王者荣耀官方下载游戏的图,可以看一下,就是精灵图
把上面那个头的图,写一下代码
<!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