iconfont 介绍
最近公司的设计人员想要把网站上面的小图标都改为iconfont,我也做了一篇PPT分享给大家,如果现在不记下来,可能过几个月就忘得一干二净了
一· 现代设计的趋势
我们知道,传统设计的思路是拟物化,就是在电子设备中,模拟真实的世界。比如我们用的按钮,会有一些阴影的设计,让他看起来更像我们生活中用到的按钮。但是随着数字化越来越深入生活,拟物化的缺点也显现出来。首先就是人们不需要通过拟物来跨越现实世界和数字界面的鸿沟;其次就是信息的冗余,设计越来越专注于拟物的细节,反而无法凸显最直观的功能;最后就是复杂的拟物设计让人眼花缭乱,整体风格不够简洁。由此呢,新的设计理念应运而生,就是扁平化,他的基本理念是:去除冗余、厚重和繁杂的装饰效果,从让“信息”本身重新作为核心被凸显出来。最早走出扁平化设计的是微软,在10年推出的window phone7 ,就用了大量的简单形状,移除了复杂的样式和纹理。三年以后iOS7也采用了这种设计,自此扁平化设计开始在数字化设计用大规模的使用。
二· 传统的图片所存在的缺陷
想要在页面展现一些图标,传统的方式使用的就是图片,但是使用图片存在许多的弊端,主要表现是下面三个方面
- 增加了页面的请求:我们知道每张图片都是一个请求,所以有些网站为了提高性能会使用雪碧图,把网页中比较小的一些小图片整合到一张图片文件中,再利用CSS的background-image属性插入图片,然后利用background-position属性对图片所需要的部分进行精确定位。但是它有个问题就是,雪碧图比较适合固定功能的网站。而我们的网站每隔几天就要加一个新的功能,添加和替换雪碧图是个很繁琐的工作。而且目前我们公司网站设计全部使用sktech,我都好久没打开过ps了,对于sketch来说,雪碧图位置的标识也是个挺麻烦的事情。
- 图片的大小和颜色不容易改变:background-size是一个CSS3的属性,ie8是不支持的,所以不能够使用它来设置图片的大小,有的时候为了更加清晰,设计会给我一个二倍图,那我想让他在IE8下面正常的尺寸展示,就只能使用img标签,这种形式不仅加重了请求,而且对雪碧图很不友好。其次是颜色,这些icon 有很多时候,想要hover上去有个效果,目前必须准备两张图片,如果想改变成多个颜色,就要准备多个图片。
- 最后一个也是近些年面临的一个问题,就是苹果的屏幕清晰度越来越高,在高像素下面,传统的位图会出现马赛克,不够清晰,为了调高清晰度,图片越来越大。
三· 什么是iconfont
为了解决以上的问题,一种新的图标显示方法应运而生,那就是iconfont。iconfont,顾名思义,就是icon + font,即以字体的方式来显示图标,这个十分好理解,因为中文有时候也像一个个小图形。iconfont可以完美解决以上的问题,并具有以下的优点
- 由于请求的是一整个文件字体,所以减少了http的请求
- 可以像字体一样,任意变换大小和颜色;
- 矢量图,不会发生放大模糊的问题
- 结合CSS3的text-shadow,transform这些功能可以给字体添加一些旋转,阴影和透明度的视觉特效。
- 强兼容性,他的实现方式是使用CSS3的font-face, 但是这个属性从IE4开始就支持,可以完美适配IE6及以上的浏览器。
四· iconfont的使用方法
iconfont一共有三种使用方式,具体参照阿里妈妈图标库的官方文档
1.Unicode 方式
目前我们系统采用的是这种方式,这种方式的好处就是完美适配IE8,核心的思想就是这两段代码
@font-face {
font-family: "iconfont";
src: url('iconfont.eot?t=1511278425746'); /* IE9*/
src: url('iconfont.eot?t=1511278425746#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAABLQAAsAAAAAHGQ') format('woff'),
url('iconfont.ttf?t=1511278425746') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1511278425746#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-text-stroke-width: 0.2px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
- 为啥IE9的设置要单拎出来?
微软爸爸搞事情,在IE9的兼容模式下,是不支持后面那种书写方式的,所以单拎出来,直接适配IE9 - 为啥IE6-IE8的URL上有个#IEfix?
微软最初支持font-face这个功能的时候,font-face并没有收录到标准中,低版本的IE会把url里面第一个引号到最后一个引号都当成URL,解析出来一定是404,所以加了一个IEfix,表示后面的是锚点的内容,帮助浏览器正确解析,这个锚点叫什么并不重要。 - formate 是什么意思?
不同浏览器解析的字体格式不一样,formate就是告诉各种版本的浏览器,你支持这样的字体吗,支持的话就找这个URL - -webkit-font-smoothing: antialiased; 这是啥意思
这个是因为,字体在放大的时候,其边缘会出现锯齿状的样式,显示出来颗粒感很重,不够美观。而这个属性,叫做抗锯齿特性,功能就是把这些突出的小毛茬都切掉。而且要注意,这个属性只在Mac电脑上是有效的,因为苹果认为应该显示设计最原本的样式,这样屏幕上展示的内容和打印机打印出来的内容一样,但是微软认为展示的样式符合大众认识的美观更加重要,所以Windows7以上会自动开启ClearType的抗锯齿方法。 - 那-webkit-text-stroke-width: 0.2px;又是有啥用
用抗锯齿技术把小毛茬切掉以后,icon相当于比预想的要细了,使用这个功能,给图标描个0.2px的边,完美符合预期
2.fontclass 方式
没啥好说的和Unicode差不多,只不过用:after伪元素使用,我试了一下,IE8是支持伪元素的。但是不支持大小的修改,所以这种方式只能兼容IE9及以上的方式
3.symbol 方式
传说是未来发展的趋势,可以展示多种颜色的图标。核心的代码是下面这段
.icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em; height: 1em;
/* 图标和文字相邻时,垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
- vertical-align: -0.15em; 这么设置是为啥
因为SVG虽然可以使用font的方式对icon进行大小和颜色的变换,但是本质上不是font,而更像一张图片。这导致如果icon后面跟着文字的话,文字会按照baseline对齐icon的底端,为了让SVG表现的和font一样,就把后面的文字对齐icon的baseline位置,因为一般baseline距离bottom的距离是0.15,所以这个数值设置成了0.15em。至于为什么要采用这种看上去意义不明的计算方式而不是直接使用bottom属性,那是因为bottom这个属性在低版本浏览器(尤其是IE8)上产生的bug比较多,而数字计算的方式更加稳定。
五· 踩过的坑
9月的时候iconfont团队做过一次改版,他们应广大技术人员的要求,将woff文件默认转换成了base64的格式,因为base64将文件直接编码所以可以减少一次http请求。原则上IE8 是支持base64的,但是IE8对base64的解码有限制,如果进行64位编码后大于32K,则超过32K的部分不能被解码,我做过实验,就是使用只有两个图标生成的base64,十分短,放在IE8下面是好用的,但是实际项目的文件图标很多,就没办法正常的显示了。于是我到阿里的网站跟他们说明了情况,希望他们能够加一个关闭base64的功能,但是阿里的人员跟我说,天猫已经全线放弃IE8了,希望我们也放弃IE8.所以目前只能手动的将base64转为文件的地址,而且后续估计也要一直如此
六· 总结
iconfont改完的页面肉眼可见的美观了不少,书写也十分的方便,目前主流的网站大部分都已经使用iconfont了,相信不久的将来他会遍布互联网的每个角落
本文转载于:猿2048→https://www.mk2048.com/blog/blog_hkiha1hbbab.html