CSS - @font-palette-values

CSS 中的 @font-palette-values 规则有助于自定义由 font-maker 创建的 font-palette 默认值。font-palette 有助于指定字体中包含的调色板。

语法


@font-palette-values =	
	 @font-palette-values 	<dashed-ident> { <declaration-list> }

上述语法中使用的 <dashed-ident> 是用户定义的标识符，它似乎是一个 CSS 自定义属性。它的行为不同，并且没有包装在 CSS var（）函数中。

例

以下是 @font-palette-values 规则的示例。


<html>
<head>	
<style>
	 	@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
	 	p {
	 	 	 font-family: "Bungee Spice";
	 	 	 font-size: 2rem;
	 	}
	 	@font-palette-values --sample-palette {
	 	 	 font-family: "Bungee Spice";
	 	 	 override-colors:
	 	 	 0 #111,
	 	 	 1 yellow;
	 	}
	 	.sample-color {
	 	 	 font-palette: --sample-palette;
	 	}
</style>
</head>
<body>
	 	<p>Default Color Palette</p>
	 	<p class="sample-color">@font-palette-values Color Palette</p>
</body>
</html>

在上面的示例中：

已导入外部 Google 字体。
声明了 @font-palette-values 的名称为 --sample-palette 的标识符。
名为 .sample-color 的类使用 font-palette --sample-palette 声明，该类将调色板应用于 p 元素中的文本。

描述符或相关属性

下表列出了与 @font-palette-values 相关的所有描述符：

描述符 / 属性	描述
font-family	确定调色板将应用到的字体系列的名称。
base-palette	确定由字体制作者开发的 base-palette 的名称或索引。
override-colors	确定要覆盖的基础调色板中的颜色。

打印本页