This document presents a set of properties allowing font specification by a user agent as well
as additional font decoration properties like font effects, emphasis, smoothing, etc...
The font specification is identical to the similar section in CSS 2
[CSS2]. The font decoration properties are new to CSS3.
This document is a working draft of the CSS working group which is
part of the Style activity. It contains a
proposal for features to be included in CSS level 3.
Feedback is very much welcomed. Comments can be sent directly to the editor,
but the mailing list www-style@w3.org
(see instructions) is also open and
is preferred for discussion of this and other drafts in the Style area.
This working draft may be updated, replaced or rendered obsolete by other W3C
documents at any time. It is inappropriate to use W3C Working Drafts as
reference material or to cite them as other than "work in progress".
Its publication does not imply endorsement by the W3C membership or the CSS
Working Group (members
only).
To find the latest version of this working draft, please follow the
"Latest version" link above, or visit the list of W3C Technical
Reports.
This CSS3 module depends on the following other CSS3 modules:
It has non-normative (informative) references to the following other CSS3
modules:
When a document's text is to be displayed visually, characters (abstract
information elements) must be mapped to glyphs.
One or
more characters may be depicted by one or more abstract glyphs, following rules
defined by fonts, by language adn by context. Abstract glyphs are then rendered
into glyphs in the forms of outlines or bitmaps that
may be drawn on the screen or paper. The transformation from characters to
abstract glyphs is derived from the combination of the font properties, which
are used to select a font-face, and the font data from that font-face.
A font-face consists of a collection of glyphs together
with the information, the font tables,
necessary to use those glyphs to present characters on some medium. The combination of the collection of glyphs and the font tables is
called the font data. The font tables include the information necessary to map
characters to glyphs, to determine the size of glyph areas and to position the
glyph area. Each font table consists of one or more font characteristics, such as the font-weight and font-style.
The geometric font characteristics are expressed in a
coordinate system based on the EM box. (The EM is a relative measure of the
height of the glyphs in the font) The box 1 EM high and 1 EM wide is called the design
space. This space is given a geometric coordinates by sub-dividing the EM
into a number of units-per-em.
Note: Units-per-em is a font characteristic. A typical value for
units-per-EM is 1000 or 2048.
The coordinate space of the EM box is called the design
space coordinate system. For scalable fonts, the curves and lines that are
used to draw a glyph are represented using this coordinate system.
Note: Most often, the (0,0) point in this coordinate system is
positioned on the left edge of the EM box, but not at the bottom left corner.
The Y coordinate of the bottom of a roman capital letter is usually zero. And
the descenders on lower case roman letters have negative coordinate values.
Note: CSS also uses the 'em' length unit to represent
the computed value of the 'font-size' property.
CSS assumes that the font tables will provide at least
three font characteristics: an ascent, a descent and a set of baseline-tables. The ascent is the distance
to the top of the EM box from the (0,0) point of the font; the descent is the distance to the bottom of the EM box from the
(0.0) point of the font. The baseline-table is described in the CSS3 Text
module.
In addition to the font characteristics required above,
a font may also supply substitution and positioning tables that can be used by a
formatter to re-order, combine and position a sequence of glyphs to make one or
more composite glyphs. The combination may be as simple as a ligature, or as
complex as an indic syllable which combines, usually with some re-ordering,
multiple consonants and vowel glyphs.
A visual user agent must address the following issues before actually
rendering a character:
- Is there, directly or by inheritance, a font specified for this character?
- Does the user agent have this font available?
- If so, what glyph(s) does this character or sequence of
characters map to?
- If not, what should be done? Should a different font be substituted?
Can the font be synthesized? Can it be retrieved from the Web?
This module only addresses the font specification part. All other
considerations are covered by the Web Font module which addresses: font
selection, font characteristics and font matching algorithm.
In addition, this modules specifies various font decoration effects that are glyph
related like 3D effect, outline, smoothing and emphasis. These decoration
effects are differentiated from the text-decoration through their closer
relationship with fonts and their glyphs.
The first phase of the CSS font mechanism concerns how style sheet
authors specify which fonts should be used by a user
agent. At first, it seem that the obvious way to specify a font is by it's name, a single string - which appears to be separated into distinct parts; for example "BT Swiss 721 Heavy Italic".
Unfortunately, there exists no well-defined and universally
accepted taxonomy for classifying fonts based on their names, and terms that apply to one font family name may not be appropriate for others. For example, the term 'italic' is commonly used to label slanted text, but slanted text may also be labeled Oblique, Slanted, Incline, Cursive, or
Kursiv. Similarly, font names typically contain terms that
describe the "weight" of a font. The primary role of these names is to distinguish
faces of differing darkness within a single font family. There is no
accepted, universal meaning to these weight names and usage varies
widely. For example a font that you might think of as being bold
might be described as being Regular, Roman, Book, Medium,
Semi- or Demi-Bold, Bold, or Black, depending on
how black the "normal" face of the font is within the design.
This lack of systematic naming makes it impossible, in the general case, to generate a modified font face name that differs in a particular way, such as being bolder.
Because of this, CSS uses a different model. Fonts are requested not through a single font name but through setting a series of font properties. These property values form the
basis of the user agent's font
selection mechanism [link?]. The font properties can be individually modified, for example to increase the boldness, and the new set of font property values will then be used to select from the font database again. The result is an increase in regularity for style sheet authors and
implementers, and an increase in robustness.
CSS specifies fonts according to these characteristics:
- Font family
- The font
family specifies which font family is to be used to render the text. A font family is a group of
fonts, designed to be used in combination and exhibiting similarities in design. One member of the
family may be italic, another bold, another condensed or using small caps. Font family names include "Helvetica", "New
Century Schoolbook", etc... Font family names are
not restricted to Latin characters. Font families may be
grouped into different categories: those with or without serifs,
those whose characters are or are not proportionally spaced,
those that resemble handwriting, those that are fantasy fonts,
etc.
- Font style
- The font style specifies whether the text is to be rendered
using a normal, italic, or oblique face. Italic is a more
cursive companion face to the normal face, but not so cursive as
to make it a script face. Oblique is a slanted form of the
normal face, and is more commonly used as a companion face to
sans-serif. This definition avoids having to label slightly slanted
normal faces as oblique, or normal Greek faces as italic.
- Font variant
- The font variant indicates whether the text is to be
rendered using the normal glyphs for lowercase characters or
using small-caps glyphs for lowercase characters. A particular
font may contain only normal, only small-caps, or both types of
glyph; this property is used to request an appropriate font and,
if the font contains both variants, the appropriate glyphs.
- Font weight
- The font weight refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.
- Font stretch
- The font stretch indicates the desired amount of condensing or expansion in the glyphs used to render the text, relative to other fonts in the same font family.
- Font size
- The font size refers to the size of the font from baseline
to baseline, when set solid (in CSS terms, this is when the
'font-size' and 'line-height' properties
have the same value).
On all properties except 'font-size', 'em' and 'ex' length
values refer to the font size of the current element. For 'font-size', these length units
refer to the font size of the parent element. Please consult the
section on length units [link to "values and units" module] for
more information.
Each user agent constructs a font database from the fonts at its disposition. How the user agent
constructs the font database lies outside the scope of this specification since
the implementation of the database depends on such factors as the operating
system, the windowing system, and the client. At a minimum, the database must
contain an entry for each available font-face and columns for each of the font
characteristics used in font selection. It must also contain a column for the 'unicode-range'
characteristic, the range of Unicode code values for which the font-face has
glyphs. If there are two or more font
faces that have the same values for all of these characteristics, then all but
one of these entries is eliminated from the data base.
In addition, font descriptors are used to describe the characteristics of fonts, so that a suitable
font can be chosen to create the desired appearance. These font descriptors are
used new font information to the font database which is built on locally
available resources. For information
about the font descriptors and classification of fonts, please consult
the section on font descriptors [link] in the CSS Web Fonts module.
Matching of font properties to the database entries for the
font faces must be done carefully. The font properties are matched in a
well-defined order to insure that the results of this matching process are as
consistent as possible across User Agents (assuming that the same library of
font faces and the same set of values of the font properties is presented to
each of them). This algorithm may be optimized, provided that an implementation
behaves as if the algorithm had been followed exactly.
-
At each element, the UA assembles the font
properties applicable to that element. Using the complete set of properties,
the UA uses the computed value of the 'font-family' property, which is a
font set, to choose a tentative font family. Thus, matching on a family name will succeed before matching on some
other characteristic. The remaining properties are tested against the
entries in the font database that have that font family name according to
the matching criteria used for each characteristic. If there are matches for
all the remaining properties, then that is the matching font face for the
given element. The matching criteria used for each characteristic are as follows:
-
'font-style' is tried first. For example, 'italic' will be satisfied if there is either
a face in the UA's font database labeled with the CSS keyword 'italic' (preferred)
or 'oblique'. Otherwise the values must be matched exactly or font-style will fail.
-
'font-variant' is tried next. 'normal' matches a font not labeled as 'small-caps';
'small-caps' matches (1) a font labeled as 'small-caps', (2) a font in which the small
caps are synthesized, or (3) a font where all lowercase letters are replaced by uppercase
letters. A small-caps font may be synthesized by electronically scaling uppercase letters
from a normal font.
-
'font-weight' is matched next, it will never fail. (See 'font-weight' below.)
-
'font-size' must be matched within a UA-dependent margin of tolerance.
(Typically, sizes for scalable fonts are rounded the nearest whole pixel, while the
tolerance for bitmapped fonts could be as large as 20%.) Further computations, e.g.,
by 'em' values in other properties, are based on the computed 'font-size' value.
-
If step 1 fails, and if there is a next alternative in
the font set that is the value of the 'font-family' property, then repeat step 1 with
that next alternative as the tentative font family.
-
If there is a matching font face, then:
either it is a textual element, in
which case it is necessary to determine if the matching font-face has glyphs
corresponding to the textual content. If not, and
there is a next alternative font-family in the font set, then repeat from step 2
with the next alternative as the tentative font-family. The 'unicode-range'
characteristic may be used to rapidly eliminate from
consideration those font faces that do not have the needed glyph. If the
'unicode-range' characteristic indicates that a font contains a glyph in
the correct range, that font must be used. If there is a corresponding glyph,
then the matching font-face is the nominal font for the textual
element.
or, it is not a textual element, in this case, the matching font becomes the nominal font for the formatting object.
In either case, the font data of
the nominal font is expressed in terms of the EM box and the design coordinate
system. This is natural for scalable fonts and for bit mapped fonts, equivalent
design space coordinates can be computed from the font data and the computed
font-size. (Using the computed font-size means that some of the font
characteristics coordinate values may lie outside the EM box.)
Since the font-size is used in the selection, the font-face and its font
characteristics are scaled to the requested font-size. (For scalable fonts, the
design space coordinates are multiplied by the computed font-size; for binary
fonts, the values of the characteristics stored with the font are used.)
-
If steps 1-3 above do not produce a matching font face,
then use the UA-dependent default 'font-family' value and repeat from step 1,
using the best match that can be obtained within this font. If a particular
character cannot be displayed using this font, the UA should indicate that a
character is not being displayed (for example, using the 'missing character'
glyph).
This property specifies a prioritized list of font family names
and/or generic family names. To deal with the problem that a single
font may not contain glyphs to display all the characters in a
document, or that not all fonts are available on all systems, this
property allows authors to specify a list of fonts, all of the same
style and size, that are tried in sequence to see if they contain a
glyph for a certain character. This list is called a font set.
Example(s):
For example, text that contains English words mixed with
mathematical symbols may need a font set of two fonts, one containing
Latin letters and digits, the other containing mathematical symbols. Here
is an example of a font set suitable for a text that is expected to
contain text with Latin characters, Japanese characters, and
mathematical symbols:
BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
The glyphs available in the "Baskerville" font (a font that covers only
Latin characters) will be taken from that font, Japanese glyphs will be taken
from "Heisi Mincho W3", and the mathematical symbol glyphs will come from
"Symbol". Any others will come from the generic
font family 'serif'.
The generic font family will be used if one
or more of the other fonts in a font set is unavailable. Although many fonts provide the "missing character" glyph, typically an open box, as its name implies this should not be considered a match except for the last font in a font set.
There are two types of font family names:
- <family-name>
-
The name of a font family of choice. In the previous example, "Baskerville",
"Heisi Mincho W3", and "Symbol" are font families. Font
family names containing
whitespace [link to syntax module] should be
quoted. If quoting is omitted, any whitespace characters before and
after the font name are ignored and any sequence of
whitespace characters inside the font name is converted to a single
space.
- <generic-family>
-
The following
generic families are defined: 'serif', 'sans-serif', 'cursive',
'fantasy', and 'monospace'. Please see the section on
generic font families for
descriptions of these families. Generic font family names
are keywords, and therefore must not be quoted.
Authors are encouraged to offer a generic font family as a
last alternative, for improved robustness.
For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Font test</TITLE>
<STYLE type="text/css">
BODY { font-family: "new century schoolbook", serif }
</STYLE>
</HEAD>
<BODY>
<H1 style="font-family: 'My own font', fantasy">Test</H1>
<P>What's up, Doc?
</BODY>
</HTML>
Example(s):
The richer selector syntax of CSS2 may be used to create language-sensitive typography. For example, some Chinese and Japanese characters are unified to have the same Unicode codepoint, although the abstract glyphs are not the same in the two languages.
*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif }
*:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif }
This selects any element that has the given language - Japanese or Traditional Chinese - and requests the appropriate font.
-
'font-style'
-
| Value: | normal | italic | oblique | inherit
|
| Initial: | normal
|
| Applies to: | all elements
|
| Inherited: | yes
|
| Percentages: | N/A
|
| Media: | visual
|
The 'font-style' property requests normal (sometimes referred to as "roman" or "upright"), italic,
and oblique faces within a font family. Values have the following
meanings:
- normal
- Specifies a font that is classified as 'normal'
in the UA's font database.
- oblique
- Specifies a font that is classified as 'oblique' in the UA's font
database. Fonts with Oblique, Slanted, or Incline in their names will
typically be labeled 'oblique' in the font database.
A font that is labeled 'oblique' in the UA's font database
may actually have been generated by electronically slanting a normal
font.
- italic
- Specifies a font that is classified
as 'italic' in the UA's font database, or, if that is not available,
one labeled 'oblique'. Fonts with
Italic, Cursive, or Kursiv in their names will
typically be labeled 'italic'.
Example(s):
In this example, normal text in an H1, H2, or H3 element will
be displayed with an italic font.
However, emphasized text (EM) within an H1 will appear in a normal face.
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
-
'font-variant'
-
| Value: | normal | small-caps | inherit
|
| Initial: | normal
|
| Applies to: | all elements
|
| Inherited: | yes
|
| Percentages: | N/A
|
| Media: | visual
|
In a small-caps font, the glyphs for lowercase letters look similar
to the uppercase ones, but in a smaller size and with slightly
different proportions. The 'font-variant' property requests such a font for bicameral (having two cases, as with Latin script). This property has no visible effect for scripts that are
unicameral (having only one case, as with most of the world's writing systems). Values have the following
meanings:
- normal
- Specifies a font that is not labeled as a
small-caps font.
- small-caps
- Specifies a font that is labeled as a
small-caps font. If a genuine
small-caps font is not available, user agents should
simulate a small-caps font, for example by taking a normal font
and replacing the lowercase letters by scaled uppercase
characters. As a last resort, unscaled uppercase letter glyphs in
a normal font may replace glyphs in a small-caps font
so that the text appears in all uppercase letters.
Example(s):
The following example results in an H3 element in small-caps,
with emphasized words (EM) in oblique small-caps:
H3 { font-variant: small-caps }
EM { font-style: oblique }
Insofar as this property causes text to be transformed to
uppercase, the same considerations as for 'text-transform' apply.
-
'font-weight'
-
| Value: | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 |
600 | 700 | 800 | 900 | inherit
|
| Initial: | normal
|
| Applies to: | all elements
|
| Inherited: | yes
|
| Percentages: | N/A
|
| Media: | visual
|
The 'font-weight'
property specifies the weight of the font. Values have the following
meanings:
- 100 to 900
- These values
form an ordered sequence, where each number indicates a weight that is
at least as dark as its predecessor.
- normal
- Same as '400'.
- bold
- Same as '700'.
- bolder
- Specifies the next weight that is assigned to a font that is darker
than the inherited one. If there is no such weight, it simply results
in the next darker numerical value (and the font remains unchanged),
unless the inherited value was '900', in which case the resulting
weight is also '900'.
- lighter
- Specifies the next weight that is assigned to a font that is lighter
than the inherited one. If there is no such weight, it simply results
in the next lighter numerical value (and the font remains unchanged),
unless the inherited value was '100', in which case the resulting
weight is also '100'.
Example(s):
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
BODY { font-weight: 400 }
STRONG { font-weight: bolder } /* 500 if available */
Child elements inherit the
computed value [link to Cascading module] of the weight.
The 'font-weight' property values are given on a numerical
scale in which the value '400' (or 'normal') corresponds to the
"normal" text face for that family. The weight name associated with
that face will typically be Book, Regular, Roman, Normal or sometimes Medium.
The association of other weights within a family to the
numerical weight values is intended only to preserve the ordering of weights
within that family. User agents must map names to values in a way that preserves
visual order; a face mapped to a value must not be lighter than faces mapped to
lower values. There is no guarantee on how a user agent will map font faces
within a family to weight values. However, the following heuristics tell how the
assignment is done in typical cases: If the font family already uses a numerical
scale with nine values (as e.g., OpenType does), the font weights should be
mapped directly.
If there is both a face labeled Medium and one labeled
Book, Regular, Roman or Normal, then the Medium is normally assigned to the
'500'.
The font labeled "Bold" will often correspond to
the weight value '700'.
If there are fewer then 9 weights in the family, the
default algorithm for filling the "holes" is as follows. If '500' is
unassigned, it will be assigned the same font as '400'. If any of the values
'600', '700', '800', or '900' remains unassigned, they are assigned to the same
face as the next darker assigned keyword, if any, or the next lighter one
otherwise. If any of '300', '200', or '100' remains unassigned, it is assigned
to the next lighter assigned keyword, if any, or the next darker otherwise.
There is no guarantee that there will be a darker face for
each of the 'font-weight' values; for example, some fonts may have only a normal
and a bold face, others may have eight different face weights.
-
'font-stretch'
-
| Value: | normal | wider | narrower | ultra-condensed | extra-condensed |
condensed | semi-condensed | semi-expanded | expanded | extra-expanded |
ultra-expanded | inherit
|
| Initial: | normal
|
| Applies to: | all elements
|
| Inherited: | yes
|
| Percentages: | N/A
|
| Media: | visual
|
The 'font-stretch'
property selects a normal, condensed, or extended face from a font
family. Absolute keyword values have the following ordering, from
narrowest to widest :
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- normal
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
The relative keyword 'wider' sets the value to the next expanded
value above the inherited value (while not increasing it above
'ultra-expanded'); the relative keyword 'narrower' sets the value to
the next condensed value below the inherited value (while not
decreasing it below 'ultra-condensed').
-
'font-size'
-
| Value: | <absolute-size> | <relative-size> | <length> | <percentage> | inherit
|
| Initial: | medium
|
| Applies to: | all elements
|
| Inherited: | yes, the computed value is inherited
|
| Percentages: | refer to parent element's font size
|
| Media: | visual
|
This property describes the size of the font when set solid.
Values have the following meanings:
-
<absolute-size>
- An <absolute-size> keyword refers to an entry
in a table of font sizes computed and kept by the user agent. Possible values
are:
[ xx-small | x-small | small | medium | large | x-large | xx-large ]
On a computer screen a scaling factor of 1.2 is
suggested between adjacent indexes; if the 'medium' font is 12pt,
the 'large' font could be 14.4pt. Different media may need different
scaling factors. Also, the user agent should take the quality and
availability of fonts into account when computing the table. The
table may be different from one font family to another.
Note. In CSS1, the suggested
scaling factor between adjacent indexes was 1.5 which user experience
proved to be too large.
- <relative-size>
- A <relative-size> keyword is interpreted
relative to the table of font sizes and the font size of the
parent element. Possible values are:
[ larger | smaller ]
For example, if the parent element has a font size of
'medium', a value of 'larger' will make the font size of the
current element be 'large'. If the parent element's size is not
close to a table entry, the user agent is free to interpolate
between table entries or round off to the closest one. The user
agent may have to extrapolate table values if the numerical value
goes beyond the keywords.
- <length>
- A length value specifies an absolute font size
(that is independent of the user agent's font table).
Negative lengths are illegal.
- <percentage>
- A percentage value specifies an absolute font size relative
to the parent element's font size. Use of percentage values, or
values in 'em's, leads to more robust and cascadable style sheets.
The actual value [link to Cascading module] of
this property may differ from the computed value
due a numerical value on 'font-size-adjust' and the unavailability
of certain font sizes.
Child elements inherit the computed 'font-size' value (otherwise, the
effect of 'font-size-adjust' would
compound).
Example(s):
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
-
'font-size-adjust'
-
| Value: | <number> | none | inherit
|
| Initial: | none
|
| Applies to: | all elements
|
| Inherited: | yes
|
| Percentages: | N/A
|
| Media: | visual
|
In bicameral
scripts, the subjective apparent size and legibility of a font are
less dependent on their 'font-size' value than on the value
of their 'x-height', or, more
usefully, on the ratio of these two values, called the aspect value
(font size divided by x-height). The higher the aspect value, the more
likely it is that a font at smaller sizes will be legible. Inversely,
faces with a lower aspect value will become illegible more rapidly
below a given threshold size than faces with a higher aspect
value. Straightforward font substitution that relies on font size
alone may lead to illegible characters.
For example, the popular font Verdana has an aspect value of 0.58;
when Verdana's font size 100 units, its x-height is 58 units. For
comparison, Times New Roman has an aspect value of 0.46. Verdana will
therefore tend to remain legible at smaller sizes than Times New
Roman. Conversely, Verdana will often look 'too big' if substituted
for Times New Roman at a chosen size.
This property allows authors to specify an aspect value for an element that
will preserve the x-height of the first choice font, whether it is substituted
or not. Values have the following meanings:
- none
- Do not preserve the font's x-height.
- <number>
- Specifies the aspect value. The number typically refers to the aspect value
of the first choice font. The scaling factor for all fonts is
computed according to the following formula:
y(a/a') = c
where:
y = 'font-size' actual value
a = font-size-adjust property value
a' = aspect value of font
c = 'font-size' to apply to font
Example(s):
For example, if 14px Verdana (with an aspect value of 0.58) was
unavailable and an available font had an aspect value of 0.46, the
font-size of the substitute would be 14 * (0.58/0.46) = 17.65px. If Verdana is
available, no adjustment occurs, as long as its actual aspect value is the same
as the hypothetical aspect value provided by the font-size-adjust property.
Font size adjustments take place when computing the actual value of 'font-size'. Since inheritance is
based on the computed value,
child elements will inherit unadjusted values. Font size adjustments are applied
to all fonts used by child elements, substituted or not.
The first image below shows several typefaces rasterized at a
common font size (11pt. at 72 ppi), together with their aspect
values. Note that faces with higher aspect values appear larger than
those with lower. Faces with very low aspect values are illegible at
the size shown.
The next image shows the results of 'font-size-adjust' where Verdana has
been taken as the"first choice", together with the scaling factor applied.
As adjusted, the apparent sizes are nearly linear across faces, though the
actual (em) sizes vary by more than 100%. Note that 'font-size-adjust'
tends to stabilize the horizontal metrics of lines, as well.
-
'font'
-
| Value: | [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]?
<'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
|
| Initial: | see individual properties
|
| Applies to: | all elements
|
| Inherited: | yes
|
| Percentages: | allowed on 'font-size' and 'line-height'
|
| Media: | visual
|
The 'font' property is,
except as described below, a shorthand property for
setting 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height', and 'font-family', at the same place
in the style sheet. The syntax of
this property is based on a traditional typographical shorthand
notation to set multiple properties related to fonts.
All font-related properties are first reset to their initial values, including those listed in the preceding paragraph plus 'font-stretch' and 'font-size-adjust'. Then, those properties that are given explicit values in the 'font' shorthand are set to those values. For a definition of allowed and initial values, see the previously defined properties. For reasons of backwards compatibility, it is not possible to set 'font-stretch' and 'font-size-adjust' to other than their initial values using the 'font' shorthand property; instead, set the individual properties.
Example(s):
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
P { font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }
In the second rule, the font size percentage value ('80%') refers
to the font size of the parent element. In the third rule, the line
height percentage ('110%') refers to the font size of the element
itself.
The first three rules do not specify the 'font-variant' and 'font-weight' explicitly, so these
properties receive their initial values ('normal'). Notice that the font family name "new century schoolbook", which contains spaces, is enclosed in quotes. The fourth rule
sets the 'font-weight' to
'bold', the 'font-style' to
'italic', and implicitly sets 'font-variant' to 'normal'.
The fifth rule sets the 'font-variant' ('small-caps'),
the 'font-size' (120% of the
parent's font size), the 'line-height' (120% of the font
size) and the 'font-family'
('fantasy'). It follows that the keyword 'normal' applies to the two
remaining properties: 'font-style' and 'font-weight'.
The sixth rule sets the 'font-style', 'font-size', and 'font-family', the other font
properties being set to their initial values. It then sets 'font-stretch' to 'condensed'
since that property cannot be set to that value using the 'font' shorthand property.
The following values refer to system fonts:
- caption
- The font used for captioned controls (e.g., buttons, drop-downs, etc.).
- icon
- The font used to label icons.
- menu
- The font used in menus (e.g., dropdown menus and menu lists).
- message-box
- The font used in dialog boxes.
- small-caption
- The font used for labeling small controls.
- status-bar
- The font used in window status bars.
System fonts may only be set as a whole; that is, the font
family, size, weight, style, etc. are all set at the same time.These values may then be altered individually if desired. If no
font with the indicated characteristics exists on a given platform,
the user agent should either intelligently substitute (e.g., a smaller
version of the 'caption' font might be used for the 'smallcaption'
font), or substitute a user agent default font. As for regular fonts,
if, for a system font, any of the individual properties are not part
of the operating system's available user preferences, those properties
should be set to their initial values.
That is why this property is "almost" a shorthand property: system
fonts can only be specified with this property, not with 'font-family' itself, so 'font' allows authors to do more than the
sum of its subproperties. However, the individual properties such as 'font-weight' are still given values taken from the system font, which can be independently varied.
Example(s):
BUTTON { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
BUTTON P { font: menu }
BUTTON P EM { font-weight: bolder }
If the font used for dropdown menus on a particular system
happened to be, for example, 9-point Charcoal, with a weight of 600, then P
elements that were descendants of BUTTON would be displayed as if
this rule were in effect:
BUTTON P { font: 600 9pt Charcoal }
Because the 'font' shorthand resets to its initial value any property not explicitly given a value, this has the same effect as this declaration:
BUTTON P {
font-style: normal;
font-variant: normal;
font-weight: 600;
font-size: 9pt;
line-height: normal;
font-family: Charcoal
}
Generic font families are a fallback mechanism, a means of
preserving some of the style sheet author's intent in the worst case
when none of the specified fonts can be selected. For optimum
typographic control, particular named fonts should be used in
style sheets.
All five generic font families are defined to exist in all
CSS implementations (they need not necessarily map to five distinct
actual fonts). User agents should provide reasonable
default choices for the generic font families, which express the
characteristics of each family as well as possible within the limits
allowed by the underlying technology.
User agents are encouraged to allow users to select alternative
choices for the generic fonts.
Glyphs of serif fonts, as the term is used in CSS, have finishing
strokes, flared or tapering ends, or have actual serifed endings
(including slab serifs). Serif fonts are typically
proportionately-spaced. They often display a greater variation between
thick and thin strokes than fonts from the 'sans-serif' generic font
family. CSS uses the term 'serif' to apply to a font for any script,
although other names may be more familiar for particular scripts, such
as Mincho (Japanese), Sung or Song (Chinese), Totum or Kodig (Korean).
Any font that is so described may be used to represent the
generic 'serif' family.
Examples of fonts that fit this description include:
| Latin fonts
| Times New Roman, Bodoni,
Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
|
| Greek fonts
| Bitstream Cyberbit
|
| Cyrillic fonts
| Adobe Minion Cyrillic, Excelcior Cyrillic Upright,
Monotype Albion 70, Bitstream Cyberbit, ER Bukinst
|
| Hebrew fonts
| New Peninim, Raanana, Bitstream Cyberbit
|
| Japanese fonts
| Ryumin Light-KL, Futo Min A101
|
| Arabic fonts
| Bitstream Cyberbit
|
| Cherokee fonts
| Lo Cicero Cherokee
|
Glyphs in sans-serif fonts, as the term is used in CSS, have stroke
endings that are plain -- without any flaring, cross stroke, or other
ornamentation. Sans-serif fonts are typically
proportionately-spaced. They often have little variation between thick
and thin strokes, compared to fonts from the 'serif' family. CSS uses
the term 'sans-serif' to apply to a font for any script, although
other names may be more familiar for particular scripts, such as
Gothic (Japanese), Kai (Chinese), or Pathang (Korean). Any font that
is so described may be used to represent the generic 'sans-serif'
family.
Examples of fonts that fit this description include:
| Latin fonts
| MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers,
Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
|
| Greek fonts
| Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
|
| Cyrillic fonts
| Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
|
| Hebrew fonts
| Arial Hebrew, MS Tahoma
|
| Japanese fonts
| Shin Go, Heisei Kaku Gothic W5
|
| Arabic fonts
| MS Tahoma
|
Glyphs in cursive fonts, as the term is used in CSS, generally have
either joining strokes or other cursive characteristics beyond those
of italic typefaces. The glyphs are partially or completely
connected, and the result looks more like handwritten pen or brush
writing than printed letterwork. Fonts for some scripts, such as
Arabic, are almost always cursive. CSS uses the term 'cursive' to
apply to a font for any script, although other names such as Chancery,
Brush, Swing and Script are also used in font names.
Examples of fonts that fit this description include:
| Latin fonts
| Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand,
Zapf-Chancery
|
| Cyrillic fonts
| ER Architekt
|
| Hebrew fonts
| Corsiva
|
| Arabic fonts
| DecoType Naskh, Monotype Urdu 507
|
Fantasy fonts, as used in CSS, are primarily decorative while
still containing representations of characters (as opposed to Pi or
Picture fonts, which do not represent characters). Examples include:
| Latin fonts
| Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz
|
The sole criterion of a monospace font is that all glyphs have the same fixed width. (This can make some scripts,
such as Arabic, look most peculiar.) The effect is similar to a manual
typewriter, and is often used to set samples of computer code.
Examples of fonts which fit this description include:
| Latin fonts
| Courier, MS Courier New, Prestige, Everson Mono
|
| Greek Fonts
| MS Courier New, Everson Mono
|
| Cyrillic fonts
| ER Kurier, Everson Mono
|
| Japanese fonts
| Osaka Monospaced
|
| Cherokee fonts
| Everson Mono
|
Font decoration properties describes decoration that affect the rendering of
fonts. Although similar in principle to the text-decoration properties, they
differ by being close related to the font and glyphs they influence. For
example, the shape of the font emphasis which is a decoration widely used in
East Asian typography will vary upon the font on which it is applied.
-
'font-effect'
-
| Value: | none | emboss | engrave |
outline | inherit
|
| Initial: | none
|
| Applies to: | all elements
|
| Inherited: | yes
|
| Percentages: | N/A
|
| Media: | visual
|
This property controls the special effect applied to glyphs. Possible values:
- none
- no font effect is applied
- engrave
- the glyphs appear as if they were engraved into the page. (This effect is also sometimes referred to as "sunken text")
- emboss
- the glyphs appear "embossed", or "raised" above the page surface.
- outline
- only the outlines of the glyphs are drawn.
-
'font-smooth'
-
| Value: | auto | never | always |
<absolute-size> | length | inherit
|
| Initial: | auto
|
| Applies to: | all elements
|
| Inherited: | yes
|
| Percentages: | N/A
|
| Media: | visual
|
This property allows author control over applying anti-aliasing fonts when rendered.
- auto
- smooth text according to system defaults.
- never
- don't smooth text.
- always
- always smooth text at any size.
- <absolute-size> <length>
- If the actual value of the font-size property for the element is greater
than or equal to the value specified, then apply font smoothing when
rendering the text.
-
'font-emphasize-style'
-
| Value: | none | accent | dot |
circle | disc | inherit
|
| Initial: | none
|
| Applies to: | all elements
|
| Inherited: | yes
|
| Percentages: | N/A
|
| Media: | visual
|
This property sets the style for the emphasis formatting applied to text.
East Asian documents use the following symbols on top of each glyph to emphasize
a run of text: an 'accent' symbol, a 'dot', a hollow 'circle', or a solid
'disc'.
For example:
Note, that unlike
'text-decoration',
this property can affect the line height. Furthermore the emphasis style
should be distinguished from the text-decoration which is another method
to 'emphasize' text content.
-
'font-emphasize-position'
-
| Value: | before | after | inherit
|
| Initial: | before
|
| Applies to: | all elements
|
| Inherited: | yes
|
| Percentages: | N/A
|
| Media: | visual
|
This property sets the position of the emphasis symbols. They can appear
either 'before' or 'after' the emphasized run of horizontal text. The values
'before'
and 'after' should be understood as relative to the line baseline. In an
horizontal layout flow, 'before' means above the text. In a vertical layout flow, if the position is set to
'before' then the emphasis
marks should appear on the right side of the vertical text column. If the
position is set to 'after', then the emphasis should appear the the left
side of the column.
In Japanese for example, the preferred position is 'before':
In Chinese used in the PRC, on the other hand, the preferred position is
'after':
The table below summarizes the preferred emphasis mark position depending on the language:
This is a shorthand property for setting the style and position of the font
emphasis decoration.
This specification would not have been possible without the help from the
original contributors to CSS 2
[CSS2] who wrote most of the text of this module.
-
[CSS2]
-
Cascading Stylesheets, level 2 (CSS2) Specification, W3C
Recommendation
-
Bert Bos, Håkon Wium Lie, Chris Lilley and Ian Jacobs, 12 May 1998
Available at:
http://www.w3.org/TR/REC-CSS2
-
[HTML4]
-
HTML 4.0 Specification, W3C Recommendation
-
Dave Raggett, Arnaud Le Hors and Ian Jacobs, 18 December 1997, revised 24
April 1998
Available at:
http://www.w3.org/TR/REC-html40
