Font Properties

Besides the text properties, probably the next most common set of style properties used is the font properties. I'll take a look at them here, starting with the font shorthand property.

font

• CSS1 values: [[<font-style><font-variant><font-weight>]?<font-size>[/<line-height>]?<font-family>

• CSS2 values: captioniconmenumessage-boxsmall-captionstatus-barinherit

• Default value: Varies

• Element support: All elements

• Browser support: [IE3, IE4, IE5, IE6]

• Style inherited: Yes

This shorthand property indicates font-style , font-variant , font-weight , font-size , line-height , and font-family properties. You list those properties in that orderand without commas between them, except between items in a list of alternate font families. You can also set all these properties individually.

font-family

• CSS1 values: [[<family-name><generic-family>],]*[<family- name ><generic-family>]

• CSS2 values: inherit

• Default value: Depends on the browser

• Element support: All elements

• Browser support: [IE3, IE4, IE5, IE6, NS4, NS6]

• Style inherited: Yes

You set this property to a list of font family names or generic family names . Your document can be viewed in a browser that doesn't support the font face you want, so you can list alternates, as we have in this chapter. You can also list generic font families, such as serif or sans-serif .

font-size

• CSS1 values: <relative-size><length><percentage>

• CSS2 values: inherit

• Default value: medium

• Element support: All elements

• Browser support: [IE3, IE4, IE5, IE6, NS4, NS6]

• Style inherited: Yes

This property sets the size of a font face. It is usually set in terms of points, but, of course, you can use any valid measurement.

font-stretch

• CSS2 values: normalwidernarrowerultra-condensedextra-condensedcondensedsemi-condensedsemi-expandedexpandedextra-expanded ultra -expandedinherit

• Default value: normal

• Element support: All elements

• Browser support: [None]

• Style inherited: Yes

You use this property to set a normal, condensed, or extended font face. It's not supported anywhere yet, as far as I know.

font-style

• CSS1 values: normalitalic oblique

• CSS2 values: inherit

• Default value: normal

• Element support: All elements

• Browser support: [IE3, IE4, IE5, IE6, NS4, NS6]

• Style inherited: Yes

This property specifies font styles, such as normal (also called upright or standard), italic , and oblique fonts.

font-variant

• CSS1 values: normalsmall-caps

• CSS2 values: inherit

• Default value: normal

• Element support: All elements

• Browser support: [IE4, IE5, IE6]

• Style inherited: Yes

This property indicates whether a font is a normal or special "small-caps" font.

font-weight

• CSS1 values: normalboldbolderlighter100200300400500600700800900

• CSS2 values: inherit

• Default value: normal

• Element support: All elements

• Browser support: [IE3, IE4, IE5, IE6, NS4, NS6]

• Style inherited: Yes

This property gives the weight of a font, such as normal , bold , or a numeric value.