Толщина шрифта — Tailwind CSS
Основы использования
Установка толщины шрифта
Управляйте толщиной шрифта элемента с помощью утилит font-{weight}.
font-light
Быстрая коричневая лиса прыгает через ленивую собаку.
font-normal
Быстрая коричневая лиса прыгает через ленивую собаку.
font-medium
Быстрая коричневая лиса прыгает через ленивую собаку.
font-semibold
Быстрая коричневая лиса прыгает через ленивую собаку.
font-bold
Быстрая коричневая лиса прыгает через ленивую собаку.
<p>Быстрая коричневая лиса ...</p> <p>Быстрая коричневая лиса ...</p> <p>Быстрая коричневая лиса ...</p> <p>Быстрая коричневая лиса ...</p> <p>Быстрая коричневая лиса ...</p>
..</p>
<p>Быстрая коричневая лиса ...</p>
<p>Быстрая коричневая лиса ...</p>Применяя условно
Наведение, фокус и другие состояния
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:font-bold to only apply the font-bold utility on hover.
<p> <!-- ... --> </p>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
Контрольные точки и медиа-запросы
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use font-bold utility at only medium screen sizes and above.
<p> <!-- .
.. -->
</p>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.
Использование пользовательских значений
Настройка вашей темы
По умолчанию Tailwind предоставляет девять утилит font-weight. Вы можете изменить, добавить или удалить их, отредактировав раздел theme.fontWeight вашей конфигурации Tailwind.
tailwind.config.js
module.exports = {
theme: {
fontWeight: {
thin: '100',
hairline: '100',
extralight: '200',
light: '300',
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
extrabold: '800',
'extra-bold': '800',
black: '900',
}
}
}
Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.
Произвольные значения
If you need to use a one-off font-weight value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value..ppt/slide_7.jpg)
<p> <!-- ... --> </p>
Learn more about arbitrary value support in the arbitrary values documentation.
CSS/Свойство font-weight
Синтаксис
CSS 1
CSS 2‒2.2
CSS 3
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit;
Описание
Свойство font-weight устанавливает жирность шрифта.
| Применяется: | ко всем элементам; |
|---|---|
| Наследование: | присутствует; |
| Проценты: | не используются; |
| Медиа: | визуальные. |
JavaScript
[объект]
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| CSS | Раздел | |
|---|---|---|
| 1 | 5.2.5 ‘font-weight’ | Перевод |
| 2 | 15.2.3 Font styling… ‘font-weight’… | |
| 2.1 | 15.6 Font boldness: the ‘font-weight’ property | Перевод |
| 2.2 | 15.6 Font boldness: the ‘font-weight’ property | |
| 3 | 3.2 Font weight: the font-weight property | Перевод |
Значения
- normal
- Устанавливает нормальный вариант шрифта.
font-weight: normal; - bold
- Устанавливает жирный вариант шрифта.
font-weight: bold; - 100, 200, 300, 400, 500, 600, 700, 800, 900
- Указывает степень жирности (варианты жирности). При этом степень жирности равная «
400normal», а «700» приравнивается к значению «bold».Примечание: большинство семейств шрифтов, как правило, имеют только «нормальные» и «полужирные» варианты шрифтов;
- bolder
- Увеличивает степень жирности шрифта. За основу берётся значение родительского элемента.
- lighter
- Уменьшает степень жирности шрифта. За основу берётся значение родительского элемента.
- inherit
- Указывает, что элемент должен унаследовать параметры родительского элемента.
Начальное значение: «normal».
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Свойство font-weight</title>
<style type=»text/css»>
.bold { font-weight: bold; }
.bolder { font-weight: bolder; }
.lighter { font-weight: lighter; }
</style>
</head>
<body>
<h2>Жирность шрифта</h2>
<p>Пример текста с <span>разными</span> <span>вариантами</span> <span>жирности</span>.</p>
</html>
Свойство font-weight
Решено: Отформатируйте текст, чтобы он отображался жирным шрифтом в тексте HTML
Microsoft Power Platform | Информационный бюллетень за март 2023 г.
Добро пожаловать в наш Информационный бюллетень за март 2023 г.
, в котором мы будем освещать отличную работу наших участников в сообществах Biz Apps, а также последние новости, выпуски видео и предстоящие события. Если вы новичок в сообществе, обязательно подпишитесь на новости и объявления и будьте в курсе последних новостей из нашей постоянно растущей сети участников, которые находят настоящую «силу в сообществе». ПОСЛЕДНИЕ НОВОСТИ
Соединения с силовой платформой
Ознакомьтесь с пятым эпизодом Power Platform Connections, в котором Дэвид Уорнер II и Хьюго Бернье общаются с вице-президентом #PowerAutomate Стивеном Сицилиано, а также знакомятся с замечательными работами Весы Ювонен, Вальдека Мастыкарца, Максимилиана Мюллера, Кристин Колодзиейски, Даниша Наглекара, Кэт Шнайдер. , Виктор Дантас и многие другие. Используйте хэштег #PowerPlatformConnects в социальных сетях, чтобы получить шанс представить свою работу на шоу! Вы пропустили серию? Следите за новостями в галереях Community Connections.
Power Apps, Power Automate, Power Virtual Agents, Power Pages Power Platform лидирует в новой эре разработки с минимальным кодом, созданной искусственным интеллектом.
Мощные приложения:
Суперпользователи: @WarrenBelz | @iAm_ManCat
Пользователи сообщества: @LaurensM | @Раск | @RJM07 Силовой автомат:
Суперпользователи: @abm | @Expiscornovus | @РобЭллиотт
Пользователи сообщества: @grantjenkins | @Криддл Мощные виртуальные агенты:
Суперпользователи: @Expiscornovus | @Pstork1
Пользователи сообщества: @MisterBates | @Jupyter123 | Кунал К Страницы силы:
Суперпользователи: @OliverRodriguesOliverRodrigues | @Mira_Ghaly
Пользователи сообщества: @FubarFubar | @ianwukianwuk
ПОСЛЕДНИЕ СТАТЬИ В БЛОГЕ О ПРОДУКТАХ
Блог сообщества Power Apps
Блог сообщества Power Automate
Блог сообщества Power Virtual Agents
Блог сообщества Power Pages
Ознакомьтесь с разделом «Использование сообщества» для получения дополнительных полезных советов и информации:
Power Apps, Power Automate, Power Virtual Agents, Power Pages html — Как сделать этот текст жирным?
спросил
Изменено 7 месяцев назад
Просмотрено 1к раз
Я пытаюсь понять, как сделать этот текст жирным в Shopify?
Бесплатная доставка и возврат
Я также хочу адаптировать ту же типографику, но не знаю, как это сделать.