Есть ли способ удалить пространство под базовой линией с помощью CSS, кроме высоты строки? ⇐ Html

[Anonymous]

До того, как это было помечено как дубликат команды «Удалить пространство под базовой линией текста с помощью CSS», описанное там решение (регулировка высоты строки) не решило мою проблему.
Вот минимальный воспроизводимый пример.
Я сильно подозреваю, что проблема, с которой я столкнулся, связана с шрифтом, который я использую. При использовании шрифтов «по умолчанию», таких как Arial, Sans, Times New Roman и т. д., проблем не наблюдалось. Я предпочитаю локальный шрифт (Helvetica Neue Lt Pro), который я использую в проекте NextJS. Я разработал стиль кнопки (показал только соответствующий CSS):

Код: Выделить всё

.button {
display: inline-block;
font-family: inherit;
font-weight: 500;
padding: 0.5rem 1rem;
}

Вертикальное центрирование текста кнопки сразу выглядело неправильным, как будто текст был сдвинут к верхней части кнопки.


При проверке элемента я ясно вижу, что под базовой линией имеется лишнее пространство, из-за чего текст выглядит так, как будто он не центрирован по вертикали.


Вы также можете увидеть это при предварительном просмотре шрифта в Интернете.


Игра со значениями высоты строки поначалу, кажется, имеет значение, но в конечном итоге кнопка все равно остается непропорционально перекошенной вверх. Судя по моим исследованиям, кажется, что есть один инструмент под названием Capsize, который может позволить лучше настраивать свойства шрифта. Однако я не уверен, что именно нужно изменить в этом случае.


Как вы думаете, какой вариант действий лучше всего предпринять? Мне бы очень хотелось избежать необходимости иметь отдельные значения для нижнего заполнения.

Подробнее здесь: https://stackoverflow.com/questions/797 ... other-than