font-weight

Ejemplos

Ejemplo básico

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

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

Usar un valor personalizado

Usa la sintaxis font-[<value>] para establecer el/la grosor de fuente basándose 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-(weight:<custom-property>) :

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

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

Diseño responsivo

Antepone a la utilidad font-weight el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

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

Obtén más información sobre el uso de variantes en la documentación de variantes.

Personalizar tu tema

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

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

Ahora se puede usar la utilidad font-extrablack en tu marcado:

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

Obtén más información sobre cómo personalizar tu tema en la documentación del tema.