語法
css
/* Blending font-defined palettes */
font-palette: palette-mix(in lch, normal, dark)
/* Blending author-defined palettes */
font-palette: palette-mix(in lch, --blues, --yellows)
/* Varying percentage of each palette mixed */
font-palette: palette-mix(in lch, --blues 50%, --yellows 50%)
font-palette: palette-mix(in lch, --blues 70%, --yellows 30%)
/* Varying color interpolation method */
font-palette: palette-mix(in srgb, --blues, --yellows)
font-palette: palette-mix(in hsl, --blues, --yellows)
font-palette: palette-mix(in hsl shorter hue, --blues, --yellows)
值
函式式表示法
palette-mix(method, palette1 [p1], palette2 [p2])
method（方法）-
一個
<color-interpolation-method>，指定插值顏色空間。 palette1、palette2-
要混合的
font-palette值。這些可以是任何font-palette值，包括palette-mix()函式、normal、dark和light。 p1、p2可選-
介於
0%和100%之間的<percentage>值，指定要混合的每個調色盤的數量。它們按如下方式歸一化：- 如果
p1和p2都省略，則p1 = p2 = 50%。 - 如果
p1省略，則p1 = 100% - p2。 - 如果
p2省略，則p2 = 100% - p1。 - 如果
p1 = p2 = 0%，則函式無效。 - 如果
p1 + p2 ≠ 100%，則p1' = p1 / (p1 + p2)且p2' = p2 / (p1 + p2)，其中p1'和p2'是歸一化結果。
- 如果
正式語法
<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
示例
使用 palette-mix() 混合兩個調色盤
此示例演示如何使用 palette-mix() 函式透過混合兩個調色盤來建立新調色盤。
HTML
HTML 包含三個段落，用於應用我們的字型資訊：
html
<p class="yellowPalette">Yellow palette</p>
<p class="bluePalette">Blue palette</p>
<p class="mixedPalette">Mixed palette</p>
CSS
在 CSS 中，我們從 Google Fonts 匯入彩色字型，並使用 @font-palette-values at-rule 定義兩個自定義 font-palette 值。然後，我們將三個不同的 font-palette 值應用於段落——--yellow、--blue 和一個使用 palette-mix() 將藍色和黃色調色盤混合在一起建立的新綠色調色盤。
css
@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 --yellow-nabla {
font-family: "Nabla";
base-palette: 7; /* this is Nabla's yellow palette */
}
p {
font-family: "Nabla", fantasy;
font-size: 4rem;
text-align: center;
margin: 0;
}
.yellowPalette {
font-palette: --yellow-nabla;
}
.bluePalette {
font-palette: --blue-nabla;
}
.mixedPalette {
font-palette: palette-mix(in lch, --blue-nabla 55%, --yellow-nabla 45%);
}
結果
輸出如下所示
規範
| 規範 |
|---|
| CSS 字型模組第 4 級 # typedef-font-palette-palette-mix |
瀏覽器相容性
載入中…