palette-mix()

可用性有限

此功能不是基线，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一个 实验性技术
在生产环境中使用之前，请仔细查看 浏览器兼容性表。

palette-mix() CSS 函数 可用于通过按指定百分比和颜色插值方法混合两个 font-palette 值来创建新的 font-palette 值。

语法

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 可选

<percentage> 值介于 0% 和 100% 之间，指定要混合的每个调色板的量。它们按如下方式标准化

  • 如果 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() 函数通过混合其他两个调色板来创建新调色板。

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-规则定义两个自定义 font-palette 值。然后，我们将三个不同的 font-palette 值应用于段落——--yellow、--blue 和一个新的绿色调色板，使用 palette-mix() 混合蓝色和黄色调色板来创建。

css
@import url("https://fonts.googleapis.com/css2?family=Nabla&display=swap");

@font-palette-values --blueNabla {
  font-family: Nabla;
  base-palette: 2; /* this is Nabla's blue palette */
}

@font-palette-values --yellowNabla {
  font-family: Nabla;
  base-palette: 7; /* this is Nabla's yellow palette */
}

p {
  font-family: "Nabla";
  font-size: 4rem;
  text-align: center;
  margin: 0;
}

.yellowPalette {
  font-palette: --yellowNabla;
}

.bluePalette {
  font-palette: --blueNabla;
}

.mixedPalette {
  font-palette: palette-mix(in lch, --blueNabla 55%, --yellowNabla 45%);
}

结果

输出如下所示

规范

规范
CSS 字体模块第 4 级
# typedef-font-palette-palette-mix

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