如何修复 Google Chrome 中奇怪的字体渲染（一些较高的字符）？

Question

我想在我的网站上使用 Aller 字体，它在 Firefox 中似乎工作正常。然而，在 Chrome 中，'s' 和 'k' 字符（并且只有那些字符）比其他字符具有更大的高度。

字体在 Firefox（在 Linux 和 MacOS）、Chrome（在 MacOS）中正确呈现，但在 Linux 上的 Chrome 中不正确。 Linux 机器上未本地安装字体。

Css 规则：

@font-face {
  font-family: "Aller";
  src: url("../fonts/aller/Aller_Lt.ttf");
  font-weight: 400;
  font-style: normal;
}

Chrome (on Linux) 字体预览（好像不错）：

我网站上的文本屏幕截图，字体渲染不正确（更高 's'） Chrome:

在同一台机器上使用 Firefox 正确渲染字体的同一网站的屏幕截图：

如何确保 Chrome 中的字体显示正确？这是 Chrome、我的代码还是字体本身的问题？

Answer 1

这通常是字体没有提示或提示不正确的问题。您可以在字体中配置 PS 私人设置（称为 BlueValues 或 OtherBlues - more information on these here），这有助于将所有字符保持在同一行上，就像这样 - 如果它们不存在，渲染只选择最近的像素而不考虑它是否高于其他像素。这个问题在较大的字体大小下会不太明显，并且会像您所看到的那样因浏览器而异。

似乎没有提示此字体 - looking at the specimen page，您可以在 alphabet 的 a 和 p 中看到类似的问题。如果您对此感兴趣（并且许可证允许），我建议尝试使用提示字体，或自己添加提示。

如何修复 Google Chrome 中奇怪的字体渲染（一些较高的字符）？

How to fix strange font rendering (some taller characters) in Google Chrome?

css

fonts

google-chrome