Cascading Style Sheets/Fonts
From WikiKnowledge
Contents |
[edit] font-family
The font-family property accepts a comma separated list of fonts you want to use. The browser will try to use the first font in the list, but if that is not available then it will try the second and so on. For example, to use the Arial font you would use this rule:
body { font-family:Arial;}
and if you wanted to use the Times New Roman font, you would use this rule:
body { font-family:"Times New Roman";}
The second rule places the font name in double quotation marks ("), this was done because the font name contains spaces which could confuse a browser, the first font name, Arial, was not put in quotation marks because it is only one word. Note that the font you wish to use must be installed on the users computer before it can be displayed. If the font is not available then the browser will go back to whichever font it normally uses. You can provide a list of fonts you wish to use, should your first choice not be available by separating them out with commas.
body { font-family:Arial, "Microsoft Sans Serif"; }
With this rule, if you first font, Arial, is not available, then the browser will try to use the next one in the list, Microsoft Sans Serif, in this case. If that is also not available the browser will use its default font. You can list out as many fonts as you wish by separating then with commas, and the browser will use the first one it can find.
Because you can never rely on a particular font being available there are also five generic fonts available to use, shown in the table below. Note that the example is what the font looks like on your computer and web-browser.
| Font name | Notes | Example |
|---|---|---|
| serif | Resembles Times New Roman. | Example 123 |
| sans-serif | Resembles Arial. | Example 123 |
| cursive | Example 123 | |
| fantasy | Example 123 | |
| monospace | Resembles Courier. | Example 123 |
It is always a good idea to end a list of fonts with one of the generic fonts in the above list. Note that a generic font will always be matched to font on the users computer, so there is no point in listing any fonts after a generic font. Here is an example of font-family using a generic font.
body { font-family:Arial, "Microsoft Sans Serif", sans-serif; }
If neither of the first two fonts are available, then the web browser will pick a sans-serif font that is available and use that.
[edit] font-weight
Possible values are:
- normal
- Text appears normal.
- bold
- Text appears bold.
- bolder
- Makes text bolder.
- lighter
- Makes text lighter.
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- inherit
- Inherit this setting.
Most browsers only support two settings for the weight of a font, bold and not bold. Therefore, text with a font-weight setting of bold and bolder will look identical. The lighter setting can be used to turn off bold if it is on, but has no effect otherwise. The normal setting also turns bold off. The values from 100 to 900 are supposed to be used for fonts with different bold faces defined, however most of the time the higher numbers will give text a standard bold face, while the lower numbers have no effect.
[edit] font-variant
Possible values are:
- normal
- Text appears normal.
- small-caps
- All text appears as small caps.
- inherit
- Inherit this setting.
Setting font-variant to small-caps will make all the letters uppercase, however uppercase letters will appear bigger in size to lowercase letters.
This text is in small-caps.
[edit] font-style
This property basically controls whether or not the font should be displayed in italics. In most browsers the italic and oblique settings are identical. Possible values are:
| normal | (Default) |
| italic | Display the font in italic style. |
| oblique | Display the font in oblique style. |
| inherit | Inherit this setting. |
[edit] font-size
This property controls the size of the font.
[edit] System fonts
System fonts are the font which are used by your operating system. The system fonts available are:
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
