CSS урок 9. Выделение текста жирным шрифтом

Казалось бы, зачем использовать CSS для задания жирного шрифта, ведь в html есть специальный тег - <strong>, отвечающий за плотность текста. Более того, имеется его альтернатива - тег <b>.

Но мы ведь знаем, что внешнее оформление сайта нужно выполнять через CSS, а HTML нужен только для структурирования данных веб-страницы. Более того, принято считать что поисковики передают больший вес словам помеченным вышеназванными тегами, а также тегами <em> и <i>.

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

Видеоверсия:
[iframe id="https://www.youtube.com/embed/2jGZif9H8SE?rel=0&vq=hd720" align="center" mode="normal" autoplay="no" maxwidth="1280"]

---

Свойство, отвечающее за плотность текста

Плотность текста мы меняем при помощи свойства font-weight. Оно имеет довольно много значений, и среди них есть лишь два более или менее толковых. Я говорю так, потому что на практике вы чаще всего будете использовать два значения - normal и bold. Первое отвечает за отображение текста с нормальной, привычной толщиной, а второе - с полужирной. Например, давайте выделим все параграфы полужирным шрифтом.

p {font-weight: bold;}

Как видите, все довольно просто. А теперь, давайте отобразим заголовки второго и третьего уровней шрифтом нормальной толщины.

h2, h3 {font-weight: normal;}

Вы ведь помните, что заголовки по умолчанию отображаются полужирным начертанием? Так вот, при помощи CSS правила выше мы изменили данное положение вещей. Ведь не зря говорят, что нужно мыслить нестандартно.

Итак, на этом можно было бы данный урок закончить и побить мой личный рекорд по самому короткому посту на блоге. Но, я решил оставить эту затею на потом и рассказать вам о других значениях свойства font-weight.

Толщина шрифтов

Как вы помните из урока по подключению шрифтов, они у нас бывают разной толщины и наклона. По плотности шрифты имеют показатели от 100 до 900, где 100 - самый тонкий, а 900 - самый жирный.

Нормальный шрифт, который мы привыкли видеть каждый день имеет толщину 400, что эквивалентно значению normal. Таким образом, мы можем указывать как значение normal, так и 400, разницы никакой нет. Например, давайте зададим заголовку первого уровня шрифт нормальной толщины.

h1 {font-weight: 400;}

То, что мы привыкли называть жирным шрифтом имеет толщину 700, и на самом деле является полужирным, а также полностью соответствует значению bold.

Получается что вместо значения bold мы можем задавать толщину в 700. Например, давайте отобразим все ссылки полужирным шрифтом.

a {font-weight: 700;}

Отлично. Также хотелось бы напомнить, что для отображения текста той или иной плотностью необходимо наличие соответствующих файлов данного шрифта. Например, при подключении к сайту шрифта только с нормальной толщиной, ее отображение в тонком варианте не будет возможным, даже если вы создадите +100500 CSS правил.

Для наглядности можно перейти к сервису google.com/fonts и подключить через директиву @import какой-нибудь шрифт только с нормальной и полужирной толщиной.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

Затем попробовать вывести ее на экран в плотности равном 300.

p {font-weight: 300;}

Однако, это ничего не дает, так как на сервере и на компьютере пользователя отсутствует файл шрифта Open Sans с тонким начертанием. Для пущей убедительности давайте подключим файл шрифта с толщиной в 300 (тонкий) и применим его ко всем параграфам.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);

p {font-weight: 300;}

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

Но если вдруг появится необходимость задействовать какую-нибудь из них, теперь вы знаете как это сделать. А на этом у меня все. Надеюсь, данный урок по CSS был для вас полезен. Если это так:

1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
2. [popup_trigger id="3874" tag="span"]Подписывайтесь[/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!