Fonts in Style Sheets
|
|
Fonts in Style Sheets |
|
Not every effect will be visible in every browser.
Font type and font size are probably the two most used modifiers of fonts in word processing. They are dealt with separately here.
The fonts that display on a viewer's browser are dependent upon the fonts that are available on their computer and the choices they have made in the set-up of their browser. It is possible (and not particularly difficult) for users to customize their browsers so that their choice of fonts overrides the fonts coded into any of the HTML files they look at.
In a style sheet (or in an inline style) the font being used can be specified either by a specific name or by a font family name. It is preferable to use both. The web page designer can list a series of fonts in descending order of desirability. Such a list usually ends with a generic font family name. The various items in the list are separated by comas. In a style sheet this is recorded as:
{font-family: font1, font2, font3, family;}
Font families are usually divided into: serif, sans-serif, monospace, cursive, fantasy. Only the first three are mentioned in the preferences in web browsers. And there is a great deal of inconsistency and overlap in the various font classification schemes. If you are not sure what category the fonts you use fall into then you will have to test and re-test. If you specify fonts or font attributes in a style sheet you need to test your pages in at least the major browsers.
Now you have had a few warnings, here are some examples. I do not know how they will look on your screen, but I hope there is enough information on this page so you can duplicate what I have done.
{ font-family:"times new roman", serif;}
Note the quotation marks around "times new roman" in the previous example. These are required if the name of the font contains one or more spaces.
{font-family: arial, sans-serif; }
What you will see in the next example depends upon what fonts you have installed on your system (as well as your browser preferences). The first choice, Garamond, is a well-known serif face; the second, Comic Sans, is a modern informal sans-serif face; the third choice is for a generic cursive face, possibly a script like Shelley Allegro.
{font-family: garamond, "Comic Sans MS", cursive;}
Remember, results will vary depending on the fonts installed on your computer. Using one computer and Netscape 4.7 with Garamond but not Comic Sans installed the previous paragraph was clearly a different type face than this one. On another computer with Garamond, and with Comic Sans, Internet Explorer 5 did not use any of the font-family instructions. What you will see will depend on what fonts you have installed, what browser you are using and what choices you made in the set-up (user preferences) in the browser.
Font Family | Font Size | Font Style | Text Style | Vertical Spacing | Horizontal Spacing
| Other Possibilities | |
|---|---|
| Start of site | Style Sheet Home |
| Send email | Robert Boardman |