在Chrome中显示为常规粗体的额外粗体字体

Question

我正在尝试使用这种字体，Open Sans Extra-Bold： https://fonts.google.com/specimen/Open+Sans

出于某种原因，我无法展示它。

任何帮助？

JSFiddle：https://jsfiddle.net/0hhbgyrd/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
div {
  font-size: 90px;
  font-family: Open Sans;
  text-transform: uppercase;
}

.normal {
  font-weight: 400;
}

.bold {
  font-weight: 700;
}

.extra-bold {
  font-weight: 800;
}

<div class="normal">
  Blog
</div>

<div class="bold">
  Blog
</div>

<div class="extra-bold">
  Blog
</div>

编辑：似乎这在Firefox中正常运行，但在Chrome中无效？

铬：

火狐：

Answer 1

修复Google字体提供的错误的@import代码。

他们提供的导入代码也给我带来了问题，而且它没有＆＃39; -marks在更新整个Google字体页面之前，因此它们在更新过程中打破了代码。

我几个月前发送了一个修补程序请求，当时他们没有包含在里面的代码（），这当然也没有用。他们修好了但离开了 - 标记，所以它适用于某些人，但肯定不适用于所有人。

所以删除那些＆＃39; -marks它应该可以正常工作：

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,800);

而不是

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');

我还建议使用正确的font-family标记：

font-family: 'Open Sans', sans-serif;