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，顾名思义，就是icon + font，即以字体的方式来显示图标，这个十分好理解，因为中文有时候也像一个个小图形。iconfont可以完美解决以上的问题，并具有以下的优点

由于请求的是一整个文件字体，所以减少了http的请求

可以像字体一样，任意变换大小和颜色；

矢量图，不会发生放大模糊的问题

结合CSS3的text-shadow，transform这些功能可以给字体添加一些旋转，阴影和透明度的视觉特效。

强兼容性，他的实现方式是使用CSS3的font-face, 但是这个属性从IE4开始就支持，可以完美适配IE6及以上的浏览器。

iconfont一共有三种使用方式，具体参照阿里妈妈图标库的官方文档

目前我们系统采用的是这种方式，这种方式的好处就是完美适配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的边，完美符合预期

没啥好说的和Unicode差不多，只不过用:after伪元素使用，我试了一下，IE8是支持伪元素的。但是不支持大小的修改，所以这种方式只能兼容IE9及以上的方式

传说是未来发展的趋势，可以展示多种颜色的图标。核心的代码是下面这段

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