CSS-правило @font-palette-values

@font-palette-values CSS at-rule позволяет настраивать значения по умолчанию для font-palette, созданной разработчиком шрифта.

Синтаксис

@font-palette-values --identifier {
  font-family: "Bixa";
}
.my-class {
  font-palette: --identifier;
}

<dashed-ident> — это идентификатор, определяемый пользователем. Хотя он выглядит как пользовательское свойство CSS, он работает иначе и не оборачивается в функцию CSS var().

Дескрипторы

base-palette

Задает имя или индекс базовой палитры, созданной разработчиком шрифта, которую следует использовать.

font-family

Задает имя семейства шрифтов, к которому можно применить эту палитру. Для корректности правила @font-palette-values требуется имя font-family.

override-colors

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

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

Примеры

Переопределение цветов в существующей палитре

В этом примере показано, как изменить некоторые или все цвета цветного шрифта.

HTML

<p>default colors</p>
<p class="alternate">alternate colors</p>

CSS

@import "https://fonts.googleapis.com/css2?family=Bungee+Spice";
p {
  font-family: "Bungee Spice", fantasy;
  font-size: 2rem;
}
@font-palette-values --Alternate {
  font-family: "Bungee Spice";
  override-colors:
    0 #00ffbb,
    1 #007744;
}
.alternate {
  font-palette: --Alternate;
}

Результат

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

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

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

См. также

• font-palette свойство
• font-family дескриптор
• base-palette дескриптор
• override-colors дескриптор
• CSSFontPaletteValuesRule