In today’s post you will learn how to style
font using css. Some of the css font properties are:
1. font-family
2. font-style
3. font-variant
4. font-weight
5. font-size
6. font
font-family
property is usedto
display text in a selected font. Font family names is of two types:
Family name: The name of font family like Arial, Georgia.
Generic family: The name of generic family
name like:
serif – fonts have
serifs (small lines) at the end of their characters e.g. Times New Roman, Georgia
sans-serif– fonts don’t have serifs at the end of their characters e.g. Arial,
Verdana
monospace – all
characters of this type of fonts have same width e.g. Courier New, Lucida
Console
cursive – fonts imitate handwriting e.g. Comic Sans MS
fantasy – fonts
are decorative fonts e.g. Impact
Text will be displayed in first mentioned
font if it is installed on your computer. If it is not installed then text will
be displayed in second mentioned font and so on. Last option must be of generic
family name because browser will display any font of that family if no other
previously mentioned fonts are installed on your computer.
Example
h1{font-family : “Times New Roman”, Georgia,
serif;}
Note: If font name is more than one word then it must be quoted.
font-style
is used to display text in italic or oblique. Its
values are normal, italic and oblique.
Example
p{font-style : italic;}
font-variant
property is used to display text in small caps
font. Its values are normal and small-caps.
Example
h2{font-variant : small-caps;}
font-weight
property is used to set how bold the text appears.
Its values are normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600,
700, 800 and 900
Example
p{font-weight : bold;}
font-size property is used to set size of a text. Its values are xx-small,
x-small, small, smaller, medium, large, larger, x-large, xx-large. You can also
specify size in pixels, em (1em=16px) and percentage.
Example
div{font-size : larger;}
font
property is shorthand property in which you can
specify all font properties together.
Its order is font-style, font-variant, font-weight, font-size and font
family.
Example
p{font : italic, 1em, Arial, sans-serif;
}
Example
I have created a web page in which I have used font properties.To view it click here