CSS - font-palette 属性



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

可能的值

  • normal:设置默认颜色调色板或字形着色。渲染索引为 0 的调色板。

  • light:设置与“light”匹配的第一个调色板。如果找不到匹配项,则其行为类似于normal

  • dark:设置与“dark”匹配的第一个调色板。如果找不到匹配项,则其行为类似于normal

  • <调色板标识符>:允许使用@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>
广告