Mon, 08 Jul 2013 14:54:37 +0900
[css3-fonts] more map class wording tweaks
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-8-july-2013>Editor's Draft 8
119 July 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-20130708/">http://www.w3.org/TR/2013/ED-css-fonts-3-20130708/</a> -->
129 <dt>Latest version:
131 <dd><a
132 href="http://www.w3.org/TR/css3-fonts/">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-css3-fonts-20130212/">http://www.w3.org/TR/2013/WD-css3-fonts-20130212/</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>
250 <p>This draft is a <strong>Last Call Working Draft</strong>. Please send
251 comments to the <a
252 href="http://lists.w3.org/Archives/Public/www-style/">www-style mailing
253 list</a> as described above. The <strong>deadline for comments</strong> is
254 six weeks after the date of publication in the header, 22 August 2013.
256 <h2 class="no-num no-toc" id=contents>Table of contents</h2>
257 <!--begin-toc-->
259 <ul class=toc>
260 <li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
262 <li><a href="#typography-background"><span class=secno>2 </span>Typography
263 Background</a>
265 <li><a href="#basic-font-props"><span class=secno>3 </span>Basic Font
266 Properties</a>
267 <ul class=toc>
268 <li><a href="#font-family-prop"><span class=secno>3.1 </span>Font
269 family: the font-family property</a>
270 <ul class=toc>
271 <li><a href="#generic-font-families"><span class=secno>3.1.1
272 </span>Generic font families</a>
273 </ul>
275 <li><a href="#font-weight-prop"><span class=secno>3.2 </span>Font
276 weight: the font-weight property</a>
278 <li><a href="#font-stretch-prop"><span class=secno>3.3 </span>Font
279 width: the font-stretch property</a>
281 <li><a href="#font-style-prop"><span class=secno>3.4 </span>Font style:
282 the font-style property</a>
284 <li><a href="#font-size-prop"><span class=secno>3.5 </span>Font size:
285 the font-size property</a>
287 <li><a href="#font-size-adjust-prop"><span class=secno>3.6
288 </span>Relative sizing: the font-size-adjust property</a>
290 <li><a href="#font-prop"><span class=secno>3.7 </span>Shorthand font
291 property: the font property</a>
293 <li><a href="#font-synthesis-prop"><span class=secno>3.8
294 </span>Controlling synthetic faces: the font-synthesis property</a>
295 </ul>
297 <li><a href="#font-resources"><span class=secno>4 </span>Font
298 Resources</a>
299 <ul class=toc>
300 <li><a href="#font-face-rule"><span class=secno>4.1 </span>The
301 <code>@font-face</code> rule</a>
303 <li><a href="#font-family-desc"><span class=secno>4.2 </span>Font
304 family: the font-family descriptor</a>
306 <li><a href="#src-desc"><span class=secno>4.3 </span>Font reference: the
307 src descriptor</a>
309 <li><a href="#font-prop-desc"><span class=secno>4.4 </span>Font property
310 descriptors: the font-style, font-weight, font-stretch descriptors</a>
312 <li><a href="#unicode-range-desc"><span class=secno>4.5 </span>Character
313 range: the unicode-range descriptor</a>
315 <li><a href="#composite-fonts"><span class=secno>4.6 </span>Using
316 character ranges to define composite fonts</a>
318 <li><a href="#font-rend-desc"><span class=secno>4.7 </span>Font
319 features: the font-variant and font-feature-settings descriptors</a>
321 <li><a href="#font-face-loading"><span class=secno>4.8 </span>Font
322 loading guidelines</a>
324 <li><a href="#same-origin-restriction"><span class=secno>4.9
325 </span>Same-origin restriction for fonts</a>
326 <ul class=toc>
327 <li><a href="#default-same-origin-restriction"><span class=secno>4.9.1
328 </span>Default same-origin restriction</a>
330 <li><a href="#allowing-cross-origin-font-loading"><span
331 class=secno>4.9.2 </span>Allowing cross-origin font loading</a>
332 </ul>
333 </ul>
335 <li><a href="#font-matching-algorithm"><span class=secno>5 </span>Font
336 Matching Algorithm</a>
337 <ul class=toc>
338 <li><a href="#font-family-casing"><span class=secno>5.1 </span>Case
339 sensitivity of font family names</a>
341 <li><a href="#font-style-matching"><span class=secno>5.2 </span>Matching
342 font styles</a>
344 <li><a href="#cluster-matching"><span class=secno>5.3 </span>Cluster
345 matching</a>
347 <li><a href="#char-handling-issues"><span class=secno>5.4
348 </span>Character handling issues</a>
350 <li><a href="#font-matching-changes"><span class=secno>5.5 </span>Font
351 matching changes since CSS 2.1</a>
353 <li><a href="#font-matching-examples"><span class=secno>5.6 </span>Font
354 matching examples</a>
355 </ul>
357 <li><a href="#font-rend-props"><span class=secno>6 </span>Font Feature
358 Properties</a>
359 <ul class=toc>
360 <li><a href="#glyph-selection-positioning"><span class=secno>6.1
361 </span>Glyph selection and positioning</a>
363 <li><a href="#language-specific-support"><span class=secno>6.2
364 </span>Language-specific display</a>
366 <li><a href="#font-kerning-prop"><span class=secno>6.3 </span>Kerning:
367 the font-kerning property</a>
369 <li><a href="#font-variant-ligatures-prop"><span class=secno>6.4
370 </span>Ligatures: the font-variant-ligatures property</a>
372 <li><a href="#font-variant-position-prop"><span class=secno>6.5
373 </span>Subscript and superscript forms: the font-variant-position
374 property</a>
376 <li><a href="#font-variant-caps-prop"><span class=secno>6.6
377 </span>Capitalization: the font-variant-caps property</a>
379 <li><a href="#font-variant-numeric-prop"><span class=secno>6.7
380 </span>Numerical formatting: the font-variant-numeric property</a>
382 <li><a href="#font-variant-alternates-prop"><span class=secno>6.8
383 </span>Alternates and swashes: the font-variant-alternates property</a>
386 <li><a href="#font-feature-values"><span class=secno>6.9 </span>Defining
387 font specific alternates: the <code>@font-feature-values</code>
388 rule</a>
389 <ul class=toc>
390 <li><a href="#basic-syntax"><span class=secno>6.9.1 </span>Basic
391 syntax</a>
393 <li><a href="#multi-valued-feature-value-definitions"><span
394 class=secno>6.9.2 </span>Multi-valued feature value definitions</a>
395 </ul>
397 <li><a href="#font-variant-east-asian-prop"><span class=secno>6.10
398 </span>East Asian text rendering: the font-variant-east-asian
399 property</a>
401 <li><a href="#font-variant-prop"><span class=secno>6.11 </span>Overall
402 shorthand for font rendering: the font-variant property</a>
404 <li><a href="#font-feature-settings-prop"><span class=secno>6.12
405 </span>Low-level font feature settings control: the
406 font-feature-settings property</a>
408 <li><a href="#font-language-override-prop"><span class=secno>6.13
409 </span>Font language override: the font-language-override property</a>
410 </ul>
412 <li><a href="#font-feature-resolution"><span class=secno>7 </span>Font
413 Feature Resolution </a>
414 <ul class=toc>
415 <li><a href="#default-features"><span class=secno>7.1 </span>Default
416 features</a>
418 <li><a href="#feature-precedence"><span class=secno>7.2 </span>Feature
419 precedence</a>
421 <li><a href="#feature-precedence-examples"><span class=secno>7.3
422 </span>Feature precedence examples</a>
423 </ul>
425 <li><a href="#object-model"><span class=secno>8 </span>Object Model</a>
426 <ul class=toc>
427 <li><a href="#om-fontface"><span class=secno>8.1 </span>The
428 <code>CSSFontFaceRule</code> interface</a>
430 <li><a href="#om-fontfeaturevalues"><span class=secno>8.2 </span>The
431 <code>CSSFontFeatureValuesRule</code> interface</a>
432 </ul>
434 <li class=no-num><a href="#platform-props-to-css">Appendix A: Mapping
435 platform font properties to CSS properties</a>
437 <li class=no-num><a href="#ch-ch-ch-changes">Changes</a>
438 <ul class=toc>
439 <li class=no-num><a href="#recent-changes"> Changes from the February
440 2013 CSS3 Fonts Working Draft</a>
441 </ul>
443 <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
445 <li class=no-num><a href="#conformance"> Conformance</a>
446 <ul class=toc>
447 <li class=no-num><a href="#conventions"> Document Conventions</a>
449 <li class=no-num><a href="#conformance-classes"> Conformance Classes</a>
452 <li class=no-num><a href="#partial"> Partial Implementations</a>
454 <li class=no-num><a href="#experimental"> Experimental
455 Implementations</a>
457 <li class=no-num><a href="#testing"> Non-Experimental
458 Implementations</a>
459 </ul>
461 <li class=no-num><a href="#references">References</a>
462 <ul class=toc>
463 <li class=no-num><a href="#normative-references">Normative
464 References</a>
466 <li class=no-num><a href="#other-references">Other References</a>
467 </ul>
469 <li class=no-num><a href="#index">Index</a>
471 <li class=no-num><a href="#property-index">Property index</a>
472 </ul>
473 <!--end-toc-->
475 <h2 id=introduction><span class=secno>1 </span>Introduction</h2>
477 <p>A font provides a resource containing the visual representation of
478 characters. At the simplest level it contains information that maps
479 character codes to shapes (called glyphs) that represent these characters.
480 Fonts sharing a common design style are commonly grouped into font
481 families classified by a set of standard font properties. Within a family,
482 the shape displayed for a given character can vary by stroke weight, slant
483 or relative width, among others. An individual font face is described by a
484 unique combination of these properties. For a given range of text, CSS
485 font properties are used to select a font family and a specific font face
486 within that family to be used when rendering that text. As a simple
487 example, to use the bold form of Helvetica one could use:
489 <pre>body {
490 font-family: Helvetica;
491 font-weight: bold;
492 }</pre>
494 <p>Font resources may be installed locally on the system on which a user
495 agent is running or downloadable. For local font resources descriptive
496 information can be obtained directly from the font resource. For
497 downloadable font resources (sometimes referred to as web fonts), the
498 descriptive information is included with the reference to the font
499 resource.
501 <p>Families of fonts typically don't contain a single face for each
502 possible variation of font properties. The CSS font selection mechanism
503 describes how to match a given set of CSS font properties to a single font
504 face.
506 <h2 id=typography-background><span class=secno>2 </span>Typography
507 Background</h2>
509 <p><em>This section is non-normative.</em>
511 <p> Typographic traditions vary across the globe, so there is no unique way
512 to classify all fonts across languages and cultures. For even common Latin
513 letters, wide variations are possible:
515 <div class=figure><img alt="variations in glyphs for a single character"
516 src=aaaaaa.png>
517 <p class=caption>One character, many glyph variations
518 </div>
520 <p>Differences in the anatomy of letterforms is one way to distinguish
521 fonts. For Latin fonts, flourishes at the ends of a character's main
522 strokes, or serifs, can distinguish a font from those without. Similar
523 comparisons exist in non-Latin fonts between fonts with tapered strokes
524 and those using primarily uniform strokes:
526 <div class=figure><img alt="serif vs. non-serifs" src=serifvssansserif.png>
527 <p class=caption>Letterforms with and without serifs
528 </div>
530 <div class=figure><img alt="serif vs. non-serifs for japanese"
531 src=minchovsgothic.png>
532 <p class=caption>Similar groupings for Japanese typefaces
533 </div>
535 <p>Fonts contain letterforms and the data needed to map characters to these
536 letterforms. Often this may be a simple one-to-one mapping, but more
537 complex mappings are also possible. The use of combining diacritic marks
538 creates many variations for an underlying letterform:
540 <div class=figure><img alt="diacritic marks" src=aaaaaa-diacritics.png>
541 <p class=caption>Variations with diacritic marks
542 </div>
544 <p>A sequence of characters can be represented by a single glyph known as a
545 ligature:
547 <div class=figure><img alt="example of a fi ligature"
548 src=final-ligature.png>
549 <p class=caption>Ligature example
550 </div>
552 <p>Visual transformations based on textual context are often stylistic
553 option in European languages. They are required to correctly render
554 languages like Arabic, the lam and alef characters below <em>must</em> be
555 combined when they exist in sequence:
557 <div class=figure><img alt="lam alef ligature" src=lamaleflig.png>
558 <p class=caption>Required Arabic ligature
559 </div>
561 <p>The relative complexity of these shaping transformations requires
562 additional data within the font.
564 <p>Sets of font faces with various stylistic variations are often grouped
565 together into font families. In the simplest case a regular face is
566 supplemented with bold and italic faces, but much more extensive groupings
567 are possible. Variations in the thickness of letterform strokes, the <dfn
568 id=weight>weight</dfn>, and the overall proportions of the letterform, the
569 <dfn id=width>width</dfn>, are most common. In the example below, each
570 letter uses a different font face within the Univers font family. The
571 width used increases from top to bottom and the weight increases from left
572 to right:
574 <div class=figure><img alt="various width and weight variations within a
575 single family" src=weightwidthvariations.png>
576 <p class=caption>Weight and width variations within a single font family
577 </div>
579 <p>Creating fonts that support multiple scripts is a difficult task;
580 designers need to understand the cultural traditions surrounding the use
581 of type in different scripts and come up with letterforms that somehow
582 share a common theme. Many languages often share a common script and each
583 of these languages may have noticeable stylistic differences. For example,
584 the Arabic script is shared by Persian and Urdu and Cyrillic is used with
585 many languages, not just Russian.
587 <p>The <a href="#character-map"><em>character map</em></a> of a font
588 defines the mapping of characters to glyphs for that font. If a document
589 contains characters not supported by the <a href="#character-map"><em
590 title="character map">character maps</em></a> of the fonts contained in a
591 font family list, a user agent may use a <a
592 href="#system-font-fallback"><em>system font fallback</em></a> procedure
593 to locate an appropriate font that does. If no appropriate font can be
594 found, some form of "missing glyph" character will be rendered by the user
595 agent. System fallback can occur when the specified list of font families
596 does not include a font that supports a given character.
598 <p>Although the <a href="#character-map"><em>character map</em></a> of a
599 font maps a given character to a glyph for that character, modern font
600 technologies such as OpenType and AAT (Apple Advanced Typography) provide
601 ways of mapping a character to different glyphs based upon feature
602 settings. Fonts in these formats allow these features to be embedded in
603 the font itself and controlled by applications. Common typographic
604 features which can be specified this way include ligatures, swashes,
605 contextual alternates, proportional and tabular figures, and automatic
606 fractions, to list just a few. For a visual overview of OpenType features,
607 see the <a href="#OPENTYPE-FONT-GUIDE"
608 rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
610 <h2 id=basic-font-props><span class=secno>3 </span>Basic Font Properties</h2>
612 <p>The particular font face used to render a character is determined by the
613 font family and other font properties that apply to a given element. This
614 structure allows settings to be varied independent of each other.</p>
615 <!-- prop: font-family -->
617 <h3 id=font-family-prop><span class=secno>3.1 </span>Font family: the <a
618 href="#propdef-font-family">font-family</a> property</h3>
620 <table class=propdef id=namefont-familyvalue-ltfamily-namegt-ltg>
621 <tbody>
622 <tr>
623 <td>Name:
625 <td><dfn id=propdef-font-family
626 title="font-family!!property">font-family</dfn>
628 <tr>
629 <td>Value:
631 <td>[ <a href="#family-name-value"><var><family-name></var></a> |
632 <a href="#generic-family-value"><var><generic-family></var></a> ]
633 #
635 <tr>
636 <td>Initial:
638 <td>depends on user agent
640 <tr>
641 <td>Applies to:
643 <td>all elements
645 <tr>
646 <td>Inherited:
648 <td>yes
650 <tr>
651 <td>Percentages:
653 <td>N/A
655 <tr>
656 <td>Media:
658 <td>visual
660 <tr>
661 <td>Computed value:
663 <td>as specified
665 <tr>
666 <td>Animatable:
668 <td>no
669 </table>
671 <p>This property specifies a prioritized list of font family names or
672 generic family names. A font family defines a set of faces that vary in
673 weight, width or slope. CSS uses the combination of a family name with
674 other style attributes to select an individual face. Using this selection
675 mechanism, rather than selecting a face via the style name as is often
676 done in design applications, allows some degree of regularity in textual
677 display when fallback occurs.
679 <p class=note>Designers should note that the CSS definition of font
680 attributes used for selection are explicitly not intended to define a font
681 taxonomy. A type designer's idea of a family may often extend to a set of
682 faces that vary along axes other than just the standard axes of weight,
683 width and slope. A family may extend to include both a set of serif faces
684 and a set of sans-serif faces or vary along axes that are unique to that
685 family. The CSS font selection mechanism merely provides a way to
686 determine the “closest” substitute when substitution is necessary.
688 <p>Unlike other CSS properties, component values are a comma-separated list
689 indicating alternatives. A user agent iterates through the list of family
690 names until it matches an available font that contains a glyph for the
691 character to be rendered. This allows for differences in available fonts
692 across platforms and for differences in the range of characters supported
693 by individual fonts.
695 <p>A font family name only specifies a name given to a set of font faces,
696 it does not specify an individual face. For example, given the
697 availability of the fonts below, Futura would match but Futura Medium
698 would not:
700 <div class=figure><img alt="family and face names"
701 src=familyvsfacename.png>
702 <p class=caption>Family and individual face names
703 </div>
705 <p>Consider the example below:
707 <div class=example>
708 <pre>body {
709 font-family: Helvetica, Verdana, sans-serif;
710 }</pre>
712 <p>If Helvetica is available it will be used when rendering. If neither
713 Helvetica nor Verdana is present, then the user-agent-defined sans serif
714 font will be used.</p>
715 </div>
717 <p>There are two types of font family names:
719 <dl>
720 <dt><dfn id=family-name-value><var><family-name></var></dfn>
722 <dd>The name of a font family of choice such as Helvetica or Verdana in
723 the previous example.
725 <dt><dfn id=generic-family-value><var><generic-family></var></dfn>
727 <dd> The following generic family keywords are defined: ‘<a
728 href="#serif"><code class=property>serif</code></a>’, ‘<a
729 href="#sans-serif"><code class=property>sans-serif</code></a>’, ‘<a
730 href="#cursive"><code class=property>cursive</code></a>’, ‘<a
731 href="#fantasy"><code class=property>fantasy</code></a>’, and ‘<a
732 href="#monospace"><code class=property>monospace</code></a>’. These
733 keywords can be used as a general fallback mechanism when an author's
734 desired font choices are not available. As keywords, they must not be
735 quoted. Authors are encouraged to append a generic font family as a last
736 alternative for improved robustness.
737 </dl>
739 <p>Font family names other than generic families must either be given
740 quoted as <a
741 href="//www.w3.org/TR/CSS21/syndata.html#strings">strings,</a> or unquoted
742 as a sequence of one or more <a
743 href="//www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers.</a>
744 This means most punctuation characters and digits at the start of each
745 token must be escaped in unquoted font family names.
747 <p>To illustrate this, the following declarations are invalid:
749 <pre>
750 font-family: Red/Black, sans-serif;
751 font-family: "Lucida" Grande, sans-serif;
752 font-family: Ahem!, sans-serif;
753 font-family: test@foo, sans-serif;
754 font-family: #POUND, sans-serif;
755 font-family: Hawaii 5-0, sans-serif;
756 </pre>
758 <p>If a sequence of identifiers is given as a font family name, the
759 computed value is the name converted to a string by joining all the
760 identifiers in the sequence by single spaces.
762 <p>To avoid mistakes in escaping, it is recommended to quote font family
763 names that contain white space, digits, or punctuation characters other
764 than hyphens:
766 <pre>
767 body { font-family: "New Century Schoolbook", serif }
769 <BODY STYLE="font-family: '21st Century', fantasy">
770 </pre>
772 <p>Font family <em>names</em> that happen to be the same as a keyword value
773 (‘<code class=property>inherit</code>’, ‘<a href="#serif"><code
774 class=property>serif</code></a>’, ‘<a href="#sans-serif"><code
775 class=property>sans-serif</code></a>’, ‘<a href="#monospace"><code
776 class=property>monospace</code></a>’, ‘<a href="#fantasy"><code
777 class=property>fantasy</code></a>’, and ‘<a href="#cursive"><code
778 class=property>cursive</code></a>’) must be quoted to prevent confusion
779 with the keywords with the same names. The keywords ‘<code
780 class=property>initial</code>’ and ‘<code
781 class=property>default</code>’ are reserved for future use and must also
782 be quoted when used as font names. UAs must not consider these keywords as
783 matching the <a
784 href="#family-name-value"><var><family-name></var></a> type.
786 <p>The precise way a set of fonts are grouped into font families varies
787 depending upon the platform font management API's. The Windows GDI API
788 only allows four faces to be grouped into a family while the DirectWrite
789 API and API's on OSX and other platforms support font families with a
790 variety of weights, widths and slopes (see <a
791 href="#platform-props-to-css">Appendix A</a> for more details).
793 <p>Some font formats allow fonts to carry multiple localizations of the
794 family name. User agents must recognize and correctly match all of these
795 names independent of the underlying platform localization, system API used
796 or document encoding:
798 <div class=figure><img alt="examples of localized family names"
799 src=localizedfamilynames.png>
800 <p class=caption>Localized family names
801 </div>
803 <h4 id=generic-font-families><span class=secno>3.1.1 </span>Generic font
804 families</h4>
806 <p>All five generic font families are defined to exist in all CSS
807 implementations (they need not necessarily map to five distinct actual
808 fonts). User agents should provide reasonable default choices for the
809 generic font families, which express the characteristics of each family as
810 well as possible within the limits allowed by the underlying technology.
811 User agents are encouraged to allow users to select alternative choices
812 for the generic fonts.
814 <h5 class="no-num no-toc"> <span class=index-def id=serif0 title="serif,
815 definition of"><a name=serif-def><dfn id=serif>serif</dfn></a></span></h5>
817 <p>Serif fonts represent the formal text style for a script. This often
818 means but is not limited to glyphs that have finishing strokes, flared or
819 tapering ends, or have actual serifed endings (including slab serifs).
820 Serif fonts are typically proportionately-spaced. They often display a
821 greater variation between thick and thin strokes than fonts from the ‘<a
822 href="#sans-serif"><code class=property>sans-serif</code></a>’ generic
823 font family. CSS uses the term ‘<a href="#serif"><code
824 class=property>serif</code></a>’ to apply to a font for any script,
825 although other names may be more familiar for particular scripts, such as
826 Mincho (Japanese), Sung, Song or Kai (Chinese), Batang (Korean). For
827 Arabic, the Naskh style would correspond to ‘<a href="#serif"><code
828 class=property>serif</code></a>’ more due to its typographic role rather
829 than its actual design style. Any font that is so described may be used to
830 represent the generic ‘<a href="#serif"><code
831 class=property>serif</code></a>’ family.
833 <div class=figure><img alt="sample serif fonts" src=serifexamples.png>
834 <p class=caption>Sample serif fonts
835 </div>
837 <h5 class="no-num no-toc"> <span class=index-def id=sans-serif0
838 title="sans-serif, definition of"> <a name=sans-serif-def><dfn
839 id=sans-serif>sans-serif</dfn></a></span></h5>
841 <p>Glyphs in sans-serif fonts, as the term is used in CSS, are generally
842 low contrast (vertical and horizontal stems have the close to the same
843 thickness) and have stroke endings that are plain -- without any flaring,
844 cross stroke, or other ornamentation. Sans-serif fonts are typically
845 proportionately-spaced. They often have little variation between thick and
846 thin strokes, compared to fonts from the ‘<a href="#serif"><code
847 class=property>serif</code></a>’ family. CSS uses the term ‘<a
848 href="#sans-serif"><code class=property>sans-serif</code></a>’ to apply
849 to a font for any script, although other names may be more familiar for
850 particular scripts, such as Gothic (Japanese), Hei (Chinese), or Gulim
851 (Korean). Any font that is so described may be used to represent the
852 generic ‘<a href="#sans-serif"><code
853 class=property>sans-serif</code></a>’ family.
855 <div class=figure><img alt="sample sans-serif fonts"
856 src=sansserifexamples.png>
857 <p class=caption>Sample sans-serif fonts
858 </div>
860 <h5 class="no-num no-toc"> <span class=index-def id=cursive0
861 title="cursive, definition of"> <a name=cursive-def><dfn
862 id=cursive>cursive</dfn></a></span></h5>
864 <p>Glyphs in cursive fonts generally use a more informal script style, and
865 the result looks more like handwritten pen or brush writing than printed
866 letterwork. CSS uses the term ‘<a href="#cursive"><code
867 class=property>cursive</code></a>’ to apply to a font for any script,
868 although other names such as Chancery, Brush, Swing and Script are also
869 used in font names.
871 <div class=figure><img alt="sample cursive fonts" src=cursiveexamples.png>
872 <p class=caption>Sample cursive fonts
873 </div>
875 <h5 class="no-num no-toc"> <span class=index-def id=fantasy0
876 title="fantasy, definition of"> <a name=fantasy-def><dfn
877 id=fantasy>fantasy</dfn></a></span></h5>
879 <p>Fantasy fonts are primarily decorative or expressive fonts that contain
880 playful representations of characters. These do not include Pi or Picture
881 fonts which do not represent actual characters.
883 <div class=figure><img alt="sample fantasy fonts" src=fantasyexamples.png>
884 <p class=caption>Sample fantasy fonts
885 </div>
887 <h5 class="no-num no-toc"> <span class=index-def id=monospace0
888 title="monospace, definition of"> <a name=monospace-def><dfn
889 id=monospace>monospace</dfn></a></span></h5>
891 <p>The sole criterion of a monospace font is that all glyphs have the same
892 fixed width. This is often used to render samples of computer code.
894 <div class=figure><img alt="sample monospace fonts"
895 src=monospaceexamples.png>
896 <p class=caption>Sample monospace fonts
897 </div>
898 <!-- prop: font-weight -->
900 <h3 id=font-weight-prop><span class=secno>3.2 </span>Font weight: the <a
901 href="#propdef-font-weight">font-weight</a> property</h3>
903 <table class=propdef id=namefont-weightvaluenormal-bold-bolder-l>
904 <tbody>
905 <tr>
906 <td>Name:
908 <td><dfn id=propdef-font-weight
909 title="font-weight!!property">font-weight</dfn>
911 <tr>
912 <td>Value:
914 <td><a href="#font-weight-normal-value"
915 title="normal!!font-weight">normal</a> | <a href="#bold">bold</a> | <a
916 href="#bolder">bolder</a> | <a href="#lighter">lighter</a> | <a
917 href="#font-weight-numeric-values" title="100...900 weight
918 values">100</a> | <a href="#font-weight-numeric-values"
919 title="100...900 weight values">200</a> | <a
920 href="#font-weight-numeric-values" title="100...900 weight
921 values">300</a> | <a href="#font-weight-numeric-values"
922 title="100...900 weight values">400</a> | <a
923 href="#font-weight-numeric-values" title="100...900 weight
924 values">500</a> | <a href="#font-weight-numeric-values"
925 title="100...900 weight values">600</a> | <a
926 href="#font-weight-numeric-values" title="100...900 weight
927 values">700</a> | <a href="#font-weight-numeric-values"
928 title="100...900 weight values">800</a> | <a
929 href="#font-weight-numeric-values" title="100...900 weight
930 values">900</a>
932 <tr>
933 <td>Initial:
935 <td>normal
937 <tr>
938 <td>Applies to:
940 <td>all elements
942 <tr>
943 <td>Inherited:
945 <td>yes
947 <tr>
948 <td>Percentages:
950 <td>N/A
952 <tr>
953 <td>Media:
955 <td>visual
957 <tr>
958 <td>Computed value:
960 <td>numeric weight value (see description)
962 <tr>
963 <td>Animatable:
965 <td>as <a
966 href="http://dev.w3.org/csswg/css3-transitions/#animtype-font-weight">font
967 weight</a>
968 </table>
970 <p>The <a href="#propdef-font-weight"
971 title="font-weight!!property">‘<code
972 class=property>font-weight</code>’</a> property specifies the weight of
973 glyphs in the font, their degree of blackness or stroke thickness.
975 <p>Values have the following meanings:
977 <dl>
978 <dt><dfn id=font-weight-numeric-values title="100...900 weight values">100
979 to 900</dfn>
981 <dd>These values form an ordered sequence, where each number indicates a
982 weight that is at least as dark as its predecessor. These roughly
983 correspond to the commonly used weight names below:
984 </dl>
986 <ul>
987 <li>100 - Thin
989 <li>200 - Extra Light (Ultra Light)
991 <li>300 - Light
993 <li>400 - Normal
995 <li>500 - Medium
997 <li>600 - Semi Bold (Demi Bold)
999 <li>700 - Bold
1001 <li>800 - Extra Bold (Ultra Bold)
1003 <li>900 - Black (Heavy)
1004 </ul>
1006 <dl>
1007 <dt><dfn id=font-weight-normal-value
1008 title="normal!!font-weight">normal</dfn>
1010 <dd>Same as ‘<code class=css>400</code>’.
1012 <dt><dfn id=bold>bold</dfn>
1014 <dd>Same as ‘<code class=css>700</code>’.
1016 <dt><dfn id=bolder>bolder</dfn>
1018 <dd>Specifies a bolder weight than the inherited value.
1020 <dt><dfn id=lighter>lighter</dfn>
1022 <dd>Specifies a lighter weight than the inherited value.
1023 </dl>
1025 <p>Font formats that use a scale other than a nine-step scale should map
1026 their scale onto the CSS scale so that 400 roughly corresponds with a face
1027 that would be labeled as Regular, Book, Roman and 700 roughly matches a
1028 face that would be labeled as Bold. Or weights may be inferred from the
1029 style names, ones that correspond roughly with the scale above. The scale
1030 is relative, so a face with a larger weight value must never appear
1031 lighter. If style names are used to infer weights, care should be taken to
1032 handle variations in style names across locales.
1034 <p>Quite often there are only a few weights available for a particular font
1035 family. When a weight is specified for which no face exists, a face with a
1036 nearby weight is used. In general, bold weights map to faces with heavier
1037 weights and light weights map to faces with lighter weights (see the <a
1038 href="#font-matching-algorithm">font matching section below</a> for a
1039 precise definition). The examples here illustrate which face is used for
1040 different weights, grey indicates a face for that weight does not exist so
1041 a face with a nearby weight is used:
1043 <div class=figure><img alt="weight mappings for a family with 400, 700 and
1044 900 weights" src=optimaweights.png>
1045 <p class=caption>Weight mappings for a font family with 400, 700 and 900
1046 weight faces
1047 </div>
1049 <div class=figure><img alt="weight mappings for a family with 300, 600
1050 weights" src=hiraginoweights.png>
1051 <p class=caption>Weight mappings for a font family with 300 and 600 weight
1052 faces
1053 </div>
1055 <p>Although the practice is not well-loved by typographers, bold faces are
1056 often synthesized by user agents for faces that lack actual bold faces.
1057 For the purposes of style matching, these faces must be treated as if they
1058 exist within the family. Authors can explicitly avoid this behavior by
1059 using the ‘<a href="#propdef-font-synthesis"><code
1060 class=property>font-synthesis</code></a>’ property.
1062 <p>Specified values of ‘<a href="#bolder"><code
1063 class=property>bolder</code></a>’ and ‘<a href="#lighter"><code
1064 class=property>lighter</code></a>’ indicate weights relative to the
1065 weight of the parent element. The computed weight is calculated based on
1066 the inherited <a href="#propdef-font-weight"
1067 title="font-weight!!property">‘<code
1068 class=property>font-weight</code>’</a> value using the chart below.
1070 <table class=data id=bolderlighter summary="Bolder/lighter mappings">
1071 <thead>
1072 <tr>
1073 <th>Inherited value
1075 <th>bolder
1077 <th>lighter
1079 <tbody>
1080 <tr>
1081 <th>100
1083 <td>400
1085 <td>100
1087 <tr>
1088 <th>200
1090 <td>400
1092 <td>100
1094 <tr>
1095 <th>300
1097 <td>400
1099 <td>100
1101 <tr>
1102 <th>400
1104 <td>700
1106 <td>100
1108 <tr>
1109 <th>500
1111 <td>700
1113 <td>100
1115 <tr>
1116 <th>600
1118 <td>900
1120 <td>400
1122 <tr>
1123 <th>700
1125 <td>900
1127 <td>400
1129 <tr>
1130 <th>800
1132 <td>900
1134 <td>700
1136 <tr>
1137 <th>900
1139 <td>900
1141 <td>700
1142 </table>
1144 <p>The table above is equivalent to selecting the next relative bolder or
1145 lighter face, given a font family containing normal and bold faces along
1146 with a thin and a heavy face. Authors who desire finer control over the
1147 exact weight values used for a given element may use numerical values
1148 instead of relative weights.</p>
1149 <!-- prop: font-stretch -->
1151 <h3 id=font-stretch-prop><span class=secno>3.3 </span>Font width: the <a
1152 href="#propdef-font-stretch">font-stretch</a> property</h3>
1154 <table class=propdef id=namefont-stretchvalue-normal-ultra-conde>
1155 <tbody>
1156 <tr>
1157 <td>Name:
1159 <td><dfn id=propdef-font-stretch
1160 title="font-stretch!!property">font-stretch</dfn>
1162 <tr>
1163 <td>Value:
1165 <td> <a href="#font-stretch-normal-value"
1166 title="normal!!font-stretch">normal</a> | <a
1167 href="#ultra-condensed">ultra-condensed</a> | <a
1168 href="#extra-condensed">extra-condensed</a> | <a
1169 href="#condensed">condensed</a> | <a
1170 href="#semi-condensed-">semi-condensed</a> | <a
1171 href="#semi-expanded">semi-expanded</a> | <a
1172 href="#expanded">expanded</a> | <a
1173 href="#extra-expanded">extra-expanded</a> | <a
1174 href="#ultra-expanded">ultra-expanded</a>
1176 <tr>
1177 <td>Initial:
1179 <td>normal
1181 <tr>
1182 <td>Applies to:
1184 <td>all elements
1186 <tr>
1187 <td>Inherited:
1189 <td>yes
1191 <tr>
1192 <td>Percentages:
1194 <td>N/A
1196 <tr>
1197 <td>Media:
1199 <td>visual
1201 <tr>
1202 <td>Computed value:
1204 <td>as specified
1206 <tr>
1207 <td>Animatable:
1209 <td>as <a href="#font-stretch-animation">font stretch</a>
1210 </table>
1212 <p>The <a href="#propdef-font-stretch"
1213 title="font-stretch!!property">‘<code
1214 class=property>font-stretch</code>’</a> property selects a normal,
1215 condensed, or expanded face from a font family. Absolute keyword values
1216 have the following ordering, from narrowest to widest:
1218 <ul>
1219 <li><dfn id=ultra-condensed>ultra-condensed</dfn>
1221 <li><dfn id=extra-condensed>extra-condensed</dfn>
1223 <li><dfn id=condensed>condensed</dfn>
1225 <li><dfn id=semi-condensed->semi-condensed </dfn>
1227 <li><dfn id=font-stretch-normal-value
1228 title="normal!!font-stretch">normal</dfn>
1230 <li><dfn id=semi-expanded>semi-expanded</dfn>
1232 <li><dfn id=expanded>expanded</dfn>
1234 <li><dfn id=extra-expanded>extra-expanded</dfn>
1236 <li><dfn id=ultra-expanded>ultra-expanded</dfn>
1237 </ul>
1239 <p>When a face does not exist for a given width, normal or condensed values
1240 map to a narrower face, otherwise a wider face. Conversely, expanded
1241 values map to a wider face, otherwise a narrower face. The figure below
1242 shows how the nine font-stretch property settings affect font selection
1243 for font family containing a variety of widths, grey indicates a width for
1244 which no face exists and a different width is substituted:
1246 <div class=figure><img alt="width mappings for a family with condensed,
1247 normal and expanded faces" src=universwidths.png>
1248 <p class=caption>Width mappings for a font family with condensed, normal
1249 and expanded width faces
1250 </div>
1252 <p id=font-stretch-animation>Animation of font stretch: Font stretch is
1253 interpolated in discrete steps. The interpolation happens as though the
1254 ordered values are equally spaced real numbers. The interpolation result
1255 is rounded to the nearest value, with values exactly halfway between two
1256 values rounded towards the later value in the list above.</p>
1257 <!-- prop: font-style -->
1259 <h3 id=font-style-prop><span class=secno>3.4 </span>Font style: the <a
1260 href="#propdef-font-style">font-style</a> property</h3>
1262 <table class=propdef id=namefont-stylevaluenormal-italic-oblique>
1263 <tbody>
1264 <tr>
1265 <td>Name:
1267 <td><dfn id=propdef-font-style
1268 title="font-style!!property">font-style</dfn>
1270 <tr>
1271 <td>Value:
1273 <td><a href="#font-style-normal-value"
1274 title="normal!!font-style">normal</a> | <a href="#italic">italic</a> |
1275 <a href="#oblique">oblique</a>
1277 <tr>
1278 <td>Initial:
1280 <td>normal
1282 <tr>
1283 <td>Applies to:
1285 <td>all elements
1287 <tr>
1288 <td>Inherited:
1290 <td>yes
1292 <tr>
1293 <td>Percentages:
1295 <td>N/A
1297 <tr>
1298 <td>Media:
1300 <td>visual
1302 <tr>
1303 <td>Computed value:
1305 <td>as specified
1307 <tr>
1308 <td>Animatable:
1310 <td>no
1311 </table>
1313 <p>The <a href="#propdef-font-style" title="font-style!!property">‘<code
1314 class=property>font-style</code>’</a> property allows italic or oblique
1315 faces to be selected. Italic forms are generally cursive in nature while
1316 oblique faces are typically sloped versions of the regular face. Oblique
1317 faces can be simulated by artificially sloping the glyphs of the regular
1318 face. Compare the artificially sloped renderings of Palatino ‘<code
1319 class=property>a</code>’ and Baskerville ‘<code
1320 class=property>N</code>’ in grey with the actual italic versions:
1322 <div class=figure><img alt="artificial sloping vs. real italics"
1323 src=realvsfakeitalics.png>
1324 <p class=caption>Artificial sloping versus real italics
1325 </div>
1327 <p>Values have the following meanings:
1329 <dl>
1330 <dt><dfn id=font-style-normal-value
1331 title="normal!!font-style">normal</dfn>
1333 <dd>selects a face that is classified as a normal face, one that is
1334 neither italic or obliqued
1336 <dt><dfn id=italic>italic</dfn>
1338 <dd>selects a font that is labeled as an italic face, or an oblique face
1339 if one is not
1341 <dt><dfn id=oblique>oblique</dfn>
1343 <dd>selects a font that is labeled as an oblique face, or an italic face
1344 if one is not
1345 </dl>
1347 <p>If no italic or oblique face is available, oblique faces can be
1348 synthesized by rendering non-obliqued faces with an artificial obliquing
1349 operation. The use of these artificially obliqued faces can be disabled
1350 using the ‘<a href="#propdef-font-synthesis"><code
1351 class=property>font-synthesis</code></a>’ property. The details of the
1352 obliquing operation are not explicitly defined.</p>
1353 <!-- resolution on the "undefined" nature of synthetics: http://www.w3.org/2013/06/06-css-minutes.html#item03 -->
1355 <p>Many scripts lack the tradition of mixing a cursive form within text
1356 rendered with a normal face. Chinese, Japanese and Korean fonts almost
1357 always lack italic or oblique faces. Fonts that support a mixture of
1358 scripts will sometimes omit specific scripts such as Arabic from the set
1359 of glyphs supported in the italic face. User agents should be careful
1360 about making <a href="#character-map"><em>character map</em></a>
1361 assumptions across faces when implementing support for <a
1362 href="#system-font-fallback"><em>system font fallback</em></a>.</p>
1363 <!-- prop: font-size -->
1365 <h3 id=font-size-prop><span class=secno>3.5 </span>Font size: the <a
1366 href="#propdef-font-size">font-size</a> property</h3>
1368 <table class=propdef id=namefont-sizevalueltabsolute-sizegt-ltre>
1369 <tbody>
1370 <tr>
1371 <td>Name:
1373 <td><dfn id=propdef-font-size>font-size</dfn>
1375 <tr>
1376 <td>Value:
1378 <td><a href="#absolute-size-value"><var><absolute-size></var></a>
1379 | <a href="#relative-size-value"><var><relative-size></var></a> |
1380 <a href="#length-size-value"><var><length></var></a> | <a
1381 href="#percentage-size-value"><var><percentage></var></a>
1383 <tr>
1384 <td>Initial:
1386 <td>medium
1388 <tr>
1389 <td>Applies to:
1391 <td>all elements
1393 <tr>
1394 <td>Inherited:
1396 <td>yes
1398 <tr>
1399 <td>Percentages:
1401 <td>refer to parent element's font size
1403 <tr>
1404 <td>Media:
1406 <td>visual
1408 <tr>
1409 <td>Computed value:
1411 <td>absolute length
1413 <tr>
1414 <td>Animatable:
1416 <td>as <a
1417 href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a>
1418 </table>
1420 <p>This property indicates the desired height of glyphs from the font. For
1421 scalable fonts, the font-size is a scale factor applied to the EM unit of
1422 the font. (Note that certain glyphs may bleed outside their EM box.) For
1423 non-scalable fonts, the font-size is converted into absolute units and
1424 matched against the declared font-size of the font, using the same
1425 absolute coordinate space for both of the matched values. Values have the
1426 following meanings:
1428 <dl>
1429 <dt><dfn id=absolute-size-value><var><absolute-size></var></dfn>
1431 <dd> An <a
1432 href="#absolute-size-value"><var><absolute-size></var></a> keyword
1433 refers to an entry in a table of font sizes computed and kept by the user
1434 agent. Possible values are:
1435 <p> [ xx-small | x-small | small | medium | large | x-large | xx-large ]</p>
1437 <dt><dfn id=relative-size-value><var><relative-size></var></dfn>
1439 <dd> A <a href="#relative-size-value"><var><relative-size></var></a>
1440 keyword is interpreted relative to the table of font sizes and the
1441 computed ‘<a href="#propdef-font-size"><code
1442 class=property>font-size</code></a>’ of the parent element. Possible
1443 values are:
1444 <p> [ larger | smaller ]
1446 <p> For example, if the parent element has a font size of ‘<code
1447 class=property>medium</code>’, a value of ‘<code
1448 class=property>larger</code>’ will make the font size of the current
1449 element be ‘<code class=property>large</code>’. If the parent
1450 element's size is not close to a table entry, the user agent is free to
1451 interpolate between table entries or round off to the closest one. The
1452 user agent may have to extrapolate table values if the numerical value
1453 goes beyond the keywords.
1455 <dt><dfn id=length-size-value><var><length></var></dfn>
1457 <dd>A length value specifies an absolute font size (independent of the
1458 user agent's font table). Negative lengths are illegal.
1460 <dt><dfn id=percentage-size-value><var><percentage></var></dfn>
1462 <dd>A percentage value specifies an absolute font size relative to the
1463 parent element's font size. Use of percentage values, or values in
1464 ‘<code class=property>em</code>’s, leads to more robust and
1465 cascadable style sheets.
1466 </dl>
1468 <p>The following table provides user agent guidelines for the absolute-size
1469 scaling factor and their mapping to HTML heading and absolute font-sizes.
1470 The ‘<code class=property>medium</code>’ value is used as the
1471 reference middle value. The user agent may fine-tune these values for
1472 different fonts or different types of display devices.
1474 <table class=data>
1475 <thead>
1476 <tr>
1477 <th>CSS absolute-size values
1479 <th>xx-small
1481 <th>x-small
1483 <th>small
1485 <th>medium
1487 <th>large
1489 <th>x-large
1491 <th>xx-large
1493 <th>
1495 <tbody>
1496 <tr>
1497 <th>scaling factor
1499 <td>3/5
1501 <td>3/4
1503 <td>8/9
1505 <td>1
1507 <td>6/5
1509 <td>3/2
1511 <td>2/1
1513 <td>3/1
1515 <tr>
1516 <th>HTML headings
1518 <td>h6
1520 <td>
1522 <td>h5
1524 <td>h4
1526 <td>h3
1528 <td>h2
1530 <td>h1
1532 <td>
1534 <tr>
1535 <th>HTML font sizes
1537 <td>1
1539 <td>
1541 <td>2
1543 <td>3
1545 <td>4
1547 <td>5
1549 <td>6
1551 <td>7
1552 </table>
1554 <p class=note><em><strong>Note 1.</strong> To preserve readability, an UA
1555 applying these guidelines should nevertheless avoid creating font-size
1556 resulting in less than 9 device pixels per EM unit on a computer
1557 display.</em>
1559 <p class=note><em><strong>Note 2.</strong> In CSS1, the suggested scaling
1560 factor between adjacent indexes was 1.5 which user experience proved to be
1561 too large. In CSS2, the suggested scaling factor for computer screen
1562 between adjacent indexes was 1.2 which still created issues for the small
1563 sizes. The new scaling factor varies between each index to provide a
1564 better readability.</em>
1566 <p>The actual value of this property may differ from the computed value due
1567 a numerical value on ‘<a href="#propdef-font-size-adjust"><code
1568 class=property>font-size-adjust</code></a>’ and the unavailability of
1569 certain font sizes.
1571 <p>Child elements inherit the computed <a class=noxref
1572 href="#font-size-prop"> <span class=property>‘<code
1573 class=property>font-size</code>’</span></a> value (otherwise, the effect
1574 of <a class=noxref href="#font-size-adjust-prop"><span
1575 class=property>‘<code
1576 class=property>font-size-adjust</code>’</span></a> would compound).
1578 <div class=example>
1579 <p style="display:none">Example(s):
1581 <p>
1583 <pre>p { font-size: 12pt; }
1584 blockquote { font-size: larger }
1585 em { font-size: 150% }
1586 em { font-size: 1.5em }
1587 </pre>
1588 </div>
1589 <!-- prop: font-size-adjust -->
1591 <h3 id=font-size-adjust-prop><span class=secno>3.6 </span>Relative sizing:
1592 the <a href="#propdef-font-size-adjust">font-size-adjust</a> property</h3>
1594 <table class=propdef id=namefont-size-adjustvaluenone-auto-ltnum>
1595 <tbody>
1596 <tr>
1597 <td>Name:
1599 <td><dfn id=propdef-font-size-adjust>font-size-adjust</dfn>
1601 <tr>
1602 <td>Value:
1604 <td><a href="#font-size-adjust-none-value"
1605 title="none!!font-size-adjust">none</a> | <a
1606 href="#font-size-adjust-auto-value"
1607 title="auto!!font-size-adjust">auto</a> | <a
1608 href="#aspect-ratio-value"><var><number></var></a>
1610 <tr>
1611 <td>Initial:
1613 <td>none
1615 <tr>
1616 <td>Applies to:
1618 <td>all elements
1620 <tr>
1621 <td>Inherited:
1623 <td>yes
1625 <tr>
1626 <td>Percentages:
1628 <td>N/A
1630 <tr>
1631 <td>Media:
1633 <td>visual
1635 <tr>
1636 <td>Computed value:
1638 <td>as specified
1640 <tr>
1641 <td>Animatable:
1643 <td>as <a
1644 href="http://dev.w3.org/csswg/css3-transitions/#animtype-number">number</a>
1645 </table>
1647 <p>For any given font size, the apparent size and legibility of text varies
1648 across fonts. For scripts such as Latin or Cyrillic that distinguish
1649 between upper and lowercase letters, the relative height of lowercase
1650 letters compared to their uppercase counterparts is a determining factor
1651 of legibility. This is commonly referred to as the <a class=index-def
1652 href="#aspect-value" id=aspect-value0 title="aspect value"><dfn
1653 id=aspect-value>aspect value</dfn></a>. Precisely defined, it is equal to
1654 the x-height of a font divided by the font size.
1656 <p>In situations where font fallback occurs, fallback fonts may not share
1657 the same aspect ratio as the desired font family and will thus appear less
1658 readable. The font-size-adjust property is a way to preserve the
1659 readability of text when font fallback occurs. It does this by adjusting
1660 the font-size so that the x-height is the same regardless of the font
1661 used.
1663 <div class=example>
1664 <p>The style defined below defines Verdana as the desired font family, but
1665 if Verdana is not available Futura or Times will be used.</p>
1667 <pre>p {
1668 font-family: Verdana, Futura, Times;
1669 }
1671 <p>Lorem ipsum dolor sit amet, ...</p>
1672 </pre>
1674 <p>Verdana has a relatively high aspect ratio, lowercase letters are
1675 relatively tall compared to uppercase letters, so at small sizes text
1676 appears legible. Times has a lower aspect ratio and so if fallback
1677 occurs, the text will be less legible at small sizes than Verdana.</p>
1678 </div>
1680 <p>How text rendered in each of these fonts compares is shown below, the
1681 columns show text rendered in Verdana, Futura and Times. The same
1682 font-size value is used across cells within each row and red lines are
1683 included to show the differences in x-height. In the upper half each row
1684 is rendered in the same font-size value. The same is true for the lower
1685 half but in this half the font-size-adjust property is also set so that
1686 the actual font size is adjusted to preserve the x-height across each row.
1687 Note how small text remains relatively legible across each row in the
1688 lower half.
1690 <div class=figure><img alt="text with and without font-size-adjust"
1691 src=fontsizeadjust.png>
1692 <p class=caption>Text with and without the use of font-size-adjust
1693 </div>
1695 <p>This property allows authors to specify an <a
1696 href="#aspect-value"><i>aspect value</i></a> for an element that will
1697 effectively preserve the x-height of the first choice font, whether it is
1698 substituted or not. Values have the following meanings:
1700 <dl>
1701 <dt><dfn id=font-size-adjust-none-value
1702 title="none!!font-size-adjust">none</dfn>
1704 <dd>Do not preserve the font's x-height.
1706 <dt><dfn id=font-size-adjust-auto-value
1707 title="auto!!font-size-adjust">auto</dfn>
1709 <dd>Behaves just like <number>, except the number used is the <a
1710 href="#aspect-value"><i>aspect value</i></a> calculated by user agents
1711 for the first font in the list of fonts defined for the initial value of
1712 the <a href="#propdef-font-family" title="font-family!!property">‘<code
1713 class=property>font-family</code>’</a> property. Effectively this is
1714 the default font used when <a href="#propdef-font-family"
1715 title="font-family!!property">‘<code
1716 class=property>font-family</code>’</a> is not otherwise specified.
1717 <p>Authors can use this value to specify that font size should be
1718 normalized across fonts based on the x-height without the need to
1719 specify the aspect ratio explicitly.</p>
1721 <dt><dfn id=aspect-ratio-value><var><number></var></dfn>
1723 <dd>Specifies the <a href="#aspect-value"><i>aspect value</i></a> used in
1724 the calculation below to calculate the adjusted font size:
1725 <pre>c = ( a / a' ) s
1726 </pre>
1728 <p>where:</p>
1730 <pre>s = font-size value
1731 a = <a href="#aspect-value"><i>aspect value</i></a> as specified by the font-size-adjust property
1732 a' = <a href="#aspect-value"><i>aspect value</i></a> of actual font
1733 c = adjusted font-size to use
1734 </pre>
1736 <p>This value applies to any font that is selected but in typical usage
1737 it should be based on the <a href="#aspect-value"><i>aspect
1738 value</i></a> of the first font in the font-family list. If this is
1739 specified accurately, the <tt>(a/a')</tt> term in the formula above is
1740 effectively 1 for the first font and no adjustment occurs. If the value
1741 is specified inaccurately, text rendered using the first font in the
1742 family list will display differently in older user agents that don't
1743 support font-size-adjust.</p>
1744 </dl>
1746 <p>The value of ‘<a href="#propdef-font-size-adjust"><code
1747 class=property>font-size-adjust</code></a>’ affects the size of relative
1748 units that are based on font metrics of the <a
1749 href="#first-available-font"><i>first available font</i></a> such as
1750 <code>ex</code> and <code>ch</code> but does not affect the size of
1751 <code>em</code> units.
1753 <p>Authors can calculate the <a href="#aspect-value"><i>aspect
1754 value</i></a> for a given font by comparing spans with the same content
1755 but different font-size-adjust properties. If the same font-size is used,
1756 the spans will match when the font-size-adjust value is accurate for the
1757 given font.
1759 <div class=example>
1760 <p>Two spans with borders are used to determine the <a
1761 href="#aspect-value"><i>aspect value</i></a> of a font. The font-size is
1762 the same for both spans but the font-size-adjust property is specified
1763 only for the right span. Starting with a value of 0.5, the aspect value
1764 can be adjusted until the borders around the two letters line up.</p>
1766 <pre>p {
1767 font-family: Futura;
1768 font-size: 500px;
1769 }
1771 span {
1772 border: solid 1px red;
1773 }
1775 .adjust {
1776 font-size-adjust: 0.5;
1777 }
1779 <p><span>b</span><span class="adjust">b</span></p>
1780 </pre>
1782 <div class=figure><img alt="Futura with an <i>aspect value</i> of 0.5"
1783 src=beforefontsizeadjust.png>
1784 <p class=caption>Futura with an <a href="#aspect-value"><i>aspect
1785 value</i></a> of 0.5
1786 </div>
1788 <p>The box on the right is a bit bigger than the one on the left, so the
1789 <a href="#aspect-value"><i>aspect value</i></a> of this font is something
1790 less than 0.5. Adjust the value until the boxes align.</p>
1791 </div>
1792 <!-- prop: font -->
1794 <h3 id=font-prop><span class=secno>3.7 </span>Shorthand font property: the
1795 <a href="#propdef-font">font</a> property</h3>
1797 <table class=propdef id=namefontvalue-ltlsquofont-stylersquogt-l>
1798 <tbody>
1799 <tr>
1800 <td>Name:
1802 <td><dfn id=propdef-font>font</dfn>
1804 <tr>
1805 <td>Value:
1807 <td>[ [ <var><<a href="#propdef-font-style"
1808 title="font-style!!property">‘<code
1809 class=property>font-style</code>’</a>></var> || <a
1810 href="#font-variant-css21-values"><var><font-variant-css21></var></a>
1811 || <var><<a href="#propdef-font-weight"
1812 title="font-weight!!property">‘<code
1813 class=property>font-weight</code>’</a>></var> || <var><<a
1814 href="#propdef-font-stretch" title="font-stretch!!property">‘<code
1815 class=property>font-stretch</code>’</a></var> ]? <var><‘<a
1816 href="#propdef-font-size"><code
1817 class=property>font-size</code></a>’></var> [ / <var><‘<code
1818 class=property>line-height</code>’></var> ]? <var><<a
1819 href="#propdef-font-family" title="font-family!!property">‘<code
1820 class=property>font-family</code>’</a>></var> ] | caption | icon |
1821 menu | message-box | small-caption | status-bar
1823 <tr>
1824 <td>Initial:
1826 <td>see individual properties
1828 <tr>
1829 <td>Applies to:
1831 <td>all elements
1833 <tr>
1834 <td>Inherited:
1836 <td>yes
1838 <tr>
1839 <td>Percentages:
1841 <td>see individual properties
1843 <tr>
1844 <td>Media:
1846 <td>visual
1848 <tr>
1849 <td>Computed value:
1851 <td>see individual properties
1853 <tr>
1854 <td>Animatable:
1856 <td>see individual properties
1857 </table>
1859 <p>The <span class=property>‘<a href="#propdef-font"><code
1860 class=property>font</code></a>’</span> property is, except as described
1861 below, a shorthand property for setting <a href="#propdef-font-style"
1862 title="font-style!!property">‘<code
1863 class=property>font-style</code>’</a>, <a href="#propdef-font-variant"
1864 title="font-variant!!property">‘<code
1865 class=property>font-variant</code>’</a>, <a href="#propdef-font-weight"
1866 title="font-weight!!property">‘<code
1867 class=property>font-weight</code>’</a>, <a href="#propdef-font-stretch"
1868 title="font-stretch!!property">‘<code
1869 class=property>font-stretch</code>’</a>, <span class=property>‘<a
1870 href="#propdef-font-size"><code
1871 class=property>font-size</code></a>’</span>, <a class=property
1872 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
1873 class=property>line-height</code>’</a>, <a href="#propdef-font-family"
1874 title="font-family!!property">‘<code
1875 class=property>font-family</code>’</a> at the same place in the
1876 stylesheet. Values for the <a href="#propdef-font-variant"
1877 title="font-variant!!property">‘<code
1878 class=property>font-variant</code>’</a> property may also be included
1879 but only those supported in CSS 2.1, none of the <a
1880 href="#propdef-font-variant" title="font-variant!!property">‘<code
1881 class=property>font-variant</code>’</a> values added in this
1882 specification can be used in the <span class=property>‘<a
1883 href="#propdef-font"><code class=property>font</code></a>’</span>
1884 shorthand:
1886 <pre
1887 class=prod><dfn id=font-variant-css21-values><var><font-variant-css21></var></dfn> = [normal | small-caps]</pre>
1889 <p>The syntax of this property is based on a traditional typographical
1890 shorthand notation to set multiple properties related to fonts.
1892 <p>All subproperties of the ‘<a href="#propdef-font"><code
1893 class=property>font</code></a>’ property are first reset to their
1894 initial values, including those listed above plus <span
1895 class=property>‘<a href="#propdef-font-size-adjust"><code
1896 class=property>font-size-adjust</code></a>’</span>, <span
1897 class=property>‘<a href="#propdef-font-kerning"><code
1898 class=property>font-kerning</code></a>’</span>, subproperties of <a
1899 href="#propdef-font-variant" title="font-variant!!property">‘<code
1900 class=property>font-variant</code>’</a> and and <span>‘<a
1901 href="#propdef-font-language-override"><code
1902 class=property>font-language-override</code></a>’</span>. Then, those
1903 properties that are given explicit values in the <span
1904 class=property>‘<a href="#propdef-font"><code
1905 class=property>font</code></a>’</span> shorthand are set to those
1906 values. For a definition of allowed and initial values, see the previously
1907 defined properties. For reasons of backwards compatibility, it is not
1908 possible to set <span class=property>‘<a
1909 href="#propdef-font-size-adjust"><code
1910 class=property>font-size-adjust</code></a>’</span> to anything other
1911 than its initial value using the <span class=property>‘<a
1912 href="#propdef-font"><code class=property>font</code></a>’</span>
1913 shorthand property; instead, use the individual property.
1915 <div class=example>
1916 <p style="display:none">Example(s):
1918 <p>
1920 <pre>p { font: 12pt/14pt sans-serif }
1921 p { font: 80% sans-serif }
1922 p { font: x-large/110% "new century schoolbook", serif }
1923 p { font: bold italic large Palatino, serif }
1924 p { font: normal small-caps 120%/120% fantasy }
1925 p { font: condensed oblique 12pt "Helvetica Neue", serif; }
1926 </pre>
1928 <p> In the second rule, the font size percentage value (‘<code
1929 class=css>80%</code>’) refers to the computed ‘<a
1930 href="#propdef-font-size"><code class=property>font-size</code></a>’ of
1931 the parent element. In the third rule, the line height percentage
1932 (‘<code class=css>110%</code>’) refers to the font size of the
1933 element itself.
1935 <p>The first three rules do not specify the <a
1936 href="#propdef-font-variant" title="font-variant!!property">‘<code
1937 class=property>font-variant</code>’</a> and <a
1938 href="#propdef-font-weight" title="font-weight!!property">‘<code
1939 class=property>font-weight</code>’</a> explicitly, so these properties
1940 receive their initial values (<span title="normal value">‘<code
1941 class=property>normal</code>’</span>). Notice that the font family name
1942 "new century schoolbook", which contains spaces, is enclosed in quotes.
1943 The fourth rule sets the <a href="#propdef-font-weight"
1944 title="font-weight!!property">‘<code
1945 class=property>font-weight</code>’</a> to ‘<a href="#bold"><code
1946 class=property>bold</code></a>’, the <a href="#propdef-font-style"
1947 title="font-style!!property">‘<code
1948 class=property>font-style</code>’</a> to ‘<a href="#italic"><code
1949 class=property>italic</code></a>’, and implicitly sets <a
1950 href="#propdef-font-variant" title="font-variant!!property">‘<code
1951 class=property>font-variant</code>’</a> to <a
1952 href="#font-variant-normal-value" title="normal!!font-variant">‘<code
1953 class=property>normal</code>’</a>.
1955 <p> The fifth rule sets the <a href="#propdef-font-variant"
1956 title="font-variant!!property">‘<code
1957 class=property>font-variant</code>’</a> (‘<a href="#small-caps"><code
1958 class=property>small-caps</code></a>’), the <span class=property>‘<a
1959 href="#propdef-font-size"><code
1960 class=property>font-size</code></a>’</span> (120% of the parent's font
1961 size), the <a class=property
1962 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
1963 class=property>line-height</code>’</a> (120% of the font size) and the
1964 <a href="#propdef-font-family" title="font-family!!property">‘<code
1965 class=property>font-family</code>’</a> (‘<a href="#fantasy"><code
1966 class=property>fantasy</code></a>’). It follows that the keyword <span
1967 title="normal value">‘<code class=property>normal</code>’</span>
1968 applies to the two remaining properties: <a href="#propdef-font-style"
1969 title="font-style!!property">‘<code
1970 class=property>font-style</code>’</a> and <a
1971 href="#propdef-font-weight" title="font-weight!!property">‘<code
1972 class=property>font-weight</code>’</a>.
1974 <p>The sixth rule sets the <a href="#propdef-font-style"
1975 title="font-style!!property">‘<code
1976 class=property>font-style</code>’</a>, <a href="#propdef-font-stretch"
1977 title="font-stretch!!property">‘<code
1978 class=property>font-stretch</code>’</a>, <span class=property>‘<a
1979 href="#propdef-font-size"><code
1980 class=property>font-size</code></a>’</span>, and <a
1981 href="#propdef-font-family" title="font-family!!property">‘<code
1982 class=property>font-family</code>’</a>, the other font properties being
1983 set to their initial values.
1984 </div>
1986 <p>Since the <a href="#propdef-font-stretch"
1987 title="font-stretch!!property">‘<code
1988 class=property>font-stretch</code>’</a> property was not defined in CSS
1989 2.1, when using <a href="#propdef-font-stretch"
1990 title="font-stretch!!property">‘<code
1991 class=property>font-stretch</code>’</a> values within ‘<a
1992 href="#propdef-font"><code class=property>font</code></a>’ rules,
1993 authors should include a extra version compatible with older user agents:
1995 <pre>p {
1996 font: 80% sans-serif; /* for older user agents */
1997 font: condensed 80% sans-serif;
1998 }</pre>
2000 <p>The following values refer to system fonts:
2002 <dl>
2003 <dt><strong>caption</strong>
2005 <dd>The font used for captioned controls (e.g., buttons, drop-downs,
2006 etc.).
2008 <dt><strong>icon</strong>
2010 <dd>The font used to label icons.
2012 <dt><strong>menu</strong>
2014 <dd>The font used in menus (e.g., dropdown menus and menu lists).
2016 <dt><strong>message-box</strong>
2018 <dd>The font used in dialog boxes.
2020 <dt><strong>small-caption</strong>
2022 <dd>The font used for labeling small controls.
2024 <dt><strong>status-bar</strong>
2026 <dd>The font used in window status bars.
2027 </dl>
2029 <p>System fonts may only be set as a whole; that is, the font family, size,
2030 weight, style, etc. are all set at the same time. These values may then be
2031 altered individually if desired. If no font with the indicated
2032 characteristics exists on a given platform, the user agent should either
2033 intelligently substitute (e.g., a smaller version of the ‘<code
2034 class=property>caption</code>’ font might be used for the ‘<code
2035 class=property>small-caption</code>’ font), or substitute a user agent
2036 default font. As for regular fonts, if, for a system font, any of the
2037 individual properties are not part of the operating system's available
2038 user preferences, those properties should be set to their initial values.
2040 <p>That is why this property is "almost" a shorthand property: system fonts
2041 can only be specified with this property, not with <a
2042 href="#propdef-font-family" title="font-family!!property">‘<code
2043 class=property>font-family</code>’</a> itself, so <span
2044 class=property>‘<a href="#propdef-font"><code
2045 class=property>font</code></a>’</span> allows authors to do more than
2046 the sum of its subproperties. However, the individual properties such as
2047 <a href="#propdef-font-weight" title="font-weight!!property">‘<code
2048 class=property>font-weight</code>’</a> are still given values taken from
2049 the system font, which can be independently varied.
2051 <p>Note that the keywords used for the system fonts listed above are only
2052 treated as keywords when they occur in the initial position, in other
2053 positions the same string is treated as part of the font family name:
2055 <pre> font: menu; /* use the font settings for system menus */
2056 font: large menu; /* use a font family named "menu" */</pre>
2058 <div class=example>
2059 <p style="display:none">Example(s):
2061 <p>
2063 <pre>button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
2064 button p { font: menu }
2065 button p em { font-weight: bolder }
2066 </pre>
2068 <p>If the font used for dropdown menus on a particular system happened to
2069 be, for example, 9-point Charcoal, with a weight of 600, then P elements
2070 that were descendants of BUTTON would be displayed as if this rule were
2071 in effect:
2073 <pre>button p { font: 600 9pt Charcoal }
2074 </pre>
2076 <p>Because the <span class=property>‘<a href="#propdef-font"><code
2077 class=property>font</code></a>’</span> shorthand resets to its initial
2078 value any property not explicitly given a value, this has the same effect
2079 as this declaration:
2081 <pre>button p {
2082 font-style: normal;
2083 font-variant: normal;
2084 font-weight: 600;
2085 font-size: 9pt;
2086 line-height: normal;
2087 font-family: Charcoal
2088 }
2089 </pre>
2090 </div>
2091 <!-- prop: font-synthesis -->
2093 <h3 id=font-synthesis-prop><span class=secno>3.8 </span>Controlling
2094 synthetic faces: the <a href="#propdef-font-synthesis">font-synthesis</a>
2095 property</h3>
2097 <table class=propdef id=namefont-synthesisvaluenone-weight-style>
2098 <tbody>
2099 <tr>
2100 <td>Name:
2102 <td><dfn id=propdef-font-synthesis>font-synthesis</dfn>
2104 <tr>
2105 <td>Value:
2107 <td>none | [ weight || style ]
2109 <tr>
2110 <td>Initial:
2112 <td>weight style
2114 <tr>
2115 <td>Applies to:
2117 <td>all elements
2119 <tr>
2120 <td>Inherited:
2122 <td>yes
2124 <tr>
2125 <td>Percentages:
2127 <td>N/A
2129 <tr>
2130 <td>Media:
2132 <td>visual
2134 <tr>
2135 <td>Computed value:
2137 <td>as specified
2139 <tr>
2140 <td>Animatable:
2142 <td>no
2143 </table>
2145 <p>This property controls whether user agents are allowed to synthesize
2146 bold or oblique font faces when a font family lacks bold or italic faces.
2147 If ‘<a href="#weight"><code class=property>weight</code></a>’ is not
2148 specified, user agents must not synthesize bold faces and if ‘<code
2149 class=property>style</code>’ is not specified user agents must not
2150 synthesize italic faces. A value of ‘<code class=property>none</code>’
2151 disallows all synthetic faces.
2153 <div class=example>
2154 <p>The style rule below disables the use of synthetically obliqued Arabic:</p>
2156 <pre>*:lang(ar) { font-synthesis: none; }
2157 </pre>
2158 </div>
2160 <h2 id=font-resources><span class=secno>4 </span>Font Resources</h2>
2162 <h3 id=font-face-rule><span class=secno>4.1 </span>The <dfn
2163 id=at-font-face-rule style="font-weight: inherit; font-style:
2164 inherit"><code>@font-face</code></dfn> rule</h3>
2166 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule allows
2167 for linking to fonts that are automatically fetched and activated when
2168 needed. This allows authors to select a font that closely matches the
2169 design goals for a given page rather than limiting the font choice to a
2170 set of fonts available on all platforms. A set of font descriptors define
2171 the location of a font resource, either locally or externally, along with
2172 the style characteristics of an individual face. Multiple <a
2173 href="#at-font-face-rule"><code>@font-face</code></a> rules can be used to
2174 construct font families with a variety of faces. Using CSS font matching
2175 rules, a user agent can selectively download only those faces that are
2176 needed for a given piece of text.
2178 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule
2179 consists of the <a href="#at-font-face-rule"><code>@font-face</code></a>
2180 at-keyword followed by a block of descriptor declarations. In terms of the
2181 grammar, this specification defines the following productions:
2183 <pre><dfn id=fontfacerule>font_face_rule</dfn>
2184 : <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>*
2185 ;
2187 <dfn id=descriptordeclaration>descriptor_declaration</dfn>
2188 : <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>
2189 ;</pre>
2191 <p>The following new definitions are introduced:
2193 <pre>- -|\\0{0,4}2d(\r\n|[ \t\r\n\f])?
2194 F f|\\0{0,4}(46|66)(\r\n|[ \t\r\n\f])?</pre>
2196 <p>The following new token is introduced:
2198 <pre>@{F}{O}{N}{T}{-}{F}{A}{C}{E} {return <dfn id=fontfacesym>FONT_FACE_SYM</dfn>;}</pre>
2200 <p>Each <a href="#at-font-face-rule"><code>@font-face</code></a> rule
2201 specifies a value for every font descriptor, either implicitly or
2202 explicitly. Those not given explicit values in the rule take the initial
2203 value listed with each descriptor in this specification. These descriptors
2204 apply solely within the context of the <a
2205 href="#at-font-face-rule"><code>@font-face</code></a> rule in which they
2206 are defined, and do not apply to document language elements. There is no
2207 notion of which elements the descriptors apply to or whether the values
2208 are inherited by child elements. When a given descriptor occurs multiple
2209 times in a given <a href="#at-font-face-rule"><code>@font-face</code></a>
2210 rule, only the last descriptor declaration is used and all prior
2211 declarations for that descriptor are ignored.
2213 <div class=example>
2214 <p>To use a downloadable font called Gentium:</p>
2216 <pre>
2217 @font-face {
2218 font-family: Gentium;
2219 src: url(http://example.com/fonts/Gentium.ttf);
2220 }
2222 p { font-family: Gentium, serif; }
2223 </pre>
2225 <p>The user agent will download Gentium and use it when rendering text
2226 within paragraph elements. If for some reason the site serving the font
2227 is unavailable, the default serif font will be used.</p>
2228 </div>
2230 <p>A given set of <a href="#at-font-face-rule"><code>@font-face</code></a>
2231 rules define a set of fonts available for use within the documents that
2232 contain these rules. When font matching is done, fonts defined using these
2233 rules are considered before other available fonts on a system.
2235 <p>Downloaded fonts are only available to documents that reference them.
2236 The process of activating these fonts must not make them available to
2237 other applications or to documents that don't directly link to the same
2238 font. User agent implementers might consider it convenient to use
2239 downloaded fonts when rendering characters in other documents for which no
2240 other available font exists as part of the <a
2241 href="#system-font-fallback"><em>system font fallback</em></a> procedure.
2242 However, this would cause a security leak since the contents of one page
2243 would be able to affect other pages, something an attacker could use as an
2244 attack vector. These restrictions do not affect caching behavior, fonts
2245 are cached the same way other web resources are cached.
2247 <p>This at-rule follows the forward-compatible parsing rules of CSS. Like
2248 properties in a declaration block, declarations of any descriptors that
2249 are not supported by the user agent must be ignored. <a
2250 href="#at-font-face-rule"><code>@font-face</code></a> rules require a
2251 font-family and src descriptor; if either of these are missing, the <a
2252 href="#at-font-face-rule"><code>@font-face</code></a> rule is invalid and
2253 must be ignored entirely.
2255 <p>In cases where user agents have limited platform resources or implement
2256 the ability to disable downloadable font resources, <a
2257 href="#at-font-face-rule"><code>@font-face</code></a> rules must simply be
2258 ignored; the behavior of individual descriptors as defined in this
2259 specification should not be altered.
2261 <h3 id=font-family-desc><span class=secno>4.2 </span>Font family: the <a
2262 href="#descdef-font-family">font-family</a> descriptor</h3>
2264 <table class=descdef>
2265 <tbody>
2266 <tr>
2267 <td>Name:
2269 <td><dfn id=descdef-font-family
2270 title="font-family!!descriptor">font-family</dfn>
2272 <tr>
2273 <td>Value:
2275 <td><a href="#family-name-value"><var><family-name></var></a>
2277 <tr>
2278 <td><em>Initial:</em>
2280 <td>N/A
2281 </table>
2283 <p>This descriptor defines the font family name that will be used in all
2284 CSS font family name matching. It is required for the <a
2285 href="#at-font-face-rule"><code>@font-face</code></a> rule to be valid. It
2286 overrides the font family names contained in the underlying font data. If
2287 the font family name is the same as a font family available in a given
2288 user's environment, it effectively hides the underlying font for documents
2289 that use the stylesheet. This permits a web author to freely choose
2290 font-family names without worrying about conflicts with font family names
2291 present in a given user's environment. Likewise, platform substitutions
2292 for a given font family name must not be used.
2294 <h3 id=src-desc><span class=secno>4.3 </span>Font reference: the <a
2295 href="#descdef-src">src</a> descriptor</h3>
2297 <table class=descdef>
2298 <tbody>
2299 <tr>
2300 <td>Name:
2302 <td><dfn id=descdef-src>src</dfn>
2304 <tr>
2305 <td>Value:
2307 <td>[ <url> [format(<string> #)]? | <a
2308 href="#font-face-name-value"><var><font-face-name></var></a> ] #
2310 <tr>
2311 <td><em>Initial:</em>
2313 <td>N/A
2314 </table>
2316 <p>This descriptor specifies the resource containing font data. It is
2317 required for the <a href="#at-font-face-rule"><code>@font-face</code></a>
2318 rule to be valid. Its value is a prioritized, comma-separated list of
2319 external references or locally-installed font face names. When a font is
2320 needed the user agent iterates over the set of references listed, using
2321 the first one it can successfully activate. Fonts containing invalid data
2322 or local font faces that are not found are ignored and the user agent
2323 loads the next font in the list.
2325 <p>As with other URLs in CSS, the URL may be relative, in which case it is
2326 resolved relative to the location of the style sheet containing the <a
2327 href="#at-font-face-rule"><code>@font-face</code></a> rule. In the case of
2328 SVG fonts, the URL points to an element within a document containing SVG
2329 font definitions. If the element reference is omitted, a reference to the
2330 first defined font is implied. Similarly, font container formats that can
2331 contain more than one font must load one and only one of the fonts for a
2332 given <a href="#at-font-face-rule"><code>@font-face</code></a> rule.
2333 Fragment identifiers are used to indicate which font to load. If a
2334 container format lacks a defined fragment identifier scheme,
2335 implementations should use a simple 1-based indexing scheme (e.g.
2336 "font-collection#1" for the first font, "font-collection#2" for the second
2337 font).
2339 <pre>
2340 src: url(fonts/simple.ttf); /* load simple.ttf relative to stylesheet location */
2341 src: url(/fonts/simple.ttf); /* load simple.ttf from absolute location */
2342 src: url(fonts.svg#simple); /* load SVG font with id 'simple' */
2343 </pre>
2345 <p>External references consist of a URL, followed by an optional hint
2346 describing the format of the font resource referenced by that URL. The
2347 format hint contains a comma-separated list of format strings that denote
2348 well-known font formats. Conformant user agents must skip downloading a
2349 font resource if the format hints indicate only unsupported or unknown
2350 font formats. If no format hints are supplied, the user agent should
2351 download the font resource.
2353 <pre>
2354 /* load WOFF font if possible, otherwise use OpenType font */
2355 @font-face {
2356 font-family: bodytext;
2357 src: url(ideal-sans-serif.woff) format("woff"),
2358 url(basic-sans-serif.ttf) format("opentype");
2359 }
2360 </pre>
2362 <p>Format strings defined by this specification:
2364 <table class=data id=fontformats>
2365 <thead>
2366 <tr>
2367 <th>String
2369 <th>Font Format
2371 <th>Common extensions
2373 <tbody>
2374 <tr>
2375 <th>"woff"
2377 <td><a href="http://www.w3.org/TR/WOFF/">WOFF (Web Open Font Format)</a>
2379 <td>.woff
2381 <tr>
2382 <th>"truetype"
2384 <td><a
2385 href="http://www.microsoft.com/typography/otspec/default.htm">TrueType</a>
2387 <td>.ttf
2389 <tr>
2390 <th>"opentype"
2392 <td><a
2393 href="http://www.microsoft.com/typography/otspec/default.htm">OpenType</a>
2395 <td>.ttf, .otf
2397 <tr>
2398 <th>"embedded-opentype"
2400 <td><a
2401 href="http://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded
2402 OpenType</a>
2404 <td>.eot
2406 <tr>
2407 <th>"svg"
2409 <td><a href="http://www.w3.org/TR/SVG/fonts.html">SVG Font</a>
2411 <td>.svg, .svgz
2412 </table>
2414 <p>Given the overlap in common usage between TrueType and OpenType, the
2415 format hints "truetype" and "opentype" must be considered as synonymous; a
2416 format hint of "opentype" does not imply that the font contains Postscript
2417 CFF style glyph data or that it contains OpenType layout information (see
2418 <a href="#platform-props-to-css">Appendix A</a> for more background on
2419 this).
2421 <p>When authors would prefer to use a locally available copy of a given
2422 font and download it if it's not, <code>local()</code> can be used. The
2423 locally-installed <dfn
2424 id=font-face-name-value><var><font-face-name></var></dfn> argument
2425 to <code>local()</code> is a format-specific string that uniquely
2426 identifies a single font face within a larger family. The syntax for a <a
2427 href="#font-face-name-value"><var><font-face-name></var></a> is a
2428 unique font face name enclosed by "local(" and ")". The name can
2429 optionally be enclosed in quotes. If unquoted, the unquoted font family
2430 name processing conventions apply; the name must be a sequence of
2431 identifiers separated by whitespace which is converted to a string by
2432 joining the identifiers together separated by a single space.
2434 <pre>
2435 /* regular face of Gentium */
2436 @font-face {
2437 font-family: MyGentium;
2438 src: local(Gentium), /* use locally available Gentium */
2439 url(Gentium.ttf); /* otherwise, download it */
2440 }
2441 </pre>
2443 <p>For OpenType and TrueType fonts, this string is used to match only the
2444 Postscript name or the full font name in the name table of locally
2445 available fonts. Which type of name is used varies by platform and font,
2446 so authors should include both of these names to assure proper matching
2447 across platforms. Platform substitutions for a given font name must not be
2448 used.
2450 <pre>
2451 /* bold face of Gentium */
2452 @font-face {
2453 font-family: MyGentium;
2454 src: local(Gentium Bold), /* full font name */
2455 local(Gentium-Bold), /* Postscript name */
2456 url(GentiumBold.ttf); /* otherwise, download it */
2457 font-weight: bold;
2458 }
2459 </pre>
2461 <p>Just as a <a href="#at-font-face-rule"><code>@font-face</code></a> rule
2462 specifies the characteristics of a single font within a family, the unique
2463 name used with <code>local()</code> specifies a single font, not an entire
2464 font family. Defined in terms of OpenType font data, the Postscript name
2465 is found in the font's <a
2466 href="http://www.microsoft.com/typography/otspec/name.htm">name table</a>,
2467 in the name record with nameID = 6 (see <a href="#OPENTYPE"
2468 rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> for more details). The
2469 Postscript name is the commonly used key for all fonts on OSX and for
2470 Postscript CFF fonts under Windows. The full font name (nameID = 4) is
2471 used as a unique key for fonts with TrueType glyphs on Windows.
2473 <p>For OpenType fonts with multiple localizations of the full font name,
2474 the US English version is used (language ID = 0x409 for Windows and
2475 language ID = 0 for Macintosh) or the first localization when a US English
2476 full font name is not available (the OpenType specification recommends
2477 that <a href="http://www.microsoft.com/typography/otspec/recom.htm">all
2478 fonts minimally include US English names</a>). User agents that also match
2479 other full font names, e.g. matching the Dutch name when the current
2480 system locale is set to Dutch, are considered non-conformant. This is done
2481 not to prefer English but to avoid matching inconsistencies across font
2482 versions and OS localizations, since font style names (e.g. "Bold") are
2483 frequently localized into many languages and the set of localizations
2484 available varies widely across platform and font version. User agents that
2485 match a concatenation of family name (nameID = 1) with style name (nameID
2486 = 2) are considered non-conformant.
2488 <p>This also allows for referencing faces that belong to larger families
2489 that cannot otherwise be referenced.
2491 <div class=example>
2492 <p>Use a local font or reference an SVG font in another document:</p>
2494 <pre>
2495 @font-face {
2496 font-family: Headline;
2497 src: local(Futura-Medium),
2498 url(fonts.svg#MyGeometricModern) format("svg");
2499 }
2500 </pre>
2502 <p>Create an alias for local Japanese fonts on different platforms:</p>
2504 <pre>
2505 @font-face {
2506 font-family: jpgothic;
2507 src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic);
2508 }
2509 </pre>
2511 <p>Reference a font face that cannot be matched within a larger family:</p>
2513 <pre>
2514 @font-face {
2515 font-family: Hoefler Text Ornaments;
2516 /* has the same font properties as Hoefler Text Regular */
2517 src: local(HoeflerText-Ornaments);
2518 }
2519 </pre>
2521 <p>Since localized fullnames never match, a document with the header style
2522 rules below would always render using the default serif font, regardless
2523 whether a particular system locale parameter is set to Finnish or not:</p>
2525 <pre>
2526 @font-face {
2527 font-family: SectionHeader;
2528 src: local("Arial Lihavoitu"); /* Finnish fullname for Arial Bold, should fail */
2529 font-weight: bold;
2530 }
2532 h2 { font-family: SectionHeader, serif; }
2533 </pre>
2535 <p>A conformant user agent would never load the font ‘<code
2536 class=css>gentium.eot</code>’ in the example below, since it is
2537 included in the first definition of the ‘<a href="#descdef-src"><code
2538 class=property>src</code></a>’ descriptor which is overridden by the
2539 second definition in the same <a
2540 href="#at-font-face-rule"><code>@font-face</code></a> rule:</p>
2542 <pre>
2543 @font-face {
2544 font-family: MainText;
2545 src: url(gentium.eot); /* for use with older non-conformant user agents */
2546 src: local("Gentium"), url(gentium.ttf); /* Overrides src definition */
2547 }
2548 </pre>
2549 </div>
2551 <h3 id=font-prop-desc><span class=secno>4.4 </span>Font property
2552 descriptors: the <a href="#descdef-font-style">font-style</a>, <a
2553 href="#descdef-font-weight">font-weight</a>, <a
2554 href="#descdef-font-stretch">font-stretch</a> descriptors</h3>
2556 <table class=descdef>
2557 <tbody>
2558 <tr>
2559 <td>Name:
2561 <td><dfn id=descdef-font-style
2562 title="font-style!!descriptor">font-style</dfn>
2564 <tr>
2565 <td>Value:
2567 <td>normal | italic | oblique
2569 <tr>
2570 <td><em>Initial:</em>
2572 <td>normal
2573 </table>
2575 <table class=descdef>
2576 <tbody>
2577 <tr>
2578 <td>Name:
2580 <td><dfn id=descdef-font-weight
2581 title="font-weight!!descriptor">font-weight</dfn>
2583 <tr>
2584 <td>Value:
2586 <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
2588 <tr>
2589 <td><em>Initial:</em>
2591 <td>normal
2592 </table>
2594 <table class=descdef>
2595 <tbody>
2596 <tr>
2597 <td>Name:
2599 <td><dfn id=descdef-font-stretch
2600 title="font-stretch!!descriptor">font-stretch</dfn>
2602 <tr>
2603 <td>Value:
2605 <td>normal | ultra-condensed | extra-condensed | condensed |
2606 semi-condensed | semi-expanded | expanded | extra-expanded |
2607 ultra-expanded
2609 <tr>
2610 <td><em>Initial:</em>
2612 <td>normal
2613 </table>
2615 <p>These descriptors define the characteristics of a font face and are used
2616 in the process of matching styles to specific faces. For a font family
2617 defined with several <a
2618 href="#at-font-face-rule"><code>@font-face</code></a> rules, user agents
2619 can either download all faces in the family or use these descriptors to
2620 selectively download font faces that match actual styles used in document.
2621 The values for these descriptors are the same as those for the
2622 corresponding font properties except that relative keywords are not
2623 allowed, ‘<a href="#bolder"><code class=property>bolder</code></a>’
2624 and ‘<a href="#lighter"><code class=property>lighter</code></a>’. If
2625 these descriptors are omitted, initial values are assumed.
2627 <p>The value for these font face style attributes is used in place of the
2628 style implied by the underlying font data. This allows authors to combine
2629 faces in flexible combinations, even in situations where the original font
2630 data was arranged differently. User agents that implement synthetic
2631 bolding and obliquing must only apply synthetic styling in cases where the
2632 font descriptors imply this is needed, rather than based on the style
2633 attributes implied by the font data.
2635 <h3 id=unicode-range-desc><span class=secno>4.5 </span>Character range: the
2636 <a href="#descdef-unicode-range">unicode-range</a> descriptor</h3>
2638 <table class=descdef>
2639 <tbody>
2640 <tr>
2641 <td>Name:
2643 <td><dfn id=descdef-unicode-range>unicode-range</dfn>
2645 <tr>
2646 <td>Value:
2648 <td><a href="#urange-value"><var><urange></var></a> #
2650 <tr>
2651 <td><em>Initial:</em>
2653 <td>U+0-10FFFF
2654 </table>
2656 <p>This descriptor defines the set of Unicode codepoints that may be
2657 supported by the font face for which it is declared. The descriptor value
2658 is a comma-delimited list of Unicode range (<a
2659 href="#urange-value"><var><urange></var></a>) values. The union of
2660 these ranges defines the set of codepoints that serves as a hint for user
2661 agents when deciding whether or not to download a font resource for a
2662 given text run.
2664 <p>Each <dfn id=urange-value><var><urange></var></dfn> value is a <a
2665 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code
2666 title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token made up of a
2667 "U+" or "u+" prefix followed by a codepoint range in one of the three
2668 forms listed below. Ranges that do not fit one of the these forms are
2669 invalid and cause the declaration to be ignored.
2671 <dl>
2672 <dt>single codepoint (e.g. U+416)
2674 <dd>a valid Unicode codepoint, represented as one to six hexadecimal
2675 digits
2677 <dt>interval range (e.g. U+400-4ff)
2679 <dd>represented as two hyphen-separated valid Unicode codepoints
2680 indicating the inclusive start and end codepoints of a range
2682 <dt>wildcard range (e.g. U+4??)
2684 <dd>defined by the set of codepoints implied when trailing ‘<code
2685 class=css>?</code>’ characters signify any hexadeximal digit
2686 </dl>
2688 <p>Individual codepoints are written using hexadecimal values that
2689 correspond to <a href="http://www.unicode.org/charts/">Unicode character
2690 codepoints</a>. Valid Unicode codepoint values vary between 0 and 10FFFF
2691 inclusive. Digit values of codepoints are ASCII case-insensitive. For
2692 interval ranges, the start and end codepoints are valid Unicode values and
2693 the end codepoint is greater than or equal to the start codepoint.
2695 <p>Wildcard ranges specified with ‘?’ that lack an initial digit (e.g.
2696 "U+???") are valid and equivalent to a wildcard range with an initial zero
2697 digit (e.g. "U+0???" = "U+0000-0FFF"). Wildcard ranges that extend beyond
2698 the range of valid Unicode codepoints are invalid. Because of this, the
2699 maximum number of trailing ‘<code class=css>?</code>’ wildcard
2700 characters is five, even though the <a
2701 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code
2702 title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token accepts six.
2704 <p>Within the comma-delimited list of Unicode ranges in a ‘<a
2705 href="#descdef-unicode-range"><code
2706 class=property>unicode-range</code></a>’ descriptor declaration, ranges
2707 may overlap. The union of these ranges defines the set of codepoints for
2708 which the corresponding font may be used. User agents must not download or
2709 use the font for codepoints outside this set. User agents may normalize
2710 the list of ranges into a list that is different but represents the same
2711 set of codepoints.
2713 <p>The associated font might not contain glyphs for the entire set of
2714 codepoints defined by the ‘<a href="#descdef-unicode-range"><code
2715 class=property>unicode-range</code></a>’ descriptor. When the font is
2716 used, the <dfn id=effective-character-map>effective character map</dfn> is
2717 the intersection of the codepoints defined by ‘<a
2718 href="#descdef-unicode-range"><code
2719 class=property>unicode-range</code></a>’ with the font's <a
2720 href="#character-map"><em>character map</em></a>. This allows authors to
2721 define supported ranges in terms of broad ranges without worrying about
2722 the precise codepoint ranges supported by the underlying font.
2724 <h3 id=composite-fonts><span class=secno>4.6 </span>Using character ranges
2725 to define composite fonts</h3>
2727 <p>Multiple <a href="#at-font-face-rule"><code>@font-face</code></a> rules
2728 with different unicode ranges for the same family and style descriptor
2729 values can be used to create composite fonts that mix the glyphs from
2730 different fonts for different scripts. This can be used to combine fonts
2731 that only contain glyphs for a single script (e.g. Latin, Greek, Cyrillic)
2732 or it can be used by authors as a way of segmenting a font into fonts for
2733 commonly used characters and less frequently used characters. Since the
2734 user agent will only pull down the fonts it needs this helps reduce page
2735 bandwidth.
2737 <p>If the unicode ranges overlap for a set of <a
2738 href="#at-font-face-rule"><code>@font-face</code></a> rules with the same
2739 family and style descriptor values, the rules are ordered in the reverse
2740 order they were defined; the last rule defined is the first to be checked
2741 for a given character.
2743 <p>Example ranges for specific languages or characters:
2745 <dl>
2746 <dt>unicode-range: U+A5;
2748 <dd>a single code point, the yen/yuan symbol
2750 <dt>unicode-range: U+0-7F;
2752 <dd>code range for basic ASCII characters
2754 <dt>unicode-range: U+590-5ff;
2756 <dd>code range for Hebrew characters
2758 <dt>unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;
2760 <dd>code range for Japanese kanji, hiragana and katakana characters plus
2761 yen/yuan symbol
2762 </dl>
2764 <div class=example>
2765 <p>The BBC provides news services in a wide variety of languages, many
2766 that are not well supported across all platforms. Using an <a
2767 href="#at-font-face-rule"><code>@font-face</code></a> rule, the BBC could
2768 provide a font for any of these languages, as it already does via a
2769 manual font download.</p>
2771 <pre>
2772 @font-face {
2773 font-family: BBCBengali;
2774 src: url(fonts/BBCBengali.ttf) format("opentype");
2775 unicode-range: U+00-FF, U+980-9FF;
2776 }
2777 </pre>
2778 </div>
2780 <div class=example>
2781 <p>Technical documents often require a wide range of symbols. The STIX
2782 Fonts project is one project aimed at providing fonts to support a wide
2783 range of technical typesetting in a standardized way. The example below
2784 shows the use of a font that provides glyphs for many of the mathematical
2785 and technical symbol ranges within Unicode:</p>
2787 <pre>
2788 @font-face {
2789 font-family: STIXGeneral;
2790 src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
2791 unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
2792 }
2793 </pre>
2794 </div>
2796 <div class=example>
2797 <p>This example shows how an author can override the glyphs used for Latin
2798 characters in a Japanese font with glyphs from a different font. The
2799 first rule specifies no range so it defaults to the entire range. The
2800 range specified in the second rule overlaps but takes precedence because
2801 it is defined later.</p>
2803 <pre>
2804 @font-face {
2805 font-family: JapaneseWithGentium;
2806 src: local(MSMincho);
2807 /* no range specified, defaults to entire range */
2808 }
2810 @font-face {
2811 font-family: JapaneseWithGentium;
2812 src: url(../fonts/Gentium.ttf);
2813 unicode-range: U+0-2FF;
2814 }
2815 </pre>
2816 </div>
2818 <div class=example>
2819 <p>Consider a family constructed to optimize bandwidth by separating out
2820 Latin, Japanese and other characters into different font files:</p>
2822 <pre>
2823 /* fallback font - size: 4.5MB */
2824 @font-face {
2825 font-family: DroidSans;
2826 src: url(DroidSansFallback.ttf);
2827 /* no range specified, defaults to entire range */
2828 }
2830 /* Japanese glyphs - size: 1.2MB */
2831 @font-face {
2832 font-family: DroidSans;
2833 src: url(DroidSansJapanese.ttf);
2834 unicode-range: U+3000-9FFF, U+ff??;
2835 }
2837 /* Latin, Greek, Cyrillic along with some
2838 punctuation and symbols - size: 190KB */
2839 @font-face {
2840 font-family: DroidSans;
2841 src: url(DroidSans.ttf);
2842 unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
2843 }
2844 </pre>
2846 <p>For simple Latin text, only the font for Latin characters is
2847 downloaded:</p>
2849 <pre>
2850 body { font-family: DroidSans; }
2852 <p>This is that</p>
2853 </pre>
2855 <p>In this case the user agent first checks the unicode-range for the font
2856 containing Latin characters (DroidSans.ttf). Since all the characters
2857 above are in the range U+0-5FF, the user agent downloads the font and
2858 renders the text with that font.</p>
2860 <p>Next, consider text that makes use of an arrow character (⇨):</p>
2862 <pre>
2863 <p>This &#x21e8; that<p>
2864 </pre>
2866 <p>The user agent again first checks the unicode-range of the font
2867 containing Latin characters. Since U+2000-2300 includes the arrow code
2868 point (U+21E8), the user agent downloads the font. For this character
2869 however the Latin font does not have a matching glyph, so the effective
2870 unicode-range used for font matching excludes this code point. Next, the
2871 user agent evaluates the Japanese font. The unicode-range for the
2872 Japanese font, U+3000-9FFF and U+ff??, does not include U+21E8, so the
2873 user agent does not download the Japanese font. Next the fallback font is
2874 considered. The <a href="#at-font-face-rule"><code>@font-face</code></a>
2875 rule for the fallback font does not define unicode-range so its value
2876 defaults to the range of all Unicode code points. The fallback font is
2877 downloaded and used to render the arrow character.</p>
2878 </div>
2880 <h3 id=font-rend-desc><span class=secno>4.7 </span>Font features: the <a
2881 href="#descdef-font-variant">font-variant</a> and <a
2882 href="#descdef-font-feature-settings">font-feature-settings</a>
2883 descriptors</h3>
2885 <table class=descdef>
2886 <tbody>
2887 <tr>
2888 <td>Name:
2890 <td><dfn id=descdef-font-variant
2891 title="font-variant!!descriptor">font-variant</dfn>
2893 <tr>
2894 <td>Value:
2896 <td><a href="#font-variant-normal-value"
2897 title="normal!!font-variant">normal</a> | <a
2898 href="#font-variant-none-value" title="none!!font-variant">none</a> | [
2899 <a href="#common-lig-values"><var><common-lig-values></var></a>
2900 || <a
2901 href="#discretionary-lig-values"><var><discretionary-lig-values></var></a>
2902 || <a
2903 href="#historical-lig-values"><var><historical-lig-values></var></a>
2904 || <a
2905 href="#contextual-alt-values"><var><contextual-alt-values></var></a>
2906 || <a href="#stylistic"><var
2907 title=stylistic>stylistic(<feature-value-name>)</var></a> || <a
2908 href="#historical-forms"><var>historical-forms</var></a> || <a
2909 href="#styleset"><var
2910 title=styleset>styleset(<feature-value-name> #)</var></a> || <a
2911 href="#character-variant"><var
2912 title=character-variant>character-variant(<feature-value-name>
2913 #)</var></a> || <a href="#swash"><var
2914 title=swash>swash(<feature-value-name>)</var></a> || <a
2915 href="#ornaments"><var
2916 title=ornaments>ornaments(<feature-value-name>)</var></a> || <a
2917 href="#annotation"><var
2918 title=annotation>annotation(<feature-value-name>)</var></a> || [
2919 <a href="#small-caps"><i>small-caps</i></a> | <a
2920 href="#all-small-caps"><i>all-small-caps</i></a> | <a
2921 href="#petite-caps"><i>petite-caps</i></a> | <a
2922 href="#all-petite-caps"><i>all-petite-caps</i></a> | <a
2923 href="#unicase"><i>unicase</i></a> | <a
2924 href="#titling-caps"><i>titling-caps</i></a> ] || <a
2925 href="#numeric-figure-values"><var><numeric-figure-values></var></a>
2926 || <a
2927 href="#numeric-spacing-values"><var><numeric-spacing-values></var></a>
2928 || <a
2929 href="#numeric-fraction-values"><var><numeric-fraction-values></var></a>
2930 || <a href="#ordinal"><i>ordinal</i></a> || <a
2931 href="#slashed-zero"><i>slashed-zero</i></a> || <a
2932 href="#east-asian-variant-values"><var><east-asian-variant-values></var></a>
2933 || <a
2934 href="#east-asian-width-values"><var><east-asian-width-values></var></a>
2935 || <a href="#ruby"><i>ruby</i></a> ]
2937 <tr>
2938 <td><em>Initial:</em>
2940 <td>normal
2941 </table>
2943 <table class=descdef>
2944 <tbody>
2945 <tr>
2946 <td>Name:
2948 <td><dfn id=descdef-font-feature-settings
2949 title="font-feature-settings!!descriptor">font-feature-settings</dfn>
2951 <tr>
2952 <td>Value:
2954 <td><a href="#font-feature-settings-normal-value"
2955 title="normal!!font-feature-settings">normal</a> | <a
2956 href="#feature-tag-value"><var><feature-tag-value></var></a> #
2958 <tr>
2959 <td><em>Initial:</em>
2961 <td>normal
2962 </table>
2964 <p>These descriptors define initial settings that apply when the font
2965 defined by an <a href="#at-font-face-rule"><code>@font-face</code></a>
2966 rule is rendered. They do not affect font selection. Values are identical
2967 to those defined for the corresponding <a href="#propdef-font-variant"
2968 title="font-variant!!property">‘<code
2969 class=property>font-variant</code>’</a> and <a
2970 href="#propdef-font-feature-settings"
2971 title="font-feature-settings!!property">‘<code
2972 class=property>font-feature-settings</code>’</a> properties defined
2973 below except that the value ‘<code class=property>inherit</code>’ is
2974 omitted. When multiple font feature descriptors or properties are used,
2975 the cumulative effect on text rendering is detailed in the section <a
2976 href="#font-feature-resolution">Font Feature Resolution</a> below. In
2977 cases where specific values define synthesized fallback for certain <a
2978 href="#propdef-font-variant" title="font-variant!!property">‘<code
2979 class=property>font-variant</code>’</a> subproperties, the same
2980 synthesized fallback applies when used within those values are used with
2981 the <a href="#descdef-font-style" title="font-style!!descriptor">‘<code
2982 class=property>font-variant</code>’</a> descriptor.
2984 <h3 id=font-face-loading><span class=secno>4.8 </span>Font loading
2985 guidelines</h3>
2987 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule is
2988 designed to allow lazy loading of font resources that are only downloaded
2989 when used within a document. A stylesheet can include <a
2990 href="#at-font-face-rule"><code>@font-face</code></a> rules for a library
2991 of fonts of which only a select set are used; user agents must only
2992 download those fonts that are referred to within the style rules
2993 applicable to a given page. User agents that download all fonts defined in
2994 <a href="#at-font-face-rule"><code>@font-face</code></a> rules without
2995 considering whether those fonts are in fact used within a page are
2996 considered non-conformant. In cases where a font might be downloaded in
2997 character fallback cases, user agents may download a font if it's
2998 contained within the computed value of <a href="#propdef-font-family"
2999 title="font-family!!property">‘<code
3000 class=property>font-family</code>’</a> for a given text run.
3002 <pre>
3003 @font-face {
3004 font-family: GeometricModern;
3005 src: url(font.ttf);
3006 }
3008 p {
3009 /* font will be downloaded for pages with p elements */
3010 font-family: GeometricModern, sans-serif;
3011 }
3013 h2 {
3014 /* font may be downloaded for pages with h2 elements, even if Futura is available locally */
3015 font-family: Futura, GeometricModern, sans-serif;
3016 }
3017 </pre>
3019 <p>In cases where textual content is loaded before downloadable fonts are
3020 available, user agents may render text as it would be rendered if
3021 downloadable font resources are not available or they may render text
3022 transparently with fallback fonts to avoid a flash of text using a
3023 fallback font. In cases where the font download fails user agents must
3024 display text, simply leaving transparent text is considered non-conformant
3025 behavior. Authors are advised to use fallback fonts in their font lists
3026 that closely match the metrics of the downloadable fonts to avoid large
3027 page reflows where possible.
3029 <h3 id=same-origin-restriction><span class=secno>4.9 </span>Same-origin
3030 restriction for fonts</h3>
3032 <h4 id=default-same-origin-restriction><span class=secno>4.9.1
3033 </span>Default same-origin restriction</h4>
3034 <!-- TPAC 2011 Resolution to require same-origin restriction for loading fonts:
3035 http://lists.w3.org/Archives/Public/www-style/2011Nov/0711.html
3036 http://www.w3.org/2011/10/31-webapps-minutes.html#item02
3037 -->
3039 <p>User agents must implement a same-origin restriction when loading fonts
3040 via the <a href="#at-font-face-rule"><code>@font-face</code></a>
3041 mechanism. This restriction limits the loading of fonts for a given
3042 document to fonts loaded from the same origin. Fonts can only be loaded
3043 via the same host, port, and method combination as the containing
3044 document, using the <a
3045 href="http://www.w3.org/TR/html5/browsers.html#origin">origin matching
3046 algorithm</a> described in the <a href="#HTML5"
3047 rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> specification. The origin of
3048 the stylesheet containing <a
3049 href="#at-font-face-rule"><code>@font-face</code></a> rules is not used
3050 when deciding whether a font is same origin or not, only the origin of the
3051 containing document is used. The restriction applies to all font types.
3053 <p>Given a document located at http://example.com/page.html, fonts defined
3054 with ‘<a href="#descdef-src"><code class=property>src</code></a>’
3055 definitions considered cross origin must not be loaded:
3057 <pre>
3058 /* same origin (i.e. domain, scheme, port match document) */
3059 src: url(fonts/simple.ttf);
3060 src: url(//fonts/simple.ttf);
3062 /* cross origin, different scheme */
3063 src: url(https://example.com/fonts/simple.ttf);
3065 /* cross origin, different domain */
3066 src: url(http://another.example.com/fonts/simple.ttf);
3067 </pre>
3069 <h4 id=allowing-cross-origin-font-loading><span class=secno>4.9.2
3070 </span>Allowing cross-origin font loading</h4>
3072 <p>User agents must also implement the ability to relax this restriction
3073 using cross-site origin controls <a href="#CORS"
3074 rel=biblioentry>[CORS]<!--{{!CORS}}--></a> for fonts loaded via HTTP.
3075 Sites can explicitly allow cross-site downloading of font data using the
3076 <code>Access-Control-Allow-Origin</code> HTTP header. For other schemes,
3077 no explicit relaxation mechanism is defined or required.
3079 <p>For font loads, user agents must use the <a
3080 href="http://www.w3.org/TR/html5/infrastructure.html#cors-enabled-fetch">potentially
3081 CORS-enabled fetch</a> method defined by the <a href="#HTML5"
3082 rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> specification for URL's
3083 defined within @font-face rules. When fetching, user agents must use
3084 "Anonymous" mode, set the referrer source to the stylesheet's URL and set
3085 the origin to the URL of the containing document.
3087 <h2 id=font-matching-algorithm><span class=secno>5 </span>Font Matching
3088 Algorithm</h2>
3090 <p>The algorithm below describes how fonts are associated with individual
3091 runs of text. For each character in the run a font family is chosen and a
3092 particular font face is selected containing a glyph for that character.
3094 <h3 id=font-family-casing><span class=secno>5.1 </span>Case sensitivity of
3095 font family names</h3>
3097 <p>As part of the font matching algorithm outlined below, user agents must
3098 match font family names used in style rules with actual font family names
3099 contained in fonts available in a given environment or with font family
3100 names defined in <a href="#at-font-face-rule"><code>@font-face</code></a>
3101 rules. User agents must match these names case insensitively, using the
3102 "Default Caseless Matching" algorithm outlined in the Unicode
3103 specification <a href="#UNICODE6"
3104 rel=biblioentry>[UNICODE6]<!--{{!UNICODE6}}--></a>. This algorithm is
3105 detailed in section 3.13 entitled "Default Case Algorithms". Specifically,
3106 the algorithm must be applied without normalizing the strings involved and
3107 without applying any language-specific tailorings. The case folding method
3108 specified by this algorithm uses the case mappings with status field
3109 ‘<code class=property>C</code>’ or ‘<code class=property>F</code>’
3110 in the CaseFolding.txt file of the Unicode Character Database.
3112 <p class=note> For authors this means that font family names are matched
3113 case insensitively, whether those names exist in a platform font or in the
3114 <a href="#at-font-face-rule"><code>@font-face</code></a> rules contained
3115 in a stylesheet. Authors should take care to ensure that names use a
3116 character sequence consistent with the actual font family name,
3117 particularly when using combining characters such as diacritical marks.
3118 For example, a family name that contains an uppercase A (U+0041) followed
3119 by a combining ring (U+030A) will <strong>not</strong> match a name that
3120 looks identical but which uses the precomposed lowercase a-ring character
3121 (U+00E5) instead of the combining sequence.
3123 <p class=note> Implementors should take care to verify that a given
3124 caseless string comparison implementation uses this precise algorithm and
3125 not assume that a given platform string matching routine follows it, as
3126 many of these have locale-specific behavior or use some level of string
3127 normalization.
3129 <h3 id=font-style-matching><span class=secno>5.2 </span>Matching font
3130 styles</h3>
3132 <p>The procedure for choosing a font for a given character in a run of text
3133 consists of iterating over the font families named by the <a
3134 href="#propdef-font-family" title="font-family!!property">‘<code
3135 class=property>font-family</code>’</a> property, selecting a font face
3136 with the appropriate style based on other font properties and then
3137 determining whether a glyph exists for the given character. This is done
3138 using the <dfn id=character-map>character map</dfn> of the font, data
3139 which maps characters to the default glyph for that character. A font is
3140 considered to <dfn id=support>support</dfn> a given character if (1) the
3141 character is contained in the font's <a
3142 href="#character-map"><em>character map</em></a> and (2) if required by
3143 the containing script, shaping information is available for that
3144 character.
3146 <p>Some legacy fonts may include a given character in the <a
3147 href="#character-map"><em>character map</em></a> but lack the shaping
3148 information (e.g. <a
3149 href="http://www.microsoft.com/typography/otspec/ttochap1.htm">OpenType
3150 layout tables</a> or <a
3151 href="http://scripts.sil.org/cms/scripts/page.php?site_id=projects&item_id=graphite_techAbout">Graphite
3152 tables</a>) necessary for correctly rendering text runs containing that
3153 character.
3155 <p>Codepoint sequences consisting of a base character followed by a
3156 sequence of combining characters are treated slightly differently, see the
3157 section on <a href="#cluster-matching">cluster matching</a> below.
3159 <p>For this procedure, the <dfn id=default-face>default face</dfn> for a
3160 given font family is defined to be the face that would be selected if all
3161 font style properties were set to their initial value.
3163 <ol id=fontmatchingalg>
3164 <li>Using the computed font property values for a given element, the user
3165 agent starts with the first family name specified by the <a
3166 href="#propdef-font-family" title="font-family!!property">‘<code
3167 class=property>font-family</code>’</a> property.
3169 <li>If the family name is a generic family keyword, the user agent looks
3170 up the appropriate font family name to be used. User agents may choose
3171 the generic font family to use based on the language of the containing
3172 element or the Unicode range of the character.
3174 <li>For other family names, the user agent attempts to find the family
3175 name among fonts defined via <a
3176 href="#at-font-face-rule"><code>@font-face</code></a> rules and then
3177 among available system fonts, matching names with a <a
3178 href="#font-family-casing">case-insensitive comparison</a> as outlined in
3179 the section above. On systems containing fonts with multiple localized
3180 font family names, user agents must match any of these names independent
3181 of the underlying system locale or platform API used. If the font
3182 resources defined for a given face in an <a
3183 href="#at-font-face-rule"><code>@font-face</code></a> rule are either not
3184 available or contain invalid font data, then the face should be treated
3185 as not present in the family. If no faces are present for a family
3186 defined via <a href="#at-font-face-rule"><code>@font-face</code></a>
3187 rules, the family should be treated as missing; matching a platform font
3188 with the same name must not occur in this case.
3190 <li>If a font family match occurs, the user agent assembles the set of
3191 font faces in that family and then narrows the set to a single face using
3192 other font properties in the order given below. A group of faces defined
3193 via <a href="#at-font-face-rule"><code>@font-face</code></a> rules with
3194 identical font descriptor values but differing ‘<a
3195 href="#descdef-unicode-range"><code
3196 class=property>unicode-range</code></a>’ values are considered to be a
3197 single <dfn id=composite-face>composite face</dfn> for this step:
3198 <ol id=fontstylematchingalg>
3199 <li><a href="#propdef-font-stretch"
3200 title="font-stretch!!property">‘<code
3201 class=property>font-stretch</code>’</a> is tried first. If the
3202 matching set contains faces with width values matching the <a
3203 href="#propdef-font-stretch" title="font-stretch!!property">‘<code
3204 class=property>font-stretch</code>’</a> value, faces with other width
3205 values are removed from the matching set. If there is no face that
3206 exactly matches the width value the nearest width is used instead. If
3207 the value of <a href="#propdef-font-stretch"
3208 title="font-stretch!!property">‘<code
3209 class=property>font-stretch</code>’</a> is <a
3210 href="#font-stretch-normal-value" title="normal!!font-stretch">‘<code
3211 class=property>normal</code>’</a> or one of the condensed values,
3212 narrower width values are checked first, then wider values. If the
3213 value of <a href="#propdef-font-stretch"
3214 title="font-stretch!!property">‘<code
3215 class=property>font-stretch</code>’</a> is one of the expanded
3216 values, wider values are checked first, followed by narrower values.
3217 Once the closest matching width has been determined by this process,
3218 faces with other widths are removed from the matching set.
3220 <li><a href="#propdef-font-style" title="font-style!!property">‘<code
3221 class=property>font-style</code>’</a> is tried next. If the value of
3222 <a href="#propdef-font-style" title="font-style!!property">‘<code
3223 class=property>font-style</code>’</a> is ‘<a href="#italic"><code
3224 class=property>italic</code></a>’, italic faces are checked first,
3225 then oblique, then normal faces. If the value is ‘<a
3226 href="#oblique"><code class=property>oblique</code></a>’, oblique
3227 faces are checked first, then italic faces and then normal faces. If
3228 the value is <a href="#font-style-normal-value"
3229 title="normal!!font-style">‘<code
3230 class=property>normal</code>’</a>, normal faces are checked first,
3231 then oblique faces, then italic faces. Faces with other style values
3232 are excluded from the matching set. User agents are permitted to
3233 distinguish between italic and oblique faces within platform font
3234 families but this is not required, so all italic or oblique faces may
3235 be treated as italic faces. However, within font families defined via
3236 <a href="#at-font-face-rule"><code>@font-face</code></a> rules, italic
3237 and oblique faces must be distinguished using the value of the <a
3238 href="#descdef-font-style" title="font-style!!descriptor">‘<code
3239 class=property>font-style</code>’</a> descriptor. For families that
3240 lack any italic or oblique faces, users agents may create artificial
3241 oblique faces, if this is permitted by the value of the ‘<a
3242 href="#propdef-font-synthesis"><code
3243 class=property>font-synthesis</code></a>’ property.
3245 <li><a href="#propdef-font-weight"
3246 title="font-weight!!property">‘<code
3247 class=property>font-weight</code>’</a> is matched next, so it will
3248 always reduce the matching set to a single font face. If bolder/lighter
3249 relative weights are used, the effective weight is calculated based on
3250 the inherited weight value, as described in the definition of the <a
3251 href="#propdef-font-weight" title="font-weight!!property">‘<code
3252 class=property>font-weight</code>’</a> property. Given the desired
3253 weight and the weights of faces in the matching set after the steps
3254 above, if the desired weight is available that face matches. Otherwise,
3255 a weight is chosen using the rules below:
3256 <ul>
3257 <li>If the desired weight is less than 400, weights below the desired
3258 weight are checked in descending order followed by weights above the
3259 desired weight in ascending order until a match is found.
3261 <li>If the desired weight is greater than 500, weights above the
3262 desired weight are checked in ascending order followed by weights
3263 below the desired weight in descending order until a match is found.
3265 <li>If the desired weight is 400, 500 is checked first and then the
3266 rule for desired weights less than 400 is used.
3268 <li>If the desired weight is 500, 400 is checked first and then the
3269 rule for desired weights less than 400 is used.
3270 </ul>
3272 <li><span class=property>‘<a href="#propdef-font-size"><code
3273 class=property>font-size</code></a>’</span> must be matched within a
3274 UA-dependent margin of tolerance. (Typically, sizes for scalable fonts
3275 are rounded to the nearest whole pixel, while the tolerance for
3276 bitmapped fonts could be as large as 20%.) Further computations, e.g.,
3277 by ‘<code class=property>em</code>’ values in other properties, are
3278 based on the <span class=property>‘<a href="#propdef-font-size"><code
3279 class=property>font-size</code></a>’</span> value that is used, not
3280 the one that is specified.
3281 </ol>
3283 <li>
3284 <p>If the matched face is defined via <a
3285 href="#at-font-face-rule"><code>@font-face</code></a> rules, user agents
3286 must use the procedure below to select a single font:
3288 <ol>
3289 <li>If the font resource has not been loaded and the range of characters
3290 defined by the ‘<a href="#descdef-unicode-range"><code
3291 class=property>unicode-range</code></a>’ descriptor value includes
3292 the character in question, load the font.
3294 <li>After downloading, if the <a
3295 href="#effective-character-map"><em>effective character map</em></a>
3296 supports the character in question, select that font.
3297 </ol>
3299 <p>When the matched face is a <a href="#composite-face"><em>composite
3300 face</em></a>, user agents must use the procedure above on each of the
3301 faces in the <a href="#composite-face"><em>composite face</em></a> in
3302 reverse order of <a
3303 href="#at-font-face-rule"><code>@font-face</code></a> rule definition.</p>
3305 <p>While the download occurs, user agents may either wait until the font
3306 is downloaded or render once with substituted font metrics and render
3307 again once the font is downloaded.</p>
3309 <li>
3310 <p>If no matching face exists or the matched face does not contain a
3311 glyph for the character to be rendered, the next family name is selected
3312 and the previous three steps repeated. Glyphs from other faces in the
3313 family are not considered. The only exception is that user agents may
3314 optionally substitute a synthetically obliqued version of the <a
3315 href="#default-face"><em>default face</em></a> if that face supports a
3316 given glyph and synthesis of these faces is permitted by the value of
3317 the ‘<a href="#propdef-font-synthesis"><code
3318 class=property>font-synthesis</code></a>’ property. For example, a
3319 synthetic italic version of the regular face may be used if the italic
3320 face doesn't support glyphs for Arabic.</p>
3321 <!-- resolution on the above: http://lists.w3.org/Archives/Public/www-style/2012Nov/0292.html -->
3324 <li>If there are no more font families to be evaluated and no matching
3325 face has been found, then the user agent performs a <dfn
3326 id=system-font-fallback>system font fallback</dfn> procedure to find the
3327 best match for the character to be rendered. The result of this procedure
3328 may vary across user agents.
3330 <li>If a particular character cannot be displayed using any font, the user
3331 agent should indicate by some means that a character is not being
3332 displayed, displaying either a symbolic representation of the missing
3333 glyph (e.g. using a <a
3334 href="http://en.wikipedia.org/wiki/Last_resort_font">Last Resort
3335 Font</a>) or using the missing character glyph from a default font.
3336 </ol>
3338 <p>Optimizations of this process are allowed provided that an
3339 implementation behaves as if the algorithm had been followed exactly.
3340 Matching occurs in a well-defined order to insure that the results are as
3341 consistent as possible across user agents, given an identical set of
3342 available fonts and rendering technology.
3344 <p>The <dfn id=first-available-font>first available font</dfn>, used in the
3345 definition of <a
3346 href="http://www.w3.org/TR/css3-values/#font-relative-lengths"><em>font-relative
3347 lengths</em></a> such as ‘<code class=property>ex</code>’ and ‘<code
3348 class=property>ch</code>’, is defined to be the first available font
3349 that would match any character given font families in the ‘<code
3350 class=property>font-family</code>’ list (or a user agent's default font
3351 if none are available).
3353 <h3 id=cluster-matching><span class=secno>5.3 </span>Cluster matching</h3>
3355 <p>When text contains characters such as combining marks, ideally the base
3356 character should be rendered using the same font as the mark, this assures
3357 proper placement of the mark. For this reason, the font matching algorithm
3358 for clusters is more specialized than the general case of matching a
3359 single character by itself. For sequences containing variation selectors,
3360 which indicate the precise glyph to be used for a given character, user
3361 agents always attempt <a href="#system-font-fallback"><em>system font
3362 fallback</em></a> to find the appropriate glyph before using the default
3363 glyph of the base character.
3365 <p>A sequence of codepoints containing combining mark or other modifiers is
3366 termed a grapheme cluster (see <a href="#CSS3TEXT"
3367 rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a> for a more complete
3368 description). For a given cluster containing a base character, <em>b</em>
3369 and a sequence of combining characters <em>c1, c2…</em>, the entire
3370 cluster is matched using these steps:
3372 <ol>
3373 <li>For each family in the font list, a face is chosen using the style
3374 selection rules defined in the previous section.
3375 <ol>
3376 <li>If all characters in the sequence <em>b + c1 + c2 …</em> are
3377 completely supported by the font, select this font for the sequence.
3379 <li>If a sequence of multiple codepoints is canonically equivalent to a
3380 single character and the font <a href="#support"><em
3381 title=support>supports</em></a> that character, select this font for
3382 the sequence.
3383 </ol>
3385 <li>If no font was found in the font list in step 1:
3386 <ol>
3387 <li>If <em>c1</em> is a variation selector, system fallback must be used
3388 to find a font that <a href="#support"><em
3389 title=support>supports</em></a> the full sequence of <em>b + c1</em>.
3390 If no font on the system <a href="#support"><em
3391 title=support>supports</em></a> the full sequence, match the single
3392 character <em>b</em> using the normal procedure for matching single
3393 characters and ignore the variation selector. Note: a sequence with
3394 more than one variation selector must be treated as an encoding error
3395 and the trailing selectors must be ignored. <a href="#UNICODE6"
3396 rel=biblioentry>[UNICODE6]<!--{{!UNICODE6}}--></a>
3398 <li>Otherwise, the user agent may optionally use system font fallback to
3399 match a font that <a href="#support"><em
3400 title=support>supports</em></a> the entire cluster.
3401 </ol>
3403 <li>If no font is found in step 2, use the matching sequence from step 1
3404 to determine the longest sequence that is completely <a
3405 href="#support"><em title=support>supported</em></a> by a font in the
3406 font list and attempt to match the remaining combining characters
3407 separately using the rules for single characters.
3408 </ol>
3410 <h3 id=char-handling-issues><span class=secno>5.4 </span>Character handling
3411 issues</h3>
3413 <p>CSS font matching is always performed on text runs containing Unicode
3414 characters, so documents using legacy encodings are assumed to have been
3415 transcoded before matching fonts. For fonts containing <a
3416 href="#character-map"><em title="character map">character maps</em></a>
3417 for both legacy encodings and Unicode, the contents of the legacy encoding
3418 <a href="#character-map"><em>character map</em></a> must have no effect on
3419 the results of the font matching process.
3421 <p>The font matching process does not assume that text runs are in either
3422 normalized or denormalized form (see <a href="#CHARMOD-NORM"
3423 rel=biblioentry>[CHARMOD-NORM]<!--{{CHARMOD-NORM}}--></a> for more
3424 details). Fonts may only support precomposed forms and not the decomposed
3425 sequence of base character plus combining marks. Authors should always
3426 tailor their choice of fonts to their content, including whether that
3427 content contains normalized or denormalized character streams.
3429 <p>If a given character is a Private-Use Area Unicode codepoint, user
3430 agents must only match font families named in the ‘<code
3431 class=property>font-family</code>’ list that are not generic families.
3432 If none of the families named in the ‘<code
3433 class=property>font-family</code>’ list contain a glyph for that
3434 codepoint, user agents must display some form of missing glyph symbol for
3435 that character rather than attempting <a
3436 href="#system-font-fallback"><em>system font fallback</em></a> for that
3437 codepoint. When matching the replacement character U+FFFD, user agents may
3438 skip the font matching process and immediately display some form of
3439 missing glyph symbol, they are not required to display the glyph from the
3440 font that would be selected by the font matching process.
3442 <p>In general, the fonts for a given family will all have the same or
3443 similar <a href="#character-map"><em title="character map">character
3444 maps</em></a>. The process outlined here is designed to handle even font
3445 families containing faces with widely variant <a href="#character-map"><em
3446 title="character map">character maps</em></a>. However, authors are
3447 cautioned that the use of such families can lead to unexpected results.
3449 <h3 id=font-matching-changes><span class=secno>5.5 </span>Font matching
3450 changes since CSS 2.1</h3>
3452 <p>The algorithm above is different from CSS 2.1 in a number of key places.
3453 These changes were made to better reflect actual font matching behavior
3454 across user agent implementations.
3456 <p>Differences compared to the font matching algorithm in CSS 2.1:
3458 <ul>
3459 <li>The algorithm includes font-stretch matching.
3461 <li>All possible font-style matching scenarios are delineated.
3463 <li>Small-caps fonts are not matched as part of the font matching process,
3464 they are now handled via font features.
3466 <li>Unicode variation selector matching is required.
3468 <li>Cluster sequences are matched as a unit.
3469 </ul>
3471 <h3 id=font-matching-examples><span class=secno>5.6 </span>Font matching
3472 examples</h3>
3474 <div class=example>
3475 <p>It's useful to note that the CSS selector syntax may be used to create
3476 language-sensitive typography. For example, some Chinese and Japanese
3477 characters are unified to have the same Unicode code point, although the
3478 abstract glyphs are not the same in the two languages.
3480 <pre>*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif; }
3481 *:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif; }
3482 </pre>
3484 <p>This selects any element that has the given language — Japanese or
3485 Traditional Chinese — and uses the appropriate font.
3486 </div>
3488 <h2 id=font-rend-props><span class=secno>6 </span>Font Feature Properties</h2>
3490 <p>Modern font technologies support a variety of advanced typographic and
3491 language-specific font features. Using these features, a single font can
3492 provide glyphs for a wide range of ligatures, contextual and stylistic
3493 alternates, tabular and old-style figures, small capitals, automatic
3494 fractions, swashes, and alternates specific to a given language. To allow
3495 authors control over these font capabilities, the ‘<code
3496 class=property>font-variant</code>’ property has been expanded for CSS3.
3497 It now functions as a shorthand for a set of properties that provide
3498 control over stylistic font features.
3500 <h3 id=glyph-selection-positioning><span class=secno>6.1 </span>Glyph
3501 selection and positioning</h3>
3503 <p>Simple fonts used for displaying Latin text use a very basic processing
3504 model. Fonts contain a <a href="#character-map"><em>character map</em></a>
3505 which maps each character to a glyph for that character. Glyphs for
3506 subsequent characters are simply placed one after the other along a run of
3507 text. Modern font formats such as OpenType and AAT (Apple Advanced
3508 Typography) use a richer processing model. The glyph for a given character
3509 can be chosen and positioned not just based on the codepoint of the
3510 character itself, but also on adjacent characters as well as the language,
3511 script, and features enabled for the text. Font features may be required
3512 for specific scripts, or recommended as enabled by default or they might
3513 be stylistic features meant to be used under author control.
3515 <p>For a good visual overview of these features, see the <a
3516 href="#OPENTYPE-FONT-GUIDE"
3517 rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
3518 For a detailed description of glyph processing for OpenType fonts, see <a
3519 href="#WINDOWS-GLYPH-PROC"
3520 rel=biblioentry>[WINDOWS-GLYPH-PROC]<!--{{WINDOWS-GLYPH-PROC}}--></a>.
3522 <p>Stylistic font features can be classified into two broad categories:
3523 ones that affect the harmonization of glyph shapes with the surrounding
3524 context, such as kerning and ligature features, and ones such as the
3525 small-caps, subscript/superscript and alternate features that affect shape
3526 selection.
3528 <p>The subproperties of <a href="#propdef-font-variant"
3529 title="font-variant!!property">‘<code
3530 class=property>font-variant</code>’</a> listed below are used to control
3531 these stylistic font features. They do not control features that are
3532 required for displaying certain scripts, such as the OpenType features
3533 used when displaying Arabic or Indic language text. They affect glyph
3534 selection and positioning, but do not affect font selection as described
3535 in the font matching section (except in cases required for compatibility
3536 with CSS 2.1).
3538 <p>To assure consistent behavior across user agents, the equivalent
3539 OpenType property settings are listed for individual properties and are
3540 normative. When using other font formats these should be used as a
3541 guideline to map CSS font feature property values to specific font
3542 features.
3544 <h3 id=language-specific-support><span class=secno>6.2
3545 </span>Language-specific display</h3>
3547 <p>OpenType also supports language-specific glyph selection and
3548 positioning, so that text can be displayed correctly in cases where the
3549 language dictates a specific display behavior. Many languages share a
3550 common script, but the shape of certain letters can vary across those
3551 languages. For example, certain Cyrillic letters have different shapes in
3552 Russian text than in Bulgarian. In Latin text, it's common to render "fi"
3553 with an explicit fi-ligature that lacks a dot on the "i". However, in
3554 languages such as Turkish which uses both a dotted-i and a dotless-i, it's
3555 important to not use this ligature or use a specialized version that
3556 contains a dot over the "i". The example below shows language-specific
3557 variations based on stylistic traditions found in Spanish, Italian and
3558 French orthography:
3560 <div class=featex><img alt="language specific forms, spanish"
3561 src=locl-1.png></div>
3563 <div class=featex><img alt="language specific forms, italian"
3564 src=locl-2.png></div>
3566 <div class=featex><img alt="language specific forms, french"
3567 src=locl-3.png></div>
3569 <p>If the content language of the element is known according to the rules
3570 of the <a
3571 href="http://www.w3.org/TR/CSS21/conform.html#doclanguage">document
3572 language</a>, user agents are required to infer the OpenType language
3573 system from the content language and use that when selecting and
3574 positioning glyphs using an OpenType font.
3576 <p>For OpenType fonts, in some cases it may be necessary to explicitly
3577 declare the OpenType language to be used, for example when displaying text
3578 in a given language that uses the typographic conventions of another
3579 language or when the font does not explicitly support a given language but
3580 supports a language that shares common typographic conventions. The ‘<a
3581 href="#propdef-font-language-override"><code
3582 class=property>font-language-override</code></a>’ property is used for
3583 this purpose.</p>
3584 <!-- prop: font-kerning -->
3586 <h3 id=font-kerning-prop><span class=secno>6.3 </span>Kerning: the <a
3587 href="#propdef-font-kerning">font-kerning</a> property</h3>
3589 <table class=propdef id=namefont-kerningvalueauto-normal-noneini>
3590 <tbody>
3591 <tr>
3592 <td>Name:
3594 <td><dfn id=propdef-font-kerning>font-kerning</dfn>
3596 <tr>
3597 <td>Value:
3599 <td><a href="#font-kerning-auto-value"
3600 title="auto!!font-kerning">auto</a> | <a
3601 href="#font-kerning-normal-value"
3602 title="normal!!font-kerning">normal</a> | <a
3603 href="#font-kerning-none-value" title="none!!font-kerning">none</a>
3605 <tr>
3606 <td>Initial:
3608 <td>auto
3610 <tr>
3611 <td>Applies to:
3613 <td>all elements
3615 <tr>
3616 <td>Inherited:
3618 <td>yes
3620 <tr>
3621 <td>Percentages:
3623 <td>N/A
3625 <tr>
3626 <td>Media:
3628 <td>visual
3630 <tr>
3631 <td>Computed value:
3633 <td>as specified
3635 <tr>
3636 <td>Animatable:
3638 <td>no
3639 </table>
3641 <p>Kerning is the contextual adjustment of inter-glyph spacing. This
3642 property controls metric kerning, kerning that utilizes adjustment data
3643 contained in the font.
3645 <dl>
3646 <dt><dfn id=font-kerning-auto-value title="auto!!font-kerning">auto</dfn>
3648 <dd>Specifies that kerning is applied at the discretion of the user agent
3650 <dt><dfn id=font-kerning-normal-value
3651 title="normal!!font-kerning">normal</dfn>
3653 <dd>Specifies that kerning is applied
3655 <dt><dfn id=font-kerning-none-value title="none!!font-kerning">none</dfn>
3657 <dd>Specifies that kerning is not applied
3658 </dl>
3660 <p>For fonts that do not include kerning data this property will have no
3661 visible effect. When rendering with OpenType fonts, the <a
3662 href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>
3663 specification suggests that kerning be enabled by default. When kerning is
3664 enabled, the OpenType <span class=tag>kern</span> feature is enabled (for
3665 vertical text runs the <span class=tag>vkrn</span> feature is enabled
3666 instead). User agents must also support fonts that only support kerning
3667 via data contained in a <span class=tag>kern</span> font table, as
3668 detailed in the OpenType specification. If the ‘<code
3669 class=property>letter-spacing</code>’ property is defined, kerning
3670 adjustments are considered part of the default spacing and letter spacing
3671 adjustments are made after kerning has been applied.
3673 <p>When set to ‘<code class=property>auto</code>’, user agents can
3674 determine whether to apply kerning or not based on a number of factors:
3675 text size, script, or other factors that influence text processing speed.
3676 Authors who want proper kerning should use <a
3677 href="#font-kerning-normal-value" title="normal!!font-kerning">‘<code
3678 class=property>normal</code>’</a> to explicitly enable kerning.
3679 Likewise, some authors may prefer to disable kerning in situations where
3680 performance is more important than precise appearance. However, in
3681 well-designed modern implementations the use of kerning generally does not
3682 have a large impact on text rendering speed.</p>
3683 <!-- prop: font-variant-ligatures -->
3685 <h3 id=font-variant-ligatures-prop><span class=secno>6.4 </span>Ligatures:
3686 the <a href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
3687 property</h3>
3689 <table class=propdef id=namefont-variant-ligaturesvaluenormal-no>
3690 <tbody>
3691 <tr>
3692 <td>Name:
3694 <td><dfn id=propdef-font-variant-ligatures>font-variant-ligatures</dfn>
3696 <tr>
3697 <td>Value:
3699 <td><a href="#font-variant-ligatures-normal-value"
3700 title="normal!!font-variant-ligatures">normal</a> | <a
3701 href="#font-variant-ligatures-none-value"
3702 title="none!!font-variant-ligatures">none</a> | [ <a
3703 href="#common-lig-values"><var><common-lig-values></var></a> ||
3704 <a
3705 href="#discretionary-lig-values"><var><discretionary-lig-values></var></a>
3706 || <a
3707 href="#historical-lig-values"><var><historical-lig-values></var></a>
3708 || <a
3709 href="#contextual-alt-values"><var><contextual-alt-values></var></a>
3710 ]
3712 <tr>
3713 <td>Initial:
3715 <td>normal
3717 <tr>
3718 <td>Applies to:
3720 <td>all elements
3722 <tr>
3723 <td>Inherited:
3725 <td>yes
3727 <tr>
3728 <td>Percentages:
3730 <td>N/A
3732 <tr>
3733 <td>Media:
3735 <td>visual
3737 <tr>
3738 <td>Computed value:
3740 <td>as specified
3742 <tr>
3743 <td>Animatable:
3745 <td>no
3746 </table>
3748 <p>Ligatures and contextual forms are ways of combining glyphs to produce
3749 more harmonized forms.
3751 <pre
3752 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>
3754 <pre
3755 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>
3757 <pre
3758 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>
3760 <pre
3761 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>
3763 <p>Individual values have the following meanings:
3765 <dl>
3766 <dt><dfn id=font-variant-ligatures-normal-value
3767 title="normal!!font-variant-ligatures">normal</dfn>
3769 <dd>A value of <a href="#font-variant-ligatures-normal-value"
3770 title="normal!!font-variant-ligatures">‘<code
3771 class=property>normal</code>’</a> specifies that common default
3772 features are enabled, <a href="#font-feature-resolution">as described in
3773 detail in the next section</a>. For OpenType fonts, common ligatures and
3774 contextual forms are on by default, discretionary and historical
3775 ligatures are not.
3777 <dt><dfn id=font-variant-ligatures-none-value
3778 title="none!!font-variant-ligatures">none</dfn>
3780 <dd>Specifies that all types of ligatures and contextual forms covered by
3781 this property are explicitly disabled. In situations where ligatures are
3782 not considered necessary, this may improve the speed of text rendering.
3784 <dt><dfn id=common-ligatures>common-ligatures</dfn>
3786 <dd>Enables display of common ligatures (OpenType features: <span
3787 class=tag>liga, clig</span>). For OpenType fonts, common ligatures are
3788 enabled by default.
3789 </dl>
3791 <div class=featex><img alt="common ligature example" src=liga.png></div>
3793 <dl>
3794 <dt><dfn id=no-common-ligatures>no-common-ligatures</dfn>
3796 <dd>Disables display of common ligatures (OpenType features: <span
3797 class=tag>liga, clig</span>).
3799 <dt><dfn id=discretionary-ligatures>discretionary-ligatures</dfn>
3801 <dd>Enables display of discretionary ligatures (OpenType feature: <span
3802 class=tag>dlig</span>). Which ligatures are discretionary or optional is
3803 decided by the type designer, so authors will need to refer to the
3804 documentation of a given font to understand which ligatures are
3805 considered discretionary.
3806 </dl>
3808 <div class=featex><img alt="discretionary ligature example" src=dlig.png></div>
3810 <dl>
3811 <dt><dfn id=no-discretionary-ligatures>no-discretionary-ligatures</dfn>
3813 <dd>Disables display of discretionary ligatures (OpenType feature: <span
3814 class=tag>dlig</span>).
3816 <dt><dfn id=historical-ligatures>historical-ligatures</dfn>
3818 <dd>Enables display of historical ligatures (OpenType feature: <span
3819 class=tag>hlig</span>).
3820 </dl>
3822 <div class=featex><img alt="historical ligature example" src=hlig.png></div>
3824 <dl>
3825 <dt><dfn id=no-historical-ligatures>no-historical-ligatures</dfn>
3827 <dd>Disables display of historical ligatures (OpenType feature: <span
3828 class=tag>hlig</span>).
3830 <dt><dfn id=contextual>contextual</dfn>
3832 <dd>Enables display of contextual alternates (OpenType feature: <span
3833 class=tag>calt</span>). Although not strictly a ligature feature, like
3834 ligatures this feature is commonly used to harmonize the shapes of glyphs
3835 with the surrounding context. For OpenType fonts, this feature is on by
3836 default.
3837 </dl>
3839 <div class=featex><img alt="contextual alternate example" src=calt.png></div>
3841 <dl>
3842 <dt><dfn id=no-contextual>no-contextual</dfn>
3844 <dd>Disables display of contextual alternates (OpenType feature: <span
3845 class=tag>calt</span>).
3846 </dl>
3848 <p>Required ligatures, needed for correctly rendering complex scripts, are
3849 not affected by the settings above, including ‘<code
3850 class=property>none</code>’ (OpenType feature: <span
3851 class=tag>rlig</span>).</p>
3852 <!-- prop: font-variant-position -->
3854 <h3 id=font-variant-position-prop><span class=secno>6.5 </span>Subscript
3855 and superscript forms: the <a
3856 href="#propdef-font-variant-position">font-variant-position</a> property</h3>
3858 <table class=propdef id=namefont-variant-positionvaluenormal-sub>
3859 <tbody>
3860 <tr>
3861 <td>Name:
3863 <td><dfn id=propdef-font-variant-position>font-variant-position</dfn>
3865 <tr>
3866 <td>Value:
3868 <td><a href="#font-variant-position-normal-value"
3869 title="normal!!font-variant-position">normal</a> | <a
3870 href="#sub">sub</a> | <a href="#super">super</a>
3872 <tr>
3873 <td>Initial:
3875 <td>normal
3877 <tr>
3878 <td>Applies to:
3880 <td>all elements
3882 <tr>
3883 <td>Inherited:
3885 <td>yes
3887 <tr>
3888 <td>Percentages:
3890 <td>N/A
3892 <tr>
3893 <td>Media:
3895 <td>visual
3897 <tr>
3898 <td>Computed value:
3900 <td>as specified
3902 <tr>
3903 <td>Animatable:
3905 <td>no
3906 </table>
3908 <p>This property is used to enable typographic subscript and superscript
3909 glyphs. These are alternate glyphs designed within the same em-box as
3910 default glyphs and are intended to be laid out on the same baseline as the
3911 default glyphs, with no resizing or repositioning of the baseline. They
3912 are explicitly designed to match the surrounding text and to be more
3913 readable without affecting the line height.
3915 <div class=figure><img alt="comparison between real subscript glyphs and
3916 synthesized ones" src=realsubscripts.png>
3917 <p class=caption>Subscript glyphs (top) vs. typical synthesized subscripts
3918 (bottom)
3919 </div>
3921 <p>Individual values have the following meanings:
3923 <dl>
3924 <dt><dfn id=font-variant-position-normal-value
3925 title="normal!!font-variant-position">normal</dfn>
3927 <dd>None of the features listed below are enabled.
3929 <dt><dfn id=sub>sub</dfn>
3931 <dd>Enables display of subscript variants (OpenType feature: <span
3932 class=tag>subs</span>).
3934 <dt><dfn id=super>super</dfn>
3936 <dd>Enables display of superscript variants (OpenType feature: <span
3937 class=tag>sups</span>).
3938 </dl>
3940 <p>Because of the semantic nature of subscripts and superscripts, when the
3941 value is either ‘<a href="#sub"><code class=property>sub</code></a>’
3942 or ‘<a href="#super"><code class=property>super</code></a>’ for a
3943 given contiguous run of text, if a variant glyph is not available for all
3944 the characters in the run, simulated glyphs must be synthesized for all
3945 characters using reduced forms of the glyphs that would be used without
3946 this feature applied. This is done per run to avoid a mixture of variant
3947 glyphs and synthesized ones that would not align correctly. In the case of
3948 OpenType fonts that lack subscript or superscript glyphs for a given
3949 character, user agents must use the appropriate subscript and superscript
3950 metrics specified in the selected font's <a
3951 href="http://www.microsoft.com/typography/otspec/os2.htm#subxs">OS/2
3952 table</a> <a href="#OPENTYPE"
3953 rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> to calculate the size
3954 and offset of the synthesized substitutes.
3956 <div class=figure><img alt="alternate superscripts vs. glyphs synthesized
3957 using superscript metrics" src=superscript-alt-synth.png>
3958 <p class=caption>Superscript alternate glyph (left), synthesized
3959 superscript glyphs (middle), and incorrect mixture of the two (right)
3960 </div>
3962 <p>In situations where text decorations are only applied to runs of text
3963 containing superscript or subscript glyphs, the synthesized glyphs must be
3964 used to avoid problems with the placement of decorations.
3966 <p>In the past, user agents have used font-size and vertical-align to
3967 simulate subscripts and superscripts for the <code title="HTML sub
3968 element">sub</code> and <code title="HTML sup element">sup</code>
3969 elements. To allow a backwards compatible way of defining subscripts and
3970 superscripts, it is recommended that authors use conditional rules <a
3971 href="#CSS3-CONDITIONAL"
3972 rel=biblioentry>[CSS3-CONDITIONAL]<!--{{CSS3-CONDITIONAL}}--></a> so that
3973 older user agents will still render subscripts and superscripts via the
3974 older mechanism.
3976 <p>Authors should note that fonts typically only provide subscript and
3977 superscript glyphs for a subset of all characters supported by the font.
3978 For example, while subscript and superscript glyphs are often available
3979 for Latin numbers, glyphs for punctuation and letter characters are less
3980 frequently provided. The synthetic fallback rules defined for this
3981 property assure that subscripts and superscripts will always appear but
3982 the appearance may not match author expectations if the font used does not
3983 provide the appropriate alternate glyph for all characters contained in a
3984 subscript or superscript.
3986 <p>This property is not cumulative. Applying it to elements within a
3987 subscript or superscript won't nest the placement of a subscript or
3988 superscript glyph. Images contained within text runs where the value of
3989 this property is ‘<a href="#sub"><code class=property>sub</code></a>’
3990 or ‘<a href="#super"><code class=property>super</code></a>’ will be
3991 drawn just as they would if the value was <a
3992 href="#font-variant-position-normal-value"
3993 title="normal!!font-variant-position">‘<code
3994 class=property>normal</code>’</a>.</p>
3995 <!-- due to lack of consensus, couldn't resolve on exact positioning of text decorations:
3996 http://www.w3.org/2013/06/06-css-minutes.html#item03 -->
3998 <p>Because of these limitations, ‘<a
3999 href="#propdef-font-variant-position"><code
4000 class=property>font-variant-position</code></a>’ is not recommended for
4001 use in user agent stylesheets. Authors should use it in cases where
4002 subscripts or superscripts will only contain the narrow range of
4003 characters supported by the fonts specified.
4005 <p class=note>The variant glyphs use the same baseline as the default
4006 glyphs would use. There is no shift in the placement along the baseline,
4007 so the use of variant glyphs doesn't affect the height of the inline box
4008 or alter the height of the linebox. This makes superscript and subscript
4009 variants ideal for situations where it's important that leading remain
4010 constant, such as in multi-column layout.
4012 <div class=example>
4013 <p>A typical user agent default style for the <a class=tag
4014 href="#sub">sub</a> element:</p>
4016 <pre>sub {
4017 vertical-align: sub;
4018 font-size: smaller;
4019 line-height: normal;
4020 }
4021 </pre>
4023 <p>Using font-variant-position to specify typographic subscripts in a way
4024 that will still show subscripts in older user agents:</p>
4026 <pre>@supports ( font-variant-position: sub ) {
4028 sub {
4029 vertical-align: baseline;
4030 font-size: 100%;
4031 line-height: inherit;
4032 font-variant-position: sub;
4033 }
4035 }
4036 </pre>
4038 <p>User agents that support the ‘<a
4039 href="#propdef-font-variant-position"><code
4040 class=property>font-variant-position</code></a>’ property will select a
4041 subscript variant glyph and render this without adjusting the baseline or
4042 font-size. Older user agents will ignore the ‘<a
4043 href="#propdef-font-variant-position"><code
4044 class=property>font-variant-position</code></a>’ property definition
4045 and use the standard defaults for subscripts.</p>
4046 </div>
4047 <!-- prop: font-variant-caps -->
4049 <h3 id=font-variant-caps-prop><span class=secno>6.6 </span>Capitalization:
4050 the <a href="#propdef-font-variant-caps">font-variant-caps</a> property</h3>
4052 <table class=propdef id=namefont-variant-capsvaluenormal-small-c>
4053 <tbody>
4054 <tr>
4055 <td>Name:
4057 <td><dfn id=propdef-font-variant-caps>font-variant-caps</dfn>
4059 <tr>
4060 <td>Value:
4062 <td><a href="#font-variant-caps-normal-value"
4063 title="normal!!font-variant-caps">normal</a> | <a
4064 href="#small-caps">small-caps</a> | <a
4065 href="#all-small-caps">all-small-caps</a> | <a
4066 href="#petite-caps">petite-caps</a> | <a
4067 href="#all-petite-caps">all-petite-caps</a> | <a
4068 href="#unicase">unicase</a> | <a href="#titling-caps">titling-caps</a>
4070 <tr>
4071 <td>Initial:
4073 <td>normal
4075 <tr>
4076 <td>Applies to:
4078 <td>all elements
4080 <tr>
4081 <td>Inherited:
4083 <td>yes
4085 <tr>
4086 <td>Percentages:
4088 <td>N/A
4090 <tr>
4091 <td>Media:
4093 <td>visual
4095 <tr>
4096 <td>Computed value:
4098 <td>as specified
4100 <tr>
4101 <td>Animatable:
4103 <td>no
4104 </table>
4106 <p>This property allows the selection of alternate glyphs used for small or
4107 petite capitals or for titling. These glyphs are specifically designed to
4108 blend well with the surrounding normal glyphs, to maintain the weight and
4109 readability which suffers when text is simply resized to fit this purpose.
4111 <p>Individual values have the following meanings:
4113 <dl>
4114 <dt><dfn id=font-variant-caps-normal-value
4115 title="normal!!font-variant-caps">normal</dfn>
4117 <dd>None of the features listed below are enabled.
4119 <dt><dfn id=small-caps>small-caps</dfn>
4121 <dd>Enables display of small capitals (OpenType feature: <span
4122 class=tag>smcp</span>). Small-caps glyphs typically use the form of
4123 uppercase letters but are reduced to the size of lowercase letters.
4124 </dl>
4126 <div class=featex><img alt="small-caps example" src=smcp.png></div>
4128 <dl>
4129 <dt><dfn id=all-small-caps>all-small-caps</dfn>
4131 <dd>Enables display of small capitals for both upper and lowercase letters
4132 (OpenType features: <span class=tag>c2sc, smcp</span>).
4134 <dt><dfn id=petite-caps>petite-caps</dfn>
4136 <dd>Enables display of petite capitals (OpenType feature: <span
4137 class=tag>pcap</span>).
4139 <dt><dfn id=all-petite-caps>all-petite-caps</dfn>
4141 <dd>Enables display of petite capitals for both upper and lowercase
4142 letters (OpenType features: <span class=tag>c2pc, pcap</span>).
4144 <dt><dfn id=unicase>unicase</dfn>
4146 <dd>Enables display of mixture of small capitals for uppercase letters
4147 with normal lowercase letters (OpenType feature: <span
4148 class=tag>unic</span>).
4150 <dt><dfn id=titling-caps>titling-caps</dfn>
4152 <dd>Enables display of titling capitals (OpenType feature: <span
4153 class=tag>titl</span>). Uppercase letter glyphs are often designed for
4154 use with lowercase letters. When used in all uppercase titling sequences
4155 they can appear too strong. Titling capitals are designed specifically
4156 for this situation.
4157 </dl>
4159 <p>The availability of these glyphs is based on whether a given feature is
4160 defined or not in the feature list of the font. User agents can optionally
4161 decide this on a per-script basis but should explicitly not decide this on
4162 a per-character basis.
4164 <p>Some fonts may only support a subset or none of the features described
4165 for this property. For backwards compatibility with CSS 2.1, if ‘<a
4166 href="#small-caps"><code class=property>small-caps</code></a>’ or ‘<a
4167 href="#all-small-caps"><code class=property>all-small-caps</code></a>’
4168 is specified but small-caps glyphs are not available for a given font,
4169 user agents should simulate a small-caps font, for example by taking a
4170 normal font and replacing the glyphs for lowercase letters with scaled
4171 versions of the glyphs for uppercase characters (replacing the glyphs for
4172 both upper and lowercase letters in the case of ‘<a
4173 href="#all-small-caps"><code class=property>all-small-caps</code></a>’).
4175 <div class=figure style="padding: 0; margin: auto;"><img alt="synthetic vs.
4176 real small-caps" class=hires src=synthetic-vs-real-small-caps.png
4177 width=512px>
4178 <p class=caption>Synthetic vs. real small-caps
4179 </div>
4181 <p>To match the surrounding text, a font may provide alternate glyphs for
4182 caseless characters when these features are enabled but when a user agent
4183 simulates small capitals, it must not attempt to simulate alternates for
4184 codepoints which are considered caseless.
4186 <div class=figure style="padding: 0; margin: auto;"><img alt="caseless
4187 characters with small-caps, all-small-caps enabled" class=hires
4188 src=small-capitals-variations.png width=418px>
4189 <p class=caption>Caseless characters with small-caps, all-small-caps
4190 enabled
4191 </div>
4193 <p>If either ‘<a href="#petite-caps"><code
4194 class=property>petite-caps</code></a>’ or ‘<a
4195 href="#all-petite-caps"><code class=property>all-petite-caps</code></a>’
4196 is specified for a font that doesn't support these features, the property
4197 behaves as if ‘<a href="#small-caps"><code
4198 class=property>small-caps</code></a>’ or ‘<a
4199 href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
4200 respectively, had been specified. If ‘<a href="#unicase"><code
4201 class=property>unicase</code></a>’ is specified for a font that doesn't
4202 support that feature, the property behaves as if ‘<a
4203 href="#small-caps"><code class=property>small-caps</code></a>’ was
4204 applied only to lowercased uppercase letters. If ‘<a
4205 href="#titling-caps"><code class=property>titling-caps</code></a>’ is
4206 specified with a font that does not support this feature, this property
4207 has no visible effect. When simulated small capital glyphs are used, for
4208 scripts that lack uppercase and lowercase letters, ‘<a
4209 href="#small-caps"><code class=property>small-caps</code></a>’, ‘<a
4210 href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
4211 ‘<a href="#petite-caps"><code class=property>petite-caps</code></a>’,
4212 ‘<a href="#all-petite-caps"><code
4213 class=property>all-petite-caps</code></a>’ and ‘<a
4214 href="#unicase"><code class=property>unicase</code></a>’ have no visible
4215 effect.
4217 <p>When casing transforms are used to simulate small capitals, the casing
4218 transformations must match those used for the <span
4219 class=property>‘<code class=property>text-transform</code>’</span>
4220 property.
4222 <p>As a last resort, unscaled uppercase letter glyphs in a normal font may
4223 replace glyphs in a small-caps font so that the text appears in all
4224 uppercase letters.
4226 <div class=figure style="padding: 0; margin: auto;"><img alt="using
4227 all-small-caps in acronym-laden text" class=hires
4228 src=acronym-laden-text.png width=596px>
4229 <p class=caption>Using small capitals to improve readability in
4230 acronym-laden text
4231 </div>
4233 <div class=example>
4234 <p>Quotes rendered italicised, with small-caps on the first line:</p>
4236 <pre>blockquote { font-style: italic; }
4237 blockquote:first-line { font-variant: small-caps; }
4239 <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>
4240 </pre>
4241 </div>
4242 <!-- prop: font-variant-numeric -->
4244 <h3 id=font-variant-numeric-prop><span class=secno>6.7 </span>Numerical
4245 formatting: the <a
4246 href="#propdef-font-variant-numeric">font-variant-numeric</a> property</h3>
4248 <table class=propdef id=namefont-variant-numericvaluenormal-ltnu>
4249 <tbody>
4250 <tr>
4251 <td>Name:
4253 <td><dfn id=propdef-font-variant-numeric>font-variant-numeric</dfn>
4255 <tr>
4256 <td>Value:
4258 <td><a href="#font-variant-numeric-normal-value"
4259 title="normal!!font-variant-numeric">normal</a> | [ <a
4260 href="#numeric-figure-values"><var><numeric-figure-values></var></a>
4261 || <a
4262 href="#numeric-spacing-values"><var><numeric-spacing-values></var></a>
4263 || <a
4264 href="#numeric-fraction-values"><var><numeric-fraction-values></var></a>
4265 || <a href="#ordinal">ordinal</a> || <a
4266 href="#slashed-zero">slashed-zero</a> ]
4268 <tr>
4269 <td>Initial:
4271 <td>normal
4273 <tr>
4274 <td>Applies to:
4276 <td>all elements
4278 <tr>
4279 <td>Inherited:
4281 <td>yes
4283 <tr>
4284 <td>Percentages:
4286 <td>N/A
4288 <tr>
4289 <td>Media:
4291 <td>visual
4293 <tr>
4294 <td>Computed value:
4296 <td>as specified
4298 <tr>
4299 <td>Animatable:
4301 <td>no
4302 </table>
4304 <p>Specifies control over numerical forms. The example below shows how some
4305 of these values can be combined to influence the rendering of tabular data
4306 with fonts that support these features. Within normal paragraph text,
4307 proportional numbers are used while tabular numbers are used so that
4308 columns of numbers line up properly:
4310 <div class=figure style="padding: 0; margin: auto;"><img alt="combining
4311 number styles" src=numberstyles.png>
4312 <p class=caption>Using number styles
4313 </div>
4315 <p>Possible combinations:
4317 <pre
4318 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>
4320 <pre
4321 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>
4323 <pre
4324 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>
4326 <p>Individual values have the following meanings:
4328 <dl>
4329 <dt><dfn id=font-variant-numeric-normal-value
4330 title="normal!!font-variant-numeric">normal</dfn>
4332 <dd>None of the features listed below are enabled.
4334 <dt><dfn id=lining-nums>lining-nums</dfn>
4336 <dd>Enables display of lining numerals (OpenType feature: <span
4337 class=tag>lnum</span>).
4339 <dt><dfn id=oldstyle-nums>oldstyle-nums</dfn>
4341 <dd>Enables display of old-style numerals (OpenType feature: <span
4342 class=tag>onum</span>).
4344 <dt><dfn id=proportional-nums>proportional-nums</dfn>
4346 <dd>Enables display of proportional numerals (OpenType feature: <span
4347 class=tag>pnum</span>).
4349 <dt><dfn id=tabular-nums>tabular-nums</dfn>
4351 <dd>Enables display of tabular numerals (OpenType feature: <span
4352 class=tag>tnum</span>).
4354 <dt><dfn id=diagonal-fractions>diagonal-fractions</dfn>
4356 <dd>Enables display of lining diagonal fractions (OpenType feature: <span
4357 class=tag>frac</span>).
4358 </dl>
4360 <div class=featex><img alt="diagonal fraction example" src=frac.png></div>
4362 <dl>
4363 <dt><dfn id=stacked-fractions>stacked-fractions</dfn>
4365 <dd>Enables display of lining stacked fractions (OpenType feature: <span
4366 class=tag>afrc</span>).
4367 </dl>
4369 <div class=featex><img alt="stacked fraction example" src=afrc.png></div>
4371 <dl>
4372 <dt><dfn id=ordinal>ordinal</dfn>
4374 <dd>Enables display of forms used with ordinal numbers (OpenType feature:
4375 <span class=tag>ordn</span>).
4377 <dt><dfn id=slashed-zero>slashed-zero</dfn>
4379 <dd>Enables display of slashed zeros (OpenType feature: <span
4380 class=tag>zero</span>).
4381 </dl>
4383 <div class=featex><img alt="slashed zero example" src=zero.png></div>
4385 <div class=example id=steak-marinade>
4386 <p>A simple flank steak marinade recipe, rendered with automatic fractions
4387 and old-style numerals:</p>
4389 <pre>.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; }
4391 <h4>Steak marinade:</h4>
4392 <ul>
4393 <li><span class="amount">2</span> tbsp olive oil</li>
4394 <li><span class="amount">1</span> tbsp lemon juice</li>
4395 <li><span class="amount">1</span> tbsp soy sauce</li>
4396 <li><span class="amount">1 1/2</span> tbsp dry minced onion</li>
4397 <li><span class="amount">2 1/2</span> tsp italian seasoning</li>
4398 <li>Salt &amp; pepper</li>
4399 </ul>
4401 <p>Mix the meat with the marinade and let it sit covered in the refrigerator
4402 for a few hours or overnight.</p>
4403 </pre>
4405 <p>Note that the fraction feature is only applied to values not the entire
4406 paragraph. Fonts often implement this feature using contextual rules
4407 based on the use of the slash (‘<code class=css>/</code>’) character.
4408 As such, it's not suitable for use as a paragraph-level style.</p>
4409 </div>
4410 <!-- prop: font-variant-alternates -->
4412 <h3 id=font-variant-alternates-prop><span class=secno>6.8 </span>Alternates
4413 and swashes: the <a
4414 href="#propdef-font-variant-alternates">font-variant-alternates</a>
4415 property</h3>
4417 <table class=propdef id=namefont-variant-alternatesvaluenormal-s>
4418 <tbody>
4419 <tr>
4420 <td>Name:
4422 <td><dfn
4423 id=propdef-font-variant-alternates>font-variant-alternates</dfn>
4425 <tr>
4426 <td>Value:
4428 <td>normal | [ <a href="#stylistic"
4429 title=stylistic>stylistic(<feature-value-name>)</a> || <a
4430 href="#historical-forms">historical-forms</a> || <a href="#styleset"
4431 title=styleset>styleset(<feature-value-name> #)</a> || <a
4432 href="#character-variant"
4433 title=character-variant>character-variant(<feature-value-name>
4434 #)</a> || <a href="#swash"
4435 title=swash>swash(<feature-value-name>)</a> || <a
4436 href="#ornaments"
4437 title=ornaments>ornaments(<feature-value-name>)</a> || <a
4438 href="#annotation"
4439 title=annotation>annotation(<feature-value-name>)</a> ]
4441 <tr>
4442 <td>Initial:
4444 <td>normal
4446 <tr>
4447 <td>Applies to:
4449 <td>all elements
4451 <tr>
4452 <td>Inherited:
4454 <td>yes
4456 <tr>
4457 <td>Percentages:
4459 <td>N/A
4461 <tr>
4462 <td>Media:
4464 <td>visual
4466 <tr>
4467 <td>Computed value:
4469 <td>as specified
4471 <tr>
4472 <td>Animatable:
4474 <td>no
4475 </table>
4477 <p>For any given character, fonts can provide a variety of alternate glyphs
4478 in addition to the default glyph for that character. This property
4479 provides control over the selection of these alternate glyphs.
4481 <p>For many of the property values listed below, several different
4482 alternate glyphs are available. How many alternates are available and what
4483 they represent is font-specific, so these are each marked <dfn
4484 id=font-specific>font specific</dfn> in the value definitions below.
4485 Because the nature of these alternates is font-specific, the <a
4486 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
4487 rule is used to define values for a specific font family or set of
4488 families that associate a font-specific numeric
4489 <code><feature-index></code> with a custom
4490 <code><feature-value-name></code>, which is then used in this
4491 property to select specific alternates:
4493 <pre>@font-feature-values Noble Script { @swash { swishy: 1; flowing: 2; } }
4495 p {
4496 font-family: Noble Script;
4497 font-variant-alternates: swash(flowing); /* use swash alternate #2 */
4498 }</pre>
4500 <p>When a particular <code><feature-value-name></code> has not been
4501 defined for a given family or for a particular feature type, the computed
4502 value must be the same as if it had been defined. However, property values
4503 that contain these undefined <code><feature-value-name></code>
4504 identifiers must be ignored when choosing glyphs.
4506 <pre>/* these two style rules are effectively the same */
4507 p { font-variant-alternates: swash(unknown-value); } /* not a defined value, ignored */
4508 p { font-variant-alternates: normal; }
4509 </pre>
4511 <p>This allows values to be defined and used for a given set of font
4512 families but ignored if fallback occurs, since the font family name would
4513 be different. If a given value is outside the range supported by a given
4514 font, the value is ignored. These values never apply to generic font
4515 families.
4517 <p>Individual values have the following meanings:
4519 <dl>
4520 <dt><dfn id=font-variant-alternates-normal-value
4521 title="normal!!font-variant-alternates">normal</dfn>
4523 <dd>None of the features listed below are enabled.
4525 <dt><dfn id=historical-forms>historical-forms</dfn>
4527 <dd>Enables display of historical forms (OpenType feature: <span
4528 class=tag>hist</span>).
4529 </dl>
4531 <div class=featex><img alt="historical form example" src=hist.png></div>
4533 <dl>
4534 <dt><dfn id=stylistic
4535 title=stylistic>stylistic(<feature-value-name>)</dfn>
4537 <dd>Enables display of stylistic alternates (<a
4538 href="#font-specific"><em>font specific</em></a>, OpenType feature: <span
4539 class=tag>salt <feature-index></span>).
4540 </dl>
4542 <div class=featex><img alt="stylistic alternate example" src=salt.png></div>
4544 <dl>
4545 <dt><dfn id=styleset title=styleset>styleset(<feature-value-name>
4546 #)</dfn>
4548 <dd>Enables display with stylistic sets (<a href="#font-specific"><em>font
4549 specific</em></a>, OpenType feature: <span
4550 class=tag>ss<feature-index></span> OpenType currently defines <span
4551 class=tag>ss01</span> through <span class=tag>ss20</span>).
4552 </dl>
4554 <div class=featex><img alt="styleset example" src=ssnn.png></div>
4556 <dl>
4557 <dt><dfn id=character-variant
4558 title=character-variant>character-variant(<feature-value-name>
4559 #)</dfn>
4561 <dd>Enables display of specific character variants (<a
4562 href="#font-specific"><em>font specific</em></a>, OpenType feature: <span
4563 class=tag>cv<feature-index></span> OpenType currently defines <span
4564 class=tag>cv01</span> through <span class=tag>cv99</span>).
4566 <dt><dfn id=swash title=swash>swash(<feature-value-name>)</dfn>
4568 <dd>Enables display of swash glyphs (<a href="#font-specific"><em>font
4569 specific</em></a>, OpenType feature: <span class=tag>swsh
4570 <feature-index>, cswh <feature-index></span>).
4571 </dl>
4573 <div class=featex><img alt="swash example" src=swsh.png></div>
4575 <dl>
4576 <dt><dfn id=ornaments
4577 title=ornaments>ornaments(<feature-value-name>)</dfn>
4579 <dd>Enables replacement of default glyphs with ornaments, if provided in
4580 the font (<a href="#font-specific"><em>font specific</em></a>, OpenType
4581 feature: <span class=tag>ornm <feature-index></span>). Some fonts
4582 may offer ornament glyphs as alternates for a wide collection of
4583 characters; however, displaying arbitrary characters (e.g.,
4584 alphanumerics) as ornaments is poor practice as it distorts the semantics
4585 of the data. Font designers are encouraged to encode all ornaments
4586 (except those explicitly encoded in the Unicode Dingbats blocks, etc.) as
4587 alternates for the bullet character (U+2022) to allow authors to select
4588 the desired glyph using ‘<a href="#ornaments"><code
4589 class=property>ornaments</code></a>’.
4590 </dl>
4592 <div class=featex><img alt="ornaments example" src=ornm.png></div>
4594 <dl>
4595 <dt><dfn id=annotation
4596 title=annotation>annotation(<feature-value-name>)</dfn>
4598 <dd>Enables display of alternate annotation forms (<a
4599 href="#font-specific"><em>font specific</em></a>, OpenType feature: <span
4600 class=tag>nalt <feature-index></span>).
4601 </dl>
4603 <div class=featex><img alt="alternate annotation form example"
4604 src=nalt.png></div>
4606 <h3 id=font-feature-values><span class=secno>6.9 </span>Defining font
4607 specific alternates: the <dfn id=at-font-feature-values-rule
4608 style="font-weight: inherit; font-style:
4609 inherit"><code>@font-feature-values</code></dfn> rule</h3>
4611 <p>Several of the possible values of ‘<a
4612 href="#propdef-font-variant-alternates"><code
4613 class=property>font-variant-alternates</code></a>’ listed above are
4614 labeled as <a href="#font-specific"><em>font specific</em></a>. For these
4615 features fonts may define not just a single glyph but a set of alternate
4616 glyphs with an index to select a given alternate. Since these are font
4617 family specific, the <a
4618 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
4619 rule is used to define named values for these indices for a given family.
4621 <p class=note>See the <a href="#om-fontfeaturevalues">object model
4622 reference section</a> for a description of the interfaces used to modify
4623 these rules via the CSS Object Model.
4625 <div class=example>
4626 <p>In the case of the swash Q in the example shown above, the swash could
4627 be specified using these style rules:</p>
4629 <pre>
4631 @font-feature-values Jupiter Sans {
4632 @swash {
4633 delicate: 1;
4634 flowing: 2;
4635 }
4636 }
4638 h2 { font-family: Jupiter Sans, sans-serif; }
4640 /* show the second swash variant in h2 headings */
4641 h2:first-letter { font-variant-alternates: swash(flowing); }
4643 <h2>Quick</h2></pre>
4645 <p>When Jupiter Sans is present, the second alternate swash alternate will
4646 be displayed. When not present, no swash character will be shown, since
4647 the specific named value "flowing" is only defined for the Jupiter Sans
4648 family. The @-mark indicates the name of the property value for which a
4649 named value can be used. The name "flowing" is chosen by the author. The
4650 index that represents each alternate is defined within a given font's
4651 data.</p>
4652 </div>
4654 <h4 id=basic-syntax><span class=secno>6.9.1 </span>Basic syntax</h4>
4656 <p>An <a
4657 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
4658 rule is composed of a list of font families followed by a block containing
4659 individual <a href="#featurevalueblock"><i
4660 title="feature_value_block">feature value blocks</i></a> that take the
4661 form of @-rules. Each block defines a set of named values for a specific
4662 font feature when a given set of font families is used. Effectively, they
4663 define a mapping of ⟨family, feature, ident⟩ → ⟨values⟩ where
4664 ⟨values⟩ are the numeric indices used for specific features defined
4665 for a given font.
4667 <p>In terms of the grammar, this specification defines the following
4668 productions:
4670 <pre><dfn id=fontfeaturevaluesrule>font_feature_values_rule</dfn>
4671 : <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>*
4672 '{' <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>*
4673 ;
4675 <dfn id=fontfamilynamelist>font_family_name_list</dfn>
4676 : <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> ]*
4677 ;
4679 <dfn id=fontfamilyname>font_family_name</dfn>
4680 : <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> ]* ]
4681 ;
4683 <dfn id=featurevalueblock>feature_value_block</dfn>
4684 : <a href="#featuretype"><i>feature_type</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
4685 '{' <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>*
4686 ;
4688 <dfn id=featuretype>feature_type</dfn>:
4689 <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>ATKEYWORD</i></a>
4690 ;
4692 <dfn id=featurevaluedefinition>feature_value_definition</dfn>
4693 : <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> ]*
4694 ;
4695 </pre>
4697 <p>The following new token is introduced:
4699 <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>;}
4700 </pre>
4702 <p><a href="#featurevalueblock"><i title="feature_value_block">Feature
4703 value blocks</i></a> are handled as <a
4704 href="http://www.w3.org/TR/CSS2/syndata.html#at-rules">at-rules</a>, they
4705 consist of everything up to the next block or semi-colon, whichever comes
4706 first.
4708 <p>The <a href="#fontfamilynamelist"><i title="font_family_name_list">font
4709 family list</i></a> is a comma-delimited list of <a
4710 href="#fontfamilyname"><i title="font_family_name">font family
4711 names</i></a> that match the definition of <a
4712 href="#family-name-value"><var><family-name></var></a> for the <a
4713 href="#propdef-font-family" title="font-family!!property">‘<code
4714 class=property>font-family</code>’</a> property. This means that only
4715 named font families are allowed, rules that include generic or system
4716 fonts in the list of font families are syntax errors. However, if a user
4717 agent defines a generic font to be a specific named font (e.g. Helvetica),
4718 the settings associated with that family name will be used. If syntax
4719 errors occur within the font family list, the entire rule must be ignored.
4721 <p>Within <a href="#featurevalueblock"><i
4722 title="feature_value_block">feature value blocks</i></a>, the <a
4723 href="#featuretype"><i title="feature_type">feature type</i></a> is
4724 ‘<code class=css>@</code>’ followed by the name of one of the <a
4725 href="#font-specific"><em>font specific</em></a> property values of ‘<a
4726 href="#propdef-font-variant-alternates"><code
4727 class=property>font-variant-alternates</code></a>’ (e.g. <a
4728 href="#swash"><code>@swash</code></a>). The identifiers used within
4729 feature value definitions follow the rules of CSS user identifiers and are
4730 case-sensitive. They are unique only for a given set of font families and
4731 <a href="#featuretype"><i title="feature_type">feature type</i></a>. The
4732 same identifier used with a different <a href="#featuretype"><i
4733 title="feature_type">feature type</i></a> is treated as a separate and
4734 distinct value. If the same identifier is defined mulitple times for a
4735 given <a href="#featuretype"><i title="feature_type">feature type</i></a>
4736 and font family, the last defined value is used. Values associated with a
4737 given identifier are limited to integer values 0 or greater.
4739 <p>When syntax errors occur within a <a href="#featurevaluedefinition"><i
4740 title="feature_value_definition">feature value definition</i></a>, such as
4741 invalid identifiers or values, the entire <a
4742 href="#featurevaluedefinition"><i title="feature_value_definition">feature
4743 value definition</i></a> must be omitted, just as syntax errors in style
4744 declarations are handled. When the <a href="#featuretype"><i
4745 title="feature_type">feature type</i></a> is invalid, the entire
4746 associated <a href="#featurevalueblock"><i
4747 title="feature_value_block">feature value block</i></a> must be ignored.
4749 <div class=example>
4750 <p>Rules that are equivalent given syntax error handling:</p>
4752 <pre>@font-feature-values Bongo {
4753 @swash { ornate: 1; }
4754 annotation { boxed: 4; } /* should be @annotation! */
4755 @swash { double-loops: 1; flowing: -1; } /* negative value */
4756 @ornaments ; /* incomplete definition */
4757 @styleset { double-W: 14; sharp-terminals: 16 1 } /* missing ; */
4758 <a href="http://www.angryalien.com/0504/shiningbunnies.html" style="text-decoration: none; border: none;">redrum</a> /* random editing mistake */
4759 }</pre>
4761 <p>The example above is equivalent to:</p>
4763 <pre>@font-feature-values Bongo {
4764 @swash { ornate: 1; }
4765 @swash { double-loops: 1; }
4766 @styleset { double-W: 14; sharp-terminals: 16 1; }
4767 }</pre>
4768 </div>
4770 <p>If multiple <a
4771 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
4772 rules are defined for a given family, the resulting values definitions are
4773 the union of the definitions contained within these rules. This allows a
4774 set of named values to be defined for a given font family globally for a
4775 site and specific additions made per-page.
4777 <div class=example>
4778 <p>Using both site-wide and per-page feature values:</p>
4780 <pre>
4781 site.css:
4783 @font-feature-values Mercury Serif {
4784 @styleset {
4785 stacked-g: 3; /* "two-storey" versions of g, a */
4786 stacked-a: 4;
4787 }
4788 }
4790 page.css:
4792 @font-feature-values Mercury Serif {
4793 @styleset {
4794 geometric-m: 7; /* alternate version of m */
4795 }
4796 }
4798 body {
4799 font-family: Mercury Serif, serif;
4801 /* enable both the use of stacked g and alternate m */
4802 font-variant-alternates: styleset(stacked-g, geometric-m);
4803 }</pre>
4804 </div>
4806 <div class=example>
4807 <p>Using a commonly named value allows authors to use a single style rule
4808 to cover a set of fonts for which the underlying selector is different
4809 for each font. If either font in the example below is found, a circled
4810 number glyph will be used:</p>
4812 <pre>@font-feature-values Taisho Gothic {
4813 @annotation { boxed: 1; circled: 4; }
4814 }
4816 @font-feature-values Otaru Kisa {
4817 @annotation { circled: 1; black-boxed: 3; }
4818 }
4820 h3.title {
4821 /* circled form defined for both fonts */
4822 font-family: Taisho Gothic, Otaru Kisa;
4823 font-variant: annotation(circled);
4824 }</pre>
4825 </div>
4827 <h4 id=multi-valued-feature-value-definitions><span class=secno>6.9.2
4828 </span>Multi-valued feature value definitions</h4>
4830 <p>Most <a href="#font-specific"><em>font specific</em></a> ‘<a
4831 href="#propdef-font-variant-alternates"><code
4832 class=property>font-variant-alternates</code></a>’ property values take
4833 a single value (e.g. ‘<a href="#swash"><code
4834 class=property>swash</code></a>’). The ‘<a
4835 href="#character-variant"><code
4836 class=property>character-variant</code></a>’ property value allows two
4837 values and ‘<a href="#styleset"><code
4838 class=property>styleset</code></a>’ allows an unlimited number.
4840 <p>For the styleset property value, multiple values indicate the style sets
4841 to be enabled. Values between 1 and 99 enable OpenType features <span
4842 class=tag>ss01</span> through <span class=tag>ss99</span>. However, the
4843 OpenType standard only officially defines <span class=tag>ss01</span>
4844 through <span class=tag>ss20</span>. For OpenType fonts, values greater
4845 than 99 or equal to 0 do not generate a syntax error when parsed but
4846 enable no OpenType features.
4848 <pre>@font-feature-values Mars Serif {
4849 @styleset {
4850 alt-g: 1; /* implies ss01 = 1 */
4851 curly-quotes: 3; /* implies ss03 = 1 */
4852 code: 4 5; /* implies ss04 = 1, ss05 = 1 */
4853 }
4855 @styleset {
4856 dumb: 125; /* >99, ignored */
4857 }
4859 @swash {
4860 swishy: 3 5; /* more than 1 value for swash, syntax error */
4861 }
4862 }
4864 p.codeblock {
4865 /* implies ss03 = 1, ss04 = 1, ss05 = 1 */
4866 font-variant-alternates: styleset(curly-quotes, code);
4867 }</pre>
4869 <p>For character-variant, a single value between 1 and 99 indicates the
4870 enabling of OpenType feature <span class=tag>cv01</span> through <span
4871 class=tag>cv99</span>. For OpenType fonts, values greater than 99 or equal
4872 to 0 are ignored but do not generate a syntax error when parsed but enable
4873 no OpenType features. When two values are listed, the first value
4874 indicates the feature used and the second the value passed for that
4875 feature. If more than two values are assigned to a given name, a syntax
4876 error occurs and the entire <a href="#featurevaluedefinition"><i
4877 title="feature_value_definition">feature value definition</i></a> is
4878 ignored.
4880 <pre>@font-feature-values MM Greek {
4881 @character-variant { alpha-2: 1 2; } /* implies cv01 = 2 */
4882 @character-variant { beta-3: 2 3; } /* implies cv02 = 3 */
4883 @character-variant { epsilon: 5 3 6; } /* more than 2 values, syntax error, definition ignored */
4884 @character-variant { gamma: 12; } /* implies cv12 = 1 */
4885 @character-variant { zeta: 20 3; } /* implies cv20 = 3 */
4886 @character-variant { zeta-2: 20 2; } /* implies cv20 = 2 */
4887 @character-variant { silly: 105; } /* >99, ignored */
4888 @character-variant { dumb: 323 3; } /* >99, ignored */
4889 }
4891 #title {
4892 /* use the third alternate beta, first alternate gamma */
4893 font-variant-alternates: character-variant(beta-3, gamma);
4894 }
4896 p {
4897 /* zeta-2 follows zeta, implies cv20 = 2 */
4898 font-variant-alternates: character-variant(zeta, zeta-2);
4899 }
4901 .special {
4902 /* zeta follows zeta-2, implies cv20 = 3 */
4903 font-variant-alternates: character-variant(zeta-2, zeta);
4904 }</pre>
4906 <div class=figure><img alt="Matching text on Byzantine seals using
4907 character variants" src=byzantineseal.png>
4908 <p class=caption>Byzantine seal text displayed with character variants
4909 </div>
4911 <div class=example>
4912 <p>In the figure above, the text in red is rendered using a font
4913 containing character variants that mimic the character forms found on a
4914 Byzantine seal from the 8th century A.D. Two lines below is the same text
4915 displayed in a font without variants. Note the two variants for U and N
4916 used on the seal.</p>
4918 <pre>@font-feature-values Athena Ruby {
4919 @character-variant {
4920 leo-B: 2 1;
4921 leo-M: 13 3;
4922 leo-alt-N: 14 1;
4923 leo-N: 14 2;
4924 leo-T: 20 1;
4925 leo-U: 21 2;
4926 leo-alt-U: 21 4;
4927 }
4928 }
4930 p {
4931 font-variant: discretionary-ligatures,
4932 character-variant(leo-B, leo-M, leo-N, leo-T, leo-U);
4933 }
4935 span.alt-N {
4936 font-variant-alternates: character-variant(leo-alt-N);
4937 }
4939 span.alt-U {
4940 font-variant-alternates: character-variant(leo-alt-U);
4941 }
4943 <p>ENO....UP͞RSTU<span class="alt-U">U</span>͞<span class="alt-U">U</span>ΚΑΙTỤẠG̣IUPNS</p>
4945 <p>LEON|ΚΑΙCONSTA|NTI<span class="alt-N">N</span>OS..|STOIBAṢ.|LIṢROM|AIO<span class="alt-N">N</span></p>
4946 </pre>
4947 </div>
4949 <h3 id=font-variant-east-asian-prop><span class=secno>6.10 </span>East
4950 Asian text rendering: the <a
4951 href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
4952 property</h3>
4954 <table class=propdef id=namefont-variant-east-asianvaluenormal-l>
4955 <tbody>
4956 <tr>
4957 <td>Name:
4959 <td><dfn
4960 id=propdef-font-variant-east-asian>font-variant-east-asian</dfn>
4962 <tr>
4963 <td>Value:
4965 <td><a href="#font-variant-east-asian-normal-value"
4966 title="normal!!font-variant-east-asian">normal</a> | [ <a
4967 href="#east-asian-variant-values"><var><east-asian-variant-values></var></a>
4968 || <a
4969 href="#east-asian-width-values"><var><east-asian-width-values></var></a>
4970 || <a href="#ruby">ruby</a> ]
4972 <tr>
4973 <td>Initial:
4975 <td>normal
4977 <tr>
4978 <td>Applies to:
4980 <td>all elements
4982 <tr>
4983 <td>Inherited:
4985 <td>yes
4987 <tr>
4988 <td>Percentages:
4990 <td>N/A
4992 <tr>
4993 <td>Media:
4995 <td>visual
4997 <tr>
4998 <td>Computed value:
5000 <td>as specified
5002 <tr>
5003 <td>Animatable:
5005 <td>no
5006 </table>
5008 <p>Allows control of glyph substitution and sizing in East Asian text.
5010 <pre
5011 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>
5013 <pre
5014 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>
5016 <p>Individual values have the following meanings:
5018 <dl>
5019 <dt><dfn id=font-variant-east-asian-normal-value
5020 title="normal!!font-variant-east-asian">normal</dfn>
5022 <dd>None of the features listed below are enabled.
5024 <dt><dfn id=jis78>jis78</dfn>
5026 <dd>Enables rendering of JIS78 forms (OpenType feature: <span
5027 class=tag>jp78</span>).
5028 </dl>
5030 <div class=featex><img alt="JIS78 form example" src=jp78.png></div>
5032 <dl>
5033 <dt><dfn id=jis83>jis83</dfn>
5035 <dd>Enables rendering of JIS83 forms (OpenType feature: <span
5036 class=tag>jp83</span>).
5038 <dt><dfn id=jis90>jis90</dfn>
5040 <dd>Enables rendering of JIS90 forms (OpenType feature: <span
5041 class=tag>jp90</span>).
5043 <dt><dfn id=jis04>jis04</dfn>
5045 <dd>Enables rendering of JIS2004 forms (OpenType feature: <span
5046 class=tag>jp04</span>).
5047 <p>The various JIS variants reflect the glyph forms defined in different
5048 Japanese national standards. Fonts generally include glyphs defined by
5049 the most recent national standard but it's sometimes necessary to use
5050 older variants, to match signage for example.</p>
5052 <dt><dfn id=simplified>simplified</dfn>
5054 <dd>Enables rendering of simplified forms (OpenType feature: <span
5055 class=tag>smpl</span>).
5057 <dt><dfn id=traditional>traditional</dfn>
5059 <dd>Enables rendering of traditional forms (OpenType feature: <span
5060 class=tag>trad</span>).
5061 </dl>
5063 <p>The ‘<a href="#simplified"><code
5064 class=property>simplified</code></a>’ and ‘<a
5065 href="#traditional"><code class=property>traditional</code></a>’ values
5066 allow control over the glyph forms for characters which have been
5067 simplified over time but for which the older, traditional form is still
5068 used in some contexts. The exact set of characters and glyph forms will
5069 vary to some degree by context for which a given font was designed.
5071 <div class=featex><img alt="tradtional form example" src=trad.png></div>
5073 <dl>
5074 <dt><dfn id=full-width>full-width</dfn>
5076 <dd>Enables rendering of full-width variants (OpenType feature: <span
5077 class=tag>fwid</span>).
5079 <dt><dfn id=proportional-width>proportional-width</dfn>
5081 <dd>Enables rendering of proportionally-spaced variants (OpenType feature:
5082 <span class=tag>pwid</span>).
5083 </dl>
5085 <div class=featex><img alt="proportionally spaced Japanese example"
5086 src=pwid.png></div>
5088 <dl>
5089 <dt><dfn id=ruby>ruby</dfn>
5091 <dd>Enables display of ruby variant glyphs (OpenType feature: <span
5092 class=tag>ruby</span>). Since ruby text is generally smaller than the
5093 associated body text, font designers can design special glyphs for use
5094 with ruby that are more readable than scaled down versions of the default
5095 glyphs. Only glyph selection is affected, there is no associated font
5096 scaling or other change that affects line layout. The red ruby text below
5097 is shown with default glyphs (top) and with ruby variant glyphs (bottom).
5098 Note the slight difference in stroke thickness.
5099 </dl>
5101 <div class=featex><img alt="ruby variant example" src=rubyshinkansen.png></div>
5103 <h3 id=font-variant-prop><span class=secno>6.11 </span>Overall shorthand
5104 for font rendering: the <a href="#propdef-font-variant">font-variant</a>
5105 property</h3>
5107 <table class=propdef id=namefont-variantvaluenormal-none-ltcommo>
5108 <tbody>
5109 <tr>
5110 <td>Name:
5112 <td><dfn id=propdef-font-variant
5113 title="font-variant!!property">font-variant</dfn>
5115 <tr>
5116 <td>Value:
5118 <td><a href="#font-variant-normal-value"
5119 title="normal!!font-variant">normal</a> | <a
5120 href="#font-variant-none-value" title="none!!font-variant">none</a> | [
5121 <a href="#common-lig-values"><var><common-lig-values></var></a>
5122 || <a
5123 href="#discretionary-lig-values"><var><discretionary-lig-values></var></a>
5124 || <a
5125 href="#historical-lig-values"><var><historical-lig-values></var></a>
5126 || <a
5127 href="#contextual-alt-values"><var><contextual-alt-values></var></a>
5128 || <a href="#stylistic"><var
5129 title=stylistic>stylistic(<feature-value-name>)</var></a> || <a
5130 href="#historical-forms"><var>historical-forms</var></a> || <a
5131 href="#styleset"><var
5132 title=styleset>styleset(<feature-value-name> #)</var></a> || <a
5133 href="#character-variant"><var
5134 title=character-variant>character-variant(<feature-value-name>
5135 #)</var></a> || <a href="#swash"><var
5136 title=swash>swash(<feature-value-name>)</var></a> || <a
5137 href="#ornaments"><var
5138 title=ornaments>ornaments(<feature-value-name>)</var></a> || <a
5139 href="#annotation"><var
5140 title=annotation>annotation(<feature-value-name>)</var></a> || [
5141 <a href="#small-caps"><i>small-caps</i></a> | <a
5142 href="#all-small-caps"><i>all-small-caps</i></a> | <a
5143 href="#petite-caps"><i>petite-caps</i></a> | <a
5144 href="#all-petite-caps"><i>all-petite-caps</i></a> | <a
5145 href="#unicase"><i>unicase</i></a> | <a
5146 href="#titling-caps"><i>titling-caps</i></a> ] || <a
5147 href="#numeric-figure-values"><var><numeric-figure-values></var></a>
5148 || <a
5149 href="#numeric-spacing-values"><var><numeric-spacing-values></var></a>
5150 || <a
5151 href="#numeric-fraction-values"><var><numeric-fraction-values></var></a>
5152 || <a href="#ordinal"><i>ordinal</i></a> || <a
5153 href="#slashed-zero"><i>slashed-zero</i></a> || <a
5154 href="#east-asian-variant-values"><var><east-asian-variant-values></var></a>
5155 || <a
5156 href="#east-asian-width-values"><var><east-asian-width-values></var></a>
5157 || <a href="#ruby"><i>ruby</i></a> ]
5159 <tr>
5160 <td>Initial:
5162 <td>normal
5164 <tr>
5165 <td>Applies to:
5167 <td>all elements
5169 <tr>
5170 <td>Inherited:
5172 <td>yes
5174 <tr>
5175 <td>Percentages:
5177 <td>see individual properties
5179 <tr>
5180 <td>Media:
5182 <td>visual
5184 <tr>
5185 <td>Computed value:
5187 <td>see individual properties
5189 <tr>
5190 <td>Animatable:
5192 <td>see individual properties
5193 </table>
5195 <p>The <a href="#propdef-font-variant"
5196 title="font-variant!!property">‘<code
5197 class=property>font-variant</code>’</a> property is a shorthand for all
5198 font-variant subproperties. The value <dfn id=font-variant-normal-value
5199 title="normal!!font-variant">‘<code
5200 class=property>normal</code>’</dfn> resets all subproperties of <a
5201 href="#propdef-font-variant" title="font-variant!!property">‘<code
5202 class=property>font-variant</code>’</a> to their inital value. The <dfn
5203 id=font-variant-none-value title="none!!font-variant">‘<code
5204 class=property>none</code>’</dfn> value sets ‘<a
5205 href="#propdef-font-variant-ligatures"><code
5206 class=property>font-variant-ligatures</code></a>’ to ‘<code
5207 class=property>none</code>’ and resets all other font feature properties
5208 to their initial value. Like other shorthands, using <a
5209 href="#propdef-font-variant" title="font-variant!!property">‘<code
5210 class=property>font-variant</code>’</a> resets unspecified <a
5211 href="#propdef-font-variant" title="font-variant!!property">‘<code
5212 class=property>font-variant</code>’</a> subproperties to their initial
5213 values. It does not reset the values of either ‘<a
5214 href="#propdef-font-language-override"><code
5215 class=property>font-language-override</code></a>’ or <a
5216 href="#propdef-font-feature-settings"
5217 title="font-feature-settings!!property">‘<code
5218 class=property>font-feature-settings</code>’</a>.
5220 <h3 id=font-feature-settings-prop><span class=secno>6.12 </span>Low-level
5221 font feature settings control: the <a
5222 href="#propdef-font-feature-settings">font-feature-settings</a> property</h3>
5224 <table class=propdef id=namefont-feature-settingsvaluenormal-ltf>
5225 <tbody>
5226 <tr>
5227 <td>Name:
5229 <td><dfn id=propdef-font-feature-settings
5230 title="font-feature-settings!!property">font-feature-settings</dfn>
5232 <tr>
5233 <td>Value:
5235 <td><a href="#font-feature-settings-normal-value"
5236 title="normal!!font-feature-settings">normal</a> | <a
5237 href="#feature-tag-value"><var><feature-tag-value></var></a> #
5239 <tr>
5240 <td>Initial:
5242 <td>normal
5244 <tr>
5245 <td>Applies to:
5247 <td>all elements
5249 <tr>
5250 <td>Inherited:
5252 <td>yes
5254 <tr>
5255 <td>Percentages:
5257 <td>N/A
5259 <tr>
5260 <td>Media:
5262 <td>visual
5264 <tr>
5265 <td>Computed value:
5267 <td>as specified
5269 <tr>
5270 <td>Animatable:
5272 <td>no
5273 </table>
5275 <p>This property provides low-level control over OpenType font features. It
5276 is intended as a way of providing access to font features that are not
5277 widely used but are needed for a particular use case.
5279 <p>Authors should generally use <a href="#propdef-font-variant"
5280 title="font-variant!!property">‘<code
5281 class=property>font-variant</code>’</a> and its related subproperties
5282 whenever possible and only use this property for special cases where its
5283 use is the only way of accessing a particular infrequently used font
5284 feature.
5286 <pre>/* enable small caps and use second swash alternate */
5287 font-feature-settings: "smcp", "swsh" 2;</pre>
5289 <p>A value of <dfn id=font-feature-settings-normal-value
5290 title="normal!!font-feature-settings">‘<code
5291 class=property>normal</code>’</dfn> means that no change in glyph
5292 selection or positioning occurs due to this property.
5294 <p>Feature tag values have the following syntax:
5296 <pre
5297 class=prod><dfn id=feature-tag-value><var><feature-tag-value></var></dfn> = <string> [ <integer> | on | off ]?</pre>
5299 <p>The <string> is a case-sensitive OpenType feature tag. As
5300 specified in the OpenType specification, feature tags contain four ASCII
5301 characters. Tag strings longer or shorter than four characters, or
5302 containing characters outside the U+20–7E codepoint range are invalid.
5303 Feature tags need only match a feature tag defined in the font, so they
5304 are not limited to explicitly registered OpenType features. Fonts defining
5305 custom feature tags should follow the <a
5306 href="http://www.microsoft.com/typography/otspec/featuretags.htm">tag name
5307 rules</a> defined in the OpenType specification <a
5308 href="#OPENTYPE-FEATURES"
5309 rel=biblioentry>[OPENTYPE-FEATURES]<!--{{!OPENTYPE-FEATURES}}--></a>.
5310 Feature tags not present in the font are ignored; a user agent must not
5311 attempt to synthesize fallback behavior based on these feature tags.
5313 <p>This means that explicitly disabling the <span class=tag>kern</span>
5314 feature will not affect the application of kerning data found in the
5315 ‘<code class=property>kern</code>’ table (as opposed to kerning data
5316 associated with the <span class=tag>kern</span> feature in the ‘<code
5317 class=property>GPOS</code>’ table). Authors should use the ‘<a
5318 href="#propdef-font-kerning"><code
5319 class=property>font-kerning</code></a>’ property to explictly enable or
5320 disable kerning since this property affects both types of kerning.
5322 <p>If present, a value indicates an index used for glyph selection. An
5323 <integer> value must be 0 or greater. A value of 0 indicates that
5324 the feature is disabled. For boolean features, a value of 1 enables the
5325 feature. For non-boolean features, a value of 1 or greater enables the
5326 feature and indicates the feature selection index. A value of ‘<code
5327 class=property>on</code>’ is synonymous with 1 and ‘<code
5328 class=property>off</code>’ is synonymous with 0. If the value is
5329 omitted, a value of 1 is assumed.
5331 <pre>
5332 font-feature-settings: "dlig" 1; /* dlig=1 enable discretionary ligatures */
5333 font-feature-settings: "smcp" on; /* smcp=1 enable small caps */
5334 font-feature-settings: 'c2sc'; /* c2sc=1 enable caps to small caps */
5335 font-feature-settings: "liga" off; /* liga=0 no common ligatures */
5336 font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms */
5337 font-feature-settings: "tnum" "hist"; /* invalid, need a comma-delimited list */
5338 font-feature-settings: "palin" off; /* good idea but invalid tagname */
5339 font-feature-settings: "PKRN"; /* PKRN=1 enable custom feature */
5340 font-feature-settings: dlig; /* invalid, tag must be a string */
5341 </pre>
5343 <p>When values greater than the range supported by the font are specified,
5344 the behavior is explicitly undefined. For boolean features, in general
5345 these will enable the feature. For non-boolean features, out of range
5346 values will in general be equivalent to a 0 value. However, in both cases
5347 the exact behavior will depend upon the way the font is designed
5348 (specifically, which type of lookup is used to define the feature).
5350 <p>Although specifically defined for OpenType feature tags, feature tags
5351 for other modern font formats that support font features may be added in
5352 the future. Where possible, features defined for other font formats should
5353 attempt to follow the pattern of registered OpenType tags.
5355 <div class=example>
5356 <p>The Japanese text below will be rendered with half-width kana
5357 characters:</p>
5359 <pre lang=ja>
5360 body { font-feature-settings: "hwid"; /* Half-width OpenType feature */ }
5362 <p>毎日<a href="http://images.google.com/images?q=%E3%82%AB%E3%83%AC%E3%83%BC" style="text-decoration: none;">カレー</a>食べてるのに、飽きない</p>
5363 </pre>
5364 </div>
5366 <h3 id=font-language-override-prop><span class=secno>6.13 </span>Font
5367 language override: the <a
5368 href="#propdef-font-language-override">font-language-override</a> property</h3>
5370 <table class=propdef id=namefont-language-overridevaluenormal-lt>
5371 <tbody>
5372 <tr>
5373 <td>Name:
5375 <td><dfn id=propdef-font-language-override>font-language-override</dfn>
5377 <tr>
5378 <td>Value:
5380 <td><a href="#font-language-override-normal-value"
5381 title="normal!!font-language-override">normal</a> | <a
5382 href="#font-language-override-string-value"><var><string></var></a>
5384 <tr>
5385 <td>Initial:
5387 <td><a href="#font-language-override-normal-value"
5388 title="normal!!font-language-override">normal</a>
5390 <tr>
5391 <td>Applies to:
5393 <td>all elements
5395 <tr>
5396 <td>Inherited:
5398 <td>yes
5400 <tr>
5401 <td>Percentages:
5403 <td>N/A
5405 <tr>
5406 <td>Media:
5408 <td>visual
5410 <tr>
5411 <td>Computed value:
5413 <td>as specified
5415 <tr>
5416 <td>Animatable:
5418 <td>no
5419 </table>
5421 <p>Normally, authors can control the use of language-specific glyph
5422 substitutions and positioning by setting the content language of an
5423 element, as <a href="#language-specific-support">described above</a>:
5425 <pre><!-- Display text using S'gaw Karen specific features -->
5426 <p lang="ksw">...</p></pre>
5428 <p>In some cases, authors may need to specify a language system that
5429 differs from the content language, for example due to the need to mimic
5430 another language's typographic traditions. The ‘<a
5431 href="#propdef-font-language-override"><code
5432 class=property>font-language-override</code></a>’ property allows
5433 authors to explicitly specify the language system of the font, overriding
5434 the language system implied by the content language.
5436 <p>Values have the following meanings:
5438 <dl>
5439 <dt><dfn id=font-language-override-normal-value
5440 title="normal!!font-language-override">normal</dfn>
5442 <dd>specifies that when rendering with OpenType fonts, the content
5443 language of the element is used to infer the OpenType language system
5445 <dt><dfn
5446 id=font-language-override-string-value><var><string></var></dfn>
5448 <dd>single three-letter case-sensitive OpenType <a
5449 href="http://www.microsoft.com/typography/otspec/languagetags.htm">language
5450 system tag</a>, specifies the OpenType language system to be used instead
5451 of the language system implied by the language of the element
5452 </dl>
5453 <!-- For this level, string represents a single language code, there's no concept of "fallback"
5454 http://www.w3.org/2013/06/07-css-minutes.html#item04 -->
5456 <p>Use of invalid OpenType language system tags must not generate a parse
5457 error but must be ignored when doing glyph selection and placement.
5459 <div class=example>
5460 <p>The <a href="http://www.un.org/en/documents/udhr/index.shtml">Universal
5461 Declaration of Human Rights</a> has been translated into a wide variety
5462 of languages. In Turkish, Article 9 of this document might be marked up
5463 as below:</p>
5465 <pre lang=tr><body lang="tr">
5467 <h4>Madde 9</h4>
5468 <p>Hiç kimse keyfi olarak tutuklanamaz, alıkonulanamaz veya sürülemez.</p>
5469 </pre>
5471 <p>Here the user agent uses the value of the ‘<code
5472 class=property>lang</code>’ attribute when rendering text and
5473 appropriately renders this text without ‘<code
5474 class=property>fi</code>’ ligatures. There is no need to use the ‘<a
5475 href="#propdef-font-language-override"><code
5476 class=property>font-language-override</code></a>’ property.</p>
5478 <p>However, a given font may lack support for a specific language. In this
5479 situation authors may need to use the typographic conventions of a
5480 related language that are supported by that font:</p>
5482 <pre lang=mk><body lang="mk"> <!-- Macedonian lang code -->
5484 body { font-language-override: "SRB"; /* Serbian OpenType language tag */ }
5486 <h4>Члeн 9</h4>
5487 <p>Никoj чoвeк нeмa дa бидe пoдлoжeн нa прoизвoлнo aпсeњe, притвoр или прoгoнувaњe.</p>
5489 </pre>
5491 <p>The Macedonian text here will be rendered using Serbian typographic
5492 conventions, with the assumption that the font specified supports
5493 Serbian.</p>
5494 </div>
5496 <p><a id=rendering-considerations></a>
5498 <h2 id=font-feature-resolution><span class=secno>7 </span>Font Feature
5499 Resolution</h2>
5501 <p>As described in the previous section, font features can be enabled in a
5502 variety of ways, either via the use of <a href="#propdef-font-variant"
5503 title="font-variant!!property">‘<code
5504 class=property>font-variant</code>’</a> or <a
5505 href="#propdef-font-feature-settings"
5506 title="font-feature-settings!!property">‘<code
5507 class=property>font-feature-settings</code>’</a> in a style rule or
5508 within an <a href="#at-font-face-rule"><code>@font-face</code></a> rule.
5509 The resolution order for the union of these settings is defined below.
5510 Features defined via CSS properties are applied on top of layout engine
5511 default features.
5513 <h3 id=default-features><span class=secno>7.1 </span>Default features</h3>
5515 <p>For OpenType fonts, user agents must enable the default features defined
5516 in the OpenType documentation for a given script and writing mode.
5517 Required ligatures, common ligatures and contextual forms must be enabled
5518 by default (OpenType features: <span class=tag>rlig, liga, clig,
5519 calt</span>), along with localized forms (OpenType feature: <span
5520 class=tag>locl</span>), and features required for proper display of
5521 composed characters and marks (OpenType features: <span class=tag>ccmp,
5522 mark, mkmk</span>). These features must always be enabled, even when the
5523 value of the <a href="#propdef-font-variant"
5524 title="font-variant!!property">‘<code
5525 class=property>font-variant</code>’</a> and <a
5526 href="#propdef-font-feature-settings"
5527 title="font-feature-settings!!property">‘<code
5528 class=property>font-feature-settings</code>’</a> properties is <span
5529 title="normal value">‘<code class=property>normal</code>’</span>.
5530 Individual features are only disabled when explicitly overridden by the
5531 author, as when ‘<a href="#propdef-font-variant-ligatures"><code
5532 class=property>font-variant-ligatures</code></a>’ is set to ‘<a
5533 href="#no-common-ligatures"><code
5534 class=property>no-common-ligatures</code></a>’. For handling complex
5535 scripts such as <a
5536 href="http://www.microsoft.com/typography/otfntdev/arabicot/features.aspx">Arabic</a>,
5537 <a
5538 href="http://www.microsoft.com/typography/otfntdev/mongolot/features.htm">Mongolian</a>
5539 or <a
5540 href="http://www.microsoft.com/typography/otfntdev/devanot/features.aspx">Devanagari</a>
5541 additional features are required. For upright text within vertical text
5542 runs, vertical alternates (OpenType feature: <span class=tag>vert</span>)
5543 must be enabled.
5545 <h3 id=feature-precedence><span class=secno>7.2 </span>Feature precedence</h3>
5547 <p>General and <a href="#font-specific"><em>font specific</em></a> font
5548 feature property settings are resolved in the order below, in ascending
5549 order of precedence. This ordering is used to construct a combined list of
5550 font features that affect a given text run.
5552 <ol>
5553 <li>Font features enabled by default, including features required for a
5554 given script.
5556 <li>If the font is defined via an <a
5557 href="#at-font-face-rule"><code>@font-face</code></a> rule, the font
5558 features implied by the font-variant descriptor in the <a
5559 href="#at-font-face-rule"><code>@font-face</code></a> rule.
5561 <li>If the font is defined via an <a
5562 href="#at-font-face-rule"><code>@font-face</code></a> rule, the font
5563 features implied by the font-feature-settings descriptor in the <a
5564 href="#at-font-face-rule"><code>@font-face</code></a> rule.
5566 <li>Feature settings determined by properties other than <a
5567 href="#propdef-font-variant" title="font-variant!!property">‘<code
5568 class=property>font-variant</code>’</a> or <a
5569 href="#propdef-font-feature-settings"
5570 title="font-feature-settings!!property">‘<code
5571 class=property>font-feature-settings</code>’</a>. For example, setting
5572 a non-default value for the ‘<code
5573 class=property>letter-spacing</code>’ property disables common
5574 ligatures.
5576 <li>Font features implied by the value of the <a
5577 href="#propdef-font-variant" title="font-variant!!property">‘<code
5578 class=property>font-variant</code>’</a> property, the related <a
5579 href="#propdef-font-variant" title="font-variant!!property">‘<code
5580 class=property>font-variant</code>’</a> subproperties and any other CSS
5581 property that uses OpenType features (e.g. the ‘<a
5582 href="#propdef-font-kerning"><code
5583 class=property>font-kerning</code></a>’ property).
5585 <li>Font features implied by the value of <a
5586 href="#propdef-font-feature-settings"
5587 title="font-feature-settings!!property">‘<code
5588 class=property>font-feature-settings</code>’</a> property.
5589 </ol>
5591 <p>This ordering allows authors to set up a general set of defaults for
5592 fonts within their <a
5593 href="#at-font-face-rule"><code>@font-face</code></a> rules, then override
5594 them with property settings for specific elements. General property
5595 settings override the settings in <a
5596 href="#at-font-face-rule"><code>@font-face</code></a> rules and low-level
5597 font feature settings override <a href="#propdef-font-variant"
5598 title="font-variant!!property">‘<code
5599 class=property>font-variant</code>’</a> property settings.
5601 <p>For situations where the combined list of font feature settings contains
5602 more than one value for the same feature, the last value is used. When a
5603 font lacks support for a given underlying font feature, text is simply
5604 rendered as if that font feature was not enabled; font fallback does not
5605 occur and no attempt is made to synthesize the feature except where
5606 explicitly defined for specific properties.
5608 <h3 id=feature-precedence-examples><span class=secno>7.3 </span>Feature
5609 precedence examples</h3>
5611 <div class=example>
5612 <p>With the styles below, numbers are rendered proportionally when used
5613 within a paragraph but are shown in tabular form within tables of prices:</p>
5615 <pre>body {
5616 font-variant-numeric: proportional-nums;
5617 }
5619 table.prices td {
5620 font-variant-numeric: tabular-nums;
5621 }
5622 </pre>
5623 </div>
5625 <div class=example>
5626 <p>When the <a href="#descdef-font-variant"
5627 title="font-variant!!descriptor">font-variant</a> descriptor is used
5628 within an <a href="#at-font-face-rule"><code>@font-face</code></a> rule,
5629 it only applies to the font defined by that rule.</p>
5631 <pre>@font-face {
5632 font-family: MainText;
5633 src: url(http://example.com/font.ttf);
5634 font-variant: oldstyle-nums proportional-nums styleset(1,3);
5635 }
5637 body {
5638 font-family: MainText, Helvetica;
5639 }
5641 table.prices td {
5642 font-variant-numeric: tabular-nums;
5643 }
5644 </pre>
5646 <p>In this case, old-style numerals will be used throughout but only where
5647 the font "MainText" is used. Just as in the previous example, tabular
5648 values will be used in price tables since ‘<a
5649 href="#tabular-nums"><code class=property>tabular-nums</code></a>’
5650 appears in a general style rule and its use is mutually exclusive with
5651 ‘<a href="#proportional-nums"><code
5652 class=property>proportional-nums</code></a>’. Stylistic alternate sets
5653 will only be used where MainText is used.</p>
5654 </div>
5656 <div class=example>
5657 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule can
5658 also be used to access font features in locally available fonts via the
5659 use of <code>local()</code> in the ‘<a href="#descdef-src"><code
5660 class=property>src</code></a>’ descriptor of the <a
5661 href="#at-font-face-rule"><code>@font-face</code></a> definition:</p>
5663 <pre>@font-face {
5664 font-family: BodyText;
5665 src: local("HiraMaruPro-W4");
5666 font-variant: proportional-width;
5667 font-feature-settings: "ital"; /* Latin italics within CJK text feature */
5668 }
5670 body { font-family: BodyText, serif; }
5671 </pre>
5673 <p>If available, a Japanese font "Hiragino Maru Gothic" will be used. When
5674 text rendering occurs, Japanese kana will be proportionally spaced and
5675 Latin text will be italicised. Text rendered with the fallback serif font
5676 will use default rendering properties.</p>
5677 </div>
5679 <div class=example>
5680 <p>In the example below, discretionary ligatures are enabled only for a
5681 downloadable font but are disabled within spans of class "special":</p>
5683 <pre>@font-face {
5684 font-family: main;
5685 src: url(fonts/ffmeta.woff) format("woff");
5686 font-variant: discretionary-ligatures;
5687 }
5689 body { font-family: main, Helvetica; }
5690 span.special { font-variant-ligatures: no-discretionary-ligatures; }
5691 </pre>
5693 <p>Suppose one adds a rule using ‘<code
5694 class=property>font-feature-settings</code>’ to enable discretionary
5695 ligatures:</p>
5697 <pre>body { font-family: main, Helvetica; }
5698 span { font-feature-settings: "dlig"; }
5699 span.special { font-variant-ligatures: no-discretionary-ligatures; }
5700 </pre>
5702 <p>In this case, discretionary ligatures <em>will</em> be rendered within
5703 spans of class "special". This is because both the <a
5704 href="#propdef-font-feature-settings"
5705 title="font-feature-settings!!property">‘<code
5706 class=property>font-feature-settings</code>’</a> and ‘<a
5707 href="#propdef-font-variant-ligatures"><code
5708 class=property>font-variant-ligatures</code></a>’ properties apply to
5709 these spans. Although the ‘<code class=css>no-discretionary
5710 ligatures</code>’ setting of ‘<a
5711 href="#propdef-font-variant-ligatures"><code
5712 class=property>font-variant-ligatures</code></a>’ effectively disables
5713 the OpenType <span class=tag>dlig</span> feature, because the <a
5714 href="#propdef-font-feature-settings"
5715 title="font-feature-settings!!property">‘<code
5716 class=property>font-feature-settings</code>’</a> is resolved after
5717 that, the ‘<code class=property>dlig</code>’ value reenables
5718 discretionary ligatures.</p>
5719 </div>
5721 <h2 id=object-model><span class=secno>8 </span>Object Model</h2>
5723 <p>The contents of <a href="#at-font-face-rule"><code>@font-face</code></a>
5724 and <a
5725 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
5726 rules can be accessed via the following extensions to the CSS Object
5727 Model.
5729 <h3 id=om-fontface><span class=secno>8.1 </span>The <a
5730 href="#cssfontfacerule"><code>CSSFontFaceRule</code></a> interface</h3>
5732 <p>The <dfn id=cssfontfacerule>CSSFontFaceRule</dfn> interface represents a
5733 <a href="#at-font-face-rule"><code>@font-face</code></a> rule.
5735 <pre class=idl>
5736 interface CSSFontFaceRule : CSSRule {
5737 attribute DOMString family;
5738 attribute DOMString src;
5739 attribute DOMString style;
5740 attribute DOMString weight;
5741 attribute DOMString stretch;
5742 attribute DOMString unicodeRange;
5743 attribute DOMString variant;
5744 attribute DOMString featureSettings;
5745 }</pre>
5747 <p>The DOM Level 2 Style specification <a href="#DOM-LEVEL-2-STYLE"
5748 rel=biblioentry>[DOM-LEVEL-2-STYLE]<!--{{DOM-LEVEL-2-STYLE}}--></a>
5749 defined a different variant of this rule. This definition supercedes that
5750 one.
5752 <h3 id=om-fontfeaturevalues><span class=secno>8.2 </span>The <a
5753 href="#cssfontfeaturevaluesrule"><code>CSSFontFeatureValuesRule</code></a>
5754 interface</h3>
5756 <p>The <code>CSSRule</code> interface is extended as follows:
5758 <pre class=idl>partial interface CSSRule {
5759 const unsigned short FONT_FEATURE_VALUES_RULE = 14;
5760 }</pre>
5762 <p>The <dfn id=cssfontfeaturevaluesrule>CSSFontFeatureValuesRule</dfn>
5763 interface represents a <a
5764 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
5765 rule.
5767 <pre class=idl>interface CSSFontFeatureValuesRule : CSSRule {
5768 attribute DOMString fontFamily;
5769 readonly attribute CSSFontFeatureValuesMap annotation;
5770 readonly attribute CSSFontFeatureValuesMap ornaments;
5771 readonly attribute CSSFontFeatureValuesMap stylistic;
5772 readonly attribute CSSFontFeatureValuesMap swash;
5773 readonly attribute CSSFontFeatureValuesMap characterVariant;
5774 readonly attribute CSSFontFeatureValuesMap styleset;
5775 }
5777 [MapClass(DOMString, sequence<unsigned long>)]
5778 interface CSSFontFeatureValuesMap {
5779 void set(DOMString featureValueName,
5780 (unsigned long or sequence<unsigned long>) values);
5781 }</pre>
5783 <dl class=idl-attributes>
5784 <dt><var>fontFamily</var> of type <code>DOMString</code>
5786 <dd>The list of one or more font families for which a given set of feature
5787 values is defined.
5789 <dt>value maps of type <code>CSSFontFeatureValuesMap</code>, readonly
5791 <dd>Maps of feature values associated with feature value names for a given
5792 ‘<a href="#propdef-font-variant-alternates"><code
5793 class=property>font-variant-alternates</code></a>’ value type
5794 </dl>
5796 <p>Each value map attribute of <a
5797 href="#cssfontfeaturevaluesrule"><code>CSSFontFeatureValuesRule</code></a>
5798 reflects the values defined via a corresponding <a
5799 href="#featurevalueblock"><i title="feature_value_block">feature value
5800 block</i></a>. Thus, the <var title="annotation
5801 attribute">annotation</var> attribute contains the values contained within
5802 a <code title="@annotation">@annotation</code> <a
5803 href="#featurevalueblock"><i title="feature_value_block">feature value
5804 block</i></a>, the <var title="ornaments attribute">ornaments</var>
5805 attribute contains the values contained with a <code
5806 title="@ornaments">@ornaments</code> <a href="#featurevalueblock"><i
5807 title="feature_value_block">feature value block</i></a> and so forth.
5809 <p>The <code>CSSFontFeatureValuesMap</code> interface uses the <a
5810 href="http://dev.w3.org/2006/webapi/WebIDL/#es-map-members">default
5811 methods of map class</a> but the <code>set</code> method takes a sequence
5812 of unsigned integers and associates it with a given
5813 <code>featureValueName</code>. The method behaves the same as the default
5814 map class method except that a single unsigned long value is treated as a
5815 sequence of a single value. The method throws an exception if an invalid
5816 number of values is passed in. If the associated <a
5817 href="#featurevalueblock"><i title="feature_value_block">feature value
5818 block</i></a> only allows a limited number of values, the <code>set</code>
5819 method throws an <code>InvalidAccessError</code> exception when the input
5820 sequence to <code>set</code> contains more than the limited number of
5821 values. See the description of <a
5822 href="#multi-valued-feature-value-definitions">multi-valued feature value
5823 definitions</a> for details on the maximum number of values allowed for a
5824 given type of <a href="#featurevalueblock"><i
5825 title="feature_value_block">feature value block</i></a>. The
5826 <code>get</code> method always returns a sequence of values, even if the
5827 sequence only contains a single value.
5829 <h2 class=no-num id=platform-props-to-css>Appendix A: Mapping platform font
5830 properties to CSS properties</h2>
5832 <p><em>This appendix is included as background for some of the problems and
5833 situations that are described in other sections. It should be viewed as
5834 informative only.</em>
5836 <p>Font properties in CSS are designed to be independent of the underlying
5837 font formats used; they can be used to specify bitmap fonts, Type1 fonts,
5838 SVG fonts in addition to the common TrueType and OpenType fonts. But there
5839 are facets of the TrueType and OpenType formats that often cause confusion
5840 for authors and present challenges to implementers on different platforms.
5842 <p>Originally developed at Apple, TrueType was designed as an outline font
5843 format for both screen and print. Microsoft joined Apple in developing the
5844 TrueType format and both platforms have supported TrueType fonts since
5845 then. Font data in the TrueType format consists of a set of tables
5846 distinguished with common four-letter tag names, each containing a
5847 specific type of data. For example, naming information, including
5848 copyright and license information, is stored in the ‘<code
5849 class=property>name</code>’ table. The <a
5850 href="#character-map"><em>character map</em></a> (‘<code
5851 class=property>cmap</code>’) table contains a mapping of character
5852 encodings to glyphs. Apple later added additional tables for supporting
5853 enhanced typographic functionality; these are now called Apple Advanced
5854 Typography, or AAT, fonts. Microsoft and Adobe developed a separate set of
5855 tables for advanced typography and called their format OpenType <a
5856 href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>.
5858 <p>In many cases the font data used under Microsoft Windows or Linux is
5859 slightly different from the data used under Apple's Mac OS X because the
5860 TrueType format allowed for explicit variation across platforms. This
5861 includes font metrics, names and <a href="#character-map"><em>character
5862 map</em></a> data.
5864 <p>Specifically, font family name data is handled differently across
5865 platforms. For TrueType and OpenType fonts these names are contained in
5866 the ‘<code class=property>name</code>’ table, in name records with
5867 name ID 1. Mulitple names can be stored for different locales, but
5868 Microsoft recommends fonts always include at least a US English version of
5869 the name. On Windows, Microsoft made the decision for backwards
5870 compatibility to limit this family name to a maximum of four faces; for
5871 larger groupings the "preferred family" (name ID 16) or "WWS family" (name
5872 ID 21) can be used. Other platforms such as OSX don't have this
5873 limitation, so the family name is used to define all possible groupings.
5875 <p>Other name table data provides names used to uniquely identify a
5876 specific face within a family. The full font name (name ID 4) and the
5877 Postscript name (name ID 6) describe a single face uniquely. For example,
5878 the bold face of the Gill Sans family has a fullname of "Gill Sans Bold"
5879 and a Postscript name of "GillSans-Bold". There can be multiple localized
5880 versions of the fullname for a given face, but the Postscript name is
5881 always a unique name made from a limited set of ASCII characters.
5883 <p>On various platforms, different names are used to search for a font. For
5884 example, with the Windows GDI CreateIndirectFont API, either a family or
5885 fullname can be used to lookup a face, while on Mac OS X the
5886 CTFontCreateWithName API call is used to lookup a given face using the
5887 fullname and Postscript name. Under Linux, the fontconfig API allows fonts
5888 to be searched using any of these names. In situations where platform
5889 API's automatically substitute other font choices, it may be necessary to
5890 verify a returned font matches a given name.
5892 <p>The weight of a given face can be determined via the usWeightClass field
5893 of the OS/2 table or inferred from the style name (name ID 2). Likewise,
5894 the width can be determined via the usWidthClass of the OS/2 table or
5895 inferred from the style name. For historical reasons related to synthetic
5896 bolding at weights 200 or lower with the Windows GDI API, font designers
5897 have sometimes skewed values in the OS/2 table to avoid these weights.
5899 <p>Rendering complex scripts that use contextual shaping such as Thai,
5900 Arabic and Devanagari requires features present only in OpenType or AAT
5901 fonts. Currently, complex script rendering is supported on Windows and
5902 Linux using OpenType font features while both OpenType and AAT font
5903 features are used under Mac OS X.
5905 <h2 class=no-num id=ch-ch-ch-changes>Changes</h2>
5907 <h3 class=no-num id=recent-changes> Changes from the <a
5908 href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/">February 2013
5909 CSS3 Fonts Working Draft</a></h3>
5911 <p>Major changes include:
5913 <ul>
5914 <li>Moved font load events into a separate <a
5915 href="http://dev.w3.org/csswg/css3-font-load-events/">spec</a>
5917 <li>Tightened syntax rules for <a
5918 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
5919 rules
5921 <li>Added grammar productions for <a
5922 href="#at-font-face-rule"><code>@font-face</code></a> and <a
5923 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
5924 rules
5926 <li>Revised definition of ‘<a href="#descdef-unicode-range"><code
5927 class=property>unicode-range</code></a>’ descriptor
5929 <li>Detailed font matching of composite faces
5931 <li>Revised object model interface of CSSFontFeatureValuesRule
5933 <li>Detailed effect of ‘<a href="#propdef-font-size-adjust"><code
5934 class=property>font-size-adjust</code></a>’ on relative unit sizes
5936 <li>Reference the potentially CORS-enabled fetch method defined in HTML5
5937 </ul>
5939 <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
5941 <p>I'd like to thank Tal Leming, Jonathan Kew and Christopher Slye for all
5942 their help and feedback. John Hudson was kind enough to take the time to
5943 explain the subtleties of OpenType language tags and provided the example
5944 of character variant usage for displaying text on Byzantine seals. Ken
5945 Lunde and Eric Muller provided valuable feedback on CJK OpenType features
5946 and Unicode variation selectors. The idea for supporting font features by
5947 using <a href="#propdef-font-variant"
5948 title="font-variant!!property">‘<code
5949 class=property>font-variant</code>’</a> subproperties originated with
5950 Håkon Wium Lie, Adam Twardoch and Tal Leming. Elika Etemad supplied some
5951 of the initial design ideas for the <a
5952 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
5953 rule. Thanks also to House Industries for allowing the use of Ed Interlock
5954 in the discretionary ligatures example.
5956 <p>A special thanks to Robert Bringhurst for the sublime mind expansion
5957 that is <em>The Elements of Typographic Style</em>.
5959 <h2 class=no-num id=conformance> Conformance</h2>
5961 <h3 class=no-num id=conventions> Document Conventions</h3>
5963 <p>Conformance requirements are expressed with a combination of descriptive
5964 assertions and RFC 2119 terminology. The key words “MUST”, “MUST
5965 NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
5966 “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
5967 normative parts of this document are to be interpreted as described in RFC
5968 2119. However, for readability, these words do not appear in all uppercase
5969 letters in this specification.
5971 <p>All of the text of this specification is normative except sections
5972 explicitly marked as non-normative, examples, and notes. <a
5973 href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
5975 <p>Examples in this specification are introduced with the words “for
5976 example” or are set apart from the normative text with
5977 <code>class="example"</code>, like this:
5979 <div class=example>
5980 <p>This is an example of an informative example.
5981 </div>
5983 <p>Informative notes begin with the word “Note” and are set apart from
5984 the normative text with <code>class="note"</code>, like this:
5986 <p class=note>Note, this is an informative note.
5988 <h3 class=no-num id=conformance-classes> Conformance Classes</h3>
5990 <p>Conformance to CSS Fonts Level 3 Module is defined for three conformance
5991 classes:
5993 <dl>
5994 <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
5995 sheet</dfn>
5997 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
5998 style sheet</a>.
6000 <dt><dfn id=renderer>renderer</dfn>
6002 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
6003 that interprets the semantics of a style sheet and renders documents that
6004 use them.
6006 <dt><dfn id=authoring-tool>authoring tool</dfn>
6008 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
6009 that writes a style sheet.
6010 </dl>
6012 <p>A style sheet is conformant to CSS Fonts Level 3 Module if all of its
6013 declarations that use properties defined in this module have values that
6014 are valid according to the generic CSS grammar and the individual grammars
6015 of each property as given in this module.
6017 <p>A renderer is conformant to CSS Fonts Level 3 Module if, in addition to
6018 interpreting the style sheet as defined by the appropriate specifications,
6019 it supports all the features defined by CSS Fonts Level 3 Module by
6020 parsing them correctly and rendering the document accordingly. However,
6021 the inability of a UA to correctly render a document due to limitations of
6022 the device does not make the UA non-conformant. (For example, a UA is not
6023 required to render color on a monochrome monitor.)
6025 <p>An authoring tool is conformant to CSS Fonts Level 3 Module if it writes
6026 style sheets that are syntactically correct according to the generic CSS
6027 grammar and the individual grammars of each feature in this module, and
6028 meet all other conformance requirements of style sheets as described in
6029 this module.
6031 <h3 class=no-num id=partial> Partial Implementations</h3>
6033 <p>So that authors can exploit the forward-compatible parsing rules to
6034 assign fallback values, CSS renderers <strong>must</strong> treat as
6035 invalid (and <a
6036 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
6037 appropriate</a>) any at-rules, properties, property values, keywords, and
6038 other syntactic constructs for which they have no usable level of support.
6039 In particular, user agents <strong>must not</strong> selectively ignore
6040 unsupported component values and honor supported values in a single
6041 multi-value property declaration: if any value is considered invalid (as
6042 unsupported values must be), CSS requires that the entire declaration be
6043 ignored.
6045 <h3 class=no-num id=experimental> Experimental Implementations</h3>
6047 <p>To avoid clashes with future CSS features, the CSS2.1 specification
6048 reserves a <a
6049 href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
6050 syntax</a> for proprietary and experimental extensions to CSS.
6052 <p>Prior to a specification reaching the Candidate Recommendation stage in
6053 the W3C process, all implementations of a CSS feature are considered
6054 experimental. The CSS Working Group recommends that implementations use a
6055 vendor-prefixed syntax for such features, including those in W3C Working
6056 Drafts. This avoids incompatibilities with future changes in the draft.
6058 <h3 class=no-num id=testing> Non-Experimental Implementations</h3>
6060 <p>Once a specification reaches the Candidate Recommendation stage,
6061 non-experimental implementations are possible, and implementors should
6062 release an unprefixed implementation of any CR-level feature they can
6063 demonstrate to be correctly implemented according to spec.
6065 <p>To establish and maintain the interoperability of CSS across
6066 implementations, the CSS Working Group requests that non-experimental CSS
6067 renderers submit an implementation report (and, if necessary, the
6068 testcases used for that implementation report) to the W3C before releasing
6069 an unprefixed implementation of any CSS features. Testcases submitted to
6070 W3C are subject to review and correction by the CSS Working Group.
6072 <p>Further information on submitting testcases and implementation reports
6073 can be found from on the CSS Working Group's website at <a
6074 href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
6075 Questions should be directed to the <a
6076 href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
6077 mailing list.
6079 <h2 class=no-num id=references>References</h2>
6081 <h3 class=no-num id=normative-references>Normative References</h3>
6082 <!--begin-normative-->
6083 <!-- Sorted by label -->
6085 <dl class=bibliography>
6086 <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
6087 <!---->
6089 <dt id=CHARMOD>[CHARMOD]
6091 <dd>Martin J. Dürst; et al. <a
6092 href="http://www.w3.org/TR/2005/REC-charmod-20050215/"><cite>Character
6093 Model for the World Wide Web 1.0: Fundamentals.</cite></a> 15 February
6094 2005. W3C Recommendation. URL: <a
6095 href="http://www.w3.org/TR/2005/REC-charmod-20050215/">http://www.w3.org/TR/2005/REC-charmod-20050215/</a>
6096 </dd>
6097 <!---->
6099 <dt id=CORS>[CORS]
6101 <dd>Anne van Kesteren. <a
6102 href="http://www.w3.org/TR/2013/CR-cors-20130129/"><cite>Cross-Origin
6103 Resource Sharing.</cite></a> 29 January 2013. W3C Candidate
6104 Recommendation. (Work in progress.) URL: <a
6105 href="http://www.w3.org/TR/2013/CR-cors-20130129/">http://www.w3.org/TR/2013/CR-cors-20130129/</a>
6106 </dd>
6107 <!---->
6109 <dt id=CSS21>[CSS21]
6111 <dd>Bert Bos; et al. <a
6112 href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
6113 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
6114 2011. W3C Recommendation. URL: <a
6115 href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
6116 </dd>
6117 <!---->
6119 <dt id=CSS3VAL>[CSS3VAL]
6121 <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
6122 href="http://www.w3.org/TR/2013/CR-css3-values-20130404/"><cite>CSS
6123 Values and Units Module Level 3.</cite></a> 4 April 2013. W3C Candidate
6124 Recommendation. (Work in progress.) URL: <a
6125 href="http://www.w3.org/TR/2013/CR-css3-values-20130404/">http://www.w3.org/TR/2013/CR-css3-values-20130404/</a>
6126 </dd>
6127 <!---->
6129 <dt id=HTML5>[HTML5]
6131 <dd>Ian Hickson. <a
6132 href="http://www.w3.org/TR/2012/CR-html5-20121217/"><cite>HTML5.</cite></a>
6133 17 December 2012. W3C Candidate Recommendation. (Work in progress.) URL:
6134 <a
6135 href="http://www.w3.org/TR/2012/CR-html5-20121217/">http://www.w3.org/TR/2012/CR-html5-20121217/</a>
6136 </dd>
6137 <!---->
6139 <dt id=OPEN-FONT-FORMAT>[OPEN-FONT-FORMAT]
6141 <dd><a
6142 href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip"><cite>Information
6143 technology — Coding of audio-visual objects — Part 22: Open Font
6144 Format.</cite></a> International Organization for Standardization.
6145 ISO/IEC 14496-22:2009. URL: <a
6146 href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip">http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip</a>
6147 </dd>
6148 <!---->
6150 <dt id=OPENTYPE>[OPENTYPE]
6152 <dd><a
6153 href="http://www.microsoft.com/typography/otspec/default.htm"><cite>OpenType
6154 specification.</cite></a> Microsoft. URL: <a
6155 href="http://www.microsoft.com/typography/otspec/default.htm">http://www.microsoft.com/typography/otspec/default.htm</a>
6156 </dd>
6157 <!---->
6159 <dt id=OPENTYPE-FEATURES>[OPENTYPE-FEATURES]
6161 <dd><a
6162 href="http://www.microsoft.com/typography/otspec/featurelist.htm"><cite>OpenType
6163 feature registry.</cite></a> Microsoft. URL: <a
6164 href="http://www.microsoft.com/typography/otspec/featurelist.htm">http://www.microsoft.com/typography/otspec/featurelist.htm</a>
6165 </dd>
6166 <!---->
6168 <dt id=RFC2119>[RFC2119]
6170 <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
6171 words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
6172 RFC 2119. URL: <a
6173 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
6174 </dd>
6175 <!---->
6177 <dt id=UAX15>[UAX15]
6179 <dd>Mark Davis; Ken Whistler. <a
6180 href="http://www.unicode.org/reports/tr15/"><cite>Unicode Normalization
6181 Forms.</cite></a> 31 August 2012. Unicode Standard Annex #15. URL: <a
6182 href="http://www.unicode.org/reports/tr15/">http://www.unicode.org/reports/tr15/</a>
6183 </dd>
6184 <!---->
6186 <dt id=UAX29>[UAX29]
6188 <dd>Mark Davis. <a
6189 href="http://www.unicode.org/reports/tr29/"><cite>Unicode Text
6190 Segmentation.</cite></a> 12 September 2012. Unicode Standard Annex #29.
6191 URL: <a
6192 href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a>
6193 </dd>
6194 <!---->
6196 <dt id=UNICODE6>[UNICODE6]
6198 <dd>The Unicode Consortium. <a
6199 href="http://www.unicode.org/versions/Unicode6.2.0/"><cite>The Unicode
6200 Standard, Version 6.2.0.</cite></a> Defined by: The Unicode Standard,
6201 Version 6.2.0 URL: <a
6202 href="http://www.unicode.org/versions/Unicode6.2.0/">http://www.unicode.org/versions/Unicode6.2.0/</a>
6203 </dd>
6204 <!---->
6205 </dl>
6206 <!--end-normative-->
6207 <!--{{!CSS21}}-->
6208 <!--{{!CSS3VAL}}-->
6209 <!--{{!OPENTYPE}}-->
6210 <!--{{!OPENTYPE-FEATURES}}-->
6211 <!--{{!OPEN-FONT-FORMAT}}-->
6212 <!--{{!UNICODE6}}-->
6213 <!--{{!UAX15}}-->
6214 <!--{{!UAX29}}-->
6215 <!--{{!CORS}}-->
6216 <!--{{!HTML5}}-->
6217 <!--{{!CHARMOD}}-->
6219 <h3 class=no-num id=other-references>Other References</h3>
6220 <!--begin-informative-->
6221 <!-- Sorted by label -->
6223 <dl class=bibliography>
6224 <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
6225 <!---->
6227 <dt id=AAT-FEATURES>[AAT-FEATURES]
6229 <dd><a href="http://developer.apple.com/fonts/registry/"><cite>Apple
6230 Advanced Typography font feature registry.</cite></a> Apple. URL: <a
6231 href="http://developer.apple.com/fonts/registry/">http://developer.apple.com/fonts/registry/</a>
6232 </dd>
6233 <!---->
6235 <dt id=ARABIC-TYPO>[ARABIC-TYPO]
6237 <dd>Huda Smitshuijzen AbiFares. <cite>Arabic Typography: A Comprehensive
6238 Sourcebook.</cite> Saqi Books. 2001. ISBN 0-86356-347-3.</dd>
6239 <!---->
6241 <dt id=CHARMOD-NORM>[CHARMOD-NORM]
6243 <dd>François Yergeau; et al. <a
6244 href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/"><cite>Character
6245 Model for the World Wide Web 1.0: Normalization.</cite></a> 1 May 2012.
6246 W3C Working Draft. (Work in progress.) URL: <a
6247 href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/">http://www.w3.org/TR/2012/WD-charmod-norm-20120501/</a>
6248 </dd>
6249 <!---->
6251 <dt id=CJKV-INFO-PROCESSING>[CJKV-INFO-PROCESSING]
6253 <dd>Ken Lunde. <cite>CJKV Information Processing, Second Edition.</cite>
6254 O'Reilly Media, Inc. 2009. ISBN 0-596-51447-1.</dd>
6255 <!---->
6257 <dt id=CSS3-CONDITIONAL>[CSS3-CONDITIONAL]
6259 <dd>L. David Baron. <a
6260 href="http://www.w3.org/TR/2013/CR-css3-conditional-20130404/"><cite>CSS
6261 Conditional Rules Module Level 3.</cite></a> 4 April 2013. W3C Candidate
6262 Recommendation. (Work in progress.) URL: <a
6263 href="http://www.w3.org/TR/2013/CR-css3-conditional-20130404/">http://www.w3.org/TR/2013/CR-css3-conditional-20130404/</a>
6264 </dd>
6265 <!---->
6267 <dt id=CSS3TEXT>[CSS3TEXT]
6269 <dd>Elika J. Etemad; Koji Ishii. <a
6270 href="http://www.w3.org/TR/2012/WD-css3-text-20121113/"><cite>CSS Text
6271 Module Level 3.</cite></a> 13 November 2012. W3C Working Draft. (Work in
6272 progress.) URL: <a
6273 href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">http://www.w3.org/TR/2012/WD-css3-text-20121113/</a>
6274 </dd>
6275 <!---->
6277 <dt id=DIGITAL-TYPOGRAPHY>[DIGITAL-TYPOGRAPHY]
6279 <dd>Richard Rubinstein. <cite>Digital Typography, An Introduction to Type
6280 and Composition for Computer System Design.</cite> Addison-Wesley. 1988.
6281 ISBN 0-201-17633-5.</dd>
6282 <!---->
6284 <dt id=DOM-LEVEL-2-STYLE>[DOM-LEVEL-2-STYLE]
6286 <dd>Chris Wilson; Philippe Le Hégaret; Vidur Apparao. <a
6287 href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/"><cite>Document
6288 Object Model (DOM) Level 2 Style Specification.</cite></a> 13 November
6289 2000. W3C Recommendation. URL: <a
6290 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>
6291 </dd>
6292 <!---->
6294 <dt id=ELEMTYPO>[ELEMTYPO]
6296 <dd>Robert Bringhurst. <cite>The Elements of Typographic Style, Version
6297 4.</cite> Hartley & Marks. 2013. ISBN 0-88179-212-8.</dd>
6298 <!---->
6300 <dt id=LANGCULTTYPE>[LANGCULTTYPE]
6302 <dd>John D. Berry, Ed. <cite>Language Culture Type.</cite> Graphis. 2001.
6303 ISBN 1-932026-01-0.</dd>
6304 <!---->
6306 <dt id=OPENTYPE-FONT-GUIDE>[OPENTYPE-FONT-GUIDE]
6308 <dd><a
6309 href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf"><cite>OpenType
6310 User Guide.</cite></a> FontShop International. URL: <a
6311 href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf">https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf</a>
6312 </dd>
6313 <!---->
6315 <dt id=RASTER-TRAGEDY>[RASTER-TRAGEDY]
6317 <dd>Beat Stamm. <a href="http://www.rastertragedy.com/"><cite>The Raster
6318 Tragedy at Low-Resolution Revisited.</cite></a> 7 December 2011. URL: <a
6319 href="http://www.rastertragedy.com/">http://www.rastertragedy.com/</a></dd>
6320 <!---->
6322 <dt id=WINDOWS-GLYPH-PROC>[WINDOWS-GLYPH-PROC]
6324 <dd>John Hudson. <a
6325 href="http://www.microsoft.com/typography/developers/opentype/default.htm"><cite>Windows
6326 Glyph Processing.</cite></a> Microsoft Typogrraphy. URL: <a
6327 href="http://www.microsoft.com/typography/developers/opentype/default.htm">http://www.microsoft.com/typography/developers/opentype/default.htm</a>
6328 </dd>
6329 <!---->
6330 </dl>
6331 <!--end-informative-->
6332 <!--{{ARABIC-TYPO}}-->
6333 <!--{{CJKV-INFO-PROCESSING}}-->
6334 <!--{{DIGITAL-TYPOGRAPHY}}-->
6335 <!--{{DOM-LEVEL-2-STYLE}}-->
6336 <!--{{ELEMTYPO}}-->
6337 <!--{{LANGCULTTYPE}}-->
6338 <!--{{OPENTYPE-FONT-GUIDE}}-->
6339 <!--{{RASTER-TRAGEDY}}-->
6340 <!--{{WINDOWS-GLYPH-PROC}}-->
6341 <!--{{CHARMOD-NORM}}-->
6342 <!--{{AAT-FEATURES}}-->
6343 <!--{{CSS3-CONDITIONAL}}-->
6344 <!--{{CSS3TEXT}}-->
6346 <h2 class=no-num id=index>Index</h2>
6347 <!--begin-index-->
6349 <ul class=indexlist>
6350 <li>100...900 weight values, <a href="#font-weight-numeric-values"
6351 title="100...900 weight values"><strong>3.2</strong></a>
6353 <li><var><absolute-size></var>, <a href="#absolute-size-value"
6354 title="<absolute-size>"><strong>3.5</strong></a>
6356 <li><var><common-lig-values></var>, <a href="#common-lig-values"
6357 title="<common-lig-values>"><strong>6.4</strong></a>
6359 <li><var><contextual-alt-values></var>, <a
6360 href="#contextual-alt-values"
6361 title="<contextual-alt-values>"><strong>6.4</strong></a>
6363 <li><var><discretionary-lig-values></var>, <a
6364 href="#discretionary-lig-values"
6365 title="<discretionary-lig-values>"><strong>6.4</strong></a>
6367 <li><var><east-asian-variant-values></var>, <a
6368 href="#east-asian-variant-values"
6369 title="<east-asian-variant-values>"><strong>6.10</strong></a>
6371 <li><var><east-asian-width-values></var>, <a
6372 href="#east-asian-width-values"
6373 title="<east-asian-width-values>"><strong>6.10</strong></a>
6375 <li><var><family-name></var>, <a href="#family-name-value"
6376 title="<family-name>"><strong>3.1</strong></a>
6378 <li><var><feature-tag-value></var>, <a href="#feature-tag-value"
6379 title="<feature-tag-value>"><strong>6.12</strong></a>
6381 <li><var><font-face-name></var>, <a href="#font-face-name-value"
6382 title="<font-face-name>"><strong>4.3</strong></a>
6384 <li><var><font-variant-css21></var>, <a
6385 href="#font-variant-css21-values"
6386 title="<font-variant-css21>"><strong>3.7</strong></a>
6388 <li><var><generic-family></var>, <a href="#generic-family-value"
6389 title="<generic-family>"><strong>3.1</strong></a>
6391 <li><var><historical-lig-values></var>, <a
6392 href="#historical-lig-values"
6393 title="<historical-lig-values>"><strong>6.4</strong></a>
6395 <li><var><length></var>, <a href="#length-size-value"
6396 title="<length>"><strong>3.5</strong></a>
6398 <li><var><number></var>, <a href="#aspect-ratio-value"
6399 title="<number>"><strong>3.6</strong></a>
6401 <li><var><numeric-figure-values></var>, <a
6402 href="#numeric-figure-values"
6403 title="<numeric-figure-values>"><strong>6.7</strong></a>
6405 <li><var><numeric-fraction-values></var>, <a
6406 href="#numeric-fraction-values"
6407 title="<numeric-fraction-values>"><strong>6.7</strong></a>
6409 <li><var><numeric-spacing-values></var>, <a
6410 href="#numeric-spacing-values"
6411 title="<numeric-spacing-values>"><strong>6.7</strong></a>
6413 <li><var><percentage></var>, <a href="#percentage-size-value"
6414 title="<percentage>"><strong>3.5</strong></a>
6416 <li><var><relative-size></var>, <a href="#relative-size-value"
6417 title="<relative-size>"><strong>3.5</strong></a>
6419 <li><var><string></var>, <a
6420 href="#font-language-override-string-value"
6421 title="<string>"><strong>6.13</strong></a>
6423 <li><var><urange></var>, <a href="#urange-value"
6424 title="<urange>"><strong>4.5</strong></a>
6426 <li><code>@font-face</code>, <a href="#at-font-face-rule"
6427 title="@font-face"><strong>4.1</strong></a>
6429 <li><code>@font-feature-values</code>, <a
6430 href="#at-font-feature-values-rule"
6431 title="@font-feature-values"><strong>6.9</strong></a>
6433 <li>all-petite-caps, <a href="#all-petite-caps"
6434 title=all-petite-caps><strong>6.6</strong></a>
6436 <li>all-small-caps, <a href="#all-small-caps"
6437 title=all-small-caps><strong>6.6</strong></a>
6439 <li>annotation, <a href="#annotation"
6440 title=annotation><strong>6.8</strong></a>
6442 <li>aspect value, <a href="#aspect-value0" title="aspect
6443 value"><strong>3.6</strong></a>
6445 <li>authoring tool, <a href="#authoring-tool" title="authoring
6446 tool"><strong>#</strong></a>
6448 <li>auto
6449 <ul>
6450 <li>font-kerning, <a href="#font-kerning-auto-value" title="auto,
6451 font-kerning"><strong>6.3</strong></a>
6453 <li>font-size-adjust, <a href="#font-size-adjust-auto-value"
6454 title="auto, font-size-adjust"><strong>3.6</strong></a>
6455 </ul>
6457 <li>bold, <a href="#bold" title=bold><strong>3.2</strong></a>
6459 <li>bolder, <a href="#bolder" title=bolder><strong>3.2</strong></a>
6461 <li>character map, <a href="#character-map" title="character
6462 map"><strong>5.2</strong></a>
6464 <li>character-variant, <a href="#character-variant"
6465 title=character-variant><strong>6.8</strong></a>
6467 <li>common-ligatures, <a href="#common-ligatures"
6468 title=common-ligatures><strong>6.4</strong></a>
6470 <li>composite face, <a href="#composite-face" title="composite
6471 face"><strong>5.2</strong></a>
6473 <li>condensed, <a href="#condensed"
6474 title=condensed><strong>3.3</strong></a>
6476 <li>contextual, <a href="#contextual"
6477 title=contextual><strong>6.4</strong></a>
6479 <li>CSSFontFaceRule, <a href="#cssfontfacerule"
6480 title=CSSFontFaceRule><strong>8.1</strong></a>
6482 <li>CSSFontFeatureValuesRule, <a href="#cssfontfeaturevaluesrule"
6483 title=CSSFontFeatureValuesRule><strong>8.2</strong></a>
6485 <li>cursive, definition of, <a href="#cursive0" title="cursive, definition
6486 of"><strong>#</strong></a>
6488 <li>default face, <a href="#default-face" title="default
6489 face"><strong>5.2</strong></a>
6491 <li>descriptor_declaration, <a href="#descriptordeclaration"
6492 title="descriptor_declaration"><strong>4.1</strong></a>
6494 <li>diagonal-fractions, <a href="#diagonal-fractions"
6495 title=diagonal-fractions><strong>6.7</strong></a>
6497 <li>discretionary-ligatures, <a href="#discretionary-ligatures"
6498 title=discretionary-ligatures><strong>6.4</strong></a>
6500 <li>effective character map, <a href="#effective-character-map"
6501 title="effective character map"><strong>4.5</strong></a>
6503 <li>expanded, <a href="#expanded" title=expanded><strong>3.3</strong></a>
6505 <li>extra-condensed, <a href="#extra-condensed"
6506 title=extra-condensed><strong>3.3</strong></a>
6508 <li>extra-expanded, <a href="#extra-expanded"
6509 title=extra-expanded><strong>3.3</strong></a>
6511 <li>fantasy, definition of, <a href="#fantasy0" title="fantasy, definition
6512 of"><strong>#</strong></a>
6514 <li>feature_type, <a href="#featuretype"
6515 title="feature_type"><strong>6.9.1</strong></a>
6517 <li>feature_value_block, <a href="#featurevalueblock"
6518 title="feature_value_block"><strong>6.9.1</strong></a>
6520 <li>feature_value_definition, <a href="#featurevaluedefinition"
6521 title="feature_value_definition"><strong>6.9.1</strong></a>
6523 <li>first available font, <a href="#first-available-font" title="first
6524 available font"><strong>5.2</strong></a>
6526 <li>font, <a href="#propdef-font" title=font><strong>3.7</strong></a>
6528 <li>font specific, <a href="#font-specific" title="font
6529 specific"><strong>6.8</strong></a>
6531 <li>font-family
6532 <ul>
6533 <li>descriptor, <a href="#descdef-font-family" title="font-family,
6534 descriptor"><strong>4.2</strong></a>
6536 <li>property, <a href="#propdef-font-family" title="font-family,
6537 property"><strong>3.1</strong></a>
6538 </ul>
6540 <li>font-feature-settings
6541 <ul>
6542 <li>descriptor, <a href="#descdef-font-feature-settings"
6543 title="font-feature-settings, descriptor"><strong>4.7</strong></a>
6545 <li>property, <a href="#propdef-font-feature-settings"
6546 title="font-feature-settings, property"><strong>6.12</strong></a>
6547 </ul>
6549 <li>font-kerning, <a href="#propdef-font-kerning"
6550 title=font-kerning><strong>6.3</strong></a>
6552 <li>font-language-override, <a href="#propdef-font-language-override"
6553 title=font-language-override><strong>6.13</strong></a>
6555 <li>font-size, <a href="#propdef-font-size"
6556 title=font-size><strong>3.5</strong></a>
6558 <li>font-size-adjust, <a href="#propdef-font-size-adjust"
6559 title=font-size-adjust><strong>3.6</strong></a>
6561 <li>font-stretch
6562 <ul>
6563 <li>descriptor, <a href="#descdef-font-stretch" title="font-stretch,
6564 descriptor"><strong>4.4</strong></a>
6566 <li>property, <a href="#propdef-font-stretch" title="font-stretch,
6567 property"><strong>3.3</strong></a>
6568 </ul>
6570 <li>font-style
6571 <ul>
6572 <li>descriptor, <a href="#descdef-font-style" title="font-style,
6573 descriptor"><strong>4.4</strong></a>
6575 <li>property, <a href="#propdef-font-style" title="font-style,
6576 property"><strong>3.4</strong></a>
6577 </ul>
6579 <li>font-synthesis, <a href="#propdef-font-synthesis"
6580 title=font-synthesis><strong>3.8</strong></a>
6582 <li>font-variant
6583 <ul>
6584 <li>descriptor, <a href="#descdef-font-variant" title="font-variant,
6585 descriptor"><strong>4.7</strong></a>
6587 <li>property, <a href="#propdef-font-variant" title="font-variant,
6588 property"><strong>6.11</strong></a>
6589 </ul>
6591 <li>font-variant-alternates, <a href="#propdef-font-variant-alternates"
6592 title=font-variant-alternates><strong>6.8</strong></a>
6594 <li>font-variant-caps, <a href="#propdef-font-variant-caps"
6595 title=font-variant-caps><strong>6.6</strong></a>
6597 <li>font-variant-east-asian, <a href="#propdef-font-variant-east-asian"
6598 title=font-variant-east-asian><strong>6.10</strong></a>
6600 <li>font-variant-ligatures, <a href="#propdef-font-variant-ligatures"
6601 title=font-variant-ligatures><strong>6.4</strong></a>
6603 <li>font-variant-numeric, <a href="#propdef-font-variant-numeric"
6604 title=font-variant-numeric><strong>6.7</strong></a>
6606 <li>font-variant-position, <a href="#propdef-font-variant-position"
6607 title=font-variant-position><strong>6.5</strong></a>
6609 <li>font-weight
6610 <ul>
6611 <li>descriptor, <a href="#descdef-font-weight" title="font-weight,
6612 descriptor"><strong>4.4</strong></a>
6614 <li>property, <a href="#propdef-font-weight" title="font-weight,
6615 property"><strong>3.2</strong></a>
6616 </ul>
6618 <li>font_face_rule, <a href="#fontfacerule"
6619 title="font_face_rule"><strong>4.1</strong></a>
6621 <li>FONT_FACE_SYM, <a href="#fontfacesym"
6622 title="FONT_FACE_SYM"><strong>4.1</strong></a>
6624 <li>font_family_name, <a href="#fontfamilyname"
6625 title="font_family_name"><strong>6.9.1</strong></a>
6627 <li>font_family_name_list, <a href="#fontfamilynamelist"
6628 title="font_family_name_list"><strong>6.9.1</strong></a>
6630 <li>font_feature_values_rule, <a href="#fontfeaturevaluesrule"
6631 title="font_feature_values_rule"><strong>6.9.1</strong></a>
6633 <li>FONT_FEATURE_VALUES_SYM, <a href="#fontfeaturevaluessym"
6634 title="FONT_FEATURE_VALUES_SYM"><strong>6.9.1</strong></a>
6636 <li>full-width, <a href="#full-width"
6637 title=full-width><strong>6.10</strong></a>
6639 <li>historical-forms, <a href="#historical-forms"
6640 title=historical-forms><strong>6.8</strong></a>
6642 <li>historical-ligatures, <a href="#historical-ligatures"
6643 title=historical-ligatures><strong>6.4</strong></a>
6645 <li>italic, <a href="#italic" title=italic><strong>3.4</strong></a>
6647 <li>jis04, <a href="#jis04" title=jis04><strong>6.10</strong></a>
6649 <li>jis78, <a href="#jis78" title=jis78><strong>6.10</strong></a>
6651 <li>jis83, <a href="#jis83" title=jis83><strong>6.10</strong></a>
6653 <li>jis90, <a href="#jis90" title=jis90><strong>6.10</strong></a>
6655 <li>lighter, <a href="#lighter" title=lighter><strong>3.2</strong></a>
6657 <li>lining-nums, <a href="#lining-nums"
6658 title=lining-nums><strong>6.7</strong></a>
6660 <li>monospace, definition of, <a href="#monospace0" title="monospace,
6661 definition of"><strong>#</strong></a>
6663 <li>no-common-ligatures, <a href="#no-common-ligatures"
6664 title=no-common-ligatures><strong>6.4</strong></a>
6666 <li>no-contextual, <a href="#no-contextual"
6667 title=no-contextual><strong>6.4</strong></a>
6669 <li>no-discretionary-ligatures, <a href="#no-discretionary-ligatures"
6670 title=no-discretionary-ligatures><strong>6.4</strong></a>
6672 <li>no-historical-ligatures, <a href="#no-historical-ligatures"
6673 title=no-historical-ligatures><strong>6.4</strong></a>
6675 <li>none
6676 <ul>
6677 <li>font-kerning, <a href="#font-kerning-none-value" title="none,
6678 font-kerning"><strong>6.3</strong></a>
6680 <li>font-size-adjust, <a href="#font-size-adjust-none-value"
6681 title="none, font-size-adjust"><strong>3.6</strong></a>
6683 <li>font-variant, <a href="#font-variant-none-value" title="none,
6684 font-variant"><strong>6.11</strong></a>
6686 <li>font-variant-ligatures, <a href="#font-variant-ligatures-none-value"
6687 title="none, font-variant-ligatures"><strong>6.4</strong></a>
6688 </ul>
6690 <li>normal
6691 <ul>
6692 <li>font-feature-settings, <a href="#font-feature-settings-normal-value"
6693 title="normal, font-feature-settings"><strong>6.12</strong></a>
6695 <li>font-kerning, <a href="#font-kerning-normal-value" title="normal,
6696 font-kerning"><strong>6.3</strong></a>
6698 <li>font-language-override, <a
6699 href="#font-language-override-normal-value" title="normal,
6700 font-language-override"><strong>6.13</strong></a>
6702 <li>font-stretch, <a href="#font-stretch-normal-value" title="normal,
6703 font-stretch"><strong>3.3</strong></a>
6705 <li>font-style, <a href="#font-style-normal-value" title="normal,
6706 font-style"><strong>3.4</strong></a>
6708 <li>font-variant, <a href="#font-variant-normal-value" title="normal,
6709 font-variant"><strong>6.11</strong></a>
6711 <li>font-variant-alternates, <a
6712 href="#font-variant-alternates-normal-value" title="normal,
6713 font-variant-alternates"><strong>6.8</strong></a>
6715 <li>font-variant-caps, <a href="#font-variant-caps-normal-value"
6716 title="normal, font-variant-caps"><strong>6.6</strong></a>
6718 <li>font-variant-east-asian, <a
6719 href="#font-variant-east-asian-normal-value" title="normal,
6720 font-variant-east-asian"><strong>6.10</strong></a>
6722 <li>font-variant-ligatures, <a
6723 href="#font-variant-ligatures-normal-value" title="normal,
6724 font-variant-ligatures"><strong>6.4</strong></a>
6726 <li>font-variant-numeric, <a href="#font-variant-numeric-normal-value"
6727 title="normal, font-variant-numeric"><strong>6.7</strong></a>
6729 <li>font-variant-position, <a href="#font-variant-position-normal-value"
6730 title="normal, font-variant-position"><strong>6.5</strong></a>
6732 <li>font-weight, <a href="#font-weight-normal-value" title="normal,
6733 font-weight"><strong>3.2</strong></a>
6734 </ul>
6736 <li>oblique, <a href="#oblique" title=oblique><strong>3.4</strong></a>
6738 <li>oldstyle-nums, <a href="#oldstyle-nums"
6739 title=oldstyle-nums><strong>6.7</strong></a>
6741 <li>ordinal, <a href="#ordinal" title=ordinal><strong>6.7</strong></a>
6743 <li>ornaments, <a href="#ornaments"
6744 title=ornaments><strong>6.8</strong></a>
6746 <li>petite-caps, <a href="#petite-caps"
6747 title=petite-caps><strong>6.6</strong></a>
6749 <li>proportional-nums, <a href="#proportional-nums"
6750 title=proportional-nums><strong>6.7</strong></a>
6752 <li>proportional-width, <a href="#proportional-width"
6753 title=proportional-width><strong>6.10</strong></a>
6755 <li>renderer, <a href="#renderer" title=renderer><strong>#</strong></a>
6757 <li>ruby, <a href="#ruby" title=ruby><strong>6.10</strong></a>
6759 <li>sans-serif, definition of, <a href="#sans-serif0" title="sans-serif,
6760 definition of"><strong>#</strong></a>
6762 <li>semi-condensed, <a href="#semi-condensed-"
6763 title=semi-condensed><strong>3.3</strong></a>
6765 <li>semi-expanded, <a href="#semi-expanded"
6766 title=semi-expanded><strong>3.3</strong></a>
6768 <li>serif, definition of, <a href="#serif0" title="serif, definition
6769 of"><strong>#</strong></a>
6771 <li>simplified, <a href="#simplified"
6772 title=simplified><strong>6.10</strong></a>
6774 <li>slashed-zero, <a href="#slashed-zero"
6775 title=slashed-zero><strong>6.7</strong></a>
6777 <li>small-caps, <a href="#small-caps"
6778 title=small-caps><strong>6.6</strong></a>
6780 <li>src, <a href="#descdef-src" title=src><strong>4.3</strong></a>
6782 <li>stacked-fractions, <a href="#stacked-fractions"
6783 title=stacked-fractions><strong>6.7</strong></a>
6785 <li>style sheet
6786 <ul>
6787 <li>as conformance class, <a href="#style-sheet" title="style sheet, as
6788 conformance class"><strong>#</strong></a>
6789 </ul>
6791 <li>styleset, <a href="#styleset" title=styleset><strong>6.8</strong></a>
6793 <li>stylistic, <a href="#stylistic"
6794 title=stylistic><strong>6.8</strong></a>
6796 <li>sub, <a href="#sub" title=sub><strong>6.5</strong></a>
6798 <li>super, <a href="#super" title=super><strong>6.5</strong></a>
6800 <li>support, <a href="#support" title=support><strong>5.2</strong></a>
6802 <li>swash, <a href="#swash" title=swash><strong>6.8</strong></a>
6804 <li>system font fallback, <a href="#system-font-fallback" title="system
6805 font fallback"><strong>5.2</strong></a>
6807 <li>tabular-nums, <a href="#tabular-nums"
6808 title=tabular-nums><strong>6.7</strong></a>
6810 <li>titling-caps, <a href="#titling-caps"
6811 title=titling-caps><strong>6.6</strong></a>
6813 <li>traditional, <a href="#traditional"
6814 title=traditional><strong>6.10</strong></a>
6816 <li>ultra-condensed, <a href="#ultra-condensed"
6817 title=ultra-condensed><strong>3.3</strong></a>
6819 <li>ultra-expanded, <a href="#ultra-expanded"
6820 title=ultra-expanded><strong>3.3</strong></a>
6822 <li>unicase, <a href="#unicase" title=unicase><strong>6.6</strong></a>
6824 <li>unicode-range, <a href="#descdef-unicode-range"
6825 title=unicode-range><strong>4.5</strong></a>
6827 <li>weight, <a href="#weight" title=weight><strong>2</strong></a>
6829 <li>width, <a href="#width" title=width><strong>2</strong></a>
6830 </ul>
6831 <!--end-index-->
6833 <h2 class=no-num id=property-index>Property index</h2>
6834 <!--begin-properties-->
6836 <table class=proptable>
6837 <thead>
6838 <tr>
6839 <th>Property
6841 <th>Values
6843 <th>Initial
6845 <th>Applies to
6847 <th>Inh.
6849 <th>Percentages
6851 <th>Media
6853 <tbody>
6854 <tr>
6855 <th><a class=property href="#propdef-font">font</a>
6857 <td>[ [ <‘font-style’> || <font-variant-css21> ||
6858 <‘font-weight’> || <‘font-stretch’ ]?
6859 <‘font-size’> [ / <‘line-height’> ]?
6860 <‘font-family’> ] | caption | icon | menu | message-box |
6861 small-caption | status-bar
6863 <td>see individual properties
6865 <td>all elements
6867 <td>yes
6869 <td>see individual properties
6871 <td>visual
6873 <tr>
6874 <th><span class=property>font-family</span>
6876 <td>[ <family-name> | <generic-family> ] #
6878 <td>depends on user agent
6880 <td>all elements
6882 <td>yes
6884 <td>N/A
6886 <td>visual
6888 <tr>
6889 <th><span class=property>font-feature-settings</span>
6891 <td>normal | <feature-tag-value> #
6893 <td>normal
6895 <td>all elements
6897 <td>yes
6899 <td>N/A
6901 <td>visual
6903 <tr>
6904 <th><a class=property href="#propdef-font-kerning">font-kerning</a>
6906 <td>auto | normal | none
6908 <td>auto
6910 <td>all elements
6912 <td>yes
6914 <td>N/A
6916 <td>visual
6918 <tr>
6919 <th><a class=property
6920 href="#propdef-font-language-override">font-language-override</a>
6922 <td>normal | <string>
6924 <td>normal
6926 <td>all elements
6928 <td>yes
6930 <td>N/A
6932 <td>visual
6934 <tr>
6935 <th><a class=property href="#propdef-font-size">font-size</a>
6937 <td><absolute-size> | <relative-size> | <length> |
6938 <percentage>
6940 <td>medium
6942 <td>all elements
6944 <td>yes
6946 <td>refer to parent element's font size
6948 <td>visual
6950 <tr>
6951 <th><a class=property
6952 href="#propdef-font-size-adjust">font-size-adjust</a>
6954 <td>none | auto | <number>
6956 <td>none
6958 <td>all elements
6960 <td>yes
6962 <td>N/A
6964 <td>visual
6966 <tr>
6967 <th><span class=property>font-stretch</span>
6969 <td>normal | ultra-condensed | extra-condensed | condensed |
6970 semi-condensed | semi-expanded | expanded | extra-expanded |
6971 ultra-expanded
6973 <td>normal
6975 <td>all elements
6977 <td>yes
6979 <td>N/A
6981 <td>visual
6983 <tr>
6984 <th><span class=property>font-style</span>
6986 <td>normal | italic | oblique
6988 <td>normal
6990 <td>all elements
6992 <td>yes
6994 <td>N/A
6996 <td>visual
6998 <tr>
6999 <th><a class=property href="#propdef-font-synthesis">font-synthesis</a>
7001 <td>none | [ weight || style ]
7003 <td>weight style
7005 <td>all elements
7007 <td>yes
7009 <td>N/A
7011 <td>visual
7013 <tr>
7014 <th><span class=property>font-variant</span>
7016 <td>normal | none | [ <common-lig-values> ||
7017 <discretionary-lig-values> || <historical-lig-values> ||
7018 <contextual-alt-values> || stylistic(<feature-value-name>)
7019 || historical-forms || styleset(<feature-value-name> #) ||
7020 character-variant(<feature-value-name> #) ||
7021 swash(<feature-value-name>) ||
7022 ornaments(<feature-value-name>) ||
7023 annotation(<feature-value-name>) || [ small-caps | all-small-caps
7024 | petite-caps | all-petite-caps | unicase | titling-caps ] ||
7025 <numeric-figure-values> || <numeric-spacing-values> ||
7026 <numeric-fraction-values> || ordinal || slashed-zero ||
7027 <east-asian-variant-values> || <east-asian-width-values> ||
7028 ruby ]
7030 <td>normal
7032 <td>all elements
7034 <td>yes
7036 <td>see individual properties
7038 <td>visual
7040 <tr>
7041 <th><a class=property
7042 href="#propdef-font-variant-alternates">font-variant-alternates</a>
7044 <td>normal | [ stylistic(<feature-value-name>) || historical-forms
7045 || styleset(<feature-value-name> #) ||
7046 character-variant(<feature-value-name> #) ||
7047 swash(<feature-value-name>) ||
7048 ornaments(<feature-value-name>) ||
7049 annotation(<feature-value-name>) ]
7051 <td>normal
7053 <td>all elements
7055 <td>yes
7057 <td>N/A
7059 <td>visual
7061 <tr>
7062 <th><a class=property
7063 href="#propdef-font-variant-caps">font-variant-caps</a>
7065 <td>normal | small-caps | all-small-caps | petite-caps | all-petite-caps
7066 | unicase | titling-caps
7068 <td>normal
7070 <td>all elements
7072 <td>yes
7074 <td>N/A
7076 <td>visual
7078 <tr>
7079 <th><a class=property
7080 href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
7082 <td>normal | [ <east-asian-variant-values> ||
7083 <east-asian-width-values> || ruby ]
7085 <td>normal
7087 <td>all elements
7089 <td>yes
7091 <td>N/A
7093 <td>visual
7095 <tr>
7096 <th><a class=property
7097 href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
7099 <td>normal | none | [ <common-lig-values> ||
7100 <discretionary-lig-values> || <historical-lig-values> ||
7101 <contextual-alt-values> ]
7103 <td>normal
7105 <td>all elements
7107 <td>yes
7109 <td>N/A
7111 <td>visual
7113 <tr>
7114 <th><a class=property
7115 href="#propdef-font-variant-numeric">font-variant-numeric</a>
7117 <td>normal | [ <numeric-figure-values> ||
7118 <numeric-spacing-values> || <numeric-fraction-values> ||
7119 ordinal || slashed-zero ]
7121 <td>normal
7123 <td>all elements
7125 <td>yes
7127 <td>N/A
7129 <td>visual
7131 <tr>
7132 <th><a class=property
7133 href="#propdef-font-variant-position">font-variant-position</a>
7135 <td>normal | sub | super
7137 <td>normal
7139 <td>all elements
7141 <td>yes
7143 <td>N/A
7145 <td>visual
7147 <tr>
7148 <th><span class=property>font-weight</span>
7150 <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600
7151 | 700 | 800 | 900
7153 <td>normal
7155 <td>all elements
7157 <td>yes
7159 <td>N/A
7161 <td>visual
7162 </table>
7163 <!--end-properties-->
7164 <!--begin-descriptors-->
7166 <table class=proptable>
7167 <thead>
7168 <tr>
7169 <th>Descriptor
7171 <th>Value
7173 <th>Initial
7175 <th>Percentages
7177 <th>Media
7179 <tbody>
7180 <tr>
7181 <th><span class=property>font-family</span>
7183 <td><family-name>
7185 <td>N/A
7187 <tr>
7188 <th><span class=property>font-feature-settings</span>
7190 <td>normal | <feature-tag-value> #
7192 <td>normal
7194 <tr>
7195 <th><span class=property>font-stretch</span>
7197 <td>normal | ultra-condensed | extra-condensed | condensed |
7198 semi-condensed | semi-expanded | expanded | extra-expanded |
7199 ultra-expanded
7201 <td>normal
7203 <tr>
7204 <th><span class=property>font-style</span>
7206 <td>normal | italic | oblique
7208 <td>normal
7210 <tr>
7211 <th><span class=property>font-variant</span>
7213 <td>normal | none | [ <common-lig-values> ||
7214 <discretionary-lig-values> || <historical-lig-values> ||
7215 <contextual-alt-values> || stylistic(<feature-value-name>)
7216 || historical-forms || styleset(<feature-value-name> #) ||
7217 character-variant(<feature-value-name> #) ||
7218 swash(<feature-value-name>) ||
7219 ornaments(<feature-value-name>) ||
7220 annotation(<feature-value-name>) || [ small-caps | all-small-caps
7221 | petite-caps | all-petite-caps | unicase | titling-caps ] ||
7222 <numeric-figure-values> || <numeric-spacing-values> ||
7223 <numeric-fraction-values> || ordinal || slashed-zero ||
7224 <east-asian-variant-values> || <east-asian-width-values> ||
7225 ruby ]
7227 <td>normal
7229 <tr>
7230 <th><span class=property>font-weight</span>
7232 <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
7234 <td>normal
7236 <tr>
7237 <th><a class=property href="#descdef-src">src</a>
7239 <td>[ <url> [format(<string> #)]? | <font-face-name> ] #
7241 <td>N/A
7243 <tr>
7244 <th><a class=property href="#descdef-unicode-range">unicode-range</a>
7246 <td><urange> #
7248 <td>U+0-10FFFF
7249 </table>
7250 <!--end-descriptors-->
7251 <script type="text/javascript">
7252 window.onload = function () {
7253 if (!("devicePixelRatio" in window && window.devicePixelRatio > 1)) return;
7254 var i, hiresElements = document.getElementsByClassName("hires");
7255 for (i = 0; i < hiresElements.length; i++) {
7256 var h = hiresElements[i];
7257 if (h.tagName != "IMG") continue;
7258 var src = h.getAttribute("src");
7259 var src2x = src.replace(/\.\w+$/, function(m) { return "@2x" + m; });
7260 h.src = src2x;
7261 }
7262 }
7263 </script>
7264 </html>
7265 <!-- Keep this comment at the end of the file
7266 Local variables:
7267 mode: sgml
7268 sgml-declaration:"~/SGML/HTML4.decl"
7269 sgml-default-doctype-name:"html"
7270 sgml-minimize-attributes:t
7271 sgml-nofill-elements:("pre" "style" "br")
7272 sgml-live-element-indicator:t
7273 sgml-omittag:nil
7274 sgml-shorttag:nil
7275 sgml-namecase-general:t
7276 sgml-general-insert-case:lower
7277 sgml-always-quote-attributes:t
7278 sgml-indent-step:nil
7279 sgml-indent-data:t
7280 sgml-parent-document:nil
7281 sgml-exposed-tags:nil
7282 sgml-local-catalogs:nil
7283 sgml-local-ecat-files:nil
7284 End:
7285 -->
7286 <!--
7288 to do:
7290 - wording of OpenType family name handling
7291 - handling combining sequences in the font matching algorithm
7292 - fix-up fi ligature example
7294 -->