CSS palette-mix()函数彩色字体颜色混合实例页面

CSS代码：

@font-face {
  font-family: 'Rocher';
  src: url(./RocherColorGX.woff2);
}
h4 {
  font-family: 'Rocher';
  font-size: 40px;
}
@font-palette-values --Purples {
  font-family: Rocher;
  base-palette: 6;
}
@font-palette-values --Mint {
  font-family: Rocher;
  base-palette: 7;
}

.purples {
  font-palette: --Purples;
}
.mint {
  font-palette: --Mint;
}
.mixed {
  font-palette: palette-mix(in srgb, --Purples, --Mint)
}

HTML代码：

<h4 class="purples">Color fonts(紫色系)</h4>
<h4 class="mint">Color fonts(薄荷色系)</h4>

混合后的效果

<h4 class="mixed">Color fonts(混合色系)</h4>