Размер текста в CSS, жирный текст CSS
Главная > Учебник CSS >
В прошлой теме мы рассмотрели установку шрифтов для текста. В этой теме мы рассмотрим, как изменить размер текста в CSS, сделать текст жирным и установить другие свойства текстовых элементов.
Стиль, вариант, ширина и размер текста
Для установки размера текста используется свойство font-size. Размер указывается в любых доступных в CSS единицах. Также этому свойству можно установить значения с помощью специальных слов. Таких значений достаточно много, вы можете найти их в справочниках. Использовать их неудобно, обычных единиц измерения CSS вполне достаточно. Для примера создадим абзац и установим для него размер текста:
Стиль:
+
7 | #fo
{
font-size: 30px;
} |
HTML код:
14 | <p>Текст</p> |
Стиль шрифта позваляет выделить текст курсивом.
Для установки стиля шрифта используется свойство
font-style. Оно может принимать следующие значения:
font-style: normal — обычный шрифт (по умолчанию)
font-style: italic — курсивный шрифт
font-style: oblique — наклонный шрифт
font-style: inherit — значение принимается от родительского элемента
У одних шрифтов стиль italic и oblique выглядит одинаково, у других шрифтов по-разному.
Установим созданному абзацу стиль шрифта. Для этого добавим селектору #fo свойство font-style:
10 | font-style: italic; |
Есть вариант отображения текста, при котором прописные буквы выглядят как заглавные, только уменьшенного размера. Для этого используется свойство font-variant. Оно принимает следующие значения:
font-variant: normal — нормальный шрифт (по умолчанию)
font-variant: small-caps — прописные буквы выглядят как заглавные
font-variant: inherit — значение принимается от родительского элемента
Добавим селектору #fo свойство font-variant:
11 | font-variant: small-caps; |
Если увеличить ширину шрифта, то можно сделать жирный текст.
В CSS Это делается с помощью свойства
font-weight. Оно принимает такие значения:
font-weight: normal — обычный текст
font-weight: bold — жирный текст
font-weight: inherit — принимает значение от родительского элемента
Кроме того, ширину шрифта можно указать с помощью чисел от 100 до 900. Число 400 соответствует значению normal, а число 700 значению bold. Но числа работают не со всеми шрифтами и не во всех браузерах. Поэтому они редко используются.
Добавим селектору #fo свойство font-weight:
12 | font-weight: bold; |
Существует совойство font, в котором можно указать все перечисленные свойства, а также шрифт. Значения свойств перечисляются через пробел в таком порядке:
- стиль
- вариант
- ширина
- размер
- шрифт
Добавим на страницу тэг <span> и установим для него свойство font:
Стиль:
14 | #s1
{
font: italic small-caps bold 30px Arial;
} |
HTML код:
22 | <span>Текст</span> |
Если какое-то из свойств не указано, то используется значение по умолчанию.
Но размер и
шрифт нужно указывать обязательно. При указании шрифта, так же, как и для свойства
font-family, можно перечислить несколько шрифтов через запятую. Добавим на страницу
ещё один тег <span> и установим ему свойство font,
но по-другому:
Стиль:
18 | #s2
{
font: 20px Tahoma, Verdana, sans-serif;
} |
HTML код:
27 | <span>Текст</span> |
Цвет текста
Цвет текста устанавливается с помощью свойства color. Значением этого свойства является цвет, указанный одним из способов, предусмотренных в CSS.
Установим цвет тэгу <span>, который мы создавали ранее. Добавим селектору #s2 свойство color:
21 | color: Red; |
Высота строки
Межстрочный интервал — это расстояние между строками текста. Для его установки используется свойство
line-height.
Оно устанавлявает высоту строки. Высота строки состоит из размера
шрифта и межстрочного интервала. Если высота строки равна 50 пикселей, а размер шрифта 30 пикселей,
то межстрочный интервал получится 20 пикселей. Если высоту строки установить меньше размера шрифта, то
строки будут пересекаться. Свойство line-height может принимать такие значения:
line-height: normal — обычный интервал (по умолчанию)
line-height: число, на которое будет умножен размер шрифта
line-height: высота в единицах измерения, доступных в CSS
line-height: проценты от размера шрифта
line-height: inherit значение принимается от родительского элемента
Для примера создадим большой абзац текста, состоящий из нескольких строк. Установим ему размер шрифта и высоту строки:
Стиль:
7 | #text
{
font-size: 20px;
line-height: 30px;
} |
HTML код:
34 | <p>Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк </p> |
Попробуйте разные варианты высоты строки.
Посмотрите как будет выглядеть текст.
Отступ первой строки
В абзацах часто делается отступ первой строки. В русском языке он называется Красная строка. Для установки этого отступа есть свойство text-indent. Значение указывают в единицах измерения CSS.
Установим отступ большому абзацу. Селектору #text добавим свойство text-indent:
11 | text-indent: 50px; |
Выравнивание текста
Выравнивание текста устанавливается с помощью свойства text-align. Оно принимает следующие значения:
text-align: left — по левому краю (по умолчанию)
text-align: right — по правому краю
text-align: center — по центру
text-align: justify — по ширине. Используется для текстов длинной более одной строки.
Учитывайте, что выравнивается не сам элемент. Он остаётся на прежнем месте. Выравнивается текст внутри элемента.
Добавим на страницу абзац и выравнем текст в нём по центру.
40 | <p>Выравнивание по центру</p> |
Декорирование текста
Декорирование — это оформление текста определённым образом.
Оно устанавливается с помощью свойства
text-decoration. Оно принимает такие значения:
text-decoration: none — без декорирования
text-decoration: underline — подчёркнутый текст
text-decoration: overline — надчёркнутый текст
text-decoration: line-through — зачёркнутый текст
text-decoration: inherit — значение принимается от родительского элемента
Для примера создадим абзац с подчёркнутым текстом:
41 | <p>Подчёркнутый текст</p> |
Толщина шрифта — Tailwind CSS
Основы использования
Установка толщины шрифта
Управляйте толщиной шрифта элемента с помощью утилит font-{weight}.
font-light
Быстрая коричневая лиса прыгает через ленивую собаку.
font-normal
Быстрая коричневая лиса прыгает через ленивую собаку.
font-medium
Быстрая коричневая лиса прыгает через ленивую собаку.
font-semibold
Быстрая коричневая лиса прыгает через ленивую собаку.
font-bold
Быстрая коричневая лиса прыгает через ленивую собаку.
<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 md:font-bold to apply the 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.
<p> <!-- ... --> </p>
Learn more about arbitrary value support in the arbitrary values documentation.
Как выделить текст жирным шрифтом в CSS
CSS или Каскадные таблицы стилей — это язык, который определяет, как элементы HTML или XML отображаются на веб-сайте.
Вместо того, чтобы редактировать содержимое веб-сайта для достижения желаемого шрифта или цвета, вы можете просто использовать CSS , чтобы легко обновлять эти элементы на вашем сайте.
Это будет очень полезно, если вы решите провести ребрендинг!
Вот краткое руководство по выделению текста жирным шрифтом в CSS и другие полезные советы.
Важное руководство по раскрытию информации: мы гордимся тем, что это руководство упоминается в партнерских программах.
Если вы нажмете на партнерскую ссылку и впоследствии совершите покупку, мы получим небольшую комиссию без каких-либо дополнительных затрат для вас (вы ничего не платите дополнительно). Для получения дополнительной информации ознакомьтесь с раскрытием информации об аффилированных лицах.
Как выделить жирный текст в CSS 🅱️
Жирный текст в CSS можно получить, установив свойство веса шрифта .
Это свойство определяет толщину текста и может быть полужирным, жирным, светлым, нормальным и т. д.
Чтобы установить свойство font-weight в CSS, вам потребуется использовать код. Код, который вы в конечном итоге выберете, будет зависеть от того, какой элемент вы хотите выделить жирным шрифтом.
Если вы хотите выделить один HTML-элемент жирным шрифтом, лучше подойдет встроенный стиль . Вот как будет выглядеть код:
Это жирный текст.
👉 Если вы хотите, чтобы свойство жирности применялось к множественным элементам , вам нужно будет использовать класс в таблице стилей: