在我正在开发的新网络应用程序上使用自定义字体时，我遇到了一个奇怪的问题。
这种自定义字体（FF DIN）似乎具有自然垂直的偏离中心的行高，这迫使我放置一些顶部填充黑客来补偿按钮和输入等元素的顶部空间。
示例：绿色字体 (Helvetica Neue) 正确对齐，而我们使用的自定义字体 (FF DIN) 垂直偏离中心：
是否有任何已知的方法可以自然地解决 CSS 的居中问题，以某种方式强制字体基线行为？
谢谢。
这里的问题不是行高，而是字形的垂直放置，特别是文本基线的位置。这是字体设计师已经决定的事情；设计者绘制字形并将它们放置在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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
