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

Question

在我正在处理的新网络广告上使用自定义字体时，我遇到了一个奇怪的问题。

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

示例：绿色字体（Helvetica Neue）正确对齐，我们使用的自定义字体（FF DIN）垂直偏离中心：

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

谢谢。

Answer 1

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

有几种方法可以解决这个问题。如果字母下面的空间太大，减少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>

Answer 2

过去我遇到过这个问题，即使不同的浏览器也有不同的线路高度！我认为这在使用webfont生成器时会发生，并且只能根据我所知使用不同的行高进行修复。

你尝试过fontsquirrel吗？有一些选项会有不同的结果。

http://everythingfonts.com/font-face

http://www.font2web.com/

http://www.fontsquirrel.com/tools/webfont-generator

https://www.web-font-generator.com/

Answer 3

最后，我最终使用此答案的帮助自行手动修复字体：

UIButton custom font vertical alignment

Answer 4

这是我最近遇到过的事情。我出于某种原因使用的字体基线没有对齐，所以我对齐底部并增加了行高而不是添加填充。

这就是我解决问题的方法，如果你有一个代码笔的链接我可以检查它是否适合你，或者另一个解决方案会更好。

p {

    vertical-align: text-bottom;
    line-height: 1.5;

}

Answer 5

在Chrome中，我发现如果您使用的是font-face声明。您可以使用style =“”调用HTML来解决行高问题，或者只是在CSS中声明字体声明之后的行高。

我认为Chrome只是不知道如何计算行高，直到它呈现自定义字体。