font style property

Browser support:
Specifies or returns up to six separate font properties, in a shorthand form.
The font property allows you to specify what kind of letter is used for the visual representation of the element. You can change the style, weight, size, the font family, and more, but if you want to change the color of the text, you must use the color property.
Specifying more than one font-family is recommended, because different font family names are supported by different platforms. For details, see the page for the fontFamily property. These features can be set with six different style properties too, listed below. The use of separate properties is highly recommended for non-advanced authors for better controllability.
If you want to get font features from JavaScript, use the six stand-alone properties for cross-browser compatibility. To set the features, you can use all seven properties.

Syntax:

object.font;
You can find the related objects in the Supported by objects section below.
This property is read/write.
CSS page for this property: font

Possible values:

The type of this property is string.
 One of the following values: 
 Values in this order (use the space character to separate them): 
1.
 Any of the following values (use the space character to separate them, each value can be used only once): 
<font-style>
<font-variant>
<font-weight>
possible but not necessary; left to personal choice
2.
 Values in this order (use the / character to separate them): 
1. <font-size>
2.
<line-height> possible but not necessary; left to personal choice
3. <font-family>
caption
icon
menu
message-box
small-caption
status-bar
-moz-button
-moz-info
-moz-desktop
-moz-dialog
-moz-document
-moz-workspace
-moz-window
-moz-list
-moz-pull-down-menu
-moz-field
-webkit-control
-webkit-mini-control
-webkit-small-control
inherit

Description of values:

-moz-button
The font used in buttons.
-moz-desktop
The font used on the desktop.
-moz-dialog
The font used in dialogs.
-moz-document
The font used in documents.
-moz-field
The font used in fields.
-moz-info
The font used in info.
-moz-list
The font used in lists.
-moz-pull-down-menu
The font used in pull-down-menus.
-moz-window
The font used in windows.
-moz-workspace
The font used in workspaces.
-webkit-control
The font used in controls.
-webkit-mini-control
The font used in mini controls.
-webkit-small-control
The font used in small controls.
caption
The font used for objects that have captions.
font-family
Specifies or returns the font face for text.
font-size
Specifies or returns the font size of the text.
font-style
Specifies or returns whether the style of the font is normal, italic or oblique.
font-variant
Specifies or returns a variation of the specified or default fontFamily.
font-weight
Specifies or returns the font weight of the text.
icon
The font used to icon labels.
inherit
Takes the value of this property from the computed style of the parent element.
line-height
Specifies or returns the distance between lines of text in a block-level element.
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.
Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the font property:
<head>
    <style>
        .example {
            font: italic normal 600 medium/1.2em serif;
        }
    </style>
</head>
<body>
    <a class="example">font: italic normal 600 medium/1.2em serif</a>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the font property in JavaScript:
<head>
    <script type="text/javascript">
        function ChangeFont () {
            var selectTags = document.getElementsByTagName ("select");
            var fontValue = "";
            
            for (i = 0; i < selectTags.length; i++) {
                // Returns the index of the selected option
                whichSelected = selectTags[i].selectedIndex;

                // Returns the selected options values
                fontValue += selectTags[i].options[whichSelected].text + " ";
            }

            var anchor = document.getElementById ("myAnchor");
            anchor.style.font = fontValue;
        }
    </script>
</head>
<body>
    <a id="myAnchor" style="font: italic normal 600 medium/1.2em serif">
        Sample multiline text <br />with the specified font
    </a>

    <br />
    font-style:
    <select onchange="ChangeFont ();" size="3">
        <option selected="selected" />italic
        <option />normal
        <option />oblique
    </select>
    font-variant:
    <select onchange="ChangeFont ();" size="2">
        <option selected="selected" />normal
        <option />small-caps
    </select>
    font-weight:
    <select onchange="ChangeFont ();" size="13">
        <option />bold
        <option />bolder
        <option />lighter
        <option />normal
        <option />100
        <option />200
        <option />300
        <option />400
        <option />500
        <option selected="selected" />600
        <option />700
        <option />800
        <option />900
    </select>
    font-size:
    <select onchange="ChangeFont ();" size="9">
        <option />xx-small
        <option />x-small
        <option />small
        <option />smaller
        <option selected="selected" />medium
        <option />larger
        <option />large
        <option />x-large
        <option />xx-large
    </select>
    line-height:
    <select onchange="ChangeFont ();" size="10">
        <option />/0.2
        <option />/0.5
        <option />/0.8
        <option />/1
        <option selected="selected" />/1.2
        <option />/1.5
        <option />/1.8
        <option />/2.1
        <option />/2.4
        <option />/3
    </select>
    font-family:
    <select onchange="ChangeFont ();" size="7">
        <option />gill
        <option />helvetica
        <option />cursive
        <option />fantasy
        <option selected="selected" />serif
        <option />sans-serif
        <option />monospace
    </select>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content