什么是字体图标？

简单的说，就是将一种特殊的字体，通过特定方式，在网页上像传统图片一样显示的图标。如下图：

1635.jpg

字体图标(font-icon)通常是将一套图标集以字体文件的形式封装，并通过 CSS 的 @font-face 方式作为 Web Font 调用。为了解决不同环境不同浏览器的兼容和效率问题，常见封装文件格式有otf、eot、svg、ttf、woff、woff2等。比较知名的字体图标库有Glyphicons（Bootstrap）、Font Awesome（奥森图标）、Iconfont（阿里巴巴）、IcoMoon等，前两种是各自统一风格并且所有图标整体封装，文件相对较大但使用方便，后两种则更像是一种平台，需要自定义选取封装，按需生成文件在网页中加载时更有优势，但更新增减操作稍显麻烦。

为什么要用字体图标？

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染显示，不需要下载一个个图像。与css sprite技术一样，可以减少HTTP的请求次数，而且和HTML5的离线存储配合，可以对性能做出优化。
灵活性：可以像网页中的文字一样，通过font-size属性来对其进行大小的设置，而且还可以添加各种文字效果，如color、hover、background、filter、text-shadow、transform等效果。
兼容性：字体图标支持现代浏览器，甚至是低版本的IE浏览器，所以可以放心的使用它。
保真性：相比于传统图片放大图片会出现失真、缩小又会浪费掉像素点，字体图标因为是矢量格式所以不存在这种情况。

当然了，相对于真正的图片，它也有一定劣势，比如字体图标只能被渲染成单色，或者是CSS3的渐变色；创作图标字体比较耗费时间，相比制作传统图片图标可能也不会轻松多少，所以后期维护成本也比较高。如果不是商用，那么在拿来主义的指导下，咱们也可以在网上找到很多现成的免费字体图标使用。

使用字体图标常见问题？

1，css样式文件与font字体文件目录位置不对导致相对路径引用失败

一般而言，css目录与fonts目录是同级存放，如果发生改变则需要修改css文件中的相对路径，实在弄不明白相对路径写法就用绝对路径，以自己网站域名http://www.****.com开头。

2，某些网站服务器空间字体图标文件格式被限制

比如很多Windows主机的IIS环境默认就不支持.svg、.woff和.woff2后缀的文件，这个与不支持mp3、mp4媒体文件是一样道理，需要修改IIS环境中的MIME类型配置，添加支持类型让IIS支持相应文件的访问即可。也可以修改网站根目录下的web.config文件添加规则，代码如下：

<system.webServer>

<staticContent>

<remove fileExtension=”.woff” />

<mimeMap fileExtension=”.woff” mimeType=”font/x-font-woff” />

</staticContent>

</system.webServer>


remove和mimeMap可以重复添加以便添加多种文件类型。

3，字体文件远程跨域引用受限制

远程引用失败的情况各不相同，网上也有很多解决方案，但最佳解决办法还是本地化。