|
July 26, 1998
 |
 |
Putting Style Sheets in Perspective
font-family
|
- Initial Value:
- depends on user agent
- Allowed Values:
- family-name
- generic-family
- Applies to:
- all elements
- Inherited?:
- yes
|
Your old favorite,
<FONT = ""> to specify a font type
has been deprecated. That's not nearly as bad as it sounds
since you may now specify a font type with Style Sheets. Not
only may you specify the font, but you can now specify
alternate fonts in case your favorite font is not available
on your visitor's system! Font types are specified not by
font-style as you might suppose, but by font-family.
There are two values that can be applied to font-family, the
family-name and a generic-name. The family-name
is the Proper name of the font, such as Arial, or Times Roman.
and more than one family-name may be used in the same declaration.
Family-names should be separated by a comma.
P { font-family: Arial, "Times New Roman" ; }
|
|
Arial
|
Times Roman
|
When specifying multiple font-family values the user-agent
would first look for the Arial font to display the text. If
Arial was not available it would then attempt to display
the text in Times New Roman. It's a good idea to design around
standard fonts as not all visitors to your site will have
your favorite font on their system.
Notice the quotes around "Times New Roman". When a
family-name contains spaces, it is necessary to place the
name within quotes to prevent the browser from getting
confused. This is also necessary if the family-name contains
symbols.
The W3C specifies that
"Font names containing whitespace should be quoted: "
and
"If quoting is omitted, any whitespace characters before and
after the font name are ignored and any sequence of whitespace
characters inside the font name is converted to a single space."
To me, these two statements together seem almost like a
contradiction and yet, from
experience I've found that enclosing the font-family in quotes
in the Style Element is acceptable, to do so within the
Style Attribute is not
valid HTML.
A generic-name may be used along with a family-name in a
declaration to ensure that the user-agent displays the page
as you intended for it to be seen even when the font-family
is not available. This is not the perfect solution to
un-available fonts, but is far better than allowing the
user-agent to default to it's own font. It is suggested
that the generic font family be placed as the
last alternative
in the font-family declaration.
Do not put quotes around the generic-family; if you
do so, the browser will look for a family-name!
BODY {font-family: "MS Serif", "Times New Roman", serif ;}
The above example demonstrates how to specify alternate fonts
within the
Style Element.
The example below demonstrates
how those fonts would display in a browser.
< style="font-family: MS Serif, Times New Roman">
MS Serif or Times
|
MS Serif or Times
|
<P style="font-family: Helvetica, Arial">
Helvetica or Arial
|
Helvetica or Arial
|
<P style="font-family: serif">
Any serif font
|
Any serif font
|
Serif -
A serif font has short cross-strokes.
|
|
Sans-serif -
without the cross-strokes is called sans serif. (Sans
is a French word meaning "without").
|
Monospace - A
fixed width font in which each character takes up exactly
the same amount of space.
|
Cursive -
Cursive fonts resemble hand-writing.
|
Fantasy -
Fantasy fonts can be very fancy, carry strange
decorations or odd shapes. They are used mainly
for display purposes and not for large bodies of
text.
|
Additional Resources:
Putting Style Sheets in Perspective: Index
Putting Style Sheets in Perspective: Table of Contents
Putting Style Sheets in Perspective:font-style
|
