FFFF csswg-drafts/css3-fonts/Fonts.html at cebea0ddef41df2e534ab8b7ea538c50db3b2f50 · w3c/csswg-drafts · GitHub
Skip to content

Fonts.html

Latest commit

 

History

History
3155 lines (2375 loc) · 105 KB

Fonts.html

File metadata and controls

3155 lines (2375 loc) · 105 KB
class=secno>3.5 </span>Small caps: the ‘<code
class=property>font-variant</code>’ property</a>
<li><a href="#font-size-the-font-size-property"><span class=secno>3.6
</span>Font size: the ‘<code class=property>font-size</code>’
property</a>
<li><a href="#relative-sizing-the-font-size-adjust-pro"><span
class=secno>3.7 </span>Relative sizing: the ‘<code
class=property>font-size-adjust</code>’ property</a>
<li><a href="#shorthand-font-property-the-font-propert"><span
class=secno>3.8 </span>Shorthand font property: the ‘<code
class=property>font</code>’ property</a>
</ul>
<li><a href="#font-resources"><span class=secno>4 </span>Font
resources</a>
<ul class=toc>
<li><a href="#the-font-face-rule"><span class=secno>4.1 </span>The
@font-face rule</a>
<li><a href="#font-family-the-font-family-descriptor"><span
class=secno>4.2 </span>Font family: the ‘<code
class=property>font-family</code>’ descriptor</a>
<li><a href="#font-reference-the-src-descriptor"><span class=secno>4.3
</span>Font reference: the ‘<code class=property>src</code>’
descriptor</a>
<li><a href="#font-property-descriptors-the-font-style"><span
class=secno>4.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-range-the-unicode-range-descri"><span
class=secno>4.5 </span>Character range: the ‘<code
class=property>unicode-range</code>’ descriptor</a>
</ul>
<li><a href="#font-matching-algorithm"><span class=secno>5 </span>Font
matching algorithm</a>
<li class=no-num><a
href="#appendix-a-mapping-font-features-to-css-">Appendix A: Mapping font
features to CSS properties</a>
<li class=no-num><a href="#appendix-b-font-licensing-issues">Appendix B:
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-background><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 authors failing to explicitly
indicate the encoding used by a document.
<h2 id=font-properties><span class=secno>3 </span>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-the-font-family-property><span class=secno>3.1
</span>Font family: the ‘<code class=property><a
href="#font-family0">font-family</a></code>’ property</h3>
<table class=propdef id=namefont-familyvalue-ltfamily-name-ltgen>
<tbody>
<tr>
<td>Name:
<td><dfn id=font-family>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-font-families><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>
A538
<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 script, 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-the-font-weight-property><span class=secno>3.2
</span>Font weight: the ‘<code class=property><a
href="#font-weight0">font-weight</a></code>’ property</h3>
<table class=propdef id=namefont-weightvaluenormal-bold-bolder-l>
<tbody>
<tr>
<td>Name:
<td><dfn id=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"><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-the-font-stretch-property><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-stretchvaluenormal-wider-narrow>
<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>
<p>The scale is relative, so a face with a font-stretch value higher in the
list above should never appear wider. When a face does not exist for a
given width, normal or condensed values map to a narrower face, otherwise
a wider face. Conversely, expanded values map to a wider face, otherwise a
narrower face. The figure below shows how the nine font-stretch property
settings affect font selection for font family containing a variety of
widths, grey indicates a width for which no face exists and a different
width is substituted:
<div class=figure><img alt="width mappings for a family with condensed,
normal and expanded faces" src=universwidths.png>
<p class=caption>Width mappings for a font family with condensed, normal
and expanded width faces
</div>
<p>Values of ‘<code class=property>wider</code>’ and ‘<code
class=property>narrower</code>’ indicate values relative to the width of
the parent element. Based on the inherited font-stretch value, the width
used is calculated using the chart below. Child elements inherit the
calculated width value, not a value of ‘<code
class=property>wider</code>’ or ‘<code
class=property>narrower</code>’.
<table class=data summary="wider/narrower mappings">
<thead>
<tr>
<th scope=col>Inherited value
<th scope=col>wider
<th>narrower
<tbody>
<tr>
<th>ultra-condensed
<td>normal
<td>condensed
<tr>
<th>extra-condensed
<td>normal
<td>condensed
View remainder of file in raw view