You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
5833 lines
200 KiB
5833 lines
200 KiB
<!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">
|
|
|
|
<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 }
|
|
|
|
div.featex {
|
|
width: 700px;
|
|
}
|
|
|
|
div.featex img {
|
|
margin: auto;
|
|
display: block;
|
|
}
|
|
|
|
</style>
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
|
|
type="text/css">
|
|
|
|
<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=w3c-working>W3C Working Draft 4 October 2011</h2>
|
|
|
|
<dl id=authors>
|
|
<dt>This version:</dt>
|
|
<!-- <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/2011/WD-css3-fonts-20111004/">http://www.w3.org/TR/2011/WD-css3-fonts-20111004/</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/2011/WD-css3-fonts-20110324/">http://www.w3.org/TR/2011/WD-css3-fonts-20110324/</a>
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2009/WD-css3-fonts-20090618/">http://www.w3.org/TR/2009/WD-css3-fonts-20090618/</a>
|
|
|
|
<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> © 2011 <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
|
|
href="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>
|
|
|
|
<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><em>This section describes the status of this document at the time of
|
|
its publication. Other documents may supersede this document. A list of
|
|
current W3C publications and the latest revision of this technical report
|
|
can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
|
|
index at http://www.w3.org/TR/.</a></em>
|
|
|
|
<p>Publication as a Working Draft does not imply endorsement by the W3C
|
|
Membership. This is a draft document and may be updated, replaced or
|
|
obsoleted by other documents at any time. It is inappropriate to cite this
|
|
document as other than 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">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="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
|
|
the <a href="http://www.w3.org/Style/">Style Activity</a>).
|
|
|
|
<p>This document was produced by a group operating under the <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
|
|
2004 W3C Patent Policy</a>. W3C maintains a <a
|
|
href="http://www.w3.org/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="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
|
|
Claim(s)</a> must disclose the information in accordance with <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
|
|
6 of the W3C Patent Policy</a>.</p>
|
|
<!--end-status-->
|
|
|
|
<h3 class="no-num no-toc" id=atrisk>Features at risk</h3>
|
|
|
|
<p>The following features are at risk and may be removed when exiting CR:
|
|
|
|
<ul>
|
|
<li>Description of the same origin restriction for fonts, if replaced by
|
|
similar mechanism.
|
|
</ul>
|
|
|
|
<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-background"><span class=secno>2 </span>Typography
|
|
Background</a>
|
|
|
|
<li><a href="#basic-font-props"><span class=secno>3 </span>Basic font
|
|
properties</a>
|
|
<ul class=toc>
|
|
<li><a href="#font-family-prop"><span class=secno>3.1 </span>Font
|
|
family: the font-family property</a>
|
|
<ul class=toc>
|
|
<li><a href="#generic-font-families"><span class=secno>3.1.1
|
|
</span>Generic font families</a>
|
|
</ul>
|
|
|
|
<li><a href="#font-weight-prop"><span class=secno>3.2 </span>Font
|
|
weight: the font-weight property</a>
|
|
|
|
<li><a href="#font-stretch-prop"><span class=secno>3.3 </span>Font
|
|
width: the font-stretch property</a>
|
|
|
|
<li><a href="#font-style-prop"><span class=secno>3.4 </span>Font style:
|
|
the font-style property</a>
|
|
|
|
<li><a href="#font-size-prop"><span class=secno>3.5 </span>Font size:
|
|
the font-size property</a>
|
|
|
|
<li><a href="#font-size-adjust-prop"><span class=secno>3.6
|
|
</span>Relative sizing: the font-size-adjust property</a>
|
|
|
|
<li><a href="#font-prop"><span class=secno>3.7 </span>Shorthand font
|
|
property: the font property</a>
|
|
|
|
<li><a href="#font-synthesis-prop"><span class=secno>3.8
|
|
</span>Controlling synthetic faces: the font-synthesis property</a>
|
|
</ul>
|
|
|
|
<li><a href="#font-resources"><span class=secno>4 </span>Font
|
|
resources</a>
|
|
<ul class=toc>
|
|
<li><a href="#font-face-rule"><span class=secno>4.1 </span>The
|
|
@font-face rule</a>
|
|
|
|
<li><a href="#font-family-desc"><span class=secno>4.2 </span>Font
|
|
family: the font-family descriptor</a>
|
|
|
|
<li><a href="#src-desc"><span class=secno>4.3 </span>Font reference: the
|
|
src descriptor</a>
|
|
|
|
<li><a href="#font-prop-desc"><span class=secno>4.4 </span>Font property
|
|
descriptors: the font-style, font-weight, font-stretch descriptors</a>
|
|
|
|
<li><a href="#unicode-range-desc"><span class=secno>4.5 </span>Character
|
|
range: the unicode-range descriptor</a>
|
|
|
|
<li><a href="#font-rend-desc"><span class=secno>4.6 </span>Font
|
|
features: the font-variant and font-feature-settings descriptors</a>
|
|
|
|
<li><a href="#font-face-loading"><span class=secno>4.7 </span>Font
|
|
loading guidelines</a>
|
|
|
|
<li><a href="#same-origin-restriction"><span class=secno>4.8
|
|
</span>Same-origin restriction for fonts</a>
|
|
<ul class=toc>
|
|
<li><a href="#default-same-origin-restriction"><span class=secno>4.8.1
|
|
</span>Default same-origin restriction</a>
|
|
|
|
<li><a href="#allowing-cross-origin-font-loading"><span
|
|
class=secno>4.8.2 </span>Allowing cross-origin font loading</a>
|
|
</ul>
|
|
</ul>
|
|
|
|
<li><a href="#font-matching-algorithm"><span class=secno>5 </span>Font
|
|
matching algorithm</a>
|
|
<ul class=toc>
|
|
<li><a href="#font-style-matching"><span class=secno>5.1 </span>Matching
|
|
font styles</a>
|
|
|
|
<li><a href="#char-handling-issues"><span class=secno>5.2
|
|
</span>Character handling issues</a>
|
|
|
|
<li><a href="#font-matching-changes"><span class=secno>5.3 </span>Font
|
|
matching changes since CSS 2.1</a>
|
|
</ul>
|
|
|
|
<li><a href="#font-rend-props"><span class=secno>6 </span>Font feature
|
|
properties</a>
|
|
<ul class=toc>
|
|
<li><a href="#glyph-selection-positioning"><span class=secno>6.1
|
|
</span>Glyph selection and positioning</a>
|
|
|
|
<li><a href="#language-specific-support"><span class=secno>6.2
|
|
</span>Language-specific display</a>
|
|
|
|
<li><a href="#font-kerning-prop"><span class=secno>6.3 </span>Kerning:
|
|
the font-kerning property</a>
|
|
|
|
<li><a href="#font-variant-position-prop"><span class=secno>6.4
|
|
</span>Subscript, superscript and ordinal forms: the
|
|
font-variant-position property</a>
|
|
|
|
<li><a href="#font-variant-ligatures-prop"><span class=secno>6.5
|
|
</span>Ligatures: the font-variant-ligatures property</a>
|
|
|
|
<li><a href="#font-variant-caps-prop"><span class=secno>6.6
|
|
</span>Capitalization: the font-variant-caps property</a>
|
|
|
|
<li><a href="#font-variant-numeric-prop"><span class=secno>6.7
|
|
</span>Numerical formatting: the font-variant-numeric property</a>
|
|
|
|
<li><a href="#font-variant-alternates-prop"><span class=secno>6.8
|
|
</span>Alternates and swashes: the font-variant-alternates property</a>
|
|
|
|
|
|
<li><a href="#font-feature-values"><span class=secno>6.9 </span>Defining
|
|
font specific alternates: the @font-feature-values rule</a>
|
|
|
|
<li><a href="#font-variant-east-asian-prop"><span class=secno>6.10
|
|
</span>East Asian text rendering: the font-variant-east-asian
|
|
property</a>
|
|
|
|
<li><a href="#font-variant-prop"><span class=secno>6.11 </span>Overall
|
|
shorthand for font rendering: the font-variant property</a>
|
|
|
|
<li><a href="#font-feature-settings-prop"><span class=secno>6.12
|
|
</span>Low-level font feature settings control: the
|
|
font-feature-settings property</a>
|
|
|
|
<li><a href="#font-language-override-prop"><span class=secno>6.13
|
|
</span>Font language override: the font-language-override property</a>
|
|
</ul>
|
|
|
|
<li><a href="#rendering-considerations"><span class=secno>7
|
|
</span>Resolving font feature settings </a>
|
|
|
|
<li class=no-num><a href="#platform-props-to-css">Appendix A: Mapping
|
|
platform font properties to CSS properties</a>
|
|
|
|
<li class=no-num><a href="#font-licensing">Appendix B: Font licensing
|
|
issues</a>
|
|
|
|
<li class=no-num><a href="#font-feature-values-DOM">Appendix C: DOM
|
|
Interfaces</a>
|
|
|
|
<li class=no-num><a href="#ch-ch-ch-changes">Changes</a>
|
|
<ul class=toc>
|
|
<li class=no-num><a href="#recent-changes"> Changes from the March 2011
|
|
CSS3 Fonts Working Draft</a>
|
|
</ul>
|
|
|
|
<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-references">Normative
|
|
References</a>
|
|
|
|
<li class=no-num><a href="#other-references">Other References</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 the simplest level it contains information that maps
|
|
character codes to shapes (called glyphs) that represent 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>The character map of a font defines the mapping of characters to glyphs
|
|
for that font. If a document contains characters not supported by the
|
|
character maps of explicitly specified fonts, a user agent may use a
|
|
system font fallback procedure to locate an appropriate font that does. If
|
|
no appropriate font can be found, some form of "missing glyph" character
|
|
will be rendered by the user agent. Fallback can occur because fonts are
|
|
not explicitly specified or because authors fail to explicitly indicate
|
|
the encoding used by a document.
|
|
|
|
<p>Although the character map of a font maps 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 typographic
|
|
features which can be specified this way 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-font-props><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-prop><span class=secno>3.1 </span>Font family: the <a
|
|
href="#propdef-font-family">font-family</a> property</h3>
|
|
|
|
<table class=propdef id=namefont-family>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=propdef-font-family>font-family</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>[[ <family-name> | <generic-family> ] [, <family-name> |
|
|
<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. Unlike other CSS properties, component values are a
|
|
comma-separated list indicating alternatives. 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 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>Consider the example below:
|
|
|
|
<div class=example>
|
|
<pre>body {
|
|
font-family: Helvetica, Verdana, sans-serif;
|
|
}</pre>
|
|
|
|
<p>If Helvetica is available it will be used when rendering. If neither
|
|
Helvetica nor Verdana is present, then the user-agent-defined sans serif
|
|
font will be used.</p>
|
|
</div>
|
|
|
|
<p>There are two types of font family names:
|
|
|
|
<dl>
|
|
<dt><family-name>
|
|
|
|
<dd>The name of a font family of choice such as Helvetica or Verdana in
|
|
the previous example.
|
|
|
|
<dt><generic-family>
|
|
|
|
<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 must not be
|
|
quoted. Authors are encouraged to append a generic font family as a last
|
|
alternative for improved robustness.
|
|
</dl>
|
|
|
|
<p>Font family names must either be given quoted as <a
|
|
href="//www.w3.org/TR/CSS21/syndata.html#strings">strings,</a> or unquoted
|
|
as a sequence of one or more <a
|
|
href="//www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers.</a>
|
|
This means most punctuation characters and digits at the start of each
|
|
token must be escaped in unquoted font family names.
|
|
|
|
<p>For example, the following declarations are invalid:
|
|
|
|
<pre>
|
|
font-family: Red/Black, sans-serif;
|
|
font-family: "Lucida" Grande, sans-serif;
|
|
font-family: Ahem!, sans-serif;
|
|
font-family: test@foo, sans-serif;
|
|
font-family: #POUND, sans-serif;
|
|
font-family: Hawaii 5-0, sans-serif;
|
|
</pre>
|
|
|
|
<p>If a sequence of identifiers is given as a font family name, the
|
|
computed value is the name converted to a string by joining all the
|
|
identifiers in the sequence by single spaces.
|
|
|
|
<p>To avoid mistakes in escaping, it is recommended to quote font family
|
|
names that contain white space, digits, or punctuation characters other
|
|
than hyphens:
|
|
|
|
<pre>
|
|
body { font-family: "New Century Schoolbook", serif }
|
|
|
|
<BODY STYLE="font-family: '21st Century', fantasy">
|
|
</pre>
|
|
|
|
<p>Font family <em>names</em> that happen to be the same as a keyword value
|
|
(‘<code class=property>inherit</code>’, ‘<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="#monospace">monospace</a></code>’, ‘<code class=property><a
|
|
href="#fantasy">fantasy</a></code>’, and ‘<code class=property><a
|
|
href="#cursive">cursive</a></code>’) must be quoted to prevent confusion
|
|
with the keywords with the same names. The keywords ‘<code
|
|
class=property>initial</code>’ and ‘<code
|
|
class=property>default</code>’ are reserved for future use and must also
|
|
be quoted when used as font names. UAs must not consider these keywords as
|
|
matching the ‘<code class=css><family-name></code>’ type.
|
|
|
|
<p>Some font formats allow fonts to carry multiple localizations of the
|
|
family name. User agents must recognize and correctly match all 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>
|
|
|
|
<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, Song or Kai
|
|
(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 script, although other names may be more familiar for
|
|
particular scripts, such as Gothic (Japanese), Hei (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.
|
|
|
|
<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-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
|
|
|
|
<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-stretch-prop><span class=secno>3.3 </span>Font width: the <a
|
|
href="#propdef-font-stretch">font-stretch</a> property</h3>
|
|
|
|
<table class=propdef id=namefont-stretch>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=propdef-font-stretch>font-stretch</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>normal | 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-prop"><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>
|
|
<!-- prop: font-style -->
|
|
|
|
<h3 id=font-style-prop><span class=secno>3.4 </span>Font style: the <a
|
|
href="#propdef-font-style">font-style</a> property</h3>
|
|
|
|
<table class=propdef id=namefont-style>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=propdef-font-style>font-style</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>normal | italic | oblique | 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-style-prop"><span
|
|
class=property>‘<code class=property>font-style</code>’</span></a>
|
|
property allows italic or oblique faces to be selected. Italic forms are
|
|
generally cursive in nature while oblique faces are typically sloped
|
|
versions of the regular face. Oblique faces can be simulated by
|
|
artificially sloping the glyphs of the regular face. Compare the
|
|
artificially sloped renderings of Palatino ‘<code
|
|
class=property>a</code>’ and Baskerville ‘<code
|
|
class=property>N</code>’ in grey with the actual italic versions:
|
|
|
|
<div class=figure><img alt="artificial sloping vs. real italics"
|
|
src=realvsfakeitalics.png>
|
|
<p class=caption>Artificial sloping versus real italics
|
|
</div>
|
|
|
|
<p>A value of ‘<code class=property>normal</code>’ selects a face that
|
|
is classified as ‘<code class=property>normal</code>’, while ‘<code
|
|
class=property>oblique</code>’ selects a font that is labeled ‘<code
|
|
class=property>oblique</code>’. A value of ‘<code
|
|
class=property>italic</code>’ selects a font that is labeled ‘<code
|
|
class=property>italic</code>’, or, if that is not available, one labeled
|
|
‘<code class=property>oblique</code>’. If no italic or oblique faces
|
|
is available, an oblique face can by synthesized by rendering the normal
|
|
face with a sloping transformation applied.
|
|
|
|
<p>Many scripts lack the tradition of mixing a cursive form within text
|
|
rendered with a normal face. Chinese, Japanese and Korean fonts almost
|
|
always lack italic or oblique faces. Fonts that support a mixture of
|
|
scripts will sometimes omit specific scripts such as Arabic from the set
|
|
of glyphs supported in the italic face. User agents should be careful
|
|
about making character map assumptions across faces.</p>
|
|
<!-- prop: font-size -->
|
|
|
|
<h3 id=font-size-prop><span class=secno>3.5 </span>Font size: the <a
|
|
href="#propdef-font-size">font-size</a> property</h3>
|
|
|
|
<table class=propdef id=namefont-size>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=propdef-font-size>font-size</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td><absolute-size> | <relative-size> | <length> |
|
|
<percentage> | inherit
|
|
|
|
<tr>
|
|
<td>Initial:
|
|
|
|
<td>medium
|
|
|
|
<tr>
|
|
<td>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<td>Percentages:
|
|
|
|
<td>refer to parent element's font size
|
|
|
|
<tr>
|
|
<td>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td>Computed value:
|
|
|
|
<td>absolute length
|
|
</table>
|
|
|
|
<p>This property indicates the desired height of glyphs from the font. For
|
|
scalable fonts, the font-size is a scale factor applied to the EM unit of
|
|
the font. (Note that certain glyphs may bleed outside their EM box.) For
|
|
non-scalable fonts, the font-size is converted into absolute units and
|
|
matched against the declared font-size of the font, using the same
|
|
absolute coordinate space for both of the matched values. Values have the
|
|
following meanings:
|
|
|
|
<dl>
|
|
<dt><a name=x18><span class=index-def id=ltabsolute-sizegt
|
|
title="<absolute-size>::definition of">
|
|
<strong><absolute-size></strong></span></a>
|
|
|
|
<dd> An <a class=value-def
|
|
name=value-def-absolute-size><absolute-size></a> keyword refers to
|
|
an entry in a table of font sizes computed and kept by the user agent.
|
|
Possible values are:
|
|
<p> [ xx-small | x-small | small | medium | large | x-large | xx-large ]</p>
|
|
|
|
<dt><a name=x19><span class=index-def id=ltrelative-sizegt
|
|
title="<relative-size>::definition
|
|
of"><strong><relative-size></strong></span></a>
|
|
|
|
<dd> A <a class=value-def
|
|
name=value-def-relative-size><relative-size></a> keyword is
|
|
interpreted relative to the table of font sizes and the font size of the
|
|
parent element. Possible values are:
|
|
<p> [ larger | smaller ]
|
|
|
|
<p> For example, if the parent element has a font size of ‘<code
|
|
class=property>medium</code>’, a value of ‘<code
|
|
class=property>larger</code>’ will make the font size of the current
|
|
element be ‘<code class=property>large</code>’. If the parent
|
|
element's size is not close to a table entry, the user agent is free to
|
|
interpolate between table entries or round off to the closest one. The
|
|
user agent may have to extrapolate table values if the numerical value
|
|
goes beyond the keywords.
|
|
|
|
<dt><span class=index-inst id=ltlengthgt
|
|
title="<length>"><length></span>
|
|
|
|
<dd>A length value specifies an absolute font size (that is independent of
|
|
the user agent's font table). Negative lengths are illegal.
|
|
|
|
<dt><span class=index-inst id=ltpercentagegt
|
|
title="<percentage>"><percentage> </span>
|
|
|
|
<dd>A percentage value specifies an absolute font size relative to the
|
|
parent element's font size. Use of percentage values, or values in
|
|
‘<code class=property>em</code>’s, leads to more robust and
|
|
cascadable style sheets.
|
|
</dl>
|
|
|
|
<p>The following table provides user agent's guideline for the
|
|
absolute-size scaling factor and their mapping to XHTML heading and
|
|
absolute font-sizes. The ‘<code class=property>medium</code>’ value is
|
|
used as the reference middle value. The user agent may fine-tune these
|
|
values for different fonts or different types of display devices.
|
|
|
|
<table class=data>
|
|
<thead>
|
|
<tr>
|
|
<th>CSS absolute-size values
|
|
|
|
<th>xx-small
|
|
|
|
<th>x-small
|
|
|
|
<th>small
|
|
|
|
<th>medium
|
|
|
|
<th>large
|
|
|
|
<th>x-large
|
|
|
|
<th>xx-large
|
|
|
|
<th>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th>scaling factor
|
|
|
|
<td>3/5
|
|
|
|
<td>3/4
|
|
|
|
<td>8/9
|
|
|
|
<td>1
|
|
|
|
<td>6/5
|
|
|
|
<td>3/2
|
|
|
|
<td>2/1
|
|
|
|
<td>3/1
|
|
|
|
<tr>
|
|
<th>XHTML headings
|
|
|
|
<td>h6
|
|
|
|
<td>
|
|
|
|
<td>h5
|
|
|
|
<td>h4
|
|
|
|
<td>h3
|
|
|
|
<td>h2
|
|
|
|
<td>h1
|
|
|
|
<td>
|
|
|
|
<tr>
|
|
<th>XHTML font sizes
|
|
|
|
<td>1
|
|
|
|
<td>
|
|
|
|
<td>2
|
|
|
|
<td>3
|
|
|
|
<td>4
|
|
|
|
<td>5
|
|
|
|
<td>6
|
|
|
|
<td>7
|
|
</table>
|
|
|
|
<p class=note><em><strong>Note 1.</strong> To preserve readability, an UA
|
|
applying these guidelines should nevertheless avoid creating font-size
|
|
resulting in less than 9 pixels per EM unit on a computer display .</em>
|
|
|
|
<p class=note><em><strong>Note 2.</strong> In CSS1, the suggested scaling
|
|
factor between adjacent indexes was 1.5 which user experience proved to be
|
|
too large. In CSS2, the suggested scaling factor for computer screen
|
|
between adjacent indexes was 1.2 which still created issues for the small
|
|
sizes. The new scaling factor varies between each index to provide a
|
|
better readability.</em>
|
|
|
|
<p>The actual value [link to Cascading module] of this property may differ
|
|
from the computed value due a numerical value on ‘<code
|
|
class=property><a
|
|
href="#propdef-font-size-adjust">font-size-adjust</a></code>’ and the
|
|
unavailability of certain font sizes.
|
|
|
|
<p>Child elements inherit the computed <a class=noxref
|
|
href="#font-size-prop"><span class=property>‘<code
|
|
class=property>font-size</code>’</span></a> value (otherwise, the effect
|
|
of <a class=noxref href="#font-size-adjust-prop"><span
|
|
class=property>‘<code
|
|
class=property>font-size-adjust</code>’</span></a> would compound).
|
|
|
|
<div class=example>
|
|
<p style=display:none>Example(s):
|
|
|
|
<p>
|
|
|
|
<pre>p { font-size: 12pt; }
|
|
blockquote { font-size: larger }
|
|
em { font-size: 150% }
|
|
em { font-size: 1.5em }
|
|
</pre>
|
|
</div>
|
|
<!-- prop: font-size-adjust -->
|
|
|
|
<h3 id=font-size-adjust-prop><span class=secno>3.6 </span>Relative sizing:
|
|
the <a href="#propdef-font-size-adjust">font-size-adjust</a> property</h3>
|
|
|
|
<table class=propdef id=namefont-size-adjust>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=propdef-font-size-adjust>font-size-adjust</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td><number> | none | inherit
|
|
|
|
<tr>
|
|
<td>Initial:
|
|
|
|
<td>none
|
|
|
|
<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>For any given font size, the apparent size and legibility of text varies
|
|
across fonts. For scripts such as Latin or Cyrillic that distinguish
|
|
between upper and lowercase letters, the relative height of lowercase
|
|
letters compared to their uppercase counterparts is a determining factor
|
|
of legibility. This is commonly referred to as the <a class=index-def
|
|
href="#aspect" id=aspect0 title="aspect value"><dfn id=aspect>aspect
|
|
value</dfn></a>. Precisely defined, it is equal to the x-height of a font
|
|
divided by the font size.
|
|
|
|
<p>In situations where font fallback occurs, fallback fonts may not share
|
|
the same aspect ratio as the desired font family and will thus appear less
|
|
readable. The font-size-adjust property is a way to preserve the
|
|
readability of text when font fallback occurs. It does this by adjusting
|
|
the font-size so that the x-height is the same regardless of the font
|
|
used.
|
|
|
|
<div class=example>
|
|
<p>The style defined below defines Verdana as the desired font family, but
|
|
if Verdana is not available Futura or Times will be used.</p>
|
|
|
|
<pre>p {
|
|
font-family: Verdana, Futura, Times;
|
|
}
|
|
|
|
<p>Lorem ipsum dolor sit amet, ...</p>
|
|
</pre>
|
|
|
|
<p>Verdana has a relatively high aspect ratio, lowercase letters are
|
|
relatively tall compared to uppercase letters, so at small sizes text
|
|
appears legible. Times has a lower aspect ratio and so if fallback
|
|
occurs, the text will be less legible at small sizes than Verdana.</p>
|
|
</div>
|
|
|
|
<p>How text rendered in each of these fonts compares is shown below, the
|
|
columns show text rendered in Verdana, Futura and Times. The same
|
|
font-size value is used across cells within each row and red lines are
|
|
included to show the differences in x-height. In the upper half each row
|
|
is rendered in the same font-size value. The same is true for the lower
|
|
half but in this half the font-size-adjust property is also set so that
|
|
the actual font size is adjusted to preserve the x-height across each row.
|
|
Note how small text remains relatively legible across each row in the
|
|
lower half.
|
|
|
|
<div class=figure><img alt="text with and without font-size-adjust"
|
|
src=fontsizeadjust.png>
|
|
<p class=caption>Text with and without the use of font-size-adjust
|
|
</div>
|
|
|
|
<p>This property allows authors to specify an aspect value for an element
|
|
that will effectively preserve the x-height of the first choice font,
|
|
whether it is substituted or not. Values have the following meanings:
|
|
|
|
<dl>
|
|
<dt><strong>none</strong>
|
|
|
|
<dd>Do not preserve the font's x-height.
|
|
|
|
<dt><span class=index-inst id=ltnumbergt
|
|
title="<number>"><number></span>
|
|
|
|
<dd>Specifies the aspect value used in the calculation below to calculate
|
|
the adjusted font size:
|
|
<pre>c = ( a / a' ) s
|
|
</pre>
|
|
|
|
<p>where:</p>
|
|
|
|
<pre>s = font-size value
|
|
a = aspect value as specified by the font-size-adjust property
|
|
a' = aspect value of actual font
|
|
c = adjusted font-size to use
|
|
</pre>
|
|
|
|
<p>This value applies to any font that is selected but in typical usage
|
|
it should be based on the aspect value of the first font in the
|
|
font-family list. If this is specified accurately, the <tt>(a/a')</tt>
|
|
term in the formula above is effectively 1 for the first font and no
|
|
adjustment occurs. If the value is specified inaccurately, text rendered
|
|
using the first font in the family list will display differently in
|
|
older user agents that don't support font-size-adjust.</p>
|
|
</dl>
|
|
|
|
<p>Authors can calculate the aspect value for a given font by comparing
|
|
spans with the same content but different font-size-adjust properties. If
|
|
the same font-size is used, the spans will match when the font-size-adjust
|
|
value is accurate for the given font.
|
|
|
|
<div class=example>
|
|
<p>Two spans with borders are used to determine the aspect value of a
|
|
font. The font-size is the same for both spans but the font-size-adjust
|
|
property is specified only for the right span. Starting with a value of
|
|
0.5, the aspect value can be adjusted until the borders around the two
|
|
letters line up.</p>
|
|
|
|
<pre>p {
|
|
font-family: Futura;
|
|
font-size: 500px;
|
|
}
|
|
|
|
span {
|
|
border: solid 1px red;
|
|
}
|
|
|
|
.adjust {
|
|
font-size-adjust: 0.5;
|
|
}
|
|
|
|
<p><span>b</span><span class="adjust">b</span></p>
|
|
</pre>
|
|
|
|
<div class=figure><img alt="Futura with an aspect value of 0.5"
|
|
src=beforefontsizeadjust.png>
|
|
<p class=caption>Futura with an aspect value of 0.5
|
|
</div>
|
|
|
|
<p>The box on the right is a bit bigger than the one on the left, so the
|
|
aspect value of this font is something less than 0.5. Adjust the value
|
|
until the boxes align.</p>
|
|
</div>
|
|
<!-- Hmm, so what should happen for scripts with no upper/lowercase distinction (e.g. CJK, Arabic, Hebrew)? -->
|
|
<!-- prop: font -->
|
|
<!-- jtdfix, crap, preprocessor is inserting links to descriptors rather than properties. bert, make it stop... -->
|
|
|
|
<h3 id=font-prop><span class=secno>3.7 </span>Shorthand font property: the
|
|
<a href="#propdef-font">font</a> property</h3>
|
|
|
|
<table class=propdef id=namefont>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=propdef-font>font</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>[ [ <‘<code class=property><a
|
|
href="#descdef-font-style">font-style</a></code>’> ||
|
|
<font-variant-css21> || <‘<code class=property><a
|
|
href="#descdef-font-weight">font-weight</a></code>’> ]? <‘<code
|
|
class=property><a href="#propdef-font-size">font-size</a></code>’> [
|
|
/ <‘<code class=property>line-height</code>’> ]? <‘<code
|
|
class=property><a
|
|
href="#descdef-font-family">font-family</a></code>’> ] | caption |
|
|
icon | menu | message-box | small-caption | status-bar | inherit
|
|
|
|
<tr>
|
|
<td>Initial:
|
|
|
|
<td>see individual properties
|
|
|
|
<tr>
|
|
<td>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<td>Percentages:
|
|
|
|
<td>see individual properties
|
|
|
|
<tr>
|
|
<td>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td>Computed value:
|
|
|
|
<td>see individual properties
|
|
</table>
|
|
|
|
<p>The <span class=property>‘<code class=property><a
|
|
href="#propdef-font">font</a></code>’</span> property is, except as
|
|
described below, a shorthand property for setting ‘<code
|
|
class=property><a href="#descdef-font-style">font-style</a></code>’,
|
|
<span class=property>‘<code class=property><a
|
|
href="#propdef-font-variant">font-variant</a></code>’</span>, <span
|
|
class=property>‘<code class=property><a
|
|
href="#descdef-font-weight">font-weight</a></code>’</span>, <span
|
|
class=property>‘<code class=property><a
|
|
href="#propdef-font-size">font-size</a></code>’</span>, ‘<code
|
|
class=property>line-height</code>’, <span class=property>‘<code
|
|
class=property><a
|
|
href="#descdef-font-family">font-family</a></code>’</span> at the same
|
|
place in the stylesheet. Values for the <span class=property>‘<code
|
|
class=property><a
|
|
href="#propdef-font-variant">font-variant</a></code>’</span> property
|
|
may also be included but only those supported in CSS 2.1, none of the
|
|
font-variant values added in this specification can be used in the <span
|
|
class=property>‘<code class=property><a
|
|
href="#propdef-font">font</a></code>’</span> shorthand:
|
|
|
|
<pre
|
|
class=prod><dfn id=ltfont-variant-css21gt><var><font-variant-css21></var></dfn> = [normal | small-caps]</pre>
|
|
|
|
<p>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 <span
|
|
class=property>‘<code class=property><a
|
|
href="#descdef-font-stretch">font-stretch</a></code>’</span>, <span
|
|
class=property>‘<code class=property><a
|
|
href="#propdef-font-size-adjust">font-size-adjust</a></code>’</span>,
|
|
<span class=property>‘<code class=property><a
|
|
href="#propdef-font-kerning">font-kerning</a></code>’</span> and all
|
|
font feature properties. Then, those properties that are given explicit
|
|
values in the <span class=property>‘<code class=property><a
|
|
href="#propdef-font">font</a></code>’</span> 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 <span class=property>‘<code class=property><a
|
|
href="#descdef-font-stretch">font-stretch</a></code>’</span> and <span
|
|
class=property>‘<code class=property><a
|
|
href="#propdef-font-size-adjust">font-size-adjust</a></code>’</span> to
|
|
other than their initial values using the <span class=property>‘<code
|
|
class=property><a href="#propdef-font">font</a></code>’</span> shorthand
|
|
property; instead, set the individual properties.
|
|
|
|
<div class=example>
|
|
<p style=display:none>Example(s):
|
|
|
|
<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 Neue", serif; font-stretch: condensed }
|
|
</pre>
|
|
|
|
<p> In the second rule, the font size percentage value (‘<code
|
|
class=css>80%</code>’) refers to the font size of the parent element.
|
|
In the third rule, the line height percentage (‘<code
|
|
class=css>110%</code>’) refers to the font size of the element itself.
|
|
|
|
<p>The first three rules do not specify the <span class=property>‘<code
|
|
class=property><a
|
|
href="#propdef-font-variant">font-variant</a></code>’</span> and <span
|
|
class=property>‘<code class=property><a
|
|
href="#descdef-font-weight">font-weight</a></code>’</span> explicitly,
|
|
so these properties receive their initial values (‘<code
|
|
class=property>normal</code>’). Notice that the font family name "new
|
|
century schoolbook", which contains spaces, is enclosed in quotes. The
|
|
fourth rule sets the <span class=property>‘<code class=property><a
|
|
href="#descdef-font-weight">font-weight</a></code>’</span> to ‘<code
|
|
class=property>bold</code>’, the <span class=property>‘<code
|
|
class=property><a
|
|
href="#descdef-font-style">font-style</a></code>’</span> to ‘<code
|
|
class=property>italic</code>’, and implicitly sets <span
|
|
class=property>‘<code class=property><a
|
|
href="#propdef-font-variant">font-variant</a></code>’</span> to
|
|
‘<code class=property>normal</code>’.
|
|
|
|
<p> The fifth rule sets the <span class=property>‘<code
|
|
class=property><a
|
|
href="#propdef-font-variant">font-variant</a></code>’</span> (‘<code
|
|
class=property><a href="#small-caps">small-caps</a></code>’), the <span
|
|
class=property>‘<code class=property><a
|
|
href="#propdef-font-size">font-size</a></code>’</span> (120% of the
|
|
parent's font size), the <span class=property>‘<code
|
|
class=property>line-height</code>’</span> (120% of the font size) and
|
|
the <span class=property>‘<code class=property><a
|
|
href="#descdef-font-family">font-family</a></code>’</span> (‘<code
|
|
class=property><a href="#fantasy">fantasy</a></code>’). It follows that
|
|
the keyword ‘<code class=property>normal</code>’ applies to the two
|
|
remaining properties: <span class=property>‘<code class=property><a
|
|
href="#descdef-font-style">font-style</a></code>’</span> and <span
|
|
class=property>‘<code class=property><a
|
|
href="#descdef-font-weight">font-weight</a></code>’</span>.
|
|
|
|
<p>The sixth fifth rule sets the <span class=property>‘<code
|
|
class=property><a
|
|
href="#descdef-font-style">font-style</a></code>’</span>, <span
|
|
class=property>‘<code class=property><a
|
|
href="#propdef-font-size">font-size</a></code>’</span>, and <span
|
|
class=property>‘<code class=property><a
|
|
href="#descdef-font-family">font-family</a></code>’</span>, the other
|
|
font properties being set to their initial values. It then sets <span
|
|
class=property>‘<code class=property><a
|
|
href="#descdef-font-stretch">font-stretch</a></code>’</span> to
|
|
‘<code class=property>condensed</code>’ since that property cannot be
|
|
set to that value using the <span class=property>‘<code
|
|
class=property><a href="#propdef-font">font</a></code>’</span>
|
|
shorthand property.
|
|
</div>
|
|
|
|
<p>The following values refer to system fonts:
|
|
|
|
<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 ‘<code
|
|
class=property>caption</code>’ font might be used for the ‘<code
|
|
class=property>smallcaption</code>’ 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>That is why this property is "almost" a shorthand property: system fonts
|
|
can only be specified with this property, not with <span
|
|
class=property>‘<code class=property><a
|
|
href="#descdef-font-family">font-family</a></code>’</span> itself, so
|
|
<span class=property>‘<code class=property><a
|
|
href="#propdef-font">font</a></code>’</span> allows authors to do more
|
|
than the sum of its subproperties. However, the individual properties such
|
|
as <span class=property>‘<code class=property><a
|
|
href="#descdef-font-weight">font-weight</a></code>’</span> are still
|
|
given values taken from the system font, which can be independently
|
|
varied.
|
|
|
|
<div class=example>
|
|
<p style=display:none>Example(s):
|
|
|
|
<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 <span class=property>‘<code class=property><a
|
|
href="#propdef-font">font</a></code>’</span> 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>
|
|
<!-- prop: font-synthesis -->
|
|
|
|
<h3 id=font-synthesis-prop><span class=secno>3.8 </span>Controlling
|
|
synthetic faces: the <a href="#propdef-font-synthesis">font-synthesis</a>
|
|
property</h3>
|
|
|
|
<table class=propdef id=namefont-synthesis>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=propdef-font-synthesis>font-synthesis</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>none | [ weight || style ]
|
|
|
|
<tr>
|
|
<td>Initial:
|
|
|
|
<td>weight style
|
|
|
|
<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 controls whether user agents are allowed to synthesize
|
|
bold or oblique font faces when a font family lacks bold or italic faces.
|
|
If ‘<code class=property>weight</code>’ is not specified, user agents
|
|
must not synthesize bold faces and if ‘<code
|
|
class=property>style</code>’ is not specified user agents must not
|
|
synthesize italic faces. A value of ‘<code class=property>none</code>’
|
|
disallows all synthetic faces.
|
|
|
|
<div class=example>
|
|
<p>The style rule below disables the use of synthetically obliqued Arabic:</p>
|
|
|
|
<pre>*:lang(ar) { font-synthesis: none; }
|
|
</pre>
|
|
</div>
|
|
|
|
<h2 id=font-resources><span class=secno>4 </span>Font resources</h2>
|
|
|
|
<h3 id=font-face-rule><span class=secno>4.1 </span>The @font-face rule</h3>
|
|
|
|
<p>The @font-face rule allows for linking to fonts that are automatically
|
|
activated when needed. This allows authors to select a font that closely
|
|
matches the design goals for a given page rather than limiting the font
|
|
choice to a set of fonts available on all platforms. A set of font
|
|
descriptors define the location of a font resource, either locally or
|
|
externally, along with the style characteristics of an individual face.
|
|
Multiple @font-face rules can be used to construct font families with a
|
|
variety of faces. Using CSS font matching rules, a user agent can
|
|
selectively download only those faces that are needed for a given piece of
|
|
text.
|
|
|
|
<p>The general form of an <span class=index-def id=font-face
|
|
title="@font-face"><em>@font-face</em></span> <span class=index-inst
|
|
id=at-rule title=at-rules>at-rule</span> is:
|
|
|
|
<pre>
|
|
@font-face { <span class=value-inst-font-description><font-description></span> }
|
|
</pre>
|
|
|
|
<p>where <span class=index-def id=ltfont-descriptiongt
|
|
title="<font-description>::definition of"><a
|
|
name=value-def-font-description><font-description></a></span> has
|
|
the form:
|
|
|
|
<pre>
|
|
descriptor: value;
|
|
descriptor: value;
|
|
[...]
|
|
descriptor: value;
|
|
</pre>
|
|
|
|
<p>Each <span class=index-inst id=font-face0
|
|
title="@font-face">@font-face</span> rule specifies a value for every font
|
|
descriptor, either implicitly or explicitly. Those not given explicit
|
|
values in the rule take the initial value listed with each descriptor in
|
|
this specification. These descriptors apply solely within the context of
|
|
the @font-face rule in which they are defined, and do not apply to
|
|
document language elements. There is no notion of which elements the
|
|
descriptors apply to or whether the values are inherited by child
|
|
elements. When a given descriptor occurs multiple times in a given
|
|
@font-face rule, only the last specified value is used, all prior values
|
|
for that descriptor are ignored.
|
|
|
|
<div class=example>
|
|
<p>To use a downloadable font called Gentium:</p>
|
|
|
|
<pre>
|
|
@font-face {
|
|
font-family: Gentium;
|
|
src: url(http://example.com/fonts/Gentium.ttf);
|
|
}
|
|
|
|
p { font-family: Gentium, serif; }
|
|
</pre>
|
|
|
|
<p>The user agent will download Gentium and use it when rendering text
|
|
within paragraph elements. If for some reason the site serving the font
|
|
is unavailable, the default serif font will be used.</p>
|
|
</div>
|
|
|
|
<p>A given set of @font-face rules define a set of fonts available to
|
|
containing documents. Multiple rules can be used to define a family with a
|
|
large set of faces. When font matching is done fonts defined using these
|
|
rules are considered before other available fonts on a system.
|
|
|
|
<p>Downloaded fonts are only available to documents that reference them,
|
|
the process of activating these fonts should not make them available to
|
|
other applications or to documents that don't directly link to the same
|
|
font. User agent implementers might consider it convenient to use
|
|
downloaded fonts when rendering characters in other documents for which no
|
|
other available font exists as part of the system font fallback procedure.
|
|
This would cause a security leak since the contents of one page would be
|
|
able to affect other pages, something an attacker could use as an attack
|
|
vector. These restrictions do not affect caching behavior, fonts are
|
|
cached the same way other web resources are cached.
|
|
|
|
<p>User agents which do not understand the @font-face rule encounter the
|
|
opening curly bracket and ignore forward until the closing curly bracket.
|
|
This at-rule conforms with the forward-compatible parsing requirement of
|
|
CSS, parsers may ignore these rules without error. Any descriptors that
|
|
are not recognized or implemented by a given user agent must be ignored.
|
|
@font-face rules require a font-family and src descriptor, if either of
|
|
these are missing the @font-face must be ignored.
|
|
|
|
<p>In cases where user agents have limited platform resources or implement
|
|
the ability to disable downloadable font resources, @font-face rules must
|
|
simply be ignored; the behavior of individual descriptors as defined in
|
|
this specification should not be altered.
|
|
|
|
<h3 id=font-family-desc><span class=secno>4.2 </span>Font family: the <a
|
|
href="#descdef-font-family">font-family</a> descriptor</h3>
|
|
|
|
<table class=descdef>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=descdef-font-family>font-family</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td><family-name>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>N/A
|
|
</table>
|
|
|
|
<p>This descriptor defines the font family name that will be used in all
|
|
CSS font family name matching, overriding font family names contained in
|
|
the underlying font data. If the font family name is the same as a font
|
|
family available in a given user's environment, it effectively hides the
|
|
underlying font for documents that use the stylesheet. This permits a web
|
|
author to freely choose font-family names without worrying about conflicts
|
|
with font family names present in a given user's environment. Errors
|
|
loading font data do not affect font name matching behavior. User agents
|
|
that apply platform font aliasing rules to font family names defined via
|
|
@font-face rules are considered non-conformant.
|
|
|
|
<h3 id=src-desc><span class=secno>4.3 </span>Font reference: the <a
|
|
href="#descdef-src">src</a> descriptor</h3>
|
|
|
|
<table class=descdef>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=descdef-src>src</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>[ <uri> [format(<string> [, <string>]*)] |
|
|
<font-face-name> ] [, <uri> [format(<string> [,
|
|
<string>]*)] | <font-face-name> ]*
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>N/A
|
|
</table>
|
|
|
|
<p>This descriptor specifies the resource containing font data. It is
|
|
required, whether the font is downloadable or locally installed. Its value
|
|
is a prioritized, comma-separated list of external references or locally
|
|
installed font face names. When a font is needed the user agent iterates
|
|
over the set of references listed, using the first one it can successfully
|
|
activate. Fonts containing invalid data or local font faces that are not
|
|
found are ignored and the user agent loads the next font in the list
|
|
(platform substitutions for a given font must not be used).
|
|
|
|
<p>As with other URIs in CSS, the URI may be partial, in which case it is
|
|
resolved relative to the location of the style sheet containing the <span
|
|
class=index-inst id=font-face1 title="@font-face">@font-face</span> rule.
|
|
In the case of SVG fonts, the URL points to an element within a document
|
|
containing SVG font definitions. If the element reference is omitted, a
|
|
reference to the first defined font is implied.
|
|
|
|
<pre>
|
|
src: url(fonts/simple.ttf); /* load simple.ttf relative to stylesheet location */
|
|
src: url(/fonts/simple.ttf); /* load simple.ttf from absolute location */
|
|
src: url(fonts.svg#simple); /* load SVG font with id 'simple' */
|
|
</pre>
|
|
|
|
<p>External references consist of a URI, followed by an optional hint
|
|
describing the format of the font resource referenced by that URI. The
|
|
format hint contains a comma-separated list of format strings that denote
|
|
well-known font formats. Conformant user agents must skip downloading a
|
|
font resource if the format hints indicate only unsupported or unknown
|
|
font formats. If no format hints are supplied, the user agent should
|
|
download the font resource.
|
|
|
|
<pre>
|
|
/* load WOFF font if possible, otherwise use OpenType font */
|
|
@font-face {
|
|
font-family: bodytext;
|
|
src: url(ideal-sans-serif.woff) format("woff"),
|
|
url(basic-sans-serif.ttf) format("opentype");
|
|
}
|
|
</pre>
|
|
|
|
<p>Format strings defined by this specification:
|
|
|
|
<table class=data id=fontformats>
|
|
<thead>
|
|
<tr>
|
|
<th>String
|
|
|
|
<th>Font Format
|
|
|
|
<th>Common extensions
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th>"woff"
|
|
|
|
<td>WOFF (Web Open Font Format)
|
|
|
|
<td>.woff
|
|
|
|
<tr>
|
|
<th>"truetype"
|
|
|
|
<td>TrueType
|
|
|
|
<td>.ttf
|
|
|
|
<tr>
|
|
<th>"opentype"
|
|
|
|
<td>OpenType
|
|
|
|
<td>.ttf, .otf
|
|
|
|
<tr>
|
|
<th>"embedded-opentype"
|
|
|
|
<td>Embedded OpenType
|
|
|
|
<td>.eot
|
|
|
|
<tr>
|
|
<th>"svg"
|
|
|
|
<td>SVG Font
|
|
|
|
<td>.svg, .svgz
|
|
</table>
|
|
|
|
<p>Given the overlap in common usage between TrueType and OpenType, the
|
|
format hints "truetype" and "opentype" must be considered as synonymous; a
|
|
format hint of "opentype" does not imply that the font contains Postscript
|
|
CFF style glyph data or that it contains OpenType layout information (see
|
|
Appendix A for more background on this).
|
|
|
|
<p>When authors would prefer to use a locally available copy of a given
|
|
font and download it if it's not, local() can be used. The locally
|
|
installed <span class=index-def id=ltfont-face-namegt
|
|
title="<font-face-name>::definition of"><a
|
|
name=value-def-font-face-name><font-face-name></a></span> is a
|
|
format-specific string that uniquely identifies a single font face within
|
|
a larger family. The syntax for a <font-face-name> is a unique font
|
|
face name enclosed by "local(" and ")".
|
|
|
|
<pre>
|
|
/* regular face of Gentium */
|
|
@font-face {
|
|
font-family: MyGentium;
|
|
src: local(Gentium), /* use locally available Gentium */
|
|
url(Gentium.ttf); /* otherwise, download it */
|
|
}
|
|
</pre>
|
|
|
|
<p>The name can optionally be enclosed in quotes. For OpenType and TrueType
|
|
fonts, this string is used to match only the Postscript name or the full
|
|
font name in the name table of locally available fonts. Which is used
|
|
varies by platform and font, so authors should include both of these names
|
|
to assure proper matching across platforms.
|
|
|
|
<pre>
|
|
/* bold face of Gentium */
|
|
@font-face {
|
|
font-family: MyGentium;
|
|
src: local(Gentium Bold), /* full font name */
|
|
local(Gentium-Bold), /* Postscript name */
|
|
url(GentiumBold.ttf); /* otherwise, download it */
|
|
font-weight: bold;
|
|
}
|
|
</pre>
|
|
|
|
<p>Just as a @font-face rule specifies the characteristics of a single font
|
|
within a family, the unique name used with local() specifies a single
|
|
font, not an entire font family. Defined in terms of OpenType font data,
|
|
the Postscript name is found in the font's <a
|
|
href="http://www.microsoft.com/typography/otspec/name.htm">name table</a>,
|
|
in the name record with nameID = 6 (see <a href="#OPENTYPE"
|
|
rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> for more details). The
|
|
Postscript name is the commonly used key for all fonts on OSX and for
|
|
Postscript CFF fonts under Windows. The full font name (nameID = 4) is
|
|
used as a unique key for fonts with TrueType glyphs on Windows.
|
|
|
|
<p>For OpenType fonts with multiple localizations of the full font name,
|
|
the US English version is used (language ID = 0x409 for Windows and
|
|
language ID = 0 for Macintosh) or the first localization when a US English
|
|
full font name is not available (the OpenType specification recommends
|
|
that <a href="http://www.microsoft.com/typography/otspec/recom.htm">all
|
|
fonts minimally include US English names</a>). User agents that also match
|
|
other full font names, e.g. matching the Dutch name when the current
|
|
system locale is set to Dutch, are considered non-conformant. This is done
|
|
not to prefer English but to avoid matching inconsistencies across font
|
|
versions and OS localizations, since font style names (e.g. "Bold") are
|
|
frequently localized into many languages and the set of localizations
|
|
available varies widely across platform and font version. User agents that
|
|
match a concatenation of family name (nameID = 1) with style name (nameID
|
|
= 2) are considered non-conformant.
|
|
|
|
<p>This also allows for referencing faces that belong to larger families
|
|
that cannot otherwise be referenced.
|
|
|
|
<div class=example>
|
|
<p>Use a local font or reference an SVG font in another document:</p>
|
|
|
|
<pre>
|
|
@font-face {
|
|
font-family: Headline;
|
|
src: local(Futura-Medium),
|
|
url(fonts.svg#MyGeometricModern) format("svg");
|
|
}
|
|
</pre>
|
|
|
|
<p>Create an alias for local Japanese fonts on different platforms:</p>
|
|
|
|
<pre>
|
|
@font-face {
|
|
font-family: jpgothic;
|
|
src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic);
|
|
}
|
|
</pre>
|
|
|
|
<p>Reference a font face that cannot be matched within a larger family:</p>
|
|
|
|
<pre>
|
|
@font-face {
|
|
font-family: Hoefler Text Ornaments;
|
|
/* has the same font properties as Hoefler Text Regular */
|
|
src: local(HoeflerText-Ornaments);
|
|
}
|
|
</pre>
|
|
|
|
<p>Since localized fullnames should never match, a document with the
|
|
header style rules below would always render using the default serif
|
|
font, regardless whether a particular system locale parameter is set to
|
|
Finnish or not:</p>
|
|
|
|
<pre>
|
|
@font-face {
|
|
font-family: SectionHeader;
|
|
src: local("Arial Lihavoitu"); /* Finnish fullname for Arial Bold, matching should fail */
|
|
font-weight: bold;
|
|
}
|
|
|
|
h2 { font-family: SectionHeader, serif; }
|
|
</pre>
|
|
|
|
<p>A conformant user agent should never load the font ‘<code
|
|
class=css>gentium.eot</code>’ in the example below, since it is
|
|
included in the first definition of the ‘<code class=property><a
|
|
href="#descdef-src">src</a></code>’ descriptor which is overridden by
|
|
the second definition in the same @font-face rule:</p>
|
|
|
|
<pre>
|
|
@font-face {
|
|
font-family: MainText;
|
|
src: url(gentium.eot); /* for compatibility with older non-conformant user agents */
|
|
src: local("Gentium"), url(gentium.ttf); /* Overrides src definition */
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id=font-prop-desc><span class=secno>4.4 </span>Font property
|
|
descriptors: the <a href="#descdef-font-style">font-style</a>, <a
|
|
href="#descdef-font-weight">font-weight</a>, <a
|
|
href="#descdef-font-stretch">font-stretch</a> descriptors</h3>
|
|
|
|
<table class=descdef>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=descdef-font-style>font-style</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>normal | italic | oblique
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>normal
|
|
</table>
|
|
|
|
<table class=descdef>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=descdef-font-weight>font-weight</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>normal
|
|
</table>
|
|
|
|
<table class=descdef>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=descdef-font-stretch>font-stretch</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>normal | ultra-condensed | extra-condensed | condensed |
|
|
semi-condensed | semi-expanded | expanded | extra-expanded |
|
|
ultra-expanded
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>normal
|
|
</table>
|
|
|
|
<p>These descriptors define the characteristics of a font face and are used
|
|
in the process of matching styles to specific faces. For a font family
|
|
defined with several @font-face rules, user agents can either download all
|
|
faces in the family or use these descriptors to selectively download font
|
|
faces that match actual styles used in document. The values for these
|
|
descriptors are the same as those for the corresponding font properties
|
|
except that relative keywords are not allowed, ‘<code
|
|
class=property>bolder</code>’ and ‘<code
|
|
class=property>lighter</code>’. If these descriptors are omitted,
|
|
default values are assumed.
|
|
|
|
<p>The value for these font face style attributes is used in place of the
|
|
style implied by the underlying font data. This allows authors to combine
|
|
faces in flexible combinations, even in situations where the original font
|
|
data was arranged differently. User agents that implement synthetic
|
|
bolding and obliqueing must only apply synthetic styling in cases where
|
|
the font descriptors imply this is needed, rather than based on the style
|
|
attributes implied by the font data.
|
|
|
|
<h3 id=unicode-range-desc><span class=secno>4.5 </span>Character range: the
|
|
<a href="#descdef-unicode-range">unicode-range</a> descriptor</h3>
|
|
|
|
<table class=descdef>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=descdef-unicode-range>unicode-range</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td><urange> [, <urange>]*
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>U+0-10FFFF
|
|
</table>
|
|
|
|
<p>This descriptor defines the range of Unicode characters supported by a
|
|
given font. The values of <span class=index-def id=lturangegt
|
|
title="<urange>::definition of"><a
|
|
name=value-def-urange><urange></a></span> are expressed using
|
|
hexadecimal numbers prefixed by "U+", corresponding to <a
|
|
href="http://www.unicode.org/charts/">Unicode character code points</a>.
|
|
The unicode-range descriptor serves as a hint for user agents when
|
|
deciding whether or not to download a font resource.
|
|
|
|
<p>Unicode range values are written using hexadecimal values and are case
|
|
insensitive. Each is prefixed by "U+" and multiple, discontinuous ranges
|
|
are separated by commas. Whitespace before or after commas is ignored.
|
|
Valid character code values vary between 0 and 10FFFF inclusive. A single
|
|
range has three basic forms:
|
|
|
|
<ul>
|
|
<li>a single code point (e.g. U+416)
|
|
|
|
<li>an interval value range (e.g. U+400-4ff)
|
|
|
|
<li>a range where trailing ‘<code class=css>?</code>’ characters imply
|
|
‘<code class=css>any digit value</code>’ (e.g. U+4??)
|
|
</ul>
|
|
|
|
<p>Ranges that do not fit any of the above three forms are considered to be
|
|
parse errors and the descriptor is omitted. Interval ranges consisting of
|
|
a single code point are valid. Ranges specified with ‘?’ that lack an
|
|
initial digit (e.g. "U+???") are also valid, and are treated as if there
|
|
was a single 0 before the question marks (thus, "U+???" = "U+0???" =
|
|
"U+0000-0FFF"). "U+??????" is not a syntax error, even though "U+0??????"
|
|
would be. Ranges can overlap but interval ranges that descend (e.g.
|
|
U+400-32f) are invalid and omitted rather than treated as parse errors;
|
|
they have no effect on other ranges in a list of ranges. Ranges are
|
|
clipped to the domain of Unicode code points (currently 0 - 10FFFF
|
|
inclusive); a range entirely outside the domain is omitted. Without any
|
|
valid ranges, the descriptor is omitted. User agents may normalize the
|
|
list of ranges into a list that is different but represents the same set
|
|
of character code points.
|
|
|
|
<p>The character range can be a subset of the full character map of the
|
|
underlying font. The effective unicode-range used when mapping characters
|
|
to fonts is the intersection of the unicode range specified and the
|
|
underlying character map of the font. This means that authors do not need
|
|
to define the unicode-range of a font precisely, broad ranges for which a
|
|
sparse set of code points are defined in the font can be used. Code points
|
|
outside of the defined unicode-range are ignored, regardless of whether
|
|
the font contains a glyph for that code point or not. User agents that
|
|
download fonts for characters outside the defined unicode-range are
|
|
considered non-conformant. Likewise, user agents that render a character
|
|
using a font resource for which the defined unicode-range does not include
|
|
that character are also considered non-conformant.
|
|
|
|
<p>Example ranges for specific languages or characters:
|
|
|
|
<dl>
|
|
<dt>unicode-range: U+A5;
|
|
|
|
<dd>a single code point, the yen/yuan symbol
|
|
|
|
<dt>unicode-range: U+0-7F;
|
|
|
|
<dd>code range for basic ASCII characters
|
|
|
|
<dt>unicode-range: U+590-5ff;
|
|
|
|
<dd>code range for Hebrew characters
|
|
|
|
<dt>unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;
|
|
|
|
<dd>code range for Japanese kanji, hiragana and katakana characters plus
|
|
yen/yuan symbol
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<p>The BBC provides news services in a wide variety of languages, many
|
|
that are not well supported across all platforms. Using an @font-face
|
|
rule, the BBC could provide a font for any of these languages, as it
|
|
already does via a manual font download.</p>
|
|
|
|
<pre>
|
|
@font-face {
|
|
font-family: BBCBengali;
|
|
src: url(fonts/BBCBengali.ttf) format("opentype");
|
|
unicode-range: U+00-FF, U+980-9FF;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Technical documents often require a wide range of symbols. The STIX
|
|
Fonts project is one project aimed at providing fonts to support a wide
|
|
range of technical typesetting in a standardized way. The example below
|
|
shows the use of a font that provides glyphs for many of the mathematical
|
|
and technical symbol ranges within Unicode:</p>
|
|
|
|
<pre>
|
|
@font-face {
|
|
font-family: STIXGeneral;
|
|
src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
|
|
unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Multiple @font-face rules with different unicode ranges for the same
|
|
family and style descriptor values can be used to create composite fonts
|
|
that mix the glyphs from different fonts for different scripts. This can
|
|
be used to combine fonts that only contain glyphs for a single script
|
|
(e.g. Latin, Greek, Cyrillic) or it can be used by authors as a way of
|
|
segmenting a font into fonts for commonly used characters and less
|
|
frequently used characters. Since the user agent will only pull down the
|
|
fonts it needs this helps reduce page bandwidth.
|
|
|
|
<p class=issue>It has been suggested that named ranges for commonly used
|
|
ranges be defined. Is this useful and if so, what should those ranges be
|
|
based on (e.g. Unicode's block definitions)? This would be especially
|
|
helpful for CJK segmenting where the goal would be to have named ranges
|
|
that group codepoints by relative frequency but it's unclear what source
|
|
to use as a basis for specifying this.
|
|
|
|
<p>If the unicode ranges overlap for a set of @font-face rules with the
|
|
same family and style descriptor values, the rules are ordered in the
|
|
reverse order they were defined; the last rule defined is the first to be
|
|
checked for a given character.
|
|
|
|
<div class=example>
|
|
<p>This example shows how an author can override the glyphs used for Latin
|
|
characters in a Japanese font with glyphs from a different font. The
|
|
first rule specifies no range so it defaults to the entire range. The
|
|
range specified in the second rule overlaps but takes precedence because
|
|
it is defined later.</p>
|
|
|
|
<pre>
|
|
@font-face {
|
|
font-family: JapaneseWithGentium;
|
|
src: local(MSMincho);
|
|
/* no range specified, defaults to entire range */
|
|
}
|
|
|
|
@font-face {
|
|
font-family: JapaneseWithGentium;
|
|
src: url(../fonts/Gentium.ttf);
|
|
unicode-range: U+0-2FF;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Consider a family constructed to optimize bandwidth by separating out
|
|
Latin, Japanese and other characters into different font files:</p>
|
|
|
|
<pre>
|
|
/* fallback font - size: 4.5MB */
|
|
@font-face {
|
|
font-family: DroidSans;
|
|
src: url(DroidSansFallback.ttf);
|
|
/* no range specified, defaults to entire range */
|
|
}
|
|
|
|
/* Japanese glyphs - size: 1.2MB */
|
|
@font-face {
|
|
font-family: DroidSans;
|
|
src: url(DroidSansJapanese.ttf);
|
|
unicode-range: U+3000-9FFF, U+ff??;
|
|
}
|
|
|
|
/* Latin, Greek, Cyrillic along with some
|
|
punctuation and symbols - size: 190KB */
|
|
@font-face {
|
|
font-family: DroidSans;
|
|
src: url(DroidSans.ttf);
|
|
unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
|
|
}
|
|
</pre>
|
|
|
|
<p>For simple Latin text, only the font for Latin characters is
|
|
downloaded:</p>
|
|
|
|
<pre>
|
|
body { font-family: DroidSans; }
|
|
|
|
<p>This is that</p>
|
|
</pre>
|
|
|
|
<p>In this case the user agent first checks the unicode-range for the font
|
|
containing Latin characters (DroidSans.ttf). Since all the characters
|
|
above are in the range U+0-5FF, the user agent downloads the font and
|
|
renders the text with that font.</p>
|
|
|
|
<p>Next, consider text that makes use of an arrow character (⇨):</p>
|
|
|
|
<pre>
|
|
<p>This &#x21e8; that<p>
|
|
</pre>
|
|
|
|
<p>The user agent again first checks the unicode-range of the font
|
|
containing Latin characters. Since U+2000-2300 includes the arrow code
|
|
point (U+21E8), the user agent downloads the font. For this character
|
|
however the Latin font does not have a matching glyph, so the effective
|
|
unicode-range used for font matching excludes this code point. Next, the
|
|
user agent evaluates the Japanese font. The unicode-range for the
|
|
Japanese font, U+3000-9FFF and U+ff??, does not include U+21E8, so the
|
|
user agent does not download the Japanese font. Next the fallback font is
|
|
considered. The @font-face rule for the fallback font does not define
|
|
unicode-range so its value defaults to the range of all Unicode code
|
|
points. The fallback font is downloaded and used to render the arrow
|
|
character.</p>
|
|
</div>
|
|
<!--
|
|
Tools to create subsetted fonts a problem.
|
|
Also, combining diacritics represent a nasty side issue here.
|
|
-->
|
|
|
|
<h3 id=font-rend-desc><span class=secno>4.6 </span>Font features: the <a
|
|
href="#descdef-font-variant">font-variant</a> and <a
|
|
href="#descdef-font-feature-settings">font-feature-settings</a>
|
|
descriptors</h3>
|
|
|
|
<table class=descdef>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=descdef-font-variant>font-variant</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>normal | [ <common-lig-values> ||
|
|
<discretionary-lig-values> || <historical-lig-values> ||
|
|
<contextual-alt-values> || stylistic(<feature-value-name>)
|
|
|| historical-forms || styleset(<feature-value-name> [,
|
|
<feature-value-name>]*) ||
|
|
character-variant(<feature-value-name>
|
|
[,<feature-value-name>]*) || swash(<feature-value-name>) ||
|
|
ornaments(<feature-value-name>) ||
|
|
annotation(<feature-value-name>) || ruby || <caps-value> ||
|
|
<numeric-figure-values> || <numeric-spacing-values> ||
|
|
<numeric-fraction-values> || slashed-zero ||
|
|
<east-asian-variant-values> || <east-asian-width-values> ]
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>normal
|
|
</table>
|
|
|
|
<table class=descdef>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=descdef-font-feature-settings>font-feature-settings</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>normal | <feature-tag-value> [, <feature-tag-value>]*
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>normal
|
|
</table>
|
|
|
|
<p>These descriptors define settings that apply when the font defined by an
|
|
@font-face rule is rendered. They do not affect font selection. Values are
|
|
identical to those defined for the corresponding ‘<code
|
|
class=property><a href="#propdef-font-variant">font-variant</a></code>’
|
|
and ‘<code class=property><a
|
|
href="#propdef-font-feature-settings">font-feature-settings</a></code>’
|
|
properties defined below except that the value ‘<code
|
|
class=property>inherit</code>’ is omitted. When multiple font feature
|
|
descriptors or properties are used, the cumulative effect on text
|
|
rendering is described below.
|
|
|
|
<h3 id=font-face-loading><span class=secno>4.7 </span>Font loading
|
|
guidelines</h3>
|
|
|
|
<p>The @font-face rule is designed to allow lazy loading of fonts, fonts
|
|
are only downloaded when needed for use within a document. A stylesheet
|
|
can include @font-face rules for a library of fonts of which only a select
|
|
set are used; user agents must only download those fonts that are referred
|
|
to within the style rules applicable to a given page. User agents that
|
|
download all fonts defined in @font-face rules without considering whether
|
|
those fonts are in fact used within a page are considered non-conformant.
|
|
In cases where a font might be downloaded in character fallback cases,
|
|
user agents may download a font if it's listed in a font list but is not
|
|
actually used for a given text run.
|
|
|
|
<pre>
|
|
@font-face {
|
|
font-family: GeometricModern;
|
|
src: url(font.ttf);
|
|
}
|
|
|
|
p {
|
|
/* font will be downloaded for pages with p elements */
|
|
font-family: GeometricModern, sans-serif;
|
|
}
|
|
|
|
h2 {
|
|
/* font may be downloaded for pages with h2 elements, even if Futura is available locally */
|
|
font-family: Futura, GeometricModern, sans-serif;
|
|
}
|
|
</pre>
|
|
|
|
<p>In cases where textual content is loaded before downloadable fonts are
|
|
available, user agents may render text as it would be rendered if
|
|
downloadable font resources are not available or they may render text
|
|
transparently with fallback fonts to avoid a flash of text using a
|
|
fallback font. In cases where the font download fails user agents must
|
|
display text, simply leaving transparent text is considered non-conformant
|
|
behavior. Authors are advised to use fallback fonts in their font lists
|
|
that closely match the vertical metrics of the downloadable fonts to avoid
|
|
large page reflows where possible.
|
|
|
|
<h3 id=same-origin-restriction><span class=secno>4.8 </span>Same-origin
|
|
restriction for fonts</h3>
|
|
|
|
<h4 id=default-same-origin-restriction><span class=secno>4.8.1
|
|
</span>Default same-origin restriction</h4>
|
|
|
|
<p>User agents must implement a same-origin restriction when loading fonts
|
|
via the @font-face mechanism. This restriction limits the loading of fonts
|
|
for a given document to fonts loaded from the same origin. Fonts can only
|
|
be loaded via the same host, port, and method combination as the
|
|
containing document, using the <a
|
|
href="http://www.w3.org/TR/html5/origin-0.html">origin matching
|
|
algorithm</a> described in the <a href="#HTML5"
|
|
rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> specification. The origin of
|
|
the stylesheet containing @font-face rules is not used when deciding
|
|
whether a font is same origin or not, only the origin of the containing
|
|
document is used. The restriction applies to all font types.
|
|
|
|
<p class=issue>Some implementers would prefer to define a new mechanism
|
|
(tentatively named From-Origin) to control access to all resource types,
|
|
in preference to the origin matching algorithm referred to here. As such,
|
|
this subsection should be considered at risk for alteration if such an
|
|
alternative mechanism is defined.
|
|
|
|
<p>Given a document located at http://example.com/page.html, fonts defined
|
|
with ‘<code class=property><a href="#descdef-src">src</a></code>’
|
|
definitions considered cross origin must not be loaded:
|
|
|
|
<pre>
|
|
/* same origin (i.e. domain, protocol, port match document) */
|
|
src: url(fonts/simple.ttf);
|
|
src: url(//fonts/simple.ttf);
|
|
|
|
/* cross origin, different protocol */
|
|
src: url(https://example.com/fonts/simple.ttf);
|
|
|
|
/* cross origin, different domain */
|
|
src: url(http://another.example.com/fonts/simple.ttf);
|
|
</pre>
|
|
|
|
<h4 id=allowing-cross-origin-font-loading><span class=secno>4.8.2
|
|
</span>Allowing cross-origin font loading</h4>
|
|
|
|
<p>User agents must also implement the ability to relax this restriction
|
|
using cross-site origin controls <a href="#CORS"
|
|
rel=biblioentry>[CORS]<!--{{!CORS}}--></a>. Sites can explicitly allow
|
|
cross-site downloading of font data using the
|
|
<code>Access-Control-Allow-Origin</code> HTTP header.
|
|
|
|
<p class=issue>If an alternative mechanism to control resource loading
|
|
(such as the suggested From-Origin HTTP header) is specified, the
|
|
appropriate mechanism to relax the default same-origin restriction for
|
|
@font-face may also change. As such, this subsection should be considered
|
|
at risk for alteration if such an alternative mechanism is defined.
|
|
|
|
<h2 id=font-matching-algorithm><span class=secno>5 </span>Font matching
|
|
algorithm</h2>
|
|
|
|
<p>The algorithm below describes how fonts are associated with individual
|
|
runs of text. For each character in the run a font family is chosen and a
|
|
particular font face is selected containing a glyph for that character.
|
|
|
|
<h3 id=font-style-matching><span class=secno>5.1 </span>Matching font
|
|
styles</h3>
|
|
|
|
<p> The procedure for choosing fonts consists of iterating over the font
|
|
families determined by the font-family property, selecting a font face
|
|
with the appropriate style based on other font properties and then
|
|
determining whether a glyph exists for a given character.
|
|
|
|
<ol id=fontmatchingalg>
|
|
<li>Using the computed font property values for a given element, the user
|
|
agent starts with the first family name in the fontlist specified by the
|
|
<span class=property>‘<code class=property><a
|
|
href="#descdef-font-family">font-family</a></code>’</span> property.
|
|
|
|
<li>If the family name is unquoted and is a generic family name, the user
|
|
agent looks up the appropriate font family name to be used. User agents
|
|
may choose the generic font family to use based on the language of the
|
|
containing element or the Unicode range of the character.
|
|
|
|
<li>For other family names, the user agent attempts to find the family
|
|
name among fonts defined via @font-face rules and then among available
|
|
system fonts, matching names with a case-insensitive comparison. On
|
|
systems containing fonts with multiple localized font family names, user
|
|
agents must match any of these names independent of the underlying system
|
|
locale or platform API used. If a font family defined via @font-face
|
|
rules contains only invalid font data, it should be considered as if a
|
|
font was present but contained an empty character map; matching a
|
|
platform font with the same name must not occur in this case.
|
|
|
|
<li>If a font family match occurs, the user agent assembles the set of
|
|
font faces in that family that contain a glyph for the character. It then
|
|
narrows this matching set to a single face using other font properties in
|
|
the order given below:
|
|
<ol id=fontstylematchingalg>
|
|
<li><span class=property>‘<code class=property><a
|
|
href="#descdef-font-stretch">font-stretch</a></code>’</span> is tried
|
|
first. If the matching set contains faces with width values matching
|
|
the ‘<code class=property><a
|
|
href="#descdef-font-stretch">font-stretch</a></code>’ value, faces
|
|
with other width values are removed from the matching set. If there is
|
|
no face that exactly matches the width value the nearest width is used
|
|
instead. If the value of ‘<code class=property><a
|
|
href="#descdef-font-stretch">font-stretch</a></code>’ is ‘<code
|
|
class=property>normal</code>’ or one of the condensed values,
|
|
narrower width values are checked first, then wider values. If the
|
|
value of ‘<code class=property><a
|
|
href="#descdef-font-stretch">font-stretch</a></code>’ is one of the
|
|
expanded values, wider values are checked first, followed by narrower
|
|
values. Once the closest matching width has been determined by this
|
|
process, faces with other widths are removed from the matching set.
|
|
|
|
<li><span class=property>‘<code class=property><a
|
|
href="#descdef-font-style">font-style</a></code>’</span> is tried
|
|
next. If the value of ‘<code class=property><a
|
|
href="#descdef-font-style">font-style</a></code>’ is ‘<code
|
|
class=property>italic</code>’, italic faces are checked first, then
|
|
oblique, then normal faces. If the value is ‘<code
|
|
class=property>oblique</code>’, oblique faces are checked first, then
|
|
italic faces and then normal faces. If the value is ‘<code
|
|
class=property>normal</code>’, normal faces are checked first, then
|
|
oblique faces, then italic faces. Faces with other style values are
|
|
excluded from the matching set. User agents are permitted to
|
|
distinguish between italic and oblique faces within platform font
|
|
families but this is not required, they may treat all italic or oblique
|
|
faces as italic faces. However, within font families defined via
|
|
@font-face rules, italic and oblique faces must be distinguished using
|
|
the value of the ‘<code class=property><a
|
|
href="#descdef-font-style">font-style</a></code>’ descriptor.
|
|
|
|
<li><span class=property>‘<code class=property><a
|
|
href="#descdef-font-weight">font-weight</a></code>’</span> is matched
|
|
next, it will always reduce the matching set to a single font face. If
|
|
bolder/lighter relative weights are used, the effective weight is
|
|
calculated based on the inherited weight value, as described in the
|
|
definition of the ‘<code class=property><a
|
|
href="#descdef-font-weight">font-weight</a></code>’ property. Given
|
|
the desired weight and the weights of faces in the matching set after
|
|
the steps above, if the desired weight is available that face matches.
|
|
Otherwise, a weight is chosen using the rules below:
|
|
<ul>
|
|
<li>If the desired weight is less than 400, weights below the desired
|
|
weight are checked in descending order followed by weights above the
|
|
desired weight in ascending order until a match is found.
|
|
|
|
<li>If the desired weight is greater than 500, weights above the
|
|
desired weight are checked in ascending order followed by weights
|
|
below the desired weight in descending order until a match is found.
|
|
|
|
<li>If the desired weight is 400, 500 is checked first and then the
|
|
rule for desired weights less than 400 is used.
|
|
|
|
<li>If the desired weight is 500, 400 is checked first and then the
|
|
rule for desired weights less than 400 is used.
|
|
</ul>
|
|
|
|
<li><span class=property>‘<code class=property><a
|
|
href="#propdef-font-size">font-size</a></code>’</span> must be
|
|
matched within a UA-dependent margin of tolerance. (Typically, sizes
|
|
for scalable fonts are rounded to the nearest whole pixel, while the
|
|
tolerance for bitmapped fonts could be as large as 20%.) Further
|
|
computations, e.g., by ‘<code class=property>em</code>’ values in
|
|
other properties, are based on the <span class=property>‘<code
|
|
class=property><a
|
|
href="#propdef-font-size">font-size</a></code>’</span> value that is
|
|
used, not the one that is specified.
|
|
</ol>
|
|
|
|
<li>If no matching face exists or the matched face does not contain a
|
|
glyph for the character to be rendered, the next family name is selected
|
|
and the previous two steps repeated. If the matched font is defined via
|
|
an @font-face rule, the font resource is downloaded. If the matched font
|
|
is defined via @font-face and needs to be downloaded, the user agent can
|
|
either wait until the font is downloaded or render once with substituted
|
|
font metrics and render again once the font is downloaded.
|
|
|
|
<li>If there are no more font families to be evaluated and no matching
|
|
face has been found, then the user agent performs a <em>system font
|
|
fallback</em> procedure to find the best match for the character to be
|
|
rendered. The result of this procedure may vary across user agents.
|
|
|
|
<li>If a particular character cannot be displayed using any font, the user
|
|
agent should indicate by some means that a character is not being
|
|
displayed, displaying either a symbolic representation of the missing
|
|
glyph (e.g. using a <a
|
|
href="http://en.wikipedia.org/wiki/Last_resort_font">Last Resort
|
|
Font</a>) or using the missing character glyph from a default font.
|
|
</ol>
|
|
|
|
<h3 id=char-handling-issues><span class=secno>5.2 </span>Character handling
|
|
issues</h3>
|
|
|
|
<p>The procedure above is always performed on text runs containing Unicode
|
|
characters, documents using legacy encodings are assumed to have been
|
|
transcoded before matching fonts. For fonts containing character maps for
|
|
both legacy encodings and Unicode, the contents of the legacy encoding
|
|
character map must have no effect on the results of the font matching
|
|
process.
|
|
|
|
<p>The font matching process does not assume that text runs are in either
|
|
normalized or denormalized form (see <a href="#CHARMOD-NORM"
|
|
rel=biblioentry>[CHARMOD-NORM]<!--{{CHARMOD-NORM}}--></a> for more
|
|
details). Layout engines often convert base character plus combining
|
|
character sequences into precomposed characters if they exist. Fonts can
|
|
generally support both ways of matching characters but variations can
|
|
occur. Authors should always tailor their choice of fonts to their
|
|
content, including whether that content contains normalized or
|
|
denormalized character streams.
|
|
|
|
<p>If a text run contains Unicode variation selectors, special handling is
|
|
required. For each character + variation selector pair, if the first font
|
|
with a glyph for the base character also contains a glyph for the variant
|
|
specified by the variation selector, user agents must display the variant
|
|
glyph instead of the default one. If the first font with a glyph for the
|
|
base character does not have a glyph for the variation selector pair, the
|
|
default glyph is displayed.
|
|
|
|
<p>If a given character is a Private-Use Area Unicode codepoint and none of
|
|
the fonts in the fontlist contain a glyph for that codepoint, user agents
|
|
must display some form of missing glyph symbol for that character rather
|
|
than attempting system font fallback for that codepoint. When matching the
|
|
replacement character U+FFFD, user agents may skip the font matching
|
|
process and immediately display some form of missing glyph symbol, they
|
|
are not required to display the glyph from the font that would be selected
|
|
by the font matching process.
|
|
|
|
<p>In general, the fonts for a given family will all have the same or
|
|
similar character maps. The process outlined here is designed to handle
|
|
even font families containing faces with widely variant character maps.
|
|
However, authors are cautioned that the use of such families can lead to
|
|
unexpected results. A special character only available in the condensed
|
|
italic face of a family may still be used even when font properties imply
|
|
a bold expanded face should be used instead.
|
|
|
|
<p>Optimizations of this process are allowed provided that an
|
|
implementation behaves as if the algorithm had been followed exactly.
|
|
Matching occurs in a well-defined order to insure that the results are as
|
|
consistent as possible across user agents, given an identical set of
|
|
available fonts and rendering technology.
|
|
|
|
<p class=issue>How to match grapheme clusters needs to be specified
|
|
explicitly.
|
|
|
|
<h3 id=font-matching-changes><span class=secno>5.3 </span>Font matching
|
|
changes since CSS 2.1</h3>
|
|
|
|
<p>The algorithm above is different from CSS 2.1 in a number of key places.
|
|
These changes were made to better reflect actual font matching behavior
|
|
across user agent implementations.
|
|
|
|
<p>Differences compared to the font matching algorithm in CSS 2.1:
|
|
|
|
<ul>
|
|
<li>The algorithm includes font-stretch matching.
|
|
|
|
<li>All possible font-style matching scenarios are delineated.
|
|
|
|
<li>Small-caps fonts are not matched as part of the font matching process,
|
|
they are now handled via font features.
|
|
|
|
<li>Unicode variation selector matching is required.
|
|
</ul>
|
|
<!--
|
|
|
|
<h3>Examples of font matching</h3>
|
|
|
|
<p>Simple to complex examples:</p>
|
|
|
|
<div class="example">
|
|
<p>bold italic</p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>italic (synthesized)</p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>specific weights</p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>bolder/lighter</p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>bolder (synthesized)</p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>condensed</p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>run of text containing diacritics</p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>run of text containing mixture of Japanese/English</p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>simple downloaded font</p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>font-face with local/url combination</p>
|
|
</div>
|
|
|
|
-->
|
|
|
|
<div class=example>
|
|
<p>It's useful to note that the CSS selector syntax may be used to create
|
|
language-sensitive typography. For example, some Chinese and Japanese
|
|
characters are unified to have the same Unicode code point, 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 uses the appropriate font.
|
|
</div>
|
|
|
|
<h2 id=font-rend-props><span class=secno>6 </span>Font feature properties</h2>
|
|
|
|
<p>Modern font technologies support a variety of advanced typographic and
|
|
language-specific font features. Using these features, a single font can
|
|
provide glyphs for a wide range of ligatures, contextual and stylistic
|
|
alternates, tabular and old-style figures, small capitals, automatic
|
|
fractions, swashes, and alternates specific to a given language. To allow
|
|
authors control over these font capabilities, the font-variant property
|
|
has been expanded for CSS3, it now functions as a shorthand for a set of
|
|
properties that provide control over stylistic font features.
|
|
|
|
<h3 id=glyph-selection-positioning><span class=secno>6.1 </span>Glyph
|
|
selection and positioning</h3>
|
|
|
|
<p>Simple fonts used for displaying Latin text use a very basic processing
|
|
model, fonts contain a character map which maps a given character to a
|
|
glyph for that character. Glyphs for subsequent characters are simply
|
|
placed next in line along a run of text. Font formats such as OpenType and
|
|
AAT (Apple Advanced Typography) use a richer processing model, the glyph
|
|
for a given character can be chosen and positioned not just based on a
|
|
single character, but also based on surrounding characters along with the
|
|
language, script, and features enabled for the text. Font features may be
|
|
required for specific scripts, or recommended as enabled by default or
|
|
they may be stylistic features meant to be used under author control.
|
|
|
|
<p>For a good visual overview of these features, see the <a
|
|
href="#OPENTYPE-FONT-GUIDE"
|
|
rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
|
|
For a detailed description of glyph processing for OpenType fonts, see <a
|
|
href="#WINDOWS-GLYPH-PROC"
|
|
rel=biblioentry>[WINDOWS-GLYPH-PROC]<!--{{WINDOWS-GLYPH-PROC}}--></a>.
|
|
|
|
<p>The subproperties of font-variant listed below are used to control these
|
|
stylistic font features; they do not control features that are required
|
|
for displaying certain scripts, such as the OpenType features used when
|
|
displaying Arabic or Indic language text. They affect glyph selection and
|
|
positioning, they do not affect font selection as described in the font
|
|
matching section (except in cases required for compatibility with CSS
|
|
2.1).
|
|
|
|
<p>To assure consistent behavior across user agents, the equivalent
|
|
OpenType property settings are listed for individual properties and must
|
|
be considered normative. When using other font formats these should be
|
|
used as a guideline to map CSS font feature property values to specific
|
|
font features.
|
|
|
|
<p class=issue>The complete set of features on by default is not completely
|
|
specified in OpenType documentation. Should these be listed in a normative
|
|
appendix or should a more complete list be requested from those
|
|
controlling the OpenType specification?</p>
|
|
<!--
|
|
|
|
<p>For fonts defined via @font-face rules, the ‘<code class=property>font-variant</code>’
|
|
descriptor of the @font-face rule described below can be used to
|
|
specify font features that only apply to a given font.
|
|
|
|
Features not supported by any of the properties defined here
|
|
can be enabled using the
|
|
‘<code class=property>font-feature-settings</code>’ descriptor of the @font-face rule allows the
|
|
use of infrequently used font features. Authors are encouraged to use
|
|
‘<code class=property>font-variant</code>’ properties whenever possible.</p>
|
|
|
|
All of these properties assume that fonts define a given set of
|
|
default rendering styles; if a specific font feature is not explicitly
|
|
enabled or disabled the default rendering style is used. For each of
|
|
these properties, the value ‘<code class=property>normal</code>’ implies using the font
|
|
defaults.</p>
|
|
|
|
<p>Like other font properties, font feature properties apply independent
|
|
of the font specified. In some cases, font feature settings are
|
|
font-specific, such as when specifying swash characters or stylistic
|
|
alternates. In these situations, the ‘<code class=property>font-variant</code>’ descriptor of the
|
|
@font-face rule described below can be used to specify font features
|
|
that only apply to a given font and not to other fonts when fallback
|
|
occurs. For features not supported by any of the properties defined
|
|
here, the ‘<code class=property>font-feature-settings</code>’ descriptor of the @font-face rule allows
|
|
the use of infrequently used font features. Authors are encouraged
|
|
to use ‘<code class=property>font-variant</code>’ properties whenever possible.</p>
|
|
|
|
<p>For features not supported by subproperties of font-variant defined
|
|
below, the ‘<code class=property>font-feature-settings</code>’ descriptor of the @font-face rule allows
|
|
the use of infrequently used font features. Authors are encouraged
|
|
to use ‘<code class=property>font-variant</code>’ properties whenever possible.</p>
|
|
|
|
|
|
-->
|
|
|
|
<h3 id=language-specific-support><span class=secno>6.2
|
|
</span>Language-specific display</h3>
|
|
|
|
<p>OpenType also supports language-specific glyph selection and
|
|
positioning, so that text can be displayed correctly in cases where the
|
|
language dictates a specific display behavior. Languages often share a
|
|
common script but the shape of certain letters may vary across those
|
|
languages, such as the variations in certain Cyrillic letters used in
|
|
Russian and Bulgarian text. In Latin text, it's common to render "fi" with
|
|
an explicit fi-ligature that lacks a dot on the "i". However, in languages
|
|
such as Turkish which uses both a dotted-i and a dotless-i, it's important
|
|
to not use this ligature or use a specialized version that contains a dot
|
|
over the "i". The example below shows language-specific variations based
|
|
on stylistic traditions found in Spanish, Italian and French orthography:
|
|
|
|
<div class=featex><img alt="language specific forms, spanish"
|
|
src=locl-1.png></div>
|
|
|
|
<div class=featex><img alt="language specific forms, italian"
|
|
src=locl-2.png></div>
|
|
|
|
<div class=featex><img alt="language specific forms, french"
|
|
src=locl-3.png></div>
|
|
|
|
<p>Users agents are required to infer the OpenType language system from the
|
|
value of the ‘<code class=property>lang</code>’ attribute and use that
|
|
when selecting and positioning glyphs using an OpenType font. If the
|
|
‘<code class=property>lang</code>’ attribute is not defined, the
|
|
default OpenType language system must be used.
|
|
|
|
<p>In some cases it may be necessary to explicitly declare the OpenType
|
|
language to be used, for example when displaying text in a given language
|
|
that uses the typographic conventions of another language, or when the
|
|
font does not explicitly support a given language but supports a language
|
|
that shares common typographic conventions. The ‘<code class=property><a
|
|
href="#propdef-font-language-override">font-language-override</a></code>’
|
|
property is used for this purpose.
|
|
|
|
<p class=issue>Should user agents be allowed to infer the Opentype language
|
|
or simply use only the default language system?</p>
|
|
<!-- prop: font-kerning -->
|
|
|
|
<h3 id=font-kerning-prop><span class=secno>6.3 </span>Kerning: the <a
|
|
href="#propdef-font-kerning">font-kerning</a> property</h3>
|
|
|
|
<table class=propdef id=namefont-kerning>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=propdef-font-kerning>font-kerning</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>auto | normal | none
|
|
|
|
<tr>
|
|
<td>Initial:
|
|
|
|
<td>auto
|
|
|
|
<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>Kerning is the contextual adjustment of inter-glyph spacing. This
|
|
property controls metric kerning, kerning that utilizes adjustment data
|
|
contained in the font. The value ‘<code class=property>normal</code>’
|
|
implies that kerning is applied while the value ‘<code
|
|
class=property>none</code>’ implies that kerning is not applied when
|
|
rendering text. If the value is ‘<code class=property>auto</code>’, a
|
|
user agent is free to choose whether kerning is enabled or not by default
|
|
and to vary that default based on the underlying text script.
|
|
|
|
<p>For fonts that do not include kerning data this property will have no
|
|
visible effect. When rendering with OpenType fonts, the <a
|
|
href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>
|
|
specification suggests that kerning be enabled by default. When kerning is
|
|
enabled, the OpenType <code>kern</code> feature is enabled. User agents
|
|
must also support fonts that only support kerning via data contained in a
|
|
‘<code class=property>kern</code>’ font table, as detailed in the
|
|
OpenType specification. Authors may prefer to disable kerning in
|
|
situations where performance is more important that precise appearance. If
|
|
the ‘<code class=property>letter-spacing</code>’ property is defined,
|
|
kerning adjustments are considered part of the default spacing, letter
|
|
spacing adjustments are made after kerning has been applied.</p>
|
|
<!-- prop: font-variant-position -->
|
|
|
|
<h3 id=font-variant-position-prop><span class=secno>6.4 </span>Subscript,
|
|
superscript and ordinal forms: the <a
|
|
href="#propdef-font-variant-position">font-variant-position</a> property</h3>
|
|
|
|
<table class=propdef id=namefont-variant-position>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=propdef-font-variant-position>font-variant-position</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>normal | sub | super | ordinal
|
|
|
|
<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 class=issue>The name for this feature has been a point of contention,
|
|
this name is a placeholder until the final name is resolved.
|
|
|
|
<p>This property controls the selection of alternate glyphs for use as
|
|
subscripts, superscripts and ordinals. These alternate glyphs of reduced
|
|
size are positioned within the same em-box as the default glyph and
|
|
explicitly designed to match the surrounding text and make the them more
|
|
readable without affecting the linebox.
|
|
|
|
<div class=figure><img alt="comparison between real subscript glyphs and
|
|
synthesized ones" src=realsubscripts.png>
|
|
<p class=caption>Subscript glyphs (top) vs. typical synthesized subscripts
|
|
(bottom)
|
|
</div>
|
|
|
|
<p>The values ‘<code class=property>sub</code>’, ‘<code
|
|
class=property>super</code>’, and ‘<code
|
|
class=property>ordinal</code>’ imply the appropriate variant glyph is
|
|
displayed when available in the font (OpenType features: <code>subs, supr,
|
|
ordn</code>). Because of the semantic nature of subscripts and
|
|
superscripts, when the value is either ‘<code
|
|
class=property>sub</code>’ or ‘<code class=property>super</code>’
|
|
and a variant glyph is not available, a simulated glyph is synthesized
|
|
using a reduced form of the default glyph. If the value is ‘<code
|
|
class=property>ordinal</code>’ and a variant glyph is not available, the
|
|
normal glyph is used, no attempt is made to synthesize one. A value of
|
|
‘<code class=property>normal</code>’ implies use of the default glyph
|
|
at normal size.
|
|
|
|
<p>In the case of OpenType fonts that lack subscript or superscript glyphs
|
|
for a given character, to calculate the size and offset of the synthesized
|
|
substitutes user agents must use the appropriate subscript and superscript
|
|
metrics specified in the selected font's <a
|
|
href="http://www.microsoft.com/typography/otspec/os2.htm#subxs">OS/2
|
|
table</a> <a href="#OPENTYPE"
|
|
rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>.
|
|
|
|
<p>In the past, user agents have used font-size and vertical-align to
|
|
simulate subscripts and superscripts for the <code>sub</code> and
|
|
<code>sup</code> elements. To allow a backwards compatible way of defining
|
|
subscripts and superscripts, it is recommended that authors use
|
|
conditional rules <a href="#CSS3-CONDITIONAL"
|
|
rel=biblioentry>[CSS3-CONDITIONAL]<!--{{CSS3-CONDITIONAL}}--></a> so that
|
|
older user agents will still render these correctly.
|
|
|
|
<p>Note that because this property is not cumulative, it's not suitable for
|
|
nested subscripts or superscripts. Due to this limitation,
|
|
font-variant-position is not recommended for use in user agent
|
|
stylesheets.
|
|
|
|
<p class=issue>It would be nice to define this in a way such that it would
|
|
work with nested subscripts or superscripts which would allow it to be
|
|
used in user agent stylesheets. But one of the goals for this is to allow
|
|
simple subscripts and superscripts to be displayed without affecting the
|
|
line box. To achieve both appears to be a very hairy problem. One <a
|
|
href="http://lists.w3.org/Archives/Public/www-style/2011Apr/0391.html">proposal</a>
|
|
is to conditionalize how the font-size and vertical-align properties are
|
|
used based on whether subscript or superscript glyphs are available.
|
|
|
|
<p class=issue>Fonts often include default values for subscript/superscript
|
|
metrics. As a result, a mixture of designed glyphs and simulated glyphs
|
|
may not display correctly, the baseline will appear to bounce between
|
|
sequences to designed and simulated glyphs.
|
|
|
|
<div class=example>
|
|
<p>A typical user agent default style for the <code>sub</code> element:</p>
|
|
|
|
<pre>sub {
|
|
vertical-align: sub;
|
|
font-size: smaller;
|
|
line-height: normal;
|
|
}
|
|
</pre>
|
|
|
|
<p>Using font-variant-position to specify typographic subscripts in a way
|
|
that will still show subscripts in older user agents:</p>
|
|
|
|
<pre>@supports ( font-variant-position: sub ) {
|
|
|
|
sub {
|
|
vertical-align: inherit;
|
|
font-size: 100%;
|
|
line-height: inherit;
|
|
font-variant-position: sub;
|
|
}
|
|
|
|
}
|
|
</pre>
|
|
|
|
<p>User agents that support the ‘<code class=property><a
|
|
href="#propdef-font-variant-position">font-variant-position</a></code>’
|
|
property will select a subscript variant glyph and render this without
|
|
adjusting the baseline or font-size. Older user agents will ignore the
|
|
‘<code class=property><a
|
|
href="#propdef-font-variant-position">font-variant-position</a></code>’
|
|
property definition and use the standard defaults for subscripts.</p>
|
|
</div>
|
|
<!-- prop: font-variant-ligatures -->
|
|
|
|
<h3 id=font-variant-ligatures-prop><span class=secno>6.5 </span>Ligatures:
|
|
the <a href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
|
|
property</h3>
|
|
|
|
<table class=propdef id=namefont-variant-ligatures>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=propdef-font-variant-ligatures>font-variant-ligatures</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>normal | inherit | [ <common-lig-values> ||
|
|
<discretionary-lig-values> || <historical-lig-values> ]
|
|
|
|
<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>Specifies control over which ligatures are enabled or disabled. A value
|
|
of ‘<code class=property>normal</code>’ implies that the defaults set
|
|
by the font are used.
|
|
|
|
<pre
|
|
class=prod><dfn id=ltcommon-lig-values><var><common-lig-values></var></dfn> = [ common-ligatures | no-common-ligatures ]</pre>
|
|
|
|
<pre
|
|
class=prod><dfn id=ltdiscretionary-lig-values><var><discretionary-lig-values></var></dfn> = [ discretionary-ligatures | no-discretionary-ligatures ]</pre>
|
|
|
|
<pre
|
|
class=prod><dfn id=lthistorical-lig-values><var><historical-lig-values></var></dfn> = [ historical-ligatures | no-historical-ligatures ]</pre>
|
|
|
|
<p>Individual values have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=common-ligatures>common-ligatures</dfn>
|
|
|
|
<dd>Enables display of common ligatures (OpenType feature:
|
|
<code>liga</code>). For OpenType fonts, common ligatures are enabled by
|
|
default.
|
|
</dl>
|
|
|
|
<div class=featex><img alt="common ligature example" src=liga.png></div>
|
|
|
|
<dl>
|
|
<dt><dfn id=no-common-ligatures>no-common-ligatures</dfn>
|
|
|
|
<dd>Disables display of common ligatures (OpenType feature:
|
|
<code>liga</code>).
|
|
|
|
<dt><dfn id=discretionary-ligatures>discretionary-ligatures</dfn>
|
|
|
|
<dd>Enables display of discretionary ligatures (OpenType feature:
|
|
<code>dlig</code>). Which ligatures are discretionary, or optional, is
|
|
decided by the type designer so authors will need to refer to the
|
|
documentation of a given font to understand which ligatures are
|
|
considered discretionary.
|
|
</dl>
|
|
|
|
<div class=featex><img alt="discretionary ligature example" src=dlig.png></div>
|
|
|
|
<dl>
|
|
<dt><dfn id=no-discretionary-ligatures>no-discretionary-ligatures</dfn>
|
|
|
|
<dd>Disables display of discretionary ligatures (OpenType feature:
|
|
<code>dlig</code>).
|
|
|
|
<dt><dfn id=historical-ligatures>historical-ligatures</dfn>
|
|
|
|
<dd>Enables display of historical ligatures (OpenType feature:
|
|
<code>hlig</code>).
|
|
</dl>
|
|
|
|
<div class=featex><img alt="historical ligature example" src=hlig.png></div>
|
|
|
|
<dl>
|
|
<dt><dfn id=no-historical-ligatures>no-historical-ligatures</dfn>
|
|
|
|
<dd>Disables display of historical ligatures (OpenType feature:
|
|
<code>hlig</code>).
|
|
</dl>
|
|
|
|
<p>Required ligatures, needed for correctly rendering complex scripts, are
|
|
not affected by the settings above.</p>
|
|
<!-- prop: font-variant-caps -->
|
|
|
|
<h3 id=font-variant-caps-prop><span class=secno>6.6 </span>Capitalization:
|
|
the <a href="#propdef-font-variant-caps">font-variant-caps</a> property</h3>
|
|
|
|
<table class=propdef id=namefont-variant-caps>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=propdef-font-variant-caps>font-variant-caps</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>normal | inherit | <caps-value>
|
|
|
|
<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>Specifies control over capitalized forms.
|
|
|
|
<pre
|
|
class=prod><dfn id=ltcaps-valuegt><var><caps-value></var></dfn> = small-caps | all-small-caps | petite-caps | all-petite-caps | titling-caps | unicase</pre>
|
|
|
|
<p>Individual values have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=small-caps>small-caps</dfn>
|
|
|
|
<dd>Enables display of small capitals (OpenType feature:
|
|
<code>smcp</code>). Small-caps glyphs typically use the form of uppercase
|
|
letters but are reduced to the size of lowercase letters.
|
|
</dl>
|
|
|
|
<div class=featex><img alt="small-caps example" src=smcp.png></div>
|
|
|
|
<dl>
|
|
<dt><dfn id=all-small-caps>all-small-caps</dfn>
|
|
|
|
<dd>Enables display of small capitals for both upper and lowercase letters
|
|
(OpenType features: <code>c2sc, smcp</code>).
|
|
|
|
<dt><dfn id=petite-caps>petite-caps</dfn>
|
|
|
|
<dd>Enables display of petite capitals (OpenType feature:
|
|
<code>pcap</code>).
|
|
|
|
<dt><dfn id=all-petite-caps>all-petite-caps</dfn>
|
|
|
|
<dd>Enables display of petite capitals for both upper and lowercase
|
|
letters (OpenType features: <code>c2pc, pcap</code>).
|
|
|
|
<dt><dfn id=titling-caps>titling-caps</dfn>
|
|
|
|
<dd>Enables display of titling capitals (OpenType feature:
|
|
<code>titl</code>). Uppercase letter glyphs are often designed for use
|
|
with lowercase letters. When used in all uppercase titling sequences they
|
|
can appear too strong. Titling capitals are designed specifically for
|
|
this situation.
|
|
|
|
<dt><dfn id=unicase>unicase</dfn>
|
|
|
|
<dd>Enables display of mixture of small capitals for uppercase letters
|
|
with normal lowercase letters (OpenType feature: <code>unic</code>).
|
|
</dl>
|
|
|
|
<p>For backwards compatibility with CSS 2.1, if ‘<code class=property><a
|
|
href="#small-caps">small-caps</a></code>’ or ‘<code class=property><a
|
|
href="#all-small-caps">all-small-caps</a></code>’ is specified but
|
|
small-caps glyphs are not available for a given font, user agents should
|
|
simulate a small-caps font, for example by taking a normal font and
|
|
replacing the lowercase letters by scaled uppercase characters (and also
|
|
uppercase letters in the case of ‘<code class=property><a
|
|
href="#all-small-caps">all-small-caps</a></code>’). 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. If
|
|
either ‘<code class=property><a
|
|
href="#petite-caps">petite-caps</a></code>’ or ‘<code
|
|
class=property><a href="#all-petite-caps">all-petite-caps</a></code>’ is
|
|
specified for a font that doesn't support these features, the property
|
|
behaves as if ‘<code class=property><a
|
|
href="#small-caps">small-caps</a></code>’ or ‘<code class=property><a
|
|
href="#all-small-caps">all-small-caps</a></code>’, respectively, had
|
|
been specified. If ‘<code class=property><a
|
|
href="#titling-caps">titling-caps</a></code>’ is specified with a font
|
|
that does not support these features, this property has no visible effect.
|
|
For scripts that lack uppercase and lowercase letters, ‘<code
|
|
class=property><a href="#small-caps">small-caps</a></code>’, ‘<code
|
|
class=property><a href="#all-small-caps">all-small-caps</a></code>’,
|
|
‘<code class=property><a href="#petite-caps">petite-caps</a></code>’,
|
|
‘<code class=property><a
|
|
href="#all-petite-caps">all-petite-caps</a></code>’ and ‘<code
|
|
class=property><a href="#unicase">unicase</a></code>’ have no visible
|
|
effect.
|
|
|
|
<div class=example>
|
|
<p>Quotes rendered italicised, with small-caps on the first line:</p>
|
|
|
|
<pre>blockquote { font-style: italic; }
|
|
blockquote:first-line { font-variant: small-caps; }
|
|
|
|
<blockquote><a href="http://lists.w3.org/Archives/Public/www-style/2009Dec/0036.html" style="text-decoration: none">I'll be honor-bound to slap them like a haddock.</a></blockquote>
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Insofar as this property causes text to be transformed to uppercase, the
|
|
same considerations as for <span class=property>‘<code
|
|
class=property>text-transform</code>’</span> apply.</p>
|
|
<!-- prop: font-variant-numeric -->
|
|
|
|
<h3 id=font-variant-numeric-prop><span class=secno>6.7 </span>Numerical
|
|
formatting: the <a
|
|
href="#propdef-font-variant-numeric">font-variant-numeric</a> property</h3>
|
|
|
|
<table class=propdef id=namefont-variant-numeric>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=propdef-font-variant-numeric>font-variant-numeric</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>normal | inherit | [ <numeric-figure-values> ||
|
|
<numeric-spacing-values> || <numeric-fraction-values> ||
|
|
slashed-zero ]
|
|
|
|
<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>Specifies control over numerical forms.
|
|
|
|
<pre
|
|
class=prod><dfn id=ltnumeric-figure-valuesgt><var><numeric-figure-values></var></dfn> = [ lining-nums | oldstyle-nums ]</pre>
|
|
|
|
<pre
|
|
class=prod><dfn id=ltnumeric-spacing-valuesgt><var><numeric-spacing-values></var></dfn> = [ proportional-nums | tabular-nums ]</pre>
|
|
|
|
<pre
|
|
class=prod><dfn id=ltnumeric-fraction-valuesgt><var><numeric-fraction-values></var></dfn> = [ diagonal-fractions | stacked-fractions ]</pre>
|
|
|
|
<p>Individual values have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=lining-nums>lining-nums</dfn>
|
|
|
|
<dd>Enables display of lining numerals (OpenType feature:
|
|
<code>lnum</code>).
|
|
|
|
<dt><dfn id=oldstyle-nums>oldstyle-nums</dfn>
|
|
|
|
<dd>Enables display of old-style numerals (OpenType feature:
|
|
<code>onum</code>).
|
|
|
|
<dt><dfn id=proportional-nums>proportional-nums</dfn>
|
|
|
|
<dd>Enables display of proportional numerals (OpenType feature:
|
|
<code>pnum</code>).
|
|
|
|
<dt><dfn id=tabular-nums>tabular-nums</dfn>
|
|
|
|
<dd>Enables display of tabular numerals (OpenType feature:
|
|
<code>tnum</code>).
|
|
</dl>
|
|
|
|
<p>The example below shows how these different properties can be combined
|
|
to influence the rendering of tabular data with fonts that support these
|
|
features. Within normal paragraph text, proportional numbers are used
|
|
while tabular numbers are used so that columns of numbers line up
|
|
properly:
|
|
|
|
<div class=figure style="padding: 0; margin: auto;"><img alt="combining
|
|
number styles" src=numberstyles.png>
|
|
<p class=caption>Using number styles
|
|
</div>
|
|
|
|
<dl>
|
|
<dt><dfn id=diagonal-fractions>diagonal-fractions</dfn>
|
|
|
|
<dd>Enables display of lining diagonal fractions (OpenType feature:
|
|
<code>frac</code>).
|
|
</dl>
|
|
|
|
<div class=featex><img alt="diagonal fraction example" src=frac.png></div>
|
|
|
|
<dl>
|
|
<dt><dfn id=stacked-fractions>stacked-fractions</dfn>
|
|
|
|
<dd>Enables display of lining stacked fractions (OpenType feature:
|
|
<code>afrc</code>).
|
|
</dl>
|
|
|
|
<div class=featex><img alt="stacked fraction example" src=afrc.png></div>
|
|
|
|
<dl>
|
|
<dt><dfn id=slashed-zero>slashed-zero</dfn>
|
|
|
|
<dd>Enables display of slashed zeros (OpenType feature:
|
|
<code>zero</code>).
|
|
</dl>
|
|
|
|
<div class=featex><img alt="slashed zero example" src=zero.png></div>
|
|
|
|
<div class=example id=steak-marinade>
|
|
<p>A simple flank steak marinade recipe, rendered with automatic fractions
|
|
and old-style numerals:</p>
|
|
|
|
<pre>.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; }
|
|
|
|
<h4>Steak marinade:</h4>
|
|
<ul>
|
|
<li><span class="amount">2</span> tbsp olive oil</li>
|
|
<li><span class="amount">1</span> tbsp lemon juice</li>
|
|
<li><span class="amount">1</span> tbsp soy sauce</li>
|
|
<li><span class="amount">1 1/2</span> tbsp dry minced onion</li>
|
|
<li><span class="amount">2 1/2</span> tsp italian seasoning</li>
|
|
<li>Salt &amp; pepper</li>
|
|
</ul>
|
|
|
|
<p>Mix the meat with the marinade and let it sit covered in the refrigerator for a few hours or overnight.</p>
|
|
</pre>
|
|
</div>
|
|
<!-- prop: font-variant-alternates -->
|
|
|
|
<h3 id=font-variant-alternates-prop><span class=secno>6.8 </span>Alternates
|
|
and swashes: the <a
|
|
href="#propdef-font-variant-alternates">font-variant-alternates</a>
|
|
property</h3>
|
|
|
|
<table class=propdef id=namefont-variant-alternates>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn
|
|
id=propdef-font-variant-alternates>font-variant-alternates</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>normal | inherit | [ <contextual-alt-values> ||
|
|
stylistic(<feature-value-name>) || historical-forms ||
|
|
styleset(<feature-value-name> [, <feature-value-name>]*) ||
|
|
character-variant(<feature-value-name>
|
|
[,<feature-value-name>]*) || swash(<feature-value-name>) ||
|
|
ornaments(<feature-value-name>) ||
|
|
annotation(<feature-value-name>) || ruby ]
|
|
|
|
<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>
|
|
|
|
<pre
|
|
class=prod><dfn id=ltcontextual-alt-valuesgt><var><contextual-alt-values></var></dfn> = [ contextual | no-contextual ]</pre>
|
|
|
|
<p>For any given character, fonts can provide a variety of alternate glyphs
|
|
in addition to the default glyph for that character. This property
|
|
provides control over the selection of these alternate glyphs.
|
|
|
|
<p>In cases where multiple alternates are possible, authors define a
|
|
<code><a
|
|
href="#ltfeature-value-namegt"><feature-value-name></a></code> using
|
|
the <code>@font-feature-values</code> rule described below to indicate the
|
|
specific alternate to be used. The nature of these alternates is font
|
|
specific, so the rule defines values for a specific font family or set of
|
|
families. When a particular value has not been defined for a given family,
|
|
the named value is treated as if the feature had omitted from the style
|
|
rule. If a given value is outside the range supported by a given font, the
|
|
value is ignored. These values never apply to generic font families, nor
|
|
to families selected as part of system font fallback. Values that behave
|
|
this way are marked as <em>font specific</em>.
|
|
|
|
<p>Individual values have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn
|
|
id=stylisticltfeature-value-namegt>stylistic(<feature-value-name>)</dfn>
|
|
|
|
|
|
<dd>Enables display of stylistic alternates (<em>font specific</em>,
|
|
OpenType feature: <code>salt <feature-value-name></code>).
|
|
</dl>
|
|
|
|
<div class=featex><img alt="stylistic alternate example" src=salt.png></div>
|
|
|
|
<dl>
|
|
<dt><dfn id=contextual>contextual</dfn>
|
|
|
|
<dd>Enables display of contextual alternates (OpenType feature:
|
|
<code>calt, clig</code>).
|
|
</dl>
|
|
|
|
<div class=featex><img alt="contextual alternate example" src=calt.png></div>
|
|
|
|
<dl>
|
|
<dt><dfn id=no-contextual>no-contextual</dfn>
|
|
|
|
<dd>Disables display of contextual alternates (OpenType feature:
|
|
<code>calt, clig</code>).
|
|
|
|
<dt><dfn id=historical-forms>historical-forms</dfn>
|
|
|
|
<dd>Enables display of historical forms (OpenType feature:
|
|
<code>hist</code>).
|
|
</dl>
|
|
|
|
<div class=featex><img alt="historical form example" src=hist.png></div>
|
|
|
|
<dl>
|
|
<dt><dfn
|
|
id=stylesetltfeature-value-namegt>styleset(<feature-value-name>
|
|
[,<feature-value-name>]*)</dfn>
|
|
|
|
<dd>Enables display with stylistic sets (<em>font specific</em>, OpenType
|
|
feature: <code>ss<feature-index></code> OpenType currently defines
|
|
<code>ss01</code> through <code>ss20</code>).
|
|
</dl>
|
|
|
|
<div class=featex><img alt="styleset example" src=ssnn.png></div>
|
|
|
|
<dl>
|
|
<dt><dfn
|
|
id=character-variantltfeature-value-namegt>character-variant(<feature-value-name>
|
|
[,<feature-value-name>]*)</dfn>
|
|
|
|
<dd>Enables display of specific character variants (<em>font
|
|
specific</em>, OpenType feature: <code>cv<feature-index></code>
|
|
OpenType currently defines <code>cv01</code> through <code>cv99</code>).
|
|
|
|
<dt><dfn
|
|
id=swashltfeature-value-namegt>swash(<feature-value-name>)</dfn>
|
|
|
|
<dd>Enables display of swash glyphs (<em>font specific</em>, OpenType
|
|
feature: <code>swsh <feature-index>, cswh
|
|
<feature-index></code>).
|
|
</dl>
|
|
|
|
<div class=featex><img alt="swash example" src=swsh.png></div>
|
|
|
|
<dl>
|
|
<dt><dfn
|
|
id=ornamentsltfeature-value-namegt>ornaments(<feature-value-name>)</dfn>
|
|
|
|
|
|
<dd>Enables replacement of default glyphs with ornaments, if provided in
|
|
the font (<em>font specific</em>, OpenType feature: <code>ornm
|
|
<feature-index></code>). Some fonts may offer ornament glyphs as
|
|
alternates for a wide collection of characters; however, displaying
|
|
arbitrary characters (e.g., alphanumerics) as ornaments is poor practice
|
|
as it distorts the semantics of the data. Font designers are encouraged
|
|
to encode all ornaments (except those explicitly encoded in the Unicode
|
|
Dingbats blocks, etc.) as alternates for the bullet character (U+2022) to
|
|
allow authors to select the desired glyph using
|
|
<feature-value-name>.
|
|
</dl>
|
|
|
|
<div class=featex><img alt="ornaments example" src=ornm.png></div>
|
|
|
|
<dl>
|
|
<dt><dfn
|
|
id=annotationltfeature-value-namegt>annotation(<feature-value-name>)</dfn>
|
|
|
|
|
|
<dd>Enables display of alternate annotation forms (<em>font specific</em>,
|
|
OpenType feature: <code>nalt <feature-index></code>).
|
|
</dl>
|
|
|
|
<div class=featex><img alt="alternate annotation form example"
|
|
src=nalt.png></div>
|
|
|
|
<dl>
|
|
<dt><dfn id=ruby>ruby</dfn>
|
|
|
|
<dd>Enables display of ruby variant glyphs (OpenType feature:
|
|
<code>ruby</code>). This value only selects a glyph for use in ruby text,
|
|
it does not affect font scaling. The red ruby text below is shown with
|
|
default glyphs (top) and with ruby variant glyphs (bottom). Note the
|
|
slight difference in stroke thickness.
|
|
</dl>
|
|
|
|
<div class=featex><img alt="ruby variant example" src=rubyshinkansen.png></div>
|
|
|
|
<h3 id=font-feature-values><span class=secno>6.9 </span>Defining font
|
|
specific alternates: the @font-feature-values rule</h3>
|
|
|
|
<p>Several of the possible values of ‘<code class=property><a
|
|
href="#propdef-font-variant-alternates">font-variant-alternates</a></code>’
|
|
listed above are labeled as "font specific". For these features fonts may
|
|
define not just a single glyph but a set of alternate glyphs with an index
|
|
to select a given alternate. Since these are font family specific, the
|
|
@font-feature-values rule is used to define named-values for these indices
|
|
for a given family.
|
|
|
|
<p>In the case of the swash Q in the example shown above, the swash could
|
|
be specified using these style rules:
|
|
|
|
<pre>
|
|
@font-feature-values Jupiter Sans {
|
|
@swash delicate 1, flowing 2;
|
|
}
|
|
|
|
h2 { font-family: Jupiter Sans, sans-serif; }
|
|
|
|
/* show the second swash variant in h2 headings */
|
|
h2:first-letter { font-variant-alternates: swash(flowing); }
|
|
|
|
<h2>Quick</h2></pre>
|
|
|
|
<p>When Jupiter Sans is present, the second alternate swash alternate will
|
|
be displayed. When not present, no swash character will be shown, since
|
|
the specific named-value "flowing" is only defined for the Jupiter Sans
|
|
family. The @-mark indicates the name of the property value for which a
|
|
named-value can be used. The name "flowing" is chosen by the author.
|
|
|
|
<p>The syntax of the @font-feature-values rule is defined as:
|
|
|
|
<pre>
|
|
@font-feature-values <font-family> [, <font-family>]* {
|
|
<font-variant-value-definition>;
|
|
<font-variant-value-definition>;
|
|
.
|
|
.
|
|
}
|
|
</pre>
|
|
|
|
<p>where:
|
|
|
|
<pre
|
|
class=prod><dfn id=ltfont-variant-value-definitiongt><var><font-variant-value-definition></var></dfn> = @<font-variant-value> <feature-value-list> [, <feature-value-list>]*</pre>
|
|
|
|
<pre
|
|
class=prod><dfn id=ltfont-familygt><var><font-family></var></dfn> = font family name, quoted or unquoted, using the same quoting rules that apply within style rules</pre>
|
|
|
|
<pre
|
|
class=prod><dfn id=ltfont-variant-valuegt><var><font-variant-value></var></dfn> = the name of one of the font-specific font-variant values (e.g. swash, styleset, annotation)</pre>
|
|
|
|
<pre
|
|
class=prod><dfn id=ltfeature-value-listgt><var><feature-value-list></var></dfn> = <feature-value-name> <feature-index>+</pre>
|
|
|
|
<pre
|
|
class=prod><dfn id=ltfeature-value-namegt><var><feature-value-name></var></dfn> = a user-defined identifier used to describe the index</pre>
|
|
|
|
<pre
|
|
class=prod><dfn id=ltfeature-indexgt><var><feature-index></var></dfn> = an integer value greater than 0 specific to a given font or set of fonts</pre>
|
|
|
|
<p>These @font-feature-values rules can appear anywhere within a stylesheet
|
|
and are exposed bidirectionally across @import boundaries. If multiple
|
|
@font-feature-values rules are defined for a given family, the resulting
|
|
values defined are the union of these rules. This allows a set of
|
|
named-values to be defined for a given font family globally for a site and
|
|
specific additions made per-page. If the same <feature-value-name>
|
|
is defined mulitple times for a given font-variant value, the last defined
|
|
value is used.
|
|
|
|
<pre>
|
|
site.css:
|
|
|
|
@font-feature-values Mercury Serif {
|
|
@styleset stacked-g 3, stacked-a 4; /* "two-storey" versions of g, a */
|
|
}
|
|
|
|
page.css:
|
|
|
|
@font-feature-values Mercury Serif {
|
|
@styleset geometric-m 7; /* alternate version of m */
|
|
}
|
|
|
|
body {
|
|
font-family: Mercury Serif, serif;
|
|
|
|
/* enable both the use of stacked g and alternate m */
|
|
font-variant-alternates: styleset(stacked-g, geometric-m);
|
|
}</pre>
|
|
|
|
<p>Only named font families are allowed for <font-family>, rules
|
|
defined for generic and system fonts must be ignored. However, if a user
|
|
agent defines a generic font to be a specific named font (e.g. Helvetica),
|
|
the settings associated with that family name will be used.
|
|
|
|
<p>For font-variant-value, only font-specific value names supported by the
|
|
‘<code class=property><a
|
|
href="#propdef-font-variant">font-variant</a></code>’ property are
|
|
recognized, definitions for other value names are a syntax error and
|
|
ignored. Each value that is font specific is clearly marked as such.
|
|
Feature value names follow the rules of CSS identifiers and are unique
|
|
only for a given set of font families and font variant value; the same
|
|
identifier used with a different font variant value is treated as a
|
|
distinct value.
|
|
|
|
<p>Using a commonly named value allows authors to use a single style rule
|
|
to cover a set of fonts for which the underlying selector is different for
|
|
each font. If either font in the example below is found, a circled number
|
|
glyph will be used:
|
|
|
|
<pre>@font-feature-values Taisho Gothic {
|
|
@annotation boxed 1, circled 4;
|
|
}
|
|
|
|
@font-feature-values Otaru Kisa {
|
|
@annotation circled 1, black-boxed 3;
|
|
}
|
|
|
|
h3.title {
|
|
/* circled form defined for both fonts */
|
|
font-family: Taisho Gothic, Otaru Kisa;
|
|
font-variant: annotation(circled);
|
|
}</pre>
|
|
|
|
<p>Most font-specific font-variant values take a single value (e.g. swash).
|
|
If multiple values are assigned to a given name a syntax error occurs and
|
|
the entire <font-variant-value-definition> is ignored. For the
|
|
styleset value, multiple values can be assigned to a given name. Multiple
|
|
values indicate the style sets to be enabled. Values between 1 and 20
|
|
enable OpenType features ‘<code class=css>ss01</code>’ through
|
|
‘<code class=css>ss20</code>’. Values greater than 20 are ignored.
|
|
|
|
<pre>@font-feature-values Mars Serif {
|
|
@styleset alt-g 1, /* implies ss01 = 1 */
|
|
curly-quotes 3, /* implies ss03 = 1 */
|
|
code 4 5; /* implies ss04 = 1, ss05 = 1 */
|
|
}
|
|
|
|
p.codeblock {
|
|
/* implies ss03 = 1, ss04 = 1, ss05 = 1 */
|
|
font-variant-alternates: styleset(curly-quotes, code);
|
|
}</pre>
|
|
|
|
<p>For character-variant, a single value between 1 and 99 indicates the
|
|
enabling of OpenType feature ‘<code class=css>cv01</code>’ through
|
|
‘<code class=css>cv99</code>’. Values greater than 99 are ignored.
|
|
When two values are listed, the first value indicates the feature used and
|
|
the second the value passed for that feature. Values beyond the first two
|
|
are ignored.
|
|
|
|
<pre>@font-feature-values MM Greek {
|
|
@character-variant alpha-2 1 2; /* implies cv01 = 2 */
|
|
@character-variant beta-3 2 3; /* implies cv02 = 3 */
|
|
@character-variant gamma 12; /* implies cv12 = 1 */
|
|
@character-variant zeta 20 3 2; /* implies cv20 = 3, '2' is ignored */
|
|
@character-variant silly 105; /* >99, ignored */
|
|
@character-variant dumb 323 3; /* >99, ignored */
|
|
}
|
|
|
|
#title {
|
|
/* use the third alternate beta, first alternate gamma */
|
|
font-variant-alternates: character-variant(beta-3, gamma);
|
|
}</pre>
|
|
|
|
<p>See <a href="#font-feature-values-DOM">Appendix C</a> for a description
|
|
of the interfaces used to modify these rules via the CSS Object Model.
|
|
|
|
<div class=figure><img alt="Matching text on Byzantine seals using
|
|
character variants" src=byzantineseal.png>
|
|
<p class=caption>Byzantine seal text displayed with character variants
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>In the figure above, the text in red is rendered using a font
|
|
containing character variants that mimic the character forms found on a
|
|
Byzantine seal from the 8th century A.D. Two lines below is the same text
|
|
displayed in a font without variants. Note the two variants for U and N
|
|
used on the seal.</p>
|
|
|
|
<pre>@font-feature-values Athena Ruby {
|
|
@character-variant
|
|
leo-B 2 1, leo-M 13 3,
|
|
leo-alt-N 14 1, leo-N 14 2,
|
|
leo-T 20 1,
|
|
leo-U 21 2, leo-alt-U 21 4;
|
|
}
|
|
|
|
p {
|
|
font-variant: discretionary-ligatures, character-variant(leo-B, leo-M, leo-N, leo-T, leo-U);
|
|
}
|
|
|
|
span.alt-N {
|
|
font-variant-alternates: character-variant(leo-alt-N);
|
|
}
|
|
|
|
span.alt-U {
|
|
font-variant-alternates: character-variant(leo-alt-U);
|
|
}
|
|
|
|
<p>ENO....UP͞RSTU<span class="alt-U">U</span>͞<span class="alt-U">U</span>ΚΑΙTỤẠG̣IUPNS</p>
|
|
|
|
<p>LEON|ΚΑΙCONSTA|NTI<span class="alt-N">N</span>OS..|STOIBAṢ.|LIṢROM|AIO<span class="alt-N">N</span></p>
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id=font-variant-east-asian-prop><span class=secno>6.10 </span>East
|
|
Asian text rendering: the <a
|
|
href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
|
|
property</h3>
|
|
|
|
<table class=propdef id=namefont-variant-east-asian>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn
|
|
id=propdef-font-variant-east-asian>font-variant-east-asian</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>normal | inherit | [ <east-asian-variant-values> ||
|
|
<east-asian-width-values> ]
|
|
|
|
<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>Allows control of glyph substitute and positioning in East Asian text.
|
|
In cases where multiple alternates are possible, an integer is included to
|
|
indicate the index of the alternate to be used. Omitting the integer
|
|
indicates the first alternate.
|
|
|
|
<pre
|
|
class=prod><dfn id=lteast-asian-variant-valuesgt><var><east-asian-variant-values></var></dfn> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]</pre>
|
|
|
|
<pre
|
|
class=prod><dfn id=lteast-asian-width-valuesgt><var><east-asian-width-values></var></dfn> = [ full-width | proportional-width ]</pre>
|
|
|
|
<p>Individual values have the following meanings:
|
|
|
|
<dl>
|
|
<dt><dfn id=jis78>jis78</dfn>
|
|
|
|
<dd>Enables rendering of JIS78 forms (OpenType feature:
|
|
<code>jp78</code>).
|
|
</dl>
|
|
|
|
<div class=featex><img alt="JIS78 form example" src=jp78.png></div>
|
|
|
|
<dl>
|
|
<dt><dfn id=jis83>jis83</dfn>
|
|
|
|
<dd>Enables rendering of JIS83 forms (OpenType feature:
|
|
<code>jp83</code>).
|
|
|
|
<dt><dfn id=jis90>jis90</dfn>
|
|
|
|
<dd>Enables rendering of JIS90 forms (OpenType feature:
|
|
<code>jp90</code>).
|
|
|
|
<dt><dfn id=jis04>jis04</dfn>
|
|
|
|
<dd>Enables rendering of JIS2004 forms (OpenType feature:
|
|
<code>jp04</code>).
|
|
|
|
<dt><dfn id=simplified>simplified</dfn>
|
|
|
|
<dd>Enables rendering of simplified forms (OpenType feature:
|
|
<code>smpl</code>).
|
|
|
|
<dt><dfn id=traditional>traditional</dfn>
|
|
|
|
<dd>Enables rendering of traditional forms (OpenType feature:
|
|
<code>trad</code>).
|
|
</dl>
|
|
|
|
<div class=featex><img alt="tradtional form example" src=trad.png></div>
|
|
|
|
<dl>
|
|
<dt><dfn id=full-width>full-width</dfn>
|
|
|
|
<dd>Enables rendering of full-width variants (OpenType feature:
|
|
<code>fwid</code>).
|
|
|
|
<dt><dfn id=proportional-width>proportional-width</dfn>
|
|
|
|
<dd>Enables rendering of proportionally-spaced variants (OpenType feature:
|
|
<code>pwid</code>).
|
|
</dl>
|
|
|
|
<div class=featex><img alt="proportionally spaced Japanese example"
|
|
src=pwid.png></div>
|
|
|
|
<h3 id=font-variant-prop><span class=secno>6.11 </span>Overall shorthand
|
|
for font rendering: the <a href="#propdef-font-variant">font-variant</a>
|
|
property</h3>
|
|
|
|
<table class=propdef id=namefont-variant>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=propdef-font-variant>font-variant</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>normal | inherit | [ <common-lig-values> ||
|
|
<discretionary-lig-values> || <historical-lig-values> ||
|
|
<contextual-alt-values> || stylistic(<feature-value-name>)
|
|
|| historical-forms || styleset(<feature-value-name> [,
|
|
<feature-value-name>]*) ||
|
|
character-variant(<feature-value-name>
|
|
[,<feature-value-name>]*) || swash(<feature-value-name>) ||
|
|
ornaments(<feature-value-name>) ||
|
|
annotation(<feature-value-name>) || ruby || <caps-value> ||
|
|
<numeric-figure-values> || <numeric-spacing-values> ||
|
|
<numeric-fraction-values> || slashed-zero ||
|
|
<east-asian-variant-values> || <east-asian-width-values> ]
|
|
|
|
<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 value ‘<code class=property>normal</code>’ resets all other font
|
|
feature properties to normal and font defaults are used when rendering
|
|
text. Like other shorthands, using ‘<code class=property><a
|
|
href="#propdef-font-variant">font-variant</a></code>’ resets all font
|
|
feature properties to their initial values. It does not reset the values
|
|
of either ‘<code class=property><a
|
|
href="#propdef-font-language-override">font-language-override</a></code>’
|
|
or ‘<code class=property><a
|
|
href="#propdef-font-feature-settings">font-feature-settings</a></code>’.
|
|
|
|
<h3 id=font-feature-settings-prop><span class=secno>6.12 </span>Low-level
|
|
font feature settings control: the <a
|
|
href="#propdef-font-feature-settings">font-feature-settings</a> property</h3>
|
|
|
|
<table class=propdef id=namefont-feature-settings>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=propdef-font-feature-settings>font-feature-settings</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>normal | <feature-tag-value> [, <feature-tag-value>]*
|
|
|
|
<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>This property provides low-level control over OpenType font features. It
|
|
is intended as a way of providing access to font features that are not
|
|
widely used but are needed for a particular use case. A value of ‘<code
|
|
class=property>normal</code>’ means that no change in glyph selection or
|
|
positioning occurs due to this property.
|
|
|
|
<p>
|
|
|
|
<pre>/* enable small caps and use second swash alternate */
|
|
font-feature-settings: "smcp", "swsh" 2;</pre>
|
|
|
|
<p>Feature tag values have the following syntax:
|
|
|
|
<pre
|
|
class=prod><dfn id=ltfeature-tag-valuegt><var><feature-tag-value></var></dfn> = <string> [ <integer> | on | off ]?</pre>
|
|
|
|
<p>The <string> is a case-sensitive OpenType feature tag. For it to
|
|
match an OpenType feature contained in a font, it must follow the syntax
|
|
rules for tags. As specified in the OpenType specification, feature tags
|
|
contain four characters. Tag strings longer than four characters must be
|
|
ignored, user agents must not use a feature tag created by truncating the
|
|
string to four characters. Feature tags need only match a feature tag
|
|
defined in the font, they are not limited to explicitly registered
|
|
OpenType features. Fonts defining custom feature tags should follow the <a
|
|
href="http://www.microsoft.com/typography/otspec/featuretags.htm">tag name
|
|
rules</a> defined in the OpenType specification <a
|
|
href="#OPENTYPE-FEATURES"
|
|
rel=biblioentry>[OPENTYPE-FEATURES]<!--{{!OPENTYPE-FEATURES}}--></a>.
|
|
Feature tags not present in the font are ignored; a user agent must not
|
|
attempt to synthesize fallback behavior based on these feature tags.
|
|
|
|
<p>If present, a value indicates an index used for glyph selection. An
|
|
<integer> value must be 0 or greater. A value of 0 indicates that
|
|
the feature is disabled. For boolean features, a value of 1 enables the
|
|
feature. For non-boolean features, a value of 1 or greater enables the
|
|
feature and indicates the feature selection index. A value of ‘<code
|
|
class=property>on</code>’ is synonymous with 1 and ‘<code
|
|
class=property>off</code>’ is synonymous with 0. If the value is
|
|
omitted, a value of 1 is assumed.
|
|
|
|
<pre>
|
|
font-feature-settings: "dlig" 1; /* dlig=1 enable discretionary ligatures */
|
|
font-feature-settings: "smcp" on; /* smcp=1 enable small caps */
|
|
font-feature-settings: 'c2sc'; /* c2sc=1 enable caps to small caps */
|
|
font-feature-settings: "liga" off; /* liga=0 no common ligatures */
|
|
font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms */
|
|
font-feature-settings: "palin" off; /* good idea but invalid tagname, ignored */
|
|
font-feature-settings: "PKRN"; /* PKRN=1 enable custom feature */
|
|
</pre>
|
|
|
|
<p>Authors should generally use ‘<code class=property><a
|
|
href="#propdef-font-variant">font-variant</a></code>’ and its related
|
|
subproperties whenever possible and only use this property for special
|
|
cases where its use is the only way of accessing a particular infrequently
|
|
used font feature.
|
|
|
|
<p>Although specifically defined for OpenType feature tags, feature tags
|
|
for other modern font formats that support font features may be added in
|
|
the future.
|
|
|
|
<p class=issue>While the use of quotes distinguishes feature tags as
|
|
defined in an external resource, they still seem a bit clumsy.
|
|
|
|
<div class=example>
|
|
<p>The Japanese text below will be rendered with half-width kana
|
|
characters:</p>
|
|
|
|
<pre lang=ja>
|
|
body { font-feature-settings: "hwid"; /* Half-width OpenType feature */ }
|
|
|
|
<p>毎日<a href="http://images.google.com/images?q=%E3%82%AB%E3%83%AC%E3%83%BC" style="text-decoration: none;">カレー</a>食べてるのに、飽きない</p>
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id=font-language-override-prop><span class=secno>6.13 </span>Font
|
|
language override: the <a
|
|
href="#propdef-font-language-override">font-language-override</a> property</h3>
|
|
|
|
<table class=propdef id=namefont-language-override>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=propdef-font-language-override>font-language-override</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>normal | inherit | <string>
|
|
|
|
<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 value of ‘<code class=property>normal</code>’ implies that when
|
|
rendering with OpenType fonts the language of the document is used to
|
|
infer the OpenType language system, used to select language specific
|
|
features when rendering. The value of the <string> is a single
|
|
three-letter OpenType <a
|
|
href="http://www.microsoft.com/typography/otspec/languagetags.htm">language
|
|
system tag</a>, defined in the layout tag registry of the OpenType
|
|
specification.
|
|
|
|
<div class=example>
|
|
<p>The <a
|
|
href="http://www.ohchr.org/EN/UDHR/Pages/Introduction.aspx">Universal
|
|
Declaration of Human Rights</a> has been translated into a wide variety
|
|
of languages. In Turkish, Article 9 of this document might be marked up
|
|
as below:</p>
|
|
|
|
<pre lang=tr><body lang="tr">
|
|
|
|
<h4>Madde 9</h4>
|
|
<p>Hiç kimse keyfi olarak tutuklanamaz, alıkonulanamaz veya sürülemez.</p>
|
|
</pre>
|
|
|
|
<p>Here the user agent uses the value of the ‘<code
|
|
class=property>lang</code>’ attribute when rendering text and
|
|
appropriately renders this text without ‘<code
|
|
class=property>fi</code>’ ligatures. There is no need to use the
|
|
‘<code class=property><a
|
|
href="#propdef-font-language-override">font-language-override</a></code>’
|
|
property.</p>
|
|
|
|
<p>However, a given font may lack support for a specific language. In this
|
|
situation authors may need to use the typographic conventions of a
|
|
related language that are supported by that font:</p>
|
|
|
|
<pre lang=mk><body lang="mk"> <!-- Macedonian lang code -->
|
|
|
|
body { font-language-override: "SRB"; /* Serbian OpenType language tag */ }
|
|
|
|
<h4>Члeн 9</h4>
|
|
<p>Никoj чoвeк нeмa дa бидe пoдлoжeн нa прoизвoлнo aпсeњe, притвoр или прoгoнувaњe.</p>
|
|
|
|
</pre>
|
|
|
|
<p>The Macedonian text here will be rendered using Serbian typographic
|
|
conventions, with the assumption that the font specified supports
|
|
Serbian.</p>
|
|
</div>
|
|
|
|
<h2 id=rendering-considerations><span class=secno>7 </span>Resolving font
|
|
feature settings</h2>
|
|
|
|
<p>General and font-specific font feature property settings are resolved in
|
|
the order below, in low to high precedence. This ordering is used to
|
|
construct a combined list of font features that affect a given text run.
|
|
These features are applied on top of layout engine defaults.
|
|
|
|
<ol>
|
|
<li>If the font is defined via an @font-face rule, the font features
|
|
implied by the font-variant descriptor in the @font-face rule.
|
|
|
|
<li>If the font is defined via an @font-face rule, the font features
|
|
implied by the font-feature-settings descriptor in the @font-face rule.
|
|
|
|
<li>Font features implied by the value of the ‘<code class=property><a
|
|
href="#propdef-font-variant">font-variant</a></code>’ property, the
|
|
related font-variant subproperties and any other CSS property that may
|
|
use OpenType features (e.g. the ‘<code class=property><a
|
|
href="#propdef-font-kerning">font-kerning</a></code>’ property).
|
|
|
|
<li>Font features implied by the value of ‘<code class=property><a
|
|
href="#propdef-font-feature-settings">font-feature-settings</a></code>’
|
|
property.
|
|
</ol>
|
|
|
|
<p>This ordering allows authors to set up a general set of defaults for
|
|
fonts within their @font-face rules, then override them with property
|
|
settings for specific elements. General property settings override the
|
|
settings in @font-face rules and low-level font feature settings override
|
|
‘<code class=property><a
|
|
href="#propdef-font-variant">font-variant</a></code>’ property settings.
|
|
|
|
|
|
<p>For situations where the combined list of font feature settings contains
|
|
more than one value for the same feature, the last value is used. When a
|
|
font lacks support for a given underlying font feature, text is simply
|
|
rendered as if that font feature was not enabled; font fallback does not
|
|
occur and no attempt is made to synthesize the feature except where
|
|
explicitly noted for specific properties.
|
|
|
|
<div class=example>
|
|
<p>With the styles below, numbers are rendered proportionally when used
|
|
within a paragraph but are shown in tabular form within tables of prices:</p>
|
|
|
|
<pre>body {
|
|
font-variant-numeric: proportional-nums;
|
|
}
|
|
|
|
table.prices td {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>When the font-variant descriptor is used within an @font-face rule, it
|
|
only applies to the font defined by that rule.</p>
|
|
|
|
<pre>@font-face {
|
|
font-family: MainText;
|
|
src: url(http://example.com/font.ttf);
|
|
font-variant: oldstyle-nums proportional-nums styleset(1,3);
|
|
}
|
|
|
|
body {
|
|
font-family: MainText, Helvetica;
|
|
}
|
|
|
|
table.prices td {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
</pre>
|
|
|
|
<p>In this case, old-style numerals will be used throughout but only where
|
|
the font "MainText" is used. Just as in the previous example, tabular
|
|
values will be used in price tables since ‘<code class=property><a
|
|
href="#tabular-nums">tabular-nums</a></code>’ appears in a general
|
|
style rule and its use is mutually exclusive with ‘<code
|
|
class=property><a
|
|
href="#proportional-nums">proportional-nums</a></code>’. Stylistic
|
|
alternate sets will only be used where MainText is used.</p>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>The @font-face rule can also be used to access font features in locally
|
|
available fonts via the use of local() in the ‘<code class=property><a
|
|
href="#descdef-src">src</a></code>’ descriptor of the @font-face
|
|
definition:</p>
|
|
|
|
<pre>@font-face {
|
|
font-family: BodyText;
|
|
src: local("HiraMaruPro-W4");
|
|
font-variant: proportional-width;
|
|
font-feature-settings: "ital"; /* Latin italics within CJK text feature */
|
|
}
|
|
|
|
body { font-family: BodyText, serif; }
|
|
</pre>
|
|
|
|
<p>If available, a Japanese font "Hiragino Maru Gothic" will be used. When
|
|
text rendering occurs, Japanese kana will be proportionally spaced and
|
|
Latin text will be italicised. Text rendered with the fallback serif font
|
|
will use default rendering properties.</p>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>In the example below, discretionary ligatures are enabled only for a
|
|
downloadable font but are disabled within spans of class "special":</p>
|
|
|
|
<pre>@font-face {
|
|
font-family: main;
|
|
src: url(fonts/ffmeta.woff) format("woff");
|
|
font-variant: discretionary-ligatures;
|
|
}
|
|
|
|
body { font-family: main, Helvetica; }
|
|
span.special { font-variant-ligatures: no-discretionary-ligatures; }
|
|
</pre>
|
|
|
|
<p>Adding an discretionary style rule with the @font-face above:</p>
|
|
|
|
<pre>body { font-family: main, Helvetica; }
|
|
span { font-feature-settings: "dlig"; }
|
|
span.special { font-variant-ligatures: no-discretionary-ligatures; }
|
|
</pre>
|
|
|
|
<p>Within spans of class "special", discretionary ligatures <em>will</em>
|
|
be rendered. This is because both the ‘<code class=property><a
|
|
href="#propdef-font-feature-settings">font-feature-settings</a></code>’
|
|
and ‘<code class=property><a
|
|
href="#propdef-font-variant-ligatures">font-variant-ligatures</a></code>’
|
|
properties apply to these spans. Although the ‘<code
|
|
class=css>no-discretionary ligatures</code>’ setting of ‘<code
|
|
class=property><a
|
|
href="#propdef-font-variant-ligatures">font-variant-ligatures</a></code>’
|
|
effectively disables the OpenType <code>dlig</code> feature, because the
|
|
‘<code class=property><a
|
|
href="#propdef-font-feature-settings">font-feature-settings</a></code>’
|
|
is resolved after that, the ‘<code class=property>dlig</code>’ value
|
|
reenables discretionary ligatures.</p>
|
|
</div>
|
|
<!-- simple example of using both font-variant subproperty and descriptor value -->
|
|
<!-- example showing conflicting values and how they are resolved -->
|
|
|
|
<h2 class=no-num id=platform-props-to-css>Appendix A: Mapping platform font
|
|
properties to CSS properties</h2>
|
|
|
|
<p><em>This appendix 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>Font properties in CSS are designed to be independent of the underlying
|
|
font formats used; they can be used to specify bitmap fonts, Type1 fonts,
|
|
SVG fonts in addition to the common TrueType and OpenType fonts. But there
|
|
are facets of the TrueType and OpenType formats that often cause confusion
|
|
for authors and present challenges to implementers on different platforms.
|
|
|
|
|
|
<p>Originally developed at Apple, TrueType was designed as an outline font
|
|
format for both screen and print. Microsoft joined Apple in developing the
|
|
TrueType format and both platforms have supported TrueType fonts since
|
|
then. Font data in the TrueType format consists of a set of tables
|
|
distinguished with common four-letter tag names, each containing a
|
|
specific type of data. For example, naming information, including
|
|
copyright and license information, is stored in the ‘<code
|
|
class=property>name</code>’ table. The character map (‘<code
|
|
class=property>cmap</code>’) table contains a mapping of character
|
|
encodings to glyphs. Apple later added additional tables for supporting
|
|
enhanced typographic functionality; these are now called Apple Advanced
|
|
Typography, or AAT, fonts. Microsoft and Adobe developed a separate set of
|
|
tables for advanced typography and called their format OpenType <a
|
|
href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>.
|
|
|
|
<p>In many cases the font data used under Microsoft Windows or Linux is
|
|
slightly different from the data used under Apple's Mac OS X because the
|
|
TrueType format allowed for variation across platforms. This includes font
|
|
metrics, names and character map data.
|
|
|
|
<p>Font family names for TrueType and OpenType fonts are contained in the
|
|
‘<code class=property>name</code>’ table, in name records with name ID
|
|
1. Mulitple names can be stored for different locales but Microsoft
|
|
recommends fonts always include at least a US English version of the name.
|
|
On Windows, the family name can only be used for a maximum of four faces;
|
|
for larger groupings the "preferred family" (name ID 16) or "WWS family"
|
|
(name ID 21) can be used. The full font name (name ID 4) and the
|
|
Postscript name (name ID 6) describe a single face uniquely. The bold face
|
|
of the Gill Sans family has a fullname of "Gill Sans Bold" and a
|
|
Postscript name of "GillSans-Bold". There can be multiple localized
|
|
versions of the fullname for a given face but the Postscript name is
|
|
always a unique name made from a limited set of ASCII characters.
|
|
|
|
<p>On various platforms, different names are used to search for a font. For
|
|
example, with the Windows GDI CreateIndirectFont API, either a family or
|
|
fullname can be used to lookup a face while on Mac OS X the
|
|
ATSFontFindFromName and ATSFontFindFromPostScriptName API calls are used
|
|
to lookup a given face using the fullname and Postscript name. Under
|
|
Linux, the fontconfig API allows fonts to be searched using any of these
|
|
names. In situations where platform API's automatically substitute other
|
|
font choices, it may be necessary to verify a returned font matches a
|
|
given name.
|
|
|
|
<p>The weight of a given face can be determined via the usWeightClass field
|
|
of the OS/2 table or inferred from the style name (name ID 2). Likewise,
|
|
the width can be determined via the usWidthClass of the OS/2 table or
|
|
inferred from the style name. For historical reasons, font designers have
|
|
sometimes skewed values in the OS/2 table to work around problems in the
|
|
Windows GDI API.
|
|
|
|
<p>Rendering complex scripts that use contextual shaping such as Thai,
|
|
Arabic and Devanagari requires features present only in OpenType or AAT
|
|
fonts. Currently, complex script rendering is supported on Windows and
|
|
Linux using OpenType font features while AAT font features are used under
|
|
Mac OS X. Apple has indicated it intends to support complex script
|
|
rendering using OpenType font features in the future.
|
|
|
|
<p class=issue>Need to define normatively how WWS names are handled across
|
|
platforms.
|
|
|
|
<h2 class=no-num id=font-licensing>Appendix B: Font licensing issues</h2>
|
|
|
|
<p><em>This appendix is informative only.</em>
|
|
|
|
<p>The use of fonts on the web is often surrounded in controversy. Font
|
|
designers expend huge amounts of effort to create their designs,
|
|
painstakingly refining letterforms and tuning font data to assure that the
|
|
letterforms appear as desired both in print and on the screen. As a result
|
|
they often license their fonts very carefully, often with somewhat complex
|
|
terms. Authors who want to use specific fonts via a downloadable font
|
|
mechanism must always carefully verify that their intended use is within
|
|
the scope of the font license. Many commercial fonts presently do not
|
|
allow web downloading of their fonts in any form. Font formats often store
|
|
references to the font license within the font data itself. When in doubt,
|
|
it is best to verify with the font designer directly. Vendors that bundle
|
|
fonts with their products are also strongly encouraged to carefully
|
|
explain the license details that covers the fonts they bundle.
|
|
|
|
<div class=example>
|
|
<p>An author would like to use <a
|
|
href="http://www.typography.com/fonts/font_overview.php?productLineID=
|
|
100008">Gotham</a>, a font designed by Hoefler & Frere-Jones, as a
|
|
downloadable font for their webpages. But the <a
|
|
href="http://www.typography.com/home/eula.php">end-user license
|
|
agreement</a> that covers Gotham specifically notes that usage via
|
|
@font-face rules in CSS style sheets is not allowed. The author cannot
|
|
link to this font in their web pages.</p>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>An author wants to use <a
|
|
href="http://scripts.sil.org/gentium">Gentium</a>, a font developed by
|
|
SIL International. This font is licensed under the terms of the <a
|
|
href="http://scripts.sil.org/ofl">Open Font License</a>, so as long as
|
|
the author follows the relatively liberal terms of this license, they can
|
|
use Gentium as a downloadable font for their web pages.</p>
|
|
</div>
|
|
|
|
<h2 class=no-num id=font-feature-values-DOM>Appendix C: DOM Interfaces</h2>
|
|
|
|
<p><em>This appendix is normative.</em>
|
|
|
|
<p>Font feature values defined within <code>@font-feature-values</code>
|
|
rules are accessible via the following modifications to the CSS Object
|
|
Model.
|
|
|
|
<dl>
|
|
<dt><b>Interface <i><a id=DOM-CSSRule name=DOM-CSSRule>CSSRule</a></i></b>
|
|
|
|
<dd>
|
|
<p>The following additional rule type is added to the
|
|
<code>CSSRule</code> interface.</p>
|
|
|
|
<dl>
|
|
<dt><b>IDL Definition</b>
|
|
|
|
<dd>
|
|
<div class=idl-code>
|
|
<pre>
|
|
interface CSSRule {
|
|
...
|
|
const unsigned short FONT_FEATURE_VALUES_RULE = 11;
|
|
...
|
|
};</pre>
|
|
</div>
|
|
</dd>
|
|
<!-- IDL -->
|
|
</dl>
|
|
|
|
<dt><b>Interface <i><a id=DOM-CSSFontFeatureValuesRule
|
|
name=DOM-CSSFontFeatureValuesRule>CSSFontFeatureValuesRule</a></i></b>
|
|
|
|
<dd>
|
|
<p> The <code>CSSFontFeatureValuesRule</code> interface represents font
|
|
feature selector values for a given set of font families.</p>
|
|
|
|
<dl>
|
|
<dt> <br>
|
|
<b>IDL Definition</b>
|
|
|
|
<dd>
|
|
<div class=idl-code>
|
|
<pre>
|
|
interface CSSFontFeatureValuesRule : CSSRule {
|
|
attribute DOMString fontFamily;
|
|
// raises(DOMException) on setting
|
|
attribute DOMString valueText;
|
|
// raises(DOMException) on setting
|
|
};
|
|
</pre>
|
|
</div>
|
|
<br>
|
|
|
|
<dt><b>Attributes</b>
|
|
|
|
<dd>
|
|
<dl>
|
|
<dt><code class=attribute-name><a
|
|
id=DOM-CSSFontFeatureValuesRule-fontFamily
|
|
name=DOM-CSSFontFeatureValuesRule-fontFamily>fontFamily</a></code> of
|
|
type <code>DOMString</code>
|
|
|
|
<dd>This attribute represents the list of font families for which a
|
|
particular set of values are defined. The syntax is the same as that
|
|
of the font-family property.
|
|
</dl>
|
|
|
|
<dd>
|
|
<dl>
|
|
<dt><code class=attribute-name><a
|
|
id=DOM-CSSFontFeatureValuesRule-valueText
|
|
name=DOM-CSSFontFeatureValuesRule-valueText>valueText</a></code> of
|
|
type <code>DOMString</code>
|
|
|
|
<dd>Parsable text representing the set of feature values defined for a
|
|
given set of font families.
|
|
</dl>
|
|
|
|
<dt><b>Exceptions on setting</b>
|
|
</dl>
|
|
|
|
<dl>
|
|
<dt><code>DOMException SYNTAX_ERR</code>
|
|
|
|
<dd>Thrown when the specified string value has a syntax error or is
|
|
unparsable.
|
|
</dl>
|
|
|
|
<dt><b>No Methods</b>
|
|
</dl>
|
|
|
|
<h2 class=no-num id=ch-ch-ch-changes>Changes</h2>
|
|
|
|
<h3 class=no-num id=recent-changes> Changes from the <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-fonts-20110324/">March 2011 CSS3
|
|
Fonts Working Draft</a></h3>
|
|
|
|
<p>Major changes include:
|
|
|
|
<ul>
|
|
<li>Made same-origin wording normative and marked it at-risk
|
|
|
|
<li>Simplified definition of subscript/superscript variant property
|
|
|
|
<li>Trimmed some font-variant property values and renamed others
|
|
|
|
<li>Added more examples for various font variant value types
|
|
|
|
<li>Added DOM interface definitions for @font-feature-values rules
|
|
</ul>
|
|
|
|
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
|
|
|
|
<p>I'd like to thank Tal Leming, Jonathan Kew and Christopher Slye for all
|
|
their help and feedback. John Hudson was kind enough to take the time to
|
|
explain the subtleties of OpenType language tags and provided the example
|
|
of character variant usage for displaying text on Byzantine seals. Ken
|
|
Lunde and Eric Muller provided valuable feedback on CJK OpenType features
|
|
and Unicode variation selectors. The idea for supporting font features by
|
|
using font-variant subproperties originated with Håkon Wium Lie, Adam
|
|
Twardoch and Tal Leming. Thanks also to House Industries for allowing the
|
|
use of Ed Interlock in the discretionary ligatures example.
|
|
|
|
<p>A special thanks to Robert Bringhurst for the sublime mind expansion
|
|
that is <em>The Elements of Typographic Style</em>.
|
|
|
|
<h2 class=no-num id=references>References</h2>
|
|
|
|
<h3 class=no-num id=normative-references>Normative References</h3>
|
|
<!--begin-normative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CHARMOD>[CHARMOD]
|
|
|
|
<dd>Martin J. Dürst; et al. <a
|
|
href="http://www.w3.org/TR/2005/REC-charmod-20050215/"><cite>Character
|
|
Model for the World Wide Web 1.0: Fundamentals.</cite></a> 15 February
|
|
2005. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2005/REC-charmod-20050215/">http://www.w3.org/TR/2005/REC-charmod-20050215/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CORS>[CORS]
|
|
|
|
<dd>Anne van Kesteren. <a
|
|
href="http://www.w3.org/TR/2010/WD-cors-20100727/"><cite>Cross-Origin
|
|
Resource Sharing.</cite></a> 27 July 2010. W3C Working Draft. (Work in
|
|
progress.) URL: <a
|
|
href="http://www.w3.org/TR/2010/WD-cors-20100727/">http://www.w3.org/TR/2010/WD-cors-20100727/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS21>[CSS21]
|
|
|
|
<dd>Bert Bos; et al. <a
|
|
href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
|
|
Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
|
|
2011. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=HTML5>[HTML5]
|
|
|
|
<dd>Ian Hickson. <a
|
|
href="http://www.w3.org/TR/2011/WD-html5-20110525/"><cite>HTML5.</cite></a>
|
|
25 May 2011. W3C Working Draft. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2011/WD-html5-20110525/">http://www.w3.org/TR/2011/WD-html5-20110525/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=OPEN-FONT-FORMAT>[OPEN-FONT-FORMAT]
|
|
|
|
<dd><a
|
|
href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip"><cite>Information
|
|
technology — Coding of audio-visual objects — Part 22: Open Font
|
|
Format.</cite></a> International Organization for Standardization.
|
|
ISO/IEC 14496-22:2009. URL: <a
|
|
href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip">http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=OPENTYPE>[OPENTYPE]
|
|
|
|
<dd><a
|
|
href="http://www.microsoft.com/typography/otspec/default.htm"><cite>OpenType
|
|
specification.</cite></a> Microsoft. URL: <a
|
|
href="http://www.microsoft.com/typography/otspec/default.htm">http://www.microsoft.com/typography/otspec/default.htm</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=OPENTYPE-FEATURES>[OPENTYPE-FEATURES]
|
|
|
|
<dd><a
|
|
href="http://www.microsoft.com/typography/otspec/featurelist.htm"><cite>OpenType
|
|
feature registry.</cite></a> Microsoft. URL: <a
|
|
href="http://www.microsoft.com/typography/otspec/featurelist.htm">http://www.microsoft.com/typography/otspec/featurelist.htm</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=UAX15>[UAX15]
|
|
|
|
<dd>Mark Davis. <a
|
|
href="http://www.unicode.org/reports/tr15/tr15-33.html"><cite>Unicode
|
|
Normalization Forms.</cite></a> 17 September 2010. Unicode Standard Annex
|
|
#15. URL: <a
|
|
href="http://www.unicode.org/reports/tr15/tr15-33.html">http://www.unicode.org/reports/tr15/tr15-33.html</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=UAX29>[UAX29]
|
|
|
|
<dd>Mark Davis. <a
|
|
href="http://www.unicode.org/reports/tr29/tr29-17.html"><cite>Unicode
|
|
Text Segmentation.</cite></a> 8 October 2010. Unicode Standard Annex #29.
|
|
URL: <a
|
|
href="http://www.unicode.org/reports/tr29/tr29-17.html">http://www.unicode.org/reports/tr29/tr29-17.html</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=UNICODE6>[UNICODE6]
|
|
|
|
<dd>The Unicode Consortium. <a
|
|
href="http://www.unicode.org/versions/Unicode6.0.0/"><cite>The Unicode
|
|
Standard, Version 6.0.0.</cite></a> Defined by: The Unicode Standard,
|
|
Version 6.0.0 (Mountain View, CA: The Unicode Consortium, 2011. ISBN
|
|
978-1-936213-01-6) URL: <a
|
|
href="http://www.unicode.org/versions/Unicode6.0.0/">http://www.unicode.org/versions/Unicode6.0.0/</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-normative-->
|
|
<!--{{!CSS21}}-->
|
|
<!--{{!OPENTYPE}}-->
|
|
<!--{{!OPENTYPE-FEATURES}}-->
|
|
<!--{{!OPEN-FONT-FORMAT}}-->
|
|
<!--{{!UNICODE6}}-->
|
|
<!--{{!UAX15}}-->
|
|
<!--{{!UAX29}}-->
|
|
<!--{{!CORS}}-->
|
|
<!--{{!HTML5}}-->
|
|
<!--{{!CHARMOD}}-->
|
|
|
|
<h3 class=no-num id=other-references>Other References</h3>
|
|
<!--begin-informative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=AAT-FEATURES>[AAT-FEATURES]
|
|
|
|
<dd><a href="http://developer.apple.com/fonts/registry/"><cite>Apple
|
|
Advanced Typography font feature registry.</cite></a> Apple. URL: <a
|
|
href="http://developer.apple.com/fonts/registry/">http://developer.apple.com/fonts/registry/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=ARABIC-TYPO>[ARABIC-TYPO]
|
|
|
|
<dd>Huda Smitshuijzen AbiFares. <cite>Arabic Typography: A Comprehensive
|
|
Sourcebook.</cite> Saqi Books. 2001. ISBN 0-86356-347-3.</dd>
|
|
<!---->
|
|
|
|
<dt id=CHARMOD-NORM>[CHARMOD-NORM]
|
|
|
|
<dd>François Yergeau; et al. <a
|
|
href="http://www.w3.org/TR/2005/WD-charmod-norm-20051027/"><cite>Character
|
|
Model for the World Wide Web 1.0: Normalization.</cite></a> 27 October
|
|
2005. W3C Working Draft. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2005/WD-charmod-norm-20051027/">http://www.w3.org/TR/2005/WD-charmod-norm-20051027/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CJKV-INFO-PROCESSING>[CJKV-INFO-PROCESSING]
|
|
|
|
<dd>Ken Lunde. <cite>CJKV Information Processing, Second Edition.</cite>
|
|
O'Reilly Media, Inc. 2009. ISBN 0-596-51447-1.</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3-CONDITIONAL>[CSS3-CONDITIONAL]
|
|
|
|
<dd>L. David Baron. <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-conditional-20110901/"><cite>CSS
|
|
Conditional Rules Module Level 3.</cite></a> 1 September 2011. W3C
|
|
Working Draft. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-conditional-20110901/">http://www.w3.org/TR/2011/WD-css3-conditional-20110901/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=DIGITAL-TYPOGRAPHY>[DIGITAL-TYPOGRAPHY]
|
|
|
|
<dd>Richard Rubinstein. <cite>Digital Typography, An Introduction to Type
|
|
and Composition for Computer System Design.</cite> Addison-Wesley. 1988.
|
|
ISBN 0-201-17633-5.</dd>
|
|
<!---->
|
|
|
|
<dt id=ELEMTYPO>[ELEMTYPO]
|
|
|
|
<dd>Robert Bringhurst. <cite>The Elements of Typographic Style, Version
|
|
3.1.</cite> Hartley & Marks. 2005. ISBN 0-88179-206-3.</dd>
|
|
<!---->
|
|
|
|
<dt id=LANGCULTTYPE>[LANGCULTTYPE]
|
|
|
|
<dd>John D. Berry, Ed. <cite>Language Culture Type.</cite> Graphis. 2001.
|
|
ISBN 1-932026-01-0.</dd>
|
|
<!---->
|
|
|
|
<dt id=OPENTYPE-FONT-GUIDE>[OPENTYPE-FONT-GUIDE]
|
|
|
|
<dd><a
|
|
href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf"><cite>OpenType
|
|
User Guide.</cite></a> FontShop International. URL: <a
|
|
href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf">https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=RASTER-TRAGEDY>[RASTER-TRAGEDY]
|
|
|
|
<dd>Beat Stamm. <a href="http://www.rastertragedy.com/"><cite>The Raster
|
|
Tragedy at Low-Resolution Revisited.</cite></a> 14 March 2011. URL: <a
|
|
href="http://www.rastertragedy.com/">http://www.rastertragedy.com/</a></dd>
|
|
<!---->
|
|
|
|
<dt id=WINDOWS-GLYPH-PROC>[WINDOWS-GLYPH-PROC]
|
|
|
|
<dd>John Hudson. <a
|
|
href="http://www.microsoft.com/typography/developers/opentype/default.htm"><cite>Windows
|
|
Glyph Processing.</cite></a> Microsoft Typogrraphy. URL: <a
|
|
href="http://www.microsoft.com/typography/developers/opentype/default.htm">http://www.microsoft.com/typography/developers/opentype/default.htm</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-informative-->
|
|
<!--{{ARABIC-TYPO}}-->
|
|
<!--{{CJKV-INFO-PROCESSING}}-->
|
|
<!--{{DIGITAL-TYPOGRAPHY}}-->
|
|
<!--{{ELEMTYPO}}-->
|
|
<!--{{LANGCULTTYPE}}-->
|
|
<!--{{OPENTYPE-FONT-GUIDE}}-->
|
|
<!--{{RASTER-TRAGEDY}}-->
|
|
<!--{{WINDOWS-GLYPH-PROC}}-->
|
|
<!--{{CHARMOD-NORM}}-->
|
|
<!--{{AAT-FEATURES}}-->
|
|
<!--{{CSS3-CONDITIONAL}}-->
|
|
|
|
<h2 class=no-num id=index>Index</h2>
|
|
<!--begin-index-->
|
|
|
|
<ul class=indexlist>
|
|
<li><absolute-size>
|
|
<ul>
|
|
<li>definition of, <a href="#ltabsolute-sizegt"
|
|
title="<absolute-size> definition of"><strong>3.5</strong></a>
|
|
</ul>
|
|
|
|
<li>all-petite-caps, <a href="#all-petite-caps"
|
|
title=all-petite-caps><strong>6.6</strong></a>
|
|
|
|
<li>all-small-caps, <a href="#all-small-caps"
|
|
title=all-small-caps><strong>6.6</strong></a>
|
|
|
|
<li>annotation(<feature-value-name>), <a
|
|
href="#annotationltfeature-value-namegt"
|
|
title="annotation(<feature-value-name>)"><strong>6.8</strong></a>
|
|
|
|
<li>aspect value, <a href="#aspect0" title="aspect
|
|
value"><strong>3.6</strong></a>
|
|
|
|
<li>at-rules, <a href="#at-rule" title=at-rules>4.1</a>
|
|
|
|
<li><var><caps-value></var>, <a href="#ltcaps-valuegt"
|
|
title="<caps-value>"><strong>6.6</strong></a>
|
|
|
|
<li>character-variant(<feature-value-name>
|
|
[,<feature-value-name>]*), <a
|
|
href="#character-variantltfeature-value-namegt"
|
|
title="character-variant(<feature-value-name>
|
|
[,<feature-value-name>]*)"><strong>6.8</strong></a>
|
|
|
|
<li>common-ligatures, <a href="#common-ligatures"
|
|
title=common-ligatures><strong>6.5</strong></a>
|
|
|
|
<li><var><common-lig-values></var>, <a href="#ltcommon-lig-values"
|
|
title="<common-lig-values>"><strong>6.5</strong></a>
|
|
|
|
<li>contextual, <a href="#contextual"
|
|
title=contextual><strong>6.8</strong></a>
|
|
|
|
<li><var><contextual-alt-values></var>, <a
|
|
href="#ltcontextual-alt-valuesgt"
|
|
title="<contextual-alt-values>"><strong>6.8</strong></a>
|
|
|
|
<li>cursive, definition of, <a href="#cursive0" title="cursive, definition
|
|
of"><strong>#</strong></a>
|
|
|
|
<li>diagonal-fractions, <a href="#diagonal-fractions"
|
|
title=diagonal-fractions><strong>6.7</strong></a>
|
|
|
|
<li>discretionary-ligatures, <a href="#discretionary-ligatures"
|
|
title=discretionary-ligatures><strong>6.5</strong></a>
|
|
|
|
<li><var><discretionary-lig-values></var>, <a
|
|
href="#ltdiscretionary-lig-values"
|
|
title="<discretionary-lig-values>"><strong>6.5</strong></a>
|
|
|
|
<li><var><east-asian-variant-values></var>, <a
|
|
href="#lteast-asian-variant-valuesgt"
|
|
title="<east-asian-variant-values>"><strong>6.10</strong></a>
|
|
|
|
<li><var><east-asian-width-values></var>, <a
|
|
href="#lteast-asian-width-valuesgt"
|
|
title="<east-asian-width-values>"><strong>6.10</strong></a>
|
|
|
|
<li>fantasy, definition of, <a href="#fantasy0" title="fantasy, definition
|
|
of"><strong>#</strong></a>
|
|
|
|
<li><var><feature-index></var>, <a href="#ltfeature-indexgt"
|
|
title="<feature-index>"><strong>6.9</strong></a>
|
|
|
|
<li><var><feature-tag-value></var>, <a href="#ltfeature-tag-valuegt"
|
|
title="<feature-tag-value>"><strong>6.12</strong></a>
|
|
|
|
<li><var><feature-value-list></var>, <a
|
|
href="#ltfeature-value-listgt"
|
|
title="<feature-value-list>"><strong>6.9</strong></a>
|
|
|
|
<li><var><feature-value-name></var>, <a
|
|
href="#ltfeature-value-namegt"
|
|
title="<feature-value-name>"><strong>6.9</strong></a>
|
|
|
|
<li>font, <a href="#propdef-font" title=font><strong>3.7</strong></a>
|
|
|
|
<li><font-description>
|
|
<ul>
|
|
<li>definition of, <a href="#ltfont-descriptiongt"
|
|
title="<font-description> definition of"><strong>4.1</strong></a>
|
|
|
|
</ul>
|
|
|
|
<li>@font-face, <a href="#font-face"
|
|
title="@font-face"><strong>4.1</strong></a>, <a href="#font-face0"
|
|
title="@font-face">4.1</a>, <a href="#font-face1"
|
|
title="@font-face">4.3</a>
|
|
|
|
<li><font-face-name>
|
|
<ul>
|
|
<li>definition of, <a href="#ltfont-face-namegt"
|
|
title="<font-face-name> definition of"><strong>4.3</strong></a>
|
|
</ul>
|
|
|
|
<li>font-family, <a href="#descdef-font-family"
|
|
title=font-family><strong>4.2</strong></a>, <a href="#ltfont-familygt"
|
|
title="<font-family>"><strong>6.9</strong></a>, <a
|
|
href="#propdef-font-family" title=font-family><strong>3.1</strong></a>
|
|
|
|
<li>font-feature-settings, <a href="#descdef-font-feature-settings"
|
|
title=font-feature-settings><strong>4.6</strong></a>, <a
|
|
href="#propdef-font-feature-settings"
|
|
title=font-feature-settings><strong>6.12</strong></a>
|
|
|
|
<li>font-kerning, <a href="#propdef-font-kerning"
|
|
title=font-kerning><strong>6.3</strong></a>
|
|
|
|
<li>font-language-override, <a href="#propdef-font-language-override"
|
|
title=font-language-override><strong>6.13</strong></a>
|
|
|
|
<li>font-size, <a href="#propdef-font-size"
|
|
title=font-size><strong>3.5</strong></a>
|
|
|
|
<li>font-size-adjust, <a href="#propdef-font-size-adjust"
|
|
title=font-size-adjust><strong>3.6</strong></a>
|
|
|
|
<li>font-stretch, <a href="#descdef-font-stretch"
|
|
title=font-stretch><strong>4.4</strong></a>, <a
|
|
href="#propdef-font-stretch" title=font-stretch><strong>3.3</strong></a>
|
|
|
|
<li>font-style, <a href="#descdef-font-style"
|
|
title=font-style><strong>4.4</strong></a>, <a href="#propdef-font-style"
|
|
title=font-style><strong>3.4</strong></a>
|
|
|
|
<li>font-synthesis, <a href="#propdef-font-synthesis"
|
|
title=font-synthesis><strong>3.8</strong></a>
|
|
|
|
<li>font-variant, <a href="#descdef-font-variant"
|
|
title=font-variant><strong>4.6</strong></a>, <a
|
|
href="#propdef-font-variant" title=font-variant><strong>6.11</strong></a>
|
|
|
|
|
|
<li>font-variant-alternates, <a href="#propdef-font-variant-alternates"
|
|
title=font-variant-alternates><strong>6.8</strong></a>
|
|
|
|
<li>font-variant-caps, <a href="#propdef-font-variant-caps"
|
|
title=font-variant-caps><strong>6.6</strong></a>
|
|
|
|
<li><var><font-variant-css21></var>, <a
|
|
href="#ltfont-variant-css21gt"
|
|
title="<font-variant-css21>"><strong>3.7</strong></a>
|
|
|
|
<li>font-variant-east-asian, <a href="#propdef-font-variant-east-asian"
|
|
title=font-variant-east-asian><strong>6.10</strong></a>
|
|
|
|
<li>font-variant-ligatures, <a href="#propdef-font-variant-ligatures"
|
|
title=font-variant-ligatures><strong>6.5</strong></a>
|
|
|
|
<li>font-variant-numeric, <a href="#propdef-font-variant-numeric"
|
|
title=font-variant-numeric><strong>6.7</strong></a>
|
|
|
|
<li>font-variant-position, <a href="#propdef-font-variant-position"
|
|
title=font-variant-position><strong>6.4</strong></a>
|
|
|
|
<li><var><font-variant-value></var>, <a
|
|
href="#ltfont-variant-valuegt"
|
|
title="<font-variant-value>"><strong>6.9</strong></a>
|
|
|
|
<li><var><font-variant-value-definition></var>, <a
|
|
href="#ltfont-variant-value-definitiongt"
|
|
title="<font-variant-value-definition>"><strong>6.9</strong></a>
|
|
|
|
<li>font-weight, <a href="#descdef-font-weight"
|
|
title=font-weight><strong>4.4</strong></a>, <a
|
|
href="#propdef-font-weight" title=font-weight><strong>3.2</strong></a>
|
|
|
|
<li>full-width, <a href="#full-width"
|
|
title=full-width><strong>6.10</strong></a>
|
|
|
|
<li>historical-forms, <a href="#historical-forms"
|
|
title=historical-forms><strong>6.8</strong></a>
|
|
|
|
<li>historical-ligatures, <a href="#historical-ligatures"
|
|
title=historical-ligatures><strong>6.5</strong></a>
|
|
|
|
<li><var><historical-lig-values></var>, <a
|
|
href="#lthistorical-lig-values"
|
|
title="<historical-lig-values>"><strong>6.5</strong></a>
|
|
|
|
<li>jis04, <a href="#jis04" title=jis04><strong>6.10</strong></a>
|
|
|
|
<li>jis78, <a href="#jis78" title=jis78><strong>6.10</strong></a>
|
|
|
|
<li>jis83, <a href="#jis83" title=jis83><strong>6.10</strong></a>
|
|
|
|
<li>jis90, <a href="#jis90" title=jis90><strong>6.10</strong></a>
|
|
|
|
<li><length>, <a href="#ltlengthgt" title="<length>">3.5</a>
|
|
|
|
<li>lining-nums, <a href="#lining-nums"
|
|
title=lining-nums><strong>6.7</strong></a>
|
|
|
|
<li>monospace, definition of, <a href="#monospace0" title="monospace,
|
|
definition of"><strong>#</strong></a>
|
|
|
|
<li>no-common-ligatures, <a href="#no-common-ligatures"
|
|
title=no-common-ligatures><strong>6.5</strong></a>
|
|
|
|
<li>no-contextual, <a href="#no-contextual"
|
|
title=no-contextual><strong>6.8</strong></a>
|
|
|
|
<li>no-discretionary-ligatures, <a href="#no-discretionary-ligatures"
|
|
title=no-discretionary-ligatures><strong>6.5</strong></a>
|
|
|
|
<li>no-historical-ligatures, <a href="#no-historical-ligatures"
|
|
title=no-historical-ligatures><strong>6.5</strong></a>
|
|
|
|
<li><number>, <a href="#ltnumbergt" title="<number>">3.6</a>
|
|
|
|
<li><var><numeric-figure-values></var>, <a
|
|
href="#ltnumeric-figure-valuesgt"
|
|
title="<numeric-figure-values>"><strong>6.7</strong></a>
|
|
|
|
<li><var><numeric-fraction-values></var>, <a
|
|
href="#ltnumeric-fraction-valuesgt"
|
|
title="<numeric-fraction-values>"><strong>6.7</strong></a>
|
|
|
|
<li><var><numeric-spacing-values></var>, <a
|
|
href="#ltnumeric-spacing-valuesgt"
|
|
title="<numeric-spacing-values>"><strong>6.7</strong></a>
|
|
|
|
<li>oldstyle-nums, <a href="#oldstyle-nums"
|
|
title=oldstyle-nums><strong>6.7</strong></a>
|
|
|
|
<li>ornaments(<feature-value-name>), <a
|
|
href="#ornamentsltfeature-value-namegt"
|
|
title="ornaments(<feature-value-name>)"><strong>6.8</strong></a>
|
|
|
|
<li><percentage>, <a href="#ltpercentagegt"
|
|
title="<percentage>">3.5</a>
|
|
|
|
<li>petite-caps, <a href="#petite-caps"
|
|
title=petite-caps><strong>6.6</strong></a>
|
|
|
|
<li>proportional-nums, <a href="#proportional-nums"
|
|
title=proportional-nums><strong>6.7</strong></a>
|
|
|
|
<li>proportional-width, <a href="#proportional-width"
|
|
title=proportional-width><strong>6.10</strong></a>
|
|
|
|
<li><relative-size>
|
|
<ul>
|
|
<li>definition of, <a href="#ltrelative-sizegt"
|
|
title="<relative-size> definition of"><strong>3.5</strong></a>
|
|
</ul>
|
|
|
|
<li>ruby, <a href="#ruby" title=ruby><strong>6.8</strong></a>
|
|
|
|
<li>sans-serif, definition of, <a href="#sans-serif0" title="sans-serif,
|
|
definition of"><strong>#</strong></a>
|
|
|
|
<li>serif, definition of, <a href="#serif0" title="serif, definition
|
|
of"><strong>#</strong></a>
|
|
|
|
<li>simplified, <a href="#simplified"
|
|
title=simplified><strong>6.10</strong></a>
|
|
|
|
<li>slashed-zero, <a href="#slashed-zero"
|
|
title=slashed-zero><strong>6.7</strong></a>
|
|
|
|
<li>small-caps, <a href="#small-caps"
|
|
title=small-caps><strong>6.6</strong></a>
|
|
|
|
<li>src, <a href="#descdef-src" title=src><strong>4.3</strong></a>
|
|
|
|
<li>stacked-fractions, <a href="#stacked-fractions"
|
|
title=stacked-fractions><strong>6.7</strong></a>
|
|
|
|
<li>styleset(<feature-value-name> [,<feature-value-name>]*),
|
|
<a href="#stylesetltfeature-value-namegt"
|
|
title="styleset(<feature-value-name>
|
|
[,<feature-value-name>]*)"><strong>6.8</strong></a>
|
|
|
|
<li>stylistic(<feature-value-name>), <a
|
|
href="#stylisticltfeature-value-namegt"
|
|
title="stylistic(<feature-value-name>)"><strong>6.8</strong></a>
|
|
|
|
<li>swash(<feature-value-name>), <a
|
|
href="#swashltfeature-value-namegt"
|
|
title="swash(<feature-value-name>)"><strong>6.8</strong></a>
|
|
|
|
<li>tabular-nums, <a href="#tabular-nums"
|
|
title=tabular-nums><strong>6.7</strong></a>
|
|
|
|
<li>titling-caps, <a href="#titling-caps"
|
|
title=titling-caps><strong>6.6</strong></a>
|
|
|
|
<li>traditional, <a href="#traditional"
|
|
title=traditional><strong>6.10</strong></a>
|
|
|
|
<li>unicase, <a href="#unicase" title=unicase><strong>6.6</strong></a>
|
|
|
|
<li>unicode-range, <a href="#descdef-unicode-range"
|
|
title=unicode-range><strong>4.5</strong></a>
|
|
|
|
<li><urange>
|
|
<ul>
|
|
<li>definition of, <a href="#lturangegt" title="<urange>
|
|
definition of"><strong>4.5</strong></a>
|
|
</ul>
|
|
</ul>
|
|
<!--end-index-->
|
|
|
|
<h2 class=no-num id=property-index>Property index</h2>
|
|
<!--begin-properties-->
|
|
|
|
<table class=proptable>
|
|
<thead>
|
|
<tr>
|
|
<th>Property
|
|
|
|
<th>Values
|
|
|
|
<th>Initial
|
|
|
|
<th>Applies to
|
|
|
|
<th>Inh.
|
|
|
|
<th>Percentages
|
|
|
|
<th>Media
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th><a class=property href="#propdef-font">font</a>
|
|
|
|
<td>[ [ <‘font-style’> || <font-variant-css21> ||
|
|
<‘font-weight’> ]? <‘font-size’> [ /
|
|
<‘line-height’> ]? <‘font-family’> ] | caption | icon |
|
|
menu | message-box | small-caption | status-bar | inherit
|
|
|
|
<td>see individual properties
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>see individual properties
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#descdef-font-family">font-family</a>
|
|
|
|
<td>[[ <family-name> | <generic-family> ] [, <family-name> |
|
|
<generic-family>]* ] | inherit
|
|
|
|
<td>depends on user agent
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#propdef-font-feature-settings">font-feature-settings</a>
|
|
|
|
<td>normal | <feature-tag-value> [, <feature-tag-value>]*
|
|
|
|
<td>normal
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#propdef-font-kerning">font-kerning</a>
|
|
|
|
<td>auto | normal | none
|
|
|
|
<td>auto
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#propdef-font-language-override">font-language-override</a>
|
|
|
|
<td>normal | inherit | <string>
|
|
|
|
<td>normal
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#propdef-font-size">font-size</a>
|
|
|
|
<td><absolute-size> | <relative-size> | <length> |
|
|
<percentage> | inherit
|
|
|
|
<td>medium
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>refer to parent element's font size
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#propdef-font-size-adjust">font-size-adjust</a>
|
|
|
|
<td><number> | none | inherit
|
|
|
|
<td>none
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#descdef-font-stretch">font-stretch</a>
|
|
|
|
<td>normal | ultra-condensed | extra-condensed | condensed |
|
|
semi-condensed | semi-expanded | expanded | extra-expanded |
|
|
ultra-expanded | inherit
|
|
|
|
<td>normal
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#descdef-font-style">font-style</a>
|
|
|
|
<td>normal | italic | oblique | inherit
|
|
|
|
<td>normal
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#propdef-font-synthesis">font-synthesis</a>
|
|
|
|
<td>none | [ weight || style ]
|
|
|
|
<td>weight style
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#propdef-font-variant">font-variant</a>
|
|
|
|
<td>normal | inherit | [ <common-lig-values> ||
|
|
<discretionary-lig-values> || <historical-lig-values> ||
|
|
<contextual-alt-values> || stylistic(<feature-value-name>)
|
|
|| historical-forms || styleset(<feature-value-name> [,
|
|
<feature-value-name>]*) ||
|
|
character-variant(<feature-value-name>
|
|
[,<feature-value-name>]*) || swash(<feature-value-name>) ||
|
|
ornaments(<feature-value-name>) ||
|
|
annotation(<feature-value-name>) || ruby || <caps-value> ||
|
|
<numeric-figure-values> || <numeric-spacing-values> ||
|
|
<numeric-fraction-values> || slashed-zero ||
|
|
<east-asian-variant-values> || <east-asian-width-values> ]
|
|
|
|
<td>normal
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#propdef-font-variant-alternates">font-variant-alternates</a>
|
|
|
|
<td>normal | inherit | [ <contextual-alt-values> ||
|
|
stylistic(<feature-value-name>) || historical-forms ||
|
|
styleset(<feature-value-name> [, <feature-value-name>]*) ||
|
|
character-variant(<feature-value-name>
|
|
[,<feature-value-name>;]*) || swash(<feature-value-name>)
|
|
|| ornaments(<feature-value-name>) ||
|
|
annotation(<feature-value-name>) || ruby ]
|
|
|
|
<td>normal
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#propdef-font-variant-caps">font-variant-caps</a>
|
|
|
|
<td>normal | inherit | <caps-value>
|
|
|
|
<td>normal
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
|
|
|
|
<td>normal | inherit | [ <east-asian-variant-values> ||
|
|
<east-asian-width-values> ]
|
|
|
|
<td>normal
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
|
|
|
|
<td>normal | inherit | [ <common-lig-values> ||
|
|
<discretionary-lig-values> || <historical-lig-values> ]
|
|
|
|
<td>normal
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#propdef-font-variant-numeric">font-variant-numeric</a>
|
|
|
|
<td>normal | inherit | [ <numeric-figure-values> ||
|
|
<numeric-spacing-values> || <numeric-fraction-values> ||
|
|
slashed-zero ]
|
|
|
|
<td>normal
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property
|
|
href="#propdef-font-variant-position">font-variant-position</a>
|
|
|
|
<td>normal | sub | super | ordinal
|
|
|
|
<td>normal
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th><a class=property href="#descdef-font-weight">font-weight</a>
|
|
|
|
<td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600
|
|
| 700 | 800 | 900 | inherit
|
|
|
|
<td>normal
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
</table>
|
|
<!--end-properties-->
|
|
<!-- descriptors -->
|
|
</html>
|
|
<!-- Keep this comment at the end of the file
|
|
Local variables:
|
|
mode: sgml
|
|
sgml-declaration:"~/SGML/HTML4.decl"
|
|
sgml-default-doctype-name:"html"
|
|
sgml-minimize-attributes:t
|
|
sgml-nofill-elements:("pre" "style" "br")
|
|
sgml-live-element-indicator:t
|
|
sgml-omittag:nil
|
|
sgml-shorttag:nil
|
|
sgml-namecase-general:t
|
|
sgml-general-insert-case:lower
|
|
sgml-always-quote-attributes:t
|
|
sgml-indent-step:nil
|
|
sgml-indent-data:t
|
|
sgml-parent-document:nil
|
|
sgml-exposed-tags:nil
|
|
sgml-local-catalogs:nil
|
|
sgml-local-ecat-files:nil
|
|
End:
|
|
-->
|
|
<!--
|
|
|
|
to do:
|
|
|
|
- wording of OpenType family name handling
|
|
- handling combining sequences in the font matching algorithm
|
|
- fix-up fi ligature example
|
|
|
|
-->
|