如何抵消行高基线？

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）。