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 |
||