@font-face · CSS 3.0参考手册.chm

# @font-face **版本：CSS3** 继承性：无 ### 语法： **@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格式 <table><thead><tr><th class="type">类型</th> <th class="type_ie"><img src="https://box.kancloud.cn/2015-09-02_55e5d38d41490.png" alt="IE" />Internet Explorer</th> <th class="type_firefox"><img src="https://box.kancloud.cn/2015-09-02_55e5d38d48c83.png" alt="Firefox" />Firefox</th> <th class="type_chrome"><img src="https://box.kancloud.cn/2015-09-02_55e5d38d511b8.png" alt="Chrome" />Chrome</th> <th class="type_opera"><img src="https://box.kancloud.cn/2015-09-02_55e5d38d59c10.png" alt="Opera" />Opera</th> <th class="type_safari"><img src="https://box.kancloud.cn/2015-09-02_55e5d38d6241b.png" alt="Safari" />Safari</th> </tr></thead><tbody><tr><td rowspan="4" class="version">版本</td> <td class="support yes">(√)IE6</td> <td class="support no">(×)Firefox 2.0</td> <td class="support no">(×)Chrome 1.0.x</td> <td class="support no">(×)Opera 9.63</td> <td class="support no">(×)Safari 3.1</td> </tr><tr><td class="support yes">(√)IE7</td> <td class="support no">(×)Firefox 3.0</td> <td class="support no">(×)Chrome 2.0.x</td> <td></td> <td class="support no">(×)Safari 4</td> </tr><tr><td class="support yes">(√)IE8</td> <td></td> <td></td> <td></td> <td></td> </tr><tr><td></td> <td></td> <td></td> <td></td> <td></td> </tr></tbody></table> ### .ttf格式 <table><thead><tr><th class="type">类型</th> <th class="type_ie"><img src="https://box.kancloud.cn/2015-09-02_55e5d38d69861.png" alt="IE" />Internet Explorer</th> <th class="type_firefox"><img src="https://box.kancloud.cn/2015-09-02_55e5d38d71d5b.png" alt="Firefox" />Firefox</th> <th class="type_chrome"><img src="https://box.kancloud.cn/2015-09-02_55e5d38d79858.png" alt="Chrome" />Chrome</th> <th class="type_opera"><img src="https://box.kancloud.cn/2015-09-02_55e5d38d82a29.png" alt="Opera" />Opera</th> <th class="type_safari"><img src="https://box.kancloud.cn/2015-09-02_55e5d38dbed1a.png" alt="Safari" />Safari</th> </tr></thead><tbody><tr><td rowspan="4" class="version">版本</td> <td class="support no">(×)IE6</td> <td class="support no">(×)Firefox 2.0</td> <td class="support no">(×)Chrome 1.0.x</td> <td class="support no">(×)Opera 9.63</td> <td class="support yes">(√)Safari 3.2.1</td> </tr><tr><td class="support no">(×)IE7</td> <td class="support no">(×)Firefox 3.0</td> <td class="support no">(×)Chrome 2.0.x</td> <td class="support yes">(√)Opera 10</td> <td class="support yes">(√)Safari 4</td> </tr><tr><td class="support no">(×)IE8</td> <td class="support yes">(√)Firefox 3.5</td> <td></td> <td></td> <td></td> </tr><tr><td></td> <td></td> <td></td> <td></td> <td></td> </tr></tbody></table> ### EOT字体示例（本示例源自微软[Festival of Ornament](http://www.microsoft.com/typography/web/embedding/demos/3/demo3.htm)）： ![](https://box.kancloud.cn/2015-09-02_55e5d38dc7a3a.png) <!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">6</td> <td valign="bottom" align="middle" bgcolor="black" height="35">87</td> <td valign="bottom" align="middle" bgcolor="black">87</td> <td valign="bottom" align="middle" bgcolor="black">87</td> <td valign="bottom" align="middle" bgcolor="black">87</td> <td valign="bottom" align="middle" bgcolor="black">87</td> <td valign="bottom" align="middle" bgcolor="black">87</td> <td valign="bottom" align="middle" bgcolor="olive" colspan="2" rowspan="2">5</td> </tr> <tr> <td valign="bottom" align="middle" bgcolor="khaki" height="35">78</td> <td valign="bottom" align="middle" bgcolor="khaki">78</td> <td valign="bottom" align="middle" bgcolor="khaki">78</td> <td valign="bottom" align="middle" bgcolor="khaki">78</td> <td valign="bottom" align="middle" bgcolor="khaki">78</td> <td valign="bottom" align="middle" bgcolor="khaki">78</td> </tr> <tr> <td align="middle" bgcolor="black" height="70">8 7</td> <td align="middle" bgcolor="khaki">7 8</td> <td valign="bottom" align="middle" bgcolor="khaki">A</td> <td valign="bottom" align="middle" bgcolor="olive">a</td> <td valign="bottom" align="middle" bgcolor="khaki">B</td> <td valign="bottom" align="middle" bgcolor="olive">b</td> <td valign="bottom" align="middle" bgcolor="khaki">C</td> <td valign="bottom" align="middle" bgcolor="olive">c</td> <td align="middle" bgcolor="khaki">7 8</td> <td align="middle" bgcolor="black">8 7</td> </tr> <tr> <td align="middle" bgcolor="black" height="70">8 7</td> <td align="middle" bgcolor="khaki">7 8</td> <td valign="bottom" align="middle" bgcolor="olive">d</td> <td valign="bottom" align="middle" bgcolor="khaki">D</td> <td valign="bottom" align="middle" bgcolor="olive">e</td> <td valign="bottom" align="middle" bgcolor="khaki">E</td> <td valign="bottom" align="middle" bgcolor="olive">f</td> <td valign="bottom" align="middle" bgcolor="khaki">F</td> <td align="middle" bgcolor="khaki">7 8</td> <td align="middle" bgcolor="black">8 7</td> </tr> <tr> <td align="middle" bgcolor="black" height="70">8 7</td> <td align="middle" bgcolor="khaki">7 8</td> <td valign="bottom" align="middle" bgcolor="khaki">G</td> <td valign="bottom" align="middle" bgcolor="olive">g</td> <td valign="bottom" align="middle" bgcolor="khaki">H</td> <td valign="bottom" align="middle" bgcolor="olive">h</td> <td valign="bottom" align="middle" bgcolor="khaki">I</td> <td valign="bottom" align="middle" bgcolor="olive">i</td> <td align="middle" bgcolor="khaki">7 8</td> <td align="middle" bgcolor="black">8 7</td> </tr> <tr> <td align="middle" bgcolor="black" height="70">8 7</td> <td align="middle" bgcolor="khaki">7 8</td> <td valign="bottom" align="middle" bgcolor="olive">j</td> <td align="middle" bgcolor="khaki">J</td> <td valign="bottom" align="middle" bgcolor="olive">k</td> <td valign="bottom" align="middle" bgcolor="khaki">K</td> <td valign="bottom" align="middle" bgcolor="olive">l</td> <td valign="bottom" align="middle" bgcolor="khaki">L</td> <td align="middle" bgcolor="khaki">7 8</td> <td align="middle" bgcolor="black">8 7</td> </tr> <tr> <td align="middle" bgcolor="black" height="70">8 7</td> <td align="middle" bgcolor="khaki">7 8</td> <td valign="bottom" align="middle" bgcolor="khaki">M</td> <td valign="bottom" align="middle" bgcolor="olive">m</td> <td valign="bottom" align="middle" bgcolor="khaki">N</td> <td valign="bottom" align="middle" bgcolor="olive">n</td> <td valign="bottom" align="middle" bgcolor="khaki">O</td> <td valign="bottom" align="middle" bgcolor="olive">o</td> <td align="middle" bgcolor="khaki">7 8</td> <td align="middle" bgcolor="black">8 7</td> </tr> <tr> <td align="middle" bgcolor="black" height="70">8 7</td> <td align="middle" bgcolor="khaki">7 8</td> <td valign="bottom" align="middle" bgcolor="olive">p</td> <td valign="bottom" align="middle" bgcolor="khaki">P</td> <td valign="bottom" align="middle" bgcolor="olive">q</td> <td valign="bottom" align="middle" bgcolor="khaki">Q</td> <td valign="bottom" align="middle" bgcolor="olive">r</td> <td valign="bottom" align="middle" bgcolor="khaki">R</td> <td align="middle" bgcolor="khaki">7 8</td> <td align="middle" bgcolor="black">8 7</td> </tr> <tr> <td valign="bottom" align="middle" bgcolor="olive" colspan="2" rowspan="2">5</td> <td valign="bottom" align="middle" bgcolor="khaki" height="35">78</td> <td valign="bottom" align="middle" bgcolor="khaki">78</td> <td valign="bottom" align="middle" bgcolor="khaki">78</td> <td valign="bottom" align="middle" bgcolor="khaki">78</td> <td valign="bottom" align="middle" bgcolor="khaki">78</td> <td valign="bottom" align="middle" bgcolor="khaki">78</td> <td valign="bottom" align="middle" bgcolor="olive" colspan="2" rowspan="2">6</td> </tr> <tr> <td valign="bottom" align="middle" bgcolor="black" height="35">87</td> <td valign="bottom" align="middle" bgcolor="black">87</td> <td valign="bottom" align="middle" bgcolor="black">87</td> <td valign="bottom" align="middle" bgcolor="black">87</td> <td valign="bottom" align="middle" bgcolor="black">87</td> <td valign="bottom" align="middle" bgcolor="black">87</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 4 JUNE 16 – 28</div> </td> </tr> </tbody></table></body></html> 复制代码 Copyright © 2009 [Tencent ISD webteam](http://webteam.tencent.com/). All Rights Reserved ### 快速跳转 - [语法](# "跳转到“语法”") - [取值](# "跳转到“取值”") - [说明](# "跳转到“说明”") - [兼容性](# "跳转到“兼容性”") - [示例](# "跳转到“示例”")