@font-face是什么呢？简单说，就是允许我们把自定义的web字体嵌入到网站中，平常我们说的字体图标正是使用它实现的。
@font-face属于CSS3的一个模块，是能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。
那么这个css3的@font-face模块，ie能支持吗？其实‘@font-face’规则在 CSS2 规范中就已经定义了，但是在 CSS2.1 中被删除，现在又被纳入到 CSS3 推荐草案中，所以微软的IE4都已经是开始支持这个属性。
不过，大家不用担心，主流浏览器都能很好地支持@font-face，但对于嵌入的字体文件的格式，各有各的喜好。所以我们在写@font-face语句之前，需要获取不同的文件格式，这样才能确保在主流浏览器中都能正常显示该字体。

如何使用@font-face呢？下面我们先来看一下@font-face的语法和使用说明

一、语法：

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

具体示例： 

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

二、取值说明:

1、YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如font-family:’icomoon’;

2、source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；

3、format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；

4、weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。

三、字体类型和兼容浏览器：

下面我们来分别说一下
1、TureTpe(.ttf)格式：

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

2、OpenType(.otf)格式：

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

3、Embedded Open Type(.eot)格式：
.eot字体是IE专用字体，可以从TrueType创建此格式字体,适用于从IE4到IE8

4、SVG(.svg)格式：

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

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

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

简化一下记忆如下：

.TTF或.OTF，适用于Firefox 、Safari、Opera

.EOT，适用于IE4.0-IE8.0

.SVG，适用于Chrome、Safari

.WOFF 适用于Chrome、Firefox、IE9+

从上面看出，为了兼容浏览器，我们至少需要四种字体。

四、几种使用方法实例说明

1、unicode引用

 unicode是字体在网页端最原始的应用方式，特点是：

  • 兼容性最好，支持ie6+，及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小，颜色等等。
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

unicode使用步骤如下：

第一步：首先把下面的样式放入你的样式表中 

@font-face {
    font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

第二步：定义使用iconfont的样式 

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

第三步：把获取到的字体图标编码“\e604”，应用于页面 

<i class="iconfont"></i>

2、class引用法

使用class类名引用的方法是使用自定义的实体类名和伪元素:before来定义的。

与unicode使用方式相比，具有如下特点：

  • 兼容性良好，支持ie8+，及所有现代浏览器。
  • 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
  • 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
使用方式首先也是把我们所需要的字体引入好，如第一种unicode使用方式的第一、二步一样。

只是多一步需要我们定义一个样式，如下： 

.icon-shouye:before { content: "\e604"; }
然后我们在页面这样引用就可以了，如下代码 

<i class="iconfont icon-shouye"></i>

3、symbol引用

这是一种全新的使用方式，应该说这才是未来的主流，这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

  • 支持多色图标了，不再受单色限制。
  • 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
  • 兼容性较差，支持 ie9+,及现代浏览器。
  • 浏览器渲染svg的性能一般，还不如png。

使用步骤如下：

第一步：引入项目下面生成的symbol代码： 

<script src="./iconfont.js"></script>

第二步：加入通用css代码（引入一次就行）： 

<style type="text/css">
    .icon {
        width: 1em; height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>

第三步：挑选相应图标并获取类名，应用于页面： 

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

部分内容参考Iconfont-阿里巴巴矢量图标库：http://www.iconfont.cn/