什么情况下更适合使用font-icon，相比图片csssprites有哪些优势？

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了什么情况下更适合使用font-icon，相比图片csssprites有哪些优势？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1549字，纯文字阅读大概需要3分钟。

内容图文

是不是大流量网站很少见到有用？比如知乎、豆瓣、google各种网站

回复内容：

AI 中画完，保存为 SVG，上传到 ? IcoMoon ，稍微调整下位置大小，要什么下载什么。

下载后的文档结构，以及 Demo，相当方便了。
补充： 新的生成流程， https://github.com/morlay/font-online


优势：
1、矢量化，可直接被转换为任意大小，任意颜色。
一次制作，多端使用，包括 IE （低版本 IE 可以引入 eot 的 http://caniuse.com/#feat=eot，虽然需要做些修正），满足各种 Retina 的需求。
2、通过 font 的一致的 CSS 属性进行控制，除了单色外，还可以 text-shadow 等，来进行简单色彩的混搭。（ 当然可以完全升级为 SVG，玩成这样，SVG Icons FTW，但放弃低版本 IE 用户这种事，任重道远；而且这已经不是 font 的范畴了）


劣势：
1、对于「过于精细」的路径，会出现失准的情况（似乎是不同系统字体渲染的问题，暂时没有深究为什么）。
2、色彩过于单一。
3、字体 U+ 编号，如果没有 LESS/SASS/STYLUS 的变量帮助，用在 CSS 里并不是那么方便，（毕竟图标不一定是放到文本中的，还有作为背景元素之类的，:before{ content : '\e020' } 这种用来手写 CSS 有点反人类吧。

至于什么情况下更适合使用，看自己的需求吧。 矢量、可變色
拿 BootStrap 的 2 和 3 作對比「icon: 2 用的是 css sprite、3 用的是 font-icon」
3 的 icon 顏色可以跟隨按鈕變換，在 Retina 屏幕上更銳利
不知道淘宝、一淘算不算大流量网站……

阿里系的很多站点都用了。font icon的好处很多，除了矢量化，可变色，不用考虑ie6的PNG透明等常说的好处外，还不用为sprite icon中的inline-block的兼容性烦恼。

对于兼容方面的先不说，关键需要看网站设计的风格，如果不是大量使用纯色图标, 使用彩色风格的还是无法使用。 我看腾讯视频直接用SVG画的，不知与font—icon比起来那个更好点 很明显，兼容性，
看看中国IE9以下的浏览器份额就明白了

内容总结

以上是互联网集市为您收集整理的什么情况下更适合使用font-icon，相比图片csssprites有哪些优势？全部内容，希望文章能够帮你解决什么情况下更适合使用font-icon，相比图片csssprites有哪些优势？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---