FFFF csswg-drafts/css2/fonts.src at 739a6b05421e6a30085c6694b71c4e372ae9592d · w3c/csswg-drafts · GitHub
Skip to content

fonts.src

Latest commit

 

History

History
2437 lines (1966 loc) · 102 KB

fonts.src

File metadata and controls

2437 lines (1966 loc) · 102 KB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<!-- $Id: fonts.src,v 2.29 1998-03-21 21:22:14 ijacobs Exp $ -->
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>Fonts</TITLE>
</HEAD>
<BODY>
<H1 align="center">Fonts</H1>
<!-- Make sure 10-point is used where appropriate -IJ -->
<h2>Introduction</h2>
<P>When a document's text is to be displayed visually, <span
class="index-inst" title="character">characters</span> (abstract
information elements) must be mapped to <span class="index-def"
title="glyph"><dfn>glyphs</dfn></span> (concrete representations that
may be drawn on the screen, paper, etc). One or more characters may be
depicted by one or more glyphs, in a possibly context-dependent
fashion. A <span class="index-def" title="glyph
representation"><dfn>glyph representation</dfn></span> is the actual
artistic representation of an abstract glyph, in some typographic
style, in the form of outlines or bitmaps. A <span class="index-def"
title="font"><dfn>font</dfn></span> is a set of glyph representations,
all observing the same basic motif according to design, size,
appearance, and other attributes associated with the entire set and a
mapping from characters to glyphs.
<P>A visual user agent must address the following issues before actually
rendering a character:</p>
<ul>
<li>Is there, directly or by inheritance, a font specified for this character?
<li>Does the user agent have this font available?
<li>If so, what glyph representation(s) does this character or sequence of
characters map to?
<li>If not, what should be done? Should a different font be substituted?
Can the font be synthesized? Can it be retrieved from the Web?
</ul>
<P>In both CSS1 and CSS2, authors specify font characteristics
via a series of font properties.
<P>How the user agent handles with properties, when there is no matching font on the client, has expanded
between CSS1 and CSS2. In CSS1, all fonts were assumed to be present
on the client system and were identified solely by name. Alternate
fonts could be specified through the properties, but beyond that, user
agents had no way to propose other fonts to the user (even
stylistically similar fonts that the user agent had available) other
than generic default fonts.
<P>CSS2 changes all that, and allows much greater liberty for:</p>
<ul>
<li>style sheet authors, to describe the fonts they want to be used
<li>user agents, in selecting a font when an author's requested font
is not immediately available.
</ul>
<p>CSS2 improves client-side font matching, enables font
synthesis and progressive rendering, and enables fonts to be
downloaded over the Web.
<P>In the CSS2 font model, as in CSS1, each user agent has a "font
database" at its disposition. CSS2 defined the information in that database and allows style sheet authors to contribute to that
database. When asked to display a character with a particular font,
the user agent first identifies the font in the database that "best
fits" the specified font (according to the <a href="#algorithm">font
matching algorithm)</a> Once it has identified a font, it retrieves
the font data locally or from the Web, and may display the character
using those glyph representations.
<P>In light of this simple model, we have organized the specification
into two sections. The first concerns the <a
href="#font-specification">font specification mechanism</a>, whereby
authors specify which fonts they would like to have used. The
second concerns the <a href="#font-selection">font selection
mechanism</a>, whereby the client's user agent identifies and loads a
font that best fits the author's specification.
<P>How the user agent constructs the font database lies
outside the scope of this specification since the database's
implementation depends on such factors as the operating system, the windowing system, and the client.
<H2><a name="font-specification">Font specification</a></h2>
<P> The first phase of the CSS font mechanism concerns how authors
specify which fonts should be used by a user
agent. The obvious way to specify a font is by it's name, a single string which at first appears to be separated into distinct parts such as
<div class="example"><p>
"Swiss 721 Heavy Italic"
</div>
<p>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 <EM>Oblique, Slanted, Incline, Cursive</EM> or
<EM>Kursiv</EM>. 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.
<P>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 <a href="#font-selection">font
selection</a> mechanism. 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 implementors, and an increase in robustness.
<h3><a name="font-properties">Font specification properties</a></h3>
<P>CSS2 specifies fonts according to these characteristics:</p>
<dl>
<dt><strong><a name="font-family">Font family</a></strong>
<dd>The <span class="index-def" title="font family"> font
family</span> 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, and Kyokasho ICA L. 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.
<dt><strong><a name="font-style">Font style</a></strong>
<dd>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 avoids having to label slightly slanted normal
faces as oblique, or Greek faces as italic.
<dt><strong><a name="font-variant">Font variant</a></strong>
<dd>The font variant indicates wheth 8096 er 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)
<dt><strong><a name="font-weight">Font weight</a></strong>
<dd>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.
<dt><strong><a name="font-stretch">Font stretch</a></strong>
<dd>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.<-- new to CSS2, CL -->
<dt><strong><a name="font-size">Font size</a></strong>
<dd>The font size refers to the size of the font from baseline
to baseline, when set solid (in CSS terms, this is when the
<span class="propinst-font-size">'font-size'</span> and <span
class="propinst-line-height">'line-height'</span> properties
have the same value).
</dl>
<P> On all properties except <span
class="propinst-font-size">'font-size'</span>, 'em' and 'ex' length
values refer to the font size of the current element. For <span
class="propinst-font-size">'font-size'</span>, these length units
refer to the font size of the parent element. Please consult the
section on <a href="./syndata.html#length-units">length units</a> for
more information.
<p>The font properties in CSS are used to describe the desired
appearance of text in the document. The font descriptors, in contrast,
are used to describe the characteristics of fonts, so that a suitable
font can be chosen to create the desired appearance. For information
about the classification of fonts, please consult the section on <a
href="#font-descriptors">font descriptors</a>.
<H3><a name="font-family">Font family</a>: the <span
class="propinst-font-family">'font-family'</span> property</H3>
<!-- #include src=properties/font-family.srb -->
<P>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 <span
class="index-def" title="font set"><dfn>font set</dfn></span>.
<div class="example"><P>
For example, text that contains English text mixed with
mathematical symbols may need a font set of two fonts, one containing
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:
<PRE>
BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
</PRE>
<P> The characters available in the Baskerville font (a font with only
Latin characters) will be taken from that font, Japanese will be taken
from Heisi Mincho W3, and the mathematical symbols will come from
Symbol. Any other characters will (hopefully) come from the generic
font family 'serif'. The generic font family 'serif' will also be used if one
or more of the other fonts is unavailable.
</div>
<P> There are two types of font family names:</p>
<DL>
<DT><span class="index-def"
title="&lt;family-name&gt;::definition of"><a name="value-def-family-name" class="value-def"><strong>&lt;family-name&gt;</strong></a></span>
<DD>
The name of a font family of choice. In the last example, "Baskerville",
"Heisi Mincho W3", and "Symbol" are font families. Font
family names containing
<a href="syndata.html#whitespace">whitespace</a> should be
quoted. If quoting is omitted, any <a
href="syndata.html#whitespace">whitespace</a> characters before and
after the font name are <span class="index-inst" title="ignore"><a
href="syndata.html#ignore">ignored</a></span> and any sequence of
whitespace characters inside the font name is converted to a single
space.
<div class="example"><p>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 glyphs are not the same in the two languages.
<pre>
*[lang="ja-jp"] { font: 900 14pt/16pt "Heisei Mincho W9", serif }
*[lang="zh-tw"] { font: 800 14pt/16.5pt "Li Sung", serif }
</pre>
<!-- need to check tw for traditional chinese as used in taiwan -->
<p>The * selects any element and the square brackets select elements
which have the lang attribute set to Japanese or to Traditional Chinese
and selects the appropriate font
</div>
<DT><span class="index-def"
title="&lt;generic-family&gt;::definition of"><a name="value-def-generic-family" class="value-def"><strong>&lt;generic-family&gt;</strong></a></span>
<DD>
The following
generic families are defined: 'serif', 'sans-serif', 'cursive',
'fantasy' and 'monospace'. Please see the section on
<a href="#generic-font-families">generic font families</a> for
descriptions of these families. Generic font family names
are keywords and therefore must not be quoted.
<P>Authors are encouraged to offer a generic font family as a
last alternative, for improved robustness.</p>
</DL>
<P>
<div class="html-example"><P>
For example:
<PRE>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;Font test&lt;/TITLE&gt;
&lt;STYLE type="text/css"&gt;
BODY { font-family: "new century schoolbook", serif }
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY style="font-family: 'My own font', fantasy"&gt;
&lt;P&gt;What's up, Doc?
&lt;/BODY&gt;
&lt;/HTML&gt;
</PRE>
</div>
<H3><a name="font-style">Font style</a>: the
<span class="propinst-font-style">'font-style'</span>,
<span class="propinst-font-variant">'font-variant'</span>,
<span class="propinst-font-weight">'font-weight'</span> and
<span class="propinst-font-stretch">'font-stretch'</span> properties
</H3>
<!-- #include src=properties/font-style.srb -->
<P> The <span class="propinst-font-style">'font-style'</span> property selects
between normal (sometimes referred to as "roman" or "upright"), italic,
and oblique faces within a font family. Values have the following
meanings:</p>
<dl>
<dt><strong>normal</strong>
<dd>Selects a font that is classified as 'normal'
in the UA's font database.
<dt><strong>oblique</strong>
<dd>Selects 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.
<dt><strong>italic</strong>
<dd>Selects a font that is classified
as 'italic' in the UA's font database, or, if that is not available,
one labeled 'oblique'. Fonts with
<EM>Italic, Cursive</EM> or <EM>Kursiv</EM> in their names will
typically be labeled 'italic'.
</dl>
<div class="example"><P>
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.
<PRE>
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
</PRE>
</div>
<!-- #include src=properties/font-variant.srb -->
<P>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 <span
class="propinst-font-variant">'font-variant'</span> property selects
that font. This property has no visible effect for scripts which are
unicameral (having only one case). Values have the following
meanings:</p>
<dl>
<dt><strong>normal</strong>
<dd>Selects a font that is not labeled as a
small-caps font.
<dt><strong>small-caps</strong>
<dd>Selects a font that is labeled as a
small-caps font. If a genuine
small-caps font is not available, user agents may
simulate a small-caps font 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.
</dl>
<div class="example"><P>
<P> The following example results in an H3 element in small-caps,
with emphasized words (EM) in oblique small-caps:
<PRE>
H3 { font-variant: small-caps }
EM { font-style: oblique }
</PRE>
</div>
<!-- There may be other variants in the font family as well, such as
fonts with old-style numerals, small-caps numerals, etc. CSS2 does not offer 'font-variant' values that select
those variants. -->
<P>Insofar as this property causes text to be transformed to
uppercase, the same considerations as for <span
class="propinst-text-transform">'text-transform'</span> apply.
<!-- #include src=properties/font-weight.srb -->
<P> The <span class="propinst-font-weight">'font-weight'</span>
property selects the weight of the font. Values have the following
meanings:</p>
<dl>
<dt><strong>100 to 900</strong>
<dd>These values
form an ordered sequence, where each number indicates a weight that is
at least as dark as its predecessor.
<dt><strong>normal</strong>
<dd>Same as '400'.
<dt><strong>bold</strong>
<dd>Same as '700'.
<dt><strong>bolder</strong>
<dd>Selects 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'.
<dt><strong>lighter</strong>
<dd>Selects 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'.
</dl>
<div class="example"><P>
<PRE>
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
BODY { font-weight: 400 }
STRONG { font-weight: bolder } /* 500 if available */
</PRE>
</div>
<!-- I added the above example, please verify IJ
seems fine, CL -->
<P>Child elements inherit the <a href="cascade.html#computed-value">
computed value</a> of the weight.
<h4>Mapping font weight values to font names</h4>
<P>Font information typically includes names 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 <EM>Regular, Roman, Book, Medium,
Semi-</EM> or <EM>DemiBold, Bold,</EM> or <EM>Black,</EM> depending on
how black the "normal" face of the font is within the design. Because
there is no standard for these names, the <span
class="propinst-font-weight">'font-weight'</span> 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 <EM>Book, Regular, Roman,
Normal</EM> or sometimes <EM>Medium</EM>.
<P> 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:</p>
<UL>
<LI>
If the font family already uses a numerical scale with nine
values (as e.g. <EM>OpenType</EM> does), the font weights
should be mapped directly.
<LI>
If there is both a face labeled <EM>Medium</EM> and one labeled
<EM>Book, Regular, Roman</EM> or <EM>Normal,</EM> then the
<EM>Medium</EM> is normally assigned to the '500'.
<LI>
The font labeled "Bold" will often correspond to the weight value '700'.
<LI>
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.
</UL>
<P> There is no guarantee that there will be a darker face for each of
the <span class="propinst-font-weight">'font-weight'</span> values;
for example, some fonts may have only a normal and a bold face, others
may have eight different face weights.
<P>The following two examples show typical mappings.</P>
<div class="html-example">
<P>Assume four weights in the "Rattlesnake" family, from lightest to
darkest: <EM>Regular, Medium, Bold, Heavy.</EM></p>
<TABLE border summary="Example of font-weight mapping">
<CAPTION>First example of font-weight mapping</CAPTION>
<!-- rattlesnake, ostrich and more at the Austin meeting -->
<THEAD>
<TR><TH>Available faces <TH>Assignments <TH>Filling the holes
</THEAD>
<TR><TD>"Rattlesnake Regular" <TD> 400 <TD> 100, 200, 300
<TR><TD>"Rattlesnake Medium" <TD> 500 <TD>&nbsp;
<TR><TD>"Rattlesnake Bold" <TD> 700 <TD> 600
<TR><TD>"Rattlesnake Heavy" <TD> 800 <TD> 900
</TABLE>
</div>
<div class="html-example">
<P>Assume six weights in the
"Ice Prawn" family: <EM>Book, Medium, Bold, Heavy, Black,
ExtraBlack.</EM> Note that in this instance the user agent
has decided <EM>not</EM> to assign a numeric
value to "Example2 ExtraBlack".</p>
<TABLE border summary="Example of font-weight mapping. Note
that ExtraBlack is not mapped to a value.">
<CAPTION>Second example of font-weight mapping</CAPTION>
<THEAD>
<TR><TH>Available faces <TH>Assignments <TH>Filling the holes
</THEAD>
<TR><TD>"Ice Prawn Book" <TD> 400 <TD> 100, 200, 300
<TR><TD>"Ice Prawn Medium" <TD> 500 <TD>&nbsp;
<TR><TD>"Ice Prawn Bold" <TD> 700 <TD> 600
<TR><TD>"Ice Prawn Heavy" <TD> 800 <TD>&nbsp;
<TR><TD>"Ice Prawn Black" <TD> 900 <TD>&nbsp;
<TR><TD>"Ice Prawn ExtraBlack" <TD> (none) <TD>&nbsp;
</TABLE>
</div>
<!-- #include src=properties/font-stretch.srb -->
<P> The <span class="propinst-font-stretch">'font-stretch'</span> property
selects between normal, condensed and extended faces within a font family. Absolute keyword values have the following ordering, from narrowest to widest :</p>
<ol>
<li>ultra-condensed
<li>extra-condensed
<li>condensed
<li>semi-condensed
<li>normal
<li>semi-expanded
<li>expanded
<li>extra-expanded
<li>ultra-expanded
</ol>
<p>The relative keyword 'wider' sets the value to the next more expanded value more than the inherited value (while not increasing it above ultra-expanded); the relative keyword 'narrower' sets the value to the next more condensed value than the inherited value (while not decreasing it below ultra-condensed).
<!-- should this go to next more condensed/expanded face in that family as the computed value? like bolder/lighter -CL -->
<H3><a name="font-size">Font size</a>: the <span
class="propinst-font-size">'font-size'</span>
and <span class="propinst-font-size-adjust">'font-size-adjust'</span>
properties</H3>
<!-- #include src=properties/font-size.srb -->
<P>This property describes the size of the font when set solid.
Values have the following meanings:</p>
<DL>
<DT><span class="index-def" title="&lt;absolute-size&gt;::definition of">
<strong>&lt;absolute-size&gt;</strong></span>
<DD> An <a name="value-def-absolute-size"
class="value-def">&lt;absolute-size&gt;</a> keyword refers to an entry
in a table of font sizes computed and kept by the user agent. Possible values
are:
<P> [ xx-small | x-small | small | medium | large | x-large | xx-large ]
<P>On a computer screen a scaling factor of 1.2 <!-- changed from
1.5 which was widely criticised as far too much, CL -->is
suggested between adjacent indexes; if the 'medium' font is 10pt,
the 'large' font could be 12pt. 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.
<p class="note">Note: In CSS1, the suggested scaling factor between
adjacent indexes was 1.5 which user experience proved too large.</P>
<DT><span class="index-def" title="&lt;relative-size&gt;::definition
of"><strong>&lt;relative-size&gt;</strong></span>
<DD> A <a name="value-def-relative-size"
class="value-def">&lt;relative-size&gt;</a> keyword is interpreted
relative to the table of font sizes and the font size of the
parent element. Possible values are:
<P> [ larger | smaller ]
<P> 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.
<DT><span class="index-inst" title="&lt;length&gt;"><span
class="value-inst-length"><strong>&lt;length&gt;</strong></span></span>
<DD>A length value specifies an absolute font size
(that is independent of the user agent's font table).
Negative lengths are illegal.
<DT><span class="index-inst" title="&lt;percentage&gt;"><span
class="value-inst-percentage"><strong>&lt;percentage&gt;</strong>
</span></span>
<DD>A percentage value specifies an absolute font size relative
to the parent element's font size.
</DL>
<P>The <a href="cascade.html#computed-value">computed value</a> of
this property may differ from the <a
href="cascade.html#specified-value">specified value</a> according to
context. <!-- bad example: For example, inside a virtual reality scene
the user agent may compute a different size because of perspective
distortion.-->
<div class="example"><P>
<P> Examples:
<PRE>
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
</PRE>
</div>
<!-- #include src=properties/font-size-adjust.srb -->
<P>In bicameral scripts, the subjective apparent size (and general
character of a font on screen) is less dependent on its <span class="propinst-font-size">'font-size'</span> than on the value of its <span class="descinst-x-height">'x-height'</span>, or, more usefully, on the
ratio of these two values, called the <span class="index-def" title="z
value"><dfn>z value</dfn></span> (font size divided by x-height). The
lower the z value, the more likely it is that a font at smaller em
sizes will be legible. Inversely, faces with a higher z value will
become illegible more rapidly below a given threshold size than faces
with a lower z value. Straightforward font substitution that relies on
font size alone may lead to illegible characters.
<P>For example, the popular font Verdana has a z value of 1.72; in an
instance of Verdana with <span class="propinst-font-size">'font-size'</span> 100 points, the <span class="descinst-x-height">'x-height'</span> is 58
pt (100/58=1.72). For comparison, Times New Roman has a z value of
2.17. As the z value increases, a font for a bicameral script becomes less legible at a given point size.
<P>This property allows authors to specify a z value for an element
that preserves the <span class="index-inst" title="x-height"><span
class="descinst-x-height">'x-height'</span></span> of the first choice
substitute font. Values have the following meanings:</P>
<dl>
<dt><strong>none</strong>
<dd>Do not preserve the font's x-height.
<dt><span class="index-inst" title="&lt;number&gt;"><span
class="value-inst-number"><strong>&lt;number&gt;</strong></span></span>
<dd>Specifies the z value. This number refers to the ratio of em- to
x-heights of the "first choice" font. The scaling factor for
available fonts is computed according to the following formula:
<PRE>
a(z'/z) = b
</PRE>
<P>where:</p>
<PRE>
a = 'font-size' of first-choice font
z' = z of available font
b = 'font-size' to apply to available font
</PRE>
</dl>
<P>The first image below shows several typefaces as rasterized on a
Macintosh at 12-point, together with their z values. No matter what
the typographical family (or nominal base size, unit, or platform),
faces with lower z values look bigger than those with higher z values.
Faces with very high z values are illegible at the size shown.</p>
<P><img src="images/font-adjust-a.gif" alt="Comparison of 12 point fonts"></p>
<P>The next image shows the results of <span
class="propinst-font-size-adjust">'font-size-adjust'</span> with the
fonts shown in the previous image. These fonts' em sizes range all the
way up to 25-point, but appear subjectively to be about as large as
12-point Verdana, whose z value served as the base for scaling. As
adjusted, the legibility characteristics of these faces on screen are
nearly linear across faces. Note that <span
class="propinst-font-size-adjust">'font-size-adjust'</span> tends to
stabilize the horizontal metrics of lines, as well.
<P><img src="images/font-adjust-b.gif" alt="Comparison of font-adjusted fonts"></p>
<H3><a name="font-shorthand">Shorthand font property</a>: the <span class="propinst-font">'font'</span> property</H3>
<!-- #include src=properties/font.srb -->
<P> The <span class="propinst-font">'font'</span> property is
<em>almost</em> (see explanation below) a shorthand property for
setting <span class="propinst-font-style">'font-style'</span>, <span
class="propinst-font-variant">'font-variant'</span>, <span
class="propinst-font-weight">'font-weight'</span>, <span
class="propinst-font-size">'font-size'</span>, <span
class="propinst-line-height">'line-height'</span>, and <span
class="propinst-font-family">'font-family'</span>, at the same place
in the style sheet. <!-- but not font-size-adjust or font-stretch -CL --> The syntax of
this property is based on a traditional typographical shorthand
notation to set multiple properties related to fonts.
<p>All font related properties are first reset to their initial
values, including those listed in the preceding paragraph plus <span
class="propinst-font-stretch">'font-stretch'</span> and <span
class="propinst-font-size-adjust">'font-size-adjust'</span>. Then,
those properties that are given explicit values in the <span
class="propinst-font">'font'</span> 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 <span
class="propinst-font-stretch">'font-stretch'</span> and <span
class="propinst-font-size-adjust">'font-size-adjust'</span> to other
than their initial values using the <span
class="propinst-font">'font'</span> shorthand property; instead, set
the individual properties.
<div class="example"><P>
Examples:
<PRE>
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 }
</PRE>
<P> 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.
<P>The first three rules do not specify the <span
class="propinst-font-variant">'font-variant'</span> and <span
class="propinst-font-weight">'font-weight'</span> 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 <span class="propinst-font-weight">'font-weight'</span> to
'bold', the <span class="propinst-font-style">'font-style'</span> to
'italic', and implicitly sets <span
class="propinst-font-variant">'font-variant'</span> to 'normal'.
<P> The fifth rule sets the <span
class="propinst-font-variant">'font-variant'</span> ('small-caps'),
the <span class="propinst-font-size">'font-size'</span> (120% of the
parent's font size), the <span
class="propinst-line-height">'line-height'</span> (120% of the font
size) and the <span class="propinst-font-family">'font-family'</span>
('fantasy'). It follows that the keyword 'normal' applies to the two
remaining properties: <span
class="propinst-font-style">'font-style'</span> and <span
class="propinst-font-weight">'font-weight'</span>. All of these examples set <span
class="propinst-font-variant">'font-variant'</span> and <span
class="propinst-font-weight">'font-weight'</span> to their initial values.
</div>
<P>The following values refer to <span class="index-def" title="system
fonts">system fonts</span>:</p>
<dl>
<dt><strong>caption</strong><!-- strong?? you mean like, bold? -->
<dd>Used for captioned controls (e.g. buttons, drop-downs, etc.).
<dt><strong>icon</strong>
<dd> Used to label icons.
<dt><strong>menu</strong>
<dd> Used in menus (e.g., dropdown menus and menu lists).
<dt><strong>message-box</strong>
<dd> Used in dialog boxes.
<dt><strong>small-caption</strong>
<dd> Used for labeling small controls.
<dt><strong>status-bar</strong>
<dd> Used in window status bars.
</dl>
<P>System fonts may only be accessed 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. 780C 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.
<P>That is why this property is "almost" a shorthand property: system
fonts can only be specified with this property, not with <span
class="propinst-font-family">'font-family'</span> itself, so <span
class="propinst-font">'font'</span> allows authors to do more than the
sum of its subproperties. However, the individual properties such as <span class="propinst-font-weight">'font-weight'</span> are still given values taken from the system font, which can be independently varied.</p>
<!-- strange glitch, the last two paragraphs occurred twice in slightly different forms - merged and the spare copy deleted -CL -->
<div class="example">
<p>Example:
<pre>
BUTTON { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
BUTTON P { font: menu }
BUTTON P EM { font-weight: bolder }
</pre>
<p>If the font used for dropdown menus on a particular system
happened to be 9-point Charcoal, with a weight of 600, then P
elements which were descendants of BUTTON would be displayed as if
this rule were in effect (the values for the remaining properties
being taken from the initial values):
<pre>
BUTTON P {
font-style: normal;
font-variant: normal;
font-weight: 600;
font-size: 9pt;
line-height: normal;
font-family: Charcoal
} stuff
</PRE>
</div>
<p>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.
<h3><a name="generic-font-families">Generic font families</a></h3>
<p>Generic font families are a fallback mechanism, a means of
preserving some of the style sheet writer'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.
<p>Authors may assume that all five generic font families exist in all
CSS implementations (they need not necessarily map to five distinct
actual fonts, in all cases). 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.
<p>User agents are encouraged to allow users to select alternative
choices for the generic fonts.
<h4>serif</h4>
<p>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), and any
font which is so described may be used to represent the generic
'serif' family.
<p>Examples of fonts that fit this description include:</p>
<dl>
<dt>Latin fonts
<dd>Times New Roman, Bodoni,
Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
<dt>Greek fonts
<dd>Bitstream Cyberbit
<dt>Cyrillic fonts
<dd>Adobe Minion Cyrillic, Excelcior Cyrillic Upright,
Monotype Albion 70, Bitstream Cyberbit, ER Bukinst
<dt>Hebrew fonts
<dd>New Peninim, Raanana, Bitstream Cyberbit
<dt>Japanese fonts
<dd>Ryumin Light-KL, Kyokasho ICA, Futo Min A101
<dt>Arabic fonts
<dd>Bitstream Cyberbit
<dt>Cherokee fonts
<dd>Lo Cicero Cherokee
</dl>
<h4>sans-serif</h4>
<p>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), Pathang (Korean), and any font which is so
described may be used to represent the generic 'sans-serif' family.
<p>Examples of fonts that fit this description include:</p>
<dl>
<dt>Latin fonts
<dd>MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers,
Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
<dt>Greek fonts
<dd>Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
<dt>Cyrillic fonts
<dd>Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
<dt>Hebrew fonts
<dd>Arial Hebrew, MS Tahoma
<dt>Japanese fonts
<dd>Shin Go, Heisei Kaku Gothic W5
<dt>Arabic fonts
<dd>MS Tahoma
</dl>
<h4>cursive</h4>
<p>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.
<p>Examples of fonts that fit this description include:</p>
<dl>
<dt>Latin fonts
<dd>Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand,
Zapf-Chancery
<dt>Cyrillic fonts
<dd>ER Architekt
<dt>Hebrew fonts
<dd>Corsiva
<dt>Arabic fonts
<dd>DecoType Naskh, Monotype Urdu 507
</dl>
<h4>fantasy</h4>
<p>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).
<dl>
<dt>Latin fonts
<dd>Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz
</dl>
<h4>monospace</h4>
<p>The sole criterion of a monospace font is that all glyph
representations 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 for computer code.
<p>Examples of fonts which fit this description include:
<dl>
<dt>Latin fonts
<dd>Courier, MS Courier New, Prestige, Everson Mono
<dt>Greek Fonts
<dd>MS Courier New, Everson Mono
<dt>Cyrillic fonts
<dd>ER Kurier, Everson Mono
<dt>Japanese fonts
<dd>Osaka Monospaced
<dt>Cherokee fonts
<dd>Everson Mono
</dl>
<H2><a name="font-selection">Font selection</a></h2>
<P>The second phase of the CSS2 font mechanism concerns the user
agent's selection of a font based on author-specified font properties,
available fonts, etc. The details of the <a href="#algorithm">font
matching algorithm</a> are provided below.
<P>There are four possible font selection actions:
matching, intelligent matching, synthesis, and download.</p>
<dl>
<dt><span class="index-def" title="name matching"><dfn><strong>font name
matching</strong></dfn></span>
<dd> In this case, the user agent uses an
existing, accessible font that has the same family name as the
requested font. (Note that the appearance and the metrics might not
necessarily match, if the font that the document author used and the
font on the client system are from different foundries). The matching
information is restricted to the CSS font properties, including the
family name.
<dt><span class="index-def" title="intelligent font
matching"><dfn><strong>intelligent font
matching</strong>
</dfn></span>
<dd>In this case, the user agent uses an existing, accessible font that is
the closest match in appearance to the requested font. (Note that the
metrics might not match exactly). The matching information includes
information about the kind of font (text or symbol), nature of serifs,
weight, cap height, x height, ascent, descent, slant, etc.
<dt><span class="index-def" title="font synthesis"><dfn>
<strong>font synthesis</strong></dfn></span>
<dd> In this case, the user agent creates a font that is not
only a close match in appearance, but also matches the metrics of the
requested font. The synthesizing information includes the matching
information and typically requires more accurate values for the
parameters than are used for some matching schemes. In particular,
synthesis requires accurate width metrics and character to glyph
substitution and position information if all the layout characteristics of
the specified font are to be preserved.
<dt><span class="index-def" title="font download">
<dfn><strong>font download</strong></dfn></span>
<dd>Finally, the user agent may retrieve a font
over the Web. This is similar to the process of fetching images,
View remainder of file in raw view