Question

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

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

编辑：很遗憾，作为新用户，我无法发布图片，因此以下是说明：

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

两者都在Chrome上测试过，当然它背后的html / css相同（它是同一页面）。在代码和chrome的检查器工具上没有底部边距/填充。相同的行高。字体是Museo。两者都加载.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。这些可能很难同步，但我们的Font-face Generator确实尝试使这些值相同。试一试？

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套件。生成器在专家设置中有一个标签为“修复垂直度量标准”的复选框。在生成工具包之前，请确保已选中此项。

Answer 3

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

Answer 4

如果您因某种原因不能使用 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 文件中搜索的是：

Win Ascent
胜利下降
错字上升
错字下降
HHead 上升
头部下降

Make Win Ascent = Typo Ascent = HHead Ascent

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

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

ttx foo.ttx
...
...

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

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

OS之间具有不同垂直度量的自定义字体

4 个答案: