Как изменить толщину текста css

В прошлой теме мы рассмотрели установку шрифтов для текста. В этой теме мы рассмотрим, как изменить
размер текста в CSS, сделать текст жирным и установить другие свойства текстовых элементов.

Стиль, вариант, ширина и размер текста

Для установки размера текста используется свойство font-size. Размер указывается
в любых доступных в CSS единицах.
Также этому свойству можно установить значения с помощью специальных слов. Таких значений достаточно
много, вы можете найти их в справочниках. Использовать их неудобно,
обычных единиц измерения CSS вполне достаточно. Для примера создадим абзац и установим для него размер
текста:

Стиль:

+

#fo
  {
  font-size: 30px;
  }

HTML код:

Стиль шрифта позваляет выделить текст курсивом. Для установки стиля шрифта используется свойство
font-style. Оно может принимать следующие значения:

font-style: normal — обычный шрифт (по умолчанию)

font-style: italic — курсивный шрифт

font-style: oblique — наклонный шрифт

font-style: inherit — значение принимается от родительского элемента

У одних шрифтов стиль italic и oblique выглядит
одинаково, у других шрифтов по-разному.

Установим созданному абзацу стиль шрифта. Для этого добавим селектору #fo свойство
font-style:

Есть вариант отображения текста, при котором прописные буквы выглядят как заглавные, только уменьшенного
размера. Для этого используется свойство font-variant. Оно принимает следующие
значения:

font-variant: normal — нормальный шрифт (по умолчанию)

font-variant: small-caps — прописные буквы выглядят как заглавные

font-variant: inherit — значение принимается от родительского элемента

Добавим селектору #fo свойство font-variant:

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:

Существует совойство font, в котором можно указать
все перечисленные свойства,
а также шрифт. Значения свойств перечисляются через пробел в таком порядке:

• стиль
• вариант
• ширина
• размер
• шрифт

Добавим на страницу тэг <span> и установим для
него свойство font:

Стиль:

#s1
  {
  font: italic small-caps bold 30px Arial;
  }

HTML код:

<span id="s1">Текст</span>

Если какое-то из свойств не указано, то используется значение по умолчанию. Но размер и
шрифт нужно указывать обязательно. При указании шрифта, так же, как и для свойства
font-family, можно перечислить несколько шрифтов через запятую. Добавим на страницу
ещё один тег <span> и установим ему свойство font,
но по-другому:

Стиль:

#s2
  {
  font: 20px Tahoma, Verdana, sans-serif;
  }

HTML код:

<span id="s2">Текст</span>

Цвет текста

Цвет текста устанавливается с помощью свойства color. Значением этого свойства
является цвет, указанный одним из способов,
предусмотренных в CSS.

Установим цвет тэгу
<span>, который мы создавали ранее. Добавим селектору #s2 свойство
color:

Высота строки

Межстрочный интервал — это расстояние между строками текста. Для его установки используется свойство
line-height. Оно устанавлявает высоту строки. Высота строки состоит из размера
шрифта и межстрочного интервала. Если высота строки равна 50 пикселей, а размер шрифта 30 пикселей,
то межстрочный интервал получится 20 пикселей. Если высоту строки установить меньше размера шрифта, то
строки будут пересекаться. Свойство line-height может принимать такие значения:

line-height: normal — обычный интервал (по умолчанию)

line-height: число, на которое будет умножен размер шрифта

line-height: высота в единицах измерения,
доступных в CSS

line-height: проценты от размера шрифта

line-height: inherit значение принимается от родительского элемента

Для примера создадим большой абзац текста, состоящий из нескольких строк. Установим ему размер шрифта
и высоту строки:

Стиль:

#text
  {
  font-size: 20px;
  line-height: 30px;
  }

HTML код:

<p id="text">Текст из нескольких строк Текст из нескольких строк
Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк
Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк
Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк
Текст из нескольких строк
</p>

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

Отступ первой строки

В абзацах часто делается отступ первой строки. В русском языке он называется Красная строка. Для
установки этого отступа есть свойство text-indent.
Значение указывают
в единицах измерения CSS.

Установим отступ большому абзацу. Селектору #text добавим свойство
text-indent:

Выравнивание текста

Выравнивание текста устанавливается с помощью свойства text-align. Оно принимает
следующие значения:

text-align: left — по левому краю (по умолчанию)

text-align: right — по правому краю

text-align: center — по центру

text-align: justify — по ширине. Используется для текстов длинной более
одной строки.

Учитывайте, что выравнивается не сам
элемент. Он остаётся на прежнем месте. Выравнивается текст внутри элемента.

