Ethan | 博客

一个项目中或多或少都会有一些矢量小图标，可是场景往往是多样的，同一个图片有些地方大一些，有些地方颜色不一样等，难道我们需要多个图标么，此时字体图标就可以排上用场了，同时项目初期如何可以合理规划好常用图标，然后生成一个图标库，想来也是一种很棒的体验！

优势

字体图标，带来的就是主要就是字体上的表现了，可以通过font-size和color控制图标的颜色的大小。

制作图标库

使用阿里提供的iconfont创建字体图标库就十分简单了，大致步骤如下

注册登录，作为码农，可以直接使用 github 第三方登录
图标管理 -> 我的项目 -> 新建项目
iconfont 本身提供丰富多的图标，搜索选择后可以加入购物车（特殊图标自己也可以上传）
进入购物车，选择添加到项目
然后下载到本地，引用到项目中即可

原理和兼容性

打开下载下来的文件 iconfont.css，会发现如下一段css

@font-face {
  font-family: "iconfont";
  src: url('iconfont.eot?t=1535423158049'); /* IE9*/
  src: url('iconfont.eot?t=1535423158049#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQgAAsAAAAABmQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8lUgRY21hcAAAAYAAAABLAAABcOdHtgdnbHlmAAABzAAAAHAAAABwgJLBS2hlYWQAAAI8AAAALQAAADYSc+tnaGhlYQAAAmwAAAAcAAAAJAfeA4NobXR4AAACiAAAAAgAAAAICAAAAGxvY2EAAAKQAAAABgAAAAYAOAAAbWF4cAAAApgAAAAeAAAAIAEOACxuYW1lAAACuAAAAUUAAAJtPlT+fXBvc3QAAAQAAAAAHwAAADDX3mJ6eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeyT+TZ27438AQw9zA0AAUZgTJAQDh/QwheJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISfyb//z+MBPJZwCQDIxvDKOABkzJQHjisIJiBEQB0uAnlAAACAAAAAAN2Av4AEQAfAAAlJzYCJyYgBwYQFx4BMzI2NxclJjQ3PgEyFhcWFAcGIgN1ZF8IaHP+13NtbTeIR0J8NmT9xlxcL3V8dTBcXGL/MWR0ARttbW1y/tZzNjcuLmSZYv9kLi8vLmL/ZFwAAAB4nGNgZGBgAGL7C6uM4vltvjJwszCAwPVVl7ch0ywMTP+AFAcDE4gHADmiCr4AAAB4nGNgZGBgbvjfwBDDwgACQJKRARUwAQBHCAJrBAAAAAQAAAAAAAAAADgAAHicY2BkYGBgYlAAYgYwi4GBCwgZGP6D+QwAC84BOwAAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAiZGJkZmBrTg1sSg5g4EBABBcApIA') format('woff'),
  url('iconfont.ttf?t=1535423158049') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1535423158049#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-search:before { content: "\e61f"; }

首先会发现，我的天，它引入字体库怎么采用了这么多种方式，其实主要是为了兼容性考虑，那我们就来看看具体类别的说法

TrueType(.ttf)格式：.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式
OpenType(.otf)格式：.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上
Web Open Font Format(.woff)格式：.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离
Embedded Open Type(.eot)格式：.eot字体是IE专用字体，可以从TrueType创建此格式字体
SVG(.svg)格式：.svg字体是基于SVG字体渲染的一种格式

这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。

字体码生成原理

计算机里面每个字符都有一个unicode编码,比如「我」的unicode是\u6211（16进制），而字体文件的作用是规定某个字符应该用什么形状来显示。

unicode字符集里面，E000 至 F8FF属于用户造字区。原本是空的，用户可以在字体文件里面随便定义这些字符的形状。我们所见的 webfont icon，一般就选在这一部分

Better

字体图标

优势

制作图标库

原理和兼容性

留言