行高在Mac和Windows上的表现不同。

Question

我有一段使用非网页字体的文本，我已经使用@font-face解决了这个问题。

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

这张图片中蓝色框表示的是行高。

我发现了类似的问题，但它并没有给出可行的解决方案。

- Alok Jain

---

你在两台机器上都安装了相关字体吗？这只是一个初步的想法。 - Jon Holland

这篇其他的SO帖子可能会有所帮助链接。 - Jon Holland

如果这是一个网络字体，请尝试使用Font Squirrel Webfont Generator中的“修复垂直度量（在浏览器间进行标准化）”选项来规范化字体文件中的行高设置；这可能会解决问题（取决于字体）。 - feeela

Answer 1

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

Font Squirrel在“专家”选项下有一个选项，“自动调整垂直度量”，这可能适用于您。

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

- MarvinVK

Answer 2

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

- Arlyn Nguyen

---

无法修复.otf字体中的度量标准。 - diesel94

Answer 3

我们遇到了一个问题，即在Windows系统中出现了垂直滚动条，而其他操作系统则没有。我们很快发现，在不同的浏览器中设置line-height会产生不同的效果，尤其是如果您使用systemfont-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. 无单位的 line-height：例如：1.2，1.5等。请在其他操作系统中仔细检查差异，因为对视觉行高的影响可能因操作系统而异。
2. 根本没有 line-height。重新考虑一下为什么首先要使用 line-height，以及是否真的应该只覆盖 body 上的样式并将其余部分留给渲染器。
3. 如果您必须在所有浏览器中保持一致性，则在容器上应用 overflow-y: hidden 作为最后的手段。

但是，如果您不希望出现差异，为什么要使用 system 字体呢？

- user1429980