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 属性看看吧