Esta clase acepta muchos valores en Tailwind CSS en los que todas las propiedades están cubiertas en forma de clase. Es la alternativa a la propiedad CSS font-variant-numeric . Esta clase se utiliza para controlar el uso de glifos alternativos. Esto se hace en términos de unidades o marcadores como números o fracciones.
Clases numéricas variantes de fuente:
- números normales: el uso de números normales eliminará cada efecto de la clase 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: esta clase slashed-zero usaba un cero con una barra inclinada, lo que demuestra ser muy útil para distinguir entre 0 y O.
- lining-nums: esta clase 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: esta clase 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 clase activa aquellas normas donde no todos los números son del mismo tamaño. Su valor de tipo abierto es pnum .
- tabular-nums: este valor de tipo abierto de clase es tnum . Activa aquellos conjuntos de cifras donde un 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.
Sintaxis:
<element class="Font-Variant-Numeric">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Font Variant Numeric Class</b> <div class="bg-green-300 mx-24 h-full"> <p class="lining-nums">lining-nums: 1234567890</p> <p class="oldstyle-nums">oldstyle-nums: 1234567890</p> <p class="proportional-nums">proportional-nums: 12121</p> <p class="proportional-nums">proportional-nums: 90909</p> <p class="tabular-nums">tabular-nums: 12121</p> <p class="tabular-nums">tabular-nums: 90909</p> <p class="diagonal-fractions"> diagonal-fractions: 1/2 3/4 5/6 </p> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA