字体图标的原理

什么是字体图标

对于前端的小伙伴来说，字体应该是再熟悉不过的东西了，对于文字我们可以通过 css 指定文字对应的字体，字号大小，颜色。得益于 css3，我们还可以在 css 中引入服务端字体来实现自定义字体。

而字体图标，顾名思义则是把图标当做字体来使用，通过使用字体图标，我们可以动态改变图标的大小、颜色等一系列字体属性。而且相对于一般的图片，字体图标的大小改变并不会使图像变的模糊。

接触过 bootstrap 的同学应该了解过，bootstrap 里面就预设了很多自定义图标，我们只要在元素上指定对应的 class，就可以显示出图标，接下来，我们就来一步步了解这些操作是怎么实现的。

字体图标和字体的关系

事实上，字体图标其实就是自定义字体，在计算机系统中每个字符都有一个对应的 Unicode 编码，而每一个字符在操作系统中就是一个矢量图形，例如“敏”这个字，对应的 Unicode 编码就是 \u654f，而字体文件的作用，就是用来规定这些编码对应什么样的图形。Unicode 字符集里面，E000 至 F8FF 属于用户自定义区域。用户可以在字体文件里面定义这些字符的对应的形状，通过项目引入加载去找到自定义字符。而字体图标的实现原理就是在这个自定义区域中添加一系列的图标，我们通过指定对应的 Unicode 编码来显示图片。

先做个总结：使用浏览器打开页面时，浏览器会读取 HTML 文件进行解析渲染。当读到「敏」字时会转换成对应的 Unicode 码（可以认为是世界上任意一种文字的特定编号）。再根据 HTML 里设置的 font-family （如果没设置则使用浏览器默认设置）去查找电脑里（如果有自定义字体 @font-face ，则加载对应字体文件）对应字体的字体文件。找到文件后根据 Unicode 码去查找绘制外形，找到后绘制到页面上。

那如何让页面展示一个图标呢？我们可以把图标当成文字来操作，步骤如下：

1.在页面上放入该图标的 Unicode 码 （可以自己创建一个）2.让该元素使用我们自定义的字体3.字体对应着我们自己创建的字体库文件4.字体库文件里有关于该 Unicode 码的外形描述

<span class="icon-qq"></span>
<style>
@font-face {
  font-family: "hello";
  src: url('//at.alicdn.com/t/font_1475388520_7015634.ttf') format('truetype')
}
.icon-qq:before { font-family:"hello";content: "\e600"; } 
</style>

引入字体图标iconfont可以提高开发效率和项目的可维护性。

优点

设计不用再切图了，更不需要针对不同场景切出大小、颜色、格式等不同的图片，只需维护一个图标项目库即可。

开发者也不用引用大量图片，也不需要在js中根据不同场景切换不同图片，仅class名就可搞定，修改灵活。尤其在node开发中，节省大量代码，提高可维护性。

字体图标缩放不失真，不会变模糊。

减少网络请求次数，一个 css 文件可包含所有图标。

节约流量，图标是图片格式，每个几K到几十K，而 css 文件一般一共只有几K。

缺点

图标库包含了所有图标，所以维护时如果不慎修改了老的图标，下次开发时更新图标文件就会把潜在影响带进去。所以对以往使用过的老图标的修改删除要谨慎。

如果同时引用多个项目，可能造成个别图标的冲突。解决方案：

1.避免引用多个项目2.在图标库中修改冲突图标的Unicode(16进制)值。