Font family [font-family]
The property font-family is used to set a prioritized list of fonts to be used to display a given element or web page.
The property font-style defines the chosen font either in normal, italic or oblique.
The property font-variant is used to choose between normal or small-caps variants of a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters.
The property font-weight describes how bold or "heavy" a font should be presented. A font can either be normal or bold.
The size of a font is set by the property font-size.
There are many different units (e.g. pixels and percentages) to choose from to describe font sizes.
Using the font short hand property it is possible to cover all the different font properties in one single property.
The property font-family is used to set a prioritized list of fonts to be used to display a given element or web page.
h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}Font style [font-style]
The property font-style defines the chosen font either in normal, italic or oblique.
h2 {font-family: "Times New Roman", serif; font-style: italic;}Font variant [font-variant]
The property font-variant is used to choose between normal or small-caps variants of a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters.
h1 {font-variant: small-caps;} h2 {font-variant: normal;}Font weight [font-weight]
The property font-weight describes how bold or "heavy" a font should be presented. A font can either be normal or bold.
h1 {font-family: arial, verdana, sans-serif; font-weight: bold;} h2 {font-family: arial, verdana, sans-serif; font-weight: normal;}Font size [font-size]
The size of a font is set by the property font-size.
There are many different units (e.g. pixels and percentages) to choose from to describe font sizes.
h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;}Compiling [font]
Using the font short hand property it is possible to cover all the different font properties in one single property.
p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; }The above one can be rewritten as
p { font: italic bold 30px arial, sans-serif; }
Comments
Post a Comment