字体：较差的垂直度量标准导致跨浏览器的行高不一致呈现。解？

Question

经过几个小时的调试和徘徊，我发现在浏览器中不可能一致地将字体与垂直度量一致地垂直对齐。 如果某个字体的垂直指标较差，它可能会渲染得太远或太远而且看起来很糟糕，特别是在按钮内部。单独使用css无法解决这个问题。

您可以使用此网站上的测试检查字体的垂直指标：http://levien.com/webfonts/vmtx/（只需下载测试并替换字体。）

这是我得到的结果。上面的一个指标很差，下面的指标正确:(两者都有固定的行高）

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

更新

让问题更清楚......这就是我现在面临的情况：

我正在尝试将按钮的文本垂直对齐到中间（参见下图）。在左侧，您可以看到它在Android上的Chrome中的呈现方式，在右侧，您可以看到它在Windows上的Chrome呈现方式。 Arial和最常见的字体很好地居中，Segoe Print不是..

我在CSS中尝试了不同的方法来进行对齐，但没有一种方法能够保持一致。我也在同一个小提琴中尝试了相同的结果，由于字体是非自由的，我无法显示。 这是一个字体特定的问题，唯一的解决方案似乎是修复字体本身。

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

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

Answer 1

我花了一段时间，但我发现我的字体分配器让我在下载前配置字体。我能够在字体中添加“Line Height Adjustments”。 这些是可用的选项：

  

线高调整

     

  
• 最佳（使用最佳方法来规范此字体的行高）
  
• 120％（将线高重新定义为点大小的120％）
  
• 自动（在Ascender，descender和line gap上分配OS / 2.Typo值）
  
• 边界框（匹配字形的边界框，线间距始终为0）
  
• 原生（使用字体中定义的行高，结果可能因浏览器而异）
  

“边界框”选项可以解决问题。现在“Segoe Print”很好地调整了。

每当我再次面对这个问题时，我会使用fontsquirrel生成器获取免费字体，或者从分销商那里购买一种字体，它可以选择直接调整线条高度......