您的位置:寻梦网首页编程乐园CSS 初步Cascading Style Sheets Index
Style Sheets
FONT PROPERTY:
 FONT-FAMILY
 FONT-SIZE
 FONT-STYLE
 FONT-VARIANT
 FONT-WEIGHT
 FONT


FONT-FAMILY : FAMILY-NAME &| GENERIC-FAMILY }

Inherited: Yes

The FONT-FAMILY property allows you to select specific typefaces or a generic family of typefaces.

You can list a prioritized selection of FAMILY-NAME and/or GENERIC-NAME typefaces. The program will consider each typeface value in turn and will use the first value it finds that is recognized by the browser. In the list, each typeface value must be separated by a coma. This is one of the few places where comas are used in declaring values for a property. The use of a pair of double quotes to enclose the typeface name is optional. However, it is recommended that any typeface name, such as "helvitica extra bold", that contains blank (white) spaces, should be enclosed by double quotes. Note that single quotes must be used in place of double quotes when using certain HTML code.

FAMILY-NAME

The FAMILY-NAME typeface values are the font names, such as: Courier, Arial, Times, Roman, etc. It is not possible to present a definitive list since not all computers have all typefaces installed.

GENERIC-FAMILY

There are five values of GENERIC-NAME typefaces to choose from:
CURSIVE
FANTASY
MONOSPACE
SERIF
SANS-SERIF

It is recommended that GENERIC-NAME typeface values be used as a last resort.

Code:
Selector {FONT-FAMILY:  Courier, "Zapf Dingbat",  SERIF}


FONT-SIZE : ABSOLUTE-SIZE | RELATIVE-SIZE | LENGTH | PERCENTAGE }

Inherited: Yes

The FONT-SIZE property allows you to change the size of the font (i.e., characters in a text) by selecting from four different categories of values. The amount of change in size is a relative, not fixed, quantity that is determined by your individual computer and/or browser.

ABSOLUTE-SIZE

There are seven steps in the ABSOLUTE-SIZE values to choose from:
XX-SMALL
X-SMALL
SMALL
MEDIUM
LARGE
X-LARGE
XX-LARGE

The amount of change caused by each step will be determined by the individual computer/browser.

RELATIVE-SIZE

There are two RELATIVE-SIZE values to choose from:
LARGER
SMALLER

The amount of change will be determined by the individual computer/browser.

LENGTH

The LENGTH value can be in any of the following seven units. Use the abbreviation.

LengthAbbrev.
centimetersCM
emsEM
inchesIN
millimetersMM
picasPC
pixelsPX
pointsPT

PERCENTAGE

The PERCENTAGE value is the percent amount you wish to increase or decrease the font size. Values less than 100% reduce the size of the font. 100% gives no change. Values greater than 100% increase the font size.

Code:
Selector {FONT-SIZE:  X-LARGE}
Selector {FONT-SIZE:  SMALLER}
Selector {FONT-SIZE:  18PT}
Selector {FONT-SIZE:  3EM}
Selector {FONT-SIZE:  75%}
Selector {FONT-SIZE:  150%}


FONT-STYLE : NORMAL | ITALIC | OBLIQUE }

Inherited: Yes

The FONT-STYLE property allows you to designate a font to be NORMAL, ITALIC or OBLIQUE.

NORMAL

The NORMAL value is the default and refers to the characters being upright. By declaring NORMAL, you can ensure that any previous declaration will not effect a selected text.

ITALIC

If you select the ITALIC value, and it is not available for a particular font, then the OBLIQUE value will be applied.

OBLIQUE

The OBLIQUE value slants the characters.

Code:
Selector {FONT-STYLE:  NORMAL}
Selector {FONT-STYLE:  ITALIC}
Selector {FONT-STYLE:  OBLIQUE}


FONT-VARIANT : NORMAL | SMALL-CAPS }

Inherited: Yes

The FONT-VARIANT property allows you to choose between normal capitals or small capitals for a font.

NORMAL

The NORMAL value is the default. By declaring NORMAL, you can ensure that any previous declaration will not effect a selected text.

SMALL-CAPS

The SMALL-CAPS value causes the capital letters to be proportionally smaller in size compared to NORMAL capital letters. The uncapitalized letters remain unchanged in size.

Code:
Selector {FONT-VARIANT:  NORMAL}
Selector {FONT-VARIANT:  SMALL-CAPS}


FONT-WEIGHT : NORMAL | BOLD | BOLDER | LIGHTER | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 }

Inherited: Yes

The FONT-WEIGHT property allows you to choose how thick or thin the characters of a text appear. This is referred to as boldness. Boldness is a relative, not fixed, quantity which is determined by your individual computer and/or browser.

NORMAL

The NORMAL value is the default. On the numeric scale running from 100 to 900, NORMAL is usually considered to be 400. By declaring NORMAL, you can ensure that any previous declaration will not effect a selected text.

BOLD

The BOLD value corresponds to the <B> tag in HTML. On the numeric scale running from 100 to 900, BOLD is usually considered to be 700.

BOLDER

The BOLDER value makes the character appear thicker in size and, hence, increases the boldness. The amount of change will be determined by the individual computer/browser.

LIGHTER

The LIGHTER value makes the character appear thinner in size and, hence, decreases the boldness. The amount of change will be determined by the individual computer/browser.

100 ... 900

The 100,200,300,400,500,600,700,800,900 values provide nine steps in range of boldness. The larger the number, the greater the boldness. This is a relative numeric scale where 400 usually equates to NORMAL and 700 to BOLD. The amount of change caused by each step will be determined by the individual computer/browser.

Code:
Selector {FONT-WEIGHT:  NORMAL}
Selector {FONT-WEIGHT:  BOLD}
Selector {FONT-WEIGHT:  BOLDER}
Selector {FONT-WEIGHT:  LIGHTER}
Selector {FONT-WEIGHT:  600}


FONT : FONT-STYLE &| FONT-VARIANT &| FONT-WEIGHT &| FONT-SIZE &| / LINE-HEIGHT &| FONT-FAMILY }

Inherited: Yes

The FONT property allows you to declare any or all of the five individual FONT properties, discussed above, in only one declaration. In addition, you can also set a sixth value, the LINE-HEIGHT.

LINE-HEIGHT

The LINE-HEIGHT value determines the amount of space between lines. It may be a relative number, a percentage, or a font size. Note the forward slash before LINE-HEIGHT. It must appear and is used in association with the font size. The use of the / is demonstrated in the first five code examples.

Code:
Selector {FONT:  ITALIC  SMALL-CAPS  600  12pts/18pts  Courier}
Selector {FONT:  ITALIC  SMALL-CAPS  600  12pts/150%  Courier}
Selector {FONT:  ITALIC  SMALL-CAPS  600  12pts/1.5  Courier}
Selector {FONT:  ITALIC  SMALL-CAPS  600  12pts/18pts  Courier}
Selector {FONT:  /18pts  SERIF}
Selector {FONT:  OBLIQUE  100  24pts}

Copyright 2000 by Infinite Software Solutions, Inc.
Trademark Information