ボックスサイズ：ボーダー・ボックスのリセットフォントファミリ

Question

をGoogleのフォントを使用しているとき、私はGoogleのフォントをロードしていますが、加えて、私はいくつかの理由で今border-box

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

ようにすべての私のhtmlタグを設定したい私はそれが動作します。このためには、それを出してあげる場合には、理由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での第一の宣言でなければならないので

のルール@import CSSは、他のスタイル シートからスタイル規則をインポートするために使用されます。これらのルールは、 @charsetルール以外のすべてのタイプのルールに先行する必要があります。ネストされたステートメントではないため、@importは に条件付きグループat-rulesで使用することはできません。

import`は、常にスタイルシートの最初の行である必要があります@私は場合は、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