CSS3的@ font-face规则

指定一个命名的字体"myFirstFont"并指定可以找到的网址：

@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}

更多"Try it Yourself"下面的例子。

定义和用法

随着的@ font-face规则，网页设计人员不再需要使用的一个"web-safe"的字体。

在新的@ font-face规则，你必须先定义的字体的名称(eg myFirstFont)然后指向字体文件。

提示：使用小写字母的字体URL。大写字母可以出现意想不到的结果在IE浏览器！

使用的字体为HTML元素，指的是字体的名称(myFirstFont)通过font-family属性：

div {
font-family: myFirstFont;
}

该的@ font-face规则在Internet Explorer，Firefox，歌剧，铬，和Safari是支持的。

在表中的数字指定完全支持的字体格式的第一个浏览器的版本。

* Edge和IE浏览器：当设置为字体格式只能"installable" 。

*火狐：默认情况下禁用，但可以启用（需要设置一个标志， "true"使用WOFF2）。

@font-face {
font-properties
}

字体描述符	值	描述
字体系列	name	需要。定义字体的名称。
SRC	URL	需要。定义了URL(s) ，其中所述字体应从被下载
字体舒展	正常冷凝超浓缩超浓缩半浓缩扩大半发泡额外扩展超扩展	可选的。定义字体应如何拉伸。默认值是"normal"
字体样式	正常斜体斜	可选的。定义字体应如何称呼。默认值是"normal"
字体重量	正常胆大 100 200 300 400 500 600 700 800 900	可选的。定义字体的气魄。默认值是"normal"
Unicode的范围	unicode-range	可选的。定义的字体支持Unicode字符的范围内。默认值是"U+0-10FFFF"

您必须添加包含粗体文字描述另一个的@ font-face规则：

@font-face {
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight: bold;
}

文件"sansation_bold.woff"是另一种字体文件，包含用于Sansation字体的粗体字符。

浏览器将使用这个只要有一块与FONT-FAMILY文本"myFirstFont"应该呈现为粗体。

这样你可以有很多的@ font-face规则相同的字体。