You are Here: DHTML/CSS Home - Font Properties
Font Properties
-
Font Family
| Syntax | : | font-family: <family name> |
| Possible Values | : | <family-name> |
| Initial Value | : | Determined by browser |
| Applies to | : | All elements |
| Inherited | : | Yes |
| Example | : | 1. <font style="font-family:Arial"> Font =Arial</font> |
| 2. <p style="font-family:Verdana"> Paragraph with font Verdana</p> | ||
| 3. <h1 class=fontFamily>Heading with font family through
class</h1> .fontFamily{font-family:arial} |
-
Font Style
| Syntax | : | font-style: <value> | |
| Possible Values | : | normal | italic | oblique | |
| Initial Value | : | normal | |
| Applies to | : | All elements | |
| Inherited | : | Yes | |
| Example | : | CODE | Example |
| 1. <font style="font-style:normal">Hello !</font> | Hello ! | ||
| 2. <font style="font-style:italic">Hello !</font> | Hello ! | ||
| 3. <font style="font-style:oblique">Hello !</font> | Hello ! | ||
-
Font Variant
| Syntax | : | font-variant: <value> | |
| Possible Values | : | normal | small-caps | |
| Initial Value | : | normal | |
| Applies to | : | All elements | |
| Inherited | : | Yes | |
| Example | : | CODE | Example |
| 1. <font style="font-variant:normal">Hello !</font> | Hello ! | ||
| 2. <font style="font-variant:small-caps">Hello !</font> | Hello ! | ||
-
Font Weight
| 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 | |
| Example | : | CODE | Example |
| 1. <font style="font-weight:normal">Hello !</font> | Hello ! | ||
| 2. <font style="font-weight:bold">Hello !</font> | Hello ! | ||
| 3. <font style="font-weight:bolder">Hello !</font> | Hello ! | ||
| 4. <font style="font-weight:lighter">Hello !</font> | Hello ! | ||
| 5. <font style="font-weight:100">Hello !</font> | Hello ! | ||
| 6. <font style="font-weight:200">Hello !</font> | Hello ! | ||
| 7. <font style="font-weight:300">Hello !</font> | Hello ! | ||
| 8. <font style="font-weight:400">Hello !</font> | Hello ! | ||
| 9. <font style="font-weight:500">Hello !</font> | Hello ! | ||
| 10. <font style="font-weight:600">Hello !</font> | Hello ! | ||
| 11. <font style="font-weight:700">Hello !</font> | Hello ! | ||
| 12. <font style="font-weight:800">Hello !</font> | Hello ! | ||
| 13. <font style="font-weight:900">Hello !</font> | Hello ! | ||
-
Font Size
| Syntax | : | font-size: <absolute-size> | <relative-size> | <length> | <percentage> | |
| Possible Values | : | <absolute-size> xx-small | x-small | small | medium | large | x-large | xx-large <relative-size> larger | smaller <length> in (inches; 1in=2.54cm) | cm (centimeters; 1cm=10mm) | mm (millimeters) | pt (points; 1pt=1/72in) | pc (picas; 1pc=12pt) <percentage> |
|
| Initial Value | : | medium | |
| Applies to | : | All elements | |
| Inherited | : | Yes | |
| Example | : | CODE | Example |
| 1. <font style="font-size:xx-small">Hello !</font> | Hello ! | ||
| 2. <font style="font-size:x-small">Hello !</font> | Hello ! | ||
| 3. <font style="font-size:small">Hello !</font> | Hello ! | ||
| 4. <font style="font-size:medium">Hello !</font> | Hello ! | ||
| 5. <font style="font-size:large">Hello !</font> | Hello ! | ||
| 6. <font style="font-size:x-large">Hello !</font> | Hello ! | ||
| 7. <font style="font-size:xx-large">Hello !</font> | Hello ! | ||
| <relative-size> | |||
| 9. <font style="font-size:larger">Hello !</font> | Hello ! | ||
| 10. <font style="font-size:smaller">Hello !</font> | Hello ! | ||
| <length> | |||
| 12. <font style="font-size:12pt">Hello !</font> | Hello ! | ||
| <percentage> | |||
| 13. <font style="font-size:120%">Hello !</font> | Hello ! | ||
-
Font
| Syntax | : | font: <value> |
| Possible Values | : | <font-style>|| <font-variant> | <font-weight> |<font-size> <line-height> | <font-family |
| Initial Value | : | normal |
| Applies to | : | Not defined |
| Inherited | : | Yes |
| Example | : | CODE |
| <p style="font-style:italic;font-variant:normal;font-weight:bold;line-height:20px;font-family:arial"> Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font </p> | ||
| Result | ||
Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font Font |
||
