Style Sheets: Fonts
H1 {
font-family: Impact, "Century Gothic", Helvetica;
font-style: italic;
font-weight: bold;
font-size: 25pt;
}
Font specification properties
|
Font-family |
sets the actual font.
A font family is a group of fonts that resemble one another,
with family members that are e.g.
- bold
- italic
- regular
- bold and italic, etc.
Examples of font family names include
- Arial
- Verdana
- Courier
- Helvetica
- Times Roman
- Comic Sans MS
- New Century Schoolbook
Font families may be grouped into different categories:
- fantasy fonts,
- resemble handwriting,
- with or without serifs,
- characters are or are not proportionally spaced
For a font to display it must be installed on the user's system.
To work around this, you can specify a single type, or
alternative font families in much the same you do in HTML's
<FONT> tag.
Alternatives are separated by commas to be used in order,
if the user has the font on their system.
If the user has Impact, it will use it, if not it will use
"Century Gothic", and so on.
If a font-family is two or more words they must be in quotes.
The generic family names (serif, sans-serif, cursive, fantasy, or
monospace) are mapped to the fonts installed on the user's system.
|
|
Font-style |
normal | italic | oblique
selects between normal (sometimes referred to as "roman" or
"upright"), italic and oblique faces within a font family.
|
|
Font-variant |
indicates whether the font contains normal upper and
lower case characters or whether it contains small-caps characters.
|
|
Font-weight |
normal | bold | bolder | lighter |
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
The values '100' to '900' form an ordered sequence,
where each number indicates a weight that is at least as dark as its
predecessor. The keyword 'normal' is synonymous with '400', and 'bold'
is synonymous with '700'.
|
|
Font-size |
attribute vastly expands the size limits of the <FONT> tag.
Sizes can be expressed in points, pixels, inches,
absolute or relative sizes,
or percentage of default (i.e. 40pt, 60px, 1.5in, or 200%).
- absolute sizes:
-
[ xx-small | x-small | small | medium | large | x-large | xx-large ]
On a computer screen a scaling factor of 1.5 is suggested between
adjacent indexes;
if the 'medium' font is 10pt, the 'large' font could be 15pt.
- relative sizes:
- [ larger | smaller ]
interpreted relative to the table of font sizes and the font size of
the parent element. For example, if the parent element has a font size
of 'medium', a value of 'larger' will make the font size of the
current element be 'large'.
Examples:
P { font-size: 12pt; }
EM { font-size: 150% }
EM { font-size: 1.5em }
BLOCKQUOTE { font-size: larger }
|
You can group font attributes. Instead of the above list,
Use:
H1 {font: bold italic 25pt Impact, "Century Gothic", Helvetica}
The font weight and style must be specified before the others.
Graphic representations of all the main standard fonts for both PC
and Mac.
|
