`font-variant-numeric` CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die font-variant-numeric CSS Eigenschaft steuert die Verwendung von alternativen Glyphen für Zahlen, Brüche und Ordnungsmarker.

Probieren Sie es aus

font-variant-numeric: normal;

font-variant-numeric: ordinal;

font-variant-numeric: slashed-zero;

font-variant-numeric: tabular-nums;

font-variant-numeric: oldstyle-nums;

font-variant-numeric: lining-nums;

font-variant-numeric: proportional-nums;

font-variant-numeric: diagonal-fractions;

<section id="default-example">
  <div id="example-element">
    <table>
      <tbody>
        <tr>
          <td><span class="tabular">0</span></td>
        </tr>
        <tr>
          <td><span class="tabular">3.54</span></td>
        </tr>
        <tr>
          <td><span class="tabular">1.71</span></td>
        </tr>
        <tr>
          <td><span class="tabular">1st</span></td>
        </tr>
        <tr>
          <td><span class="tabular">3/4</span></td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

@font-face {
  font-family: "Source Sans Pro";
  src:
    local("SourceSansPro-Regular"),
    url("/shared-assets/fonts/SourceSansPro-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

section {
  font-family: "Source Sans Pro", sans-serif;
  margin-top: 10px;
  font-size: 1.5em;
}

#example-element table {
  margin-left: auto;
  margin-right: auto;
}

.tabular {
  border: 1px solid;
}

Syntax

css

font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums; /* <numeric-figure-values> */
font-variant-numeric: oldstyle-nums; /* <numeric-figure-values> */
font-variant-numeric: proportional-nums; /* <numeric-spacing-values> */
font-variant-numeric: tabular-nums; /* <numeric-spacing-values> */
font-variant-numeric: diagonal-fractions; /* <numeric-fraction-values> */
font-variant-numeric: stacked-fractions; /* <numeric-fraction-values> */
font-variant-numeric: oldstyle-nums stacked-fractions;

/* Global values */
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: revert;
font-variant-numeric: revert-layer;
font-variant-numeric: unset;

Werte

Diese Eigenschaft wird entweder als normal oder als durch Leerzeichen getrennte Liste der folgenden Werte angegeben:

normal

Dieses Schlüsselwort führt zur Deaktivierung der Verwendung solcher alternativen Glyphen.

ordinal

Dieses Schlüsselwort erzwingt die Verwendung spezieller Glyphen für die Ordnungsmarker, wie 1st, 2nd, 3rd, 4th im Englischen oder ein 1a im Italienischen. Es entspricht den OpenType-Werten ordn.

slashed-zero

Dieses Schlüsselwort erzwingt die Verwendung einer 0 mit einem Schrägstrich; dies ist nützlich, wenn eine klare Unterscheidung zwischen O und 0 erforderlich ist. Es entspricht den OpenType-Werten zero.

<numeric-figure-values>

Diese Werte steuern die Ziffern, die für Zahlen verwendet werden. Zwei Werte sind möglich:

lining-nums aktiviert den Satz von Ziffern, bei denen alle Zahlen auf der Grundlinie liegen. Es entspricht den OpenType-Werten lnum.
oldstyle-nums aktiviert den Satz von Ziffern, bei denen einige Zahlen, wie 3, 4, 7, 9, Unterlängen haben. Es entspricht den OpenType-Werten onum.

<numeric-spacing-values>

Diese Werte steuern die Größe der Ziffern, die für Zahlen verwendet werden. Zwei Werte sind möglich:

proportional-nums aktiviert den Satz von Ziffern, bei denen die Zahlen nicht alle die gleiche Größe haben. Es entspricht den OpenType-Werten pnum.
tabular-nums aktiviert den Satz von Ziffern, bei denen alle Zahlen die gleiche Größe haben, was eine einfache Ausrichtung, wie in Tabellen, ermöglicht. Es entspricht den OpenType-Werten tnum.

<numeric-fraction-values>

Diese Werte steuern die Glyphen, die zur Darstellung von Brüchen verwendet werden. Zwei Werte sind möglich:

diagonal-fractions aktiviert den Satz von Ziffern, bei denen der Zähler und der Nenner verkleinert und durch einen Schrägstrich getrennt werden. Es entspricht den OpenType-Werten frac.
stacked-fractions aktiviert den Satz von Ziffern, bei denen der Zähler und der Nenner verkleinert, gestapelt und durch eine horizontale Linie getrennt werden. Es entspricht den OpenType-Werten afrc.

Formelle Definition

Anfangswert	`normal`
Anwendbar auf	all elements and text. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formelle Syntax

font-variant-numeric = 
  normal                                              |
  [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]  

<numeric-figure-values> = 
  lining-nums    |
  oldstyle-nums  

<numeric-spacing-values> = 
  proportional-nums  |
  tabular-nums       

<numeric-fraction-values> = 
  diagonal-fractions  |
  stacked-fractions

Beispiele

Setzen von ordinalen Zahlenformen

Klicken Sie unten in den Code-Blöcken auf "Play", um das Beispiel im MDN Playground zu bearbeiten:

html

<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>

css

@font-face {
  font-family: "Source Sans Pro";
  src: url("https://mdn.github.io/shared-assets/fonts/SourceSansPro-Regular.otf")
    format("opentype");
  font-weight: normal;
  font-style: normal;
}

.ordinal {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 2rem;
  font-variant-numeric: ordinal;
}

Spezifikationen

Spezifikation
CSS Fonts Module Level 4 # font-variant-numeric-prop

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

font-variant-numeric CSS property

Help improve MDN

`font-variant-numeric` CSS property