CSS @font-face - font-family

CSS 描述符font-family用于设置在@font-face规则中指定的字体的字体系列。

font-family可以设置字体的任何名称，这将覆盖底层字体数据中给出的任何名称。使用font-family属性为元素设置样式时，提供的名称将与特定的@font-face匹配。

不要将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描述符设置字体系列的名称，其中值作为<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 - custom-ident 值

以下示例演示了如何使用font-family描述符设置字体系列的名称，其中值作为<custom-ident>值传递

<html>
<head> 
<style>
   /* font-family is used to set a name as a <custom-ident> value */
   @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>No Descent Override</h1> 
   <h1 class="with-override">Descent Override Applied</h1>
</body>
</html>

打印页面