使用CSS修复自定义字体的行高

Question

在我正在使用的新Web应用程序上使用自定义字体时，我一直遇到一个奇怪的问题。

此自定义字体（FF DIN）似乎自然具有垂直的偏心线高，这迫使我放置一些padding-tophack以补偿元素（如按钮和输入）的顶部空间。

示例：绿色字体（Helvetica Neue）正确对齐，而我们使用的自定义字体（FF DIN）垂直偏离中心：

有没有已知的方法可以自然地解决CSS上的居中问题，从而以某种方式强制字体基线行为？

谢谢。

Answer 1

这里的问题不是行高，而是字形的垂直放置，特别是文本基线的位置。字体设计师已经决定了这一点。设计人员绘制字形并将其放置在em正方形中，这是概念设备，其高度等于（或定义为）字体高度。尤其是，设计人员决定一方面在基线之下，另一方面在大写字母的高度之上有多少空间。通常，这些空间相等或几乎相等，但不必相等。如果它们实质上不同，则字体的预期用途可能很特殊，并且不包括图像中所示的用途。这表明应该重新考虑字体选择，但让我们假设它是固定的。

有几种方法可以解决该问题。如果字母下方有太多空间，减小line-height使其变小，但这也会影响上方的空间。从某种意义上说，顶部填充有帮助，但是它增加了元素占用的总高度。您也可以使用vertical-align，但它会影响线盒的高度。

可能最简单的方法是使用相对定位，假设问题只涉及单行文本。相对定位仅以指定的方式替换内容，否则不影响布局。为此，您将需要一个包装器，即一个包含文本的元素，以便仅替换文本，而不替换背景。

下面的演示使用了Google字体Candal，该字体有类似的问题，但方向不同：基线太低。为解决原始问题而对这种方法进行的修改应该很明显，但是需要根据经验确定确切的位移量（或从使用字体检查器从字体文件中提取的信息中确定）。自然，em即使您以像素或磅为单位设置字体大小，也应在此处使用该单位（这样，如果某天更改字体大小，则无需更改代码）。

<link href='http://fonts.googleapis.com/css?family=Candal' rel='stylesheet'>
<style>
div { font-family: Candal }
div { background: lightgreen; font-size: 200%}
</style>
<p>What we have got initially:
<div>BRAKE HOSE AND AIR CHAMBER</div>
<p>Reducing line height (even “setting solid”) does not really help:
<div style="line-height: 1">BRAKE HOSE AND AIR CHAMBER</div>
<p>But displacing the text upwards by 0.1em does:
<div><span style="position: relative; bottom: 0.1em">
BRAKE HOSE AND AIR CHAMBER</span></div>