修复自定义字体行
在我正在处理的新webapp上使用自定义字体时，我遇到了一个奇怪的问题。
这种自定义字体（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>最后，我最终自己手动修复字体，使用此答案的帮助：
UIButton自定义字体垂直对齐
这是我最近遇到的事情。 由于某些原因，我使用的字体基线没有对齐，所以我对齐底部并增加了行高而不是添加填充。
这就是我如何解决我的问题，如果你有一个代码笔的链接，我可以检查它是否会为你工作，或者如果另一种解决方案会更好。
p {
vertical-align: text-bottom;
line-height: 1.5;
}
上一篇: Fix custom font line
下一篇: Custom installed font not displayed correctly in UILabel