小编典典

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

css

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

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

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

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

谢谢。


阅读 436

收藏
2020-05-16

共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>
2020-05-16