Это очень старый вопрос, но я возвращаюсь к нему, потому что у меня была эта проблема в приложении, которое я разрабатываю, и я нашел здесь все необходимые ответы.
(Пропустите этот абзац для TL; DR ...) Я использую шрифт Gotham с сайта cloud.typography.com, и у меня есть кнопки, которые начинаются пустыми (с белой рамкой / текстом и прозрачный фон) и получить цвет фона при наведении курсора. Я обнаружил, что некоторые из используемых мной цветов фона плохо контрастируют с белым текстом, поэтому я хотел изменить текст на черный для этих кнопок, но - из-за визуального трюка или обычных методов сглаживания - темный текст на светлом фоне всегда кажется более светлым, чем белый текст на темном фоне. Я обнаружил, что увеличение веса темного текста с 400 до 500 обеспечивает почти такой же «визуальный» вес. Тем не менее, он увеличивал ширину кнопки на крошечную величину - доли пикселя - но этого было достаточно, чтобы кнопки казались слегка «дрожащими», от чего я хотел избавиться.
Решение:
Очевидно, что это действительно привередливая проблема, поэтому ее нужно было решить. В конечном итоге я использовал отрицательный letter-spacing для более жирного текста, поскольку cgTag рекомендовал выше, но 1px был бы излишним, поэтому я просто рассчитал именно ту ширину, которая мне нужна.
Изучив кнопку в Chrome devtools, я обнаружил, что ширина моей кнопки по умолчанию была 165,47 пикселей, а при наведении - 165,69 пикселей, разница в 0,22 пикселей. На кнопке было 9 символов, поэтому:
0.22 / 9 = 0.024444px
Преобразуя это в em-единицы, я мог бы сделать настройку независимой от размера шрифта. Моя кнопка использовала размер шрифта 16 пикселей, поэтому:
0.024444 / 16 = 0.001527em
Итак, для моего конкретного шрифта следующий CSS сохраняет кнопки точно одинаковой ширины при наведении курсора:
.btn {
font-weight: 400;
}
.btn:hover {
font-weight: 500;
letter-spacing: -0.001527em;
}
Пройдя небольшое тестирование и используя приведенную выше формулу, вы сможете найти точное значение letter-spacing для вашей ситуации, и оно должно работать независимо от размера шрифта.
Одно предостережение заключается в том, что разные браузеры используют немного разные вычисления субпикселей, поэтому, если вы стремитесь к этому уровню OCD с точностью до субпикселя, вам нужно будет повторить тестирование и установить разные значения для каждого браузера. Стили CSS, ориентированные на браузер, как правило, не одобряются по уважительной причине, но я думаю, что это один из вариантов использования, когда это единственный вариант, который имеет смысл.
person
dannymcgee
schedule
01.10.2018
Предупреждение: 
