Question

我偶然发现了this question，我注意到用户正在使用我以前从未见过的一些符号：

@font-face {
   /* CSS HERE */
}

这个@符号在CSS3中是新的，还是我曾经忽略过的旧东西？这类似于您使用#的ID，还是使用.的类？谷歌没有给我任何与此相关的好文章。 CSS中@符号的用途是什么？

Answer 1

@自CSS1 @import时代开始出现，尽管它在最近的@media（CSS2，CSS3）和@font-face（CSS3）中变得越来越常见）结构体。但是，正如我所提到的，@语法本身并不新鲜。

这些在CSS中都称为 at-rules 。它们是浏览器的特殊指令，与使用规则和属性的Web文档中的（X）HTML / XML元素样式没有直接关系，尽管它们在控制样式的应用方式方面发挥着重要作用。

一些代码示例：

/* Import another stylesheet from within a stylesheet */
@import url(style2.css);

/* Apply this style only for printing */
@media print {
    body {
        color: #000;
        background: #fff;
    }
}

/* Embed a custom web font */
@font-face {
    font-family: 'DejaVu Sans';
    src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf);
}

@font-face rules定义在您的设计中使用的自定义字体并非在所有计算机上始终可用，因此浏览器从服务器下载字体并在该自定义字体中设置文本，就像用户的计算机一样有字体。
@media rules与media queries（以前只有media types）一起控制应用哪些样式，哪些样式不基于页面显示的媒体在我的代码示例中，只有在打印文档时，所有文本都应设置为黑色与白色（纸张）背景。您可以使用媒体查询来过滤掉打印媒体，移动设备等，并为这些页面设置不同的样式页。

遵守规则与selectors无关。由于它们的性质不同，在不同的模块中以不同的方式定义了不同的规则。更多例子包括：

（此列表远非详尽无遗）

您可以在MDN找到另一个非详尽无遗的列表。

Answer 2

@用于定义规则。

@import
@page
@media
@字体面
@charset
@namespace

以上称为at-rule s。

Answer 3

@media的一个例子可能有助于进一步说明它：

@media screen and (max-width: 1440px)
{
    span.sizedImage
    {
        height:135px;
        width: 174px;
    }
}    

@media screen and (min-width: 1441px)
{
    span.sizedImage
    {
        height:150px;
        width: 200px;
    }
}

这将根据屏幕尺寸有条件地改变图像的大小，在较小的屏幕上使用较小的图像。第一个块将解决宽度为1440px的屏幕;第二个将解决大于1440px的屏幕。

这样可以放置在较小的屏幕上浮动或滚动的标签;你可以经常在较小的屏幕上将标签标签的字体大小缩小到一个点大小，并使它们都适合。

Answer 4

@用作规则规范。与@font-face

一样

Answer 5

ProBoards CSS样式也将这些用作变量。

以下是来自其中一个CSS页面的小瑕疵：

@wrapper_width: 980px;
@link_color: #c06806;
@link_font: 100% @default_forum_text_font_family;
@link_decoration: none;

#wrapper { width: @wrapper_width; margin: 0 auto; overflow-x: hidden; }
table { table-layout: fixed; }
a { cursor: pointer; color: @link_color; font: @link_font; text-decoration: @link_decoration; }

注意：不是原生的，请参阅第一条评论。

CSS中'@'符号的用途是什么？

5 个答案: