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