Propiedad CSS font-variant-numeric

La propiedad font-variant-numeric admite el formato de fuente OpenType y permite controlar el uso de glifos alternativos para números, fracciones y marcadores ordinales.

Los números pueden tener variantes como ordinales (p. ej., 1.º), fracciones (p. ej., 1/2). A diferencia de las letras, no cambian el significado del contenido, pero estas variaciones añaden contexto adicional y pueden afectar a la legibilidad.

La principal limitación es que solo un número limitado de fuentes admite completamente font-variant-numeric y font-variant. Aunque existen muchas fuentes compatibles con OpenType, no hay muchas opciones que utilicen todas las funciones de font-variant-numeric.

Valor inicial	normal
Se aplica a	Todos los elementos. También se aplica a ::first-letter y ::first-line.
Heredable	Sí.
Animable	Discreto.
Versión	CSS3
Sintaxis DOM	object.style.fontVariantNumeric = "slashed-zero";

Sintaxis

Sintaxis de la propiedad CSS font-variant-numeric

css

font-variant-numeric: normal | &lt;numeric-figure-values&gt; | &lt;numeric-spacing-values&gt; | &lt;numeric-fraction-values&gt; | ordinal | slashed-zero;

Ejemplo de la propiedad font-variant-numeric:

Ejemplo de la propiedad CSS font-variant-numeric con los valores oldstyle-nums y diagonal-fractions

html

<!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>

Try it Yourself »

Resultado

Propiedad CSS font-variant-numeric

Valores

Valor	Descripción
normal	Los glifos alternativos no están habilitados.
`<numeric-figure-values>`	Controla el estilo de las cifras. Palabras clave: `lining-nums`, `oldstyle-nums`.
`<numeric-spacing-values>`	Controla el ancho del espaciado. Palabras clave: `proportional-nums`, `tabular-nums`.
`<numeric-fraction-values>`	Controla el estilo de las fracciones. Palabras clave: `diagonal-fractions`, `stacked-fractions`.
ordinal	Reemplaza los dígitos por glifos ordinales en superíndice (p. ej., ¹ˢᵗ, ²ⁿᵈ) en lugar de añadir texto como "st" o "nd". Se asigna a `ordn` de OpenType.
slashed-zero	Fuerza un cero con una barra diagonal. Se asigna a `zero` de OpenType.
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento principal.

Práctica

¿Qué hace la propiedad CSS font-variant-numeric?

Se utiliza para cambiar el color de la fuentePermite que los caracteres de diferentes escrituras se mezclen mejorPermite controlar el uso de glifos alternativos para números, fracciones y marcadores ordinalesSe utiliza para establecer el tamaño de la fuenteFomenta el uso de estilos específicos en una tipografía

Propiedad CSS font-variant-numeric ​

Sintaxis ​

Ejemplo de la propiedad font-variant-numeric: ​

Resultado ​

Valores ​

Práctica ​

Propiedad CSS font-variant-numeric

Sintaxis

Ejemplo de la propiedad font-variant-numeric:

Resultado

Valores

Práctica