font-variation-settings

Der Wert dieser Eigenschaft kann eine von zwei Formen annehmen:

normal

Text wird mit den Standardeinstellungen dargestellt.

<string> <number>

Bei der Textdarstellung wird die Liste der Achsentags der variablen Schriftarten an die Textlayout-Engine übergeben, um Schriftmerkmale zu aktivieren oder zu deaktivieren. Jede Einstellung besteht immer aus einem oder mehreren Paaren, die aus einem <string> mit 4 ASCII-Zeichen gefolgt von einer <number> bestehen, die den zu setzenden Achsenwert angibt. Wenn das <string> mehr oder weniger Zeichen hat oder Zeichen außerhalb des Codebereichs U+20 - U+7E enthält, ist die gesamte Eigenschaft ungültig. Die <number> kann je nach verfügbarer Wertespanne in Ihrer Schriftart, wie sie vom Schriftdesigner definiert wurde, fraktional oder negativ sein.

Diese Eigenschaft ist ein niedrigstufiger Mechanismus, um Merkmale variabler Schriften zu setzen, für die es keine andere Möglichkeit gibt, diese Merkmale zu aktivieren oder darauf zuzugreifen. Sie sollten es nur verwenden, wenn keine grundlegenden Eigenschaften vorhanden sind, um diese Merkmale zu setzen (z.B. font-weight, font-style).

Mit font-variation-settings festgelegte Schrifteigenschaften überschreiben immer die mit den entsprechenden grundlegenden Schriftarten-Eigenschaften gesetzten, z.B. font-weight, unabhängig davon, wo sie im Kaskadenstil auftreten. In einigen Browsern ist dies derzeit nur der Fall, wenn die @font-face-Anweisung einen font-weight-Bereich enthält.

Variable Schriftachsen gibt es in zwei Typen: registrierte und benutzerdefinierte.

Registrierte Achsen sind die am häufigsten vorkommenden – sie sind häufig genug, dass die Autoren der Spezifikation sie für standardisierungswürdig halten. Beachten Sie, dass dies nicht bedeutet, dass der Autor alle diese in seine Schriftart aufnehmen muss.

Hier sind die registrierten Achsen zusammen mit ihren entsprechenden CSS-Eigenschaften:

Benutzerdefinierte Achsen können alles sein, was der Schriftdesigner in seiner Schriftart variieren möchte, wie z.B. Ascender- oder Descender-Höhen, die Größe von Serifen oder alles andere, was er sich vorstellen kann. Jede Achse kann verwendet werden, solange sie eine eindeutige 4-Zeichen-Achse hat. Einige werden häufiger vorkommen und könnten mit der Zeit sogar registriert werden.

Um variable Schriftarten auf Ihrem Betriebssystem zu verwenden, müssen Sie sicherstellen, dass es auf dem neuesten Stand ist. Beispielsweise benötigen Linux-Betriebssysteme die neueste Version von Linux Freetype, und macOS vor Version 10.13 unterstützt keine variablen Schriftarten. Wenn Ihr Betriebssystem nicht auf dem neuesten Stand ist, können Sie keine variablen Schriftarten auf Webseiten oder den Firefox Developer Tools verwenden.

font-variation-settings = 
  normal                        |
  [ <opentype-tag> <number> ]#  

<opentype-tag> = 
  <string>  

Weitere Beispiele für variable Schriftarten finden Sie in unserem Leitfaden für variable Schriftarten.

Sie können das CSS im untenstehenden Beispiel bearbeiten, um mit verschiedenen Schriftgewichtswerten zu experimentieren. Sehen Sie, was passiert, wenn Sie einen Wert außerhalb des Gewichtsbereichs angeben.

Sie können das CSS im untenstehenden Beispiel bearbeiten, um mit verschiedenen Schriftneigungswerten zu experimentieren.

• Leitfaden für variable Schriftarten
• OpenType-Schriftvariationen Übersicht auf microsoft.com
• OpenType-Design-Variationsachsentag-Registry auf microsoft.com
• OpenType variable Schriftarten auf axis-praxis.org
• Variable Schriften auf v-fonts.com