font-variant-numeric

CSS Almanac → Eigenschaften → F → font-variant-numeric

Geoff Graham on 1. Juli 2020

Die CSS-Eigenschaft font-variant-numeric unterstützt das OpenType-Schriftformat, indem sie angibt, welche numerischen Glyphen für eine Klasse verwendet werden sollen, einschließlich Variationen für Brüche, Ordnungszahlen und stilisierte Variationen unter anderem.

Ein wenig Kontext

Wir neigen dazu, Zahlen als statische Glyphen zu betrachten. Sie werden gedruckt und das ist es. Zahlen ähneln jedoch in vielerlei Hinsicht Alphabetbuchstaben, da sie Varianten haben können, die es je nach Kontext lohnen, den Stil zu ändern. Wir sprechen von Dingen wie Brüchen (z.B. 1/4), Ordnungszahlen (z.B. 1st) und sogar dem Äquivalent von Groß- und Kleinbuchstaben für Ziffern. Im Gegensatz zu Buchstaben ändern diese Variationen jedoch nicht die Bedeutung des Inhalts, obwohl sie zusätzlichen Kontext verleihen oder die Lesbarkeit beeinflussen.

Das Problem mit dieser Eigenschaft ist, dass sie für die Arbeit mit OpenType-fähigen Schriftarten entwickelt wurde, einem neuen, aber sich schnell entwickelnden Schriftformat, das eine umfangreichere Sammlung von Glyphen bietet, die für verschiedene Kontexte verwendet werden können. Sie werden OpenType oft als variable fonts bezeichnen, da sie eine größere Vielfalt an Zeichen enthalten, die sie flexibler für eine Vielzahl von Anwendungen machen. Variationen für all die Dinge!

Das Problem ist, dass die Verfügbarkeit von Schriftarten, die font-variant und font-variant-numeric voll nutzen können, begrenzt ist. Es gibt eine wachsende Zahl von OpenType-kompatiblen Schriftarten, aber eine viel kleinere Teilmenge von Optionen nutzt alle Funktionen, die font-variant-numeric bietet, und diese sind oft Premium und teuer. Richard Butler fasst dies gut zusammen

Uns stehen „Großbuchstaben“-Zahlen namens Lining- oder Titling-Ziffern und „Kleinbuchstaben“-Ziffern namens Oldstyle- oder Text-Ziffern zur Verfügung. … Es ist auch so, dass die überwiegende Mehrheit der Schriftarten weder modern noch professionell ist, wenn modern OpenType-fähig bedeutet und professionell bedeutet, dass beide Ziffernsätze entworfen wurden.

Das größte Problem, das uns bei CSS-Eigenschaften typischerweise beschäftigt, ist die Browserunterstützung, aber diese Eigenschaft und alle anderen, die mit font-variant zusammenhängen, sind auch von den Schriftgestaltern abhängig, um die volle Unterstützung zu bieten.

Das ist zwar enttäuschend, aber wir sehen auch zur Zeit dieser Zeilen mehr „moderne“ und „professionelle“ Schriftarten. Adobe TypeKit kündigte seine Arbeit zur Unterstützung von OpenType-Funktionen an und es wird gemunkelt, dass Google Fonts ebenfalls dabei ist, da Chrome 62 diese unterstützt.

Grundlegende Verwendung

Dies ist die grundlegendste Verwendung der Eigenschaft

.fraction {
    font-variant-numeric: diagonal-fractions;
}

Ältere Browser erkennen dies nicht, aber sie akzeptieren font-feature-settings, das dieselben Funktionen mit anderen Werten freischaltet. Wir können die beiden Eigenschaften kombinieren, um eine tiefere Unterstützung zu erreichen

.fraction {
    font-feature-settings: frac;
    font-variant-numeric: diagonal-fractions;
}

Oder wir können dies anpassen, um die Browserunterstützung mit @supports zu erkennen, sodass die neue Eigenschaft nur an unterstützende Browser ausgeliefert wird

.fraction {
    font-feature-settings: frac;
}

