CSS @font-face - font-family

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>

打印本页