Tipografía
Utilidades para controlar la variante de los números.
| Clase | Estilos |
|---|---|
normal-nums | font-variant-numeric: normal; |
ordinal | font-variant-numeric: ordinal; |
slashed-zero | font-variant-numeric: slashed-zero; |
lining-nums | font-variant-numeric: lining-nums; |
oldstyle-nums | font-variant-numeric: oldstyle-nums; |
proportional-nums | font-variant-numeric: proportional-nums; |
tabular-nums | font-variant-numeric: tabular-nums; |
diagonal-fractions | font-variant-numeric: diagonal-fractions; |
stacked-fractions | font-variant-numeric: stacked-fractions; |
Utiliza la utilidad ordinal para habilitar glifos especiales para marcadores ordinales en fuentes que los soporten:
1st
<p class="ordinal ...">1st</p>Utiliza la utilidad slashed-zero para forzar un cero con una barra diagonal en fuentes que los soporten:
0
<p class="slashed-zero ...">0</p>Utiliza la utilidad lining-nums para usar glifos numéricos alineados por su línea de base en fuentes que los soporten:
1234567890
<p class="lining-nums ...">1234567890</p>Utiliza la utilidad oldstyle-nums para usar glifos numéricos donde algunos números tienen trazos descendentes en fuentes que los soporten:
1234567890
<p class="oldstyle-nums ...">1234567890</p>Utiliza la utilidad proportional-nums para usar glifos numéricos que tienen anchos proporcionales en fuentes que los soporten:
12121
90909
<p class="proportional-nums ...">12121</p><p class="proportional-nums ...">90909</p>Utiliza la utilidad tabular-nums para usar glifos numéricos que tienen anchos uniformes o tabulares en fuentes que los soporten:
12121
90909
<p class="tabular-nums ...">12121</p><p class="tabular-nums ...">90909</p>Utiliza la utilidad diagonal-fractions para reemplazar números separados por una barra con fracciones diagonales comunes en fuentes que los soporten:
1/2 3/4 5/6
<p class="diagonal-fractions ...">1/2 3/4 5/6</p>Utiliza la utilidad stacked-fractions para reemplazar números separados por una barra con fracciones apiladas comunes en fuentes que los soporten:
1/2 3/4 5/6
<p class="stacked-fractions ...">1/2 3/4 5/6</p>Las utilidades font-variant-numeric son combinables, 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>Utiliza la propiedad normal-nums para restablecer las variantes de números de fuente:
<p class="slashed-zero tabular-nums md:normal-nums ..."> <!-- ... --></p>Antepone a la utilidad font-variant-numeric el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<p class="proportional-nums md:tabular-nums ..."> Lorem ipsum dolor sit amet...</p>Obtén más información sobre el uso de variantes en la documentación de variantes.