Fonts. There are literally thousands of them, each one putting a slightly different spin on the look of a language. Graphic designers spend hours looking for the perfect font for a project. Web designers, on the other hand, often didn't bother at all, because until style sheets, the Web didn't offer really good font control.
Oh, sure, there was the FONT tag, which you could use to define a certain font or group of fonts-- for example, . But what happened if a user's browser didn't have either of those fonts? The browser would use its default setting, which often as not is something totally unlike the specified fonts. Not only that, but control over the font's size was crude at best, being defined on a scale from one to seven.
Now, of course, CSS1 offers a much better and more comprehesive system for setting font styles, sizes, and more. Because of this fact, by the way, the FONT tag is deprecated in HTML 4.0, which means it's on its way to being dropped entirely from the specification, so you may want to consider how you're going to make the transition from the FONT tag to using the CSS1 font properties. To help you with this, and in keeping with the spirit of this week's issue, let's take a closer look at how CSS1 handles fonts.
A Family Matter
Let's say that we want a certain font to be used for the body text of a document; say, Times, which is a very common font. We don't care about the font's size, or anything else. The easiest thing to do is declare BODY {font-family: Times;} and leave it there. It's likely that 95% of the computers out there will have Times as an installed font, and they'll use it to display the page. But what about the other 5% which never had Times, or where it was removed from the system? Back to the user's default font, whatever that is.
This is why you want to make sure that you declare a font family, not just a particular font, when making a font-family declaration. (After all, the property name itself encourages you do to so.) Times is a serif font, so we modify the previous declaration to be BODY {font-family: Times,serif;}. Using this declaration, if the user's computer doesn't have Times available for whatever reason, the browser will pick a similar font-- Palatino, perhaps, or New Century Schoolbook.
As for the families, there are five of them, which correspond to the five generic-family values: serif, sans-serif, monospace, cursive, and fantasy. Serif fonts are much more traditional print-page-looking fonts, like Times or New Century Schoolbook. If you look closely, the strokes in each letter have areas which are thinner and thicker, as though inscribed with a pen. Sans-serif fonts, on the other hand, are somewhat simpler, with every stroke of a consistent width throughout its length; examples are Helvetica, Arial, and Verdana.
|
04-03-2007, 05:26 PM
Similar Threads
Linear Mode
