CSS @font-palette-values - override-colors

CSS @font-palette-values 规则的描述符 override-colors 有助于覆盖颜色字体的选定调色板的颜色。

@font-palette-values 规则的描述符 override-colors 接受以逗号分隔的颜色索引列表和新的颜色值。
任何颜色值（如 color-name、hex value、rgb（） 等）都可用于指定颜色值。
颜色索引是从零开始的索引。
在每对索引值和颜色中，具有基本调色板索引的颜色将被上述颜色值覆盖。
当 color 字体在指定索引处没有任何颜色时，它将被忽略。

可能的值

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

[ <integer [0，∞]> <absolute-color-base> ]：定义颜色在基本调色板中的索引以及覆盖该颜色的颜色值。

语法


override-colors = [ <integer [0,∞]> <absolute-color-base> ]#

CSS override-colors - 覆盖索引颜色

以下示例演示了 @font-palette-values 规则的描述符 override-colors 使用，其中使用基本调色板的相同颜色索引，并被不同的颜色值覆盖。


<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-palette-values --normal {
	 	 	 font-family: "RocherColorGX";
	 	 	 base-palette: 1;
	 	}

	 	@font-palette-values --override {
	 	 	 font-family: "RocherColorGX";
	 	 	 base-palette: 1;
	 	 	 override-colors: 0 blue;
	 	}

	 	@font-palette-values --override-rgb {
	 	 	 font-family: "RocherColorGX";
	 	 	 base-palette: 1;
	 	 	 override-colors: 0 rgb(255,0,0);
	 	}

	 	@font-palette-values --override-hex {
	 	 	 font-family: "RocherColorGX";
	 	 	 base-palette: 1;
	 	 	 override-colors: 0 #00ff00;
	 	}

	 	.normal {
	 	 	 font-palette: --normal;
	 	}

	 	.override-colorname {
	 	 	 font-palette: --override;
	 	}

	 	.override-rgb {
	 	 	 font-palette: --override-rgb;
	 	}

	 	.override-hex {
	 	 	 font-palette: --override-hex;
	 	}
</style>
</head>
<body>
	 	<h1 class="normal">normal base-palette</h1>
	 	<h1 class="override-colorname">override with colorname</h1>
	 	<h1 class="override-rgb">override with rgb</h1>
	 	<h1 class="override-hex">override with hex</h1>
</body>
</html>

打印本页