在MacOS上Safari和Chrome之间的Lato字体粗细显示不同

Question

为什么即使我的网站CSS相同，拉丁字体在Chrome（MacOSX）上的重量也比在同一台机器上的Safari稍重一些？

Answer 1

正如您在本答案中所看到的：Font weight turns lighter on Mac/Safari

...使用

-webkit-font-smoothing: subpixel-antialiased;
使字体在Safari中显示与Chrome中相同（更粗）。

...或

-webkit-font-smoothing: antialiased;
使字体在Chrome中显示与Safari（更薄）相同。

Answer 2

在MacOS上对Safari，Chrome和Firefox上的字体进行规范化的最佳方法实际上并不是让它们在Safari中变得更厚，而是为了让它们在Chrome和Firefox中变得更薄：

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

这将使所有字体更像Safari呈现它们，尽管更加清晰。 Windows倾向于使字体比Mac轻，因此这也应该规范化Windows和Mac上的字体。