CSS font-variant-numeric Eigenschaft
Die CSS-Eigenschaft font-variant-numeric steuert die Verwendung alternativer Glyphen für Zahlen, Brüche und Ordinalzeichen.
Die CSS-Eigenschaft font-variant-numeric steuert die Verwendung alternativer Glyphen für Zahlen, Brüche und Ordinalzeichen. Sie ist ein praktischer Bestandteil der font-variant-Familie, der OpenType-Zahlenfunktionen zugänglich macht, ohne auf die Low-Level-Eigenschaft font-feature-settings zurückgreifen zu müssen.
Diese Seite erläutert, was jeder Wert bewirkt, wann er einzusetzen ist, worauf bei der Schriftunterstützung zu achten ist, und zeigt ein ausführbares Beispiel.
Warum diese Eigenschaft verwenden
Zahlen können in verschiedenen Stilen dargestellt werden: als Ordinalzahlen (z. B. 1st), als Brüche (z. B. ½), als Mediävalziffern oder Versalziffern sowie mit proportionalem oder tabellarischem Abstand. Im Gegensatz zu Buchstaben verändern diese Varianten nicht die Bedeutung des Textes, aber sie liefern Kontext und beeinflussen die Lesbarkeit:
- Tabellarische Ziffern geben jeder Ziffer dieselbe Breite, damit Zahlen in Tabellen und Preisspalten bündig untereinander stehen.
- Mediävalziffern haben Ober- und Unterlängen, die sich in Fließtext einfügen, anstatt wie eine Überschrift hervorzustechen.
- Durchgestrichene Null unterscheidet
0vom BuchstabenOin Code, IDs und Seriennummern. - Diagonale Brüche wandeln
1/2in eine einzelne gesetzte ½-Glyphe um.
Die wichtigste Einschränkung ist die Schriftunterstützung: Das Feature funktioniert nur, wenn die Schriftart tatsächlich die entsprechende OpenType-Tabelle enthält. Die meisten Systemschriften unterstützen einige Funktionen (Versalziffern, tabellarische Ziffern), aber diagonal-fractions, stacked-fractions und slashed-zero sind in weit weniger Schriften vorhanden. Wenn eine Schrift ein Feature nicht unterstützt, wird der Wert stillschweigend ignoriert und die Standard-Glyphen werden angezeigt.
| Anfangswert | normal |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbt | Ja. |
| Animierbar | Diskret. |
| Version | CSS3 |
| DOM Syntax | object.style.fontVariantNumeric = "slashed-zero"; |
Syntax
font-variant-numeric: normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ];Die Werte für Ziffernstil, Abstand, Brüche, Ordinalzahlen und durchgestrichene Null können in einer einzigen Deklaration kombiniert werden, da sie unabhängige Aspekte der Glyphen steuern:
/* Tabular lining digits with a slashed zero */
font-variant-numeric: tabular-nums lining-nums slashed-zero;Beispiel
Beispiel der CSS font-variant-numeric Eigenschaft mit den Werten oldstyle-nums und diagonal-fractions
<!DOCTYPE html>
<html>
<head>
<title>The title of the document </title>
<style>
.p1 {
font-variant-numeric: oldstyle-nums;
}
.p2 {
font-variant-numeric: diagonal-fractions;
}
</style>
</head>
<body>
<h2>Font-variant-numeric property example</h2>
<p class="p1">001528931</p>
<p class="p2">1/2</p>
</body>
</html>Ergebnis
Vergleich mehrerer Features
Dieses Beispiel setzt jedes Zahlenmerkmal auf einem eigenen Absatz, sodass Sie sie nebeneinander vergleichen können (in einer Schriftart, die sie unterstützt, wie viele Google Fonts-Schriften).
<!DOCTYPE html>
<html>
<head>
<title>font-variant-numeric features</title>
<style>
.lining { font-variant-numeric: lining-nums; }
.oldstyle { font-variant-numeric: oldstyle-nums; }
.tabular { font-variant-numeric: tabular-nums; }
.diagonal { font-variant-numeric: diagonal-fractions; }
.slashed { font-variant-numeric: slashed-zero; }
</style>
</head>
<body>
<p class="lining">lining-nums: 0123456789</p>
<p class="oldstyle">oldstyle-nums: 0123456789</p>
<p class="tabular">tabular-nums: 1111 vs 8888</p>
<p class="diagonal">diagonal-fractions: 1/2 3/4</p>
<p class="slashed">slashed-zero: 1000 2030</p>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| normal | Alternative Glyphen sind nicht aktiviert. |
<numeric-figure-values> | Steuert den Ziffernstil. Schlüsselwörter: lining-nums, oldstyle-nums. |
<numeric-spacing-values> | Steuert die Abststandsbreite. Schlüsselwörter: proportional-nums, tabular-nums. |
<numeric-fraction-values> | Steuert den Bruchstil. Schlüsselwörter: diagonal-fractions, stacked-fractions. |
| ordinal | Ersetzt Ziffern durch hochgestellte Ordinalglyphen (z. B. ¹ˢᵗ, ²ⁿᵈ) anstatt Text wie "st" oder "nd" hinzuzufügen. Entspricht dem OpenType-Feature ordn. |
| slashed-zero | Erzwingt eine Null mit Schrägstrich. Entspricht dem OpenType-Feature zero. |
| initial | Setzt die Eigenschaft auf ihren Standardwert. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
font-variant-numeric ist eine von mehreren Langformen der Kurzschreibweise font-variant. Die anderen zielen auf unterschiedliche Glyphenkategorien ab:
- font-variant-caps — Kapitälchen, kleine Kapitälchen und Titelschrift-Glyphen.
- font-variant-ligatures — gewöhnliche, diskretionäre und kontextuelle Ligaturen.
Die Eigenschaft wird ab CSS3 unterstützt.