Дескриптор CSS-правила `override-colors`

override-colors — это CSS-дескриптор, который используется для переопределения цветов в выбранной базовой палитре цветного шрифта.

Синтаксис

/* basic syntax */
override-colors: <index of color> <color>;

/* using color names */
override-colors: 0 red;

/* using hex-color */
override-colors: 0 #ff0000;

/* using rgb */
override-colors: 0 rgb(255 0 0);

/* overriding multiple colors */
override-colors:
  0 red,
  1 green,
  2 blue;

Дескриптор override-colors принимает список индексов цветов и новых значений цвета, разделённых запятыми.

Индексация цветов начинается с нуля; можно использовать любое значение цвета.

Для каждой пары «индекс — цвет» цвет с указанным индексом в заданной базовой палитре будет заменён. Если в цветном шрифте нет цвета с указанным индексом, пара будет проигнорирована.

Значения

[ <integer [0,∞]> <absolute-color-base> ]

Указывает индекс цвета в базовой палитре и цвет, которым его нужно заменить.

Формальное определение

Формальный синтаксис

Примеры

Изменение цветов эмодзи

В этом примере показано, как переопределить цвета в цветном шрифте Noto Color Emoji, чтобы они соответствовали стилю вашего сайта.

HTML

<section class="hats">
  <div class="hat">
    <h2>Original Hat</h2>
    <div class="emoji">🎩</div>
  </div>
  <div class="hat">
    <h2>Red Hat</h2>
    <div class="emoji red-hat">🎩</div>
  </div>
</section>

CSS

.hats {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: normal;
  src: url("https://fonts.gstatic.com/l/font?kit=Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabts6diywYkdG3gjD0U&skey=a373f7129eaba270&v=v24")
    format("woff2");
}

.emoji {
  font-family: "Noto Color Emoji", emoji;
  font-size: 3rem;
}
@font-palette-values --red {
  font-family: "Noto Color Emoji";
  override-colors:
    0 rgb(74 11 0),
    1 rgb(149 22 1),
    2 rgb(183 27 1),
    3 rgb(193 28 1),
    4 rgb(230 34 1);
}
.red-hat {
  font-palette: --red;
}

Результат

Изменение цвета в альтернативной базовой палитре

В этом примере показано, как переопределить один цвет в шрифте Rocher Color Font.

HTML

<h2 class="normal-palette">Normal Palette</h2>
<h2 class="override-palette">Override Palette</h2>

CSS

@font-face {
  font-family: "Rocher";
  src: url("[path-to-font]/RocherColorGX.woff2") format("woff2");
}
h2 {
  font-family: "Rocher", fantasy;
}
@font-palette-values --override-palette {
  font-family: "Rocher";
  base-palette: 3;
}
@font-palette-values --override-palette {
  font-family: "Rocher";
  base-palette: 3;
  override-colors: 0 rebeccapurple;
}
.normal-palette {
  font-palette: --normal-palette;
}
.override-palette {
  font-palette: --override-palette;
}

Результат

В этом примере показано, что в base-palette 3 цвет с индексом 0 заменяется на rebeccapurple.

Спецификации

Совместимость с браузерами

См. также

• @font-palette-values
• base-palette
• font-family
• font-palette
• CSSFontPaletteValuesRule.overrideColors