@font-face

摘要

@font-face CSS at-rule 允许作者指定在线字体来显示网页上的文本。通过允许作者提供自己的字体，@font-face 避免了依赖用户电脑上安装的有限数量的字体。

@font-face at-rule 不仅可以在 CSS 的顶层使用，也可以在任何 CSS 条件组 at-rule 内部使用。

语法

@font-face {
  [font-family: <family-name>;]?
  [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
  [unicode-range: <urange>#;]?
  [font-variant: <font-variant>;]?
  [font-feature-settings: normal|<feature-tag-value>#;]?
  [font-stretch: <font-stretch>;]?
  [font-weight: <weight>];
  [font-style: <style>];
}

值

<family-name>: 指定一个 font-family 名称，该名称将用作字体属性的字体面值。
<uri>; 用于使用的字体文件的位置（可以是外部引用（带有可选提示）或本地引用）。要指定外部引用，请使用 url(sURL)，其中 sURL 是绝对或相对 URL。要指定特定的字体格式（仅适用于外部引用的字体文件），请使用 format 提示 (format(fontFormat))，其中 fontFormat 是一个逗号分隔的格式字符串列表，表示支持的字体格式。可能的 fontFormat 值包括 woff、truetype、opentype 和 embedded-opentype。format 提示是可选的。

*要指定本地引用，请使用 **local(sFontName)**，其中 **sFontName** 是要使用的本地安装字体的名称。如果未找到该字体，将尝试其他来源，直到找到一个为止。*
**\**: *一个 Unicode 字符范围列表，其中*urange*是一个逗号分隔的 Unicode 范围值列表。*
**\**: *一个 [**font-variant**](/css/properties/font-variant) 值。*
**\**: *一个有效的 [**font-stretch**](/css/properties/font-stretch) 属性值。*
**\**: *一个有效的 [**font-weight**](/css/properties/font-weight) 属性值（不包括相对值 `bolder` 和 `lighter`）。*
**\**: *一个有效的 [**font-style**](/css/properties/font-style) 属性值。*

## 示例

以下示例使用 Open Sans 字体来设置段落元素样式。

/* Declare the font using @font-face. */
@font-face {
  font-family: "Open Sans";
  src: local("Open Sans"), /* Prefer a locally installed version of the font. */
       local("OpenSans"),
       /* URL requires a valid path to the respective font file.
          Same origin policy is applicable here.
       */
       url("/path/to/OpenSans.eot?#iefix") format("embedded-opentype"),
       url("/path/to/OpenSans.woff") format("woff"),
       url("/path/to/OpenSans.ttf") format("truetype"),
       url("/path/to/OpenSans.svg#OpenSans") format("svg");
  src: url("/path/to/OpenSans.eot");

  font-weight: normal;
  font-style: normal;
}

/* Use the font in your CSS as follows. */
p {
  font-family: "Open Sans", sans-serif;
}

查看实时示例

用法

 Use this at-rule in order to use specific fonts that might not be available on your local system.

备注

该规则没有默认值。unicode-range 描述符定义了给定字体支持的 Unicode 字符范围。urange 的值通过以 "U+" 为前缀的十六进制数字表示，对应于 Unicode 字符代码点。unicode-range 描述符充当浏览器决定是否下载字体资源时的提示。Unicode 范围值使用十六进制值书写，且不区分大小写。每个值都以 "U+" 为前缀，多个不连续的范围用逗号分隔。逗号前后的空格将被忽略。有效的字符代码值介于 0 和 10FFFF（包括）之间。单个范围有三种基本形式

单个代码点（例如，U+416）
一个区间值范围（例如，U+400-4ff）
一个范围，其中尾随的 ‘?’ 字符表示 ‘任何数字值’（例如，U+4??）

@font-face

摘要

语法

值

用法

备注

相关规范

参见

相关文章

字体

语法

署名