Propiedad CSS font-variant-numeric
La propiedad CSS font-variant-numeric controla el uso de glifos alternativos para números, fracciones y marcadores ordinales.
La propiedad CSS font-variant-numeric controla el uso de glifos alternativos para números, fracciones y marcadores ordinales. Es una parte de la familia font-variant que expone las características numéricas de OpenType sin necesidad de recurrir a la propiedad de bajo nivel font-feature-settings.
Esta página cubre lo que hace cada valor, cuándo utilizarlo, los problemas relacionados con la compatibilidad de fuentes y un ejemplo ejecutable.
Por qué usarla
Los números pueden renderizarse de varias formas: ordinales (p. ej., 1er), fracciones (p. ej., ½), cifras alineadas o de estilo antiguo, y espaciado proporcional o tabular. A diferencia de las letras, estas variantes no cambian el significado del texto, pero añaden contexto y afectan a la legibilidad:
- Cifras tabulares: hacen que cada dígito tenga el mismo ancho para que los números se alineen en tablas y columnas de precios.
- Cifras de estilo antiguo: tienen ascendentes y descendentes que se integran en el texto corriente en lugar de destacar como un encabezado.
- Cero con barra: distingue el
0de la letraOen código, identificadores y números de serie. - Fracciones diagonales: convierten
1/2en un único glifo tipográfico ½.
La principal limitación es la compatibilidad con la fuente: la característica solo funciona si la tipografía incluye la tabla OpenType correspondiente. La mayoría de las fuentes del sistema admiten algunas características (alineadas, tabulares), pero las fracciones diagonales, las fracciones apiladas y el cero con barra están presentes en muchas menos. Cuando a una fuente le falta una característica, el valor se ignora silenciosamente y se muestran los glifos predeterminados.
| Valor inicial | normal |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredada | Sí. |
| Animatable | Discreta. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.fontVariantNumeric = "slashed-zero"; |
Sintaxis
font-variant-numeric: normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ];Los valores de figura, espaciado, fracción, ordinal y cero con barra pueden combinarse en una sola declaración porque controlan aspectos independientes de los glifos:
/* Tabular lining digits with a slashed zero */
font-variant-numeric: tabular-nums lining-nums slashed-zero;Ejemplo
Ejemplo de la propiedad CSS font-variant-numeric con los valores oldstyle-nums y 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>Resultado
Comparación de varias características
Este ejemplo aplica cada característica numérica en su propio párrafo para que puedas verlas una al lado de la otra (en una fuente que las admita, como muchas tipografías de Google Fonts).
<!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>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 con glifos ordinales en superíndice (p. ej., ¹ˢᵗ, ²ⁿᵈ) en lugar de añadir texto como "st" o "nd". Corresponde a ordn de OpenType. |
| slashed-zero | Fuerza un cero con barra. Corresponde a zero de OpenType. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Propiedades relacionadas
font-variant-numeric es una de las diversas propiedades abreviadas de font-variant. Las demás se dirigen a diferentes categorías de glifos:
- font-variant-caps — versalitas, versalitas pequeñas y glifos de título.
- font-variant-ligatures — ligaduras comunes, discrecionales y contextuales.
Es compatible a partir de CSS3.