@font-face可以加载服务器端的字体到浏览器端，这样设计师就可以不受客户端字体库的限制。

一般来说有四种格式的字体文件即可覆盖所有浏览器。这四种格式为：

.EOT：适用于Internet Explorer 4.0+。

.TTF或.OTF：适用于Firefox 3.5、Safari、Opera。

.SVG：适用于Chrome、IPhone。

.WOFF：转为web字体指定的字体格式标准，被新版本浏览器广泛支持。

语法+举例：在css中如下写

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

在这里采用的是相对路径，当然大家也可以使用绝路径。到这里我们就需要把定义好的字体应用到实际页面中去：

有了上的字体定义即可使用afish字体了。如下：

body{
       font-family: afish;    width: 100%;    height: 100%;    color: red;}

 

获取@font-face所需字体格式：

特殊字体已经在你的电脑中了，现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式，同样需要第三方工具或者软件来实现，下面我给大家推荐一个工具Font Squirrel。