CSS @font-palette-values - override-colors

The override-colors descriptor of @font-palette-values at-rule in CSS is helpful in overriding the colors of a selected palette for a color font.

  • The override-colors descriptor of @font-palette-values at-rule accepts a comma-separated list of the color index and a new color value.

  • Any color value, such as color-name, hex value, rgb(), etc. can be used to specify the color value.

  • The color index is a zero-based index.

  • In each pair of index value and the color, the color with the index of the base palette will be overwritten by the mentioned color value.

  • When the color font does not have any color at the specified index, then it will be ignored.

Possible Values

The override-colors descriptor of @font-palette-values at-rule in CSS contains the following value:

  • [ <integer [0,∞]> <absolute-color-base> ]: Defines the index of a color in the base palette and the color value that overwrites it.

Syntax

override-colors = [ <integer [0,∞]> <absolute-color-base> ]#

CSS override-colors - Overriding Index Color

Following example demonstrates the use of override-colors descriptor of @font-palette-values at-rule, where same color index of a base-palette is used and is overwritten by a different color values.

<html>
<head> 
<style>
   @import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
   @font-face {
      font-family: "RocherColorGX";
      src: url(font/RocherColorGX.ttf);
   }

   body {
      font-family: "RocherColorGX";
   }

   @font-palette-values --normal {
      font-family: "RocherColorGX";
      base-palette: 1;
   }

   @font-palette-values --override {
      font-family: "RocherColorGX";
      base-palette: 1;
      override-colors: 0 blue;
   }

   @font-palette-values --override-rgb {
      font-family: "RocherColorGX";
      base-palette: 1;
      override-colors: 0 rgb(255,0,0);
   }

   @font-palette-values --override-hex {
      font-family: "RocherColorGX";
      base-palette: 1;
      override-colors: 0 #00ff00;
   }

   .normal {
      font-palette: --normal;
   }

   .override-colorname {
      font-palette: --override;
   }

   .override-rgb {
      font-palette: --override-rgb;
   }

   .override-hex {
      font-palette: --override-hex;
   }
</style>
</head>
<body>
   <h1 class="normal">normal base-palette</h1>
   <h1 class="override-colorname">override with colorname</h1>
   <h1 class="override-rgb">override with rgb</h1>
   <h1 class="override-hex">override with hex</h1>
</body>
</html>
Advertisements