6

我正在尝试为正在构建的页面包含自定义字体。我的问题是字体垂直对齐在我的 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 提供了字体，问题仍然存在。

我真的迷失了这个，不知道我怎么能让它变得一样。

4

4 回答 4

10

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

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

来自 Google 类型团队的更多信息：

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

于 2012-04-06T18:06:46.870 回答
4

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

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

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

于 2012-04-19T23:14:59.500 回答
1

如果您出于某种原因不能使用 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上升
  • HHead Descent

Make Win Ascent = Typo Ascent = HHead Ascent

使 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 字体具有干净一致的垂直指标！

于 2021-01-24T08:03:53.947 回答
0

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

于 2012-09-26T05:42:01.927 回答