字体权值中的webkit和Firefox不同(font weights differing in w

林最后确定其香港专业教育学院在Firefox一直致力于索利到这点的设计，只是把它对面的WebKit在第一时间通知香港专业教育学院是我的标题颇为不同配发，他们是Helvetica Neue字体超轻50像素，所以在CSS：

font-family: "helvetica neue"; font-weight:100; font-size:50px;

在Firefox浏览时，它看起来像左边的版本

在WebKit的浏览（Safari浏览器，镀铬，IOS野生动物园），它看起来像右边的版本

任何想法如何，我可以把这两进一步靠得更近？

香港专业教育学院还做了一个小的jsfiddle ，如果任何人想要玩的CSS，

Answer 1:

我已经在过去的讨厌的WebKit的字体显示比预期更大胆的运气与此：

-webkit-font-smoothing: antialiased;

我也建议使用CSS @字体面显示Helvetica Neue字体的字体。 Helvetica Neue字体是不是在默认情况下所有的计算机和操作系统。希望这可以帮助！ :)

Answer 2:

尝试：-webkit-文本行程：0.35px

在这里阅读更多： http://css-tricks.com/beefing-up-dull-text-in-webkit/

Answer 3:

从图像，它看起来很明显，Firefox是使用家庭较厚的字样。我无法猜测为什么，我不能在我的电脑上测试 - 就像在地球上的大多数计算机上，它没有Helvetica Neue字体的字体。

和Font可用性可能是这里最重要的问题。你的font-family名单引起的（几乎所有）的Windows计算机是Arial字体将被使用。这意味着，体重正常的（常规）字体时，由于Arial字体没有更薄字体。

所以，最好的办法可能是寻找一个免费下载的字体，并通过使用@font-face 。然而，大多数这样的字体都只有两个权重，或甚至是一个，所以你需要把重点放在有，比方说，至少6字体相对较少的字体，如果你想要的东西，都存在300和100的重量。也许来源三世临可能是足够相似设计的-或者至少是可以接受的设计。

Answer 4:

增加这个的顶部附近的样式表

/**
 * Fix fonts that render as bold in Firefox
 *
 * Put this near the top of your style.css
 * Before any overriding styles
 */

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-weight: 400;
}

/**
 * Firefox specific rule
 */

@-moz-document url-prefix() {
  body {
    font-weight: lighter !important;
  }
}

该-moz前缀规则只针对Firefox浏览器。该-webkit前缀规则针对Chrome和Safari浏览器，它使用了WebKit渲染引擎的浏览器。

注意：如果还使用text-rendering: optimizeLegibility在样式表中，可导致Internet Explorer呈现一些较厚的字体为粗体时，他们应该呈现为正常体重。

从参考网站。

文章来源: font weights differing in webkit and firefox