Style fontProperty
Style Object
Definition and Usage
The font property sets or returns up to six separate font properties in shorthand form.
With 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 separate style properties. It is strongly recommended to use separate properties for better control.
Syntax
Set the font property:
Object.style.font="[style variant weight size/lineHeight family]
or [reserved word]"
Return the font property:
Object.style.font
Tip:The font property has no default value.
| Value | Description |
|---|---|
| style | Sets the font style. |
| variant | Sets the text to display in small-caps font. |
| weight | Sets the font weight. |
| size | Sets the font size. |
| lineHeight | Sets the distance between lines. |
| family | Sets the font family. |
| caption | Defines the font for controls (such as buttons, dropdown lists, etc.). |
| icon | Defines the font used for captioning 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 the window status bar. |
| 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 text:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById("p1").style.font="italic bold 20px arial,serif";
}
</script>
</head>
<body>
<p id="p1">This is some text.</p>
<br>
<button type="button" onclick="displayResult()">Change font</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById("p1").style.font="italic bold 20px arial,serif";
}
</script>
</head>
<body>
<p id="p1">This is some text.</p>
<br>
<button type="button" onclick="displayResult()">Change font</button>
</body>
</html>
Try it yourself »
Style Object Other Extensions