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>
