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.
Length | Abbrev. |
centimeters | CM |
ems | EM |
inches | IN |
millimeters | MM |
picas | PC |
pixels | PX |
points | PT |
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