如何抵消行高基线？

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