css-fonts/Fonts.html@6ec68b0c2e8d
css-fonts/Fonts.html
Thu, 06 Jun 2013 16:14:13 +0900
- author
- John Daggett <jdaggett@mozilla.com>
- date
- Thu, 06 Jun 2013 16:14:13 +0900
- changeset 8360
- 6ec68b0c2e8d
- parent 8356
- 46cef6470f58
- child 8363
- 29bdc056b936
- permissions
- -rw-r--r--
[css3-fonts] editorial fixups in font feature resolution
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">
108 <body>
109 <div class=head> <!--begin-logo-->
110 <p><a href="http://www.w3.org/"><img alt=W3C height=48
111 src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
113 <h1>CSS Fonts Module Level 3</h1>
115 <h2 class="no-num no-toc" id=editors-draft-6-june-2013>Editor's Draft 6
116 June 2013</h2>
118 <dl id=authors>
119 <dt>This version:
121 <dd><a
122 href="http://dev.w3.org/csswg/css-fonts/">http://dev.w3.org/csswg/css-fonts/</a>
123 <!-- <dd><a href="http://www.w3.org/TR/2013/ED-css3-fonts-20130606/">http://www.w3.org/TR/2013/ED-css3-fonts-20130606/</a> -->
126 <dt>Latest version:
128 <dd><a
129 href="http://www.w3.org/TR/css3-fonts/">http://www.w3.org/TR/css3-fonts/</a>
131 <dt>Latest editor's draft:
133 <dd><a
134 href="http://dev.w3.org/csswg/css-fonts/">http://dev.w3.org/csswg/css-fonts/</a>
135 (<a
136 href="https://dvcs.w3.org/hg/csswg/log/tip/css-fonts/Fonts.html">change
137 log</a>)
139 <dt>Previous version:
141 <dd><a
142 href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/">http://www.w3.org/TR/2013/WD-css3-fonts-20130212/</a>
144 <dt>Issues List:
146 <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/18">CSS3 Fonts
147 issues in Tracker</a>
149 <dd><a
150 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
151 Fonts issues in Bugzilla</a>
153 <dt>Discussion:
155 <dd><a
156 href="mailto:www-style@w3.org?subject=%5Bcss-fonts%5D%20feedback">www-style@w3.org</a>
157 with subject line “<kbd>[css-fonts] <var>… message topic
158 …</var></kbd>” (<a
159 href="http://lists.w3.org/Archives/Public/www-style/"
160 rel=discussion>archives</a>)
162 <dt>Editor:
164 <dd><a href="mailto:jdaggett@mozilla.com">John Daggett (Mozilla)</a>
165 </dl>
166 <!--begin-copyright-->
167 <p class=copyright><a
168 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
169 rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
170 title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
171 href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of
172 Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr
173 title="European Research Consortium for Informatics and
174 Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>,
175 <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C
176 <a
177 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
178 <a
179 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
180 and <a
181 href="http://www.w3.org/Consortium/Legal/copyright-documents">document
182 use</a> rules apply.</p>
183 <!--end-copyright-->
184 <hr title="Separator for header">
185 </div>
187 <h2 class="no-num no-toc" id=abstract>Abstract</h2>
189 <p>This CSS3 module describes how font properties are specified and how
190 font resources are loaded dynamically. The contents of this specification
191 are a consolidation of content previously divided into <a
192 href="http://www.w3.org/TR/2002/WD-css3-fonts-20020802/">CSS3 Fonts</a>
193 and <a href="http://www.w3.org/TR/2002/WD-css3-webfonts-20020802/">CSS3
194 Web Fonts</a> modules. The description of font load events was moved into
195 the <a href="http://dev.w3.org/csswg/css3-font-load-events/">CSS3 Font
196 Load Events</a> module.
198 <h2 class="no-num no-toc" id=status>Status of this document</h2>
199 <!--begin-status-->
201 <p>This is a public copy of the editors' draft. It is provided for
202 discussion only and may change at any moment. Its publication here does
203 not imply endorsement of its contents by W3C. Don't cite this document
204 other than as work in progress.
206 <p>The (<a
207 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
208 mailing list <a
209 href="mailto:www-style@w3.org?Subject=%5Bcss3-fonts%5D%20PUT%20SUBJECT%20HERE">
210 www-style@w3.org</a> (see <a
211 href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
212 discussion of this specification. When sending e-mail, please put the text
213 “css3-fonts” in the subject, preferably like this:
214 “[<!---->css3-fonts<!---->] <em>…summary of comment…</em>”
216 <p>This document was produced by the <a
217 href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
218 the <a href="http://www.w3.org/Style/">Style Activity</a>).
220 <p>This document was produced by a group operating under the <a
221 href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
222 2004 W3C Patent Policy</a>. W3C maintains a <a
223 href="http://www.w3.org/2004/01/pp-impl/32061/status"
224 rel=disclosure>public list of any patent disclosures</a> made in
225 connection with the deliverables of the group; that page also includes
226 instructions for disclosing a patent. An individual who has actual
227 knowledge of a patent which the individual believes contains <a
228 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
229 Claim(s)</a> must disclose the information in accordance with <a
230 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
231 6 of the W3C Patent Policy</a>.</p>
232 <!--end-status-->
233 <!--
234 <h3 class="no-num no-toc" id="atrisk">Features at risk</h3>
236 <p>The following features are at risk and may be removed when exiting CR:</p>
238 <ul>
239 </ul>
240 -->
242 <h2 class="no-num no-toc" id=contents>Table of contents</h2>
243 <!--begin-toc-->
245 <ul class=toc>
246 <li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
248 <li><a href="#typography-background"><span class=secno>2 </span>Typography
249 Background</a>
251 <li><a href="#basic-font-props"><span class=secno>3 </span>Basic Font
252 Properties</a>
253 <ul class=toc>
254 <li><a href="#font-family-prop"><span class=secno>3.1 </span>Font
255 family: the font-family property</a>
256 <ul class=toc>
257 <li><a href="#generic-font-families"><span class=secno>3.1.1
258 </span>Generic font families</a>
259 </ul>
261 <li><a href="#font-weight-prop"><span class=secno>3.2 </span>Font
262 weight: the font-weight property</a>
264 <li><a href="#font-stretch-prop"><span class=secno>3.3 </span>Font
265 width: the font-stretch property</a>
267 <li><a href="#font-style-prop"><span class=secno>3.4 </span>Font style:
268 the font-style property</a>
270 <li><a href="#font-size-prop"><span class=secno>3.5 </span>Font size:
271 the font-size property</a>
273 <li><a href="#font-size-adjust-prop"><span class=secno>3.6
274 </span>Relative sizing: the font-size-adjust property</a>
276 <li><a href="#font-prop"><span class=secno>3.7 </span>Shorthand font
277 property: the font property</a>
279 <li><a href="#font-synthesis-prop"><span class=secno>3.8
280 </span>Controlling synthetic faces: the font-synthesis property</a>
281 </ul>
283 <li><a href="#font-resources"><span class=secno>4 </span>Font
284 Resources</a>
285 <ul class=toc>
286 <li><a href="#font-face-rule"><span class=secno>4.1 </span>The
287 <code>@font-face</code> rule</a>
289 <li><a href="#font-family-desc"><span class=secno>4.2 </span>Font
290 family: the font-family descriptor</a>
292 <li><a href="#src-desc"><span class=secno>4.3 </span>Font reference: the
293 src descriptor</a>
295 <li><a href="#font-prop-desc"><span class=secno>4.4 </span>Font property
296 descriptors: the font-style, font-weight, font-stretch descriptors</a>
298 <li><a href="#unicode-range-desc"><span class=secno>4.5 </span>Character
299 range: the unicode-range descriptor</a>
301 <li><a href="#composite-fonts"><span class=secno>4.6 </span>Using
302 character ranges to define composite fonts</a>
304 <li><a href="#font-rend-desc"><span class=secno>4.7 </span>Font
305 features: the font-variant and font-feature-settings descriptors</a>
307 <li><a href="#font-face-loading"><span class=secno>4.8 </span>Font
308 loading guidelines</a>
310 <li><a href="#same-origin-restriction"><span class=secno>4.9
311 </span>Same-origin restriction for fonts</a>
312 <ul class=toc>
313 <li><a href="#default-same-origin-restriction"><span class=secno>4.9.1
314 </span>Default same-origin restriction</a>
316 <li><a href="#allowing-cross-origin-font-loading"><span
317 class=secno>4.9.2 </span>Allowing cross-origin font loading</a>
318 </ul>
319 </ul>
321 <li><a href="#font-matching-algorithm"><span class=secno>5 </span>Font
322 Matching Algorithm</a>
323 <ul class=toc>
324 <li><a href="#font-family-casing"><span class=secno>5.1 </span>Case
325 sensitivity of font family names</a>
327 <li><a href="#font-style-matching"><span class=secno>5.2 </span>Matching
328 font styles</a>
330 <li><a href="#cluster-matching"><span class=secno>5.3 </span>Cluster
331 matching</a>
333 <li><a href="#char-handling-issues"><span class=secno>5.4
334 </span>Character handling issues</a>
336 <li><a href="#font-matching-changes"><span class=secno>5.5 </span>Font
337 matching changes since CSS 2.1</a>
339 <li><a href="#font-matching-examples"><span class=secno>5.6 </span>Font
340 matching examples</a>
341 </ul>
343 <li><a href="#font-rend-props"><span class=secno>6 </span>Font Feature
344 Properties</a>
345 <ul class=toc>
346 <li><a href="#glyph-selection-positioning"><span class=secno>6.1
347 </span>Glyph selection and positioning</a>
349 <li><a href="#language-specific-support"><span class=secno>6.2
350 </span>Language-specific display</a>
352 <li><a href="#font-kerning-prop"><span class=secno>6.3 </span>Kerning:
353 the font-kerning property</a>
355 <li><a href="#font-variant-ligatures-prop"><span class=secno>6.4
356 </span>Ligatures: the font-variant-ligatures property</a>
358 <li><a href="#font-variant-position-prop"><span class=secno>6.5
359 </span>Subscript and superscript forms: the font-variant-position
360 property</a>
362 <li><a href="#font-variant-caps-prop"><span class=secno>6.6
363 </span>Capitalization: the font-variant-caps property</a>
365 <li><a href="#font-variant-numeric-prop"><span class=secno>6.7
366 </span>Numerical formatting: the font-variant-numeric property</a>
368 <li><a href="#font-variant-alternates-prop"><span class=secno>6.8
369 </span>Alternates and swashes: the font-variant-alternates property</a>
372 <li><a href="#font-feature-values"><span class=secno>6.9 </span>Defining
373 font specific alternates: the <code>@font-feature-values</code>
374 rule</a>
375 <ul class=toc>
376 <li><a href="#basic-syntax"><span class=secno>6.9.1 </span>Basic
377 syntax</a>
379 <li><a href="#multi-valued-feature-value-definitions"><span
380 class=secno>6.9.2 </span>Multi-valued feature value definitions</a>
381 </ul>
383 <li><a href="#font-variant-east-asian-prop"><span class=secno>6.10
384 </span>East Asian text rendering: the font-variant-east-asian
385 property</a>
387 <li><a href="#font-variant-prop"><span class=secno>6.11 </span>Overall
388 shorthand for font rendering: the font-variant property</a>
390 <li><a href="#font-feature-settings-prop"><span class=secno>6.12
391 </span>Low-level font feature settings control: the
392 font-feature-settings property</a>
394 <li><a href="#font-language-override-prop"><span class=secno>6.13
395 </span>Font language override: the font-language-override property</a>
396 </ul>
398 <li><a href="#font-feature-resolution"><span class=secno>7 </span>Font
399 Feature Resolution </a>
400 <ul class=toc>
401 <li><a href="#default-features"><span class=secno>7.1 </span>Default
402 features</a>
404 <li><a href="#feature-precedence"><span class=secno>7.2 </span>Feature
405 precedence</a>
407 <li><a href="#feature-precedence-examples"><span class=secno>7.3
408 </span>Feature precedence examples</a>
409 </ul>
411 <li><a href="#object-model"><span class=secno>8 </span>Object Model</a>
412 <ul class=toc>
413 <li><a href="#om-fontface"><span class=secno>8.1 </span>The
414 <code>CSSFontFaceRule</code> interface</a>
416 <li><a href="#om-fontfeaturevalues"><span class=secno>8.2 </span>The
417 <code>CSSFontFeatureValuesRule</code> interface</a>
418 </ul>
420 <li class=no-num><a href="#platform-props-to-css">Appendix A: Mapping
421 platform font properties to CSS properties</a>
423 <li class=no-num><a href="#ch-ch-ch-changes">Changes</a>
424 <ul class=toc>
425 <li class=no-num><a href="#recent-changes"> Changes from the February
426 2013 CSS3 Fonts Working Draft</a>
427 </ul>
429 <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
431 <li class=no-num><a href="#conformance"> Conformance</a>
432 <ul class=toc>
433 <li class=no-num><a href="#conventions"> Document Conventions</a>
435 <li class=no-num><a href="#conformance-classes"> Conformance Classes</a>
438 <li class=no-num><a href="#partial"> Partial Implementations</a>
440 <li class=no-num><a href="#experimental"> Experimental
441 Implementations</a>
443 <li class=no-num><a href="#testing"> Non-Experimental
444 Implementations</a>
445 </ul>
447 <li class=no-num><a href="#references">References</a>
448 <ul class=toc>
449 <li class=no-num><a href="#normative-references">Normative
450 References</a>
452 <li class=no-num><a href="#other-references">Other References</a>
453 </ul>
455 <li class=no-num><a href="#index">Index</a>
457 <li class=no-num><a href="#property-index">Property index</a>
458 </ul>
459 <!--end-toc-->
461 <h2 id=introduction><span class=secno>1 </span>Introduction</h2>
463 <p>A font provides a resource containing the visual representation of
464 characters. At the simplest level it contains information that maps
465 character codes to shapes (called glyphs) that represent these characters.
466 Fonts sharing a common design style are commonly grouped into font
467 families classified by a set of standard font properties. Within a family,
468 the shape displayed for a given character can vary by stroke weight, slant
469 or relative width, among others. An individual font face is described by a
470 unique combination of these properties. For a given range of text, CSS
471 font properties are used to select a font family and a specific font face
472 within that family to be used when rendering that text. As a simple
473 example, to use the bold form of Helvetica one could use:
475 <pre>body {
476 font-family: Helvetica;
477 font-weight: bold;
478 }</pre>
480 <p>Font resources may be installed locally on the system on which a user
481 agent is running or downloadable. For local font resources descriptive
482 information can be obtained directly from the font resource. For
483 downloadable font resources (sometimes referred to as web fonts), the
484 descriptive information is included with the reference to the font
485 resource.
487 <p>Families of fonts typically don't contain a single face for each
488 possible variation of font properties. The CSS font selection mechanism
489 describes how to match a given set of CSS font properties to a single font
490 face.
492 <h2 id=typography-background><span class=secno>2 </span>Typography
493 Background</h2>
495 <p><em>This section is non-normative.</em>
497 <p> Typographic traditions vary across the globe, so there is no unique way
498 to classify all fonts across languages and cultures. For even common Latin
499 letters, wide variations are possible:
501 <div class=figure><img alt="variations in glyphs for a single character"
502 src=aaaaaa.png>
503 <p class=caption>One character, many glyph variations
504 </div>
506 <p>Differences in the anatomy of letterforms is one way to distinguish
507 fonts. For Latin fonts, flourishes at the ends of a character's main
508 strokes, or serifs, can distinguish a font from those without. Similar
509 comparisons exist in non-Latin fonts between fonts with tapered strokes
510 and those using primarily uniform strokes:
512 <div class=figure><img alt="serif vs. non-serifs" src=serifvssansserif.png>
513 <p class=caption>Letterforms with and without serifs
514 </div>
516 <div class=figure><img alt="serif vs. non-serifs for japanese"
517 src=minchovsgothic.png>
518 <p class=caption>Similar groupings for Japanese typefaces
519 </div>
521 <p>Fonts contain letterforms and the data needed to map characters to these
522 letterforms. Often this may be a simple one-to-one mapping, but more
523 complex mappings are also possible. The use of combining diacritic marks
524 creates many variations for an underlying letterform:
526 <div class=figure><img alt="diacritic marks" src=aaaaaa-diacritics.png>
527 <p class=caption>Variations with diacritic marks
528 </div>
530 <p>A sequence of characters can be represented by a single glyph known as a
531 ligature:
533 <div class=figure><img alt="example of a fi ligature"
534 src=final-ligature.png>
535 <p class=caption>Ligature example
536 </div>
538 <p>Visual transformations based on textual context are often stylistic
539 option in European languages. They are required to correctly render
540 languages like Arabic, the lam and alef characters below <em>must</em> be
541 combined when they exist in sequence:
543 <div class=figure><img alt="lam alef ligature" src=lamaleflig.png>
544 <p class=caption>Required Arabic ligature
545 </div>
547 <p>The relative complexity of these shaping transformations requires
548 additional data within the font.
550 <p>Sets of font faces with various stylistic variations are often grouped
551 together into font families. In the simplest case a regular face is
552 supplemented with bold and italic faces, but much more extensive groupings
553 are possible. Variations in the thickness of letterform strokes, the <dfn
554 id=weight>weight</dfn>, and the overall proportions of the letterform, the
555 <dfn id=width>width</dfn>, are most common. In the example below, each
556 letter uses a different font face within the Univers font family. The
557 width used increases from top to bottom and the weight increases from left
558 to right:
560 <div class=figure><img alt="various width and weight variations within a
561 single family" src=weightwidthvariations.png>
562 <p class=caption>Weight and width variations within a single font family
563 </div>
565 <p>Creating fonts that support multiple scripts is a difficult task;
566 designers need to understand the cultural traditions surrounding the use
567 of type in different scripts and come up with letterforms that somehow
568 share a common theme. Many languages often share a common script and each
569 of these languages may have noticeable stylistic differences. For example,
570 the Arabic script is shared by Persian and Urdu and Cyrillic is used with
571 many languages, not just Russian.
573 <p>The <a href="#character-map"><em>character map</em></a> of a font
574 defines the mapping of characters to glyphs for that font. If a document
575 contains characters not supported by the <a href="#character-map"><em
576 title="character map">character maps</em></a> of the fonts contained in a
577 font family list, a user agent may use a system font fallback procedure to
578 locate an appropriate font that does. If no appropriate font can be found,
579 some form of "missing glyph" character will be rendered by the user agent.
580 System fallback can occur when the specified list of font families does
581 not include a font that supports a given character.
583 <p>Although the <a href="#character-map"><em>character map</em></a> of a
584 font maps a given character to a glyph for that character, modern font
585 technologies such as OpenType and AAT (Apple Advanced Typography) provide
586 ways of mapping a character to different glyphs based upon feature
587 settings. Fonts in these formats allow these features to be embedded in
588 the font itself and controlled by applications. Common typographic
589 features which can be specified this way include ligatures, swashes,
590 contextual alternates, proportional and tabular figures, and automatic
591 fractions, to list just a few. For a visual overview of OpenType features,
592 see the <a href="#OPENTYPE-FONT-GUIDE"
593 rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
595 <h2 id=basic-font-props><span class=secno>3 </span>Basic Font Properties</h2>
597 <p>The particular font face used to render a character is determined by the
598 font family and other font properties that apply to a given element. This
599 structure allows settings to be varied independent of each other.</p>
600 <!-- prop: font-family -->
602 <h3 id=font-family-prop><span class=secno>3.1 </span>Font family: the <a
603 href="#propdef-font-family">font-family</a> property</h3>
605 <table class=propdef id=namefont-familyvalue-ltfamily-namegt-ltg>
606 <tbody>
607 <tr>
608 <td>Name:
610 <td><dfn id=propdef-font-family
611 title="font-family!!property">font-family</dfn>
613 <tr>
614 <td>Value:
616 <td>[ <a href="#family-name-value"><var><family-name></var></a> |
617 <a href="#generic-family-value"><var><generic-family></var></a> ]
618 #
620 <tr>
621 <td>Initial:
623 <td>depends on user agent
625 <tr>
626 <td>Applies to:
628 <td>all elements
630 <tr>
631 <td>Inherited:
633 <td>yes
635 <tr>
636 <td>Percentages:
638 <td>N/A
640 <tr>
641 <td>Media:
643 <td>visual
645 <tr>
646 <td>Computed value:
648 <td>as specified
650 <tr>
651 <td>Animatable:
653 <td>no
654 </table>
656 <p>This property specifies a prioritized list of font family names or
657 generic family names. A font family defines a set of faces that vary in
658 weight, width or slope. CSS uses the combination of a family name with
659 other style attributes to select an individual face. Using this selection
660 mechanism, rather than selecting a face via the style name as is often
661 done in design applications, allows some degree of regularity in textual
662 display when fallback occurs.
664 <p class=note>Designers should note that the CSS definition of font
665 attributes used for selection are explicitly not intended to define a font
666 taxonomy. A type designer's idea of a family may often extend to a set of
667 faces that vary along axes other than just the standard axes of weight,
668 width and slope. A family may extend to include both a set of serif faces
669 and a set of sans-serif faces or vary along axes that are unique to that
670 family. The CSS font selection mechanism merely provides a way to
671 determine the “closest” substitute when substitution is necessary.
673 <p>Unlike other CSS properties, component values are a comma-separated list
674 indicating alternatives. A user agent iterates through the list of family
675 names until it matches an available font that contains a glyph for the
676 character to be rendered. This allows for differences in available fonts
677 across platforms and for differences in the range of characters supported
678 by individual fonts.
680 <p>A font family name only specifies a name given to a set of font faces,
681 it does not specify an individual face. For example, given the
682 availability of the fonts below, Futura would match but Futura Medium
683 would not:
685 <div class=figure><img alt="family and face names"
686 src=familyvsfacename.png>
687 <p class=caption>Family and individual face names
688 </div>
690 <p>Consider the example below:
692 <div class=example>
693 <pre>body {
694 font-family: Helvetica, Verdana, sans-serif;
695 }</pre>
697 <p>If Helvetica is available it will be used when rendering. If neither
698 Helvetica nor Verdana is present, then the user-agent-defined sans serif
699 font will be used.</p>
700 </div>
702 <p>There are two types of font family names:
704 <dl>
705 <dt><dfn id=family-name-value><var><family-name></var></dfn>
707 <dd>The name of a font family of choice such as Helvetica or Verdana in
708 the previous example.
710 <dt><dfn id=generic-family-value><var><generic-family></var></dfn>
712 <dd> The following generic family keywords are defined: ‘<a
713 href="#serif"><code class=property>serif</code></a>’, ‘<a
714 href="#sans-serif"><code class=property>sans-serif</code></a>’, ‘<a
715 href="#cursive"><code class=property>cursive</code></a>’, ‘<a
716 href="#fantasy"><code class=property>fantasy</code></a>’, and ‘<a
717 href="#monospace"><code class=property>monospace</code></a>’. These
718 keywords can be used as a general fallback mechanism when an author's
719 desired font choices are not available. As keywords, they must not be
720 quoted. Authors are encouraged to append a generic font family as a last
721 alternative for improved robustness.
722 </dl>
724 <p>Font family names other than generic families must either be given
725 quoted as <a
726 href="//www.w3.org/TR/CSS21/syndata.html#strings">strings,</a> or unquoted
727 as a sequence of one or more <a
728 href="//www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers.</a>
729 This means most punctuation characters and digits at the start of each
730 token must be escaped in unquoted font family names.
732 <p>To illustrate this, the following declarations are invalid:
734 <pre>
735 font-family: Red/Black, sans-serif;
736 font-family: "Lucida" Grande, sans-serif;
737 font-family: Ahem!, sans-serif;
738 font-family: test@foo, sans-serif;
739 font-family: #POUND, sans-serif;
740 font-family: Hawaii 5-0, sans-serif;
741 </pre>
743 <p>If a sequence of identifiers is given as a font family name, the
744 computed value is the name converted to a string by joining all the
745 identifiers in the sequence by single spaces.
747 <p>To avoid mistakes in escaping, it is recommended to quote font family
748 names that contain white space, digits, or punctuation characters other
749 than hyphens:
751 <pre>
752 body { font-family: "New Century Schoolbook", serif }
754 <BODY STYLE="font-family: '21st Century', fantasy">
755 </pre>
757 <p>Font family <em>names</em> that happen to be the same as a keyword value
758 (‘<code class=property>inherit</code>’, ‘<a href="#serif"><code
759 class=property>serif</code></a>’, ‘<a href="#sans-serif"><code
760 class=property>sans-serif</code></a>’, ‘<a href="#monospace"><code
761 class=property>monospace</code></a>’, ‘<a href="#fantasy"><code
762 class=property>fantasy</code></a>’, and ‘<a href="#cursive"><code
763 class=property>cursive</code></a>’) must be quoted to prevent confusion
764 with the keywords with the same names. The keywords ‘<code
765 class=property>initial</code>’ and ‘<code
766 class=property>default</code>’ are reserved for future use and must also
767 be quoted when used as font names. UAs must not consider these keywords as
768 matching the <a
769 href="#family-name-value"><var><family-name></var></a> type.
771 <p>The precise way a set of fonts are grouped into font families varies
772 depending upon the platform font management API's. The Windows GDI API
773 only allows four faces to be grouped into a family while the DirectWrite
774 API and API's on OSX and other platforms support font families with a
775 variety of weights, widths and slopes (see <a
776 href="#platform-props-to-css">Appendix A</a> for more details).
778 <p>Some font formats allow fonts to carry multiple localizations of the
779 family name. User agents must recognize and correctly match all of these
780 names independent of the underlying platform localization, system API used
781 or document encoding:
783 <div class=figure><img alt="examples of localized family names"
784 src=localizedfamilynames.png>
785 <p class=caption>Localized family names
786 </div>
788 <h4 id=generic-font-families><span class=secno>3.1.1 </span>Generic font
789 families</h4>
791 <p>All five generic font families are defined to exist in all CSS
792 implementations (they need not necessarily map to five distinct actual
793 fonts). User agents should provide reasonable default choices for the
794 generic font families, which express the characteristics of each family as
795 well as possible within the limits allowed by the underlying technology.
796 User agents are encouraged to allow users to select alternative choices
797 for the generic fonts.
799 <h5 class="no-num no-toc"> <span class=index-def id=serif0 title="serif,
800 definition of"><a name=serif-def><dfn id=serif>serif</dfn></a></span></h5>
802 <p>Serif fonts represent the formal text style for a script. This often
803 means but is not limited to glyphs that have finishing strokes, flared or
804 tapering ends, or have actual serifed endings (including slab serifs).
805 Serif fonts are typically proportionately-spaced. They often display a
806 greater variation between thick and thin strokes than fonts from the ‘<a
807 href="#sans-serif"><code class=property>sans-serif</code></a>’ generic
808 font family. CSS uses the term ‘<a href="#serif"><code
809 class=property>serif</code></a>’ to apply to a font for any script,
810 although other names may be more familiar for particular scripts, such as
811 Mincho (Japanese), Sung, Song or Kai (Chinese), Batang (Korean). For
812 Arabic, the Naskh style would correspond to ‘<a href="#serif"><code
813 class=property>serif</code></a>’ more due to its typographic role rather
814 than its actual design style. Any font that is so described may be used to
815 represent the generic ‘<a href="#serif"><code
816 class=property>serif</code></a>’ family.
818 <div class=figure><img alt="sample serif fonts" src=serifexamples.png>
819 <p class=caption>Sample serif fonts
820 </div>
822 <h5 class="no-num no-toc"> <span class=index-def id=sans-serif0
823 title="sans-serif, definition of"> <a name=sans-serif-def><dfn
824 id=sans-serif>sans-serif</dfn></a></span></h5>
826 <p>Glyphs in sans-serif fonts, as the term is used in CSS, are generally
827 low contrast (vertical and horizontal stems have the close to the same
828 thickness) and have stroke endings that are plain -- without any flaring,
829 cross stroke, or other ornamentation. Sans-serif fonts are typically
830 proportionately-spaced. They often have little variation between thick and
831 thin strokes, compared to fonts from the ‘<a href="#serif"><code
832 class=property>serif</code></a>’ family. CSS uses the term ‘<a
833 href="#sans-serif"><code class=property>sans-serif</code></a>’ to apply
834 to a font for any script, although other names may be more familiar for
835 particular scripts, such as Gothic (Japanese), Hei (Chinese), or Gulim
836 (Korean). Any font that is so described may be used to represent the
837 generic ‘<a href="#sans-serif"><code
838 class=property>sans-serif</code></a>’ family.
840 <div class=figure><img alt="sample sans-serif fonts"
841 src=sansserifexamples.png>
842 <p class=caption>Sample sans-serif fonts
843 </div>
845 <h5 class="no-num no-toc"> <span class=index-def id=cursive0
846 title="cursive, definition of"> <a name=cursive-def><dfn
847 id=cursive>cursive</dfn></a></span></h5>
849 <p>Glyphs in cursive fonts generally use a more informal script style, and
850 the result looks more like handwritten pen or brush writing than printed
851 letterwork. CSS uses the term ‘<a href="#cursive"><code
852 class=property>cursive</code></a>’ to apply to a font for any script,
853 although other names such as Chancery, Brush, Swing and Script are also
854 used in font names.
856 <div class=figure><img alt="sample cursive fonts" src=cursiveexamples.png>
857 <p class=caption>Sample cursive fonts
858 </div>
860 <h5 class="no-num no-toc"> <span class=index-def id=fantasy0
861 title="fantasy, definition of"> <a name=fantasy-def><dfn
862 id=fantasy>fantasy</dfn></a></span></h5>
864 <p>Fantasy fonts are primarily decorative or expressive fonts that contain
865 playful representations of characters. These do not include Pi or Picture
866 fonts which do not represent actual characters.
868 <div class=figure><img alt="sample fantasy fonts" src=fantasyexamples.png>
869 <p class=caption>Sample fantasy fonts
870 </div>
872 <h5 class="no-num no-toc"> <span class=index-def id=monospace0
873 title="monospace, definition of"> <a name=monospace-def><dfn
874 id=monospace>monospace</dfn></a></span></h5>
876 <p>The sole criterion of a monospace font is that all glyphs have the same
877 fixed width. This is often used to render samples of computer code.
879 <div class=figure><img alt="sample monospace fonts"
880 src=monospaceexamples.png>
881 <p class=caption>Sample monospace fonts
882 </div>
883 <!-- prop: font-weight -->
885 <h3 id=font-weight-prop><span class=secno>3.2 </span>Font weight: the <a
886 href="#propdef-font-weight">font-weight</a> property</h3>
888 <table class=propdef id=namefont-weightvaluenormal-bold-bolder-l>
889 <tbody>
890 <tr>
891 <td>Name:
893 <td><dfn id=propdef-font-weight
894 title="font-weight!!property">font-weight</dfn>
896 <tr>
897 <td>Value:
899 <td><a href="#font-weight-normal-value"
900 title="normal!!font-weight">normal</a> | <a href="#bold">bold</a> | <a
901 href="#bolder">bolder</a> | <a href="#lighter">lighter</a> | <a
902 href="#font-weight-numeric-values" title="100...900 weight
903 values">100</a> | <a href="#font-weight-numeric-values"
904 title="100...900 weight values">200</a> | <a
905 href="#font-weight-numeric-values" title="100...900 weight
906 values">300</a> | <a href="#font-weight-numeric-values"
907 title="100...900 weight values">400</a> | <a
908 href="#font-weight-numeric-values" title="100...900 weight
909 values">500</a> | <a href="#font-weight-numeric-values"
910 title="100...900 weight values">600</a> | <a
911 href="#font-weight-numeric-values" title="100...900 weight
912 values">700</a> | <a href="#font-weight-numeric-values"
913 title="100...900 weight values">800</a> | <a
914 href="#font-weight-numeric-values" title="100...900 weight
915 values">900</a>
917 <tr>
918 <td>Initial:
920 <td>normal
922 <tr>
923 <td>Applies to:
925 <td>all elements
927 <tr>
928 <td>Inherited:
930 <td>yes
932 <tr>
933 <td>Percentages:
935 <td>N/A
937 <tr>
938 <td>Media:
940 <td>visual
942 <tr>
943 <td>Computed value:
945 <td>numeric weight value (see description)
947 <tr>
948 <td>Animatable:
950 <td>as <a
951 href="http://dev.w3.org/csswg/css3-transitions/#animtype-font-weight">font
952 weight</a>
953 </table>
955 <p>The <a href="#propdef-font-weight"
956 title="font-weight!!property">‘<code
957 class=property>font-weight</code>’</a> property specifies the weight of
958 glyphs in the font, their degree of blackness or stroke thickness.
960 <p>Values have the following meanings:
962 <dl>
963 <dt><dfn id=font-weight-numeric-values title="100...900 weight values">100
964 to 900</dfn>
966 <dd>These values form an ordered sequence, where each number indicates a
967 weight that is at least as dark as its predecessor. These roughly
968 correspond to the commonly used weight names below:
969 </dl>
971 <ul>
972 <li>100 - Thin
974 <li>200 - Extra Light (Ultra Light)
976 <li>300 - Light
978 <li>400 - Normal
980 <li>500 - Medium
982 <li>600 - Semi Bold (Demi Bold)
984 <li>700 - Bold
986 <li>800 - Extra Bold (Ultra Bold)
988 <li>900 - Black (Heavy)
989 </ul>
991 <dl>
992 <dt><dfn id=font-weight-normal-value
993 title="normal!!font-weight">normal</dfn>
995 <dd>Same as ‘<code class=css>400</code>’.
997 <dt><dfn id=bold>bold</dfn>
999 <dd>Same as ‘<code class=css>700</code>’.
1001 <dt><dfn id=bolder>bolder</dfn>
1003 <dd>Specifies a bolder weight than the inherited value.
1005 <dt><dfn id=lighter>lighter</dfn>
1007 <dd>Specifies a lighter weight than the inherited value.
1008 </dl>
1010 <p>Font formats that use a scale other than a nine-step scale should map
1011 their scale onto the CSS scale so that 400 roughly corresponds with a face
1012 that would be labeled as Regular, Book, Roman and 700 roughly matches a
1013 face that would be labeled as Bold. Or weights may be inferred from the
1014 style names, ones that correspond roughly with the scale above. The scale
1015 is relative, so a face with a larger weight value must never appear
1016 lighter. If style names are used to infer weights, care should be taken to
1017 handle variations in style names across locales.
1019 <p>Quite often there are only a few weights available for a particular font
1020 family. When a weight is specified for which no face exists, a face with a
1021 nearby weight is used. In general, bold weights map to faces with heavier
1022 weights and light weights map to faces with lighter weights (see the <a
1023 href="#font-matching-algorithm">font matching section below</a> for a
1024 precise definition). The examples here illustrate which face is used for
1025 different weights, grey indicates a face for that weight does not exist so
1026 a face with a nearby weight is used:
1028 <div class=figure><img alt="weight mappings for a family with 400, 700 and
1029 900 weights" src=optimaweights.png>
1030 <p class=caption>Weight mappings for a font family with 400, 700 and 900
1031 weight faces
1032 </div>
1034 <div class=figure><img alt="weight mappings for a family with 300, 600
1035 weights" src=hiraginoweights.png>
1036 <p class=caption>Weight mappings for a font family with 300 and 600 weight
1037 faces
1038 </div>
1040 <p>Although the practice is not well-loved by typographers, bold faces are
1041 often synthesized by user agents for faces that lack actual bold faces.
1042 For the purposes of style matching, these faces must be treated as if they
1043 exist within the family. Authors can explicitly avoid this behavior by
1044 using the ‘<a href="#propdef-font-synthesis"><code
1045 class=property>font-synthesis</code></a>’ property.
1047 <p>Specified values of ‘<a href="#bolder"><code
1048 class=property>bolder</code></a>’ and ‘<a href="#lighter"><code
1049 class=property>lighter</code></a>’ indicate weights relative to the
1050 weight of the parent element. The computed weight is calculated based on
1051 the inherited <a href="#propdef-font-weight"
1052 title="font-weight!!property">‘<code
1053 class=property>font-weight</code>’</a> value using the chart below.
1055 <table class=data id=bolderlighter summary="Bolder/lighter mappings">
1056 <thead>
1057 <tr>
1058 <th>Inherited value
1060 <th>bolder
1062 <th>lighter
1064 <tbody>
1065 <tr>
1066 <th>100
1068 <td>400
1070 <td>100
1072 <tr>
1073 <th>200
1075 <td>400
1077 <td>100
1079 <tr>
1080 <th>300
1082 <td>400
1084 <td>100
1086 <tr>
1087 <th>400
1089 <td>700
1091 <td>100
1093 <tr>
1094 <th>500
1096 <td>700
1098 <td>100
1100 <tr>
1101 <th>600
1103 <td>900
1105 <td>400
1107 <tr>
1108 <th>700
1110 <td>900
1112 <td>400
1114 <tr>
1115 <th>800
1117 <td>900
1119 <td>700
1121 <tr>
1122 <th>900
1124 <td>900
1126 <td>700
1127 </table>
1129 <p>The table above is equivalent to selecting the next relative bolder or
1130 lighter face, given a font family containing normal and bold faces along
1131 with a thin and a heavy face. Authors who desire finer control over the
1132 exact weight values used for a given element may use numerical values
1133 instead of relative weights.</p>
1134 <!-- prop: font-stretch -->
1136 <h3 id=font-stretch-prop><span class=secno>3.3 </span>Font width: the <a
1137 href="#propdef-font-stretch">font-stretch</a> property</h3>
1139 <table class=propdef id=namefont-stretchvalue-normal-ultra-conde>
1140 <tbody>
1141 <tr>
1142 <td>Name:
1144 <td><dfn id=propdef-font-stretch
1145 title="font-stretch!!property">font-stretch</dfn>
1147 <tr>
1148 <td>Value:
1150 <td> <a href="#font-stretch-normal-value"
1151 title="normal!!font-stretch">normal</a> | <a
1152 href="#ultra-condensed">ultra-condensed</a> | <a
1153 href="#extra-condensed">extra-condensed</a> | <a
1154 href="#condensed">condensed</a> | <a
1155 href="#semi-condensed-">semi-condensed</a> | <a
1156 href="#semi-expanded">semi-expanded</a> | <a
1157 href="#expanded">expanded</a> | <a
1158 href="#extra-expanded">extra-expanded</a> | <a
1159 href="#ultra-expanded">ultra-expanded</a>
1161 <tr>
1162 <td>Initial:
1164 <td>normal
1166 <tr>
1167 <td>Applies to:
1169 <td>all elements
1171 <tr>
1172 <td>Inherited:
1174 <td>yes
1176 <tr>
1177 <td>Percentages:
1179 <td>N/A
1181 <tr>
1182 <td>Media:
1184 <td>visual
1186 <tr>
1187 <td>Computed value:
1189 <td>as specified
1191 <tr>
1192 <td>Animatable:
1194 <td>as <a href="#font-stretch-animation">font stretch</a>
1195 </table>
1197 <p>The <a href="#propdef-font-stretch"
1198 title="font-stretch!!property">‘<code
1199 class=property>font-stretch</code>’</a> property selects a normal,
1200 condensed, or expanded face from a font family. Absolute keyword values
1201 have the following ordering, from narrowest to widest:
1203 <ul>
1204 <li><dfn id=ultra-condensed>ultra-condensed</dfn>
1206 <li><dfn id=extra-condensed>extra-condensed</dfn>
1208 <li><dfn id=condensed>condensed</dfn>
1210 <li><dfn id=semi-condensed->semi-condensed </dfn>
1212 <li><dfn id=font-stretch-normal-value
1213 title="normal!!font-stretch">normal</dfn>
1215 <li><dfn id=semi-expanded>semi-expanded</dfn>
1217 <li><dfn id=expanded>expanded</dfn>
1219 <li><dfn id=extra-expanded>extra-expanded</dfn>
1221 <li><dfn id=ultra-expanded>ultra-expanded</dfn>
1222 </ul>
1224 <p>When a face does not exist for a given width, normal or condensed values
1225 map to a narrower face, otherwise a wider face. Conversely, expanded
1226 values map to a wider face, otherwise a narrower face. The figure below
1227 shows how the nine font-stretch property settings affect font selection
1228 for font family containing a variety of widths, grey indicates a width for
1229 which no face exists and a different width is substituted:
1231 <div class=figure><img alt="width mappings for a family with condensed,
1232 normal and expanded faces" src=universwidths.png>
1233 <p class=caption>Width mappings for a font family with condensed, normal
1234 and expanded width faces
1235 </div>
1237 <p id=font-stretch-animation>Animation of font stretch: Font stretch is
1238 interpolated in discrete steps. The interpolation happens as though the
1239 ordered values are equally spaced real numbers. The interpolation result
1240 is rounded to the nearest value, with values exactly halfway between two
1241 values rounded towards the later value in the list above.</p>
1242 <!-- prop: font-style -->
1244 <h3 id=font-style-prop><span class=secno>3.4 </span>Font style: the <a
1245 href="#propdef-font-style">font-style</a> property</h3>
1247 <table class=propdef id=namefont-stylevaluenormal-italic-oblique>
1248 <tbody>
1249 <tr>
1250 <td>Name:
1252 <td><dfn id=propdef-font-style
1253 title="font-style!!property">font-style</dfn>
1255 <tr>
1256 <td>Value:
1258 <td><a href="#font-style-normal-value"
1259 title="normal!!font-style">normal</a> | <a href="#italic">italic</a> |
1260 <a href="#oblique">oblique</a>
1262 <tr>
1263 <td>Initial:
1265 <td>normal
1267 <tr>
1268 <td>Applies to:
1270 <td>all elements
1272 <tr>
1273 <td>Inherited:
1275 <td>yes
1277 <tr>
1278 <td>Percentages:
1280 <td>N/A
1282 <tr>
1283 <td>Media:
1285 <td>visual
1287 <tr>
1288 <td>Computed value:
1290 <td>as specified
1292 <tr>
1293 <td>Animatable:
1295 <td>no
1296 </table>
1298 <p>The <a href="#propdef-font-style" title="font-style!!property">‘<code
1299 class=property>font-style</code>’</a> property allows italic or oblique
1300 faces to be selected. Italic forms are generally cursive in nature while
1301 oblique faces are typically sloped versions of the regular face. Oblique
1302 faces can be simulated by artificially sloping the glyphs of the regular
1303 face. Compare the artificially sloped renderings of Palatino ‘<code
1304 class=property>a</code>’ and Baskerville ‘<code
1305 class=property>N</code>’ in grey with the actual italic versions:
1307 <div class=figure><img alt="artificial sloping vs. real italics"
1308 src=realvsfakeitalics.png>
1309 <p class=caption>Artificial sloping versus real italics
1310 </div>
1312 <p>Values have the following meanings:
1314 <dl>
1315 <dt><dfn id=font-style-normal-value
1316 title="normal!!font-style">normal</dfn>
1318 <dd>selects a face that is classified as a normal face, one that is
1319 neither italic or obliqued
1321 <dt><dfn id=italic>italic</dfn>
1323 <dd>selects a font that is labeled as an italic face, or an oblique face
1324 if one is not
1326 <dt><dfn id=oblique>oblique</dfn>
1328 <dd>selects a font that is labeled as an oblique face, or an italic face
1329 if one is not
1330 </dl>
1332 <p>If no italic or oblique face is available, oblique faces can be
1333 synthesized by rendering non-obliqued faces with a right sloping
1334 transformation applied. When synthesizing these faces, the transformation
1335 should apply to all glyphs in the same way and not vary based on codepoint
1336 or due to horizontal or vertical line orientation.
1338 <p class=issue>It has been <a
1339 href="http://lists.w3.org/Archives/Public/www-style/2013May/0272.html">proposed</a>
1340 that for vertical text runs, synthetic italics should not mimic normal
1341 italic glyphs but instead mimic the customs of Japanese obliquing
1342 (斜体、shatai), where the obliquing is applied across the text run
1343 regardless of glyph orientation.
1345 <p>Many scripts lack the tradition of mixing a cursive form within text
1346 rendered with a normal face. Chinese, Japanese and Korean fonts almost
1347 always lack italic or oblique faces. Fonts that support a mixture of
1348 scripts will sometimes omit specific scripts such as Arabic from the set
1349 of glyphs supported in the italic face. User agents should be careful
1350 about making <a href="#character-map"><em>character map</em></a>
1351 assumptions across faces.</p>
1352 <!-- prop: font-size -->
1354 <h3 id=font-size-prop><span class=secno>3.5 </span>Font size: the <a
1355 href="#propdef-font-size">font-size</a> property</h3>
1357 <table class=propdef id=namefont-sizevalueltabsolute-sizegt-ltre>
1358 <tbody>
1359 <tr>
1360 <td>Name:
1362 <td><dfn id=propdef-font-size>font-size</dfn>
1364 <tr>
1365 <td>Value:
1367 <td><a href="#absolute-size-value"><var><absolute-size></var></a>
1368 | <a href="#relative-size-value"><var><relative-size></var></a> |
1369 <a href="#length-size-value"><var><length></var></a> | <a
1370 href="#percentage-size-value"><var><percentage></var></a>
1372 <tr>
1373 <td>Initial:
1375 <td>medium
1377 <tr>
1378 <td>Applies to:
1380 <td>all elements
1382 <tr>
1383 <td>Inherited:
1385 <td>yes
1387 <tr>
1388 <td>Percentages:
1390 <td>refer to parent element's font size
1392 <tr>
1393 <td>Media:
1395 <td>visual
1397 <tr>
1398 <td>Computed value:
1400 <td>absolute length
1402 <tr>
1403 <td>Animatable:
1405 <td>as <a
1406 href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a>
1407 </table>
1409 <p>This property indicates the desired height of glyphs from the font. For
1410 scalable fonts, the font-size is a scale factor applied to the EM unit of
1411 the font. (Note that certain glyphs may bleed outside their EM box.) For
1412 non-scalable fonts, the font-size is converted into absolute units and
1413 matched against the declared font-size of the font, using the same
1414 absolute coordinate space for both of the matched values. Values have the
1415 following meanings:
1417 <dl>
1418 <dt><dfn id=absolute-size-value><var><absolute-size></var></dfn>
1420 <dd> An <a
1421 href="#absolute-size-value"><var><absolute-size></var></a> keyword
1422 refers to an entry in a table of font sizes computed and kept by the user
1423 agent. Possible values are:
1424 <p> [ xx-small | x-small | small | medium | large | x-large | xx-large ]</p>
1426 <dt><dfn id=relative-size-value><var><relative-size></var></dfn>
1428 <dd> A <a href="#relative-size-value"><var><relative-size></var></a>
1429 keyword is interpreted relative to the table of font sizes and the
1430 computed ‘<a href="#propdef-font-size"><code
1431 class=property>font-size</code></a>’ of the parent element. Possible
1432 values are:
1433 <p> [ larger | smaller ]
1435 <p> For example, if the parent element has a font size of ‘<code
1436 class=property>medium</code>’, a value of ‘<code
1437 class=property>larger</code>’ will make the font size of the current
1438 element be ‘<code class=property>large</code>’. If the parent
1439 element's size is not close to a table entry, the user agent is free to
1440 interpolate between table entries or round off to the closest one. The
1441 user agent may have to extrapolate table values if the numerical value
1442 goes beyond the keywords.
1444 <dt><dfn id=length-size-value><var><length></var></dfn>
1446 <dd>A length value specifies an absolute font size (independent of the
1447 user agent's font table). Negative lengths are illegal.
1449 <dt><dfn id=percentage-size-value><var><percentage></var></dfn>
1451 <dd>A percentage value specifies an absolute font size relative to the
1452 parent element's font size. Use of percentage values, or values in
1453 ‘<code class=property>em</code>’s, leads to more robust and
1454 cascadable style sheets.
1455 </dl>
1457 <p>The following table provides user agent guidelines for the absolute-size
1458 scaling factor and their mapping to HTML heading and absolute font-sizes.
1459 The ‘<code class=property>medium</code>’ value is used as the
1460 reference middle value. The user agent may fine-tune these values for
1461 different fonts or different types of display devices.
1463 <table class=data>
1464 <thead>
1465 <tr>
1466 <th>CSS absolute-size values
1468 <th>xx-small
1470 <th>x-small
1472 <th>small
1474 <th>medium
1476 <th>large
1478 <th>x-large
1480 <th>xx-large
1482 <th>
1484 <tbody>
1485 <tr>
1486 <th>scaling factor
1488 <td>3/5
1490 <td>3/4
1492 <td>8/9
1494 <td>1
1496 <td>6/5
1498 <td>3/2
1500 <td>2/1
1502 <td>3/1
1504 <tr>
1505 <th>HTML headings
1507 <td>h6
1509 <td>
1511 <td>h5
1513 <td>h4
1515 <td>h3
1517 <td>h2
1519 <td>h1
1521 <td>
1523 <tr>
1524 <th>HTML font sizes
1526 <td>1
1528 <td>
1530 <td>2
1532 <td>3
1534 <td>4
1536 <td>5
1538 <td>6
1540 <td>7
1541 </table>
1543 <p class=note><em><strong>Note 1.</strong> To preserve readability, an UA
1544 applying these guidelines should nevertheless avoid creating font-size
1545 resulting in less than 9 device pixels per EM unit on a computer
1546 display.</em>
1548 <p class=note><em><strong>Note 2.</strong> In CSS1, the suggested scaling
1549 factor between adjacent indexes was 1.5 which user experience proved to be
1550 too large. In CSS2, the suggested scaling factor for computer screen
1551 between adjacent indexes was 1.2 which still created issues for the small
1552 sizes. The new scaling factor varies between each index to provide a
1553 better readability.</em>
1555 <p>The actual value of this property may differ from the computed value due
1556 a numerical value on ‘<a href="#propdef-font-size-adjust"><code
1557 class=property>font-size-adjust</code></a>’ and the unavailability of
1558 certain font sizes.
1560 <p>Child elements inherit the computed <a class=noxref
1561 href="#font-size-prop"> <span class=property>‘<code
1562 class=property>font-size</code>’</span></a> value (otherwise, the effect
1563 of <a class=noxref href="#font-size-adjust-prop"><span
1564 class=property>‘<code
1565 class=property>font-size-adjust</code>’</span></a> would compound).
1567 <div class=example>
1568 <p style="display:none">Example(s):
1570 <p>
1572 <pre>p { font-size: 12pt; }
1573 blockquote { font-size: larger }
1574 em { font-size: 150% }
1575 em { font-size: 1.5em }
1576 </pre>
1577 </div>
1578 <!-- prop: font-size-adjust -->
1580 <h3 id=font-size-adjust-prop><span class=secno>3.6 </span>Relative sizing:
1581 the <a href="#propdef-font-size-adjust">font-size-adjust</a> property</h3>
1583 <table class=propdef id=namefont-size-adjustvaluenone-auto-ltnum>
1584 <tbody>
1585 <tr>
1586 <td>Name:
1588 <td><dfn id=propdef-font-size-adjust>font-size-adjust</dfn>
1590 <tr>
1591 <td>Value:
1593 <td><a href="#font-size-adjust-none-value"
1594 title="none!!font-size-adjust">none</a> | <a
1595 href="#font-size-adjust-auto-value"
1596 title="auto!!font-size-adjust">auto</a> | <a
1597 href="#aspect-ratio-value"><var><number></var></a>
1599 <tr>
1600 <td>Initial:
1602 <td>none
1604 <tr>
1605 <td>Applies to:
1607 <td>all elements
1609 <tr>
1610 <td>Inherited:
1612 <td>yes
1614 <tr>
1615 <td>Percentages:
1617 <td>N/A
1619 <tr>
1620 <td>Media:
1622 <td>visual
1624 <tr>
1625 <td>Computed value:
1627 <td>as specified
1629 <tr>
1630 <td>Animatable:
1632 <td>as <a
1633 href="http://dev.w3.org/csswg/css3-transitions/#animtype-number">number</a>
1634 </table>
1636 <p>For any given font size, the apparent size and legibility of text varies
1637 across fonts. For scripts such as Latin or Cyrillic that distinguish
1638 between upper and lowercase letters, the relative height of lowercase
1639 letters compared to their uppercase counterparts is a determining factor
1640 of legibility. This is commonly referred to as the <a class=index-def
1641 href="#aspect-value" id=aspect-value0 title="aspect value"><dfn
1642 id=aspect-value>aspect value</dfn></a>. Precisely defined, it is equal to
1643 the x-height of a font divided by the font size.
1645 <p>In situations where font fallback occurs, fallback fonts may not share
1646 the same aspect ratio as the desired font family and will thus appear less
1647 readable. The font-size-adjust property is a way to preserve the
1648 readability of text when font fallback occurs. It does this by adjusting
1649 the font-size so that the x-height is the same regardless of the font
1650 used.
1652 <div class=example>
1653 <p>The style defined below defines Verdana as the desired font family, but
1654 if Verdana is not available Futura or Times will be used.</p>
1656 <pre>p {
1657 font-family: Verdana, Futura, Times;
1658 }
1660 <p>Lorem ipsum dolor sit amet, ...</p>
1661 </pre>
1663 <p>Verdana has a relatively high aspect ratio, lowercase letters are
1664 relatively tall compared to uppercase letters, so at small sizes text
1665 appears legible. Times has a lower aspect ratio and so if fallback
1666 occurs, the text will be less legible at small sizes than Verdana.</p>
1667 </div>
1669 <p>How text rendered in each of these fonts compares is shown below, the
1670 columns show text rendered in Verdana, Futura and Times. The same
1671 font-size value is used across cells within each row and red lines are
1672 included to show the differences in x-height. In the upper half each row
1673 is rendered in the same font-size value. The same is true for the lower
1674 half but in this half the font-size-adjust property is also set so that
1675 the actual font size is adjusted to preserve the x-height across each row.
1676 Note how small text remains relatively legible across each row in the
1677 lower half.
1679 <div class=figure><img alt="text with and without font-size-adjust"
1680 src=fontsizeadjust.png>
1681 <p class=caption>Text with and without the use of font-size-adjust
1682 </div>
1684 <p>This property allows authors to specify an aspect value for an element
1685 that will effectively preserve the x-height of the first choice font,
1686 whether it is substituted or not. Values have the following meanings:
1688 <dl>
1689 <dt><dfn id=font-size-adjust-none-value
1690 title="none!!font-size-adjust">none</dfn>
1692 <dd>Do not preserve the font's x-height.
1694 <dt><dfn id=font-size-adjust-auto-value
1695 title="auto!!font-size-adjust">auto</dfn>
1697 <dd>Behaves just like <number>, except the number used is the aspect
1698 value calculated by user agents for the first font in the list of fonts
1699 defined for the initial value of the <a href="#propdef-font-family"
1700 title="font-family!!property">‘<code
1701 class=property>font-family</code>’</a> property. Effectively this is
1702 the default font used when <a href="#propdef-font-family"
1703 title="font-family!!property">‘<code
1704 class=property>font-family</code>’</a> is not otherwise specified.
1705 <p>Authors can use this value to specify that font size should be
1706 normalized across fonts based on the x-height without the need to
1707 specify the aspect ratio explicitly.</p>
1709 <dt><dfn id=aspect-ratio-value><var><number></var></dfn>
1711 <dd>Specifies the aspect value used in the calculation below to calculate
1712 the adjusted font size:
1713 <pre>c = ( a / a' ) s
1714 </pre>
1716 <p>where:</p>
1718 <pre>s = font-size value
1719 a = aspect value as specified by the font-size-adjust property
1720 a' = aspect value of actual font
1721 c = adjusted font-size to use
1722 </pre>
1724 <p>This value applies to any font that is selected but in typical usage
1725 it should be based on the aspect value of the first font in the
1726 font-family list. If this is specified accurately, the <tt>(a/a')</tt>
1727 term in the formula above is effectively 1 for the first font and no
1728 adjustment occurs. If the value is specified inaccurately, text rendered
1729 using the first font in the family list will display differently in
1730 older user agents that don't support font-size-adjust.</p>
1731 </dl>
1733 <p>Authors can calculate the aspect value for a given font by comparing
1734 spans with the same content but different font-size-adjust properties. If
1735 the same font-size is used, the spans will match when the font-size-adjust
1736 value is accurate for the given font.
1738 <div class=example>
1739 <p>Two spans with borders are used to determine the aspect value of a
1740 font. The font-size is the same for both spans but the font-size-adjust
1741 property is specified only for the right span. Starting with a value of
1742 0.5, the aspect value can be adjusted until the borders around the two
1743 letters line up.</p>
1745 <pre>p {
1746 font-family: Futura;
1747 font-size: 500px;
1748 }
1750 span {
1751 border: solid 1px red;
1752 }
1754 .adjust {
1755 font-size-adjust: 0.5;
1756 }
1758 <p><span>b</span><span class="adjust">b</span></p>
1759 </pre>
1761 <div class=figure><img alt="Futura with an aspect value of 0.5"
1762 src=beforefontsizeadjust.png>
1763 <p class=caption>Futura with an aspect value of 0.5
1764 </div>
1766 <p>The box on the right is a bit bigger than the one on the left, so the
1767 aspect value of this font is something less than 0.5. Adjust the value
1768 until the boxes align.</p>
1769 </div>
1770 <!-- prop: font -->
1772 <h3 id=font-prop><span class=secno>3.7 </span>Shorthand font property: the
1773 <a href="#propdef-font">font</a> property</h3>
1775 <table class=propdef id=namefontvalue-ltlsquofont-stylersquogt-l>
1776 <tbody>
1777 <tr>
1778 <td>Name:
1780 <td><dfn id=propdef-font>font</dfn>
1782 <tr>
1783 <td>Value:
1785 <td>[ [ <var><<a href="#propdef-font-style"
1786 title="font-style!!property">‘<code
1787 class=property>font-style</code>’</a>></var> || <a
1788 href="#font-variant-css21-values"><var><font-variant-css21></var></a>
1789 || <var><<a href="#propdef-font-weight"
1790 title="font-weight!!property">‘<code
1791 class=property>font-weight</code>’</a>></var> || <var><<a
1792 href="#propdef-font-stretch" title="font-stretch!!property">‘<code
1793 class=property>font-stretch</code>’</a></var> ]? <var><‘<a
1794 href="#propdef-font-size"><code
1795 class=property>font-size</code></a>’></var> [ / <var><‘<code
1796 class=property>line-height</code>’></var> ]? <var><<a
1797 href="#propdef-font-family" title="font-family!!property">‘<code
1798 class=property>font-family</code>’</a>></var> ] | caption | icon |
1799 menu | message-box | small-caption | status-bar
1801 <tr>
1802 <td>Initial:
1804 <td>see individual properties
1806 <tr>
1807 <td>Applies to:
1809 <td>all elements
1811 <tr>
1812 <td>Inherited:
1814 <td>yes
1816 <tr>
1817 <td>Percentages:
1819 <td>see individual properties
1821 <tr>
1822 <td>Media:
1824 <td>visual
1826 <tr>
1827 <td>Computed value:
1829 <td>see individual properties
1831 <tr>
1832 <td>Animatable:
1834 <td>see individual properties
1835 </table>
1837 <p>The <span class=property>‘<a href="#propdef-font"><code
1838 class=property>font</code></a>’</span> property is, except as described
1839 below, a shorthand property for setting <a href="#propdef-font-style"
1840 title="font-style!!property">‘<code
1841 class=property>font-style</code>’</a>, <a href="#propdef-font-variant"
1842 title="font-variant!!property">‘<code
1843 class=property>font-variant</code>’</a>, <a href="#propdef-font-weight"
1844 title="font-weight!!property">‘<code
1845 class=property>font-weight</code>’</a>, <a href="#propdef-font-stretch"
1846 title="font-stretch!!property">‘<code
1847 class=property>font-stretch</code>’</a>, <span class=property>‘<a
1848 href="#propdef-font-size"><code
1849 class=property>font-size</code></a>’</span>, <a class=property
1850 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
1851 class=property>line-height</code>’</a>, <a href="#propdef-font-family"
1852 title="font-family!!property">‘<code
1853 class=property>font-family</code>’</a> at the same place in the
1854 stylesheet. Values for the <a href="#propdef-font-variant"
1855 title="font-variant!!property">‘<code
1856 class=property>font-variant</code>’</a> property may also be included
1857 but only those supported in CSS 2.1, none of the <a
1858 href="#propdef-font-variant" title="font-variant!!property">‘<code
1859 class=property>font-variant</code>’</a> values added in this
1860 specification can be used in the <span class=property>‘<a
1861 href="#propdef-font"><code class=property>font</code></a>’</span>
1862 shorthand:
1864 <pre
1865 class=prod><dfn id=font-variant-css21-values><var><font-variant-css21></var></dfn> = [normal | small-caps]</pre>
1867 <p>The syntax of this property is based on a traditional typographical
1868 shorthand notation to set multiple properties related to fonts.
1870 <p>All subproperties of the ‘<a href="#propdef-font"><code
1871 class=property>font</code></a>’ property are first reset to their
1872 initial values, including those listed above plus <span
1873 class=property>‘<a href="#propdef-font-size-adjust"><code
1874 class=property>font-size-adjust</code></a>’</span>, <span
1875 class=property>‘<a href="#propdef-font-kerning"><code
1876 class=property>font-kerning</code></a>’</span>, subproperties of <a
1877 href="#propdef-font-variant" title="font-variant!!property">‘<code
1878 class=property>font-variant</code>’</a> and and <span>‘<a
1879 href="#propdef-font-language-override"><code
1880 class=property>font-language-override</code></a>’</span>. Then, those
1881 properties that are given explicit values in the <span
1882 class=property>‘<a href="#propdef-font"><code
1883 class=property>font</code></a>’</span> shorthand are set to those
1884 values. For a definition of allowed and initial values, see the previously
1885 defined properties. For reasons of backwards compatibility, it is not
1886 possible to set <span class=property>‘<a
1887 href="#propdef-font-size-adjust"><code
1888 class=property>font-size-adjust</code></a>’</span> to anything other
1889 than its initial value using the <span class=property>‘<a
1890 href="#propdef-font"><code class=property>font</code></a>’</span>
1891 shorthand property; instead, use the individual property.
1893 <div class=example>
1894 <p style="display:none">Example(s):
1896 <p>
1898 <pre>p { font: 12pt/14pt sans-serif }
1899 p { font: 80% sans-serif }
1900 p { font: x-large/110% "new century schoolbook", serif }
1901 p { font: bold italic large Palatino, serif }
1902 p { font: normal small-caps 120%/120% fantasy }
1903 p { font: condensed oblique 12pt "Helvetica Neue", serif; }
1904 </pre>
1906 <p> In the second rule, the font size percentage value (‘<code
1907 class=css>80%</code>’) refers to the computed ‘<a
1908 href="#propdef-font-size"><code class=property>font-size</code></a>’ of
1909 the parent element. In the third rule, the line height percentage
1910 (‘<code class=css>110%</code>’) refers to the font size of the
1911 element itself.
1913 <p>The first three rules do not specify the <a
1914 href="#propdef-font-variant" title="font-variant!!property">‘<code
1915 class=property>font-variant</code>’</a> and <a
1916 href="#propdef-font-weight" title="font-weight!!property">‘<code
1917 class=property>font-weight</code>’</a> explicitly, so these properties
1918 receive their initial values (‘<a href="#normal"><code
1919 class=property>normal</code></a>’). Notice that the font family name
1920 "new century schoolbook", which contains spaces, is enclosed in quotes.
1921 The fourth rule sets the <a href="#propdef-font-weight"
1922 title="font-weight!!property">‘<code
1923 class=property>font-weight</code>’</a> to ‘<a href="#bold"><code
1924 class=property>bold</code></a>’, the <a href="#propdef-font-style"
1925 title="font-style!!property">‘<code
1926 class=property>font-style</code>’</a> to ‘<a href="#italic"><code
1927 class=property>italic</code></a>’, and implicitly sets <a
1928 href="#propdef-font-variant" title="font-variant!!property">‘<code
1929 class=property>font-variant</code>’</a> to ‘<a href="#normal"><code
1930 class=property>normal</code></a>’.
1932 <p> The fifth rule sets the <a href="#propdef-font-variant"
1933 title="font-variant!!property">‘<code
1934 class=property>font-variant</code>’</a> (‘<a href="#small-caps"><code
1935 class=property>small-caps</code></a>’), the <span class=property>‘<a
1936 href="#propdef-font-size"><code
1937 class=property>font-size</code></a>’</span> (120% of the parent's font
1938 size), the <a class=property
1939 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
1940 class=property>line-height</code>’</a> (120% of the font size) and the
1941 <a href="#propdef-font-family" title="font-family!!property">‘<code
1942 class=property>font-family</code>’</a> (‘<a href="#fantasy"><code
1943 class=property>fantasy</code></a>’). It follows that the keyword ‘<a
1944 href="#normal"><code class=property>normal</code></a>’ applies to the
1945 two remaining properties: <a href="#propdef-font-style"
1946 title="font-style!!property">‘<code
1947 class=property>font-style</code>’</a> and <a
1948 href="#propdef-font-weight" title="font-weight!!property">‘<code
1949 class=property>font-weight</code>’</a>.
1951 <p>The sixth rule sets the <a href="#propdef-font-style"
1952 title="font-style!!property">‘<code
1953 class=property>font-style</code>’</a>, <a href="#propdef-font-stretch"
1954 title="font-stretch!!property">‘<code
1955 class=property>font-stretch</code>’</a>, <span class=property>‘<a
1956 href="#propdef-font-size"><code
1957 class=property>font-size</code></a>’</span>, and <a
1958 href="#propdef-font-family" title="font-family!!property">‘<code
1959 class=property>font-family</code>’</a>, the other font properties being
1960 set to their initial values.
1961 </div>
1963 <p>Since the <a href="#propdef-font-stretch"
1964 title="font-stretch!!property">‘<code
1965 class=property>font-stretch</code>’</a> property was not defined in CSS
1966 2.1, when using <a href="#propdef-font-stretch"
1967 title="font-stretch!!property">‘<code
1968 class=property>font-stretch</code>’</a> values within ‘<a
1969 href="#propdef-font"><code class=property>font</code></a>’ rules,
1970 authors should include a extra version compatible with older user agents:
1972 <pre>p {
1973 font: 80% sans-serif; /* for older user agents */
1974 font: condensed 80% sans-serif;
1975 }</pre>
1977 <p>The following values refer to system fonts:
1979 <dl>
1980 <dt><strong>caption</strong>
1982 <dd>The font used for captioned controls (e.g., buttons, drop-downs,
1983 etc.).
1985 <dt><strong>icon</strong>
1987 <dd>The font used to label icons.
1989 <dt><strong>menu</strong>
1991 <dd>The font used in menus (e.g., dropdown menus and menu lists).
1993 <dt><strong>message-box</strong>
1995 <dd>The font used in dialog boxes.
1997 <dt><strong>small-caption</strong>
1999 <dd>The font used for labeling small controls.
2001 <dt><strong>status-bar</strong>
2003 <dd>The font used in window status bars.
2004 </dl>
2006 <p>System fonts may only be set as a whole; that is, the font family, size,
2007 weight, style, etc. are all set at the same time. These values may then be
2008 altered individually if desired. If no font with the indicated
2009 characteristics exists on a given platform, the user agent should either
2010 intelligently substitute (e.g., a smaller version of the ‘<code
2011 class=property>caption</code>’ font might be used for the ‘<code
2012 class=property>small-caption</code>’ font), or substitute a user agent
2013 default font. As for regular fonts, if, for a system font, any of the
2014 individual properties are not part of the operating system's available
2015 user preferences, those properties should be set to their initial values.
2017 <p>That is why this property is "almost" a shorthand property: system fonts
2018 can only be specified with this property, not with <a
2019 href="#propdef-font-family" title="font-family!!property">‘<code
2020 class=property>font-family</code>’</a> itself, so <span
2021 class=property>‘<a href="#propdef-font"><code
2022 class=property>font</code></a>’</span> allows authors to do more than
2023 the sum of its subproperties. However, the individual properties such as
2024 <a href="#propdef-font-weight" title="font-weight!!property">‘<code
2025 class=property>font-weight</code>’</a> are still given values taken from
2026 the system font, which can be independently varied.
2028 <p>Note that the keywords used for the system fonts listed above are only
2029 treated as keywords when they occur in the initial position, in other
2030 positions the same string is treated as part of the font family name:
2032 <pre> font: menu; /* use the font settings for system menus */
2033 font: large menu; /* use a font family named "menu" */</pre>
2035 <div class=example>
2036 <p style="display:none">Example(s):
2038 <p>
2040 <pre>button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
2041 button p { font: menu }
2042 button p em { font-weight: bolder }
2043 </pre>
2045 <p>If the font used for dropdown menus on a particular system happened to
2046 be, for example, 9-point Charcoal, with a weight of 600, then P elements
2047 that were descendants of BUTTON would be displayed as if this rule were
2048 in effect:
2050 <pre>button p { font: 600 9pt Charcoal }
2051 </pre>
2053 <p>Because the <span class=property>‘<a href="#propdef-font"><code
2054 class=property>font</code></a>’</span> shorthand resets to its initial
2055 value any property not explicitly given a value, this has the same effect
2056 as this declaration:
2058 <pre>button p {
2059 font-style: normal;
2060 font-variant: normal;
2061 font-weight: 600;
2062 font-size: 9pt;
2063 line-height: normal;
2064 font-family: Charcoal
2065 }
2066 </pre>
2067 </div>
2068 <!-- prop: font-synthesis -->
2070 <h3 id=font-synthesis-prop><span class=secno>3.8 </span>Controlling
2071 synthetic faces: the <a href="#propdef-font-synthesis">font-synthesis</a>
2072 property</h3>
2074 <table class=propdef id=namefont-synthesisvaluenone-weight-style>
2075 <tbody>
2076 <tr>
2077 <td>Name:
2079 <td><dfn id=propdef-font-synthesis>font-synthesis</dfn>
2081 <tr>
2082 <td>Value:
2084 <td>none | [ weight || style ]
2086 <tr>
2087 <td>Initial:
2089 <td>weight style
2091 <tr>
2092 <td>Applies to:
2094 <td>all elements
2096 <tr>
2097 <td>Inherited:
2099 <td>yes
2101 <tr>
2102 <td>Percentages:
2104 <td>N/A
2106 <tr>
2107 <td>Media:
2109 <td>visual
2111 <tr>
2112 <td>Computed value:
2114 <td>as specified
2116 <tr>
2117 <td>Animatable:
2119 <td>no
2120 </table>
2122 <p>This property controls whether user agents are allowed to synthesize
2123 bold or oblique font faces when a font family lacks bold or italic faces.
2124 If ‘<a href="#weight"><code class=property>weight</code></a>’ is not
2125 specified, user agents must not synthesize bold faces and if ‘<code
2126 class=property>style</code>’ is not specified user agents must not
2127 synthesize italic faces. A value of ‘<code class=property>none</code>’
2128 disallows all synthetic faces.
2130 <div class=example>
2131 <p>The style rule below disables the use of synthetically obliqued Arabic:</p>
2133 <pre>*:lang(ar) { font-synthesis: none; }
2134 </pre>
2135 </div>
2137 <h2 id=font-resources><span class=secno>4 </span>Font Resources</h2>
2139 <h3 id=font-face-rule><span class=secno>4.1 </span>The <dfn
2140 id=at-font-face-rule style="font-weight: inherit; font-style:
2141 inherit"><code>@font-face</code></dfn> rule</h3>
2143 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule allows
2144 for linking to fonts that are automatically fetched and activated when
2145 needed. This allows authors to select a font that closely matches the
2146 design goals for a given page rather than limiting the font choice to a
2147 set of fonts available on all platforms. A set of font descriptors define
2148 the location of a font resource, either locally or externally, along with
2149 the style characteristics of an individual face. Multiple <a
2150 href="#at-font-face-rule"><code>@font-face</code></a> rules can be used to
2151 construct font families with a variety of faces. Using CSS font matching
2152 rules, a user agent can selectively download only those faces that are
2153 needed for a given piece of text.
2155 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule
2156 consists of the <a href="#at-font-face-rule"><code>@font-face</code></a>
2157 at-keyword followed by a block of descriptor declarations. In terms of the
2158 grammar, this specification defines the following productions:
2160 <pre><dfn id=fontfacerule>font_face_rule</dfn>
2161 : <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>*
2162 ;
2164 <dfn id=descriptordeclaration>descriptor_declaration</dfn>
2165 : <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>
2166 ;</pre>
2168 <p>The following new definitions are introduced:
2170 <pre>- -|\\0{0,4}2d(\r\n|[ \t\r\n\f])?
2171 F f|\\0{0,4}(46|66)(\r\n|[ \t\r\n\f])?</pre>
2173 <p>The following new token is introduced:
2175 <pre>@{F}{O}{N}{T}{-}{F}{A}{C}{E} {return <dfn id=fontfacesym>FONT_FACE_SYM</dfn>;}</pre>
2177 <p>Each <a href="#at-font-face-rule"><code>@font-face</code></a> rule
2178 specifies a value for every font descriptor, either implicitly or
2179 explicitly. Those not given explicit values in the rule take the initial
2180 value listed with each descriptor in this specification. These descriptors
2181 apply solely within the context of the <a
2182 href="#at-font-face-rule"><code>@font-face</code></a> rule in which they
2183 are defined, and do not apply to document language elements. There is no
2184 notion of which elements the descriptors apply to or whether the values
2185 are inherited by child elements. When a given descriptor occurs multiple
2186 times in a given <a href="#at-font-face-rule"><code>@font-face</code></a>
2187 rule, only the last descriptor declaration is used and all prior
2188 declarations for that descriptor are ignored.
2190 <div class=example>
2191 <p>To use a downloadable font called Gentium:</p>
2193 <pre>
2194 @font-face {
2195 font-family: Gentium;
2196 src: url(http://example.com/fonts/Gentium.ttf);
2197 }
2199 p { font-family: Gentium, serif; }
2200 </pre>
2202 <p>The user agent will download Gentium and use it when rendering text
2203 within paragraph elements. If for some reason the site serving the font
2204 is unavailable, the default serif font will be used.</p>
2205 </div>
2207 <p>A given set of <a href="#at-font-face-rule"><code>@font-face</code></a>
2208 rules define a set of fonts available for use within the documents that
2209 contain these rules. When font matching is done, fonts defined using these
2210 rules are considered before other available fonts on a system.
2212 <p>Downloaded fonts are only available to documents that reference them.
2213 The process of activating these fonts must not make them available to
2214 other applications or to documents that don't directly link to the same
2215 font. User agent implementers might consider it convenient to use
2216 downloaded fonts when rendering characters in other documents for which no
2217 other available font exists as part of the system font fallback procedure.
2218 However, this would cause a security leak since the contents of one page
2219 would be able to affect other pages, something an attacker could use as an
2220 attack vector. These restrictions do not affect caching behavior, fonts
2221 are cached the same way other web resources are cached.
2223 <p>This at-rule follows the forward-compatible parsing rules of CSS. Like
2224 properties in a declaration block, declarations of any descriptors that
2225 are not supported by the user agent must be ignored. <a
2226 href="#at-font-face-rule"><code>@font-face</code></a> rules require a
2227 font-family and src descriptor; if either of these are missing, the <a
2228 href="#at-font-face-rule"><code>@font-face</code></a> rule is invalid and
2229 must be ignored entirely.
2231 <p>In cases where user agents have limited platform resources or implement
2232 the ability to disable downloadable font resources, <a
2233 href="#at-font-face-rule"><code>@font-face</code></a> rules must simply be
2234 ignored; the behavior of individual descriptors as defined in this
2235 specification should not be altered.
2237 <h3 id=font-family-desc><span class=secno>4.2 </span>Font family: the <a
2238 href="#descdef-font-family">font-family</a> descriptor</h3>
2240 <table class=descdef>
2241 <tbody>
2242 <tr>
2243 <td>Name:
2245 <td><dfn id=descdef-font-family
2246 title="font-family!!descriptor">font-family</dfn>
2248 <tr>
2249 <td>Value:
2251 <td><a href="#family-name-value"><var><family-name></var></a>
2253 <tr>
2254 <td><em>Initial:</em>
2256 <td>N/A
2257 </table>
2259 <p>This descriptor defines the font family name that will be used in all
2260 CSS font family name matching. It is required for the <a
2261 href="#at-font-face-rule"><code>@font-face</code></a> rule to be valid. It
2262 overrides the font family names contained in the underlying font data. If
2263 the font family name is the same as a font family available in a given
2264 user's environment, it effectively hides the underlying font for documents
2265 that use the stylesheet. This permits a web author to freely choose
2266 font-family names without worrying about conflicts with font family names
2267 present in a given user's environment. Likewise, platform substitutions
2268 for a given font family name must not be used.
2270 <h3 id=src-desc><span class=secno>4.3 </span>Font reference: the <a
2271 href="#descdef-src">src</a> descriptor</h3>
2273 <table class=descdef>
2274 <tbody>
2275 <tr>
2276 <td>Name:
2278 <td><dfn id=descdef-src>src</dfn>
2280 <tr>
2281 <td>Value:
2283 <td>[ <url> [format(<string> #)]? | <a
2284 href="#font-face-name-value"><var><font-face-name></var></a> ] #
2286 <tr>
2287 <td><em>Initial:</em>
2289 <td>N/A
2290 </table>
2292 <p>This descriptor specifies the resource containing font data. It is
2293 required for the <a href="#at-font-face-rule"><code>@font-face</code></a>
2294 rule to be valid. Its value is a prioritized, comma-separated list of
2295 external references or locally-installed font face names. When a font is
2296 needed the user agent iterates over the set of references listed, using
2297 the first one it can successfully activate. Fonts containing invalid data
2298 or local font faces that are not found are ignored and the user agent
2299 loads the next font in the list.
2301 <p>As with other URLs in CSS, the URL may be relative, in which case it is
2302 resolved relative to the location of the style sheet containing the <a
2303 href="#at-font-face-rule"><code>@font-face</code></a> rule. In the case of
2304 SVG fonts, the URL points to an element within a document containing SVG
2305 font definitions. If the element reference is omitted, a reference to the
2306 first defined font is implied. Similarly, font container formats that can
2307 contain more than one font must load one and only one of the fonts for a
2308 given <a href="#at-font-face-rule"><code>@font-face</code></a> rule.
2309 Fragment identifiers are used to indicate which font to load. If a
2310 container format lacks a defined fragment identifier scheme,
2311 implementations should use a simple 1-based indexing scheme (e.g.
2312 "font-collection#1" for the first font, "font-collection#2" for the second
2313 font).
2315 <pre>
2316 src: url(fonts/simple.ttf); /* load simple.ttf relative to stylesheet location */
2317 src: url(/fonts/simple.ttf); /* load simple.ttf from absolute location */
2318 src: url(fonts.svg#simple); /* load SVG font with id 'simple' */
2319 </pre>
2321 <p>External references consist of a URL, followed by an optional hint
2322 describing the format of the font resource referenced by that URL. The
2323 format hint contains a comma-separated list of format strings that denote
2324 well-known font formats. Conformant user agents must skip downloading a
2325 font resource if the format hints indicate only unsupported or unknown
2326 font formats. If no format hints are supplied, the user agent should
2327 download the font resource.
2329 <pre>
2330 /* load WOFF font if possible, otherwise use OpenType font */
2331 @font-face {
2332 font-family: bodytext;
2333 src: url(ideal-sans-serif.woff) format("woff"),
2334 url(basic-sans-serif.ttf) format("opentype");
2335 }
2336 </pre>
2338 <p>Format strings defined by this specification:
2340 <table class=data id=fontformats>
2341 <thead>
2342 <tr>
2343 <th>String
2345 <th>Font Format
2347 <th>Common extensions
2349 <tbody>
2350 <tr>
2351 <th>"woff"
2353 <td><a href="http://www.w3.org/TR/WOFF/">WOFF (Web Open Font Format)</a>
2355 <td>.woff
2357 <tr>
2358 <th>"truetype"
2360 <td><a
2361 href="http://www.microsoft.com/typography/otspec/default.htm">TrueType</a>
2363 <td>.ttf
2365 <tr>
2366 <th>"opentype"
2368 <td><a
2369 href="http://www.microsoft.com/typography/otspec/default.htm">OpenType</a>
2371 <td>.ttf, .otf
2373 <tr>
2374 <th>"embedded-opentype"
2376 <td><a
2377 href="http://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded
2378 OpenType</a>
2380 <td>.eot
2382 <tr>
2383 <th>"svg"
2385 <td><a href="http://www.w3.org/TR/SVG/fonts.html">SVG Font</a>
2387 <td>.svg, .svgz
2388 </table>
2390 <p>Given the overlap in common usage between TrueType and OpenType, the
2391 format hints "truetype" and "opentype" must be considered as synonymous; a
2392 format hint of "opentype" does not imply that the font contains Postscript
2393 CFF style glyph data or that it contains OpenType layout information (see
2394 <a href="#platform-props-to-css">Appendix A</a> for more background on
2395 this).
2397 <p>When authors would prefer to use a locally available copy of a given
2398 font and download it if it's not, <code>local()</code> can be used. The
2399 locally-installed <dfn
2400 id=font-face-name-value><var><font-face-name></var></dfn> argument
2401 to <code>local()</code> is a format-specific string that uniquely
2402 identifies a single font face within a larger family. The syntax for a <a
2403 href="#font-face-name-value"><var><font-face-name></var></a> is a
2404 unique font face name enclosed by "local(" and ")". The name can
2405 optionally be enclosed in quotes. If unquoted, the unquoted font family
2406 name processing conventions apply; the name must be a sequence of
2407 identifiers separated by whitespace which is converted to a string by
2408 joining the identifiers together separated by a single space.
2410 <pre>
2411 /* regular face of Gentium */
2412 @font-face {
2413 font-family: MyGentium;
2414 src: local(Gentium), /* use locally available Gentium */
2415 url(Gentium.ttf); /* otherwise, download it */
2416 }
2417 </pre>
2419 <p>For OpenType and TrueType fonts, this string is used to match only the
2420 Postscript name or the full font name in the name table of locally
2421 available fonts. Which type of name is used varies by platform and font,
2422 so authors should include both of these names to assure proper matching
2423 across platforms. Platform substitutions for a given font name must not be
2424 used.
2426 <pre>
2427 /* bold face of Gentium */
2428 @font-face {
2429 font-family: MyGentium;
2430 src: local(Gentium Bold), /* full font name */
2431 local(Gentium-Bold), /* Postscript name */
2432 url(GentiumBold.ttf); /* otherwise, download it */
2433 font-weight: bold;
2434 }
2435 </pre>
2437 <p>Just as a <a href="#at-font-face-rule"><code>@font-face</code></a> rule
2438 specifies the characteristics of a single font within a family, the unique
2439 name used with <code>local()</code> specifies a single font, not an entire
2440 font family. Defined in terms of OpenType font data, the Postscript name
2441 is found in the font's <a
2442 href="http://www.microsoft.com/typography/otspec/name.htm">name table</a>,
2443 in the name record with nameID = 6 (see <a href="#OPENTYPE"
2444 rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> for more details). The
2445 Postscript name is the commonly used key for all fonts on OSX and for
2446 Postscript CFF fonts under Windows. The full font name (nameID = 4) is
2447 used as a unique key for fonts with TrueType glyphs on Windows.
2449 <p>For OpenType fonts with multiple localizations of the full font name,
2450 the US English version is used (language ID = 0x409 for Windows and
2451 language ID = 0 for Macintosh) or the first localization when a US English
2452 full font name is not available (the OpenType specification recommends
2453 that <a href="http://www.microsoft.com/typography/otspec/recom.htm">all
2454 fonts minimally include US English names</a>). User agents that also match
2455 other full font names, e.g. matching the Dutch name when the current
2456 system locale is set to Dutch, are considered non-conformant. This is done
2457 not to prefer English but to avoid matching inconsistencies across font
2458 versions and OS localizations, since font style names (e.g. "Bold") are
2459 frequently localized into many languages and the set of localizations
2460 available varies widely across platform and font version. User agents that
2461 match a concatenation of family name (nameID = 1) with style name (nameID
2462 = 2) are considered non-conformant.
2464 <p>This also allows for referencing faces that belong to larger families
2465 that cannot otherwise be referenced.
2467 <div class=example>
2468 <p>Use a local font or reference an SVG font in another document:</p>
2470 <pre>
2471 @font-face {
2472 font-family: Headline;
2473 src: local(Futura-Medium),
2474 url(fonts.svg#MyGeometricModern) format("svg");
2475 }
2476 </pre>
2478 <p>Create an alias for local Japanese fonts on different platforms:</p>
2480 <pre>
2481 @font-face {
2482 font-family: jpgothic;
2483 src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic);
2484 }
2485 </pre>
2487 <p>Reference a font face that cannot be matched within a larger family:</p>
2489 <pre>
2490 @font-face {
2491 font-family: Hoefler Text Ornaments;
2492 /* has the same font properties as Hoefler Text Regular */
2493 src: local(HoeflerText-Ornaments);
2494 }
2495 </pre>
2497 <p>Since localized fullnames never match, a document with the header style
2498 rules below would always render using the default serif font, regardless
2499 whether a particular system locale parameter is set to Finnish or not:</p>
2501 <pre>
2502 @font-face {
2503 font-family: SectionHeader;
2504 src: local("Arial Lihavoitu"); /* Finnish fullname for Arial Bold, should fail */
2505 font-weight: bold;
2506 }
2508 h2 { font-family: SectionHeader, serif; }
2509 </pre>
2511 <p>A conformant user agent would never load the font ‘<code
2512 class=css>gentium.eot</code>’ in the example below, since it is
2513 included in the first definition of the ‘<a href="#descdef-src"><code
2514 class=property>src</code></a>’ descriptor which is overridden by the
2515 second definition in the same <a
2516 href="#at-font-face-rule"><code>@font-face</code></a> rule:</p>
2518 <pre>
2519 @font-face {
2520 font-family: MainText;
2521 src: url(gentium.eot); /* for use with older non-conformant user agents */
2522 src: local("Gentium"), url(gentium.ttf); /* Overrides src definition */
2523 }
2524 </pre>
2525 </div>
2527 <h3 id=font-prop-desc><span class=secno>4.4 </span>Font property
2528 descriptors: the <a href="#descdef-font-style">font-style</a>, <a
2529 href="#descdef-font-weight">font-weight</a>, <a
2530 href="#descdef-font-stretch">font-stretch</a> descriptors</h3>
2532 <table class=descdef>
2533 <tbody>
2534 <tr>
2535 <td>Name:
2537 <td><dfn id=descdef-font-style
2538 title="font-style!!descriptor">font-style</dfn>
2540 <tr>
2541 <td>Value:
2543 <td>normal | italic | oblique
2545 <tr>
2546 <td><em>Initial:</em>
2548 <td>normal
2549 </table>
2551 <table class=descdef>
2552 <tbody>
2553 <tr>
2554 <td>Name:
2556 <td><dfn id=descdef-font-weight
2557 title="font-weight!!descriptor">font-weight</dfn>
2559 <tr>
2560 <td>Value:
2562 <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
2564 <tr>
2565 <td><em>Initial:</em>
2567 <td>normal
2568 </table>
2570 <table class=descdef>
2571 <tbody>
2572 <tr>
2573 <td>Name:
2575 <td><dfn id=descdef-font-stretch
2576 title="font-stretch!!descriptor">font-stretch</dfn>
2578 <tr>
2579 <td>Value:
2581 <td>normal | ultra-condensed | extra-condensed | condensed |
2582 semi-condensed | semi-expanded | expanded | extra-expanded |
2583 ultra-expanded
2585 <tr>
2586 <td><em>Initial:</em>
2588 <td>normal
2589 </table>
2591 <p>These descriptors define the characteristics of a font face and are used
2592 in the process of matching styles to specific faces. For a font family
2593 defined with several <a
2594 href="#at-font-face-rule"><code>@font-face</code></a> rules, user agents
2595 can either download all faces in the family or use these descriptors to
2596 selectively download font faces that match actual styles used in document.
2597 The values for these descriptors are the same as those for the
2598 corresponding font properties except that relative keywords are not
2599 allowed, ‘<a href="#bolder"><code class=property>bolder</code></a>’
2600 and ‘<a href="#lighter"><code class=property>lighter</code></a>’. If
2601 these descriptors are omitted, initial values are assumed.
2603 <p>The value for these font face style attributes is used in place of the
2604 style implied by the underlying font data. This allows authors to combine
2605 faces in flexible combinations, even in situations where the original font
2606 data was arranged differently. User agents that implement synthetic
2607 bolding and obliquing must only apply synthetic styling in cases where the
2608 font descriptors imply this is needed, rather than based on the style
2609 attributes implied by the font data.
2611 <h3 id=unicode-range-desc><span class=secno>4.5 </span>Character range: the
2612 <a href="#descdef-unicode-range">unicode-range</a> descriptor</h3>
2614 <table class=descdef>
2615 <tbody>
2616 <tr>
2617 <td>Name:
2619 <td><dfn id=descdef-unicode-range>unicode-range</dfn>
2621 <tr>
2622 <td>Value:
2624 <td><a href="#urange-value"><var><urange></var></a> #
2626 <tr>
2627 <td><em>Initial:</em>
2629 <td>U+0-10FFFF
2630 </table>
2632 <p>This descriptor defines the set of Unicode codepoints that may be
2633 supported by the font face for which it is declared. The descriptor value
2634 is a comma-delimited list of Unicode range (<a
2635 href="#urange-value"><var><urange></var></a>) values. The union of
2636 these ranges defines the set of codepoints that serves as a hint for user
2637 agents when deciding whether or not to download a font resource for a
2638 given text run.
2640 <p>Each <dfn id=urange-value><var><urange></var></dfn> value is a <a
2641 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code
2642 title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token made up of a
2643 "U+" or "u+" prefix followed by a codepoint range in one of the three
2644 forms listed below. Ranges that do not fit one of the these forms are
2645 invalid and cause the declaration to be ignored.
2647 <dl>
2648 <dt>single codepoint (e.g. U+416)
2650 <dd>a valid Unicode codepoint, represented as one to six hexadecimal
2651 digits
2653 <dt>interval range (e.g. U+400-4ff)
2655 <dd>represented as two hyphen-separated valid Unicode codepoints
2656 indicating the inclusive start and end codepoints of a range
2658 <dt>wildcard range (e.g. U+4??)
2660 <dd>defined by the set of codepoints implied when trailing ‘<code
2661 class=css>?</code>’ characters signify any hexadeximal digit
2662 </dl>
2664 <p>Individual codepoints are written using hexadecimal values that
2665 correspond to <a href="http://www.unicode.org/charts/">Unicode character
2666 codepoints</a>. Valid Unicode codepoint values vary between 0 and 10FFFF
2667 inclusive. Digit values of codepoints are ASCII case-insensitive. For
2668 interval ranges, the start and end codepoints are valid Unicode values and
2669 the end codepoint is greater than or equal to the start codepoint.
2671 <p>Wildcard ranges specified with ‘?’ that lack an initial digit (e.g.
2672 "U+???") are valid and equivalent to a wildcard range with an initial zero
2673 digit (e.g. "U+0???" = "U+0000-0FFF"). Wildcard ranges that extend beyond
2674 the range of valid Unicode codepoints are invalid. Because of this, the
2675 maximum number of trailing ‘<code class=css>?</code>’ wildcard
2676 characters is five, even though the <a
2677 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code
2678 title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token accepts six.
2680 <p>Within the comma-delimited list of Unicode ranges in a ‘<a
2681 href="#descdef-unicode-range"><code
2682 class=property>unicode-range</code></a>’ descriptor declaration, ranges
2683 may overlap. The union of these ranges defines the set of codepoints for
2684 which the corresponding font may be used. User agents must not download or
2685 use the font for codepoints outside this set. User agents may normalize
2686 the list of ranges into a list that is different but represents the same
2687 set of codepoints.
2689 <p>The associated font might not contain glyphs for the entire set of
2690 codepoints defined by the ‘<a href="#descdef-unicode-range"><code
2691 class=property>unicode-range</code></a>’ descriptor. When the font is
2692 used the effective <a href="#character-map"><em>character map</em></a> is
2693 the intersection of the codepoints defined by ‘<a
2694 href="#descdef-unicode-range"><code
2695 class=property>unicode-range</code></a>’ with the font's <a
2696 href="#character-map"><em>character map</em></a>. This allows authors to
2697 define supported ranges in terms of broad ranges without worrying about
2698 the precise codepoint ranges supported by the underlying font.
2700 <h3 id=composite-fonts><span class=secno>4.6 </span>Using character ranges
2701 to define composite fonts</h3>
2703 <p>Multiple <a href="#at-font-face-rule"><code>@font-face</code></a> rules
2704 with different unicode ranges for the same family and style descriptor
2705 values can be used to create composite fonts that mix the glyphs from
2706 different fonts for different scripts. This can be used to combine fonts
2707 that only contain glyphs for a single script (e.g. Latin, Greek, Cyrillic)
2708 or it can be used by authors as a way of segmenting a font into fonts for
2709 commonly used characters and less frequently used characters. Since the
2710 user agent will only pull down the fonts it needs this helps reduce page
2711 bandwidth.
2713 <p>If the unicode ranges overlap for a set of <a
2714 href="#at-font-face-rule"><code>@font-face</code></a> rules with the same
2715 family and style descriptor values, the rules are ordered in the reverse
2716 order they were defined; the last rule defined is the first to be checked
2717 for a given character.
2719 <p>Example ranges for specific languages or characters:
2721 <dl>
2722 <dt>unicode-range: U+A5;
2724 <dd>a single code point, the yen/yuan symbol
2726 <dt>unicode-range: U+0-7F;
2728 <dd>code range for basic ASCII characters
2730 <dt>unicode-range: U+590-5ff;
2732 <dd>code range for Hebrew characters
2734 <dt>unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;
2736 <dd>code range for Japanese kanji, hiragana and katakana characters plus
2737 yen/yuan symbol
2738 </dl>
2740 <div class=example>
2741 <p>The BBC provides news services in a wide variety of languages, many
2742 that are not well supported across all platforms. Using an <a
2743 href="#at-font-face-rule"><code>@font-face</code></a> rule, the BBC could
2744 provide a font for any of these languages, as it already does via a
2745 manual font download.</p>
2747 <pre>
2748 @font-face {
2749 font-family: BBCBengali;
2750 src: url(fonts/BBCBengali.ttf) format("opentype");
2751 unicode-range: U+00-FF, U+980-9FF;
2752 }
2753 </pre>
2754 </div>
2756 <div class=example>
2757 <p>Technical documents often require a wide range of symbols. The STIX
2758 Fonts project is one project aimed at providing fonts to support a wide
2759 range of technical typesetting in a standardized way. The example below
2760 shows the use of a font that provides glyphs for many of the mathematical
2761 and technical symbol ranges within Unicode:</p>
2763 <pre>
2764 @font-face {
2765 font-family: STIXGeneral;
2766 src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
2767 unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
2768 }
2769 </pre>
2770 </div>
2772 <div class=example>
2773 <p>This example shows how an author can override the glyphs used for Latin
2774 characters in a Japanese font with glyphs from a different font. The
2775 first rule specifies no range so it defaults to the entire range. The
2776 range specified in the second rule overlaps but takes precedence because
2777 it is defined later.</p>
2779 <pre>
2780 @font-face {
2781 font-family: JapaneseWithGentium;
2782 src: local(MSMincho);
2783 /* no range specified, defaults to entire range */
2784 }
2786 @font-face {
2787 font-family: JapaneseWithGentium;
2788 src: url(../fonts/Gentium.ttf);
2789 unicode-range: U+0-2FF;
2790 }
2791 </pre>
2792 </div>
2794 <div class=example>
2795 <p>Consider a family constructed to optimize bandwidth by separating out
2796 Latin, Japanese and other characters into different font files:</p>
2798 <pre>
2799 /* fallback font - size: 4.5MB */
2800 @font-face {
2801 font-family: DroidSans;
2802 src: url(DroidSansFallback.ttf);
2803 /* no range specified, defaults to entire range */
2804 }
2806 /* Japanese glyphs - size: 1.2MB */
2807 @font-face {
2808 font-family: DroidSans;
2809 src: url(DroidSansJapanese.ttf);
2810 unicode-range: U+3000-9FFF, U+ff??;
2811 }
2813 /* Latin, Greek, Cyrillic along with some
2814 punctuation and symbols - size: 190KB */
2815 @font-face {
2816 font-family: DroidSans;
2817 src: url(DroidSans.ttf);
2818 unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
2819 }
2820 </pre>
2822 <p>For simple Latin text, only the font for Latin characters is
2823 downloaded:</p>
2825 <pre>
2826 body { font-family: DroidSans; }
2828 <p>This is that</p>
2829 </pre>
2831 <p>In this case the user agent first checks the unicode-range for the font
2832 containing Latin characters (DroidSans.ttf). Since all the characters
2833 above are in the range U+0-5FF, the user agent downloads the font and
2834 renders the text with that font.</p>
2836 <p>Next, consider text that makes use of an arrow character (⇨):</p>
2838 <pre>
2839 <p>This &#x21e8; that<p>
2840 </pre>
2842 <p>The user agent again first checks the unicode-range of the font
2843 containing Latin characters. Since U+2000-2300 includes the arrow code
2844 point (U+21E8), the user agent downloads the font. For this character
2845 however the Latin font does not have a matching glyph, so the effective
2846 unicode-range used for font matching excludes this code point. Next, the
2847 user agent evaluates the Japanese font. The unicode-range for the
2848 Japanese font, U+3000-9FFF and U+ff??, does not include U+21E8, so the
2849 user agent does not download the Japanese font. Next the fallback font is
2850 considered. The <a href="#at-font-face-rule"><code>@font-face</code></a>
2851 rule for the fallback font does not define unicode-range so its value
2852 defaults to the range of all Unicode code points. The fallback font is
2853 downloaded and used to render the arrow character.</p>
2854 </div>
2856 <h3 id=font-rend-desc><span class=secno>4.7 </span>Font features: the <a
2857 href="#descdef-font-variant">font-variant</a> and <a
2858 href="#descdef-font-feature-settings">font-feature-settings</a>
2859 descriptors</h3>
2861 <table class=descdef>
2862 <tbody>
2863 <tr>
2864 <td>Name:
2866 <td><dfn id=descdef-font-variant
2867 title="font-variant!!descriptor">font-variant</dfn>
2869 <tr>
2870 <td>Value:
2872 <td><a href="#font-variant-normal-value"
2873 title="normal!!font-variant">normal</a> | <a
2874 href="#font-variant-none-value" title="none!!font-variant">none</a> | [
2875 <a href="#common-lig-values"><var><common-lig-values></var></a>
2876 || <a
2877 href="#discretionary-lig-values"><var><discretionary-lig-values></var></a>
2878 || <a
2879 href="#historical-lig-values"><var><historical-lig-values></var></a>
2880 || <a
2881 href="#contextual-alt-values"><var><contextual-alt-values></var></a>
2882 || <a href="#stylistic"><var
2883 title=stylistic>stylistic(<feature-value-name>)</var></a> || <a
2884 href="#historical-forms"><var>historical-forms</var></a> || <a
2885 href="#styleset"><var
2886 title=styleset>styleset(<feature-value-name> #)</var></a> || <a
2887 href="#character-variant"><var
2888 title=character-variant>character-variant(<feature-value-name>
2889 #)</var></a> || <a href="#swash"><var
2890 title=swash>swash(<feature-value-name>)</var></a> || <a
2891 href="#ornaments"><var
2892 title=ornaments>ornaments(<feature-value-name>)</var></a> || <a
2893 href="#annotation"><var
2894 title=annotation>annotation(<feature-value-name>)</var></a> || [
2895 <a href="#small-caps"><i>small-caps</i></a> | <a
2896 href="#all-small-caps"><i>all-small-caps</i></a> | <a
2897 href="#petite-caps"><i>petite-caps</i></a> | <a
2898 href="#all-petite-caps"><i>all-petite-caps</i></a> | <a
2899 href="#unicase"><i>unicase</i></a> | <a
2900 href="#titling-caps"><i>titling-caps</i></a> ] || <a
2901 href="#numeric-figure-values"><var><numeric-figure-values></var></a>
2902 || <a
2903 href="#numeric-spacing-values"><var><numeric-spacing-values></var></a>
2904 || <a
2905 href="#numeric-fraction-values"><var><numeric-fraction-values></var></a>
2906 || <a href="#ordinal"><i>ordinal</i></a> || <a
2907 href="#slashed-zero"><i>slashed-zero</i></a> || <a
2908 href="#east-asian-variant-values"><var><east-asian-variant-values></var></a>
2909 || <a
2910 href="#east-asian-width-values"><var><east-asian-width-values></var></a>
2911 || <a href="#ruby"><i>ruby</i></a> ]
2913 <tr>
2914 <td><em>Initial:</em>
2916 <td>normal
2917 </table>
2919 <table class=descdef>
2920 <tbody>
2921 <tr>
2922 <td>Name:
2924 <td><dfn id=descdef-font-feature-settings
2925 title="font-feature-settings!!descriptor">font-feature-settings</dfn>
2927 <tr>
2928 <td>Value:
2930 <td><a href="#font-feature-settings-normal-value"
2931 title="normal!!font-feature-settings">normal</a> | <a
2932 href="#feature-tag-value"><var><feature-tag-value></var></a> #
2934 <tr>
2935 <td><em>Initial:</em>
2937 <td>normal
2938 </table>
2940 <p>These descriptors define initial settings that apply when the font
2941 defined by an <a href="#at-font-face-rule"><code>@font-face</code></a>
2942 rule is rendered. They do not affect font selection. Values are identical
2943 to those defined for the corresponding <a href="#propdef-font-variant"
2944 title="font-variant!!property">‘<code
2945 class=property>font-variant</code>’</a> and <a
2946 href="#propdef-font-feature-settings"
2947 title="font-feature-settings!!property">‘<code
2948 class=property>font-feature-settings</code>’</a> properties defined
2949 below except that the value ‘<code class=property>inherit</code>’ is
2950 omitted. When multiple font feature descriptors or properties are used,
2951 the cumulative effect on text rendering is detailed in the section <a
2952 href="#font-feature-resolution">Font Feature Resolution</a> below. In
2953 cases where specific values define synthesized fallback for certain <a
2954 href="#propdef-font-variant" title="font-variant!!property">‘<code
2955 class=property>font-variant</code>’</a> subproperties, the same
2956 synthesized fallback applies when used within those values are used with
2957 the <a href="#descdef-font-style" title="font-style!!descriptor">‘<code
2958 class=property>font-variant</code>’</a> descriptor.
2960 <h3 id=font-face-loading><span class=secno>4.8 </span>Font loading
2961 guidelines</h3>
2963 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule is
2964 designed to allow lazy loading of font resources that are only downloaded
2965 when used within a document. A stylesheet can include <a
2966 href="#at-font-face-rule"><code>@font-face</code></a> rules for a library
2967 of fonts of which only a select set are used; user agents must only
2968 download those fonts that are referred to within the style rules
2969 applicable to a given page. User agents that download all fonts defined in
2970 <a href="#at-font-face-rule"><code>@font-face</code></a> rules without
2971 considering whether those fonts are in fact used within a page are
2972 considered non-conformant. In cases where a font might be downloaded in
2973 character fallback cases, user agents may download a font if it's
2974 contained within the computed value of <a href="#propdef-font-family"
2975 title="font-family!!property">‘<code
2976 class=property>font-family</code>’</a> for a given text run.
2978 <pre>
2979 @font-face {
2980 font-family: GeometricModern;
2981 src: url(font.ttf);
2982 }
2984 p {
2985 /* font will be downloaded for pages with p elements */
2986 font-family: GeometricModern, sans-serif;
2987 }
2989 h2 {
2990 /* font may be downloaded for pages with h2 elements, even if Futura is available locally */
2991 font-family: Futura, GeometricModern, sans-serif;
2992 }
2993 </pre>
2995 <p>In cases where textual content is loaded before downloadable fonts are
2996 available, user agents may render text as it would be rendered if
2997 downloadable font resources are not available or they may render text
2998 transparently with fallback fonts to avoid a flash of text using a
2999 fallback font. In cases where the font download fails user agents must
3000 display text, simply leaving transparent text is considered non-conformant
3001 behavior. Authors are advised to use fallback fonts in their font lists
3002 that closely match the vertical metrics of the downloadable fonts to avoid
3003 large page reflows where possible.
3005 <h3 id=same-origin-restriction><span class=secno>4.9 </span>Same-origin
3006 restriction for fonts</h3>
3008 <h4 id=default-same-origin-restriction><span class=secno>4.9.1
3009 </span>Default same-origin restriction</h4>
3010 <!-- TPAC 2011 Resolution to require same-origin restriction for loading fonts:
3011 http://lists.w3.org/Archives/Public/www-style/2011Nov/0711.html
3012 http://www.w3.org/2011/10/31-webapps-minutes.html#item02
3013 -->
3015 <p>User agents must implement a same-origin restriction when loading fonts
3016 via the <a href="#at-font-face-rule"><code>@font-face</code></a>
3017 mechanism. This restriction limits the loading of fonts for a given
3018 document to fonts loaded from the same origin. Fonts can only be loaded
3019 via the same host, port, and method combination as the containing
3020 document, using the <a
3021 href="http://www.w3.org/TR/html5/browsers.html#origin">origin matching
3022 algorithm</a> described in the <a href="#HTML5"
3023 rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> specification. The origin of
3024 the stylesheet containing <a
3025 href="#at-font-face-rule"><code>@font-face</code></a> rules is not used
3026 when deciding whether a font is same origin or not, only the origin of the
3027 containing document is used. The restriction applies to all font types.
3029 <p>Given a document located at http://example.com/page.html, fonts defined
3030 with ‘<a href="#descdef-src"><code class=property>src</code></a>’
3031 definitions considered cross origin must not be loaded:
3033 <pre>
3034 /* same origin (i.e. domain, protocol, port match document) */
3035 src: url(fonts/simple.ttf);
3036 src: url(//fonts/simple.ttf);
3038 /* cross origin, different protocol */
3039 src: url(https://example.com/fonts/simple.ttf);
3041 /* cross origin, different domain */
3042 src: url(http://another.example.com/fonts/simple.ttf);
3043 </pre>
3045 <h4 id=allowing-cross-origin-font-loading><span class=secno>4.9.2
3046 </span>Allowing cross-origin font loading</h4>
3048 <p>User agents must also implement the ability to relax this restriction
3049 using cross-site origin controls <a href="#CORS"
3050 rel=biblioentry>[CORS]<!--{{!CORS}}--></a> for fonts loaded via HTTP.
3051 Sites can explicitly allow cross-site downloading of font data using the
3052 <code>Access-Control-Allow-Origin</code> HTTP header. For other protocols,
3053 no explicit relaxation mechanism is defined or required.
3055 <p>For font loads over HTTP, cross-origin requests must be made with the
3056 following parameter settings which are used in conjunction with the <a
3057 href="http://www.w3.org/TR/cors/#cross-origin-request-0"> <em>cross-origin
3058 request algorithm</em></a> <a href="#CORS"
3059 rel=biblioentry>[CORS]<!--{{!CORS}}--></a>:
3061 <ul>
3062 <li><em>request URL</em> — the URL of the font resource in the <a
3063 href="#descdef-src"><code>src</code></a> descriptor
3065 <li><em>request method</em> — GET
3067 <li><em>author request headers</em> — none
3069 <li><em>request entity body</em> — empty
3071 <li><em>source origin</em> — the origin of the page which linked to the
3072 stylesheet
3074 <li><em>manual redirect flag</em> — false
3076 <li><em>omit credentials flag</em> — true
3078 <li><em>force preflight flag</em> — false
3079 </ul>
3081 <h2 id=font-matching-algorithm><span class=secno>5 </span>Font Matching
3082 Algorithm</h2>
3084 <p>The algorithm below describes how fonts are associated with individual
3085 runs of text. For each character in the run a font family is chosen and a
3086 particular font face is selected containing a glyph for that character.
3088 <h3 id=font-family-casing><span class=secno>5.1 </span>Case sensitivity of
3089 font family names</h3>
3091 <p>As part of the font matching algorithm outlined below, user agents must
3092 match font family names used in style rules with actual font family names
3093 contained in fonts available in a given environment or defined via <a
3094 href="#at-font-face-rule"><code>@font-face</code></a> rules. User agents
3095 must match these names case insensitively, using the "Default Caseless
3096 Matching" algorithm outlined in the Unicode specification <a
3097 href="#UNICODE6" rel=biblioentry>[UNICODE6]<!--{{!UNICODE6}}--></a>. This
3098 algorithm is detailed in section 3.13 entitled "Default Case Algorithms".
3099 Specifically, the algorithm must be applied without normalizing the
3100 strings involved and without applying any language-specific tailorings.
3101 The case folding method specified by this algorithm uses the case mappings
3102 with status field ‘<code class=property>C</code>’ or ‘<code
3103 class=property>F</code>’ in the CaseFolding.txt file of the Unicode
3104 Character Database.
3106 <p class=note> Implementors should take care to verify that a given
3107 caseless string comparison implementation uses this precise algorithm and
3108 not assume that a given platform string matching routine follows it, as
3109 many of these have locale-specific behavior or use some level of string
3110 normalization.
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 <h3 id=font-style-matching><span class=secno>5.2 </span>Matching font
3124 styles</h3>
3126 <p>The procedure for choosing fonts consists of iterating over the font
3127 families determined by the font-family property, selecting a font face
3128 with the appropriate style based on other font properties and then
3129 determining whether a glyph exists for a given character. This is done
3130 using the <dfn id=character-map>character map</dfn> of the font, data
3131 which maps characters to the default glyph for that character. Codepoint
3132 sequences consisting of a base character followed by a sequence of
3133 combining characters are treated slightly differently, see the section on
3134 <a href="#cluster-matching">cluster matching</a> below.
3136 <p>For this procedure, the <dfn id=default-face>default face</dfn> for a
3137 given font family is defined to be the face that would be selected if all
3138 font style properties were set to their initial value.
3140 <ol id=fontmatchingalg>
3141 <li>Using the computed font property values for a given element, the user
3142 agent starts with the first family name in the fontlist specified by the
3143 <a href="#propdef-font-family" title="font-family!!property">‘<code
3144 class=property>font-family</code>’</a> property.
3146 <li>If the family name is unquoted and is a generic family name, the user
3147 agent looks up the appropriate font family name to be used. User agents
3148 may choose the generic font family to use based on the language of the
3149 containing element or the Unicode range of the character.
3151 <li>For other family names, the user agent attempts to find the family
3152 name among fonts defined via <a
3153 href="#at-font-face-rule"><code>@font-face</code></a> rules and then
3154 among available system fonts, matching names with a case-insensitive
3155 comparison as outlined <a href="#font-family-casing">in the section
3156 above</a>. On systems containing fonts with multiple localized font
3157 family names, user agents must match any of these names independent of
3158 the underlying system locale or platform API used. If the font resources
3159 defined for a given face in an <a
3160 href="#at-font-face-rule"><code>@font-face</code></a> rule are either not
3161 available or contain invalid font data, then the face should be treated
3162 as not present in the family. If no faces are present for a family
3163 defined via <a href="#at-font-face-rule"><code>@font-face</code></a>
3164 rules, the family should be treated as missing; matching a platform font
3165 with the same name must not occur in this case.
3167 <li>If a font family match occurs, the user agent assembles the set of
3168 font faces in that family and then narrows the set to a single face using
3169 other font properties in the order given below:
3170 <ol id=fontstylematchingalg>
3171 <li><a href="#propdef-font-stretch"
3172 title="font-stretch!!property">‘<code
3173 class=property>font-stretch</code>’</a> is tried first. If the
3174 matching set contains faces with width values matching the <a
3175 href="#propdef-font-stretch" title="font-stretch!!property">‘<code
3176 class=property>font-stretch</code>’</a> value, faces with other width
3177 values are removed from the matching set. If there is no face that
3178 exactly matches the width value the nearest width is used instead. If
3179 the value of <a href="#propdef-font-stretch"
3180 title="font-stretch!!property">‘<code
3181 class=property>font-stretch</code>’</a> is ‘<a href="#normal"><code
3182 class=property>normal</code></a>’ or one of the condensed values,
3183 narrower width values are checked first, then wider values. If the
3184 value of <a href="#propdef-font-stretch"
3185 title="font-stretch!!property">‘<code
3186 class=property>font-stretch</code>’</a> is one of the expanded
3187 values, wider values are checked first, followed by narrower values.
3188 Once the closest matching width has been determined by this process,
3189 faces with other widths are removed from the matching set.
3191 <li><a href="#propdef-font-style" title="font-style!!property">‘<code
3192 class=property>font-style</code>’</a> is tried next. If the value of
3193 <a href="#propdef-font-style" title="font-style!!property">‘<code
3194 class=property>font-style</code>’</a> is ‘<a href="#italic"><code
3195 class=property>italic</code></a>’, italic faces are checked first,
3196 then oblique, then normal faces. If the value is ‘<a
3197 href="#oblique"><code class=property>oblique</code></a>’, oblique
3198 faces are checked first, then italic faces and then normal faces. If
3199 the value is ‘<a href="#normal"><code
3200 class=property>normal</code></a>’, normal faces are checked first,
3201 then oblique faces, then italic faces. Faces with other style values
3202 are excluded from the matching set. User agents are permitted to
3203 distinguish between italic and oblique faces within platform font
3204 families but this is not required, they may treat all italic or oblique
3205 faces as italic faces. However, within font families defined via <a
3206 href="#at-font-face-rule"><code>@font-face</code></a> rules, italic and
3207 oblique faces must be distinguished using the value of the <a
3208 href="#descdef-font-style" title="font-style!!descriptor">‘<code
3209 class=property>font-style</code>’</a> descriptor.
3211 <li><a href="#propdef-font-weight"
3212 title="font-weight!!property">‘<code
3213 class=property>font-weight</code>’</a> is matched next, it will
3214 always reduce the matching set to a single font face. If bolder/lighter
3215 relative weights are used, the effective weight is calculated based on
3216 the inherited weight value, as described in the definition of the <a
3217 href="#propdef-font-weight" title="font-weight!!property">‘<code
3218 class=property>font-weight</code>’</a> property. Given the desired
3219 weight and the weights of faces in the matching set after the steps
3220 above, if the desired weight is available that face matches. Otherwise,
3221 a weight is chosen using the rules below:
3222 <ul>
3223 <li>If the desired weight is less than 400, weights below the desired
3224 weight are checked in descending order followed by weights above the
3225 desired weight in ascending order until a match is found.
3227 <li>If the desired weight is greater than 500, weights above the
3228 desired weight are checked in ascending order followed by weights
3229 below the desired weight in descending order until a match is found.
3231 <li>If the desired weight is 400, 500 is checked first and then the
3232 rule for desired weights less than 400 is used.
3234 <li>If the desired weight is 500, 400 is checked first and then the
3235 rule for desired weights less than 400 is used.
3236 </ul>
3238 <li><span class=property>‘<a href="#propdef-font-size"><code
3239 class=property>font-size</code></a>’</span> must be matched within a
3240 UA-dependent margin of tolerance. (Typically, sizes for scalable fonts
3241 are rounded to the nearest whole pixel, while the tolerance for
3242 bitmapped fonts could be as large as 20%.) Further computations, e.g.,
3243 by ‘<code class=property>em</code>’ values in other properties, are
3244 based on the <span class=property>‘<a href="#propdef-font-size"><code
3245 class=property>font-size</code></a>’</span> value that is used, not
3246 the one that is specified.
3247 </ol>
3249 <li>
3250 <p>If no matching face exists or the matched face does not contain a
3251 glyph for the character to be rendered, the next family name is selected
3252 and the previous two steps repeated. Glyphs from other faces in the
3253 family are not considered. The only exception is that user agents may
3254 optionally substitute a synthetic version of the <a
3255 href="#default-face"><em>default face</em></a> if that face supports a
3256 given glyph (e.g. a synthetic italic version of the regular face may be
3257 used if the italic face doesn't support glyphs for Arabic).</p>
3258 <!-- resolution on the above: http://lists.w3.org/Archives/Public/www-style/2012Nov/0292.html -->
3260 <p>If the matched font is defined via an <a
3261 href="#at-font-face-rule"><code>@font-face</code></a> rule and needs to
3262 be downloaded, the font resource is downloaded. While the download
3263 occurs, the user agent can either wait until the font is downloaded or
3264 render once with substituted font metrics and render again once the font
3265 is downloaded.</p>
3267 <li>If there are no more font families to be evaluated and no matching
3268 face has been found, then the user agent performs a <em>system font
3269 fallback</em> procedure to find the best match for the character to be
3270 rendered. The result of this procedure may vary across user agents.
3272 <li>If a particular character cannot be displayed using any font, the user
3273 agent should indicate by some means that a character is not being
3274 displayed, displaying either a symbolic representation of the missing
3275 glyph (e.g. using a <a
3276 href="http://en.wikipedia.org/wiki/Last_resort_font">Last Resort
3277 Font</a>) or using the missing character glyph from a default font.
3278 </ol>
3280 <h3 id=cluster-matching><span class=secno>5.3 </span>Cluster matching</h3>
3282 <p>When text contains characters such as combining diacritics, ideally the
3283 base character should be rendered using the same font as the diacritic,
3284 this assures proper placement of the diacritic. For this reason, the font
3285 matching algorithm for clusters is more specialized than the general case
3286 of matching a single character by itself. For sequences containing
3287 variation selectors, which indicate the precise glyph to be used for a
3288 given character, user agents always attempt system font fallback to find
3289 the appropriate glyph before using the default glyph of the base
3290 character.
3292 <p>A font is considered to <em>support</em> a given character if (1) the
3293 character is contained in the font's <a
3294 href="#character-map"><em>character map</em></a> and (2) if required by
3295 the containing script, shaping information is available for that
3296 character. Some legacy fonts may include a given character in the <a
3297 href="#character-map"><em>character map</em></a> but lack the shaping
3298 information (e.g. <a
3299 href="http://www.microsoft.com/typography/otspec/ttochap1.htm">OpenType
3300 layout tables</a> or <a
3301 href="http://scripts.sil.org/cms/scripts/page.php?site_id=projects&item_id=graphite_techAbout">Graphite
3302 tables</a>) necessary for correctly rendering text runs containing that
3303 character.
3305 <p>A sequence of codepoints containing combining diacritics or other
3306 modifiers is termed a grapheme cluster (see <a href="#CSS3TEXT"
3307 rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a> for a more complete
3308 description). For a given cluster containing a base character, <em>b</em>
3309 and a sequence of combining characters <em>c1, c2…</em>, the entire
3310 cluster is matched using these steps:
3312 <ol>
3313 <li>For each family in the font list, a face is chosen using the style
3314 selection rules defined in the previous section.
3315 <ol>
3316 <li>If all characters in the sequence <em>b + c1 + c2 …</em> are
3317 completely supported by the font, select this font for the sequence.
3319 <li>If a sequence of multiple codepoints is canonically equivalent to a
3320 single character and the font supports that character, select this font
3321 for the sequence.
3322 </ol>
3324 <li>If no font was found in the font list in step 1:
3325 <ol>
3326 <li>If <em>c1</em> is a variation selector, system fallback must be used
3327 to find a font that supports the full sequence of <em>b + c1</em>. If
3328 no font on the system supports the full sequence, match the single
3329 character <em>b</em> using the normal procedure for matching single
3330 characters and ignore the variation selector. Note: a sequence with
3331 more than one variation selector is treated as an encoding error and
3332 the trailing selectors are ignored.
3334 <li>Otherwise, the user agent may optionally use system font fallback to
3335 match a font that supports the entire cluster.
3336 </ol>
3338 <li>If no font is found in step 2, use the matching sequence from step 1
3339 to determine the longest sequence that is completely matched by a font in
3340 the font list and attempt to match the remaining combining characters
3341 separately using the rules for single characters.
3342 </ol>
3344 <h3 id=char-handling-issues><span class=secno>5.4 </span>Character handling
3345 issues</h3>
3347 <p>The procedure above is always performed on text runs containing Unicode
3348 characters, documents using legacy encodings are assumed to have been
3349 transcoded before matching fonts. For fonts containing <a
3350 href="#character-map"><em title="character map">character maps</em></a>
3351 for both legacy encodings and Unicode, the contents of the legacy encoding
3352 <a href="#character-map"><em>character map</em></a> must have no effect on
3353 the results of the font matching process.
3355 <p>The font matching process does not assume that text runs are in either
3356 normalized or denormalized form (see <a href="#CHARMOD-NORM"
3357 rel=biblioentry>[CHARMOD-NORM]<!--{{CHARMOD-NORM}}--></a> for more
3358 details). Layout engines often convert base character plus combining
3359 character sequences into precomposed characters if they exist. The font
3360 matching algorithm outlined here supports both ways and fonts can
3361 generally support either but variations can occur. Authors should always
3362 tailor their choice of fonts to their content, including whether that
3363 content contains normalized or denormalized character streams.
3365 <p>If a given character is a Private-Use Area Unicode codepoint and none of
3366 the fonts in the fontlist contain a glyph for that codepoint, user agents
3367 must display some form of missing glyph symbol for that character rather
3368 than attempting system font fallback for that codepoint. When matching the
3369 replacement character U+FFFD, user agents may skip the font matching
3370 process and immediately display some form of missing glyph symbol, they
3371 are not required to display the glyph from the font that would be selected
3372 by the font matching process.
3374 <p>In general, the fonts for a given family will all have the same or
3375 similar <a href="#character-map"><em title="character map">character
3376 maps</em></a>. The process outlined here is designed to handle even font
3377 families containing faces with widely variant <a href="#character-map"><em
3378 title="character map">character maps</em></a>. However, authors are
3379 cautioned that the use of such families can lead to unexpected results.
3381 <p>Optimizations of this process are allowed provided that an
3382 implementation behaves as if the algorithm had been followed exactly.
3383 Matching occurs in a well-defined order to insure that the results are as
3384 consistent as possible across user agents, given an identical set of
3385 available fonts and rendering technology.
3387 <h3 id=font-matching-changes><span class=secno>5.5 </span>Font matching
3388 changes since CSS 2.1</h3>
3390 <p>The algorithm above is different from CSS 2.1 in a number of key places.
3391 These changes were made to better reflect actual font matching behavior
3392 across user agent implementations.
3394 <p>Differences compared to the font matching algorithm in CSS 2.1:
3396 <ul>
3397 <li>The algorithm includes font-stretch matching.
3399 <li>All possible font-style matching scenarios are delineated.
3401 <li>Small-caps fonts are not matched as part of the font matching process,
3402 they are now handled via font features.
3404 <li>Unicode variation selector matching is required.
3406 <li>Cluster sequences are matched as a unit.
3407 </ul>
3409 <h3 id=font-matching-examples><span class=secno>5.6 </span>Font matching
3410 examples</h3>
3412 <div class=example>
3413 <p>It's useful to note that the CSS selector syntax may be used to create
3414 language-sensitive typography. For example, some Chinese and Japanese
3415 characters are unified to have the same Unicode code point, although the
3416 abstract glyphs are not the same in the two languages.
3418 <pre>*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif; }
3419 *:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif; }
3420 </pre>
3422 <p>This selects any element that has the given language - Japanese or
3423 Traditional Chinese - and uses the appropriate font.
3424 </div>
3426 <h2 id=font-rend-props><span class=secno>6 </span>Font Feature Properties</h2>
3428 <p>Modern font technologies support a variety of advanced typographic and
3429 language-specific font features. Using these features, a single font can
3430 provide glyphs for a wide range of ligatures, contextual and stylistic
3431 alternates, tabular and old-style figures, small capitals, automatic
3432 fractions, swashes, and alternates specific to a given language. To allow
3433 authors control over these font capabilities, the ‘<code
3434 class=property>font-variant</code>’ property has been expanded for CSS3.
3435 It now functions as a shorthand for a set of properties that provide
3436 control over stylistic font features.
3438 <h3 id=glyph-selection-positioning><span class=secno>6.1 </span>Glyph
3439 selection and positioning</h3>
3441 <p>Simple fonts used for displaying Latin text use a very basic processing
3442 model. Fonts contain a <a href="#character-map"><em>character map</em></a>
3443 which maps each character to a glyph for that character. Glyphs for
3444 subsequent characters are simply placed one after the other along a run of
3445 text. Modern font formats such as OpenType and AAT (Apple Advanced
3446 Typography) use a richer processing model. The glyph for a given character
3447 can be chosen and positioned not just based on the codepoint of the
3448 character itself, but also on adjacent characters as well as the language,
3449 script, and features enabled for the text. Font features may be required
3450 for specific scripts, or recommended as enabled by default or they might
3451 be stylistic features meant to be used under author control.
3453 <p>For a good visual overview of these features, see the <a
3454 href="#OPENTYPE-FONT-GUIDE"
3455 rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
3456 For a detailed description of glyph processing for OpenType fonts, see <a
3457 href="#WINDOWS-GLYPH-PROC"
3458 rel=biblioentry>[WINDOWS-GLYPH-PROC]<!--{{WINDOWS-GLYPH-PROC}}--></a>.
3460 <p>Stylistic font features can be classified into two broad categories:
3461 ones that affect the harmonization of glyph shapes with the surrounding
3462 context, such as kerning and ligature features, and ones such as the
3463 small-caps, subscript/superscript and alternate features that affect shape
3464 selection.
3466 <p>The subproperties of <a href="#propdef-font-variant"
3467 title="font-variant!!property">‘<code
3468 class=property>font-variant</code>’</a> listed below are used to control
3469 these stylistic font features. They do not control features that are
3470 required for displaying certain scripts, such as the OpenType features
3471 used when displaying Arabic or Indic language text. They affect glyph
3472 selection and positioning, but do not affect font selection as described
3473 in the font matching section (except in cases required for compatibility
3474 with CSS 2.1).
3476 <p>To assure consistent behavior across user agents, the equivalent
3477 OpenType property settings are listed for individual properties and are
3478 normative. When using other font formats these should be used as a
3479 guideline to map CSS font feature property values to specific font
3480 features.
3482 <h3 id=language-specific-support><span class=secno>6.2
3483 </span>Language-specific display</h3>
3485 <p>OpenType also supports language-specific glyph selection and
3486 positioning, so that text can be displayed correctly in cases where the
3487 language dictates a specific display behavior. Many languages share a
3488 common script, but the shape of certain letters can vary across those
3489 languages. For example, certain Cyrillic letters have different shapes in
3490 Russian text than in Bulgarian. In Latin text, it's common to render "fi"
3491 with an explicit fi-ligature that lacks a dot on the "i". However, in
3492 languages such as Turkish which uses both a dotted-i and a dotless-i, it's
3493 important to not use this ligature or use a specialized version that
3494 contains a dot over the "i". The example below shows language-specific
3495 variations based on stylistic traditions found in Spanish, Italian and
3496 French orthography:
3498 <div class=featex><img alt="language specific forms, spanish"
3499 src=locl-1.png></div>
3501 <div class=featex><img alt="language specific forms, italian"
3502 src=locl-2.png></div>
3504 <div class=featex><img alt="language specific forms, french"
3505 src=locl-3.png></div>
3507 <p>If the content language of the element is known according to the rules
3508 of the <a
3509 href="http://www.w3.org/TR/CSS21/conform.html#doclanguage">document
3510 language</a>, user agents are required to infer the OpenType language
3511 system from the content language and use that when selecting and
3512 positioning glyphs using an OpenType font.
3514 <p>For OpenType fonts, in some cases it may be necessary to explicitly
3515 declare the OpenType language to be used, for example when displaying text
3516 in a given language that uses the typographic conventions of another
3517 language or when the font does not explicitly support a given language but
3518 supports a language that shares common typographic conventions. The ‘<a
3519 href="#propdef-font-language-override"><code
3520 class=property>font-language-override</code></a>’ property is used for
3521 this purpose.</p>
3522 <!-- prop: font-kerning -->
3524 <h3 id=font-kerning-prop><span class=secno>6.3 </span>Kerning: the <a
3525 href="#propdef-font-kerning">font-kerning</a> property</h3>
3527 <table class=propdef id=namefont-kerningvalueauto-normal-noneini>
3528 <tbody>
3529 <tr>
3530 <td>Name:
3532 <td><dfn id=propdef-font-kerning>font-kerning</dfn>
3534 <tr>
3535 <td>Value:
3537 <td><a href="#font-kerning-auto-value"
3538 title="auto!!font-kerning">auto</a> | <a
3539 href="#font-kerning-normal-value"
3540 title="normal!!font-kerning">normal</a> | <a
3541 href="#font-kerning-none-value" title="none!!font-kerning">none</a>
3543 <tr>
3544 <td>Initial:
3546 <td>auto
3548 <tr>
3549 <td>Applies to:
3551 <td>all elements
3553 <tr>
3554 <td>Inherited:
3556 <td>yes
3558 <tr>
3559 <td>Percentages:
3561 <td>N/A
3563 <tr>
3564 <td>Media:
3566 <td>visual
3568 <tr>
3569 <td>Computed value:
3571 <td>as specified
3573 <tr>
3574 <td>Animatable:
3576 <td>no
3577 </table>
3579 <p>Kerning is the contextual adjustment of inter-glyph spacing. This
3580 property controls metric kerning, kerning that utilizes adjustment data
3581 contained in the font.
3583 <dl>
3584 <dt><dfn id=font-kerning-auto-value title="auto!!font-kerning">auto</dfn>
3586 <dd>Specifies that kerning is applied at the discretion of the user agent
3588 <dt><dfn id=font-kerning-normal-value
3589 title="normal!!font-kerning">normal</dfn>
3591 <dd>Specifies that kerning is applied
3593 <dt><dfn id=font-kerning-none-value title="none!!font-kerning">none</dfn>
3595 <dd>Specifies that kerning is not applied
3596 </dl>
3598 <p>For fonts that do not include kerning data this property will have no
3599 visible effect. When rendering with OpenType fonts, the <a
3600 href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>
3601 specification suggests that kerning be enabled by default. When kerning is
3602 enabled, the OpenType <span class=tag>kern</span> feature is enabled (for
3603 vertical text runs the <span class=tag>vkrn</span> feature is enabled
3604 instead). User agents must also support fonts that only support kerning
3605 via data contained in a <span class=tag>kern</span> font table, as
3606 detailed in the OpenType specification. If the ‘<code
3607 class=property>letter-spacing</code>’ property is defined, kerning
3608 adjustments are considered part of the default spacing and letter spacing
3609 adjustments are made after kerning has been applied.
3611 <p>When set to ‘<code class=property>auto</code>’, user agents can
3612 determine whether to apply kerning or not based on a number of factors:
3613 text size, script, or other factors that influence text processing speed.
3614 Authors who want proper kerning should use ‘<a href="#normal"><code
3615 class=property>normal</code></a>’ to explicitly enable kerning.
3616 Likewise, some authors may prefer to disable kerning in situations where
3617 performance is more important than precise appearance. However, in
3618 well-designed modern implementations the use of kerning generally does not
3619 have a large impact on text rendering speed.</p>
3620 <!-- prop: font-variant-ligatures -->
3622 <h3 id=font-variant-ligatures-prop><span class=secno>6.4 </span>Ligatures:
3623 the <a href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
3624 property</h3>
3626 <table class=propdef id=namefont-variant-ligaturesvaluenormal-no>
3627 <tbody>
3628 <tr>
3629 <td>Name:
3631 <td><dfn id=propdef-font-variant-ligatures>font-variant-ligatures</dfn>
3633 <tr>
3634 <td>Value:
3636 <td><a href="#font-variant-ligatures-normal-value"
3637 title="normal!!font-variant-ligatures">normal</a> | <a
3638 href="#font-variant-ligatures-none-value"
3639 title="none!!font-variant-ligatures">none</a> | [ <a
3640 href="#common-lig-values"><var><common-lig-values></var></a> ||
3641 <a
3642 href="#discretionary-lig-values"><var><discretionary-lig-values></var></a>
3643 || <a
3644 href="#historical-lig-values"><var><historical-lig-values></var></a>
3645 || <a
3646 href="#contextual-alt-values"><var><contextual-alt-values></var></a>
3647 ]
3649 <tr>
3650 <td>Initial:
3652 <td>normal
3654 <tr>
3655 <td>Applies to:
3657 <td>all elements
3659 <tr>
3660 <td>Inherited:
3662 <td>yes
3664 <tr>
3665 <td>Percentages:
3667 <td>N/A
3669 <tr>
3670 <td>Media:
3672 <td>visual
3674 <tr>
3675 <td>Computed value:
3677 <td>as specified
3679 <tr>
3680 <td>Animatable:
3682 <td>no
3683 </table>
3685 <p>Ligatures and contextual forms are ways of combining glyphs to produce
3686 more harmonized forms.
3688 <pre
3689 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>
3691 <pre
3692 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>
3694 <pre
3695 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>
3697 <pre
3698 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>
3700 <p>Individual values have the following meanings:
3702 <dl>
3703 <dt><dfn id=font-variant-ligatures-normal-value
3704 title="normal!!font-variant-ligatures">normal</dfn>
3706 <dd>A value of ‘<a href="#normal"><code
3707 class=property>normal</code></a>’ specifies that common default
3708 features are enabled, <a href="#font-feature-resolution">as described in
3709 detail in the next section</a>. For OpenType fonts, common ligatures and
3710 contextual forms are on by default, discretionary and historical
3711 ligatures are not.
3713 <dt><dfn id=font-variant-ligatures-none-value
3714 title="none!!font-variant-ligatures">none</dfn>
3716 <dd>Specifies that all types of ligatures and contextual forms covered by
3717 this property are explicitly disabled. In situations where ligatures are
3718 not considered necessary, this may improve the speed of text rendering.
3720 <dt><dfn id=common-ligatures>common-ligatures</dfn>
3722 <dd>Enables display of common ligatures (OpenType features: <span
3723 class=tag>liga, clig</span>). For OpenType fonts, common ligatures are
3724 enabled by default.
3725 </dl>
3727 <div class=featex><img alt="common ligature example" src=liga.png></div>
3729 <dl>
3730 <dt><dfn id=no-common-ligatures>no-common-ligatures</dfn>
3732 <dd>Disables display of common ligatures (OpenType features: <span
3733 class=tag>liga, clig</span>).
3735 <dt><dfn id=discretionary-ligatures>discretionary-ligatures</dfn>
3737 <dd>Enables display of discretionary ligatures (OpenType feature: <span
3738 class=tag>dlig</span>). Which ligatures are discretionary or optional is
3739 decided by the type designer, so authors will need to refer to the
3740 documentation of a given font to understand which ligatures are
3741 considered discretionary.
3742 </dl>
3744 <div class=featex><img alt="discretionary ligature example" src=dlig.png></div>
3746 <dl>
3747 <dt><dfn id=no-discretionary-ligatures>no-discretionary-ligatures</dfn>
3749 <dd>Disables display of discretionary ligatures (OpenType feature: <span
3750 class=tag>dlig</span>).
3752 <dt><dfn id=historical-ligatures>historical-ligatures</dfn>
3754 <dd>Enables display of historical ligatures (OpenType feature: <span
3755 class=tag>hlig</span>).
3756 </dl>
3758 <div class=featex><img alt="historical ligature example" src=hlig.png></div>
3760 <dl>
3761 <dt><dfn id=no-historical-ligatures>no-historical-ligatures</dfn>
3763 <dd>Disables display of historical ligatures (OpenType feature: <span
3764 class=tag>hlig</span>).
3766 <dt><dfn id=contextual>contextual</dfn>
3768 <dd>Enables display of contextual alternates (OpenType feature: <span
3769 class=tag>calt</span>). Although not strictly a ligature feature, like
3770 ligatures this feature is commonly used to harmonize the shapes of glyphs
3771 with the surrounding context. For OpenType fonts, this feature is on by
3772 default.
3773 </dl>
3775 <div class=featex><img alt="contextual alternate example" src=calt.png></div>
3777 <dl>
3778 <dt><dfn id=no-contextual>no-contextual</dfn>
3780 <dd>Disables display of contextual alternates (OpenType feature: <span
3781 class=tag>calt</span>).
3782 </dl>
3784 <p>Required ligatures, needed for correctly rendering complex scripts, are
3785 not affected by the settings above, including ‘<code
3786 class=property>none</code>’ (OpenType feature: <span
3787 class=tag>rlig</span>).</p>
3788 <!-- prop: font-variant-position -->
3790 <h3 id=font-variant-position-prop><span class=secno>6.5 </span>Subscript
3791 and superscript forms: the <a
3792 href="#propdef-font-variant-position">font-variant-position</a> property</h3>
3794 <table class=propdef id=namefont-variant-positionvaluenormal-sub>
3795 <tbody>
3796 <tr>
3797 <td>Name:
3799 <td><dfn id=propdef-font-variant-position>font-variant-position</dfn>
3801 <tr>
3802 <td>Value:
3804 <td><span title="normal!!font-variant-position">normal</span> | <a
3805 href="#sub">sub</a> | <a href="#super">super</a>
3807 <tr>
3808 <td>Initial:
3810 <td>normal
3812 <tr>
3813 <td>Applies to:
3815 <td>all elements
3817 <tr>
3818 <td>Inherited:
3820 <td>yes
3822 <tr>
3823 <td>Percentages:
3825 <td>N/A
3827 <tr>
3828 <td>Media:
3830 <td>visual
3832 <tr>
3833 <td>Computed value:
3835 <td>as specified
3837 <tr>
3838 <td>Animatable:
3840 <td>no
3841 </table>
3843 <p>This property is used to enable typographic subscript and superscript
3844 glyphs. These are alternate glyphs designed within the same em-box as
3845 default glyphs and are intended to be laid out on the same baseline as the
3846 default glyphs, with no resizing or repositioning of the baseline. They
3847 are explicitly designed to match the surrounding text and to be more
3848 readable without affecting the line height.
3850 <div class=figure><img alt="comparison between real subscript glyphs and
3851 synthesized ones" src=realsubscripts.png>
3852 <p class=caption>Subscript glyphs (top) vs. typical synthesized subscripts
3853 (bottom)
3854 </div>
3856 <p>Individual values have the following meanings:
3858 <dl>
3859 <dt><dfn id=normal>normal</dfn>
3861 <dd>None of the features listed below are enabled.
3863 <dt><dfn id=sub>sub</dfn>
3865 <dd>Enables display of subscript variants (OpenType feature: <span
3866 class=tag>subs</span>).
3868 <dt><dfn id=super>super</dfn>
3870 <dd>Enables display of superscript variants (OpenType feature: <span
3871 class=tag>sups</span>).
3872 </dl>
3874 <p>Because of the semantic nature of subscripts and superscripts, when the
3875 value is either ‘<a href="#sub"><code class=property>sub</code></a>’
3876 or ‘<a href="#super"><code class=property>super</code></a>’ for a
3877 given contiguous run of text, if a variant glyph is not available for all
3878 the characters in the run, simulated glyphs must be synthesized for all
3879 characters using reduced forms of the glyphs that would be used without
3880 this feature applied. This is done per run to avoid a mixture of variant
3881 glyphs and synthesized ones that would not align correctly. In the case of
3882 OpenType fonts that lack subscript or superscript glyphs for a given
3883 character, user agents must use the appropriate subscript and superscript
3884 metrics specified in the selected font's <a
3885 href="http://www.microsoft.com/typography/otspec/os2.htm#subxs">OS/2
3886 table</a> <a href="#OPENTYPE"
3887 rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> to calculate the size
3888 and offset of the synthesized substitutes.
3890 <div class=figure><img alt="alternate superscripts vs. glyphs synthesized
3891 using superscript metrics" src=superscript-alt-synth.png>
3892 <p class=caption>Superscript alternate glyph (left), synthesized
3893 superscript glyphs (middle), and incorrect mixture of the two (right)
3894 </div>
3896 <p>In the past, user agents have used font-size and vertical-align to
3897 simulate subscripts and superscripts for the <a class=tag
3898 href="#sub">sub</a> and <span class=tag>sup</span> elements. To allow a
3899 backwards compatible way of defining subscripts and superscripts, it is
3900 recommended that authors use conditional rules <a href="#CSS3-CONDITIONAL"
3901 rel=biblioentry>[CSS3-CONDITIONAL]<!--{{CSS3-CONDITIONAL}}--></a> so that
3902 older user agents will still render subscripts and superscripts via the
3903 older mechanism.
3905 <p>Authors should note that fonts typically only provide subscript and
3906 superscript glyphs for a subset of all characters supported by the font.
3907 For example, while subscript and superscript glyphs are often available
3908 for Latin numbers, glyphs for punctuation and letter characters are less
3909 frequently provided. The synthetic fallback rules defined for this
3910 property assure that subscripts and superscripts will always appear but
3911 the appearance may not match author expectations if the font used does not
3912 provide the appropriate alternate glyph for all characters contained in a
3913 subscript or superscript.
3915 <p>This property is not cumulative. Applying it to elements within a
3916 subscript or superscript won't nest the placement of a subscript or
3917 superscript glyph. Images contained within text runs where the value of
3918 this property is ‘<a href="#sub"><code class=property>sub</code></a>’
3919 or ‘<a href="#super"><code class=property>super</code></a>’ will be
3920 drawn just as they would if the value was ‘<a href="#normal"><code
3921 class=property>normal</code></a>’. Likewise, text decorations such as
3922 underlines or emphasis marks will render in the same position as they
3923 would for the default glyphs, since this property does not affect the
3924 baseline position.
3926 <p class=issue>Some have suggested that text decorations should apply to
3927 the visual baseline of the variant glyphs, rather than the baseline
3928 defined by the font.
3930 <p>Because of these limitations, ‘<a
3931 href="#propdef-font-variant-position"><code
3932 class=property>font-variant-position</code></a>’ is not recommended for
3933 use in user agent stylesheets. Authors should use it in cases where
3934 subscripts or superscripts will only contain the narrow range of
3935 characters supported by the fonts specified.
3937 <div class=example>
3938 <p>A typical user agent default style for the <a class=tag
3939 href="#sub">sub</a> element:</p>
3941 <pre>sub {
3942 vertical-align: sub;
3943 font-size: smaller;
3944 line-height: normal;
3945 }
3946 </pre>
3948 <p>Using font-variant-position to specify typographic subscripts in a way
3949 that will still show subscripts in older user agents:</p>
3951 <pre>@supports ( font-variant-position: sub ) {
3953 sub {
3954 vertical-align: baseline;
3955 font-size: 100%;
3956 line-height: inherit;
3957 font-variant-position: sub;
3958 }
3960 }
3961 </pre>
3963 <p>User agents that support the ‘<a
3964 href="#propdef-font-variant-position"><code
3965 class=property>font-variant-position</code></a>’ property will select a
3966 subscript variant glyph and render this without adjusting the baseline or
3967 font-size. Older user agents will ignore the ‘<a
3968 href="#propdef-font-variant-position"><code
3969 class=property>font-variant-position</code></a>’ property definition
3970 and use the standard defaults for subscripts.</p>
3971 </div>
3972 <!-- prop: font-variant-caps -->
3974 <h3 id=font-variant-caps-prop><span class=secno>6.6 </span>Capitalization:
3975 the <a href="#propdef-font-variant-caps">font-variant-caps</a> property</h3>
3977 <table class=propdef id=namefont-variant-capsvaluenormal-small-c>
3978 <tbody>
3979 <tr>
3980 <td>Name:
3982 <td><dfn id=propdef-font-variant-caps>font-variant-caps</dfn>
3984 <tr>
3985 <td>Value:
3987 <td><a href="#font-variant-caps-normal-value"
3988 title="normal!!font-variant-caps">normal</a> | <a
3989 href="#small-caps">small-caps</a> | <a
3990 href="#all-small-caps">all-small-caps</a> | <a
3991 href="#petite-caps">petite-caps</a> | <a
3992 href="#all-petite-caps">all-petite-caps</a> | <a
3993 href="#unicase">unicase</a> | <a href="#titling-caps">titling-caps</a>
3995 <tr>
3996 <td>Initial:
3998 <td>normal
4000 <tr>
4001 <td>Applies to:
4003 <td>all elements
4005 <tr>
4006 <td>Inherited:
4008 <td>yes
4010 <tr>
4011 <td>Percentages:
4013 <td>N/A
4015 <tr>
4016 <td>Media:
4018 <td>visual
4020 <tr>
4021 <td>Computed value:
4023 <td>as specified
4025 <tr>
4026 <td>Animatable:
4028 <td>no
4029 </table>
4031 <p>This property allows the selection of alternate glyphs used for small or
4032 petite capitals or for titling. These glyphs are specifically designed to
4033 blend well with the surrounding normal glyphs, to maintain the weight and
4034 readability which suffers when text is simply resized to fit this purpose.
4036 <p>Individual values have the following meanings:
4038 <dl>
4039 <dt><dfn id=font-variant-caps-normal-value
4040 title="normal!!font-variant-caps">normal</dfn>
4042 <dd>None of the features listed below are enabled.
4044 <dt><dfn id=small-caps>small-caps</dfn>
4046 <dd>Enables display of small capitals (OpenType feature: <span
4047 class=tag>smcp</span>). Small-caps glyphs typically use the form of
4048 uppercase letters but are reduced to the size of lowercase letters.
4049 </dl>
4051 <div class=featex><img alt="small-caps example" src=smcp.png></div>
4053 <dl>
4054 <dt><dfn id=all-small-caps>all-small-caps</dfn>
4056 <dd>Enables display of small capitals for both upper and lowercase letters
4057 (OpenType features: <span class=tag>c2sc, smcp</span>).
4059 <dt><dfn id=petite-caps>petite-caps</dfn>
4061 <dd>Enables display of petite capitals (OpenType feature: <span
4062 class=tag>pcap</span>).
4064 <dt><dfn id=all-petite-caps>all-petite-caps</dfn>
4066 <dd>Enables display of petite capitals for both upper and lowercase
4067 letters (OpenType features: <span class=tag>c2pc, pcap</span>).
4069 <dt><dfn id=unicase>unicase</dfn>
4071 <dd>Enables display of mixture of small capitals for uppercase letters
4072 with normal lowercase letters (OpenType feature: <span
4073 class=tag>unic</span>).
4075 <dt><dfn id=titling-caps>titling-caps</dfn>
4077 <dd>Enables display of titling capitals (OpenType feature: <span
4078 class=tag>titl</span>). Uppercase letter glyphs are often designed for
4079 use with lowercase letters. When used in all uppercase titling sequences
4080 they can appear too strong. Titling capitals are designed specifically
4081 for this situation.
4082 </dl>
4084 <p>The availability of these glyphs is based on whether a given feature is
4085 defined or not in the feature list of the font. User agents can optionally
4086 decide this on a per-script basis but should explicitly not decide this on
4087 a per-character basis.
4089 <p>Some fonts may only support a subset or none of the features described
4090 for this property. For backwards compatibility with CSS 2.1, if ‘<a
4091 href="#small-caps"><code class=property>small-caps</code></a>’ or ‘<a
4092 href="#all-small-caps"><code class=property>all-small-caps</code></a>’
4093 is specified but small-caps glyphs are not available for a given font,
4094 user agents should simulate a small-caps font, for example by taking a
4095 normal font and replacing the glyphs for lowercase letters with scaled
4096 versions of the glyphs for uppercase characters (replacing the glyphs for
4097 both upper and lowercase letters in the case of ‘<a
4098 href="#all-small-caps"><code class=property>all-small-caps</code></a>’).
4100 <div class=figure style="padding: 0; margin: auto;"><img alt="synthetic vs.
4101 real small-caps" class=hires src=synthetic-vs-real-small-caps.png
4102 width=512px>
4103 <p class=caption>Synthetic vs. real small-caps
4104 </div>
4106 <p>To match the surrounding text, a font may provide alternate glyphs for
4107 caseless characters when these features are enabled but when a user agent
4108 simulates small capitals, it must not attempt to simulate alternates for
4109 codepoints which are considered caseless.
4111 <div class=figure style="padding: 0; margin: auto;"><img alt="caseless
4112 characters with small-caps, all-small-caps enabled" class=hires
4113 src=small-capitals-variations.png width=418px>
4114 <p class=caption>Caseless characters with small-caps, all-small-caps
4115 enabled
4116 </div>
4118 <p>If either ‘<a href="#petite-caps"><code
4119 class=property>petite-caps</code></a>’ or ‘<a
4120 href="#all-petite-caps"><code class=property>all-petite-caps</code></a>’
4121 is specified for a font that doesn't support these features, the property
4122 behaves as if ‘<a href="#small-caps"><code
4123 class=property>small-caps</code></a>’ or ‘<a
4124 href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
4125 respectively, had been specified. If ‘<a href="#unicase"><code
4126 class=property>unicase</code></a>’ is specified for a font that doesn't
4127 support that feature, the property behaves as if ‘<a
4128 href="#small-caps"><code class=property>small-caps</code></a>’ was
4129 applied only to lowercased uppercase letters. If ‘<a
4130 href="#titling-caps"><code class=property>titling-caps</code></a>’ is
4131 specified with a font that does not support this feature, this property
4132 has no visible effect. When simulated small capital glyphs are used, for
4133 scripts that lack uppercase and lowercase letters, ‘<a
4134 href="#small-caps"><code class=property>small-caps</code></a>’, ‘<a
4135 href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
4136 ‘<a href="#petite-caps"><code class=property>petite-caps</code></a>’,
4137 ‘<a href="#all-petite-caps"><code
4138 class=property>all-petite-caps</code></a>’ and ‘<a
4139 href="#unicase"><code class=property>unicase</code></a>’ have no visible
4140 effect.
4142 <p>When casing transforms are used to simulate small capitals, the casing
4143 transformations must match those used for the <span
4144 class=property>‘<code class=property>text-transform</code>’</span>
4145 property.
4147 <p>As a last resort, unscaled uppercase letter glyphs in a normal font may
4148 replace glyphs in a small-caps font so that the text appears in all
4149 uppercase letters.
4151 <div class=figure style="padding: 0; margin: auto;"><img alt="using
4152 all-small-caps in acronym-laden text" class=hires
4153 src=acronym-laden-text.png width=596px>
4154 <p class=caption>Using small capitals to improve readability in
4155 acronym-laden text
4156 </div>
4158 <div class=example>
4159 <p>Quotes rendered italicised, with small-caps on the first line:</p>
4161 <pre>blockquote { font-style: italic; }
4162 blockquote:first-line { font-variant: small-caps; }
4164 <blockquote><a href="http://lists.w3.org/Archives/Public/www-style/2009Dec/0036.html" style="text-decoration: none">I'll be honor-bound to slap them like a haddock.</a></blockquote>
4165 </pre>
4166 </div>
4167 <!-- prop: font-variant-numeric -->
4169 <h3 id=font-variant-numeric-prop><span class=secno>6.7 </span>Numerical
4170 formatting: the <a
4171 href="#propdef-font-variant-numeric">font-variant-numeric</a> property</h3>
4173 <table class=propdef id=namefont-variant-numericvaluenormal-ltnu>
4174 <tbody>
4175 <tr>
4176 <td>Name:
4178 <td><dfn id=propdef-font-variant-numeric>font-variant-numeric</dfn>
4180 <tr>
4181 <td>Value:
4183 <td><a href="#font-variant-numeric-normal-value"
4184 title="normal!!font-variant-numeric">normal</a> | [ <a
4185 href="#numeric-figure-values"><var><numeric-figure-values></var></a>
4186 || <a
4187 href="#numeric-spacing-values"><var><numeric-spacing-values></var></a>
4188 || <a
4189 href="#numeric-fraction-values"><var><numeric-fraction-values></var></a>
4190 || <a href="#ordinal">ordinal</a> || <a
4191 href="#slashed-zero">slashed-zero</a> ]
4193 <tr>
4194 <td>Initial:
4196 <td>normal
4198 <tr>
4199 <td>Applies to:
4201 <td>all elements
4203 <tr>
4204 <td>Inherited:
4206 <td>yes
4208 <tr>
4209 <td>Percentages:
4211 <td>N/A
4213 <tr>
4214 <td>Media:
4216 <td>visual
4218 <tr>
4219 <td>Computed value:
4221 <td>as specified
4223 <tr>
4224 <td>Animatable:
4226 <td>no
4227 </table>
4229 <p>Specifies control over numerical forms. The example below shows how some
4230 of these values can be combined to influence the rendering of tabular data
4231 with fonts that support these features. Within normal paragraph text,
4232 proportional numbers are used while tabular numbers are used so that
4233 columns of numbers line up properly:
4235 <div class=figure style="padding: 0; margin: auto;"><img alt="combining
4236 number styles" src=numberstyles.png>
4237 <p class=caption>Using number styles
4238 </div>
4240 <p>Possible combinations:
4242 <pre
4243 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>
4245 <pre
4246 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>
4248 <pre
4249 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>
4251 <p>Individual values have the following meanings:
4253 <dl>
4254 <dt><dfn id=font-variant-numeric-normal-value
4255 title="normal!!font-variant-numeric">normal</dfn>
4257 <dd>None of the features listed below are enabled.
4259 <dt><dfn id=lining-nums>lining-nums</dfn>
4261 <dd>Enables display of lining numerals (OpenType feature: <span
4262 class=tag>lnum</span>).
4264 <dt><dfn id=oldstyle-nums>oldstyle-nums</dfn>
4266 <dd>Enables display of old-style numerals (OpenType feature: <span
4267 class=tag>onum</span>).
4269 <dt><dfn id=proportional-nums>proportional-nums</dfn>
4271 <dd>Enables display of proportional numerals (OpenType feature: <span
4272 class=tag>pnum</span>).
4274 <dt><dfn id=tabular-nums>tabular-nums</dfn>
4276 <dd>Enables display of tabular numerals (OpenType feature: <span
4277 class=tag>tnum</span>).
4279 <dt><dfn id=diagonal-fractions>diagonal-fractions</dfn>
4281 <dd>Enables display of lining diagonal fractions (OpenType feature: <span
4282 class=tag>frac</span>).
4283 </dl>
4285 <div class=featex><img alt="diagonal fraction example" src=frac.png></div>
4287 <dl>
4288 <dt><dfn id=stacked-fractions>stacked-fractions</dfn>
4290 <dd>Enables display of lining stacked fractions (OpenType feature: <span
4291 class=tag>afrc</span>).
4292 </dl>
4294 <div class=featex><img alt="stacked fraction example" src=afrc.png></div>
4296 <dl>
4297 <dt><dfn id=ordinal>ordinal</dfn>
4299 <dd>Enables display of forms used with ordinal numbers (OpenType feature:
4300 <span class=tag>ordn</span>).
4302 <dt><dfn id=slashed-zero>slashed-zero</dfn>
4304 <dd>Enables display of slashed zeros (OpenType feature: <span
4305 class=tag>zero</span>).
4306 </dl>
4308 <div class=featex><img alt="slashed zero example" src=zero.png></div>
4310 <div class=example id=steak-marinade>
4311 <p>A simple flank steak marinade recipe, rendered with automatic fractions
4312 and old-style numerals:</p>
4314 <pre>.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; }
4316 <h4>Steak marinade:</h4>
4317 <ul>
4318 <li><span class="amount">2</span> tbsp olive oil</li>
4319 <li><span class="amount">1</span> tbsp lemon juice</li>
4320 <li><span class="amount">1</span> tbsp soy sauce</li>
4321 <li><span class="amount">1 1/2</span> tbsp dry minced onion</li>
4322 <li><span class="amount">2 1/2</span> tsp italian seasoning</li>
4323 <li>Salt &amp; pepper</li>
4324 </ul>
4326 <p>Mix the meat with the marinade and let it sit covered in the refrigerator
4327 for a few hours or overnight.</p>
4328 </pre>
4330 <p>Note that the fraction feature is only applied to values not the entire
4331 paragraph. Fonts often implement this feature using contextual rules
4332 based on the use of the slash (‘<code class=css>/</code>’) character.
4333 As such, it's not suitable for use as a paragraph-level style.</p>
4334 </div>
4335 <!-- prop: font-variant-alternates -->
4337 <h3 id=font-variant-alternates-prop><span class=secno>6.8 </span>Alternates
4338 and swashes: the <a
4339 href="#propdef-font-variant-alternates">font-variant-alternates</a>
4340 property</h3>
4342 <table class=propdef id=namefont-variant-alternatesvaluenormal-s>
4343 <tbody>
4344 <tr>
4345 <td>Name:
4347 <td><dfn
4348 id=propdef-font-variant-alternates>font-variant-alternates</dfn>
4350 <tr>
4351 <td>Value:
4353 <td>normal | [ <a href="#stylistic"
4354 title=stylistic>stylistic(<feature-value-name>)</a> || <a
4355 href="#historical-forms">historical-forms</a> || <a href="#styleset"
4356 title=styleset>styleset(<feature-value-name> #)</a> || <a
4357 href="#character-variant"
4358 title=character-variant>character-variant(<feature-value-name>
4359 #)</a> || <a href="#swash"
4360 title=swash>swash(<feature-value-name>)</a> || <a
4361 href="#ornaments"
4362 title=ornaments>ornaments(<feature-value-name>)</a> || <a
4363 href="#annotation"
4364 title=annotation>annotation(<feature-value-name>)</a> ]
4366 <tr>
4367 <td>Initial:
4369 <td>normal
4371 <tr>
4372 <td>Applies to:
4374 <td>all elements
4376 <tr>
4377 <td>Inherited:
4379 <td>yes
4381 <tr>
4382 <td>Percentages:
4384 <td>N/A
4386 <tr>
4387 <td>Media:
4389 <td>visual
4391 <tr>
4392 <td>Computed value:
4394 <td>as specified
4396 <tr>
4397 <td>Animatable:
4399 <td>no
4400 </table>
4402 <p>For any given character, fonts can provide a variety of alternate glyphs
4403 in addition to the default glyph for that character. This property
4404 provides control over the selection of these alternate glyphs.
4406 <p>For many of the property values listed below, several different
4407 alternate glyphs are available. How many alternates are available and what
4408 they represent is font-specific, so these are each marked <dfn
4409 id=font-specific>font specific</dfn> in the value definitions below.
4410 Because the nature of these alternates is font-specific, the <a
4411 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
4412 rule is used to define values for a specific font family or set of
4413 families that associate a font-specific numeric
4414 <code><feature-index></code> with a custom
4415 <code><feature-value-name></code>, which is then used in this
4416 property to select specific alternates:
4418 <pre>@font-feature-values Noble Script { @swash { swishy: 1; flowing: 2; } }
4420 p {
4421 font-family: Noble Script;
4422 font-variant-alternates: swash(flowing); /* use swash alternate #2 */
4423 }</pre>
4425 <p>When a particular <code><feature-value-name></code> has not been
4426 defined for a given family or for a particular feature type, the computed
4427 value must be the same as if it had been defined. However, property values
4428 that contain these undefined <code><feature-value-name></code>
4429 identifiers must be ignored when choosing glyphs.
4431 <pre>/* these two style rules are effectively the same */
4432 p { font-variant-alternates: swash(unknown-value); } /* not a defined value, ignored */
4433 p { font-variant-alternates: normal; }
4434 </pre>
4436 <p>This allows values to be defined and used for a given set of font
4437 families but ignored if fallback occurs, since the font family name would
4438 be different. If a given value is outside the range supported by a given
4439 font, the value is ignored. These values never apply to generic font
4440 families.
4442 <p>Individual values have the following meanings:
4444 <dl>
4445 <dt><dfn id=font-variant-alternates-normal-value
4446 title="normal!!font-variant-alternates">normal</dfn>
4448 <dd>None of the features listed below are enabled.
4450 <dt><dfn id=historical-forms>historical-forms</dfn>
4452 <dd>Enables display of historical forms (OpenType feature: <span
4453 class=tag>hist</span>).
4454 </dl>
4456 <div class=featex><img alt="historical form example" src=hist.png></div>
4458 <dl>
4459 <dt><dfn id=stylistic
4460 title=stylistic>stylistic(<feature-value-name>)</dfn>
4462 <dd>Enables display of stylistic alternates (<a
4463 href="#font-specific"><em>font specific</em></a>, OpenType feature: <span
4464 class=tag>salt <feature-index></span>).
4465 </dl>
4467 <div class=featex><img alt="stylistic alternate example" src=salt.png></div>
4469 <dl>
4470 <dt><dfn id=styleset title=styleset>styleset(<feature-value-name>
4471 #)</dfn>
4473 <dd>Enables display with stylistic sets (<a href="#font-specific"><em>font
4474 specific</em></a>, OpenType feature: <span
4475 class=tag>ss<feature-index></span> OpenType currently defines <span
4476 class=tag>ss01</span> through <span class=tag>ss20</span>).
4477 </dl>
4479 <div class=featex><img alt="styleset example" src=ssnn.png></div>
4481 <dl>
4482 <dt><dfn id=character-variant
4483 title=character-variant>character-variant(<feature-value-name>
4484 #)</dfn>
4486 <dd>Enables display of specific character variants (<a
4487 href="#font-specific"><em>font specific</em></a>, OpenType feature: <span
4488 class=tag>cv<feature-index></span> OpenType currently defines <span
4489 class=tag>cv01</span> through <span class=tag>cv99</span>).
4491 <dt><dfn id=swash title=swash>swash(<feature-value-name>)</dfn>
4493 <dd>Enables display of swash glyphs (<a href="#font-specific"><em>font
4494 specific</em></a>, OpenType feature: <span class=tag>swsh
4495 <feature-index>, cswh <feature-index></span>).
4496 </dl>
4498 <div class=featex><img alt="swash example" src=swsh.png></div>
4500 <dl>
4501 <dt><dfn id=ornaments
4502 title=ornaments>ornaments(<feature-value-name>)</dfn>
4504 <dd>Enables replacement of default glyphs with ornaments, if provided in
4505 the font (<a href="#font-specific"><em>font specific</em></a>, OpenType
4506 feature: <span class=tag>ornm <feature-index></span>). Some fonts
4507 may offer ornament glyphs as alternates for a wide collection of
4508 characters; however, displaying arbitrary characters (e.g.,
4509 alphanumerics) as ornaments is poor practice as it distorts the semantics
4510 of the data. Font designers are encouraged to encode all ornaments
4511 (except those explicitly encoded in the Unicode Dingbats blocks, etc.) as
4512 alternates for the bullet character (U+2022) to allow authors to select
4513 the desired glyph using ‘<a href="#ornaments"><code
4514 class=property>ornaments</code></a>’.
4515 </dl>
4517 <div class=featex><img alt="ornaments example" src=ornm.png></div>
4519 <dl>
4520 <dt><dfn id=annotation
4521 title=annotation>annotation(<feature-value-name>)</dfn>
4523 <dd>Enables display of alternate annotation forms (<a
4524 href="#font-specific"><em>font specific</em></a>, OpenType feature: <span
4525 class=tag>nalt <feature-index></span>).
4526 </dl>
4528 <div class=featex><img alt="alternate annotation form example"
4529 src=nalt.png></div>
4531 <h3 id=font-feature-values><span class=secno>6.9 </span>Defining font
4532 specific alternates: the <dfn id=at-font-feature-values-rule
4533 style="font-weight: inherit; font-style:
4534 inherit"><code>@font-feature-values</code></dfn> rule</h3>
4536 <p>Several of the possible values of ‘<a
4537 href="#propdef-font-variant-alternates"><code
4538 class=property>font-variant-alternates</code></a>’ listed above are
4539 labeled as <a href="#font-specific"><em>font specific</em></a>. For these
4540 features fonts may define not just a single glyph but a set of alternate
4541 glyphs with an index to select a given alternate. Since these are font
4542 family specific, the <a
4543 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
4544 rule is used to define named values for these indices for a given family.
4546 <p class=note>See the <a href="#om-fontfeaturevalues">object model
4547 reference section</a> for a description of the interfaces used to modify
4548 these rules via the CSS Object Model.
4550 <div class=example>
4551 <p>In the case of the swash Q in the example shown above, the swash could
4552 be specified using these style rules:</p>
4554 <pre>
4556 @font-feature-values Jupiter Sans {
4557 @swash {
4558 delicate: 1;
4559 flowing: 2;
4560 }
4561 }
4563 h2 { font-family: Jupiter Sans, sans-serif; }
4565 /* show the second swash variant in h2 headings */
4566 h2:first-letter { font-variant-alternates: swash(flowing); }
4568 <h2>Quick</h2></pre>
4570 <p>When Jupiter Sans is present, the second alternate swash alternate will
4571 be displayed. When not present, no swash character will be shown, since
4572 the specific named value "flowing" is only defined for the Jupiter Sans
4573 family. The @-mark indicates the name of the property value for which a
4574 named value can be used. The name "flowing" is chosen by the author. The
4575 index that represents each alternate is defined within a given font's
4576 data.</p>
4577 </div>
4579 <h4 id=basic-syntax><span class=secno>6.9.1 </span>Basic syntax</h4>
4581 <p>An <a
4582 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
4583 rule is composed of a list of font families followed by a block containing
4584 individual <a href="#featurevalueblock"><i
4585 title="feature_value_block">feature value blocks</i></a> that take the
4586 form of @-rules. Each block defines a set of named values for a specific
4587 font feature when a given set of font families is used. Effectively, they
4588 define a mapping of ⟨family, feature, ident⟩ → ⟨values⟩ where
4589 ⟨values⟩ are the numeric indices used for specific features defined
4590 for a given font.
4592 <p>In terms of the grammar, this specification defines the following
4593 productions:
4595 <pre><dfn id=fontfeaturevaluesrule>font_feature_values_rule</dfn>
4596 : <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>*
4597 '{' <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>*
4598 ;
4600 <dfn id=fontfamilynamelist>font_family_name_list</dfn>
4601 : <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> ]*
4602 ;
4604 <dfn id=fontfamilyname>font_family_name</dfn>
4605 : <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> ]* ]
4606 ;
4608 <dfn id=featurevalueblock>feature_value_block</dfn>
4609 : <a href="#featuretype"><i>feature_type</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
4610 '{' <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>*
4611 ;
4613 <dfn id=featuretype>feature_type</dfn>:
4614 <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>ATKEYWORD</i></a>
4615 ;
4617 <dfn id=featurevaluedefinition>feature_value_definition</dfn>
4618 : <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> ]*
4619 ;
4620 </pre>
4622 <p>The following new token is introduced:
4624 <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>;}
4625 </pre>
4627 <p><a href="#featurevalueblock"><i title="feature_value_block">Feature
4628 value blocks</i></a> are handled as <a
4629 href="http://www.w3.org/TR/CSS2/syndata.html#at-rules">at-rules</a>, they
4630 consist of everything up to the next block or semi-colon, whichever comes
4631 first.
4633 <p>The <a href="#fontfamilynamelist"><i title="font_family_name_list">font
4634 family list</i></a> is a comma-delimited list of <a
4635 href="#fontfamilyname"><i title="font_family_name">font family
4636 names</i></a> that match the definition of <a
4637 href="#family-name-value"><var><family-name></var></a> for the <a
4638 href="#propdef-font-family" title="font-family!!property">‘<code
4639 class=property>font-family</code>’</a> property. This means that only
4640 named font families are allowed, rules that include generic or system
4641 fonts in the list of font families are syntax errors. However, if a user
4642 agent defines a generic font to be a specific named font (e.g. Helvetica),
4643 the settings associated with that family name will be used. If syntax
4644 errors occur within the font family list, the entire rule must be ignored.
4646 <p>Within <a href="#featurevalueblock"><i
4647 title="feature_value_block">feature value blocks</i></a>, the <a
4648 href="#featuretype"><i title="feature_type">feature type</i></a> is
4649 ‘<code class=css>@</code>’ followed by the name of one of the <a
4650 href="#font-specific"><em>font specific</em></a> property values of ‘<a
4651 href="#propdef-font-variant-alternates"><code
4652 class=property>font-variant-alternates</code></a>’ (e.g. <a
4653 href="#swash"><code>@swash</code></a>). The identifiers used within
4654 feature value definitions follow the rules of CSS user identifiers and are
4655 case-sensitive. They are unique only for a given set of font families and
4656 <a href="#featuretype"><i title="feature_type">feature type</i></a>. The
4657 same identifier used with a different <a href="#featuretype"><i
4658 title="feature_type">feature type</i></a> is treated as a separate and
4659 distinct value. If the same identifier is defined mulitple times for a
4660 given <a href="#featuretype"><i title="feature_type">feature type</i></a>
4661 and font family, the last defined value is used. Values associated with a
4662 given identifier are limited to integer values 0 or greater.
4664 <p>When syntax errors occur within a <a href="#featurevaluedefinition"><i
4665 title="feature_value_definition">feature value definition</i></a>, such as
4666 invalid identifiers or values, the entire <a
4667 href="#featurevaluedefinition"><i title="feature_value_definition">feature
4668 value definition</i></a> must be omitted, just as syntax errors in style
4669 declarations are handled. When the <a href="#featuretype"><i
4670 title="feature_type">feature type</i></a> is invalid, the entire
4671 associated <a href="#featurevalueblock"><i
4672 title="feature_value_block">feature value block</i></a> must be ignored.
4674 <div class=example>
4675 <p>Rules that are equivalent given syntax error handling:</p>
4677 <pre>@font-feature-values Bongo {
4678 @swash { ornate: 1; }
4679 annotation { boxed: 4; } /* should be @annotation! */
4680 @swash { double-loops: 1; flowing: -1; } /* negative value */
4681 @ornaments ; /* incomplete definition */
4682 @styleset { double-W: 14; sharp-terminals: 16 1 } /* missing ; */
4683 <a href="http://www.angryalien.com/0504/shiningbunnies.html" style="text-decoration: none; border: none;">redrum</a> /* random editing mistake */
4684 }</pre>
4686 <p>The example above is equivalent to:</p>
4688 <pre>@font-feature-values Bongo {
4689 @swash { ornate: 1; }
4690 @swash { double-loops: 1; }
4691 @styleset { double-W: 14; sharp-terminals: 16 1; }
4692 }</pre>
4693 </div>
4695 <p>If multiple <a
4696 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
4697 rules are defined for a given family, the resulting values definitions are
4698 the union of the definitions contained within these rules. This allows a
4699 set of named values to be defined for a given font family globally for a
4700 site and specific additions made per-page.
4702 <div class=example>
4703 <p>Using both site-wide and per-page feature values:</p>
4705 <pre>
4706 site.css:
4708 @font-feature-values Mercury Serif {
4709 @styleset {
4710 stacked-g: 3; /* "two-storey" versions of g, a */
4711 stacked-a: 4;
4712 }
4713 }
4715 page.css:
4717 @font-feature-values Mercury Serif {
4718 @styleset {
4719 geometric-m: 7; /* alternate version of m */
4720 }
4721 }
4723 body {
4724 font-family: Mercury Serif, serif;
4726 /* enable both the use of stacked g and alternate m */
4727 font-variant-alternates: styleset(stacked-g, geometric-m);
4728 }</pre>
4729 </div>
4731 <div class=example>
4732 <p>Using a commonly named value allows authors to use a single style rule
4733 to cover a set of fonts for which the underlying selector is different
4734 for each font. If either font in the example below is found, a circled
4735 number glyph will be used:</p>
4737 <pre>@font-feature-values Taisho Gothic {
4738 @annotation { boxed: 1; circled: 4; }
4739 }
4741 @font-feature-values Otaru Kisa {
4742 @annotation { circled: 1; black-boxed: 3; }
4743 }
4745 h3.title {
4746 /* circled form defined for both fonts */
4747 font-family: Taisho Gothic, Otaru Kisa;
4748 font-variant: annotation(circled);
4749 }</pre>
4750 </div>
4752 <h4 id=multi-valued-feature-value-definitions><span class=secno>6.9.2
4753 </span>Multi-valued feature value definitions</h4>
4755 <p>Most <a href="#font-specific"><em>font specific</em></a> ‘<a
4756 href="#propdef-font-variant-alternates"><code
4757 class=property>font-variant-alternates</code></a>’ property values take
4758 a single value (e.g. ‘<a href="#swash"><code
4759 class=property>swash</code></a>’). The ‘<a
4760 href="#character-variant"><code
4761 class=property>character-variant</code></a>’ property value allows two
4762 values and ‘<a href="#styleset"><code
4763 class=property>styleset</code></a>’ allows an unlimited number.
4765 <p>For the styleset property value, multiple values indicate the style sets
4766 to be enabled. Values between 1 and 99 enable OpenType features <span
4767 class=tag>ss01</span> through <span class=tag>ss99</span>. However, the
4768 OpenType standard only officially defines <span class=tag>ss01</span>
4769 through <span class=tag>ss20</span>. For OpenType fonts, values greater
4770 than 99 or equal to 0 do not generate a syntax error when parsed but
4771 enable no OpenType features.
4773 <pre>@font-feature-values Mars Serif {
4774 @styleset {
4775 alt-g: 1; /* implies ss01 = 1 */
4776 curly-quotes: 3; /* implies ss03 = 1 */
4777 code: 4 5; /* implies ss04 = 1, ss05 = 1 */
4778 }
4780 @styleset {
4781 dumb: 125; /* >99, ignored */
4782 }
4784 @swash {
4785 swishy: 3 5; /* more than 1 value for swash, syntax error */
4786 }
4787 }
4789 p.codeblock {
4790 /* implies ss03 = 1, ss04 = 1, ss05 = 1 */
4791 font-variant-alternates: styleset(curly-quotes, code);
4792 }</pre>
4794 <p>For character-variant, a single value between 1 and 99 indicates the
4795 enabling of OpenType feature <span class=tag>cv01</span> through <span
4796 class=tag>cv99</span>. For OpenType fonts, values greater than 99 or equal
4797 to 0 are ignored but do not generate a syntax error when parsed but enable
4798 no OpenType features. When two values are listed, the first value
4799 indicates the feature used and the second the value passed for that
4800 feature. If more than two values are assigned to a given name, a syntax
4801 error occurs and the entire <a href="#featurevaluedefinition"><i
4802 title="feature_value_definition">feature value definition</i></a> is
4803 ignored.
4805 <pre>@font-feature-values MM Greek {
4806 @character-variant { alpha-2: 1 2; } /* implies cv01 = 2 */
4807 @character-variant { beta-3: 2 3; } /* implies cv02 = 3 */
4808 @character-variant { epsilon: 5 3 6; } /* more than 2 values, syntax error, definition ignored */
4809 @character-variant { gamma: 12; } /* implies cv12 = 1 */
4810 @character-variant { zeta: 20 3; } /* implies cv20 = 3 */
4811 @character-variant { zeta-2: 20 2; } /* implies cv20 = 2 */
4812 @character-variant { silly: 105; } /* >99, ignored */
4813 @character-variant { dumb: 323 3; } /* >99, ignored */
4814 }
4816 #title {
4817 /* use the third alternate beta, first alternate gamma */
4818 font-variant-alternates: character-variant(beta-3, gamma);
4819 }
4821 p {
4822 /* zeta-2 follows zeta, implies cv20 = 2 */
4823 font-variant-alternates: character-variant(zeta, zeta-2);
4824 }
4826 .special {
4827 /* zeta follows zeta-2, implies cv20 = 3 */
4828 font-variant-alternates: character-variant(zeta-2, zeta);
4829 }</pre>
4831 <div class=figure><img alt="Matching text on Byzantine seals using
4832 character variants" src=byzantineseal.png>
4833 <p class=caption>Byzantine seal text displayed with character variants
4834 </div>
4836 <div class=example>
4837 <p>In the figure above, the text in red is rendered using a font
4838 containing character variants that mimic the character forms found on a
4839 Byzantine seal from the 8th century A.D. Two lines below is the same text
4840 displayed in a font without variants. Note the two variants for U and N
4841 used on the seal.</p>
4843 <pre>@font-feature-values Athena Ruby {
4844 @character-variant {
4845 leo-B: 2 1;
4846 leo-M: 13 3;
4847 leo-alt-N: 14 1;
4848 leo-N: 14 2;
4849 leo-T: 20 1;
4850 leo-U: 21 2;
4851 leo-alt-U: 21 4;
4852 }
4853 }
4855 p {
4856 font-variant: discretionary-ligatures,
4857 character-variant(leo-B, leo-M, leo-N, leo-T, leo-U);
4858 }
4860 span.alt-N {
4861 font-variant-alternates: character-variant(leo-alt-N);
4862 }
4864 span.alt-U {
4865 font-variant-alternates: character-variant(leo-alt-U);
4866 }
4868 <p>ENO....UP͞RSTU<span class="alt-U">U</span>͞<span class="alt-U">U</span>ΚΑΙTỤẠG̣IUPNS</p>
4870 <p>LEON|ΚΑΙCONSTA|NTI<span class="alt-N">N</span>OS..|STOIBAṢ.|LIṢROM|AIO<span class="alt-N">N</span></p>
4871 </pre>
4872 </div>
4874 <h3 id=font-variant-east-asian-prop><span class=secno>6.10 </span>East
4875 Asian text rendering: the <a
4876 href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
4877 property</h3>
4879 <table class=propdef id=namefont-variant-east-asianvaluenormal-l>
4880 <tbody>
4881 <tr>
4882 <td>Name:
4884 <td><dfn
4885 id=propdef-font-variant-east-asian>font-variant-east-asian</dfn>
4887 <tr>
4888 <td>Value:
4890 <td><a href="#font-variant-east-asian-normal-value"
4891 title="normal!!font-variant-east-asian">normal</a> | [ <a
4892 href="#east-asian-variant-values"><var><east-asian-variant-values></var></a>
4893 || <a
4894 href="#east-asian-width-values"><var><east-asian-width-values></var></a>
4895 || <a href="#ruby">ruby</a> ]
4897 <tr>
4898 <td>Initial:
4900 <td>normal
4902 <tr>
4903 <td>Applies to:
4905 <td>all elements
4907 <tr>
4908 <td>Inherited:
4910 <td>yes
4912 <tr>
4913 <td>Percentages:
4915 <td>N/A
4917 <tr>
4918 <td>Media:
4920 <td>visual
4922 <tr>
4923 <td>Computed value:
4925 <td>as specified
4927 <tr>
4928 <td>Animatable:
4930 <td>no
4931 </table>
4933 <p>Allows control of glyph substitution and sizing in East Asian text.
4935 <pre
4936 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>
4938 <pre
4939 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>
4941 <p>Individual values have the following meanings:
4943 <dl>
4944 <dt><dfn id=font-variant-east-asian-normal-value
4945 title="normal!!font-variant-east-asian">normal</dfn>
4947 <dd>None of the features listed below are enabled.
4949 <dt><dfn id=jis78>jis78</dfn>
4951 <dd>Enables rendering of JIS78 forms (OpenType feature: <span
4952 class=tag>jp78</span>).
4953 </dl>
4955 <div class=featex><img alt="JIS78 form example" src=jp78.png></div>
4957 <dl>
4958 <dt><dfn id=jis83>jis83</dfn>
4960 <dd>Enables rendering of JIS83 forms (OpenType feature: <span
4961 class=tag>jp83</span>).
4963 <dt><dfn id=jis90>jis90</dfn>
4965 <dd>Enables rendering of JIS90 forms (OpenType feature: <span
4966 class=tag>jp90</span>).
4968 <dt><dfn id=jis04>jis04</dfn>
4970 <dd>Enables rendering of JIS2004 forms (OpenType feature: <span
4971 class=tag>jp04</span>).
4972 <p>The various JIS variants reflect the glyph forms defined in different
4973 Japanese national standards. Fonts generally include glyphs defined by
4974 the most recent national standard but it's sometimes necessary to use
4975 older variants, to match signage for example.</p>
4977 <dt><dfn id=simplified>simplified</dfn>
4979 <dd>Enables rendering of simplified forms (OpenType feature: <span
4980 class=tag>smpl</span>).
4982 <dt><dfn id=traditional>traditional</dfn>
4984 <dd>Enables rendering of traditional forms (OpenType feature: <span
4985 class=tag>trad</span>).
4986 </dl>
4988 <p>The ‘<a href="#simplified"><code
4989 class=property>simplified</code></a>’ and ‘<a
4990 href="#traditional"><code class=property>traditional</code></a>’ values
4991 allow control over the glyph forms for characters which have been
4992 simplified over time but for which the older, traditional form is still
4993 used in some contexts. The exact set of characters and glyph forms will
4994 vary to some degree by context for which a given font was designed.
4996 <div class=featex><img alt="tradtional form example" src=trad.png></div>
4998 <dl>
4999 <dt><dfn id=full-width>full-width</dfn>
5001 <dd>Enables rendering of full-width variants (OpenType feature: <span
5002 class=tag>fwid</span>).
5004 <dt><dfn id=proportional-width>proportional-width</dfn>
5006 <dd>Enables rendering of proportionally-spaced variants (OpenType feature:
5007 <span class=tag>pwid</span>).
5008 </dl>
5010 <div class=featex><img alt="proportionally spaced Japanese example"
5011 src=pwid.png></div>
5013 <dl>
5014 <dt><dfn id=ruby>ruby</dfn>
5016 <dd>Enables display of ruby variant glyphs (OpenType feature: <span
5017 class=tag>ruby</span>). Since ruby text is generally smaller than the
5018 associated body text, font designers can design special glyphs for use
5019 with ruby that are more readable than scaled down versions of the default
5020 glyphs. Only glyph selection is affected, there is no associated font
5021 scaling or other change that affects line layout. The red ruby text below
5022 is shown with default glyphs (top) and with ruby variant glyphs (bottom).
5023 Note the slight difference in stroke thickness.
5024 </dl>
5026 <div class=featex><img alt="ruby variant example" src=rubyshinkansen.png></div>
5028 <h3 id=font-variant-prop><span class=secno>6.11 </span>Overall shorthand
5029 for font rendering: the <a href="#propdef-font-variant">font-variant</a>
5030 property</h3>
5032 <table class=propdef id=namefont-variantvaluenormal-none-ltcommo>
5033 <tbody>
5034 <tr>
5035 <td>Name:
5037 <td><dfn id=propdef-font-variant
5038 title="font-variant!!property">font-variant</dfn>
5040 <tr>
5041 <td>Value:
5043 <td><a href="#font-variant-normal-value"
5044 title="normal!!font-variant">normal</a> | <a
5045 href="#font-variant-none-value" title="none!!font-variant">none</a> | [
5046 <a href="#common-lig-values"><var><common-lig-values></var></a>
5047 || <a
5048 href="#discretionary-lig-values"><var><discretionary-lig-values></var></a>
5049 || <a
5050 href="#historical-lig-values"><var><historical-lig-values></var></a>
5051 || <a
5052 href="#contextual-alt-values"><var><contextual-alt-values></var></a>
5053 || <a href="#stylistic"><var
5054 title=stylistic>stylistic(<feature-value-name>)</var></a> || <a
5055 href="#historical-forms"><var>historical-forms</var></a> || <a
5056 href="#styleset"><var
5057 title=styleset>styleset(<feature-value-name> #)</var></a> || <a
5058 href="#character-variant"><var
5059 title=character-variant>character-variant(<feature-value-name>
5060 #)</var></a> || <a href="#swash"><var
5061 title=swash>swash(<feature-value-name>)</var></a> || <a
5062 href="#ornaments"><var
5063 title=ornaments>ornaments(<feature-value-name>)</var></a> || <a
5064 href="#annotation"><var
5065 title=annotation>annotation(<feature-value-name>)</var></a> || [
5066 <a href="#small-caps"><i>small-caps</i></a> | <a
5067 href="#all-small-caps"><i>all-small-caps</i></a> | <a
5068 href="#petite-caps"><i>petite-caps</i></a> | <a
5069 href="#all-petite-caps"><i>all-petite-caps</i></a> | <a
5070 href="#unicase"><i>unicase</i></a> | <a
5071 href="#titling-caps"><i>titling-caps</i></a> ] || <a
5072 href="#numeric-figure-values"><var><numeric-figure-values></var></a>
5073 || <a
5074 href="#numeric-spacing-values"><var><numeric-spacing-values></var></a>
5075 || <a
5076 href="#numeric-fraction-values"><var><numeric-fraction-values></var></a>
5077 || <a href="#ordinal"><i>ordinal</i></a> || <a
5078 href="#slashed-zero"><i>slashed-zero</i></a> || <a
5079 href="#east-asian-variant-values"><var><east-asian-variant-values></var></a>
5080 || <a
5081 href="#east-asian-width-values"><var><east-asian-width-values></var></a>
5082 || <a href="#ruby"><i>ruby</i></a> ]
5084 <tr>
5085 <td>Initial:
5087 <td>normal
5089 <tr>
5090 <td>Applies to:
5092 <td>all elements
5094 <tr>
5095 <td>Inherited:
5097 <td>yes
5099 <tr>
5100 <td>Percentages:
5102 <td>see individual properties
5104 <tr>
5105 <td>Media:
5107 <td>visual
5109 <tr>
5110 <td>Computed value:
5112 <td>see individual properties
5114 <tr>
5115 <td>Animatable:
5117 <td>see individual properties
5118 </table>
5120 <p>The <a href="#propdef-font-variant"
5121 title="font-variant!!property">‘<code
5122 class=property>font-variant</code>’</a> property is a shorthand for all
5123 font-variant subproperties. The value <dfn id=font-variant-normal-value
5124 title="normal!!font-variant">‘<code
5125 class=property>normal</code>’</dfn> resets all subproperties of <a
5126 href="#propdef-font-variant" title="font-variant!!property">‘<code
5127 class=property>font-variant</code>’</a> to their inital value. The <dfn
5128 id=font-variant-none-value title="none!!font-variant">‘<code
5129 class=property>none</code>’</dfn> value sets ‘<a
5130 href="#propdef-font-variant-ligatures"><code
5131 class=property>font-variant-ligatures</code></a>’ to ‘<code
5132 class=property>none</code>’ and resets all other font feature properties
5133 to their initial value. Like other shorthands, using <a
5134 href="#propdef-font-variant" title="font-variant!!property">‘<code
5135 class=property>font-variant</code>’</a> resets unspecified <a
5136 href="#propdef-font-variant" title="font-variant!!property">‘<code
5137 class=property>font-variant</code>’</a> subproperties to their initial
5138 values. It does not reset the values of either ‘<a
5139 href="#propdef-font-language-override"><code
5140 class=property>font-language-override</code></a>’ or <a
5141 href="#propdef-font-feature-settings"
5142 title="font-feature-settings!!property">‘<code
5143 class=property>font-feature-settings</code>’</a>.
5145 <h3 id=font-feature-settings-prop><span class=secno>6.12 </span>Low-level
5146 font feature settings control: the <a
5147 href="#propdef-font-feature-settings">font-feature-settings</a> property</h3>
5149 <table class=propdef id=namefont-feature-settingsvaluenormal-ltf>
5150 <tbody>
5151 <tr>
5152 <td>Name:
5154 <td><dfn id=propdef-font-feature-settings
5155 title="font-feature-settings!!property">font-feature-settings</dfn>
5157 <tr>
5158 <td>Value:
5160 <td><a href="#font-feature-settings-normal-value"
5161 title="normal!!font-feature-settings">normal</a> | <a
5162 href="#feature-tag-value"><var><feature-tag-value></var></a> #
5164 <tr>
5165 <td>Initial:
5167 <td>normal
5169 <tr>
5170 <td>Applies to:
5172 <td>all elements
5174 <tr>
5175 <td>Inherited:
5177 <td>yes
5179 <tr>
5180 <td>Percentages:
5182 <td>N/A
5184 <tr>
5185 <td>Media:
5187 <td>visual
5189 <tr>
5190 <td>Computed value:
5192 <td>as specified
5194 <tr>
5195 <td>Animatable:
5197 <td>no
5198 </table>
5200 <p>This property provides low-level control over OpenType font features. It
5201 is intended as a way of providing access to font features that are not
5202 widely used but are needed for a particular use case.
5204 <p>Authors should generally use <a href="#propdef-font-variant"
5205 title="font-variant!!property">‘<code
5206 class=property>font-variant</code>’</a> and its related subproperties
5207 whenever possible and only use this property for special cases where its
5208 use is the only way of accessing a particular infrequently used font
5209 feature.
5211 <pre>/* enable small caps and use second swash alternate */
5212 font-feature-settings: "smcp", "swsh" 2;</pre>
5214 <p>A value of <dfn id=font-feature-settings-normal-value
5215 title="normal!!font-feature-settings">‘<code
5216 class=property>normal</code>’</dfn> means that no change in glyph
5217 selection or positioning occurs due to this property.
5219 <p>Feature tag values have the following syntax:
5221 <pre
5222 class=prod><dfn id=feature-tag-value><var><feature-tag-value></var></dfn> = <string> [ <integer> | on | off ]?</pre>
5224 <p>The <string> is a case-sensitive OpenType feature tag. As
5225 specified in the OpenType specification, feature tags contain four ASCII
5226 characters. Tag strings longer or shorter than four characters, or
5227 containing characters outside the U+20–7E codepoint range are invalid.
5228 Feature tags need only match a feature tag defined in the font, so they
5229 are not limited to explicitly registered OpenType features. Fonts defining
5230 custom feature tags should follow the <a
5231 href="http://www.microsoft.com/typography/otspec/featuretags.htm">tag name
5232 rules</a> defined in the OpenType specification <a
5233 href="#OPENTYPE-FEATURES"
5234 rel=biblioentry>[OPENTYPE-FEATURES]<!--{{!OPENTYPE-FEATURES}}--></a>.
5235 Feature tags not present in the font are ignored; a user agent must not
5236 attempt to synthesize fallback behavior based on these feature tags.
5238 <p>This means that explicitly disabling the <span class=tag>kern</span>
5239 feature will not affect the application of kerning data found in the
5240 ‘<code class=property>kern</code>’ table (as opposed to kerning data
5241 associated with the <span class=tag>kern</span> feature in the ‘<code
5242 class=property>GPOS</code>’ table). Authors should use the ‘<a
5243 href="#propdef-font-kerning"><code
5244 class=property>font-kerning</code></a>’ property to explictly enable or
5245 disable kerning since this property affects both types of kerning.
5247 <p>If present, a value indicates an index used for glyph selection. An
5248 <integer> value must be 0 or greater. A value of 0 indicates that
5249 the feature is disabled. For boolean features, a value of 1 enables the
5250 feature. For non-boolean features, a value of 1 or greater enables the
5251 feature and indicates the feature selection index. A value of ‘<code
5252 class=property>on</code>’ is synonymous with 1 and ‘<code
5253 class=property>off</code>’ is synonymous with 0. If the value is
5254 omitted, a value of 1 is assumed.
5256 <pre>
5257 font-feature-settings: "dlig" 1; /* dlig=1 enable discretionary ligatures */
5258 font-feature-settings: "smcp" on; /* smcp=1 enable small caps */
5259 font-feature-settings: 'c2sc'; /* c2sc=1 enable caps to small caps */
5260 font-feature-settings: "liga" off; /* liga=0 no common ligatures */
5261 font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms */
5262 font-feature-settings: "tnum" "hist"; /* invalid, need a comma-delimited list */
5263 font-feature-settings: "palin" off; /* good idea but invalid tagname */
5264 font-feature-settings: "PKRN"; /* PKRN=1 enable custom feature */
5265 font-feature-settings: dlig; /* invalid, tag must be a string */
5266 </pre>
5268 <p>When values greater than the range supported by the font are specified,
5269 the behavior is explicitly undefined. For boolean features, in general
5270 these will enable the feature. For non-boolean features, out of range
5271 values will in general be equivalent to a 0 value. However, in both cases
5272 the exact behavior will depend upon the way the font is designed
5273 (specifically, which type of lookup is used to define the feature).
5275 <p>Although specifically defined for OpenType feature tags, feature tags
5276 for other modern font formats that support font features may be added in
5277 the future. Where possible, features defined for other font formats should
5278 attempt to follow the pattern of registered OpenType tags.
5280 <div class=example>
5281 <p>The Japanese text below will be rendered with half-width kana
5282 characters:</p>
5284 <pre lang=ja>
5285 body { font-feature-settings: "hwid"; /* Half-width OpenType feature */ }
5287 <p>毎日<a href="http://images.google.com/images?q=%E3%82%AB%E3%83%AC%E3%83%BC" style="text-decoration: none;">カレー</a>食べてるのに、飽きない</p>
5288 </pre>
5289 </div>
5291 <h3 id=font-language-override-prop><span class=secno>6.13 </span>Font
5292 language override: the <a
5293 href="#propdef-font-language-override">font-language-override</a> property</h3>
5295 <table class=propdef id=namefont-language-overridevaluenormal-lt>
5296 <tbody>
5297 <tr>
5298 <td>Name:
5300 <td><dfn id=propdef-font-language-override>font-language-override</dfn>
5302 <tr>
5303 <td>Value:
5305 <td><a href="#font-language-override-normal-value"
5306 title="normal!!font-language-override">normal</a> | <a
5307 href="#font-language-override-string-value"><var><string></var></a>
5309 <tr>
5310 <td>Initial:
5312 <td><a href="#font-language-override-normal-value"
5313 title="normal!!font-language-override">normal</a>
5315 <tr>
5316 <td>Applies to:
5318 <td>all elements
5320 <tr>
5321 <td>Inherited:
5323 <td>yes
5325 <tr>
5326 <td>Percentages:
5328 <td>N/A
5330 <tr>
5331 <td>Media:
5333 <td>visual
5335 <tr>
5336 <td>Computed value:
5338 <td>as specified
5340 <tr>
5341 <td>Animatable:
5343 <td>no
5344 </table>
5346 <p>Normally, authors can control the use of language-specific glyph
5347 substitutions and positioning by setting the content language of an
5348 element, as <a href="#language-specific-support">described above</a>:
5350 <pre><!-- Display text using S'gaw Karen specific features -->
5351 <p lang="ksw">...</p></pre>
5353 <p>In some cases, authors may need to specify a language system that
5354 differs from the content language, for example due to the need to mimic
5355 another language's typographic traditions. The ‘<a
5356 href="#propdef-font-language-override"><code
5357 class=property>font-language-override</code></a>’ property allows
5358 authors to explicitly specify the language system of the font, overriding
5359 the language system implied by the content language.
5361 <p>Values have the following meanings:
5363 <dl>
5364 <dt><dfn id=font-language-override-normal-value
5365 title="normal!!font-language-override">normal</dfn>
5367 <dd>specifies that when rendering with OpenType fonts, the content
5368 language of the element is used to infer the OpenType language system
5370 <dt><dfn
5371 id=font-language-override-string-value><var><string></var></dfn>
5373 <dd>single three-letter OpenType <a
5374 href="http://www.microsoft.com/typography/otspec/languagetags.htm">language
5375 system tag</a>, specifies the OpenType language system to be used instead
5376 of the language system implied by the language of the element
5377 </dl>
5379 <p>Use of invalid OpenType language system tags must not generate a parse
5380 error but must be ignored when doing glyph selection and placement.
5382 <div class=example>
5383 <p>The <a href="http://www.un.org/en/documents/udhr/index.shtml">Universal
5384 Declaration of Human Rights</a> has been translated into a wide variety
5385 of languages. In Turkish, Article 9 of this document might be marked up
5386 as below:</p>
5388 <pre lang=tr><body lang="tr">
5390 <h4>Madde 9</h4>
5391 <p>Hiç kimse keyfi olarak tutuklanamaz, alıkonulanamaz veya sürülemez.</p>
5392 </pre>
5394 <p>Here the user agent uses the value of the ‘<code
5395 class=property>lang</code>’ attribute when rendering text and
5396 appropriately renders this text without ‘<code
5397 class=property>fi</code>’ ligatures. There is no need to use the ‘<a
5398 href="#propdef-font-language-override"><code
5399 class=property>font-language-override</code></a>’ property.</p>
5401 <p>However, a given font may lack support for a specific language. In this
5402 situation authors may need to use the typographic conventions of a
5403 related language that are supported by that font:</p>
5405 <pre lang=mk><body lang="mk"> <!-- Macedonian lang code -->
5407 body { font-language-override: "SRB"; /* Serbian OpenType language tag */ }
5409 <h4>Члeн 9</h4>
5410 <p>Никoj чoвeк нeмa дa бидe пoдлoжeн нa прoизвoлнo aпсeњe, притвoр или прoгoнувaњe.</p>
5412 </pre>
5414 <p>The Macedonian text here will be rendered using Serbian typographic
5415 conventions, with the assumption that the font specified supports
5416 Serbian.</p>
5417 </div>
5419 <p><a id=rendering-considerations></a>
5421 <h2 id=font-feature-resolution><span class=secno>7 </span>Font Feature
5422 Resolution</h2>
5424 <p>As described in the previous section, font features can be enabled in a
5425 variety of ways, either via the use of <a href="#propdef-font-variant"
5426 title="font-variant!!property">‘<code
5427 class=property>font-variant</code>’</a> or <a
5428 href="#propdef-font-feature-settings"
5429 title="font-feature-settings!!property">‘<code
5430 class=property>font-feature-settings</code>’</a> in a style rule or
5431 within an <a href="#at-font-face-rule"><code>@font-face</code></a> rule.
5432 The resolution order for the union of these settings is defined below.
5433 Features defined via CSS properties are applied on top of layout engine
5434 default features.
5436 <h3 id=default-features><span class=secno>7.1 </span>Default features</h3>
5438 <p>For OpenType fonts, user agents must enable the default features defined
5439 in the OpenType documentation for a given script and writing mode.
5440 Required ligatures, common ligatures and contextual forms must be enabled
5441 by default (OpenType features: <span class=tag>rlig, liga, clig,
5442 calt</span>), along with localized forms (OpenType feature: <span
5443 class=tag>locl</span>), and features required for proper display of
5444 composed characters and marks (OpenType features: <span class=tag>ccmp,
5445 mark, mkmk</span>). These features must always be enabled, even when the
5446 value of the <a href="#propdef-font-variant"
5447 title="font-variant!!property">‘<code
5448 class=property>font-variant</code>’</a> and <a
5449 href="#propdef-font-feature-settings"
5450 title="font-feature-settings!!property">‘<code
5451 class=property>font-feature-settings</code>’</a> properties is ‘<a
5452 href="#normal"><code class=property>normal</code></a>’. Individual
5453 features are only disabled when explicitly overridden by the author, as
5454 when ‘<a href="#propdef-font-variant-ligatures"><code
5455 class=property>font-variant-ligatures</code></a>’ is set to ‘<a
5456 href="#no-common-ligatures"><code
5457 class=property>no-common-ligatures</code></a>’. For handling complex
5458 scripts such as <a
5459 href="http://www.microsoft.com/typography/otfntdev/arabicot/features.aspx">Arabic</a>,
5460 <a
5461 href="http://www.microsoft.com/typography/otfntdev/mongolot/features.htm">Mongolian</a>
5462 or <a
5463 href="http://www.microsoft.com/typography/otfntdev/devanot/features.aspx">Devanagari</a>
5464 additional features are required. For upright text within vertical text
5465 runs, vertical alternates (OpenType feature: <span class=tag>vert</span>)
5466 must be enabled.
5468 <h3 id=feature-precedence><span class=secno>7.2 </span>Feature precedence</h3>
5470 <p>General and <a href="#font-specific"><em>font specific</em></a> font
5471 feature property settings are resolved in the order below, in ascending
5472 order of precedence. This ordering is used to construct a combined list of
5473 font features that affect a given text run.
5475 <ol>
5476 <li>Font features enabled by default, including features required for a
5477 given script.
5479 <li>If the font is defined via an <a
5480 href="#at-font-face-rule"><code>@font-face</code></a> rule, the font
5481 features implied by the font-variant descriptor in the <a
5482 href="#at-font-face-rule"><code>@font-face</code></a> rule.
5484 <li>If the font is defined via an <a
5485 href="#at-font-face-rule"><code>@font-face</code></a> rule, the font
5486 features implied by the font-feature-settings descriptor in the <a
5487 href="#at-font-face-rule"><code>@font-face</code></a> rule.
5489 <li>Feature settings determined by properties other than <a
5490 href="#propdef-font-variant" title="font-variant!!property">‘<code
5491 class=property>font-variant</code>’</a> or <a
5492 href="#propdef-font-feature-settings"
5493 title="font-feature-settings!!property">‘<code
5494 class=property>font-feature-settings</code>’</a>. For example, setting
5495 a non-default value for the ‘<code
5496 class=property>letter-spacing</code>’ property disables common
5497 ligatures.
5499 <li>Font features implied by the value of the <a
5500 href="#propdef-font-variant" title="font-variant!!property">‘<code
5501 class=property>font-variant</code>’</a> property, the related <a
5502 href="#propdef-font-variant" title="font-variant!!property">‘<code
5503 class=property>font-variant</code>’</a> subproperties and any other CSS
5504 property that uses OpenType features (e.g. the ‘<a
5505 href="#propdef-font-kerning"><code
5506 class=property>font-kerning</code></a>’ property).
5508 <li>Font features implied by the value of <a
5509 href="#propdef-font-feature-settings"
5510 title="font-feature-settings!!property">‘<code
5511 class=property>font-feature-settings</code>’</a> property.
5512 </ol>
5514 <p>This ordering allows authors to set up a general set of defaults for
5515 fonts within their <a
5516 href="#at-font-face-rule"><code>@font-face</code></a> rules, then override
5517 them with property settings for specific elements. General property
5518 settings override the settings in <a
5519 href="#at-font-face-rule"><code>@font-face</code></a> rules and low-level
5520 font feature settings override <a href="#propdef-font-variant"
5521 title="font-variant!!property">‘<code
5522 class=property>font-variant</code>’</a> property settings.
5524 <p>For situations where the combined list of font feature settings contains
5525 more than one value for the same feature, the last value is used. When a
5526 font lacks support for a given underlying font feature, text is simply
5527 rendered as if that font feature was not enabled; font fallback does not
5528 occur and no attempt is made to synthesize the feature except where
5529 explicitly defined for specific properties.
5531 <h3 id=feature-precedence-examples><span class=secno>7.3 </span>Feature
5532 precedence examples</h3>
5534 <div class=example>
5535 <p>With the styles below, numbers are rendered proportionally when used
5536 within a paragraph but are shown in tabular form within tables of prices:</p>
5538 <pre>body {
5539 font-variant-numeric: proportional-nums;
5540 }
5542 table.prices td {
5543 font-variant-numeric: tabular-nums;
5544 }
5545 </pre>
5546 </div>
5548 <div class=example>
5549 <p>When the <a href="#descdef-font-variant"
5550 title="font-variant!!descriptor">font-variant</a> descriptor is used
5551 within an <a href="#at-font-face-rule"><code>@font-face</code></a> rule,
5552 it only applies to the font defined by that rule.</p>
5554 <pre>@font-face {
5555 font-family: MainText;
5556 src: url(http://example.com/font.ttf);
5557 font-variant: oldstyle-nums proportional-nums styleset(1,3);
5558 }
5560 body {
5561 font-family: MainText, Helvetica;
5562 }
5564 table.prices td {
5565 font-variant-numeric: tabular-nums;
5566 }
5567 </pre>
5569 <p>In this case, old-style numerals will be used throughout but only where
5570 the font "MainText" is used. Just as in the previous example, tabular
5571 values will be used in price tables since ‘<a
5572 href="#tabular-nums"><code class=property>tabular-nums</code></a>’
5573 appears in a general style rule and its use is mutually exclusive with
5574 ‘<a href="#proportional-nums"><code
5575 class=property>proportional-nums</code></a>’. Stylistic alternate sets
5576 will only be used where MainText is used.</p>
5577 </div>
5579 <div class=example>
5580 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule can
5581 also be used to access font features in locally available fonts via the
5582 use of <code>local()</code> in the ‘<a href="#descdef-src"><code
5583 class=property>src</code></a>’ descriptor of the <a
5584 href="#at-font-face-rule"><code>@font-face</code></a> definition:</p>
5586 <pre>@font-face {
5587 font-family: BodyText;
5588 src: local("HiraMaruPro-W4");
5589 font-variant: proportional-width;
5590 font-feature-settings: "ital"; /* Latin italics within CJK text feature */
5591 }
5593 body { font-family: BodyText, serif; }
5594 </pre>
5596 <p>If available, a Japanese font "Hiragino Maru Gothic" will be used. When
5597 text rendering occurs, Japanese kana will be proportionally spaced and
5598 Latin text will be italicised. Text rendered with the fallback serif font
5599 will use default rendering properties.</p>
5600 </div>
5602 <div class=example>
5603 <p>In the example below, discretionary ligatures are enabled only for a
5604 downloadable font but are disabled within spans of class "special":</p>
5606 <pre>@font-face {
5607 font-family: main;
5608 src: url(fonts/ffmeta.woff) format("woff");
5609 font-variant: discretionary-ligatures;
5610 }
5612 body { font-family: main, Helvetica; }
5613 span.special { font-variant-ligatures: no-discretionary-ligatures; }
5614 </pre>
5616 <p>Suppose one adds a rule using ‘<code
5617 class=property>font-feature-settings</code>’ to enable discretionary
5618 ligatures:</p>
5620 <pre>body { font-family: main, Helvetica; }
5621 span { font-feature-settings: "dlig"; }
5622 span.special { font-variant-ligatures: no-discretionary-ligatures; }
5623 </pre>
5625 <p>In this case, discretionary ligatures <em>will</em> be rendered within
5626 spans of class "special". This is because both the <a
5627 href="#propdef-font-feature-settings"
5628 title="font-feature-settings!!property">‘<code
5629 class=property>font-feature-settings</code>’</a> and ‘<a
5630 href="#propdef-font-variant-ligatures"><code
5631 class=property>font-variant-ligatures</code></a>’ properties apply to
5632 these spans. Although the ‘<code class=css>no-discretionary
5633 ligatures</code>’ setting of ‘<a
5634 href="#propdef-font-variant-ligatures"><code
5635 class=property>font-variant-ligatures</code></a>’ effectively disables
5636 the OpenType <span class=tag>dlig</span> feature, because the <a
5637 href="#propdef-font-feature-settings"
5638 title="font-feature-settings!!property">‘<code
5639 class=property>font-feature-settings</code>’</a> is resolved after
5640 that, the ‘<code class=property>dlig</code>’ value reenables
5641 discretionary ligatures.</p>
5642 </div>
5644 <h2 id=object-model><span class=secno>8 </span>Object Model</h2>
5646 <p>The contents of <a href="#at-font-face-rule"><code>@font-face</code></a>
5647 and <a
5648 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
5649 rules can be accessed via the following extensions to the CSS Object
5650 Model.
5652 <h3 id=om-fontface><span class=secno>8.1 </span>The <a
5653 href="#cssfontfacerule"><code>CSSFontFaceRule</code></a> interface</h3>
5655 <p>The <dfn id=cssfontfacerule>CSSFontFaceRule</dfn> interface represents a
5656 <a href="#at-font-face-rule"><code>@font-face</code></a> rule.
5658 <pre class=idl>
5659 interface CSSFontFaceRule : CSSRule {
5660 attribute DOMString family;
5661 attribute DOMString src;
5662 attribute DOMString style;
5663 attribute DOMString weight;
5664 attribute DOMString stretch;
5665 attribute DOMString unicodeRange;
5666 attribute DOMString variant;
5667 attribute DOMString featureSettings;
5668 }</pre>
5670 <p>The DOM Level 2 Style specification <a href="#DOM-LEVEL-2-STYLE"
5671 rel=biblioentry>[DOM-LEVEL-2-STYLE]<!--{{DOM-LEVEL-2-STYLE}}--></a>
5672 defined a different variant of this rule. This definition supercedes that
5673 one.
5675 <h3 id=om-fontfeaturevalues><span class=secno>8.2 </span>The <a
5676 href="#cssfontfeaturevaluesrule"><code>CSSFontFeatureValuesRule</code></a>
5677 interface</h3>
5679 <p>The <code>CSSRule</code> interface is extended as follows:
5681 <pre class=idl>partial interface CSSRule {
5682 const unsigned short FONT_FEATURE_VALUES_RULE = 14;
5683 }</pre>
5685 <p>The <dfn id=cssfontfeaturevaluesrule>CSSFontFeatureValuesRule</dfn>
5686 interface represents a <a
5687 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
5688 rule.
5690 <pre class=idl>interface CSSFontFeatureValuesRule : CSSRule {
5691 readonly attribute DOMString familyList;
5692 readonly attribute DOMString valueText;
5693 };</pre>
5695 <dl class=idl-attributes>
5696 <dt><var>familyList</var> of type <code>DOMString</code>, readonly
5698 <dd>The list of one or more font families for which a given set of feature
5699 values is defined.
5701 <dt><var>valueText</var> of type <code>DOMString</code>, readonly
5703 <dd>Serialized set of feature values.
5704 </dl>
5706 <p class=issue>Should this be extended to make <a
5707 href="#cssfontfeaturevaluesrule"><code>CSSFontFeatureValuesRule</code></a>
5708 be a subclass of <code>CSSGroupingRule</code> with other CSSRule
5709 subclasses for each value definition block?
5711 <h2 class=no-num id=platform-props-to-css>Appendix A: Mapping platform font
5712 properties to CSS properties</h2>
5714 <p><em>This appendix is included as background for some of the problems and
5715 situations that are described in other sections. It should be viewed as
5716 informative only.</em>
5718 <p>Font properties in CSS are designed to be independent of the underlying
5719 font formats used; they can be used to specify bitmap fonts, Type1 fonts,
5720 SVG fonts in addition to the common TrueType and OpenType fonts. But there
5721 are facets of the TrueType and OpenType formats that often cause confusion
5722 for authors and present challenges to implementers on different platforms.
5724 <p>Originally developed at Apple, TrueType was designed as an outline font
5725 format for both screen and print. Microsoft joined Apple in developing the
5726 TrueType format and both platforms have supported TrueType fonts since
5727 then. Font data in the TrueType format consists of a set of tables
5728 distinguished with common four-letter tag names, each containing a
5729 specific type of data. For example, naming information, including
5730 copyright and license information, is stored in the ‘<code
5731 class=property>name</code>’ table. The <a
5732 href="#character-map"><em>character map</em></a> (‘<code
5733 class=property>cmap</code>’) table contains a mapping of character
5734 encodings to glyphs. Apple later added additional tables for supporting
5735 enhanced typographic functionality; these are now called Apple Advanced
5736 Typography, or AAT, fonts. Microsoft and Adobe developed a separate set of
5737 tables for advanced typography and called their format OpenType <a
5738 href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>.
5740 <p>In many cases the font data used under Microsoft Windows or Linux is
5741 slightly different from the data used under Apple's Mac OS X because the
5742 TrueType format allowed for explicit variation across platforms. This
5743 includes font metrics, names and <a href="#character-map"><em>character
5744 map</em></a> data.
5746 <p>Specifically, font family name data is handled differently across
5747 platforms. For TrueType and OpenType fonts these names are contained in
5748 the ‘<code class=property>name</code>’ table, in name records with
5749 name ID 1. Mulitple names can be stored for different locales, but
5750 Microsoft recommends fonts always include at least a US English version of
5751 the name. On Windows, Microsoft made the decision for backwards
5752 compatibility to limit this family name to a maximum of four faces; for
5753 larger groupings the "preferred family" (name ID 16) or "WWS family" (name
5754 ID 21) can be used. Other platforms such as OSX don't have this
5755 limitation, so the family name is used to define all possible groupings.
5757 <p>Other name table data provides names used to uniquely identify a
5758 specific face within a family. The full font name (name ID 4) and the
5759 Postscript name (name ID 6) describe a single face uniquely. For example,
5760 the bold face of the Gill Sans family has a fullname of "Gill Sans Bold"
5761 and a Postscript name of "GillSans-Bold". There can be multiple localized
5762 versions of the fullname for a given face, but the Postscript name is
5763 always a unique name made from a limited set of ASCII characters.
5765 <p>On various platforms, different names are used to search for a font. For
5766 example, with the Windows GDI CreateIndirectFont API, either a family or
5767 fullname can be used to lookup a face, while on Mac OS X the
5768 CTFontCreateWithName API call is used to lookup a given face using the
5769 fullname and Postscript name. Under Linux, the fontconfig API allows fonts
5770 to be searched using any of these names. In situations where platform
5771 API's automatically substitute other font choices, it may be necessary to
5772 verify a returned font matches a given name.
5774 <p>The weight of a given face can be determined via the usWeightClass field
5775 of the OS/2 table or inferred from the style name (name ID 2). Likewise,
5776 the width can be determined via the usWidthClass of the OS/2 table or
5777 inferred from the style name. For historical reasons related to synthetic
5778 bolding at weights 200 or lower with the Windows GDI API, font designers
5779 have sometimes skewed values in the OS/2 table to avoid these weights.
5781 <p>Rendering complex scripts that use contextual shaping such as Thai,
5782 Arabic and Devanagari requires features present only in OpenType or AAT
5783 fonts. Currently, complex script rendering is supported on Windows and
5784 Linux using OpenType font features while both OpenType and AAT font
5785 features are used under Mac OS X.
5787 <h2 class=no-num id=ch-ch-ch-changes>Changes</h2>
5789 <h3 class=no-num id=recent-changes> Changes from the <a
5790 href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/">February 2013
5791 CSS3 Fonts Working Draft</a></h3>
5793 <p>Major changes include:
5795 <ul>
5796 <li>Moved font load events into a separate <a
5797 href="http://dev.w3.org/csswg/css3-font-load-events/">spec</a>
5799 <li>Tightened syntax rules for <a
5800 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
5801 rules
5803 <li>Added grammar productions for <a
5804 href="#at-font-face-rule"><code>@font-face</code></a> and <a
5805 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
5806 rules
5808 <li>Tightened definition of synthetic oblique
5810 <li>Revised definition of ‘<a href="#descdef-unicode-range"><code
5811 class=property>unicode-range</code></a>’ descriptor
5812 </ul>
5814 <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
5816 <p>I'd like to thank Tal Leming, Jonathan Kew and Christopher Slye for all
5817 their help and feedback. John Hudson was kind enough to take the time to
5818 explain the subtleties of OpenType language tags and provided the example
5819 of character variant usage for displaying text on Byzantine seals. Ken
5820 Lunde and Eric Muller provided valuable feedback on CJK OpenType features
5821 and Unicode variation selectors. The idea for supporting font features by
5822 using <a href="#propdef-font-variant"
5823 title="font-variant!!property">‘<code
5824 class=property>font-variant</code>’</a> subproperties originated with
5825 Håkon Wium Lie, Adam Twardoch and Tal Leming. Elika Etemad supplied some
5826 of the initial design ideas for the <a
5827 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
5828 rule. Thanks also to House Industries for allowing the use of Ed Interlock
5829 in the discretionary ligatures example.
5831 <p>A special thanks to Robert Bringhurst for the sublime mind expansion
5832 that is <em>The Elements of Typographic Style</em>.
5834 <h2 class=no-num id=conformance> Conformance</h2>
5836 <h3 class=no-num id=conventions> Document Conventions</h3>
5838 <p>Conformance requirements are expressed with a combination of descriptive
5839 assertions and RFC 2119 terminology. The key words “MUST”, “MUST
5840 NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
5841 “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
5842 normative parts of this document are to be interpreted as described in RFC
5843 2119. However, for readability, these words do not appear in all uppercase
5844 letters in this specification.
5846 <p>All of the text of this specification is normative except sections
5847 explicitly marked as non-normative, examples, and notes. <a
5848 href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
5850 <p>Examples in this specification are introduced with the words “for
5851 example” or are set apart from the normative text with
5852 <code>class="example"</code>, like this:
5854 <div class=example>
5855 <p>This is an example of an informative example.
5856 </div>
5858 <p>Informative notes begin with the word “Note” and are set apart from
5859 the normative text with <code>class="note"</code>, like this:
5861 <p class=note>Note, this is an informative note.
5863 <h3 class=no-num id=conformance-classes> Conformance Classes</h3>
5865 <p>Conformance to CSS Fonts Level 3 Module is defined for three conformance
5866 classes:
5868 <dl>
5869 <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
5870 sheet</dfn>
5872 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
5873 style sheet</a>.
5875 <dt><dfn id=renderer>renderer</dfn>
5877 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
5878 that interprets the semantics of a style sheet and renders documents that
5879 use them.
5881 <dt><dfn id=authoring-tool>authoring tool</dfn>
5883 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
5884 that writes a style sheet.
5885 </dl>
5887 <p>A style sheet is conformant to CSS Fonts Level 3 Module if all of its
5888 declarations that use properties defined in this module have values that
5889 are valid according to the generic CSS grammar and the individual grammars
5890 of each property as given in this module.
5892 <p>A renderer is conformant to CSS Fonts Level 3 Module if, in addition to
5893 interpreting the style sheet as defined by the appropriate specifications,
5894 it supports all the features defined by CSS Fonts Level 3 Module by
5895 parsing them correctly and rendering the document accordingly. However,
5896 the inability of a UA to correctly render a document due to limitations of
5897 the device does not make the UA non-conformant. (For example, a UA is not
5898 required to render color on a monochrome monitor.)
5900 <p>An authoring tool is conformant to CSS Fonts Level 3 Module if it writes
5901 style sheets that are syntactically correct according to the generic CSS
5902 grammar and the individual grammars of each feature in this module, and
5903 meet all other conformance requirements of style sheets as described in
5904 this module.
5906 <h3 class=no-num id=partial> Partial Implementations</h3>
5908 <p>So that authors can exploit the forward-compatible parsing rules to
5909 assign fallback values, CSS renderers <strong>must</strong> treat as
5910 invalid (and <a
5911 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
5912 appropriate</a>) any at-rules, properties, property values, keywords, and
5913 other syntactic constructs for which they have no usable level of support.
5914 In particular, user agents <strong>must not</strong> selectively ignore
5915 unsupported component values and honor supported values in a single
5916 multi-value property declaration: if any value is considered invalid (as
5917 unsupported values must be), CSS requires that the entire declaration be
5918 ignored.
5920 <h3 class=no-num id=experimental> Experimental Implementations</h3>
5922 <p>To avoid clashes with future CSS features, the CSS2.1 specification
5923 reserves a <a
5924 href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
5925 syntax</a> for proprietary and experimental extensions to CSS.
5927 <p>Prior to a specification reaching the Candidate Recommendation stage in
5928 the W3C process, all implementations of a CSS feature are considered
5929 experimental. The CSS Working Group recommends that implementations use a
5930 vendor-prefixed syntax for such features, including those in W3C Working
5931 Drafts. This avoids incompatibilities with future changes in the draft.
5933 <h3 class=no-num id=testing> Non-Experimental Implementations</h3>
5935 <p>Once a specification reaches the Candidate Recommendation stage,
5936 non-experimental implementations are possible, and implementors should
5937 release an unprefixed implementation of any CR-level feature they can
5938 demonstrate to be correctly implemented according to spec.
5940 <p>To establish and maintain the interoperability of CSS across
5941 implementations, the CSS Working Group requests that non-experimental CSS
5942 renderers submit an implementation report (and, if necessary, the
5943 testcases used for that implementation report) to the W3C before releasing
5944 an unprefixed implementation of any CSS features. Testcases submitted to
5945 W3C are subject to review and correction by the CSS Working Group.
5947 <p>Further information on submitting testcases and implementation reports
5948 can be found from on the CSS Working Group's website at <a
5949 href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
5950 Questions should be directed to the <a
5951 href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
5952 mailing list.
5954 <h2 class=no-num id=references>References</h2>
5956 <h3 class=no-num id=normative-references>Normative References</h3>
5957 <!--begin-normative-->
5958 <!-- Sorted by label -->
5960 <dl class=bibliography>
5961 <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
5962 <!---->
5964 <dt id=CHARMOD>[CHARMOD]
5966 <dd>Martin J. Dürst; et al. <a
5967 href="http://www.w3.org/TR/2005/REC-charmod-20050215/"><cite>Character
5968 Model for the World Wide Web 1.0: Fundamentals.</cite></a> 15 February
5969 2005. W3C Recommendation. URL: <a
5970 href="http://www.w3.org/TR/2005/REC-charmod-20050215/">http://www.w3.org/TR/2005/REC-charmod-20050215/</a>
5971 </dd>
5972 <!---->
5974 <dt id=CORS>[CORS]
5976 <dd>Anne van Kesteren. <a
5977 href="http://www.w3.org/TR/2013/CR-cors-20130129/"><cite>Cross-Origin
5978 Resource Sharing.</cite></a> 29 January 2013. W3C Candidate
5979 Recommendation. (Work in progress.) URL: <a
5980 href="http://www.w3.org/TR/2013/CR-cors-20130129/">http://www.w3.org/TR/2013/CR-cors-20130129/</a>
5981 </dd>
5982 <!---->
5984 <dt id=CSS21>[CSS21]
5986 <dd>Bert Bos; et al. <a
5987 href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
5988 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
5989 2011. W3C Recommendation. URL: <a
5990 href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
5991 </dd>
5992 <!---->
5994 <dt id=CSS3VAL>[CSS3VAL]
5996 <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
5997 href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS
5998 Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate
5999 Recommendation. (Work in progress.) URL: <a
6000 href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a>
6001 </dd>
6002 <!---->
6004 <dt id=HTML5>[HTML5]
6006 <dd>Ian Hickson. <a
6007 href="http://www.w3.org/TR/2012/CR-html5-20121217/"><cite>HTML5.</cite></a>
6008 17 December 2012. W3C Candidate Recommendation. (Work in progress.) URL:
6009 <a
6010 href="http://www.w3.org/TR/2012/CR-html5-20121217/">http://www.w3.org/TR/2012/CR-html5-20121217/</a>
6011 </dd>
6012 <!---->
6014 <dt id=OPEN-FONT-FORMAT>[OPEN-FONT-FORMAT]
6016 <dd><a
6017 href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip"><cite>Information
6018 technology — Coding of audio-visual objects — Part 22: Open Font
6019 Format.</cite></a> International Organization for Standardization.
6020 ISO/IEC 14496-22:2009. URL: <a
6021 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>
6022 </dd>
6023 <!---->
6025 <dt id=OPENTYPE>[OPENTYPE]
6027 <dd><a
6028 href="http://www.microsoft.com/typography/otspec/default.htm"><cite>OpenType
6029 specification.</cite></a> Microsoft. URL: <a
6030 href="http://www.microsoft.com/typography/otspec/default.htm">http://www.microsoft.com/typography/otspec/default.htm</a>
6031 </dd>
6032 <!---->
6034 <dt id=OPENTYPE-FEATURES>[OPENTYPE-FEATURES]
6036 <dd><a
6037 href="http://www.microsoft.com/typography/otspec/featurelist.htm"><cite>OpenType
6038 feature registry.</cite></a> Microsoft. URL: <a
6039 href="http://www.microsoft.com/typography/otspec/featurelist.htm">http://www.microsoft.com/typography/otspec/featurelist.htm</a>
6040 </dd>
6041 <!---->
6043 <dt id=RFC2119>[RFC2119]
6045 <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
6046 words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
6047 RFC 2119. URL: <a
6048 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
6049 </dd>
6050 <!---->
6052 <dt id=UAX15>[UAX15]
6054 <dd>Mark Davis; Ken Whistler. <a
6055 href="http://www.unicode.org/reports/tr15/"><cite>Unicode Normalization
6056 Forms.</cite></a> 31 August 2012. Unicode Standard Annex #15. URL: <a
6057 href="http://www.unicode.org/reports/tr15/">http://www.unicode.org/reports/tr15/</a>
6058 </dd>
6059 <!---->
6061 <dt id=UAX29>[UAX29]
6063 <dd>Mark Davis. <a
6064 href="http://www.unicode.org/reports/tr29/"><cite>Unicode Text
6065 Segmentation.</cite></a> 12 September 2012. Unicode Standard Annex #29.
6066 URL: <a
6067 href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a>
6068 </dd>
6069 <!---->
6071 <dt id=UNICODE6>[UNICODE6]
6073 <dd>The Unicode Consortium. <a
6074 href="http://www.unicode.org/versions/Unicode6.2.0/"><cite>The Unicode
6075 Standard, Version 6.2.0.</cite></a> Defined by: The Unicode Standard,
6076 Version 6.2.0 URL: <a
6077 href="http://www.unicode.org/versions/Unicode6.2.0/">http://www.unicode.org/versions/Unicode6.2.0/</a>
6078 </dd>
6079 <!---->
6080 </dl>
6081 <!--end-normative-->
6082 <!--{{!CSS21}}-->
6083 <!--{{!CSS3VAL}}-->
6084 <!--{{!OPENTYPE}}-->
6085 <!--{{!OPENTYPE-FEATURES}}-->
6086 <!--{{!OPEN-FONT-FORMAT}}-->
6087 <!--{{!UNICODE6}}-->
6088 <!--{{!UAX15}}-->
6089 <!--{{!UAX29}}-->
6090 <!--{{!CORS}}-->
6091 <!--{{!HTML5}}-->
6092 <!--{{!CHARMOD}}-->
6094 <h3 class=no-num id=other-references>Other References</h3>
6095 <!--begin-informative-->
6096 <!-- Sorted by label -->
6098 <dl class=bibliography>
6099 <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
6100 <!---->
6102 <dt id=AAT-FEATURES>[AAT-FEATURES]
6104 <dd><a href="http://developer.apple.com/fonts/registry/"><cite>Apple
6105 Advanced Typography font feature registry.</cite></a> Apple. URL: <a
6106 href="http://developer.apple.com/fonts/registry/">http://developer.apple.com/fonts/registry/</a>
6107 </dd>
6108 <!---->
6110 <dt id=ARABIC-TYPO>[ARABIC-TYPO]
6112 <dd>Huda Smitshuijzen AbiFares. <cite>Arabic Typography: A Comprehensive
6113 Sourcebook.</cite> Saqi Books. 2001. ISBN 0-86356-347-3.</dd>
6114 <!---->
6116 <dt id=CHARMOD-NORM>[CHARMOD-NORM]
6118 <dd>François Yergeau; et al. <a
6119 href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/"><cite>Character
6120 Model for the World Wide Web 1.0: Normalization.</cite></a> 1 May 2012.
6121 W3C Working Draft. (Work in progress.) URL: <a
6122 href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/">http://www.w3.org/TR/2012/WD-charmod-norm-20120501/</a>
6123 </dd>
6124 <!---->
6126 <dt id=CJKV-INFO-PROCESSING>[CJKV-INFO-PROCESSING]
6128 <dd>Ken Lunde. <cite>CJKV Information Processing, Second Edition.</cite>
6129 O'Reilly Media, Inc. 2009. ISBN 0-596-51447-1.</dd>
6130 <!---->
6132 <dt id=CSS3-CONDITIONAL>[CSS3-CONDITIONAL]
6134 <dd>L. David Baron. <a
6135 href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/"><cite>CSS
6136 Conditional Rules Module Level 3.</cite></a> 13 December 2012. W3C
6137 Working Draft. (Work in progress.) URL: <a
6138 href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/">http://www.w3.org/TR/2012/WD-css3-conditional-20121213/</a>
6139 </dd>
6140 <!---->
6142 <dt id=CSS3TEXT>[CSS3TEXT]
6144 <dd>Elika J. Etemad; Koji Ishii. <a
6145 href="http://www.w3.org/TR/2012/WD-css3-text-20121113/"><cite>CSS Text
6146 Module Level 3.</cite></a> 13 November 2012. W3C Working Draft. (Work in
6147 progress.) URL: <a
6148 href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">http://www.w3.org/TR/2012/WD-css3-text-20121113/</a>
6149 </dd>
6150 <!---->
6152 <dt id=DIGITAL-TYPOGRAPHY>[DIGITAL-TYPOGRAPHY]
6154 <dd>Richard Rubinstein. <cite>Digital Typography, An Introduction to Type
6155 and Composition for Computer System Design.</cite> Addison-Wesley. 1988.
6156 ISBN 0-201-17633-5.</dd>
6157 <!---->
6159 <dt id=DOM-LEVEL-2-STYLE>[DOM-LEVEL-2-STYLE]
6161 <dd>Chris Wilson; Philippe Le Hégaret; Vidur Apparao. <a
6162 href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/"><cite>Document
6163 Object Model (DOM) Level 2 Style Specification.</cite></a> 13 November
6164 2000. W3C Recommendation. URL: <a
6165 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>
6166 </dd>
6167 <!---->
6169 <dt id=ELEMTYPO>[ELEMTYPO]
6171 <dd>Robert Bringhurst. <cite>The Elements of Typographic Style, Version
6172 4.</cite> Hartley & Marks. 2013. ISBN 0-88179-212-8.</dd>
6173 <!---->
6175 <dt id=LANGCULTTYPE>[LANGCULTTYPE]
6177 <dd>John D. Berry, Ed. <cite>Language Culture Type.</cite> Graphis. 2001.
6178 ISBN 1-932026-01-0.</dd>
6179 <!---->
6181 <dt id=OPENTYPE-FONT-GUIDE>[OPENTYPE-FONT-GUIDE]
6183 <dd><a
6184 href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf"><cite>OpenType
6185 User Guide.</cite></a> FontShop International. URL: <a
6186 href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf">https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf</a>
6187 </dd>
6188 <!---->
6190 <dt id=RASTER-TRAGEDY>[RASTER-TRAGEDY]
6192 <dd>Beat Stamm. <a href="http://www.rastertragedy.com/"><cite>The Raster
6193 Tragedy at Low-Resolution Revisited.</cite></a> 7 December 2011. URL: <a
6194 href="http://www.rastertragedy.com/">http://www.rastertragedy.com/</a></dd>
6195 <!---->
6197 <dt id=WINDOWS-GLYPH-PROC>[WINDOWS-GLYPH-PROC]
6199 <dd>John Hudson. <a
6200 href="http://www.microsoft.com/typography/developers/opentype/default.htm"><cite>Windows
6201 Glyph Processing.</cite></a> Microsoft Typogrraphy. URL: <a
6202 href="http://www.microsoft.com/typography/developers/opentype/default.htm">http://www.microsoft.com/typography/developers/opentype/default.htm</a>
6203 </dd>
6204 <!---->
6205 </dl>
6206 <!--end-informative-->
6207 <!--{{ARABIC-TYPO}}-->
6208 <!--{{CJKV-INFO-PROCESSING}}-->
6209 <!--{{DIGITAL-TYPOGRAPHY}}-->
6210 <!--{{DOM-LEVEL-2-STYLE}}-->
6211 <!--{{ELEMTYPO}}-->
6212 <!--{{LANGCULTTYPE}}-->
6213 <!--{{OPENTYPE-FONT-GUIDE}}-->
6214 <!--{{RASTER-TRAGEDY}}-->
6215 <!--{{WINDOWS-GLYPH-PROC}}-->
6216 <!--{{CHARMOD-NORM}}-->
6217 <!--{{AAT-FEATURES}}-->
6218 <!--{{CSS3-CONDITIONAL}}-->
6219 <!--{{CSS3TEXT}}-->
6221 <h2 class=no-num id=index>Index</h2>
6222 <!--begin-index-->
6224 <ul class=indexlist>
6225 <li>100...900 weight values, <a href="#font-weight-numeric-values"
6226 title="100...900 weight values"><strong>3.2</strong></a>
6228 <li><var><absolute-size></var>, <a href="#absolute-size-value"
6229 title="<absolute-size>"><strong>3.5</strong></a>
6231 <li><var><common-lig-values></var>, <a href="#common-lig-values"
6232 title="<common-lig-values>"><strong>6.4</strong></a>
6234 <li><var><contextual-alt-values></var>, <a
6235 href="#contextual-alt-values"
6236 title="<contextual-alt-values>"><strong>6.4</strong></a>
6238 <li><var><discretionary-lig-values></var>, <a
6239 href="#discretionary-lig-values"
6240 title="<discretionary-lig-values>"><strong>6.4</strong></a>
6242 <li><var><east-asian-variant-values></var>, <a
6243 href="#east-asian-variant-values"
6244 title="<east-asian-variant-values>"><strong>6.10</strong></a>
6246 <li><var><east-asian-width-values></var>, <a
6247 href="#east-asian-width-values"
6248 title="<east-asian-width-values>"><strong>6.10</strong></a>
6250 <li><var><family-name></var>, <a href="#family-name-value"
6251 title="<family-name>"><strong>3.1</strong></a>
6253 <li><var><feature-tag-value></var>, <a href="#feature-tag-value"
6254 title="<feature-tag-value>"><strong>6.12</strong></a>
6256 <li><var><font-face-name></var>, <a href="#font-face-name-value"
6257 title="<font-face-name>"><strong>4.3</strong></a>
6259 <li><var><font-variant-css21></var>, <a
6260 href="#font-variant-css21-values"
6261 title="<font-variant-css21>"><strong>3.7</strong></a>
6263 <li><var><generic-family></var>, <a href="#generic-family-value"
6264 title="<generic-family>"><strong>3.1</strong></a>
6266 <li><var><historical-lig-values></var>, <a
6267 href="#historical-lig-values"
6268 title="<historical-lig-values>"><strong>6.4</strong></a>
6270 <li><var><length></var>, <a href="#length-size-value"
6271 title="<length>"><strong>3.5</strong></a>
6273 <li><var><number></var>, <a href="#aspect-ratio-value"
6274 title="<number>"><strong>3.6</strong></a>
6276 <li><var><numeric-figure-values></var>, <a
6277 href="#numeric-figure-values"
6278 title="<numeric-figure-values>"><strong>6.7</strong></a>
6280 <li><var><numeric-fraction-values></var>, <a
6281 href="#numeric-fraction-values"
6282 title="<numeric-fraction-values>"><strong>6.7</strong></a>
6284 <li><var><numeric-spacing-values></var>, <a
6285 href="#numeric-spacing-values"
6286 title="<numeric-spacing-values>"><strong>6.7</strong></a>
6288 <li><var><percentage></var>, <a href="#percentage-size-value"
6289 title="<percentage>"><strong>3.5</strong></a>
6291 <li><var><relative-size></var>, <a href="#relative-size-value"
6292 title="<relative-size>"><strong>3.5</strong></a>
6294 <li><var><string></var>, <a
6295 href="#font-language-override-string-value"
6296 title="<string>"><strong>6.13</strong></a>
6298 <li><var><urange></var>, <a href="#urange-value"
6299 title="<urange>"><strong>4.5</strong></a>
6301 <li><code>@font-face</code>, <a href="#at-font-face-rule"
6302 title="@font-face"><strong>4.1</strong></a>
6304 <li><code>@font-feature-values</code>, <a
6305 href="#at-font-feature-values-rule"
6306 title="@font-feature-values"><strong>6.9</strong></a>
6308 <li>all-petite-caps, <a href="#all-petite-caps"
6309 title=all-petite-caps><strong>6.6</strong></a>
6311 <li>all-small-caps, <a href="#all-small-caps"
6312 title=all-small-caps><strong>6.6</strong></a>
6314 <li>annotation, <a href="#annotation"
6315 title=annotation><strong>6.8</strong></a>
6317 <li>aspect value, <a href="#aspect-value0" title="aspect
6318 value"><strong>3.6</strong></a>
6320 <li>authoring tool, <a href="#authoring-tool" title="authoring
6321 tool"><strong>#</strong></a>
6323 <li>auto
6324 <ul>
6325 <li>font-kerning, <a href="#font-kerning-auto-value" title="auto,
6326 font-kerning"><strong>6.3</strong></a>
6328 <li>font-size-adjust, <a href="#font-size-adjust-auto-value"
6329 title="auto, font-size-adjust"><strong>3.6</strong></a>
6330 </ul>
6332 <li>bold, <a href="#bold" title=bold><strong>3.2</strong></a>
6334 <li>bolder, <a href="#bolder" title=bolder><strong>3.2</strong></a>
6336 <li>character map, <a href="#character-map" title="character
6337 map"><strong>5.2</strong></a>
6339 <li>character-variant, <a href="#character-variant"
6340 title=character-variant><strong>6.8</strong></a>
6342 <li>common-ligatures, <a href="#common-ligatures"
6343 title=common-ligatures><strong>6.4</strong></a>
6345 <li>condensed, <a href="#condensed"
6346 title=condensed><strong>3.3</strong></a>
6348 <li>contextual, <a href="#contextual"
6349 title=contextual><strong>6.4</strong></a>
6351 <li>CSSFontFaceRule, <a href="#cssfontfacerule"
6352 title=CSSFontFaceRule><strong>8.1</strong></a>
6354 <li>CSSFontFeatureValuesRule, <a href="#cssfontfeaturevaluesrule"
6355 title=CSSFontFeatureValuesRule><strong>8.2</strong></a>
6357 <li>cursive, definition of, <a href="#cursive0" title="cursive, definition
6358 of"><strong>#</strong></a>
6360 <li>default face, <a href="#default-face" title="default
6361 face"><strong>5.2</strong></a>
6363 <li>descriptor_declaration, <a href="#descriptordeclaration"
6364 title="descriptor_declaration"><strong>4.1</strong></a>
6366 <li>diagonal-fractions, <a href="#diagonal-fractions"
6367 title=diagonal-fractions><strong>6.7</strong></a>
6369 <li>discretionary-ligatures, <a href="#discretionary-ligatures"
6370 title=discretionary-ligatures><strong>6.4</strong></a>
6372 <li>expanded, <a href="#expanded" title=expanded><strong>3.3</strong></a>
6374 <li>extra-condensed, <a href="#extra-condensed"
6375 title=extra-condensed><strong>3.3</strong></a>
6377 <li>extra-expanded, <a href="#extra-expanded"
6378 title=extra-expanded><strong>3.3</strong></a>
6380 <li>fantasy, definition of, <a href="#fantasy0" title="fantasy, definition
6381 of"><strong>#</strong></a>
6383 <li>feature_type, <a href="#featuretype"
6384 title="feature_type"><strong>6.9.1</strong></a>
6386 <li>feature_value_block, <a href="#featurevalueblock"
6387 title="feature_value_block"><strong>6.9.1</strong></a>
6389 <li>feature_value_definition, <a href="#featurevaluedefinition"
6390 title="feature_value_definition"><strong>6.9.1</strong></a>
6392 <li>font, <a href="#propdef-font" title=font><strong>3.7</strong></a>
6394 <li>font specific, <a href="#font-specific" title="font
6395 specific"><strong>6.8</strong></a>
6397 <li>font-family
6398 <ul>
6399 <li>descriptor, <a href="#descdef-font-family" title="font-family,
6400 descriptor"><strong>4.2</strong></a>
6402 <li>property, <a href="#propdef-font-family" title="font-family,
6403 property"><strong>3.1</strong></a>
6404 </ul>
6406 <li>font-feature-settings
6407 <ul>
6408 <li>descriptor, <a href="#descdef-font-feature-settings"
6409 title="font-feature-settings, descriptor"><strong>4.7</strong></a>
6411 <li>property, <a href="#propdef-font-feature-settings"
6412 title="font-feature-settings, property"><strong>6.12</strong></a>
6413 </ul>
6415 <li>font-kerning, <a href="#propdef-font-kerning"
6416 title=font-kerning><strong>6.3</strong></a>
6418 <li>font-language-override, <a href="#propdef-font-language-override"
6419 title=font-language-override><strong>6.13</strong></a>
6421 <li>font-size, <a href="#propdef-font-size"
6422 title=font-size><strong>3.5</strong></a>
6424 <li>font-size-adjust, <a href="#propdef-font-size-adjust"
6425 title=font-size-adjust><strong>3.6</strong></a>
6427 <li>font-stretch
6428 <ul>
6429 <li>descriptor, <a href="#descdef-font-stretch" title="font-stretch,
6430 descriptor"><strong>4.4</strong></a>
6432 <li>property, <a href="#propdef-font-stretch" title="font-stretch,
6433 property"><strong>3.3</strong></a>
6434 </ul>
6436 <li>font-style
6437 <ul>
6438 <li>descriptor, <a href="#descdef-font-style" title="font-style,
6439 descriptor"><strong>4.4</strong></a>
6441 <li>property, <a href="#propdef-font-style" title="font-style,
6442 property"><strong>3.4</strong></a>
6443 </ul>
6445 <li>font-synthesis, <a href="#propdef-font-synthesis"
6446 title=font-synthesis><strong>3.8</strong></a>
6448 <li>font-variant
6449 <ul>
6450 <li>descriptor, <a href="#descdef-font-variant" title="font-variant,
6451 descriptor"><strong>4.7</strong></a>
6453 <li>property, <a href="#propdef-font-variant" title="font-variant,
6454 property"><strong>6.11</strong></a>
6455 </ul>
6457 <li>font-variant-alternates, <a href="#propdef-font-variant-alternates"
6458 title=font-variant-alternates><strong>6.8</strong></a>
6460 <li>font-variant-caps, <a href="#propdef-font-variant-caps"
6461 title=font-variant-caps><strong>6.6</strong></a>
6463 <li>font-variant-east-asian, <a href="#propdef-font-variant-east-asian"
6464 title=font-variant-east-asian><strong>6.10</strong></a>
6466 <li>font-variant-ligatures, <a href="#propdef-font-variant-ligatures"
6467 title=font-variant-ligatures><strong>6.4</strong></a>
6469 <li>font-variant-numeric, <a href="#propdef-font-variant-numeric"
6470 title=font-variant-numeric><strong>6.7</strong></a>
6472 <li>font-variant-position, <a href="#propdef-font-variant-position"
6473 title=font-variant-position><strong>6.5</strong></a>
6475 <li>font-weight
6476 <ul>
6477 <li>descriptor, <a href="#descdef-font-weight" title="font-weight,
6478 descriptor"><strong>4.4</strong></a>
6480 <li>property, <a href="#propdef-font-weight" title="font-weight,
6481 property"><strong>3.2</strong></a>
6482 </ul>
6484 <li>font_face_rule, <a href="#fontfacerule"
6485 title="font_face_rule"><strong>4.1</strong></a>
6487 <li>FONT_FACE_SYM, <a href="#fontfacesym"
6488 title="FONT_FACE_SYM"><strong>4.1</strong></a>
6490 <li>font_family_name, <a href="#fontfamilyname"
6491 title="font_family_name"><strong>6.9.1</strong></a>
6493 <li>font_family_name_list, <a href="#fontfamilynamelist"
6494 title="font_family_name_list"><strong>6.9.1</strong></a>
6496 <li>font_feature_values_rule, <a href="#fontfeaturevaluesrule"
6497 title="font_feature_values_rule"><strong>6.9.1</strong></a>
6499 <li>FONT_FEATURE_VALUES_SYM, <a href="#fontfeaturevaluessym"
6500 title="FONT_FEATURE_VALUES_SYM"><strong>6.9.1</strong></a>
6502 <li>full-width, <a href="#full-width"
6503 title=full-width><strong>6.10</strong></a>
6505 <li>historical-forms, <a href="#historical-forms"
6506 title=historical-forms><strong>6.8</strong></a>
6508 <li>historical-ligatures, <a href="#historical-ligatures"
6509 title=historical-ligatures><strong>6.4</strong></a>
6511 <li>italic, <a href="#italic" title=italic><strong>3.4</strong></a>
6513 <li>jis04, <a href="#jis04" title=jis04><strong>6.10</strong></a>
6515 <li>jis78, <a href="#jis78" title=jis78><strong>6.10</strong></a>
6517 <li>jis83, <a href="#jis83" title=jis83><strong>6.10</strong></a>
6519 <li>jis90, <a href="#jis90" title=jis90><strong>6.10</strong></a>
6521 <li>lighter, <a href="#lighter" title=lighter><strong>3.2</strong></a>
6523 <li>lining-nums, <a href="#lining-nums"
6524 title=lining-nums><strong>6.7</strong></a>
6526 <li>monospace, definition of, <a href="#monospace0" title="monospace,
6527 definition of"><strong>#</strong></a>
6529 <li>no-common-ligatures, <a href="#no-common-ligatures"
6530 title=no-common-ligatures><strong>6.4</strong></a>
6532 <li>no-contextual, <a href="#no-contextual"
6533 title=no-contextual><strong>6.4</strong></a>
6535 <li>no-discretionary-ligatures, <a href="#no-discretionary-ligatures"
6536 title=no-discretionary-ligatures><strong>6.4</strong></a>
6538 <li>no-historical-ligatures, <a href="#no-historical-ligatures"
6539 title=no-historical-ligatures><strong>6.4</strong></a>
6541 <li>none
6542 <ul>
6543 <li>font-kerning, <a href="#font-kerning-none-value" title="none,
6544 font-kerning"><strong>6.3</strong></a>
6546 <li>font-size-adjust, <a href="#font-size-adjust-none-value"
6547 title="none, font-size-adjust"><strong>3.6</strong></a>
6549 <li>font-variant, <a href="#font-variant-none-value" title="none,
6550 font-variant"><strong>6.11</strong></a>
6552 <li>font-variant-ligatures, <a href="#font-variant-ligatures-none-value"
6553 title="none, font-variant-ligatures"><strong>6.4</strong></a>
6554 </ul>
6556 <li>normal, <a href="#normal" title=normal><strong>6.5</strong></a>
6557 <ul>
6558 <li>font-feature-settings, <a href="#font-feature-settings-normal-value"
6559 title="normal, font-feature-settings"><strong>6.12</strong></a>
6561 <li>font-kerning, <a href="#font-kerning-normal-value" title="normal,
6562 font-kerning"><strong>6.3</strong></a>
6564 <li>font-language-override, <a
6565 href="#font-language-override-normal-value" title="normal,
6566 font-language-override"><strong>6.13</strong></a>
6568 <li>font-stretch, <a href="#font-stretch-normal-value" title="normal,
6569 font-stretch"><strong>3.3</strong></a>
6571 <li>font-style, <a href="#font-style-normal-value" title="normal,
6572 font-style"><strong>3.4</strong></a>
6574 <li>font-variant, <a href="#font-variant-normal-value" title="normal,
6575 font-variant"><strong>6.11</strong></a>
6577 <li>font-variant-alternates, <a
6578 href="#font-variant-alternates-normal-value" title="normal,
6579 font-variant-alternates"><strong>6.8</strong></a>
6581 <li>font-variant-caps, <a href="#font-variant-caps-normal-value"
6582 title="normal, font-variant-caps"><strong>6.6</strong></a>
6584 <li>font-variant-east-asian, <a
6585 href="#font-variant-east-asian-normal-value" title="normal,
6586 font-variant-east-asian"><strong>6.10</strong></a>
6588 <li>font-variant-ligatures, <a
6589 href="#font-variant-ligatures-normal-value" title="normal,
6590 font-variant-ligatures"><strong>6.4</strong></a>
6592 <li>font-variant-numeric, <a href="#font-variant-numeric-normal-value"
6593 title="normal, font-variant-numeric"><strong>6.7</strong></a>
6595 <li>font-weight, <a href="#font-weight-normal-value" title="normal,
6596 font-weight"><strong>3.2</strong></a>
6597 </ul>
6599 <li>oblique, <a href="#oblique" title=oblique><strong>3.4</strong></a>
6601 <li>oldstyle-nums, <a href="#oldstyle-nums"
6602 title=oldstyle-nums><strong>6.7</strong></a>
6604 <li>ordinal, <a href="#ordinal" title=ordinal><strong>6.7</strong></a>
6606 <li>ornaments, <a href="#ornaments"
6607 title=ornaments><strong>6.8</strong></a>
6609 <li>petite-caps, <a href="#petite-caps"
6610 title=petite-caps><strong>6.6</strong></a>
6612 <li>proportional-nums, <a href="#proportional-nums"
6613 title=proportional-nums><strong>6.7</strong></a>
6615 <li>proportional-width, <a href="#proportional-width"
6616 title=proportional-width><strong>6.10</strong></a>
6618 <li>renderer, <a href="#renderer" title=renderer><strong>#</strong></a>
6620 <li>ruby, <a href="#ruby" title=ruby><strong>6.10</strong></a>
6622 <li>sans-serif, definition of, <a href="#sans-serif0" title="sans-serif,
6623 definition of"><strong>#</strong></a>
6625 <li>semi-condensed, <a href="#semi-condensed-"
6626 title=semi-condensed><strong>3.3</strong></a>
6628 <li>semi-expanded, <a href="#semi-expanded"
6629 title=semi-expanded><strong>3.3</strong></a>
6631 <li>serif, definition of, <a href="#serif0" title="serif, definition
6632 of"><strong>#</strong></a>
6634 <li>simplified, <a href="#simplified"
6635 title=simplified><strong>6.10</strong></a>
6637 <li>slashed-zero, <a href="#slashed-zero"
6638 title=slashed-zero><strong>6.7</strong></a>
6640 <li>small-caps, <a href="#small-caps"
6641 title=small-caps><strong>6.6</strong></a>
6643 <li>src, <a href="#descdef-src" title=src><strong>4.3</strong></a>
6645 <li>stacked-fractions, <a href="#stacked-fractions"
6646 title=stacked-fractions><strong>6.7</strong></a>
6648 <li>style sheet
6649 <ul>
6650 <li>as conformance class, <a href="#style-sheet" title="style sheet, as
6651 conformance class"><strong>#</strong></a>
6652 </ul>
6654 <li>styleset, <a href="#styleset" title=styleset><strong>6.8</strong></a>
6656 <li>stylistic, <a href="#stylistic"
6657 title=stylistic><strong>6.8</strong></a>
6659 <li>sub, <a href="#sub" title=sub><strong>6.5</strong></a>
6661 <li>super, <a href="#super" title=super><strong>6.5</strong></a>
6663 <li>swash, <a href="#swash" title=swash><strong>6.8</strong></a>
6665 <li>tabular-nums, <a href="#tabular-nums"
6666 title=tabular-nums><strong>6.7</strong></a>
6668 <li>titling-caps, <a href="#titling-caps"
6669 title=titling-caps><strong>6.6</strong></a>
6671 <li>traditional, <a href="#traditional"
6672 title=traditional><strong>6.10</strong></a>
6674 <li>ultra-condensed, <a href="#ultra-condensed"
6675 title=ultra-condensed><strong>3.3</strong></a>
6677 <li>ultra-expanded, <a href="#ultra-expanded"
6678 title=ultra-expanded><strong>3.3</strong></a>
6680 <li>unicase, <a href="#unicase" title=unicase><strong>6.6</strong></a>
6682 <li>unicode-range, <a href="#descdef-unicode-range"
6683 title=unicode-range><strong>4.5</strong></a>
6685 <li>weight, <a href="#weight" title=weight><strong>2</strong></a>
6687 <li>width, <a href="#width" title=width><strong>2</strong></a>
6688 </ul>
6689 <!--end-index-->
6691 <h2 class=no-num id=property-index>Property index</h2>
6692 <!--begin-properties-->
6694 <table class=proptable>
6695 <thead>
6696 <tr>
6697 <th>Property
6699 <th>Values
6701 <th>Initial
6703 <th>Applies to
6705 <th>Inh.
6707 <th>Percentages
6709 <th>Media
6711 <tbody>
6712 <tr>
6713 <th><a class=property href="#propdef-font">font</a>
6715 <td>[ [ <‘font-style’> || <font-variant-css21> ||
6716 <‘font-weight’> || <‘font-stretch’ ]?
6717 <‘font-size’> [ / <‘line-height’> ]?
6718 <‘font-family’> ] | caption | icon | menu | message-box |
6719 small-caption | status-bar
6721 <td>see individual properties
6723 <td>all elements
6725 <td>yes
6727 <td>see individual properties
6729 <td>visual
6731 <tr>
6732 <th><span class=property>font-family</span>
6734 <td>[ <family-name> | <generic-family> ] #
6736 <td>depends on user agent
6738 <td>all elements
6740 <td>yes
6742 <td>N/A
6744 <td>visual
6746 <tr>
6747 <th><span class=property>font-feature-settings</span>
6749 <td>normal | <feature-tag-value> #
6751 <td>normal
6753 <td>all elements
6755 <td>yes
6757 <td>N/A
6759 <td>visual
6761 <tr>
6762 <th><a class=property href="#propdef-font-kerning">font-kerning</a>
6764 <td>auto | normal | none
6766 <td>auto
6768 <td>all elements
6770 <td>yes
6772 <td>N/A
6774 <td>visual
6776 <tr>
6777 <th><a class=property
6778 href="#propdef-font-language-override">font-language-override</a>
6780 <td>normal | <string>
6782 <td>normal
6784 <td>all elements
6786 <td>yes
6788 <td>N/A
6790 <td>visual
6792 <tr>
6793 <th><a class=property href="#propdef-font-size">font-size</a>
6795 <td><absolute-size> | <relative-size> | <length> |
6796 <percentage>
6798 <td>medium
6800 <td>all elements
6802 <td>yes
6804 <td>refer to parent element's font size
6806 <td>visual
6808 <tr>
6809 <th><a class=property
6810 href="#propdef-font-size-adjust">font-size-adjust</a>
6812 <td>none | auto | <number>
6814 <td>none
6816 <td>all elements
6818 <td>yes
6820 <td>N/A
6822 <td>visual
6824 <tr>
6825 <th><span class=property>font-stretch</span>
6827 <td>normal | ultra-condensed | extra-condensed | condensed |
6828 semi-condensed | semi-expanded | expanded | extra-expanded |
6829 ultra-expanded
6831 <td>normal
6833 <td>all elements
6835 <td>yes
6837 <td>N/A
6839 <td>visual
6841 <tr>
6842 <th><span class=property>font-style</span>
6844 <td>normal | italic | oblique
6846 <td>normal
6848 <td>all elements
6850 <td>yes
6852 <td>N/A
6854 <td>visual
6856 <tr>
6857 <th><a class=property href="#propdef-font-synthesis">font-synthesis</a>
6859 <td>none | [ weight || style ]
6861 <td>weight style
6863 <td>all elements
6865 <td>yes
6867 <td>N/A
6869 <td>visual
6871 <tr>
6872 <th><span class=property>font-variant</span>
6874 <td>normal | none | [ <common-lig-values> ||
6875 <discretionary-lig-values> || <historical-lig-values> ||
6876 <contextual-alt-values> || stylistic(<feature-value-name>)
6877 || historical-forms || styleset(<feature-value-name> #) ||
6878 character-variant(<feature-value-name> #) ||
6879 swash(<feature-value-name>) ||
6880 ornaments(<feature-value-name>) ||
6881 annotation(<feature-value-name>) || [ small-caps | all-small-caps
6882 | petite-caps | all-petite-caps | unicase | titling-caps ] ||
6883 <numeric-figure-values> || <numeric-spacing-values> ||
6884 <numeric-fraction-values> || ordinal || slashed-zero ||
6885 <east-asian-variant-values> || <east-asian-width-values> ||
6886 ruby ]
6888 <td>normal
6890 <td>all elements
6892 <td>yes
6894 <td>see individual properties
6896 <td>visual
6898 <tr>
6899 <th><a class=property
6900 href="#propdef-font-variant-alternates">font-variant-alternates</a>
6902 <td>normal | [ stylistic(<feature-value-name>) || historical-forms
6903 || styleset(<feature-value-name> #) ||
6904 character-variant(<feature-value-name> #) ||
6905 swash(<feature-value-name>) ||
6906 ornaments(<feature-value-name>) ||
6907 annotation(<feature-value-name>) ]
6909 <td>normal
6911 <td>all elements
6913 <td>yes
6915 <td>N/A
6917 <td>visual
6919 <tr>
6920 <th><a class=property
6921 href="#propdef-font-variant-caps">font-variant-caps</a>
6923 <td>normal | small-caps | all-small-caps | petite-caps | all-petite-caps
6924 | unicase | titling-caps
6926 <td>normal
6928 <td>all elements
6930 <td>yes
6932 <td>N/A
6934 <td>visual
6936 <tr>
6937 <th><a class=property
6938 href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
6940 <td>normal | [ <east-asian-variant-values> ||
6941 <east-asian-width-values> || ruby ]
6943 <td>normal
6945 <td>all elements
6947 <td>yes
6949 <td>N/A
6951 <td>visual
6953 <tr>
6954 <th><a class=property
6955 href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
6957 <td>normal | none | [ <common-lig-values> ||
6958 <discretionary-lig-values> || <historical-lig-values> ||
6959 <contextual-alt-values> ]
6961 <td>normal
6963 <td>all elements
6965 <td>yes
6967 <td>N/A
6969 <td>visual
6971 <tr>
6972 <th><a class=property
6973 href="#propdef-font-variant-numeric">font-variant-numeric</a>
6975 <td>normal | [ <numeric-figure-values> ||
6976 <numeric-spacing-values> || <numeric-fraction-values> ||
6977 ordinal || slashed-zero ]
6979 <td>normal
6981 <td>all elements
6983 <td>yes
6985 <td>N/A
6987 <td>visual
6989 <tr>
6990 <th><a class=property
6991 href="#propdef-font-variant-position">font-variant-position</a>
6993 <td>normal | sub | super
6995 <td>normal
6997 <td>all elements
6999 <td>yes
7001 <td>N/A
7003 <td>visual
7005 <tr>
7006 <th><span class=property>font-weight</span>
7008 <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600
7009 | 700 | 800 | 900
7011 <td>normal
7013 <td>all elements
7015 <td>yes
7017 <td>N/A
7019 <td>visual
7020 </table>
7021 <!--end-properties-->
7022 <!--begin-descriptors-->
7024 <table class=proptable>
7025 <thead>
7026 <tr>
7027 <th>Descriptor
7029 <th>Value
7031 <th>Initial
7033 <th>Percentages
7035 <th>Media
7037 <tbody>
7038 <tr>
7039 <th><span class=property>font-family</span>
7041 <td><family-name>
7043 <td>N/A
7045 <tr>
7046 <th><span class=property>font-feature-settings</span>
7048 <td>normal | <feature-tag-value> #
7050 <td>normal
7052 <tr>
7053 <th><span class=property>font-stretch</span>
7055 <td>normal | ultra-condensed | extra-condensed | condensed |
7056 semi-condensed | semi-expanded | expanded | extra-expanded |
7057 ultra-expanded
7059 <td>normal
7061 <tr>
7062 <th><span class=property>font-style</span>
7064 <td>normal | italic | oblique
7066 <td>normal
7068 <tr>
7069 <th><span class=property>font-variant</span>
7071 <td>normal | none | [ <common-lig-values> ||
7072 <discretionary-lig-values> || <historical-lig-values> ||
7073 <contextual-alt-values> || stylistic(<feature-value-name>)
7074 || historical-forms || styleset(<feature-value-name> #) ||
7075 character-variant(<feature-value-name> #) ||
7076 swash(<feature-value-name>) ||
7077 ornaments(<feature-value-name>) ||
7078 annotation(<feature-value-name>) || [ small-caps | all-small-caps
7079 | petite-caps | all-petite-caps | unicase | titling-caps ] ||
7080 <numeric-figure-values> || <numeric-spacing-values> ||
7081 <numeric-fraction-values> || ordinal || slashed-zero ||
7082 <east-asian-variant-values> || <east-asian-width-values> ||
7083 ruby ]
7085 <td>normal
7087 <tr>
7088 <th><span class=property>font-weight</span>
7090 <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
7092 <td>normal
7094 <tr>
7095 <th><a class=property href="#descdef-src">src</a>
7097 <td>[ <url> [format(<string> #)]? | <font-face-name> ] #
7099 <td>N/A
7101 <tr>
7102 <th><a class=property href="#descdef-unicode-range">unicode-range</a>
7104 <td><urange> #
7106 <td>U+0-10FFFF
7107 </table>
7108 <!--end-descriptors-->
7109 <script type="text/javascript">
7110 window.onload = function () {
7111 if (!("devicePixelRatio" in window && window.devicePixelRatio > 1)) return;
7112 var i, hiresElements = document.getElementsByClassName("hires");
7113 for (i = 0; i < hiresElements.length; i++) {
7114 var h = hiresElements[i];
7115 if (h.tagName != "IMG") continue;
7116 var src = h.getAttribute("src");
7117 var src2x = src.replace(/\.\w+$/, function(m) { return "@2x" + m; });
7118 h.src = src2x;
7119 }
7120 }
7121 </script>
7122 </html>
7123 <!-- Keep this comment at the end of the file
7124 Local variables:
7125 mode: sgml
7126 sgml-declaration:"~/SGML/HTML4.decl"
7127 sgml-default-doctype-name:"html"
7128 sgml-minimize-attributes:t
7129 sgml-nofill-elements:("pre" "style" "br")
7130 sgml-live-element-indicator:t
7131 sgml-omittag:nil
7132 sgml-shorttag:nil
7133 sgml-namecase-general:t
7134 sgml-general-insert-case:lower
7135 sgml-always-quote-attributes:t
7136 sgml-indent-step:nil
7137 sgml-indent-data:t
7138 sgml-parent-document:nil
7139 sgml-exposed-tags:nil
7140 sgml-local-catalogs:nil
7141 sgml-local-ecat-files:nil
7142 End:
7143 -->
7144 <!--
7146 to do:
7148 - wording of OpenType family name handling
7149 - handling combining sequences in the font matching algorithm
7150 - fix-up fi ligature example
7152 -->
