Вы когда-нибудь пытались изменить значение свойства font-weight Если да, возможно, вы заметили, что текст сдвигается.
В этом кратком совете мы сначала узнаем, что вызывает такое нежелательное поведение, а затем рассмотрим два возможных решения.
Выявление проблемы
В качестве первого шага давайте определим проблему, посмотрев на простой пример. Рассмотрим следующую визуализацию:
Элементы являются ссылками, поэтому в вашем CSS вы можете попробовать что-то вроде этого:
a:hover {
font-weight: bold;
}
Поскольку мы обычно не определяем фиксированную ширину для подобных элементов, когда пользователь наводит курсор на ссылки, текст смещается. Конечно, это происходит потому, что ширина каждой ссылки увеличивается при наведении курсора. Чтобы проверить это, мы назначаем active
.active {
font-weight: bold;
}
Наконец, мы изменим текст второй ссылки, чтобы он был равен первому, например так:
Теперь, если мы откроем консоль браузера и нацелимся на первые две ссылки, мы заметим, что их вычисленная ширина отличается.
Вы можете увидеть то, что мы обсуждали выше в следующей демонстрации CodePen:
По общему признанию, это не очень распространенный способ добавить жирный эффект к состоянию при наведении, но он может возникнуть в какой-то момент. Итак, давайте рассмотрим два возможных решения, чтобы обойти эту проблему.
Решение 1: дать всем элементам ширину
Как уже упоминалось, возможно, наиболее очевидное решение — дать ширину всем элементам списка. Итак, в нашем примере мы устанавливаем ширину каждого элемента списка на 24%
Вот результат:
Даже несмотря на то, что решение, приведенное выше, работает, оно может быть не идеальным, поскольку в некоторых случаях мы можем избежать добавления фиксированной ширины к нашим элементам. Имея это в виду, давайте обсудим лучшее решение.
Решение 2: тень текста
Используя свойство text-shadowfont-weight Мы делаем это, играя со значением blur-radius
В зависимости от шрифтов, используемых в наших проектах, мы можем комбинировать свойство text-shadowletter-spacing
Чтобы продемонстрировать это поведение, мы назначаем несколько дополнительных строк CSS для наших ссылок:
a {
letter-spacing: .1em;
transition: text-shadow .3s;
}
a:hover {
text-shadow: 0 0 .65px #333, 0 0 .65px #333;
/* use the line below if you want a more intense effect */
/* text-shadow: 0 0 .9px #333, 0 0 .9px #333, 0 0 .9px #333; */
}
Вот демо:
Таким образом, мы избегаем проблемы перемещения элементов и не требуем добавления ширины элементов. И, как вы можете видеть, это решение намного лучше, чем использование font-weight Так что это выглядит намного чище.
Вывод
Если бы мне нужно было решить эту проблему, я бы, вероятно, использовал одно из двух решений, которые я только что описал. Вы знаете другой способ исправить это? Дайте нам знать об этом в комментариях.