此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
font-palette
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年11月.
* 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>? | <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 的调色板,它在接近黑色的背景上显示效果最好。
css
@media (prefers-color-scheme: dark) {
.banner {
font-palette: dark;
}
}
规范
| Specification |
|---|
| CSS Fonts Module Level 4 # font-palette-prop |
浏览器兼容性
Loading...
参见
@font-palette-valuesbase-palette描述符font-family描述符override-colors描述符