8000 csswg-drafts/css3-fonts/Overview.html at a4b5962adf791fca46ed2a37220515f808ff57a4 · w3c/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
4467 lines (3282 loc) · 145 KB

Overview.html

File metadata and controls

4467 lines (3282 loc) · 145 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang=en>
<head><meta content="text/html;charset=utf-8" http-equiv=Content-Type>
<title>CSS Fonts Module Level 3</title>
<!--
FIXME when publishing: copy the current default.css and link to
"default.css" rather than "../default.css"
-->
<link href="../default.css" rel=stylesheet type="text/css">
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
type="text/css">
<style type="text/css">
body {
padding: 2em 70px 2em 70px;
}
p + p, p.mtb {
margin-top: 0.8em;
text-indent: 0px;
}
#fontformats td, #fontformats th {
padding-right: 2em;
text-align: left;
}
dd {
margin-bottom: 1em;
}
pre {
font-size: 100%;
}
#authors dd {
margin-bottom: 0;
}
#fontstylematchingalg {
list-style-type: lower-alpha;
}
#fontmatchingalg ul, #fontmatchingalg ol {
margin-top: 0.8em;
}
#fontmatchingalg li + li {
margin-top: 0.8em;
}
div.example {
padding: 1em;
margin-top: 1em;
}
div.example + div.example {
margin-top: 2em;
}
div.figure {
page-break-inside: avoid;
}
.data {
margin: 1em auto;
border-collapse: collapse;
}
.data caption {
width: 100%;
text-align: center;
}
.data td, .data th {
padding-left: 0.5em;
padding-right: 0.5em;
text-align: center;
}
.data thead th:first-child {
text-align: right;
}
.data tbody th:first-child {
text-align: left;
padding-left: 0.5em;
}
pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em }
</style>
<body>
<div class=head> <!--begin-logo-->
<p><a href="http://www.w3.org/"><img alt=W3C height=48
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
<h1>CSS Fonts Module Level 3</h1>
<h2 class="no-num no-toc" id=editors>Editor's Draft 18 February 2010</h2>
<dl id=authors>
<dt>This version:
<dd><a
href="http://dev.w3.org/csswg/css3-fonts/">http://dev.w3.org/csswg/css3-fonts/</a>
<!-- <dd><a href="http://www.w3.org/TR/2010/ED-css3-fonts-20100218">http://www.w3.org/TR/2010/ED-css3-fonts-20100218</a> -->
<dt>Latest version:
<dd><a
href="http://www.w3.org/TR/css3-fonts/">http://www.w3.org/TR/css3-fonts/</a>
<dt>Latest editor's draft:
<dd><a
href="http://dev.w3.org/csswg/css3-fonts/">http://dev.w3.org/csswg/css3-fonts/</a>
<dt>Previous version (CSS3 Fonts):
<dd><a
href="http://www.w3.org/TR/2002/WD-css3-fonts-20020802">http://www.w3.org/TR/2002/WD-css3-fonts-20020802</a>
<dt>Previous version (CSS3 Web Fonts):
<dd><a
href="http://www.w3.org/TR/2002/WD-css3-webfonts-20020802">http://www.w3.org/TR/2002/WD-css3-webfonts-20020802</a>
<dt>Editor:
<dd><a href="mailto:jdaggett@mozilla.com">John Daggett (Mozilla)</a>
</dl>
<!--begin-copyright-->
<p class=copyright><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=license>Copyright</a> © 2010 <a href="http://www.w3.org/"><acronym
title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a
href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
title="European Research Consortium for Informatics and
Mathematics">ERCIM</acronym></a>, <a
hre 6CD0 f="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
<a
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
and <a
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
use</a> rules apply.</p>
<!--end-copyright-->
<hr title="Separator for header">
</div>
<!--
To do:
- font matching examples
- polish font matching algorithm
- specifics of SVG font reference handling
- finish examples for unicode-range
- italic/oblique substitution issue
- font-size
- move font-variant into font rendering section
- font shorthand
- TrueType/OpenType nitty gritty
- make intro more concise and relevant to rest of the spec, point out specific general problems
- illustrations of localized bold, italic names?
-->
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
<p>This CSS3 module describes how font properties are specified and how
font resources are loaded dynamically. The contents of this specification
are a consolidation of content previously divided into <a
href="http://www.w3.org/TR/2002/WD-css3-fonts-20020802">CSS3 Fonts</a> and
<a href="http://www.w3.org/TR/2002/WD-css3-webfonts-20020802">CSS3 Web
Fonts</a> modules.
<h2 class="no-num no-toc" id=status>Status of this document</h2>
<!--begin-status-->
<p>This is a public copy of the editors' draft. It is provided for
discussion only and may change at any moment. Its publication here does
not imply endorsement of its contents by W3C. Don't cite this document
other than as work in progress.
<p>The (<a
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
mailing list <a
href="mailto:www-style@w3.org?Subject=%5Bcss3-fonts%5D%20PUT%20SUBJECT%20HERE">
www-style@w3.org</a> (see <a
href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
discussion of this specification. When sending e-mail, please put the text
“css3-fonts” in the subject, preferably like this:
“[<!---->css3-fonts<!---->] <em>…summary of comment…</em>”
<p>This document was produced by the <a href="/Style/CSS/members">CSS
Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
<p>This document was produced by a group operating under the <a
href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
rel=disclosure>public list of any patent disclosures</a> made in
connection with the deliverables of the group; that page also includes
instructions for disclosing a patent. An individual who has actual
knowledge of a patent which the individual believes contains <a
href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
Claim(s)</a> must disclose the information in accordance with <a
href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
W3C Patent Policy</a>.</p>
<!--end-status-->
<h2 class="no-num no-toc" id=contents>Table of contents</h2>
<!--begin-toc-->
<ul class=toc>
<li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
<li><a href="#typography"><span class=secno>2 </span>Typography
Background</a>
<li><a href="#basic"><span class=secno>3 </span>Basic font properties</a>
<ul class=toc>
<li><a href="#font-family"><span class=secno>3.1 </span>Font family: the
‘<code class=property>font-family</code>’ property</a>
<ul class=toc>
<li><a href="#generic"><span class=secno>3.1.1 </span>Generic font
families</a>
</ul>
<li><a href="#font-weight"><span class=secno>3.2 </span>Font weight: the
‘<code class=property>font-weight</code>’ property</a>
<li><a href="#font-width"><span class=secno>3.3 </span>Font width: the
‘<code class=property>font-stretch</code>’ property</a>
<li><a href="#font-style"><span class=secno>3.4 </span>Font style: the
‘<code class=property>font-style</code>’ property</a>
<li><a href="#font-size"><span class=secno>3.5 </span>Font size: the
‘<code class=property>font-size</code>’ property</a>
<li><a href="#relative"><span class=secno>3.6 </span>Relative sizing:
the ‘<code class=property>font-size-adjust</code>’ property</a>
<li><a href="#kerning"><span class=secno>3.7 </span>Kerning: the
‘<code class=property>font-kerning</code>’ property</a>
<li><a href="#shorthand"><span class=secno>3.8 </span>Shorthand font
property: the ‘<code class=property>font</code>’ property</a>
</ul>
<li><a href="#font-feature"><span class=secno>4 </span>Font feature
properties</a>
<ul class=toc>
<li><a href="#ligatures"><span class=secno>4.1 </span>Ligatures: the
‘<code class=property>font-variant-ligatures</code>’ property</a>
<li><a href="#alternates"><span class=secno>4.2 </span>Alternates and
swashes: the ‘<code class=property>font-variant-alternates</code>’
property</a>
<li><a href="#capitalization"><span class=secno>4.3
</span>Capitalization: the ‘<code
class=property>font-variant-caps</code>’ property</a>
<li><a href="#numerical"><span class=secno>4.4 </span>Numerical
formatting: the ‘<code class=property>font-variant-numeric</code>’
property</a>
<li><a href="#east-asian"><span class=secno>4.5 </span>East Asian text
rendering: the ‘<code
class=property>font-variant-east-asian</code>’ property</a>
<li><a href="#overall"><span class=secno>4.6 </span>Overall shorthand
for font rendering: the ‘<code class=property>font-variant</code>’
property</a>
<li><a href="#low-level"><span class=secno>4.7 </span>Low-level font
settings control: the ‘<code
class=property>font-feature-settings</code>’ property</a>
<li><a href="#font-language"><span class=secno>4.8 </span>Font language
override: the ‘<code class=property>font-lang-sys</code>’
property</a>
</ul>
<li><a href="#font-resources"><span class=secno>5 </span>Font
resources</a>
<ul class=toc>
<li><a href="#the-font-face"><span class=secno>5.1 </span>The @font-face
rule</a>
<li><a href="#font-family0"><span class=secno>5.2 </span>Font family:
the ‘<code class=property>font-family</code>’ descriptor</a>
<li><a href="#font-reference"><span class=secno>5.3 </span>Font
reference: the ‘<code class=property>src</code>’ descriptor</a>
<li><a href="#font-property"><span class=secno>5.4 </span>Font property
descriptors: the ‘<code class=property>font-style</code>’, ‘<code
class=property>font-weight</code>’, ‘<code
class=property>font-stretch</code>’ descriptors</a>
<li><a href="#character"><span class=secno>5.5 </span>Character range:
the ‘<code class=property>unicode-range</code>’ descriptor</a>
<li><a href="#font-rendering"><span class=secno>5.6 </span>Font
rendering: the ‘<code class=property>font-variant</code>’ and
‘<code class=property>font-feature-settings</code>’ descriptors</a>
</ul>
<li><a href="#font-rendering0"><span class=secno>6 </span>Font rendering
</a>
<li><a href="#font-matching"><span class=secno>7 </span>Font matching
algorithm</a>
<li class=no-num><a href="#appendix">Appendix A: Same-origin restriction
for fonts</a>
<li class=no-num><a href="#appendix0">Appendix B: Mapping platform font
properties to CSS properties</a>
<li class=no-num><a href="#appendix1">Appendix C: Font licensing
issues</a>
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
<li class=no-num><a href="#references">References</a>
<ul class=toc>
<li class=no-num><a href="#normative">Normative</a>
<li class=no-num><a href="#informative">Informative</a>
</ul>
<li class=no-num><a href="#index">Index</a>
<li class=no-num><a href="#property-index">Property index</a>
</ul>
<!--end-toc-->
<h2 id=introduction><span class=secno>1 </span>Introduction</h2>
<p>A font provides a resource containing the visual representation of
characters. At a minimum it contains information that maps character codes
to shapes (called glyphs) for displaying these characters. Fonts sharing a
common design style are commonly grouped into font families classified by
a set of standard font properties. Within a family, the shape displayed
for a given character can vary by stroke weight, slant or relative width,
among others. A given font face is described by a unique combination of
these properties. For a given range of text, CSS font properties are used
to select a font family and a specific font face within that family to be
used when rendering that text. As a simple example, to use the bold form
of Helvetica one could use:
<pre>body {
font-family: Helvetica;
font-weight: bold;
}</pre>
<p>Font resources may be local, installed on the system on which a user
agent is running, or downloadable. For local font resources descriptive
information can be obtained directly from the font resource. For
downloadable font resources (sometimes referred to as web fonts), the
descriptive information is included with the reference to the font
resource.
<p>Families of fonts typically don't contain a single face for each
possible variation of font properties. The CSS font selection mechanism
describes how to match a given set of CSS font properties to a given font
face.
<h2 id=typography><span class=secno>2 </span>Typography Background</h2>
<!--
- Wide variation in character forms, glyphs
- Use of diacritics adds complications to even "simple" alphabets
- Examples from Czech, Slovak, African romanizations
- Vietnamese stacking example
- General use of ligatures
- Required for languages such as Arabic
- Problems with creating "universal fonts"
-->
<p><em>This section is included as background for some of the problems and
situations that are described in other sections. It should be viewed as
informative only.</em>
<p> Typographic traditions vary across the globe so there is no unique way
to classify all fonts across languages and cultures. For even common Latin
letters, wide variations are possible:
<div class=figure><img alt="variations in glyphs for a single character"
src=aaaaaa.png>
<p class=caption>One character, many glyph variations
</div>
<p>Differences in the anatomy of letterforms is one way to distinguish
fonts. For Latin fonts, flourishes at the ends of a character's main
strokes, or serifs, can distinguish a font from those without. Similar
comparisons exist in non-Latin fonts between fonts with tapered strokes
and those using primarily uniform strokes:
<div class=figure><img alt="serif vs. non-serifs" src=serifvssansserif.png>
<p class=caption>Letterforms with and without serifs
</div>
<div class=figure><img alt="serif vs. non-serifs for japanese"
src=minchovsgothic.png>
<p class=caption>Similar groupings for Japanese typefaces
</div>
<p>Fonts contain letterforms and the data needed to map characters to these
letterforms. Often this may be a simple one-to-one mapping but more
complex mappings are also possible. The use of combining diacritic marks
creates many variations for an underlying letterform:
<div class=figure><img alt="diacritic marks" src=aaaaaa-diacritics.png>
<p class=caption>Variations with diacritic marks
</div>
<!-- Include stacking diacritics? Hmm, Vietnamese example? -->
<p>A sequence of characters can be represented by a single glyph known as a
ligature:
<div class=figure><img alt="example of a fi ligature"
src=final-ligature.png>
<p class=caption>Ligature example
</div>
<p>Visual transformations based on textual context like this may be a
stylistic option for European languages but are required to correctly
render languages like Arabic; the lam and alef characters below
<em>must</em> be combined when they exist in sequence:
<div class=figure><img alt="lam alef ligature" src=lamaleflig.png>
<p class=caption>Required Arabic ligature
</div>
<p>The relative complexity of these shaping transformations requires
additional data within the font.
<p>Sets of font faces with various stylistic variations are often grouped
together into font families. In the simplest case a regular face is
supplemented with bold and italic faces but much more extensive groupings
are possible. Variations in the thickness of letterform strokes, or the
weight, or the overall proportions of the letterform, or the width, are
most common. In the example below, each letter uses a different font face
within the Univers font family. The width used increases from top to
bottom and the weight increases from left to right:
<div class=figure><img alt="various width and weight variations within a
single family" src=weightwidthvariations.png>
<p class=caption>Weight and width variations within a single font family
</div>
<p>Creating fonts that support multiple scripts is a difficult task;
designers need to understand the cultural traditions surrounding the use
of type in different scripts and come up with letterforms that somehow
share a common theme. Many languages often share a common script and each
of these languages may have noticeable stylistic differences. The Arabic
script is shared by Persian and Urdu and Cyrillic is used with many
languages, not just Russian.
<p>Fonts provide a character map that details the set of characters for
they have glyphs. If a document contains characters not supported by a
specified font, a user agent may revert to a system font fallback
procedure to find glyphs to render these characters correctly. If no font
can be found, some form of "missing glyph" character is rendered by the
user agent. Often these are the result of encoding errors caused by
authors failing to explicitly indicate the encoding used by a document.
<p>Although the character map of a font provides a map from a given
character to a glyph for that character, modern font technologies such as
OpenType and AAT (Apple Advanced Typography) provide a richer set of rules
for performing this mapping. Fonts in these forms allow these features to
be embedded in the font itself and controlled by applications. Common
features include ligatures, swashes, contextual alternates, proportional
and tabular figures, and automatic fractions, to list just a few. For a
visual overview of OpenType features, see the <a
href="#OPENTYPE-FONT-GUIDE"
rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.</p>
<!-- illustration of various font features -->
<!-- common ligs, uncommon ligs, old-style figures, lining figures, prop/tabular figures,
automatic fractions, proportional/full-width Japanese, glyph variations over time,
stylistic alternates, swashes, small-caps -->
<h2 id=basic><span class=secno>3 </span>Basic font properties</h2>
<p>The particular font face used to render a character is determined by the
font family and other font properties that apply to a given element. This
structure allows settings to be varied independent of each other.</p>
<!-- prop: font-family -->
<h3 id=font-family><span class=secno>3.1 </span>Font family: the ‘<code
class=property><a href="#font-family2">font-family</a></code>’ property</h3>
<table class=propdef id=namefont-family>
<tbody>
<tr>
<td>Name:
<td><dfn id=font-family1>font-family</dfn>
<tr>
<td>Value:
<td>[[ &lt;family-name> | &lt;generic-family> ] [, &lt;family-name>|
&lt;generic-family>]* ] | inherit
<tr>
<td>Initial:
<td>depends on user agent
<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>as specified
</table>
<p>This property specifies a prioritized list of font family names or
generic family names. A user agent iterates through the list of family
names until it matches an available font that contains a glyph for the
character to be rendered. This allows for differences in available fonts
across across platforms and for differences in the range of characters
supported by individual fonts.
<p>A font family name only specifies a name given to a set of font faces,
it does not specify an individual face. Given the availability of the
fonts below, Futura would match but Futura Medium would not:
<div class=figure><img alt="family and face names"
src=familyvsfacename.png>
<p class=caption>Family and individual face names
</div>
<p>Some font formats support the use of multiple family names for different
localizations. User agents should recognize any of these names independent
of the underlying platform localization, system API used or document
encoding:
<div class=figure><img alt="examples of localized family names"
src=localizedfamilynames.png>
<p class=caption>Localized family names
</div>
<p>Consider the example below:
<div class=example>
<pre>body {
font-family: Helvetica, Verdana, sans-serif;
}</pre>
</div>
<p>If Helvetica is available it will be used when rendering. If neither
Helvetica or Verdana is present, then the user agent defined sans serif
font will be used.
<p>There are two types of font family names:
<dl>
<dt>&lt;family-name&gt;
<dd>The name of a font family of choice such as Helvetica or Verdana in
the previous example. Font family names containing more than one word
should be quoted. If quoting is omitted, whitespace characters before and
after the font family name are ignored and any sequence of whitespace
characters inside the font name is converted to a single space. Depending
upon the font format used, font family names may be case-sensitive.
<dt>&lt;generic-family&gt;
<dd> The following generic family keywords are defined: ‘<code
class=property><a href="#serif">serif</a></code>’, ‘<code
class=property><a href="#sans-serif">sans-serif</a></code>’, ‘<code
class=property><a href="#cursive">cursive</a></code>’, ‘<code
class=property><a href="#fantasy">fantasy</a></code>’, and ‘<code
class=property><a href="#monospace">monospace</a></code>’. These
keywords can be used as a general fallback mechanism when an author's
desired font choices are not available. As keywords, they should not be
quoted. Authors are encouraged to append a generic font family as a last
alternative for improved robustness.
</dl>
<h4 id=generic><span class=secno>3.1.1 </span>Generic font families</h4>
<p>All five generic font families are defined to exist 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.
User agents are encouraged to allow users to select alternative choices
for the generic fonts.
<h5 class="no-num no-toc"> <span class=index-def id=serif0 title="serif,
definition of"><a name=serif-def><dfn id=serif>serif</dfn></a></span></h5>
<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 ‘<code class=property><a
href="#sans-serif">sans-serif</a></code>’ generic font family. CSS uses
the term ‘<code class=property><a href="#serif">serif</a></code>’ 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),
Batang (Korean). Any font that is so described may be used to represent
the generic ‘<code class=property><a href="#serif">serif</a></code>’
family.
<div class=figure><img alt="sample serif fonts" src=serifexamples.png>
<p class=caption>Sample serif fonts
</div>
<h5 class="no-num no-toc"> <span class=index-def id=sans-serif0
title="sans-serif, definition of"> <a name=sans-serif-def><dfn
id=sans-serif>sans-serif</dfn></a></span></h5>
<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 ‘<code class=property><a
href="#serif">serif</a></code>’ family. CSS uses the term ‘<code
class=property><a href="#sans-serif">sans-serif</a></code>’ to apply to
a font for any s 6154 cript, although other names may be more familiar for
particular scripts, such as Gothic (Japanese), Kai (Chinese), or Gulim
(Korean). Any font that is so described may be used to represent the
generic ‘<code class=property><a
href="#sans-serif">sans-serif</a></code>’ family.
<!-- Kai for Chinese looks wrong, looks to be a serif-like face. -->
<div class=figure><img alt="sample sans-serif fonts"
src=sansserifexamples.png>
<p class=caption>Sample sans-serif fonts
</div>
<h5 class="no-num no-toc"> <span class=index-def id=cursive0
title="cursive, definition of"> <a name=cursive-def><dfn
id=cursive>cursive</dfn></a></span></h5>
<p>Glyphs in cursive fonts 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. Some scripts,
such as Arabic, are almost always cursive. CSS uses the term ‘<code
class=property><a href="#cursive">cursive</a></code>’ to apply to a font
for any script, although other names such as Chancery, Brush, Swing and
Script are also used in font names.
<div class=figure><img alt="sample cursive fonts" src=cursiveexamples.png>
<p class=caption>Sample cursive fonts
</div>
<h5 class="no-num no-toc"> <span class=index-def id=fantasy0
title="fantasy, definition of"> <a name=fantasy-def><dfn
id=fantasy>fantasy</dfn></a></span></h5>
<p>Fantasy fonts are primarily decorative fonts that contain playful
representations of characters. These do not include Pi or Picture fonts
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><span class=secno>3.2 </span>Font weight: the ‘<code
class=property><a href="#font-weight1">font-weight</a></code>’ property</h3>
<table class=propdef id=namefont-weight>
<tbody>
<tr>
<td>Name:
<td><dfn id=font-weight0>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"><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 should 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 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 should 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
<td>900
<td>700
<tr>
<th>900
<td>900
<td>700
</table>
<p>The table above is equivalent to selecting the next relative bolder or
lighter face, given a font family containing normal and bold faces along
with a thin and a heavy face. Authors who desire finer control over the
exact weight values used for a given element should use numerical values
instead of relative weights.</p>
<!-- prop: font-stretch -->
<h3 id=font-width><span class=secno>3.3 </span>Font width: the ‘<code
class=property><a href="#font-stretch0">font-stretch</a></code>’
property</h3>
<table class=propdef id=namefont-stretch>
<tbody>
<tr>
<td>Name:
<td><dfn id=font-stretch>font-stretch</dfn>
<tr>
<td>Value:
<td>normal | wider | narrower | ultra-condensed | extra-condensed |
condensed | semi-condensed | semi-expanded | expanded | extra-expanded
| ultra-expanded | 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>as specified
</table>
<p>The <a class=noxref href="#font-stretch"><span class=property>‘<code
class=property>font-stretch</code>’</span></a> property selects a
normal, condensed, or expanded face from a font family. Absolute keyword
values have the following ordering, from narrowest to widest:
<ul>
<li>Ultra Condensed
<li>Extra Condensed
<li>Condensed
<li>Semi Condensed
<li>Normal
<li>Semi Expanded
<li>Expanded
<li>Extra Expanded
<li>Ultra Expanded
</ul>
View remainder of file in raw view