Категория > Вёрстка > Жирный текст с помощью HTML и CSS - «Верстка»

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


18-03-2016, 16:18. Автор: Агнеса

Сегодняшней публикацией начинаю цикл статей про жирные шрифты. Изначально думал разместить все нюансы и вопросы по теме в одном месте, но информации оказалось слишком много. Лучше воспринимать ее постепенно. Поэтому перед тем, как перейти к разным подборкам шрифтов для создания фотошоп иллюстраций рассмотрю вопросы, связанные с версткой. Сегодня расскажу как сделать слова жирным шрифтом на сайте с помощью 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”, т.к. можно отчасти понять его назначение. Это плюс для тех, кто будет смотреть и использовать вашу верстку в дальнейшем.


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

    Перейти обратно к новости