css несъвместимо разстояние над и под шрифта

Използвам два различни шрифта в моя уебсайт - "sans-serif" и "tradeGothicLTStd". Ето как тези шрифтове се изобразяват в браузъра.

sans-serif

trade-gothic-lt-std

Можете да забележите, че на първата екранна снимка има малко допълнително пространство над шрифта (Ако виждате текст с главни букви. Моля, отворете го в нов раздел с черен фон, за да видите правилно разликата) и докато използвате друг шрифт, няма допълнително пространство над шрифта (текст с главни букви).

Ето как се изобразяват, когато се използват в бутон.

sans-serif

trade-gothic-lt-std

Поради тези несъответствия шрифтовете излизат от позицията си вертикално. т.е. ако проектирам своя css с предвид първия шрифт, всички шрифтове с главни букви са центрирани вертикално (вътре в бутон или маркер за котва и т.н.), но когато сменя шрифта на втория шрифт, целият текст някак се движи малко нагоре, тъй като няма допълнително пространство над шрифта в този случай. Поради това моят шрифт не е идеално вертикално подравнен в центъра.

Има ли някакъв начин да се поправи това или може ли някой дори да ми каже защо се случва това?


person vishal    schedule 07.12.2018    source източник
comment
Задайте фиксирана височина на линията на елемента. Мисля, че ще ти помогне.   -  person Joykal Infotech    schedule 07.12.2018
comment
Имам фиксирана височина на реда. Ще центрирам шрифта в средата. Текстът ще бъде идеално в средата за sans-serif, но когато превключа шрифта на 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
Поставете друг HTMLElement като ‹p› вътре в бутона, който съдържа текста (напр. „ВХОД“). След това добавете клас към този елемент и опитайте да го стилизирате - person Unknown Joe; 07.12.2018