html - 在不同浏览器中显示字体

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: bold :- 如果您需要文本看起来像粗体，否则您可以给出一些值 500-900 以匹配 zeplin 中的设计。

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

Answer 3

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

-webkit-font-smoothing: antialiased;

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

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