CSS - font-palette 属性



CSS 提供的 font-palette 属性允许您指定字体中包含的各种调色板之一。

可能的值

  • normal:设置默认调色板或字形着色。将呈现索引 0 处的调色板。
  • light:设置与 'light' 匹配的第一个调色板。如果未找到匹配项,则其行为与正常情况类似。
  • dark:设置与 'dark' 匹配的第一个调色板。如果未找到匹配项,则其行为与正常情况类似。
  • <palette identifier>:允许使用 @font-palette-values 规则指定您自己的调色板。

适用于

所有 HTML 元素。

DOM 语法


object.style.fontPalette = "normal | <palette identifier>";

CSS font-palette - 基本示例

下面是一个示例:


<html>
<head>
<style>
	 	 @import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
	 	 @font-palette-values --bungee-more-spicy {
	 	 	 	 font-family: "Bungee Spice";
	 	 	 	 override-colors:
	 	 	 	 0 Orange,
	 	 	 	 1 Yellow;
	 	 }
	 	 h2 {
	 	 	 	 font-family: "Bungee Spice";
	 	 }
	 	 h2.more-spicy {
	 	 	 	 font-palette: --bungee-more-spicy;
	 	 }
</style>
</head>
<body>
	 	 <h2>Font face</h2>
	 	 <h2 class="more-spicy">Hot & burning</h2>
</body>
</html>