Was ist los mit der Deklaration von Schriftarteigenschaften in @font-face?

Ich hoffe, Sie haben diesen Titel laut mit Ihrer besten Seinfeld-Stimme vorgelesen.

Eine aktuelle Frage in unseren Foren hat mich darauf aufmerksam gemacht, dass es mehr Eigenschaften gibt, die zu @font-face hinzugefügt werden können, als die üblichen Verdächtigen font-family und src. Was ist der Sinn davon? Warum sollte man andere Schriftartendeklarationen dort festlegen?

Ich bin es gewohnt, @font-face im Wesentlichen so zu schreiben:

@font-face {
  font-family: "My Custom Font";
  src: url("path/to-font-file.woff2");
}

Aber die Spezifikation enthält tatsächlich mehr Deskriptoren

@font-face {
  font-family: <family-name>;
  src: <url>;
  unicode-range: <urange>;
  font-variant: normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ];
  font-feature-settings: normal | <feature-tag-value>;
  font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded;
  font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
  font-style: normal | italic | oblique;
}

Das wirst du oft sehen, wenn du von Schriftartendiensten generierten @font-face-Code betrachtest.

Sie sind die Torwächter!

Das ist eine Analogie, mit der du über @font-face-Deklarationsblöcke nachdenken kannst. Die Schriftart wird heruntergeladen und verwendet, wenn sie die Torwächter passiert.

font-family ist der offensichtliche. Du deklarierst eine neue Schriftfamilie, die verwendet werden soll, daher muss jedes Element, das diese Schriftart verwenden möchte, eine passende haben.

@font-face {

  /* Gatekeeper: font-family on another element must match this to be used. */
  font-family: 'Open Sans';

  src: url(my-font.woff2) format('woff2');

}

body {
  /* Match! */
  font-family: 'Open Sans';
}

h1, h2 {
  /* No match */
  font-family: 'Different Font';
}

Sie sind (meistens) alle Torwächter

Mit Ausnahme von font-variant und font-feature-settings können alle Eigenschaften als Filter verwendet werden, die den Browser anweisen, die Schriftdateien herunterzuladen und zu verwenden, wenn die Werte übereinstimmen.

@font-face {

  /* Only download and use if element matches this font-family */
  font-family: 'My Font';

  /* Only download and use if element matches this font-style */
  font-style: italic;

  /* Only download and use if element matches this font-weight */
  font-weight: 700;

  src: url(my-bold-and-italic-font.woff2) format('woff2');

  /* Only download and use if these characters are used */
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

Vielleicht ist eine Diagrammdarstellung hilfreich

Weitere Lektüre

• Verwendung von @font-face
• CSS Fonts Module Level 3
• MDN Referenz