Fonts

2008 Oct 17

Font
Families

Font
Size

Font
Adjust

Font Families

Cursive	Emulate handwriting; e.g. Author, Zapf Chancery
Fantasy	Have a special characteristic; e.g. Dingbat, Klingon, Western, Woodblock.
Monospace	Fixed width, not proportional; may or may not have serifs; e.g. Courier, Courier New, Andale Mono.
Serif	Proportional and have serifs; e.g. Times,Georgia, NeCentury Schoolbook.
Sans-serif	Proportional and do not have serifs; e.g. Arial, Geneva, Helvetica, Univers, Verdana.

The property is font-family: and the value can be:

generic-family, e.g. sans-serif
family-name, e.g. Arial
comma separated list of alternative, e.g. Arial, sans-serif, e.g.:
p { font-family: 'Courier New', sans-serif; }
inherit

The pair of single )or double) quote marks are needed if the family name is the same as a keywords for a font-family (e.g. 'serif') or contains: spaces, or non letters (e.g. % or $ or #).

There are also values for the font family to fit in with the system:

caption	Font used for captioned system controls (e.g. buttons).
icon	Font used to label icons.
menu	Font used in menus.
message-box	Font used in dialogs.
small-caption	Font used in small controls.
status-bar	Font used in a status bar.

Absolute: xx-small, x-small, small, medium, large, x-large, xx-large, one, two, three, four, five;
where each is 1.5 times the size of the one smaller than it, but in CSS2 has become closer to 1.2.
Relative: smaller, larger
Absolute: <length>, <percentage> (usually rounded off to nearest pixel)
Misc: inherit

Font Adjust

IN CSS2 but dropped in CSS2.1

The property is font-size-adjust: and the value can be: none, inherit, <number>.

Font Stretch

IN CSS2 but dropped in CSS2.1

The property is font-stretch: and the value can be: normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, inherit.

Font Style

The property is font-style: and the value can be: italic, oblique, normal, inherit. A style of italic is usually font with that in its name, while oblique is a slanted version of normal (and can be one with name label also of slanted or incline).

Font Variant

The property is font-variant: and the value can be: small-caps, normal, inherit.

Font Weights

The property is font-weight: and the value can be: normal (default), bold, bolder, lighter, inherit, 100 (lightest), 200, 300, 400 (normal), 500, 600, 700 (bold), 800, 900 (heaviest).

Font Property

It is also possible, as a short hand, to specify just the font property and then have a space (and comma separetd) list of values, e.g.:

p {font: bold, italic 600 small-caps 24px Arial, Helvetica;}

The required values for the font property are font-size and font-family in that order.

Font Face

IN CSS2 but dropped in CSS2.1 since no browser implemented it.

The entity is @font-face and could have downloaded with src property, e.g.:

@font-face {font-family: "Star Trek"; src: url(http://www.fontzoo.com/fonts/ps/startrek.ps);}}

Line Height

The line height is a text property, not a font property, but it can be included as a modifier to font-size using a slash followed by the value for line height, e.g.:

p {font-size: 24px/1.2;}
p {font: bold, italic 600 small-caps 24px/1.2 Arial, Helvetica;}