|
|||||||||||
|
All font properties are inherited and apply to all elements.
This allows a specific font to be used. For example, font-family: Arial.
In order that if your preferred font is not available, your second choice is used, one may specify any number of comma separated fonts (where the first listed font will be used if available, the second if the first is not, etc.). For example, font-family: Times, Arial.
Font names containing white space must be in quotes - font-family: Times, "Times New Roman"
As a last choice, a generic family should be specified, which can be one of: serif (a serif is a descender on a font, such as T, sans-serif (e.g. Arial; recommended for body text), cursive, fantasy, monospace. Generic fonts must not be quoted.
Font-family does have an initial value, but it is browser-specific.
P {font-family: "Times New Roman", Times, serif}
It is recommended that as many fonts as possible should be specified. In my opinion, Arial is the best BODY fonts, Arial Rounded MT Bold the best heading font, Times NR Cyr MT the best drop cap font, and Andale Mono the best monotype font.
This can be specified as a length, or one of the following keywords: xx-small, x-small, small, medium (initial), large, x-large, xx-large.
In addition, a relative keyword can be specified as one of larger or smaller.
It should be noted that relative values, keywords and percentages relate to the parent element's font-size.
Example: P {font-size: 1em} or P {font-size: large}.
Internet Explorer 3 and Netscape 4.* treat all relative units and % as relative to the element default rather than as relative to the parent element.
In theory it is preferable to use relative font sizes. These are those that the use the relative units such as the em or %. For example, font-size: 120% means 120% of the inherited value of font-size. However, Netscape 4 and Internet Explorer do not support % or em in a reliable way. This means that, unless you have detailed knowledge of how to avoid this problem, you will probably find it easier to use pixels.
The important thing, however, is to never use points - pixels are acceptable, but points are not because they are typically rendered at 1/3 smaller on a Macintosh than a Windows machine.
This can be specified as normal (initial value), italic or oblique (slanted). Example: P {font-style: italic}
No Windows browser supports oblique, most ignoring it or rendering it as italic.
This can be specified as normal or small-caps, where normal is the initial value. Example: P {font-variant: small-caps}
This can be specified as normal (initial value), or bold. Example: P {font-weight: bold}
It can also be specified as an absolute number, being one of 100, 200, 300, 400 (the same as normal), 500, 600, 700 (the same as bold), 800, or 900, where 100 is the lightest and 900 the most bold.
It can also be specified as lighter or bolder, which will result in the next lighter or bolder font than the inherited value.
This specifies the heght for a line. The difference between line-height and font-size is called the leading (after the lead strips formerly used). Half of the leading is applied above the line, and half below it. Each line then forms a line box, which is a rectangle. Each line box is then stacked one on top of each other to form a paragraph. The height of the line box is from the top of the highest section (bearing in mind that there can be different line-heights on any given line) to the bottom of the lowest one. The height of each section depends on line-height, but where the height of a replaced element exceeds the line-height that particular line box will be increased to compensate.
Line-height can be specified as a length, % (relative to the element's font size), <number> or normal (the same as <number>, except the browser chooses). If <number> is specified, it multiplies the font-size by that number. This is similar to %, but with %, the calculated value for the line-height is inherited, but with a number, the number is inherited. E.g., BODY {font-size: 20px; line-height: 120%} would give an inherited line-height of 24px, but BODY {font-size: 20px; line-height: 1.2} would give an inherited line-height of 1.2*the font-size of the element's descendants.
Line-height applies to all elements. Line-height is inherited. The effect of line height is to apply (line-height - font-size)/2 above and below the text. E.g., line-height: 18px, with font-size: 16px would put 1px of space above, and 1px below the line.
Line-height cannot be negative.
BODY {line-height: 1.5em}
P {line-height: 115%}
Netscape incorrectly treats line-height: 2 (or whatever) as line-height: 200%. IE 3 treats line-height: 2 (or whatever) as 2px.
IE 3 correctly applies line-height, but whenever setting line-height in IE 3, you automatically set margin-top: 0, which causes serious problems (see under the box model).
This shorthand allows you to specify one or more of the above at once in the order (style, variant, weight = these can be in any order), size(/line height - optional) fontName. Example: P {font: italic 16px/18px Arial}. Thus if you state the line height, it must be preceded by a / to show that you don't mean the font size.
If using this shortcut, you must specify both a font size and a font family.
Example: font: 12px Arial. This (because all shorthand properties reset the unset values to their initial settings) is equivalent to:
font-size: 12px; font-weight: normal; font-family: Arial; font-variant: normal; font-style: normal;
The next section considers text.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.