fonts - 字体: poor vertical metrics cause inconsistent line-height rendering across browsers. 解决方案？

Question

经过几个小时的调试和摸索，我发现不可能在浏览器中一致地垂直对齐垂直指标较差的字体。如果字体的垂直度量很差，它可能会渲染得太远或太远，并且看起来很糟糕，尤其是在按钮内部。仅靠CSS是没有办法解决这个问题的。

您可以通过此网站上的测试检查字体的垂直尺寸:http://levien.com/webfonts/vmtx/ (只需下载测试并替换字体即可。)

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

Fontsquirrel在专家模式下的生成器中提供了对不良垂直指标的修复。不幸的是，我必须使用的字体属于 Microsoft (SegoePrint)，并且在 Fontsquirrel 生成器上被列入黑名单。

更新:

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

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

我在CSS中尝试了不同的对齐方法，但没有一个一致地工作。我还在 fiddle 中尝试了它，得到了相同的结果，但我无法显示，因为字体不是免费的。这是一个特定于字体的问题，唯一的解决方案似乎是修复字体本身。

这是按钮的 CSS(值是虚构的):

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

Answer 1

我使用 Helevetica Neue 的许可版本，我还注意到其常规字体和粗体字体之间的按钮存在差异。我可以通过将 descent-override: 0%; 添加到粗体版本的 @font-face 声明中来解决此问题。截至撰写本文时，并非所有浏览器都支持(不支持 IE 11 或 Safari)，但 Mac 通常在本地安装了 Helvetica Neue，因此我首先检查本地版本，然后只剩下 IE 11 不受支持(像往常一样)。

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override

还有 ascent-override 可供使用，这对于某些字体可能会更好。

// index.scss

/* CDN version - we need to add descent-override to the CDN version only */
@font-face {
  font-family: "font-primary";
  font-style: normal;
  font-weight: 700;
  src:
    url("<MY-CDN-URL>.woff2")
      format("woff2"),
    url("<MY-CDN-URL>.woff")
      format("woff");
  font-display: swap;
  descent-override: 0%;
}
/* Local version */
@font-face {
  font-family: "font-primary-local";
  font-style: normal;
  font-weight: 700;
  src: local("Helvetica Neue Bold");
  font-display: swap;
}


$font-primary: "font-primary-local", "font-primary", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

之前:

之后: