Font Properties
The Font properties is used to set font related styles for the text present on an HTML.
- font-family
- font-size
- font-stretch
- font-style
- font-variant
- font-weight
- font
font-family
We can specify a list of font names for the next contained inside an HTML element, using font-family property. If the name of a font family is more than one word, it must be in quotation marks.
Example:
p{
font-family : Arial;
}
font-size
We can specify a font size for the text. We can specify size in the form of percentage, px, em. The Values are xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger.
Example:
p{
font-size : 50%;
}
The defalut text size in browsers is 16px or 1em.
font-stretch
It specifies a normal, condensed or extended font face. We can set this property to normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.
Example:
p{
font-stretch : condensed;
}
font-style
It specifies the style of the font. We can set this property to normal, italic, oblique.
Example:
p{
font-style : italic;
}
By default text is normal
font-variant
It specifies whether or not a fontis a small-caps font. We can set this property to either normal or small-caps.
Example:
p{
fon-variant : small-caps;
}
font-weight
The font weight property allows to set the font weight of the text present on an HTML page. We can set this property to normal, bold, bolder,lighter, number(100,200 upto 900)
Example:
p{
font-weight : bold;
}
font
It defines a shorthand property for font-style, font-variant, font-weight, font-size, line-height, and font-family properties.
Example:
p{
font : bold 20x serif;
}
The properties must be set in order: "font-style font-variant font-weight font-size/line-height font-family"
The font-size and font-family values are required.