CSS 属性

CSS 中的 @font-face 规则用于定义自定义字体并使它们可在您的网页中使用。此规则允许网页设计者嵌入或链接到字体文件，然后可以使用该字体文件来设置网页上文本元素的样式。

自定义字体可以从远程服务器或本地安装的加载用户设备上的字体。

概述

  • url() 和 local() 可以同时使用。如果本地副本可用并且匹配，则可以使用它，否则来自远程服务器的自定义字体将用作后备选项。

  • local() 应在之前编写url()，因为浏览器按照声明列表的顺序加载资源。

  • local() 和 url() 这两个函数都是可选的。

  • 包含一个或多个 local() 且不包含 url() 的规则块是有效的。

  • 应在之前列出更具体的字体不太具体的字体版本。

  • @font-face 允许用户定义自己的自定义字体，从而可以超越网络安全字体，而不仅仅是依赖在互联网连接上。

语法

@font-face = 
  @font-face { <declaration-list> }

CSS @font-face 规则可以在任何 CSS 中使用conditional-group-at-rule，除了在顶层使用之外。

CSS @font-face: 字体 MIME 类型

MIME 代表多用途互联网邮件扩展有助于指示文档或文件的性质和格式。

下表显示了不同的格式及其关联的 MIME 类型:

格式MIME 类型
TrueTypefont/ttf
OpenTypefont/otf
Web Open Font Format font/woff
Web Open Font Format 2font/woff2

对于网页字体应用相同的域限制，即字体文件必须在与使用它们的网页相同的域。

@font-face 规则不能在 CSS 选择器中声明。

CSS @font-face: 指定本地字体替代品

以下示例演示使用"Sansation Light Font"的本地副本使用 @font-face at-rule。

<html>
<head> 
<style>
   @font-face {
      font-family: "Sansation Light Font";
      src: url("font/SansationLight.woff");
   }
   body {
      font-family: "Sansation Light Font", serif;
   }
</style>
</head>
<body>
   <h2>@font-face at-rule</h2>
   <p>This is SansationLight Font.</p>
</body>
</html>

描述符

下表给出列出与@font-face相关的所有描述符:

描述符/属性描述
ascent-override设置字体的上升度量。
descent-override设置字体的下降度量。
font-display指定字体的显示方式。
font-family确定将用作字体属性的字体值的名称。
font-stretch设置字体的外观。
font-style设置字体样式。
font-weight设置字体的粗细或粗细。
line-gap-override设置行间距度量所选字体。
size-adjust设置倍数用于与所选字体关联的字形轮廓和规格。
src提供字体资源的参考，例如格式和技术。 @font-face 规则必须有效。
unicode-range提供字体的 Unicode 代码打印范围。