3

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

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

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

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

firefox helvetica neue 超轻 webkit helvetica neue 超轻

知道如何让这两者更接近吗？

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

4

4 回答 4

8

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

-webkit-font-smoothing: antialiased;

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

于 2012-10-30T17:24:23.100 回答
2

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

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

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

于 2012-10-30T18:01:26.680 回答
2

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

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

于 2014-03-16T01:52:08.507 回答
0

在样式表顶部附近添加

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

来自网站的参考。

于 2018-08-28T14:44:40.997 回答