精灵图、字体图标

文章目录

精灵图、字体图标
- 精灵图
- - 原理
  - 代码
- 字体图标
- - 使用流程
  - - 1.下载兼容性字体文件包到本地
    - 2.把字体文件包引入到html页面中

精灵图

一个页面上可能有很多小图标，每个图标的加载都需要向服务器发送一次请求，这样加载一个页面就会请求很多次服务器，拖慢加载速度也增加了服务器负担。
这时就需要用到精灵图技术，把所有小图标拼成一个大图片，一次性的请求下来然后再拆分到各自要用的地方。

原理

将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position”来移动背景图，实现背景图片的定位技术。
移动的距离就是目标图表的坐标，注意y轴是向下的。

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title></title><style type="text/css">#box{margin: 50px;;}#box a{display: block;width: 74px;height: 20px;border: 1px solid #ccc;color: black;font-size: 12px;text-decoration: none;text-align: center;border-top: none;padding-top: 54px;background-image: url(https://img-blog.csdnimg.cn/20191218152749310.png);}#box #zone{border-top:1px solid #CCCCCC;background-position: -17px 4px;background-repeat: no-repeat;}#box #zone:hover{background-position: -17px -98px;}#box #mail{background-position: -12px -186px;background-repeat: no-repeat;}#box #mail:hover{background-position: -12px -286px;}</style></head><body><div id="box"><a href="#" id="zone">空间</a><a href="#" id="mail">邮箱</a></div> </body>
</html>

效果图示：

字体图标

字体图标就是一种特殊的字体，通过这种字体，显示给用户的就像一个个图片一样，用于结构和样式简单的小图标，我们可以像控制文字一样通过CSS来控制它的大小和颜色。

使用流程

1.下载兼容性字体文件包到本地

下载地址：http://www.iconfont.cn/

2.把字体文件包引入到html页面中

将加入购物车的图标添加到项目，然后在线生成代码，再把这段代码在css全局声明，形如：

@font-face {font-family: 'iconfont';  /* project id 2193318 */src: url('//at.alicdn.com/t/font_2193318_w9eomzyen8.eot');src: url('//at.alicdn.com/t/font_2193318_w9eomzyen8.eot?#iefix') format('embedded-opentype'),url('//at.alicdn.com/t/font_2193318_w9eomzyen8.woff2') format('woff2'),url('//at.alicdn.com/t/font_2193318_w9eomzyen8.woff') format('woff'),url('//at.alicdn.com/t/font_2193318_w9eomzyen8.ttf') format('truetype'),url('//at.alicdn.com/t/font_2193318_w9eomzyen8.svg#iconfont') format('svg');
}

然后挑选相应图标并获取字体编码，应用于页面
形如：

<i class="iconfont">&#x33;</i>

其他使用方法：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d0091c141&helptype=code

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

UE 某图局部展UV 图标 / CSS 精灵图(sprite) 好像
CSS精灵图(sprite) 另:字体图标三十二.精灵图&字体图标 - 简书一般美术负责展UV 程序会进行简单的展UV 比如图标 UE 截取某图局部展示在屏幕/canvas/画布中展U ...
第9天：CSS精灵图
今天重点学习了CSS精灵图. "CSS精灵",英语css sprite,所以也叫做"CSS雪碧"技术.是一种CSS图像合并技术,该方法是将小图标和背景图像合并到 ...
11.【CSS精灵图background-position、字体图标@font-face{}、画小三角形、cursor、outline、resize、vertical-align、溢出省略号】
文章目录 [CSS精灵图.字体图标.三角.鼠标样式.用户界面样式.溢出省略号] 一.精灵图 1.1 为什么需要精灵图? 1.2 精灵图(sprites)的使用 1.3 案例:拼单词二.字体图标 2. ...
CSS 精灵图 + 字体图标
高级技巧 1·精灵图 1.基于设计稿明确盒子大小(宽和高) 2.使用像素大厨等工具测量图片偏移坐标: 3.布局时给盒子指定:width.height 和 background 属性: width: ...
CSS / 精灵图+字体图标
目录精灵图字体图标字体图标的使用字体图标的追加字体图标加载的原理精灵图当网页中的图像过多,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,大大降低页面的加载速度为了有效地减 ...
CSS——引入阿里字体图标步骤
第一步下载图标: 在阿里矢量图标库(http://www.iconfont.cn)内搜索需要的图标,选中点击添加入库: 选择完成后,右上角库中点击下载代码: 下载完成后解压文件生成一个文件夹. 将文 ...
PS制作CSS精灵图
精灵图简介 1.精灵图(雪碧图) (1)问题:精灵图就是将很多的小图标合并到一张较大的图片中,那精灵是啥意思呢?(为此笑了一下午的我) . (2)精灵图也称雪碧图,由于大型网页首次加载需要时间,如果再 ...
CSS组件：字体图标
字体图标字体图标就是文字,只是这种文字长得和图标一样字体图标优缺点字体拥有的属性(字体大小.颜色等),均适用于字体图标具有矢量性,无限放大也不会有马赛克,保证清晰度字体图标大小相对于图片要小 ...
CSS如何使用字体图标
当我们在开发网页的时候,会遇到小图标的情况,这时候使用图片相当繁琐,并且图片所占内存较大,会影响我们网页反应的速度,这时候出现了一门新技术,那就是我们的字体图标. 字体图标可以为前端又有了一种更加方便 ...
CSS使用彩色字体图标（Vue/Uni）
在项目中使用彩色字体图标,感谢下方链接作者,本文章只起到搬运转接作用如何使用彩色字体图标

CSS精灵图、字体图标