Толщина шрифта — Tailwind CSS
Основное использование
Установка толщины шрифта
Управляйте толщиной шрифта элемента с помощью утилит font-{weight} .
шрифт-свет
Быстрая коричневая лиса прыгает через ленивую собаку.
нормальный шрифт
Быстрая коричневая лиса прыгает через ленивую собаку.
шрифт-средний
Быстрая коричневая лиса прыгает через ленивую собаку.
полужирный шрифт
Быстрая коричневая лиса прыгает через ленивую собаку.
полужирный шрифт
Быстрая коричневая лиса прыгает через ленивую собаку.
Быстрая коричневая лиса...
Быстрая коричневая лиса.
..
Быстрая коричневая лиса...
Быстрая коричневая лиса...
Быстрая коричневая лиса...
..Применяется условно
Наведение, фокусировка и другие состояния
Попутный ветер позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:font-bold , чтобы при наведении применялась только утилита font-bold .
Полный список всех доступных модификаторов состояния см. в документации Hover, Focus и других состояний.
Точки останова и медиа-запросы
Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как чувствительные точки останова, темный режим, предпочтения с уменьшенным движением и т. д. Например, используйте md:font-bold для применения утилиты font-bold только на экранах среднего размера и выше.
Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.
Использование пользовательских значений
Настройка темы
По умолчанию Tailwind предоставляет девять утилит с начертанием шрифта . Вы можете изменить, добавить или удалить их, отредактировав файл theme.fontWeight 9.0008 в конфигурации Tailwind.
tailwind.config.js
module.exports = {
тема: {
Вес шрифта: {
тонкий: «100»,
линия роста волос: «100»,
сверхлегкий: «200»,
свет: «300»,
нормальный: «400»,
средний: «500»,
полужирный: «600»,
полужирный: «700»,
экстражирный: «800»,
«очень жирный»: «800»,
черный: «900»,
}
}
}
Дополнительные сведения о настройке темы по умолчанию см. в документации по настройке темы.
Произвольные значения
Если вам нужно использовать одноразовое значение 
Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.
Как сделать текст жирным в CSS
html9 месяцев назад
Аднан Шаббир
Всякий раз, когда какой-либо текст требует выделения или внимания, он выделяется жирным шрифтом, чтобы привлечь внимание. В HTML мы используем 9Тег 0093 или тег , чтобы сделать текст жирным. CSS также поддерживает выделение текста жирным шрифтом. Однако вы не можете контролировать интенсивность смелости. здесь CSS играет свою роль. В CSS жирность текста можно увеличить или уменьшить с помощью свойства font-weight.
В этом посте рассказывается, как сделать тесты жирными в CSS со следующими результатами обучения:
- Как работает свойство font-weight в CSS
- Как сделать текст полужирным в CSS
В CSS свойство font-weight устанавливает интенсивность жирности шрифта, что означает, что это свойство динамически увеличивает или уменьшает жирность.
Следующий синтаксис поясняет использование этого свойства
Синтаксис
Шрифт: значение;
В приведенном выше синтаксисе свойство font-weight может использоваться как встроенное, внутреннее или внешнее CSS, и мы можем установить его значения как светлый, светлый, жирный или жирный. Мы также можем указать значение свойства числом от 100 до 900.
Как выделить текст жирным шрифтом в CSSВ CSS мы используем свойство font-weight, чтобы выделить текст жирным шрифтом. Как обсуждалось ранее, свойство font-weight принимает как фиксированное имя, так и числовое значение.
Используя полужирное значение свойства font-weight
Мы можем установить значения жирнее и жирнее в соответствии с требованием. Следующий пример поможет вам понять свойство font-weight.
Пример
Выделение текста жирным шрифтом в CSS
Этот абзац написан для применения к нему свойства font-weight.
В этом примере мы использовали свойство CSS ' font-weight ' и установили его значение в ' жирный '
Вывод Этот вывод показывает, что текст абзаца становится жирным после использования font-weight , поскольку мы установили его значение в жирный шрифт . Использование числового значения свойства font-weight Пример
У нас есть свойство font-weight с числами, что означает, что мы можем изменить толщину текста, установив его значение от 100 до 900. Тогда как значения от 100 до 600 предназначены для толщина осветления и значения от 700 до 900 относятся к жирности шрифта. В приведенном ниже примере вы получите четкое представление об использовании свойства font-weight с числами.
Выделение текста жирным шрифтом в CSS
В этом примере мы использовали свойство CSS font-weight и установили его значение 750, чтобы выделить текст жирным шрифтом.