font-family CSS at-rule Descriptor

Syntax

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

Andere folgende Palettenwerte gelten nur für die angegebene Schriftfamilie. Sie können @font-palette-values für andere Schriftfamilien erstellen, indem Sie dieselben <dashed-ident>s verwenden. Das bedeutet, dass Sie, wenn Sie mehrere Farbfonts haben, denselben Bezeichner für jeden verwenden können.

Werte

<family-name>

Gibt den Namen der font-family an.

Formale Definition

Formale Syntax

font-family = 
  <family-name>#  

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

Beispiele

Verwendung übereinstimmender Schriftfamiliennamen

In diesem Beispiel wird, wenn der font-family-Descriptor in der @font-palette-values At-Regel verwendet wird, derselbe Wert für die font-family verwendet, wie wenn er deklariert wird.

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;
}

Ergebnis

Verwendung desselben Palettenidentifikators für mehrere Schriftfamilien

In diesem Beispiel werden zwei @font-palette-values At-Regeln für zwei Schriftfamilien festgelegt, aber beide At-Regeln verwenden denselben gestrichelten Identifikator, --Dark-Mode. Dies hilft, die font-palette Eigenschaft für mehrere Elemente, h1 und h2 in diesem Fall, gleichzeitig festzulegen. Dies kann nützlich sein, wenn Sie die Schriftfarben an das Branding Ihrer Website anpassen möchten.

@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;
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• font-family
• @font-palette-values
• override-colors Descriptor
• font-palette Eigenschaft
• CSSFontPaletteValuesRule.fontFamily