We use the font-family property in CSS to choose the font that is used to display page text.
Font-family replaces
HTML's <font face="?"> tag or
XHTML's<font face="?" />.
Webtv only sees sans-serif and monospace fonts, so we almost never think about using different fonts on our pages. The exception to this is when we use use fonts to annotate at ImageMagick.
The font-family declaration form is:
font-family: Fontname, 'Font Name', value;
Notice that the values are separated by commas.
Fontname is the name of a specific font.
Font Name is the name of a font that has white space (more than one word for the font name). These font names must be in either single or double quotation marks.
value is the generic name of a font family.
There are 5 font familes:
sans-serif,
serif,
monospace,
cursive and
fantasy.
Some fonts represent more than one font family.
Fonts should be listed in order of preference. A browser will display text in the first font in the list that an individual pc user has installed on his or her pc. If that pc does not have a specific font installed that is on the list, it will use a font that is in the generic family. You may use just the generic value if you like.
Sans-serif fonts are what we mostly see on WebTV. They are "plain" and have a modern informal appearance (my description).
Common sans-serif fonts are:
Arial,
Helvetica,
Verdana,
Tahoma,
'Lucida Sans' and
'Comic Sans MS'.
body { font-family: Arial, Helvetica, sans-serif; }
Serif fonts have a more "formal" appearance than sans-serif fonts. These fonts have little "feet" at the bottom of vertical stems, and tiny lines dropping down from horizontal lines such as the top bar of the letter T. This is the type of text you usually see in books.
Common serif fonts are:
'Times New Roman',
Garamond,
Georgia and
'Bookman Old Style'.
h1 { font-family: 'Times New Roman', serif; }
Monospace fonts have letters that all have the same width, so an i has the same width as a w. They look like typewriter or teletype text. Monotype is the default for the elements tt and code. We can see monotype text on WebTV by using
<tt>text</tt>
or
<code>text</code>
I use this font-family for this course when I display code.
Common monospace fonts are:
'Courier New',
'Andale Mono',
Terminal,
Monaco and
'Lucida Console'.
tt { font-family: 'Courier New', monospace; }
Curvise fonts look like hand-written text.
Common cursive fonts are:
'Brush Script MT',
'Comic Sans MS',
'Lucida Handwriting',
and 'Zapf Chancery'.
<p style="font-famly: 'Zapf Chancery', cursive;">
Fantasy fonts are highly stylized for the most part, but many people will not have them, so they should usually be avoided. The generic fantasy font is "Comic Sans MS", which is also in the sans-serif and cursive families.
Common fantasy fonts are:
Comic Sans MS,
'Matura MT Script Capitals',
Desdemona and
Colonna.
/* fantasy class */
.fantasy { font-family: Colonna, fantasy; }
Since the WebTV (MSNTV) browser can only see sans-serif and monospace fonts, you may want to restrict your CSS to these two font familes. This would make pages viewed on a pc to appear more closely to what is seen on WebTV.
CCP declaration for sans-serifUse font-family on your sample page. Post your code and your page.
Code Style has pages that show how many common fonts appear on a PC or a Mac. Click on the word "image" after the name of a font to see what that fonts looks like. Many more pages on font families can be found through Google. If you need fonts for annotating, visit Mercedes Fonts
There are eleven core fonts that come installed on pc's. They are: Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana and Webdings. These fonts would make excellent choices for your pages.
Some style guides suggest that body text fonts and header fonts be alternated between serif and sans-serif for greater distinction. So if you use a sans-serif font for your basic text, you would use a serif font for your headers, and vice-versa.
Example code
body { font-family: sans-serif; }
h1, h2, h3 { font-family: serif; }
Happy coding!
Gnubee
