I just stumbled across this question and I noticed the user is using some notation I've never seen before:
@font-face {
/* CSS HERE */
}
So is this '@' symbol something new in CSS3, or something old that I've somehow overlooked? Is this something like where with an ID you use '#', and with a class you use '.'? Google didn't give me any good articles related to this. What is the purpose of the '@' symbol in CSS?
Thanks!
@ has been around since the days of @import, and recently @font-face and @media. These are all known in CSS as at-rules. They're special instructions for the browser, not directly related to styling of (X)HTML/XML elements in Web documents using rules and properties (although they do play important roles in controlling how styles are applied).
Some code examples:
/* 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 defines custom fonts for use in your designs that aren't always available on all computers, so a browser downloads a font from the server and sets text in that custom font as if the user's computer had the font.@media queries control which styles are applied and which aren't, based on what media the page is being displayed in. In my code example, only when printing a document should all text be set in black against a white (the paper) background. You can use media queries to filter out projectors, mobile devices and so on and style pages differently for those.There is a full list of at-rules at the SitePoint CSS Reference.
@ is used to define a rule.
@import
@page
@media
@font-face
@charset
@namespace
The above are called at-rule's.
I am more into desktop programming, C, C++ but it is easy to guess that @ is some sort of a directive.