iconfont 介绍

最近公司的设计人员想要把网站上面的小图标都改成iconfont，我也作了一篇PPT分享给你们，若是如今不记下来，可能过几个月就忘得一干二净了

一· 现代设计的趋势

咱们知道，传统设计的思路是拟物化，就是在电子设备中，模拟真实的世界。好比咱们用的按钮，会有一些阴影的设计，让他看起来更像咱们生活中用到的按钮。可是随着数字化愈来愈深刻生活，拟物化的缺点也显现出来。首先就是人们不须要经过拟物来跨越现实世界和数字界面的鸿沟；其次就是信息的冗余，设计愈来愈专一于拟物的细节，反而没法凸显最直观的功能；最后就是复杂的拟物设计让人眼花缭乱，总体风格不够简洁。由此呢，新的设计理念应运而生，就是扁平化，他的基本理念是：去除冗余、厚重和繁杂的装饰效果，从让“信息”自己从新做为核心被凸显出来。最先走出扁平化设计的是微软，在10年推出的window phone7 ，就用了大量的简单形状，移除了复杂的样式和纹理。三年之后iOS7也采用了这种设计，自此扁平化设计开始在数字化设计用大规模的使用。

二· 传统的图片所存在的缺陷

想要在页面展示一些图标，传统的方式使用的就是图片，可是使用图片存在许多的弊端，主要表现是下面三个方面

1. 增长了页面的请求：咱们知道每张图片都是一个请求，因此有些网站为了提升性能会使用雪碧图，把网页中比较小的一些小图片整合到一张图片文件中，再利用CSS的background-image属性插入图片，而后利用background-position属性对图片所须要的部分进行精肯定位。可是它有个问题就是，雪碧图比较适合固定功能的网站。而咱们的网站每隔几天就要加一个新的功能，添加和替换雪碧图是个很繁琐的工做。并且目前咱们公司网站设计所有使用sktech，我都很久没打开过ps了，对于sketch来讲，雪碧图位置的标识也是个挺麻烦的事情。
2. 图片的大小和颜色不容易改变：background-size是一个CSS3的属性,ie8是不支持的，因此不可以使用它来设置图片的大小，有的时候为了更加清晰，设计会给我一个二倍图，那我想让他在IE8下面正常的尺寸展现，就只能使用img标签，这种形式不只加剧了请求，并且对雪碧图很不友好。其次是颜色，这些icon 有不少时候，想要hover上去有个效果，目前必须准备两张图片，若是想改变成多个颜色，就要准备多个图片。
3. 最后一个也是近些年面临的一个问题，就是苹果的屏幕清晰度愈来愈高，在高像素下面，传统的位图会出现马赛克，不够清晰，为了调高清晰度，图片愈来愈大。

三· 什么是iconfont

为了解决以上的问题，一种新的图标显示方法应运而生，那就是iconfont。iconfont，顾名思义，就是icon + font，即以字体的方式来显示图标，这个十分好理解，由于中文有时候也像一个个小图形。iconfont能够完美解决以上的问题，并具备如下的优势

1. 因为请求的是一整个文件字体，因此减小了http的请求
2. 能够像字体同样，任意变换大小和颜色；
3. 矢量图，不会发生放大模糊的问题
4. 结合CSS3的text-shadow，transform这些功能能够给字体添加一些旋转，阴影和透明度的视觉特效。
5. 强兼容性，他的实现方式是使用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;
}

1. 为啥IE9的设置要单拎出来？
   微软爸爸搞事情，在IE9的兼容模式下，是不支持后面那种书写方式的，因此单拎出来，直接适配IE9
2. 为啥IE6-IE8的URL上有个#IEfix？
   微软最初支持font-face这个功能的时候，font-face并无收录到标准中，低版本的IE会把url里面第一个引号到最后一个引号都当成URL，解析出来必定是404，因此加了一个IEfix，表示后面的是锚点的内容，帮助浏览器正确解析，这个锚点叫什么并不重要。
3. formate 是什么意思？
   不一样浏览器解析的字体格式不同，formate就是告诉各类版本的浏览器，你支持这样的字体吗，支持的话就找这个URL
4. -webkit-font-smoothing: antialiased; 这是啥意思
   这个是由于，字体在放大的时候，其边缘会出现锯齿状的样式，显示出来颗粒感很重，不够美观。而这个属性，叫作抗锯齿特性，功能就是把这些突出的小毛茬都切掉。并且要注意，这个属性只在Mac电脑上是有效的，由于苹果认为应该显示设计最本来的样式，这样屏幕上展现的内容和打印机打印出来的内容同样，可是微软认为展现的样式符合大众认识的美观更加剧要，因此Windows7以上会自动开启ClearType的抗锯齿方法。
5. 那-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;
}

1. 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了，相信不久的未来他会遍及互联网的每一个角落