fonts.html

CSS lets learn this step by step...

<PRE>
y = 'font-size' of first-choice font
a' = aspect value of available font
c = 'font-size' to apply to available font
</PRE>
</dl>


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

<P>Font size adjustments take place when computing the <a
href="cascade.html#actual-value">actual value</a> of <a href="fonts.html#propdef-font-size" class="noxref"><span
class="propinst-font-size">'font-size'</span></a>. Since inheritance is
based on the <a href="cascade.html#computed-value">computed value</a>,
child elements will inherit unadjusted values.


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

<P><img src="images/font-adjust-a.gif" alt="Comparison of 12 point fonts"></p>

<P>The next image shows the results of <a href="fonts.html#propdef-font-size-adjust" class="noxref"><span
class="propinst-font-size-adjust">'font-size-adjust'</span></a> 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 <a href="fonts.html#propdef-font-size-adjust" class="noxref"><span
class="propinst-font-size-adjust">'font-size-adjust'</span></a> 
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>15.2.5 <a name="font-shorthand">Shorthand font property</a>: the <a href="fonts.html#propdef-font" class="noxref"><span class="propinst-font">'font'</span></a> property</H3>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'font'"><a name="propdef-font" class="propdef-title"><strong>'font'</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#propdef-font-style" class="noxref"><span class="propinst-font-style">&lt;'font-style'&gt;</span></a> || <a href="fonts.html#propdef-font-variant" class="noxref"><span class="propinst-font-variant">&lt;'font-variant'&gt;</span></a> || <a href="fonts.html#propdef-font-weight" class="noxref"><span class="propinst-font-weight">&lt;'font-weight'&gt;</span></a> ]?
<a href="fonts.html#propdef-font-size" class="noxref"><span class="propinst-font-size">&lt;'font-size'&gt;</span></a> [ / <a href="visudet.html#propdef-line-height" class="noxref"><span class="propinst-line-height">&lt;'line-height'&gt;</span></a> ]? <a href="fonts.html#propdef-font-family" class="noxref"><span class="propinst-font-family">&lt;'font-family'&gt;</span></a> ] | caption | icon | menu | message-box | small-caption | status-bar | <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>see individual properties
<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>allowed on 'font-size' and 'line-height'
<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" class="noxref"><span class="propinst-font">'font'</span></a> property is,
except as described <a href="#almost">below</a>, a shorthand property for
setting <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>, <a href="fonts.html#propdef-font-size" class="noxref"><span
class="propinst-font-size">'font-size'</span></a>, <a href="visudet.html#propdef-line-height" class="noxref"><span
class="propinst-line-height">'line-height'</span></a>, and <a href="fonts.html#propdef-font-family" class="noxref"><span
class="propinst-font-family">'font-family'</span></a>, 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. 

<p>All font-related properties are first reset to their initial values, including those listed in the preceding paragraph plus <a href="fonts.html#propdef-font-stretch" class="noxref"><span class="propinst-font-stretch">'font-stretch'</span></a> and <a href="fonts.html#propdef-font-size-adjust" class="noxref"><span class="propinst-font-size-adjust">'font-size-adjust'</span></a>. Then, those properties that are given explicit values in the <a href="fonts.html#propdef-font" class="noxref"><span class="propinst-font">'font'</span></a> 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 <a href="fonts.html#propdef-font-stretch" class="noxref"><span class="propinst-font-stretch">'font-stretch'</span></a> and <a href="fonts.html#propdef-font-size-adjust" class="noxref"><span class="propinst-font-size-adjust">'font-size-adjust'</span></a> to other than their initial values using the <a href="fonts.html#propdef-font" class="noxref"><span class="propinst-font">'font'</span></a> shorthand property; instead, set the individual properties.

<div class="example"><P style="display:none">Example(s):</P><P>

<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 }
P { font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }
</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 <a href="fonts.html#propdef-font-variant" class="noxref"><span
class="propinst-font-variant">'font-variant'</span></a> and <a href="fonts.html#propdef-font-weight" class="noxref"><span
class="propinst-font-weight">'font-weight'</span></a> 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 <a href="fonts.html#propdef-font-weight" class="noxref"><span class="propinst-font-weight">'font-weight'</span></a> to
'bold', the <a href="fonts.html#propdef-font-style" class="noxref"><span class="propinst-font-style">'font-style'</span></a> to
'italic', and implicitly sets <a href="fonts.html#propdef-font-variant" class="noxref"><span
class="propinst-font-variant">'font-variant'</span></a> to 'normal'.

