字体图标生成原理（1）

浏览器根据font-family解析渲染为不同图形的过程：

1：读取文字内容转换成对应的 unicode码（&#xe608）

计算机操作系统里面每个字符都有一个unicode编码,比如我们在web上输入\u6211跟输入“我”是一样的，因为「我」的unicode是\u6211（16进制），浏览器会自动帮你找到对应的图形去渲染。而字体文件的作用是规定某个字符应该用什么形状来显示。unicode字符集里面，E000 至 F8FF属于用户造字区。原本是空的，用户可以在字体文件里面随便定义这些字符的形状，通过项目引入加载去找到自定义字符，这就和使用操作系统的字体是一样的了。

2：根据HTML里设置的 font-family （如果没设置则使用浏览器默认设置）即去查找电脑里（如果有自定义字体@font-face ，则加载对应字体文件）对应字体的字体文件

比如：现在有个自定义图标文件（unicode一定在E000 至 F8FF范围内！），现在我手动添加一个操作系统字体“我”，如下图 图标文件库2.png

在HTML里面这样用：

<span class="icon-home"></span>
<span class="icon-wo"></span>

浏览器效果：

浏览器效果.png

浏览器效果展示是一样的，只不过一个是从引入的文件里面去找，一个直接指定了操作系统的文字。

3：找到文件后根据 unicode 码去查找绘制外形，找到后绘制到页面上。