MacOS上Safari和Chrome的Lato字体权重不同

Question

为什么即使我的网站CSS是相同的，Lato字体在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之间的字体正常化。