CSS @font-palette-values - font-family

CSS 中 @font-palette-values 规则的 font-family 描述符有助于指定要引用或应用的 font-family 调色板值。它实际上应该与设置 CSS font-family 时使用的值匹配。

可能的值

CSS 中 @font-palette-values 规则的 font-family 描述符包含以下值：

<family-name>：指定 font-family 的名称。

语法


font-family = <family-name>

上述语法将如下所示：


@font-palette-values --sample-font {
	 	font-family: "Brygada1918-Italic";
}

CSS font-family - 使用匹配的 font-family 名称

以下示例演示了 @font-palette-values 规则的 font-family 描述符使用，其中相同的 font-family 也与 @font-face 规则一起使用。


<html>
<head>	
<style>
	 	@font-face {
	 	 	 font-family: "RocherColorGX";
	 	 	 src: url(font/RocherColorGX.woff2);
	 	}

	 	body {
	 	 	 font-family: "RocherColorGX";
	 	 	 font-size: 2em;
	 	 	 height: 100vh;
	 	}

	 	@font-palette-values --blues {
	 	 	 font-family: RocherColorGX;
	 	 	 base-palette: 10;
	 	}
	 	.blues {
	 	 	 font-palette: --blues;
	 	}
</style>
</head>
<body>
	 	<h1 class="blues">font-family</h1>
</body>
</html>

CSS font-family - 对多个字体系列使用相同的描述符

以下示例演示了 @font-palette-values 规则的 font-family 描述符使用，其中相同的 font-palette 描述符用于不同的元素。


<html>
<head>	
<style>
	 	@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
	 	@font-face {
	 	 	 font-family: "RocherColorGX";
	 	 	 src: url(font/RocherColorGX.ttf);
	 	}

	 	body {
	 	 	 font-family: "RocherColorGX";
	 	 	 font-size: 2em;
	 	}

	 	@font-palette-values --green {
	 	 	 font-family: "RocherColorGX";
	 	}

	 	@font-palette-values --green {
	 	 	 font-family: "Bungee Spice";
	 	}

	 	h2, h3 {
	 	 	 font-palette: --green
	 	}

	 	h2 {
	 	 	 font-family: "RocherColorGX";
	 	}

	 	h3 {
	 	 	 font-family: "Bungee Spice";
	 	}
</style>
</head>
<body>
	 	<h2>h2</h2>
	 	<h3>h3</h3>
</body>
</html>

打印本页