font-weight

Примеры

Базовый пример

Используйте утилиты типа font-thin и font-bold для установки жирности шрифта элемента:

<p class="font-light ...">Быстрая коричневая лиса перепрыгивает через ленивую собаку ...</p><p class="font-normal ...">Быстрая коричневая лиса перепрыгивает через ленивую собаку ...</p><p class="font-medium ...">Быстрая коричневая лиса перепрыгивает через ленивую собаку ...</p><p class="font-semibold ...">Быстрая коричневая лиса перепрыгивает через ленивую собаку ...</p><p class="font-bold ...">Быстрая коричневая лиса перепрыгивает через ленивую собаку ...</p>

Использование пользовательского значения

Используйте синтаксис font-[<value>] , чтобы задать font weight на основе полностью пользовательского значения:

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

Для переменных CSS вы также можете использовать синтаксис: font-(<custom-property>)

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

Это просто сокращение, font-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a font-weight утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

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

Подробнее об использовании вариантов читайте в документации по вариантам.

Кастомизация вашей темы

Используйте переменные темы --font-weight-* для настройки утилит font weight в вашем проекте:

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

Теперь утилиту font-extrablack можно использовать в вашей разметке:

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

Подробнее о настройке темы читайте в документации темы.