CSS字体

我会把 @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/