font-palette

语法

/* 使用字体定义的调色板 */
font-palette: normal;

/* 使用用户定义的调色板 */
font-palette: --one;

值

normal

使用字体制作者设定的字体默认调色板或默认字形着色方式。如果使用了该项设置，会渲染字体中位于 0 号索引的调色板。

light

指定字体中第一个与“light”匹配的调色板，并作用于当前字体。某些字体包含可确定适用于浅色（接近白色）背景的元数据，如果一个字体没有该元数据，则 light 值的表现等同于 normal。

dark

指定字体中第一个与“dark”匹配的调色板，并作用于当前字体。某些字体包含可确定适用于深色（接近黑色）背景的元数据，如果一个字体没有该元数据，则该值的表现等同于 normal。

<palette-identifier>

允许使用 @font-palette-values @ 规则指定字体调色板的自定义值。该值使用 <dashed-ident> 格式指定。

形式定义

形式语法

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>? | <custom-color-space> ]  

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

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

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

<custom-color-space> = 
  <dashed-ident>  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

示例

指定暗色调色板

本示例允许在网页中指定第一个被字体制作者标记为 dark 的调色板，它在接近黑色的背景上显示效果最好。

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

规范

浏览器兼容性

参见

• @font-palette-values
• base-palette 描述符
• font-family 描述符
• override-colors 描述符