| Syntax: | font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>] |
|---|---|
| Possible Values: | <family-name>
|
| Initial Value: | Determined by browser |
| Applies to: | All elements |
| Inherited: | Yes |
Font families may be assigned by a specific font name or a generic font family. Obviously, defining a specific font will not be as likely to match as a generic font family. Multiple family assignments can be made, and if a specific font assignment is made it should be followed by a generic family name in case the first choice is not present.
A sample font-family declaration might look like this:
P { font-family: "New Century Schoolbook", Times, serif }
Notice that the first two assignments are specific type faces: New Century Schoolbook and Times. However, since both of them are serif fonts, the generic font family is listed as a backup in case the system does not have either of these but has another serif font which meets the qualifications.
Any font name containing whitespace must be quoted, with either single or double quotes.
The font family may also be given with the font property.
| Syntax: | font-style: <value> |
|---|---|
| Possible Values: | normal | italic | oblique |
| Initial Value: | normal |
| Applies to: | All elements |
| Inherited: | Yes |
The font-style property defines that the font be displayed in one of three ways: normal, italic or oblique (slanted). A sample style sheet with font-style declarations might look like this:
H1 { font-style: oblique }
P { font-style: normal }
| Syntax: | font-variant: <value> |
|---|---|
| Possible Values: | normal | small-caps |
| Initial Value: | normal |
| Applies to: | All elements |
| Inherited: | Yes |
The font-variant property determines if the font is to display in normal or small-caps. Small-caps are displayed when all the letters of the word are in capitals with uppercase characters slightly larger than lowercase. Later versions of CSS may support additional variants such as condensed, expanded, small-caps numerals or other custom variants. An example of a font-variant assignment would be:
SPAN { font-variant: small-caps }
| Syntax: | font-weight: <value> |
|---|---|
| Possible Values: | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
| Initial Value: | normal |
| Applies to: | All elements |
| Inherited: | Yes |
The font-weight property is used to specify the weight of the font. The bolder and lighter values are relative to the inherited font weight, while the other values are absolute font weights.
Note: Since not all fonts have nine possible display weights some of the weights may be grouped together in assignment. If the specified weight is not available, an alternate will be chosen on the following basis:
Some example font-weight assignments would be:
H1 { font-weight: 800 }
P { font-weight: normal }
| Syntax: | font-size: <absolute-size> | <relative-size> | <length> | <percentage> |
|---|---|
| Possible Values: |
|