@supports (font-variant-numeric: diagonal-fractions) {
  .fraction {
      font-feature-settings: frac;
      font-variant-numeric: diagonal-fractions;
  }
}

Werte

Die Eigenschaft font-variant-numeric akzeptiert die folgenden Werte. Der entsprechende Wert von font-feature-settings ist zur Referenz angegeben.

Allgemeine Werte

Wert	Beschreibung	Feature-Einstellung
`normal`	Keine der unten aufgeführten Funktionen ist aktiviert.	N/A
`ordinal`	Verwendet Buchstaben zur Darstellung der numerischen Reihenfolge, typischerweise in Form eines Superscripts.	`ordn`
`slashed-zero`	Zeigt eine alternative Form von Null mit einer diagonalen Linie an, die hindurchläuft.	`zero`

Numerische Ziffernwerte

Wert	Beschreibung	Feature-Einstellung
`lining-nums`	Richtet Zahlen vertikal aus, sodass sie die gleiche Höhe haben und auf derselben Ebene liegen.	`lnum`
`oldstyle-nums`	Ermöglicht eine alternative vertikale Ausrichtung, bei der Zahlen nicht immer gleichmäßig auf derselben Grundlinie angezeigt werden.	`onum`

Numerische Bruchwerte

Wert	Beschreibung	Feature-Einstellung
`diagonal-fractions`	Zeigt Brüche in einem kleineren Format an, bei dem Zähler (obere Zahl) und Nenner (untere Zahl) durch einen diagonalen Schrägstrich geteilt werden.	`frac`
`stacked-fractions`	Zeigt Brüche in einem kleineren Format an, bei dem Zähler und Nenner übereinander gestapelt und durch einen horizontalen Strich geteilt werden.	`afrc`

Numerische Abstände-Werte

Wert	Beschreibung	Feature-Einstellung
`proportional-nums`	Ermöglicht es Zahlen, ihren eigenen Platz einzunehmen, der nicht unbedingt gleich der Breite anderer Ziffern ist.	`pnum`
`tabular-nums`	Zeigt Zahlen mit gleicher Größe, proportionaler und gleicher Abstandsbreite für eine saubere Formatierung in tabellarischen Daten an.	`tnum`

Die Spezifikation enthält eine besondere Anmerkung zur Verwendung von ordinal, da es dem sup-Element ähnelt, aber anders markiert wird.

Für hochgestellte Zeichen

sup { 
    font-variant-position: super;
}

Two squared is 2<sup>2</sup>

Für Ordnungszeichen

.ordinal { 
    font-variant-numeric: ordinal;
}

1st

Browser-Unterstützung

Die Eigenschaft font-variant-numeric ist derzeit Teil der CSS Fonts Module Level 3 Spezifikation, die zum Zeitpunkt dieser Zeilen den Status Candidate Recommendation hat, was bedeutet, dass sie sich jederzeit ändern kann.

Desktop

Chrome	Edge	Firefox	IE	Opera	Safari
52	Nein	34	Nein	39	9.1

Firefox 24-34 (exklusiv) unterstützt die Eigenschaft hinter der Präferenz layout.css.font-features.enabled, wenn diese auf true gesetzt ist.

Mobil

Android Browser	Chrome Android	Edge	Firefox	IE	Opera Android	iOS Safari
52	52	Nein	34	Nein	39	Ja

Additional Resources

CSS Fonts Module Level 3: Die offizielle Spezifikation, in der die Eigenschaft definiert ist.
MDN Docs: Mozilla-Dokumentation zur Eigenschaft, einschließlich Beispielen.
Web Typography: Numerals: Ein umfassender Beitrag auf A List Apart zu diesem Thema.
Caring About OpenType Feature: Eine weitere detaillierte Abhandlung auf TypeKit Practice.
Aktuelle Nutzung: Messung der Nutzung der Eigenschaft auf bestehenden Websites durch Microsoft Edge.
Microsoft Edge Feature Request: Geben Sie Ihre Stimme ab, um Edge zur Einführung der Funktion zu ermutigen.