webkit和firefox中的字体权重不同答案

【问题标题】：font weights differing in webkit and firefoxwebkit和firefox中的字体权重不同
【发布时间】：2012-10-20 02:11:59
【问题描述】：

我正在完成一个设计，到目前为止我一直在 firefox 中工作，只是在我第一次注意到我的标题完全不同的时候将它带到 webkit，它们在 Helvetica Neue UltraLight 50px 中，所以在 css 中：

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

在 Firefox 中查看时，它看起来像左边的版本

在 webkit (safari, chrome, ios safari) 中查看它看起来像右边的版本

知道如何将这两者拉得更近吗？

如果有人想玩css，我还做了一个小jsfiddle，

【问题讨论】：

jsFiddle 中的@font-face 声明在哪里？
我没有使用一个，它使用系统字体完成，并回退替代品
啊！那就是问题所在。使用@font-face 以便它可以修复！ :)
没有@font-face 就没有办法运行它吗？由于必须获得 helvetica 使用许可的复杂性
Webkit 浏览器有垃圾字体渲染，没有像 cufon 这样的东西，你无能为力。这就是为什么我总是首先在 Chrome 中选择字体，因为我知道那是它们看起来最糟糕的地方。就我个人而言，在使用 Cufon 之前我会接受它，但每个人都有自己的。

标签： css fonts cross-browser typography

【解决方案1】：

将其添加到样式表顶部附近

/**
 * 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 将一些较粗的字体呈现为粗体，而它们应该呈现为正常粗细。

来自website的参考。

【讨论】：

【解决方案2】：

尝试：-webkit-text-stroke: 0.35px

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

【讨论】：

请提供更多详细信息和答案。这几乎就像一个仅链接的答案。（问题太老了）

【解决方案3】：

从图片中可以看出，Firefox 使用的是家族中较粗的字体。我猜不出原因，也无法在我的电脑上进行测试——就像全球大多数电脑一样，它没有 Helvetica Neue 字体。

字体可用性可能是这里最重要的问题。您的font-family 列表在（几乎所有）Windows 计算机上导致使用 Arial。这意味着使用的是正常重量（常规）字体，因为 Arial 没有更细的字体。

所以最好的方法可能是寻找一种免费的可下载字体并通过@font-face 使用它。但是，大多数此类字体只有两种粗细，甚至可能只有一种，因此如果您想要同时存在 300 和 100 粗细的字体，则需要关注相对较少的字体，例如至少 6 种字体.也许Source Sans Pro 的设计足够相似——或者至少是可接受的设计。

【讨论】：

【解决方案4】：

过去我很幸运，因为讨厌的 webkit 字体显示得比预期的要粗：

-webkit-font-smoothing: antialiased;

我还建议使用 CSS @font-face 来显示 Helvetica Neue 字体。默认情况下，Helvetica Neue 并非在所有计算机和操作系统上。希望这可以帮助！ :)

【讨论】：

感谢帕克，它的方法很有趣，但在这种情况下，它所做的只是删除抗锯齿
就像上面 Rick Calder 说的，webkit 有垃圾字体渲染。我肯定会和 Helvetica Neue 一起研究 @font-face - 您是否浏览过 Google 字体以寻找类似的替代品？
Raleway 可能是一个不错的选择：google.com/webfonts/specimen/Raleway