CSS上下字体间距不一致

Question

我在网站上使用了两种不同的字体-“ sans-serif”和“ tradeGothicLTStd”。这是在浏览器中呈现这些字体的方式。

您会注意到，在第一个屏幕截图中，字体上方有一些多余的空间（如果您看到的是大写文本。请在带有黑色背景的新标签页中打开它以正确看到区别），而在使用另一种字体时，字体上方（大写文本）没有多余的空间。

这是在按钮中使用它们时的呈现方式。

由于这些不一致，字体在垂直方向上错位了。例如，如果我在设计CSS时考虑到第一种字体，则所有大写字体都垂直居中（在按钮或锚标记等内部），但是当我将字体更改为第二种字体时，所有文本都会稍微向上移动，因为没有多余的空间在这种情况下，字体上方。因此，我的字体在中心位置并不是垂直对齐的。

有什么办法可以解决这个问题，或者有人可以告诉我为什么会这样？

Answer 1

在第二张图片上，字体也似乎被拉伸了。 您可以使用transform: scale(1, 0.9);缩放字体。这样会将字体垂直缩放90％。

然后，我将使用line-height