At-Rules: @import, @media, and @font-face

每个 at-rule 都以一个“at sign”开头，如果你想说得不那么有趣的话，就是“@”符号。

导入

让我们从简单的 @import 规则开始。它用于将另一个样式表“粘合”到您现有的样式表中。

@import url(morestyles.css);

当一个网站需要长而复杂的样式表时，如果将它们分解成更小的文件，管理起来可能会更容易，这时就可以使用此功能。

@import 规则必须放在样式表的顶部，在任何其他规则之前。

定向媒体类型

@media 可用于将样式应用于特定媒体，例如打印。

@media print {
    body {
        font-size: 10pt;
        font-family: times, serif;
    }

    #navigation {
        display: none;
    }
}

“@media”后面的值可以包括 screen、print、projection、handheld 和 all，或者一个包含多个值的逗号分隔列表，例如：

@media screen, projection {
    /* ... */
}

嵌入字体

@font-face 已经存在很长时间了，但在其生命的大部分时间里几乎没有用处。CSS 3 对其进行了改进，现在它被广泛用作在网页中嵌入字体的技术，这样即使字体不在用户的计算机上，也可以使用该字体。因此，您不再需要依赖“网页安全”字体，如 Arial 或 Verdana。令人兴奋的时代。

深入了解…

@font-face {
    font-family: "font of all knowledge";
    src: url(fontofallknowledge.woff);
}

这会创建一个名为“font of all knowledge”的字体，使用 font-family 描述符，并通过 src 描述符将“fontofallknowledge.woff”字体文件链接到该名称。然后，“font of all knowledge”可以用于标准的字体规则，例如：

p { font-family: "font of all knowledge", arial, sans-serif; }

字体将被下载（在这种情况下是从 CSS 文件所在的同一个目录）并应用于段落。如果浏览器太落后无法处理闪亮的新字体，它将简单地回退到列表中下一个标准的字体。神奇！

您还可以通过逗号分隔的列表查找多个字体来应用于该规则。通过将 src 值中的“url”替换为“local”，还可以检查用户计算机上是否已存在某个字体，从而无需下载它。

而且，因为一个字体文件可能包含多种字重或样式，您可能还想指定您感兴趣的特定样式。因此，@font-face 规则最终可能看起来像这样：

@font-face {
    font-family: "font of all knowledge";
    src: local("font of all knowledge"), local(fontofallknowledge), url(fontofallknowledge.woff);
    font-weight: 400;
    font-style: normal;
}