CSS3 @font-face 字体类型

指定网页中显示特定的在线字体或者本地字体，通过这个方法，可以满足客户端因为字体不足而不能正确显示网页中的文字的需要。

语法：

默认值：

不设置

继承性：

否

DOM 语法：

适用于：

所有元素

浏览器支持：

可能的值：

值

描述

font-family

字体名称。

src

<source> [,<source>]*; 一个或者多个字体文件链接。

font-weight

参见 font-weight。

font-style

参见 font-style。

说明：

字体类型

字体格式

常用的扩展名

woff

WOFF (Web Open Font Format)

.woff

truetype

TrueType

.ttf

opentype

OpenType

.ttf, .otf

embedded-opentype

Embedded OpenType

.eot

svg

SVG Font

.svg, .svgz

例子 1：

<style>
@font-face {
  font-family: "Bitstream Vera Serif Bold";
  src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

p { font-family: "Bitstream Vera Serif Bold", serif }
</style>

<p>这里的文字将按照 “Bitstream Vera Serif Bold” 字体进行显示。</p>

例子 2：

<style>
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

div {font-family:MyHelvetica;}
</style>

<div>使用 MyHelvetica 字体显示。</div>

这个例子中，首先使用本地的“Helvetica Neue Bold”字体，如果没有找到，则使用本地的“HelveticaNeue-Bold”，如果还没有找到，则下载 MgOpenModernaBold.ttf 字体。

例子 3：

<style>
src: url(fonts.svg#simple); 
</style>

对于 svg 字体，URL 指向 SVG 字体文档中的元素id="simple"，如果没有设置引用的元素，则默认指定一个元素。上面的例子加载id为'simple' 的DVG字体。

例子 4：

<style>
@font-face {
  font-family: bodytext;
  src: url(ideal-sans-serif.woff) format("woff"),
       url(basic-sans-serif.ttf) format("opentype");
}
</style>

上面的例子首先加载 WOFF 字体，如果没有找到，则加载 OpenType 字体。

CSS3 中文参考手册

@font-face 字体类型

语法：

可能的值：

说明：

例子 1：

例子 2：

例子 3：

例子 4：