Google如何实现此字体粗细？

Question

我一直在尝试使用Google在其菜单上使用的相同字体，但我似乎无法复制当时所获得的厚度。

据我所知，字体细节如下：

color: #FFF;
font-family: 'Open Sans';
font-weight: 400;
font-size: 16px;

我使用了相同的风格，但不能为我的生活弄清楚他们如何设法“加厚”字体，以便它不会在黑暗的背景中迷失。

我尝试过字体粗600，而且太厚了。

这是一张图片作为例子。

他们有可能改变了他们自由提供的'Open Sans'字体吗？

Answer 1

我自己并没有太大的区别，但你可以用最小的文字阴影来增加它的重量：text-shadow: 0 0 ;

  

另外，请查看确实使用的https://www.google.com/fonts#QuickUsePlace:quickUse

     

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>

     

或

     

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

div,
p {
  color: #FFF;
  font-family: 'Open Sans';
  font-weight: 400;
  font-size: 16px;
  background: #4386FC;
  padding: 1em;
  margin: 1em;
}
p {
  background: #AB0909
}
th:first-child,
td:first-child {
  text-shadow: 0 0;
}
caption {
  font-size: 1.5em;
}
table {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.2)50%, rgba(0, 0, 0, 0.1)50%), linear-gradient(to bottom, transparent 2em, #AB0909 2em, #AB0909 57%, #4386FC 57%);
}
table:hover {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2)50%, rgba(0, 0, 0, 0.1)50%), linear-gradient(to bottom, transparent 2em, #AB0909 2em, #AB0909 57%, #4386FC 57%);
}

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<table>
  <caption>be text-shadowed or not</caption>
  <thead>
    <tr>
      <th>text-shadow:0 0</th>
      <th>no text-shadow</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>test font</div>
        <p>test font</p>
      </td>
      <td>
        <div>test font</div>
        <p>test font</p>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

http://www.elfboy.com/blog/text-shadow_anti-aliasing/

必须为文本元素添加font-smoothing属性。一般访问者使用具有自己的渲染技术的不同浏览器或设备查看您的网页，您是否在样式表中包含媒体查询？