我会把 @import 和 @font-face 搞混，主要还是因为对这两个的概念不清楚。然而，它们两个差别巨大，根本就是两件事。
@import
用于从其他样式表导入样式规则。
@font-face
用来自定义字体，通常它的用法是：
@font-face {
font-family: 'my font';
src: url(http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf) format('ttf');
font-weight: bold;
}
body {
font-family: 'my font';
font-weight: bold;
}
如此，我们定义了一个叫做my font的字体。 而且这个字体在font-weight:bold时候才会渲染。src除了可以使用url，还可以使用local用来加载本地的字体资源。
google fonts
上述问题是在使用google fonts中产生的。google fonts的用法之一是：
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap');
现在我知道这其实是在加载另一个样式表，被加载的样式表的部分内容是：
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
原来加载是利用@font-face自定义的字体定义信息。
其他很想说的是，google fonts可以只针对某些字符使用某种字体，这就可以丰富我们的字体设置，比如阿拉伯数字使用一种字体，其他字符使用另外一种字体。用法是：
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap&text=0123456789');
CSS中的@符号
探究这一块，就需要知道at-rule这个词汇。@在英文中叫做“at”，所以，CSS中的@规则被称为“at-rule”。
有关CSS的“at-rule”可以参考：
https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule
https://css-tricks.com/the-at-rules-of-css/
