font-palette

Baseline 2022 *
Newly available

Since November 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

font-palette CSS 属性允许用户代理指定某个字体所包含众多调色板中的其中一个。用户还可以通过使用 @font-palette-values @ 规则来覆盖调色板中的值或创建一个新的调色板。

语法

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

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

normal

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

light

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

dark

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

<palette-identifier>

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

形式定义

初始值normal
适用元素所有元素和文本. It also applies to ::first-letter and ::first-line.
是否是继承属性
计算值as specified
动画类型by computed value

形式语法

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

示例

指定暗色调色板

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

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

规范

Specification
CSS Fonts Module Level 4
# font-palette-prop

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-palette
Animation of font-palette by computed value
Experimental
dark
light
normal
palette-mix()
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

参见