@font-face
CSS Attributes Reference

@font-face

Description

Specifies a font to embed into your HTML document.

This feature allows you to use specific fonts that might not be available on your local system. The URL should point to an embedded OpenType file (.eot or .ote format). The file contains compressed font data that is converted to a TrueType font. For more information on the font embedding feature and pointers to a tool for creating .eot files, see Font Embedding.

Syntax

@font-face {font-family: font-family, src url(URL);}

Example

The following example shows how to embed a font in an HTML document by referencing its source from another site.

<html>
<head>
<style>
@font-face {font-family:comic; src:url(http://valid_url/some_font_file.eot);}
</style>
<title>Font embedding using @font-face</title>
</head>
<body>
<p style="font-family:comic;font-size:18pt">This line uses @font-face defined in the above style element section using comic sans ms bold in 18pt.</p>
</body>
</html>


font-family

Description

Sets the font-family.

The value is a prioritized list of font family names and/or generic family names. List items are separated by commas to minimize confusion between multiple-word font family names. If the font family name contains white space, it is recommended that it is quoted with single or double quotation marks.

Syntax

{ font-family: [[ family-name | generic-family ] , ]* [ family-name | generic-family ]}

Remarks

This attribute is inherited.

Example

The following generic families are defined, with an example name in parentheses.

'serif' (Times) 
'sans-serif' (Helvetica) 
'cursive' (Zapf-Chancery) 
'fantasy' (Western) 
'monospace' (Courier) 

Not knowing which fonts users will have installed on their computers, authors should provide a list of alternatives with a generic font-family at the end of the list. This list can include embedded fonts. See @font-face for more information on embedding fonts.

BODY { font-family: univers, helvetica, sans-serif }
BODY { font-family: 'new century schoolbook', serif }

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text

Scripting Property

fontFamily


font-size

Description

Specifies the font size. Initial value is medium. Negative values are not allowed.

Font sizes are computed based on the font size of the parent element. Therefore, a font size of "10em" means that the size of the "em" is based on the font used by the parent element.

The values for font size are shown below:
absolute-size A set of keywords that indicate predefined font sizes. Possible keywords include [xx-small | x-small | small | medium | large | x-large | xx-large]. Named font sizes scale according to the user's font setting preferences.
relative-size A set of keywords that are interpreted as relative to the font size of the parent element. Possible values include [ larger | smaller].
length An absolute value for the font size.
percentage A percentage value of the parent element's font size.

For details on font-size, refer to the CSS1 specification.

Syntax

{ font-size: absolute-size | relative-size | length | percentage |}

Remarks

This attribute is inherited.

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text

Scripting Property

fontSize


font-style

Description

Sets the font style. Internet Explorer 4.0 implements italic and oblique identically.

Syntax

{ font-style: normal | italic | oblique}

Remarks

This attribute is inherited.

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text

Scripting Property

fontStyle


font-variant

Description

Sets the font variation to small-caps in the current font family. Internet Explorer 4.0 renders small-caps as uppercase letters in a smaller size.

Syntax

{ font-variant: normal | small-caps}

Remarks

This attribute is inherited.

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text

Scripting Property

fontVariant


font-weight

Description

Sets the weight (boldness) of the text.

The key words for font-weight values are mapped to specific font variations depending on the fonts that are installed on the user's computer. In many cases, the user will not see the difference between different font-weight settings because the system will choose the closest match, which may be the same as the next relative font-weight setting that was previously set on the page. In any case, Internet Explorer 4.0 will always render a bolder font at least the same if not darker than a lighter font.

Setting the font-weight to 400 is equivalent to normal. Setting the font-weight to 700 is the equivalent to bold.

A font-weight of bolder or lighter is interpreted relative to the parent element's weight. A value of bolder for text whose parent is normal would set the text to bold.

Syntax

{ font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}

Remarks

Internet Explorer currently supports only normal | bold.

This attribute is inherited.

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text

Scripting Property

fontWeight


height

Description

Specifies the height of a positioned element. Percentage values are based on the width of the parent element.

The height attribute, like all other CSS attributes, specifies a string value. When scripting the height property, use either the pixelHeight or posHeight property for numeric manipulation of a height value.

Syntax

{ height: length | percentage | auto}

Remarks

This attribute is not inherited.

Applies To

TABLE, INPUT, TEXTAREA, INPUT type=button, DIV, SPAN, OBJECT, APPLET, EMBED, IFRAME, IMG, HR, MARQUEE, FIELDSET

Scripting Property

height

See Also

width, top, left, posHeight, pixelHeight


hover

Description

Sets the style of A elements when the user's mouse hovers over the link.

Hover means that the user has the mouse positioned over the link and has hesitated. The style will not change if the mouse is simply passed over the link. Setting the hover pseudo-class is often used in conjunction with setting specific styles for the other states of a link: active, link, visited. Note the syntax in the example below uses a colon (:) to specify a pseudo-class.

Example

<style>
a:hover {color:red;text-transform:uppercase;letter-spacing:1cm}
</style>

Applies To

A

See Also

active, link, visited


@import

Description

Specifies a style sheet to import.

This differs from using the LINK element in that the @import statement is used as part of a style sheet definition inside a LINK or a STYLE tag. In the scripting model, this means that the owningElement property of the styleSheet object that represents a style sheet defined through @import will be either a STYLE or a LINK element. The statement should occur at the start of a style sheet, before any declarations. While Internet Explorer 4.0 allows @import statements to be anywhere within the style sheet definition, the rules contained within the @import style sheet will be applied to the document before any other rules defined for the containing style sheet. This can affect expected cascading affects.

Syntax

@import url (URL);

Remarks

Rules in the style sheet override rules in the imported style sheet.

Example

<STYLE type="css/text">
@import url(http://anotherStyleSheet.css)
P {color:blue}
</STYLE>

See Also

link, style, styleSheet, imports


!important

Description

Increases the weight or importance of a particular rule.

Example

The following example illustrates this feature.

<style>
p {color:red!important}
</style>
<p style="color:green">This will be red </p> 

In this example, normally the color of the <p> will be green (because inline overrules the rule set in a style tag). But, because of the !important in the style rule, the <p> tag will be red.

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text


left

Description

Specifies the position of the element relative to the left of the document.

left is used with the position attribute. This value corresponds to the offsetLeft property of the element, and does not include the border of the parent element (noteworthy for the BODY that draws the border inside the client region). auto is the default position of the element according to the regular HTML layout of the page. Percentage values are based on the parent's position.

This attribute, like all other CSS attributes, specifies a string value. When scripting the left property, use either the pixelLeft or posLeft property for numeric manipulation of a top value.

Syntax

{ left: length | percentage | auto}

Remarks

This attribute is not inherited.

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IFRAME, IMG, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OBJECT, OL, P, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text, INPUT type=checkbox, INPUT type=radio, INPUT type=image

Scripting Property

left

See Also

top, height, width, posLeft, pixelLeft

© 1997 Microsoft Corporation. All rights reserved. Terms of Use.