@font-face的作用是让我们在设计中使用自定义的字体。
1、实际应用：
假设你想使用的字体没有广泛安装，而是一个特别的字体，那么借助@font-face的魔力，我们可以设置一个专门的字体系列名称，对应服务器上面的一个文字文件。用户代理将下载那个文件，使用它渲染页面重的文本，就好像用户安装了哪个字体。
代码如下：
@font-face{
Font-family:’SeitzeraADG’;
Src:url(’.otf’);
}
当用户代理到font-family:’SeitzeraADG’声明后，回家在对应的otf文件，然后使用它进行文本的渲染。
注意：@font-face是一种惰性加载字型的。这就说明，仅当需要使用指定的字型渲染文本时，才会加载，否则不加载。其实，浏览器不管需不需要，都会在下载声明的全部字型，这就是浏览器的缺陷。
2、兼容浏览器
说到浏览器对@font-face的兼容问题，这里涉及到一个字体format的问题，因为不同的浏览器对字体格式支持是不一致的，这样大家有必要了解一下，各种版本的浏览器支持什么样的字体，前面也简单带到了有关字体的几种格式，下面我就分别说一下这个问题，让大家心里有一个概念：
一、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+】。
3、@font-face的综合写法（兼容）
@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 */
}
Internet Explorer 9，Firefox，Opera，Chrome和Safari支持@ font-face规则。
但是，Internet Explorer 9只支持.eot类型的字体，Firefox，Chrome，Safari，和Opera支持.ttf与.otf两种类型字体。
注意： Internet Explorer 8及更早IE版本不支持@ font-face规则。