雪碧图唯一的优点是减少请求数，HTTP/1.1下浏览器同时加载资源的数量是一定的，IE6个，chrome 6个，firefox 8个，而HTTP2 下是没有数量限制的

雪碧图的制作方法：node 的一个包 css-sprite ，制作方便，只要将图标做好放到对应的文件夹里，写好配置文件运行就能生成相应图片的css

雪碧图的缺点

高清屏失真
不方便变化

雪碧图是一张静态图片，生成的时候就注定只能用固定的方式展示，不能动态的改变他的大小、颜色

图标字体 icon font

图标字体就是将图标做成一个字体，使用时与普通字体无异，可以设置字号大小、颜色、透明度、等等，最大的优点是它是矢量图，不会失真，可以兼容到IE6还有一个优点是文件特别小185个图标生成的ttf字体才37kb woff2 格式才19kb

图标字体的制作方法

需要准备PS和AI，在ps中打开ui图，选中图标图层(使用合并路径组件合并路径【字体只支持单路径】) —> 文件 —> 导出 —> Illustrator （生成一个AI文件）—> 用AI打开 —> File —> Scripts —> SaveDocsAsSVG
使用ps CC 有个直接导出SVG的功能，在图层上右键 —> 导出来 –> 选择svg

接下来，借助第三方网站icomoon.io制作图标，进入app页面，选择导入icon，将刚刚的svg上传上去

问题处理：
1. 生成的svg填充可能置为none

有时候遇到生成了svg，但是上传上去是空的，需要检查下svg文件，是否有fill：none，这里需要手动将none改为任意的一个色值就好了

图标字体的使用

生成字库后每个图标都对应一个字号，使用伪类引入就好了（缺点：字体只能使用单色）

@font-face{/* 顺序一定要正确，woff2要写在ttf前，支持woff2的就不会再加载ttf，svg格式的字体基本没什么用，没有什么浏览器支持，但是它可以用来导入到另外一个icomoon的工程，或者用来恢复工程 */font-family:'qiphon-font',src:url('fonts/1.eot'),src:url('fonts/1.eot#iefix?20180718') format('embeded-opentype'), url('fonts/1.woff2') format('woff2'),url('fonts/1.ttf') format('truetype'),url('fonts/1.woff') format('woff'),url('fonts/1.svg#icon-font') format('svg'),font-weight:normal;font-style:normal;}.qiphon-font{font-family:'qiphon-font';-weikit-font-smoothing:antialiased;-moz-font-smoothing:grayscale;
}.qiphon-search:before{content:'\e9d3';/*  每个符号都有自己的实体字符 （在普通的英文或中文字体里，“0”的编码是0x30，即48，这个其实是0的ASCII或者Unicode编码，同样的图标的字体也会给他每个’字‘一个编码然后用伪类的content加上反斜杠转义，如普通字体content:"\48" 和 content:"0" 效果是一样的）*/
}

可能会遇到的问题

weikit浏览器会在边缘加粗一个px，这个问题在间距比较小的时候比较明显，解决方案是加上一个font-smoothing的属性
注意缓存
后续如果加入了新的字体如果不做处理的话，已经加载过的字体可能有缓存不会加载新的字体，解决办法：在@font-face导入的url里写入版本号,更彻底的方式是：更改路径名，或文件名
多人协作
icomoon免费版的数据是储存在浏览器的本地数据库的，商业版的交点钱可以把数据存储在云端

svg

对于多色图标，可以在页面插入一个svg，svg除了IE8不兼容其他浏览器兼容都很好
几个使用svg的方法:

直接copy到页面，就是把svg当成一个html标签直接嵌入页面，当成内联的，这样有个缺点，会导致html的文件太大，html是不会被缓存的，也会阻塞页面加载
<div> <svg></svg> </div>
使用 embed / object / img
<embed src="1.svg" width="100" height="100"> <img src="1.svg" width="100" height="12">
img的兼容要比embed差，这样做缺点是由于是一个外链，没有办法用css控制它当svg过多的时候可以考虑把多个svg合并成一个svg像雪碧图那样

合并svg
通过用一个个的symbol将多个svg合在一起，同时给每个svg一个id，使用的时候就会用到

    <svg><symbol viewBox="0 0 101.5 57.9" id="active-triangle"><path fill="#15c0f1" d="M100.4.5L50.7 57.1 1.1.5h99.3z"/><symbol viewBox="0 0 101.5 57.9" id="logo"><path fill="#15c0f1" d="M120.4.5L50.7 57.1 1.1.5h99.3z"></svg>///使用方式<svg viewBox="0 0 100 100"><use xlink:href="icon.svg#logo"></svg>

IE不支持svg，但是有人用插件实现了，原理是检测到浏览器不支持的时候将其外链替换成相应的svg内容，详见svg for everybody

浏览器常用的图片优化雪碧图/实体字符/svg相关推荐

前端工程师实战17：详解CSS背景图片、雪碧图
大家好,全套HTML和CSS入门与实战课程正在我的专栏<HTML与CSS入门与进阶>更新中!按知识点循序渐进,按照顺序读下来绝对比搜索网上教程更加紧凑!内容通俗易懂,图文并茂,欢迎订阅! ...
让字体图标代替雪碧图，减少请求带宽
一.什么是字体图标 icon font 及使用场景从百度百科一下什么事icon font,没有解析.那就用在使用过程的对字体图标的理解,解释一下. 字体图标就是利用字体来显示网页中的的纯色图标,或 ...
使用Compass制作雪碧图
遇见好的文章,笔者也会转载.但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践.所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考. 这篇文章转载自:http://www.h ...
第 08 课：自动生成雪碧图
背景在开发过程中,可能存在大量的小图片和小图标,虽然每张图的尺寸不大,但每次都需要发起一次 HTTP 请求,从性能优化的角度来说是不合理的.常见的做法是我们将多个小图片拼成一张大图(前端界叫做雪碧图 ...
CSS-Sprite（雪碧图）
CSS-Sprite (解决HTML图片闪烁问题) 1. 描述图片属于网页中的外部资源,外部资源都需要浏览器单独发送请求加载,浏览器加载外部资源时是按需加载,用则加载,不用则不会加载.如果我们使用所 ...
在html中雪碧图的坐标怎么看,详解CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
CSS 网站小图标雪碧图
https://www.jianshu.com/p/7482dde882af 网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题:目前小图标显示常见有两种方式(其他方式欢迎补充):1. ...
CSS Sprite雪碧图详解
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
关于前端Retina 屏幕兼容和基于Retina 屏幕兼容的雪碧图技巧
由于苹果电脑的普及,所以Retina 屏幕兼容越来越重要,在普通屏幕上正常的背景,在Retina 屏幕上都会发虚. 首先新建一个scss文件,起名为utils.scss ,在文件中写入下面代码: /* ...

浏览器常用的图片优化雪碧图/实体字符/svg

雪碧图的缺点

图标字体 icon font

图标字体的制作方法

图标字体的使用

可能会遇到的问题

svg

浏览器常用的图片优化雪碧图/实体字符/svg相关推荐

最新文章

热门文章

浏览器常用的图片优化 雪碧图/实体字符/svg

雪碧图的缺点

图标字体 icon font

图标字体的制作方法

图标字体的使用

可能会遇到的问题

svg

浏览器常用的图片优化 雪碧图/实体字符/svg相关推荐

最新文章

热门文章

浏览器常用的图片优化雪碧图/实体字符/svg

浏览器常用的图片优化雪碧图/实体字符/svg相关推荐