字体：糟糕的垂直指标会导致浏览器之间的行高呈现不一致。解决方案？

Question

经过数小时的调试和摸索，我发现无法在所有浏览器中以一致的方式垂直对齐 垂直指标 不佳的字体。如果字体的 垂直指标 很差，它可能会被渲染得太高或太低，看起来很糟糕，尤其是在按钮内部。单靠css是没办法解决这个问题的。

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

这是我得到的结果。上面的指标很差，下面的指标是对的：（都有固定的行高）

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

更新：

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

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

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

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

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

Answer 1

我花了一些时间，但我刚刚发现我的字体经销商允许我在下载前配置字体。我能够为字体添加“行高调整”。这些是可用的选项：

Line Height Adjustments

Best (Use the best method to normalize the line height for this font)

120% (Redefine the line height as 120% of the point size)

Automatic (Distributes OS/2.Typo values across ascender, descender and line gap)

Bounding Box (Match the bounding box of the glyphs, line gap will always be 0)

Native (Use the line height as defined in the font, results may differ between browsers)

“边界框”选项起到了作用。现在“Segoe Print”已经调整好了。

每当我再次遇到这个问题时，我要么使用 fontsquirrel 生成器获取免费字体，要么从经销商处购买一种字体，该经销商提供开箱即用的调整行高选项...

Answer 2

我使用的是 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;

之前：

之后：

字体：糟糕的垂直指标会导致浏览器之间的行高呈现不一致。解决方案？

Font: poor vertical metrics cause inconsistent line-height rendering across browsers. Solution?

fonts

rendering

vertical-alignment