What is the @ for in css?

5 replies
  • WEB DESIGN
  • |
Checking out css files for interesting sites, I often see something like:

Code:
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: bold;
   }
I've googled it, and couldn't even find an @ in the pages that resulted. What is it used for?
#css
  • Profile picture of the author mywebwork
    Hi Lloyd

    You might find this link to be informative:

    The Essential Guide to @font-face

    Essentially this was originally a Firefox addition that allowed you to specify fonts that were not necessarily on the users machine. Using this format you can reference fonts installed on other web servers.

    Bill
    {{ DiscussionBoard.errors[4476098].message }}
    • Profile picture of the author Lloyd Buchinski
      Originally Posted by mywebwork View Post

      informative
      That link had a lot of info, thanks. That should finally teach me to give a google search a second try.

      There is quite a lot involved. The (wimp?) in me wants to just stick with 'verdana,arial,sans-serif' but that could solve one annoying little problem. I like Calabri but it is smaller than the more common fonts. If a larger one is substituted it can mess up the layout.
      Signature

      Do something spectacular; be fulfilled. Then you can be your own hero. Prem Rawat

      The KimW WSO

      {{ DiscussionBoard.errors[4477248].message }}
      • Profile picture of the author manimoor
        Hi..some @rules here...

        At-rules are instructions or directives to the CSS parser. They can be used for a variety of purposes.

        The @charset at-rule can be used to specify the character encoding of an external style sheet. It must appear before anything else in the file.

        The @import at-rule allows us to import one style sheet into another. All @import at-rules must appear before any rules.

        The @media at-rule lets us target rules to the media types we specify.

        The @page at-rule can be used to specify margins for paged media. You can set different margins for left- and right-hand pages when you're printing double-sided pages, as well as for the first page.

        The @font-face at-rule allows us to specify custom fonts.

        The @namespace at-rule in CSS3 lets us declare an XML namespace, as well as an optional prefix with which that namespace can be specified.

        example:
        @font-face {
        font descriptors
        }
        {{ DiscussionBoard.errors[4478270].message }}
  • Profile picture of the author bzd63
    hi Lloyd
    @font-face
    {
    font-family:'kdk';
    src:url(kdk.eot);
    src:local('kdk'),
    url(kdk.ttf)
    format('opentype')
    }

    this script add font to page for all browser such as ie6
    {{ DiscussionBoard.errors[4476411].message }}
  • Profile picture of the author bzd63
    use in css by this source
    font-family:'kdk';
    {{ DiscussionBoard.errors[4476419].message }}

Trending Topics