font-family

Syntax

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

Andere Palettenwerte, die folgen, 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, wenn Sie mehrere Farbschriften haben, können Sie denselben Identifikator für jede verwenden.

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 passender Schriftfamiliennamen

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

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 dashed-ident-Identifikator, --Dark-Mode. Dies hilft dabei, die font-palette Eigenschaft für mehrere Elemente, in diesem Fall h1 und h2, gleichzeitig festzulegen. Dies kann nützlich sein, wenn Sie die Schriftfarben so anpassen möchten, dass sie zum Branding Ihrer Website passen.

@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 Deskriptor
• font-palette Eigenschaft
• CSSFontPaletteValuesRule.fontFamily