说说网页开发中使用的那些字体图标

Question

字体图标的流行已经有些年头了，已经不是什么新鲜的概念了，只是因为 CSS3 新加入 @font-face 属性，他能让我们自定义网页中显示字体，而不局限于用户电脑安装的字体。

传统的网页中的字体设置，使用 font-family 属性来定义，而且受限于浏览者电脑上所安装的字体，如果浏览者电脑上没有安装对应字体，那么网页渲染起来就会使用其他字体来代替。

而新增的 @font-face 改变了这一现状，使用该属性可以指定服务器上的一个字体，当浏览者访问的时候，会优先下载服务器上的字体，然后再使用该字体渲染网页。这样就可以发挥设计师的想象，灵活的任意应用字体，同时不需要考虑不同平台的差异。

兼容性考虑

既然是 CSS3 中新加入的属性，那么兼容性还有待确认，可以访问 http://caniuse.com/#feat=fontface，查看 @font-face 的兼容性情况。

@font-face 功能不仅仅可以用在改变文章的字体样式上，还可以来做字体图标。字体其实就是一种图标，把对应的基础的文字，渲染成有棱有角的文字。

如果某个文字的字体，并不设计成那个文字的变形，而设计成截然不同的图标，那么当网页中出现这个文字，就会渲染出一个图标。

字体图标与像素位图的对比

为什么我更偏向于使用字体图标，而不是使用传统的像素位图，下面给出了几点理由。

优点

1. 兼容性：各个平台浏览器基本都可以使用，而且在某些老版本浏览器中，效果比图片更好。
2. 轻量性：相对于同效果的位图相比，体积要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少 HTTP 请求，增强前端性能，还可以配合 HTML5 离线存储做性能优化。
3. 灵活性：图标字体可以用过 font-size 属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。

劣势

1. 图标字体只能被渲染成单色或者 CSS3 的渐变色。
2. 免费开源的精美字体图标资源还是不够多。
3. 创作自已的字体图标很费时间，重构人员后期维护的成本偏高。

常用字库文件格式

准确的说应该是常见的字体格式，使用不同的格式主要是为了兼容不同系统和不同的浏览器。

• TTF(TrueTypeFont)格式：TTF 是 Apple 公司和 Microsoft 公司推出的字体文件格式，随着 Windows 的流行，已经变成最常用的一种字体文件表示方式。truetype字体的最大优点是可以很方便地把字体轮廓转换成曲线，可以对曲线进行填充，制成各种颜色和效果，字款丰富。
• OTF(OpenType Font)格式：OpenType，是一种可缩放字型（scalable font），微软公司与 Adobe 公司联合开发，用来替代TrueType字型的新字型。
• WOFF格式：Web 开放字体格式（Web Open Font Format，简称WOFF），是一种网页所采用的字体格式标准。此字体格式不但能够有效利用压缩来减少档案大小，并且不包含加密。WOFF得到许多主要字体制造公司的支持。
• EOT格式：EOT 是一种压缩字库，目的是解决在网页中嵌入特殊字体的难题。例如：网页前端开发人员在网页中使用了很多种特殊的精美的字体，当网友浏览时，却因没有安装相应的字库，只能看到默认的宋体字，效果惨不忍睹。利用 EOT 字库即可解决此难题。

如何制作图标字体

既然都谈了那么多的字体图标，那么如何制作我们自己的图标？这里推荐大家使用一款免费开源的字体编辑软件 FontForge，使用他能导出不同格式的字体，能满足我们大部分的需求。

FontForge制作图标步骤

1. 首先我们需要设计好我们的图标，或者你可以到网上随便找一个免费的图标，然后去掉我们不需要的图标。
2. 然后我们将每个图标都导出为 svg 格式的文件
3. 将我们我们导出的 svg 图标，导入到 FontForge，此时我们可以在软件中修改这个图标的外观
4. 修改好了以后，我们点击 文件->导出为字体 选择保存的格式，导出即可得到图标字体。

免费的字体图标资源

如果你不想自己制作图标字体，那么你可以使用别人免费开源的图标字体项目，下面列举了多个好看的开源免费的图标服务网站，你可以从中挑选你最中意的图标，然后使用到你的网站中。

• Iconfont – 阿里巴巴矢量图标库
• Font Awesome – 专为bootstrap设计的字体图标
• iconExplorer
• fontello – 在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。
• icomoon – 可以在线导入的SVG格式字体，并进行编辑，然后下载来使用。
• Glyphicon Halflings – 这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。