Avoid using the "font:" shortcut. When you come to use other options such as "font-family:" and "font-size:" in other rules the results across browsers are inconsistent. Keep your font styles longhand to avoid potential problems, imho.
My tip of the day
Nice tip seb.
I usually use long-hand, just because I'm still using dreamweavers error checking to correct my syntax.
Just need a list of shred font styles/faces across platforms : IE : Something that looks like lucidia on win98 or something that looks lik Georgia on Mac.
Like a big font comparison chart.
Are there any sites dedicated to web typography?
My tip of the day
Dunno about that, I always tend to use the following string:
"Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
Not entirely sure why, it's just a list of fonts I've built up over time, not sure how far down the list the average browser goes before it finds something
My tip of the day
Wow, what's that bitstream one ? For Mac? (PC user here
)
My tip of the day
FWIW The first string of fonts I remember using was verdana, arial, helvetica, sans-serif; the helvetica I seem to remember was there as it was a Mac font, not sure how true that is, don't ever seem to see it used now.
I think Sebs probably right about the shorthand font: I've stripped it out of a blog style sheet as it seemed to cause problems.
Hugo.
My tip of the day
I think I disagree with your tip as a blanket statement. Its really dependent on how you use the shorthand technique. This is an excerpt from an article on evolt.org, the article is entitled "Ten CSS tricks you may not know". Pretty basic stuff, but good refresher.
"1. CSS font shorthand rule
When styling fonts with CSS you may be doing this:
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;
There's no need though as you can use this CSS shorthand property:
font: 1em/1.5em bold italic small-caps verdana,serif;
Much better! Just a couple of words of warning: This CSS shorthand version will only work if you're specifying both the font-size and the font-family. Also, if you don't specify the font-weight, font-style, or font-varient then these values will automatically default to a value of normal, so do bear this in mind too."
Of course there are also many other things to consider, like inheritance rules, and what rules will work with what elements (for instance, the body tag). But shorthand is most definately cross browser/ cross platform compliant.
My tip of the day
This CSS shorthand version will only work if you're specifying both the font-size and the font-family.
THAT bit I didn't know! That'd be why my "font: bold 12px" wasn't doing squat
My tip of the day
yessiree!