如何补偿线条高度基线？

Question

这是font-face非常常见的问题，例如

font: 20px/20px 'ITC Avant Garde Gothic Std'; font-style: 'book'; letter-spacing: 1px; text-transform: uppercase;

​

​

问题是，我希望文本垂直居中。然而，事实并非如此。有没有一种方法可以补偿行高基线？而不需要实际更改line-height。

Answer 1

这种现象取决于字体。它由字体设计者决定字体如何使用其高度。例如，在Arial中，当设置为实心时，大写基本拉丁字母垂直居中，而在Verdana中，它们显示得稍微低一些(即，上面的空间比下面的空间多一点)。

您可以通过使用相对定位对此进行微调，但随后需要额外的标记，例如

<div><span>text</span></div>

使用CSS进行span设置，

position: relative;
top: 2px;

如果用户浏览器中使用的字体与您的预期不同，这可能会导致糟糕的效果。

我没有考虑font-style: 'book'的可能影响，因为我不知道它可能意味着什么。我所知道的CSS资源中没有提到这样的内容( font-style的值是不带引号的关键字，并且不包含book)。