CSS上下字体间距不一致

Question

I am using two different fonts in my website - "sans-serif" and "tradeGothicLTStd". Here is how these fonts are rendered in the browser.

You can notice that in the first screenshot there is some extra space above the font (If you see the uppercase text. Please open it in a new tab with black background to properly see the difference) and while using another font there is no extra space above the font (uppercase text).

Here is how they are rendered when used in a button.

Because of these inconsistencies the fonts go out of position vertically. ie if I design my css with first font in mind the all uppercase fonts are centered vertically (inside a button or anchor tag etc) but when I change the font to the second font all text kind of moves little upwards since there is no extra space above the font in this case. Because of this my font is not perfectly vertically aligned in the center.

Is there any way to fix this or can someone even tell me why this is happening?

Answer 1

On your second picture the font also appears to be stretched. You can scale the font with transform: scale(1, 0.9); . This will scale the font vertically on 90%.

Then, I would use line-height