是什么导致Web字体在Windows和Mac上看起来不同？

Question

我正在使用通过以下方式从Google字体加载的IBM Plex：

<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100,100i,400,400i,700,700i" rel="stylesheet">

我正在使用Bootstrap 4，我的自定义样式表（在bootstrap.min.css之后加载）说：

body {
  font-family: 'IBM Plex Sans', sans-serif;
}

在Mac之间，无论使用哪种浏览器，我的外观都始终保持不同：

和Windows 10：

即使字体是相同的，粗细似乎也不相同，字符高度也不相同。 如何确保Windows版本看起来更像Mac版本？

Answer 1

问题是每个平台呈现字体的方式有所不同。有些字体在所有平台上都呈现相同的字体，但有些则不能，因此您将无法避免这种情况。

通常最安全的字体是：Arial，Times New Roman，Helvetica。

有时，对于某些字体，我使用了这些css属性来对字体进行规范化，它们看起来相同，但是取决于字体：

-webkit-font-smoothing: antialiased; font-weight: normal;

希望对您有帮助。