fonts.html

CSS lets learn this step by step...

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 CSS font properties 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>15.2.2 <a name="font-family-prop">Font family</a>: the <a href="fonts.html#propdef-font-family" class="noxref"><span
class="propinst-font-family">'font-family'</span></a> property</H3>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'font-family'"><a name="propdef-font-family" class="propdef-title"><strong>'font-family'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>[[ <a href="fonts.html#value-def-family-name" class="noxref"><span class="value-inst-family-name">&lt;family-name&gt;</span></a>  | <a href="fonts.html#value-def-generic-family" class="noxref"><span class="value-inst-generic-family">&lt;generic-family&gt;</span></a> ],]* [<a href="fonts.html#value-def-family-name" class="noxref"><span class="value-inst-family-name">&lt;family-name&gt;</span></a>  | <a href="fonts.html#value-def-generic-family" class="noxref"><span class="value-inst-generic-family">&lt;generic-family&gt;</span></a>] | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>depends on user agent
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>yes
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<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 <a name="x7"><span
class="index-def" title="font set"><dfn>font set</dfn></span></a>.

<div class="example"><P style="display:none">Example(s):</P><P>
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:

<PRE>
BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
</PRE>

<P> 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'.
</div>

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

<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 previous 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 name="x9"
href="syndata.html#ignore">ignored</a></span> and any sequence of
whitespace characters inside the font name is converted to a single
space.

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

<div class="html-example"><P>
For example:

<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"&gt;
      BODY { font-family: "new century schoolbook", serif }
    &lt;/STYLE&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
   &lt;H1 style="font-family: 'My own font', fantasy"&gt;Test&lt;/H1&gt;
    &lt;P&gt;What's up, Doc?
  &lt;/BODY&gt;
&lt;/HTML&gt;
</PRE>
</div>

<div class="example"><P style="display:none">Example(s):</P><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 abstract 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>

<p>This selects any element that has the given language - Japanese or Traditional Chinese - and requests the appropriate font.
</div>


<H3>15.2.3 <a name="font-styling">Font styling</a>: the
<a href="fonts.html#propdef-font-style" class="noxref"><span class="propinst-font-style">'font-style'</span></a>,
<a href="fonts.html#propdef-font-variant" class="noxref"><span class="propinst-font-variant">'font-variant'</span></a>,
<a href="fonts.html#propdef-font-weight" class="noxref"><span class="propinst-font-weight">'font-weight'</span></a> and
<a href="fonts.html#propdef-font-stretch" class="noxref"><span class="propinst-font-stretch">'font-stretch'</span></a> properties
</H3>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'font-style'"><a name="propdef-font-style" class="propdef-title"><strong>'font-style'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>normal | italic | oblique | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>normal
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>yes
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<P> The <a href="fonts.html#propdef-font-style" class="noxref"><span class="propinst-font-style">'font-style'</span></a> property requests 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>Specifies a font that is classified as 'normal'
in the UA's font database.
<dt><strong>oblique</strong>
<dd>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.
<dt><strong>italic</strong>
<dd>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
<EM>Italic, Cursive</EM>, or <EM>Kursiv</EM> in their names will
typically be labeled 'italic'.
</dl>

<div class="example"><P style="display:none">Example(s):</P><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>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'font-variant'"><a name="propdef-font-variant" class="propdef-title"><strong>'font-variant'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>normal | small-caps | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>normal
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>yes
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<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 <a href="fonts.html#propdef-font-variant" class="noxref"><span
class="propinst-font-variant">'font-variant'</span></a> property requests such a font for <a name="x13"><span class="index-def" title="bicameral::definition of">bicameral</span></a> (having two cases, as with Latin script). This property has no visible effect for scripts that are
<a name="x14"><span class="index-def" title="unicameral::definition of"><dfn>unicameral</dfn></span></a> (having only one case, as with most of the world's writing systems). Values have the following
meanings:</p>

<dl>
<dt><strong>normal</strong>
<dd>Specifies a font that is not labeled as a
small-caps font.
<dt><strong>small-caps</strong>
<dd>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.
</dl>

<div class="example"><P style="display:none">Example(s):</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>



<P>Insofar as this property causes text to be transformed to
uppercase, the same considerations as for <a href="text.html#propdef-text-transform" class="noxref"><span
class="propinst-text-transform">'text-transform'</span></a> apply.

<div class="propdef">
<dl><dt>
<span class="index-def" title="'font-weight'"><a name="propdef-font-weight" class="propdef-title"><strong>'font-weight'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 |
600 | 700 | 800 | 900 | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>normal
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>yes
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>