✔Жирный текст с помощью HTML и CSS - «Верстка»

Сегодняшней публикацией начинаю цикл статей про жирные шрифты. Изначально думал разместить все нюансы и вопросы по теме в одном месте, но информации оказалось слишком много. Лучше воспринимать ее постепенно. Поэтому перед тем, как перейти к разным подборкам шрифтов для создания фотошоп иллюстраций рассмотрю вопросы, связанные с версткой. Сегодня расскажу как сделать слова жирным шрифтом на сайте с помощью HTML и CSS.

Такое оформление используется когда вам нужно выделить определенную информацию на странице. Причем речь идет не только о заголовках, но и о простых словах, фразах в тексте. Реализовывается это достаточно просто.

Жирный текст на HTML

Для выделения определенного текста жирным используются специальные HTML теги – и . Например следующий код:

Обычный текст.

[b]Жирный текст.

Жирный текст strong.

На выходе дает такую картинку:

Последние два варианта визуально выглядят одинаково, однако они между собой немного отличаются. Тег [b] задает простое стилистическое выделение слова жирным шрифтом, тогда как добавляет при этом некое семантическое “усиленное” (важное) значение. То есть последняя строка – это не просто жирный текст, а какая-то важная информация. В принципе, для поисковиков рекомендуют использовать именно .

Вы также можете встретить прописанный в HTML жирный шрифт с помощью стилей:

Пример жирного текста.

Пример текста с жирным словом.

На сайте это отображается так:

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

и указать соответствующий класс, а затем прописать его оформление в таблице стилей. Такие вот правила оформления кода. Поэтому для жирного шрифта в HTML используйте тег .

Жирный текст на CSS

Дабы сделать в CSS жирный шрифт используется свойство font-weight. С его помощью указывается “насыщенность” фрагмента текста. Значения могут быть от 100 до 900, но наиболее часто используемые это:

bold (жирный) – 700 по умолчанию;
normal (обычный) – 400 по умолчанию.

Есть также варианты значений bolder и lighter, которые меняют шрифт в зависимости от родителя на более или менее жирный соответственно.

Чтобы задать жирный текст в CSS нужно тому или иному элементу задать какой-то стиль, например:

Обычный текст с жирным выделением по центру.

Далее в CSS стилях вы определяете для него жирность вместе с другими свойствами:

. my-bold-font {
color: black;
font-weight: 700;

Либо можно написать:

. my-bold-font {
color: black;
font-weight: bold;
 

Разницы нет никакой. Кстати, если говорить о HTML теге , то для него по умолчанию прописан такой стиль:

strong {
font-weight: bold;

Тут хотелось отметить один небольшой нюанс, который мне рассказали на курсах верстки – если вы создаете для какого-то элемента новый класс, то желательно использовать более-менее “понятное название”. Например, в примере выше стиль class=”my-bold-font” выглядит логичнее чем class=”new-font”, т.к. можно отчасти понять его назначение. Это плюс для тех, кто будет смотреть и использовать вашу верстку в дальнейшем.

В следующей статье расскажу про интересные жирные шрифты, которые мне удалось найти.

Цитирование статьи, картинки - фото скриншот - Rambler News Service.

Иллюстрация к статье - Яндекс. Картинки.

Есть вопросы. Напишите нам.

Общие правила  поведения на сайте.