CSS Fonts
| Property | Value | Description | N.N. | I.E. |
|---|---|---|---|---|
| font-family: | Family-name Generic-family |
A list of font family names and/or the generic family name you wish to display | 4.0 | 3.0 |
| font-size: | xx-small x-small small medium large x-large xx-large smaller larger length % |
Sets size of the font | 4.0 | 3.0 |
| font-style: | normal italic oblique |
Set the style of the font | 4.0 | 4.0 |
| font-weight: | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 |
Set the weight (thickness) of a font character | 4.0 | 4.0 |
| font-variant: | normal small-caps |
Display the text in small-caps or a normal font | 6.0 | 4.0 |
| font: | A combination of all the above | A shortcut for combining the above properties into one rule | 4.0 | 4.0 |
|
||||
The <font> tag has been deprecated and though you can still use it at some point this won't be posible. Cascading style sheets have become the means for accomplishing what this tag can do and more. So pay attention here and start using CSS for all your font formatting needs.
A style of type is referred to as a font family. Each font family has similar characteristic in common with all the members of that family. In the code above you'll notice I've listed several different fonts that all belong to the same family. The last one is the generic name for the font family. More on that in a minute.
The reason I've listed several is because the person viewing your page may not have the first font listed on their computer. The browser will go through the list, in order, until it finds a font that's on the computer. If the browser can't find any of the fonts listed it will revert to a default font. By listing the generic name for the font family, you're almost guaranteed the font used will resemble what you intended to use.
Here's a couple things to remember. When using a font with a multiple word name such as "Times New Roman" you must include it between quote marks. In the case of an inline style, such as that above, with double quotes already being used for the style="" attribute, use single quotes. Separate each font name with a comma. You can list as many fonts as you desire but use fonts from the same family. Always specify the generic family name.
The first paragraph below the code above should look different (have serif's) from all the rest. If it doesn't then chances are you don't have any fonts from that font family on your computer. It's from a different family then the rest of the text (sans-serif). With that said, lets move on to the generic font families.
