box-sizing：使用谷歌字体时边框重置字体系列

Question

我正在加载Google字体，但另外我想将所有html标记设置为border-box

* {
  box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css?family=Heebo:400,700,900');
 body {
  font-family: 'Heebo';
}

现在由于某种原因由于border-box 而无法正常工作，如果我按照此顺序将其设置为可行的话：

@import url('https://fonts.googleapis.com/css?family=Heebo:400,700,900');
 * {
  box-sizing: border-box;
}
body {
  font-family: 'Heebo';
}

你知道为什么吗？

Answer 1

因为@import必须是CSS中的第一个声明（除了Charset规则）

  

@import CSS at-rule用于从其他样式导入样式规则   床单。这些规则必须先于所有其他类型的规则，除外   @charset规则;因为它不是嵌套语句，@import不可能   在条件组at-rules中使用。

如果您将谷歌字体用作link rel="stylesheet

，那会更好

*, *::before, *::after {
  box-sizing: border-box;
}
body {
  font-family: 'Heebo';
}

<link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet">
test