重置css会使@import的Google字体无效

Question

我的Meyers Reset Css一行规则就在我的其他CSS之上，但是Hind字体没有应用，而是使用Times New Roman它出现了。

如果您注释掉重置Css行，则应用Hind字体。

为什么重置Css使我的Hind字体不适用？即使我将font-family:'Hind'放在html { }和body { }中，它仍然只适用于重置Css不存在的情况。

我的Css：

// Reset Css bunch of rules here
@import url(https://fonts.googleapis.com/css?family=Hind:400,600,700);
html { background: #F5F5F5; font-family: "Hind"; } 

现场演示：http://jsbin.com/yudeziqiki/1/edit?html,css,output

Answer 1

您必须在重置前放置@import。

@import url(https://fonts.googleapis.com/css?family=Hind:400,600,700);
/* Meyers Reset Css Here */

Answer 2

  

@import CSS at-rule用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，[...]   MDN

只需在重置CSS之前放置@import规则，您的问题就会解决。