重置 css 使 Google 字体的 @import 不起作用答案

【问题标题】：Reset css makes @import of Google font face not work重置 css 使 Google 字体的 @import 不起作用
【发布时间】：2016-07-07 13:42:50
【问题描述】：

我在我的其他 CSS 上方有 Meyers Reset Css 一行规则，但 Hind 字体不适用，而是使用 Times New Roman 出现。

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

为什么重置 Css 使我的 Hind 字体系列不适用？即使我将font-family:'Hind' 放在html { } 和body { } 中，它仍然只适用于Reset 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

【问题讨论】：

在演示中，您编写了@@import url(https://fonts.googleapis.com/css?family=Hind:400,600,700); 和两个@。正常吗？
已更新。我的错。现场演示：jsbin.com/yudeziqiki/1/edit?html,css,output

标签： css import font-family

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

只要把@import规则放在reset CSS之前，你的问题就解决了。

【讨论】：