Using CSS font property
CSS font property is also very commonly used css-property. Its used to define the text font style for the element.font property is a shorthand property to define all other individual font property, which are listed below:
font-style
font-variant
font-weight
font-size
line-height
font-family
We will see each of them in details in upcoming posts. font property inherits the properties from its parent.
There are some conditions on the order of using these property values.
– font-style, font-variant and font-weight must be defined, if any, before the font-size value.
– The line-height value must be defined immediately after the font-size, preceded by a mandatory / (slash).
– Finally the font-family is mandatory and must be the last value defined (inherit value does not work).
Examples:
p { font:bold 12px verdana}
/* font-weight is set to bold, with 12px as font-size */
p { font:10px/12px arial,verdana}
/* 10px is font-size, and 12px is line-height with font-family as arial,verdana */
p { font:italic 80% sans-serif}
/* font-style is set to italic, font-size is 80% of its parent element or default size (if no parent element) */
font property can also have other values which define the font-style based on browser’s styles. Those keywords are
caption,icon,menu,message-box,small-caption,status-bar- If status-bar is the value used for font property, then it will take the font property values from the font used in window status bars.