Style font Property
Example
Set the font for a <p> element:
document.getElementById("myP").style.font = "italic bold 20px arial,serif";Try it yourself »
Definition and Usage
The font property sets or returns up to six separate font properties, in a shorthand form.
With this property, you can set/return the following (in this order):
- font-style
- font-variant
- font-weight
- font-size
- line-height
- font-family
The font-size and font-family are required. If one of the other values are missing, the default values will be inserted, if any.
The properties above can also be set with separate style properties. The use of separate properties is highly recommended for non-advanced authors for better controllability.
Browser Support
The font property is supported in all major browsers.
Syntax
Return the font property:
object.style.font
Set the font property:
object.style.font="font-style font-variant font-weight font-size/line-height|caption|icon|menu|
message-box|small-caption|status-bar|initial|inherit;"
Property Values
| Value | Description |
|---|---|
| style | Sets the font-style |
| variant | Sets the text in a small-caps font |
| weight | Sets the boldness of the font |
| size | Sets the size of the font |
| lineHeight | Sets the distance between lines |
| family | Sets the font face |
| caption | The font used for captioned controls (like buttons, drop-downs, etc.) |
| icon | The font used to label icons |
| menu | The font used in menus |
| message-box | The font used in dialog boxes |
| small-caption | The font used in small controls |
| status-bar | The font used in window status bars |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | not specified |
|---|---|
| Return Value: | A String, representing different font properties of the element |
| CSS Version | CSS1 |
More Examples
Example
Return the font of a <p> element:
alert(document.getElementById("myP").style.font);
Try it yourself »
Related Pages
CSS tutorial: CSS Font
CSS reference: font property
Style Object
