Полужирный шрифт при наведении без сдвига макета

Полужирный шрифт при наведении без сдвига макета

От автора: когда вы меняете font-weight шрифта, это обычно вызывает небольшое смещение макета. Это потому, что полужирный текст часто больше и занимает больше места. Иногда это не имеет значения, например, вертикальный стек ссылок, где более широкий / полужирный текст все равно ничего не смещает. Иногда это имеет значение, например, горизонтальный ряд, где более широкий / жирный текст слегка отодвигает другие элементы.

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Но если бы я, скажем, позволил этим ссылкам перетекать в автоматические столбцы, у нас возникла бы проблема смещения.

Автор: Chris Coyier

Источник: https://css-tricks.com

Редакция: Команда webformyself.

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.