在不同的浏览器中显示字体

Question

在Zepplin中绘制了一个设计。有一种字体

font-family: HelveticaNeue;
font-size: 16px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #888888;

但是由于某种原因，它在浏览器中的显示比设计中的显示要薄得多。可能是什么问题？

图片中顶部浏览器下方的设计：

Answer 1

在这里，您需要将font-weight属性放到600中，如下所示

  

字体粗细：600；

其背后的原因是，当我们将font-weight设置为600以下时，它将显示正常文本；而如果将font-weight设置为600-900之间，则将显示加权文本。

Answer 2

您可以使用font-weight：粗体：-如果您需要使文本看起来像粗体，否则您可以给值500-900以匹配Zeplin中的设计。

希望将值设为“粗体”在所有浏览器中都能正常工作。

Answer 3

@Alexandr Kizilow某些字体因浏览器而异。在下面使用：

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing：灰度；

如果不这样做，则根据您使用的字体，使font-weight:500（字体的权重因字体而异）会变粗。