Добавим на страницу абзац и выравнем текст в нём по центру.

<p style="text-align: center">Выравнивание по центру</p>

Декорирование текста

Декорирование — это оформление текста определённым образом. Оно устанавливается с помощью свойства
text-decoration. Оно принимает такие значения:

text-decoration: none — без декорирования

text-decoration: underline — подчёркнутый текст

text-decoration: overline — надчёркнутый текст

text-decoration: line-through — зачёркнутый текст

text-decoration: inherit — значение принимается от родительского элемента

Для примера создадим абзац с подчёркнутым текстом:

<p style="text-decoration: underline">Подчёркнутый текст</p>

Сделать текст насыщенным можно как в разметке, так и в стилях. Рассмотрим, как изменить насыщенность текста с помощью CSS, и узнаем, в чём плюсы этого метода.

Как выделить текст в CSS

Определите, какой участок текста необходимо выделить и используйте CSS-свойство font-weight, которое отвечает за толщину шрифта.

Часто встречающиеся значения:

• 400 или normal — обычный шрифт, значение по умолчанию;
• 700 или bold — полужирный шрифт.

Например:

<p class="boldtext">Красота текста — это не только хороший дизайн 
и качественный контент, но и правильная вёрстка текста, 
и единообразие. Под единообразием мы имеем в виду, что редакция выработала общее представление о строчной вёрстке текста 
и придерживается его.</p>

.boldtext {
  font-weight: 700;
}

👉 Красота текста — это не только хороший дизайн и качественный контент, но и правильная вёрстка текста, и единообразие.
Под единообразием мы имеем в виду, что редакция выработала общее представление о строчной вёрстке текста и придерживается его.

Весь текст, размеченный классом boldtext, станет жирным.

Свойство font-weight может принимать одно из девяти числовых вариантов насыщенности:

• 100: Thin;
• 200: Extra Light (Ultra Light);
• 300: Light;
• 400: Normal;
• 500: Medium;
• 600: Semi Bold (Demi Bold);
• 700: Bold;
• 800: Extra Bold (Ultra Bold);
• 900: Black (Heavy).

Все эти числовые значения задают степень толщины шрифта от самого тонкого до самого толстого.

Но в большинстве системных шрифтов есть только два варианта толщины: обычный normal (400) и полужирный bold (700). Поэтому остальные значения свойства используются реже.

Кроме числовых значений, у font-weight есть ещё два относительных значения: bolder и lighter. Они делают шрифт жирнее и тоньше, чем текущее или унаследованное значение.

Выделение отдельных предложений и слов

Чтобы выделить отдельные фразы или слова жирным шрифтом, нужные участки текста разметьте отдельными тегами с использованием классов. Например:

<p>Как и многие языки программирования, медиавыражения 
 <span class="bold">поддерживают логические операторы</span>, поэтому мы можем комбинировать выражения.</p>

И затем в стилях пропишите:

.bold {
  font-weight: 700;
}

Теперь все слова, обёрнутые в тег span с классом bold, станут жирными.

👉 Как и многие языки программирования, медиавыражения поддерживают логические операторы, поэтому мы можем комбинировать выражения

Эффективно и доступно

Что, если весь жирный текст сразу разметить в файле HTML? Для этого же есть специальные теги <strong> и <b>.

Теги <b> и <strong> используют в особых случаях, при этом важно знать несколько моментов:

• Тег <b> предназначен для выделения текста с целью привлечения к нему внимания, но без придания ему особой важности. Использовать его нужно только в случае, когда остальные теги выделения не подходят.
• Тег <strong> указывает на важность отмеченного текста и используется для выделения предупреждений или части документа, которую пользователь должен увидеть раньше остального.

В каких случаях предпочтительно использовать свойство font-weight:

• Для совместной работы над проектом. Если кто-то из команды захочет изменить стиль текста, ему не придётся искать и изменять каждый элемент HTML. Нужно будет просто изменить стили шрифтов в CSS.
• Для обеспечения доступности. Скринридер при чтении сайта учитывает насыщенность шрифта. Скринридер выделяет слова с тегом <strong> интонационно, в отличие от простого выделения с помощью <b>. Если чтение с интонацией не нужно, а важно лишь расставить визуальные акценты в тексте, то лучше использовать свойство
  font-weight.

Ещё по теме

• Как подключить и оптимизировать нестандартные шрифты
• Как убрать подчёркивание ссылок
• Как сделать список без точек в HTML

Устанавливает насыщенность шрифта. Значение указывается в виде чисел от 100 до 900 с шагом 100 или с помощью заданных ключевых слов.

Краткая информация

Синтаксис

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Синтаксис

