Style Sheets Properties Guide
=Font Properties=
= Index DOT Html by Brian Wilson
[bloo@blooberry.com] =
Main Index |
Style Sheet Index |
Top Of Tree |
Tag Index |
Tag 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 Tags: 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 |
IE | N4B2 |
See the individual property for details on syntax and allowed values. |
| [font-variant] |
NA |
IE | N |
See the individual property for details on syntax and allowed values. |
| [font-weight] |
NA |
IE | 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 Tags: 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 |
IE | N |
This is an alternate method of specifying
italic properties for sans-serif text types. |
- font-variant
[IE | N]
- Applicable Tags: 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 |
IE | N |
These values are toggles to turn the Small-Caps effect on and off. |
- font-weight
[IE3B1 | N4B2]
- Applicable Tags: 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 |
IE | 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 |
IE | 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 Tags: 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 |
IE | 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 Tags: 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....