在我正在开发的新网络应用程序上使用自定义字体时,我遇到了一个奇怪的问题。
这种自定义字体 (FF DIN) 似乎具有自然垂直的偏心行高,这迫使我放置一些 padding-top hack 来补偿按钮和输入等元素的顶部空间。
示例:绿色字体 (Helvetica Neue) 正确对齐,而我们使用的自定义字体 (FF DIN) 垂直偏离中心:
是否有任何已知的方法可以自然地解决 CSS 上的居中问题,以某种方式强制字体基线行为?
谢谢。
最佳答案
这里的问题不是行高,而是字形的垂直放置,尤其是文本基线的位置。这是字体设计师决定的;设计师绘制字形并将它们放置在 em 方 block 中,em 方 block 是高度等于(或定义为)字体高度的概念设备。特别是,设计人员决定一方面在基线下方有多少空间,另一方面在大写字母的高度上方有多少空间。通常这些空间是相等的或几乎相等的,但它们不一定是。如果它们有很大不同,则字体的预期用途可能是特殊的,并且不包括图像中显示的用法。这表明应该重新考虑字体选择,但我们假设它是固定的。
有几种方法可以解决这个问题。如果字母下方的空间太大,减小 line-height
会使其变小,但也会影响上方的空间。顶部填充在某种意义上有帮助,但它增加了元素占用的总高度。您也可以使用 vertical-align
,但它会影响行框的高度。
可能最简单的方法是使用相对定位,假设问题处理的是单行文本。相对定位只是以指定的方式替换内容,而不会影响布局。为此,您需要一个包装器,即一个包含文本的元素,这样您就可以只替换文本,而不是背景。
下面的demo使用了谷歌字体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>
关于css - 使用 CSS 修复自定义字体行高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51709580/