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

Question

我有 Meyers Reset Css 一行规则，就在我的另一行 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

Answer 1

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

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

Answer 2

The @import CSS at-rule is used to import style rules from other style sheets. These rules must precede all other types of rules, [...]
MDN

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

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

Reset css makes @import of Google font face not work

css

import

font-family