Chrome中忽略字体粗细

Question

我创建了一个小提琴试图使用font-weight 300的Open Sans字体:

HTML

<span class="demo">example</span>

CSS

.demo {
  font-weight: 400 !important;
  font-family: 'Open Sans' !important;
  font-style: normal;
  font-variant: normal;
}

我使用谷歌字体来定义CSS

我可以看到Firefox(Ubuntu 13.10)在font-weight:300(轻量级)和font-weight:400(正常)下渲染时的差异,但在Chrome(版本33.0.1750.117)中没有,其中所有内容看起来都是在渲染时字体重量:400.我做错了什么或Chrome中有错误吗？有没有已知的解决方法？

更新:

Chrome肯定存在问题我在Chrome中的2个不同窗口中打开了同一页面的两个实例.一种是使字体呈现正常(300重量对应于光变体)而一种不是(300重量与正常变体相同).有线索吗？我确保刷新每个标签页面,使它们实际上是同一页面.

更新2:附上截图:错误:

更新3 这是不是重复的这个.在那个问题中,问题是"Arial Black"和"Arial"实际上是不同的字体.在我的情况下,Open Sans是唯一的字体,问题是Chrome有时会收到不正确的重量.从截图中可以看出,Chrome与两个实例之间渲染的字体不一致.

Answer 1

将其添加到您的CSS:

* {-webkit-font-smoothing: antialiased;}

Answer 2

这似乎是Chrome/Chromium错误,因为您的系统上已安装了本地字体.其他浏览器似乎没有这个问题.

到目前为止,它似乎发生在Linux和Windows上(已确认).

出于某种原因,它只会加载您的本地字体并忽略您的任何font-weight规则,即使它们是!important.它甚至不会与自身一致:字体重量可以在选项卡和页面重新加载之间随机变化.

最简单的解决方法是删除字体,但如果您需要其他内容,这可能是一个问题.

您也可以尝试将字体重命名为其他内容,以强制Chrome使用您的网络字体并遵守CSS字体规则.

Answer 3

我在使用可变字体时遇到了这个问题。通过在字体定义中定义字体粗细范围来解决这个问题。

\n

@font-face {\n  font-family: \xe2\x80\xa6;\n  font-weight: 1 999;\n  src: \xe2\x80\xa6;\n}\n

\n

Answer 4

我将它们重叠在一起，它们在 osx chrome 上看起来不错。

font-weight: 400 !important;

下面

font-weight: 300 !important;

http://jsfiddle.net/gpmXe/22/