精灵图与字体图标的使用
文章目录
- @[TOC](文章目录)
- 一、精灵图
- 1.1 为什么需要精灵图?
- 1.2 精灵图(sprites)的使用
- 1.3PS切片工具的使用
- 二、字体图标
- 2.1 字体图标的产生
- 2.2 字体图标的优点
- 2.3 字体图标的下载
- 2.4 字体图标的引入
- 2.5 字体图标的追加
- 2.6 字体图标加载的原理
一、精灵图
1.1 为什么需要精灵图?
一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送
请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。
因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称
CSS Sprites、CSS 雪碧)。
核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。
精灵技术目的:为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度。
1.2 精灵图(sprites)的使用
使用精灵图核心:
- 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中
- 这个大图片也称为 sprites 精灵图 或者 雪碧图
- 移动背景图片位置以控制显示区域, 此时可以使用
background-position
- 移动的距离就是这个目标图片的
x
和y
坐标。注意网页中的坐标有所不同 - 因为一般情况下都是将精灵图往上往左移动,所以两个坐标数值基本是负值
- 使用精灵图的时候需要精确测量,每个小背景图片的大小和位置
使用精灵图核心总结:
- 精灵图主要针对于小的背景图片使用
- 主要借助于背景位置来实现
background-position
- 一般情况下精灵图都是负值(千万注意网页中的坐标: x轴右边走是正值,左边走是负值, y轴同理)
【王者荣耀案例】
【案例:拼单词】
1.3PS切片工具的使用
代码实现:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>精灵图的使用</title>
<style>
.box1{width: 238px;height: 129px;background: url(/images/sprites.png) no-repeat 0px -219px;
}
</style>
</head>
<body><div class="box1"></div>
</body>
</html>
效果如下:
【案例:拼单词】
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>精灵图的使用</title><style>span {display: inline-block;background: url(images/abcd.jpg) no-repeat}.l {width: 104px;height: 110px;background-position: 0 -277px;}.c {width: 112px;height: 122px;background-position: -237px 0;}.y {width: 118px;height: 117px;background-position: -363px -552px;}</style>
</head><body><span class="l"></span><span class="c"></span><span class="y"></span>
</body></html>
效果如下:
二、字体图标
2.1 字体图标的产生
字体图标使用场景:主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的,但是缺点很明显。
- 图片文件还是比较大的
- 图片本身放大和缩小会失真
- 一旦图片制作完毕想要更换非常复杂
此时,有一种技术的出现很好的解决了以上问题,就是字体图标 iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,但本质却属于字体。
2.2 字体图标的优点
- 轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求
- 灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等
- 兼容性:几乎支持所有的浏览器,请放心使用
注意: 字体图标不能替代精灵技术,只是对工作中图标部分技术的提升和优化。
总结:
- 如果遇到一些结构和样式比较简单的小图标,就用字体图标
- 如果遇到一些结构和样式复杂一点的小图片,就用精灵图
字体图标是一些网页常见的小图标,我们直接网上下载即可。 因此使用可以分为:
- 字体图标的下载
- 字体图标的引入(引入到我们 html 页面中)
- 字体图标的追加(在原有的基础上添加新的小图标)
2.3 字体图标的下载
推荐下载网站:
- icomoon 字库 https://icomoon.io/
IcoMoon 成立于 2011 年,推出了第一个自定义图标字体生成器,它允许用户选择所需要的图标,使它们成一字型。该字库内容种类繁多,非常全面,唯一的遗憾是国外服务器,打开网速较慢。
- 阿里 iconfont 字库 https://www.iconfont.cn/
这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库,包含了淘宝图标库和阿里妈妈图标库。可以使用 AI 制作图标上传生成。 重点是,免费!
以下内容以 icomoon 字库 为例。
2.4 字体图标的引入
下载完毕之后,注意原先的文件不要删,后面会用!
- 把下载包里面的 fonts 文件夹放入页面根目录下
不同浏览器所支持的字体格式是不一样的,字体图标之所以兼容,就是因为包含了主流浏览器支持的字体文件。
- TureType (.ttf) 格式 .ttf 字体是 Windows 和 Mac 的最常见的字体,支持这种字体的浏览器有 IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+;
- Web Open Font Format (.woff) 格式 woff 字体,支持这种字体的浏览器有 IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;
- Embedded Open Type (.eot) 格式 .eot 字体是 IE 专用字体,支持这种字体的浏览器有 IE4+;
- SVG (.svg) 格式 .svg 字体是基于 SVG 字体渲染的一种格式,支持这种字体的浏览器有 Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+;
- 在 CSS 样式中全局声明字体:简单理解把这些字体文件通过 css 引入到我们页面中
一定要注意字体文件路径问题。
3. html 标签内添加小图标
复制小图标对应的字符(一个小方框)到 html 中,一般建议放在 <span></span>
标签里。
4.给标签定义字体
注意:务必保证这个字体和上面 @font-face 里面的字体保持一致(默认为:icomoon)。
5.代码展示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体图标的使用</title><style>/* 字体声明 */@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?b9e1ja');src: url('fonts/icomoon.eot?b9e1ja#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?b9e1ja') format('truetype'),url('fonts/icomoon.woff?b9e1ja') format('woff'),url('fonts/icomoon.svg?b9e1ja#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}span{font-family: 'icomoon';/* 字体引入 */font-size: 80px;color: pink;}</style>
</head><body><span></span><span></span>
</body></html>
页面效果如下:
2.5 字体图标的追加
如果工作中,原来的字体图标不够用了,我们便需要添加新的字体图标到原来的字体文件中。
选择 Import Icons 按钮,把原压缩包里面的 selection.json 重新上传,然后选中自己想要新的图标,从新下载压缩包,并替换原来的文件即可。
2.6 字体图标加载的原理
服务器只需接受一次浏览器请求便可以将 fonts 文件一次性返回,如此而来网页中所有用到 fonts 字体图标的部分便一次性加载好了,大大减轻了服务器压力。
提示:
文章参考B站黑马视频pink老师,以及https://github.com/JERRY-Z-J-R/I-love-you-3-thousand/tree/master/我爱你,不止三千遍/HTML CSS的参考
精灵图与字体图标的使用相关推荐
- html精灵图坐标如何确定,CSS实现精灵图与字体图标
精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源. 为了减少资源的访问次数,将多个常用的图片集合到一张图片中(网页的缓 ...
- CSS精灵图、字体图标
精灵图.字体图标 文章目录 精灵图.字体图标 精灵图 原理 代码 字体图标 使用流程 1.下载兼容性字体文件包到本地 2.把字体文件包引入到html页面中 精灵图 一个页面上可能有很多小图标,每个图标 ...
- CSS精灵图和字体图标及下载
精灵图和字体图标 精灵图 1.1为什么需要精灵图? 1.2精灵图的使用 1.3精灵图总结 字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引入 2.4字体图 ...
- 【CSS进阶】精灵图、字体图标、用户界面样式、常见布局技巧、初始化、CSS三角
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍精灵图.字体图标.CSS三角.用户界面样式.vertical-align.常见布局技巧.初始化 思 ...
- CSS精灵图、字体图标、三角、鼠标样式、用户界面样式、溢出省略号
[CSS精灵图.字体图标.三角.鼠标样式.用户界面样式.溢出省略号] 本文档是个人对 Pink 老师课程的总结归纳及补充,转载请注明出处! 一.精灵图 1.1 为什么需要精灵图? 一个网页中往往会应用 ...
- web前端入门学习 css(7)css高级技巧 (精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化)
文章目录 精灵图 为什么需要精灵图? 精灵图的使用 精灵图课堂案例 用精灵图拼出自己的名字 字体图标 字体图标的下载 字体图标的引入 字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
- html css图标怎么跟文字并排,CSS高级技巧:精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...
CSS高级技巧目录 1.精灵图 使用原因:一个网页往往会有很多小的背景图片作为装饰,为了有效减少接收和发送请求的次数,提供页面加载速度,所以出现了精灵技术.核心原理就是将小图片整合到一张图里,这样浏览 ...
- CSS精灵图及字体图标
一.精灵图(重点) 1.1为什么需要精灵图 网页中往往会有很多的小背景图像作为修饰,当频繁向服务器发送请求时,服务器压力过大,降低加载速度. 使用精灵图的目的:减少服务器的请求次数,提高加载速度 例子 ...
- 精灵图和字体图标学习
精灵图 为什么需要精灵图? 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度 因此,为了有效的 ...
- css(精灵图和字体图标)
1. 精灵图(重点) 1.1 为什么需要精灵图 为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites.CSS 雪碧). 核心原理: ...
最新文章
- 《Science》评选2017年十大科学突破,看看有哪些吧!
- 调整分区个数_2T移动硬盘分区办法
- VC6.0:“Setup was unable to create a DCOM user account“的解决方案
- 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
- python标准库介绍——4 string模块详解
- 南邮宽字节(sql_gbk)注入
- NN如何在表格数据中战胜GBDT类模型
- 常用JavaScript函数 59 - 70(自我总结)
- “开发者有奖大调查”第二批中奖名单公布,还有更多好礼等你来拿~
- 28.ldconfig
- HttpClient如何解决302重定向问题
- 【图像去噪】基于matlab GUI中值+均值+维纳+小波滤波图像去噪【含Matlab源码 753期】
- Java SE、Java EE、Java ME三者之间的区别
- linux 945gse 显卡驱动,HP520的945Expres集成显卡只能以1024x768的模式显示的求助
- 同构 JavaScript 应用开发
- 10kV变电所运维平台的现代化智能构建方案
- 按键截屏功能源码流程讲解
- node.js毕业设计鲸落图书商城小程序LW(源码+程序+LW+部署)
- 【Oracle】存储过程 遍历树 举例emp表的树状结构
- 读书笔记---《小强升职记》