CSS allows you to refine font characteristics using various properties and values.
The font-family property is used to specify the fonts the browser uses to render a character.
The values are comma-separated lists of fonts.
Family name - (e.g. Arial, "Times New Roman", etc.) Font Family names containing spaces should be quoted. Font Generic font names (e.g. serif, sansserif, cursive) are keywords and must not be quoted.
font-family : Garamond, serif, "Times New Roman" font-family : Courier, serif, "MS Courier New"
The font-style property is used to specify the font style the browser uses to render a character.
The values of font-style are.
| Value | Description |
|---|---|
normal | |
italic | Cursive |
oblique | Slanted, Incline |
inherit | inherited from the parent |
font-style : normal font-style : italic
The font-variant property is used to specify the font variant the browser uses to render lowercase character.
The values of font-variant are.
normal | |
small-caps | Similar to uppercase characters but smaller in size |
inherit | inherited from the parent |
font-variant : normal font-variant : small-caps
The font-weight property is used to specify the font weight(boldness or lightness) the browser uses to render the characters.
The values of font-weight are.
| Value | Description |
|---|---|
normal | equal to '400' |
bold | equal to '700' |
bolder | the next darker value upto '900' |
lighter | the next lighter value down to '100' |
| 100|200|300|400|500|600|700|800|900 | |
inherit | inherited from the parent |
font-weight : bold font-weight : bolder
The font-stretch property is used to specify the font stretch(condensed or expanded) the browser uses to render the characters.
The values of font-stretch are.
| Value | Description |
|---|---|
normal | |
wider | relative to the inherit value |
narrower | relative to the inherit value |
ultra-condensed | extra-condensed | condensed | semi-condensed | |
semi-expanded | expanded | extra-expanded | ultra-expanded | |
inherit | inherited from the parent |
The font-size property is used to specify the font size(baseline to baseline) the browser uses to render the characters.
The values of font-size are.
| Values | Description |
|---|---|
<absolute-size>
xx-small | xx-small | small | medium | large | x-large |xx-large | |
<relative-size>
larger | smaller | relative to the parent value |
| <length> | |
| <percentage> | relative to the parent value |
inherit | inherited from the parent |
font-size : x-small font-size : large font-size : x-small font-size : large
The 'font-size-adjust' properties allows to specify the font aspect value (the ratio between the font-size value and the x-height) the browser uses to render characters. The normal values are 0.58 for Verdana and 0.46 for Times New Roman. Because of this, the Verdana fonts remain legible at small sizes.
The possible values are.
| Values | Description |
|---|---|
normal | |
| <number> | |
inherit | inherited from the parent |
font-size-adjust : normal font-size-adjust : 0.58
font property is used as a shorthand to specify the font the browser uses to render characters.
The possible values.
| Values | Description |
|---|---|
| <font-style> <font-variant> <font-weight> <font-size>/ <line-height> <font-family> | |
caption | icon | menu | message-box | small-caption | status-bar | |
inherit | inherited from the parent |
font: italic small-caps 600 15pt/18pt Arial, serif font: 110% "Times New Roman", Garamond, serif font: 110%/120% "Courier New", fantasy
src : <url> - url
