语法：
@font-face ：{属性: 取值;}
取值：
- font-family：
- 设置文本的字体名称。
- font-style：
- 设置文本样式。
- font-variant：
- 设置文本是否大小写。
- font-weight：
- 设置文本的粗细。
- font-stretch：
- 设置文本是否横向的拉伸变形。
- font-size：
- 设置文本字体大小。
- src：
- 设置自定义字体的相对路径或者绝对路径，注意，此属性只能在@font-face规则里使用。
说明：
@font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。【微软的IE 5已经是开始支持这个属性，但是只支持微软自有的.eot (Embedded Open Type) 格式，而其他浏览器直到现在都没有支持这一字体格式。然而，从Safari 3.1开始，网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。】
兼容性：
.eot格式
| 类型 |  Internet Explorer |
 Firefox |
 Chrome |
 Opera |
 Safari |
|---|---|---|---|---|---|
| 版本 | (√)IE6 | (×)Firefox 2.0 | (×)Chrome 1.0.x | (×)Opera 9.63 | (×)Safari 3.1 |
| (√)IE7 | (×)Firefox 3.0 | (×)Chrome 2.0.x | (×)Safari 4 | ||
| (√)IE8 | |||||
.ttf格式
| 类型 | Internet Explorer |
Firefox |
Chrome |
Opera |
Safari |
|---|---|---|---|---|---|
| 版本 | (×)IE6 | (×)Firefox 2.0 | (×)Chrome 1.0.x | (×)Opera 9.63 | (√)Safari 3.2.1 |
| (×)IE7 | (×)Firefox 3.0 | (×)Chrome 2.0.x | (√)Opera 10 | (√)Safari 4 | |
| (×)IE8 | (√)Firefox 3.5 | ||||
EOT字体示例（本示例源自微软Festival of Ornament）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Festival of Ornament</title>
<base href="http://www.microsoft.com/typography/web/embedding/demos/3/" />
<style type="text/css">
@font-face {
font-family: BorderWeb;
src:url(BORDERW0.eot);
}
@font-face {
font-family: Runic;
src:url(RUNICMT0.eot);
}
@font-face {
font-family: Kingston;
src:url(KINGSTON.eot);
}
*{background:#FFF}
.king { FONT-SIZE: 45pt; FONT-FAMILY: "Kingston" }
.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
.border2 { FONT-SIZE: 35px; COLOR:black; FONT-FAMILY: "BorderWeb" }
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }
.locale { FONT-SIZE: 40px; COLOR: black; FONT-FAMILY: "Runic" }
.bullet { FONT-SIZE: 50px; COLOR: black; FONT-FAMILY: "BorderWeb" }
.corner { FONT-SIZE: 70px; COLOR: black; FONT-FAMILY: "BorderWeb" }
a { FONT-SIZE: 10px; COLOR: black; FONT-FAMILY: Verdana; TEXT-DECORATION: none }
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td valign="bottom" align="middle" bgcolor="olive" colspan="2" rowspan="2"><span class="corner">6</span></td>
<td valign="bottom" align="middle" bgcolor="black" height="35"><span class="border2">87</span></td>
<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
<td valign="bottom" align="middle" bgcolor="olive" colspan="2" rowspan="2"><span class="corner">5</span></td>
</tr>
<tr>
<td valign="bottom" align="middle" bgcolor="khaki" height="35"><span class="border">78</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
</tr>
<tr>
<td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td>
<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">A</span></td>
<td valign="bottom" align="middle" bgcolor="olive"><span class="king">a</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">B</span></td>
<td valign="bottom" align="middle" bgcolor="olive"><span class="king">b</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">C</span></td>
<td valign="bottom" align="middle" bgcolor="olive"><span class="king">c</span></td>
<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
<td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td>
</tr>
<tr>
<td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td>
<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
<td valign="bottom" align="middle" bgcolor="olive"><span class="king">d</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">D</span></td>
<td valign="bottom" align="middle" bgcolor="olive"><span class="king">e</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">E</span></td>
<td valign="bottom" align="middle" bgcolor="olive"><span class="king">f</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">F</span></td>
<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
<td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td>
</tr>
<tr>
<td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td>
<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">G</span></td>
<td valign="bottom" align="middle" bgcolor="olive"><span class="king">g</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">H</span></td>
<td valign="bottom" align="middle" bgcolor="olive"><span class="king">h</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">I</span></td>
<td valign="bottom" align="middle" bgcolor="olive"><span class="king">i</span></td>
<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
<td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td>
</tr>
<tr>
<td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td>
<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
<td valign="bottom" align="middle" bgcolor="olive"><span class="king">j</span></td>
<td align="middle" bgcolor="khaki"><span class="king">J</span></td>
<td valign="bottom" align="middle" bgcolor="olive"><span class="king">k</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">K</span></td>
<td valign="bottom" align="middle" bgcolor="olive"><span class="king">l</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">L</span></td>
<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
<td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td>
</tr>
<tr>
<td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td>
<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">M</span></td>
<td valign="bottom" align="middle" bgcolor="olive"><span class="king">m</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">N</span></td>
<td valign="bottom" align="middle" bgcolor="olive"><span class="king">n</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">O</span></td>
<td valign="bottom" align="middle" bgcolor="olive"><span class="king">o</span></td>
<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
<td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td>
</tr>
<tr>
<td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td>
<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
<td valign="bottom" align="middle" bgcolor="olive"><span class="king">p</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">P</span></td>
<td valign="bottom" align="middle" bgcolor="olive"><span class="king">q</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">Q</span></td>
<td valign="bottom" align="middle" bgcolor="olive"><span class="king">r</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">R</span></td>
<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
<td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td>
</tr>
<tr>
<td valign="bottom" align="middle" bgcolor="olive" colspan="2" rowspan="2"><span class="corner">5</span></td>
<td valign="bottom" align="middle" bgcolor="khaki" height="35"><span class="border">78</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
<td valign="bottom" align="middle" bgcolor="olive" colspan="2" rowspan="2"><span class="corner">6</span></td>
</tr>
<tr>
<td valign="bottom" align="middle" bgcolor="black" height="35"><span class="border2">87</span></td>
<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td valign="top" colspan="10">
<div class="event" align="center">FESTIVAL OF ORNAMENT</div>
<div class="locale" align="center">UNIVERSITY OF CARDIFF <span class="bullet">4</span> JUNE 16 – 28</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>