CSS / 精灵图+字体图标
目录
精灵图
字体图标
字体图标的使用
字体图标的追加
字体图标加载的原理
精灵图
当网页中的图像过多,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,大大降低页面的加载速度
为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术
也称 CSS Sprites CSS 雪碧
核心原理:将网页中的一些小背景图像集合在大图中,这样服务器只需要请求一次就可以
核心:
- 精灵技术主要针对于背景图片的使用,就是把多个小背景图片整合到一张大图片中
- 大图片也称为sprites 精灵图或者雪碧图
- 移动背景图片的位置可以使用background-position
- 移动的距离就是这个目标图片的x和y坐标
- 因为一般情况下都是往上往左移动,所以数值是负值
- 使用精灵图的时候需要精确测量每个小背景图片的大小和位置
缺点:
- 图片文件较大
- 图片本身放大和缩小会失真
- 一旦图片制作完毕想要更换非常复杂
<!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>Document</title><style>.sprites {height: 60px;width: 60px;margin: 100px auto;background: url(sprites.png) no-repeat -180px 0;}</style>
</head><body><div class="sprites"></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>Document</title><style>.name span {display: inline-block;background-image: url(abcd.jpg);}.l {width: 110px;height: 150px;background-position: 0 -254px;}.y {width: 110px;height: 130px;background-position: -366px -547px;}.n {width: 120px;height: 150px;background-position: -249px -249px;}.e {width: 110px;height: 130px;background-position: -474px 0;}</style>
</head><body><div class="name"><span class="l"></span><span class="y"></span><span class="n"></span><span class="n"></span><span class="e"></span></div>
</body></html>
字体图标
主要用于显示网页中通用、常用的一些小图标。
字体图标展示的是图标,本质属于字体
优点:
轻量级:一个图标字体要比一系列的图像要小,一旦字体加载,图标就会马上渲染出来减少了服务器请求
灵活性:本质其实是文字,可以随意更改颜色、产生阴影、透明效果、旋转等
兼容性:几乎支持所有的浏览器。
字体图标不能代替精灵图,只是对工作中图标部分技术的提升和优化
字体图标的使用
下载-引用-追加
下载:
icomoon
iconfont
引入:
下载完毕后原先的文件不要删
复制fonts文件夹,放在目录下
在css样式中全局声明字体:将字体文件通过css引入到页面中
在字体文件中的style.css里复制到block为止。
在demo.html里看所有图标,将小框复制到标签中
在对应标签的样式里声明:font-family:' .....';
字体图标的追加
找到压缩包里的selection.json重新上传,然后选中自己想要的新图标,重新下载压缩包并替换原来的文件即可
icomoon import icons-selection.json上传
然后生成新的 替换原文件
字体图标加载的原理
服务器将压缩包内的文件发送给浏览器
CSS / 精灵图+字体图标相关推荐
- CSS 精灵图 + 字体图标
高级技巧 1·精灵图 1.基于设计稿明确盒子大小(宽 和 高) 2.使用像素大厨等工具测量图片偏移坐标: 3.布局时给盒子指定:width.height 和 background 属性: width: ...
- CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- CSS技巧之精灵图/字体图标/画三角/用户页面样式/vertical-align
15. 常见技巧 15.1 精灵图 出现原因 一个网页往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. ...
- CSS 6 精灵图 字体图标 CSS三角 用户界面样式 vertical-align 溢出文字省略号 常见布局技巧
目录 1.精灵图 1.1为什么需要精灵图 1.2精灵图(sprites)的使用 1.3精灵图使用案例 2.字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引 ...
- CSS:精灵图 字体图标
一.精灵图 使用精灵图的原因 减少故武器的访问次数,防止服务器负荷过重 精灵图原理 把网页制作需要用到的小图片组合成网页效果做成一张大图传至服务器,网页制作时通过background-position ...
- 三十二、精灵图字体图标
一.精灵图 1.1 为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. 因此 ...
- 17-CSS3 高级技巧 精灵图 字体图标 滑动门
CSS高级技巧 CSS用户界面样式 所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
- CSS精灵图、字体图标、三角、鼠标样式、用户界面样式、溢出省略号
[CSS精灵图.字体图标.三角.鼠标样式.用户界面样式.溢出省略号] 本文档是个人对 Pink 老师课程的总结归纳及补充,转载请注明出处! 一.精灵图 1.1 为什么需要精灵图? 一个网页中往往会应用 ...
- CSS精灵图代码示例
什么是css Sprite 当用户访问一个网站时,浏览器会向服务器发送一系列请求,比如说网页上的每张图像都需要经过一次请求才能最终展示给用户.然而,一个网页中往往包含大量的图像资源(例如在页面中展示的 ...
最新文章
- C#:String.Format数字格式化输出
- uniq :删除文件中重复出现的行
- POJ 1125 Stockbroker Grapevine
- 题目1169:比较奇偶数个数
- linux系统下创建symlink(@)即文件软链接(快捷方式)的命令
- oracle shared_pool_size 0,Oracle shared_pool_reserved_size参数设置说明
- HDU - 4565 So Easy!(共轭构造+推公式+矩阵快速幂)
- 【iCore4 双核心板_FPGA】例程十六:基于双口RAM的ARM+FPGA数据存取实验
- 2018年3月计算机二级考试题,2018年3月计算机二级考试Access综合试题十
- 设计师必备导航类网站,内有宝藏!
- vrml行走和静止的人代码_CAE二次开发的核心不是代码
- 2020-10-13
- Simulink嵌入式自动代码DSP F28335(4)——SVPWM
- 小米4Linux刷机包,小米4官方原厂固件rom线刷刷机包下载_小米4线刷官方系统包
- 代码坏的味道17:狎昵关系 (Inappropriate Intimacy)
- 在若依项目中添加导入excel功能
- Android成长之路-音乐播放器的实现
- Linux监控平台介绍
- 对蜜蜂CCD原因调查
- 红米5无线网连接上但是没有网络连接服务器,红米路由器wifi已连接但无法访问互联网怎么办 | 192路由网...
热门文章
- iphone微信下无法播放音乐
- 如何找自己想要的项目?看这里告诉你答案
- python炫酷动画源代码_(数据科学学习手札85)Python+Kepler.gl轻松制作酷炫路径动画...
- 八种炫酷纯CSS加载动画代码
- 前端数组json遍历3种方式总结
- c++数独游戏3.2
- Chrome浏览器源代码编译安装Dark Reader插件
- 2020年之HBuilderX manifest.json配置最全详解
- 软件推荐:AList
- Go C 编程 第4课 变色魔法(魔法学院的奇幻之旅 Go C编程绘图)