箱尺寸：使用谷歌的字体

Question

我加载谷歌字体，但除了我想设置当边界框复位FONT-FAMILY我所有的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 1日的声明（除字符集规则）

的@import CSS的规则是用来从其它样式表 导入样式规则。这些规则必须先于所有其他类型的规则，除了 @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