Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- CSS Crib Sheet, cheatsheets, shortcut lists, syntax lists, & others


SuzyUK - 9:36 pm on Sep 12, 2004 (gmt 0)


Tips 'n'Tricks: Part 3

2. Shorthand Properties continued..

Font Shorthand

font [w3.org] is a shorthand property for:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

    font {¦¦<font-style> <font-variant> <font-weight>¦¦ <font-size / line-height> <font-family>;}

    the individual properties are not seperated by commas (internal choices of font-families still need to be though), all parts are optional but if they are not declared they are still understood to be there and will take on the individual defaults instead.

    the 3 choices as seperated by ¦¦ can be put in any order and if not explicitly set they will revert to their default of normal

    Example:
    p {
    font: italic small-caps bold 12px/3.5 georgia, serif;
    }

    is the equivalent of:
    p {
    font-style: italic;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 12px;
    line-height: 3.5;
    font-family: georgia, serif;
    }

    Example 2:
    p {
    font: bold 12px georgia, serif;
    }

    is the equivalent of:
    p {
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    font-size: 12px;
    line-height: normal;
    font-family: georgia, serif;
    }

    Note: setting a font using a shorthand property later in the cascade will override more explicit settings from earlier on. e.g. the second example if used after the first will reset values (back to default) from the first even though they're not declared.

    If you only require to override one part of a setting the has been set using shorthand earlier in the cascade you should use the long hand font property as this will only affect that particular property.

    Example:
    p {
    font: italic small-caps bold 12px/3.5 georgia, serif;
    }
    p.normal {font-weight: normal;}

    <p class="normal">this is now normal weight text</p>

    The p with the class of normal will still be take on the properties specified in the first rule and the second rule just targets the font-weight.

    line-height values are calculated from the font-size that is set on the element so 3.5 in the first example is 12px x 3.5 = 42px. line-height can also be set in percentage values so 3.5 would be = to 350%.

    font-family
    Always offer a choice of font family names and make sure the last one is a generic family name. Commas indicate that each name is a choice within a list, browsers will go through the list, and choose the first one it has available. The generic one will suggest an alternative to a browser should it not have any of your previously named choices installed.

    Example:
    p {font-family: verdana, helvetica, arial, sans-serif;}

    Note: Quotes around font-family names should not be used except if font-family value = multiple words that are not hyphenated

    Examples:
    p {font-family: "Times New Roman", serif}
    p {font-family: verdana, sans-serif}

    generic family names will suggest an alternative to a UA that does not have any of your pre-defined choices available:

  • serif (e.g. times new roman, georgia)
  • sans-serif (e.g. verdana, arial)
  • cursive (e.g. zaph-chancery, caflisch script)
  • fantasy (e.g. critter, cottonwood)
  • monospace (e.g. courier, MS Courier new)

    ... more to follow ....


    Thread source:: http://www.webmasterworld.com/css/4514.htm
    Brought to you by WebmasterWorld: http://www.webmasterworld.com