css精灵图&字体图标

精灵图

1. 为什么需要精灵图
   • 为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度。出现了CSS精灵技术
2. 精灵图（sprites）的使用
   • 精灵技术主要针对背景图片。就是把多个小背景图片整合到一张大图片中。
   • 这个大图片也称为sprites精灵图或者雪碧图
   • 移动背景图片位置，使用background-position
   • 移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
   • 使用精灵图的时候需要精确侧脸，每个小背景图片的大小和位置

字体图标

1. 主要用于显示网页中通用、常用的一些小图标
2. 精灵图缺点
   • 图片文件比较大
   • 图片本身放大和缩小会失真
   • 一旦图片制作完想要更换非常复杂
3. 字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的时图标，本质属于字体
4. 优点
   • 轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少服务器请求
   • 灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影、透明效果，旋转等
   • 兼容性：几乎支持所有的浏览器
   • 【注意】
     • 字体图标不能代替精灵技术，只是对工作中图标部分技术的提升和优化
5. 字体图标的下载
   • icomoon字体库 http：//icomoon.io
   • 阿里iconfont字体库 http：//www.iconfontcn/
6. 字体图标的引入
   • 把下载包里面的font文件夹放入页面根目录
   • 在CSS样式中全局生命字体：简单理解把这些字体文件通过css引入到我们页面中
   • html标签内添加小图标
   • 
7. 字体图标的追加
   • 把压缩包里面的selection.json从新上传，然后选中自己想要新的图标，重新下载压缩包，并替换原来的文件

CSS三角画法

div{

				width:0;

				height:0;

				line-height: 0;

				font-size: 0;

				border: 50px solid transparent;

				border-left-color: black;

}

css精灵图&字体图标的更多相关文章

1. CSS精灵图与字体图标

   CSS精灵图与字体图标 1. 精灵图 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户.然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多 ...

2. CSS精灵图(王者荣耀案例)

   首先,我们应该知道引入精灵图的原因: 具体是因为,网页上面的每张图片都要经历一次请求才能展示给用户,小的图标频繁的请求服务器,降低页面的加载速度,为了有效地减少服务器接收和发送请求的次数,提高页面的加 ...

3. jQuery---bootstrap的下载使用,栅格(12个格子),轮播图,矢量图字体图标,进度条,选项卡,标签,表达校验

   jQuery---bootstrap的下载使用,栅格(12个格子),轮播图,矢量图字体图标,进度条,选项卡,标签,表达校验 一丶bootstrap的使用 下载资源文件: bootstrap官网 导入 ...

4. 课时102.CSS精灵图（掌握）

   我们这节课来介绍一个和背景图片相关的东西,精灵图 1.设么是css精灵图? css精灵图是一种图像合成技术 2.css精灵图作用 可以减少请求的次数,以及可以降低服务器处理压力 3.如何使用css精灵 ...

5. CSS sprites(css 精灵):将小图标整合到一张图片上

   一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS backgr ...

6. CSS——精灵图与背景图片定位

   精灵图产生背景: 1.网页上的每张图像都需要向服务器发送一次请求才能展现给用户.2.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数 ...

7. css精灵图使用

   1. 精灵技术的使用 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的b ...

8. css 精灵图的使用

   精灵图的使用 1.给一个容器定义一个大小(宽高) 2.引入背景图 3.定位到自己你想要的图片位置 例如:  background-position: 0 0;  background-position ...

9. CSS精灵图合成工具

   链接:http://pan.baidu.com/s/1o7OUUVo 提取密码:rmnx

随机推荐

1. 前端Vue准备工作

   环境准备: 1.安装Node&npm,只是为了要Node.js的环境https://nodejs.org/en/download/ 2.安装完成Node以及npm之后,就可以用npm conf ...

2. 关于javascript中变量及函数的提升

   javascript中变量以及函数的提升,在我们平时的项目中其实还是挺常用的,尤其是大型项目中,不知不觉就会顺手添加一些变量,而有时候自己的不小心就会酿成一些不必要错误,趁有时间整理一下自己对于js中 ...

3. 微信小程序跳转传参参数丢失？

   垂死病中惊坐起,笑问 Bug 何处来?! 1.先是大写字母作祟 前两天发布了「柒留言」v2.0.0 新版本,结果...你懂的嘛,没有 Bug 的程序不是好程序,写不出 Bug 的程序员不是好程序员. ...

4. 多线程之NSOpertionQueue操作队列

   //NSOpertionQueue NSOperation //Queue //主队列 和 自定义队列 //主队列是运行在主线程当中,自定义队列运行在后台 //NSOperation 定义需要执行的操 ...

5. ActiveMQ持久化到MySQL以及使用SSL协议通讯

   最近公司事情稍微少了点,研究下怎么优化几个系统的交互,因为我们目前使用的是长链接的同步接口,就考虑用下MQ来处理下.由于公司对安全有要求且和CA业务有关,则使用了SSL协议.此文使用的是Activem ...

6. iozone - a filesystem benchmark tool 主要是用来测试文件系统 性能

   简介:    磁盘设备之上是文件系统,测试磁盘的工具往往就是调用块设备驱动的接口进行读写测试.而文件系统的测试软件就是针对文件系统层提供的功能进行测试,包括文件的打开关闭速度以及顺序读写随机位置读写的 ...

7. Centos 静态网络配置

   cat /etc/sysconfig/network-scripts/ifcfg-ens33 DEFROUTE="yes" IPV4_FAILURE_FATAL="no& ...

8. sqliteman

   2.安装文件 采用源码方式安装 可用下面地址自行下载 https://sourceforge.net/projects/sqliteman/files/sqliteman/1.2.2/ 3.安装 1) ...

9. LeetCode 5365. 可被三整除的最大和 Greatest Sum Divisible by Three

   地址 https://www.acwing.com/solution/leetcode/content/6340/ 题目描述给你一个整数数组 nums,请你找出并返回能被三整除的元素最大和. 示例 : ...

10. 算法问题实战策略 FENCE

    地址 https://algospot.com/judge/problem/read/FENCE 开始考虑暴力遍历 #include <iostream> #include <str ...