@font-palette-values

Baseline 已广泛支持

此功能已成熟，可跨多种设备和浏览器版本使用。自 ⁨2022 年 11 月⁩起，所有浏览器均支持此功能。

@font-palette-values CSS @规则允许您自定义字体制造商创建的 font-palette 的默认值。

语法

css

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

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

描述符

base-palette: 指定要使用的由字体制造商创建的 base-palette 的名称或索引。
font-family: 指定此调色板可应用于的字体家族名称。@font-palette-values 规则需要 font-family 名称才能有效。
override-colors: 指定要覆盖的基本调色板中的颜色。

正式语法

@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 "https://fonts.googleapis.ac.cn/css2?family=Bungee+Spice";
p {
  font-family: "Bungee Spice", fantasy;
  font-size: 2rem;
}
@font-palette-values --Alternate {
  font-family: "Bungee Spice";
  override-colors:
    0 #00ffbb,
    1 #007744;
}
.alternate {
  font-palette: --Alternate;
}

结果

当覆盖索引 0 处的正常或基本调色板的颜色时，您无需声明要使用的基本调色板。这只应在覆盖不同的基本调色板时进行。如果您正在覆盖所有颜色，则也无需指定要使用的基本调色板。

规范

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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面由 MDN 贡献者最后修改于 2025 年 10 月 13 日。

在 GitHub 上查看此页面 • 报告此内容的问题