font-variant-numeric

Ejemplos

Usando glifos ordinales

Utiliza la utilidad ordinal para habilitar glifos especiales para los marcadores ordinales en fuentes que los admiten:

<p class="ordinal ...">1st</p>

Usando ceros con barra

Utiliza la utilidad slashed-zero para forzar un cero con una barra en fuentes que lo admiten:

<p class="slashed-zero ...">0</p>

Usando cifras alineadas

Utiliza la utilidad lining-nums para usar glifos numéricos que están alineados por su línea base en fuentes que los admiten:

<p class="lining-nums ...">1234567890</p>

Usando cifras de estilo antiguo

Utiliza la utilidad oldstyle-nums para usar glifos numéricos donde algunos números tienen descendentes en fuentes que los admiten:

<p class="oldstyle-nums ...">1234567890</p>

Usando cifras proporcionales

Utiliza la utilidad proportional-nums para usar glifos numéricos que tienen anchos proporcionales en fuentes que los admiten:

<p class="proportional-nums ...">12121</p>
<p class="proportional-nums ...">90909</p>

Usando cifras tabulares

Utiliza la utilidad tabular-nums para usar glifos numéricos que tienen anchos uniformes/tabulares en fuentes que los admiten:

<p class="tabular-nums ...">12121</p>
<p class="tabular-nums ...">90909</p>

Usando fracciones diagonales

Utiliza la utilidad diagonal-fractions para reemplazar números separados por una barra con fracciones diagonales comunes en fuentes que las admiten:

<p class="diagonal-fractions ...">1/2 3/4 5/6</p>

Usando fracciones apiladas

Utiliza la utilidad stacked-fractions para reemplazar números separados por una barra con fracciones apiladas comunes en fuentes que las admiten:

<p class="stacked-fractions ...">1/2 3/4 5/6</p>

Apilando múltiples utilidades

Las utilidades font-variant-numeric son componibles, por lo que puedes habilitar múltiples variantes combinándolas:

<dl class="...">
  <dt class="...">Subtotal</dt>
  <dd class="text-right slashed-zero tabular-nums ...">$100.00</dd>
  <dt class="...">Impuesto</dt>
  <dd class="text-right slashed-zero tabular-nums ...">$14.50</dd>
  <dt class="...">Total</dt>
  <dd class="text-right slashed-zero tabular-nums ...">$114.50</dd>
</dl>

Reiniciando variantes numéricas de fuente

Utiliza la propiedad normal-nums para reiniciar las variantes numéricas de fuente:

<p class="slashed-zero tabular-nums md:normal-nums ...">
  <!-- ... -->
</p>

Responsive design

Prefija una utilidad font-variant-numeric con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<p class="proportional-nums md:tabular-nums ...">
  Lorem ipsum dolor sit amet...
</p>

Aprende más sobre el uso de variantes en la documentación de variantes.