font-palette
Baseline 廣泛可用 *
font-palette CSS 屬性允許指定彩色字型中包含的眾多調色盤之一，使用者代理可以將其用於字型。使用者還可以透過使用 @font-palette-values at-rule 來覆蓋調色盤中的值或建立新的調色盤。
注意：在為字型著色時，font-palette 調色盤優先。即使使用 !important 指定，color 屬性也不會覆蓋字型調色盤。
語法
/* 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-rule 為字型調色盤指定自己的值。此值使用 <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>? | <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
示例
指定深色調色盤
此示例允許您使用字型建立者標記為深色（最適合接近黑色的背景）的第一個調色盤。
@media (prefers-color-scheme: dark) {
.banner {
font-palette: dark;
}
}
在兩個調色盤之間進行動畫
此示例說明了如何對 font-palette 值更改進行動畫處理，以建立平滑的字型動畫。
HTML
HTML 包含一個要動畫處理的段落文字
<p>color-palette<br />animation</p>
CSS
在 CSS 中，我們從 Google Fonts 匯入一個名為 Nabla 的彩色字型，並使用 @font-palette-values at-rule 定義兩個自定義 font-palette 值。然後我們建立 @keyframes，在這些調色盤之間進行動畫，並將此動畫應用於我們的段落。
@import "https://fonts.googleapis.com/css2?family=Nabla&display=swap";
@font-palette-values --blue-nabla {
font-family: "Nabla";
base-palette: 2; /* this is Nabla's blue palette */
}
@font-palette-values --grey-nabla {
font-family: "Nabla";
base-palette: 3; /* this is Nabla's grey palette */
}
@keyframes animate-palette {
from {
font-palette: --grey-nabla;
}
to {
font-palette: --blue-nabla;
}
}
p {
font-family: "Nabla", fantasy;
font-size: 5rem;
margin: 0;
text-align: center;
animation: animate-palette 4s infinite alternate linear;
}
結果
輸出如下所示
注意：仍然實現 discrete font-palette 動畫的瀏覽器將在兩個調色盤之間切換，而不是平滑地動畫。
規範
| 規範 |
|---|
| CSS 字型模組第 4 級 # font-palette-prop |
瀏覽器相容性
載入中…