在我正在开发的新webapp上使用自定义字体时,我遇到了一个奇怪的问题.
这种自定义字体(FF DIN)似乎具有自然的垂直偏心线高度,这迫使我放置一些padding-top hack来补偿元素上的顶部空间,如按钮和输入.
示例：绿色字体(Helvetica Neue)正确对齐,其中使用的自定义字体(FF DIN)是垂直偏心的：
有什么已知的方式可以自然地将CSS中的问题修复到CSS上,以强制字体基线行为？
谢谢.
解决方法
这里的问题不是行高,而是垂直放置字形,特别是文本基线的位置.这是字体设计师决定的;设计人员绘制字形并将它们放置在em square中,这个概念设备的高度等于(或定义为)字体高度.特别地,设计者决定一方面在基线之下多少空间,另一方面大于高于大写字母的高度.通常这些空格是相等的,或几乎相等的,但是它们不需要.如果它们基本不同,字体的预期用途可能是特殊的,并且不包括像图像中所示的使用.这表明字体选择应该重新考虑,但是让我们假设它是固定的.
有几种方法可以解决这个问题.如果字母下方空间太大,线高就会变小,但也影响上面的空间.顶部填充在某种意义上有帮助,但它增加了元素所占据的总高度.您也可以使用垂直对齐方式播放,但会影响线条的高度.
可能最简单的方法是使用相对定位,假设问题涉及单行文本.相对定位只是以指定的方式取代内容,否则不会影响布局.您将需要一个包装器,即包含文本的元素,以便您只能替换文本而不是背景.
以下演示使用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>
