精灵图和字体图标学习
精灵图
为什么需要精灵图?
一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度
因此,为了有效的减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)
精灵图(sprites)的使用
使用精灵图核心:
1.精灵图技术主要针对于背景图片使用,就是把多个小背景图片整合到一张大图片中
2.这个大图片也称为sprites精灵图 或者 雪碧图
3.移动背景图片位置,此时可以使用background-position;
4.移动的距离就是这个目标图片的x 和y坐标,注意网页中的坐标有所不同
5.一半情况下都是往上往左移动,所以数值是负数
6.使用精灵图的时候需要精确测量,每个小背景图片大小和位置
PS用法用切片的方式,双击鼠标即可知选中图片的信息(包括宽度高度 x y 轴大小)
字体图标
字体图标的产生
字体图标使用场景: 主要用于显示网页中通用、常用的一些小图标
精灵图有诸多优点,但是缺点很明显
图片文件还是比较大的
图片本身放大和缩小会失真
一旦图片制作完毕想要更换非常复杂
此时,有一种技术的出现很好的解决了以上问题,就是字体图标inconfont
字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体
轻量级:一个图标字体要比一系列的图像要小,一旦字体加载了图标就会马上渲染出来,减少了服务器请求
灵活性:本质其实是文字,可以很随意的改变颜色,产生阴影,透明效果,旋转等
兼容性:几乎支持所有浏览器,请放心使用
注意:字体图标不能替代精灵技术,只是对工作中图标部分技术的特生和优化
总结:
如果遇到一些结构和样式比较简单的小图标,就用字体图标
遇到样式复杂的小图片就用精灵图
字体图标使用
字体图标是一些网页常见小图标,我们直接网上下载即可,因此使用可以分为:
字体图标的下载(引入我们HTML页面中)
字体表土的追加(以后添加新的小图标)
字体图标的下载
incomoon 国外加载慢 不免费
网站:阿里inconfont字库 国内、免费
字体图标的引入
把下载包里的fonts文件夹放入页面根目录下 准备了四种文件
(不同浏览器所支持的字体格式是不一样的,字体图标之所以兼容,就是因为包含了主流浏览器的字体文件)
在CSS样式中全局声明字体,简单理解把这些文字文件通过CSS引入到我们页面中
一定注意字体文件路径的问题
html标签内添加小图标 打开压缩包文件中demo.html小方框
在给span添加字体形式 font-family
-
直接复制font文件中style.CSS内容 复制到display: block;
字体图标的追加
如果工作中,原来的字体图标不够用了,我们需要添加新的字体到原来的字体文件中
把压缩包里面的selection.json从新上传 然后选中自己想要新的图标,重新下载压缩包,并替换原来的文件即可
精灵图和字体图标学习相关推荐
- 【CSS进阶】精灵图、字体图标、用户界面样式、常见布局技巧、初始化、CSS三角
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍精灵图.字体图标.CSS三角.用户界面样式.vertical-align.常见布局技巧.初始化 思 ...
- 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精灵图.字体图标.三角.鼠标样式.用户界面样式.溢出省略号] 本文档是个人对 Pink 老师课程的总结归纳及补充,转载请注明出处! 一.精灵图 1.1 为什么需要精灵图? 一个网页中往往会应用 ...
- web前端入门学习 css(7)css高级技巧 (精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化)
文章目录 精灵图 为什么需要精灵图? 精灵图的使用 精灵图课堂案例 用精灵图拼出自己的名字 字体图标 字体图标的下载 字体图标的引入 字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
- 【CSS基础学习笔记】精灵图、字体图标、三角形、样式优化
精灵图 CSS精灵技术:能有效地减少服务器接收和发送请求的次数,提高页面的加载速度. 核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了.(主要针对小的背景图片,因为 ...
- 精灵图与字体图标的区别和用法(附Icomoon字体图标的使用方法)
CSS苦逼学习日记(6) 精灵图 1.精灵图是什么?: 把许多小图标都放在一个大图片上,这样利用小图标的时候只需要重复使用多次利用同一张大图片,减少加载各种图片路径的时间,减小程序(网页)的运行速率, ...
- css高级技巧(精灵图、字体图标、三角、vertical-align属性、溢出文字省略号等)
css高级技巧 1.精灵图 1.1.为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送图片,造成服务器请求压力过大,这将大大降低页面的加载 ...
最新文章
- 物理学走到尽头了吗 | 维尔切克专栏
- yii2地址多级联动
- win10中的ubuntu子系统忘记root密码如何修改
- 开源.NET企业级应用系统 OpenVista
- pandas-事例练习
- vba编程把纯文本转换成html,如何将一列文本与html标签转换为Excel中的vba格式文本...
- windows远程连接linux系统(图文)
- deferred initcalls与模块化
- spring4.1.8扩展实战之七:控制bean(BeanPostProcessor接口)
- gazebo 模型导入
- Xilinx平台SRIO介绍(四)SRIO IP核配置
- 全面拆解携程云原生实践,打造智能弹性的云端酒店直连系统
- 科技论文写作课程笔记
- Python宜昌房源数据获取与分析
- 开关电源模块并联供电系统_开关电源中X电容与Y电容的作用
- Simulink高级应用—— Matlab Function中共享或使用全局变量或全局数据
- 通过uc_client接口方式,更新discuz会员头像
- 小红书怎么推广引流?怎么样在小红书上引流?
- django+vue全
- VSCode中使用 eslint+prettier完成代码格式化以及自动化整理
热门文章
- 在线获取访客QQ号码的原理及实现方法
- TDA4VH j784s4 使用
- html地球转动效果,使用纯 CSS3 动画实现地球转动
- 西工大计算机学院博士考试,【经验指导】西北工业大学2019年博士研究生报考指南及考博注意事...
- 股票技术分析--任正德主编
- golang testify 测试库
- 艾司博讯:拼多多企业店铺和个人店的区别在哪里?
- 北京市公安局“人工智能安全研究中心”和“关键信息基础设施保护中心”2022年公开招聘工作人员公告
- 为什么快捷指令无法将媒体转换为文本_全知乎最全!iOS“捷径(快捷指令)”应用进阶教程 (附入门教程链接)...
- linux安装和配置 MariaDB (ubuntu20.04)