在我正在使用的新Web应用程序上使用自定义字体时,我一直遇到一个奇怪的问题。
此自定义字体(FF DIN)似乎自然具有垂直的偏心线高,这迫使我放置一些padding-tophack以补偿元素(如按钮和输入)的顶部空间。
示例:绿色字体(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>