CSS @font-palette-values - base-palette

CSS 中 @font-palette-values 规则的 base-palette 描述符有助于指定预定义且可用于创建新调色板的调色板的名称或索引。如果指定的 base-palette 不存在，则将应用在索引 0 处定义的调色板。

使用 font-maker 创建的调色板的从零开始的索引，指定 base-palette 描述符。

可能的值

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

<index>：要使用的预定义调色板的索引。

语法


base-palette = light | dark | <integer>

上述语法将如下所示：


@font-palette-values --sample {
	 	 base-palette: 1;
}

CSS base-palette - 不同的调色板值

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


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

	 	body {
	 	 	 font-family: "RocherColorGX";
	 	}

	 	@font-palette-values --blues {
	 	 	 font-family: "RocherColorGX";
	 	 	 base-palette: 7;
	 	}
	 	
	 	@font-palette-values --yellow {
	 	 	 font-family: "RocherColorGX";
	 	 	 base-palette: 5;
	 	}

	 	.seven {
	 	 	 font-palette: --blues;
	 	}

	 	.five {
	 	 	 font-palette: --yellow;
	 	}
</style>
</head>
<body>
	 	<h1 class="seven">base-palette: 7</h1>
	 	<h1 class="five">base-palette: 5</h1>
	 	<h1>default base-palette</h1>
</body>
</html>

打印本页