你2016年的问题在2020年仍然存在，我最近注意到了。所以我认为回答这个老问题还是可以的。
解决方案是为MacOS上基于webkit的浏览器定义一个特殊的css属性。请在body标签中插入以下css：

-webkit-font-smoothing: antialiased;

这会改变Safari和Chrome中MacOS上的字体外观，使其看起来像MacOS上的Firefox和Windows上的Chrome。作为副作用，正常字体将显示得更细。
顺便说一句，www.example.com的网站apple.com也使用此css设置。
背景在这里详细描述：https://www.uv.mx/personal/gvera/stop-fonts-looking-bold-on-mac-browsers/
解决方案的简短摘要：“Mac使用子像素渲染来提高显示屏的表观分辨率，这有助于渲染更清晰、更锐利的文本。这就是为什么即使没有设置，文本看起来也更大胆。因此，在Safari和Chrome浏览器上，您可以关闭子像素渲染，而是使用标准的抗锯齿技术来使字体看起来更平滑。”

我可能找到了解决方案：https://bugs.chromium.org/p/chromium/issues/detail?id=31833
Chrome中似乎有一个带有@font-face的bug。