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

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

首先，以下是了解问题的图片

编辑：不幸的是，作为一名新用户，我无法发布图像，因此以下是说明：

问题是字体基线和它下面的元素之间的距离。在我的ubuntu机器上有一个无法解释的缺口，那就是它不是一个填充/空白。即使您选择了文本，它看起来也没有对齐

两者都在Chrome上测试过，后面是相同的html/css当然是相同的页面。在chrome的代码和inspector工具上都没有底部边距/填充。相同的线高度。字体是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提供字体时，问题仍然存在

---

我真的很迷茫，不知道如何才能做到这一点。

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

来自Google type团队的更多信息：

---

我对这种字体也有同样的问题：

我下载了预先打包的@font-face工具包，Mac和PC之间的指标不一致

---

解决方案是从下载的工具包中取出TTF字体，并使用它导出一个带有font Squirrel生成器的新@font face工具包。生成器在专家设置中有一个标记为“修复垂直度量”的复选框。在生成工具包之前，请确保选中此选项。

为行高css属性设置一个固定值，例如px。

如果出于任何原因无法使用FontSquirrel，您可以在本地执行此操作，甚至支持可变字体

下载FontTools：

pip安装工具

同时安装，Brotli:pip安装Brotli

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

比如说，我们希望修复foo.woff2或woff或ttf或otf字体的垂直度量：

ttx foo.woff2
...
...

这将把它转换成一种人类可读的字体格式-foo.ttx，您可以用升华文本打开它。在OS/2指标下搜索胜利，并确保它们匹配

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

胜利攀登 胜利后裔 打字错误上升 打字错误血统 抬头上升 黑德血统 使胜利上升=打字错误上升=头部上升

使成功下降=-错字下降=-HHead下降记下减号。例如，如果输入错误下降=-320，则Win下降=320

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

ttx foo.ttx
...
...

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

---

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

你可以发布图片的链接，有更多代表的人可以将其编辑到你的帖子中。我看到你的评论太晚了，说实话，但我已经使用了你的生成器，它解决了我的问题。非常好的工具，非常感谢您提供给我们：非常感谢！解决了我的字体度量问题-很明显，在此之前我使用了一个糟糕的转换器。除了fontsquirrel，还有其他具有垂直度量选项的转换器吗。因为它不允许我转换商业字体。我有同样的问题！！！ZOMG问题Twinzzz！！！我以为只有我一个人。我遇到问题的字体是：你给安东尼奥修好了吗？因为我按照peterhry的建议重新生成了不同的webfont文件，并启用了Fix Vertical Metrics，但同样的问题仍然存在。。。