箱尺寸：使用谷歌的字體

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