Порада: Як виправити проблему з font-weight в стані hover

18

Від автора: ви коли-небудь пробували змінити значення font-weight у посилання в різних станах? Якщо так, то ви повинні були помітити, що текст трохи зсувається. У цій статті ми спочатку дізнаємося, що викликає цей зсув, а потім розглянемо два можливих рішення даної проблеми.

Визначаємо проблему

Спочатку давайте визначимо проблему на простому прикладі. Розглянемо малюнок нижче:

Порада: Як виправити проблему з font-weight в стані hover

Пункти меню – посилання, тобто в CSS буде щось типу:

a:hover {
font-weight: bold;
}

Найчастіше пунктів меню не задається фіксована ширина, а це значить, що при наведенні курсору миші, текст трохи зрушить. Це відбувається з-за того, що ширина посилання при наведенні на неї збільшується. Щоб продемонструвати це, додамо клас active до першої ссылке з наступними стилями:

.active {
font-weight: bold;
}

Ми також змінили текст другого пункту на перший, щоб вони були рівні:

Порада: Як виправити проблему з font-weight в стані hover

Тепер якщо відкрити панель розробника в браузері і навести курсор на перші два посилання, можна помітити, що вони не рівні. Все сказане вище можна наочно подивитися демо:

Треба сказати, що робити елемент жирним при наведенні миші не прийнято, але іноді може знадобитися.

Рішення №1: задати всім пунктам ширину

Як говорилося вище, найбільш очевидний спосіб це задати всім пунктам меню ширину. У нашому прикладі ми поставили ширину всіх пунктів меню в 24%. Результат:

Цей спосіб працює, але він може не підійти нам. Є випадки, коли нам не можна додавати фіксовану ширину елементів. Ну і на основі вищесказаного розглянемо рішення краще.

Рішення №2: Text Shadow

Використовуючи text-shadow, можна імітувати ефект font-weight. Зробити це можна, правильно підібравши значення blur-radius.

Залежно від використовуваних шрифтів у проекті можна скомбінувати властивості text-shadow і letter-spacing і створити красиві ефекти для тексту. Щоб продемонструвати даний ефект, ми додали пару рядків CSS коду до наших посиланнями:

a {
letter-spacing: .1em;
transition: text-shadow .3s;
}
a:hover {
text-shadow: 0 0 .65px #333, 0 0 .65px #333;
/* розкоментуйте рядок нижче, якщо потрібен більш сильний ефект */
/* text-shadow: 0 0 .9px #333, 0 0 .9px #333, 0 0 .9px #333; */
}

Таким чином ми вирішили проблему зі зрушенням тексту, і нам не довелося додавати будь-яку ширину до елементів. І, як бачите, дане рішення набагато краще, ніж font-weight, так як розмір тексту взагалі не змінюється. Оці набагато приємніше.

Висновок

Якби мені потрібно було вирішити таку проблему, я скористався б одним із двох представлених рішень. А ви знаєте які-небудь інші способи вирішення даної задачі? Пишіть про це в коментарях.