操作系统之间具有不同垂直度量的自定义字体

Question

我正在尝试为我正在构建的页面添加自定义字体。我的问题是字体垂直对齐在我的 ubuntu 开发机器和 windows pc 上看起来不同。

首先，这是理解问题的图像

编辑：不幸的是，作为一个新用户，我无法发布图片，所以这里是一个描述：

问题在于字体基线与其下方元素之间的距离。我的 ubuntu 机器上有一个无法解释的间隙，它不是填充/边距。即使您选择了文本，它看起来也没有对齐。

两者都在 Chrome 上进行了测试，当然后面是相同的 html/css（它是同一个页面）。代码和 chrome 的检查器工具上都没有底部边距/填充。相同的行高。字体是博物馆。两者都加载字体的 .woff 版本。任何其他信息，我很乐意提供。

导入字体的css是：

@font-face {
  font-family: 'Museo-700';
  src: url('path-to-eot');
  src: url('path-to-eot?') format('embedded-opentype'),
       url('path-to-woff') format('woff'),
       url('path-to-ttf') format('truetype');  
}

即使我删除了 woff 声明并且 ttf 提供了字体，问题仍然存在。

我真的很迷茫，不知道如何才能让它变得一样。

Answer 1

字体具有三组嵌入的垂直度量信息。一组用于 Mac，一组用于 PC，另一组通常由 *nix 使用。这些可能很难同步，但我们的字体生成器确实会尝试使这些值相同。试试看？

http://www.fontsquirrel.com/fontface/generator

来自 Google 字体团队的更多信息：

http://code.google.com/p/googlefontdirectory/wiki/VerticalMetricsRecommendations

Answer 2

我对这种字体也有同样的问题： http://www.fontsquirrel.com/fonts/Symbol-Signs

我下载了预打包的 @font-face 套件，但 Mac 和 PC 之间的指标不一致。

解决方案是从下载的套件中取出 TTF 字体，并使用它通过 Font Squirrel 的生成器导出新的 @font-face 套件。生成器在 Expert Settings 中有一个标记为“Fix Vertical Metrics”的复选框。确保在生成套件之前检查这一点。

Answer 3

如果您出于某种原因不能使用 FontSquirrel，您可以在本地执行该操作（甚至支持可变字体）。

下载字体工具：https://github.com/fonttools/fonttools

pip install fonttools

同时安装，Brotli：pip install brotli

现在您拥有与 FontSquirrel 在其服务器上使用的完全相同的依赖项。重新加载您的终端（关闭它并重新打开它）。现在，您的终端中应该可以使用ttx 命令了。

假设，我们想要修复字体foo.woff2（或 woff 或 ttf 或 otf）的垂直度量：

ttx foo.woff2
...
...

这会将其转换为人类可读的字体格式 - foo.ttx，您可以在 Sublime Text 中打开它。在 OS/2 指标下搜索“Win”并确保它们匹配。

您在这个巨大的 xml 文件中搜索的是：

• 赢升
• 胜利下降
• 错字上升
• 错字下降
• HHead 上升
• 头顶下降

Make Win Ascent = Typo Ascent = HHead Ascent

Make Win Descent = -Typo Descent = -HHead Descent（注意减号。例如，如果 Typo Descent = -320，Win Descent = 320。

关闭foo.ttx文件并使用ttx将其转换回ttf：

ttx foo.ttx
...
...

应该有一个新的foo.ttf 文件。我们现在需要使用 Google 的 woff2 库对其进行压缩：https://github.com/google/woff2

按照那里的说明运行woff2_compress foo.ttf，瞧，您的 woff2 字体具有干净一致的垂直指标！

Answer 4

为 line-height css 属性设置一个固定值，例如以 px 为单位。