CSS 描述符 font-family 可用于设置 @font-face 规则中指定的字体的字体系列。
font-family 可以为字体设置任何名称，并且该名称将覆盖基础字体数据中给定的任何名称。使用 font-family 属性设置元素样式时，提供的名称与特定的@font面匹配。
不应将 font-family 描述符与 font-family 属性混淆。font-family 描述符仅与 @font-face 一起使用来命名字体。然后，在样式表中的其他位置使用 font-family 属性来引用该字体。
可能的值
CSS 描述符 font-family 只取一个值，如下所示：
- <family-name>：定义字体系列的名称。
语法
font-family: <font-family>;
font-family> 的声明方式如下：
/* <string> value */
font-family: "sample font";
/* <custom-ident> value */
font-family: sampleFont;
CSS font-family - 字符串值
以下示例演示了如何使用 font-family 描述符来设置字体系列的名称，其中 value 作为 <string> 值传递：
<html>
<head>
<style>
/* font-family is used to set a name as a string value */
@font-face {
font-family: "sample font";
src: local(Arial Bold);
descent-override: 70%;
}
h1.with-override {
font-family: "sample font";
}
h1 {
border: 2px solid red;
width: max-content;
}
</style>
</head>
<body>
<h1>No Descent Override</h1>
<h1 class="with-override">Descent Override Applied</h1>
</body>
</html>
CSS font-family - 自定义标识值
以下示例演示了如何使用 font-family 描述符来设置字体系列的名称，其中 value 作为 <custom-ident> 值传递：
<html>
<head>
<style>
/* font-family用于将名称设置为<custom-ident> 值 */
@font-face {
font-family: sampleFont;
src: local(Arial Bold);
descent-override: 70%;
}
h1.with-override {
font-family: sampleFont;
}
h1 {
border: 2px solid red;
width: max-content;
}
</style>
</head>
<body>
<h1>无下降超控</h1>
<h1 class="with-override">已应用下降超控</h1>
</body>
</html>
