Font Controls
There are a number of attributes that you can use in stylesheets to set up how text is displayed.
- font-family specifies which font the text is to be displayed in. You can specify a list of fonts separated by commas and the first font listed that is found on the computer will be the one used. A generic value of serif, sans-serif, cursive, fantasy, or monospace can be added to the end of the list to ensure that an appropriate font type is used if none of the listed fonts are on the computer. Font names that contain spaces should be contained within quotes.
- font-style defaults to normal but italic or oblique can also be specified.
- font-variant also defaults to normal but small-caps can be specified.
- font-weight defaults to normal. Values of bold, bolder, lighter and 100 to 900 (in whole hundreds) can be specified.
- font-size can be specified as a length, as a percentage or as a value corresponding to one of the seven font sizes in HTML (xx-small, x-small, small, medium, large, x-large, or xx-large) or as relative size smaller or larger. Font-size can also have an optional line height specified by following the font height with a slash and then the line height to use.
- font-stretch defaults to normal. Additional absolute values are ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, and ultra-expanded. You can also adjust the stretch relatively using wider or narrower.
Alternatively all of the above can be included into one font attribute by specifying them in the order font-style, font-variant, font-weight, font-size / lineheight, font-family with each separated by spaces from the others. Not all attributes need be included.
The font can also be defined as caption, icon, menu, message-box, small-caption, or statur-bar if you want to use the same font format as for that component of the operating system that the browser is running on.
Length can be specified in a number of different ways:
- em width of letter M in current font
- ex width of letter x in current font
- cm centimetres
- mm millimetres
- pc picas
- pt points
- in inches
- px pixels
Examples
.head {font-family:georgia,serif;font-weight:normal;font-size:7pt;}
.drop {font-weight: 800; font-size:300%;font-family: times, "times new roman",serif;}
h1{font:bold 14px/16px verdana,arial,sans-serif;}
