Tailwind CSS Fuente Variante Numérico

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *