在深色背景上字体看起来更强

Question

我试图绕过一个令人恼火的字体问题。特定的谷歌Roboto字体。

问题是我的测试中的黑色背景上的字体看起来更强（胖）（OSX Sierra 10.12.6上的Chrome 62.0.3202.62），而谷歌黑色字体版本（https://fonts.google.com/specimen/Roboto?selection.family=Roboto:300,500,700）则表现不错 - 选择深色背景。）

我出现的屏幕截图：

vs Google出现（很明显）

我开始相信我的渲染有问题，但是在几台具有不同设置的机器上尝试这个之后，它们都是一样的。

有人知道如何解决这个问题吗？或解释为什么谷歌与我的测试之间存在差异。

用于测试的网址： https://jsfiddle.net/fb3umv2e/

.btn {
   display: inline-block;
   padding: 7px 8px;
   text-align: center;
   background: #fff;
   color: #000;
   font-family: "Roboto";
   font-weight: 300;
   text-decoration: none;
   font-size: 20px;
 }
 .btn.inverted {
   background: #222;
   color: #fff;
 }

祝你好运 理查德

Answer 1

尝试将这些添加到按钮样式中：）

-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;