La propiedad font-variant-numeric de CSS se utiliza para controlar el uso de glifos alternativos. Esto se hace en términos de unidades o marcadores como números o fracciones.
Sintaxis:
font-variant-numeric: value
Valores de propiedad:
- normal: el uso de normal eliminará cada efecto de la propiedad font-variant-numeric.
- ordinal: este valor indica directamente los valores de tipo abierto, es decir, ordn. El término hace uso de glifos especiales para marcadores ordinales.
- slashed-zero: Slashed-zero usaba un cero con una barra inclinada. Los valores de esta propiedad demuestran ser muy útiles al distinguir entre 0 y O.
- lining-nums: la propiedad Lining nums corresponde a los valores de tipo abierto, es decir, lnum. Esta palabra clave activa los números que se encuentran en la línea de base.
- oldstyle-nums: la propiedad Oldstyle-nums corresponde a los valores de tipo abierto, es decir, onum. Esta palabra clave activa el conjunto de Cifras donde algunos números tienen descendencia.
- proporcional-nums: Esta propiedad activa aquellas normas donde no todos los números son del mismo tamaño. Su valor de tipo abierto es pnum.
- tabular-nums: el valor de tipo abierto de Tabular-nums es tnum. Activa aquellos conjuntos de cifras donde el conjunto de números es del mismo tamaño.
- diagonal-fractions: Su valor de tipo abierto es frac. Esto activa aquellos conjuntos de cifras donde el numerador y el denominador se hacen más pequeños y están separados por una barra oblicua.
- fracciones apiladas: Su valor de tipo abierto es arac. Esto activa aquellos conjuntos de cifras donde el numerador y el denominador se hacen más pequeños, se apilan y están separados por una línea horizontal.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<link
href=
"https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,
wght@0, 200;0, 400;1, 400&display=swap"
rel="stylesheet"
/>
<title>Document</title>
</head>
<style>
* {
font-family: "Source Sans Pro";
}
.value1 {
font-variant-numeric: normal;
}
.value2 {
font-variant-numeric: ordinal;
}
.value3 {
font-variant-numeric: slashed-zero;
}
.value4 {
font-variant-numeric: lining-nums;
}
.value5 {
font-variant-numeric: oldstyle-nums;
}
.value6 {
font-variant-numeric: tabular-nums;
}
.value7 {
font-variant-numeric: diagonal-fractions;
}
.value7 {
font-variant-numeric: stacked-fractions;
}
</style>
<body>
<p>
<span>Ordinal: </span>
<span class="value1">1st, 2nd, 3rd, 6th</span>
</p>
<p>
<span>Normal: </span>
<span class="value2">1st, 2nd, 3rd, 6th</span>
</p>
<p>
<span>Slashes-zero: </span>
<span class="value3">1st, 2nd, 3rd, 6th</span>
</p>
<p class="value4">
<span>lining-nums: </span>
1st, 2nd, 3rd, 6th
</p>
<p class="value5">
<span>Oldstyle-nums: </span>
1st, 2nd, 3rd, 6th
</p>
<p class="value6">
<span>Tabular-nums: </span>
1st, 2nd, 3rd, 6th
</p>
<p class="value7">
<span>diagonal-fraction: </span>
1st, 2nd, 3rd, 6th
</p>
<p class="value7">
<span>stacked-fraction: </span>
1st, 2nd, 3rd, 6th
</p>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome
- Borde
- Mozilla Firefox
- Ópera
- Safari