fonts.html

CSS lets learn this step by step...

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.

<p>Examples of fonts that fit this description include:</p>

<table>
<tr><td>Latin fonts
  <td>MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers,
Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
<tr><td>Greek fonts
  <td>Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
<tr><td>Cyrillic fonts
  <td>Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
<tr><td>Hebrew fonts
  <td>Arial Hebrew, MS Tahoma
<tr><td>Japanese fonts
  <td>Shin Go, Heisei Kaku Gothic W5
<tr><td>Arabic fonts
  <td>MS Tahoma
</table>

<h4> <span class="index-def" title="cursive, definition of">
<a name="cursive-def"><dfn>cursive</dfn></a></span></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>

<table>
<tr><td>Latin fonts
  <td>Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand,
Zapf-Chancery
<tr><td>Cyrillic fonts
  <td>ER Architekt
<tr><td>Hebrew fonts
  <td>Corsiva
<tr><td>Arabic fonts
  <td>DecoType Naskh, Monotype Urdu 507
</table>

<h4> <span class="index-def" title="fantasy, definition of">
<a name="fantasy-def"><dfn>fantasy</dfn></a></span></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). Examples include:</p>

<table>
<tr><td>Latin fonts
  <td>Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz
</table>


<h4> <span class="index-def" title="monospace, definition of">
<a name="monospace-def"><dfn>monospace</dfn></a></span></h4>


<p>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.

<p>Examples of fonts which fit this description include:

<table>
<tr><td>Latin fonts
  <td>Courier, MS Courier New, Prestige, Everson Mono
<tr><td>Greek Fonts
  <td>MS Courier New, Everson Mono
<tr><td>Cyrillic fonts
  <td>ER Kurier, Everson Mono
<tr><td>Japanese fonts
  <td>Osaka Monospaced
<tr><td>Cherokee fonts
  <td>Everson Mono
</table>

<H2>15.3 <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:
name matching, intelligent matching, synthesis, and download.</p>

<dl>
<dt><a name="x33"><span class="index-def" title="name matching"><dfn><strong>font name
matching</strong></dfn></span></a>
<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. This is the only method used by CSS1.

<dt><a name="x34"><span class="index-def" title="intelligent font
	    matching"><dfn><strong>intelligent font
matching</strong>
</dfn></span></a>
<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><a name="x35"><span class="index-def" title="font synthesis"><dfn>
<strong>font synthesis</strong></dfn></span></a>
<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><a name="x36"><span class="index-def" title="font download">
<dfn><strong>font download</strong></dfn></span></a>
<dd>Finally, the user agent may retrieve a font
over the Web. This is similar to the process of fetching images,
sounds, or applets over the Web for display in the current document,
and likewise can cause some delay before the page can be displayed.
</DL>

<p><a name="x37"><span class="index-def" title="progressive rendering"><dfn>Progressive
rendering</dfn></span></a> is a combination of download and one of the
other methods; it provides a temporary substitute font (using name
matching, intelligent matching, or synthesis) to allow content to be
read while the requested font downloads. Once the real font has been
successfully downloaded, it replaces the
temporary font, hopefully without the need to reflow.

<div class="note"><P>
<em><strong>Note.</strong>
Progressive rendering requires metric information about the font in
order to avoid re-layout of the content when the actual font has been
loaded and rendered. This metric information is sufficiently verbose
that it should only be specified at most once per font in a document.
</em>
</div>


<h3>15.3.1 <span class="index-inst" title="font description"> <a
name="font-descriptions">Font Descriptions</a></span> and
@font-face</h3>

<P>The font description provides the bridge between an author's font
specification and the <a name="x39"><span class="index-def" title="font
data"><dfn>font data</dfn></span></a>, which is the data needed to format
text and to render the abstract glyphs to which the characters
map - the actual scalable outlines or bitmaps. Fonts are
<em>referenced</em> by style sheet properties.

<P>The font description is added to the font database and then used to select the relevant font data. The
font description contains descriptors such as the location of the
font data on the Web, and characterizations of that font data. The font
descriptors are also needed to match the style sheet font properties
to particular font data. The level of detail of a font description can
vary from just the name of the font up to a list of glyph
widths. 

<P>Font descriptors may be classified into three types:</p>

<ol>
<li>those that provide the link between the CSS usage of the font and
the font description (these have the same names as the corresponding
CSS font properties),

<li>the URI for the location of the font data,

<li>those that further characterize the font, to provide a link
	  between the font description and the font data.
</ol>


<p>All font descriptions are specified via a <a name="x40"><span class="index-def"
title="@font-face"><em>@font-face</em></span></a>
<a name="x41"><span class="index-inst" title="at-rules">at-rule</span></a>. The 
general form is:

<P><tt>@font-face { <a href="fonts.html#value-def-font-description" class="noxref"><span class="value-inst-font-description">&lt;font-description&gt;</span></a> }</tt>

<p>where the <span class="index-def" title="&lt;font-description&gt;::definition of"><a name="value-def-font-description">&lt;font-description&gt;</a></span> has the form:

<pre>
descriptor: value;
descriptor: value;
[...]
descriptor: value;
</pre>

<p>Each <a name="x43"><span class="index-inst" title="@font-face"> @font-face</span></a>
rule specifies a value for every font descriptor, either implicitly or
explicitly. Those not given explicit values in the rule take the
initial value listed with each descriptor in this specification. These
descriptors apply solely within the context of the @font-face rule in
which they are defined, and do not apply to document language
elements. Thus, there is no notion of which elements the descriptors
apply to, or whether the values are inherited by child elements.

<P>The available font descriptors are described in later sections of
this specification.

<div class="html-example">
<p>For example, here the font 'Robson Celtic' is defined and
referenced in a style sheet contained in an HTML document.

<PRE>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;
  &lt;HEAD&gt;
    &lt;TITLE&gt;Font test&lt;/TITLE&gt;
    &lt;STYLE TYPE="text/css" MEDIA="screen, print"&gt;
      @font-face {
        font-family: "Robson Celtic";
        src: url("http://site/fonts/rob-celt")
      }
      H1 { font-family: "Robson Celtic", serif }
    &lt;/STYLE&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
    &lt;H1&gt; This heading is displayed using Robson Celtic&lt;/H1&gt;
  &lt;/BODY&gt;
&lt;/HTML&gt;
</PRE>

<p>The style sheet (in the STYLE element) contains a CSS rule that
sets all H1 elements to use the 'Robson Celtic' font family.

<P>A CSS1 implementation will search the client for a font whose
family name and other properties match 'Robson Celtic' and, if i