Fonts 字体：较差的垂直度量会导致跨浏览器的线条高度呈现不一致。解决方案

经过数小时的调试和摸索，我发现在不同的浏览器中，不可能一致地垂直对齐垂直度量较差的字体。 如果字体的垂直度量很差，它可能会被渲染得太高或太低，看起来很可怕，尤其是在按钮内部。单靠css无法解决这个问题

您可以通过本网站上的测试检查字体的垂直度量：（只需下载测试并替换字体。）

这就是我得到的结果。上面的一个指标较差，下面的一个指标正确：（两个指标都有固定的线高）

在专家模式下，为其生成器中较差的垂直度量提供修复。不幸的是，我必须使用的字体属于微软（SegoePrint），并且在Fontsquirrel的生成器中被列入黑名单

更新：

为了使问题更清楚。。这就是我现在面临的情况：

我试图将按钮的文本垂直对齐到中间（参见下图）。在左边你可以看到它是如何在Android上的Chrome中渲染的，在右边你可以看到它是如何在Windows上的Chrome中渲染的。Arial字体和最常见的字体都很好地居中，而Segoe Print则不是

我在CSS中尝试了不同的对齐方法，但没有一种方法能够始终如一地工作。。我也在一把小提琴里试过，结果是一样的，因为字体是非自由的，所以我不能显示出来。 这是一个特定于字体的问题，唯一的解决方案似乎是修复字体本身

这是按钮的CSS（值是虚构的）：

---

这花了我一段时间，但我刚刚发现我的字体发行商允许我在下载之前配置字体。我可以在字体中添加“线条高度调整”。 这些是可用的选项：

行高调整

• 最佳（使用最佳方法规范化此字体的行高）
• 120%（将线高度重新定义为点大小的120%）
• 自动（将OS/2.Typo值分布在上升、下降和线间距上）
• 边界框（与图示符的边界框匹配，线间距始终为0）
• 本机（使用字体中定义的行高，不同浏览器的结果可能不同）

“边界框”选项成功了。现在“Segoe Print”调整得很好

---

每当我再次遇到这个问题时，我会使用fontsquirrel生成器提供免费字体，或者从经销商处购买一种字体，该经销商提供了一个选项，可以直接调整线条高度…

您使用术语“垂直度量”，但您能解释一下您的意思吗（因为vmtx除了支持

vert

或

vrt2

功能的字体外不使用，而您的文本显然没有使用这些功能）？看起来您在谈论基线到基线的距离，这在CSS中称为

行高

，您可以明确指定自己的值以覆盖任何字体你正在做。看起来你只是想让文本选择的突出部分排列整齐，这通常不值得去尝试完善。相反，让文本看起来正确更重要。在澄清字体本身导致问题后，在浏览网页后，我得出结论，字体的竖直度较差但由于我不是字体专家，这可能与字体有关。我不确定。我更新了问题，这可能有助于确定原因。你的目标是哪个版本的android？因为这是一个经典，你实际上只想知道如何在HTML容器中垂直对齐文本（关于StackOverflow，实际上有很多答案，但要点是，如果你的目标是Android 4.2或更高版本，答案是）我尝试了所有常用的垂直对齐方法，包括felxbox。它们都适用于像Arial这样的字体，但不适用于Segeo Print。看看示例图像。你知道为什么Arial呈现得很好，而Segeo Print呈现得不好吗？CSS在这里是相同的…没有。你能为我们显示一个页面的html和CSS吗？这个页面会产生“这个问题”？

div.parent {
    height:40px
}
h3 {
    line-height: 40px;
    font-size: 14px
}