Fonts

CSS allows you to refine font characteristics using various properties and values.

Font Family

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.

Note
It is recommended that the last font name in the list be a generic font name.
example
font-family : Garamond, serif, "Times New Roman" 
font-family : Courier, serif, "MS Courier New"
Font Style

The font-style property is used to specify the font style the browser uses to render a character.

The values of font-style are.

ValueDescription
normal
italic Cursive
obliqueSlanted, Incline
inherit inherited from the parent
example
 font-style : normal 
 font-style : italic
Font Variant

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-capsSimilar to uppercase characters but smaller in size
inheritinherited from the parent
example
 font-variant : normal 
 font-variant : small-caps
Font Weight

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.

ValueDescription
normalequal to '400'
boldequal to '700'
bolderthe next darker value upto '900'
lighterthe next lighter value down to '100'
100|200|300|400|500|600|700|800|900
inherit inherited from the parent
example
 font-weight : bold 
 font-weight : bolder
Font stretch

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.

ValueDescription
normal
widerrelative to the inherit value
narrowerrelative to the inherit value
ultra-condensed | extra-condensed | condensed | semi-condensed
semi-expanded | expanded | extra-expanded | ultra-expanded
inheritinherited from the parent
example
Font size

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.

ValuesDescription
<absolute-size> xx-small | xx-small | small | medium | large | x-large |xx-large
<relative-size> larger | smallerrelative to the parent value
<length>
<percentage>relative to the parent value
inheritinherited from the parent
example
font-size : x-small 
font-size : large 
font-size : x-small 
font-size : large
Font aspect value

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.

ValuesDescription
normal
<number>
inheritinherited from the parent
example
font-size-adjust : normal 
font-size-adjust : 0.58
Font
The font property is used as a shorthand to specify the font the browser uses to render characters. The possible values.
ValuesDescription
<font-style> <font-variant> <font-weight> <font-size>/ <line-height> <font-family>
caption | icon | menu | message-box | small-caption | status-bar
inheritinherited from the parent
example
font: italic small-caps 600 15pt/18pt Arial, serif 
font: 110% "Times New Roman", Garamond, serif 
font: 110%/120% "Courier New", fantasy
Font Download
CSS2 allows the designer to describe and download custom-made fonts. This is made possible by a @font-face block inserted into the style sheet. The @font-face block contains rules that describe the font. The rules is given below. It defines the internet address for the font that will be downloaded and used by the browser for rendering.
src : <url> - url
Font extensions:
prf, .eot, .ttf, .pfb, .pfa
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +