font-family

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨November 2022⁩.

Der @font-palette-values Deskriptor font-family wird verwendet, um anzugeben, welche font-family-Palettenwerte angewendet werden sollen. Dies muss genau mit den Werten übereinstimmen, die beim Festlegen der CSS font-family verwendet werden.

Syntax

css

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

Andere nachfolgende Palettenwerte gelten nur für die angegebene Schriftfamilie. Sie können @font-palette-values für andere Schriftfamilien erstellen, indem Sie die gleichen <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

Zugehörige @-Regel	`@font-palette-values`
Anfangswert	`n/a (required)`
Berechneter Wert	wie angegeben

Formale Syntax

font-family = 
  <family-name>#  

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

Beispiele

Verwenden von passenden Familiennamen

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

HTML

html

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

CSS

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

Verwenden desselben Palettenbezeichners für mehrere Schriftfamilien

In diesem Beispiel werden zwei @font-palette-values Regeln für zwei Schriftfamilien festgelegt, aber beide Regeln verwenden denselben dashed-ident Bezeichner, --Dark-Mode. Dies hilft dabei, 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 aktualisieren möchten, um dem Branding Ihrer Website zu entsprechen.

css

@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

Specification
CSS Fonts Module Level 4 # font-family-2-desc

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden