Schriftvariante-numerisch - CSS-Tricks

Die font-variant-numericEigenschaft in CSS unterstützt das OpenType-Schriftformat, indem angegeben wird, welche numerischen Glyphen für eine Klasse verwendet werden sollen, einschließlich Variationen für Brüche, Ordnungsmarkierungen und gestaltete Variationen.

Ein kleiner Kontext

Wir neigen dazu, Zahlen als statische Glyphe zu betrachten. Es druckt und so ist es. Zahlen sind jedoch viel mehr wie Buchstaben in dem Sinne, dass sie Varianten haben können, die es je nach Kontext wert sind, den Stil zu ändern. Wir sprechen über Dinge wie Brüche (z. B. 1/4), Ordnungszahlen (z. B. 1.) und sogar das Äquivalent von Groß- und Kleinbuchstaben. Im Gegensatz zu Buchstaben ändern diese Variationen jedoch nicht die Bedeutung des Inhalts, obwohl sie zusätzlichen Kontext verleihen oder die Lesbarkeit beeinträchtigen.

Das Problem mit dieser Eigenschaft ist, dass sie für OpenType-fähige Schriftarten entwickelt wurde, ein neues, aber sich schnell entwickelndes Schriftformat, das einen umfangreicheren Satz von Glyphen bietet, die gezielt in verschiedenen Kontexten verwendet werden können. Möglicherweise wird OpenType häufig als variable Schriftarten bezeichnet. Dies liegt daran, dass sie eine größere Anzahl von Zeichen enthalten, die sie für eine Vielzahl von Verwendungszwecken flexibler machen. Variationen für alle Dinge!

Das Problem ist, dass die Verfügbarkeit von Schriftarten, die alle Vorteile nutzen können font-variantund font-variant-numericbegrenzt sind. Es gibt eine wachsende Anzahl von OpenType-kompatiblen Schriftarten, aber es gibt eine viel kleinere Untergruppe von Optionen, die alle angebotenen Funktionen nutzen font-variant-numericund die häufig hochwertig und teuer sind. Richard Butler fasst das gut zusammen:

Wir verfügen über Großbuchstaben, die als Zeilen- oder Titelnummern bezeichnet werden, und Kleinbuchstaben, die als alte oder Textnummern bezeichnet werden. Es ist auch so, dass die überwiegende Mehrheit der Schriftarten weder modern noch professionell ist, wenn modern OpenType- aktivierte und professionelle Mittel mit beiden Ziffernsätzen.

Das größte Problem, mit dem wir uns normalerweise befassen, wenn es um CSS-Eigenschaften geht, ist die Browserunterstützung. Diese und alle anderen damit verbundenen Eigenschaften font-variantsind jedoch auch den Schriftdesignern ausgeliefert, um die vollständige Unterstützung für die Tabelle bereitzustellen.

Das ist ein Mist, aber wir sehen immer mehr "moderne" und "professionelle" Schriftarten, selbst zum Zeitpunkt dieses Schreibens. Adobe TypeKit kündigte an, OpenType-Funktionen zu unterstützen, und es wurde gemunkelt, dass Google Fonts jetzt auch an Bord 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 das nicht, akzeptieren jedoch, dass font-feature-settingsdieselben Funktionen mit unterschiedlichen Werten freigeschaltet werden. Wir können die beiden Eigenschaften für eine tiefere Unterstützung koppeln:

.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )

Oder wir können dies so anpassen, @supportsdass die Browserunterstützung mithilfe der neuen Eigenschaft nur für die Unterstützung von Browsern bereitgestellt wird:

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

Werte

Die font-variant-numericEigenschaft akzeptiert die folgenden Werte. Der entsprechende font-feature-settingsWert wird als Referenz notiert.

Allgemeine Werte

Wert	Beschreibung	Funktionseinstellung
normal	Keine der unten aufgeführten Funktionen ist aktiviert.	N / A
ordinal	Wendet Buchstaben an, um die numerische Reihenfolge darzustellen, normalerweise in Form eines hochgestellten Zeichens.	ordn
slashed-zero	Zeigt eine alternative Form von Null mit einer diagonalen Linie an, die durch sie verläuft.	zero

Numerische Zahlenwerte

Wert	Beschreibung	Funktionseinstellung
lining-nums	Liniennummern mit vertikal nach oben, sodass sie auf derselben Höhe haften, werden auf derselben Ebene ausgerichtet.	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	Funktionseinstellung
diagonal-fractions	Zeigt Brüche in einem kleineren Format an, wobei 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, wobei Zähler und Nenner übereinander gestapelt und durch eine horizontale Linie geteilt werden.	afrc

Numerische Abstandswerte

Wert	Beschreibung	Funktionseinstellung
proportional-nums	Ermöglicht es Zahlen, ihren eigenen Platz einzunehmen, der nicht unbedingt gleich breit wie andere Ziffern ist.	pnum
tabular-nums	Zeigt Zahlen mit gleicher Größe, Proportionalität und gleichem Abstand für eine saubere Formatierung in tabellarischen Datenkontexten an.	tnum

Die Spezifikation enthält einen speziellen Hinweis zur Verwendung von, ordinalda sie dem hochgestellten supElement ähnelt , jedoch anders gekennzeichnet ist.

Für hochgestellte Zeichen:

sup ( font-variant-position: super; )

Two squared is 22

Für Ordnungsmarkierungen:

.ordinal ( font-variant-numeric: ordinal; )

1st

Browser-Unterstützung

Die font-variant-numericEigenschaft ist derzeit Teil der Spezifikation des CSS Fonts Module Level 3, die sich zum Zeitpunkt des Schreibens im Status der Kandidatenempfehlung befindet. Dies bedeutet, dass sie jederzeit geändert werden kann.

Desktop

Chrom	Kante	Feuerfuchs	IE	Oper	Safari
52	Nein	34	Nein	39	9.1

Firefox 24-34 (exklusiv) unterstützt die Eigenschaft hinter der layout.css.font-features.enabledVoreinstellung, wenn sie festgelegt ist true.

Handy, Mobiltelefon

Android Browser	Chrome Android	Kante	Feuerfuchs	IE	Opera Android	iOS Safari
52	52	Nein	34	Nein	39	Ja