<P> The fifth rule sets the <a href="fonts.html#propdef-font-variant" class="noxref"><span
class="propinst-font-variant">'font-variant'</span></a> ('small-caps'),
the <a href="fonts.html#propdef-font-size" class="noxref"><span class="propinst-font-size">'font-size'</span></a> (120% of the
parent's font size), the <a href="visudet.html#propdef-line-height" class="noxref"><span
class="propinst-line-height">'line-height'</span></a> (120% of the font
size) and the <a href="fonts.html#propdef-font-family" class="noxref"><span class="propinst-font-family">'font-family'</span></a>
('fantasy'). It follows that the keyword 'normal' applies to the two
remaining properties: <a href="fonts.html#propdef-font-style" class="noxref"><span
class="propinst-font-style">'font-style'</span></a> and <a href="fonts.html#propdef-font-weight" class="noxref"><span
class="propinst-font-weight">'font-weight'</span></a>. 

<p>The sixth rule sets 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-size" class="noxref"><span
class="propinst-font-size">'font-size'</span></a>, and <a href="fonts.html#propdef-font-family" class="noxref"><span
class="propinst-font-family">'font-family'</span></a>, the other font
properties being set to their initial values. It then sets <a href="fonts.html#propdef-font-stretch" class="noxref"><span
class="propinst-font-stretch">'font-stretch'</span></a> to 'condensed'
since that property cannot be set to that value using the <a href="fonts.html#propdef-font" class="noxref"><span
class="propinst-font">'font'</span></a> shorthand property.
</div>


<P>The following values refer to <a name="x27"><span class="index-def" title="system
fonts">system fonts</span></a>:</p>

<dl>
<dt><strong>caption</strong>
<dd>The font used for captioned controls (e.g., buttons, drop-downs, etc.).
<dt><strong>icon</strong>
<dd>The font used to label icons.
<dt><strong>menu</strong>
<dd>The font used in menus (e.g., dropdown menus and menu lists).
<dt><strong>message-box</strong>
<dd>The font used in dialog boxes.
<dt><strong>small-caption</strong>
<dd>The font used for labeling small controls.
<dt><strong>status-bar</strong>
<dd>The font used in window status bars.
</dl>

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

<P><a name="almost">That is why</a> this property is "almost" a shorthand property: system
fonts can only be specified with this property, not with <a href="fonts.html#propdef-font-family" class="noxref"><span
class="propinst-font-family">'font-family'</span></a> itself, so <a href="fonts.html#propdef-font" class="noxref"><span
class="propinst-font">'font'</span></a> allows authors to do more than the
sum of its subproperties. However, the individual properties such as <a href="fonts.html#propdef-font-weight" class="noxref"><span class="propinst-font-weight">'font-weight'</span></a> are still given values taken from the system font, which can be independently varied.</p>

<div class="example"><P style="display:none">Example(s):</P><p>

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

<pre>
BUTTON P { font: 600 9pt Charcoal }
</pre>

<p>Because the <a href="fonts.html#propdef-font" class="noxref"><span class="propinst-font">'font'</span></a> shorthand resets to its initial value any property not explicitly given a value, this has the same effect as this declaration:

<pre>
BUTTON P {
  font-style: normal;
  font-variant: normal;
  font-weight: 600;
  font-size: 9pt;
  line-height: normal;
  font-family: Charcoal
} 
</PRE>

</div>

<h3>15.2.6 <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 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.


<p><a name="defined-to-exist">All five generic font families are defined to exist</a> 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.

<p>User agents are encouraged to allow users to select alternative
choices for the generic fonts.

<h4> <span class="index-def" title="serif, definition of"><a name="serif-def"><dfn>serif</dfn></a></span></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).
Any font that is so described may be used to represent the
generic 'serif' family.

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

<table>
<tr><td>Latin fonts
  <td>Times New Roman, Bodoni,
Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
<tr><td>Greek fonts
  <td>Bitstream Cyberbit
<tr><td>Cyrillic fonts
  <td>Adobe Minion Cyrillic, Excelcior Cyrillic Upright,
Monotype Albion 70, Bitstream Cyberbit, ER Bukinst
<tr><td>Hebrew fonts
  <td>New Peninim, Raanana, Bitstream Cyberbit
<tr><td>Japanese fonts
  <td>Ryumin Light-KL, Kyokasho ICA, Futo Min A101
<tr><td>Arabic fonts
  <td>Bitstream Cyberbit
<tr><td>Cherokee fonts
  <td>Lo Cicero Cherokee
</table>

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