От автора: когда вы меняете font-weight шрифта, это обычно вызывает небольшое смещение макета. Это потому, что полужирный текст часто больше и занимает больше места. Иногда это не имеет значения, например, вертикальный стек ссылок, где более широкий / полужирный текст все равно ничего не смещает. Иногда это имеет значение, например, горизонтальный ряд, где более широкий / жирный текст слегка отодвигает другие элементы.
Райан Маллиган демонстрирует это. Техника Райана очень крута. Для каждого элемента в списке есть псевдо-элемент с точным текстом ссылки. Этот псевдо-элемент визуально скрыт, но предварительно выделен жирным шрифтом и по-прежнему занимает отведенную ширину. Поэтому, когда фактический текст ссылки выделен полужирным шрифтом, он не будет занимать дополнительной ширины.
Это также зависит от того, как вы создаете макет. Здесь, если я сделаю с помощью сетки CSS четыре столбца и добавлю текст, который на самом деле не влияет на ширину, выделение жирным шрифтом также не повлияет на макет:
Но если бы я, скажем, позволил этим ссылкам перетекать в автоматические столбцы, у нас возникла бы проблема смещения.
Автор: Chris Coyier
Источник: https://css-tricks.com
Редакция: Команда webformyself.
