override-colors

Базовая версия 2022

Новое

С ноября 2022 года эта функция работает на последних устройствах и версиях браузеров. Возможно, эта функция не будет работать на старых устройствах или браузерах.

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

Синтаксис

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

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

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

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

/* overriding multiple colors */
override-colors:
  0 #f00,
  1 #0f0,
  2 #00f;

/* overriding multiple colors with readability */
override-colors:
  0 #f00,
  1 #0f0,
  2 #00f;

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

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

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

Значения

[ <integer [0,∞]> <absolute-color-base> ]: Указывает индекс цвета в палитры и цвет, который им заменит.

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

Связанное правило at-rule	`@font-palette-values`
Начальное значение	`n/a (required)`
Вычисленное значение	как указано

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

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

Примеры

Изменение цвета смайликов

В этом примере показано, как переопределить цвета в шрифте 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

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

.emoji {
  font-family: "Noto Color 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";
}
@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.

Example showing base-palette and base-palette with 1 color overridden

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

Спецификация
CSS Модуль шрифтов уровня 4 # override-color

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`override-colors`	101	101	107	87	15.4	101	107	70	15.4	19.0	101

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-palette-values/override-colors