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

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

WBOY
WBOYOriginal
2016-06-07 08:43:212514Durchsuche

是不是大流量网站很少见到有用?比如知乎、豆瓣、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的兼容性烦恼。

对于兼容方面的先不说,关键需要看网站设计的风格,如果不是大量使用纯色图标, 使用彩色风格的还是无法使用。 我看腾讯视频直接用SVG画的,不知与font—icon比起来那个更好点 很明显,兼容性,
看看中国IE9以下的浏览器份额就明白了
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn