如何补偿网页上 Windows 上呈现不同的字体答案

【问题标题】：How can I compensate for fonts rendering differently on windows on a web page如何补偿网页上 Windows 上呈现不同的字体
【发布时间】：2020-11-10 07:35:28
【问题描述】：

我有一个带有文本和图像的网页。我想将文本非常精确地放在图像上。

我发现使用我使用的字体时，在 Windows 上查看页面时，所有内容都会向下移动大约 4 像素。在 Mac、iphone 和 android 上放置正确。

如果我使用 Courier New 作为字体，则不会发生这种情况，所以我知道问题出在字体上，但是我别无选择，只能使用此字体。

有没有办法纯粹在 CSS 中弥补这一点，还是我需要一个 javascript 回调来检测窗口并添加一个类以便我可以处理它？

【问题讨论】：

标签： css fonts operating-system

【解决方案1】：

首先，我会尝试调整 ling 高度，如果这不起作用，那么我认为你需要编辑字体本身，你可以使用这个网站：https://transfonter.org/，上传你的字体文件并转换它对于您使用的格式，重要的是检查此切换按钮，它会调整字体中的一些属性，因此在不同的操作系统上具有相似的体验

如果这不起作用，有一个名为 fontforge 的程序可以让您更改字体指标，有关更多信息，您可以查看这个问题 Font Rendering / Line-Height Issue on Mac/PC (outside of element)

【讨论】：