| Home Web | Top Bottom | Contents Prev Next |
font-family
font-size
font-weight
font-style
font-variant
font and line-height
The body Selector and Inheritance
Example
font-family takes the place of the face attribute of <font> for choosing a font. Just as with face, you can specify a list of fonts and the browser uses the first one in the list that is installed in the visitor's computer. In addition, you can end the list with a generic name: serif, sans-serif or monospace (cursive and fantasy are also generic names, but are not supported by many browsers).
If a font name consists of more than one word, you need to place that font name in quotes:
font-family: georgia,"times new roman",times,serif;
|
Although you can choose any font on your system, it's likely that many of your users won't have your more unusual fonts installed. Here is a list of fonts you can be fairly sure will be available on most of your users' machines. Some are more likely found on PCs, while others are more common on Macs. Sans-serif fonts: Arial (PC), Helvetica (Mac), Verdana (both) Serif fonts: Times New Roman (PC), Times (Mac), Georgia (both) Monospace fonts: Courier New (PC), Courier (Mac) Other fonts: Comic sans ms (both) In general, include a list of fonts. If you want a sans-serif font, for example, use something like: font-family: arial,helvetica,verdana,sans-serif; |
font-size takes the place of the size attribute of <font>. size only allows 7 size choices. font-size is far more flexible. You can specify the size using any of the various measurement units.
|
No matter what unit you use for specifying font-size, you can expect different results in different browsers and from platform to platform. And as usual, you have to be wary about older CSS-enabled browsers. Pixel units (eg., 14px) provide the least variation among browsers and platforms. But there is a distinct disadvantage to pixel units: almost all browsers refuse to let a user resize the text when pixel units are used. Never use pixel units to specify any size smaller than 14px or your site will be unreadable for many users who are using higher resolutions or who have poor eyesight. Even for larger sizes, the resizable units are preferable. Using pixel units may make it impossible to print your pages legibly: the pixel size on a printer is very, very tiny, and not all browsers adjust for this. Absolute units such as points, picas, inches or centimeters aren't much better. MSIE refuses to resize text set in these units, just as it refuses to resize text set in pixels (Netscape will resize text in these units). This leaves the other relative units: em, ex and percentage. All browsers let the user resize text set with these units. But you'll find a lot more variation from browser to browser and from platform to platform with these units. And you may encounter difficulties using these units in IE 3 and Netscape 4. Your pages might well become unusable in these browsers. Test carefully! font-size also recognizes a few additional values:
xx-small|x-small|small|medium|large|x-large|xx-large Both MSIE and Netscape will resize your text if you use these, but you'll find a lot of variation from browser to browser and from platform to platform. The very best strategy is to refrain from using font-size at all for your main text, and to just use it sparingly to achieve slightly larger or smaller text for small areas of text. Since all users will have set their resolution low enough that they can read the default text size and since they can resize it if they need to, your site will be accessible to all. If you feel you must set the main text in a size other than the default size, I recommend an absolute unit such as pt. As explained above, this is far from perfect, but I believe it's better than the other choices. If you don't care about supporting IE 3 and Netscape 4, or if you're careful to test thoroughly in these browsers, you might be better off with em, ex or percentage units. One way to avoid problems in IE 3 is to use the font property described below rather than the more specific properties such as font-size. IE 3 doesn't recognize font and will ignore it. If you want to use relative units (em, ex, percentage) but have difficulty getting them to work with Netscape 4, use @import to import the portion of the CSS code that specifies font size. Netscape 4 doesn't recognize @import and will use the default font size. |
font-weight lets you make the text bold, much like the <b> tag. These are the values you can use:
normal|bold|bolder|lighter
100|200|300|400|500|600|700|800|900
In practice, you can expect all browsers to recognize normal (the default) and bold. Support for the other choices varies from browser to browser.
font-style lets you change text to italics, much like the <i> tag. These are the values you can use:
normal|italic|oblique
oblique is similar to italic, and you'll probably only use it if the particular font you're using doesn't support italics.
font-variant lets you request a "small caps" font: lower-case letters are displayed as upper-case letters slightly smaller than the real upper-case letters.
normal|small-caps
small-caps is supported by most but not all browsers.
font is a "shorthand" property that lets you specify all of the font characteristics in a single property. MSIE 3 doesn't recognize font, while it does recognize the individual properties.
[font-style] [font-variant] [font-weight] font-size [/line-height] font-family
Note that you must specify the font size and the font family, while the others are optional. If you omit one of these required options, some browsers will recognize the ones you include, but Netscape 4 and possibly other browsers will ignore the entire font property, and possibly the entire rule.
line-height lets you specify the height of each line, and lets you add or subtract from the spacing of the lines. For example, a line-height of 200% would make your text appear double-spaced. The separate line-height property can also be used to specify this.
Here's an example of a font property:
font: bold .95%/1.05% "comic sans ms",arial,helvetica,sans-serif;
Most CSS properties are inherited from parent elements. For example:
<style type="text/css"> <!--
p { color: blue; }
--> </style>
.
.
.
<p>Normal text <b>bold text</b> normal text</p>
Both the normal text and the bold text in this example are blue because the <b> tag inherits the color: blue; from its parent, the <p> tag.
In a similar way, elements inherit characteristics from the <body> tag, which is the parent (or grandparent, great-grandparent, and so on) of all of the other tags in the body section.
As usual, the older CSS browsers present special problems. Netscape 4 in particular has some serious bugs dealing with inheritance, but there are some inheritance problems in other browsers as well.
In a perfect world, you could set default characteristics for your entire page by using a body selector, and then just override the characteristics you want to be different.
body {
font-size: 95%;
font-family: arial, helvetica, sans-serif;
}
h1,h2,h3,h4,h5,h6 { font-family: "comic sans ms", sans-serif; }
There are two problems here, mostly due to the bugs in Netscape 4.
Netscape 4 often fails to apply body characteristics to lower tags, and you'll wind up with part or all of your page showing up in the default font rather than in the font you've requested.
And Netscape 4 incorrectly allows the font-size to be inherited by tags such as <h1> through <h6>. All of your headings will be the same size as the rest of the text.
Because of this, it's better to provide a list of all of the elements that you want the characteristics applied to. For example:
p,td,th,ol,ul
{ font-size: 95%;
font-family: arial, helvetica, sans-serif; }
h1,h2,h3,h4,h5,h6 { font-family: "comic sans ms", sans-serif; }
The body selector is still useful for specifying other things that apply to the page as a whole, such as the background color.
Try experimenting with specifying font sizes in the various units, and try out the various other font options.
| Home Web | Top Bottom | Contents Prev Next |