css - 暗い背景ではフォントが強く見える

Question

フォントに関する厄介な問題を回避しようとしています。特定の Googles Roboto フォント。

問題は、私のテスト (OSX Sierra 10.12.6 の Chrome 62.0.3202.62) では、暗い背景ではフォントがより強く (太く) 見えることですが、Google の暗いフォント版 ( 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;
 }

よろしくリチャード