YouTipThis is some text.
Prop Style Font
# Style font Property
[ Style Object](#)
* * *
## Definition and Usage
The font property sets or returns up to six individual font properties in shorthand form.
Through this property, you can set/return:
* font-style
* font-variant
* font-weight
* font-size
* line-height
* font-family
The above properties can also be set as individual style properties. It is strongly recommended to use the individual properties for better control.
## Syntax
Set the font property:
Object.style.font="[_style variant weight size/lineHeight family_]_or_"
Return the font property:
Object.style.font
**Note:** The font property has no default value.
| Value | Description |
| :--- | :--- |
| _(#)_ | Sets the font style. |
| _(#)_ | Sets the text to be displayed in small-caps font. |
| _(#)_ | Sets the font weight. |
| _(#)_ | Sets the font size. |
| _(#)_ | Sets the distance between lines. |
| _(#)_ | Sets the font family. |
| caption | Defines the font for captioned controls (like buttons, drop-down lists, etc.). |
| icon | Defines the font used to label icons. |
| menu | Defines the font used in menus. |
| message-box | Defines the font used in dialog boxes. |
| small-caption | Defines the font used in small controls. |
| status-bar | Defines the font used in window status bars. |
| inherit | The value of the font property is inherited from the parent element. |
* * *
## Browser Support
All major browsers support the font property.
**Note:** IE7 and earlier versions do not support the "inherit" value. IE8 only supports "inherit" if a !DOCTYPE is specified. IE9 supports "inherit".
* * *
## Example
## Example
Change the font of the text:
function displayResult(){
document.getElementById("p1").style.font="italic bold 20px arial,serif";
}