Previous Message
Next Message

Re: [css-d] Font: or Font-Family:

Sent by Eric A. Meyer on 29 January 2002 11:11

At 8:13 -0800 1/29/02, Jason A. Ogle wrote:

>Elementary question. I've seen both font: and font-family: used. Which
>one is better, more compliant? Do both selectors (those are selectors
>right?) work fine in all browsers?

    They're properties, actually.  Support for both properties is 
rather good, even in the early CSS-aware browsers like NN4.x and 
IE3.x, but which you use generally depends on what you're trying to 
do.  If you want to set the font's size and family together, then 
'font' is often a good choice.  If you just want to change the 
family, then you must use 'font-family'.  Why?  Because this is the 
minimally acceptable 'font' declaration:

    font: <size> <family>

You have to have both, and in that order.  (Unless the Web  browser 
is badly written and it accepts less than that.)
    Also, when you use a shorthand property like 'font', you can 
accidentally reset other properties.  Take this:

    font: 1.1em sans-serif;

That statement is exactly equivalent to:

    font: normal normal normal 1.1em sans-serif;

So let's say we have the following two rules:

    h1 {font-style: italic;}
    h1.title {font: 200% sans-serif;}

Any 'h1' with a 'class' of 'title' will NOT be italicized, because 
the 'h1.title' rule implicitly fills in a 'font-style' value of 
    This is why the following should result in 'h1' elements that are 
overlined but not underlined:

    h1, h2 {text-decoration: underline;}
    h1 {text-decoration: overline;}

Eric A. Meyer (, List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
   -- Martina Kosloff
Previous Message
Next Message

Message thread: