css - 行高在 Mac 和 Windows 上的工作方式不同

Question

我有一个非网络字体的文本，我用过@font-face这个。

它在 Windows 上的所有浏览器中都可以正常工作，但在 Mac 上的所有浏览器中都对齐。

此图像中的蓝色框是行高。

我发现了这个类似的问题，但它没有提供可行的解决方案。

Answer 1

如果通过使用不同的字体解决了问题，则问题出在字体上，而不是 CSS 上。

字体松鼠在“专家”下有一个选项，您可以在其中检查“自动调整垂直指标”，这可能对您有用。

https://www.fontsquirrel.com/tools/webfont-generator

Answer 2

我们有一个错误，即垂直滚动条出现在 Windows 而没有其他操作系统中。我们很快发现该设置line-height在不同的浏览器中具有不同的效果，尤其是如果您使用system font-family:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

不同的line-height问题可以通过以下方式解决：

1. A unitless line-height : 例如：1.2,1.5等。在其他操作系统中仔细检查差异，因为对视觉行高的影响可能因操作系统而异。
2. 完全没有line-height。重新考虑为什么你line-height首先拥有它，以及你是否真的应该覆盖它body并将其余的留给渲染器。
3. 如果您必须在所有浏览器之间保持一致性，overflow-y: hidden则作为最后手段应用容器。

system但实际上，如果您不期望差异，为什么要使用字体呢？

Answer 3

您可以转换字体，使用https://transfonter.org/并启用“修复垂直度量”选项，解决了我的问题。