Peso de fuente CSS Tailwind – Barcelona Geeks

Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Es la alternativa a la propiedad CSS font-weight . Esta clase se usa para establecer el peso o el grosor de la fuente que se usa con el texto HTML. El peso de fuente aplicado dependerá de la familia de fuentes utilizada en el navegador. Por ejemplo, algunas familias de fuentes solo están disponibles en pesos específicos.

Clases de peso de fuente:

font-thin: esta clase establece el peso de la fuente en 100.
font-extralight: esta clase establece el peso de la fuente en 200.
font-light: esta clase establece el peso de la fuente en 300.
font-normal: esta clase establece el peso de la fuente en 400.
font-medium: esta clase establece el peso de la fuente en 500.
font-semibold: esta clase establece el peso de la fuente en 600.
font-bold: esta clase establece el peso de la fuente en 700.
font-extrabold: esta clase establece el peso de la fuente en 800.
font-black: esta clase establece el peso de la fuente en 900.

Nota: Cambie el peso en el componente con el peso requerido mencionado anteriormente.

Sintaxis:

<element class="font-{weight}">...</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 Weight Class</b>
      
    <div class="mx-24 bg-green-200">
        <p class="p-2 text-justify">
            font-thin:
            <span class="font-thin pl-10">
                A Computer Science portal for Geeks
            </span>
        </p>
  
        <p class="p-2 text-justify">font-normal:
            <span class="font-normal pl-4">
                A Computer Science portal for Geeks
            </span>
        </p>
  
        <p class="p-2 text-justify">font-medium:
            <span class="font-medium pl-2">
                A Computer Science portal for Geeks
            </span>
        </p>
  
        <p class="p-2 text-justify">font-bold:
            <span class="font-bold pl-8">
                A Computer Science portal for Geeks
            </span>
        </p>
  
        <p class="p-2 text-justify">font-black:
            <span class="font-black pl-6">
                A Computer Science portal for Geeks
            </span>
        </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

HTML

Deja una respuesta Cancelar la respuesta