font-palette

基线 2022

新可用

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

font-palette CSS 属性允许指定用户代理可能用于字体的彩色字体中包含的众多调色板之一。用户还可以使用 @font-palette-values At规则覆盖调色板中的值或创建新的调色板。

注意：font-palette 调色板在为字体着色时具有优先权。color 属性不会覆盖字体调色板，即使使用 !important 指定也是如此。

语法

css
/* Using a font-defined palette */
font-palette: normal;

/* Using a user-defined palette */
font-palette: --one;

/* Creating a new palette by blending two others */
font-palette: palette-mix(in lch, --blue, --yellow);

值

normal

指定要用于字体的默认颜色调色板或默认字形着色（由字体制作人设置）。使用此设置时，将呈现字体索引 0 处的调色板。

light

指定要用于字体的字体中第一个与“light”匹配的调色板。某些字体包含将调色板标识为适用于浅色（接近白色）背景的元数据。如果字体没有此元数据，则 light 值的行为与 normal 相同。

dark

指定要用于字体的字体中第一个与“dark”匹配的调色板。某些字体包含将调色板标识为适用于深色（接近黑色）背景的元数据。如果字体没有此元数据，则该值的行为与 normal 相同。

<palette-identifier>

允许您通过使用 @font-palette-values At规则为字体调色板指定您自己的值。此值使用 <dashed-ident> 格式指定。

palette-mix()

通过指定百分比和颜色插值方法混合两个 font-palette 值来创建一个新的 font-palette 值。

正式定义

初始值normal
应用于所有元素和文本。它也适用于 ::first-letter 和 ::first-line。
继承是
计算值如指定
动画类型按计算值类型

正式语法

font-palette = 
  normal                |
  light                 |
  dark                  |
  <palette-identifier>  |
  <palette-mix()>       

<palette-mix()> = 
  palette-mix( <color-interpolation-method> , [ [ normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2} )  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]  

<rectangular-color-space> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       |
  lab           |
  oklab         |
  xyz           |
  xyz-d50       |
  xyz-d65       

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue

示例

指定深色调色板

此示例允许您使用字体制作人标记为深色（在接近黑色的背景上效果最佳）的第一个调色板。

css
@media (prefers-color-scheme: dark) {
  .banner {
    font-palette: dark;
  }
}

在两个调色板之间进行动画

此示例说明如何对 font-palette 值更改进行动画以创建流畅的字体动画。

HTML

HTML 包含要进行动画处理的单个段落文本

html
<p>color-palette<br />animation</p>

CSS

在 CSS 中，我们从 Google Fonts 导入名为 Nabla 的 彩色字体，并使用 @font-palette-values At规则定义两个自定义 font-palette 值。然后，我们创建 @keyframes 在这两个调色板之间进行动画，并将此动画应用于我们的段落。

css
@import url("https://fonts.googleapis.com/css2?family=Nabla&display=swap");

@font-palette-values --blueNabla {
  font-family: Nabla;
  base-palette: 2; /* this is Nabla's blue palette */
}

@font-palette-values --greyNabla {
  font-family: Nabla;
  base-palette: 3; /* this is Nabla's grey palette */
}

@keyframes animate-palette {
  from {
    font-palette: --greyNabla;
  }

  to {
    font-palette: --blueNabla;
  }
}

p {
  font-family: "Nabla";
  font-size: 5rem;
  margin: 0;
  text-align: center;
  animation: animate-palette 4s infinite alternate linear;
}

结果

输出如下所示

注意：仍然实现discrete font-palette 动画的浏览器将在两个调色板之间切换，而不是平滑动画。

规范

规范
CSS 字体模块级别 4
# font-palette 属性

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