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

Posted

技术标签:

【中文标题】使用 CSS 修复自定义字体行高【英文标题】:Fix custom font line-height with CSS 【发布时间】:2015-03-22 00:20:54 【问题描述】:

在我正在开发的新 web 应用上使用自定义字体时,我遇到了一个奇怪的问题。

这种自定义字体 (FF DIN) 似乎有自然的垂直偏离中心线高,这迫使我放置一些 padding-top hack 来补偿按钮和输入等元素的顶部空间。

示例:绿色字体 (Helvetica Neue) 正确对齐,我们使用的自定义字体 (FF DIN) 垂直偏离中心:

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

谢谢。

【问题讨论】:

这不是关于行高,而是关于字形的垂直放置。 还有其他可行的解决方案吗?除了公认的解决方案?我不想手动编辑字体 【参考方案1】:

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

这就是我解决问题的方法,如果您有指向代码笔的链接,我可以检查它是否适合您,或者是否有其他解决方案会更好。

p 

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


【讨论】:

我试过了,但这并没有改变任何东西,因为这个字体是受保护的,所以我真的不能放一个代码笔【参考方案2】:

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

有几种方法可以解决这个问题。如果字母下方的空间太大,减小line-height 会使其变小,但也会影响上方的空间。顶部填充在某种意义上有所帮助,但它增加了元素占据的总高度。 vertical-align也可以玩,不过会影响line box的高度。

可能最简单的方法是使用相对定位,假设问题涉及单行文本。相对定位只是以指定的方式替换内容,而不影响布局。你需要一个包装器,即一个包含文本的元素,这样你就可以只替换文本,而不是背景。

下面的演示使用了谷歌字体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>

【讨论】:

这行得通,但我正在寻找一种可扩展的方式来改变我的所有元素(按钮/输入),我不能在每个按钮中都放置跨度,这不会修复输入对齐。 对于按钮,填充方法可能效果很好。但是,一般来说,如果一种字体会导致此类问题,则应选择不同的字体。【参考方案3】:

我过去也遇到过这个问题,即使是不同的浏览器也会给出不同的行高!我认为在使用 webfont 生成器时会发生这种情况,据我所知,只能通过使用不同的 line-height 来修复。

你试过 fontsquirrel 吗?有一些选项会产生不同的结果。

http://everythingfonts.com/font-face

http://www.font2web.com/

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

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

【讨论】:

Fontsquirrel 可以选择修改 x 高度,但 fontshop 中的字体受保护..【参考方案4】:

最后,我最终自己手动修复了字体,使用了这个答案的帮助:

UIButton custom font vertical alignment

【讨论】:

【参考方案5】:

在 Chrome 中,我发现如果您使用的是 font-face 声明。您可以通过在 html 中调用 style="" 来解决行高问题,或者在 CSS 中的字体声明之后简单地声明行高。

我认为 Chrome 在渲染自定义字体之前不知道如何计算行高。

【讨论】:

以上是关于使用 CSS 修复自定义字体行高的主要内容,如果未能解决你的问题,请参考以下文章

有啥软件可以自定义字 也就是自己想写啥就写啥 并把写的字弄成

css 自定义字体面

为啥自定义字体会移动文本(更改垂直对齐方式)? [复制]

C++11 用户自定义字面值

自定义字符类

如何在 ListView 和 AlertDialog 中设置自定义字体?