Дескриптор `font-family` CSS-правила @-правила

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

Синтаксис

@font-palette-values --Dark-mode {
  font-family: "Bungee Spice";
  /* other palette settings follow */
}

Следующие значения палитры применяются только к указанному семейству шрифтов. Для других семейств шрифтов можно создавать правила @font-palette-values, используя те же <dashed-ident>s. Это означает, что при наличии нескольких цветных шрифтов для каждого из них можно использовать один и тот же идентификатор.

Значения

<family-name>

Указывает имя семейства шрифтов font-family.

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

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

Примеры

Использование совпадающих имён семейств

В этом примере при использовании дескриптора font-family в правиле @font-palette-values для дескриптора font-family задаётся то же значение, что и при объявлении.

HTML

<h2>This is spicy</h2>
<h2 class="extra-spicy">This is extra hot & spicy</h2>

CSS

@import "https://fonts.googleapis.com/css2?family=Bungee+Spice";
@font-palette-values --bungee-extra-spicy {
  font-family: "Bungee Spice";
  override-colors:
    0 darkred,
    1 red;
}

h2 {
  font-family: "Bungee Spice", fantasy;
}

h2.extra-spicy {
  font-palette: --bungee-extra-spicy;
}

Результат

Использование одного идентификатора палитры для нескольких семейств шрифтов

В этом примере для двух семейств шрифтов заданы два правила @font-palette-values, но в обоих правилах используется один и тот же идентификатор dashed-ident: --Dark-Mode. Это позволяет одновременно задать свойство font-palette для нескольких элементов — в данном случае h1 и h2. Это может быть полезно, если нужно обновить цвета шрифтов в соответствии с фирменным стилем сайта.

@font-palette-values --Dark-Mode {
  font-family: "Bungee Spice";
  /* palette settings for Bungee Spice */
}

@font-palette-values --Dark-Mode {
  font-family: "Bixa";
  /* palette settings for Bixa */
}

h1,
h2 {
  font-palette: --Dark-Mode;
}

h1 {
  font-family: "Bungee Spice", fantasy;
}

h2 {
  font-family: "Bixa", fantasy;
}

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

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

См. также

• font-family
• @font-palette-values
• override-colors дескриптор
• font-palette свойство
• CSSFontPaletteValuesRule.fontFamily