CSS Attributes Index Font Attributes
Sets or retrieves the separate font attributes ( font-style, font-variant, font-weight, font-size, and font-family ) of an object with one declaration.
| CSS |
{ font: [ font-style || font-variant || font-weight ] font-size [ line-height ] font-family } |
| Script |
object.style.font = sFont ] |
| sStyle |
font-style |
String having any of the range of values available to the fontStyle property. |
| sVariant |
font-variant |
String having any of the range of values available to the fontVariant property. |
| sWeight |
font-weight |
String having any of the range of values available to the fontWeight property. |
| sSize |
font-size |
String having any of the range of values available to the fontSize property. |
| sHeight |
line-height |
String having any of the range of values available to the lineHeight property. |
| sFamily |
font-family |
String having any of the range of values available to the fontFamily property. |
The property is read/write with the default value set by the browser; the cascading stylesheet ( CSS ) attribute is inherited.
Setting the font property also sets the component properties. In this case, the string must be a combination of valid values for the component properties, with no more than one value per property. If the string does not contain a value for a component property, that property is set to its default. The font properties must be defined in this order: font-style, font-variant, font-weight, font-size, line-height, font-family.
Possible length values specified in a relative measurement, using the height of the element’s font ( em ) or the height of the letter "x" ( ex ), are supported as of Internet Explorer® 4.0 or later.
Internet Explorer® 3.0 only supports bold for the sWeight possible value.
The following example demonstrates the effects of applying composite font attributes to change an element’s font characteristics using the font shorthand notation. This demo requires Internet Explorer® 4 or later.
Show me
The sample below uses inline event handlers to dynamically set an object’s font characteristics in response to mouse events.
<p onmouseover="this.style.font='italic 14pt serif'"
onclick="this.style.font='bolder small-caps 13pt comic sans ms'"
onmouseout="msg.style.font='bold 13pt arial"'>
...
</p>
Show me
@font-face Rule, font-family, font-size, font-style, font-variant, font-weight, CSS Length Units