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 = 
  <family-name>#  

<family-name> = 
  <string>         |
  <custom-ident>+  

В этом примере, когда дескриптор 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 url(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";
}

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

Результат

В этом примере два правила @font-palette-values устанавливаются для двух семейств шрифтов, но оба правила используют один и тот же идентификатор с дефисами, --Dark Mode. Это помогает установить свойство цветовой палитры шрифтов для нескольких элементов, 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";
}

h2 {
  font-family: Bixa;
}

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