CSS2 tutorial - CSS2 Properties-Fonts
A D V E R T I S E M E N T
Font properties
All font properties are inherited and apply to all elements.
Font-familyThis 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.
Font-sizeThis 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.
Relative font sizes
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.
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}.
Font-size-adjustHave 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.
Font-styleThis 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.
Font-variantThis can be specified as normal or small-caps, where normal is the initial
value. Example: P {font-variant: small-caps}.
Font-weightThis 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.
Font-stretchThis 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.
Line-heightThis 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).
FontThis 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;
System fonts
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.
|
