本文将介绍@font-face用法，以及用字体来代替图标的具体方法。

@font-face学习

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中,@font-face的出现允许用户从网上下载字体并直接在电脑上自动完成安装，因此开发者不用担心某个字体在用户的电脑中是否存在的问题。

@font-face的语法规则

@font-face {
   font-family: <YourWebFontName>;
   src: <source> [<format>][,<source> [<format>]]*;
   [font-weight: <weight>];
   [font-style: <style>];
 }

1. YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如font-family:"YourWebFontName";
2. source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；
3. format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
4. weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体，style主要定义字体样式，如斜体。

一个具体的使用例子

html使用字体部分

<h2 class="neuesDemo">Neues Bauen Demo</h2>
样式定义如下:
h2.neuesDemo {
   font-family: 'NeuesBauenDemo'
}

NeuesBauenDemo是哪里来的? 答案通过@font-face来定义自己的Web Font:

 @font-face {
  font-family: 'NeuesBauenDemo';
  src: url('../fonts/neues_bauen_demo-webfont.eot');
  src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'),
   url('../fonts/neues_bauen_demo-webfont.woff') format('woff'),
   url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'),
   url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg');
  font-weight: normal;
  font-style: normal;
}

为什么要用多个url? 主要是为了解决浏览器的兼容问题。后面在讨论，先了解一下woff,ttf,svg这些字体的格式。

字体的格式

上面说了format：指的是你自定义的字体的格式，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；现在简单的分别介绍。

TureTpe(.ttf)格式

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

OpenType(.otf)格式

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

Web Open Font Format(.woff)格式

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

Embedded Open Type(.eot)格式

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

SVG(.svg)格式

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

多浏览器支持

浏览器的支持情况：

从上面浏览器对字体支持情况可以得出,为了达到更多浏览版本的支持,至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。为了使@font-face达到更多的浏览器支持，Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:

@font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot?') format('eot');/*IE*/
    src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*非IE*/
}

为了更多浏览器支持，你也可以写成：

@font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
             url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
   }

这就是我们上面看到的多个url的来历。现在的问题是怎样获取字体，以及怎样生成几种不同的格式。

免费字体的获取和处理

40个可通过@font-face使用的免费字体，可以挑选你的字体。例如我们到Google Web Fonts,下载我们需要的文件,例如文件名Duru_Sans.zip,解压缩会发现里面有一个DuruSans-Regular.ttf文件。现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg所有字体格式。要获取这些字体格式，我们需要第三方工具或者软件来实现。可通过访问fontsquirrel来上传我们的DuruSans-Regular.ttf文件，

上载成功后，会出现一个下载按钮，可进行下载为一个zip文件,解压缩后包含我们所需的各种类型字体和用法的demo，见下图:

有没有更简单的？可以使用托管的Web字体服务。

使用托管的Web字体服务

以Google Web Fonts服务为例，访问Google Web Fonts,选择一个你喜欢的字体（Add to collection），然后使用这个字体（Use），Google Web Fonts服务会自动生成一段类似
<link href='http://fonts.googleapis.com/css?family=Artifika' rel='stylesheet' type='text/css'>的代码,通过访问http://fonts.googleapis.com/css?family=Artifika用不同的浏览器的访问结果是不一样的，例如使用google浏览器，

@font-face {
  font-family: 'Artifika';
  font-style: normal;
  font-weight: 400;
  src: local('Artifika Medium'), local('Artifika-Medium'), url(http://themes.googleusercontent.com/static/fonts/artifika/v4/r0NXNnpds-Akyno8nTG0zfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}

使用Safari浏览器版本4,结果如下：

@font-face {
  font-family: 'Artifika';
  font-style: normal;
  font-weight: 400;
  src: local('Artifika Medium'), local('Artifika-Medium'), url(http://themes.googleusercontent.com/static/fonts/artifika/v4/z0sjSaXjDxxgrMTOLI1lSfesZW2xOQ-xsNqO47m55DA.ttf) format('truetype');
}

可见谷歌字体API具有跨浏览特性,具体的用法可访问谷歌字体API使用教程。

使用字体来代替图标

使用字体来实现图标,尺寸和颜色可以用css来控制,而且字体文件很小,对性能优化有好处。先介绍一个图标字体Font Awesome,中文介绍可以访问http://www.bootcss.com/p/font-awesome/。Font Awesome是一套专为Twitter Bootstrap设计的图标字体，几乎囊括了网页中可能用到的所有图标，这些图标通过Web Font的方式来显示，可以被任意缩放、改变颜色，你可以像修改文字样式那样来修改图标样式。源码可访问https://github.com/FortAwesome/Font-Awesome/
假设我要显示一个红色的铃铛 实现代码如下：

<!doctype html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="./font-awesome/css/font-awesome.css">
</head>
<body>
<div>
    <a  href="#">
        <i class="fa fa-bell" style="color:red" ></i>
    </a>
</div>
</body>
</html>

假设font-awesome.css已经存在，只用了fa和fa-bell样式就已经搞定，看看他们的定义:

.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-bell:before {
content: "\f0f3";
}

这里用了一下css3的伪元素，fa用来进行占位，line-height: 1,行高定义为数字，实际高度随着font-size变化。fa-bell:beforet用于把icon覆盖到实际元素上面。\f0f3为铃铛的Unicode。这个编码我们记不住，可以借助字体编辑软件FontLab，使用其打开fontawesome-webfont.ttf文件，进行搜索(ctrl+f5)，操作结果如下图：

FontLab可以设计自己的字体文件，具体使用可参见CSS3 用字体来代替图标的显示完全指南。

参考文献

• 前端性能优化进阶之CSS无图片技术
• CSS3 @font-face
• CSS3 用字体来代替图标的显示完全指南
• Web开放字体格式
• Web版式和@font-face简介
• 谷歌字体API使用教程
• 40个可通过@font-face使用的免费字体
• 深入了解css的行高Line Height属性