override-colors覆盖文字调色板颜色实例页面

回到相关文章 »

效果:

ZhangXinxu

ZhangXinxu

上面是 override-colors 单独使用,下面是和 base-palette 一起使用。

代码:

CSS代码:
@font-face {
  font-family: 'Rocher';
  src: url(./RocherColorGX.woff2);
}

h4 {
  font-family: 'Rocher';
  font-size: 50px;
}

@font-palette-values --Default {
  font-family: Rocher;
  override-colors:
    0 #2a80eb,
    1 #eb4646,
    2 #f59b00,
    3 #1cad70;
}

@font-palette-values --Palette6 {
  font-family: Rocher;
  base-palette: 6;
  override-colors: 2 #f59b00;
}

.default {
  font-palette: --Default;
}

.palette6 {
  font-palette: --Palette6;
}
HTML代码:
<h4 class="default">ZhangXinxu</h4>
<h4 class="palette6">ZhangXinxu</h4>