Font Awesome 字体使用方法，兼容ie7+

WebFont 技术可以让网页使用在线字体，而无需使用图片，从而有机会解决开头设计师提到的问题。它通过 CSS 的@font-face语句引入在线字体，使用 CSS 选择器指定运用字体的文本，与此同时专用于 Web 展示的 woff 格式字体也得到各大浏览器厂商支持，进一步减少了字体的体积。在国外，WebFont 已经非常流行了，大量的网站使用了 WebFont 技术，而业界大佬 Google 也顺势推出的免费 WebFont 云托管服务，这一切均带动了国外字体制作行业的高速发展。

一、首先介绍Font Awesome 字体的使用场景

先截图几张，大家看一下效果(红色框内即使用了web font)

二、链接一个下载地址：

http://www.thinkcmf.com/font/index.html

三、解压后的文件目录格式

css文件夹目录

font-awesome.css----未压缩的css文件

font-awesome.min.css----压缩后的css文件

font-awesome-ie7.min.css----压缩后兼容ie7+的css文件

fonts文件夹目录

说明一下各个文件的功能

一、OpenType(.otf)格式：

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

二、Embedded Open Type(.eot)格式：

.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；

三、SVG(.svg)格式：

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

四、TureTpe(.ttf)格式：

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

五、Web Open Font Format(.woff)格式：

.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。

里面包含了四个文件夹，不过我们只需要的就用css ， fonts 两个文件夹的内容就ok

四、接下来就是重要的步骤了--使用方法

步骤一：链接css文件

<link rel="stylesheet" type="text/css" href="Awesome/css/font-awesome.min.css"/>

<link rel="stylesheet" type="text/css" href="Awesome/css/font-awesome-ie7.min.css"/>  /*兼容ie7+*/

步骤二：开始添加图标（注意：fa 是一定要添加的）

<i class="fa fa-camera-retro"></i> fa-camera-retro

显示效果：

使用起来非常方便呢！哦，对了最后附上一个图标参考网址：http://www.thinkcmf.com/font/想用什么图标查询即可食用

最后在加一点：图标可以当普通的字体使用哦，尝试设置一下 color 属性 text-align 属性看看吧