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

Question

我正在尝试解决一个恼人的字体问题。特定 Googles Roboto 字体。

问题是，在我的测试中，字体在深色背景上看起来更浓（粗）（Chrome 62.0.3202.62 在 OSX Sierra 10.12.6 上），而它在谷歌上播放效果很好深色字体版本（https://fonts.google.com/specimen/Roboto?selection.family=Roboto:300,500,700 - 选择深色背景）。

我的出场截图：

vs Google 出现（它的光）

我开始相信我的渲染有问题，但在几台设置不同的机器上尝试后，一切都一样。

有人知道如何解决这个问题吗？或者解释为什么 Google 和我的测试不同。

Url 用于测试： 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;

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

Font appear to be stronger on dark background

css

fonts

roboto

google-fonts