我正在参与掘金创作者训练营第5期，点击了解活动详情。 字体是网页中最常见的，但也可能是最容易被忽视的一部分。但其实网页从一开始出现，就面临着与字体打交道的问题——文字排版。文字排版是各类出版物（包括网页、纸媒等）在内最重要的一部分。在这一节里我们并不打算深入讨论文字排版，而是看一个对新手开发者来说有点奇怪的话题——字体图标。
在许多人的思维中，文字和图案是两个完全不同的东西。但在计算机里，我们看到的文字其实也是一个个”长得像文字“的小图标。每一个文字在计算机内其实是用一个对应的整数表示的。至于具体是对应哪个整数是由所选用的文字编码方案所决定。我们平时常见的UTF-8、GBK、GB2312等都是文字编码方案。它们各自建立了”一些“文字与编码（整数）的映射关系。比如”人“字在UTF-8编码中为”0x4EBA“（十六进制），GBK编码中为”0xC8CB“。我们只要知道当前所使用的编码方案，就能在文字和编码之间相互转换，如果编码方案不匹配则会出现乱码。当然也有一些编码方案中，部分文字的编码值是相同的，我们可以认为这两个编码方案”兼容“，比如下图中的GBK、GB2312以及GB18030等。
看到这里，有人可能就会问，既然计算机里存的是一个个整数，那我们为什么看到的却是一个个文字？这里就要提到我们要讲的字体了。在字体文件中存储了许多可以显示的小图案以及它们对应的编码（整数）。下图的楷体中可以看出每个文字都有一个对应的十六进制数。根据整数编码就能查出来一个文字图案应该如何显示。这些图案可以是点阵图，也可以是矢量图。
如果我们需要显示”人“这个字，就可以拿”0x4EBA“去字体文件（上图）中查找它的图案，然后在显示器上绘制。
真实的情况当然要比这要复杂的多，但总体来说文字在计算机里的表示和显示就是这么一个流程。这中间至少需要经过两步映射：
- ”文字“到字符编码。
- 字符编码到字体编码。
如果在映射的时候发生偏差，就可能会导致显示乱码。比如存储”人“字时使用的GBK编码，但是字体中对应的UTF-8编码值，在查表的时候就会发生错误，找出一个不相干的图案并显示。这也是为什么一个正常的网页有时会显示乱码。下面的图片就是一个GB2312编码的网页，浏览器尝试使用UTF-8编码进行显示所得到的结果。我们发现中文字符几乎都是乱码，而英文字符还是可以正常显示。这说明GB2312和UTF-8在英文字符编码上是兼容的，但对中文字符的编码并不一致。
了解了”字符“在计算机里的存储和显示后，我们发现其实计算机压根就不管表示的是什么内容，只需要给它的整数编码能够在字体中查找到对应的图案，它就会将其显示出来。这样就有了”字体图标“的出现。我们只需要将字体中的文字替换成一个个图标。
上面是免费的FontAwesome图标字体关于常用商标品牌的部分。可以看出来许多编码都对应着一个图标，如"0xF411"是Wordpress的商标。在Fontforge中打开可以看到这是一个矢量图标。
下面是FontAwesome图标字体在网页中的使用示例。第一步，引入图标字体文件。
@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
}
第二步，两种字体使用方式。
<i class="fa fa-wordpress"></i>
<i class="fa"></i>
上面两个<i>标签都是显示Wordpress的Logo，但一个是通过CSS设置content属性，另外一个是直接利用HTML实体（Entity）实现。
.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-wordpress:before {
content: "\f19a"
}
注：通过CSS设置
content属性的值为十六进制表示方法，而HTML实体采用十进制表示。
网上有许多开源的图标字体可以下载，其中最有名的就是我们上面所用到的FontAwesome。其实许多第三方框架，如Bootstrap、Element UI等都带有自己的字体图标，我们可以拿过来使用。也可以到阿里巴巴提供的IconFont（www.iconfont.cn/） 网站去制作和下载自己的字体图标。
