7 replies [Last post]
seb
Offline
Enthusiast
Last seen: 14 years 44 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

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.

EssentialBuyerGuides
EssentialBuyerGuides's picture
Offline
Enthusiast
England
Last seen: 17 years 22 weeks ago
England
Joined: 2004-06-25
Posts: 91
Points: 0

My tip of the day

Nice tip seb. Smile

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. Smile

Are there any sites dedicated to web typography?

seb
Offline
Enthusiast
Last seen: 14 years 44 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

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 Smile

EssentialBuyerGuides
EssentialBuyerGuides's picture
Offline
Enthusiast
England
Last seen: 17 years 22 weeks ago
England
Joined: 2004-06-25
Posts: 91
Points: 0

My tip of the day

Wow, what's that bitstream one Smile? For Mac? (PC user here Shock )

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

F5
Offline
Regular
Houston, Tx.
Last seen: 17 years 26 weeks ago
Houston, Tx.
Timezone: GMT+6
Joined: 2004-05-28
Posts: 12
Points: 0

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.

seb
Offline
Enthusiast
Last seen: 14 years 44 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

My tip of the day

F5 wrote:
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 Smile

F5
Offline
Regular
Houston, Tx.
Last seen: 17 years 26 weeks ago
Houston, Tx.
Timezone: GMT+6
Joined: 2004-05-28
Posts: 12
Points: 0

My tip of the day

yessiree! Laughing out loud