Chrome中忽略字体粗细

Question

我创建了一个小提琴，试图使用字体权重为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）在字体粗细：300（轻量级）和字体粗细：400（正常）下渲染时有所不同，但在Chrome（版本33.0.1750.117）中没有差异，其中所有内容看起来都像是以字体权重：400呈现的。是我做错了什么还是 Chrome 中存在错误？是否有任何已知的解决方法？

更新：

chrome肯定有问题，我在chrome的两个不同窗口中打开了同一页面的两个实例。一种是渲染字体ok（300磅对应于轻变体），另一种不是（300磅与普通变体相同）。有线索吗？我已经确保在每个选项卡中刷新页面，以便它们实际上是相同的页面。

更新 3 这不是这个的副本。在这个问题上，问题是“Arial Black”和“Arial”实际上是不同的字体。就我而言，Open Sans是唯一的字体，问题是Chrome有时会拾取不正确的权重。从屏幕截图中可以看出，即使在两个实例之间，Chrome 也与呈现的字体不一致。

Answer 1

尝试将字体系列更改为'Open Sans Light'， sans-serif；。我也有同样的问题，这对我有用。

Answer 2

这似乎是一个Chrome/Chromium错误，是由于在您的系统上本地安装了字体所致。其他浏览器似乎没有受到这个问题的影响。

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

出于某种原因，它将只加载您的本地字体，并忽略您的任何ftt-权重规则，即使它们是！重要的。它甚至不会与自己保持一致：字体权重可以在选项卡和页面重新加载之间随机变化。

最简单的解决方法是删除字体，但如果您需要它做其他事情，这可能是一个问题。

您也可以尝试将字体重命名为其他字体，以迫使Chrome使用您的Web字体并遵守您的CSS字体规则。

Answer 3

将此添加到您的 CSS 中：

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