在不同浏览器中显示字体

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

font-weight: 600;

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

Answer 2

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

-webkit-font-smoothing: antialiased;

-moz-osx-字体平滑：灰度；

如果不是，那么font-weight:500（字体粗细也因字体而异）根据您使用的字体，它会使字体变粗。

Answer 3

你可以使用 font-weight: bold :- 如果你需要文本看起来像粗体，或者你可以给一些值 500-900 来匹配 zeplin 中的设计。

希望它能在所有浏览器中正常工作，如果给值 "bold"。

在不同浏览器中显示字体

Display fonts in different browsers

html

css

zeplin