首页 > web前端 > H5教程 > 正文

什么情况下更适合使用 font-icon,相比图片 css sprites 有哪些优势?

php中文网
发布: 2016-06-07 08:43:21
原创
2793人浏览过

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

回复内容:

AI 中画完,保存为 SVG,上传到 ❍ IcoMoon ,稍微调整下位置大小,要什么下载什么。
什么情况下更适合使用 font-icon,相比图片 css sprites 有哪些优势?
下载后的文档结构,以及 Demo,相当方便了。 什么情况下更适合使用 font-icon,相比图片 css sprites 有哪些优势?
补充: 新的生成流程, https://github.com/morlay/font-online


优势:
1、矢量化,可直接被转换为任意大小,任意颜色。
一次制作,多端使用,包括 IE (低版本 IE 可以引入 eot 的 caniuse.com/#,虽然需要做些修正),满足各种 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,相比图片 css sprites 有哪些优势? 不知道淘宝、一淘算不算大流量网站……

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

Fliki
Fliki

高效帮用户创建视频,具有文本转语音功能

Fliki 151
查看详情 Fliki
对于兼容方面的先不说,关键需要看网站设计的风格,如果不是大量使用纯色图标, 使用彩色风格的还是无法使用。 我看腾讯视频直接用SVG画的,不知与font—icon比起来那个更好点 很明显,兼容性,
看看中国IE9以下的浏览器份额就明白了
相关标签:
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号