让字体图标代替雪碧图,减少请求带宽
一、什么是字体图标 icon font 及使用场景
从百度百科一下什么事icon font,没有解析。那就用在使用过程的对字体图标的理解,解释一下。
字体图标就是利用字体来显示网页中的的纯色图标,或者是特殊字体。举个栗子,如下图
这张图的三个小icon,都是使用字体图标的,如果不是使用字体图标,可能是6个小图片,可能优化之后就是把这6个小图片做成雪碧图,还好,现在使用compass可以自动生成雪碧图,也是省了一大功夫啊。那么问题来了,如果是做成雪碧图,相对于三个字体来说,无疑体积是大的,那么对待这种纯色的图标,使用字体图标就最适合不过了。千万别开心的开心,下面有坑...(留点悬念)。
二、使用字体图标的优缺点
现在做的页面大部分是响应式设计的,在不同的终端显示,同一个icon在大屏终端肯定就比小屏的大。
此处引用w3cplus某篇文章曾经总结的,因为总结的已经很完整的概括了他的优点。
- 很容易任意地缩放;
- 很容易地改变颜色;
- 很容易地产生阴影;
- 可以拥有透明效果;
- 一般来说,有先进的浏览器支持;
- 可以使用css 装饰(可以得到CSS很好支持);
- 可以快速转化形态(做出一些变化,如 :hover等);
- 可以做出跟图片一样可以做的事情(改变透明度、旋转度,等);
- 本身体积更小,但携带的信息并没有削减。
举个栗子~
这里的图标被我放大了很多,但是并没有失真。这就是其中一个优点,可以任意缩放。
有好必有坏,世间万物相辅相成。
缺点就是:
1、制作用于生成icon font的svg比较麻烦
2、不适合多色彩的图标,多色彩的图片仍需要使用图片
三、字体图标的原理是什么
在生成字体文件的工具上,导入我们的svg图片,就可以生成对应的字体文件。包括调用图标的css。真的好神奇。
在这些小icon命名为icon-tick的svg这个进入大熔炉的时候,是根据什么算法将这个content的16进制编码跟每一个className对应起来。然后只用使用这个icon-tick的className,就会显示出图标来。实在神奇。
这一块以后搞懂了补上。
四、怎么使用字体图标
生成字体图标的工具网站推荐有两个:
https://icomoon.io/ (我现在使用)
http://fontawesome.io/(很知名的字体图标网站)
成功使用字体图标的步骤如下:
1、跟设计师拿到小icon的svg图片,然后例如命名为icon-tick.svg,然后在icomoon.io导入。
看到如图:
2、此时我们可以查看一下,现在通过这个生成字体图标生成的图标代码是什么。如下图:
3、 点中你想查看的icon,然后点击Generate Font,此时就看到代码了。
4、把字体文件下载下来,一会引入到页面中
解压后,把这四个文件拷贝到项目的font文件夹。
我的font文件夹和css资源的放在同一级
然后就从download的文件中找到style.css把样式,如下图,拷贝到自己的css文件中,这样在html文件引入这个css文件之后,只要在html文件中添加icon-tick就可以显示这个字体图标,就是这么愉快的使用上字体图标了。
五、结束语
字体图标在多终端显示还是比较有优势的。再也不用担心放大图标显示模糊,也不用担心在苹果的视网膜屏幕模糊,因为它是矢量的。所以如果站点中很多图标是纯色的,推荐使用字体图标。
20170228补漏写的坑
事情经过是这样的,我做一个跑流程的页面,会有步骤二那里可能会有“扣款”“未全额扣款”“等待扣款”等,所以对应的icon会不一致,需要我在不同的状态修改一下icon。下图:
可以看到生成的css文件,有很多icon对应的十六进制代码,
.icon-feedback:before{content: "\e900"}
.icon-choose:before{content:"\e609"}
我的想法:
那要切换很容易啊,跟我们平时切换雪碧图时一样修改background-position的值就好。所以要切换字体图标一样的道理嘛,就是修改一下content对应的十六进制的代码。完美解决!
但是你确定这里的编码是固定不变的吗?我们的icon会不断的被加进来,那么这里的编码会唯一不变吗?答案是否定的。当你从你的svg里面删除或添加一个icon,那么这里的其他icon的content对应的编码就会发生微小变化,也就是说坑爹咯,你如果使用修改content的值去切换icon,那就是掉坑了,切记不能这样做!!
原因:https://icomoon.io/利用工具生成字体文件时,因为你icon的增减之后会重新编码。
正确的做法:生成的字体文件,拷贝这些css样式到我们的文件里,然后调用的时候就使用这些icon的className,千万不要去修改content的内容。当你要根据不同状态显示不同的icon的话,那就只能麻烦一点咯,顺便把这个icon的class也切换了。
参考文章:
http://www.w3cplus.com/css3/icon-fonts.html
https://isux.tencent.com/icon-font.html
写好代码,快乐生活,噢耶
转载于:https://www.cnblogs.com/wuyinghong/p/6476333.html
让字体图标代替雪碧图,减少请求带宽相关推荐
- CSS 背景图标(雪碧图、精灵图、iconfont)
目录 雪碧图(精灵图) icon-font 雪碧图(精灵图) 特点: 一个网站有很多背景图(一般是系统UI图片, 不是用户自己上传的那种)时, 会多次向服务器发起请求, 造成服务器压力. 为了解决这个 ...
- JAVA自动生成雪碧图sprites和样式CSS文件(包含原始图标CSS、雪碧图CSS)
在项目的开发过程中,如果一个页面有很多的小图标展现.浏览器展示页面时会向后台服务器发送很多的请求获取对应的图片,这样既浪费资源,也使得页面的加载变得很慢,影响客户的体验.此时我们可以采用将这些小图标放 ...
- gulp将多张小图自动合成雪碧图
最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...
- 【夯实基础--CSS】=> 高级技巧(雪碧图/滑动门/CSS三角形/字体图标(iconfont)等)
CSS高级技巧 CSS用户界面样式 所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
- CSS 网站小图标 雪碧图
https://www.jianshu.com/p/7482dde882af 网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题:目前小图标显示常见有两种方式(其他方式欢迎补充):1. ...
- 快速获取雪碧图的图标样式插件 - gulp-css-spriter教程
如何快速把合成好的雪碧图,快速获取图标的样式呢? 用gulp-css-spriter很简单. 第一步: 在某个文件夹用shitf+鼠标右键 第二步: npm install gulp-css-spri ...
- html网站雪碧图素材,webpack雪碧图实现(webpack管理小图标素材)
雪碧图也叫CSS精灵, 是一CSS图像合成技术,这里介绍webpack实现雪碧图 这是我的文件目录: // 在上个实例项目上增加了icons文件夹: // dist/sprites/目录是后面执行we ...
- 把所有的小图标一起做成雪碧图吧 请用gulp-css-spriter.
用gulp-css-spriter很简单. 第一步: 在某个文件夹用shitf+鼠标右键 第二步: npm install gulp-css-spriter https://www.npmjs.com ...
- 一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite) 一.什么是雪碧图? 雪碧图(CSS Sprite)又叫CSS精灵图,是一种网页图片应用处理方式,他允许你将一个页面设计到 所有零星图片 ...
最新文章
- html li 右跟下有倒影,HTML5 canvas实现的下雨夜湖面星空倒影动画特效
- 2021-春季学习-智能车技术创新与实践-Lesson2
- 重磅推荐:保姆级Java技术图谱!够学到元宵节了,赶紧收藏!
- 面向对象发牌Java_面向对象思路的斗地主发牌小程序
- P4721 【模板】分治 FFT
- java date传输类型错误_转换日期格式:Java中的转换错误?
- linux怎么安装32电脑上,linux – 如何在Ubuntu上安装mingw32?
- vue组件内数值做watch监听,首次监听不到的问题
- 五个最佳RSS新闻阅读器
- 新年2021HTML,2021新年倒计时html代码
- 在VM环境下安装iKuai(爱快)软路由——适合小白(最新最全教程)
- 关于django后台界面的美化
- 黑魂3无法从服务器获取信息,黑魂3怎么读取信息 | 手游网游页游攻略大全
- AIOps需要翻越的「三座大山」
- 反相器的Cadence仿真
- mining.subscribe与initiate_stratum函数
- idea license server 最新可用 IntelliJ IDEA 2018.1 x64 激活 idea license server
- DNS中继服务器研究
- Tableau:自定义地图的使用
- 看Linus骂人,真解气
热门文章
- C# Delegate(委托)与多线程
- 可怕又可笑的看病经历
- Pandas简明教程:八、Pandas数据透视表
- TensorFlow example示例 Process finished with exit code -1073741819 (0xC0000005)
- Ignite 的helloworld第二弹!(附源码!下载即用)
- matlab基于dct的图像压缩编码解码_基于FPGA的扩频系统设计(下)
- 视图——概述 || 创建或者修改视图 || 查看视图 || 删除视图
- jQuery 基础选择器/层级选择器/隐式迭代
- 块级作用域(es5没闭包-有闭包-let对比)
- 组件间数据交互——组件插槽的作用||具名插槽用法|| 作用域插槽