Style Sheets Properties Guide
=Font Properties=
= Index DOT Html by Brian Wilson [bloo@blooberry.com] =

font | font-style | font-variant | font-weight| font-size | font-family
Main Index | Style Sheet Index | Element Tree | Element Index | HTML Support History


Style Sheet font properties detail the appearance of a section of text, and will be one of the most common uses for Style Sheets. Some properties that apply to one family may not apply to another (i.e. specifying "Italic" usually indicates slanted text, but sans-serif fonts use the label "Oblique" for this purpose.)


font [ IE3B1 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: NA
Inherit From Parent: Yes
Default Value: NA
What Is It?
This property is based on a traditional typographical shorthand method of specifying values for multiple properties related to fonts: font-size, line-height, and font-family. Defaults for this shorthand method match those used for each property listed individually. If values are omitted from this shorthand notation, then default values are used.
Example
Usage: Selector { font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family] }
Ext/Doc: p { font: bold small-caps 12pt/14pt sans-serif }
In-Line:  <p STYLE="font: bold small-caps 12pt/14pt sans-serif">Text</p>
Browser Notes
The [font-style], [font-variant], and [font-weight] values are recent additions to this shorthand property in the official spec that appeared after Internet Explorer 3 was released.
Allowed
Values
 Value
Type
 Browser
Support
 Description
[font-style] NA IE4B1 | N4B2 See the individual property for details on syntax and allowed values.
[font-variant] NA IE4B1 | N See the individual property for details on syntax and allowed values.
[font-weight] NA IE4B1 | N4B2 See the individual property for details on syntax and allowed values.
[font-size] NA IE3B1 | N4B2 See the individual property for details on syntax and allowed values.
[line-height] NA IE3B1 | N4B2 See the individual property for details on syntax and allowed values.
[font-family] NA IE3B1 | N4B2 See the individual property for details on syntax and allowed values.


font-style [ IE3B1 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: <i>
Inherit From Parent: Yes
Default Value: normal
What Is It?
This property applies font effects to the current container. If the preferred style can not be accommodated, the browser should try to find the best match to the indicated effect. Italic and Oblique properties both result in an 'italic-like' appearance, but some font families require the use of the 'oblique' value instead of 'italic'.
Example
Ext/Doc: span.sample { font-style: italic }
In-Line:  <span STYLE="font-style: italic">text</span>
Allowed
Values
 Value
Type
 Browser
Support
 Description
normal | italic explicit IE3B1 | N4B2 These properties control whether a portion of text is italicized or not.
oblique explicit IE4B1 | N This is an alternate method of specifying italic properties for sans-serif text types.


font-variant [ IE4B1 | N ]
Applicable Elements: ALL
HTML Equivalent: <font SIZE="(+/-)N">
Inherit From Parent: Yes
Default Value: normal
What Is It?
This property is used to create text composed of capital letters (existing capital letters will be larger than the surrounding small-capped text.)
Example
Ext/Doc: span.sample { font-variant: small-caps }
In-Line:  <span STYLE="font-variant: small-caps">Small Capped Text</span>
Allowed
Values
 Value
Type
 Browser
Support
 Description
normal | small-caps explicit IE4B1 | N These values are toggles to turn the Small-Caps effect on and off.


font-weight [ IE3B1 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: <b>
Inherit From Parent: Yes
Default Value: normal
What Is It?
This property describes the font thickness of a section. Its value can be absolute or relative to the parent container thickness if it has one. Child elements inherit the resulting weight, not the keyword value. If the desired font-weight is not available to the browser, the nearest approximation should be used.
Example
Ext/Doc: em { font-weight: lighter }
In-Line:  <em STYLE="font-weight: lighter">text</em>
Allowed
Values
 Value
Type
 Browser
Support
 Description
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 explicit IE4B1 | N4B2 These values are absolute font weights on a scale. As such, it allows much greater control than the HTML <b> tag it replaces. The values 'normal' and 'bold' listed below map to 400 and 700 respectively
normal | bold explicit IE3B1 | N4B2 These values are simple toggles to allow an author to specify a section as bold or not bold.
bolder | lighter calculated IE4B1 | N4B2 These values select the next higher or lower value on the font weight scale relative to the weight inherited from the parent if possible.


font-size [ IE3B1 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: <font SIZE="(+/-)N">
Inherit From Parent: Yes
Default Value: medium
What Is It?
This property controls the size of text for a section. Objects within a section (such as Applets, Images and Horizontal Rules) are not affected by this property.
Example
Ext/Doc: h5.xsmall { font-size: x-small }
In-Line:  <h5 STYLE="font-size: x-small">text</h5>
Browser Notes
- Netscape 4 Beta 3 The 'font-size' absolute scale keywords (xx-small to xx-large) do not have the expected effect. The size range of these keywords varies wildly from gigantic to microscopic.
- Netscape 4 Beta 3 Specifying a 'font-size' percentage of 100% yields a larger result than normal surrounding default-sized text.
Allowed
Values
 Value
Type
 Browser
Support
 Description
xx-small | x-small | small | medium | large | x-large | xx-large explicit IE3B1 | N4B3 These 7 allowed sizes should correspond roughly to the size ranges allowed through the HTML <FONT SIZE> 1-7 range.
smaller | larger calculated IE4B1 | N4B3 This size change value is relative to the font size of the parent element but is limited in range to that allowed by the system.
[length] explicit IE3B1 | N4B2 Refers to either the length in relation to the current element or an absolute measurement.
[percentage] calculated IE3B1 | N4B3 Refers to a percentage of the font size of the parent element.


font-family [ IE3B1 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: <font FACE="font1, font2, ...fontN">
Inherit From Parent: Yes
Default Value: Browser dependent
What Is It?
This property indicates a prioritized list of specific and/or generic font family names. At least one specific or general font family must be given. If no match is made, the browser default font family should be used.
NOTE: Specifying multiple font families does not work in Internet Explorer yet.
Example
Ext/Doc: div.fixedwidth { font-family: Courier, "Courier New", monospace }
In-Line:  <div STYLE="font-family: Courier, 'Courier New', monospace">text</div>
Allowed
Values
 Value
Type
 Browser
Support
 Description
serif | sans-serif | cursive | fantasy | monospace explicit IE3 | N4B2 These values refer to generic font families that have certain visual characteristics. Browsers will attempt to map an existing font for the selection using this generic family specification. It is recommended to offer a generic font family value as a last alternative after specifying specific font family names.
[font-family] calculated IE3B1 | N4B2 This value will be a string identifying a specific font. Font names containing white space should be quoted.


Boring Copyright Stuff....