Wed, 28 Aug 2013 10:10:26 +0900
[css3-fonts] add note about line-height to font-size-adjust description
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
4 <html lang=en>
5 <head><meta content="text/html;charset=utf-8" http-equiv=Content-Type>
7 <title>CSS Fonts Module Level 3</title>
8 <!--
9 FIXME when publishing: copy the current default.css and link to
10 "default.css" rather than "../default.css"
11 -->
12 <link href="../default.css" rel=stylesheet type="text/css">
13 <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
14 <!-- I'm just experimenting here, don't get your bee in a bonnet -->
15 <script src="http://use.typekit.com/xon2bky.js"
16 type="text/javascript"></script>
17 <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
19 <style type="text/css">
21 body, th, td, h1, h2, h3, h4, h5, h6 {
22 font-family: "myriad-pro", sans-serif !important;
23 }
25 body {
26 padding: 2em 70px 2em 70px;
27 }
29 p + p, p.mtb {
30 margin-top: 0.8em;
31 text-indent: 0px;
32 }
34 #bolderlighter {
35 width: 40%;
36 }
38 #bolderlighter th {
39 text-align: center;
40 }
42 #fontformats td, #eventhandlers td, #fontformats th, #eventhandlers th {
43 padding-right: 2em;
44 text-align: left;
45 }
47 dd {
48 margin-bottom: 1em;
49 }
51 #authors dd {
52 margin-bottom: 0;
53 }
55 #fontstylematchingalg {
56 list-style-type: lower-alpha;
57 }
59 #fontmatchingalg ul, #fontmatchingalg ol {
60 margin-top: 0.8em;
61 }
63 #fontmatchingalg li + li {
64 margin-top: 0.8em;
65 }
67 div.example {
68 padding: 1em;
69 margin-top: 1em;
70 }
72 div.example + div.example {
73 margin-top: 2em;
74 }
76 div.figure {
77 page-break-inside: avoid;
78 }
80 pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em }
82 div.featex {
83 width: 700px;
84 }
86 div.featex img {
87 margin: auto;
88 display: block;
89 }
91 span.tag {
92 font-family: monospace;
93 font-size: 120%;
94 }
96 ol ol {
97 list-style-type: lower-alpha;
98 }
100 .idl-code {
101 font-weight: bold;
102 color: #c50;
103 }
104 </style>
105 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
106 type="text/css">
107 <script defer=defer
108 src="http://test.csswg.org/harness/annotate.js#CSS3-FONTS_DEV"
109 type="text/javascript"></script>
111 <body>
112 <div class=head> <!--begin-logo-->
113 <p><a href="http://www.w3.org/"><img alt=W3C height=48
114 src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
116 <h1>CSS Fonts Module Level 3</h1>
118 <h2 class="no-num no-toc" id=editors-draft-28-august-2013>Editor's Draft
119 28 August 2013</h2>
121 <dl id=authors>
122 <dt>This version:
124 <dd><a
125 href="http://dev.w3.org/csswg/css-fonts/">http://dev.w3.org/csswg/css-fonts/</a>
126 <!-- <dd><a href="http://www.w3.org/TR/2013/ED-css-fonts-3-20130828/">http://www.w3.org/TR/2013/ED-css-fonts-3-20130828/</a> -->
129 <dt>Latest version:
131 <dd><a
132 href="http://www.w3.org/TR/css-fonts-3/">http://www.w3.org/TR/css-fonts-3/</a>
134 <dt>Latest editor's draft:
136 <dd><a
137 href="http://dev.w3.org/csswg/css-fonts/">http://dev.w3.org/csswg/css-fonts/</a>
138 (<a
139 href="https://dvcs.w3.org/hg/csswg/log/tip/css-fonts/Fonts.html">change
140 log</a>)
142 <dt>Previous version:
144 <dd><a
145 href="http://www.w3.org/TR/2013/WD-css-fonts-3-20130711/">http://www.w3.org/TR/2013/WD-css-fonts-3-20130711/</a>
147 <dt>Issues List:
149 <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/18">CSS3 Fonts
150 issues in Tracker</a>
152 <dd><a
153 href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Fonts&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED">CSS3
154 Fonts issues in Bugzilla</a>
156 <dt>Discussion:
158 <dd><a
159 href="mailto:www-style@w3.org?subject=%5Bcss-fonts%5D%20feedback">www-style@w3.org</a>
160 with subject line “<kbd>[css-fonts] <var>… message topic
161 …</var></kbd>” (<a
162 href="http://lists.w3.org/Archives/Public/www-style/"
163 rel=discussion>archives</a>)
165 <dt>Editor:
167 <dd><a href="mailto:jdaggett@mozilla.com">John Daggett (Mozilla)</a>
168 </dl>
169 <!--begin-copyright-->
170 <p class=copyright><a
171 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
172 rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
173 title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
174 href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of
175 Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr
176 title="European Research Consortium for Informatics and
177 Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>,
178 <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C
179 <a
180 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
181 <a
182 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
183 and <a
184 href="http://www.w3.org/Consortium/Legal/copyright-documents">document
185 use</a> rules apply.</p>
186 <!--end-copyright-->
187 <hr title="Separator for header">
188 </div>
190 <h2 class="no-num no-toc" id=abstract>Abstract</h2>
192 <p>This CSS3 module describes how font properties are specified and how
193 font resources are loaded dynamically. The contents of this specification
194 are a consolidation of content previously divided into <a
195 href="http://www.w3.org/TR/2002/WD-css3-fonts-20020802/">CSS3 Fonts</a>
196 and <a href="http://www.w3.org/TR/2002/WD-css3-webfonts-20020802/">CSS3
197 Web Fonts</a> modules. The description of font load events was moved into
198 the <a href="http://dev.w3.org/csswg/css-font-load-events/">CSS3 Font Load
199 Events</a> module.
201 <h2 class="no-num no-toc" id=status>Status of this document</h2>
202 <!--begin-status-->
204 <p>This is a public copy of the editors' draft. It is provided for
205 discussion only and may change at any moment. Its publication here does
206 not imply endorsement of its contents by W3C. Don't cite this document
207 other than as work in progress.
209 <p>The (<a
210 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
211 mailing list <a
212 href="mailto:www-style@w3.org?Subject=%5Bcss3-fonts%5D%20PUT%20SUBJECT%20HERE">
213 www-style@w3.org</a> (see <a
214 href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
215 discussion of this specification. When sending e-mail, please put the text
216 “css3-fonts” in the subject, preferably like this:
217 “[<!---->css3-fonts<!---->] <em>…summary of comment…</em>”
219 <p>This document was produced by the <a
220 href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
221 the <a href="http://www.w3.org/Style/">Style Activity</a>).
223 <p>This document was produced by a group operating under the <a
224 href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
225 2004 W3C Patent Policy</a>. W3C maintains a <a
226 href="http://www.w3.org/2004/01/pp-impl/32061/status"
227 rel=disclosure>public list of any patent disclosures</a> made in
228 connection with the deliverables of the group; that page also includes
229 instructions for disclosing a patent. An individual who has actual
230 knowledge of a patent which the individual believes contains <a
231 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
232 Claim(s)</a> must disclose the information in accordance with <a
233 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
234 6 of the W3C Patent Policy</a>.</p>
235 <!--end-status-->
237 <h3 class="no-num no-toc" id=atrisk>Features at risk</h3>
239 <p>The following features are at risk and may be removed when exiting CR:
241 <ul>
242 <li>fallback handling for text decoration in superscript/subscript variant
243 glyphs (‘<a href="#propdef-font-variant-position"><code
244 class=property>font-variant-position</code></a>’)
246 <li>‘<a href="#propdef-font-language-override"><code
247 class=property>font-language-override</code></a>’ property
248 </ul>
249 <!--
250 <p>This draft is a <strong>Last Call Working Draft</strong>.
251 Please send comments to the
252 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style mailing list</a>
253 as described above. The <strong>deadline for comments</strong>
254 is six weeks after the date of publication in the header, 22 August 2013.</p>
255 -->
257 <h2 class="no-num no-toc" id=contents>Table of contents</h2>
258 <!--begin-toc-->
260 <ul class=toc>
261 <li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
263 <li><a href="#typography-background"><span class=secno>2 </span>Typography
264 Background</a>
266 <li><a href="#basic-font-props"><span class=secno>3 </span>Basic Font
267 Properties</a>
268 <ul class=toc>
269 <li><a href="#font-family-prop"><span class=secno>3.1 </span>Font
270 family: the font-family property</a>
271 <ul class=toc>
272 <li><a href="#generic-font-families"><span class=secno>3.1.1
273 </span>Generic font families</a>
274 </ul>
276 <li><a href="#font-weight-prop"><span class=secno>3.2 </span>Font
277 weight: the font-weight property</a>
279 <li><a href="#font-stretch-prop"><span class=secno>3.3 </span>Font
280 width: the font-stretch property</a>
282 <li><a href="#font-style-prop"><span class=secno>3.4 </span>Font style:
283 the font-style property</a>
285 <li><a href="#font-size-prop"><span class=secno>3.5 </span>Font size:
286 the font-size property</a>
288 <li><a href="#font-size-adjust-prop"><span class=secno>3.6
289 </span>Relative sizing: the font-size-adjust property</a>
291 <li><a href="#font-prop"><span class=secno>3.7 </span>Shorthand font
292 property: the font property</a>
294 <li><a href="#font-synthesis-prop"><span class=secno>3.8
295 </span>Controlling synthetic faces: the font-synthesis property</a>
296 </ul>
298 <li><a href="#font-resources"><span class=secno>4 </span>Font
299 Resources</a>
300 <ul class=toc>
301 <li><a href="#font-face-rule"><span class=secno>4.1 </span>The
302 <code>@font-face</code> rule</a>
304 <li><a href="#font-family-desc"><span class=secno>4.2 </span>Font
305 family: the font-family descriptor</a>
307 <li><a href="#src-desc"><span class=secno>4.3 </span>Font reference: the
308 src descriptor</a>
310 <li><a href="#font-prop-desc"><span class=secno>4.4 </span>Font property
311 descriptors: the font-style, font-weight, font-stretch descriptors</a>
313 <li><a href="#unicode-range-desc"><span class=secno>4.5 </span>Character
314 range: the unicode-range descriptor</a>
316 <li><a href="#composite-fonts"><span class=secno>4.6 </span>Using
317 character ranges to define composite fonts</a>
319 <li><a href="#font-rend-desc"><span class=secno>4.7 </span>Font
320 features: the font-variant and font-feature-settings descriptors</a>
322 <li><a href="#font-face-loading"><span class=secno>4.8 </span>Font
323 loading guidelines</a>
325 <li><a href="#font-fetching-requirements"><span class=secno>4.9
326 </span>Font fetching requirements</a>
327 </ul>
329 <li><a href="#font-matching-algorithm"><span class=secno>5 </span>Font
330 Matching Algorithm</a>
331 <ul class=toc>
332 <li><a href="#font-family-casing"><span class=secno>5.1 </span>Case
333 sensitivity of font family names</a>
335 <li><a href="#font-style-matching"><span class=secno>5.2 </span>Matching
336 font styles</a>
338 <li><a href="#cluster-matching"><span class=secno>5.3 </span>Cluster
339 matching</a>
341 <li><a href="#char-handling-issues"><span class=secno>5.4
342 </span>Character handling issues</a>
344 <li><a href="#font-matching-changes"><span class=secno>5.5 </span>Font
345 matching changes since CSS 2.1</a>
347 <li><a href="#font-matching-examples"><span class=secno>5.6 </span>Font
348 matching examples</a>
349 </ul>
351 <li><a href="#font-rend-props"><span class=secno>6 </span>Font Feature
352 Properties</a>
353 <ul class=toc>
354 <li><a href="#glyph-selection-positioning"><span class=secno>6.1
355 </span>Glyph selection and positioning</a>
357 <li><a href="#language-specific-support"><span class=secno>6.2
358 </span>Language-specific display</a>
360 <li><a href="#font-kerning-prop"><span class=secno>6.3 </span>Kerning:
361 the font-kerning property</a>
363 <li><a href="#font-variant-ligatures-prop"><span class=secno>6.4
364 </span>Ligatures: the font-variant-ligatures property</a>
366 <li><a href="#font-variant-position-prop"><span class=secno>6.5
367 </span>Subscript and superscript forms: the font-variant-position
368 property</a>
370 <li><a href="#font-variant-caps-prop"><span class=secno>6.6
371 </span>Capitalization: the font-variant-caps property</a>
373 <li><a href="#font-variant-numeric-prop"><span class=secno>6.7
374 </span>Numerical formatting: the font-variant-numeric property</a>
376 <li><a href="#font-variant-alternates-prop"><span class=secno>6.8
377 </span>Alternates and swashes: the font-variant-alternates property</a>
380 <li><a href="#font-feature-values"><span class=secno>6.9 </span>Defining
381 font specific alternates: the <code>@font-feature-values</code>
382 rule</a>
383 <ul class=toc>
384 <li><a href="#basic-syntax"><span class=secno>6.9.1 </span>Basic
385 syntax</a>
387 <li><a href="#multi-valued-feature-value-definitions"><span
388 class=secno>6.9.2 </span>Multi-valued feature value definitions</a>
389 </ul>
391 <li><a href="#font-variant-east-asian-prop"><span class=secno>6.10
392 </span>East Asian text rendering: the font-variant-east-asian
393 property</a>
395 <li><a href="#font-variant-prop"><span class=secno>6.11 </span>Overall
396 shorthand for font rendering: the font-variant property</a>
398 <li><a href="#font-feature-settings-prop"><span class=secno>6.12
399 </span>Low-level font feature settings control: the
400 font-feature-settings property</a>
402 <li><a href="#font-language-override-prop"><span class=secno>6.13
403 </span>Font language override: the font-language-override property</a>
404 </ul>
406 <li><a href="#font-feature-resolution"><span class=secno>7 </span>Font
407 Feature Resolution </a>
408 <ul class=toc>
409 <li><a href="#default-features"><span class=secno>7.1 </span>Default
410 features</a>
412 <li><a href="#feature-precedence"><span class=secno>7.2 </span>Feature
413 precedence</a>
415 <li><a href="#feature-precedence-examples"><span class=secno>7.3
416 </span>Feature precedence examples</a>
417 </ul>
419 <li><a href="#object-model"><span class=secno>8 </span>Object Model</a>
420 <ul class=toc>
421 <li><a href="#om-fontface"><span class=secno>8.1 </span>The
422 <code>CSSFontFaceRule</code> interface</a>
424 <li><a href="#om-fontfeaturevalues"><span class=secno>8.2 </span>The
425 <code>CSSFontFeatureValuesRule</code> interface</a>
426 </ul>
428 <li class=no-num><a href="#platform-props-to-css">Appendix A: Mapping
429 platform font properties to CSS properties</a>
431 <li class=no-num><a href="#ch-ch-ch-changes">Changes</a>
432 <ul class=toc>
433 <li class=no-num><a href="#recent-changes"> Changes from the July 2013
434 CSS3 Fonts Last Call Working Draft</a>
435 </ul>
437 <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
439 <li class=no-num><a href="#conformance"> Conformance</a>
440 <ul class=toc>
441 <li class=no-num><a href="#conventions"> Document Conventions</a>
443 <li class=no-num><a href="#conformance-classes"> Conformance Classes</a>
446 <li class=no-num><a href="#partial"> Partial Implementations</a>
448 <li class=no-num><a href="#experimental"> Experimental
449 Implementations</a>
451 <li class=no-num><a href="#testing"> Non-Experimental
452 Implementations</a>
453 </ul>
455 <li class=no-num><a href="#references">References</a>
456 <ul class=toc>
457 <li class=no-num><a href="#normative-references">Normative
458 References</a>
460 <li class=no-num><a href="#other-references">Other References</a>
461 </ul>
463 <li class=no-num><a href="#index">Index</a>
465 <li class=no-num><a href="#property-index">Property index</a>
466 </ul>
467 <!--end-toc-->
469 <h2 id=introduction><span class=secno>1 </span>Introduction</h2>
471 <p>A font provides a resource containing the visual representation of
472 characters. At the simplest level it contains information that maps
473 character codes to shapes (called glyphs) that represent these characters.
474 Fonts sharing a common design style are commonly grouped into font
475 families classified by a set of standard font properties. Within a family,
476 the shape displayed for a given character can vary by stroke weight, slant
477 or relative width, among others. An individual font face is described by a
478 unique combination of these properties. For a given range of text, CSS
479 font properties are used to select a font family and a specific font face
480 within that family to be used when rendering that text. As a simple
481 example, to use the bold form of Helvetica one could use:
483 <pre>body {
484 font-family: Helvetica;
485 font-weight: bold;
486 }</pre>
488 <p>Font resources may be installed locally on the system on which a user
489 agent is running or downloadable. For local font resources descriptive
490 information can be obtained directly from the font resource. For
491 downloadable font resources (sometimes referred to as web fonts), the
492 descriptive information is included with the reference to the font
493 resource.
495 <p>Families of fonts typically don't contain a single face for each
496 possible variation of font properties. The CSS font selection mechanism
497 describes how to match a given set of CSS font properties to a single font
498 face.
500 <h2 id=typography-background><span class=secno>2 </span>Typography
501 Background</h2>
503 <p><em>This section is non-normative.</em>
505 <p> Typographic traditions vary across the globe, so there is no unique way
506 to classify all fonts across languages and cultures. For even common Latin
507 letters, wide variations are possible:
509 <div class=figure><img alt="variations in glyphs for a single character"
510 src=aaaaaa.png>
511 <p class=caption>One character, many glyph variations
512 </div>
514 <p>Differences in the anatomy of letterforms is one way to distinguish
515 fonts. For Latin fonts, flourishes at the ends of a character's main
516 strokes, or serifs, can distinguish a font from those without. Similar
517 comparisons exist in non-Latin fonts between fonts with tapered strokes
518 and those using primarily uniform strokes:
520 <div class=figure><img alt="serif vs. non-serifs" src=serifvssansserif.png>
521 <p class=caption>Letterforms with and without serifs
522 </div>
524 <div class=figure><img alt="serif vs. non-serifs for japanese"
525 src=minchovsgothic.png>
526 <p class=caption>Similar groupings for Japanese typefaces
527 </div>
529 <p>Fonts contain letterforms and the data needed to map characters to these
530 letterforms. Often this may be a simple one-to-one mapping, but more
531 complex mappings are also possible. The use of combining diacritic marks
532 creates many variations for an underlying letterform:
534 <div class=figure><img alt="diacritic marks" src=aaaaaa-diacritics.png>
535 <p class=caption>Variations with diacritic marks
536 </div>
538 <p>A sequence of characters can be represented by a single glyph known as a
539 ligature:
541 <div class=figure><img alt="example of a fi ligature"
542 src=final-ligature.png>
543 <p class=caption>Ligature example
544 </div>
546 <p>Visual transformations based on textual context are often stylistic
547 option in European languages. They are required to correctly render
548 languages like Arabic, the lam and alef characters below <em>must</em> be
549 combined when they exist in sequence:
551 <div class=figure><img alt="lam alef ligature" src=lamaleflig.png>
552 <p class=caption>Required Arabic ligature
553 </div>
555 <p>The relative complexity of these shaping transformations requires
556 additional data within the font.
558 <p>Sets of font faces with various stylistic variations are often grouped
559 together into font families. In the simplest case a regular face is
560 supplemented with bold and italic faces, but much more extensive groupings
561 are possible. Variations in the thickness of letterform strokes, the <dfn
562 id=weight>weight</dfn>, and the overall proportions of the letterform, the
563 <dfn id=width>width</dfn>, are most common. In the example below, each
564 letter uses a different font face within the Univers font family. The
565 width used increases from top to bottom and the weight increases from left
566 to right:
568 <div class=figure><img alt="various width and weight variations within a
569 single family" src=weightwidthvariations.png>
570 <p class=caption>Weight and width variations within a single font family
571 </div>
573 <p>Creating fonts that support multiple scripts is a difficult task;
574 designers need to understand the cultural traditions surrounding the use
575 of type in different scripts and come up with letterforms that somehow
576 share a common theme. Many languages often share a common script and each
577 of these languages may have noticeable stylistic differences. For example,
578 the Arabic script is shared by Persian and Urdu and Cyrillic is used with
579 many languages, not just Russian.
581 <p>The <a href="#character-map"><em>character map</em></a> of a font
582 defines the mapping of characters to glyphs for that font. If a document
583 contains characters not supported by the <a href="#character-map"><em
584 title="character map">character maps</em></a> of the fonts contained in a
585 font family list, a user agent may use a <a
586 href="#system-font-fallback"><em>system font fallback</em></a> procedure
587 to locate an appropriate font that does. If no appropriate font can be
588 found, some form of "missing glyph" character will be rendered by the user
589 agent. System fallback can occur when the specified list of font families
590 does not include a font that supports a given character.
592 <p>Although the <a href="#character-map"><em>character map</em></a> of a
593 font maps a given character to a glyph for that character, modern font
594 technologies such as OpenType and AAT (Apple Advanced Typography) provide
595 ways of mapping a character to different glyphs based upon feature
596 settings. Fonts in these formats allow these features to be embedded in
597 the font itself and controlled by applications. Common typographic
598 features which can be specified this way include ligatures, swashes,
599 contextual alternates, proportional and tabular figures, and automatic
600 fractions, to list just a few. For a visual overview of OpenType features,
601 see the <a href="#OPENTYPE-FONT-GUIDE"
602 rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
604 <h2 id=basic-font-props><span class=secno>3 </span>Basic Font Properties</h2>
606 <p>The particular font face used to render a character is determined by the
607 font family and other font properties that apply to a given element. This
608 structure allows settings to be varied independent of each other.</p>
609 <!-- prop: font-family -->
611 <h3 id=font-family-prop><span class=secno>3.1 </span>Font family: the <a
612 href="#propdef-font-family">font-family</a> property</h3>
614 <table class=propdef id=namefont-familyvalue-ltfamily-namegt-ltg>
615 <tbody>
616 <tr>
617 <td>Name:
619 <td><dfn id=propdef-font-family
620 title="font-family!!property">font-family</dfn>
622 <tr>
623 <td>Value:
625 <td>[ <a href="#family-name-value"><var><family-name></var></a> |
626 <a href="#generic-family-value"><var><generic-family></var></a> ]
627 #
629 <tr>
630 <td>Initial:
632 <td>depends on user agent
634 <tr>
635 <td>Applies to:
637 <td>all elements
639 <tr>
640 <td>Inherited:
642 <td>yes
644 <tr>
645 <td>Percentages:
647 <td>N/A
649 <tr>
650 <td>Media:
652 <td>visual
654 <tr>
655 <td>Computed value:
657 <td>as specified
659 <tr>
660 <td>Animatable:
662 <td>no
663 </table>
665 <p>This property specifies a prioritized list of font family names or
666 generic family names. A font family defines a set of faces that vary in
667 weight, width or slope. CSS uses the combination of a family name with
668 other style attributes to select an individual face. Using this selection
669 mechanism, rather than selecting a face via the style name as is often
670 done in design applications, allows some degree of regularity in textual
671 display when fallback occurs.
673 <p class=note>Designers should note that the CSS definition of font
674 attributes used for selection are explicitly not intended to define a font
675 taxonomy. A type designer's idea of a family may often extend to a set of
676 faces that vary along axes other than just the standard axes of weight,
677 width and slope. A family may extend to include both a set of serif faces
678 and a set of sans-serif faces or vary along axes that are unique to that
679 family. The CSS font selection mechanism merely provides a way to
680 determine the “closest” substitute when substitution is necessary.
682 <p>Unlike other CSS properties, component values are a comma-separated list
683 indicating alternatives. A user agent iterates through the list of family
684 names until it matches an available font that contains a glyph for the
685 character to be rendered. This allows for differences in available fonts
686 across platforms and for differences in the range of characters supported
687 by individual fonts.
689 <p>A font family name only specifies a name given to a set of font faces,
690 it does not specify an individual face. For example, given the
691 availability of the fonts below, Futura would match but Futura Medium
692 would not:
694 <div class=figure><img alt="family and face names"
695 src=familyvsfacename.png>
696 <p class=caption>Family and individual face names
697 </div>
699 <p>Consider the example below:
701 <div class=example>
702 <pre>body {
703 font-family: Helvetica, Verdana, sans-serif;
704 }</pre>
706 <p>If Helvetica is available it will be used when rendering. If neither
707 Helvetica nor Verdana is present, then the user-agent-defined sans serif
708 font will be used.</p>
709 </div>
711 <p>There are two types of font family names:
713 <dl>
714 <dt><dfn id=family-name-value><var><family-name></var></dfn>
716 <dd>The name of a font family of choice such as Helvetica or Verdana in
717 the previous example.
719 <dt><dfn id=generic-family-value><var><generic-family></var></dfn>
721 <dd> The following generic family keywords are defined: ‘<a
722 href="#serif"><code class=property>serif</code></a>’, ‘<a
723 href="#sans-serif"><code class=property>sans-serif</code></a>’, ‘<a
724 href="#cursive"><code class=property>cursive</code></a>’, ‘<a
725 href="#fantasy"><code class=property>fantasy</code></a>’, and ‘<a
726 href="#monospace"><code class=property>monospace</code></a>’. These
727 keywords can be used as a general fallback mechanism when an author's
728 desired font choices are not available. As keywords, they must not be
729 quoted. Authors are encouraged to append a generic font family as a last
730 alternative for improved robustness.
731 </dl>
733 <p>Font family names other than generic families must either be given
734 quoted as <a
735 href="http://www.w3.org/TR/CSS21/syndata.html#strings">strings,</a> or
736 unquoted as a sequence of one or more <a
737 href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers.</a>
738 This means most punctuation characters and digits at the start of each
739 token must be escaped in unquoted font family names.
741 <p>To illustrate this, the following declarations are invalid:
743 <pre>
744 font-family: Red/Black, sans-serif;
745 font-family: "Lucida" Grande, sans-serif;
746 font-family: Ahem!, sans-serif;
747 font-family: test@foo, sans-serif;
748 font-family: #POUND, sans-serif;
749 font-family: Hawaii 5-0, sans-serif;
750 </pre>
752 <p>If a sequence of identifiers is given as a font family name, the
753 computed value is the name converted to a string by joining all the
754 identifiers in the sequence by single spaces.
756 <p>To avoid mistakes in escaping, it is recommended to quote font family
757 names that contain white space, digits, or punctuation characters other
758 than hyphens:
760 <pre>
761 body { font-family: "New Century Schoolbook", serif }
763 <BODY STYLE="font-family: '21st Century', fantasy">
764 </pre>
766 <p>Font family <em>names</em> that happen to be the same as a keyword value
767 (‘<code class=property>inherit</code>’, ‘<a href="#serif"><code
768 class=property>serif</code></a>’, ‘<a href="#sans-serif"><code
769 class=property>sans-serif</code></a>’, ‘<a href="#monospace"><code
770 class=property>monospace</code></a>’, ‘<a href="#fantasy"><code
771 class=property>fantasy</code></a>’, and ‘<a href="#cursive"><code
772 class=property>cursive</code></a>’) must be quoted to prevent confusion
773 with the keywords with the same names. The keywords ‘<code
774 class=property>initial</code>’ and ‘<code
775 class=property>default</code>’ are reserved for future use and must also
776 be quoted when used as font names. UAs must not consider these keywords as
777 matching the <a
778 href="#family-name-value"><var><family-name></var></a> type.
780 <p>The precise way a set of fonts are grouped into font families varies
781 depending upon the platform font management API's. The Windows GDI API
782 only allows four faces to be grouped into a family while the DirectWrite
783 API and API's on OSX and other platforms support font families with a
784 variety of weights, widths and slopes (see <a
785 href="#platform-props-to-css">Appendix A</a> for more details).
787 <p>Some font formats allow fonts to carry multiple localizations of the
788 family name. User agents must recognize and correctly match all of these
789 names independent of the underlying platform localization, system API used
790 or document encoding:
792 <div class=figure><img alt="examples of localized family names"
793 src=localizedfamilynames.png>
794 <p class=caption>Localized family names
795 </div>
797 <h4 id=generic-font-families><span class=secno>3.1.1 </span>Generic font
798 families</h4>
800 <p>All five generic font families are defined to exist in all CSS
801 implementations (they need not necessarily map to five distinct actual
802 fonts). User agents should provide reasonable default choices for the
803 generic font families, which express the characteristics of each family as
804 well as possible within the limits allowed by the underlying technology.
805 User agents are encouraged to allow users to select alternative choices
806 for the generic fonts.
808 <h5 class="no-num no-toc"> <span class=index-def id=serif0 title="serif,
809 definition of"><a name=serif-def><dfn id=serif>serif</dfn></a></span></h5>
811 <p>Serif fonts represent the formal text style for a script. This often
812 means but is not limited to glyphs that have finishing strokes, flared or
813 tapering ends, or have actual serifed endings (including slab serifs).
814 Serif fonts are typically proportionately-spaced. They often display a
815 greater variation between thick and thin strokes than fonts from the ‘<a
816 href="#sans-serif"><code class=property>sans-serif</code></a>’ generic
817 font family. CSS uses the term ‘<a href="#serif"><code
818 class=property>serif</code></a>’ to apply to a font for any script,
819 although other names may be more familiar for particular scripts, such as
820 Mincho (Japanese), Sung, Song or Kai (Chinese), Batang (Korean). For
821 Arabic, the Naskh style would correspond to ‘<a href="#serif"><code
822 class=property>serif</code></a>’ more due to its typographic role rather
823 than its actual design style. Any font that is so described may be used to
824 represent the generic ‘<a href="#serif"><code
825 class=property>serif</code></a>’ family.
827 <div class=figure><img alt="sample serif fonts" src=serifexamples.png>
828 <p class=caption>Sample serif fonts
829 </div>
831 <h5 class="no-num no-toc"> <span class=index-def id=sans-serif0
832 title="sans-serif, definition of"> <a name=sans-serif-def><dfn
833 id=sans-serif>sans-serif</dfn></a></span></h5>
835 <p>Glyphs in sans-serif fonts, as the term is used in CSS, are generally
836 low contrast (vertical and horizontal stems have the close to the same
837 thickness) and have stroke endings that are plain -- without any flaring,
838 cross stroke, or other ornamentation. Sans-serif fonts are typically
839 proportionately-spaced. They often have little variation between thick and
840 thin strokes, compared to fonts from the ‘<a href="#serif"><code
841 class=property>serif</code></a>’ family. CSS uses the term ‘<a
842 href="#sans-serif"><code class=property>sans-serif</code></a>’ to apply
843 to a font for any script, although other names may be more familiar for
844 particular scripts, such as Gothic (Japanese), Hei (Chinese), or Gulim
845 (Korean). Any font that is so described may be used to represent the
846 generic ‘<a href="#sans-serif"><code
847 class=property>sans-serif</code></a>’ family.
849 <div class=figure><img alt="sample sans-serif fonts"
850 src=sansserifexamples.png>
851 <p class=caption>Sample sans-serif fonts
852 </div>
854 <h5 class="no-num no-toc"> <span class=index-def id=cursive0
855 title="cursive, definition of"> <a name=cursive-def><dfn
856 id=cursive>cursive</dfn></a></span></h5>
858 <p>Glyphs in cursive fonts generally use a more informal script style, and
859 the result looks more like handwritten pen or brush writing than printed
860 letterwork. CSS uses the term ‘<a href="#cursive"><code
861 class=property>cursive</code></a>’ to apply to a font for any script,
862 although other names such as Chancery, Brush, Swing and Script are also
863 used in font names.
865 <div class=figure><img alt="sample cursive fonts" src=cursiveexamples.png>
866 <p class=caption>Sample cursive fonts
867 </div>
869 <h5 class="no-num no-toc"> <span class=index-def id=fantasy0
870 title="fantasy, definition of"> <a name=fantasy-def><dfn
871 id=fantasy>fantasy</dfn></a></span></h5>
873 <p>Fantasy fonts are primarily decorative or expressive fonts that contain
874 playful representations of characters. These do not include Pi or Picture
875 fonts which do not represent actual characters.
877 <div class=figure><img alt="sample fantasy fonts" src=fantasyexamples.png>
878 <p class=caption>Sample fantasy fonts
879 </div>
881 <h5 class="no-num no-toc"> <span class=index-def id=monospace0
882 title="monospace, definition of"> <a name=monospace-def><dfn
883 id=monospace>monospace</dfn></a></span></h5>
885 <p>The sole criterion of a monospace font is that all glyphs have the same
886 fixed width. This is often used to render samples of computer code.
888 <div class=figure><img alt="sample monospace fonts"
889 src=monospaceexamples.png>
890 <p class=caption>Sample monospace fonts
891 </div>
892 <!-- prop: font-weight -->
894 <h3 id=font-weight-prop><span class=secno>3.2 </span>Font weight: the <a
895 href="#propdef-font-weight">font-weight</a> property</h3>
897 <table class=propdef id=namefont-weightvaluenormal-bold-bolder-l>
898 <tbody>
899 <tr>
900 <td>Name:
902 <td><dfn id=propdef-font-weight
903 title="font-weight!!property">font-weight</dfn>
905 <tr>
906 <td>Value:
908 <td><a href="#font-weight-normal-value"
909 title="normal!!font-weight">normal</a> | <a href="#bold">bold</a> | <a
910 href="#bolder">bolder</a> | <a href="#lighter">lighter</a> | <a
911 href="#font-weight-numeric-values" title="100...900 weight
912 values">100</a> | <a href="#font-weight-numeric-values"
913 title="100...900 weight values">200</a> | <a
914 href="#font-weight-numeric-values" title="100...900 weight
915 values">300</a> | <a href="#font-weight-numeric-values"
916 title="100...900 weight values">400</a> | <a
917 href="#font-weight-numeric-values" title="100...900 weight
918 values">500</a> | <a href="#font-weight-numeric-values"
919 title="100...900 weight values">600</a> | <a
920 href="#font-weight-numeric-values" title="100...900 weight
921 values">700</a> | <a href="#font-weight-numeric-values"
922 title="100...900 weight values">800</a> | <a
923 href="#font-weight-numeric-values" title="100...900 weight
924 values">900</a>
926 <tr>
927 <td>Initial:
929 <td>normal
931 <tr>
932 <td>Applies to:
934 <td>all elements
936 <tr>
937 <td>Inherited:
939 <td>yes
941 <tr>
942 <td>Percentages:
944 <td>N/A
946 <tr>
947 <td>Media:
949 <td>visual
951 <tr>
952 <td>Computed value:
954 <td>numeric weight value (see description)
956 <tr>
957 <td>Animatable:
959 <td>as <a
960 href="http://dev.w3.org/csswg/css3-transitions/#animtype-font-weight">font
961 weight</a>
962 </table>
964 <p>The <a href="#propdef-font-weight"
965 title="font-weight!!property">‘<code
966 class=property>font-weight</code>’</a> property specifies the weight of
967 glyphs in the font, their degree of blackness or stroke thickness.
969 <p>Values have the following meanings:
971 <dl>
972 <dt><dfn id=font-weight-numeric-values title="100...900 weight values">100
973 to 900</dfn>
975 <dd>These values form an ordered sequence, where each number indicates a
976 weight that is at least as dark as its predecessor. These roughly
977 correspond to the commonly used weight names below:
978 </dl>
980 <ul>
981 <li>100 - Thin
983 <li>200 - Extra Light (Ultra Light)
985 <li>300 - Light
987 <li>400 - Normal
989 <li>500 - Medium
991 <li>600 - Semi Bold (Demi Bold)
993 <li>700 - Bold
995 <li>800 - Extra Bold (Ultra Bold)
997 <li>900 - Black (Heavy)
998 </ul>
1000 <dl>
1001 <dt><dfn id=font-weight-normal-value
1002 title="normal!!font-weight">normal</dfn>
1004 <dd>Same as ‘<code class=css>400</code>’.
1006 <dt><dfn id=bold>bold</dfn>
1008 <dd>Same as ‘<code class=css>700</code>’.
1010 <dt><dfn id=bolder>bolder</dfn>
1012 <dd>Specifies a bolder weight than the inherited value.
1014 <dt><dfn id=lighter>lighter</dfn>
1016 <dd>Specifies a lighter weight than the inherited value.
1017 </dl>
1019 <p>Font formats that use a scale other than a nine-step scale should map
1020 their scale onto the CSS scale so that 400 roughly corresponds with a face
1021 that would be labeled as Regular, Book, Roman and 700 roughly matches a
1022 face that would be labeled as Bold. Or weights may be inferred from the
1023 style names, ones that correspond roughly with the scale above. The scale
1024 is relative, so a face with a larger weight value must never appear
1025 lighter. If style names are used to infer weights, care should be taken to
1026 handle variations in style names across locales.
1028 <p>Quite often there are only a few weights available for a particular font
1029 family. When a weight is specified for which no face exists, a face with a
1030 nearby weight is used. In general, bold weights map to faces with heavier
1031 weights and light weights map to faces with lighter weights (see the <a
1032 href="#font-matching-algorithm">font matching section below</a> for a
1033 precise definition). The examples here illustrate which face is used for
1034 different weights, grey indicates a face for that weight does not exist so
1035 a face with a nearby weight is used:
1037 <div class=figure><img alt="weight mappings for a family with 400, 700 and
1038 900 weights" src=optimaweights.png>
1039 <p class=caption>Weight mappings for a font family with 400, 700 and 900
1040 weight faces
1041 </div>
1043 <div class=figure><img alt="weight mappings for a family with 300, 600
1044 weights" src=hiraginoweights.png>
1045 <p class=caption>Weight mappings for a font family with 300 and 600 weight
1046 faces
1047 </div>
1049 <p>Although the practice is not well-loved by typographers, bold faces are
1050 often synthesized by user agents for faces that lack actual bold faces.
1051 For the purposes of style matching, these faces must be treated as if they
1052 exist within the family. Authors can explicitly avoid this behavior by
1053 using the ‘<a href="#propdef-font-synthesis"><code
1054 class=property>font-synthesis</code></a>’ property.
1056 <p>Specified values of ‘<a href="#bolder"><code
1057 class=property>bolder</code></a>’ and ‘<a href="#lighter"><code
1058 class=property>lighter</code></a>’ indicate weights relative to the
1059 weight of the parent element. The computed weight is calculated based on
1060 the inherited <a href="#propdef-font-weight"
1061 title="font-weight!!property">‘<code
1062 class=property>font-weight</code>’</a> value using the chart below.
1064 <table class=data id=bolderlighter summary="Bolder/lighter mappings">
1065 <thead>
1066 <tr>
1067 <th>Inherited value
1069 <th>bolder
1071 <th>lighter
1073 <tbody>
1074 <tr>
1075 <th>100
1077 <td>400
1079 <td>100
1081 <tr>
1082 <th>200
1084 <td>400
1086 <td>100
1088 <tr>
1089 <th>300
1091 <td>400
1093 <td>100
1095 <tr>
1096 <th>400
1098 <td>700
1100 <td>100
1102 <tr>
1103 <th>500
1105 <td>700
1107 <td>100
1109 <tr>
1110 <th>600
1112 <td>900
1114 <td>400
1116 <tr>
1117 <th>700
1119 <td>900
1121 <td>400
1123 <tr>
1124 <th>800
1126 <td>900
1128 <td>700
1130 <tr>
1131 <th>900
1133 <td>900
1135 <td>700
1136 </table>
1138 <p>The table above is equivalent to selecting the next relative bolder or
1139 lighter face, given a font family containing normal and bold faces along
1140 with a thin and a heavy face. Authors who desire finer control over the
1141 exact weight values used for a given element may use numerical values
1142 instead of relative weights.</p>
1143 <!-- prop: font-stretch -->
1145 <h3 id=font-stretch-prop><span class=secno>3.3 </span>Font width: the <a
1146 href="#propdef-font-stretch">font-stretch</a> property</h3>
1148 <table class=propdef id=namefont-stretchvalue-normal-ultra-conde>
1149 <tbody>
1150 <tr>
1151 <td>Name:
1153 <td><dfn id=propdef-font-stretch
1154 title="font-stretch!!property">font-stretch</dfn>
1156 <tr>
1157 <td>Value:
1159 <td> <a href="#font-stretch-normal-value"
1160 title="normal!!font-stretch">normal</a> | <a
1161 href="#ultra-condensed">ultra-condensed</a> | <a
1162 href="#extra-condensed">extra-condensed</a> | <a
1163 href="#condensed">condensed</a> | <a
1164 href="#semi-condensed-">semi-condensed</a> | <a
1165 href="#semi-expanded">semi-expanded</a> | <a
1166 href="#expanded">expanded</a> | <a
1167 href="#extra-expanded">extra-expanded</a> | <a
1168 href="#ultra-expanded">ultra-expanded</a>
1170 <tr>
1171 <td>Initial:
1173 <td>normal
1175 <tr>
1176 <td>Applies to:
1178 <td>all elements
1180 <tr>
1181 <td>Inherited:
1183 <td>yes
1185 <tr>
1186 <td>Percentages:
1188 <td>N/A
1190 <tr>
1191 <td>Media:
1193 <td>visual
1195 <tr>
1196 <td>Computed value:
1198 <td>as specified
1200 <tr>
1201 <td>Animatable:
1203 <td>as <a href="#font-stretch-animation">font stretch</a>
1204 </table>
1206 <p>The <a href="#propdef-font-stretch"
1207 title="font-stretch!!property">‘<code
1208 class=property>font-stretch</code>’</a> property selects a normal,
1209 condensed, or expanded face from a font family. Absolute keyword values
1210 have the following ordering, from narrowest to widest:
1212 <ul>
1213 <li><dfn id=ultra-condensed>ultra-condensed</dfn>
1215 <li><dfn id=extra-condensed>extra-condensed</dfn>
1217 <li><dfn id=condensed>condensed</dfn>
1219 <li><dfn id=semi-condensed->semi-condensed </dfn>
1221 <li><dfn id=font-stretch-normal-value
1222 title="normal!!font-stretch">normal</dfn>
1224 <li><dfn id=semi-expanded>semi-expanded</dfn>
1226 <li><dfn id=expanded>expanded</dfn>
1228 <li><dfn id=extra-expanded>extra-expanded</dfn>
1230 <li><dfn id=ultra-expanded>ultra-expanded</dfn>
1231 </ul>
1233 <p>When a face does not exist for a given width, normal or condensed values
1234 map to a narrower face, otherwise a wider face. Conversely, expanded
1235 values map to a wider face, otherwise a narrower face. The figure below
1236 shows how the nine font-stretch property settings affect font selection
1237 for font family containing a variety of widths, grey indicates a width for
1238 which no face exists and a different width is substituted:
1240 <div class=figure><img alt="width mappings for a family with condensed,
1241 normal and expanded faces" src=universwidths.png>
1242 <p class=caption>Width mappings for a font family with condensed, normal
1243 and expanded width faces
1244 </div>
1246 <p id=font-stretch-animation>Animation of font stretch: Font stretch is
1247 interpolated in discrete steps. The interpolation happens as though the
1248 ordered values are equally spaced real numbers. The interpolation result
1249 is rounded to the nearest value, with values exactly halfway between two
1250 values rounded towards the later value in the list above.</p>
1251 <!-- prop: font-style -->
1253 <h3 id=font-style-prop><span class=secno>3.4 </span>Font style: the <a
1254 href="#propdef-font-style">font-style</a> property</h3>
1256 <table class=propdef id=namefont-stylevaluenormal-italic-oblique>
1257 <tbody>
1258 <tr>
1259 <td>Name:
1261 <td><dfn id=propdef-font-style
1262 title="font-style!!property">font-style</dfn>
1264 <tr>
1265 <td>Value:
1267 <td><a href="#font-style-normal-value"
1268 title="normal!!font-style">normal</a> | <a href="#italic">italic</a> |
1269 <a href="#oblique">oblique</a>
1271 <tr>
1272 <td>Initial:
1274 <td>normal
1276 <tr>
1277 <td>Applies to:
1279 <td>all elements
1281 <tr>
1282 <td>Inherited:
1284 <td>yes
1286 <tr>
1287 <td>Percentages:
1289 <td>N/A
1291 <tr>
1292 <td>Media:
1294 <td>visual
1296 <tr>
1297 <td>Computed value:
1299 <td>as specified
1301 <tr>
1302 <td>Animatable:
1304 <td>no
1305 </table>
1307 <p>The <a href="#propdef-font-style" title="font-style!!property">‘<code
1308 class=property>font-style</code>’</a> property allows italic or oblique
1309 faces to be selected. Italic forms are generally cursive in nature while
1310 oblique faces are typically sloped versions of the regular face. Oblique
1311 faces can be simulated by artificially sloping the glyphs of the regular
1312 face. Compare the artificially sloped renderings of Palatino ‘<code
1313 class=property>a</code>’ and Baskerville ‘<code
1314 class=property>N</code>’ in grey with the actual italic versions:
1316 <div class=figure><img alt="artificial sloping vs. real italics"
1317 src=realvsfakeitalics.png>
1318 <p class=caption>Artificial sloping versus real italics
1319 </div>
1321 <p>Values have the following meanings:
1323 <dl>
1324 <dt><dfn id=font-style-normal-value
1325 title="normal!!font-style">normal</dfn>
1327 <dd>selects a face that is classified as a normal face, one that is
1328 neither italic or obliqued
1330 <dt><dfn id=italic>italic</dfn>
1332 <dd>selects a font that is labeled as an italic face, or an oblique face
1333 if one is not
1335 <dt><dfn id=oblique>oblique</dfn>
1337 <dd>selects a font that is labeled as an oblique face, or an italic face
1338 if one is not
1339 </dl>
1341 <p>If no italic or oblique face is available, oblique faces can be
1342 synthesized by rendering non-obliqued faces with an artificial obliquing
1343 operation. The use of these artificially obliqued faces can be disabled
1344 using the ‘<a href="#propdef-font-synthesis"><code
1345 class=property>font-synthesis</code></a>’ property. The details of the
1346 obliquing operation are not explicitly defined.</p>
1347 <!-- resolution on the "undefined" nature of synthetics: http://www.w3.org/2013/06/06-css-minutes.html#item03 -->
1349 <p>Many scripts lack the tradition of mixing a cursive form within text
1350 rendered with a normal face. Chinese, Japanese and Korean fonts almost
1351 always lack italic or oblique faces. Fonts that support a mixture of
1352 scripts will sometimes omit specific scripts such as Arabic from the set
1353 of glyphs supported in the italic face. User agents should be careful
1354 about making <a href="#character-map"><em>character map</em></a>
1355 assumptions across faces when implementing support for <a
1356 href="#system-font-fallback"><em>system font fallback</em></a>.</p>
1357 <!-- prop: font-size -->
1359 <h3 id=font-size-prop><span class=secno>3.5 </span>Font size: the <a
1360 href="#propdef-font-size">font-size</a> property</h3>
1362 <table class=propdef id=namefont-sizevalueltabsolute-sizegt-ltre>
1363 <tbody>
1364 <tr>
1365 <td>Name:
1367 <td><dfn id=propdef-font-size>font-size</dfn>
1369 <tr>
1370 <td>Value:
1372 <td><a href="#absolute-size-value"><var><absolute-size></var></a>
1373 | <a href="#relative-size-value"><var><relative-size></var></a> |
1374 <a href="#length-size-value"><var><length></var></a> | <a
1375 href="#percentage-size-value"><var><percentage></var></a>
1377 <tr>
1378 <td>Initial:
1380 <td>medium
1382 <tr>
1383 <td>Applies to:
1385 <td>all elements
1387 <tr>
1388 <td>Inherited:
1390 <td>yes
1392 <tr>
1393 <td>Percentages:
1395 <td>refer to parent element's font size
1397 <tr>
1398 <td>Media:
1400 <td>visual
1402 <tr>
1403 <td>Computed value:
1405 <td>absolute length
1407 <tr>
1408 <td>Animatable:
1410 <td>as <a
1411 href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a>
1412 </table>
1414 <p>This property indicates the desired height of glyphs from the font. For
1415 scalable fonts, the font-size is a scale factor applied to the EM unit of
1416 the font. (Note that certain glyphs may bleed outside their EM box.) For
1417 non-scalable fonts, the font-size is converted into absolute units and
1418 matched against the declared font-size of the font, using the same
1419 absolute coordinate space for both of the matched values. Values have the
1420 following meanings:
1422 <dl>
1423 <dt><dfn id=absolute-size-value><var><absolute-size></var></dfn>
1425 <dd> An <a
1426 href="#absolute-size-value"><var><absolute-size></var></a> keyword
1427 refers to an entry in a table of font sizes computed and kept by the user
1428 agent. Possible values are:
1429 <p> [ xx-small | x-small | small | medium | large | x-large | xx-large ]</p>
1431 <dt><dfn id=relative-size-value><var><relative-size></var></dfn>
1433 <dd> A <a href="#relative-size-value"><var><relative-size></var></a>
1434 keyword is interpreted relative to the table of font sizes and the
1435 computed ‘<a href="#propdef-font-size"><code
1436 class=property>font-size</code></a>’ of the parent element. Possible
1437 values are:
1438 <p> [ larger | smaller ]
1440 <p> For example, if the parent element has a font size of ‘<code
1441 class=property>medium</code>’, a value of ‘<code
1442 class=property>larger</code>’ will make the font size of the current
1443 element be ‘<code class=property>large</code>’. If the parent
1444 element's size is not close to a table entry, the user agent is free to
1445 interpolate between table entries or round off to the closest one. The
1446 user agent may have to extrapolate table values if the numerical value
1447 goes beyond the keywords.
1449 <dt><dfn id=length-size-value><var><length></var></dfn>
1451 <dd>A length value specifies an absolute font size (independent of the
1452 user agent's font table). Negative lengths are illegal.
1454 <dt><dfn id=percentage-size-value><var><percentage></var></dfn>
1456 <dd>A percentage value specifies an absolute font size relative to the
1457 parent element's font size. Use of percentage values, or values in
1458 ‘<code class=property>em</code>’s, leads to more robust and
1459 cascadable style sheets.
1460 </dl>
1462 <p>The following table provides user agent guidelines for the absolute-size
1463 scaling factor and their mapping to HTML heading and absolute font-sizes.
1464 The ‘<code class=property>medium</code>’ value is used as the
1465 reference middle value. The user agent may fine-tune these values for
1466 different fonts or different types of display devices.
1468 <table class=data>
1469 <thead>
1470 <tr>
1471 <th>CSS absolute-size values
1473 <th>xx-small
1475 <th>x-small
1477 <th>small
1479 <th>medium
1481 <th>large
1483 <th>x-large
1485 <th>xx-large
1487 <th>
1489 <tbody>
1490 <tr>
1491 <th>scaling factor
1493 <td>3/5
1495 <td>3/4
1497 <td>8/9
1499 <td>1
1501 <td>6/5
1503 <td>3/2
1505 <td>2/1
1507 <td>3/1
1509 <tr>
1510 <th>HTML headings
1512 <td>h6
1514 <td>
1516 <td>h5
1518 <td>h4
1520 <td>h3
1522 <td>h2
1524 <td>h1
1526 <td>
1528 <tr>
1529 <th>HTML font sizes
1531 <td>1
1533 <td>
1535 <td>2
1537 <td>3
1539 <td>4
1541 <td>5
1543 <td>6
1545 <td>7
1546 </table>
1548 <p class=note><em><strong>Note 1.</strong> To preserve readability, an UA
1549 applying these guidelines should nevertheless avoid creating font-size
1550 resulting in less than 9 device pixels per EM unit on a computer
1551 display.</em>
1553 <p class=note><em><strong>Note 2.</strong> In CSS1, the suggested scaling
1554 factor between adjacent indexes was 1.5 which user experience proved to be
1555 too large. In CSS2, the suggested scaling factor for computer screen
1556 between adjacent indexes was 1.2 which still created issues for the small
1557 sizes. The new scaling factor varies between each index to provide a
1558 better readability.</em>
1560 <p>The actual value of this property may differ from the computed value due
1561 a numerical value on ‘<a href="#propdef-font-size-adjust"><code
1562 class=property>font-size-adjust</code></a>’ and the unavailability of
1563 certain font sizes.
1565 <p>Child elements inherit the computed <a class=noxref
1566 href="#font-size-prop"> <span class=property>‘<code
1567 class=property>font-size</code>’</span></a> value (otherwise, the effect
1568 of <a class=noxref href="#font-size-adjust-prop"><span
1569 class=property>‘<code
1570 class=property>font-size-adjust</code>’</span></a> would compound).
1572 <div class=example>
1573 <p style="display:none">Example(s):</p>
1575 <pre>p { font-size: 12pt; }
1576 blockquote { font-size: larger }
1577 em { font-size: 150% }
1578 em { font-size: 1.5em }
1579 </pre>
1580 </div>
1581 <!-- prop: font-size-adjust -->
1583 <h3 id=font-size-adjust-prop><span class=secno>3.6 </span>Relative sizing:
1584 the <a href="#propdef-font-size-adjust">font-size-adjust</a> property</h3>
1586 <table class=propdef id=namefont-size-adjustvaluenone-auto-ltnum>
1587 <tbody>
1588 <tr>
1589 <td>Name:
1591 <td><dfn id=propdef-font-size-adjust>font-size-adjust</dfn>
1593 <tr>
1594 <td>Value:
1596 <td><a href="#font-size-adjust-none-value"
1597 title="none!!font-size-adjust">none</a> | <a
1598 href="#font-size-adjust-auto-value"
1599 title="auto!!font-size-adjust">auto</a> | <a
1600 href="#aspect-ratio-value"><var><number></var></a>
1602 <tr>
1603 <td>Initial:
1605 <td>none
1607 <tr>
1608 <td>Applies to:
1610 <td>all elements
1612 <tr>
1613 <td>Inherited:
1615 <td>yes
1617 <tr>
1618 <td>Percentages:
1620 <td>N/A
1622 <tr>
1623 <td>Media:
1625 <td>visual
1627 <tr>
1628 <td>Computed value:
1630 <td>as specified
1632 <tr>
1633 <td>Animatable:
1635 <td>as <a
1636 href="http://dev.w3.org/csswg/css3-transitions/#animtype-number">number</a>
1637 </table>
1639 <p>For any given font size, the apparent size and legibility of text varies
1640 across fonts. For scripts such as Latin or Cyrillic that distinguish
1641 between upper and lowercase letters, the relative height of lowercase
1642 letters compared to their uppercase counterparts is a determining factor
1643 of legibility. This is commonly referred to as the <a class=index-def
1644 href="#aspect-value" id=aspect-value0 title="aspect value"><dfn
1645 id=aspect-value>aspect value</dfn></a>. Precisely defined, it is equal to
1646 the x-height of a font divided by the font size.
1648 <p>In situations where font fallback occurs, fallback fonts may not share
1649 the same aspect ratio as the desired font family and will thus appear less
1650 readable. The font-size-adjust property is a way to preserve the
1651 readability of text when font fallback occurs. It does this by adjusting
1652 the font-size so that the x-height is the same regardless of the font
1653 used.
1655 <div class=example>
1656 <p>The style defined below defines Verdana as the desired font family, but
1657 if Verdana is not available Futura or Times will be used.</p>
1659 <pre>p {
1660 font-family: Verdana, Futura, Times;
1661 }
1663 <p>Lorem ipsum dolor sit amet, ...</p>
1664 </pre>
1666 <p>Verdana has a relatively high aspect ratio, lowercase letters are
1667 relatively tall compared to uppercase letters, so at small sizes text
1668 appears legible. Times has a lower aspect ratio and so if fallback
1669 occurs, the text will be less legible at small sizes than Verdana.</p>
1670 </div>
1672 <p>How text rendered in each of these fonts compares is shown below, the
1673 columns show text rendered in Verdana, Futura and Times. The same
1674 font-size value is used across cells within each row and red lines are
1675 included to show the differences in x-height. In the upper half each row
1676 is rendered in the same font-size value. The same is true for the lower
1677 half but in this half the font-size-adjust property is also set so that
1678 the actual font size is adjusted to preserve the x-height across each row.
1679 Note how small text remains relatively legible across each row in the
1680 lower half.
1682 <div class=figure><img alt="text with and without font-size-adjust"
1683 src=fontsizeadjust.png>
1684 <p class=caption>Text with and without the use of font-size-adjust
1685 </div>
1687 <p>This property allows authors to specify an <a
1688 href="#aspect-value"><i>aspect value</i></a> for an element that will
1689 effectively preserve the x-height of the first choice font, whether it is
1690 substituted or not. Values have the following meanings:
1692 <dl>
1693 <dt><dfn id=font-size-adjust-none-value
1694 title="none!!font-size-adjust">none</dfn>
1696 <dd>Do not preserve the font's x-height.
1698 <dt><dfn id=font-size-adjust-auto-value
1699 title="auto!!font-size-adjust">auto</dfn>
1701 <dd>Behaves just like <number>, except the number used is the <a
1702 href="#aspect-value"><i>aspect value</i></a> calculated by user agents
1703 for the first font in the list of fonts defined for the initial value of
1704 the <a href="#propdef-font-family" title="font-family!!property">‘<code
1705 class=property>font-family</code>’</a> property. Effectively this is
1706 the default font used for basic Latin text when <a
1707 href="#propdef-font-family" title="font-family!!property">‘<code
1708 class=property>font-family</code>’</a> is not otherwise specified. It
1709 does not vary based on document content and it is not calculated based on
1710 the computed value of <a href="#propdef-font-family"
1711 title="font-family!!property">‘<code
1712 class=property>font-family</code>’</a> for a given element.
1713 <p class=note>Authors can use this value to specify that font size should
1714 be normalized across fonts based on the x-height without the need to
1715 specify the aspect value explicitly.</p>
1717 <dt><dfn id=aspect-ratio-value><var><number></var></dfn>
1719 <dd>Specifies the <a href="#aspect-value"><i>aspect value</i></a> used in
1720 the calculation below to calculate the adjusted font size:
1721 <pre>c = ( a / a' ) s
1722 </pre>
1724 <p>where:</p>
1726 <pre>s = font-size value
1727 a = <a href="#aspect-value"><i>aspect value</i></a> as specified by the font-size-adjust property
1728 a' = <a href="#aspect-value"><i>aspect value</i></a> of actual font
1729 c = adjusted font-size to use
1730 </pre>
1732 <p>This value applies to any font that is selected but in typical usage
1733 it should be based on the <a href="#aspect-value"><i>aspect
1734 value</i></a> of the first font in the font-family list. If this is
1735 specified accurately, the <tt>(a/a')</tt> term in the formula above is
1736 effectively 1 for the first font and no adjustment occurs. If the value
1737 is specified inaccurately, text rendered using the first font in the
1738 family list will display differently in older user agents that don't
1739 support font-size-adjust.</p>
1740 </dl>
1742 <p>The value of ‘<a href="#propdef-font-size-adjust"><code
1743 class=property>font-size-adjust</code></a>’ affects the size of relative
1744 units that are based on font metrics of the <a
1745 href="#first-available-font"><i>first available font</i></a> such as
1746 <code>ex</code> and <code>ch</code> but does not affect the size of
1747 <code>em</code> units.
1749 <p class=note>In CSS, authors typically specify <a
1750 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
1751 class=property>line-height</code>’</a> using <a
1752 href="http://dev.w3.org/csswg/css-values/#em-unit">‘<code
1753 class=property>em</code>’</a> units so that the <a
1754 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
1755 class=property>line-height</code>’</a> is linked to the font size. Since
1756 the ‘<a href="#propdef-font-size-adjust"><code
1757 class=property>font-size-adjust</code></a>’ property affects the font
1758 size used but does not affect the size of font relative units, authors
1759 should take care setting the line height when ‘<a
1760 href="#propdef-font-size-adjust"><code
1761 class=property>font-size-adjust</code></a>’ is used. Setting the line
1762 height too tightly could result in overlapping lines of text in this
1763 situation.
1765 <p>Authors can calculate the <a href="#aspect-value"><i>aspect
1766 value</i></a> for a given font by comparing spans with the same content
1767 but different font-size-adjust properties. If the same font-size is used,
1768 the spans will match when the font-size-adjust value is accurate for the
1769 given font.
1771 <div class=example>
1772 <p>Two spans with borders are used to determine the <a
1773 href="#aspect-value"><i>aspect value</i></a> of a font. The font-size is
1774 the same for both spans but the font-size-adjust property is specified
1775 only for the right span. Starting with a value of 0.5, the aspect value
1776 can be adjusted until the borders around the two letters line up.</p>
1778 <pre>p {
1779 font-family: Futura;
1780 font-size: 500px;
1781 }
1783 span {
1784 border: solid 1px red;
1785 }
1787 .adjust {
1788 font-size-adjust: 0.5;
1789 }
1791 <p><span>b</span><span class="adjust">b</span></p>
1792 </pre>
1794 <div class=figure><img alt="Futura with an <i>aspect value</i> of 0.5"
1795 src=beforefontsizeadjust.png>
1796 <p class=caption>Futura with an <a href="#aspect-value"><i>aspect
1797 value</i></a> of 0.5
1798 </div>
1800 <p>The box on the right is a bit bigger than the one on the left, so the
1801 <a href="#aspect-value"><i>aspect value</i></a> of this font is something
1802 less than 0.5. Adjust the value until the boxes align.</p>
1803 </div>
1804 <!-- prop: font -->
1806 <h3 id=font-prop><span class=secno>3.7 </span>Shorthand font property: the
1807 <a href="#propdef-font">font</a> property</h3>
1809 <table class=propdef id=namefontvalue-ltlsquofont-stylersquogt-l>
1810 <tbody>
1811 <tr>
1812 <td>Name:
1814 <td><dfn id=propdef-font>font</dfn>
1816 <tr>
1817 <td>Value:
1819 <td>[ [ <var><<a href="#propdef-font-style"
1820 title="font-style!!property">‘<code
1821 class=property>font-style</code>’</a>></var> || <a
1822 href="#font-variant-css21-values"><var><font-variant-css21></var></a>
1823 || <var><<a href="#propdef-font-weight"
1824 title="font-weight!!property">‘<code
1825 class=property>font-weight</code>’</a>></var> || <var><<a
1826 href="#propdef-font-stretch" title="font-stretch!!property">‘<code
1827 class=property>font-stretch</code>’</a></var> ]? <var><‘<a
1828 href="#propdef-font-size"><code
1829 class=property>font-size</code></a>’></var> [ / <var><‘<code
1830 class=property>line-height</code>’></var> ]? <var><<a
1831 href="#propdef-font-family" title="font-family!!property">‘<code
1832 class=property>font-family</code>’</a>></var> ] | caption | icon |
1833 menu | message-box | small-caption | status-bar
1835 <tr>
1836 <td>Initial:
1838 <td>see individual properties
1840 <tr>
1841 <td>Applies to:
1843 <td>all elements
1845 <tr>
1846 <td>Inherited:
1848 <td>yes
1850 <tr>
1851 <td>Percentages:
1853 <td>see individual properties
1855 <tr>
1856 <td>Media:
1858 <td>visual
1860 <tr>
1861 <td>Computed value:
1863 <td>see individual properties
1865 <tr>
1866 <td>Animatable:
1868 <td>see individual properties
1869 </table>
1871 <p>The <span class=property>‘<a href="#propdef-font"><code
1872 class=property>font</code></a>’</span> property is, except as described
1873 below, a shorthand property for setting <a href="#propdef-font-style"
1874 title="font-style!!property">‘<code
1875 class=property>font-style</code>’</a>, <a href="#propdef-font-variant"
1876 title="font-variant!!property">‘<code
1877 class=property>font-variant</code>’</a>, <a href="#propdef-font-weight"
1878 title="font-weight!!property">‘<code
1879 class=property>font-weight</code>’</a>, <a href="#propdef-font-stretch"
1880 title="font-stretch!!property">‘<code
1881 class=property>font-stretch</code>’</a>, <span class=property>‘<a
1882 href="#propdef-font-size"><code
1883 class=property>font-size</code></a>’</span>, <a class=property
1884 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
1885 class=property>line-height</code>’</a>, <a href="#propdef-font-family"
1886 title="font-family!!property">‘<code
1887 class=property>font-family</code>’</a> at the same place in the
1888 stylesheet. Values for the <a href="#propdef-font-variant"
1889 title="font-variant!!property">‘<code
1890 class=property>font-variant</code>’</a> property may also be included
1891 but only those supported in CSS 2.1, none of the <a
1892 href="#propdef-font-variant" title="font-variant!!property">‘<code
1893 class=property>font-variant</code>’</a> values added in this
1894 specification can be used in the <span class=property>‘<a
1895 href="#propdef-font"><code class=property>font</code></a>’</span>
1896 shorthand:
1898 <pre
1899 class=prod><dfn id=font-variant-css21-values><var><font-variant-css21></var></dfn> = [normal | small-caps]</pre>
1901 <p>The syntax of this property is based on a traditional typographical
1902 shorthand notation to set multiple properties related to fonts.
1904 <p>All subproperties of the ‘<a href="#propdef-font"><code
1905 class=property>font</code></a>’ property are first reset to their
1906 initial values, including those listed above plus <span
1907 class=property>‘<a href="#propdef-font-size-adjust"><code
1908 class=property>font-size-adjust</code></a>’</span>, <span
1909 class=property>‘<a href="#propdef-font-kerning"><code
1910 class=property>font-kerning</code></a>’</span>, subproperties of <a
1911 href="#propdef-font-variant" title="font-variant!!property">‘<code
1912 class=property>font-variant</code>’</a> and and <span>‘<a
1913 href="#propdef-font-language-override"><code
1914 class=property>font-language-override</code></a>’</span>. Then, those
1915 properties that are given explicit values in the <span
1916 class=property>‘<a href="#propdef-font"><code
1917 class=property>font</code></a>’</span> shorthand are set to those
1918 values. For a definition of allowed and initial values, see the previously
1919 defined properties. For reasons of backwards compatibility, it is not
1920 possible to set <span class=property>‘<a
1921 href="#propdef-font-size-adjust"><code
1922 class=property>font-size-adjust</code></a>’</span> to anything other
1923 than its initial value using the <span class=property>‘<a
1924 href="#propdef-font"><code class=property>font</code></a>’</span>
1925 shorthand property; instead, use the individual property.
1927 <div class=example>
1928 <p style="display:none">Example(s):</p>
1930 <pre>p { font: 12pt/14pt sans-serif }
1931 p { font: 80% sans-serif }
1932 p { font: x-large/110% "new century schoolbook", serif }
1933 p { font: bold italic large Palatino, serif }
1934 p { font: normal small-caps 120%/120% fantasy }
1935 p { font: condensed oblique 12pt "Helvetica Neue", serif; }
1936 </pre>
1938 <p> In the second rule, the font size percentage value (‘<code
1939 class=css>80%</code>’) refers to the computed ‘<a
1940 href="#propdef-font-size"><code class=property>font-size</code></a>’ of
1941 the parent element. In the third rule, the line height percentage
1942 (‘<code class=css>110%</code>’) refers to the font size of the
1943 element itself.
1945 <p>The first three rules do not specify the <a
1946 href="#propdef-font-variant" title="font-variant!!property">‘<code
1947 class=property>font-variant</code>’</a> and <a
1948 href="#propdef-font-weight" title="font-weight!!property">‘<code
1949 class=property>font-weight</code>’</a> explicitly, so these properties
1950 receive their initial values (<span title="normal value">‘<code
1951 class=property>normal</code>’</span>). Notice that the font family name
1952 "new century schoolbook", which contains spaces, is enclosed in quotes.
1953 The fourth rule sets the <a href="#propdef-font-weight"
1954 title="font-weight!!property">‘<code
1955 class=property>font-weight</code>’</a> to ‘<a href="#bold"><code
1956 class=property>bold</code></a>’, the <a href="#propdef-font-style"
1957 title="font-style!!property">‘<code
1958 class=property>font-style</code>’</a> to ‘<a href="#italic"><code
1959 class=property>italic</code></a>’, and implicitly sets <a
1960 href="#propdef-font-variant" title="font-variant!!property">‘<code
1961 class=property>font-variant</code>’</a> to <a
1962 href="#font-variant-normal-value" title="normal!!font-variant">‘<code
1963 class=property>normal</code>’</a>.
1965 <p> The fifth rule sets the <a href="#propdef-font-variant"
1966 title="font-variant!!property">‘<code
1967 class=property>font-variant</code>’</a> (‘<a href="#small-caps"><code
1968 class=property>small-caps</code></a>’), the <span class=property>‘<a
1969 href="#propdef-font-size"><code
1970 class=property>font-size</code></a>’</span> (120% of the parent's font
1971 size), the <a class=property
1972 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
1973 class=property>line-height</code>’</a> (120% of the font size) and the
1974 <a href="#propdef-font-family" title="font-family!!property">‘<code
1975 class=property>font-family</code>’</a> (‘<a href="#fantasy"><code
1976 class=property>fantasy</code></a>’). It follows that the keyword <span
1977 title="normal value">‘<code class=property>normal</code>’</span>
1978 applies to the two remaining properties: <a href="#propdef-font-style"
1979 title="font-style!!property">‘<code
1980 class=property>font-style</code>’</a> and <a
1981 href="#propdef-font-weight" title="font-weight!!property">‘<code
1982 class=property>font-weight</code>’</a>.
1984 <p>The sixth rule sets the <a href="#propdef-font-style"
1985 title="font-style!!property">‘<code
1986 class=property>font-style</code>’</a>, <a href="#propdef-font-stretch"
1987 title="font-stretch!!property">‘<code
1988 class=property>font-stretch</code>’</a>, <span class=property>‘<a
1989 href="#propdef-font-size"><code
1990 class=property>font-size</code></a>’</span>, and <a
1991 href="#propdef-font-family" title="font-family!!property">‘<code
1992 class=property>font-family</code>’</a>, the other font properties being
1993 set to their initial values.
1994 </div>
1996 <p>Since the <a href="#propdef-font-stretch"
1997 title="font-stretch!!property">‘<code
1998 class=property>font-stretch</code>’</a> property was not defined in CSS
1999 2.1, when using <a href="#propdef-font-stretch"
2000 title="font-stretch!!property">‘<code
2001 class=property>font-stretch</code>’</a> values within ‘<a
2002 href="#propdef-font"><code class=property>font</code></a>’ rules,
2003 authors should include a extra version compatible with older user agents:
2005 <pre>p {
2006 font: 80% sans-serif; /* for older user agents */
2007 font: condensed 80% sans-serif;
2008 }</pre>
2010 <p>The following values refer to system fonts:
2012 <dl>
2013 <dt><strong>caption</strong>
2015 <dd>The font used for captioned controls (e.g., buttons, drop-downs,
2016 etc.).
2018 <dt><strong>icon</strong>
2020 <dd>The font used to label icons.
2022 <dt><strong>menu</strong>
2024 <dd>The font used in menus (e.g., dropdown menus and menu lists).
2026 <dt><strong>message-box</strong>
2028 <dd>The font used in dialog boxes.
2030 <dt><strong>small-caption</strong>
2032 <dd>The font used for labeling small controls.
2034 <dt><strong>status-bar</strong>
2036 <dd>The font used in window status bars.
2037 </dl>
2039 <p>System fonts may only be set as a whole; that is, the font family, size,
2040 weight, style, etc. are all set at the same time. These values may then be
2041 altered individually if desired. If no font with the indicated
2042 characteristics exists on a given platform, the user agent should either
2043 intelligently substitute (e.g., a smaller version of the ‘<code
2044 class=property>caption</code>’ font might be used for the ‘<code
2045 class=property>small-caption</code>’ font), or substitute a user agent
2046 default font. As for regular fonts, if, for a system font, any of the
2047 individual properties are not part of the operating system's available
2048 user preferences, those properties should be set to their initial values.
2050 <p>That is why this property is "almost" a shorthand property: system fonts
2051 can only be specified with this property, not with <a
2052 href="#propdef-font-family" title="font-family!!property">‘<code
2053 class=property>font-family</code>’</a> itself, so <span
2054 class=property>‘<a href="#propdef-font"><code
2055 class=property>font</code></a>’</span> allows authors to do more than
2056 the sum of its subproperties. However, the individual properties such as
2057 <a href="#propdef-font-weight" title="font-weight!!property">‘<code
2058 class=property>font-weight</code>’</a> are still given values taken from
2059 the system font, which can be independently varied.
2061 <p>Note that the keywords used for the system fonts listed above are only
2062 treated as keywords when they occur in the initial position, in other
2063 positions the same string is treated as part of the font family name:
2065 <pre> font: menu; /* use the font settings for system menus */
2066 font: large menu; /* use a font family named "menu" */</pre>
2068 <div class=example>
2069 <p style="display:none">Example(s):</p>
2071 <pre>button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
2072 button p { font: menu }
2073 button p em { font-weight: bolder }
2074 </pre>
2076 <p>If the font used for dropdown menus on a particular system happened to
2077 be, for example, 9-point Charcoal, with a weight of 600, then P elements
2078 that were descendants of BUTTON would be displayed as if this rule were
2079 in effect:
2081 <pre>button p { font: 600 9pt Charcoal }
2082 </pre>
2084 <p>Because the <span class=property>‘<a href="#propdef-font"><code
2085 class=property>font</code></a>’</span> shorthand resets to its initial
2086 value any property not explicitly given a value, this has the same effect
2087 as this declaration:
2089 <pre>button p {
2090 font-style: normal;
2091 font-variant: normal;
2092 font-weight: 600;
2093 font-size: 9pt;
2094 line-height: normal;
2095 font-family: Charcoal
2096 }
2097 </pre>
2098 </div>
2099 <!-- prop: font-synthesis -->
2101 <h3 id=font-synthesis-prop><span class=secno>3.8 </span>Controlling
2102 synthetic faces: the <a href="#propdef-font-synthesis">font-synthesis</a>
2103 property</h3>
2105 <table class=propdef id=namefont-synthesisvaluenone-weight-style>
2106 <tbody>
2107 <tr>
2108 <td>Name:
2110 <td><dfn id=propdef-font-synthesis>font-synthesis</dfn>
2112 <tr>
2113 <td>Value:
2115 <td>none | [ weight || style ]
2117 <tr>
2118 <td>Initial:
2120 <td>weight style
2122 <tr>
2123 <td>Applies to:
2125 <td>all elements
2127 <tr>
2128 <td>Inherited:
2130 <td>yes
2132 <tr>
2133 <td>Percentages:
2135 <td>N/A
2137 <tr>
2138 <td>Media:
2140 <td>visual
2142 <tr>
2143 <td>Computed value:
2145 <td>as specified
2147 <tr>
2148 <td>Animatable:
2150 <td>no
2151 </table>
2153 <p>This property controls whether user agents are allowed to synthesize
2154 bold or oblique font faces when a font family lacks bold or italic faces.
2155 If ‘<a href="#weight"><code class=property>weight</code></a>’ is not
2156 specified, user agents must not synthesize bold faces and if ‘<code
2157 class=property>style</code>’ is not specified user agents must not
2158 synthesize italic faces. A value of ‘<code class=property>none</code>’
2159 disallows all synthetic faces.
2161 <div class=example>
2162 <p>The style rule below disables the use of synthetically obliqued Arabic:</p>
2164 <pre>*:lang(ar) { font-synthesis: none; }
2165 </pre>
2166 </div>
2168 <h2 id=font-resources><span class=secno>4 </span>Font Resources</h2>
2170 <h3 id=font-face-rule><span class=secno>4.1 </span>The <dfn
2171 id=at-font-face-rule style="font-weight: inherit; font-style:
2172 inherit"><code>@font-face</code></dfn> rule</h3>
2174 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule allows
2175 for linking to fonts that are automatically fetched and activated when
2176 needed. This allows authors to select a font that closely matches the
2177 design goals for a given page rather than limiting the font choice to a
2178 set of fonts available on all platforms. A set of font descriptors define
2179 the location of a font resource, either locally or externally, along with
2180 the style characteristics of an individual face. Multiple <a
2181 href="#at-font-face-rule"><code>@font-face</code></a> rules can be used to
2182 construct font families with a variety of faces. Using CSS font matching
2183 rules, a user agent can selectively download only those faces that are
2184 needed for a given piece of text.
2186 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule
2187 consists of the <a href="#at-font-face-rule"><code>@font-face</code></a>
2188 at-keyword followed by a block of descriptor declarations. In terms of the
2189 grammar, this specification defines the following productions:
2191 <pre><dfn id=fontfacerule>font_face_rule</dfn>
2192 : <a href="#fontfacesym"><i>FONT_FACE_SYM</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* '{' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#descriptordeclaration"><i>descriptor_declaration</i></a>? [ ';' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#descriptordeclaration"><i>descriptor_declaration</i></a>? ]* '}' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
2193 ;
2195 <dfn id=descriptordeclaration>descriptor_declaration</dfn>
2196 : <a href="http://www.w3.org/TR/CSS21/grammar.html#grammar"><i>property</i></a> ':' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/grammar.html#grammar"><i>expr</i></a>
2197 ;</pre>
2199 <p>The following new definitions are introduced:
2201 <pre>- -|\\0{0,4}2d(\r\n|[ \t\r\n\f])?
2202 F f|\\0{0,4}(46|66)(\r\n|[ \t\r\n\f])?</pre>
2204 <p>The following new token is introduced:
2206 <pre>@{F}{O}{N}{T}{-}{F}{A}{C}{E} {return <dfn id=fontfacesym>FONT_FACE_SYM</dfn>;}</pre>
2208 <p>Each <a href="#at-font-face-rule"><code>@font-face</code></a> rule
2209 specifies a value for every font descriptor, either implicitly or
2210 explicitly. Those not given explicit values in the rule take the initial
2211 value listed with each descriptor in this specification. These descriptors
2212 apply solely within the context of the <a
2213 href="#at-font-face-rule"><code>@font-face</code></a> rule in which they
2214 are defined, and do not apply to document language elements. There is no
2215 notion of which elements the descriptors apply to or whether the values
2216 are inherited by child elements. When a given descriptor occurs multiple
2217 times in a given <a href="#at-font-face-rule"><code>@font-face</code></a>
2218 rule, only the last descriptor declaration is used and all prior
2219 declarations for that descriptor are ignored.
2221 <div class=example>
2222 <p>To use a downloadable font called Gentium:</p>
2224 <pre>
2225 @font-face {
2226 font-family: Gentium;
2227 src: url(http://example.com/fonts/Gentium.woff);
2228 }
2230 p { font-family: Gentium, serif; }
2231 </pre>
2233 <p>The user agent will download Gentium and use it when rendering text
2234 within paragraph elements. If for some reason the site serving the font
2235 is unavailable, the default serif font will be used.</p>
2236 </div>
2238 <p>A given set of <a href="#at-font-face-rule"><code>@font-face</code></a>
2239 rules define a set of fonts available for use within the documents that
2240 contain these rules. When font matching is done, fonts defined using these
2241 rules are considered before other available fonts on a system.
2243 <p>Downloaded fonts are only available to documents that reference them.
2244 The process of activating these fonts must not make them available to
2245 other applications or to documents that don't directly link to the same
2246 font. User agent implementers might consider it convenient to use
2247 downloaded fonts when rendering characters in other documents for which no
2248 other available font exists as part of the <a
2249 href="#system-font-fallback"><em>system font fallback</em></a> procedure.
2250 However, this would cause a security leak since the contents of one page
2251 would be able to affect other pages, something an attacker could use as an
2252 attack vector. These restrictions do not affect caching behavior, fonts
2253 are cached the same way other web resources are cached.
2255 <p>This at-rule follows the forward-compatible parsing rules of CSS. Like
2256 properties in a declaration block, declarations of any descriptors that
2257 are not supported by the user agent must be ignored. <a
2258 href="#at-font-face-rule"><code>@font-face</code></a> rules require a
2259 font-family and src descriptor; if either of these are missing, the <a
2260 href="#at-font-face-rule"><code>@font-face</code></a> rule is invalid and
2261 must be ignored entirely.
2263 <p>In cases where user agents have limited platform resources or implement
2264 the ability to disable downloadable font resources, <a
2265 href="#at-font-face-rule"><code>@font-face</code></a> rules must simply be
2266 ignored; the behavior of individual descriptors as defined in this
2267 specification should not be altered.
2269 <h3 id=font-family-desc><span class=secno>4.2 </span>Font family: the <a
2270 href="#descdef-font-family">font-family</a> descriptor</h3>
2272 <table class=descdef>
2273 <tbody>
2274 <tr>
2275 <td>Name:
2277 <td><dfn id=descdef-font-family
2278 title="font-family!!descriptor">font-family</dfn>
2280 <tr>
2281 <td>Value:
2283 <td><a href="#family-name-value"><var><family-name></var></a>
2285 <tr>
2286 <td><em>Initial:</em>
2288 <td>N/A
2289 </table>
2291 <p>This descriptor defines the font family name that will be used in all
2292 CSS font family name matching. It is required for the <a
2293 href="#at-font-face-rule"><code>@font-face</code></a> rule to be valid. It
2294 overrides the font family names contained in the underlying font data. If
2295 the font family name is the same as a font family available in a given
2296 user's environment, it effectively hides the underlying font for documents
2297 that use the stylesheet. This permits a web author to freely choose
2298 font-family names without worrying about conflicts with font family names
2299 present in a given user's environment. Likewise, platform substitutions
2300 for a given font family name must not be used.
2302 <h3 id=src-desc><span class=secno>4.3 </span>Font reference: the <a
2303 href="#descdef-src">src</a> descriptor</h3>
2305 <table class=descdef>
2306 <tbody>
2307 <tr>
2308 <td>Name:
2310 <td><dfn id=descdef-src>src</dfn>
2312 <tr>
2313 <td>Value:
2315 <td>[ <url> [format(<string> #)]? | <a
2316 href="#font-face-name-value"><var><font-face-name></var></a> ] #
2318 <tr>
2319 <td><em>Initial:</em>
2321 <td>N/A
2322 </table>
2324 <p>This descriptor specifies the resource containing font data. It is
2325 required for the <a href="#at-font-face-rule"><code>@font-face</code></a>
2326 rule to be valid. Its value is a prioritized, comma-separated list of
2327 external references or locally-installed font face names. When a font is
2328 needed the user agent iterates over the set of references listed, using
2329 the first one it can successfully activate. Fonts containing invalid data
2330 or local font faces that are not found are ignored and the user agent
2331 loads the next font in the list.
2333 <p>As with other URLs in CSS, the URL may be relative, in which case it is
2334 resolved relative to the location of the style sheet containing the <a
2335 href="#at-font-face-rule"><code>@font-face</code></a> rule. In the case of
2336 SVG fonts, the URL points to an element within a document containing SVG
2337 font definitions. If the element reference is omitted, a reference to the
2338 first defined font is implied. Similarly, font container formats that can
2339 contain more than one font must load one and only one of the fonts for a
2340 given <a href="#at-font-face-rule"><code>@font-face</code></a> rule.
2341 Fragment identifiers are used to indicate which font to load. If a
2342 container format lacks a defined fragment identifier scheme,
2343 implementations should use a simple 1-based indexing scheme (e.g.
2344 "font-collection#1" for the first font, "font-collection#2" for the second
2345 font).
2347 <pre>
2348 src: url(fonts/simple.woff); /* load simple.woff relative to stylesheet location */
2349 src: url(/fonts/simple.woff); /* load simple.woff from absolute location */
2350 src: url(fonts.svg#simple); /* load SVG font with id 'simple' */
2351 </pre>
2353 <p>External references consist of a URL, followed by an optional hint
2354 describing the format of the font resource referenced by that URL. The
2355 format hint contains a comma-separated list of format strings that denote
2356 well-known font formats. Conformant user agents must skip downloading a
2357 font resource if the format hints indicate only unsupported or unknown
2358 font formats. If no format hints are supplied, the user agent should
2359 download the font resource.
2361 <pre>
2362 /* load WOFF font if possible, otherwise use OpenType font */
2363 @font-face {
2364 font-family: bodytext;
2365 src: url(ideal-sans-serif.woff) format("woff"),
2366 url(basic-sans-serif.ttf) format("opentype");
2367 }
2368 </pre>
2370 <p>Format strings defined by this specification:
2372 <table class=data id=fontformats>
2373 <thead>
2374 <tr>
2375 <th>String
2377 <th>Font Format
2379 <th>Common extensions
2381 <tbody>
2382 <tr>
2383 <th>"woff"
2385 <td><a href="http://www.w3.org/TR/WOFF/">WOFF (Web Open Font Format)</a>
2387 <td>.woff
2389 <tr>
2390 <th>"truetype"
2392 <td><a
2393 href="http://www.microsoft.com/typography/otspec/default.htm">TrueType</a>
2395 <td>.ttf
2397 <tr>
2398 <th>"opentype"
2400 <td><a
2401 href="http://www.microsoft.com/typography/otspec/default.htm">OpenType</a>
2403 <td>.ttf, .otf
2405 <tr>
2406 <th>"embedded-opentype"
2408 <td><a
2409 href="http://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded
2410 OpenType</a>
2412 <td>.eot
2414 <tr>
2415 <th>"svg"
2417 <td><a href="http://www.w3.org/TR/SVG/fonts.html">SVG Font</a>
2419 <td>.svg, .svgz
2420 </table>
2422 <p>Given the overlap in common usage between TrueType and OpenType, the
2423 format hints "truetype" and "opentype" must be considered as synonymous; a
2424 format hint of "opentype" does not imply that the font contains Postscript
2425 CFF style glyph data or that it contains OpenType layout information (see
2426 <a href="#platform-props-to-css">Appendix A</a> for more background on
2427 this).
2429 <p>When authors would prefer to use a locally available copy of a given
2430 font and download it if it's not, <code>local()</code> can be used. The
2431 locally-installed <dfn
2432 id=font-face-name-value><var><font-face-name></var></dfn> argument
2433 to <code>local()</code> is a format-specific string that uniquely
2434 identifies a single font face within a larger family. The syntax for a <a
2435 href="#font-face-name-value"><var><font-face-name></var></a> is a
2436 unique font face name enclosed by "local(" and ")". The name can
2437 optionally be enclosed in quotes. If unquoted, the unquoted font family
2438 name processing conventions apply; the name must be a sequence of
2439 identifiers separated by whitespace which is converted to a string by
2440 joining the identifiers together separated by a single space.
2442 <pre>
2443 /* regular face of Gentium */
2444 @font-face {
2445 font-family: MyGentium;
2446 src: local(Gentium), /* use locally available Gentium */
2447 url(Gentium.woff); /* otherwise, download it */
2448 }
2449 </pre>
2451 <p>For OpenType and TrueType fonts, this string is used to match only the
2452 Postscript name or the full font name in the name table of locally
2453 available fonts. Which type of name is used varies by platform and font,
2454 so authors should include both of these names to assure proper matching
2455 across platforms. Platform substitutions for a given font name must not be
2456 used.
2458 <pre>
2459 /* bold face of Gentium */
2460 @font-face {
2461 font-family: MyGentium;
2462 src: local(Gentium Bold), /* full font name */
2463 local(Gentium-Bold), /* Postscript name */
2464 url(GentiumBold.woff); /* otherwise, download it */
2465 font-weight: bold;
2466 }
2467 </pre>
2469 <p>Just as a <a href="#at-font-face-rule"><code>@font-face</code></a> rule
2470 specifies the characteristics of a single font within a family, the unique
2471 name used with <code>local()</code> specifies a single font, not an entire
2472 font family. Defined in terms of OpenType font data, the Postscript name
2473 is found in the font's <a
2474 href="http://www.microsoft.com/typography/otspec/name.htm">name table</a>,
2475 in the name record with nameID = 6 (see <a href="#OPENTYPE"
2476 rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> for more details). The
2477 Postscript name is the commonly used key for all fonts on OSX and for
2478 Postscript CFF fonts under Windows. The full font name (nameID = 4) is
2479 used as a unique key for fonts with TrueType glyphs on Windows.
2481 <p>For OpenType fonts with multiple localizations of the full font name,
2482 the US English version is used (language ID = 0x409 for Windows and
2483 language ID = 0 for Macintosh) or the first localization when a US English
2484 full font name is not available (the OpenType specification recommends
2485 that <a href="http://www.microsoft.com/typography/otspec/recom.htm">all
2486 fonts minimally include US English names</a>). User agents that also match
2487 other full font names, e.g. matching the Dutch name when the current
2488 system locale is set to Dutch, are considered non-conformant. This is done
2489 not to prefer English but to avoid matching inconsistencies across font
2490 versions and OS localizations, since font style names (e.g. "Bold") are
2491 frequently localized into many languages and the set of localizations
2492 available varies widely across platform and font version. User agents that
2493 match a concatenation of family name (nameID = 1) with style name (nameID
2494 = 2) are considered non-conformant.
2496 <p>This also allows for referencing faces that belong to larger families
2497 that cannot otherwise be referenced.
2499 <div class=example>
2500 <p>Use a local font or reference an SVG font in another document:</p>
2502 <pre>
2503 @font-face {
2504 font-family: Headline;
2505 src: local(Futura-Medium),
2506 url(fonts.svg#MyGeometricModern) format("svg");
2507 }
2508 </pre>
2510 <p>Create an alias for local Japanese fonts on different platforms:</p>
2512 <pre>
2513 @font-face {
2514 font-family: jpgothic;
2515 src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic);
2516 }
2517 </pre>
2519 <p>Reference a font face that cannot be matched within a larger family:</p>
2521 <pre>
2522 @font-face {
2523 font-family: Hoefler Text Ornaments;
2524 /* has the same font properties as Hoefler Text Regular */
2525 src: local(HoeflerText-Ornaments);
2526 }
2527 </pre>
2529 <p>Since localized fullnames never match, a document with the header style
2530 rules below would always render using the default serif font, regardless
2531 whether a particular system locale parameter is set to Finnish or not:</p>
2533 <pre>
2534 @font-face {
2535 font-family: SectionHeader;
2536 src: local("Arial Lihavoitu"); /* Finnish fullname for Arial Bold, should fail */
2537 font-weight: bold;
2538 }
2540 h2 { font-family: SectionHeader, serif; }
2541 </pre>
2543 <p>A conformant user agent would never load the font ‘<code
2544 class=css>gentium.eot</code>’ in the example below, since it is
2545 included in the first definition of the ‘<a href="#descdef-src"><code
2546 class=property>src</code></a>’ descriptor which is overridden by the
2547 second definition in the same <a
2548 href="#at-font-face-rule"><code>@font-face</code></a> rule:</p>
2550 <pre>
2551 @font-face {
2552 font-family: MainText;
2553 src: url(gentium.eot); /* for use with older user agents */
2554 src: local("Gentium"), url(gentium.woff); /* Overrides src definition */
2555 }
2556 </pre>
2557 </div>
2559 <h3 id=font-prop-desc><span class=secno>4.4 </span>Font property
2560 descriptors: the <a href="#descdef-font-style">font-style</a>, <a
2561 href="#descdef-font-weight">font-weight</a>, <a
2562 href="#descdef-font-stretch">font-stretch</a> descriptors</h3>
2564 <table class=descdef>
2565 <tbody>
2566 <tr>
2567 <td>Name:
2569 <td><dfn id=descdef-font-style
2570 title="font-style!!descriptor">font-style</dfn>
2572 <tr>
2573 <td>Value:
2575 <td>normal | italic | oblique
2577 <tr>
2578 <td><em>Initial:</em>
2580 <td>normal
2581 </table>
2583 <table class=descdef>
2584 <tbody>
2585 <tr>
2586 <td>Name:
2588 <td><dfn id=descdef-font-weight
2589 title="font-weight!!descriptor">font-weight</dfn>
2591 <tr>
2592 <td>Value:
2594 <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
2596 <tr>
2597 <td><em>Initial:</em>
2599 <td>normal
2600 </table>
2602 <table class=descdef>
2603 <tbody>
2604 <tr>
2605 <td>Name:
2607 <td><dfn id=descdef-font-stretch
2608 title="font-stretch!!descriptor">font-stretch</dfn>
2610 <tr>
2611 <td>Value:
2613 <td>normal | ultra-condensed | extra-condensed | condensed |
2614 semi-condensed | semi-expanded | expanded | extra-expanded |
2615 ultra-expanded
2617 <tr>
2618 <td><em>Initial:</em>
2620 <td>normal
2621 </table>
2623 <p>These descriptors define the characteristics of a font face and are used
2624 in the process of matching styles to specific faces. For a font family
2625 defined with several <a
2626 href="#at-font-face-rule"><code>@font-face</code></a> rules, user agents
2627 can either download all faces in the family or use these descriptors to
2628 selectively download font faces that match actual styles used in document.
2629 The values for these descriptors are the same as those for the
2630 corresponding font properties except that relative keywords are not
2631 allowed, ‘<a href="#bolder"><code class=property>bolder</code></a>’
2632 and ‘<a href="#lighter"><code class=property>lighter</code></a>’. If
2633 these descriptors are omitted, initial values are assumed.
2635 <p>The value for these font face style attributes is used in place of the
2636 style implied by the underlying font data. This allows authors to combine
2637 faces in flexible combinations, even in situations where the original font
2638 data was arranged differently. User agents that implement synthetic
2639 bolding and obliquing must only apply synthetic styling in cases where the
2640 font descriptors imply this is needed, rather than based on the style
2641 attributes implied by the font data.
2643 <h3 id=unicode-range-desc><span class=secno>4.5 </span>Character range: the
2644 <a href="#descdef-unicode-range">unicode-range</a> descriptor</h3>
2646 <table class=descdef>
2647 <tbody>
2648 <tr>
2649 <td>Name:
2651 <td><dfn id=descdef-unicode-range>unicode-range</dfn>
2653 <tr>
2654 <td>Value:
2656 <td><a href="#urange-value"><var><urange></var></a> #
2658 <tr>
2659 <td><em>Initial:</em>
2661 <td>U+0-10FFFF
2662 </table>
2664 <p>This descriptor defines the set of Unicode codepoints that may be
2665 supported by the font face for which it is declared. The descriptor value
2666 is a comma-delimited list of Unicode range (<a
2667 href="#urange-value"><var><urange></var></a>) values. The union of
2668 these ranges defines the set of codepoints that serves as a hint for user
2669 agents when deciding whether or not to download a font resource for a
2670 given text run.
2672 <p>Each <dfn id=urange-value><var><urange></var></dfn> value is a <a
2673 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code
2674 title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token made up of a
2675 "U+" or "u+" prefix followed by a codepoint range in one of the three
2676 forms listed below. Ranges that do not fit one of the these forms are
2677 invalid and cause the declaration to be ignored.
2679 <dl>
2680 <dt>single codepoint (e.g. U+416)
2682 <dd>a valid Unicode codepoint, represented as one to six hexadecimal
2683 digits
2685 <dt>interval range (e.g. U+400-4ff)
2687 <dd>represented as two hyphen-separated valid Unicode codepoints
2688 indicating the inclusive start and end codepoints of a range
2690 <dt>wildcard range (e.g. U+4??)
2692 <dd>defined by the set of codepoints implied when trailing ‘<code
2693 class=css>?</code>’ characters signify any hexadeximal digit
2694 </dl>
2696 <p>Individual codepoints are written using hexadecimal values that
2697 correspond to <a href="http://www.unicode.org/charts/">Unicode character
2698 codepoints</a>. Valid Unicode codepoint values vary between 0 and 10FFFF
2699 inclusive. Digit values of codepoints are ASCII case-insensitive. For
2700 interval ranges, the start and end codepoints are valid Unicode values and
2701 the end codepoint is greater than or equal to the start codepoint.
2703 <p>Wildcard ranges specified with ‘?’ that lack an initial digit (e.g.
2704 "U+???") are valid and equivalent to a wildcard range with an initial zero
2705 digit (e.g. "U+0???" = "U+0000-0FFF"). Wildcard ranges that extend beyond
2706 the range of valid Unicode codepoints are invalid. Because of this, the
2707 maximum number of trailing ‘<code class=css>?</code>’ wildcard
2708 characters is five, even though the <a
2709 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code
2710 title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token accepts six.
2712 <p>Within the comma-delimited list of Unicode ranges in a ‘<a
2713 href="#descdef-unicode-range"><code
2714 class=property>unicode-range</code></a>’ descriptor declaration, ranges
2715 may overlap. The union of these ranges defines the set of codepoints for
2716 which the corresponding font may be used. User agents must not download or
2717 use the font for codepoints outside this set. User agents may normalize
2718 the list of ranges into a list that is different but represents the same
2719 set of codepoints.
2721 <p>The associated font might not contain glyphs for the entire set of
2722 codepoints defined by the ‘<a href="#descdef-unicode-range"><code
2723 class=property>unicode-range</code></a>’ descriptor. When the font is
2724 used, the <dfn id=effective-character-map>effective character map</dfn> is
2725 the intersection of the codepoints defined by ‘<a
2726 href="#descdef-unicode-range"><code
2727 class=property>unicode-range</code></a>’ with the font's <a
2728 href="#character-map"><em>character map</em></a>. This allows authors to
2729 define supported ranges in terms of broad ranges without worrying about
2730 the precise codepoint ranges supported by the underlying font.
2732 <h3 id=composite-fonts><span class=secno>4.6 </span>Using character ranges
2733 to define composite fonts</h3>
2735 <p>Multiple <a href="#at-font-face-rule"><code>@font-face</code></a> rules
2736 with different unicode ranges for the same family and style descriptor
2737 values can be used to create composite fonts that mix the glyphs from
2738 different fonts for different scripts. This can be used to combine fonts
2739 that only contain glyphs for a single script (e.g. Latin, Greek, Cyrillic)
2740 or it can be used by authors as a way of segmenting a font into fonts for
2741 commonly used characters and less frequently used characters. Since the
2742 user agent will only pull down the fonts it needs this helps reduce page
2743 bandwidth.
2745 <p>If the unicode ranges overlap for a set of <a
2746 href="#at-font-face-rule"><code>@font-face</code></a> rules with the same
2747 family and style descriptor values, the rules are ordered in the reverse
2748 order they were defined; the last rule defined is the first to be checked
2749 for a given character.
2751 <p>Example ranges for specific languages or characters:
2753 <dl>
2754 <dt>unicode-range: U+A5;
2756 <dd>a single code point, the yen/yuan symbol
2758 <dt>unicode-range: U+0-7F;
2760 <dd>code range for basic ASCII characters
2762 <dt>unicode-range: U+590-5ff;
2764 <dd>code range for Hebrew characters
2766 <dt>unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;
2768 <dd>code range for Japanese kanji, hiragana and katakana characters plus
2769 yen/yuan symbol
2770 </dl>
2772 <div class=example>
2773 <p>The BBC provides news services in a wide variety of languages, many
2774 that are not well supported across all platforms. Using an <a
2775 href="#at-font-face-rule"><code>@font-face</code></a> rule, the BBC could
2776 provide a font for any of these languages, as it already does via a
2777 manual font download.</p>
2779 <pre>
2780 @font-face {
2781 font-family: BBCBengali;
2782 src: url(fonts/BBCBengali.woff) format("woff");
2783 unicode-range: U+00-FF, U+980-9FF;
2784 }
2785 </pre>
2786 </div>
2788 <div class=example>
2789 <p>Technical documents often require a wide range of symbols. The STIX
2790 Fonts project is one project aimed at providing fonts to support a wide
2791 range of technical typesetting in a standardized way. The example below
2792 shows the use of a font that provides glyphs for many of the mathematical
2793 and technical symbol ranges within Unicode:</p>
2795 <pre>
2796 @font-face {
2797 font-family: STIXGeneral;
2798 src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
2799 unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
2800 }
2801 </pre>
2802 </div>
2804 <div class=example>
2805 <p>This example shows how an author can override the glyphs used for Latin
2806 characters in a Japanese font with glyphs from a different font. The
2807 first rule specifies no range so it defaults to the entire range. The
2808 range specified in the second rule overlaps but takes precedence because
2809 it is defined later.</p>
2811 <pre>
2812 @font-face {
2813 font-family: JapaneseWithGentium;
2814 src: local(MSMincho);
2815 /* no range specified, defaults to entire range */
2816 }
2818 @font-face {
2819 font-family: JapaneseWithGentium;
2820 src: url(../fonts/Gentium.woff);
2821 unicode-range: U+0-2FF;
2822 }
2823 </pre>
2824 </div>
2826 <div class=example>
2827 <p>Consider a family constructed to optimize bandwidth by separating out
2828 Latin, Japanese and other characters into different font files:</p>
2830 <pre>
2831 /* fallback font - size: 4.5MB */
2832 @font-face {
2833 font-family: DroidSans;
2834 src: url(DroidSansFallback.woff);
2835 /* no range specified, defaults to entire range */
2836 }
2838 /* Japanese glyphs - size: 1.2MB */
2839 @font-face {
2840 font-family: DroidSans;
2841 src: url(DroidSansJapanese.woff);
2842 unicode-range: U+3000-9FFF, U+ff??;
2843 }
2845 /* Latin, Greek, Cyrillic along with some
2846 punctuation and symbols - size: 190KB */
2847 @font-face {
2848 font-family: DroidSans;
2849 src: url(DroidSans.woff);
2850 unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
2851 }
2852 </pre>
2854 <p>For simple Latin text, only the font for Latin characters is
2855 downloaded:</p>
2857 <pre>
2858 body { font-family: DroidSans; }
2860 <p>This is that</p>
2861 </pre>
2863 <p>In this case the user agent first checks the unicode-range for the font
2864 containing Latin characters (DroidSans.woff). Since all the characters
2865 above are in the range U+0-5FF, the user agent downloads the font and
2866 renders the text with that font.</p>
2868 <p>Next, consider text that makes use of an arrow character (⇨):</p>
2870 <pre>
2871 <p>This &#x21e8; that<p>
2872 </pre>
2874 <p>The user agent again first checks the unicode-range of the font
2875 containing Latin characters. Since U+2000-2300 includes the arrow code
2876 point (U+21E8), the user agent downloads the font. For this character
2877 however the Latin font does not have a matching glyph, so the effective
2878 unicode-range used for font matching excludes this code point. Next, the
2879 user agent evaluates the Japanese font. The unicode-range for the
2880 Japanese font, U+3000-9FFF and U+ff??, does not include U+21E8, so the
2881 user agent does not download the Japanese font. Next the fallback font is
2882 considered. The <a href="#at-font-face-rule"><code>@font-face</code></a>
2883 rule for the fallback font does not define unicode-range so its value
2884 defaults to the range of all Unicode code points. The fallback font is
2885 downloaded and used to render the arrow character.</p>
2886 </div>
2888 <h3 id=font-rend-desc><span class=secno>4.7 </span>Font features: the <a
2889 href="#descdef-font-variant">font-variant</a> and <a
2890 href="#descdef-font-feature-settings">font-feature-settings</a>
2891 descriptors</h3>
2893 <table class=descdef>
2894 <tbody>
2895 <tr>
2896 <td>Name:
2898 <td><dfn id=descdef-font-variant
2899 title="font-variant!!descriptor">font-variant</dfn>
2901 <tr>
2902 <td>Value:
2904 <td><a href="#font-variant-normal-value"
2905 title="normal!!font-variant">normal</a> | <a
2906 href="#font-variant-none-value" title="none!!font-variant">none</a> | [
2907 <a href="#common-lig-values"><var><common-lig-values></var></a>
2908 || <a
2909 href="#discretionary-lig-values"><var><discretionary-lig-values></var></a>
2910 || <a
2911 href="#historical-lig-values"><var><historical-lig-values></var></a>
2912 || <a
2913 href="#contextual-alt-values"><var><contextual-alt-values></var></a>
2914 || <a href="#stylistic"><var
2915 title=stylistic>stylistic(<feature-value-name>)</var></a> || <a
2916 href="#historical-forms"><var>historical-forms</var></a> || <a
2917 href="#styleset"><var
2918 title=styleset>styleset(<feature-value-name> #)</var></a> || <a
2919 href="#character-variant"><var
2920 title=character-variant>character-variant(<feature-value-name>
2921 #)</var></a> || <a href="#swash"><var
2922 title=swash>swash(<feature-value-name>)</var></a> || <a
2923 href="#ornaments"><var
2924 title=ornaments>ornaments(<feature-value-name>)</var></a> || <a
2925 href="#annotation"><var
2926 title=annotation>annotation(<feature-value-name>)</var></a> || [
2927 <a href="#small-caps"><i>small-caps</i></a> | <a
2928 href="#all-small-caps"><i>all-small-caps</i></a> | <a
2929 href="#petite-caps"><i>petite-caps</i></a> | <a
2930 href="#all-petite-caps"><i>all-petite-caps</i></a> | <a
2931 href="#unicase"><i>unicase</i></a> | <a
2932 href="#titling-caps"><i>titling-caps</i></a> ] || <a
2933 href="#numeric-figure-values"><var><numeric-figure-values></var></a>
2934 || <a
2935 href="#numeric-spacing-values"><var><numeric-spacing-values></var></a>
2936 || <a
2937 href="#numeric-fraction-values"><var><numeric-fraction-values></var></a>
2938 || <a href="#ordinal"><i>ordinal</i></a> || <a
2939 href="#slashed-zero"><i>slashed-zero</i></a> || <a
2940 href="#east-asian-variant-values"><var><east-asian-variant-values></var></a>
2941 || <a
2942 href="#east-asian-width-values"><var><east-asian-width-values></var></a>
2943 || <a href="#ruby"><i>ruby</i></a> ]
2945 <tr>
2946 <td><em>Initial:</em>
2948 <td>normal
2949 </table>
2951 <table class=descdef>
2952 <tbody>
2953 <tr>
2954 <td>Name:
2956 <td><dfn id=descdef-font-feature-settings
2957 title="font-feature-settings!!descriptor">font-feature-settings</dfn>
2959 <tr>
2960 <td>Value:
2962 <td><a href="#font-feature-settings-normal-value"
2963 title="normal!!font-feature-settings">normal</a> | <a
2964 href="#feature-tag-value"><var><feature-tag-value></var></a> #
2966 <tr>
2967 <td><em>Initial:</em>
2969 <td>normal
2970 </table>
2972 <p>These descriptors define initial settings that apply when the font
2973 defined by an <a href="#at-font-face-rule"><code>@font-face</code></a>
2974 rule is rendered. They do not affect font selection. Values are identical
2975 to those defined for the corresponding <a href="#propdef-font-variant"
2976 title="font-variant!!property">‘<code
2977 class=property>font-variant</code>’</a> and <a
2978 href="#propdef-font-feature-settings"
2979 title="font-feature-settings!!property">‘<code
2980 class=property>font-feature-settings</code>’</a> properties defined
2981 below except that the value ‘<code class=property>inherit</code>’ is
2982 omitted. When multiple font feature descriptors or properties are used,
2983 the cumulative effect on text rendering is detailed in the section <a
2984 href="#font-feature-resolution">Font Feature Resolution</a> below. In
2985 cases where specific values define synthesized fallback for certain <a
2986 href="#propdef-font-variant" title="font-variant!!property">‘<code
2987 class=property>font-variant</code>’</a> subproperties, the same
2988 synthesized fallback applies when used within those values are used with
2989 the <a href="#descdef-font-style" title="font-style!!descriptor">‘<code
2990 class=property>font-variant</code>’</a> descriptor.
2992 <h3 id=font-face-loading><span class=secno>4.8 </span>Font loading
2993 guidelines</h3>
2995 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule is
2996 designed to allow lazy loading of font resources that are only downloaded
2997 when used within a document. A stylesheet can include <a
2998 href="#at-font-face-rule"><code>@font-face</code></a> rules for a library
2999 of fonts of which only a select set are used; user agents must only
3000 download those fonts that are referred to within the style rules
3001 applicable to a given page. User agents that download all fonts defined in
3002 <a href="#at-font-face-rule"><code>@font-face</code></a> rules without
3003 considering whether those fonts are in fact used within a page are
3004 considered non-conformant. In cases where a font might be downloaded in
3005 character fallback cases, user agents may download a font if it's
3006 contained within the computed value of <a href="#propdef-font-family"
3007 title="font-family!!property">‘<code
3008 class=property>font-family</code>’</a> for a given text run.
3010 <pre>
3011 @font-face {
3012 font-family: GeometricModern;
3013 src: url(font.woff);
3014 }
3016 p {
3017 /* font will be downloaded for pages with p elements */
3018 font-family: GeometricModern, sans-serif;
3019 }
3021 h2 {
3022 /* font may be downloaded for pages with h2 elements, even if Futura is available locally */
3023 font-family: Futura, GeometricModern, sans-serif;
3024 }
3025 </pre>
3027 <p>In cases where textual content is loaded before downloadable fonts are
3028 available, user agents may render text as it would be rendered if
3029 downloadable font resources are not available or they may render text
3030 transparently with fallback fonts to avoid a flash of text using a
3031 fallback font. In cases where the font download fails user agents must
3032 display text, simply leaving transparent text is considered non-conformant
3033 behavior. Authors are advised to use fallback fonts in their font lists
3034 that closely match the metrics of the downloadable fonts to avoid large
3035 page reflows where possible.
3037 <p><a id=same-origin-restriction> </a><a
3038 id=allowing-cross-origin-font-loading> </a>
3040 <h3 id=font-fetching-requirements><span class=secno>4.9 </span>Font
3041 fetching requirements</h3>
3042 <!-- TPAC 2011 Resolution to require same-origin restriction for loading fonts:
3043 http://lists.w3.org/Archives/Public/www-style/2011Nov/0711.html
3044 http://www.w3.org/2011/10/31-webapps-minutes.html#item02
3045 -->
3047 <p>For font loads, user agents must use the <a
3048 href="http://www.w3.org/TR/html5/infrastructure.html#cors-enabled-fetch">potentially
3049 CORS-enabled fetch</a> method defined by the <a href="#HTML5"
3050 rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> specification for URL's
3051 defined within @font-face rules. When fetching, user agents must use
3052 "Anonymous" mode, set the referrer source to the stylesheet's URL and set
3053 the origin to the URL of the containing document.
3055 <p class=note>The implications of this for authors are that fonts will
3056 typically not be loaded cross-origin unless authors specifically takes
3057 steps to permit cross-origin loads. Sites can explicitly allow cross-site
3058 loading of font data using the <code>Access-Control-Allow-Origin</code>
3059 HTTP header. For other schemes, no explicit mechanism to allow
3060 cross-origin loading, beyond what is permitted by the <a
3061 href="http://www.w3.org/TR/html5/infrastructure.html#cors-enabled-fetch">potentially
3062 CORS-enabled fetch</a> method, is defined or required.
3064 <div class=example> For the examples given below, assume that a document is
3065 located at <code>http://example.com/page.html</code> and all URL's link to
3066 valid font resources supported by the user agent. Fonts defined with the
3067 ‘<a href="#descdef-src"><code class=property>src</code></a>’
3068 descriptor values below will be loaded:
3069 <pre>/* same origin (i.e. domain, scheme, port match document) */
3070 src: url(fonts/simple.woff);
3071 src: url(//fonts/simple.woff);
3073 /* data url's with no redirects are treated as same origin */
3074 src: url("data:application/font-woff;base64,...");
3076 /* cross origin, different domain */
3077 /* Access-Control-Allow-Origin response header set to '*' */
3078 src: url(http://another.example.com/fonts/simple.woff);
3079 </pre>
3080 Fonts defined with the ‘<a href="#descdef-src"><code
3081 class=property>src</code></a>’ descriptor values below will fail to
3082 load:
3083 <pre>/* cross origin, different scheme */
3084 /* no Access-Control-xxx headers in response */
3085 src: url(https://example.com/fonts/simple.woff);
3087 /* cross origin, different domain */
3088 /* no Access-Control-xxx headers in response */
3089 src: url(http://another.example.com/fonts/simple.woff);
3090 </pre>
3091 </div>
3093 <h2 id=font-matching-algorithm><span class=secno>5 </span>Font Matching
3094 Algorithm</h2>
3096 <p>The algorithm below describes how fonts are associated with individual
3097 runs of text. For each character in the run a font family is chosen and a
3098 particular font face is selected containing a glyph for that character.
3100 <h3 id=font-family-casing><span class=secno>5.1 </span>Case sensitivity of
3101 font family names</h3>
3103 <p>As part of the font matching algorithm outlined below, user agents must
3104 match font family names used in style rules with actual font family names
3105 contained in fonts available in a given environment or with font family
3106 names defined in <a href="#at-font-face-rule"><code>@font-face</code></a>
3107 rules. User agents must match these names case insensitively, using the
3108 "Default Caseless Matching" algorithm outlined in the Unicode
3109 specification <a href="#UNICODE6"
3110 rel=biblioentry>[UNICODE6]<!--{{!UNICODE6}}--></a>. This algorithm is
3111 detailed in section 3.13 entitled "Default Case Algorithms". Specifically,
3112 the algorithm must be applied without normalizing the strings involved and
3113 without applying any language-specific tailorings. The case folding method
3114 specified by this algorithm uses the case mappings with status field
3115 ‘<code class=property>C</code>’ or ‘<code class=property>F</code>’
3116 in the CaseFolding.txt file of the Unicode Character Database.
3118 <p class=note> For authors this means that font family names are matched
3119 case insensitively, whether those names exist in a platform font or in the
3120 <a href="#at-font-face-rule"><code>@font-face</code></a> rules contained
3121 in a stylesheet. Authors should take care to ensure that names use a
3122 character sequence consistent with the actual font family name,
3123 particularly when using combining characters such as diacritical marks.
3124 For example, a family name that contains an uppercase A (U+0041) followed
3125 by a combining ring (U+030A) will <strong>not</strong> match a name that
3126 looks identical but which uses the precomposed lowercase a-ring character
3127 (U+00E5) instead of the combining sequence.
3129 <p class=note> Implementors should take care to verify that a given
3130 caseless string comparison implementation uses this precise algorithm and
3131 not assume that a given platform string matching routine follows it, as
3132 many of these have locale-specific behavior or use some level of string
3133 normalization.
3135 <h3 id=font-style-matching><span class=secno>5.2 </span>Matching font
3136 styles</h3>
3138 <p>The procedure for choosing a font for a given character in a run of text
3139 consists of iterating over the font families named by the <a
3140 href="#propdef-font-family" title="font-family!!property">‘<code
3141 class=property>font-family</code>’</a> property, selecting a font face
3142 with the appropriate style based on other font properties and then
3143 determining whether a glyph exists for the given character. This is done
3144 using the <dfn id=character-map>character map</dfn> of the font, data
3145 which maps characters to the default glyph for that character. A font is
3146 considered to <dfn id=support>support</dfn> a given character if (1) the
3147 character is contained in the font's <a
3148 href="#character-map"><em>character map</em></a> and (2) if required by
3149 the containing script, shaping information is available for that
3150 character.
3152 <p>Some legacy fonts may include a given character in the <a
3153 href="#character-map"><em>character map</em></a> but lack the shaping
3154 information (e.g. <a
3155 href="http://www.microsoft.com/typography/otspec/ttochap1.htm">OpenType
3156 layout tables</a> or <a
3157 href="http://scripts.sil.org/cms/scripts/page.php?site_id=projects&item_id=graphite_techAbout">Graphite
3158 tables</a>) necessary for correctly rendering text runs containing that
3159 character.
3161 <p>Codepoint sequences consisting of a base character followed by a
3162 sequence of combining characters are treated slightly differently, see the
3163 section on <a href="#cluster-matching">cluster matching</a> below.
3165 <p>For this procedure, the <dfn id=default-face>default face</dfn> for a
3166 given font family is defined to be the face that would be selected if all
3167 font style properties were set to their initial value.
3169 <ol id=fontmatchingalg>
3170 <li>Using the computed font property values for a given element, the user
3171 agent starts with the first family name specified by the <a
3172 href="#propdef-font-family" title="font-family!!property">‘<code
3173 class=property>font-family</code>’</a> property.
3175 <li>If the family name is a generic family keyword, the user agent looks
3176 up the appropriate font family name to be used. User agents may choose
3177 the generic font family to use based on the language of the containing
3178 element or the Unicode range of the character.
3180 <li>For other family names, the user agent attempts to find the family
3181 name among fonts defined via <a
3182 href="#at-font-face-rule"><code>@font-face</code></a> rules and then
3183 among available system fonts, matching names with a <a
3184 href="#font-family-casing">case-insensitive comparison</a> as outlined in
3185 the section above. On systems containing fonts with multiple localized
3186 font family names, user agents must match any of these names independent
3187 of the underlying system locale or platform API used. If the font
3188 resources defined for a given face in an <a
3189 href="#at-font-face-rule"><code>@font-face</code></a> rule are either not
3190 available or contain invalid font data, then the face should be treated
3191 as not present in the family. If no faces are present for a family
3192 defined via <a href="#at-font-face-rule"><code>@font-face</code></a>
3193 rules, the family should be treated as missing; matching a platform font
3194 with the same name must not occur in this case.
3196 <li>If a font family match occurs, the user agent assembles the set of
3197 font faces in that family and then narrows the set to a single face using
3198 other font properties in the order given below. A group of faces defined
3199 via <a href="#at-font-face-rule"><code>@font-face</code></a> rules with
3200 identical font descriptor values but differing ‘<a
3201 href="#descdef-unicode-range"><code
3202 class=property>unicode-range</code></a>’ values are considered to be a
3203 single <dfn id=composite-face>composite face</dfn> for this step:
3204 <ol id=fontstylematchingalg>
3205 <li><a href="#propdef-font-stretch"
3206 title="font-stretch!!property">‘<code
3207 class=property>font-stretch</code>’</a> is tried first. If the
3208 matching set contains faces with width values matching the <a
3209 href="#propdef-font-stretch" title="font-stretch!!property">‘<code
3210 class=property>font-stretch</code>’</a> value, faces with other width
3211 values are removed from the matching set. If there is no face that
3212 exactly matches the width value the nearest width is used instead. If
3213 the value of <a href="#propdef-font-stretch"
3214 title="font-stretch!!property">‘<code
3215 class=property>font-stretch</code>’</a> is <a
3216 href="#font-stretch-normal-value" title="normal!!font-stretch">‘<code
3217 class=property>normal</code>’</a> or one of the condensed values,
3218 narrower width values are checked first, then wider values. If the
3219 value of <a href="#propdef-font-stretch"
3220 title="font-stretch!!property">‘<code
3221 class=property>font-stretch</code>’</a> is one of the expanded
3222 values, wider values are checked first, followed by narrower values.
3223 Once the closest matching width has been determined by this process,
3224 faces with other widths are removed from the matching set.
3226 <li><a href="#propdef-font-style" title="font-style!!property">‘<code
3227 class=property>font-style</code>’</a> is tried next. If the value of
3228 <a href="#propdef-font-style" title="font-style!!property">‘<code
3229 class=property>font-style</code>’</a> is ‘<a href="#italic"><code
3230 class=property>italic</code></a>’, italic faces are checked first,
3231 then oblique, then normal faces. If the value is ‘<a
3232 href="#oblique"><code class=property>oblique</code></a>’, oblique
3233 faces are checked first, then italic faces and then normal faces. If
3234 the value is <a href="#font-style-normal-value"
3235 title="normal!!font-style">‘<code
3236 class=property>normal</code>’</a>, normal faces are checked first,
3237 then oblique faces, then italic faces. Faces with other style values
3238 are excluded from the matching set. User agents are permitted to
3239 distinguish between italic and oblique faces within platform font
3240 families but this is not required, so all italic or oblique faces may
3241 be treated as italic faces. However, within font families defined via
3242 <a href="#at-font-face-rule"><code>@font-face</code></a> rules, italic
3243 and oblique faces must be distinguished using the value of the <a
3244 href="#descdef-font-style" title="font-style!!descriptor">‘<code
3245 class=property>font-style</code>’</a> descriptor. For families that
3246 lack any italic or oblique faces, users agents may create artificial
3247 oblique faces, if this is permitted by the value of the ‘<a
3248 href="#propdef-font-synthesis"><code
3249 class=property>font-synthesis</code></a>’ property.
3251 <li><a href="#propdef-font-weight"
3252 title="font-weight!!property">‘<code
3253 class=property>font-weight</code>’</a> is matched next, so it will
3254 always reduce the matching set to a single font face. If bolder/lighter
3255 relative weights are used, the effective weight is calculated based on
3256 the inherited weight value, as described in the definition of the <a
3257 href="#propdef-font-weight" title="font-weight!!property">‘<code
3258 class=property>font-weight</code>’</a> property. Given the desired
3259 weight and the weights of faces in the matching set after the steps
3260 above, if the desired weight is available that face matches. Otherwise,
3261 a weight is chosen using the rules below:
3262 <ul>
3263 <li>If the desired weight is less than 400, weights below the desired
3264 weight are checked in descending order followed by weights above the
3265 desired weight in ascending order until a match is found.
3267 <li>If the desired weight is greater than 500, weights above the
3268 desired weight are checked in ascending order followed by weights
3269 below the desired weight in descending order until a match is found.
3271 <li>If the desired weight is 400, 500 is checked first and then the
3272 rule for desired weights less than 400 is used.
3274 <li>If the desired weight is 500, 400 is checked first and then the
3275 rule for desired weights less than 400 is used.
3276 </ul>
3278 <li><span class=property>‘<a href="#propdef-font-size"><code
3279 class=property>font-size</code></a>’</span> must be matched within a
3280 UA-dependent margin of tolerance. (Typically, sizes for scalable fonts
3281 are rounded to the nearest whole pixel, while the tolerance for
3282 bitmapped fonts could be as large as 20%.) Further computations, e.g.,
3283 by ‘<code class=property>em</code>’ values in other properties, are
3284 based on the <span class=property>‘<a href="#propdef-font-size"><code
3285 class=property>font-size</code></a>’</span> value that is used, not
3286 the one that is specified.
3287 </ol>
3289 <li>
3290 <p>If the matched face is defined via <a
3291 href="#at-font-face-rule"><code>@font-face</code></a> rules, user agents
3292 must use the procedure below to select a single font:
3294 <ol>
3295 <li>If the font resource has not been loaded and the range of characters
3296 defined by the ‘<a href="#descdef-unicode-range"><code
3297 class=property>unicode-range</code></a>’ descriptor value includes
3298 the character in question, load the font.
3300 <li>After downloading, if the <a
3301 href="#effective-character-map"><em>effective character map</em></a>
3302 supports the character in question, select that font.
3303 </ol>
3305 <p>When the matched face is a <a href="#composite-face"><em>composite
3306 face</em></a>, user agents must use the procedure above on each of the
3307 faces in the <a href="#composite-face"><em>composite face</em></a> in
3308 reverse order of <a
3309 href="#at-font-face-rule"><code>@font-face</code></a> rule definition.</p>
3311 <p>While the download occurs, user agents may either wait until the font
3312 is downloaded or render once with substituted font metrics and render
3313 again once the font is downloaded.</p>
3315 <li>
3316 <p>If no matching face exists or the matched face does not contain a
3317 glyph for the character to be rendered, the next family name is selected
3318 and the previous three steps repeated. Glyphs from other faces in the
3319 family are not considered. The only exception is that user agents may
3320 optionally substitute a synthetically obliqued version of the <a
3321 href="#default-face"><em>default face</em></a> if that face supports a
3322 given glyph and synthesis of these faces is permitted by the value of
3323 the ‘<a href="#propdef-font-synthesis"><code
3324 class=property>font-synthesis</code></a>’ property. For example, a
3325 synthetic italic version of the regular face may be used if the italic
3326 face doesn't support glyphs for Arabic.</p>
3327 <!-- resolution on the above: http://lists.w3.org/Archives/Public/www-style/2012Nov/0292.html -->
3330 <li>If there are no more font families to be evaluated and no matching
3331 face has been found, then the user agent performs a <dfn
3332 id=system-font-fallback>system font fallback</dfn> procedure to find the
3333 best match for the character to be rendered. The result of this procedure
3334 may vary across user agents.
3336 <li>If a particular character cannot be displayed using any font, the user
3337 agent should indicate by some means that a character is not being
3338 displayed, displaying either a symbolic representation of the missing
3339 glyph (e.g. using a <a
3340 href="http://en.wikipedia.org/wiki/Last_resort_font">Last Resort
3341 Font</a>) or using the missing character glyph from a default font.
3342 </ol>
3344 <p>Optimizations of this process are allowed provided that an
3345 implementation behaves as if the algorithm had been followed exactly.
3346 Matching occurs in a well-defined order to insure that the results are as
3347 consistent as possible across user agents, given an identical set of
3348 available fonts and rendering technology.
3350 <p>The <dfn id=first-available-font>first available font</dfn>, used in the
3351 definition of <a
3352 href="http://www.w3.org/TR/css3-values/#font-relative-lengths"><em>font-relative
3353 lengths</em></a> such as ‘<code class=property>ex</code>’ and ‘<code
3354 class=property>ch</code>’, is defined to be the first available font
3355 that would match any character given font families in the ‘<code
3356 class=property>font-family</code>’ list (or a user agent's default font
3357 if none are available).
3359 <h3 id=cluster-matching><span class=secno>5.3 </span>Cluster matching</h3>
3361 <p>When text contains characters such as combining marks, ideally the base
3362 character should be rendered using the same font as the mark, this assures
3363 proper placement of the mark. For this reason, the font matching algorithm
3364 for clusters is more specialized than the general case of matching a
3365 single character by itself. For sequences containing variation selectors,
3366 which indicate the precise glyph to be used for a given character, user
3367 agents always attempt <a href="#system-font-fallback"><em>system font
3368 fallback</em></a> to find the appropriate glyph before using the default
3369 glyph of the base character.
3371 <p>A sequence of codepoints containing combining mark or other modifiers is
3372 termed a grapheme cluster (see <a href="#CSS3TEXT"
3373 rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a> for a more complete
3374 description). For a given cluster containing a base character, <em>b</em>
3375 and a sequence of combining characters <em>c1, c2…</em>, the entire
3376 cluster is matched using these steps:
3378 <ol>
3379 <li>For each family in the font list, a face is chosen using the style
3380 selection rules defined in the previous section.
3381 <ol>
3382 <li>If all characters in the sequence <em>b + c1 + c2 …</em> are
3383 completely supported by the font, select this font for the sequence.
3385 <li>If a sequence of multiple codepoints is canonically equivalent to a
3386 single character and the font <a href="#support"><em
3387 title=support>supports</em></a> that character, select this font for
3388 the sequence.
3389 </ol>
3391 <li>If no font was found in the font list in step 1:
3392 <ol>
3393 <li>If <em>c1</em> is a variation selector, system fallback must be used
3394 to find a font that <a href="#support"><em
3395 title=support>supports</em></a> the full sequence of <em>b + c1</em>.
3396 If no font on the system <a href="#support"><em
3397 title=support>supports</em></a> the full sequence, match the single
3398 character <em>b</em> using the normal procedure for matching single
3399 characters and ignore the variation selector. Note: a sequence with
3400 more than one variation selector must be treated as an encoding error
3401 and the trailing selectors must be ignored. <a href="#UNICODE6"
3402 rel=biblioentry>[UNICODE6]<!--{{!UNICODE6}}--></a>
3404 <li>Otherwise, the user agent may optionally use system font fallback to
3405 match a font that <a href="#support"><em
3406 title=support>supports</em></a> the entire cluster.
3407 </ol>
3409 <li>If no font is found in step 2, use the matching sequence from step 1
3410 to determine the longest sequence that is completely <a
3411 href="#support"><em title=support>supported</em></a> by a font in the
3412 font list and attempt to match the remaining combining characters
3413 separately using the rules for single characters.
3414 </ol>
3416 <h3 id=char-handling-issues><span class=secno>5.4 </span>Character handling
3417 issues</h3>
3419 <p>CSS font matching is always performed on text runs containing Unicode
3420 characters, so documents using legacy encodings are assumed to have been
3421 transcoded before matching fonts. For fonts containing <a
3422 href="#character-map"><em title="character map">character maps</em></a>
3423 for both legacy encodings and Unicode, the contents of the legacy encoding
3424 <a href="#character-map"><em>character map</em></a> must have no effect on
3425 the results of the font matching process.
3427 <p>The font matching process does not assume that text runs are in either
3428 normalized or denormalized form (see <a href="#CHARMOD-NORM"
3429 rel=biblioentry>[CHARMOD-NORM]<!--{{CHARMOD-NORM}}--></a> for more
3430 details). Fonts may only support precomposed forms and not the decomposed
3431 sequence of base character plus combining marks. Authors should always
3432 tailor their choice of fonts to their content, including whether that
3433 content contains normalized or denormalized character streams.
3435 <p>If a given character is a Private-Use Area Unicode codepoint, user
3436 agents must only match font families named in the ‘<code
3437 class=property>font-family</code>’ list that are not generic families.
3438 If none of the families named in the ‘<code
3439 class=property>font-family</code>’ list contain a glyph for that
3440 codepoint, user agents must display some form of missing glyph symbol for
3441 that character rather than attempting <a
3442 href="#system-font-fallback"><em>system font fallback</em></a> for that
3443 codepoint. When matching the replacement character U+FFFD, user agents may
3444 skip the font matching process and immediately display some form of
3445 missing glyph symbol, they are not required to display the glyph from the
3446 font that would be selected by the font matching process.
3448 <p>In general, the fonts for a given family will all have the same or
3449 similar <a href="#character-map"><em title="character map">character
3450 maps</em></a>. The process outlined here is designed to handle even font
3451 families containing faces with widely variant <a href="#character-map"><em
3452 title="character map">character maps</em></a>. However, authors are
3453 cautioned that the use of such families can lead to unexpected results.
3455 <h3 id=font-matching-changes><span class=secno>5.5 </span>Font matching
3456 changes since CSS 2.1</h3>
3458 <p>The algorithm above is different from CSS 2.1 in a number of key places.
3459 These changes were made to better reflect actual font matching behavior
3460 across user agent implementations.
3462 <p>Differences compared to the font matching algorithm in CSS 2.1:
3464 <ul>
3465 <li>The algorithm includes font-stretch matching.
3467 <li>All possible font-style matching scenarios are delineated.
3469 <li>Small-caps fonts are not matched as part of the font matching process,
3470 they are now handled via font features.
3472 <li>Unicode variation selector matching is required.
3474 <li>Cluster sequences are matched as a unit.
3475 </ul>
3477 <h3 id=font-matching-examples><span class=secno>5.6 </span>Font matching
3478 examples</h3>
3480 <div class=example>
3481 <p>It's useful to note that the CSS selector syntax may be used to create
3482 language-sensitive typography. For example, some Chinese and Japanese
3483 characters are unified to have the same Unicode code point, although the
3484 abstract glyphs are not the same in the two languages.
3486 <pre>*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif; }
3487 *:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif; }
3488 </pre>
3490 <p>This selects any element that has the given language — Japanese or
3491 Traditional Chinese — and uses the appropriate font.
3492 </div>
3494 <h2 id=font-rend-props><span class=secno>6 </span>Font Feature Properties</h2>
3496 <p>Modern font technologies support a variety of advanced typographic and
3497 language-specific font features. Using these features, a single font can
3498 provide glyphs for a wide range of ligatures, contextual and stylistic
3499 alternates, tabular and old-style figures, small capitals, automatic
3500 fractions, swashes, and alternates specific to a given language. To allow
3501 authors control over these font capabilities, the ‘<code
3502 class=property>font-variant</code>’ property has been expanded for CSS3.
3503 It now functions as a shorthand for a set of properties that provide
3504 control over stylistic font features.
3506 <h3 id=glyph-selection-positioning><span class=secno>6.1 </span>Glyph
3507 selection and positioning</h3>
3509 <p>Simple fonts used for displaying Latin text use a very basic processing
3510 model. Fonts contain a <a href="#character-map"><em>character map</em></a>
3511 which maps each character to a glyph for that character. Glyphs for
3512 subsequent characters are simply placed one after the other along a run of
3513 text. Modern font formats such as OpenType and AAT (Apple Advanced
3514 Typography) use a richer processing model. The glyph for a given character
3515 can be chosen and positioned not just based on the codepoint of the
3516 character itself, but also on adjacent characters as well as the language,
3517 script, and features enabled for the text. Font features may be required
3518 for specific scripts, or recommended as enabled by default or they might
3519 be stylistic features meant to be used under author control.
3521 <p>For a good visual overview of these features, see the <a
3522 href="#OPENTYPE-FONT-GUIDE"
3523 rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
3524 For a detailed description of glyph processing for OpenType fonts, see <a
3525 href="#WINDOWS-GLYPH-PROC"
3526 rel=biblioentry>[WINDOWS-GLYPH-PROC]<!--{{WINDOWS-GLYPH-PROC}}--></a>.
3528 <p>Stylistic font features can be classified into two broad categories:
3529 ones that affect the harmonization of glyph shapes with the surrounding
3530 context, such as kerning and ligature features, and ones such as the
3531 small-caps, subscript/superscript and alternate features that affect shape
3532 selection.
3534 <p>The subproperties of <a href="#propdef-font-variant"
3535 title="font-variant!!property">‘<code
3536 class=property>font-variant</code>’</a> listed below are used to control
3537 these stylistic font features. They do not control features that are
3538 required for displaying certain scripts, such as the OpenType features
3539 used when displaying Arabic or Indic language text. They affect glyph
3540 selection and positioning, but do not affect font selection as described
3541 in the font matching section (except in cases required for compatibility
3542 with CSS 2.1).
3544 <p>To assure consistent behavior across user agents, the equivalent
3545 OpenType property settings are listed for individual properties and are
3546 normative. When using other font formats these should be used as a
3547 guideline to map CSS font feature property values to specific font
3548 features.
3550 <h3 id=language-specific-support><span class=secno>6.2
3551 </span>Language-specific display</h3>
3553 <p>OpenType also supports language-specific glyph selection and
3554 positioning, so that text can be displayed correctly in cases where the
3555 language dictates a specific display behavior. Many languages share a
3556 common script, but the shape of certain letters can vary across those
3557 languages. For example, certain Cyrillic letters have different shapes in
3558 Russian text than in Bulgarian. In Latin text, it's common to render "fi"
3559 with an explicit fi-ligature that lacks a dot on the "i". However, in
3560 languages such as Turkish which uses both a dotted-i and a dotless-i, it's
3561 important to not use this ligature or use a specialized version that
3562 contains a dot over the "i". The example below shows language-specific
3563 variations based on stylistic traditions found in Spanish, Italian and
3564 French orthography:
3566 <div class=featex><img alt="language specific forms, spanish"
3567 src=locl-1.png></div>
3569 <div class=featex><img alt="language specific forms, italian"
3570 src=locl-2.png></div>
3572 <div class=featex><img alt="language specific forms, french"
3573 src=locl-3.png></div>
3575 <p>If the content language of the element is known according to the rules
3576 of the <a
3577 href="http://www.w3.org/TR/CSS21/conform.html#doclanguage">document
3578 language</a>, user agents are required to infer the OpenType language
3579 system from the content language and use that when selecting and
3580 positioning glyphs using an OpenType font.
3582 <p>For OpenType fonts, in some cases it may be necessary to explicitly
3583 declare the OpenType language to be used, for example when displaying text
3584 in a given language that uses the typographic conventions of another
3585 language or when the font does not explicitly support a given language but
3586 supports a language that shares common typographic conventions. The ‘<a
3587 href="#propdef-font-language-override"><code
3588 class=property>font-language-override</code></a>’ property is used for
3589 this purpose.</p>
3590 <!-- prop: font-kerning -->
3592 <h3 id=font-kerning-prop><span class=secno>6.3 </span>Kerning: the <a
3593 href="#propdef-font-kerning">font-kerning</a> property</h3>
3595 <table class=propdef id=namefont-kerningvalueauto-normal-noneini>
3596 <tbody>
3597 <tr>
3598 <td>Name:
3600 <td><dfn id=propdef-font-kerning>font-kerning</dfn>
3602 <tr>
3603 <td>Value:
3605 <td><a href="#font-kerning-auto-value"
3606 title="auto!!font-kerning">auto</a> | <a
3607 href="#font-kerning-normal-value"
3608 title="normal!!font-kerning">normal</a> | <a
3609 href="#font-kerning-none-value" title="none!!font-kerning">none</a>
3611 <tr>
3612 <td>Initial:
3614 <td>auto
3616 <tr>
3617 <td>Applies to:
3619 <td>all elements
3621 <tr>
3622 <td>Inherited:
3624 <td>yes
3626 <tr>
3627 <td>Percentages:
3629 <td>N/A
3631 <tr>
3632 <td>Media:
3634 <td>visual
3636 <tr>
3637 <td>Computed value:
3639 <td>as specified
3641 <tr>
3642 <td>Animatable:
3644 <td>no
3645 </table>
3647 <p>Kerning is the contextual adjustment of inter-glyph spacing. This
3648 property controls metric kerning, kerning that utilizes adjustment data
3649 contained in the font.
3651 <dl>
3652 <dt><dfn id=font-kerning-auto-value title="auto!!font-kerning">auto</dfn>
3654 <dd>Specifies that kerning is applied at the discretion of the user agent
3656 <dt><dfn id=font-kerning-normal-value
3657 title="normal!!font-kerning">normal</dfn>
3659 <dd>Specifies that kerning is applied
3661 <dt><dfn id=font-kerning-none-value title="none!!font-kerning">none</dfn>
3663 <dd>Specifies that kerning is not applied
3664 </dl>
3666 <p>For fonts that do not include kerning data this property will have no
3667 visible effect. When rendering with OpenType fonts, the <a
3668 href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>
3669 specification suggests that kerning be enabled by default. When kerning is
3670 enabled, the OpenType <span class=tag>kern</span> feature is enabled (for
3671 vertical text runs the <span class=tag>vkrn</span> feature is enabled
3672 instead). User agents must also support fonts that only support kerning
3673 via data contained in a <span class=tag>kern</span> font table, as
3674 detailed in the OpenType specification. If the ‘<code
3675 class=property>letter-spacing</code>’ property is defined, kerning
3676 adjustments are considered part of the default spacing and letter spacing
3677 adjustments are made after kerning has been applied.
3679 <p>When set to ‘<code class=property>auto</code>’, user agents can
3680 determine whether to apply kerning or not based on a number of factors:
3681 text size, script, or other factors that influence text processing speed.
3682 Authors who want proper kerning should use <a
3683 href="#font-kerning-normal-value" title="normal!!font-kerning">‘<code
3684 class=property>normal</code>’</a> to explicitly enable kerning.
3685 Likewise, some authors may prefer to disable kerning in situations where
3686 performance is more important than precise appearance. However, in
3687 well-designed modern implementations the use of kerning generally does not
3688 have a large impact on text rendering speed.</p>
3689 <!-- prop: font-variant-ligatures -->
3691 <h3 id=font-variant-ligatures-prop><span class=secno>6.4 </span>Ligatures:
3692 the <a href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
3693 property</h3>
3695 <table class=propdef id=namefont-variant-ligaturesvaluenormal-no>
3696 <tbody>
3697 <tr>
3698 <td>Name:
3700 <td><dfn id=propdef-font-variant-ligatures>font-variant-ligatures</dfn>
3702 <tr>
3703 <td>Value:
3705 <td><a href="#font-variant-ligatures-normal-value"
3706 title="normal!!font-variant-ligatures">normal</a> | <a
3707 href="#font-variant-ligatures-none-value"
3708 title="none!!font-variant-ligatures">none</a> | [ <a
3709 href="#common-lig-values"><var><common-lig-values></var></a> ||
3710 <a
3711 href="#discretionary-lig-values"><var><discretionary-lig-values></var></a>
3712 || <a
3713 href="#historical-lig-values"><var><historical-lig-values></var></a>
3714 || <a
3715 href="#contextual-alt-values"><var><contextual-alt-values></var></a>
3716 ]
3718 <tr>
3719 <td>Initial:
3721 <td>normal
3723 <tr>
3724 <td>Applies to:
3726 <td>all elements
3728 <tr>
3729 <td>Inherited:
3731 <td>yes
3733 <tr>
3734 <td>Percentages:
3736 <td>N/A
3738 <tr>
3739 <td>Media:
3741 <td>visual
3743 <tr>
3744 <td>Computed value:
3746 <td>as specified
3748 <tr>
3749 <td>Animatable:
3751 <td>no
3752 </table>
3754 <p>Ligatures and contextual forms are ways of combining glyphs to produce
3755 more harmonized forms.
3757 <pre
3758 class=prod><dfn id=common-lig-values><var><common-lig-values></var></dfn> = [ <a href="#common-ligatures">common-ligatures</a> | <a href="#no-common-ligatures">no-common-ligatures</a> ]</pre>
3760 <pre
3761 class=prod><dfn id=discretionary-lig-values><var><discretionary-lig-values></var></dfn> = [ <a href="#discretionary-ligatures">discretionary-ligatures</a> | <a href="#no-discretionary-ligatures">no-discretionary-ligatures</a> ]</pre>
3763 <pre
3764 class=prod><dfn id=historical-lig-values><var><historical-lig-values></var></dfn> = [ <a href="#historical-ligatures">historical-ligatures</a> | <a href="#no-historical-ligatures">no-historical-ligatures</a> ]</pre>
3766 <pre
3767 class=prod><dfn id=contextual-alt-values><var><contextual-alt-values></var></dfn> = [ <a href="#contextual">contextual</a> | <a href="#no-contextual">no-contextual</a> ]</pre>
3769 <p>Individual values have the following meanings:
3771 <dl>
3772 <dt><dfn id=font-variant-ligatures-normal-value
3773 title="normal!!font-variant-ligatures">normal</dfn>
3775 <dd>A value of <a href="#font-variant-ligatures-normal-value"
3776 title="normal!!font-variant-ligatures">‘<code
3777 class=property>normal</code>’</a> specifies that common default
3778 features are enabled, <a href="#font-feature-resolution">as described in
3779 detail in the next section</a>. For OpenType fonts, common ligatures and
3780 contextual forms are on by default, discretionary and historical
3781 ligatures are not.
3783 <dt><dfn id=font-variant-ligatures-none-value
3784 title="none!!font-variant-ligatures">none</dfn>
3786 <dd>Specifies that all types of ligatures and contextual forms covered by
3787 this property are explicitly disabled. In situations where ligatures are
3788 not considered necessary, this may improve the speed of text rendering.
3790 <dt><dfn id=common-ligatures>common-ligatures</dfn>
3792 <dd>Enables display of common ligatures (OpenType features: <span
3793 class=tag>liga, clig</span>). For OpenType fonts, common ligatures are
3794 enabled by default.
3795 </dl>
3797 <div class=featex><img alt="common ligature example" src=liga.png></div>
3799 <dl>
3800 <dt><dfn id=no-common-ligatures>no-common-ligatures</dfn>
3802 <dd>Disables display of common ligatures (OpenType features: <span
3803 class=tag>liga, clig</span>).
3805 <dt><dfn id=discretionary-ligatures>discretionary-ligatures</dfn>
3807 <dd>Enables display of discretionary ligatures (OpenType feature: <span
3808 class=tag>dlig</span>). Which ligatures are discretionary or optional is
3809 decided by the type designer, so authors will need to refer to the
3810 documentation of a given font to understand which ligatures are
3811 considered discretionary.
3812 </dl>
3814 <div class=featex><img alt="discretionary ligature example" src=dlig.png></div>
3816 <dl>
3817 <dt><dfn id=no-discretionary-ligatures>no-discretionary-ligatures</dfn>
3819 <dd>Disables display of discretionary ligatures (OpenType feature: <span
3820 class=tag>dlig</span>).
3822 <dt><dfn id=historical-ligatures>historical-ligatures</dfn>
3824 <dd>Enables display of historical ligatures (OpenType feature: <span
3825 class=tag>hlig</span>).
3826 </dl>
3828 <div class=featex><img alt="historical ligature example" src=hlig.png></div>
3830 <dl>
3831 <dt><dfn id=no-historical-ligatures>no-historical-ligatures</dfn>
3833 <dd>Disables display of historical ligatures (OpenType feature: <span
3834 class=tag>hlig</span>).
3836 <dt><dfn id=contextual>contextual</dfn>
3838 <dd>Enables display of contextual alternates (OpenType feature: <span
3839 class=tag>calt</span>). Although not strictly a ligature feature, like
3840 ligatures this feature is commonly used to harmonize the shapes of glyphs
3841 with the surrounding context. For OpenType fonts, this feature is on by
3842 default.
3843 </dl>
3845 <div class=featex><img alt="contextual alternate example" src=calt.png></div>
3847 <dl>
3848 <dt><dfn id=no-contextual>no-contextual</dfn>
3850 <dd>Disables display of contextual alternates (OpenType feature: <span
3851 class=tag>calt</span>).
3852 </dl>
3854 <p>Required ligatures, needed for correctly rendering complex scripts, are
3855 not affected by the settings above, including ‘<code
3856 class=property>none</code>’ (OpenType feature: <span
3857 class=tag>rlig</span>).</p>
3858 <!-- prop: font-variant-position -->
3860 <h3 id=font-variant-position-prop><span class=secno>6.5 </span>Subscript
3861 and superscript forms: the <a
3862 href="#propdef-font-variant-position">font-variant-position</a> property</h3>
3864 <table class=propdef id=namefont-variant-positionvaluenormal-sub>
3865 <tbody>
3866 <tr>
3867 <td>Name:
3869 <td><dfn id=propdef-font-variant-position>font-variant-position</dfn>
3871 <tr>
3872 <td>Value:
3874 <td><a href="#font-variant-position-normal-value"
3875 title="normal!!font-variant-position">normal</a> | <a
3876 href="#sub">sub</a> | <a href="#super">super</a>
3878 <tr>
3879 <td>Initial:
3881 <td>normal
3883 <tr>
3884 <td>Applies to:
3886 <td>all elements
3888 <tr>
3889 <td>Inherited:
3891 <td>yes
3893 <tr>
3894 <td>Percentages:
3896 <td>N/A
3898 <tr>
3899 <td>Media:
3901 <td>visual
3903 <tr>
3904 <td>Computed value:
3906 <td>as specified
3908 <tr>
3909 <td>Animatable:
3911 <td>no
3912 </table>
3914 <p>This property is used to enable typographic subscript and superscript
3915 glyphs. These are alternate glyphs designed within the same em-box as
3916 default glyphs and are intended to be laid out on the same baseline as the
3917 default glyphs, with no resizing or repositioning of the baseline. They
3918 are explicitly designed to match the surrounding text and to be more
3919 readable without affecting the line height.
3921 <div class=figure><img alt="comparison between real subscript glyphs and
3922 synthesized ones" src=realsubscripts.png>
3923 <p class=caption>Subscript glyphs (top) vs. typical synthesized subscripts
3924 (bottom)
3925 </div>
3927 <p>Individual values have the following meanings:
3929 <dl>
3930 <dt><dfn id=font-variant-position-normal-value
3931 title="normal!!font-variant-position">normal</dfn>
3933 <dd>None of the features listed below are enabled.
3935 <dt><dfn id=sub>sub</dfn>
3937 <dd>Enables display of subscript variants (OpenType feature: <span
3938 class=tag>subs</span>).
3940 <dt><dfn id=super>super</dfn>
3942 <dd>Enables display of superscript variants (OpenType feature: <span
3943 class=tag>sups</span>).
3944 </dl>
3946 <p>Because of the semantic nature of subscripts and superscripts, when the
3947 value is either ‘<a href="#sub"><code class=property>sub</code></a>’
3948 or ‘<a href="#super"><code class=property>super</code></a>’ for a
3949 given contiguous run of text, if a variant glyph is not available for all
3950 the characters in the run, simulated glyphs must be synthesized for all
3951 characters using reduced forms of the glyphs that would be used without
3952 this feature applied. This is done per run to avoid a mixture of variant
3953 glyphs and synthesized ones that would not align correctly. In the case of
3954 OpenType fonts that lack subscript or superscript glyphs for a given
3955 character, user agents must use the appropriate subscript and superscript
3956 metrics specified in the selected font's <a
3957 href="http://www.microsoft.com/typography/otspec/os2.htm#subxs">OS/2
3958 table</a> <a href="#OPENTYPE"
3959 rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> to calculate the size
3960 and offset of the synthesized substitutes.
3962 <div class=figure><img alt="alternate superscripts vs. glyphs synthesized
3963 using superscript metrics" src=superscript-alt-synth.png>
3964 <p class=caption>Superscript alternate glyph (left), synthesized
3965 superscript glyphs (middle), and incorrect mixture of the two (right)
3966 </div>
3968 <p>In situations where text decorations are only applied to runs of text
3969 containing superscript or subscript glyphs, the synthesized glyphs must be
3970 used to avoid problems with the placement of decorations.
3972 <p>In the past, user agents have used font-size and vertical-align to
3973 simulate subscripts and superscripts for the <code title="HTML sub
3974 element">sub</code> and <code title="HTML sup element">sup</code>
3975 elements. To allow a backwards compatible way of defining subscripts and
3976 superscripts, it is recommended that authors use conditional rules <a
3977 href="#CSS3-CONDITIONAL"
3978 rel=biblioentry>[CSS3-CONDITIONAL]<!--{{CSS3-CONDITIONAL}}--></a> so that
3979 older user agents will still render subscripts and superscripts via the
3980 older mechanism.
3982 <p>Authors should note that fonts typically only provide subscript and
3983 superscript glyphs for a subset of all characters supported by the font.
3984 For example, while subscript and superscript glyphs are often available
3985 for Latin numbers, glyphs for punctuation and letter characters are less
3986 frequently provided. The synthetic fallback rules defined for this
3987 property assure that subscripts and superscripts will always appear but
3988 the appearance may not match author expectations if the font used does not
3989 provide the appropriate alternate glyph for all characters contained in a
3990 subscript or superscript.
3992 <p>This property is not cumulative. Applying it to elements within a
3993 subscript or superscript won't nest the placement of a subscript or
3994 superscript glyph. Images contained within text runs where the value of
3995 this property is ‘<a href="#sub"><code class=property>sub</code></a>’
3996 or ‘<a href="#super"><code class=property>super</code></a>’ will be
3997 drawn just as they would if the value was <a
3998 href="#font-variant-position-normal-value"
3999 title="normal!!font-variant-position">‘<code
4000 class=property>normal</code>’</a>.</p>
4001 <!-- due to lack of consensus, couldn't resolve on exact positioning of text decorations:
4002 http://www.w3.org/2013/06/06-css-minutes.html#item03 -->
4004 <p>Because of these limitations, ‘<a
4005 href="#propdef-font-variant-position"><code
4006 class=property>font-variant-position</code></a>’ is not recommended for
4007 use in user agent stylesheets. Authors should use it in cases where
4008 subscripts or superscripts will only contain the narrow range of
4009 characters supported by the fonts specified.
4011 <p class=note>The variant glyphs use the same baseline as the default
4012 glyphs would use. There is no shift in the placement along the baseline,
4013 so the use of variant glyphs doesn't affect the height of the inline box
4014 or alter the height of the linebox. This makes superscript and subscript
4015 variants ideal for situations where it's important that leading remain
4016 constant, such as in multi-column layout.
4018 <div class=example>
4019 <p>A typical user agent default style for the <a class=tag
4020 href="#sub">sub</a> element:</p>
4022 <pre>sub {
4023 vertical-align: sub;
4024 font-size: smaller;
4025 line-height: normal;
4026 }
4027 </pre>
4029 <p>Using font-variant-position to specify typographic subscripts in a way
4030 that will still show subscripts in older user agents:</p>
4032 <pre>@supports ( font-variant-position: sub ) {
4034 sub {
4035 vertical-align: baseline;
4036 font-size: 100%;
4037 line-height: inherit;
4038 font-variant-position: sub;
4039 }
4041 }
4042 </pre>
4044 <p>User agents that support the ‘<a
4045 href="#propdef-font-variant-position"><code
4046 class=property>font-variant-position</code></a>’ property will select a
4047 subscript variant glyph and render this without adjusting the baseline or
4048 font-size. Older user agents will ignore the ‘<a
4049 href="#propdef-font-variant-position"><code
4050 class=property>font-variant-position</code></a>’ property definition
4051 and use the standard defaults for subscripts.</p>
4052 </div>
4053 <!-- prop: font-variant-caps -->
4055 <h3 id=font-variant-caps-prop><span class=secno>6.6 </span>Capitalization:
4056 the <a href="#propdef-font-variant-caps">font-variant-caps</a> property</h3>
4058 <table class=propdef id=namefont-variant-capsvaluenormal-small-c>
4059 <tbody>
4060 <tr>
4061 <td>Name:
4063 <td><dfn id=propdef-font-variant-caps>font-variant-caps</dfn>
4065 <tr>
4066 <td>Value:
4068 <td><a href="#font-variant-caps-normal-value"
4069 title="normal!!font-variant-caps">normal</a> | <a
4070 href="#small-caps">small-caps</a> | <a
4071 href="#all-small-caps">all-small-caps</a> | <a
4072 href="#petite-caps">petite-caps</a> | <a
4073 href="#all-petite-caps">all-petite-caps</a> | <a
4074 href="#unicase">unicase</a> | <a href="#titling-caps">titling-caps</a>
4076 <tr>
4077 <td>Initial:
4079 <td>normal
4081 <tr>
4082 <td>Applies to:
4084 <td>all elements
4086 <tr>
4087 <td>Inherited:
4089 <td>yes
4091 <tr>
4092 <td>Percentages:
4094 <td>N/A
4096 <tr>
4097 <td>Media:
4099 <td>visual
4101 <tr>
4102 <td>Computed value:
4104 <td>as specified
4106 <tr>
4107 <td>Animatable:
4109 <td>no
4110 </table>
4112 <p>This property allows the selection of alternate glyphs used for small or
4113 petite capitals or for titling. These glyphs are specifically designed to
4114 blend well with the surrounding normal glyphs, to maintain the weight and
4115 readability which suffers when text is simply resized to fit this purpose.
4117 <p>Individual values have the following meanings:
4119 <dl>
4120 <dt><dfn id=font-variant-caps-normal-value
4121 title="normal!!font-variant-caps">normal</dfn>
4123 <dd>None of the features listed below are enabled.
4125 <dt><dfn id=small-caps>small-caps</dfn>
4127 <dd>Enables display of small capitals (OpenType feature: <span
4128 class=tag>smcp</span>). Small-caps glyphs typically use the form of
4129 uppercase letters but are reduced to the size of lowercase letters.
4130 </dl>
4132 <div class=featex><img alt="small-caps example" src=smcp.png></div>
4134 <dl>
4135 <dt><dfn id=all-small-caps>all-small-caps</dfn>
4137 <dd>Enables display of small capitals for both upper and lowercase letters
4138 (OpenType features: <span class=tag>c2sc, smcp</span>).
4140 <dt><dfn id=petite-caps>petite-caps</dfn>
4142 <dd>Enables display of petite capitals (OpenType feature: <span
4143 class=tag>pcap</span>).
4145 <dt><dfn id=all-petite-caps>all-petite-caps</dfn>
4147 <dd>Enables display of petite capitals for both upper and lowercase
4148 letters (OpenType features: <span class=tag>c2pc, pcap</span>).
4150 <dt><dfn id=unicase>unicase</dfn>
4152 <dd>Enables display of mixture of small capitals for uppercase letters
4153 with normal lowercase letters (OpenType feature: <span
4154 class=tag>unic</span>).
4156 <dt><dfn id=titling-caps>titling-caps</dfn>
4158 <dd>Enables display of titling capitals (OpenType feature: <span
4159 class=tag>titl</span>). Uppercase letter glyphs are often designed for
4160 use with lowercase letters. When used in all uppercase titling sequences
4161 they can appear too strong. Titling capitals are designed specifically
4162 for this situation.
4163 </dl>
4165 <p>The availability of these glyphs is based on whether a given feature is
4166 defined or not in the feature list of the font. User agents can optionally
4167 decide this on a per-script basis but should explicitly not decide this on
4168 a per-character basis.
4170 <p>Some fonts may only support a subset or none of the features described
4171 for this property. For backwards compatibility with CSS 2.1, if ‘<a
4172 href="#small-caps"><code class=property>small-caps</code></a>’ or ‘<a
4173 href="#all-small-caps"><code class=property>all-small-caps</code></a>’
4174 is specified but small-caps glyphs are not available for a given font,
4175 user agents should simulate a small-caps font, for example by taking a
4176 normal font and replacing the glyphs for lowercase letters with scaled
4177 versions of the glyphs for uppercase characters (replacing the glyphs for
4178 both upper and lowercase letters in the case of ‘<a
4179 href="#all-small-caps"><code class=property>all-small-caps</code></a>’).
4181 <div class=figure style="padding: 0; margin: auto;"><img alt="synthetic vs.
4182 real small-caps" class=hires src=synthetic-vs-real-small-caps.png
4183 width=512>
4184 <p class=caption>Synthetic vs. real small-caps
4185 </div>
4187 <p>To match the surrounding text, a font may provide alternate glyphs for
4188 caseless characters when these features are enabled but when a user agent
4189 simulates small capitals, it must not attempt to simulate alternates for
4190 codepoints which are considered caseless.
4192 <div class=figure style="padding: 0; margin: auto;"><img alt="caseless
4193 characters with small-caps, all-small-caps enabled" class=hires
4194 src=small-capitals-variations.png width=418>
4195 <p class=caption>Caseless characters with small-caps, all-small-caps
4196 enabled
4197 </div>
4199 <p>If either ‘<a href="#petite-caps"><code
4200 class=property>petite-caps</code></a>’ or ‘<a
4201 href="#all-petite-caps"><code class=property>all-petite-caps</code></a>’
4202 is specified for a font that doesn't support these features, the property
4203 behaves as if ‘<a href="#small-caps"><code
4204 class=property>small-caps</code></a>’ or ‘<a
4205 href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
4206 respectively, had been specified. If ‘<a href="#unicase"><code
4207 class=property>unicase</code></a>’ is specified for a font that doesn't
4208 support that feature, the property behaves as if ‘<a
4209 href="#small-caps"><code class=property>small-caps</code></a>’ was
4210 applied only to lowercased uppercase letters. If ‘<a
4211 href="#titling-caps"><code class=property>titling-caps</code></a>’ is
4212 specified with a font that does not support this feature, this property
4213 has no visible effect. When simulated small capital glyphs are used, for
4214 scripts that lack uppercase and lowercase letters, ‘<a
4215 href="#small-caps"><code class=property>small-caps</code></a>’, ‘<a
4216 href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
4217 ‘<a href="#petite-caps"><code class=property>petite-caps</code></a>’,
4218 ‘<a href="#all-petite-caps"><code
4219 class=property>all-petite-caps</code></a>’ and ‘<a
4220 href="#unicase"><code class=property>unicase</code></a>’ have no visible
4221 effect.
4223 <p>When casing transforms are used to simulate small capitals, the casing
4224 transformations must match those used for the <span
4225 class=property>‘<code class=property>text-transform</code>’</span>
4226 property.
4228 <p>As a last resort, unscaled uppercase letter glyphs in a normal font may
4229 replace glyphs in a small-caps font so that the text appears in all
4230 uppercase letters.
4232 <div class=figure style="padding: 0; margin: auto;"><img alt="using
4233 all-small-caps in acronym-laden text" class=hires
4234 src=acronym-laden-text.png width=596>
4235 <p class=caption>Using small capitals to improve readability in
4236 acronym-laden text
4237 </div>
4239 <div class=example>
4240 <p>Quotes rendered italicised, with small-caps on the first line:</p>
4242 <pre>blockquote { font-style: italic; }
4243 blockquote:first-line { font-variant: small-caps; }
4245 <blockquote><a href="http://lists.w3.org/Archives/Public/www-style/2009Dec/0036.html" style="text-decoration: none; border: none;">I'll be honor-bound to slap them like a haddock.</a></blockquote>
4246 </pre>
4247 </div>
4248 <!-- prop: font-variant-numeric -->
4250 <h3 id=font-variant-numeric-prop><span class=secno>6.7 </span>Numerical
4251 formatting: the <a
4252 href="#propdef-font-variant-numeric">font-variant-numeric</a> property</h3>
4254 <table class=propdef id=namefont-variant-numericvaluenormal-ltnu>
4255 <tbody>
4256 <tr>
4257 <td>Name:
4259 <td><dfn id=propdef-font-variant-numeric>font-variant-numeric</dfn>
4261 <tr>
4262 <td>Value:
4264 <td><a href="#font-variant-numeric-normal-value"
4265 title="normal!!font-variant-numeric">normal</a> | [ <a
4266 href="#numeric-figure-values"><var><numeric-figure-values></var></a>
4267 || <a
4268 href="#numeric-spacing-values"><var><numeric-spacing-values></var></a>
4269 || <a
4270 href="#numeric-fraction-values"><var><numeric-fraction-values></var></a>
4271 || <a href="#ordinal">ordinal</a> || <a
4272 href="#slashed-zero">slashed-zero</a> ]
4274 <tr>
4275 <td>Initial:
4277 <td>normal
4279 <tr>
4280 <td>Applies to:
4282 <td>all elements
4284 <tr>
4285 <td>Inherited:
4287 <td>yes
4289 <tr>
4290 <td>Percentages:
4292 <td>N/A
4294 <tr>
4295 <td>Media:
4297 <td>visual
4299 <tr>
4300 <td>Computed value:
4302 <td>as specified
4304 <tr>
4305 <td>Animatable:
4307 <td>no
4308 </table>
4310 <p>Specifies control over numerical forms. The example below shows how some
4311 of these values can be combined to influence the rendering of tabular data
4312 with fonts that support these features. Within normal paragraph text,
4313 proportional numbers are used while tabular numbers are used so that
4314 columns of numbers line up properly:
4316 <div class=figure style="padding: 0; margin: auto;"><img alt="combining
4317 number styles" src=numberstyles.png>
4318 <p class=caption>Using number styles
4319 </div>
4321 <p>Possible combinations:
4323 <pre
4324 class=prod><dfn id=numeric-figure-values><var><numeric-figure-values></var></dfn> = [ <a href="#lining-nums">lining-nums</a> | <a href="#oldstyle-nums">oldstyle-nums</a> ]</pre>
4326 <pre
4327 class=prod><dfn id=numeric-spacing-values><var><numeric-spacing-values></var></dfn> = [ <a href="#proportional-nums">proportional-nums</a> | <a href="#tabular-nums">tabular-nums</a> ]</pre>
4329 <pre
4330 class=prod><dfn id=numeric-fraction-values><var><numeric-fraction-values></var></dfn> = [ <a href="#diagonal-fractions">diagonal-fractions</a> | <a href="#stacked-fractions">stacked-fractions</a> ]</pre>
4332 <p>Individual values have the following meanings:
4334 <dl>
4335 <dt><dfn id=font-variant-numeric-normal-value
4336 title="normal!!font-variant-numeric">normal</dfn>
4338 <dd>None of the features listed below are enabled.
4340 <dt><dfn id=lining-nums>lining-nums</dfn>
4342 <dd>Enables display of lining numerals (OpenType feature: <span
4343 class=tag>lnum</span>).
4345 <dt><dfn id=oldstyle-nums>oldstyle-nums</dfn>
4347 <dd>Enables display of old-style numerals (OpenType feature: <span
4348 class=tag>onum</span>).
4350 <dt><dfn id=proportional-nums>proportional-nums</dfn>
4352 <dd>Enables display of proportional numerals (OpenType feature: <span
4353 class=tag>pnum</span>).
4355 <dt><dfn id=tabular-nums>tabular-nums</dfn>
4357 <dd>Enables display of tabular numerals (OpenType feature: <span
4358 class=tag>tnum</span>).
4360 <dt><dfn id=diagonal-fractions>diagonal-fractions</dfn>
4362 <dd>Enables display of lining diagonal fractions (OpenType feature: <span
4363 class=tag>frac</span>).
4364 </dl>
4366 <div class=featex><img alt="diagonal fraction example" src=frac.png></div>
4368 <dl>
4369 <dt><dfn id=stacked-fractions>stacked-fractions</dfn>
4371 <dd>Enables display of lining stacked fractions (OpenType feature: <span
4372 class=tag>afrc</span>).
4373 </dl>
4375 <div class=featex><img alt="stacked fraction example" src=afrc.png></div>
4377 <dl>
4378 <dt><dfn id=ordinal>ordinal</dfn>
4380 <dd>Enables display of forms used with ordinal numbers (OpenType feature:
4381 <span class=tag>ordn</span>).
4383 <dt><dfn id=slashed-zero>slashed-zero</dfn>
4385 <dd>Enables display of slashed zeros (OpenType feature: <span
4386 class=tag>zero</span>).
4387 </dl>
4389 <div class=featex><img alt="slashed zero example" src=zero.png></div>
4391 <div class=example id=steak-marinade>
4392 <p>A simple flank steak marinade recipe, rendered with automatic fractions
4393 and old-style numerals:</p>
4395 <pre>.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; }
4397 <h4>Steak marinade:</h4>
4398 <ul>
4399 <li><span class="amount">2</span> tbsp olive oil</li>
4400 <li><span class="amount">1</span> tbsp lemon juice</li>
4401 <li><span class="amount">1</span> tbsp soy sauce</li>
4402 <li><span class="amount">1 1/2</span> tbsp dry minced onion</li>
4403 <li><span class="amount">2 1/2</span> tsp italian seasoning</li>
4404 <li>Salt &amp; pepper</li>
4405 </ul>
4407 <p>Mix the meat with the marinade and let it sit covered in the refrigerator
4408 for a few hours or overnight.</p>
4409 </pre>
4411 <p>Note that the fraction feature is only applied to values not the entire
4412 paragraph. Fonts often implement this feature using contextual rules
4413 based on the use of the slash (‘<code class=css>/</code>’) character.
4414 As such, it's not suitable for use as a paragraph-level style.</p>
4415 </div>
4416 <!-- prop: font-variant-alternates -->
4418 <h3 id=font-variant-alternates-prop><span class=secno>6.8 </span>Alternates
4419 and swashes: the <a
4420 href="#propdef-font-variant-alternates">font-variant-alternates</a>
4421 property</h3>
4423 <table class=propdef id=namefont-variant-alternatesvaluenormal-s>
4424 <tbody>
4425 <tr>
4426 <td>Name:
4428 <td><dfn
4429 id=propdef-font-variant-alternates>font-variant-alternates</dfn>
4431 <tr>
4432 <td>Value:
4434 <td>normal | [ <a href="#stylistic"
4435 title=stylistic>stylistic(<feature-value-name>)</a> || <a
4436 href="#historical-forms">historical-forms</a> || <a href="#styleset"
4437 title=styleset>styleset(<feature-value-name> #)</a> || <a
4438 href="#character-variant"
4439 title=character-variant>character-variant(<feature-value-name>
4440 #)</a> || <a href="#swash"
4441 title=swash>swash(<feature-value-name>)</a> || <a
4442 href="#ornaments"
4443 title=ornaments>ornaments(<feature-value-name>)</a> || <a
4444 href="#annotation"
4445 title=annotation>annotation(<feature-value-name>)</a> ]
4447 <tr>
4448 <td>Initial:
4450 <td>normal
4452 <tr>
4453 <td>Applies to:
4455 <td>all elements
4457 <tr>
4458 <td>Inherited:
4460 <td>yes
4462 <tr>
4463 <td>Percentages:
4465 <td>N/A
4467 <tr>
4468 <td>Media:
4470 <td>visual
4472 <tr>
4473 <td>Computed value:
4475 <td>as specified
4477 <tr>
4478 <td>Animatable:
4480 <td>no
4481 </table>
4483 <p>For any given character, fonts can provide a variety of alternate glyphs
4484 in addition to the default glyph for that character. This property
4485 provides control over the selection of these alternate glyphs.
4487 <p>For many of the property values listed below, several different
4488 alternate glyphs are available. How many alternates are available and what
4489 they represent is font-specific, so these are each marked <dfn
4490 id=font-specific>font specific</dfn> in the value definitions below.
4491 Because the nature of these alternates is font-specific, the <a
4492 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
4493 rule is used to define values for a specific font family or set of
4494 families that associate a font-specific numeric
4495 <code><feature-index></code> with a custom
4496 <code><feature-value-name></code>, which is then used in this
4497 property to select specific alternates:
4499 <pre>@font-feature-values Noble Script { @swash { swishy: 1; flowing: 2; } }
4501 p {
4502 font-family: Noble Script;
4503 font-variant-alternates: swash(flowing); /* use swash alternate #2 */
4504 }</pre>
4506 <p>When a particular <code><feature-value-name></code> has not been
4507 defined for a given family or for a particular feature type, the computed
4508 value must be the same as if it had been defined. However, property values
4509 that contain these undefined <code><feature-value-name></code>
4510 identifiers must be ignored when choosing glyphs.
4512 <pre>/* these two style rules are effectively the same */
4513 p { font-variant-alternates: swash(unknown-value); } /* not a defined value, ignored */
4514 p { font-variant-alternates: normal; }
4515 </pre>
4517 <p>This allows values to be defined and used for a given set of font
4518 families but ignored if fallback occurs, since the font family name would
4519 be different. If a given value is outside the range supported by a given
4520 font, the value is ignored. These values never apply to generic font
4521 families.
4523 <p>Individual values have the following meanings:
4525 <dl>
4526 <dt><dfn id=font-variant-alternates-normal-value
4527 title="normal!!font-variant-alternates">normal</dfn>
4529 <dd>None of the features listed below are enabled.
4531 <dt><dfn id=historical-forms>historical-forms</dfn>
4533 <dd>Enables display of historical forms (OpenType feature: <span
4534 class=tag>hist</span>).
4535 </dl>
4537 <div class=featex><img alt="historical form example" src=hist.png></div>
4539 <dl>
4540 <dt><dfn id=stylistic
4541 title=stylistic>stylistic(<feature-value-name>)</dfn>
4543 <dd>Enables display of stylistic alternates (<a
4544 href="#font-specific"><em>font specific</em></a>, OpenType feature: <span
4545 class=tag>salt <feature-index></span>).
4546 </dl>
4548 <div class=featex><img alt="stylistic alternate example" src=salt.png></div>
4550 <dl>
4551 <dt><dfn id=styleset title=styleset>styleset(<feature-value-name>
4552 #)</dfn>
4554 <dd>Enables display with stylistic sets (<a href="#font-specific"><em>font
4555 specific</em></a>, OpenType feature: <span
4556 class=tag>ss<feature-index></span> OpenType currently defines <span
4557 class=tag>ss01</span> through <span class=tag>ss20</span>).
4558 </dl>
4560 <div class=featex><img alt="styleset example" src=ssnn.png></div>
4562 <dl>
4563 <dt><dfn id=character-variant
4564 title=character-variant>character-variant(<feature-value-name>
4565 #)</dfn>
4567 <dd>Enables display of specific character variants (<a
4568 href="#font-specific"><em>font specific</em></a>, OpenType feature: <span
4569 class=tag>cv<feature-index></span> OpenType currently defines <span
4570 class=tag>cv01</span> through <span class=tag>cv99</span>).
4572 <dt><dfn id=swash title=swash>swash(<feature-value-name>)</dfn>
4574 <dd>Enables display of swash glyphs (<a href="#font-specific"><em>font
4575 specific</em></a>, OpenType feature: <span class=tag>swsh
4576 <feature-index>, cswh <feature-index></span>).
4577 </dl>
4579 <div class=featex><img alt="swash example" src=swsh.png></div>
4581 <dl>
4582 <dt><dfn id=ornaments
4583 title=ornaments>ornaments(<feature-value-name>)</dfn>
4585 <dd>Enables replacement of default glyphs with ornaments, if provided in
4586 the font (<a href="#font-specific"><em>font specific</em></a>, OpenType
4587 feature: <span class=tag>ornm <feature-index></span>). Some fonts
4588 may offer ornament glyphs as alternates for a wide collection of
4589 characters; however, displaying arbitrary characters (e.g.,
4590 alphanumerics) as ornaments is poor practice as it distorts the semantics
4591 of the data. Font designers are encouraged to encode all ornaments
4592 (except those explicitly encoded in the Unicode Dingbats blocks, etc.) as
4593 alternates for the bullet character (U+2022) to allow authors to select
4594 the desired glyph using ‘<a href="#ornaments"><code
4595 class=property>ornaments</code></a>’.
4596 </dl>
4598 <div class=featex><img alt="ornaments example" src=ornm.png></div>
4600 <dl>
4601 <dt><dfn id=annotation
4602 title=annotation>annotation(<feature-value-name>)</dfn>
4604 <dd>Enables display of alternate annotation forms (<a
4605 href="#font-specific"><em>font specific</em></a>, OpenType feature: <span
4606 class=tag>nalt <feature-index></span>).
4607 </dl>
4609 <div class=featex><img alt="alternate annotation form example"
4610 src=nalt.png></div>
4612 <h3 id=font-feature-values><span class=secno>6.9 </span>Defining font
4613 specific alternates: the <dfn id=at-font-feature-values-rule
4614 style="font-weight: inherit; font-style:
4615 inherit"><code>@font-feature-values</code></dfn> rule</h3>
4617 <p>Several of the possible values of ‘<a
4618 href="#propdef-font-variant-alternates"><code
4619 class=property>font-variant-alternates</code></a>’ listed above are
4620 labeled as <a href="#font-specific"><em>font specific</em></a>. For these
4621 features fonts may define not just a single glyph but a set of alternate
4622 glyphs with an index to select a given alternate. Since these are font
4623 family specific, the <a
4624 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
4625 rule is used to define named values for these indices for a given family.
4627 <p class=note>See the <a href="#om-fontfeaturevalues">object model
4628 reference section</a> for a description of the interfaces used to modify
4629 these rules via the CSS Object Model.
4631 <div class=example>
4632 <p>In the case of the swash Q in the example shown above, the swash could
4633 be specified using these style rules:</p>
4635 <pre>
4637 @font-feature-values Jupiter Sans {
4638 @swash {
4639 delicate: 1;
4640 flowing: 2;
4641 }
4642 }
4644 h2 { font-family: Jupiter Sans, sans-serif; }
4646 /* show the second swash variant in h2 headings */
4647 h2:first-letter { font-variant-alternates: swash(flowing); }
4649 <h2>Quick</h2></pre>
4651 <p>When Jupiter Sans is present, the second alternate swash alternate will
4652 be displayed. When not present, no swash character will be shown, since
4653 the specific named value "flowing" is only defined for the Jupiter Sans
4654 family. The @-mark indicates the name of the property value for which a
4655 named value can be used. The name "flowing" is chosen by the author. The
4656 index that represents each alternate is defined within a given font's
4657 data.</p>
4658 </div>
4660 <h4 id=basic-syntax><span class=secno>6.9.1 </span>Basic syntax</h4>
4662 <p>An <a
4663 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
4664 rule is composed of a list of font families followed by a block containing
4665 individual <a href="#featurevalueblock"><i
4666 title="feature_value_block">feature value blocks</i></a> that take the
4667 form of @-rules. Each block defines a set of named values for a specific
4668 font feature when a given set of font families is used. Effectively, they
4669 define a mapping of ⟨family, feature, ident⟩ → ⟨values⟩ where
4670 ⟨values⟩ are the numeric indices used for specific features defined
4671 for a given font.
4673 <p>In terms of the grammar, this specification defines the following
4674 productions:
4676 <pre><dfn id=fontfeaturevaluesrule>font_feature_values_rule</dfn>
4677 : <a href="#fontfeaturevaluessym"><i>FONT_FEATURE_VALUES_SYM</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#fontfamilynamelist"><i>font_family_name_list</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
4678 '{' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevalueblock"><i>feature_value_block</i></a>? [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevalueblock"><i>feature_value_block</i></a>? ]* '}' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
4679 ;
4681 <dfn id=fontfamilynamelist>font_family_name_list</dfn>
4682 : <a href="#fontfamilyname"><i>font_family_name</i></a> [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* ',' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#fontfamilyname"><i>font_family_name</i></a> ]*
4683 ;
4685 <dfn id=fontfamilyname>font_family_name</dfn>
4686 : <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>STRING</i></a> | [ <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>IDENT</i></a> [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>IDENT</i></a> ]* ]
4687 ;
4689 <dfn id=featurevalueblock>feature_value_block</dfn>
4690 : <a href="#featuretype"><i>feature_type</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
4691 '{' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevaluedefinition"><i>feature_value_definition</i></a>? [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* ';' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevaluedefinition"><i>feature_value_definition</i></a>? ]* '}' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
4692 ;
4694 <dfn id=featuretype>feature_type</dfn>:
4695 <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>ATKEYWORD</i></a>
4696 ;
4698 <dfn id=featurevaluedefinition>feature_value_definition</dfn>
4699 : <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>IDENT</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* ':' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>NUMBER</i></a> [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>NUMBER</i></a> ]*
4700 ;
4701 </pre>
4703 <p>The following new token is introduced:
4705 <pre>@{F}{O}{N}{T}{-}{F}{E}{A}{T}{U}{R}{E}{-}{V}{A}{L}{U}{E}{S} {return <dfn id=fontfeaturevaluessym>FONT_FEATURE_VALUES_SYM</dfn>;}
4706 </pre>
4708 <p><a href="#featurevalueblock"><i title="feature_value_block">Feature
4709 value blocks</i></a> are handled as <a
4710 href="http://www.w3.org/TR/CSS2/syndata.html#at-rules">at-rules</a>, they
4711 consist of everything up to the next block or semi-colon, whichever comes
4712 first.
4714 <p>The <a href="#fontfamilynamelist"><i title="font_family_name_list">font
4715 family list</i></a> is a comma-delimited list of <a
4716 href="#fontfamilyname"><i title="font_family_name">font family
4717 names</i></a> that match the definition of <a
4718 href="#family-name-value"><var><family-name></var></a> for the <a
4719 href="#propdef-font-family" title="font-family!!property">‘<code
4720 class=property>font-family</code>’</a> property. This means that only
4721 named font families are allowed, rules that include generic or system
4722 fonts in the list of font families are syntax errors. However, if a user
4723 agent defines a generic font to be a specific named font (e.g. Helvetica),
4724 the settings associated with that family name will be used. If syntax
4725 errors occur within the font family list, the entire rule must be ignored.
4727 <p>Within <a href="#featurevalueblock"><i
4728 title="feature_value_block">feature value blocks</i></a>, the <a
4729 href="#featuretype"><i title="feature_type">feature type</i></a> is
4730 ‘<code class=css>@</code>’ followed by the name of one of the <a
4731 href="#font-specific"><em>font specific</em></a> property values of ‘<a
4732 href="#propdef-font-variant-alternates"><code
4733 class=property>font-variant-alternates</code></a>’ (e.g. <a
4734 href="#swash"><code>@swash</code></a>). The identifiers used within
4735 feature value definitions follow the rules of CSS user identifiers and are
4736 case-sensitive. They are unique only for a given set of font families and
4737 <a href="#featuretype"><i title="feature_type">feature type</i></a>. The
4738 same identifier used with a different <a href="#featuretype"><i
4739 title="feature_type">feature type</i></a> is treated as a separate and
4740 distinct value. If the same identifier is defined mulitple times for a
4741 given <a href="#featuretype"><i title="feature_type">feature type</i></a>
4742 and font family, the last defined value is used. Values associated with a
4743 given identifier are limited to integer values 0 or greater.
4745 <p>When syntax errors occur within a <a href="#featurevaluedefinition"><i
4746 title="feature_value_definition">feature value definition</i></a>, such as
4747 invalid identifiers or values, the entire <a
4748 href="#featurevaluedefinition"><i title="feature_value_definition">feature
4749 value definition</i></a> must be omitted, just as syntax errors in style
4750 declarations are handled. When the <a href="#featuretype"><i
4751 title="feature_type">feature type</i></a> is invalid, the entire
4752 associated <a href="#featurevalueblock"><i
4753 title="feature_value_block">feature value block</i></a> must be ignored.
4755 <div class=example>
4756 <p>Rules that are equivalent given syntax error handling:</p>
4758 <pre>@font-feature-values Bongo {
4759 @swash { ornate: 1; }
4760 annotation { boxed: 4; } /* should be @annotation! */
4761 @swash { double-loops: 1; flowing: -1; } /* negative value */
4762 @ornaments ; /* incomplete definition */
4763 @styleset { double-W: 14; sharp-terminals: 16 1 } /* missing ; */
4764 <a href="http://www.angryalien.com/0504/shiningbunnies.html" style="text-decoration: none; border: none;">redrum</a> /* random editing mistake */
4765 }</pre>
4767 <p>The example above is equivalent to:</p>
4769 <pre>@font-feature-values Bongo {
4770 @swash { ornate: 1; }
4771 @swash { double-loops: 1; }
4772 @styleset { double-W: 14; sharp-terminals: 16 1; }
4773 }</pre>
4774 </div>
4776 <p>If multiple <a
4777 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
4778 rules are defined for a given family, the resulting values definitions are
4779 the union of the definitions contained within these rules. This allows a
4780 set of named values to be defined for a given font family globally for a
4781 site and specific additions made per-page.
4783 <div class=example>
4784 <p>Using both site-wide and per-page feature values:</p>
4786 <pre>
4787 site.css:
4789 @font-feature-values Mercury Serif {
4790 @styleset {
4791 stacked-g: 3; /* "two-storey" versions of g, a */
4792 stacked-a: 4;
4793 }
4794 }
4796 page.css:
4798 @font-feature-values Mercury Serif {
4799 @styleset {
4800 geometric-m: 7; /* alternate version of m */
4801 }
4802 }
4804 body {
4805 font-family: Mercury Serif, serif;
4807 /* enable both the use of stacked g and alternate m */
4808 font-variant-alternates: styleset(stacked-g, geometric-m);
4809 }</pre>
4810 </div>
4812 <div class=example>
4813 <p>Using a commonly named value allows authors to use a single style rule
4814 to cover a set of fonts for which the underlying selector is different
4815 for each font. If either font in the example below is found, a circled
4816 number glyph will be used:</p>
4818 <pre>@font-feature-values Taisho Gothic {
4819 @annotation { boxed: 1; circled: 4; }
4820 }
4822 @font-feature-values Otaru Kisa {
4823 @annotation { circled: 1; black-boxed: 3; }
4824 }
4826 h3.title {
4827 /* circled form defined for both fonts */
4828 font-family: Taisho Gothic, Otaru Kisa;
4829 font-variant: annotation(circled);
4830 }</pre>
4831 </div>
4833 <h4 id=multi-valued-feature-value-definitions><span class=secno>6.9.2
4834 </span>Multi-valued feature value definitions</h4>
4836 <p>Most <a href="#font-specific"><em>font specific</em></a> ‘<a
4837 href="#propdef-font-variant-alternates"><code
4838 class=property>font-variant-alternates</code></a>’ property values take
4839 a single value (e.g. ‘<a href="#swash"><code
4840 class=property>swash</code></a>’). The ‘<a
4841 href="#character-variant"><code
4842 class=property>character-variant</code></a>’ property value allows two
4843 values and ‘<a href="#styleset"><code
4844 class=property>styleset</code></a>’ allows an unlimited number.
4846 <p>For the styleset property value, multiple values indicate the style sets
4847 to be enabled. Values between 1 and 99 enable OpenType features <span
4848 class=tag>ss01</span> through <span class=tag>ss99</span>. However, the
4849 OpenType standard only officially defines <span class=tag>ss01</span>
4850 through <span class=tag>ss20</span>. For OpenType fonts, values greater
4851 than 99 or equal to 0 do not generate a syntax error when parsed but
4852 enable no OpenType features.
4854 <pre>@font-feature-values Mars Serif {
4855 @styleset {
4856 alt-g: 1; /* implies ss01 = 1 */
4857 curly-quotes: 3; /* implies ss03 = 1 */
4858 code: 4 5; /* implies ss04 = 1, ss05 = 1 */
4859 }
4861 @styleset {
4862 dumb: 125; /* >99, ignored */
4863 }
4865 @swash {
4866 swishy: 3 5; /* more than 1 value for swash, syntax error */
4867 }
4868 }
4870 p.codeblock {
4871 /* implies ss03 = 1, ss04 = 1, ss05 = 1 */
4872 font-variant-alternates: styleset(curly-quotes, code);
4873 }</pre>
4875 <p>For character-variant, a single value between 1 and 99 indicates the
4876 enabling of OpenType feature <span class=tag>cv01</span> through <span
4877 class=tag>cv99</span>. For OpenType fonts, values greater than 99 or equal
4878 to 0 are ignored but do not generate a syntax error when parsed but enable
4879 no OpenType features. When two values are listed, the first value
4880 indicates the feature used and the second the value passed for that
4881 feature. If more than two values are assigned to a given name, a syntax
4882 error occurs and the entire <a href="#featurevaluedefinition"><i
4883 title="feature_value_definition">feature value definition</i></a> is
4884 ignored.
4886 <pre>@font-feature-values MM Greek {
4887 @character-variant { alpha-2: 1 2; } /* implies cv01 = 2 */
4888 @character-variant { beta-3: 2 3; } /* implies cv02 = 3 */
4889 @character-variant { epsilon: 5 3 6; } /* more than 2 values, syntax error, definition ignored */
4890 @character-variant { gamma: 12; } /* implies cv12 = 1 */
4891 @character-variant { zeta: 20 3; } /* implies cv20 = 3 */
4892 @character-variant { zeta-2: 20 2; } /* implies cv20 = 2 */
4893 @character-variant { silly: 105; } /* >99, ignored */
4894 @character-variant { dumb: 323 3; } /* >99, ignored */
4895 }
4897 #title {
4898 /* use the third alternate beta, first alternate gamma */
4899 font-variant-alternates: character-variant(beta-3, gamma);
4900 }
4902 p {
4903 /* zeta-2 follows zeta, implies cv20 = 2 */
4904 font-variant-alternates: character-variant(zeta, zeta-2);
4905 }
4907 .special {
4908 /* zeta follows zeta-2, implies cv20 = 3 */
4909 font-variant-alternates: character-variant(zeta-2, zeta);
4910 }</pre>
4912 <div class=figure><img alt="Matching text on Byzantine seals using
4913 character variants" src=byzantineseal.png>
4914 <p class=caption>Byzantine seal text displayed with character variants
4915 </div>
4917 <div class=example>
4918 <p>In the figure above, the text in red is rendered using a font
4919 containing character variants that mimic the character forms found on a
4920 Byzantine seal from the 8th century A.D. Two lines below is the same text
4921 displayed in a font without variants. Note the two variants for U and N
4922 used on the seal.</p>
4924 <pre>@font-feature-values Athena Ruby {
4925 @character-variant {
4926 leo-B: 2 1;
4927 leo-M: 13 3;
4928 leo-alt-N: 14 1;
4929 leo-N: 14 2;
4930 leo-T: 20 1;
4931 leo-U: 21 2;
4932 leo-alt-U: 21 4;
4933 }
4934 }
4936 p {
4937 font-variant: discretionary-ligatures,
4938 character-variant(leo-B, leo-M, leo-N, leo-T, leo-U);
4939 }
4941 span.alt-N {
4942 font-variant-alternates: character-variant(leo-alt-N);
4943 }
4945 span.alt-U {
4946 font-variant-alternates: character-variant(leo-alt-U);
4947 }
4949 <p>ENO....UP͞RSTU<span class="alt-U">U</span>͞<span class="alt-U">U</span>ΚΑΙTỤẠG̣IUPNS</p>
4951 <p>LEON|ΚΑΙCONSTA|NTI<span class="alt-N">N</span>OS..|STOIBAṢ.|LIṢROM|AIO<span class="alt-N">N</span></p>
4952 </pre>
4953 </div>
4955 <h3 id=font-variant-east-asian-prop><span class=secno>6.10 </span>East
4956 Asian text rendering: the <a
4957 href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
4958 property</h3>
4960 <table class=propdef id=namefont-variant-east-asianvaluenormal-l>
4961 <tbody>
4962 <tr>
4963 <td>Name:
4965 <td><dfn
4966 id=propdef-font-variant-east-asian>font-variant-east-asian</dfn>
4968 <tr>
4969 <td>Value:
4971 <td><a href="#font-variant-east-asian-normal-value"
4972 title="normal!!font-variant-east-asian">normal</a> | [ <a
4973 href="#east-asian-variant-values"><var><east-asian-variant-values></var></a>
4974 || <a
4975 href="#east-asian-width-values"><var><east-asian-width-values></var></a>
4976 || <a href="#ruby">ruby</a> ]
4978 <tr>
4979 <td>Initial:
4981 <td>normal
4983 <tr>
4984 <td>Applies to:
4986 <td>all elements
4988 <tr>
4989 <td>Inherited:
4991 <td>yes
4993 <tr>
4994 <td>Percentages:
4996 <td>N/A
4998 <tr>
4999 <td>Media:
5001 <td>visual
5003 <tr>
5004 <td>Computed value:
5006 <td>as specified
5008 <tr>
5009 <td>Animatable:
5011 <td>no
5012 </table>
5014 <p>Allows control of glyph substitution and sizing in East Asian text.
5016 <pre
5017 class=prod><dfn id=east-asian-variant-values><var><east-asian-variant-values></var></dfn> = [ <a href="#jis78">jis78</a> | <a href="#jis83">jis83</a> | <a href="#jis90">jis90</a> | <a href="#jis04">jis04</a> | <a href="#simplified">simplified</a> | <a href="#traditional">traditional</a> ]</pre>
5019 <pre
5020 class=prod><dfn id=east-asian-width-values><var><east-asian-width-values></var></dfn> = [ <a href="#full-width">full-width</a> | <a href="#proportional-width">proportional-width</a> ]</pre>
5022 <p>Individual values have the following meanings:
5024 <dl>
5025 <dt><dfn id=font-variant-east-asian-normal-value
5026 title="normal!!font-variant-east-asian">normal</dfn>
5028 <dd>None of the features listed below are enabled.
5030 <dt><dfn id=jis78>jis78</dfn>
5032 <dd>Enables rendering of JIS78 forms (OpenType feature: <span
5033 class=tag>jp78</span>).
5034 </dl>
5036 <div class=featex><img alt="JIS78 form example" src=jp78.png></div>
5038 <dl>
5039 <dt><dfn id=jis83>jis83</dfn>
5041 <dd>Enables rendering of JIS83 forms (OpenType feature: <span
5042 class=tag>jp83</span>).
5044 <dt><dfn id=jis90>jis90</dfn>
5046 <dd>Enables rendering of JIS90 forms (OpenType feature: <span
5047 class=tag>jp90</span>).
5049 <dt><dfn id=jis04>jis04</dfn>
5051 <dd>Enables rendering of JIS2004 forms (OpenType feature: <span
5052 class=tag>jp04</span>).
5053 <p>The various JIS variants reflect the glyph forms defined in different
5054 Japanese national standards. Fonts generally include glyphs defined by
5055 the most recent national standard but it's sometimes necessary to use
5056 older variants, to match signage for example.</p>
5058 <dt><dfn id=simplified>simplified</dfn>
5060 <dd>Enables rendering of simplified forms (OpenType feature: <span
5061 class=tag>smpl</span>).
5063 <dt><dfn id=traditional>traditional</dfn>
5065 <dd>Enables rendering of traditional forms (OpenType feature: <span
5066 class=tag>trad</span>).
5067 </dl>
5069 <p>The ‘<a href="#simplified"><code
5070 class=property>simplified</code></a>’ and ‘<a
5071 href="#traditional"><code class=property>traditional</code></a>’ values
5072 allow control over the glyph forms for characters which have been
5073 simplified over time but for which the older, traditional form is still
5074 used in some contexts. The exact set of characters and glyph forms will
5075 vary to some degree by context for which a given font was designed.
5077 <div class=featex><img alt="tradtional form example" src=trad.png></div>
5079 <dl>
5080 <dt><dfn id=full-width>full-width</dfn>
5082 <dd>Enables rendering of full-width variants (OpenType feature: <span
5083 class=tag>fwid</span>).
5085 <dt><dfn id=proportional-width>proportional-width</dfn>
5087 <dd>Enables rendering of proportionally-spaced variants (OpenType feature:
5088 <span class=tag>pwid</span>).
5089 </dl>
5091 <div class=featex><img alt="proportionally spaced Japanese example"
5092 src=pwid.png></div>
5094 <dl>
5095 <dt><dfn id=ruby>ruby</dfn>
5097 <dd>Enables display of ruby variant glyphs (OpenType feature: <span
5098 class=tag>ruby</span>). Since ruby text is generally smaller than the
5099 associated body text, font designers can design special glyphs for use
5100 with ruby that are more readable than scaled down versions of the default
5101 glyphs. Only glyph selection is affected, there is no associated font
5102 scaling or other change that affects line layout. The red ruby text below
5103 is shown with default glyphs (top) and with ruby variant glyphs (bottom).
5104 Note the slight difference in stroke thickness.
5105 </dl>
5107 <div class=featex><img alt="ruby variant example" src=rubyshinkansen.png></div>
5109 <h3 id=font-variant-prop><span class=secno>6.11 </span>Overall shorthand
5110 for font rendering: the <a href="#propdef-font-variant">font-variant</a>
5111 property</h3>
5113 <table class=propdef id=namefont-variantvaluenormal-none-ltcommo>
5114 <tbody>
5115 <tr>
5116 <td>Name:
5118 <td><dfn id=propdef-font-variant
5119 title="font-variant!!property">font-variant</dfn>
5121 <tr>
5122 <td>Value:
5124 <td><a href="#font-variant-normal-value"
5125 title="normal!!font-variant">normal</a> | <a
5126 href="#font-variant-none-value" title="none!!font-variant">none</a> | [
5127 <a href="#common-lig-values"><var><common-lig-values></var></a>
5128 || <a
5129 href="#discretionary-lig-values"><var><discretionary-lig-values></var></a>
5130 || <a
5131 href="#historical-lig-values"><var><historical-lig-values></var></a>
5132 || <a
5133 href="#contextual-alt-values"><var><contextual-alt-values></var></a>
5134 || <a href="#stylistic"><var
5135 title=stylistic>stylistic(<feature-value-name>)</var></a> || <a
5136 href="#historical-forms"><var>historical-forms</var></a> || <a
5137 href="#styleset"><var
5138 title=styleset>styleset(<feature-value-name> #)</var></a> || <a
5139 href="#character-variant"><var
5140 title=character-variant>character-variant(<feature-value-name>
5141 #)</var></a> || <a href="#swash"><var
5142 title=swash>swash(<feature-value-name>)</var></a> || <a
5143 href="#ornaments"><var
5144 title=ornaments>ornaments(<feature-value-name>)</var></a> || <a
5145 href="#annotation"><var
5146 title=annotation>annotation(<feature-value-name>)</var></a> || [
5147 <a href="#small-caps"><i>small-caps</i></a> | <a
5148 href="#all-small-caps"><i>all-small-caps</i></a> | <a
5149 href="#petite-caps"><i>petite-caps</i></a> | <a
5150 href="#all-petite-caps"><i>all-petite-caps</i></a> | <a
5151 href="#unicase"><i>unicase</i></a> | <a
5152 href="#titling-caps"><i>titling-caps</i></a> ] || <a
5153 href="#numeric-figure-values"><var><numeric-figure-values></var></a>
5154 || <a
5155 href="#numeric-spacing-values"><var><numeric-spacing-values></var></a>
5156 || <a
5157 href="#numeric-fraction-values"><var><numeric-fraction-values></var></a>
5158 || <a href="#ordinal"><i>ordinal</i></a> || <a
5159 href="#slashed-zero"><i>slashed-zero</i></a> || <a
5160 href="#east-asian-variant-values"><var><east-asian-variant-values></var></a>
5161 || <a
5162 href="#east-asian-width-values"><var><east-asian-width-values></var></a>
5163 || <a href="#ruby"><i>ruby</i></a> ]
5165 <tr>
5166 <td>Initial:
5168 <td>normal
5170 <tr>
5171 <td>Applies to:
5173 <td>all elements
5175 <tr>
5176 <td>Inherited:
5178 <td>yes
5180 <tr>
5181 <td>Percentages:
5183 <td>see individual properties
5185 <tr>
5186 <td>Media:
5188 <td>visual
5190 <tr>
5191 <td>Computed value:
5193 <td>see individual properties
5195 <tr>
5196 <td>Animatable:
5198 <td>see individual properties
5199 </table>
5201 <p>The <a href="#propdef-font-variant"
5202 title="font-variant!!property">‘<code
5203 class=property>font-variant</code>’</a> property is a shorthand for all
5204 font-variant subproperties. The value <dfn id=font-variant-normal-value
5205 title="normal!!font-variant">‘<code
5206 class=property>normal</code>’</dfn> resets all subproperties of <a
5207 href="#propdef-font-variant" title="font-variant!!property">‘<code
5208 class=property>font-variant</code>’</a> to their inital value. The <dfn
5209 id=font-variant-none-value title="none!!font-variant">‘<code
5210 class=property>none</code>’</dfn> value sets ‘<a
5211 href="#propdef-font-variant-ligatures"><code
5212 class=property>font-variant-ligatures</code></a>’ to ‘<code
5213 class=property>none</code>’ and resets all other font feature properties
5214 to their initial value. Like other shorthands, using <a
5215 href="#propdef-font-variant" title="font-variant!!property">‘<code
5216 class=property>font-variant</code>’</a> resets unspecified <a
5217 href="#propdef-font-variant" title="font-variant!!property">‘<code
5218 class=property>font-variant</code>’</a> subproperties to their initial
5219 values. It does not reset the values of either ‘<a
5220 href="#propdef-font-language-override"><code
5221 class=property>font-language-override</code></a>’ or <a
5222 href="#propdef-font-feature-settings"
5223 title="font-feature-settings!!property">‘<code
5224 class=property>font-feature-settings</code>’</a>.
5226 <h3 id=font-feature-settings-prop><span class=secno>6.12 </span>Low-level
5227 font feature settings control: the <a
5228 href="#propdef-font-feature-settings">font-feature-settings</a> property</h3>
5230 <table class=propdef id=namefont-feature-settingsvaluenormal-ltf>
5231 <tbody>
5232 <tr>
5233 <td>Name:
5235 <td><dfn id=propdef-font-feature-settings
5236 title="font-feature-settings!!property">font-feature-settings</dfn>
5238 <tr>
5239 <td>Value:
5241 <td><a href="#font-feature-settings-normal-value"
5242 title="normal!!font-feature-settings">normal</a> | <a
5243 href="#feature-tag-value"><var><feature-tag-value></var></a> #
5245 <tr>
5246 <td>Initial:
5248 <td>normal
5250 <tr>
5251 <td>Applies to:
5253 <td>all elements
5255 <tr>
5256 <td>Inherited:
5258 <td>yes
5260 <tr>
5261 <td>Percentages:
5263 <td>N/A
5265 <tr>
5266 <td>Media:
5268 <td>visual
5270 <tr>
5271 <td>Computed value:
5273 <td>as specified
5275 <tr>
5276 <td>Animatable:
5278 <td>no
5279 </table>
5281 <p>This property provides low-level control over OpenType font features. It
5282 is intended as a way of providing access to font features that are not
5283 widely used but are needed for a particular use case.
5285 <p>Authors should generally use <a href="#propdef-font-variant"
5286 title="font-variant!!property">‘<code
5287 class=property>font-variant</code>’</a> and its related subproperties
5288 whenever possible and only use this property for special cases where its
5289 use is the only way of accessing a particular infrequently used font
5290 feature.
5292 <pre>/* enable small caps and use second swash alternate */
5293 font-feature-settings: "smcp", "swsh" 2;</pre>
5295 <p>A value of <dfn id=font-feature-settings-normal-value
5296 title="normal!!font-feature-settings">‘<code
5297 class=property>normal</code>’</dfn> means that no change in glyph
5298 selection or positioning occurs due to this property.
5300 <p>Feature tag values have the following syntax:
5302 <pre
5303 class=prod><dfn id=feature-tag-value><var><feature-tag-value></var></dfn> = <string> [ <integer> | on | off ]?</pre>
5305 <p>The <string> is a case-sensitive OpenType feature tag. As
5306 specified in the OpenType specification, feature tags contain four ASCII
5307 characters. Tag strings longer or shorter than four characters, or
5308 containing characters outside the U+20–7E codepoint range are invalid.
5309 Feature tags need only match a feature tag defined in the font, so they
5310 are not limited to explicitly registered OpenType features. Fonts defining
5311 custom feature tags should follow the <a
5312 href="http://www.microsoft.com/typography/otspec/featuretags.htm">tag name
5313 rules</a> defined in the OpenType specification <a
5314 href="#OPENTYPE-FEATURES"
5315 rel=biblioentry>[OPENTYPE-FEATURES]<!--{{!OPENTYPE-FEATURES}}--></a>.
5317 <p>Feature tags not present in the font are ignored; a user agent must not
5318 attempt to synthesize fallback behavior based on these feature tags. The
5319 one exception is that user agents may synthetically support the <span
5320 class=tag>kern</span> feature with fonts that contain kerning data in the
5321 form of a ‘<code class=property>kern</code>’ table but lack <span
5322 class=tag>kern</span> feature support in the ‘<code
5323 class=property>GPOS</code>’ table.
5325 <p class=note>In general, authors should use the ‘<a
5326 href="#propdef-font-kerning"><code
5327 class=property>font-kerning</code></a>’ property to explicitly enable or
5328 disable kerning since this property always affects fonts with either type
5329 of kerning data.
5331 <p>If present, a value indicates an index used for glyph selection. An
5332 <integer> value must be 0 or greater. A value of 0 indicates that
5333 the feature is disabled. For boolean features, a value of 1 enables the
5334 feature. For non-boolean features, a value of 1 or greater enables the
5335 feature and indicates the feature selection index. A value of ‘<code
5336 class=property>on</code>’ is synonymous with 1 and ‘<code
5337 class=property>off</code>’ is synonymous with 0. If the value is
5338 omitted, a value of 1 is assumed.
5340 <pre>
5341 font-feature-settings: "dlig" 1; /* dlig=1 enable discretionary ligatures */
5342 font-feature-settings: "smcp" on; /* smcp=1 enable small caps */
5343 font-feature-settings: 'c2sc'; /* c2sc=1 enable caps to small caps */
5344 font-feature-settings: "liga" off; /* liga=0 no common ligatures */
5345 font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms */
5346 font-feature-settings: "tnum" "hist"; /* invalid, need a comma-delimited list */
5347 font-feature-settings: "silly" off; /* invalid, tag too long */
5348 font-feature-settings: "PKRN"; /* PKRN=1 enable custom feature */
5349 font-feature-settings: dlig; /* invalid, tag must be a string */
5350 </pre>
5352 <p>When values greater than the range supported by the font are specified,
5353 the behavior is explicitly undefined. For boolean features, in general
5354 these will enable the feature. For non-boolean features, out of range
5355 values will in general be equivalent to a 0 value. However, in both cases
5356 the exact behavior will depend upon the way the font is designed
5357 (specifically, which type of lookup is used to define the feature).
5359 <p>Although specifically defined for OpenType feature tags, feature tags
5360 for other modern font formats that support font features may be added in
5361 the future. Where possible, features defined for other font formats should
5362 attempt to follow the pattern of registered OpenType tags.
5364 <div class=example>
5365 <p>The Japanese text below will be rendered with half-width kana
5366 characters:</p>
5368 <pre lang=ja>
5369 body { font-feature-settings: "hwid"; /* Half-width OpenType feature */ }
5371 <p>毎日<a href="http://images.google.com/images?q=%E3%82%AB%E3%83%AC%E3%83%BC" style="text-decoration: none;">カレー</a>食べてるのに、飽きない</p>
5372 </pre>
5373 </div>
5375 <h3 id=font-language-override-prop><span class=secno>6.13 </span>Font
5376 language override: the <a
5377 href="#propdef-font-language-override">font-language-override</a> property</h3>
5379 <table class=propdef id=namefont-language-overridevaluenormal-lt>
5380 <tbody>
5381 <tr>
5382 <td>Name:
5384 <td><dfn id=propdef-font-language-override>font-language-override</dfn>
5386 <tr>
5387 <td>Value:
5389 <td><a href="#font-language-override-normal-value"
5390 title="normal!!font-language-override">normal</a> | <a
5391 href="#font-language-override-string-value"><var><string></var></a>
5393 <tr>
5394 <td>Initial:
5396 <td><a href="#font-language-override-normal-value"
5397 title="normal!!font-language-override">normal</a>
5399 <tr>
5400 <td>Applies to:
5402 <td>all elements
5404 <tr>
5405 <td>Inherited:
5407 <td>yes
5409 <tr>
5410 <td>Percentages:
5412 <td>N/A
5414 <tr>
5415 <td>Media:
5417 <td>visual
5419 <tr>
5420 <td>Computed value:
5422 <td>as specified
5424 <tr>
5425 <td>Animatable:
5427 <td>no
5428 </table>
5430 <p>Normally, authors can control the use of language-specific glyph
5431 substitutions and positioning by setting the content language of an
5432 element, as <a href="#language-specific-support">described above</a>:
5434 <pre><!-- Display text using S'gaw Karen specific features -->
5435 <p lang="ksw">...</p></pre>
5437 <p>In some cases, authors may need to specify a language system that
5438 differs from the content language, for example due to the need to mimic
5439 another language's typographic traditions. The ‘<a
5440 href="#propdef-font-language-override"><code
5441 class=property>font-language-override</code></a>’ property allows
5442 authors to explicitly specify the language system of the font, overriding
5443 the language system implied by the content language.
5445 <p>Values have the following meanings:
5447 <dl>
5448 <dt><dfn id=font-language-override-normal-value
5449 title="normal!!font-language-override">normal</dfn>
5451 <dd>specifies that when rendering with OpenType fonts, the content
5452 language of the element is used to infer the OpenType language system
5454 <dt><dfn
5455 id=font-language-override-string-value><var><string></var></dfn>
5457 <dd>single three-letter case-sensitive OpenType <a
5458 href="http://www.microsoft.com/typography/otspec/languagetags.htm">language
5459 system tag</a>, specifies the OpenType language system to be used instead
5460 of the language system implied by the language of the element
5461 </dl>
5462 <!-- For this level, string represents a single language code, there's no concept of "fallback"
5463 http://www.w3.org/2013/06/07-css-minutes.html#item04 -->
5465 <p>Use of invalid OpenType language system tags must not generate a parse
5466 error but must be ignored when doing glyph selection and placement.
5468 <div class=example>
5469 <p>The <a href="http://www.un.org/en/documents/udhr/index.shtml">Universal
5470 Declaration of Human Rights</a> has been translated into a wide variety
5471 of languages. In Turkish, Article 9 of this document might be marked up
5472 as below:</p>
5474 <pre lang=tr><body lang="tr">
5476 <h4>Madde 9</h4>
5477 <p>Hiç kimse keyfi olarak tutuklanamaz, alıkonulanamaz veya sürülemez.</p>
5478 </pre>
5480 <p>Here the user agent uses the value of the ‘<code
5481 class=property>lang</code>’ attribute when rendering text and
5482 appropriately renders this text without ‘<code
5483 class=property>fi</code>’ ligatures. There is no need to use the ‘<a
5484 href="#propdef-font-language-override"><code
5485 class=property>font-language-override</code></a>’ property.</p>
5487 <p>However, a given font may lack support for a specific language. In this
5488 situation authors may need to use the typographic conventions of a
5489 related language that are supported by that font:</p>
5491 <pre lang=mk><body lang="mk"> <!-- Macedonian lang code -->
5493 body { font-language-override: "SRB"; /* Serbian OpenType language tag */ }
5495 <h4>Члeн 9</h4>
5496 <p>Никoj чoвeк нeмa дa бидe пoдлoжeн нa прoизвoлнo aпсeњe, притвoр или прoгoнувaњe.</p>
5498 </pre>
5500 <p>The Macedonian text here will be rendered using Serbian typographic
5501 conventions, with the assumption that the font specified supports
5502 Serbian.</p>
5503 </div>
5505 <p><a id=rendering-considerations></a>
5507 <h2 id=font-feature-resolution><span class=secno>7 </span>Font Feature
5508 Resolution</h2>
5510 <p>As described in the previous section, font features can be enabled in a
5511 variety of ways, either via the use of <a href="#propdef-font-variant"
5512 title="font-variant!!property">‘<code
5513 class=property>font-variant</code>’</a> or <a
5514 href="#propdef-font-feature-settings"
5515 title="font-feature-settings!!property">‘<code
5516 class=property>font-feature-settings</code>’</a> in a style rule or
5517 within an <a href="#at-font-face-rule"><code>@font-face</code></a> rule.
5518 The resolution order for the union of these settings is defined below.
5519 Features defined via CSS properties are applied on top of layout engine
5520 default features.
5522 <h3 id=default-features><span class=secno>7.1 </span>Default features</h3>
5524 <p>For OpenType fonts, user agents must enable the default features defined
5525 in the OpenType documentation for a given script and writing mode.
5526 Required ligatures, common ligatures and contextual forms must be enabled
5527 by default (OpenType features: <span class=tag>rlig, liga, clig,
5528 calt</span>), along with localized forms (OpenType feature: <span
5529 class=tag>locl</span>), and features required for proper display of
5530 composed characters and marks (OpenType features: <span class=tag>ccmp,
5531 mark, mkmk</span>). These features must always be enabled, even when the
5532 value of the <a href="#propdef-font-variant"
5533 title="font-variant!!property">‘<code
5534 class=property>font-variant</code>’</a> and <a
5535 href="#propdef-font-feature-settings"
5536 title="font-feature-settings!!property">‘<code
5537 class=property>font-feature-settings</code>’</a> properties is <span
5538 title="normal value">‘<code class=property>normal</code>’</span>.
5539 Individual features are only disabled when explicitly overridden by the
5540 author, as when ‘<a href="#propdef-font-variant-ligatures"><code
5541 class=property>font-variant-ligatures</code></a>’ is set to ‘<a
5542 href="#no-common-ligatures"><code
5543 class=property>no-common-ligatures</code></a>’. For handling complex
5544 scripts such as <a
5545 href="http://www.microsoft.com/typography/otfntdev/arabicot/features.aspx">Arabic</a>,
5546 <a
5547 href="http://www.microsoft.com/typography/otfntdev/mongolot/features.htm">Mongolian</a>
5548 or <a
5549 href="http://www.microsoft.com/typography/otfntdev/devanot/features.aspx">Devanagari</a>
5550 additional features are required. For upright text within vertical text
5551 runs, vertical alternates (OpenType feature: <span class=tag>vert</span>)
5552 must be enabled.
5554 <h3 id=feature-precedence><span class=secno>7.2 </span>Feature precedence</h3>
5556 <p>General and <a href="#font-specific"><em>font specific</em></a> font
5557 feature property settings are resolved in the order below, in ascending
5558 order of precedence. This ordering is used to construct a combined list of
5559 font features that affect a given text run.
5561 <ol>
5562 <li>Font features enabled by default, including features required for a
5563 given script.
5565 <li>If the font is defined via an <a
5566 href="#at-font-face-rule"><code>@font-face</code></a> rule, the font
5567 features implied by the font-variant descriptor in the <a
5568 href="#at-font-face-rule"><code>@font-face</code></a> rule.
5570 <li>If the font is defined via an <a
5571 href="#at-font-face-rule"><code>@font-face</code></a> rule, the font
5572 features implied by the font-feature-settings descriptor in the <a
5573 href="#at-font-face-rule"><code>@font-face</code></a> rule.
5575 <li>Font features implied by the value of the <a
5576 href="#propdef-font-variant" title="font-variant!!property">‘<code
5577 class=property>font-variant</code>’</a> property, the related <a
5578 href="#propdef-font-variant" title="font-variant!!property">‘<code
5579 class=property>font-variant</code>’</a> subproperties and any other CSS
5580 property that uses OpenType features (e.g. the ‘<a
5581 href="#propdef-font-kerning"><code
5582 class=property>font-kerning</code></a>’ property).</li>
5583 <!-- other CSS props override 'font-variant' but not 'font-feature-settings' -->
5584 <!-- http://lists.w3.org/Archives/Public/www-style/2013Aug/0110.html -->
5586 <li>Feature settings determined by properties other than <a
5587 href="#propdef-font-variant" title="font-variant!!property">‘<code
5588 class=property>font-variant</code>’</a> or <a
5589 href="#propdef-font-feature-settings"
5590 title="font-feature-settings!!property">‘<code
5591 class=property>font-feature-settings</code>’</a>. For example, setting
5592 a non-default value for the ‘<code
5593 class=property>letter-spacing</code>’ property disables common
5594 ligatures.
5596 <li>Font features implied by the value of <a
5597 href="#propdef-font-feature-settings"
5598 title="font-feature-settings!!property">‘<code
5599 class=property>font-feature-settings</code>’</a> property.
5600 </ol>
5602 <p>This ordering allows authors to set up a general set of defaults for
5603 fonts within their <a
5604 href="#at-font-face-rule"><code>@font-face</code></a> rules, then override
5605 them with property settings for specific elements. General property
5606 settings override the settings in <a
5607 href="#at-font-face-rule"><code>@font-face</code></a> rules and low-level
5608 font feature settings override <a href="#propdef-font-variant"
5609 title="font-variant!!property">‘<code
5610 class=property>font-variant</code>’</a> property settings.
5612 <p>For situations where the combined list of font feature settings contains
5613 more than one value for the same feature, the last value is used. When a
5614 font lacks support for a given underlying font feature, text is simply
5615 rendered as if that font feature was not enabled; font fallback does not
5616 occur and no attempt is made to synthesize the feature except where
5617 explicitly defined for specific properties.
5619 <h3 id=feature-precedence-examples><span class=secno>7.3 </span>Feature
5620 precedence examples</h3>
5622 <div class=example>
5623 <p>With the styles below, numbers are rendered proportionally when used
5624 within a paragraph but are shown in tabular form within tables of prices:</p>
5626 <pre>body {
5627 font-variant-numeric: proportional-nums;
5628 }
5630 table.prices td {
5631 font-variant-numeric: tabular-nums;
5632 }
5633 </pre>
5634 </div>
5636 <div class=example>
5637 <p>When the <a href="#descdef-font-variant"
5638 title="font-variant!!descriptor">font-variant</a> descriptor is used
5639 within an <a href="#at-font-face-rule"><code>@font-face</code></a> rule,
5640 it only applies to the font defined by that rule.</p>
5642 <pre>@font-face {
5643 font-family: MainText;
5644 src: url(http://example.com/font.woff);
5645 font-variant: oldstyle-nums proportional-nums styleset(1,3);
5646 }
5648 body {
5649 font-family: MainText, Helvetica;
5650 }
5652 table.prices td {
5653 font-variant-numeric: tabular-nums;
5654 }
5655 </pre>
5657 <p>In this case, old-style numerals will be used throughout but only where
5658 the font "MainText" is used. Just as in the previous example, tabular
5659 values will be used in price tables since ‘<a
5660 href="#tabular-nums"><code class=property>tabular-nums</code></a>’
5661 appears in a general style rule and its use is mutually exclusive with
5662 ‘<a href="#proportional-nums"><code
5663 class=property>proportional-nums</code></a>’. Stylistic alternate sets
5664 will only be used where MainText is used.</p>
5665 </div>
5667 <div class=example>
5668 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule can
5669 also be used to access font features in locally available fonts via the
5670 use of <code>local()</code> in the ‘<a href="#descdef-src"><code
5671 class=property>src</code></a>’ descriptor of the <a
5672 href="#at-font-face-rule"><code>@font-face</code></a> definition:</p>
5674 <pre>@font-face {
5675 font-family: BodyText;
5676 src: local("HiraMaruPro-W4");
5677 font-variant: proportional-width;
5678 font-feature-settings: "ital"; /* Latin italics within CJK text feature */
5679 }
5681 body { font-family: BodyText, serif; }
5682 </pre>
5684 <p>If available, a Japanese font "Hiragino Maru Gothic" will be used. When
5685 text rendering occurs, Japanese kana will be proportionally spaced and
5686 Latin text will be italicised. Text rendered with the fallback serif font
5687 will use default rendering properties.</p>
5688 </div>
5690 <div class=example>
5691 <p>In the example below, discretionary ligatures are enabled only for a
5692 downloadable font but are disabled within spans of class "special":</p>
5694 <pre>@font-face {
5695 font-family: main;
5696 src: url(fonts/ffmeta.woff) format("woff");
5697 font-variant: discretionary-ligatures;
5698 }
5700 body { font-family: main, Helvetica; }
5701 span.special { font-variant-ligatures: no-discretionary-ligatures; }
5702 </pre>
5704 <p>Suppose one adds a rule using ‘<code
5705 class=property>font-feature-settings</code>’ to enable discretionary
5706 ligatures:</p>
5708 <pre>body { font-family: main, Helvetica; }
5709 span { font-feature-settings: "dlig"; }
5710 span.special { font-variant-ligatures: no-discretionary-ligatures; }
5711 </pre>
5713 <p>In this case, discretionary ligatures <em>will</em> be rendered within
5714 spans of class "special". This is because both the <a
5715 href="#propdef-font-feature-settings"
5716 title="font-feature-settings!!property">‘<code
5717 class=property>font-feature-settings</code>’</a> and ‘<a
5718 href="#propdef-font-variant-ligatures"><code
5719 class=property>font-variant-ligatures</code></a>’ properties apply to
5720 these spans. Although the ‘<code class=css>no-discretionary
5721 ligatures</code>’ setting of ‘<a
5722 href="#propdef-font-variant-ligatures"><code
5723 class=property>font-variant-ligatures</code></a>’ effectively disables
5724 the OpenType <span class=tag>dlig</span> feature, because the <a
5725 href="#propdef-font-feature-settings"
5726 title="font-feature-settings!!property">‘<code
5727 class=property>font-feature-settings</code>’</a> is resolved after
5728 that, the ‘<code class=property>dlig</code>’ value reenables
5729 discretionary ligatures.</p>
5730 </div>
5732 <h2 id=object-model><span class=secno>8 </span>Object Model</h2>
5734 <p>The contents of <a href="#at-font-face-rule"><code>@font-face</code></a>
5735 and <a
5736 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
5737 rules can be accessed via the following extensions to the CSS Object
5738 Model.
5740 <h3 id=om-fontface><span class=secno>8.1 </span>The <a
5741 href="#cssfontfacerule"><code>CSSFontFaceRule</code></a> interface</h3>
5743 <p>The <dfn id=cssfontfacerule>CSSFontFaceRule</dfn> interface represents a
5744 <a href="#at-font-face-rule"><code>@font-face</code></a> rule.
5746 <pre class=idl>
5747 interface CSSFontFaceRule : CSSRule {
5748 attribute DOMString family;
5749 attribute DOMString src;
5750 attribute DOMString style;
5751 attribute DOMString weight;
5752 attribute DOMString stretch;
5753 attribute DOMString unicodeRange;
5754 attribute DOMString variant;
5755 attribute DOMString featureSettings;
5756 }</pre>
5758 <p>The DOM Level 2 Style specification <a href="#DOM-LEVEL-2-STYLE"
5759 rel=biblioentry>[DOM-LEVEL-2-STYLE]<!--{{DOM-LEVEL-2-STYLE}}--></a>
5760 defined a different variant of this rule. This definition supercedes that
5761 one.
5763 <h3 id=om-fontfeaturevalues><span class=secno>8.2 </span>The <a
5764 href="#cssfontfeaturevaluesrule"><code>CSSFontFeatureValuesRule</code></a>
5765 interface</h3>
5767 <p>The <code>CSSRule</code> interface is extended as follows:
5769 <pre class=idl>partial interface CSSRule {
5770 const unsigned short FONT_FEATURE_VALUES_RULE = 14;
5771 }</pre>
5773 <p>The <dfn id=cssfontfeaturevaluesrule>CSSFontFeatureValuesRule</dfn>
5774 interface represents a <a
5775 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
5776 rule.
5778 <pre class=idl>interface CSSFontFeatureValuesRule : CSSRule {
5779 attribute DOMString fontFamily;
5780 readonly attribute CSSFontFeatureValuesMap annotation;
5781 readonly attribute CSSFontFeatureValuesMap ornaments;
5782 readonly attribute CSSFontFeatureValuesMap stylistic;
5783 readonly attribute CSSFontFeatureValuesMap swash;
5784 readonly attribute CSSFontFeatureValuesMap characterVariant;
5785 readonly attribute CSSFontFeatureValuesMap styleset;
5786 }
5788 [MapClass(DOMString, sequence<unsigned long>)]
5789 interface CSSFontFeatureValuesMap {
5790 void set(DOMString featureValueName,
5791 (unsigned long or sequence<unsigned long>) values);
5792 }</pre>
5794 <dl class=idl-attributes>
5795 <dt><var>fontFamily</var> of type <code>DOMString</code>
5797 <dd>The list of one or more font families for which a given set of feature
5798 values is defined.
5800 <dt>value maps of type <code>CSSFontFeatureValuesMap</code>, readonly
5802 <dd>Maps of feature values associated with feature value names for a given
5803 ‘<a href="#propdef-font-variant-alternates"><code
5804 class=property>font-variant-alternates</code></a>’ value type
5805 </dl>
5807 <p>Each value map attribute of <a
5808 href="#cssfontfeaturevaluesrule"><code>CSSFontFeatureValuesRule</code></a>
5809 reflects the values defined via a corresponding <a
5810 href="#featurevalueblock"><i title="feature_value_block">feature value
5811 block</i></a>. Thus, the <var title="annotation
5812 attribute">annotation</var> attribute contains the values contained within
5813 a <code title="@annotation">@annotation</code> <a
5814 href="#featurevalueblock"><i title="feature_value_block">feature value
5815 block</i></a>, the <var title="ornaments attribute">ornaments</var>
5816 attribute contains the values contained with a <code
5817 title="@ornaments">@ornaments</code> <a href="#featurevalueblock"><i
5818 title="feature_value_block">feature value block</i></a> and so forth.
5820 <p>The <code>CSSFontFeatureValuesMap</code> interface uses the <a
5821 href="http://dev.w3.org/2006/webapi/WebIDL/#es-map-members">default map
5822 class methods</a> but the <code>set</code> method has different behavior.
5823 It takes a sequence of unsigned integers and associates it with a given
5824 <code>featureValueName</code>. The method behaves the same as the default
5825 map class method except that a single unsigned long value is treated as a
5826 sequence of a single value. The method throws an exception if an invalid
5827 number of values is passed in. If the associated <a
5828 href="#featurevalueblock"><i title="feature_value_block">feature value
5829 block</i></a> only allows a limited number of values, the <code>set</code>
5830 method throws an <code>InvalidAccessError</code> exception when the input
5831 sequence to <code>set</code> contains more than the limited number of
5832 values. See the description of <a
5833 href="#multi-valued-feature-value-definitions">multi-valued feature value
5834 definitions</a> for details on the maximum number of values allowed for a
5835 given type of <a href="#featurevalueblock"><i
5836 title="feature_value_block">feature value block</i></a>. The
5837 <code>get</code> method always returns a sequence of values, even if the
5838 sequence only contains a single value.
5840 <h2 class=no-num id=platform-props-to-css>Appendix A: Mapping platform font
5841 properties to CSS properties</h2>
5843 <p><em>This appendix is included as background for some of the problems and
5844 situations that are described in other sections. It should be viewed as
5845 informative only.</em>
5847 <p>Font properties in CSS are designed to be independent of the underlying
5848 font formats used; they can be used to specify bitmap fonts, Type1 fonts,
5849 SVG fonts in addition to the common TrueType and OpenType fonts. But there
5850 are facets of the TrueType and OpenType formats that often cause confusion
5851 for authors and present challenges to implementers on different platforms.
5853 <p>Originally developed at Apple, TrueType was designed as an outline font
5854 format for both screen and print. Microsoft joined Apple in developing the
5855 TrueType format and both platforms have supported TrueType fonts since
5856 then. Font data in the TrueType format consists of a set of tables
5857 distinguished with common four-letter tag names, each containing a
5858 specific type of data. For example, naming information, including
5859 copyright and license information, is stored in the ‘<code
5860 class=property>name</code>’ table. The <a
5861 href="#character-map"><em>character map</em></a> (‘<code
5862 class=property>cmap</code>’) table contains a mapping of character
5863 encodings to glyphs. Apple later added additional tables for supporting
5864 enhanced typographic functionality; these are now called Apple Advanced
5865 Typography, or AAT, fonts. Microsoft and Adobe developed a separate set of
5866 tables for advanced typography and called their format OpenType <a
5867 href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>.
5869 <p>In many cases the font data used under Microsoft Windows or Linux is
5870 slightly different from the data used under Apple's Mac OS X because the
5871 TrueType format allowed for explicit variation across platforms. This
5872 includes font metrics, names and <a href="#character-map"><em>character
5873 map</em></a> data.
5875 <p>Specifically, font family name data is handled differently across
5876 platforms. For TrueType and OpenType fonts these names are contained in
5877 the ‘<code class=property>name</code>’ table, in name records with
5878 name ID 1. Mulitple names can be stored for different locales, but
5879 Microsoft recommends fonts always include at least a US English version of
5880 the name. On Windows, Microsoft made the decision for backwards
5881 compatibility to limit this family name to a maximum of four faces; for
5882 larger groupings the "preferred family" (name ID 16) or "WWS family" (name
5883 ID 21) can be used. Other platforms such as OSX don't have this
5884 limitation, so the family name is used to define all possible groupings.
5886 <p>Other name table data provides names used to uniquely identify a
5887 specific face within a family. The full font name (name ID 4) and the
5888 Postscript name (name ID 6) describe a single face uniquely. For example,
5889 the bold face of the Gill Sans family has a fullname of "Gill Sans Bold"
5890 and a Postscript name of "GillSans-Bold". There can be multiple localized
5891 versions of the fullname for a given face, but the Postscript name is
5892 always a unique name made from a limited set of ASCII characters.
5894 <p>On various platforms, different names are used to search for a font. For
5895 example, with the Windows GDI CreateIndirectFont API, either a family or
5896 fullname can be used to lookup a face, while on Mac OS X the
5897 CTFontCreateWithName API call is used to lookup a given face using the
5898 fullname and Postscript name. Under Linux, the fontconfig API allows fonts
5899 to be searched using any of these names. In situations where platform
5900 API's automatically substitute other font choices, it may be necessary to
5901 verify a returned font matches a given name.
5903 <p>The weight of a given face can be determined via the usWeightClass field
5904 of the OS/2 table or inferred from the style name (name ID 2). Likewise,
5905 the width can be determined via the usWidthClass of the OS/2 table or
5906 inferred from the style name. For historical reasons related to synthetic
5907 bolding at weights 200 or lower with the Windows GDI API, font designers
5908 have sometimes skewed values in the OS/2 table to avoid these weights.
5910 <p>Rendering complex scripts that use contextual shaping such as Thai,
5911 Arabic and Devanagari requires features present only in OpenType or AAT
5912 fonts. Currently, complex script rendering is supported on Windows and
5913 Linux using OpenType font features while both OpenType and AAT font
5914 features are used under Mac OS X.
5916 <h2 class=no-num id=ch-ch-ch-changes>Changes</h2>
5918 <h3 class=no-num id=recent-changes> Changes from the <a
5919 href="http://www.w3.org/TR/2013/WD-css-fonts-3-20130711/">July 2013 CSS3
5920 Fonts Last Call Working Draft</a></h3>
5922 <p>Major changes include:
5924 <ul>
5925 <li>reorder feature precedence such that features implied by other CSS
5926 properties override ‘<code class=property>font-variant</code>’
5927 settings
5929 <li>switched examples to use .woff files
5931 <li>revised wording of font fetching algorithm
5933 <li>clarify meaning of <a href="#font-size-adjust-auto-value"
5934 title="auto!!font-size-adjust">‘<code class=property>auto</code>’</a>
5935 value for ‘<a href="#propdef-font-size-adjust"><code
5936 class=property>font-size-adjust</code></a>’
5938 <li>allow user agents to synthesize OpenType <span class=tag>kern</span>
5939 feature
5941 <li>minor editorial cleanups
5942 </ul>
5944 <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
5946 <p>I'd like to thank Tal Leming, Jonathan Kew and Christopher Slye for all
5947 their help and feedback. John Hudson was kind enough to take the time to
5948 explain the subtleties of OpenType language tags and provided the example
5949 of character variant usage for displaying text on Byzantine seals. Ken
5950 Lunde and Eric Muller provided valuable feedback on CJK OpenType features
5951 and Unicode variation selectors. The idea for supporting font features by
5952 using <a href="#propdef-font-variant"
5953 title="font-variant!!property">‘<code
5954 class=property>font-variant</code>’</a> subproperties originated with
5955 Håkon Wium Lie, Adam Twardoch and Tal Leming. Elika Etemad supplied some
5956 of the initial design ideas for the <a
5957 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
5958 rule. Thanks also to House Industries for allowing the use of Ed Interlock
5959 in the discretionary ligatures example.
5961 <p>A special thanks to Robert Bringhurst for the sublime mind expansion
5962 that is <em>The Elements of Typographic Style</em>.
5964 <h2 class=no-num id=conformance> Conformance</h2>
5966 <h3 class=no-num id=conventions> Document Conventions</h3>
5968 <p>Conformance requirements are expressed with a combination of descriptive
5969 assertions and RFC 2119 terminology. The key words “MUST”, “MUST
5970 NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
5971 “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
5972 normative parts of this document are to be interpreted as described in RFC
5973 2119. However, for readability, these words do not appear in all uppercase
5974 letters in this specification.
5976 <p>All of the text of this specification is normative except sections
5977 explicitly marked as non-normative, examples, and notes. <a
5978 href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
5980 <p>Examples in this specification are introduced with the words “for
5981 example” or are set apart from the normative text with
5982 <code>class="example"</code>, like this:
5984 <div class=example>
5985 <p>This is an example of an informative example.
5986 </div>
5988 <p>Informative notes begin with the word “Note” and are set apart from
5989 the normative text with <code>class="note"</code>, like this:
5991 <p class=note>Note, this is an informative note.
5993 <h3 class=no-num id=conformance-classes> Conformance Classes</h3>
5995 <p>Conformance to CSS Fonts Level 3 Module is defined for three conformance
5996 classes:
5998 <dl>
5999 <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
6000 sheet</dfn>
6002 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
6003 style sheet</a>.
6005 <dt><dfn id=renderer>renderer</dfn>
6007 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
6008 that interprets the semantics of a style sheet and renders documents that
6009 use them.
6011 <dt><dfn id=authoring-tool>authoring tool</dfn>
6013 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
6014 that writes a style sheet.
6015 </dl>
6017 <p>A style sheet is conformant to CSS Fonts Level 3 Module if all of its
6018 declarations that use properties defined in this module have values that
6019 are valid according to the generic CSS grammar and the individual grammars
6020 of each property as given in this module.
6022 <p>A renderer is conformant to CSS Fonts Level 3 Module if, in addition to
6023 interpreting the style sheet as defined by the appropriate specifications,
6024 it supports all the features defined by CSS Fonts Level 3 Module by
6025 parsing them correctly and rendering the document accordingly. However,
6026 the inability of a UA to correctly render a document due to limitations of
6027 the device does not make the UA non-conformant. (For example, a UA is not
6028 required to render color on a monochrome monitor.)
6030 <p>An authoring tool is conformant to CSS Fonts Level 3 Module if it writes
6031 style sheets that are syntactically correct according to the generic CSS
6032 grammar and the individual grammars of each feature in this module, and
6033 meet all other conformance requirements of style sheets as described in
6034 this module.
6036 <h3 class=no-num id=partial> Partial Implementations</h3>
6038 <p>So that authors can exploit the forward-compatible parsing rules to
6039 assign fallback values, CSS renderers <strong>must</strong> treat as
6040 invalid (and <a
6041 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
6042 appropriate</a>) any at-rules, properties, property values, keywords, and
6043 other syntactic constructs for which they have no usable level of support.
6044 In particular, user agents <strong>must not</strong> selectively ignore
6045 unsupported component values and honor supported values in a single
6046 multi-value property declaration: if any value is considered invalid (as
6047 unsupported values must be), CSS requires that the entire declaration be
6048 ignored.
6050 <h3 class=no-num id=experimental> Experimental Implementations</h3>
6052 <p>To avoid clashes with future CSS features, the CSS2.1 specification
6053 reserves a <a
6054 href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
6055 syntax</a> for proprietary and experimental extensions to CSS.
6057 <p>Prior to a specification reaching the Candidate Recommendation stage in
6058 the W3C process, all implementations of a CSS feature are considered
6059 experimental. The CSS Working Group recommends that implementations use a
6060 vendor-prefixed syntax for such features, including those in W3C Working
6061 Drafts. This avoids incompatibilities with future changes in the draft.
6063 <h3 class=no-num id=testing> Non-Experimental Implementations</h3>
6065 <p>Once a specification reaches the Candidate Recommendation stage,
6066 non-experimental implementations are possible, and implementors should
6067 release an unprefixed implementation of any CR-level feature they can
6068 demonstrate to be correctly implemented according to spec.
6070 <p>To establish and maintain the interoperability of CSS across
6071 implementations, the CSS Working Group requests that non-experimental CSS
6072 renderers submit an implementation report (and, if necessary, the
6073 testcases used for that implementation report) to the W3C before releasing
6074 an unprefixed implementation of any CSS features. Testcases submitted to
6075 W3C are subject to review and correction by the CSS Working Group.
6077 <p>Further information on submitting testcases and implementation reports
6078 can be found from on the CSS Working Group's website at <a
6079 href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
6080 Questions should be directed to the <a
6081 href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
6082 mailing list.
6084 <h2 class=no-num id=references>References</h2>
6086 <h3 class=no-num id=normative-references>Normative References</h3>
6087 <!--begin-normative-->
6088 <!-- Sorted by label -->
6090 <dl class=bibliography>
6091 <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
6092 <!---->
6094 <dt id=CHARMOD>[CHARMOD]
6096 <dd>Martin J. Dürst; et al. <a
6097 href="http://www.w3.org/TR/2005/REC-charmod-20050215/"><cite>Character
6098 Model for the World Wide Web 1.0: Fundamentals.</cite></a> 15 February
6099 2005. W3C Recommendation. URL: <a
6100 href="http://www.w3.org/TR/2005/REC-charmod-20050215/">http://www.w3.org/TR/2005/REC-charmod-20050215/</a>
6101 </dd>
6102 <!---->
6104 <dt id=CORS>[CORS]
6106 <dd>Anne van Kesteren. <a
6107 href="http://www.w3.org/TR/2013/CR-cors-20130129/"><cite>Cross-Origin
6108 Resource Sharing.</cite></a> 29 January 2013. W3C Candidate
6109 Recommendation. (Work in progress.) URL: <a
6110 href="http://www.w3.org/TR/2013/CR-cors-20130129/">http://www.w3.org/TR/2013/CR-cors-20130129/</a>
6111 </dd>
6112 <!---->
6114 <dt id=CSS21>[CSS21]
6116 <dd>Bert Bos; et al. <a
6117 href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
6118 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
6119 2011. W3C Recommendation. URL: <a
6120 href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
6121 </dd>
6122 <!---->
6124 <dt id=CSS3VAL>[CSS3VAL]
6126 <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
6127 href="http://www.w3.org/TR/2013/CR-css3-values-20130730/"><cite>CSS
6128 Values and Units Module Level 3.</cite></a> 30 July 2013. W3C Candidate
6129 Recommendation. (Work in progress.) URL: <a
6130 href="http://www.w3.org/TR/2013/CR-css3-values-20130730/">http://www.w3.org/TR/2013/CR-css3-values-20130730/</a>
6131 </dd>
6132 <!---->
6134 <dt id=HTML5>[HTML5]
6136 <dd>Robin Berjon; et al. <a
6137 href="http://www.w3.org/TR/2013/CR-html5-20130806/"><cite>HTML5.</cite></a>
6138 6 August 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a
6139 href="http://www.w3.org/TR/2013/CR-html5-20130806/">http://www.w3.org/TR/2013/CR-html5-20130806/</a>
6140 </dd>
6141 <!---->
6143 <dt id=OPEN-FONT-FORMAT>[OPEN-FONT-FORMAT]
6145 <dd><a
6146 href="http://www.iso.org/iso/home/store/catalogue_ics/catalogue_detail_ics.htm?csnumber=52136"><cite>Information
6147 technology — Coding of audio-visual objects — Part 22: Open Font
6148 Format.</cite></a> International Organization for Standardization.
6149 ISO/IEC 14496-22:2009. URL: <a
6150 href="http://www.iso.org/iso/home/store/catalogue_ics/catalogue_detail_ics.htm?csnumber=52136">http://www.iso.org/iso/home/store/catalogue_ics/catalogue_detail_ics.htm?csnumber=52136</a>
6151 </dd>
6152 <!---->
6154 <dt id=OPENTYPE>[OPENTYPE]
6156 <dd><a
6157 href="http://www.microsoft.com/typography/otspec/default.htm"><cite>OpenType
6158 specification.</cite></a> Microsoft. URL: <a
6159 href="http://www.microsoft.com/typography/otspec/default.htm">http://www.microsoft.com/typography/otspec/default.htm</a>
6160 </dd>
6161 <!---->
6163 <dt id=OPENTYPE-FEATURES>[OPENTYPE-FEATURES]
6165 <dd><a
6166 href="http://www.microsoft.com/typography/otspec/featurelist.htm"><cite>OpenType
6167 feature registry.</cite></a> Microsoft. URL: <a
6168 href="http://www.microsoft.com/typography/otspec/featurelist.htm">http://www.microsoft.com/typography/otspec/featurelist.htm</a>
6169 </dd>
6170 <!---->
6172 <dt id=RFC2119>[RFC2119]
6174 <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
6175 words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
6176 RFC 2119. URL: <a
6177 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
6178 </dd>
6179 <!---->
6181 <dt id=UAX15>[UAX15]
6183 <dd>Mark Davis; Ken Whistler. <a
6184 href="http://www.unicode.org/reports/tr15/"><cite>Unicode Normalization
6185 Forms.</cite></a> 31 August 2012. Unicode Standard Annex #15. URL: <a
6186 href="http://www.unicode.org/reports/tr15/">http://www.unicode.org/reports/tr15/</a>
6187 </dd>
6188 <!---->
6190 <dt id=UAX29>[UAX29]
6192 <dd>Mark Davis. <a
6193 href="http://www.unicode.org/reports/tr29/"><cite>Unicode Text
6194 Segmentation.</cite></a> 12 September 2012. Unicode Standard Annex #29.
6195 URL: <a
6196 href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a>
6197 </dd>
6198 <!---->
6200 <dt id=UNICODE6>[UNICODE6]
6202 <dd>The Unicode Consortium. <a
6203 href="http://www.unicode.org/versions/Unicode6.2.0/"><cite>The Unicode
6204 Standard, Version 6.2.0.</cite></a> Defined by: The Unicode Standard,
6205 Version 6.2.0 URL: <a
6206 href="http://www.unicode.org/versions/Unicode6.2.0/">http://www.unicode.org/versions/Unicode6.2.0/</a>
6207 </dd>
6208 <!---->
6209 </dl>
6210 <!--end-normative-->
6211 <!--{{!CSS21}}-->
6212 <!--{{!CSS3VAL}}-->
6213 <!--{{!OPENTYPE}}-->
6214 <!--{{!OPENTYPE-FEATURES}}-->
6215 <!--{{!OPEN-FONT-FORMAT}}-->
6216 <!--{{!UNICODE6}}-->
6217 <!--{{!UAX15}}-->
6218 <!--{{!UAX29}}-->
6219 <!--{{!CORS}}-->
6220 <!--{{!HTML5}}-->
6221 <!--{{!CHARMOD}}-->
6223 <h3 class=no-num id=other-references>Other References</h3>
6224 <!--begin-informative-->
6225 <!-- Sorted by label -->
6227 <dl class=bibliography>
6228 <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
6229 <!---->
6231 <dt id=AAT-FEATURES>[AAT-FEATURES]
6233 <dd><a href="http://developer.apple.com/fonts/registry/"><cite>Apple
6234 Advanced Typography font feature registry.</cite></a> Apple. URL: <a
6235 href="http://developer.apple.com/fonts/registry/">http://developer.apple.com/fonts/registry/</a>
6236 </dd>
6237 <!---->
6239 <dt id=ARABIC-TYPO>[ARABIC-TYPO]
6241 <dd>Huda Smitshuijzen AbiFares. <cite>Arabic Typography: A Comprehensive
6242 Sourcebook.</cite> Saqi Books. 2001. ISBN 0-86356-347-3.</dd>
6243 <!---->
6245 <dt id=CHARMOD-NORM>[CHARMOD-NORM]
6247 <dd>François Yergeau; et al. <a
6248 href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/"><cite>Character
6249 Model for the World Wide Web 1.0: Normalization.</cite></a> 1 May 2012.
6250 W3C Working Draft. (Work in progress.) URL: <a
6251 href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/">http://www.w3.org/TR/2012/WD-charmod-norm-20120501/</a>
6252 </dd>
6253 <!---->
6255 <dt id=CJKV-INFO-PROCESSING>[CJKV-INFO-PROCESSING]
6257 <dd>Ken Lunde. <cite>CJKV Information Processing, Second Edition.</cite>
6258 O'Reilly Media, Inc. 2009. ISBN 0-596-51447-1.</dd>
6259 <!---->
6261 <dt id=CSS3-CONDITIONAL>[CSS3-CONDITIONAL]
6263 <dd>L. David Baron. <a
6264 href="http://www.w3.org/TR/2013/CR-css3-conditional-20130404/"><cite>CSS
6265 Conditional Rules Module Level 3.</cite></a> 4 April 2013. W3C Candidate
6266 Recommendation. (Work in progress.) URL: <a
6267 href="http://www.w3.org/TR/2013/CR-css3-conditional-20130404/">http://www.w3.org/TR/2013/CR-css3-conditional-20130404/</a>
6268 </dd>
6269 <!---->
6271 <dt id=CSS3TEXT>[CSS3TEXT]
6273 <dd>Elika J. Etemad; Koji Ishii. <a
6274 href="http://www.w3.org/TR/2012/WD-css3-text-20121113/"><cite>CSS Text
6275 Module Level 3.</cite></a> 13 November 2012. W3C Working Draft. (Work in
6276 progress.) URL: <a
6277 href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">http://www.w3.org/TR/2012/WD-css3-text-20121113/</a>
6278 </dd>
6279 <!---->
6281 <dt id=DIGITAL-TYPOGRAPHY>[DIGITAL-TYPOGRAPHY]
6283 <dd>Richard Rubinstein. <cite>Digital Typography, An Introduction to Type
6284 and Composition for Computer System Design.</cite> Addison-Wesley. 1988.
6285 ISBN 0-201-17633-5.</dd>
6286 <!---->
6288 <dt id=DOM-LEVEL-2-STYLE>[DOM-LEVEL-2-STYLE]
6290 <dd>Chris Wilson; Philippe Le Hégaret; Vidur Apparao. <a
6291 href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/"><cite>Document
6292 Object Model (DOM) Level 2 Style Specification.</cite></a> 13 November
6293 2000. W3C Recommendation. URL: <a
6294 href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/">http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/</a>
6295 </dd>
6296 <!---->
6298 <dt id=ELEMTYPO>[ELEMTYPO]
6300 <dd>Robert Bringhurst. <cite>The Elements of Typographic Style, Version
6301 4.</cite> Hartley & Marks. 2013. ISBN 0-88179-212-8.</dd>
6302 <!---->
6304 <dt id=LANGCULTTYPE>[LANGCULTTYPE]
6306 <dd>John D. Berry, Ed. <cite>Language Culture Type.</cite> Graphis. 2001.
6307 ISBN 1-932026-01-0.</dd>
6308 <!---->
6310 <dt id=OPENTYPE-FONT-GUIDE>[OPENTYPE-FONT-GUIDE]
6312 <dd><a
6313 href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf"><cite>OpenType
6314 User Guide.</cite></a> FontShop International. URL: <a
6315 href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf">https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf</a>
6316 </dd>
6317 <!---->
6319 <dt id=RASTER-TRAGEDY>[RASTER-TRAGEDY]
6321 <dd>Beat Stamm. <a href="http://www.rastertragedy.com/"><cite>The Raster
6322 Tragedy at Low-Resolution Revisited.</cite></a> 7 December 2011. URL: <a
6323 href="http://www.rastertragedy.com/">http://www.rastertragedy.com/</a></dd>
6324 <!---->
6326 <dt id=WINDOWS-GLYPH-PROC>[WINDOWS-GLYPH-PROC]
6328 <dd>John Hudson. <a
6329 href="http://www.microsoft.com/typography/developers/opentype/default.htm"><cite>Windows
6330 Glyph Processing.</cite></a> Microsoft Typogrraphy. URL: <a
6331 href="http://www.microsoft.com/typography/developers/opentype/default.htm">http://www.microsoft.com/typography/developers/opentype/default.htm</a>
6332 </dd>
6333 <!---->
6334 </dl>
6335 <!--end-informative-->
6336 <!--{{ARABIC-TYPO}}-->
6337 <!--{{CJKV-INFO-PROCESSING}}-->
6338 <!--{{DIGITAL-TYPOGRAPHY}}-->
6339 <!--{{DOM-LEVEL-2-STYLE}}-->
6340 <!--{{ELEMTYPO}}-->
6341 <!--{{LANGCULTTYPE}}-->
6342 <!--{{OPENTYPE-FONT-GUIDE}}-->
6343 <!--{{RASTER-TRAGEDY}}-->
6344 <!--{{WINDOWS-GLYPH-PROC}}-->
6345 <!--{{CHARMOD-NORM}}-->
6346 <!--{{AAT-FEATURES}}-->
6347 <!--{{CSS3-CONDITIONAL}}-->
6348 <!--{{CSS3TEXT}}-->
6350 <h2 class=no-num id=index>Index</h2>
6351 <!--begin-index-->
6353 <ul class=indexlist>
6354 <li>100...900 weight values, <a href="#font-weight-numeric-values"
6355 title="100...900 weight values"><strong>3.2</strong></a>
6357 <li><var><absolute-size></var>, <a href="#absolute-size-value"
6358 title="<absolute-size>"><strong>3.5</strong></a>
6360 <li><var><common-lig-values></var>, <a href="#common-lig-values"
6361 title="<common-lig-values>"><strong>6.4</strong></a>
6363 <li><var><contextual-alt-values></var>, <a
6364 href="#contextual-alt-values"
6365 title="<contextual-alt-values>"><strong>6.4</strong></a>
6367 <li><var><discretionary-lig-values></var>, <a
6368 href="#discretionary-lig-values"
6369 title="<discretionary-lig-values>"><strong>6.4</strong></a>
6371 <li><var><east-asian-variant-values></var>, <a
6372 href="#east-asian-variant-values"
6373 title="<east-asian-variant-values>"><strong>6.10</strong></a>
6375 <li><var><east-asian-width-values></var>, <a
6376 href="#east-asian-width-values"
6377 title="<east-asian-width-values>"><strong>6.10</strong></a>
6379 <li><var><family-name></var>, <a href="#family-name-value"
6380 title="<family-name>"><strong>3.1</strong></a>
6382 <li><var><feature-tag-value></var>, <a href="#feature-tag-value"
6383 title="<feature-tag-value>"><strong>6.12</strong></a>
6385 <li><var><font-face-name></var>, <a href="#font-face-name-value"
6386 title="<font-face-name>"><strong>4.3</strong></a>
6388 <li><var><font-variant-css21></var>, <a
6389 href="#font-variant-css21-values"
6390 title="<font-variant-css21>"><strong>3.7</strong></a>
6392 <li><var><generic-family></var>, <a href="#generic-family-value"
6393 title="<generic-family>"><strong>3.1</strong></a>
6395 <li><var><historical-lig-values></var>, <a
6396 href="#historical-lig-values"
6397 title="<historical-lig-values>"><strong>6.4</strong></a>
6399 <li><var><length></var>, <a href="#length-size-value"
6400 title="<length>"><strong>3.5</strong></a>
6402 <li><var><number></var>, <a href="#aspect-ratio-value"
6403 title="<number>"><strong>3.6</strong></a>
6405 <li><var><numeric-figure-values></var>, <a
6406 href="#numeric-figure-values"
6407 title="<numeric-figure-values>"><strong>6.7</strong></a>
6409 <li><var><numeric-fraction-values></var>, <a
6410 href="#numeric-fraction-values"
6411 title="<numeric-fraction-values>"><strong>6.7</strong></a>
6413 <li><var><numeric-spacing-values></var>, <a
6414 href="#numeric-spacing-values"
6415 title="<numeric-spacing-values>"><strong>6.7</strong></a>
6417 <li><var><percentage></var>, <a href="#percentage-size-value"
6418 title="<percentage>"><strong>3.5</strong></a>
6420 <li><var><relative-size></var>, <a href="#relative-size-value"
6421 title="<relative-size>"><strong>3.5</strong></a>
6423 <li><var><string></var>, <a
6424 href="#font-language-override-string-value"
6425 title="<string>"><strong>6.13</strong></a>
6427 <li><var><urange></var>, <a href="#urange-value"
6428 title="<urange>"><strong>4.5</strong></a>
6430 <li><code>@font-face</code>, <a href="#at-font-face-rule"
6431 title="@font-face"><strong>4.1</strong></a>
6433 <li><code>@font-feature-values</code>, <a
6434 href="#at-font-feature-values-rule"
6435 title="@font-feature-values"><strong>6.9</strong></a>
6437 <li>all-petite-caps, <a href="#all-petite-caps"
6438 title=all-petite-caps><strong>6.6</strong></a>
6440 <li>all-small-caps, <a href="#all-small-caps"
6441 title=all-small-caps><strong>6.6</strong></a>
6443 <li>annotation, <a href="#annotation"
6444 title=annotation><strong>6.8</strong></a>
6446 <li>aspect value, <a href="#aspect-value0" title="aspect
6447 value"><strong>3.6</strong></a>
6449 <li>authoring tool, <a href="#authoring-tool" title="authoring
6450 tool"><strong>#</strong></a>
6452 <li>auto
6453 <ul>
6454 <li>font-kerning, <a href="#font-kerning-auto-value" title="auto,
6455 font-kerning"><strong>6.3</strong></a>
6457 <li>font-size-adjust, <a href="#font-size-adjust-auto-value"
6458 title="auto, font-size-adjust"><strong>3.6</strong></a>
6459 </ul>
6461 <li>bold, <a href="#bold" title=bold><strong>3.2</strong></a>
6463 <li>bolder, <a href="#bolder" title=bolder><strong>3.2</strong></a>
6465 <li>character map, <a href="#character-map" title="character
6466 map"><strong>5.2</strong></a>
6468 <li>character-variant, <a href="#character-variant"
6469 title=character-variant><strong>6.8</strong></a>
6471 <li>common-ligatures, <a href="#common-ligatures"
6472 title=common-ligatures><strong>6.4</strong></a>
6474 <li>composite face, <a href="#composite-face" title="composite
6475 face"><strong>5.2</strong></a>
6477 <li>condensed, <a href="#condensed"
6478 title=condensed><strong>3.3</strong></a>
6480 <li>contextual, <a href="#contextual"
6481 title=contextual><strong>6.4</strong></a>
6483 <li>CSSFontFaceRule, <a href="#cssfontfacerule"
6484 title=CSSFontFaceRule><strong>8.1</strong></a>
6486 <li>CSSFontFeatureValuesRule, <a href="#cssfontfeaturevaluesrule"
6487 title=CSSFontFeatureValuesRule><strong>8.2</strong></a>
6489 <li>cursive, definition of, <a href="#cursive0" title="cursive, definition
6490 of"><strong>#</strong></a>
6492 <li>default face, <a href="#default-face" title="default
6493 face"><strong>5.2</strong></a>
6495 <li>descriptor_declaration, <a href="#descriptordeclaration"
6496 title="descriptor_declaration"><strong>4.1</strong></a>
6498 <li>diagonal-fractions, <a href="#diagonal-fractions"
6499 title=diagonal-fractions><strong>6.7</strong></a>
6501 <li>discretionary-ligatures, <a href="#discretionary-ligatures"
6502 title=discretionary-ligatures><strong>6.4</strong></a>
6504 <li>effective character map, <a href="#effective-character-map"
6505 title="effective character map"><strong>4.5</strong></a>
6507 <li>expanded, <a href="#expanded" title=expanded><strong>3.3</strong></a>
6509 <li>extra-condensed, <a href="#extra-condensed"
6510 title=extra-condensed><strong>3.3</strong></a>
6512 <li>extra-expanded, <a href="#extra-expanded"
6513 title=extra-expanded><strong>3.3</strong></a>
6515 <li>fantasy, definition of, <a href="#fantasy0" title="fantasy, definition
6516 of"><strong>#</strong></a>
6518 <li>feature_type, <a href="#featuretype"
6519 title="feature_type"><strong>6.9.1</strong></a>
6521 <li>feature_value_block, <a href="#featurevalueblock"
6522 title="feature_value_block"><strong>6.9.1</strong></a>
6524 <li>feature_value_definition, <a href="#featurevaluedefinition"
6525 title="feature_value_definition"><strong>6.9.1</strong></a>
6527 <li>first available font, <a href="#first-available-font" title="first
6528 available font"><strong>5.2</strong></a>
6530 <li>font, <a href="#propdef-font" title=font><strong>3.7</strong></a>
6532 <li>font specific, <a href="#font-specific" title="font
6533 specific"><strong>6.8</strong></a>
6535 <li>font-family
6536 <ul>
6537 <li>descriptor, <a href="#descdef-font-family" title="font-family,
6538 descriptor"><strong>4.2</strong></a>
6540 <li>property, <a href="#propdef-font-family" title="font-family,
6541 property"><strong>3.1</strong></a>
6542 </ul>
6544 <li>font-feature-settings
6545 <ul>
6546 <li>descriptor, <a href="#descdef-font-feature-settings"
6547 title="font-feature-settings, descriptor"><strong>4.7</strong></a>
6549 <li>property, <a href="#propdef-font-feature-settings"
6550 title="font-feature-settings, property"><strong>6.12</strong></a>
6551 </ul>
6553 <li>font-kerning, <a href="#propdef-font-kerning"
6554 title=font-kerning><strong>6.3</strong></a>
6556 <li>font-language-override, <a href="#propdef-font-language-override"
6557 title=font-language-override><strong>6.13</strong></a>
6559 <li>font-size, <a href="#propdef-font-size"
6560 title=font-size><strong>3.5</strong></a>
6562 <li>font-size-adjust, <a href="#propdef-font-size-adjust"
6563 title=font-size-adjust><strong>3.6</strong></a>
6565 <li>font-stretch
6566 <ul>
6567 <li>descriptor, <a href="#descdef-font-stretch" title="font-stretch,
6568 descriptor"><strong>4.4</strong></a>
6570 <li>property, <a href="#propdef-font-stretch" title="font-stretch,
6571 property"><strong>3.3</strong></a>
6572 </ul>
6574 <li>font-style
6575 <ul>
6576 <li>descriptor, <a href="#descdef-font-style" title="font-style,
6577 descriptor"><strong>4.4</strong></a>
6579 <li>property, <a href="#propdef-font-style" title="font-style,
6580 property"><strong>3.4</strong></a>
6581 </ul>
6583 <li>font-synthesis, <a href="#propdef-font-synthesis"
6584 title=font-synthesis><strong>3.8</strong></a>
6586 <li>font-variant
6587 <ul>
6588 <li>descriptor, <a href="#descdef-font-variant" title="font-variant,
6589 descriptor"><strong>4.7</strong></a>
6591 <li>property, <a href="#propdef-font-variant" title="font-variant,
6592 property"><strong>6.11</strong></a>
6593 </ul>
6595 <li>font-variant-alternates, <a href="#propdef-font-variant-alternates"
6596 title=font-variant-alternates><strong>6.8</strong></a>
6598 <li>font-variant-caps, <a href="#propdef-font-variant-caps"
6599 title=font-variant-caps><strong>6.6</strong></a>
6601 <li>font-variant-east-asian, <a href="#propdef-font-variant-east-asian"
6602 title=font-variant-east-asian><strong>6.10</strong></a>
6604 <li>font-variant-ligatures, <a href="#propdef-font-variant-ligatures"
6605 title=font-variant-ligatures><strong>6.4</strong></a>
6607 <li>font-variant-numeric, <a href="#propdef-font-variant-numeric"
6608 title=font-variant-numeric><strong>6.7</strong></a>
6610 <li>font-variant-position, <a href="#propdef-font-variant-position"
6611 title=font-variant-position><strong>6.5</strong></a>
6613 <li>font-weight
6614 <ul>
6615 <li>descriptor, <a href="#descdef-font-weight" title="font-weight,
6616 descriptor"><strong>4.4</strong></a>
6618 <li>property, <a href="#propdef-font-weight" title="font-weight,
6619 property"><strong>3.2</strong></a>
6620 </ul>
6622 <li>font_face_rule, <a href="#fontfacerule"
6623 title="font_face_rule"><strong>4.1</strong></a>
6625 <li>FONT_FACE_SYM, <a href="#fontfacesym"
6626 title="FONT_FACE_SYM"><strong>4.1</strong></a>
6628 <li>font_family_name, <a href="#fontfamilyname"
6629 title="font_family_name"><strong>6.9.1</strong></a>
6631 <li>font_family_name_list, <a href="#fontfamilynamelist"
6632 title="font_family_name_list"><strong>6.9.1</strong></a>
6634 <li>font_feature_values_rule, <a href="#fontfeaturevaluesrule"
6635 title="font_feature_values_rule"><strong>6.9.1</strong></a>
6637 <li>FONT_FEATURE_VALUES_SYM, <a href="#fontfeaturevaluessym"
6638 title="FONT_FEATURE_VALUES_SYM"><strong>6.9.1</strong></a>
6640 <li>full-width, <a href="#full-width"
6641 title=full-width><strong>6.10</strong></a>
6643 <li>historical-forms, <a href="#historical-forms"
6644 title=historical-forms><strong>6.8</strong></a>
6646 <li>historical-ligatures, <a href="#historical-ligatures"
6647 title=historical-ligatures><strong>6.4</strong></a>
6649 <li>italic, <a href="#italic" title=italic><strong>3.4</strong></a>
6651 <li>jis04, <a href="#jis04" title=jis04><strong>6.10</strong></a>
6653 <li>jis78, <a href="#jis78" title=jis78><strong>6.10</strong></a>
6655 <li>jis83, <a href="#jis83" title=jis83><strong>6.10</strong></a>
6657 <li>jis90, <a href="#jis90" title=jis90><strong>6.10</strong></a>
6659 <li>lighter, <a href="#lighter" title=lighter><strong>3.2</strong></a>
6661 <li>lining-nums, <a href="#lining-nums"
6662 title=lining-nums><strong>6.7</strong></a>
6664 <li>monospace, definition of, <a href="#monospace0" title="monospace,
6665 definition of"><strong>#</strong></a>
6667 <li>no-common-ligatures, <a href="#no-common-ligatures"
6668 title=no-common-ligatures><strong>6.4</strong></a>
6670 <li>no-contextual, <a href="#no-contextual"
6671 title=no-contextual><strong>6.4</strong></a>
6673 <li>no-discretionary-ligatures, <a href="#no-discretionary-ligatures"
6674 title=no-discretionary-ligatures><strong>6.4</strong></a>
6676 <li>no-historical-ligatures, <a href="#no-historical-ligatures"
6677 title=no-historical-ligatures><strong>6.4</strong></a>
6679 <li>none
6680 <ul>
6681 <li>font-kerning, <a href="#font-kerning-none-value" title="none,
6682 font-kerning"><strong>6.3</strong></a>
6684 <li>font-size-adjust, <a href="#font-size-adjust-none-value"
6685 title="none, font-size-adjust"><strong>3.6</strong></a>
6687 <li>font-variant, <a href="#font-variant-none-value" title="none,
6688 font-variant"><strong>6.11</strong></a>
6690 <li>font-variant-ligatures, <a href="#font-variant-ligatures-none-value"
6691 title="none, font-variant-ligatures"><strong>6.4</strong></a>
6692 </ul>
6694 <li>normal
6695 <ul>
6696 <li>font-feature-settings, <a href="#font-feature-settings-normal-value"
6697 title="normal, font-feature-settings"><strong>6.12</strong></a>
6699 <li>font-kerning, <a href="#font-kerning-normal-value" title="normal,
6700 font-kerning"><strong>6.3</strong></a>
6702 <li>font-language-override, <a
6703 href="#font-language-override-normal-value" title="normal,
6704 font-language-override"><strong>6.13</strong></a>
6706 <li>font-stretch, <a href="#font-stretch-normal-value" title="normal,
6707 font-stretch"><strong>3.3</strong></a>
6709 <li>font-style, <a href="#font-style-normal-value" title="normal,
6710 font-style"><strong>3.4</strong></a>
6712 <li>font-variant, <a href="#font-variant-normal-value" title="normal,
6713 font-variant"><strong>6.11</strong></a>
6715 <li>font-variant-alternates, <a
6716 href="#font-variant-alternates-normal-value" title="normal,
6717 font-variant-alternates"><strong>6.8</strong></a>
6719 <li>font-variant-caps, <a href="#font-variant-caps-normal-value"
6720 title="normal, font-variant-caps"><strong>6.6</strong></a>
6722 <li>font-variant-east-asian, <a
6723 href="#font-variant-east-asian-normal-value" title="normal,
6724 font-variant-east-asian"><strong>6.10</strong></a>
6726 <li>font-variant-ligatures, <a
6727 href="#font-variant-ligatures-normal-value" title="normal,
6728 font-variant-ligatures"><strong>6.4</strong></a>
6730 <li>font-variant-numeric, <a href="#font-variant-numeric-normal-value"
6731 title="normal, font-variant-numeric"><strong>6.7</strong></a>
6733 <li>font-variant-position, <a href="#font-variant-position-normal-value"
6734 title="normal, font-variant-position"><strong>6.5</strong></a>
6736 <li>font-weight, <a href="#font-weight-normal-value" title="normal,
6737 font-weight"><strong>3.2</strong></a>
6738 </ul>
6740 <li>oblique, <a href="#oblique" title=oblique><strong>3.4</strong></a>
6742 <li>oldstyle-nums, <a href="#oldstyle-nums"
6743 title=oldstyle-nums><strong>6.7</strong></a>
6745 <li>ordinal, <a href="#ordinal" title=ordinal><strong>6.7</strong></a>
6747 <li>ornaments, <a href="#ornaments"
6748 title=ornaments><strong>6.8</strong></a>
6750 <li>petite-caps, <a href="#petite-caps"
6751 title=petite-caps><strong>6.6</strong></a>
6753 <li>proportional-nums, <a href="#proportional-nums"
6754 title=proportional-nums><strong>6.7</strong></a>
6756 <li>proportional-width, <a href="#proportional-width"
6757 title=proportional-width><strong>6.10</strong></a>
6759 <li>renderer, <a href="#renderer" title=renderer><strong>#</strong></a>
6761 <li>ruby, <a href="#ruby" title=ruby><strong>6.10</strong></a>
6763 <li>sans-serif, definition of, <a href="#sans-serif0" title="sans-serif,
6764 definition of"><strong>#</strong></a>
6766 <li>semi-condensed, <a href="#semi-condensed-"
6767 title=semi-condensed><strong>3.3</strong></a>
6769 <li>semi-expanded, <a href="#semi-expanded"
6770 title=semi-expanded><strong>3.3</strong></a>
6772 <li>serif, definition of, <a href="#serif0" title="serif, definition
6773 of"><strong>#</strong></a>
6775 <li>simplified, <a href="#simplified"
6776 title=simplified><strong>6.10</strong></a>
6778 <li>slashed-zero, <a href="#slashed-zero"
6779 title=slashed-zero><strong>6.7</strong></a>
6781 <li>small-caps, <a href="#small-caps"
6782 title=small-caps><strong>6.6</strong></a>
6784 <li>src, <a href="#descdef-src" title=src><strong>4.3</strong></a>
6786 <li>stacked-fractions, <a href="#stacked-fractions"
6787 title=stacked-fractions><strong>6.7</strong></a>
6789 <li>style sheet
6790 <ul>
6791 <li>as conformance class, <a href="#style-sheet" title="style sheet, as
6792 conformance class"><strong>#</strong></a>
6793 </ul>
6795 <li>styleset, <a href="#styleset" title=styleset><strong>6.8</strong></a>
6797 <li>stylistic, <a href="#stylistic"
6798 title=stylistic><strong>6.8</strong></a>
6800 <li>sub, <a href="#sub" title=sub><strong>6.5</strong></a>
6802 <li>super, <a href="#super" title=super><strong>6.5</strong></a>
6804 <li>support, <a href="#support" title=support><strong>5.2</strong></a>
6806 <li>swash, <a href="#swash" title=swash><strong>6.8</strong></a>
6808 <li>system font fallback, <a href="#system-font-fallback" title="system
6809 font fallback"><strong>5.2</strong></a>
6811 <li>tabular-nums, <a href="#tabular-nums"
6812 title=tabular-nums><strong>6.7</strong></a>
6814 <li>titling-caps, <a href="#titling-caps"
6815 title=titling-caps><strong>6.6</strong></a>
6817 <li>traditional, <a href="#traditional"
6818 title=traditional><strong>6.10</strong></a>
6820 <li>ultra-condensed, <a href="#ultra-condensed"
6821 title=ultra-condensed><strong>3.3</strong></a>
6823 <li>ultra-expanded, <a href="#ultra-expanded"
6824 title=ultra-expanded><strong>3.3</strong></a>
6826 <li>unicase, <a href="#unicase" title=unicase><strong>6.6</strong></a>
6828 <li>unicode-range, <a href="#descdef-unicode-range"
6829 title=unicode-range><strong>4.5</strong></a>
6831 <li>weight, <a href="#weight" title=weight><strong>2</strong></a>
6833 <li>width, <a href="#width" title=width><strong>2</strong></a>
6834 </ul>
6835 <!--end-index-->
6837 <h2 class=no-num id=property-index>Property index</h2>
6838 <!--begin-properties-->
6840 <table class=proptable>
6841 <thead>
6842 <tr>
6843 <th>Property
6845 <th>Values
6847 <th>Initial
6849 <th>Applies to
6851 <th>Inh.
6853 <th>Percentages
6855 <th>Media
6857 <tbody>
6858 <tr>
6859 <th><a class=property href="#propdef-font">font</a>
6861 <td>[ [ <‘font-style’> || <font-variant-css21> ||
6862 <‘font-weight’> || <‘font-stretch’ ]?
6863 <‘font-size’> [ / <‘line-height’> ]?
6864 <‘font-family’> ] | caption | icon | menu | message-box |
6865 small-caption | status-bar
6867 <td>see individual properties
6869 <td>all elements
6871 <td>yes
6873 <td>see individual properties
6875 <td>visual
6877 <tr>
6878 <th><span class=property>font-family</span>
6880 <td>[ <family-name> | <generic-family> ] #
6882 <td>depends on user agent
6884 <td>all elements
6886 <td>yes
6888 <td>N/A
6890 <td>visual
6892 <tr>
6893 <th><span class=property>font-feature-settings</span>
6895 <td>normal | <feature-tag-value> #
6897 <td>normal
6899 <td>all elements
6901 <td>yes
6903 <td>N/A
6905 <td>visual
6907 <tr>
6908 <th><a class=property href="#propdef-font-kerning">font-kerning</a>
6910 <td>auto | normal | none
6912 <td>auto
6914 <td>all elements
6916 <td>yes
6918 <td>N/A
6920 <td>visual
6922 <tr>
6923 <th><a class=property
6924 href="#propdef-font-language-override">font-language-override</a>
6926 <td>normal | <string>
6928 <td>normal
6930 <td>all elements
6932 <td>yes
6934 <td>N/A
6936 <td>visual
6938 <tr>
6939 <th><a class=property href="#propdef-font-size">font-size</a>
6941 <td><absolute-size> | <relative-size> | <length> |
6942 <percentage>
6944 <td>medium
6946 <td>all elements
6948 <td>yes
6950 <td>refer to parent element's font size
6952 <td>visual
6954 <tr>
6955 <th><a class=property
6956 href="#propdef-font-size-adjust">font-size-adjust</a>
6958 <td>none | auto | <number>
6960 <td>none
6962 <td>all elements
6964 <td>yes
6966 <td>N/A
6968 <td>visual
6970 <tr>
6971 <th><span class=property>font-stretch</span>
6973 <td>normal | ultra-condensed | extra-condensed | condensed |
6974 semi-condensed | semi-expanded | expanded | extra-expanded |
6975 ultra-expanded
6977 <td>normal
6979 <td>all elements
6981 <td>yes
6983 <td>N/A
6985 <td>visual
6987 <tr>
6988 <th><span class=property>font-style</span>
6990 <td>normal | italic | oblique
6992 <td>normal
6994 <td>all elements
6996 <td>yes
6998 <td>N/A
7000 <td>visual
7002 <tr>
7003 <th><a class=property href="#propdef-font-synthesis">font-synthesis</a>
7005 <td>none | [ weight || style ]
7007 <td>weight style
7009 <td>all elements
7011 <td>yes
7013 <td>N/A
7015 <td>visual
7017 <tr>
7018 <th><span class=property>font-variant</span>
7020 <td>normal | none | [ <common-lig-values> ||
7021 <discretionary-lig-values> || <historical-lig-values> ||
7022 <contextual-alt-values> || stylistic(<feature-value-name>)
7023 || historical-forms || styleset(<feature-value-name> #) ||
7024 character-variant(<feature-value-name> #) ||
7025 swash(<feature-value-name>) ||
7026 ornaments(<feature-value-name>) ||
7027 annotation(<feature-value-name>) || [ small-caps | all-small-caps
7028 | petite-caps | all-petite-caps | unicase | titling-caps ] ||
7029 <numeric-figure-values> || <numeric-spacing-values> ||
7030 <numeric-fraction-values> || ordinal || slashed-zero ||
7031 <east-asian-variant-values> || <east-asian-width-values> ||
7032 ruby ]
7034 <td>normal
7036 <td>all elements
7038 <td>yes
7040 <td>see individual properties
7042 <td>visual
7044 <tr>
7045 <th><a class=property
7046 href="#propdef-font-variant-alternates">font-variant-alternates</a>
7048 <td>normal | [ stylistic(<feature-value-name>) || historical-forms
7049 || styleset(<feature-value-name> #) ||
7050 character-variant(<feature-value-name> #) ||
7051 swash(<feature-value-name>) ||
7052 ornaments(<feature-value-name>) ||
7053 annotation(<feature-value-name>) ]
7055 <td>normal
7057 <td>all elements
7059 <td>yes
7061 <td>N/A
7063 <td>visual
7065 <tr>
7066 <th><a class=property
7067 href="#propdef-font-variant-caps">font-variant-caps</a>
7069 <td>normal | small-caps | all-small-caps | petite-caps | all-petite-caps
7070 | unicase | titling-caps
7072 <td>normal
7074 <td>all elements
7076 <td>yes
7078 <td>N/A
7080 <td>visual
7082 <tr>
7083 <th><a class=property
7084 href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
7086 <td>normal | [ <east-asian-variant-values> ||
7087 <east-asian-width-values> || ruby ]
7089 <td>normal
7091 <td>all elements
7093 <td>yes
7095 <td>N/A
7097 <td>visual
7099 <tr>
7100 <th><a class=property
7101 href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
7103 <td>normal | none | [ <common-lig-values> ||
7104 <discretionary-lig-values> || <historical-lig-values> ||
7105 <contextual-alt-values> ]
7107 <td>normal
7109 <td>all elements
7111 <td>yes
7113 <td>N/A
7115 <td>visual
7117 <tr>
7118 <th><a class=property
7119 href="#propdef-font-variant-numeric">font-variant-numeric</a>
7121 <td>normal | [ <numeric-figure-values> ||
7122 <numeric-spacing-values> || <numeric-fraction-values> ||
7123 ordinal || slashed-zero ]
7125 <td>normal
7127 <td>all elements
7129 <td>yes
7131 <td>N/A
7133 <td>visual
7135 <tr>
7136 <th><a class=property
7137 href="#propdef-font-variant-position">font-variant-position</a>
7139 <td>normal | sub | super
7141 <td>normal
7143 <td>all elements
7145 <td>yes
7147 <td>N/A
7149 <td>visual
7151 <tr>
7152 <th><span class=property>font-weight</span>
7154 <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600
7155 | 700 | 800 | 900
7157 <td>normal
7159 <td>all elements
7161 <td>yes
7163 <td>N/A
7165 <td>visual
7166 </table>
7167 <!--end-properties-->
7168 <!--begin-descriptors-->
7170 <table class=proptable>
7171 <thead>
7172 <tr>
7173 <th>Descriptor
7175 <th>Value
7177 <th>Initial
7179 <th>Percentages
7181 <th>Media
7183 <tbody>
7184 <tr>
7185 <th><span class=property>font-family</span>
7187 <td><family-name>
7189 <td>N/A
7191 <tr>
7192 <th><span class=property>font-feature-settings</span>
7194 <td>normal | <feature-tag-value> #
7196 <td>normal
7198 <tr>
7199 <th><span class=property>font-stretch</span>
7201 <td>normal | ultra-condensed | extra-condensed | condensed |
7202 semi-condensed | semi-expanded | expanded | extra-expanded |
7203 ultra-expanded
7205 <td>normal
7207 <tr>
7208 <th><span class=property>font-style</span>
7210 <td>normal | italic | oblique
7212 <td>normal
7214 <tr>
7215 <th><span class=property>font-variant</span>
7217 <td>normal | none | [ <common-lig-values> ||
7218 <discretionary-lig-values> || <historical-lig-values> ||
7219 <contextual-alt-values> || stylistic(<feature-value-name>)
7220 || historical-forms || styleset(<feature-value-name> #) ||
7221 character-variant(<feature-value-name> #) ||
7222 swash(<feature-value-name>) ||
7223 ornaments(<feature-value-name>) ||
7224 annotation(<feature-value-name>) || [ small-caps | all-small-caps
7225 | petite-caps | all-petite-caps | unicase | titling-caps ] ||
7226 <numeric-figure-values> || <numeric-spacing-values> ||
7227 <numeric-fraction-values> || ordinal || slashed-zero ||
7228 <east-asian-variant-values> || <east-asian-width-values> ||
7229 ruby ]
7231 <td>normal
7233 <tr>
7234 <th><span class=property>font-weight</span>
7236 <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
7238 <td>normal
7240 <tr>
7241 <th><a class=property href="#descdef-src">src</a>
7243 <td>[ <url> [format(<string> #)]? | <font-face-name> ] #
7245 <td>N/A
7247 <tr>
7248 <th><a class=property href="#descdef-unicode-range">unicode-range</a>
7250 <td><urange> #
7252 <td>U+0-10FFFF
7253 </table>
7254 <!--end-descriptors-->
7255 <script type="text/javascript">
7256 window.onload = function () {
7257 if (!("devicePixelRatio" in window && window.devicePixelRatio > 1)) return;
7258 var i, hiresElements = document.getElementsByClassName("hires");
7259 for (i = 0; i < hiresElements.length; i++) {
7260 var h = hiresElements[i];
7261 if (h.tagName != "IMG") continue;
7262 var src = h.getAttribute("src");
7263 var src2x = src.replace(/\.\w+$/, function(m) { return "@2x" + m; });
7264 h.src = src2x;
7265 }
7266 }
7267 </script>
7268 </html>
7269 <!-- Keep this comment at the end of the file
7270 Local variables:
7271 mode: sgml
7272 sgml-declaration:"~/SGML/HTML4.decl"
7273 sgml-default-doctype-name:"html"
7274 sgml-minimize-attributes:t
7275 sgml-nofill-elements:("pre" "style" "br")
7276 sgml-live-element-indicator:t
7277 sgml-omittag:nil
7278 sgml-shorttag:nil
7279 sgml-namecase-general:t
7280 sgml-general-insert-case:lower
7281 sgml-always-quote-attributes:t
7282 sgml-indent-step:nil
7283 sgml-indent-data:t
7284 sgml-parent-document:nil
7285 sgml-exposed-tags:nil
7286 sgml-local-catalogs:nil
7287 sgml-local-ecat-files:nil
7288 End:
7289 -->
7290 <!--
7292 to do:
7294 - wording of OpenType family name handling
7295 - handling combining sequences in the font matching algorithm
7296 - fix-up fi ligature example
7298 -->