font-family

Baseline 2022
Newly available

Since November 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Der @font-palette-values Descriptor font-family wird verwendet, um festzulegen, auf welche font-family-Palettenwerte angewendet werden sollen. Diese müssen genau den Werten entsprechen, 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 Palettenwerte, die folgen, gelten nur für die angegebene Schriftfamilie. Sie können @font-palette-values für andere Schriftfamilien erstellen, indem Sie denselben <dashed-ident>s verwenden. Dies bedeutet, dass Sie, wenn Sie mehrere Farbtypen verwenden, 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
Anfangswertn/a (required)
Berechneter Wertwie angegeben

Formale Syntax

font-family = 
<family-name>#

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

Beispiele

Verwenden übereinstimmender Schriftnamen

In diesem Beispiel wird beim Verwenden des font-family Descriptors innerhalb der @font-palette-values At-Regel derselbe Wert für die font-family verwendet, wie er deklariert ist.

HTML

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

CSS

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

Ergebnis

Verwenden desselben Palettenbezeichners 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-Bezeichner --Dark Mode. Dies hilft, die font-palette Eigenschaft für mehrere Elemente, h1 und h2 in diesem Fall, gleichzeitig einzustellen. Dies kann nützlich sein, wenn Sie die Schriftfarben an die Markenfarben Ihrer Website anpassen möchten.

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

h2 {
  font-family: Bixa;
}

Spezifikationen

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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-family

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch