Web端图标字体的探索

前言：图标字体指的就是如font-awesome, semantic-ui icon这样的，通常使用方式是引入图标字体库文件（css文件及.eot/.svg/.ttf/.woff/.woff2格式字体文件），然后通过类名即可使用图标，根据图标字体库的规则，可修改其字体大小、颜色。前段时间借着微信小程序里图标字体的使用，对图标字体的使用及其原理有了进一步的了解，补充记录一下。

图标字体库使用解析：font-awesome为例

一般使用方法：将css文件及包含几种字体格式文件的fonts文件夹放入项目，然后引用该css文件，即可使用，如：

<i class="fa fa-home"></i>

fa, fa-home类名是如何实现显示图标的？查看css文件，主要代码是：

/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-home:before {
  content: "\f015";
}

@font-face指明字体格式文件来源及命名：

font-family: 'FontAwesome';
src: url('path/to/fonts/~.eot');
src: url('path/to/fonts/~.eot') format('embedded-opentype'), url('path/to/fonts/~.woff2') format('woff2'), url('path/to/fonts/~.woff') format('woff'), url('path/to/fonts/~.ttf') format('truetype'), url('path/to/fonts/~.svg') format('svg');

指明使用此图标文件：

.fa {
    font: FontAwesome;
}

使用具体图标，如fa-home:

.fa-home:before {
  content: "\f015";
}

至此，对于图标字体实现的过程已有了大致了解，同时可以发现，如果只需要使用几个图标，而引入整个font-awesome图标库，明显有很多图标是冗余的，如果可以只定制需要的那几个图标，物尽其用，比较合适一些。
最简单的方式，不引入整个css文件，而只包含以上@font-face, .fa以及需要的图标的代码即可，然而进一步想，为何"f015"对应着home这个图标？答案便指向字体文件，字体文件里包含了这个描述，使得"f015"对应home图标，那么，可以知道，字体文件里必包含了你的项目里可能没有用到的其他图标。

iconfont图标定制

iconfont的使用则解决了上面所说的冗余图标的问题，即定制需要的图标，设计师还可画自己设计的图标。

iconfont官网对于其图标的使用作了说明，Web端除了上面所说font-class的引用方式，还可通过unicode，symbol两种方式，详细可阅读官网说明：iconfont代码应用说明

使用iconfont定制图标字体生成的代码，如(font-class引用方式)：

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1501490511935'); /* IE9*/
  src: url('iconfont.eot?t=1501490511935#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff?t=1501490511935') format('woff'), /* chrome, firefox */
  url('iconfont.ttf?t=1501490511935') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1501490511935#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-sort:before { content: "\e60c"; }

.icon-top:before { content: "\e671"; }

.icon-remove:before { content: "\e62b"; }

[ 注：其字体文件与此css文件在同一目录 ]

小程序图标字体应用

小程序里使用图标字体，以上方式不能生效，因其不支持这些图标字体格式，需要将字体文件转化为base64格式，转化方式：通过第三方在线工具transfonter

更新：后来发现不需要用转换工具，iconfont导出的格式中，本身就包含了base64格式，使用该文件即可

转化后字体文件内容大致为：

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'iconfont';
  src: url(data:application/font-woff2;charset=utf-8;base64,d09GMg...) format('woff2'),
    url(data:application/font-woff;charset=utf-8;base64,d09GRg...) format('woff'), 
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
  font-weight: 500;
  font-style: normal;
}

[ 注：以上base64部分省略了代码，其具体长度跟图标多少有关 ]

以上代码，加上指明使用的图标来源和具体的图标代码，就可以在小程序里愉快地使用图标字体了，如：

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-sort:before { content: "\e60c"; }

.icon-top:before { content: "\e671"; }

.icon-remove:before { content: "\e62b"; }

<view class="iconfont icon-sort">

可以发现，如果你转换整个font-awesome图标库，转化出来的base64格式文件会很长，因为其包含了很多图标，有些你的项目可能用不到；通过iconfont定制几个图标字体进行转化，会发现转化出的base64格式文件没有那么长，因其只包含了你定制的那几个图标。

相关的帖子：

在微信小程序中使用字体图标/自定义字体/外部字体
微信小程序添加并使用外部字体
微信小程序联盟相关帖子

小结

明白了图标字体的实现方式后，我更倾向于使用iconfont定制项目所需的图标，避免引用不必要的图标字体，增大项目代码体积，同时设计师也可以画其喜欢的风格的图标，不会受图标库提供的图标限制。