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

在我正在使用的新webapp上使用自定义字体时,我遇到了一个奇怪的问题.

这个自定义字体(FF DIN)似乎有一个自然垂直的偏心线高,这迫使我放置一些填充顶部的黑客来补偿元素上的顶部空间,如按钮和输入.

示例:绿色字体(Helvetica Neue)正确对齐,我们使用的自定义字体(FF DIN)垂直偏离中心:

是否有任何已知的方法可以自然地修复CSS上的居中问题,以某种方式强制字体基线行为？

谢谢.

这里的问题不是行高,而是字形的垂直放置,特别是文本基线的位置.这是字体设计师决定的东西; 设计者绘制字形并将它们放置在em square中,这个概念设备的高度等于(或定义为)字体高度.特别是,设计师一方面确定基线下方有多少空间,另一方面确定高于大写字母的高度.通常这些空间相等或几乎相等,但它们不一定相同.如果它们实质上不同,则字体的预期用途可能是特殊的,并且不包括如图像中所示的用法.这表明应该重新考虑字体选择,但我们假设它是固定的.

有几种方法可以解决这个问题.如果字母下方有太多空间,则缩小line-height使其变小,但它也会影响上面的空间.顶部填充在某种意义上有帮助,但它增加了元素占用的总高度.你也可以玩vertical-align,但它会影响线框的高度.

可能最简单的方法是使用相对定位,假设问题涉及单行文本.相对定位只是以指定的方式替换内容,否则不会影响布局.你需要一个包装器,即包含文本的元素,这样你就可以只取代文本,而不是背景.

以下演示使用了Google字体Candal,它有类似的问题,但方向不同:基线太低.这种方法的修改以满足原始问题应该是显而易见的,但是确切的位移量需要凭经验确定(或者使用字体检查器从字体文件中提取的信息).当然,em即使您设置了以像素或点为单位的字体大小,也应该使用此单位(这样,如果某天更改字体大小,则无需更改代码).

What we have got initially:
BRAKE HOSE AND AIR CHAMBER
Reducing line height (even “setting solid”) does not really help:
BRAKE HOSE AND AIR CHAMBER
But displacing the text upwards by 0.1em does:

BRAKE HOSE AND AIR CHAMBER