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, Georgia.
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 an adornment on a font, such as T - e.g., Times), sans-serif (e.g. Arial; recommended for body text), cursive, fantasy, monospace (e.g., Courier). 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 font, 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 value), 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.
Therefore, the easiest thing to do is to specify declarations in the form BODY {font-size: 16px} or H1 {font-size: 32px}.
Have you ever noticed that some fonts (particularly script fonts) appear smaller than others at the same font-size? There is a good reason for this - different fonts have different aspect values (= font size / x-height). Bigger aspect values mean that the fonts look bigger at the same font-size.
Font-size-adjust allows the author to ensure that if the viewer does not have the font specified, the font that they do have will be scaled up (or down) to have the same apparent font size.
Typical values are: Verdana = 0.58, Comic Sans MS = 0.54, Trebuchet MS = .53, Georgia = .5, Myriad Web = .48, Minion Web = .47, Times New Roman = .46, Gill Sans = .46, Bernhard Modern = .4, Caflisch Script Web = .37, Flemish Script = .28.
Font-size-adjust is inherited, and is initally set to none. E.g., font-size-adjust: 0.58. If the used font had an aspect value of 0.5, then the all font sizes would be increased by a factor of .58/.5 - font-size: 16px would be rendered as 19px.
This can be specified as normal (initial value), italic or oblique (slanted). Example: P {font-style: italic}
Few browsers supports oblique, most either ignoring it or simply 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 can take the value ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded. Or it can take a relative value of wider or narrower. It is inherited and is intially normal. E.g., font-stretch: expanded.
This specifies the height of lines. 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 is formed by a rectangular line box. Line boxes are stacked one on top of each other to form a paragraph.
The height of each line box is from the top of the highest inline box (bearing in mind that there can be different line-heights on any given line) in the line to the bottom of the lowest one. The height of textual elements depends on line-height, whereas the height of replaced elements is dependent on the 'height' that they have.
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 the number). 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: 16px; line-height: 120%} would give an inherited line-height of 19.2px, but BODY {font-size: 16px; 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 2pt.
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 property allows you to specify one or more of the above (except for font-stretch or font-size-adjust) at once in the order (style, variant, weight = these can be in any order), size(/line height - optional) fontName. E.g. 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-weight: normal; font-stretch: normal; font-variant: normal; font-style: normal; font-size-adjust: none font-size: 12px; font-family: Arial;
Alternatively, you can specify INSTEAD a system font.
System fonts specify that the font used (including all characteristics of the font - size, weight, etc.).
Valid system fonts can be one of caption (the font used for captioned controls), icon (the font used for icon labels), menu (the font used for menus), message-box (the font used in dialog boxes), small-caption (the font used for labeling small controls) or status-bar (the font used in window status bars). If one of these is declared, all values are that of the system font - not the inherited value. For example, font: caption.
Illegal would be font: 16px caption, but you could use font: caption; font-size: 16px. Note that where the OS does not set values for some of the individual properties (typically only size, weight, style and family are set), they are set to the initial value. For example, if font: caption has a size of 10px, a font of MS Sans Serif, a weight of bold and a style of normal, but no value for stretch, line height or variant, then these would be set to their initial values.
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.