Значения

Насыщенность шрифта задаётся с помощью ключевых слов: bold — жирное начертание и normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.

Вот как числовые значения влияют на насыщенность шрифта.

• 100 — тонкое начертание;
• 200 — сверхсветлое;
• 300 — светлое;
• 400 — нормальное (аналогично normal);
• 500 — среднее;
• 600 — полужирное;
• 700 — жирное (аналогично bold);
• 800 — сверхжирное;
• 900 — тяжёлое.

Учтите, что не все шрифты поддерживают этот набор. Если указанное значение не поддерживается, то браузер приведёт шрифт к ближайшей насыщенности. К примеру, если вы указали 900 и оно не может быть показано, то браузер в действительности применит значение 700 как ближайшее, которое работает корректно.

@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900);
div {
  font-family: Roboto, sans-serif;
  font-weight: {{ playgroundValue }};
}

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>font-weight</title>
<style>
h1 {
font-weight: normal; /* Нормальное начертание */
}
.select {
color: maroon; /* Цвет текста */
font-weight: 600; /* Полужирное начертание */
}
</style>
</head>
<body>
<h1>Мелодический голос персонажа</h1>
<p><span class=»select»>Поток сознания</span>, соприкоснувшись
в чем-то со своим главным антагонистом в постструктурной поэтике,
иллюстрирует былинный мифопоэтический хронотоп, об этом
свидетельствуют краткость и завершенность формы,
бессюжетность, своеобразие тематического развертывания.</p>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font-weight

Объектная модель

Объект.style.fontWeight

Спецификация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Свойство font-weight в CSS устанавливает начертание (еще говорят толщину или насыщенность) шрифта и зависит от доступных вариантов в семействе шрифтов, а также от вариантов, определенных браузером.

Например, чтобы сделать жирный шрифт, нужно задать свойство:

font-weight: bold;

Значения

Свойство font-weight принимает либо значения в виде ключевых слов, либо числа в диапазоне от 100 до 900.

Доступные ключевые значения:

normal

обычный, соответствует числу 400

bold

жирный текст, соответствует числу 700

bolder

более жирный относительно начертания родителя

lighter

более тонкий относительно родителя

Также есть 2 вспомогательных значения:

• inherit – указывает наследование показателя от родителя;
• initial – установка в значение по умолчанию.

Чтобы установленное начертание отобразилось на сайте, необходимо, чтобы шрифт его поддерживал. Как правило, большинство шрифтов поддерживают только часть значений.

Если шрифт имеет жирное («700») или нормально («400») начертание как часть семейства, браузер будет использовать их. Если они недоступны, браузер смоделирует собственные жирную или нормальную версию. Но он не будет моделировать другие недоступные варианты жирности.

Иногда можно встретить термин полужирное начертание или semibold, но такого предустановленного значения в CSS нет, это соответствует жирности 600.

Следующая демонстрация показывает использование различных вариантов жирности для текста:

See the Pen
font weight by Андрей (@adlibi)
on CodePen.

В приведенной выше демонстрации используется шрифт Open Sans, встроенный с помощью Google Fonts API. Загружаются все доступные варианты жирности. Недоступные варианты просто отображают ближайшим вариантом.

Обычные шрифты, такие как Arial, Helvetica, Georgia и т. д. не имеют начертаний, отличных от 400 и 700. Таким образом, в той же демонстрации с применением одного из этих шрифтов, в девяти абзацах будет отображаться только два варианта жирности.

Использование bolder и lighter

Толщина шрифта bolder и lighter (жирнее и тоньше) вычисляется относительно родительского элемента. Браузер будет искать ближайший «более жирный» или «легкий» вес, в зависимости от того, что доступно в семействе шрифта, в противном случае он просто выберет «400» или «700», в зависимости от того, что логичнее.

Дочерние элементы не будут наследовать bolder и lighter, а вместо этого унаследуют вычисленный вес.

Что происходит при недоступности заданного значения

Если заданное числовое значение веса недоступно, для определения жирности применяется такой подход:

1. Если задано число больше 500, будет использовано первое доступное более жирное начертание (если такого нет, то первое доступное более светлое).
2. Если задано значение меньше 400, будет использовано первое доступное более светлое начертание (если такого нет, то первое доступное более жирное).
3. Если задано 400, будет применено 500. Если 500 недоступно, будет использован подход из предыдущего пункта.
4. Если задано 500, будет применено 400. Если 400 недоступно, то будет использован алгоритм для пункта 2.

Это значит, что для шрифтов, у которые есть только начертания normal и bold, значения 100-500 становятся normal, а 600-900  – bold.