@font-palette-values

基线 2022

新发布

自 2022 年 11 月起，此功能在最新的设备和浏览器版本中都能正常使用。此功能可能无法在旧设备或浏览器中正常使用。

@font-palette-values CSS at-rule 允许你自定义由字体制作人员创建的 font-palette 的默认值。

语法

css

@font-palette-values --identifier {
  font-family: Bixa;
}
.my-class {
  font-palette: --identifier;
}

在 <dashed-ident> 是一个用户定义的标识符，虽然它看起来像一个 CSS 自定义属性，但它的行为方式有所不同，并且没有包含在 CSS var() 函数中。

描述符

font-family: 指定此调色板可应用到的字体系列的名称。
base-palette: 指定由字体制作人员创建的要使用的 base-palette 的名称或索引。
override-colors: 指定要覆盖的 base-palette 中的颜色。

正式语法

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

示例

覆盖现有调色板中的颜色

此示例演示了如何更改彩色字体中的一些或所有颜色。

HTML

html

<p>default colors</p>
<p class="alternate">alternate colors</p>

CSS

css

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
p {
  font-family: "Bungee Spice";
  font-size: 2rem;
}
@font-palette-values --Alternate {
  font-family: "Bungee Spice";
  override-colors:
    0 #00ffbb,
    1 #007744;
}
.alternate {
  font-palette: --Alternate;
}

结果

覆盖索引为 0 的普通或 base-palette 的颜色时，无需声明要使用的 base-palette。这应该只在覆盖其他 base-palette 时进行。如果要覆盖所有颜色，则也不需要指定要使用的 base-palette。

规范

规范
CSS 字体模块级别 4 # at-ruledef-font-palette-values

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。