css несовместимый интервал над и под шрифтом

Я использую на своем сайте два разных шрифта — «sans-serif» и «tradeGothicLTStd». Вот как эти шрифты отображаются в браузере.

без засечек

trade-gothic-lt-std

Вы можете заметить, что на первом снимке экрана есть дополнительное пространство над шрифтом (если вы видите текст в верхнем регистре. Пожалуйста, откройте его в новой вкладке с черным фоном, чтобы правильно увидеть разницу), а при использовании другого шрифта лишнего места нет. над шрифтом (текст в верхнем регистре).

Вот как они отображаются при использовании в кнопке.

без засечек

trade-gothic-lt-std

Из-за этих несоответствий шрифты смещаются по вертикали. т.е. если я создаю свой css с учетом первого шрифта, все шрифты в верхнем регистре центрируются по вертикали (внутри кнопки или тега привязки и т. д.), но когда я меняю шрифт на второй шрифт, весь текст перемещается немного вверх, так как нет дополнительного пространства над шрифтом в этом случае. Из-за этого мой шрифт не идеально выровнен по вертикали по центру.

Есть ли способ исправить это или может кто-нибудь даже сказать мне, почему это происходит?


person vishal    schedule 07.12.2018    source источник
comment
Установите фиксированную высоту строки для элемента. Я думаю, это поможет вам.   -  person Joykal Infotech    schedule 07.12.2018
comment
У меня фиксированная высота строки. Я центрирую шрифт посередине. Текст будет идеально расположен посередине для шрифта без засечек, но когда я переключаю шрифт на trade-gothic-lt-std, шрифт выглядит так, как будто он немного смещен вертикально вверх, так как в верхней части не хватает дополнительного места. сам шрифт.   -  person vishal    schedule 07.12.2018


Ответы (1)


На второй картинке шрифт тоже кажется растянутым. Вы можете масштабировать шрифт с помощью transform: scale(1, 0.9);. Это позволит масштабировать шрифт по вертикали на 90%.

Тогда я бы использовал line-height

person Unknown Joe    schedule 07.12.2018
comment
К какому элементу я бы применил свойство преобразования. Я обновил свой вопрос еще двумя снимками экрана. Он имеет элемент кнопки с текстом внутри него. Если я применяю преобразование к кнопке, вся кнопка масштабируется, но со шрифтом ничего не происходит. - person vishal; 07.12.2018
comment
Поместите другой элемент HTML, например ‹p›, внутрь кнопки, которая содержит текст (например, «ВОЙТИ»). Затем добавьте класс к этому элементу и попробуйте стилизовать его. - person Unknown Joe; 07.12.2018