font-weight

Ejemplos

Ejemplo básico

Utiliza utilidades como font-thin y font-bold para establecer el grosor de la fuente de un elemento:

<p class="font-light ...">El rápido zorro marrón ...</p>
<p class="font-normal ...">El rápido zorro marrón ...</p>
<p class="font-medium ...">El rápido zorro marrón ...</p>
<p class="font-semibold ...">El rápido zorro marrón ...</p>
<p class="font-bold ...">El rápido zorro marrón ...</p>

Usando un valor personalizado

Usa la sintaxis font-[<value>] para establecer el font weight basado en un valor completamente personalizado:

<p class="font-[1000] ...">
  Lorem ipsum dolor sit amet...
</p>

Para variables CSS, también puedes usar la sintaxis font-(<custom-property>) :

<p class="font-(--my-font-weight) ...">
  Lorem ipsum dolor sit amet...
</p>

Esto es solo un atajo para font-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad font-weight con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<p class="font-normal md:font-bold ...">
  Lorem ipsum dolor sit amet...
</p>

Aprende más sobre el uso de variantes en la documentación de variantes.

Personalizando tu tema

Usa las variables de tema --font-weight-* para personalizar las utilidades font weight en tu proyecto:

@theme {
  --font-weight-extrablack: 1000; 
}

Ahora la utilidad font-extrablack puede ser usada en tu marcado:

<div class="font-extrablack">
  <!-- ... -->
</div>

Aprende más sobre la personalización de tu tema en la documentación del tema.