CSS - @font-face 属性

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

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

概述

url（）和 local（）都可以同时使用。如果本地副本可用且匹配，则可以使用本地副本，否则将使用远程服务器中的自定义字体作为回退选项。
local（）应该写在 url（）之前，因为浏览器按照其声明列表的顺序加载资源。
local（）和 url（）这两个函数都是可选的。
具有一个或多个 local（）且不带 url（）的规则块是有效的。
更具体的字体应在不太具体的字体版本之前列出。
@font-face 允许用户定义自己的自定义字体，从而可以超越 Web 安全字体，而不仅仅是依赖互联网连接。

语法


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

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

CSS @font-face - 字体 MIME 类型

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

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

格式	MIME 类开型
TrueType	font/ttf
OpenType	font/otf
Web Open Font Format	font/woff
Web Open Font Format 2	font/woff2

对于网页字体，也适用相同的域限制，即字体文件必须与使用它们的网页位于同一域中。

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

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

以下示例演示了如何使用“Sansation Light Font”的本地副本使用 @font-face 规则。


<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面规则有效，这是必需的。.
unicode-range	提供 Unicode 代码打印范围的字体。

打印本页

CSS - @font-face 属性

概述

语法

CSS @font-face - 字体 MIME 类型

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

描述 符

描述符