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

Question

我有非网络字体的文字，我使用了@font-face。

它在Windows上的所有浏览器中运行良好，但在Mac上的所有浏览器中都是最佳对齐。

此图片中的蓝框是行高。

我找到this similar question，但它没有提供可行的解决方案。

Answer 1

如果使用不同的字体解决问题，问题在于字体，而不是CSS。

Font squirrel在“expert”下有一个选项，您可以选中“自动调整垂直度量标准”，这可能对您有用。

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

尝试使用css属性“vertical-align：middle”，这可能会解决问题。