10BC0 csswg-drafts/css3-fonts/Fonts.html at e0e0665dd94697423eed43ad912d6827e362104b · w3c/csswg-drafts · GitHub
Skip to content

Fonts.html

Latest commit

 

History

History
5856 lines (4384 loc) · 201 KB

Fonts.html

File metadata and controls

5856 lines (4384 loc) · 201 KB
which do not represent actual characters.
<div class=figure><img alt="sample fantasy fonts" src=fantasyexamples.png>
<p class=caption>Sample fantasy fonts
</div>
<h5 class="no-num no-toc"> <span class=index-def id=monospace0
title="monospace, definition of"> <a name=monospace-def><dfn
id=monospace>monospace</dfn></a></span></h5>
<p>The sole criterion of a monospace font is that all glyphs have the same
fixed width. This is often used to render samples of computer code.
<div class=figure><img alt="sample monospace fonts"
src=monospaceexamples.png>
<p class=caption>Sample monospace fonts
</div>
<!-- prop: font-weight -->
<h3 id=font-weight-prop><span class=secno>3.2 </span>Font weight: the <a
href="#propdef-font-weight">font-weight</a> property</h3>
<table class=propdef id=namefont-weight>
<tbody>
<tr>
<td>Name:
<td><dfn id=propdef-font-weight>font-weight</dfn>
<tr>
<td>Value:
<td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600
| 700 | 800 | 900 | inherit
<tr>
<td>Initial:
<td>normal
<tr>
<td>Applies to:
<td>all elements
<tr>
<td>Inherited:
<td>yes
<tr>
<td>Percentages:
<td>N/A
<tr>
<td>Media:
<td>visual
<tr>
<td>Computed value:
<td>see description
</table>
<p>The <a class=noxref href="#font-weight-prop"><span
class=property>‘<code class=property>font-weight</code>’</span></a>
property specifies weight of glyphs in the font, their degree of blackness
or stroke thickness.
<p>Values have the following meanings:
<dl>
<dt>100 to 900
<dd>These values form an ordered sequence, where each number indicates a
weight that is at least as dark as its predecessor. These roughly
correspond to the commonly used weight names below:
</dl>
<ul>
<li>100 - Thin
<li>200 - Extra Light (Ultra Light)
<li>300 - Light
<li>400 - Normal
<li>500 - Medium
<li>600 - Semi Bold (Demi Bold)
<li>700 - Bold
<li>800 - Extra Bold (Ultra Bold)
<li>900 - Black (Heavy)
</ul>
<dl>
<dt><strong>normal</strong>
<dd>Same as ‘<code class=css>400</code>’.
<dt><strong>bold</strong>
<dd>Same as ‘<code class=css>700</code>’.
<dt><strong>bolder</strong>
<dd>Specifies the weight of the face bolder than the inherited value.
<dt><strong>lighter</strong>
<dd>Specifies the weight of the face lighter than the inherited value.
</dl>
<p>Font formats that use a scale other than a nine step scale should map
their scale onto the CSS scale so that 400 roughly corresponds with a face
that would be labeled as Regular, Book, Roman and 700 roughly matches a
face that would be labeled as Bold. Or weights may be inferred from the
style names, ones that correspond roughly with the scale above. The scale
is relative, so a face with a larger weight value must never appear
lighter. If style names are used to infer weights, care should be taken to
handle variations in style names across locales.
<p>Quite often there are only a few weights available for a particular font
family. When a weight is specified for which no face exists, a face with a
nearby weight is used. In general, bold weights map to faces with heavier
weights and light weights map to faces with lighter weights (see the <a
href="#font-matching-algorithm">font matching section below</a> for a
precise definition). The examples here illustrate which face is used for
different weights, grey indicates a face for that weight does not exist so
a face with a nearby weight is used:
<div class=figure><img alt="weight mappings for a family with 400, 700 and
900 weights" src=optimaweights.png>
<p class=caption>Weight mappings for a font family with 400, 700 and 900
weight faces
</div>
<div class=figure><img alt="weight mappings for a family with 300, 600
weights" src=hiraginoweights.png>
<p class=caption>Weight mappings for a font family with 300 and 600 weight
faces
</div>
<p>Although the practice is not well-loved by typographers, bold faces are
often synthesized by user agents for faces that lack actual bold faces.
For the purposes of style matching, these faces must be treated as if they
exist within the family.
<p>Values of ‘<code class=property>bolder</code>’ and ‘<code
class=property>lighter</code>’ indicate values relative to the weight of
the parent element. Based on the inherited weight value, the weight used
is calculated using the chart below. Child elements inherit the calculated
weight, not a value of ‘<code class=property>bolder</code>’ or
‘<code class=property>lighter</code>’.
<table class=data summary="Bolder/lighter mappings">
<thead>
<tr>
<th scope=col>Inherited value
<th scope=col>bolder
<th scope=col>lighter
<tbody>
<tr>
<th>100
<td>400
<td>100
<tr>
<th>200
<td>400
<td>100
<tr>
<th>300
<td>400
<td>100
<tr>
<th>400
<td>700
<td>100
<tr>
<th>500
<td>700
<td>100
<tr>
<th>600
<td>900
<td>400
<tr>
<th>700
<td>900
<td>400
<tr>
<th>800
View remainder of file in raw view