css3-fonts/Fonts.html@0c791d8345c7
css3-fonts/Fonts.html
Wed, 30 Jan 2013 11:48:51 +0900
- author
- John Daggett <jdaggett@mozilla.com>
- date
- Wed, 30 Jan 2013 11:48:51 +0900
- changeset 7235
- 0c791d8345c7
- parent 7232
- f42a77f6c632
- child 7242
- a3ef8b35f390
- permissions
- -rw-r--r--
[css3-fonts] include example of system font keywords in font family names
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-30-january-2013>Editor's Draft
116 30 January 2013</h2>
118 <dl id=authors>
119 <dt>This version:
121 <dd><a
122 href="http://dev.w3.org/csswg/css3-fonts/">http://dev.w3.org/csswg/css3-fonts/</a>
123 <!-- <dd><a href="http://www.w3.org/TR/2013/ED-css3-fonts-20130130/">http://www.w3.org/TR/2013/ED-css3-fonts-20130130/</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/css3-fonts/">http://dev.w3.org/csswg/css3-fonts/</a>
136 <dt>Previous version:
138 <dd><a
139 href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/">http://www.w3.org/TR/2012/WD-css3-fonts-20121211/</a>
141 <dt>Issues List:
143 <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/18">CSS3 Fonts
144 issues in Tracker</a>
146 <dd><a
147 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
148 Fonts issues in Bugzilla</a>
150 <dt>Discussion:
152 <dd><a
153 href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
154 with subject line “<kbd>[css3-fonts] topic</kbd>”
156 <dt>Editor:
158 <dd><a href="mailto:jdaggett@mozilla.com">John Daggett (Mozilla)</a>
159 </dl>
160 <!--begin-copyright-->
161 <p class=copyright><a
162 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
163 rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
164 title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
165 href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of
166 Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr
167 title="European Research Consortium for Informatics and
168 Mathematics">ERCIM</abbr></a>, <a
169 href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
170 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
171 <a
172 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
173 and <a
174 href="http://www.w3.org/Consortium/Legal/copyright-documents">document
175 use</a> rules apply.</p>
176 <!--end-copyright-->
177 <hr title="Separator for header">
178 </div>
180 <h2 class="no-num no-toc" id=abstract>Abstract</h2>
182 <p>This CSS3 module describes how font properties are specified and how
183 font resources are loaded dynamically. The contents of this specification
184 are a consolidation of content previously divided into <a
185 href="http://www.w3.org/TR/2002/WD-css3-fonts-20020802/">CSS3 Fonts</a>
186 and <a href="http://www.w3.org/TR/2002/WD-css3-webfonts-20020802/">CSS3
187 Web Fonts</a> modules.
189 <h2 class="no-num no-toc" id=status>Status of this document</h2>
190 <!--begin-status-->
192 <p>This is a public copy of the editors' draft. It is provided for
193 discussion only and may change at any moment. Its publication here does
194 not imply endorsement of its contents by W3C. Don't cite this document
195 other than as work in progress.
197 <p>The (<a
198 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
199 mailing list <a
200 href="mailto:www-style@w3.org?Subject=%5Bcss3-fonts%5D%20PUT%20SUBJECT%20HERE">
201 www-style@w3.org</a> (see <a
202 href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
203 discussion of this specification. When sending e-mail, please put the text
204 “css3-fonts” in the subject, preferably like this:
205 “[<!---->css3-fonts<!---->] <em>…summary of comment…</em>”
207 <p>This document was produced by the <a href="/Style/CSS/members">CSS
208 Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
210 <p>This document was produced by a group operating under the <a
211 href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
212 Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
213 rel=disclosure>public list of any patent disclosures</a> made in
214 connection with the deliverables of the group; that page also includes
215 instructions for disclosing a patent. An individual who has actual
216 knowledge of a patent which the individual believes contains <a
217 href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
218 Claim(s)</a> must disclose the information in accordance with <a
219 href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
220 W3C Patent Policy</a>.</p>
221 <!--end-status-->
222 <!--
223 <h3 class="no-num no-toc" id="atrisk">Features at risk</h3>
225 <p>The following features are at risk and may be removed when exiting CR:</p>
227 <ul>
228 </ul>
229 -->
231 <h2 class="no-num no-toc" id=contents>Table of contents</h2>
232 <!--begin-toc-->
234 <ul class=toc>
235 <li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
237 <li><a href="#typography-background"><span class=secno>2 </span>Typography
238 Background</a>
240 <li><a href="#basic-font-props"><span class=secno>3 </span>Basic Font
241 Properties</a>
242 <ul class=toc>
243 <li><a href="#font-family-prop"><span class=secno>3.1 </span>Font
244 family: the font-family property</a>
245 <ul class=toc>
246 <li><a href="#generic-font-families"><span class=secno>3.1.1
247 </span>Generic font families</a>
248 </ul>
250 <li><a href="#font-weight-prop"><span class=secno>3.2 </span>Font
251 weight: the font-weight property</a>
253 <li><a href="#font-stretch-prop"><span class=secno>3.3 </span>Font
254 width: the font-stretch property</a>
256 <li><a href="#font-style-prop"><span class=secno>3.4 </span>Font style:
257 the font-style property</a>
259 <li><a href="#font-size-prop"><span class=secno>3.5 </span>Font size:
260 the font-size property</a>
262 <li><a href="#font-size-adjust-prop"><span class=secno>3.6
263 </span>Relative sizing: the font-size-adjust property</a>
265 <li><a href="#font-prop"><span class=secno>3.7 </span>Shorthand font
266 property: the font property</a>
268 <li><a href="#font-synthesis-prop"><span class=secno>3.8
269 </span>Controlling synthetic faces: the font-synthesis property</a>
270 </ul>
272 <li><a href="#font-resources"><span class=secno>4 </span>Font
273 Resources</a>
274 <ul class=toc>
275 <li><a href="#font-face-rule"><span class=secno>4.1 </span>The
276 <code>@font-face</code> rule</a>
278 <li><a href="#font-family-desc"><span class=secno>4.2 </span>Font
279 family: the font-family descriptor</a>
281 <li><a href="#src-desc"><span class=secno>4.3 </span>Font reference: the
282 src descriptor</a>
284 <li><a href="#font-prop-desc"><span class=secno>4.4 </span>Font property
285 descriptors: the font-style, font-weight, font-stretch descriptors</a>
287 <li><a href="#unicode-range-desc"><span class=secno>4.5 </span>Character
288 range: the unicode-range descriptor</a>
290 <li><a href="#font-rend-desc"><span class=secno>4.6 </span>Font
291 features: the font-variant and font-feature-settings descriptors</a>
293 <li><a href="#font-face-loading"><span class=secno>4.7 </span>Font
294 loading guidelines</a>
296 <li><a href="#same-origin-restriction"><span class=secno>4.8
297 </span>Same-origin restriction for fonts</a>
298 <ul class=toc>
299 <li><a href="#default-same-origin-restriction"><span class=secno>4.8.1
300 </span>Default same-origin restriction</a>
302 <li><a href="#allowing-cross-origin-font-loading"><span
303 class=secno>4.8.2 </span>Allowing cross-origin font loading</a>
304 </ul>
305 </ul>
307 <li><a href="#font-matching-algorithm"><span class=secno>5 </span>Font
308 Matching Algorithm</a>
309 <ul class=toc>
310 <li><a href="#font-style-matching"><span class=secno>5.1 </span>Matching
311 font styles</a>
313 <li><a href="#cluster-matching"><span class=secno>5.2 </span>Cluster
314 matching</a>
316 <li><a href="#char-handling-issues"><span class=secno>5.3
317 </span>Character handling issues</a>
319 <li><a href="#font-matching-changes"><span class=secno>5.4 </span>Font
320 matching changes since CSS 2.1</a>
322 <li><a href="#font-matching-examples"><span class=secno>5.5 </span>Font
323 matching examples</a>
324 </ul>
326 <li><a href="#font-rend-props"><span class=secno>6 </span>Font Feature
327 Properties</a>
328 <ul class=toc>
329 <li><a href="#glyph-selection-positioning"><span class=secno>6.1
330 </span>Glyph selection and positioning</a>
332 <li><a href="#language-specific-support"><span class=secno>6.2
333 </span>Language-specific display</a>
335 <li><a href="#font-kerning-prop"><span class=secno>6.3 </span>Kerning:
336 the font-kerning property</a>
338 <li><a href="#font-variant-ligatures-prop"><span class=secno>6.4
339 </span>Ligatures: the font-variant-ligatures property</a>
341 <li><a href="#font-variant-position-prop"><span class=secno>6.5
342 </span>Subscript and superscript forms: the font-variant-position
343 property</a>
345 <li><a href="#font-variant-caps-prop"><span class=secno>6.6
346 </span>Capitalization: the font-variant-caps property</a>
348 <li><a href="#font-variant-numeric-prop"><span class=secno>6.7
349 </span>Numerical formatting: the font-variant-numeric property</a>
351 <li><a href="#font-variant-alternates-prop"><span class=secno>6.8
352 </span>Alternates and swashes: the font-variant-alternates property</a>
355 <li><a href="#font-feature-values"><span class=secno>6.9 </span>Defining
356 font specific alternates: the <code>@font-feature-values</code>
357 rule</a>
359 <li><a href="#font-variant-east-asian-prop"><span class=secno>6.10
360 </span>East Asian text rendering: the font-variant-east-asian
361 property</a>
363 <li><a href="#font-variant-prop"><span class=secno>6.11 </span>Overall
364 shorthand for font rendering: the font-variant property</a>
366 <li><a href="#font-feature-settings-prop"><span class=secno>6.12
367 </span>Low-level font feature settings control: the
368 font-feature-settings property</a>
370 <li><a href="#font-language-override-prop"><span class=secno>6.13
371 </span>Font language override: the font-language-override property</a>
372 </ul>
374 <li><a href="#font-feature-resolution"><span class=secno>7 </span>Font
375 Feature Resolution </a>
376 <ul class=toc>
377 <li><a href="#default-features"><span class=secno>7.1 </span>Default
378 features</a>
380 <li><a href="#feature-precedence"><span class=secno>7.2 </span>Feature
381 precedence</a>
383 <li><a href="#feature-precedence-examples"><span class=secno>7.3
384 </span>Feature precedence examples</a>
385 </ul>
387 <li><a href="#object-model"><span class=secno>8 </span>Object Model</a>
388 <ul class=toc>
389 <li><a href="#om-fontface"><span class=secno>8.1 </span>The
390 <code>CSSFontFaceRule</code> interface</a>
392 <li><a href="#om-fontfeaturevalues"><span class=secno>8.2 </span>The
393 <code>CSSFontFeatureValuesRule</code> interface</a>
394 </ul>
396 <li><a href="#font-load-events"><span class=secno>9 </span>Font Load
397 Events</a>
398 <ul class=toc>
399 <li><a href="#document-fontloader"><span class=secno>9.1
400 </span>Extension to the <code>document</code> interface</a>
402 <li><a href="#fontloader-interface"><span class=secno>9.2 </span>The
403 <code>FontLoader</code> Interface</a>
404 <ul class=toc>
405 <li><a href="#events"><span class=secno>9.2.1 </span>Events</a>
407 <li><a href="#methods"><span class=secno>9.2.2 </span>Methods</a>
408 </ul>
410 <li><a href="#font-load-event-examples"><span class=secno>9.3
411 </span>Font load event examples</a>
412 </ul>
414 <li><a href="#conformance"><span class=secno>10 </span> Conformance</a>
415 <ul class=toc>
416 <li><a href="#conventions"><span class=secno>10.1 </span> Document
417 conventions</a>
419 <li><a href="#conformance-classes"><span class=secno>10.2 </span>
420 Conformance classes</a>
422 <li><a href="#partial"><span class=secno>10.3 </span> Partial
423 implementations</a>
425 <li><a href="#experimental"><span class=secno>10.4 </span> Experimental
426 implementations</a>
428 <li><a href="#testing"><span class=secno>10.5 </span> Non-experimental
429 implementations</a>
430 </ul>
432 <li class=no-num><a href="#platform-props-to-css">Appendix A: Mapping
433 platform font properties to CSS properties</a>
435 <li class=no-num><a href="#ch-ch-ch-changes">Changes</a>
436 <ul class=toc>
437 <li class=no-num><a href="#recent-changes"> Changes from the August 2012
438 CSS3 Fonts Working Draft</a>
439 </ul>
441 <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
443 <li class=no-num><a href="#references">References</a>
444 <ul class=toc>
445 <li class=no-num><a href="#normative-references">Normative
446 References</a>
448 <li class=no-num><a href="#other-references">Other References</a>
449 </ul>
451 <li class=no-num><a href="#index">Index</a>
453 <li class=no-num><a href="#property-index">Property index</a>
454 </ul>
455 <!--end-toc-->
457 <h2 id=introduction><span class=secno>1 </span>Introduction</h2>
459 <p>A font provides a resource containing the visual representation of
460 characters. At the simplest level it contains information that maps
461 character codes to shapes (called glyphs) that represent these characters.
462 Fonts sharing a common design style are commonly grouped into font
463 families classified by a set of standard font properties. Within a family,
464 the shape displayed for a given character can vary by stroke weight, slant
465 or relative width, among others. A given font face is described by a
466 unique combination of these properties. For a given range of text, CSS
467 font properties are used to select a font family and a specific font face
468 within that family to be used when rendering that text. As a simple
469 example, to use the bold form of Helvetica one could use:
471 <pre>body {
472 font-family: Helvetica;
473 font-weight: bold;
474 }</pre>
476 <p>Font resources may be local, installed on the system on which a user
477 agent is running, or downloadable. For local font resources descriptive
478 information can be obtained directly from the font resource. For
479 downloadable font resources (sometimes referred to as web fonts), the
480 descriptive information is included with the reference to the font
481 resource.
483 <p>Families of fonts typically don't contain a single face for each
484 possible variation of font properties. The CSS font selection mechanism
485 describes how to match a given set of CSS font properties to a given font
486 face.
488 <h2 id=typography-background><span class=secno>2 </span>Typography
489 Background</h2>
491 <p><em>This section is included as background for some of the problems and
492 situations that are described in other sections. It should be viewed as
493 informative only.</em>
495 <p> Typographic traditions vary across the globe so there is no unique way
496 to classify all fonts across languages and cultures. For even common Latin
497 letters, wide variations are possible:
499 <div class=figure><img alt="variations in glyphs for a single character"
500 src=aaaaaa.png>
501 <p class=caption>One character, many glyph variations
502 </div>
504 <p>Differences in the anatomy of letterforms is one way to distinguish
505 fonts. For Latin fonts, flourishes at the ends of a character's main
506 strokes, or serifs, can distinguish a font from those without. Similar
507 comparisons exist in non-Latin fonts between fonts with tapered strokes
508 and those using primarily uniform strokes:
510 <div class=figure><img alt="serif vs. non-serifs" src=serifvssansserif.png>
511 <p class=caption>Letterforms with and without serifs
512 </div>
514 <div class=figure><img alt="serif vs. non-serifs for japanese"
515 src=minchovsgothic.png>
516 <p class=caption>Similar groupings for Japanese typefaces
517 </div>
519 <p>Fonts contain letterforms and the data needed to map characters to these
520 letterforms. Often this may be a simple one-to-one mapping but more
521 complex mappings are also possible. The use of combining diacritic marks
522 creates many variations for an underlying letterform:
524 <div class=figure><img alt="diacritic marks" src=aaaaaa-diacritics.png>
525 <p class=caption>Variations with diacritic marks
526 </div>
528 <p>A sequence of characters can be represented by a single glyph known as a
529 ligature:
531 <div class=figure><img alt="example of a fi ligature"
532 src=final-ligature.png>
533 <p class=caption>Ligature example
534 </div>
536 <p>Visual transformations based on textual context like this may be a
537 stylistic option for European languages but are required to correctly
538 render languages like Arabic; the lam and alef characters below
539 <em>must</em> be combined when they exist in sequence:
541 <div class=figure><img alt="lam alef ligature" src=lamaleflig.png>
542 <p class=caption>Required Arabic ligature
543 </div>
545 <p>The relative complexity of these shaping transformations requires
546 additional data within the font.
548 <p>Sets of font faces with various stylistic variations are often grouped
549 together into font families. In the simplest case a regular face is
550 supplemented with bold and italic faces but much more extensive groupings
551 are possible. Variations in the thickness of letterform strokes, or the
552 weight, or the overall proportions of the letterform, or the width, are
553 most common. In the example below, each letter uses a different font face
554 within the Univers font family. The width used increases from top to
555 bottom and the weight increases from left to right:
557 <div class=figure><img alt="various width and weight variations within a
558 single family" src=weightwidthvariations.png>
559 <p class=caption>Weight and width variations within a single font family
560 </div>
562 <p>Creating fonts that support multiple scripts is a difficult task;
563 designers need to understand the cultural traditions surrounding the use
564 of type in different scripts and come up with letterforms that somehow
565 share a common theme. Many languages often share a common script and each
566 of these languages may have noticeable stylistic differences. The Arabic
567 script is shared by Persian and Urdu and Cyrillic is used with many
568 languages, not just Russian.
570 <p>The character map of a font defines the mapping of characters to glyphs
571 for that font. If a document contains characters not supported by the
572 character maps of explicitly specified fonts, a user agent may use a
573 system font fallback procedure to locate an appropriate font that does. If
574 no appropriate font can be found, some form of "missing glyph" character
575 will be rendered by the user agent. Fallback can occur because fonts are
576 not explicitly specified or because authors fail to explicitly indicate
577 the encoding used by a document.
579 <p>Although the character map of a font maps a given character to a glyph
580 for that character, modern font technologies such as OpenType and AAT
581 (Apple Advanced Typography) provide a richer set of rules for performing
582 this mapping. Fonts in these forms allow these features to be embedded in
583 the font itself and controlled by applications. Common typographic
584 features which can be specified this way include ligatures, swashes,
585 contextual alternates, proportional and tabular figures, and automatic
586 fractions, to list just a few. For a visual overview of OpenType features,
587 see the <a href="#OPENTYPE-FONT-GUIDE"
588 rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
590 <h2 id=basic-font-props><span class=secno>3 </span>Basic Font Properties</h2>
592 <p>The particular font face used to render a character is determined by the
593 font family and other font properties that apply to a given element. This
594 structure allows settings to be varied independent of each other.</p>
595 <!-- prop: font-family -->
597 <h3 id=font-family-prop><span class=secno>3.1 </span>Font family: the <a
598 href="#propdef-font-family">font-family</a> property</h3>
600 <table class=propdef id=namefont-familyvalue-ltfamily-name-ltgen>
601 <tbody>
602 <tr>
603 <td>Name:
605 <td><dfn id=propdef-font-family>font-family</dfn>
607 <tr>
608 <td>Value:
610 <td>[ <family-name> | <generic-family> ]#
612 <tr>
613 <td>Initial:
615 <td>depends on user agent
617 <tr>
618 <td>Applies to:
620 <td>all elements
622 <tr>
623 <td>Inherited:
625 <td>yes
627 <tr>
628 <td>Percentages:
630 <td>N/A
632 <tr>
633 <td>Media:
635 <td>visual
637 <tr>
638 <td>Computed value:
640 <td>as specified
641 </table>
643 <p>This property specifies a prioritized list of font family names or
644 generic family names. A font family defines a set of faces that vary in
645 weight, width or slope. CSS uses the combination of a family name with
646 other style attributes to select an individual face. Using this selection
647 mechanism, rather than selecting a face via the style name as is often
648 done in design applications, allows some degree of regularity in textual
649 display when fallback occurs.
651 <p class=note>Designers should note that the CSS definition of font
652 attributes used for selection are explicitly not intended to define a font
653 taxonomy. A type designer's idea of a family may often extend to a set of
654 faces that vary along axes other than just the standard axes of weight,
655 width and slope. A family may extend to include both a set of serif faces
656 and a set of sans-serif faces or vary along axes that are unique to that
657 family. The CSS font selection mechanism merely provides a way to
658 determine the “closest” substitute when substitution is necessary.
660 <p>Unlike other CSS properties, component values are a comma-separated list
661 indicating alternatives. A user agent iterates through the list of family
662 names until it matches an available font that contains a glyph for the
663 character to be rendered. This allows for differences in available fonts
664 across platforms and for differences in the range of characters supported
665 by individual fonts.
667 <p>A font family name only specifies a name given to a set of font faces,
668 it does not specify an individual face. Given the availability of the
669 fonts below, Futura would match but Futura Medium would not:
671 <div class=figure><img alt="family and face names"
672 src=familyvsfacename.png>
673 <p class=caption>Family and individual face names
674 </div>
676 <p>Consider the example below:
678 <div class=example>
679 <pre>body {
680 font-family: Helvetica, Verdana, sans-serif;
681 }</pre>
683 <p>If Helvetica is available it will be used when rendering. If neither
684 Helvetica nor Verdana is present, then the user-agent-defined sans serif
685 font will be used.</p>
686 </div>
688 <p>There are two types of font family names:
690 <dl>
691 <dt><family-name>
693 <dd>The name of a font family of choice such as Helvetica or Verdana in
694 the previous example.
696 <dt><generic-family>
698 <dd> The following generic family keywords are defined: ‘<a
699 href="#serif"><code class=property>serif</code></a>’, ‘<a
700 href="#sans-serif"><code class=property>sans-serif</code></a>’, ‘<a
701 href="#cursive"><code class=property>cursive</code></a>’, ‘<a
702 href="#fantasy"><code class=property>fantasy</code></a>’, and ‘<a
703 href="#monospace"><code class=property>monospace</code></a>’. These
704 keywords can be used as a general fallback mechanism when an author's
705 desired font choices are not available. As keywords, they must not be
706 quoted. Authors are encouraged to append a generic font family as a last
707 alternative for improved robustness.
708 </dl>
710 <p>Font family names must either be given quoted as <a
711 href="//www.w3.org/TR/CSS21/syndata.html#strings">strings,</a> or unquoted
712 as a sequence of one or more <a
713 href="//www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers.</a>
714 This means most punctuation characters and digits at the start of each
715 token must be escaped in unquoted font family names.
717 <p>For example, the following declarations are invalid:
719 <pre>
720 font-family: Red/Black, sans-serif;
721 font-family: "Lucida" Grande, sans-serif;
722 font-family: Ahem!, sans-serif;
723 font-family: test@foo, sans-serif;
724 font-family: #POUND, sans-serif;
725 font-family: Hawaii 5-0, sans-serif;
726 </pre>
728 <p>If a sequence of identifiers is given as a font family name, the
729 computed value is the name converted to a string by joining all the
730 identifiers in the sequence by single spaces.
732 <p>To avoid mistakes in escaping, it is recommended to quote font family
733 names that contain white space, digits, or punctuation characters other
734 than hyphens:
736 <pre>
737 body { font-family: "New Century Schoolbook", serif }
739 <BODY STYLE="font-family: '21st Century', fantasy">
740 </pre>
742 <p>Font family <em>names</em> that happen to be the same as a keyword value
743 (‘<code class=property>inherit</code>’, ‘<a href="#serif"><code
744 class=property>serif</code></a>’, ‘<a href="#sans-serif"><code
745 class=property>sans-serif</code></a>’, ‘<a href="#monospace"><code
746 class=property>monospace</code></a>’, ‘<a href="#fantasy"><code
747 class=property>fantasy</code></a>’, and ‘<a href="#cursive"><code
748 class=property>cursive</code></a>’) must be quoted to prevent confusion
749 with the keywords with the same names. The keywords ‘<code
750 class=property>initial</code>’ and ‘<code
751 class=property>default</code>’ are reserved for future use and must also
752 be quoted when used as font names. UAs must not consider these keywords as
753 matching the ‘<code class=css><family-name></code>’ type.
755 <p>The precise way a set of fonts are grouped into font families varies
756 depending upon the platform font management API's. The Windows GDI API
757 only allows four faces to be grouped into a family while the DirectWrite
758 API and API's on OSX and other platforms support font families with a
759 variety of weights, widths and slopes (see <a
760 href="#platform-props-to-css">Appendix A</a> for more details).
762 <p>Some font formats allow fonts to carry multiple localizations of the
763 family name. User agents must recognize and correctly match all of these
764 names independent of the underlying platform localization, system API used
765 or document encoding:
767 <div class=figure><img alt="examples of localized family names"
768 src=localizedfamilynames.png>
769 <p class=caption>Localized family names
770 </div>
772 <h4 id=generic-font-families><span class=secno>3.1.1 </span>Generic font
773 families</h4>
775 <p>All five generic font families are defined to exist in all CSS
776 implementations (they need not necessarily map to five distinct actual
777 fonts). User agents should provide reasonable default choices for the
778 generic font families, which express the characteristics of each family as
779 well as possible within the limits allowed by the underlying technology.
780 User agents are encouraged to allow users to select alternative choices
781 for the generic fonts.
783 <h5 class="no-num no-toc"> <span class=index-def id=serif0 title="serif,
784 definition of"><a name=serif-def><dfn id=serif>serif</dfn></a></span></h5>
786 <p>Glyphs of serif fonts, as the term is used in CSS, have finishing
787 strokes, flared or tapering ends, or have actual serifed endings
788 (including slab serifs). Serif fonts are typically proportionately-spaced.
789 They often display a greater variation between thick and thin strokes than
790 fonts from the ‘<a href="#sans-serif"><code
791 class=property>sans-serif</code></a>’ generic font family. CSS uses the
792 term ‘<a href="#serif"><code class=property>serif</code></a>’ to apply
793 to a font for any script, although other names may be more familiar for
794 particular scripts, such as Mincho (Japanese), Sung, Song or Kai
795 (Chinese), Batang (Korean). Any font that is so described may be used to
796 represent the generic ‘<a href="#serif"><code
797 class=property>serif</code></a>’ family.
799 <div class=figure><img alt="sample serif fonts" src=serifexamples.png>
800 <p class=caption>Sample serif fonts
801 </div>
803 <h5 class="no-num no-toc"> <span class=index-def id=sans-serif0
804 title="sans-serif, definition of"> <a name=sans-serif-def><dfn
805 id=sans-serif>sans-serif</dfn></a></span></h5>
807 <p>Glyphs in sans-serif fonts, as the term is used in CSS, have stroke
808 endings that are plain -- without any flaring, cross stroke, or other
809 ornamentation. Sans-serif fonts are typically proportionately-spaced. They
810 often have little variation between thick and thin strokes, compared to
811 fonts from the ‘<a href="#serif"><code
812 class=property>serif</code></a>’ family. CSS uses the term ‘<a
813 href="#sans-serif"><code class=property>sans-serif</code></a>’ to apply
814 to a font for any script, although other names may be more familiar for
815 particular scripts, such as Gothic (Japanese), Hei (Chinese), or Gulim
816 (Korean). Any font that is so described may be used to represent the
817 generic ‘<a href="#sans-serif"><code
818 class=property>sans-serif</code></a>’ family.
820 <div class=figure><img alt="sample sans-serif fonts"
821 src=sansserifexamples.png>
822 <p class=caption>Sample sans-serif fonts
823 </div>
825 <h5 class="no-num no-toc"> <span class=index-def id=cursive0
826 title="cursive, definition of"> <a name=cursive-def><dfn
827 id=cursive>cursive</dfn></a></span></h5>
829 <p>Glyphs in cursive fonts generally have either joining strokes or other
830 cursive characteristics beyond those of italic typefaces. The glyphs are
831 partially or completely connected, and the result looks more like
832 handwritten pen or brush writing than printed letterwork. Some scripts,
833 such as Arabic, are almost always cursive. CSS uses the term ‘<a
834 href="#cursive"><code class=property>cursive</code></a>’ to apply to a
835 font for any script, although other names such as Chancery, Brush, Swing
836 and Script are also used in font names.
838 <div class=figure><img alt="sample cursive fonts" src=cursiveexamples.png>
839 <p class=caption>Sample cursive fonts
840 </div>
842 <h5 class="no-num no-toc"> <span class=index-def id=fantasy0
843 title="fantasy, definition of"> <a name=fantasy-def><dfn
844 id=fantasy>fantasy</dfn></a></span></h5>
846 <p>Fantasy fonts are primarily decorative fonts that contain playful
847 representations of characters. These do not include Pi or Picture fonts
848 which do not represent actual characters.
850 <div class=figure><img alt="sample fantasy fonts" src=fantasyexamples.png>
851 <p class=caption>Sample fantasy fonts
852 </div>
854 <h5 class="no-num no-toc"> <span class=index-def id=monospace0
855 title="monospace, definition of"> <a name=monospace-def><dfn
856 id=monospace>monospace</dfn></a></span></h5>
858 <p>The sole criterion of a monospace font is that all glyphs have the same
859 fixed width. This is often used to render samples of computer code.
861 <div class=figure><img alt="sample monospace fonts"
862 src=monospaceexamples.png>
863 <p class=caption>Sample monospace fonts
864 </div>
865 <!-- prop: font-weight -->
867 <h3 id=font-weight-prop><span class=secno>3.2 </span>Font weight: the <a
868 href="#propdef-font-weight">font-weight</a> property</h3>
870 <table class=propdef id=namefont-weightvaluenormal-bold-bolder-l>
871 <tbody>
872 <tr>
873 <td>Name:
875 <td><dfn id=propdef-font-weight>font-weight</dfn>
877 <tr>
878 <td>Value:
880 <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600
881 | 700 | 800 | 900
883 <tr>
884 <td>Initial:
886 <td>normal
888 <tr>
889 <td>Applies to:
891 <td>all elements
893 <tr>
894 <td>Inherited:
896 <td>yes
898 <tr>
899 <td>Percentages:
901 <td>N/A
903 <tr>
904 <td>Media:
906 <td>visual
908 <tr>
909 <td>Computed value:
911 <td>see description
912 </table>
914 <p>The <a class=noxref href="#font-weight-prop"><span
915 class=property>‘<code class=property>font-weight</code>’</span></a>
916 property specifies weight of glyphs in the font, their degree of blackness
917 or stroke thickness.
919 <p>Values have the following meanings:
921 <dl>
922 <dt>100 to 900
924 <dd>These values form an ordered sequence, where each number indicates a
925 weight that is at least as dark as its predecessor. These roughly
926 correspond to the commonly used weight names below:
927 </dl>
929 <ul>
930 <li>100 - Thin
932 <li>200 - Extra Light (Ultra Light)
934 <li>300 - Light
936 <li>400 - Normal
938 <li>500 - Medium
940 <li>600 - Semi Bold (Demi Bold)
942 <li>700 - Bold
944 <li>800 - Extra Bold (Ultra Bold)
946 <li>900 - Black (Heavy)
947 </ul>
949 <dl>
950 <dt><a href="#normal2"><strong>normal</strong></a>
952 <dd>Same as ‘<code class=css>400</code>’.
954 <dt><strong>bold</strong>
956 <dd>Same as ‘<code class=css>700</code>’.
958 <dt><strong>bolder</strong>
960 <dd>Specifies the weight of the face bolder than the inherited value.
962 <dt><strong>lighter</strong>
964 <dd>Specifies the weight of the face lighter than the inherited value.
965 </dl>
967 <p>Font formats that use a scale other than a nine step scale should map
968 their scale onto the CSS scale so that 400 roughly corresponds with a face
969 that would be labeled as Regular, Book, Roman and 700 roughly matches a
970 face that would be labeled as Bold. Or weights may be inferred from the
971 style names, ones that correspond roughly with the scale above. The scale
972 is relative, so a face with a larger weight value must never appear
973 lighter. If style names are used to infer weights, care should be taken to
974 handle variations in style names across locales.
976 <p>Quite often there are only a few weights available for a particular font
977 family. When a weight is specified for which no face exists, a face with a
978 nearby weight is used. In general, bold weights map to faces with heavier
979 weights and light weights map to faces with lighter weights (see the <a
980 href="#font-matching-algorithm">font matching section below</a> for a
981 precise definition). The examples here illustrate which face is used for
982 different weights, grey indicates a face for that weight does not exist so
983 a face with a nearby weight is used:
985 <div class=figure><img alt="weight mappings for a family with 400, 700 and
986 900 weights" src=optimaweights.png>
987 <p class=caption>Weight mappings for a font family with 400, 700 and 900
988 weight faces
989 </div>
991 <div class=figure><img alt="weight mappings for a family with 300, 600
992 weights" src=hiraginoweights.png>
993 <p class=caption>Weight mappings for a font family with 300 and 600 weight
994 faces
995 </div>
997 <p>Although the practice is not well-loved by typographers, bold faces are
998 often synthesized by user agents for faces that lack actual bold faces.
999 For the purposes of style matching, these faces must be treated as if they
1000 exist within the family.
1002 <p>Values of ‘<code class=property>bolder</code>’ and ‘<code
1003 class=property>lighter</code>’ indicate values relative to the weight of
1004 the parent element. Based on the inherited weight value, the weight used
1005 is calculated using the chart below. Child elements inherit the calculated
1006 weight, not a value of ‘<code class=property>bolder</code>’ or
1007 ‘<code class=property>lighter</code>’.
1009 <table class=data id=bolderlighter summary="Bolder/lighter mappings">
1010 <thead>
1011 <tr>
1012 <th>Inherited value
1014 <th>bolder
1016 <th>lighter
1018 <tbody>
1019 <tr>
1020 <th>100
1022 <td>400
1024 <td>100
1026 <tr>
1027 <th>200
1029 <td>400
1031 <td>100
1033 <tr>
1034 <th>300
1036 <td>400
1038 <td>100
1040 <tr>
1041 <th>400
1043 <td>700
1045 <td>100
1047 <tr>
1048 <th>500
1050 <td>700
1052 <td>100
1054 <tr>
1055 <th>600
1057 <td>900
1059 <td>400
1061 <tr>
1062 <th>700
1064 <td>900
1066 <td>400
1068 <tr>
1069 <th>800
1071 <td>900
1073 <td>700
1075 <tr>
1076 <th>900
1078 <td>900
1080 <td>700
1081 </table>
1083 <p>The table above is equivalent to selecting the next relative bolder or
1084 lighter face, given a font family containing normal and bold faces along
1085 with a thin and a heavy face. Authors who desire finer control over the
1086 exact weight values used for a given element should use numerical values
1087 instead of relative weights.</p>
1088 <!-- prop: font-stretch -->
1090 <h3 id=font-stretch-prop><span class=secno>3.3 </span>Font width: the <a
1091 href="#propdef-font-stretch">font-stretch</a> property</h3>
1093 <table class=propdef id=namefont-stretchvaluenormal-ultra-conden>
1094 <tbody>
1095 <tr>
1096 <td>Name:
1098 <td><dfn id=propdef-font-stretch>font-stretch</dfn>
1100 <tr>
1101 <td>Value:
1103 <td>normal | ultra-condensed | extra-condensed | condensed |
1104 semi-condensed | semi-expanded | expanded | extra-expanded |
1105 ultra-expanded
1107 <tr>
1108 <td>Initial:
1110 <td>normal
1112 <tr>
1113 <td>Applies to:
1115 <td>all elements
1117 <tr>
1118 <td>Inherited:
1120 <td>yes
1122 <tr>
1123 <td>Percentages:
1125 <td>N/A
1127 <tr>
1128 <td>Media:
1130 <td>visual
1132 <tr>
1133 <td>Computed value:
1135 <td>as specified
1136 </table>
1138 <p>The <a class=noxref href="#font-stretch-prop"><span
1139 class=property>‘<code class=property>font-stretch</code>’</span></a>
1140 property selects a normal, condensed, or expanded face from a font family.
1141 Absolute keyword values have the following ordering, from narrowest to
1142 widest:
1144 <ul>
1145 <li>Ultra Condensed
1147 <li>Extra Condensed
1149 <li>Condensed
1151 <li>Semi Condensed
1153 <li>Normal
1155 <li>Semi Expanded
1157 <li>Expanded
1159 <li>Extra Expanded
1161 <li>Ultra Expanded
1162 </ul>
1164 <p>The scale is relative, so a face with a font-stretch value higher in the
1165 list above should never appear wider. When a face does not exist for a
1166 given width, normal or condensed values map to a narrower face, otherwise
1167 a wider face. Conversely, expanded values map to a wider face, otherwise a
1168 narrower face. The figure below shows how the nine font-stretch property
1169 settings affect font selection for font family containing a variety of
1170 widths, grey indicates a width for which no face exists and a different
1171 width is substituted:
1173 <div class=figure><img alt="width mappings for a family with condensed,
1174 normal and expanded faces" src=universwidths.png>
1175 <p class=caption>Width mappings for a font family with condensed, normal
1176 and expanded width faces
1177 </div>
1178 <!-- prop: font-style -->
1180 <h3 id=font-style-prop><span class=secno>3.4 </span>Font style: the <a
1181 href="#propdef-font-style">font-style</a> property</h3>
1183 <table class=propdef id=namefont-stylevaluenormal-italic-oblique>
1184 <tbody>
1185 <tr>
1186 <td>Name:
1188 <td><dfn id=propdef-font-style>font-style</dfn>
1190 <tr>
1191 <td>Value:
1193 <td>normal | italic | oblique
1195 <tr>
1196 <td>Initial:
1198 <td>normal
1200 <tr>
1201 <td>Applies to:
1203 <td>all elements
1205 <tr>
1206 <td>Inherited:
1208 <td>yes
1210 <tr>
1211 <td>Percentages:
1213 <td>N/A
1215 <tr>
1216 <td>Media:
1218 <td>visual
1220 <tr>
1221 <td>Computed value:
1223 <td>as specified
1224 </table>
1226 <p>The <a class=noxref href="#font-style-prop"><span
1227 class=property>‘<code class=property>font-style</code>’</span></a>
1228 property allows italic or oblique faces to be selected. Italic forms are
1229 generally cursive in nature while oblique faces are typically sloped
1230 versions of the regular face. Oblique faces can be simulated by
1231 artificially sloping the glyphs of the regular face. Compare the
1232 artificially sloped renderings of Palatino ‘<code
1233 class=property>a</code>’ and Baskerville ‘<code
1234 class=property>N</code>’ in grey with the actual italic versions:
1236 <div class=figure><img alt="artificial sloping vs. real italics"
1237 src=realvsfakeitalics.png>
1238 <p class=caption>Artificial sloping versus real italics
1239 </div>
1241 <p>A value of ‘<a href="#normal2"><code
1242 class=property>normal</code></a>’ selects a face that is classified as
1243 ‘<a href="#normal2"><code class=property>normal</code></a>’, while
1244 ‘<code class=property>oblique</code>’ selects a font that is labeled
1245 ‘<code class=property>oblique</code>’. A value of ‘<code
1246 class=property>italic</code>’ selects a font that is labeled ‘<code
1247 class=property>italic</code>’, or, if that is not available, one labeled
1248 ‘<code class=property>oblique</code>’. If no italic or oblique faces
1249 is available, an oblique face can by synthesized by rendering the normal
1250 face with a sloping transformation applied.
1252 <p>Many scripts lack the tradition of mixing a cursive form within text
1253 rendered with a normal face. Chinese, Japanese and Korean fonts almost
1254 always lack italic or oblique faces. Fonts that support a mixture of
1255 scripts will sometimes omit specific scripts such as Arabic from the set
1256 of glyphs supported in the italic face. User agents should be careful
1257 about making character map assumptions across faces.</p>
1258 <!-- prop: font-size -->
1260 <h3 id=font-size-prop><span class=secno>3.5 </span>Font size: the <a
1261 href="#propdef-font-size">font-size</a> property</h3>
1263 <table class=propdef id=namefont-sizevalueltabsolute-size-ltrela>
1264 <tbody>
1265 <tr>
1266 <td>Name:
1268 <td><dfn id=propdef-font-size>font-size</dfn>
1270 <tr>
1271 <td>Value:
1273 <td><absolute-size> | <relative-size> | <length> |
1274 <percentage>
1276 <tr>
1277 <td>Initial:
1279 <td>medium
1281 <tr>
1282 <td>Applies to:
1284 <td>all elements
1286 <tr>
1287 <td>Inherited:
1289 <td>yes
1291 <tr>
1292 <td>Percentages:
1294 <td>refer to parent element's font size
1296 <tr>
1297 <td>Media:
1299 <td>visual
1301 <tr>
1302 <td>Computed value:
1304 <td>absolute length
1305 </table>
1307 <p>This property indicates the desired height of glyphs from the font. For
1308 scalable fonts, the font-size is a scale factor applied to the EM unit of
1309 the font. (Note that certain glyphs may bleed outside their EM box.) For
1310 non-scalable fonts, the font-size is converted into absolute units and
1311 matched against the declared font-size of the font, using the same
1312 absolute coordinate space for both of the matched values. Values have the
1313 following meanings:
1315 <dl>
1316 <dt><a name=x18><span class=index-def id=ltabsolute-sizegt
1317 title="<absolute-size>">
1318 <strong><absolute-size></strong></span></a>
1320 <dd> An <a class=value-def
1321 name=value-def-absolute-size><absolute-size></a> keyword refers to
1322 an entry in a table of font sizes computed and kept by the user agent.
1323 Possible values are:
1324 <p> [ xx-small | x-small | small | medium | large | x-large | xx-large ]</p>
1326 <dt><a name=x19><span class=index-def id=ltrelative-sizegt
1327 title="<relative-size>">
1328 <strong><relative-size></strong></span></a>
1330 <dd> A <a class=value-def
1331 name=value-def-relative-size><relative-size></a> keyword is
1332 interpreted relative to the table of font sizes and the font size of the
1333 parent element. Possible values are:
1334 <p> [ larger | smaller ]
1336 <p> For example, if the parent element has a font size of ‘<code
1337 class=property>medium</code>’, a value of ‘<code
1338 class=property>larger</code>’ will make the font size of the current
1339 element be ‘<code class=property>large</code>’. If the parent
1340 element's size is not close to a table entry, the user agent is free to
1341 interpolate between table entries or round off to the closest one. The
1342 user agent may have to extrapolate table values if the numerical value
1343 goes beyond the keywords.
1345 <dt><span class=index-inst id=ltlengthgt
1346 title="<length>"><length></span>
1348 <dd>A length value specifies an absolute font size (that is independent of
1349 the user agent's font table). Negative lengths are illegal.
1351 <dt><span class=index-inst id=ltpercentagegt-
1352 title="<percentage>"><percentage> </span>
1354 <dd>A percentage value specifies an absolute font size relative to the
1355 parent element's font size. Use of percentage values, or values in
1356 ‘<code class=property>em</code>’s, leads to more robust and
1357 cascadable style sheets.
1358 </dl>
1360 <p>The following table provides user agent's guideline for the
1361 absolute-size scaling factor and their mapping to XHTML heading and
1362 absolute font-sizes. The ‘<code class=property>medium</code>’ value is
1363 used as the reference middle value. The user agent may fine-tune these
1364 values for different fonts or different types of display devices.
1366 <table class=data>
1367 <thead>
1368 <tr>
1369 <th>CSS absolute-size values
1371 <th>xx-small
1373 <th>x-small
1375 <th>small
1377 <th>medium
1379 <th>large
1381 <th>x-large
1383 <th>xx-large
1385 <th>
1387 <tbody>
1388 <tr>
1389 <th>scaling factor
1391 <td>3/5
1393 <td>3/4
1395 <td>8/9
1397 <td>1
1399 <td>6/5
1401 <td>3/2
1403 <td>2/1
1405 <td>3/1
1407 <tr>
1408 <th>XHTML headings
1410 <td>h6
1412 <td>
1414 <td>h5
1416 <td>h4
1418 <td>h3
1420 <td>h2
1422 <td>h1
1424 <td>
1426 <tr>
1427 <th>XHTML font sizes
1429 <td>1
1431 <td>
1433 <td>2
1435 <td>3
1437 <td>4
1439 <td>5
1441 <td>6
1443 <td>7
1444 </table>
1446 <p class=note><em><strong>Note 1.</strong> To preserve readability, an UA
1447 applying these guidelines should nevertheless avoid creating font-size
1448 resulting in less than 9 pixels per EM unit on a computer display .</em>
1450 <p class=note><em><strong>Note 2.</strong> In CSS1, the suggested scaling
1451 factor between adjacent indexes was 1.5 which user experience proved to be
1452 too large. In CSS2, the suggested scaling factor for computer screen
1453 between adjacent indexes was 1.2 which still created issues for the small
1454 sizes. The new scaling factor varies between each index to provide a
1455 better readability.</em>
1457 <p>The actual value of this property may differ from the computed value due
1458 a numerical value on ‘<a href="#propdef-font-size-adjust"><code
1459 class=property>font-size-adjust</code></a>’ and the unavailability of
1460 certain font sizes.
1462 <p>Child elements inherit the computed <a class=noxref
1463 href="#font-size-prop"> <span class=property>‘<code
1464 class=property>font-size</code>’</span></a> value (otherwise, the effect
1465 of <a class=noxref href="#font-size-adjust-prop"><span
1466 class=property>‘<code
1467 class=property>font-size-adjust</code>’</span></a> would compound).
1469 <div class=example>
1470 <p style="display:none">Example(s):
1472 <p>
1474 <pre>p { font-size: 12pt; }
1475 blockquote { font-size: larger }
1476 em { font-size: 150% }
1477 em { font-size: 1.5em }
1478 </pre>
1479 </div>
1480 <!-- prop: font-size-adjust -->
1482 <h3 id=font-size-adjust-prop><span class=secno>3.6 </span>Relative sizing:
1483 the <a href="#propdef-font-size-adjust">font-size-adjust</a> property</h3>
1485 <table class=propdef id=namefont-size-adjustvaluenone-auto-ltnum>
1486 <tbody>
1487 <tr>
1488 <td>Name:
1490 <td><dfn id=propdef-font-size-adjust>font-size-adjust</dfn>
1492 <tr>
1493 <td>Value:
1495 <td>none | auto | <number>
1497 <tr>
1498 <td>Initial:
1500 <td>none
1502 <tr>
1503 <td>Applies to:
1505 <td>all elements
1507 <tr>
1508 <td>Inherited:
1510 <td>yes
1512 <tr>
1513 <td>Percentages:
1515 <td>N/A
1517 <tr>
1518 <td>Media:
1520 <td>visual
1522 <tr>
1523 <td>Computed value:
1525 <td>as specified
1526 </table>
1528 <p>For any given font size, the apparent size and legibility of text varies
1529 across fonts. For scripts such as Latin or Cyrillic that distinguish
1530 between upper and lowercase letters, the relative height of lowercase
1531 letters compared to their uppercase counterparts is a determining factor
1532 of legibility. This is commonly referred to as the <a class=index-def
1533 href="#aspect-value" id=aspect-value0 title="aspect value"><dfn
1534 id=aspect-value>aspect value</dfn></a>. Precisely defined, it is equal to
1535 the x-height of a font divided by the font size.
1537 <p>In situations where font fallback occurs, fallback fonts may not share
1538 the same aspect ratio as the desired font family and will thus appear less
1539 readable. The font-size-adjust property is a way to preserve the
1540 readability of text when font fallback occurs. It does this by adjusting
1541 the font-size so that the x-height is the same regardless of the font
1542 used.
1544 <div class=example>
1545 <p>The style defined below defines Verdana as the desired font family, but
1546 if Verdana is not available Futura or Times will be used.</p>
1548 <pre>p {
1549 font-family: Verdana, Futura, Times;
1550 }
1552 <p>Lorem ipsum dolor sit amet, ...</p>
1553 </pre>
1555 <p>Verdana has a relatively high aspect ratio, lowercase letters are
1556 relatively tall compared to uppercase letters, so at small sizes text
1557 appears legible. Times has a lower aspect ratio and so if fallback
1558 occurs, the text will be less legible at small sizes than Verdana.</p>
1559 </div>
1561 <p>How text rendered in each of these fonts compares is shown below, the
1562 columns show text rendered in Verdana, Futura and Times. The same
1563 font-size value is used across cells within each row and red lines are
1564 included to show the differences in x-height. In the upper half each row
1565 is rendered in the same font-size value. The same is true for the lower
1566 half but in this half the font-size-adjust property is also set so that
1567 the actual font size is adjusted to preserve the x-height across each row.
1568 Note how small text remains relatively legible across each row in the
1569 lower half.
1571 <div class=figure><img alt="text with and without font-size-adjust"
1572 src=fontsizeadjust.png>
1573 <p class=caption>Text with and without the use of font-size-adjust
1574 </div>
1576 <p>This property allows authors to specify an aspect value for an element
1577 that will effectively preserve the x-height of the first choice font,
1578 whether it is substituted or not. Values have the following meanings:
1580 <dl>
1581 <dt><strong>none</strong>
1583 <dd>Do not preserve the font's x-height.
1585 <dt><strong>auto</strong>
1587 <dd>Behaves just like <number>, except the number used is the aspect
1588 value calculated by user agents for the first font in the list of fonts
1589 defined for the initial value of the ‘<a
1590 href="#descdef-font-family"><code
1591 class=property>font-family</code></a>’ property. Effectively this is
1592 the default font used when ‘<a href="#descdef-font-family"><code
1593 class=property>font-family</code></a>’ is not otherwise specified.
1594 <p>Authors can use this value to specify that font size should be
1595 normalized across fonts based on the x-height without the need to
1596 specify the aspect ratio explicitly.</p>
1598 <dt><span class=index-inst id=ltnumbergt
1599 title="<number>"><number></span>
1601 <dd>Specifies the aspect value used in the calculation below to calculate
1602 the adjusted font size:
1603 <pre>c = ( a / a' ) s
1604 </pre>
1606 <p>where:</p>
1608 <pre>s = font-size value
1609 a = aspect value as specified by the font-size-adjust property
1610 a' = aspect value of actual font
1611 c = adjusted font-size to use
1612 </pre>
1614 <p>This value applies to any font that is selected but in typical usage
1615 it should be based on the aspect value of the first font in the
1616 font-family list. If this is specified accurately, the <tt>(a/a')</tt>
1617 term in the formula above is effectively 1 for the first font and no
1618 adjustment occurs. If the value is specified inaccurately, text rendered
1619 using the first font in the family list will display differently in
1620 older user agents that don't support font-size-adjust.</p>
1621 </dl>
1623 <p>Authors can calculate the aspect value for a given font by comparing
1624 spans with the same content but different font-size-adjust properties. If
1625 the same font-size is used, the spans will match when the font-size-adjust
1626 value is accurate for the given font.
1628 <div class=example>
1629 <p>Two spans with borders are used to determine the aspect value of a
1630 font. The font-size is the same for both spans but the font-size-adjust
1631 property is specified only for the right span. Starting with a value of
1632 0.5, the aspect value can be adjusted until the borders around the two
1633 letters line up.</p>
1635 <pre>p {
1636 font-family: Futura;
1637 font-size: 500px;
1638 }
1640 span {
1641 border: solid 1px red;
1642 }
1644 .adjust {
1645 font-size-adjust: 0.5;
1646 }
1648 <p><span>b</span><span class="adjust">b</span></p>
1649 </pre>
1651 <div class=figure><img alt="Futura with an aspect value of 0.5"
1652 src=beforefontsizeadjust.png>
1653 <p class=caption>Futura with an aspect value of 0.5
1654 </div>
1656 <p>The box on the right is a bit bigger than the one on the left, so the
1657 aspect value of this font is something less than 0.5. Adjust the value
1658 until the boxes align.</p>
1659 </div>
1660 <!-- prop: font -->
1661 <!-- jtdfix, crap, preprocessor is inserting links to descriptors rather than properties. bert, make it stop... -->
1662 <!-- <a href="#font-stretch-prop" class="noxref"><span class="property">'font-stretch'</span></a> -->
1664 <h3 id=font-prop><span class=secno>3.7 </span>Shorthand font property: the
1665 <a href="#propdef-font">font</a> property</h3>
1667 <table class=propdef id=namefontvalue-ltlsquofont-stylersquo-ltf>
1668 <tbody>
1669 <tr>
1670 <td>Name:
1672 <td><dfn id=propdef-font>font</dfn>
1674 <tr>
1675 <td>Value:
1677 <td>[ [ <‘<a href="#propdef-font-style"><code
1678 class=property>font-style</code></a>’> || <font-variant-css21> ||
1679 <‘<a href="#propdef-font-weight"><code
1680 class=property>font-weight</code></a>’> || <‘<a
1681 href="#propdef-font-stretch"><code
1682 class=property>font-stretch</code></a>’> ]? <‘<a
1683 href="#propdef-font-size"><code class=property>font-size</code></a>’>
1684 [ / <‘<code class=property>line-height</code>’> ]? <‘<a
1685 href="#descdef-font-family"><code
1686 class=property>font-family</code></a>’> ] | caption | icon | menu |
1687 message-box | small-caption | status-bar
1689 <tr>
1690 <td>Initial:
1692 <td>see individual properties
1694 <tr>
1695 <td>Applies to:
1697 <td>all elements
1699 <tr>
1700 <td>Inherited:
1702 <td>yes
1704 <tr>
1705 <td>Percentages:
1707 <td>see individual properties
1709 <tr>
1710 <td>Media:
1712 <td>visual
1714 <tr>
1715 <td>Computed value:
1717 <td>see individual properties
1718 </table>
1720 <p>The <span class=property>‘<a href="#propdef-font"><code
1721 class=property>font</code></a>’</span> property is, except as described
1722 below, a shorthand property for setting ‘<a
1723 href="#propdef-font-style"><code class=property>font-style</code></a>’,
1724 <span class=property>‘<a href="#propdef-font-variant"><code
1725 class=property>font-variant</code></a>’</span>, <span
1726 class=property>‘<a href="#propdef-font-weight"><code
1727 class=property>font-weight</code></a>’</span>, <span
1728 class=property>‘<a href="#propdef-font-stretch"><code
1729 class=property>font-stretch</code></a>’</span>, <span
1730 class=property>‘<a href="#propdef-font-size"><code
1731 class=property>font-size</code></a>’</span>, ‘<code
1732 class=property>line-height</code>’, <span class=property>‘<a
1733 href="#descdef-font-family"><code
1734 class=property>font-family</code></a>’</span> at the same place in the
1735 stylesheet. Values for the <span class=property>‘<a
1736 href="#propdef-font-variant"><code
1737 class=property>font-variant</code></a>’</span> property may also be
1738 included but only those supported in CSS 2.1, none of the font-variant
1739 values added in this specification can be used in the <span
1740 class=property>‘<a href="#propdef-font"><code
1741 class=property>font</code></a>’</span> shorthand:
1743 <pre
1744 class=prod><dfn id=ltfont-variant-css21gt><var><font-variant-css21></var></dfn> = [normal | small-caps]</pre>
1746 <p>The syntax of this property is based on a traditional typographical
1747 shorthand notation to set multiple properties related to fonts.
1749 <p>All font-related properties are first reset to their initial values,
1750 including those listed in the preceding paragraph plus <span
1751 class=property>‘<a href="#propdef-font-size-adjust"><code
1752 class=property>font-size-adjust</code></a>’</span>, <span
1753 class=property>‘<a href="#propdef-font-kerning"><code
1754 class=property>font-kerning</code></a>’</span> and all font feature
1755 properties. Then, those properties that are given explicit values in the
1756 <span class=property>‘<a href="#propdef-font"><code
1757 class=property>font</code></a>’</span> shorthand are set to those
1758 values. For a definition of allowed and initial values, see the previously
1759 defined properties. For reasons of backwards compatibility, it is not
1760 possible to set <span class=property>‘<a
1761 href="#propdef-font-size-adjust"><code
1762 class=property>font-size-adjust</code></a>’</span> to anything other
1763 than its initial value using the <span class=property>‘<a
1764 href="#propdef-font"><code class=property>font</code></a>’</span>
1765 shorthand property; instead, use the individual property.
1767 <div class=example>
1768 <p style="display:none">Example(s):
1770 <p>
1772 <pre>p { font: 12pt/14pt sans-serif }
1773 p { font: 80% sans-serif }
1774 p { font: x-large/110% "new century schoolbook", serif }
1775 p { font: bold italic large Palatino, serif }
1776 p { font: normal small-caps 120%/120% fantasy }
1777 p { font: condensed oblique 12pt "Helvetica Neue", serif; }
1778 </pre>
1780 <p> In the second rule, the font size percentage value (‘<code
1781 class=css>80%</code>’) refers to the font size of the parent element.
1782 In the third rule, the line height percentage (‘<code
1783 class=css>110%</code>’) refers to the font size of the element itself.
1785 <p>The first three rules do not specify the <span class=property>‘<a
1786 href="#propdef-font-variant"><code
1787 class=property>font-variant</code></a>’</span> and <span
1788 class=property>‘<a href="#propdef-font-weight"><code
1789 class=property>font-weight</code></a>’</span> explicitly, so these
1790 properties receive their initial values (‘<a href="#normal2"><code
1791 class=property>normal</code></a>’). Notice that the font family name
1792 "new century schoolbook", which contains spaces, is enclosed in quotes.
1793 The fourth rule sets the <span class=property>‘<a
1794 href="#propdef-font-weight"><code
1795 class=property>font-weight</code></a>’</span> to ‘<code
1796 class=property>bold</code>’, the <span class=property>‘<a
1797 href="#propdef-font-style"><code
1798 class=property>font-style</code></a>’</span> to ‘<code
1799 class=property>italic</code>’, and implicitly sets <span
1800 class=property>‘<a href="#propdef-font-variant"><code
1801 class=property>font-variant</code></a>’</span> to ‘<a
1802 href="#normal2"><code class=property>normal</code></a>’.
1804 <p> The fifth rule sets the <span class=property>‘<a
1805 href="#propdef-font-variant"><code
1806 class=property>font-variant</code></a>’</span> (‘<a
1807 href="#small-caps"><code class=property>small-caps</code></a>’), the
1808 <span class=property>‘<a href="#propdef-font-size"><code
1809 class=property>font-size</code></a>’</span> (120% of the parent's font
1810 size), the <span class=property>‘<code
1811 class=property>line-height</code>’</span> (120% of the font size) and
1812 the <span class=property>‘<a href="#descdef-font-family"><code
1813 class=property>font-family</code></a>’</span> (‘<a
1814 href="#fantasy"><code class=property>fantasy</code></a>’). It follows
1815 that the keyword ‘<a href="#normal2"><code
1816 class=property>normal</code></a>’ applies to the two remaining
1817 properties: <span class=property>‘<a href="#propdef-font-style"><code
1818 class=property>font-style</code></a>’</span> and <span
1819 class=property>‘<a href="#propdef-font-weight"><code
1820 class=property>font-weight</code></a>’</span>.
1822 <p>The sixth rule sets the <span class=property>‘<a
1823 href="#propdef-font-style"><code
1824 class=property>font-style</code></a>’</span>, <span
1825 class=property>‘<a href="#propdef-font-stretch"><code
1826 class=property>font-stretch</code></a>’</span>, <span
1827 class=property>‘<a href="#propdef-font-size"><code
1828 class=property>font-size</code></a>’</span>, and <span
1829 class=property>‘<a href="#descdef-font-family"><code
1830 class=property>font-family</code></a>’</span>, the other font
1831 properties being set to their initial values.
1832 </div>
1834 <p>Since the ‘<a href="#propdef-font-stretch"><code
1835 class=property>font-stretch</code></a>’ property was not defined in CSS
1836 2.1, when using ‘<a href="#propdef-font-stretch"><code
1837 class=property>font-stretch</code></a>’ values within ‘<a
1838 href="#propdef-font"><code class=property>font</code></a>’ rules,
1839 authors should include a extra version compatible with older user agents:
1841 <pre>p {
1842 font: 80% sans-serif; /* for older user agents */
1843 font: condensed 80% sans-serif;
1844 }</pre>
1846 <p>The following values refer to system fonts:
1848 <dl>
1849 <dt><strong>caption</strong>
1851 <dd>The font used for captioned controls (e.g., buttons, drop-downs,
1852 etc.).
1854 <dt><strong>icon</strong>
1856 <dd>The font used to label icons.
1858 <dt><strong>menu</strong>
1860 <dd>The font used in menus (e.g., dropdown menus and menu lists).
1862 <dt><strong>message-box</strong>
1864 <dd>The font used in dialog boxes.
1866 <dt><strong>small-caption</strong>
1868 <dd>The font used for labeling small controls.
1870 <dt><strong>status-bar</strong>
1872 <dd>The font used in window status bars.
1873 </dl>
1875 <p>System fonts may only be set as a whole; that is, the font family, size,
1876 weight, style, etc. are all set at the same time. These values may then be
1877 altered individually if desired. If no font with the indicated
1878 characteristics exists on a given platform, the user agent should either
1879 intelligently substitute (e.g., a smaller version of the ‘<code
1880 class=property>caption</code>’ font might be used for the ‘<code
1881 class=property>smallcaption</code>’ font), or substitute a user agent
1882 default font. As for regular fonts, if, for a system font, any of the
1883 individual properties are not part of the operating system's available
1884 user preferences, those properties should be set to their initial values.
1886 <p>That is why this property is "almost" a shorthand property: system fonts
1887 can only be specified with this property, not with <span
1888 class=property>‘<a href="#descdef-font-family"><code
1889 class=property>font-family</code></a>’</span> itself, so <span
1890 class=property>‘<a href="#propdef-font"><code
1891 class=property>font</code></a>’</span> allows authors to do more than
1892 the sum of its subproperties. However, the individual properties such as
1893 <span class=property>‘<a href="#propdef-font-weight"><code
1894 class=property>font-weight</code></a>’</span> are still given values
1895 taken from the system font, which can be independently varied.
1897 <p>Note that the keywords used for the system fonts listed above are only
1898 treated as keywords when they occur in the initial position, in other
1899 positions the same string is treated as part of the font family name:
1901 <pre> font: menu; /* use the font settings for system menus */
1902 font: large menu; /* use a font family named "menu" */</pre>
1904 <div class=example>
1905 <p style="display:none">Example(s):
1907 <p>
1909 <pre>button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
1910 button p { font: menu }
1911 button p em { font-weight: bolder }
1912 </pre>
1914 <p>If the font used for dropdown menus on a particular system happened to
1915 be, for example, 9-point Charcoal, with a weight of 600, then P elements
1916 that were descendants of BUTTON would be displayed as if this rule were
1917 in effect:
1919 <pre>button p { font: 600 9pt Charcoal }
1920 </pre>
1922 <p>Because the <span class=property>‘<a href="#propdef-font"><code
1923 class=property>font</code></a>’</span> shorthand resets to its initial
1924 value any property not explicitly given a value, this has the same effect
1925 as this declaration:
1927 <pre>button p {
1928 font-style: normal;
1929 font-variant: normal;
1930 font-weight: 600;
1931 font-size: 9pt;
1932 line-height: normal;
1933 font-family: Charcoal
1934 }
1935 </pre>
1936 </div>
1937 <!-- prop: font-synthesis -->
1939 <h3 id=font-synthesis-prop><span class=secno>3.8 </span>Controlling
1940 synthetic faces: the <a href="#propdef-font-synthesis">font-synthesis</a>
1941 property</h3>
1943 <table class=propdef id=namefont-synthesisvaluenone-weight-style>
1944 <tbody>
1945 <tr>
1946 <td>Name:
1948 <td><dfn id=propdef-font-synthesis>font-synthesis</dfn>
1950 <tr>
1951 <td>Value:
1953 <td>none | [ weight || style ]
1955 <tr>
1956 <td>Initial:
1958 <td>weight style
1960 <tr>
1961 <td>Applies to:
1963 <td>all elements
1965 <tr>
1966 <td>Inherited:
1968 <td>yes
1970 <tr>
1971 <td>Percentages:
1973 <td>N/A
1975 <tr>
1976 <td>Media:
1978 <td>visual
1980 <tr>
1981 <td>Computed value:
1983 <td>as specified
1984 </table>
1986 <p>This property controls whether user agents are allowed to synthesize
1987 bold or oblique font faces when a font family lacks bold or italic faces.
1988 If ‘<code class=property>weight</code>’ is not specified, user agents
1989 must not synthesize bold faces and if ‘<code
1990 class=property>style</code>’ is not specified user agents must not
1991 synthesize italic faces. A value of ‘<code class=property>none</code>’
1992 disallows all synthetic faces.
1994 <div class=example>
1995 <p>The style rule below disables the use of synthetically obliqued Arabic:</p>
1997 <pre>*:lang(ar) { font-synthesis: none; }
1998 </pre>
1999 </div>
2001 <h2 id=font-resources><span class=secno>4 </span>Font Resources</h2>
2003 <h3 id=font-face-rule><span class=secno>4.1 </span>The
2004 <code>@font-face</code> rule</h3>
2006 <p>The <code>@font-face</code> rule allows for linking to fonts that are
2007 automatically activated when needed. This allows authors to select a font
2008 that closely matches the design goals for a given page rather than
2009 limiting the font choice to a set of fonts available on all platforms. A
2010 set of font descriptors define the location of a font resource, either
2011 locally or externally, along with the style characteristics of an
2012 individual face. Multiple <code>@font-face</code> rules can be used to
2013 construct font families with a variety of faces. Using CSS font matching
2014 rules, a user agent can selectively download only those faces that are
2015 needed for a given piece of text.
2017 <p>The general form of an <span class=index-def id=font-face
2018 title="@font-face"><code>@font-face</code></span> <span class=index-inst
2019 id=at-rule title=at-rules>at-rule</span> is:
2021 <pre>
2022 @font-face { <span class=value-inst-font-description><font-description></span> }
2023 </pre>
2025 <p>where <span class=index-def id=ltfont-descriptiongt
2026 title="<font-description>"><a
2027 name=value-def-font-description><font-description></a></span> has
2028 the form:
2030 <pre>
2031 descriptor: value;
2032 descriptor: value;
2033 [...]
2034 descriptor: value;
2035 </pre>
2037 <p>Each <span class=index-inst id=font-face0
2038 title="@font-face"><code>@font-face</code></span> rule specifies a value
2039 for every font descriptor, either implicitly or explicitly. Those not
2040 given explicit values in the rule take the initial value listed with each
2041 descriptor in this specification. These descriptors apply solely within
2042 the context of the <code>@font-face</code> rule in which they are defined,
2043 and do not apply to document language elements. There is no notion of
2044 which elements the descriptors apply to or whether the values are
2045 inherited by child elements. When a given descriptor occurs multiple times
2046 in a given <code>@font-face</code> rule, only the last specified value is
2047 used, all prior values for that descriptor are ignored.
2049 <div class=example>
2050 <p>To use a downloadable font called Gentium:</p>
2052 <pre>
2053 @font-face {
2054 font-family: Gentium;
2055 src: url(http://example.com/fonts/Gentium.ttf);
2056 }
2058 p { font-family: Gentium, serif; }
2059 </pre>
2061 <p>The user agent will download Gentium and use it when rendering text
2062 within paragraph elements. If for some reason the site serving the font
2063 is unavailable, the default serif font will be used.</p>
2064 </div>
2066 <p>A given set of <code>@font-face</code> rules define a set of fonts
2067 available to containing documents. Multiple rules can be used to define a
2068 family with a large set of faces. When font matching is done fonts defined
2069 using these rules are considered before other available fonts on a system.
2072 <p>Downloaded fonts are only available to documents that reference them,
2073 the process of activating these fonts should not make them available to
2074 other applications or to documents that don't directly link to the same
2075 font. User agent implementers might consider it convenient to use
2076 downloaded fonts when rendering characters in other documents for which no
2077 other available font exists as part of the system font fallback procedure.
2078 This would cause a security leak since the contents of one page would be
2079 able to affect other pages, something an attacker could use as an attack
2080 vector. These restrictions do not affect caching behavior, fonts are
2081 cached the same way other web resources are cached.
2083 <p>User agents which do not understand the <code>@font-face</code> rule
2084 encounter the opening curly bracket and ignore forward until the closing
2085 curly bracket. This at-rule conforms with the forward-compatible parsing
2086 requirement of CSS, parsers may ignore these rules without error. Any
2087 descriptors that are not recognized or implemented by a given user agent
2088 must be ignored. <code>@font-face</code> rules require a font-family and
2089 src descriptor, if either of these are missing the <code>@font-face</code>
2090 must be ignored.
2092 <p>In cases where user agents have limited platform resources or implement
2093 the ability to disable downloadable font resources,
2094 <code>@font-face</code> rules must simply be ignored; the behavior of
2095 individual descriptors as defined in this specification should not be
2096 altered.
2098 <h3 id=font-family-desc><span class=secno>4.2 </span>Font family: the <a
2099 href="#descdef-font-family">font-family</a> descriptor</h3>
2101 <table class=descdef>
2102 <tbody>
2103 <tr>
2104 <td>Name:
2106 <td><dfn id=descdef-font-family>font-family</dfn>
2108 <tr>
2109 <td>Value:
2111 <td><family-name>
2113 <tr>
2114 <td><em>Initial:</em>
2116 <td>N/A
2117 </table>
2119 <p>This descriptor defines the font family name that will be used in all
2120 CSS font family name matching, overriding font family names contained in
2121 the underlying font data. If the font family name is the same as a font
2122 family available in a given user's environment, it effectively hides the
2123 underlying font for documents that use the stylesheet. This permits a web
2124 author to freely choose font-family names without worrying about conflicts
2125 with font family names present in a given user's environment. Errors
2126 loading font data do not affect font name matching behavior. User agents
2127 that apply platform font aliasing rules to font family names defined via
2128 <code>@font-face</code> rules are considered non-conformant.
2130 <h3 id=src-desc><span class=secno>4.3 </span>Font reference: the <a
2131 href="#descdef-src">src</a> descriptor</h3>
2133 <table class=descdef>
2134 <tbody>
2135 <tr>
2136 <td>Name:
2138 <td><dfn id=descdef-src>src</dfn>
2140 <tr>
2141 <td>Value:
2143 <td>[ <uri> [format(<string>#)]? | <font-face-name> ]#
2145 <tr>
2146 <td><em>Initial:</em>
2148 <td>N/A
2149 </table>
2151 <p>This descriptor specifies the resource containing font data. It is
2152 required, whether the font is downloadable or locally installed. Its value
2153 is a prioritized, comma-separated list of external references or locally
2154 installed font face names. When a font is needed the user agent iterates
2155 over the set of references listed, using the first one it can successfully
2156 activate. Fonts containing invalid data or local font faces that are not
2157 found are ignored and the user agent loads the next font in the list
2158 (platform substitutions for a given font must not be used).
2160 <p>As with other URIs in CSS, the URI may be partial, in which case it is
2161 resolved relative to the location of the style sheet containing the <span
2162 class=index-inst id=font-face1
2163 title="@font-face"><code>@font-face</code></span> rule. In the case of SVG
2164 fonts, the URL points to an element within a document containing SVG font
2165 definitions. If the element reference is omitted, a reference to the first
2166 defined font is implied. Similarly, font container formats that can
2167 contain more than one font must load one and only one of the fonts for a
2168 given <code>@font-face</code> rule. Fragment identifiers are used to
2169 indicate which font to load. If a container format lacks a defined
2170 fragment identifier scheme, implementations should use a simple 1-based
2171 indexing scheme (e.g. "font-collection#1" for the first font,
2172 "font-collection#2" for the second font).
2174 <pre>
2175 src: url(fonts/simple.ttf); /* load simple.ttf relative to stylesheet location */
2176 src: url(/fonts/simple.ttf); /* load simple.ttf from absolute location */
2177 src: url(fonts.svg#simple); /* load SVG font with id 'simple' */
2178 </pre>
2180 <p>External references consist of a URI, followed by an optional hint
2181 describing the format of the font resource referenced by that URI. The
2182 format hint contains a comma-separated list of format strings that denote
2183 well-known font formats. Conformant user agents must skip downloading a
2184 font resource if the format hints indicate only unsupported or unknown
2185 font formats. If no format hints are supplied, the user agent should
2186 download the font resource.
2188 <pre>
2189 /* load WOFF font if possible, otherwise use OpenType font */
2190 @font-face {
2191 font-family: bodytext;
2192 src: url(ideal-sans-serif.woff) format("woff"),
2193 url(basic-sans-serif.ttf) format("opentype");
2194 }
2195 </pre>
2197 <p>Format strings defined by this specification:
2199 <table class=data id=fontformats>
2200 <thead>
2201 <tr>
2202 <th>String
2204 <th>Font Format
2206 <th>Common extensions
2208 <tbody>
2209 <tr>
2210 <th>"woff"
2212 <td><a href="http://www.w3.org/TR/WOFF/">WOFF (Web Open Font Format)</a>
2214 <td>.woff
2216 <tr>
2217 <th>"truetype"
2219 <td><a
2220 href="http://www.microsoft.com/typography/otspec/default.htm">TrueType</a>
2222 <td>.ttf
2224 <tr>
2225 <th>"opentype"
2227 <td><a
2228 href="http://www.microsoft.com/typography/otspec/default.htm">OpenType</a>
2230 <td>.ttf, .otf
2232 <tr>
2233 <th>"embedded-opentype"
2235 <td><a
2236 href="http://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded
2237 OpenType</a>
2239 <td>.eot
2241 <tr>
2242 <th>"svg"
2244 <td><a href="http://www.w3.org/TR/SVG/fonts.html">SVG Font</a>
2246 <td>.svg, .svgz
2247 </table>
2249 <p>Given the overlap in common usage between TrueType and OpenType, the
2250 format hints "truetype" and "opentype" must be considered as synonymous; a
2251 format hint of "opentype" does not imply that the font contains Postscript
2252 CFF style glyph data or that it contains OpenType layout information (see
2253 Appendix A for more background on this).
2255 <p>When authors would prefer to use a locally available copy of a given
2256 font and download it if it's not, local() can be used. The locally
2257 installed <span class=index-def id=ltfont-face-namegt
2258 title="<font-face-name>"><a
2259 name=value-def-font-face-name><font-face-name></a></span> is a
2260 format-specific string that uniquely identifies a single font face within
2261 a larger family. The syntax for a <font-face-name> is a unique font
2262 face name enclosed by "local(" and ")".
2264 <pre>
2265 /* regular face of Gentium */
2266 @font-face {
2267 font-family: MyGentium;
2268 src: local(Gentium), /* use locally available Gentium */
2269 url(Gentium.ttf); /* otherwise, download it */
2270 }
2271 </pre>
2273 <p>The name can optionally be enclosed in quotes. For OpenType and TrueType
2274 fonts, this string is used to match only the Postscript name or the full
2275 font name in the name table of locally available fonts. Which is used
2276 varies by platform and font, so authors should include both of these names
2277 to assure proper matching across platforms.
2279 <pre>
2280 /* bold face of Gentium */
2281 @font-face {
2282 font-family: MyGentium;
2283 src: local(Gentium Bold), /* full font name */
2284 local(Gentium-Bold), /* Postscript name */
2285 url(GentiumBold.ttf); /* otherwise, download it */
2286 font-weight: bold;
2287 }
2288 </pre>
2290 <p>Just as a <code>@font-face</code> rule specifies the characteristics of
2291 a single font within a family, the unique name used with local() specifies
2292 a single font, not an entire font family. Defined in terms of OpenType
2293 font data, the Postscript name is found in the font's <a
2294 href="http://www.microsoft.com/typography/otspec/name.htm">name table</a>,
2295 in the name record with nameID = 6 (see <a href="#OPENTYPE"
2296 rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> for more details). The
2297 Postscript name is the commonly used key for all fonts on OSX and for
2298 Postscript CFF fonts under Windows. The full font name (nameID = 4) is
2299 used as a unique key for fonts with TrueType glyphs on Windows.
2301 <p>For OpenType fonts with multiple localizations of the full font name,
2302 the US English version is used (language ID = 0x409 for Windows and
2303 language ID = 0 for Macintosh) or the first localization when a US English
2304 full font name is not available (the OpenType specification recommends
2305 that <a href="http://www.microsoft.com/typography/otspec/recom.htm">all
2306 fonts minimally include US English names</a>). User agents that also match
2307 other full font names, e.g. matching the Dutch name when the current
2308 system locale is set to Dutch, are considered non-conformant. This is done
2309 not to prefer English but to avoid matching inconsistencies across font
2310 versions and OS localizations, since font style names (e.g. "Bold") are
2311 frequently localized into many languages and the set of localizations
2312 available varies widely across platform and font version. User agents that
2313 match a concatenation of family name (nameID = 1) with style name (nameID
2314 = 2) are considered non-conformant.
2316 <p>This also allows for referencing faces that belong to larger families
2317 that cannot otherwise be referenced.
2319 <div class=example>
2320 <p>Use a local font or reference an SVG font in another document:</p>
2322 <pre>
2323 @font-face {
2324 font-family: Headline;
2325 src: local(Futura-Medium),
2326 url(fonts.svg#MyGeometricModern) format("svg");
2327 }
2328 </pre>
2330 <p>Create an alias for local Japanese fonts on different platforms:</p>
2332 <pre>
2333 @font-face {
2334 font-family: jpgothic;
2335 src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic);
2336 }
2337 </pre>
2339 <p>Reference a font face that cannot be matched within a larger family:</p>
2341 <pre>
2342 @font-face {
2343 font-family: Hoefler Text Ornaments;
2344 /* has the same font properties as Hoefler Text Regular */
2345 src: local(HoeflerText-Ornaments);
2346 }
2347 </pre>
2349 <p>Since localized fullnames should never match, a document with the
2350 header style rules below would always render using the default serif
2351 font, regardless whether a particular system locale parameter is set to
2352 Finnish or not:</p>
2354 <pre>
2355 @font-face {
2356 font-family: SectionHeader;
2357 src: local("Arial Lihavoitu"); /* Finnish fullname for Arial Bold, should fail */
2358 font-weight: bold;
2359 }
2361 h2 { font-family: SectionHeader, serif; }
2362 </pre>
2364 <p>A conformant user agent should never load the font ‘<code
2365 class=css>gentium.eot</code>’ in the example below, since it is
2366 included in the first definition of the ‘<a href="#descdef-src"><code
2367 class=property>src</code></a>’ descriptor which is overridden by the
2368 second definition in the same <code>@font-face</code> rule:</p>
2370 <pre>
2371 @font-face {
2372 font-family: MainText;
2373 src: url(gentium.eot); /* for use with older non-conformant user agents */
2374 src: local("Gentium"), url(gentium.ttf); /* Overrides src definition */
2375 }
2376 </pre>
2377 </div>
2379 <h3 id=font-prop-desc><span class=secno>4.4 </span>Font property
2380 descriptors: the <a href="#descdef-font-style">font-style</a>, <a
2381 href="#descdef-font-weight">font-weight</a>, <a
2382 href="#descdef-font-stretch">font-stretch</a> descriptors</h3>
2384 <table class=descdef>
2385 <tbody>
2386 <tr>
2387 <td>Name:
2389 <td><dfn id=descdef-font-style title="font-style
2390 (descriptor)">font-style</dfn>
2392 <tr>
2393 <td>Value:
2395 <td>normal | italic | oblique
2397 <tr>
2398 <td><em>Initial:</em>
2400 <td>normal
2401 </table>
2403 <table class=descdef>
2404 <tbody>
2405 <tr>
2406 <td>Name:
2408 <td><dfn id=descdef-font-weight title="font-weight
2409 (descriptor)">font-weight</dfn>
2411 <tr>
2412 <td>Value:
2414 <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
2416 <tr>
2417 <td><em>Initial:</em>
2419 <td>normal
2420 </table>
2422 <table class=descdef>
2423 <tbody>
2424 <tr>
2425 <td>Name:
2427 <td><dfn id=descdef-font-stretch title="font-stretch
2428 (descriptor)">font-stretch</dfn>
2430 <tr>
2431 <td>Value:
2433 <td>normal | ultra-condensed | extra-condensed | condensed |
2434 semi-condensed | semi-expanded | expanded | extra-expanded |
2435 ultra-expanded
2437 <tr>
2438 <td><em>Initial:</em>
2440 <td>normal
2441 </table>
2443 <p>These descriptors define the characteristics of a font face and are used
2444 in the process of matching styles to specific faces. For a font family
2445 defined with several <code>@font-face</code> rules, user agents can either
2446 download all faces in the family or use these descriptors to selectively
2447 download font faces that match actual styles used in document. The values
2448 for these descriptors are the same as those for the corresponding font
2449 properties except that relative keywords are not allowed, ‘<code
2450 class=property>bolder</code>’ and ‘<code
2451 class=property>lighter</code>’. If these descriptors are omitted,
2452 default values are assumed.
2454 <p>The value for these font face style attributes is used in place of the
2455 style implied by the underlying font data. This allows authors to combine
2456 faces in flexible combinations, even in situations where the original font
2457 data was arranged differently. User agents that implement synthetic
2458 bolding and obliqueing must only apply synthetic styling in cases where
2459 the font descriptors imply this is needed, rather than based on the style
2460 attributes implied by the font data.
2462 <h3 id=unicode-range-desc><span class=secno>4.5 </span>Character range: the
2463 <a href="#descdef-unicode-range">unicode-range</a> descriptor</h3>
2465 <table class=descdef>
2466 <tbody>
2467 <tr>
2468 <td>Name:
2470 <td><dfn id=descdef-unicode-range>unicode-range</dfn>
2472 <tr>
2473 <td>Value:
2475 <td><urange>#
2477 <tr>
2478 <td><em>Initial:</em>
2480 <td>U+0-10FFFF
2481 </table>
2483 <p>This descriptor defines the range of Unicode characters supported by a
2484 given font. The values of <span class=index-def id=lturangegt
2485 title="<urange>"><a name=value-def-urange><urange></a></span>
2486 are expressed using hexadecimal numbers prefixed by "U+", corresponding to
2487 <a href="http://www.unicode.org/charts/">Unicode character code
2488 points</a>. The unicode-range descriptor serves as a hint for user agents
2489 when deciding whether or not to download a font resource.
2491 <p>Unicode range values are written using hexadecimal values and are ASCII
2492 case-insensitive. Each is prefixed by "U+" and multiple, discontinuous
2493 ranges are separated by commas. Whitespace before or after commas is
2494 ignored. Valid character code values vary between 0 and 10FFFF inclusive.
2495 A single range has three basic forms:
2497 <ul>
2498 <li>a single code point (e.g. U+416)
2500 <li>an interval value range (e.g. U+400-4ff)
2502 <li>a range where trailing ‘<code class=css>?</code>’ characters imply
2503 ‘<code class=css>any digit value</code>’ (e.g. U+4??)
2504 </ul>
2506 <p>Ranges that do not fit any of the above three forms are considered to be
2507 parse errors and the descriptor is omitted. Interval ranges consisting of
2508 a single code point are valid. Ranges specified with ‘?’ that lack an
2509 initial digit (e.g. "U+???") are also valid, and are treated as if there
2510 was a single 0 before the question marks (thus, "U+???" = "U+0???" =
2511 "U+0000-0FFF"). "U+??????" is not a syntax error, even though "U+0??????"
2512 would be. Ranges can overlap but interval ranges that descend (e.g.
2513 U+400-32f) are invalid and omitted rather than treated as parse errors;
2514 they have no effect on other ranges in a list of ranges. Ranges are
2515 clipped to the domain of Unicode code points (currently 0 – 10FFFF
2516 inclusive); a range entirely outside the domain is omitted. Without any
2517 valid ranges, the descriptor is omitted. User agents may normalize the
2518 list of ranges into a list that is different but represents the same set
2519 of character code points.
2521 <p>The character range can be a subset of the full character map of the
2522 underlying font. The effective unicode-range used when mapping characters
2523 to fonts is the intersection of the unicode range specified and the
2524 underlying character map of the font. This means that authors do not need
2525 to define the unicode-range of a font precisely, broad ranges for which a
2526 sparse set of code points are defined in the font can be used. Code points
2527 outside of the defined unicode-range are ignored, regardless of whether
2528 the font contains a glyph for that code point or not. User agents that
2529 download fonts for characters outside the defined unicode-range are
2530 considered non-conformant. Likewise, user agents that render a character
2531 using a font resource for which the defined unicode-range does not include
2532 that character are also considered non-conformant.
2534 <p>Example ranges for specific languages or characters:
2536 <dl>
2537 <dt>unicode-range: U+A5;
2539 <dd>a single code point, the yen/yuan symbol
2541 <dt>unicode-range: U+0-7F;
2543 <dd>code range for basic ASCII characters
2545 <dt>unicode-range: U+590-5ff;
2547 <dd>code range for Hebrew characters
2549 <dt>unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;
2551 <dd>code range for Japanese kanji, hiragana and katakana characters plus
2552 yen/yuan symbol
2553 </dl>
2555 <div class=example>
2556 <p>The BBC provides news services in a wide variety of languages, many
2557 that are not well supported across all platforms. Using an
2558 <code>@font-face</code> rule, the BBC could provide a font for any of
2559 these languages, as it already does via a manual font download.</p>
2561 <pre>
2562 @font-face {
2563 font-family: BBCBengali;
2564 src: url(fonts/BBCBengali.ttf) format("opentype");
2565 unicode-range: U+00-FF, U+980-9FF;
2566 }
2567 </pre>
2568 </div>
2570 <div class=example>
2571 <p>Technical documents often require a wide range of symbols. The STIX
2572 Fonts project is one project aimed at providing fonts to support a wide
2573 range of technical typesetting in a standardized way. The example below
2574 shows the use of a font that provides glyphs for many of the mathematical
2575 and technical symbol ranges within Unicode:</p>
2577 <pre>
2578 @font-face {
2579 font-family: STIXGeneral;
2580 src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
2581 unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
2582 }
2583 </pre>
2584 </div>
2586 <p>Multiple <code>@font-face</code> rules with different unicode ranges for
2587 the same family and style descriptor values can be used to create
2588 composite fonts that mix the glyphs from different fonts for different
2589 scripts. This can be used to combine fonts that only contain glyphs for a
2590 single script (e.g. Latin, Greek, Cyrillic) or it can be used by authors
2591 as a way of segmenting a font into fonts for commonly used characters and
2592 less frequently used characters. Since the user agent will only pull down
2593 the fonts it needs this helps reduce page bandwidth.
2595 <p>If the unicode ranges overlap for a set of <code>@font-face</code> rules
2596 with the same family and style descriptor values, the rules are ordered in
2597 the reverse order they were defined; the last rule defined is the first to
2598 be checked for a given character.
2600 <div class=example>
2601 <p>This example shows how an author can override the glyphs used for Latin
2602 characters in a Japanese font with glyphs from a different font. The
2603 first rule specifies no range so it defaults to the entire range. The
2604 range specified in the second rule overlaps but takes precedence because
2605 it is defined later.</p>
2607 <pre>
2608 @font-face {
2609 font-family: JapaneseWithGentium;
2610 src: local(MSMincho);
2611 /* no range specified, defaults to entire range */
2612 }
2614 @font-face {
2615 font-family: JapaneseWithGentium;
2616 src: url(../fonts/Gentium.ttf);
2617 unicode-range: U+0-2FF;
2618 }
2619 </pre>
2620 </div>
2622 <div class=example>
2623 <p>Consider a family constructed to optimize bandwidth by separating out
2624 Latin, Japanese and other characters into different font files:</p>
2626 <pre>
2627 /* fallback font - size: 4.5MB */
2628 @font-face {
2629 font-family: DroidSans;
2630 src: url(DroidSansFallback.ttf);
2631 /* no range specified, defaults to entire range */
2632 }
2634 /* Japanese glyphs - size: 1.2MB */
2635 @font-face {
2636 font-family: DroidSans;
2637 src: url(DroidSansJapanese.ttf);
2638 unicode-range: U+3000-9FFF, U+ff??;
2639 }
2641 /* Latin, Greek, Cyrillic along with some
2642 punctuation and symbols - size: 190KB */
2643 @font-face {
2644 font-family: DroidSans;
2645 src: url(DroidSans.ttf);
2646 unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
2647 }
2648 </pre>
2650 <p>For simple Latin text, only the font for Latin characters is
2651 downloaded:</p>
2653 <pre>
2654 body { font-family: DroidSans; }
2656 <p>This is that</p>
2657 </pre>
2659 <p>In this case the user agent first checks the unicode-range for the font
2660 containing Latin characters (DroidSans.ttf). Since all the characters
2661 above are in the range U+0-5FF, the user agent downloads the font and
2662 renders the text with that font.</p>
2664 <p>Next, consider text that makes use of an arrow character (⇨):</p>
2666 <pre>
2667 <p>This &#x21e8; that<p>
2668 </pre>
2670 <p>The user agent again first checks the unicode-range of the font
2671 containing Latin characters. Since U+2000-2300 includes the arrow code
2672 point (U+21E8), the user agent downloads the font. For this character
2673 however the Latin font does not have a matching glyph, so the effective
2674 unicode-range used for font matching excludes this code point. Next, the
2675 user agent evaluates the Japanese font. The unicode-range for the
2676 Japanese font, U+3000-9FFF and U+ff??, does not include U+21E8, so the
2677 user agent does not download the Japanese font. Next the fallback font is
2678 considered. The <code>@font-face</code> rule for the fallback font does
2679 not define unicode-range so its value defaults to the range of all
2680 Unicode code points. The fallback font is downloaded and used to render
2681 the arrow character.</p>
2682 </div>
2684 <h3 id=font-rend-desc><span class=secno>4.6 </span>Font features: the <a
2685 href="#descdef-font-variant">font-variant</a> and <a
2686 href="#descdef-font-feature-settings">font-feature-settings</a>
2687 descriptors</h3>
2689 <table class=descdef>
2690 <tbody>
2691 <tr>
2692 <td>Name:
2694 <td><dfn id=descdef-font-variant title="font-variant
2695 (descriptor)">font-variant</dfn>
2697 <tr>
2698 <td>Value:
2700 <td>normal | [ <common-lig-values> ||
2701 <discretionary-lig-values> || <historical-lig-values> ||
2702 <contextual-alt-values> || stylistic(<feature-value-name>)
2703 || historical-forms || styleset(<feature-value-name>#) ||
2704 character-variant(<feature-value-name>#) ||
2705 swash(<feature-value-name>) ||
2706 ornaments(<feature-value-name>) ||
2707 annotation(<feature-value-name>) || [ small-caps | all-small-caps
2708 | petite-caps | all-petite-caps | unicase | titling-caps ] ||
2709 <numeric-figure-values> || <numeric-spacing-values> ||
2710 <numeric-fraction-values> || ordinal || slashed-zero ||
2711 <east-asian-variant-values> || <east-asian-width-values> ||
2712 ruby ]
2714 <tr>
2715 <td><em>Initial:</em>
2717 <td>normal
2718 </table>
2720 <table class=descdef>
2721 <tbody>
2722 <tr>
2723 <td>Name:
2725 <td><dfn id=descdef-font-feature-settings title="font-feature-settings
2726 (descriptor)">font-feature-settings</dfn>
2728 <tr>
2729 <td>Value:
2731 <td>normal | <feature-tag-value>#
2733 <tr>
2734 <td><em>Initial:</em>
2736 <td>normal
2737 </table>
2739 <p>These descriptors define settings that apply when the font defined by an
2740 <code>@font-face</code> rule is rendered. They do not affect font
2741 selection. Values are identical to those defined for the corresponding
2742 ‘<a href="#propdef-font-variant"><code
2743 class=property>font-variant</code></a>’ and ‘<a
2744 href="#propdef-font-feature-settings"><code
2745 class=property>font-feature-settings</code></a>’ properties defined
2746 below except that the value ‘<code class=property>inherit</code>’ is
2747 omitted. When multiple font feature descriptors or properties are used,
2748 the cumulative effect on text rendering is described below.
2750 <h3 id=font-face-loading><span class=secno>4.7 </span>Font loading
2751 guidelines</h3>
2753 <p>The <code>@font-face</code> rule is designed to allow lazy loading of
2754 fonts, fonts are only downloaded when needed for use within a document. A
2755 stylesheet can include <code>@font-face</code> rules for a library of
2756 fonts of which only a select set are used; user agents must only download
2757 those fonts that are referred to within the style rules applicable to a
2758 given page. User agents that download all fonts defined in
2759 <code>@font-face</code> rules without considering whether those fonts are
2760 in fact used within a page are considered non-conformant. In cases where a
2761 font might be downloaded in character fallback cases, user agents may
2762 download a font if it's listed in a font list but is not actually used for
2763 a given text run.
2765 <pre>
2766 @font-face {
2767 font-family: GeometricModern;
2768 src: url(font.ttf);
2769 }
2771 p {
2772 /* font will be downloaded for pages with p elements */
2773 font-family: GeometricModern, sans-serif;
2774 }
2776 h2 {
2777 /* font may be downloaded for pages with h2 elements, even if Futura is available locally */
2778 font-family: Futura, GeometricModern, sans-serif;
2779 }
2780 </pre>
2782 <p>In cases where textual content is loaded before downloadable fonts are
2783 available, user agents may render text as it would be rendered if
2784 downloadable font resources are not available or they may render text
2785 transparently with fallback fonts to avoid a flash of text using a
2786 fallback font. In cases where the font download fails user agents must
2787 display text, simply leaving transparent text is considered non-conformant
2788 behavior. Authors are advised to use fallback fonts in their font lists
2789 that closely match the vertical metrics of the downloadable fonts to avoid
2790 large page reflows where possible.
2792 <h3 id=same-origin-restriction><span class=secno>4.8 </span>Same-origin
2793 restriction for fonts</h3>
2795 <h4 id=default-same-origin-restriction><span class=secno>4.8.1
2796 </span>Default same-origin restriction</h4>
2798 <p>User agents must implement a same-origin restriction when loading fonts
2799 via the <code>@font-face</code> mechanism. This restriction limits the
2800 loading of fonts for a given document to fonts loaded from the same
2801 origin. Fonts can only be loaded via the same host, port, and method
2802 combination as the containing document, using the <a
2803 href="http://www.w3.org/TR/html5/browsers.html#origin">origin matching
2804 algorithm</a> described in the <a href="#HTML5"
2805 rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> specification. The origin of
2806 the stylesheet containing <code>@font-face</code> rules is not used when
2807 deciding whether a font is same origin or not, only the origin of the
2808 containing document is used. The restriction applies to all font types.
2810 <p>Given a document located at http://example.com/page.html, fonts defined
2811 with ‘<a href="#descdef-src"><code class=property>src</code></a>’
2812 definitions considered cross origin must not be loaded:
2814 <pre>
2815 /* same origin (i.e. domain, protocol, port match document) */
2816 src: url(fonts/simple.ttf);
2817 src: url(//fonts/simple.ttf);
2819 /* cross origin, different protocol */
2820 src: url(https://example.com/fonts/simple.ttf);
2822 /* cross origin, different domain */
2823 src: url(http://another.example.com/fonts/simple.ttf);
2824 </pre>
2826 <h4 id=allowing-cross-origin-font-loading><span class=secno>4.8.2
2827 </span>Allowing cross-origin font loading</h4>
2829 <p>User agents must also implement the ability to relax this restriction
2830 using cross-site origin controls <a href="#CORS"
2831 rel=biblioentry>[CORS]<!--{{!CORS}}--></a>. Sites can explicitly allow
2832 cross-site downloading of font data using the
2833 <code>Access-Control-Allow-Origin</code> HTTP header.
2835 <h2 id=font-matching-algorithm><span class=secno>5 </span>Font Matching
2836 Algorithm</h2>
2838 <p>The algorithm below describes how fonts are associated with individual
2839 runs of text. For each character in the run a font family is chosen and a
2840 particular font face is selected containing a glyph for that character.
2842 <h3 id=font-style-matching><span class=secno>5.1 </span>Matching font
2843 styles</h3>
2845 <p>The procedure for choosing fonts consists of iterating over the font
2846 families determined by the font-family property, selecting a font face
2847 with the appropriate style based on other font properties and then
2848 determining whether a glyph exists for a given character. Codepoint
2849 sequences consisting of a base character followed by a sequence of
2850 combining characters are treated slightly differently, see the section on
2851 <a href="#cluster-matching">cluster matching</a> below.
2853 <p>For this procedure, the <dfn id=default-face>default face</dfn> for a
2854 given font family is defined to be the face that would be selected if all
2855 font style properties were set to their initial value.
2857 <ol id=fontmatchingalg>
2858 <li>Using the computed font property values for a given element, the user
2859 agent starts with the first family name in the fontlist specified by the
2860 <span class=property>‘<a href="#descdef-font-family"><code
2861 class=property>font-family</code></a>’</span> property.
2863 <li>If the family name is unquoted and is a generic family name, the user
2864 agent looks up the appropriate font family name to be used. User agents
2865 may choose the generic font family to use based on the language of the
2866 containing element or the Unicode range of the character.
2868 <li>For other family names, the user agent attempts to find the family
2869 name among fonts defined via <code>@font-face</code> rules and then among
2870 available system fonts, matching names with a case-insensitive
2871 comparison. On systems containing fonts with multiple localized font
2872 family names, user agents must match any of these names independent of
2873 the underlying system locale or platform API used. If a font family
2874 defined via <code>@font-face</code> rules contains only invalid font
2875 data, it should be considered as if a font was present but contained an
2876 empty character map; matching a platform font with the same name must not
2877 occur in this case.
2878 <p class=issue>Need to define explicitly the case-insensitive matching
2879 algorithm for matching font family names</p>
2881 <li>If a font family match occurs, the user agent assembles the set of
2882 font faces in that family and then narrows the set to a single face using
2883 other font properties in the order given below:
2884 <ol id=fontstylematchingalg>
2885 <li><span class=property>‘<a href="#propdef-font-stretch"><code
2886 class=property>font-stretch</code></a>’</span> is tried first. If the
2887 matching set contains faces with width values matching the ‘<a
2888 href="#propdef-font-stretch"><code
2889 class=property>font-stretch</code></a>’ value, faces with other width
2890 values are removed from the matching set. If there is no face that
2891 exactly matches the width value the nearest width is used instead. If
2892 the value of ‘<a href="#propdef-font-stretch"><code
2893 class=property>font-stretch</code></a>’ is ‘<a
2894 href="#normal2"><code class=property>normal</code></a>’ or one of the
2895 condensed values, narrower width values are checked first, then wider
2896 values. If the value of ‘<a href="#propdef-font-stretch"><code
2897 class=property>font-stretch</code></a>’ is one of the expanded
2898 values, wider values are checked first, followed by narrower values.
2899 Once the closest matching width has been determined by this process,
2900 faces with other widths are removed from the matching set.
2902 <li><span class=property>‘<a href="#propdef-font-style"><code
2903 class=property>font-style</code></a>’</span> is tried next. If the
2904 value of ‘<a href="#propdef-font-style"><code
2905 class=property>font-style</code></a>’ is ‘<code
2906 class=property>italic</code>’, italic faces are checked first, then
2907 oblique, then normal faces. If the value is ‘<code
2908 class=property>oblique</code>’, oblique faces are checked first, then
2909 italic faces and then normal faces. If the value is ‘<a
2910 href="#normal2"><code class=property>normal</code></a>’, normal faces
2911 are checked first, then oblique faces, then italic faces. Faces with
2912 other style values are excluded from the matching set. User agents are
2913 permitted to distinguish between italic and oblique faces within
2914 platform font families but this is not required, they may treat all
2915 italic or oblique faces as italic faces. However, within font families
2916 defined via <code>@font-face</code> rules, italic and oblique faces
2917 must be distinguished using the value of the ‘<a
2918 href="#propdef-font-style"><code
2919 class=property>font-style</code></a>’ descriptor.
2921 <li><span class=property>‘<a href="#propdef-font-weight"><code
2922 class=property>font-weight</code></a>’</span> is matched next, it
2923 will always reduce the matching set to a single font face. If
2924 bolder/lighter relative weights are used, the effective weight is
2925 calculated based on the inherited weight value, as described in the
2926 definition of the ‘<a href="#propdef-font-weight"><code
2927 class=property>font-weight</code></a>’ property. Given the desired
2928 weight and the weights of faces in the matching set after the steps
2929 above, if the desired weight is available that face matches. Otherwise,
2930 a weight is chosen using the rules below:
2931 <ul>
2932 <li>If the desired weight is less than 400, weights below the desired
2933 weight are checked in descending order followed by weights above the
2934 desired weight in ascending order until a match is found.
2936 <li>If the desired weight is greater than 500, weights above the
2937 desired weight are checked in ascending order followed by weights
2938 below the desired weight in descending order until a match is found.
2940 <li>If the desired weight is 400, 500 is checked first and then the
2941 rule for desired weights less than 400 is used.
2943 <li>If the desired weight is 500, 400 is checked first and then the
2944 rule for desired weights less than 400 is used.
2945 </ul>
2947 <li><span class=property>‘<a href="#propdef-font-size"><code
2948 class=property>font-size</code></a>’</span> must be matched within a
2949 UA-dependent margin of tolerance. (Typically, sizes for scalable fonts
2950 are rounded to the nearest whole pixel, while the tolerance for
2951 bitmapped fonts could be as large as 20%.) Further computations, e.g.,
2952 by ‘<code class=property>em</code>’ values in other properties, are
2953 based on the <span class=property>‘<a href="#propdef-font-size"><code
2954 class=property>font-size</code></a>’</span> value that is used, not
2955 the one that is specified.
2956 </ol>
2958 <li>
2959 <p>If no matching face exists or the matched face does not contain a
2960 glyph for the character to be rendered, the next family name is selected
2961 and the previous two steps repeated. Glyphs from other faces in the
2962 family are not considered. The only exception is that user agents may
2963 optionally substitute a synthetic version of the <a
2964 href="#default-face"><em>default face</em></a> if that face supports a
2965 given glyph (e.g. a synthetic italic version of the regular face may be
2966 used if the italic face doesn't support glyphs for Arabic).</p>
2968 <p>If the matched font is defined via an <code>@font-face</code> rule and
2969 needs to be downloaded, the font resource is downloaded. While the
2970 download occurs, the user agent can either wait until the font is
2971 downloaded or render once with substituted font metrics and render again
2972 once the font is downloaded.</p>
2974 <li>If there are no more font families to be evaluated and no matching
2975 face has been found, then the user agent performs a <em>system font
2976 fallback</em> procedure to find the best match for the character to be
2977 rendered. The result of this procedure may vary across user agents.
2979 <li>If a particular character cannot be displayed using any font, the user
2980 agent should indicate by some means that a character is not being
2981 displayed, displaying either a symbolic representation of the missing
2982 glyph (e.g. using a <a
2983 href="http://en.wikipedia.org/wiki/Last_resort_font">Last Resort
2984 Font</a>) or using the missing character glyph from a default font.
2985 </ol>
2987 <h3 id=cluster-matching><span class=secno>5.2 </span>Cluster matching</h3>
2989 <p>When text contains characters such as combining diacritics, ideally the
2990 base character should be rendered using the same font as the diacritic,
2991 this assures proper placement of the diacritic. For this reason, the font
2992 matching algorithm for clusters is more specialized than the general case
2993 of matching a single character by itself. For sequences containing
2994 variation selectors, which indicate the precise glyph to be used for a
2995 given character, user agents always attempt system font fallback to find
2996 the appropriate glyph before using the default glyph of the base
2997 character.
2999 <p>A font is considered to <em>support</em> a given character if (1) the
3000 character is contained in the font's character map and (2) if required by
3001 the containing script, shaping information is available for that
3002 character. Some legacy fonts may include a given character in the
3003 character map but lack the shaping information (e.g. <a
3004 href="http://www.microsoft.com/typography/otspec/ttochap1.htm">OpenType
3005 layout tables</a> or <a
3006 href="http://scripts.sil.org/cms/scripts/page.php?site_id=projects&item_id=graphite_techAbout">Graphite
3007 tables</a>) necessary for correctly rendering text runs containing that
3008 character.
3010 <p>A sequence of codepoints containing combining diacritics or other
3011 modifiers is termed a grapheme cluster (see <a href="#CSS3TEXT"
3012 rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a> for a more complete
3013 description). For a given cluster containing a base character, <em>b</em>
3014 and a sequence of combining characters <em>c1, c2…</em>, the entire
3015 cluster is matched using these steps:
3017 <ol>
3018 <li>For each family in the font list, a face is chosen using the style
3019 selection rules defined in the previous section.
3020 <ol>
3021 <li>If all characters in the sequence <em>b + c1 + c2 …</em> are
3022 completely supported by the font, select this font for the sequence.
3024 <li>If a sequence of multiple codepoints is canonically equivalent to a
3025 single character and the font supports that character, select this font
3026 for the sequence.
3027 </ol>
3029 <li>If no font was found in the font list in step 1:
3030 <ol>
3031 <li>If <em>c1</em> is a variation selector, system fallback must be used
3032 to find a font that supports the full sequence of <em>b + c1</em>. If
3033 no font on the system supports the full sequence, match the single
3034 character <em>b</em> using the normal procedure for matching single
3035 characters and ignore the variation selector. Note: a sequence with
3036 more than one variation selector is treated as an encoding error and
3037 the trailing selectors are ignored.
3039 <li>Otherwise, the user agent may optionally use system font fallback to
3040 match a font that supports the entire cluster.
3041 </ol>
3043 <li>If no font is found in step 2, use the matching sequence from step 1
3044 to determine the longest sequence that is completely matched by a font in
3045 the font list and attempt to match the remaining combining characters
3046 separately using the rules for single characters.
3047 </ol>
3049 <h3 id=char-handling-issues><span class=secno>5.3 </span>Character handling
3050 issues</h3>
3052 <p>The procedure above is always performed on text runs containing Unicode
3053 characters, documents using legacy encodings are assumed to have been
3054 transcoded before matching fonts. For fonts containing character maps for
3055 both legacy encodings and Unicode, the contents of the legacy encoding
3056 character map must have no effect on the results of the font matching
3057 process.
3059 <p>The font matching process does not assume that text runs are in either
3060 normalized or denormalized form (see <a href="#CHARMOD-NORM"
3061 rel=biblioentry>[CHARMOD-NORM]<!--{{CHARMOD-NORM}}--></a> for more
3062 details). Layout engines often convert base character plus combining
3063 character sequences into precomposed characters if they exist. The font
3064 matching algorithm outlined here supports both ways and fonts can
3065 generally support either but variations can occur. Authors should always
3066 tailor their choice of fonts to their content, including whether that
3067 content contains normalized or denormalized character streams.
3069 <p>If a given character is a Private-Use Area Unicode codepoint and none of
3070 the fonts in the fontlist contain a glyph for that codepoint, user agents
3071 must display some form of missing glyph symbol for that character rather
3072 than attempting system font fallback for that codepoint. When matching the
3073 replacement character U+FFFD, user agents may skip the font matching
3074 process and immediately display some form of missing glyph symbol, they
3075 are not required to display the glyph from the font that would be selected
3076 by the font matching process.
3078 <p>In general, the fonts for a given family will all have the same or
3079 similar character maps. The process outlined here is designed to handle
3080 even font families containing faces with widely variant character maps.
3081 However, authors are cautioned that the use of such families can lead to
3082 unexpected results.
3084 <p>Optimizations of this process are allowed provided that an
3085 implementation behaves as if the algorithm had been followed exactly.
3086 Matching occurs in a well-defined order to insure that the results are as
3087 consistent as possible across user agents, given an identical set of
3088 available fonts and rendering technology.
3090 <h3 id=font-matching-changes><span class=secno>5.4 </span>Font matching
3091 changes since CSS 2.1</h3>
3093 <p>The algorithm above is different from CSS 2.1 in a number of key places.
3094 These changes were made to better reflect actual font matching behavior
3095 across user agent implementations.
3097 <p>Differences compared to the font matching algorithm in CSS 2.1:
3099 <ul>
3100 <li>The algorithm includes font-stretch matching.
3102 <li>All possible font-style matching scenarios are delineated.
3104 <li>Small-caps fonts are not matched as part of the font matching process,
3105 they are now handled via font features.
3107 <li>Unicode variation selector matching is required.
3109 <li>Cluster sequences are matched as a unit.
3110 </ul>
3112 <h3 id=font-matching-examples><span class=secno>5.5 </span>Font matching
3113 examples</h3>
3115 <div class=example>
3116 <p>It's useful to note that the CSS selector syntax may be used to create
3117 language-sensitive typography. For example, some Chinese and Japanese
3118 characters are unified to have the same Unicode code point, although the
3119 abstract glyphs are not the same in the two languages.
3121 <pre>*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif; }
3122 *:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif; }
3123 </pre>
3125 <p>This selects any element that has the given language - Japanese or
3126 Traditional Chinese - and uses the appropriate font.
3127 </div>
3129 <h2 id=font-rend-props><span class=secno>6 </span>Font Feature Properties</h2>
3131 <p>Modern font technologies support a variety of advanced typographic and
3132 language-specific font features. Using these features, a single font can
3133 provide glyphs for a wide range of ligatures, contextual and stylistic
3134 alternates, tabular and old-style figures, small capitals, automatic
3135 fractions, swashes, and alternates specific to a given language. To allow
3136 authors control over these font capabilities, the font-variant property
3137 has been expanded for CSS3, it now functions as a shorthand for a set of
3138 properties that provide control over stylistic font features.
3140 <h3 id=glyph-selection-positioning><span class=secno>6.1 </span>Glyph
3141 selection and positioning</h3>
3143 <p>Simple fonts used for displaying Latin text use a very basic processing
3144 model, fonts contain a character map which maps a given character to a
3145 glyph for that character. Glyphs for subsequent characters are simply
3146 placed next in line along a run of text. Font formats such as OpenType and
3147 AAT (Apple Advanced Typography) use a richer processing model, the glyph
3148 for a given character can be chosen and positioned not just based on a
3149 single character, but also based on surrounding characters along with the
3150 language, script, and features enabled for the text. Font features may be
3151 required for specific scripts, or recommended as enabled by default or
3152 they may be stylistic features meant to be used under author control.
3154 <p>For a good visual overview of these features, see the <a
3155 href="#OPENTYPE-FONT-GUIDE"
3156 rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
3157 For a detailed description of glyph processing for OpenType fonts, see <a
3158 href="#WINDOWS-GLYPH-PROC"
3159 rel=biblioentry>[WINDOWS-GLYPH-PROC]<!--{{WINDOWS-GLYPH-PROC}}--></a>.
3161 <p>Stylistic font features can be classified into two broad categories,
3162 ones that affect the harmonization of glyph shapes with the surrounding
3163 context, such as kerning and ligature features, and those such as the
3164 small-caps, subscript/superscript and alternate features that affect shape
3165 selection.
3167 <p>The subproperties of font-variant listed below are used to control these
3168 stylistic font features; they do not control features that are required
3169 for displaying certain scripts, such as the OpenType features used when
3170 displaying Arabic or Indic language text. They affect glyph selection and
3171 positioning, they do not affect font selection as described in the font
3172 matching section (except in cases required for compatibility with CSS
3173 2.1).
3175 <p>To assure consistent behavior across user agents, the equivalent
3176 OpenType property settings are listed for individual properties and must
3177 be considered normative. When using other font formats these should be
3178 used as a guideline to map CSS font feature property values to specific
3179 font features.
3181 <h3 id=language-specific-support><span class=secno>6.2
3182 </span>Language-specific display</h3>
3184 <p>OpenType also supports language-specific glyph selection and
3185 positioning, so that text can be displayed correctly in cases where the
3186 language dictates a specific display behavior. Languages often share a
3187 common script but the shape of certain letters may vary across those
3188 languages, such as the variations in certain Cyrillic letters used in
3189 Russian and Bulgarian text. In Latin text, it's common to render "fi" with
3190 an explicit fi-ligature that lacks a dot on the "i". However, in languages
3191 such as Turkish which uses both a dotted-i and a dotless-i, it's important
3192 to not use this ligature or use a specialized version that contains a dot
3193 over the "i". The example below shows language-specific variations based
3194 on stylistic traditions found in Spanish, Italian and French orthography:
3196 <div class=featex><img alt="language specific forms, spanish"
3197 src=locl-1.png></div>
3199 <div class=featex><img alt="language specific forms, italian"
3200 src=locl-2.png></div>
3202 <div class=featex><img alt="language specific forms, french"
3203 src=locl-3.png></div>
3205 <p>Users agents are required to infer the OpenType language system from the
3206 value of the ‘<code class=property>lang</code>’ attribute and use that
3207 when selecting and positioning glyphs using an OpenType font. If the
3208 ‘<code class=property>lang</code>’ attribute is not defined, the
3209 default OpenType language system must be used.
3211 <p>In some cases it may be necessary to explicitly declare the OpenType
3212 language to be used, for example when displaying text in a given language
3213 that uses the typographic conventions of another language, or when the
3214 font does not explicitly support a given language but supports a language
3215 that shares common typographic conventions. The ‘<a
3216 href="#propdef-font-language-override"><code
3217 class=property>font-language-override</code></a>’ property is used for
3218 this purpose.
3220 <p class=issue>Should user agents be allowed to infer the OpenType language
3221 or simply use only the default language system?</p>
3222 <!-- prop: font-kerning -->
3224 <h3 id=font-kerning-prop><span class=secno>6.3 </span>Kerning: the <a
3225 href="#propdef-font-kerning">font-kerning</a> property</h3>
3227 <table class=propdef id=namefont-kerningvalueauto-normal-noneini>
3228 <tbody>
3229 <tr>
3230 <td>Name:
3232 <td><dfn id=propdef-font-kerning>font-kerning</dfn>
3234 <tr>
3235 <td>Value:
3237 <td>auto | normal | none
3239 <tr>
3240 <td>Initial:
3242 <td>auto
3244 <tr>
3245 <td>Applies to:
3247 <td>all elements
3249 <tr>
3250 <td>Inherited:
3252 <td>yes
3254 <tr>
3255 <td>Percentages:
3257 <td>N/A
3259 <tr>
3260 <td>Media:
3262 <td>visual
3264 <tr>
3265 <td>Computed value:
3267 <td>as specified
3268 </table>
3270 <p>Kerning is the contextual adjustment of inter-glyph spacing. This
3271 property controls metric kerning, kerning that utilizes adjustment data
3272 contained in the font. The value ‘<a href="#normal2"><code
3273 class=property>normal</code></a>’ implies that kerning is applied while
3274 the value ‘<code class=property>none</code>’ implies that kerning is
3275 not applied when rendering text. If the value is ‘<code
3276 class=property>auto</code>’, a user agent is free to choose whether
3277 kerning is enabled or not by default and to vary that default based on the
3278 underlying text script.
3280 <p>For fonts that do not include kerning data this property will have no
3281 visible effect. When rendering with OpenType fonts, the <a
3282 href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>
3283 specification suggests that kerning be enabled by default. When kerning is
3284 enabled, the OpenType <span class=tag>kern</span> feature is enabled (for
3285 vertical text runs the <span class=tag>vkrn</span> feature is enabled).
3286 User agents must also support fonts that only support kerning via data
3287 contained in a ‘<code class=property>kern</code>’ font table, as
3288 detailed in the OpenType specification. Authors may prefer to disable
3289 kerning in situations where performance is more important that precise
3290 appearance. If the ‘<code class=property>letter-spacing</code>’
3291 property is defined, kerning adjustments are considered part of the
3292 default spacing, letter spacing adjustments are made after kerning has
3293 been applied.</p>
3294 <!-- prop: font-variant-ligatures -->
3296 <h3 id=font-variant-ligatures-prop><span class=secno>6.4 </span>Ligatures:
3297 the <a href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
3298 property</h3>
3300 <table class=propdef id=namefont-variant-ligaturesvaluenormal-no>
3301 <tbody>
3302 <tr>
3303 <td>Name:
3305 <td><dfn id=propdef-font-variant-ligatures>font-variant-ligatures</dfn>
3307 <tr>
3308 <td>Value:
3310 <td>normal | none | [ <common-lig-values> ||
3311 <discretionary-lig-values> || <historical-lig-values> ||
3312 <contextual-alt-values> ]
3314 <tr>
3315 <td>Initial:
3317 <td>normal
3319 <tr>
3320 <td>Applies to:
3322 <td>all elements
3324 <tr>
3325 <td>Inherited:
3327 <td>yes
3329 <tr>
3330 <td>Percentages:
3332 <td>N/A
3334 <tr>
3335 <td>Media:
3337 <td>visual
3339 <tr>
3340 <td>Computed value:
3342 <td>as specified
3343 </table>
3345 <p>Ligatures and contextual forms are ways of combining glyphs to produce
3346 more harmonized forms. A value of ‘<a href="#normal2"><code
3347 class=property>normal</code></a>’ implies that common default features
3348 are enabled, <a href="#font-feature-resolution">as described in detail in
3349 the next section</a>. For OpenType fonts, common ligatures and contextual
3350 forms are on by default, discretionary and historical ligatures are not. A
3351 value of ‘<code class=property>none</code>’ implies that all types of
3352 ligatures and contextual forms covered by this property are explicitly
3353 disabled. In situations where ligatures are not considered necessary, this
3354 may improve the speed of text rendering.
3356 <pre
3357 class=prod><dfn id=ltcommon-lig-values><var><common-lig-values></var></dfn> = [ common-ligatures | no-common-ligatures ]</pre>
3359 <pre
3360 class=prod><dfn id=ltdiscretionary-lig-values><var><discretionary-lig-values></var></dfn> = [ discretionary-ligatures | no-discretionary-ligatures ]</pre>
3362 <pre
3363 class=prod><dfn id=lthistorical-lig-values><var><historical-lig-values></var></dfn> = [ historical-ligatures | no-historical-ligatures ]</pre>
3365 <pre
3366 class=prod><dfn id=ltcontextual-alt-valuesgt><var><contextual-alt-values></var></dfn> = [ contextual | no-contextual ]</pre>
3368 <p>Individual values have the following meanings:
3370 <dl>
3371 <dt><dfn id=common-ligatures>common-ligatures</dfn>
3373 <dd>Enables display of common ligatures (OpenType features: <span
3374 class=tag>liga, clig</span>). For OpenType fonts, common ligatures are
3375 enabled by default.
3376 </dl>
3378 <div class=featex><img alt="common ligature example" src=liga.png></div>
3380 <dl>
3381 <dt><dfn id=no-common-ligatures>no-common-ligatures</dfn>
3383 <dd>Disables display of common ligatures (OpenType features: <span
3384 class=tag>liga, clig</span>).
3386 <dt><dfn id=discretionary-ligatures>discretionary-ligatures</dfn>
3388 <dd>Enables display of discretionary ligatures (OpenType feature: <span
3389 class=tag>dlig</span>). Which ligatures are discretionary, or optional,
3390 is decided by the type designer so authors will need to refer to the
3391 documentation of a given font to understand which ligatures are
3392 considered discretionary.
3393 </dl>
3395 <div class=featex><img alt="discretionary ligature example" src=dlig.png></div>
3397 <dl>
3398 <dt><dfn id=no-discretionary-ligatures>no-discretionary-ligatures</dfn>
3400 <dd>Disables display of discretionary ligatures (OpenType feature: <span
3401 class=tag>dlig</span>).
3403 <dt><dfn id=historical-ligatures>historical-ligatures</dfn>
3405 <dd>Enables display of historical ligatures (OpenType feature: <span
3406 class=tag>hlig</span>).
3407 </dl>
3409 <div class=featex><img alt="historical ligature example" src=hlig.png></div>
3411 <dl>
3412 <dt><dfn id=no-historical-ligatures>no-historical-ligatures</dfn>
3414 <dd>Disables display of historical ligatures (OpenType feature: <span
3415 class=tag>hlig</span>).
3417 <dt><dfn id=contextual>contextual</dfn>
3419 <dd>Enables display of contextual alternates (OpenType feature: <span
3420 class=tag>calt</span>). Although not strictly a ligature feature, like
3421 ligatures this feature is commonly used to harmonize the shapes of glyphs
3422 with the surrounding context. For OpenType fonts, this feature is on by
3423 default.
3424 </dl>
3426 <div class=featex><img alt="contextual alternate example" src=calt.png></div>
3428 <dl>
3429 <dt><dfn id=no-contextual>no-contextual</dfn>
3431 <dd>Disables display of contextual alternates (OpenType feature: <span
3432 class=tag>calt</span>).
3433 </dl>
3435 <p>Required ligatures, needed for correctly rendering complex scripts, are
3436 not affected by the settings above, including ‘<code
3437 class=property>none</code>’ (OpenType feature: <span
3438 class=tag>rlig</span>).</p>
3439 <!-- prop: font-variant-position -->
3441 <h3 id=font-variant-position-prop><span class=secno>6.5 </span>Subscript
3442 and superscript forms: the <a
3443 href="#propdef-font-variant-position">font-variant-position</a> property</h3>
3445 <table class=propdef id=namefont-variant-positionvaluenormal-sub>
3446 <tbody>
3447 <tr>
3448 <td>Name:
3450 <td><dfn id=propdef-font-variant-position>font-variant-position</dfn>
3452 <tr>
3453 <td>Value:
3455 <td>normal | sub | super
3457 <tr>
3458 <td>Initial:
3460 <td>normal
3462 <tr>
3463 <td>Applies to:
3465 <td>all elements
3467 <tr>
3468 <td>Inherited:
3470 <td>yes
3472 <tr>
3473 <td>Percentages:
3475 <td>N/A
3477 <tr>
3478 <td>Media:
3480 <td>visual
3482 <tr>
3483 <td>Computed value:
3485 <td>as specified
3486 </table>
3488 <p>This property is used to enable typographic subscript and superscript
3489 glyphs. These are alternate glyphs designed within the same em-box as
3490 default glyphs and are intended to be laid out on the same baseline as the
3491 default glyphs, with no resizing or repositioning of the baseline. They
3492 are explicitly designed to match the surrounding text and to be more
3493 readable without affecting the line height.
3495 <div class=figure><img alt="comparison between real subscript glyphs and
3496 synthesized ones" src=realsubscripts.png>
3497 <p class=caption>Subscript glyphs (top) vs. typical synthesized subscripts
3498 (bottom)
3499 </div>
3501 <p>The values ‘<code class=property>sub</code>’ and ‘<code
3502 class=property>super</code>’ imply the appropriate variant glyph is
3503 displayed when available in the font (OpenType features: <span
3504 class=tag>subs, sups</span>). A value of ‘<a href="#normal2"><code
3505 class=property>normal</code></a>’ implies neither of these alternate
3506 glyphs are substituted.
3508 <p>Because of the semantic nature of subscripts and superscripts, when the
3509 value is either ‘<code class=property>sub</code>’ or ‘<code
3510 class=property>super</code>’ for a given run of text and a variant glyph
3511 is not available for all the characters in the run, simulated glyphs are
3512 synthesized for all characters using reduced forms of the default glyph.
3513 This is done to avoid a mixture of variant glyphs and synthesized ones
3514 within the same run of text, since there is no guarantee that two types of
3515 glyphs would be aligned correctly.
3517 <p>In the case of OpenType fonts that lack subscript or superscript glyphs
3518 for a given character, user agents must use the appropriate subscript and
3519 superscript metrics specified in the selected font's <a
3520 href="http://www.microsoft.com/typography/otspec/os2.htm#subxs">OS/2
3521 table</a> <a href="#OPENTYPE"
3522 rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> to calculate the size
3523 and offset of the synthesized substitutes.
3525 <p>In the past, user agents have used font-size and vertical-align to
3526 simulate subscripts and superscripts for the <span class=tag>sub</span>
3527 and <span class=tag>sup</span> elements. To allow a backwards compatible
3528 way of defining subscripts and superscripts, it is recommended that
3529 authors use conditional rules <a href="#CSS3-CONDITIONAL"
3530 rel=biblioentry>[CSS3-CONDITIONAL]<!--{{CSS3-CONDITIONAL}}--></a> so that
3531 older user agents will still render subscripts and superscripts via the
3532 older mechanism.
3534 <p>Authors should note that fonts typically only provide subscript and
3535 superscript glyphs for a subset of all characters supported by the font.
3536 While subscript and superscript glyphs are often available for Latin
3537 numbers, glyphs for punctuation and letter characters are less frequently
3538 provided. The synthetic fallback rules defined for this property assure
3539 that subscripts and superscripts will always appear but the appearance may
3540 not match author expectations if the font used does not provide the
3541 appropriate alternate glyph for all characters contained in a subscript or
3542 superscript.
3544 <div class=figure><img alt="alternate superscripts vs. glyphs synthesized
3545 using superscript metrics" src=superscript-alt-synth.png>
3546 <p class=caption>Superscript alternate glyph (left), synthesized
3547 superscript glyphs (middle), and incorrect mixture of the two (right)
3548 </div>
3550 <p>This property is not cumulative, applying it to subelements within a
3551 subscript or superscript won't nest the placement of a subscript or
3552 superscript glyph. Images contained within text runs where the value of
3553 this property is ‘<code class=property>sub</code>’ or ‘<code
3554 class=property>super</code>’ will be drawn just as they would if the
3555 value was ‘<a href="#normal2"><code class=property>normal</code></a>’.
3556 Likewise, text decorations such as underlines or emphasis marks will
3557 render in the same position as they would for the default glyphs, since
3558 this property does not affect the baseline position.
3560 <p>Because of these limitations, font-variant-position is not recommended
3561 for use in user agent stylesheets. Authors should use it in cases where
3562 subscripts or superscripts will only contain the narrow range of
3563 characters supported by the fonts specified.
3565 <div class=example>
3566 <p>A typical user agent default style for the <span class=tag>sub</span>
3567 element:</p>
3569 <pre>sub {
3570 vertical-align: sub;
3571 font-size: smaller;
3572 line-height: normal;
3573 }
3574 </pre>
3576 <p>Using font-variant-position to specify typographic subscripts in a way
3577 that will still show subscripts in older user agents:</p>
3579 <pre>@supports ( font-variant-position: sub ) {
3581 sub {
3582 vertical-align: inherit;
3583 font-size: 100%;
3584 line-height: inherit;
3585 font-variant-position: sub;
3586 }
3588 }
3589 </pre>
3591 <p>User agents that support the ‘<a
3592 href="#propdef-font-variant-position"><code
3593 class=property>font-variant-position</code></a>’ property will select a
3594 subscript variant glyph and render this without adjusting the baseline or
3595 font-size. Older user agents will ignore the ‘<a
3596 href="#propdef-font-variant-position"><code
3597 class=property>font-variant-position</code></a>’ property definition
3598 and use the standard defaults for subscripts.</p>
3599 </div>
3600 <!-- prop: font-variant-caps -->
3602 <h3 id=font-variant-caps-prop><span class=secno>6.6 </span>Capitalization:
3603 the <a href="#propdef-font-variant-caps">font-variant-caps</a> property</h3>
3605 <table class=propdef id=namefont-variant-capsvaluenormal-small-c>
3606 <tbody>
3607 <tr>
3608 <td>Name:
3610 <td><dfn id=propdef-font-variant-caps>font-variant-caps</dfn>
3612 <tr>
3613 <td>Value:
3615 <td>normal | small-caps | all-small-caps | petite-caps | all-petite-caps
3616 | unicase | titling-caps
3618 <tr>
3619 <td>Initial:
3621 <td>normal
3623 <tr>
3624 <td>Applies to:
3626 <td>all elements
3628 <tr>
3629 <td>Inherited:
3631 <td>yes
3633 <tr>
3634 <td>Percentages:
3636 <td>N/A
3638 <tr>
3639 <td>Media:
3641 <td>visual
3643 <tr>
3644 <td>Computed value:
3646 <td>as specified
3647 </table>
3649 <p>Specifies control over capitalized forms.
3651 <p>Individual values have the following meanings:
3653 <dl>
3654 <dt><dfn id=normal>normal</dfn>
3656 <dd>None of the features listed below are enabled.
3658 <dt><dfn id=small-caps>small-caps</dfn>
3660 <dd>Enables display of small capitals (OpenType feature: <span
3661 class=tag>smcp</span>). Small-caps glyphs typically use the form of
3662 uppercase letters but are reduced to the size of lowercase letters.
3663 </dl>
3665 <div class=featex><img alt="small-caps example" src=smcp.png></div>
3667 <dl>
3668 <dt><dfn id=all-small-caps>all-small-caps</dfn>
3670 <dd>Enables display of small capitals for both upper and lowercase letters
3671 (OpenType features: <span class=tag>c2sc, smcp</span>).
3673 <dt><dfn id=petite-caps>petite-caps</dfn>
3675 <dd>Enables display of petite capitals (OpenType feature: <span
3676 class=tag>pcap</span>).
3678 <dt><dfn id=all-petite-caps>all-petite-caps</dfn>
3680 <dd>Enables display of petite capitals for both upper and lowercase
3681 letters (OpenType features: <span class=tag>c2pc, pcap</span>).
3683 <dt><dfn id=unicase>unicase</dfn>
3685 <dd>Enables display of mixture of small capitals for uppercase letters
3686 with normal lowercase letters (OpenType feature: <span
3687 class=tag>unic</span>).
3689 <dt><dfn id=titling-caps>titling-caps</dfn>
3691 <dd>Enables display of titling capitals (OpenType feature: <span
3692 class=tag>titl</span>). Uppercase letter glyphs are often designed for
3693 use with lowercase letters. When used in all uppercase titling sequences
3694 they can appear too strong. Titling capitals are designed specifically
3695 for this situation.
3696 </dl>
3698 <p>This property allows the selection of alternate glyphs used for small or
3699 petite capitals or for titling. These glyphs are specifically designed to
3700 blend well with the surrounding normal glyphs, to maintain the weight and
3701 readability which suffers when text is simply resized to fit this purpose.
3703 <p>The availability of these glyphs is based on whether a given feature is
3704 defined or not in the feature list of the font. User agents can optionally
3705 decide this on a per-script basis but should explicitly not decide this on
3706 a per-character basis.
3708 <p>Some fonts may only support a subset or none of the features described
3709 for this property. For backwards compatibility with CSS 2.1, if ‘<a
3710 href="#small-caps"><code class=property>small-caps</code></a>’ or ‘<a
3711 href="#all-small-caps"><code class=property>all-small-caps</code></a>’
3712 is specified but small-caps glyphs are not available for a given font,
3713 user agents should simulate a small-caps font, for example by taking a
3714 normal font and replacing the glyphs for lowercase letters with scaled
3715 versions of the glyphs for uppercase characters (replacing the glyphs for
3716 both upper and lowercase letters in the case of ‘<a
3717 href="#all-small-caps"><code class=property>all-small-caps</code></a>’).
3719 <div class=figure style="padding: 0; margin: auto;"><img alt="synthetic vs.
3720 real small-caps" class=hires src=synthetic-vs-real-small-caps.png
3721 width=512px>
3722 <p class=caption>Synthetic vs. real small-caps
3723 </div>
3725 <p>To match the surrounding text, a font may provide alternate glyphs for
3726 caseless characters when these features are enabled but when a user agent
3727 simulates small capitals, it must not attempt to simulate alternates for
3728 codepoints which are considered caseless.
3730 <div class=figure style="padding: 0; margin: auto;"><img alt="caseless
3731 characters with small-caps, all-small-caps enabled" class=hires
3732 src=small-capitals-variations.png width=418px>
3733 <p class=caption>Caseless characters with small-caps, all-small-caps
3734 enabled
3735 </div>
3737 <p>If either ‘<a href="#petite-caps"><code
3738 class=property>petite-caps</code></a>’ or ‘<a
3739 href="#all-petite-caps"><code class=property>all-petite-caps</code></a>’
3740 is specified for a font that doesn't support these features, the property
3741 behaves as if ‘<a href="#small-caps"><code
3742 class=property>small-caps</code></a>’ or ‘<a
3743 href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
3744 respectively, had been specified. If ‘<a href="#unicase"><code
3745 class=property>unicase</code></a>’ is specified for a font that doesn't
3746 support that feature, the property behaves as if ‘<a
3747 href="#small-caps"><code class=property>small-caps</code></a>’ was
3748 applied only to lowercased uppercase letters. If ‘<a
3749 href="#titling-caps"><code class=property>titling-caps</code></a>’ is
3750 specified with a font that does not support this feature, this property
3751 has no visible effect. When simulated small capital glyphs are used, for
3752 scripts that lack uppercase and lowercase letters, ‘<a
3753 href="#small-caps"><code class=property>small-caps</code></a>’, ‘<a
3754 href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
3755 ‘<a href="#petite-caps"><code class=property>petite-caps</code></a>’,
3756 ‘<a href="#all-petite-caps"><code
3757 class=property>all-petite-caps</code></a>’ and ‘<a
3758 href="#unicase"><code class=property>unicase</code></a>’ have no visible
3759 effect.
3761 <p>When casing transforms are used to simulate small capitals, the casing
3762 transformations should match those used for the <span
3763 class=property>‘<code class=property>text-transform</code>’</span>
3764 property.
3766 <p>As a last resort, unscaled uppercase letter glyphs in a normal font may
3767 replace glyphs in a small-caps font so that the text appears in all
3768 uppercase letters.
3770 <div class=figure style="padding: 0; margin: auto;"><img alt="using
3771 all-small-caps in acronym-laden text" class=hires
3772 src=acronym-laden-text.png width=596px>
3773 <p class=caption>Using small capitals to improve readability in
3774 acronym-laden text
3775 </div>
3777 <div class=example>
3778 <p>Quotes rendered italicised, with small-caps on the first line:</p>
3780 <pre>blockquote { font-style: italic; }
3781 blockquote:first-line { font-variant: small-caps; }
3783 <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>
3784 </pre>
3785 </div>
3786 <!-- prop: font-variant-numeric -->
3788 <h3 id=font-variant-numeric-prop><span class=secno>6.7 </span>Numerical
3789 formatting: the <a
3790 href="#propdef-font-variant-numeric">font-variant-numeric</a> property</h3>
3792 <table class=propdef id=namefont-variant-numericvaluenormal-ltnu>
3793 <tbody>
3794 <tr>
3795 <td>Name:
3797 <td><dfn id=propdef-font-variant-numeric>font-variant-numeric</dfn>
3799 <tr>
3800 <td>Value:
3802 <td>normal | [ <numeric-figure-values> ||
3803 <numeric-spacing-values> || <numeric-fraction-values> ||
3804 ordinal || slashed-zero ]
3806 <tr>
3807 <td>Initial:
3809 <td>normal
3811 <tr>
3812 <td>Applies to:
3814 <td>all elements
3816 <tr>
3817 <td>Inherited:
3819 <td>yes
3821 <tr>
3822 <td>Percentages:
3824 <td>N/A
3826 <tr>
3827 <td>Media:
3829 <td>visual
3831 <tr>
3832 <td>Computed value:
3834 <td>as specified
3835 </table>
3837 <p>Specifies control over numerical forms.
3839 <pre
3840 class=prod><dfn id=ltnumeric-figure-valuesgt><var><numeric-figure-values></var></dfn> = [ lining-nums | oldstyle-nums ]</pre>
3842 <pre
3843 class=prod><dfn id=ltnumeric-spacing-valuesgt><var><numeric-spacing-values></var></dfn> = [ proportional-nums | tabular-nums ]</pre>
3845 <pre
3846 class=prod><dfn id=ltnumeric-fraction-valuesgt><var><numeric-fraction-values></var></dfn> = [ diagonal-fractions | stacked-fractions ]</pre>
3848 <p>Individual values have the following meanings:
3850 <dl>
3851 <dt><dfn id=normal0>normal</dfn>
3853 <dd>None of the features listed below are enabled.
3855 <dt><dfn id=lining-nums>lining-nums</dfn>
3857 <dd>Enables display of lining numerals (OpenType feature: <span
3858 class=tag>lnum</span>).
3860 <dt><dfn id=oldstyle-nums>oldstyle-nums</dfn>
3862 <dd>Enables display of old-style numerals (OpenType feature: <span
3863 class=tag>onum</span>).
3865 <dt><dfn id=proportional-nums>proportional-nums</dfn>
3867 <dd>Enables display of proportional numerals (OpenType feature: <span
3868 class=tag>pnum</span>).
3870 <dt><dfn id=tabular-nums>tabular-nums</dfn>
3872 <dd>Enables display of tabular numerals (OpenType feature: <span
3873 class=tag>tnum</span>).
3874 </dl>
3876 <p>The example below shows how these different properties can be combined
3877 to influence the rendering of tabular data with fonts that support these
3878 features. Within normal paragraph text, proportional numbers are used
3879 while tabular numbers are used so that columns of numbers line up
3880 properly:
3882 <div class=figure style="padding: 0; margin: auto;"><img alt="combining
3883 number styles" src=numberstyles.png>
3884 <p class=caption>Using number styles
3885 </div>
3887 <dl>
3888 <dt><dfn id=diagonal-fractions>diagonal-fractions</dfn>
3890 <dd>Enables display of lining diagonal fractions (OpenType feature: <span
3891 class=tag>frac</span>).
3892 </dl>
3894 <div class=featex><img alt="diagonal fraction example" src=frac.png></div>
3896 <dl>
3897 <dt><dfn id=stacked-fractions>stacked-fractions</dfn>
3899 <dd>Enables display of lining stacked fractions (OpenType feature: <span
3900 class=tag>afrc</span>).
3901 </dl>
3903 <div class=featex><img alt="stacked fraction example" src=afrc.png></div>
3905 <dl>
3906 <dt><dfn id=ordinal>ordinal</dfn>
3908 <dd>Enables display of forms used with ordinal numbers (OpenType feature:
3909 <span class=tag>ordn</span>).
3911 <dt><dfn id=slashed-zero>slashed-zero</dfn>
3913 <dd>Enables display of slashed zeros (OpenType feature: <span
3914 class=tag>zero</span>).
3915 </dl>
3917 <div class=featex><img alt="slashed zero example" src=zero.png></div>
3919 <div class=example id=steak-marinade>
3920 <p>A simple flank steak marinade recipe, rendered with automatic fractions
3921 and old-style numerals:</p>
3923 <pre>.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; }
3925 <h4>Steak marinade:</h4>
3926 <ul>
3927 <li><span class="amount">2</span> tbsp olive oil</li>
3928 <li><span class="amount">1</span> tbsp lemon juice</li>
3929 <li><span class="amount">1</span> tbsp soy sauce</li>
3930 <li><span class="amount">1 1/2</span> tbsp dry minced onion</li>
3931 <li><span class="amount">2 1/2</span> tsp italian seasoning</li>
3932 <li>Salt &amp; pepper</li>
3933 </ul>
3935 <p>Mix the meat with the marinade and let it sit covered in the refrigerator
3936 for a few hours or overnight.</p>
3937 </pre>
3938 </div>
3939 <!-- prop: font-variant-alternates -->
3941 <h3 id=font-variant-alternates-prop><span class=secno>6.8 </span>Alternates
3942 and swashes: the <a
3943 href="#propdef-font-variant-alternates">font-variant-alternates</a>
3944 property</h3>
3946 <table class=propdef id=namefont-variant-alternatesvaluenormal-s>
3947 <tbody>
3948 <tr>
3949 <td>Name:
3951 <td><dfn
3952 id=propdef-font-variant-alternates>font-variant-alternates</dfn>
3954 <tr>
3955 <td>Value:
3957 <td>normal | [ stylistic(<feature-value-name>) || historical-forms
3958 || styleset(<feature-value-name>#) ||
3959 character-variant(<feature-value-name>#) ||
3960 swash(<feature-value-name>) ||
3961 ornaments(<feature-value-name>) ||
3962 annotation(<feature-value-name>) ]
3964 <tr>
3965 <td>Initial:
3967 <td>normal
3969 <tr>
3970 <td>Applies to:
3972 <td>all elements
3974 <tr>
3975 <td>Inherited:
3977 <td>yes
3979 <tr>
3980 <td>Percentages:
3982 <td>N/A
3984 <tr>
3985 <td>Media:
3987 <td>visual
3989 <tr>
3990 <td>Computed value:
3992 <td>as specified
3993 </table>
3995 <p>For any given character, fonts can provide a variety of alternate glyphs
3996 in addition to the default glyph for that character. This property
3997 provides control over the selection of these alternate glyphs.
3999 <p>In cases where multiple alternates are possible, authors define a
4000 <code><feature-value-name></code> using the
4001 <code>@font-feature-values</code> rule described below to indicate the
4002 specific alternate to be used. The nature of these alternates is font
4003 specific, so the rule defines values for a specific font family or set of
4004 families. When a particular value has not been defined for a given family,
4005 the named value is treated as if the feature had omitted from the style
4006 rule. If a given value is outside the range supported by a given font, the
4007 value is ignored. These values never apply to generic font families, nor
4008 to families selected as part of system font fallback. Values that behave
4009 this way are marked as <em>font specific</em>.
4011 <p>Individual values have the following meanings:
4013 <dl>
4014 <dt><dfn id=normal1>normal</dfn>
4016 <dd>None of the features listed below are enabled.
4018 <dt><dfn id=stylisticltfeature-value-namegt
4019 title=stylistic>stylistic(<feature-value-name>)</dfn>
4021 <dd>Enables display of stylistic alternates (<em>font specific</em>,
4022 OpenType feature: <span class=tag>salt
4023 <feature-value-name></span>).
4024 </dl>
4026 <div class=featex><img alt="stylistic alternate example" src=salt.png></div>
4028 <dl>
4029 <dt><dfn id=historical-forms>historical-forms</dfn>
4031 <dd>Enables display of historical forms (OpenType feature: <span
4032 class=tag>hist</span>).
4033 </dl>
4035 <div class=featex><img alt="historical form example" src=hist.png></div>
4037 <dl>
4038 <dt><dfn id=stylesetltfeature-value-namegt
4039 title=styleset>styleset(<feature-value-name>#)</dfn>
4041 <dd>Enables display with stylistic sets (<em>font specific</em>, OpenType
4042 feature: <span class=tag>ss<feature-index></span> OpenType
4043 currently defines <span class=tag>ss01</span> through <span
4044 class=tag>ss20</span>).
4045 </dl>
4047 <div class=featex><img alt="styleset example" src=ssnn.png></div>
4049 <dl>
4050 <dt><dfn id=character-variantltfeature-value-namegt
4051 title=character-variant>character-variant(<feature-value-name>#)</dfn>
4054 <dd>Enables display of specific character variants (<em>font
4055 specific</em>, OpenType feature: <span
4056 class=tag>cv<feature-index></span> OpenType currently defines <span
4057 class=tag>cv01</span> through <span class=tag>cv99</span>).
4059 <dt><dfn id=swashltfeature-value-namegt
4060 title=swash>swash(<feature-value-name>)</dfn>
4062 <dd>Enables display of swash glyphs (<em>font specific</em>, OpenType
4063 feature: <span class=tag>swsh <feature-index>, cswh
4064 <feature-index></span>).
4065 </dl>
4067 <div class=featex><img alt="swash example" src=swsh.png></div>
4069 <dl>
4070 <dt><dfn id=ornamentsltfeature-value-namegt
4071 title=ornaments>ornaments(<feature-value-name>)</dfn>
4073 <dd>Enables replacement of default glyphs with ornaments, if provided in
4074 the font (<em>font specific</em>, OpenType feature: <span class=tag>ornm
4075 <feature-index></span>). Some fonts may offer ornament glyphs as
4076 alternates for a wide collection of characters; however, displaying
4077 arbitrary characters (e.g., alphanumerics) as ornaments is poor practice
4078 as it distorts the semantics of the data. Font designers are encouraged
4079 to encode all ornaments (except those explicitly encoded in the Unicode
4080 Dingbats blocks, etc.) as alternates for the bullet character (U+2022) to
4081 allow authors to select the desired glyph using
4082 <feature-value-name>.
4083 </dl>
4085 <div class=featex><img alt="ornaments example" src=ornm.png></div>
4087 <dl>
4088 <dt><dfn id=annotationltfeature-value-namegt
4089 title=annotation>annotation(<feature-value-name>)</dfn>
4091 <dd>Enables display of alternate annotation forms (<em>font specific</em>,
4092 OpenType feature: <span class=tag>nalt <feature-index></span>).
4093 </dl>
4095 <div class=featex><img alt="alternate annotation form example"
4096 src=nalt.png></div>
4098 <h3 id=font-feature-values><span class=secno>6.9 </span>Defining font
4099 specific alternates: the <code>@font-feature-values</code> rule</h3>
4101 <p>Several of the possible values of ‘<a
4102 href="#propdef-font-variant-alternates"><code
4103 class=property>font-variant-alternates</code></a>’ listed above are
4104 labeled as "font specific". For these features fonts may define not just a
4105 single glyph but a set of alternate glyphs with an index to select a given
4106 alternate. Since these are font family specific, the
4107 <code>@font-feature-values</code> rule is used to define named-values for
4108 these indices for a given family.
4110 <p>In the case of the swash Q in the example shown above, the swash could
4111 be specified using these style rules:
4113 <pre>
4115 @font-feature-values Jupiter Sans {
4116 @swash {
4117 delicate: 1;
4118 flowing: 2;
4119 }
4120 }
4122 h2 { font-family: Jupiter Sans, sans-serif; }
4124 /* show the second swash variant in h2 headings */
4125 h2:first-letter { font-variant-alternates: swash(flowing); }
4127 <h2>Quick</h2></pre>
4129 <p>When Jupiter Sans is present, the second alternate swash alternate will
4130 be displayed. When not present, no swash character will be shown, since
4131 the specific named-value "flowing" is only defined for the Jupiter Sans
4132 family. The @-mark indicates the name of the property value for which a
4133 named-value can be used. The name "flowing" is chosen by the author.
4135 <p>The syntax of the <code>@font-feature-values</code> rule is defined as:
4137 <pre>@font-feature-values <font-family># {
4138 @<feature-type> {
4139 <feature-ident> : <feature-index>+;
4140 <feature-ident> : <feature-index>+;
4141 ...
4142 }
4143 ...
4144 }
4145 </pre>
4147 <p>where:
4149 <pre
4150 class=prod><dfn id=ltfont-familygt><var><font-family></var></dfn> = font family name, same syntax as font-family property</pre>
4152 <pre
4153 class=prod><dfn id=ltfeature-typegt><var><feature-type></var></dfn> = the name of one of the font specific font-variant property values
4154 (e.g. swash, styleset, annotation)</pre>
4156 <pre
4157 class=prod><dfn id=ltfeature-identgt><var><feature-ident></var></dfn> = a user-defined identifier used to describe a set of indices</pre>
4159 <pre
4160 class=prod><dfn id=ltfeature-indexgt><var><feature-index></var></dfn> = an integer value greater than 0 specific to a given font or set of fonts</pre>
4162 <p>These <code>@font-feature-values</code> rules can appear anywhere within
4163 a stylesheet and are exposed bidirectionally across @import boundaries.
4164 Within each font feature values declaration, syntax errors such as unknown
4165 property value names, invalid identifiers or values result in the
4166 declaration being dropped, similar to the way syntax errors in style
4167 declarations are handled.
4169 <p>If multiple <code>@font-feature-values</code> rules are defined for a
4170 given family, the resulting values defined are the union of these rules.
4171 This allows a set of named-values to be defined for a given font family
4172 globally for a site and specific additions made per-page. If the same
4173 <feature-value-name> is defined mulitple times for a given
4174 font-variant value, the last defined value is used.
4176 <pre>
4177 site.css:
4179 @font-feature-values Mercury Serif {
4180 @styleset {
4181 stacked-g: 3; /* "two-storey" versions of g, a */
4182 stacked-a: 4;
4183 }
4184 }
4186 page.css:
4188 @font-feature-values Mercury Serif {
4189 @styleset {
4190 geometric-m: 7; /* alternate version of m */
4191 }
4192 }
4194 body {
4195 font-family: Mercury Serif, serif;
4197 /* enable both the use of stacked g and alternate m */
4198 font-variant-alternates: styleset(stacked-g, geometric-m);
4199 }</pre>
4201 <p>Only named font families are allowed for <font-family>, rules that
4202 include generic or system fonts in the list of font families are
4203 considered syntax errors and the contents of the rules are ignored.
4204 However, if a user agent defines a generic font to be a specific named
4205 font (e.g. Helvetica), the settings associated with that family name will
4206 be used.
4208 <p>For <font-variant-property-value>, only font specific property value
4209 names supported by the ‘<a href="#propdef-font-variant"><code
4210 class=property>font-variant</code></a>’ property are recognized,
4211 definitions for other value names cause a syntax error and are ignored.
4212 Each property value that is font specific is clearly marked as such.
4213 Feature value names follow the rules of CSS identifiers and are
4214 case-sensitive. They are unique only for a given set of font families and
4215 font-variant property value; the same identifier used with a different
4216 font-variant property value is treated as a separate and distinct value.
4218 <p class=issue>Matching of feature value names is dependent on the
4219 resolution of matching for user-defined identifiers in CSS.
4221 <p>Using a commonly named value allows authors to use a single style rule
4222 to cover a set of fonts for which the underlying selector is different for
4223 each font. If either font in the example below is found, a circled number
4224 glyph will be used:
4226 <pre>@font-feature-values Taisho Gothic {
4227 @annotation { boxed: 1; circled: 4; }
4228 }
4230 @font-feature-values Otaru Kisa {
4231 @annotation { circled: 1; black-boxed: 3; }
4232 }
4234 h3.title {
4235 /* circled form defined for both fonts */
4236 font-family: Taisho Gothic, Otaru Kisa;
4237 font-variant: annotation(circled);
4238 }</pre>
4240 <p>Most font specific font-variant property values take a single value
4241 (e.g. swash). The character-variant property value allows two values and
4242 styleset allows an unlimited number. If a larger number of values are
4243 assigned to a given name, a syntax error occurs and the entire
4244 <font-feature-values-declaration> is ignored.
4246 <p>For the styleset property value, multiple values indicate the style sets
4247 to be enabled. Values between 1 and 99 enable OpenType features <span
4248 class=tag>ss01</span> through <span class=tag>ss99</span>. However, the
4249 OpenType standard only officially defines <span class=tag>ss01</span>
4250 through <span class=tag>ss20</span>. Values greater than 99 or equal to 0
4251 are ignored but do not generate a syntax error when parsed.
4253 <pre>@font-feature-values Mars Serif {
4254 @styleset {
4255 alt-g: 1; /* implies ss01 = 1 */
4256 curly-quotes: 3; /* implies ss03 = 1 */
4257 code: 4 5; /* implies ss04 = 1, ss05 = 1 */
4258 }
4260 @styleset {
4261 dumb: 125; /* >99, ignored */
4262 }
4264 @swash {
4265 swishy: 3 5; /* more than 1 value for swash, syntax error */
4266 }
4267 }
4269 p.codeblock {
4270 /* implies ss03 = 1, ss04 = 1, ss05 = 1 */
4271 font-variant-alternates: styleset(curly-quotes, code);
4272 }</pre>
4274 <p>For character-variant, a single value between 1 and 99 indicates the
4275 enabling of OpenType feature <span class=tag>cv01</span> through <span
4276 class=tag>cv99</span>. For OpenType fonts, values greater than 99 or equal
4277 to 0 are ignored but do not generate a syntax error when parsed. When two
4278 values are listed, the first value indicates the feature used and the
4279 second the value passed for that feature. When two value names imply
4280 different settings for the same underlying feature the last setting is
4281 used.
4283 <pre>@font-feature-values MM Greek {
4284 @character-variant { alpha-2: 1 2; } /* implies cv01 = 2 */
4285 @character-variant { beta-3: 2 3; } /* implies cv02 = 3 */
4286 @character-variant { epsilon: 5 3 6; } /* more than 2 values, syntax error, ignored */
4287 @character-variant { gamma: 12; } /* implies cv12 = 1 */
4288 @character-variant { zeta: 20 3; } /* implies cv20 = 3 */
4289 @character-variant { zeta-2: 20 2; } /* implies cv20 = 2 */
4290 @character-variant { silly: 105; } /* >99, ignored */
4291 @character-variant { dumb: 323 3; } /* >99, ignored */
4292 }
4294 #title {
4295 /* use the third alternate beta, first alternate gamma */
4296 font-variant-alternates: character-variant(beta-3, gamma);
4297 }
4299 p {
4300 /* zeta-2 follows zeta, implies cv20 = 2 */
4301 font-variant-alternates: character-variant(zeta, zeta-2);
4302 }
4304 .special {
4305 /* zeta follows zeta-2, implies cv20 = 3 */
4306 font-variant-alternates: character-variant(zeta-2, zeta);
4307 }</pre>
4309 <p>See <a href="#font-feature-values-DOM">Appendix B</a> for a description
4310 of the interfaces used to modify these rules via the CSS Object Model.
4312 <div class=figure><img alt="Matching text on Byzantine seals using
4313 character variants" src=byzantineseal.png>
4314 <p class=caption>Byzantine seal text displayed with character variants
4315 </div>
4317 <div class=example>
4318 <p>In the figure above, the text in red is rendered using a font
4319 containing character variants that mimic the character forms found on a
4320 Byzantine seal from the 8th century A.D. Two lines below is the same text
4321 displayed in a font without variants. Note the two variants for U and N
4322 used on the seal.</p>
4324 <pre>@font-feature-values Athena Ruby {
4325 @character-variant {
4326 leo-B: 2 1;
4327 leo-M: 13 3;
4328 leo-alt-N: 14 1;
4329 leo-N: 14 2;
4330 leo-T: 20 1;
4331 leo-U: 21 2;
4332 leo-alt-U: 21 4;
4333 }
4334 }
4336 p {
4337 font-variant: discretionary-ligatures,
4338 character-variant(leo-B, leo-M, leo-N, leo-T, leo-U);
4339 }
4341 span.alt-N {
4342 font-variant-alternates: character-variant(leo-alt-N);
4343 }
4345 span.alt-U {
4346 font-variant-alternates: character-variant(leo-alt-U);
4347 }
4349 <p>ENO....UP͞RSTU<span class="alt-U">U</span>͞<span class="alt-U">U</span>ΚΑΙTỤẠG̣IUPNS</p>
4351 <p>LEON|ΚΑΙCONSTA|NTI<span class="alt-N">N</span>OS..|STOIBAṢ.|LIṢROM|AIO<span class="alt-N">N</span></p>
4352 </pre>
4353 </div>
4355 <h3 id=font-variant-east-asian-prop><span class=secno>6.10 </span>East
4356 Asian text rendering: the <a
4357 href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
4358 property</h3>
4360 <table class=propdef id=namefont-variant-east-asianvaluenormal-l>
4361 <tbody>
4362 <tr>
4363 <td>Name:
4365 <td><dfn
4366 id=propdef-font-variant-east-asian>font-variant-east-asian</dfn>
4368 <tr>
4369 <td>Value:
4371 <td>normal | [ <east-asian-variant-values> ||
4372 <east-asian-width-values> || ruby ]
4374 <tr>
4375 <td>Initial:
4377 <td>normal
4379 <tr>
4380 <td>Applies to:
4382 <td>all elements
4384 <tr>
4385 <td>Inherited:
4387 <td>yes
4389 <tr>
4390 <td>Percentages:
4392 <td>N/A
4394 <tr>
4395 <td>Media:
4397 <td>visual
4399 <tr>
4400 <td>Computed value:
4402 <td>as specified
4403 </table>
4405 <p>Allows control of glyph substitution and sizing in East Asian text.
4407 <pre
4408 class=prod><dfn id=lteast-asian-variant-valuesgt><var><east-asian-variant-values></var></dfn> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]</pre>
4410 <pre
4411 class=prod><dfn id=lteast-asian-width-valuesgt><var><east-asian-width-values></var></dfn> = [ full-width | proportional-width ]</pre>
4413 <p>Individual values have the following meanings:
4415 <dl>
4416 <dt><dfn id=normal2>normal</dfn>
4418 <dd>None of the features listed below are enabled.
4420 <dt><dfn id=jis78>jis78</dfn>
4422 <dd>Enables rendering of JIS78 forms (OpenType feature: <span
4423 class=tag>jp78</span>).
4424 </dl>
4426 <div class=featex><img alt="JIS78 form example" src=jp78.png></div>
4428 <dl>
4429 <dt><dfn id=jis83>jis83</dfn>
4431 <dd>Enables rendering of JIS83 forms (OpenType feature: <span
4432 class=tag>jp83</span>).
4434 <dt><dfn id=jis90>jis90</dfn>
4436 <dd>Enables rendering of JIS90 forms (OpenType feature: <span
4437 class=tag>jp90</span>).
4439 <dt><dfn id=jis04>jis04</dfn>
4441 <dd>Enables rendering of JIS2004 forms (OpenType feature: <span
4442 class=tag>jp04</span>).
4443 <p>The various JIS variants reflect the glyph forms defined in different
4444 Japanese national standards. Fonts generally include glyphs defined by
4445 the most recent national standard but it's sometimes necessary to use
4446 older variants, to match signage for example.</p>
4448 <dt><dfn id=simplified>simplified</dfn>
4450 <dd>Enables rendering of simplified forms (OpenType feature: <span
4451 class=tag>smpl</span>).
4452 <p>The ‘<a href="#simplified"><code
4453 class=property>simplified</code></a>’ and ‘<a
4454 href="#traditional"><code class=property>traditional</code></a>’
4455 values allow control over the glyph forms for characters which have been
4456 simplified over time but for which the older, traditional form is still
4457 used in some contexts. The exact set of characters and glyph forms will
4458 vary to some degree by context for which a given font was designed.</p>
4460 <dt><dfn id=traditional>traditional</dfn>
4462 <dd>Enables rendering of traditional forms (OpenType feature: <span
4463 class=tag>trad</span>).
4464 </dl>
4466 <div class=featex><img alt="tradtional form example" src=trad.png></div>
4468 <dl>
4469 <dt><dfn id=full-width>full-width</dfn>
4471 <dd>Enables rendering of full-width variants (OpenType feature: <span
4472 class=tag>fwid</span>).
4474 <dt><dfn id=proportional-width>proportional-width</dfn>
4476 <dd>Enables rendering of proportionally-spaced variants (OpenType feature:
4477 <span class=tag>pwid</span>).
4478 </dl>
4480 <div class=featex><img alt="proportionally spaced Japanese example"
4481 src=pwid.png></div>
4483 <dl>
4484 <dt><dfn id=ruby>ruby</dfn>
4486 <dd>Enables display of ruby variant glyphs (OpenType feature: <span
4487 class=tag>ruby</span>). Since ruby text is generally smaller than the
4488 associated body text, font designers can design special glyphs for use
4489 with ruby that are more readable than scaled down versions of the default
4490 glyphs. Only glyph selection is affected, there is no associated font
4491 scaling or other change that affects line layout. The red ruby text below
4492 is shown with default glyphs (top) and with ruby variant glyphs (bottom).
4493 Note the slight difference in stroke thickness.
4494 </dl>
4496 <div class=featex><img alt="ruby variant example" src=rubyshinkansen.png></div>
4498 <h3 id=font-variant-prop><span class=secno>6.11 </span>Overall shorthand
4499 for font rendering: the <a href="#propdef-font-variant">font-variant</a>
4500 property</h3>
4502 <table class=propdef id=namefont-variantvaluenormal-none-ltcommo>
4503 <tbody>
4504 <tr>
4505 <td>Name:
4507 <td><dfn id=propdef-font-variant>font-variant</dfn>
4509 <tr>
4510 <td>Value:
4512 <td>normal | none | [ <common-lig-values> ||
4513 <discretionary-lig-values> || <historical-lig-values> ||
4514 <contextual-alt-values> || stylistic(<feature-value-name>)
4515 || historical-forms || styleset(<feature-value-name>#) ||
4516 character-variant(<feature-value-name>#) ||
4517 swash(<feature-value-name>) ||
4518 ornaments(<feature-value-name>) ||
4519 annotation(<feature-value-name>) || [ small-caps | all-small-caps
4520 | petite-caps | all-petite-caps | unicase | titling-caps ] ||
4521 <numeric-figure-values> || <numeric-spacing-values> ||
4522 <numeric-fraction-values> || ordinal || slashed-zero ||
4523 <east-asian-variant-values> || <east-asian-width-values> ||
4524 ruby ]
4526 <tr>
4527 <td>Initial:
4529 <td>normal
4531 <tr>
4532 <td>Applies to:
4534 <td>all elements
4536 <tr>
4537 <td>Inherited:
4539 <td>yes
4541 <tr>
4542 <td>Percentages:
4544 <td>N/A
4546 <tr>
4547 <td>Media:
4549 <td>visual
4551 <tr>
4552 <td>Computed value:
4554 <td>as specified
4555 </table>
4557 <p>The value ‘<a href="#normal2"><code
4558 class=property>normal</code></a>’ resets all other font feature
4559 properties to their inital value. The ‘<code
4560 class=property>none</code>’ value sets ‘<a
4561 href="#propdef-font-variant-ligatures"><code
4562 class=property>font-variant-ligatures</code></a>’ to ‘<code
4563 class=property>none</code>’ and resets all other font feature properties
4564 to their initial value. Like other shorthands, using ‘<a
4565 href="#propdef-font-variant"><code
4566 class=property>font-variant</code></a>’ resets unspecified font-variant
4567 subproperties to their initial values. It does not reset the values of
4568 either ‘<a href="#propdef-font-language-override"><code
4569 class=property>font-language-override</code></a>’ or ‘<a
4570 href="#propdef-font-feature-settings"><code
4571 class=property>font-feature-settings</code></a>’.
4573 <h3 id=font-feature-settings-prop><span class=secno>6.12 </span>Low-level
4574 font feature settings control: the <a
4575 href="#propdef-font-feature-settings">font-feature-settings</a> property</h3>
4577 <table class=propdef id=namefont-feature-settingsvaluenormal-ltf>
4578 <tbody>
4579 <tr>
4580 <td>Name:
4582 <td><dfn id=propdef-font-feature-settings>font-feature-settings</dfn>
4584 <tr>
4585 <td>Value:
4587 <td>normal | <feature-tag-value>#
4589 <tr>
4590 <td>Initial:
4592 <td>normal
4594 <tr>
4595 <td>Applies to:
4597 <td>all elements
4599 <tr>
4600 <td>Inherited:
4602 <td>yes
4604 <tr>
4605 <td>Percentages:
4607 <td>N/A
4609 <tr>
4610 <td>Media:
4612 <td>visual
4614 <tr>
4615 <td>Computed value:
4617 <td>as specified
4618 </table>
4620 <p>This property provides low-level control over OpenType font features. It
4621 is intended as a way of providing access to font features that are not
4622 widely used but are needed for a particular use case. A value of ‘<a
4623 href="#normal2"><code class=property>normal</code></a>’ means that no
4624 change in glyph selection or positioning occurs due to this property.
4626 <p>
4628 <pre>/* enable small caps and use second swash alternate */
4629 font-feature-settings: "smcp", "swsh" 2;</pre>
4631 <p>Feature tag values have the following syntax:
4633 <pre
4634 class=prod><dfn id=ltfeature-tag-valuegt><var><feature-tag-value></var></dfn> = <string> [ <integer> | on | off ]?</pre>
4636 <p>The <string> is a case-sensitive OpenType feature tag. As
4637 specified in the OpenType specification, feature tags contain four ASCII
4638 characters. Tag strings longer or shorter than four characters, or
4639 containing characters outside the U+20–7E codepoint range are invalid.
4640 User agents must not use a feature tag created by truncating or padding
4641 the string to four characters. Feature tags need only match a feature tag
4642 defined in the font, they are not limited to explicitly registered
4643 OpenType features. Fonts defining custom feature tags should follow the <a
4644 href="http://www.microsoft.com/typography/otspec/featuretags.htm">tag name
4645 rules</a> defined in the OpenType specification <a
4646 href="#OPENTYPE-FEATURES"
4647 rel=biblioentry>[OPENTYPE-FEATURES]<!--{{!OPENTYPE-FEATURES}}--></a>.
4648 Feature tags not present in the font are ignored; a user agent must not
4649 attempt to synthesize fallback behavior based on these feature tags.
4651 <p>This means that explicitly disabling the <span class=tag>kern</span>
4652 feature will not affect the application of kerning data found in the
4653 ‘<code class=property>kern</code>’ table (as opposed to kerning data
4654 associated with the <span class=tag>kern</span> feature in the ‘<code
4655 class=property>GPOS</code>’ table). Authors should use the ‘<a
4656 href="#propdef-font-kerning"><code
4657 class=property>font-kerning</code></a>’ property to explictly enable or
4658 disable kerning since this property affects both types of kerning.
4660 <p>If present, a value indicates an index used for glyph selection. An
4661 <integer> value must be 0 or greater. A value of 0 indicates that
4662 the feature is disabled. For boolean features, a value of 1 enables the
4663 feature. For non-boolean features, a value of 1 or greater enables the
4664 feature and indicates the feature selection index. A value of ‘<code
4665 class=property>on</code>’ is synonymous with 1 and ‘<code
4666 class=property>off</code>’ is synonymous with 0. If the value is
4667 omitted, a value of 1 is assumed.
4669 <pre>
4670 font-feature-settings: "dlig" 1; /* dlig=1 enable discretionary ligatures */
4671 font-feature-settings: "smcp" on; /* smcp=1 enable small caps */
4672 font-feature-settings: 'c2sc'; /* c2sc=1 enable caps to small caps */
4673 font-feature-settings: "liga" off; /* liga=0 no common ligatures */
4674 font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms */
4675 font-feature-settings: "tnum" "hist"; /* invalid, need a comma-delimited list */
4676 font-feature-settings: "palin" off; /* good idea but invalid tagname */
4677 font-feature-settings: "PKRN"; /* PKRN=1 enable custom feature */
4678 font-feature-settings: dlig; /* invalid, tag must be a string */
4679 </pre>
4681 <p>Authors should generally use ‘<a href="#propdef-font-variant"><code
4682 class=property>font-variant</code></a>’ and its related subproperties
4683 whenever possible and only use this property for special cases where its
4684 use is the only way of accessing a particular infrequently used font
4685 feature.
4687 <p>Although specifically defined for OpenType feature tags, feature tags
4688 for other modern font formats that support font features may be added in
4689 the future. Where possible, features defined for other font formats should
4690 attempt to follow the pattern of registered OpenType tags.
4692 <div class=example>
4693 <p>The Japanese text below will be rendered with half-width kana
4694 characters:</p>
4696 <pre lang=ja>
4697 body { font-feature-settings: "hwid"; /* Half-width OpenType feature */ }
4699 <p>毎日<a href="http://images.google.com/images?q=%E3%82%AB%E3%83%AC%E3%83%BC" style="text-decoration: none;">カレー</a>食べてるのに、飽きない</p>
4700 </pre>
4701 </div>
4703 <h3 id=font-language-override-prop><span class=secno>6.13 </span>Font
4704 language override: the <a
4705 href="#propdef-font-language-override">font-language-override</a> property</h3>
4707 <table class=propdef id=namefont-language-overridevaluenormal-lt>
4708 <tbody>
4709 <tr>
4710 <td>Name:
4712 <td><dfn id=propdef-font-language-override>font-language-override</dfn>
4714 <tr>
4715 <td>Value:
4717 <td>normal | <string>
4719 <tr>
4720 <td>Initial:
4722 <td>normal
4724 <tr>
4725 <td>Applies to:
4727 <td>all elements
4729 <tr>
4730 <td>Inherited:
4732 <td>yes
4734 <tr>
4735 <td>Percentages:
4737 <td>N/A
4739 <tr>
4740 <td>Media:
4742 <td>visual
4744 <tr>
4745 <td>Computed value:
4747 <td>as specified
4748 </table>
4750 <p>The value of ‘<a href="#normal2"><code
4751 class=property>normal</code></a>’ implies that when rendering with
4752 OpenType fonts the language of the document is used to infer the OpenType
4753 language system, used to select language specific features when rendering.
4754 The value of the <string> is a single three-letter OpenType <a
4755 href="http://www.microsoft.com/typography/otspec/languagetags.htm">language
4756 system tag</a>, defined in the layout tag registry of the OpenType
4757 specification.
4759 <div class=example>
4760 <p>The <a href="http://www.un.org/en/documents/udhr/index.shtml">Universal
4761 Declaration of Human Rights</a> has been translated into a wide variety
4762 of languages. In Turkish, Article 9 of this document might be marked up
4763 as below:</p>
4765 <pre lang=tr><body lang="tr">
4767 <h4>Madde 9</h4>
4768 <p>Hiç kimse keyfi olarak tutuklanamaz, alıkonulanamaz veya sürülemez.</p>
4769 </pre>
4771 <p>Here the user agent uses the value of the ‘<code
4772 class=property>lang</code>’ attribute when rendering text and
4773 appropriately renders this text without ‘<code
4774 class=property>fi</code>’ ligatures. There is no need to use the ‘<a
4775 href="#propdef-font-language-override"><code
4776 class=property>font-language-override</code></a>’ property.</p>
4778 <p>However, a given font may lack support for a specific language. In this
4779 situation authors may need to use the typographic conventions of a
4780 related language that are supported by that font:</p>
4782 <pre lang=mk><body lang="mk"> <!-- Macedonian lang code -->
4784 body { font-language-override: "SRB"; /* Serbian OpenType language tag */ }
4786 <h4>Члeн 9</h4>
4787 <p>Никoj чoвeк нeмa дa бидe пoдлoжeн нa прoизвoлнo aпсeњe, притвoр или прoгoнувaњe.</p>
4789 </pre>
4791 <p>The Macedonian text here will be rendered using Serbian typographic
4792 conventions, with the assumption that the font specified supports
4793 Serbian.</p>
4794 </div>
4796 <p><a id=rendering-considerations></a>
4798 <h2 id=font-feature-resolution><span class=secno>7 </span>Font Feature
4799 Resolution</h2>
4801 <p>As described in the previous section, font features can be enabled in a
4802 variety of ways, either via the use of ‘<a
4803 href="#propdef-font-variant"><code
4804 class=property>font-variant</code></a>’ or ‘<a
4805 href="#propdef-font-feature-settings"><code
4806 class=property>font-feature-settings</code></a>’ in a style rule or
4807 within an <code>@font-face</code> rule. The resolution order for the union
4808 of these settings is defined below. Features defined via CSS properties
4809 are applied on top of layout engine default features.
4811 <h3 id=default-features><span class=secno>7.1 </span>Default features</h3>
4813 <p>For OpenType fonts, user agents must enable the default features defined
4814 in the OpenType documentation for a given script and writing mode.
4815 Required ligatures, common ligatures and contextual forms must be enabled
4816 by default (OpenType features: <span class=tag>rlig, liga, clig,
4817 calt</span>), along with localized forms (OpenType feature: <span
4818 class=tag>locl</span>), and features required for proper display of
4819 composed characters and marks (OpenType features: <span class=tag>ccmp,
4820 mark, mkmk</span>). These features must always be enabled, even when the
4821 value of the ‘<a href="#propdef-font-variant"><code
4822 class=property>font-variant</code></a>’ and ‘<a
4823 href="#propdef-font-feature-settings"><code
4824 class=property>font-feature-settings</code></a>’ properties is ‘<a
4825 href="#normal2"><code class=property>normal</code></a>’. Individual
4826 features are only disabled when explicitly overridden by the author, when
4827 ‘<a href="#propdef-font-variant-ligatures"><code
4828 class=property>font-variant-ligatures</code></a>’ is set to ‘<a
4829 href="#no-common-ligatures"><code
4830 class=property>no-common-ligatures</code></a>’ for example. For handling
4831 complex scripts such as <a
4832 href="http://www.microsoft.com/typography/otfntdev/arabicot/features.aspx">Arabic</a>,
4833 <a
4834 href="http://www.microsoft.com/typography/otfntdev/mongolot/features.htm">Mongolian</a>
4835 or <a
4836 href="http://www.microsoft.com/typography/otfntdev/devanot/features.aspx">Devanagari</a>
4837 additional features are required. For upright text within vertical text
4838 runs, vertical alternates (OpenType feature: <span class=tag>vert</span>)
4839 must be enabled.
4841 <h3 id=feature-precedence><span class=secno>7.2 </span>Feature precedence</h3>
4843 <p>General and font specific font feature property settings are resolved in
4844 the order below, in ascending precedence order. This ordering is used to
4845 construct a combined list of font features that affect a given text run.
4847 <ol>
4848 <li>Font features enabled by default, including features required for a
4849 given script.
4851 <li>If the font is defined via an <code>@font-face</code> rule, the font
4852 features implied by the font-variant descriptor in the
4853 <code>@font-face</code> rule.
4855 <li>If the font is defined via an <code>@font-face</code> rule, the font
4856 features implied by the font-feature-settings descriptor in the
4857 <code>@font-face</code> rule.
4859 <li>Feature settings determined by properties other than ‘<a
4860 href="#propdef-font-variant"><code
4861 class=property>font-variant</code></a>’ or ‘<a
4862 href="#propdef-font-feature-settings"><code
4863 class=property>font-feature-settings</code></a>’. For example, setting
4864 a non-default value for the ‘<code
4865 class=property>letter-spacing</code>’ property disables ligatures.
4867 <li>Font features implied by the value of the ‘<a
4868 href="#propdef-font-variant"><code
4869 class=property>font-variant</code></a>’ property, the related
4870 font-variant subproperties and any other CSS property that may use
4871 OpenType features (e.g. the ‘<a href="#propdef-font-kerning"><code
4872 class=property>font-kerning</code></a>’ property).
4874 <li>Font features implied by the value of ‘<a
4875 href="#propdef-font-feature-settings"><code
4876 class=property>font-feature-settings</code></a>’ property.
4877 </ol>
4879 <p>This ordering allows authors to set up a general set of defaults for
4880 fonts within their <code>@font-face</code> rules, then override them with
4881 property settings for specific elements. General property settings
4882 override the settings in <code>@font-face</code> rules and low-level font
4883 feature settings override ‘<a href="#propdef-font-variant"><code
4884 class=property>font-variant</code></a>’ property settings.
4886 <p>For situations where the combined list of font feature settings contains
4887 more than one value for the same feature, the last value is used. When a
4888 font lacks support for a given underlying font feature, text is simply
4889 rendered as if that font feature was not enabled; font fallback does not
4890 occur and no attempt is made to synthesize the feature except where
4891 explicitly noted for specific properties.
4893 <h3 id=feature-precedence-examples><span class=secno>7.3 </span>Feature
4894 precedence examples</h3>
4896 <div class=example>
4897 <p>With the styles below, numbers are rendered proportionally when used
4898 within a paragraph but are shown in tabular form within tables of prices:</p>
4900 <pre>body {
4901 font-variant-numeric: proportional-nums;
4902 }
4904 table.prices td {
4905 font-variant-numeric: tabular-nums;
4906 }
4907 </pre>
4908 </div>
4910 <div class=example>
4911 <p>When the font-variant descriptor is used within an
4912 <code>@font-face</code> rule, it only applies to the font defined by that
4913 rule.</p>
4915 <pre>@font-face {
4916 font-family: MainText;
4917 src: url(http://example.com/font.ttf);
4918 font-variant: oldstyle-nums proportional-nums styleset(1,3);
4919 }
4921 body {
4922 font-family: MainText, Helvetica;
4923 }
4925 table.prices td {
4926 font-variant-numeric: tabular-nums;
4927 }
4928 </pre>
4930 <p>In this case, old-style numerals will be used throughout but only where
4931 the font "MainText" is used. Just as in the previous example, tabular
4932 values will be used in price tables since ‘<a
4933 href="#tabular-nums"><code class=property>tabular-nums</code></a>’
4934 appears in a general style rule and its use is mutually exclusive with
4935 ‘<a href="#proportional-nums"><code
4936 class=property>proportional-nums</code></a>’. Stylistic alternate sets
4937 will only be used where MainText is used.</p>
4938 </div>
4940 <div class=example>
4941 <p>The <code>@font-face</code> rule can also be used to access font
4942 features in locally available fonts via the use of local() in the ‘<a
4943 href="#descdef-src"><code class=property>src</code></a>’ descriptor of
4944 the <code>@font-face</code> definition:</p>
4946 <pre>@font-face {
4947 font-family: BodyText;
4948 src: local("HiraMaruPro-W4");
4949 font-variant: proportional-width;
4950 font-feature-settings: "ital"; /* Latin italics within CJK text feature */
4951 }
4953 body { font-family: BodyText, serif; }
4954 </pre>
4956 <p>If available, a Japanese font "Hiragino Maru Gothic" will be used. When
4957 text rendering occurs, Japanese kana will be proportionally spaced and
4958 Latin text will be italicised. Text rendered with the fallback serif font
4959 will use default rendering properties.</p>
4960 </div>
4962 <div class=example>
4963 <p>In the example below, discretionary ligatures are enabled only for a
4964 downloadable font but are disabled within spans of class "special":</p>
4966 <pre>@font-face {
4967 font-family: main;
4968 src: url(fonts/ffmeta.woff) format("woff");
4969 font-variant: discretionary-ligatures;
4970 }
4972 body { font-family: main, Helvetica; }
4973 span.special { font-variant-ligatures: no-discretionary-ligatures; }
4974 </pre>
4976 <p>Adding an discretionary style rule with the <code>@font-face</code>
4977 above:</p>
4979 <pre>body { font-family: main, Helvetica; }
4980 span { font-feature-settings: "dlig"; }
4981 span.special { font-variant-ligatures: no-discretionary-ligatures; }
4982 </pre>
4984 <p>Within spans of class "special", discretionary ligatures <em>will</em>
4985 be rendered. This is because both the ‘<a
4986 href="#propdef-font-feature-settings"><code
4987 class=property>font-feature-settings</code></a>’ and ‘<a
4988 href="#propdef-font-variant-ligatures"><code
4989 class=property>font-variant-ligatures</code></a>’ properties apply to
4990 these spans. Although the ‘<code class=css>no-discretionary
4991 ligatures</code>’ setting of ‘<a
4992 href="#propdef-font-variant-ligatures"><code
4993 class=property>font-variant-ligatures</code></a>’ effectively disables
4994 the OpenType <span class=tag>dlig</span> feature, because the ‘<a
4995 href="#propdef-font-feature-settings"><code
4996 class=property>font-feature-settings</code></a>’ is resolved after
4997 that, the ‘<code class=property>dlig</code>’ value reenables
4998 discretionary ligatures.</p>
4999 </div>
5001 <h2 id=object-model><span class=secno>8 </span>Object Model</h2>
5003 <p>The contents of <code>@font-face</code> and
5004 <code>@font-feature-values</code> rules can be accessed via the following
5005 extensions to the CSS Object Model.
5007 <h3 id=om-fontface><span class=secno>8.1 </span>The <a
5008 href="#cssfontfacerule"><code>CSSFontFaceRule</code></a> interface</h3>
5010 <p>The <dfn id=cssfontfacerule>CSSFontFaceRule</dfn> interface represents a
5011 <code>@font-face</code> rule.
5013 <pre class=idl>
5014 interface CSSFontFaceRule : CSSRule {
5015 attribute DOMString family;
5016 attribute DOMString src;
5017 attribute DOMString style;
5018 attribute DOMString weight;
5019 attribute DOMString stretch;
5020 attribute DOMString unicodeRange;
5021 attribute DOMString variant;
5022 attribute DOMString featureSettings;
5023 }</pre>
5025 <p>The DOM Level 2 Style specification <a href="#DOM-LEVEL-2-STYLE"
5026 rel=biblioentry>[DOM-LEVEL-2-STYLE]<!--{{DOM-LEVEL-2-STYLE}}--></a>
5027 defined a different variant of this rule. This definition supercedes that
5028 one.
5030 <h3 id=om-fontfeaturevalues><span class=secno>8.2 </span>The <a
5031 href="#cssfontfeaturevaluesrule"><code>CSSFontFeatureValuesRule</code></a>
5032 interface</h3>
5034 <p>The <code>CSSRule</code> interface is extended as follows:
5036 <pre class=idl>partial interface CSSRule {
5037 const unsigned short FONT_FEATURE_VALUES_RULE = 14;
5038 }</pre>
5040 <p>The <dfn id=cssfontfeaturevaluesrule>CSSFontFeatureValuesRule</dfn>
5041 interface represents a <code>@font-feature-values</code> rule.
5043 <pre class=idl>interface CSSFontFeatureValuesRule : CSSRule {
5044 readonly attribute DOMString familyList;
5045 readonly attribute DOMString valueText;
5046 };</pre>
5048 <dl class=idl-attributes>
5049 <dt><var>familyList</var> of type <code>DOMString</code>, readonly
5051 <dd>The list of one or more font families for which a given set of feature
5052 values is defined.
5054 <dt><var>valueText</var> of type <code>DOMString</code>, readonly
5056 <dd>Serialized set of feature values.
5057 </dl>
5059 <h2 id=font-load-events><span class=secno>9 </span>Font Load Events</h2>
5061 <p>Since fonts defined via <code>@font-face</code> rules are loaded on
5062 demand, pages may need to know precisely when fonts have completed
5063 downloading before measuring text elements on the page or to show some
5064 form of interim user interface state.
5066 <h3 id=document-fontloader><span class=secno>9.1 </span>Extension to the
5067 <code>document</code> interface</h3>
5069 <p>To allow font loading to be tracked explicitly within content the
5070 following event target is added to the <code>document</code> of the page:
5072 <pre class=idl>partial interface Document {
5073 readonly attribute FontLoader fontloader;
5074 };
5075 </pre>
5077 <h3 id=fontloader-interface><span class=secno>9.2 </span>The
5078 <code>FontLoader</code> Interface</h3>
5080 <pre class=idl>dictionary CSSFontFaceLoadEventInit : EventInit {
5081 CSSFontFaceRule fontface = null;
5082 DOMError error = null;
5083 };
5085 dictionary LoadFontParameters {
5086 DOMString font;
5087 DOMString text = " ";
5088 FontsReadyCallback onsuccess;
5089 FontsReadyCallback onerror;
5090 };
5092 [Constructor(DOMString type, optional CSSFontFaceLoadEventInit eventInitDict)]
5093 interface CSSFontFaceLoadEvent : Event {
5094 readonly attribute CSSFontFaceRule fontface;
5095 readonly attribute DOMError error;
5096 }
5098 callback FontsReadyCallback = void ();
5100 interface FontLoader : EventTarget {
5102 // -- events for when loading state changes
5103 attribute EventHandler <a href="#fontloader-loading">onloading</a>;
5104 attribute EventHandler <a href="#fontloader-loadingdone">onloadingdone</a>;
5106 // -- events for each individual font load
5107 attribute EventHandler <a href="#fontloader-loadstart">onloadstart</a>;
5108 attribute EventHandler <a href="#fontloader-load">onload</a>;
5109 attribute EventHandler <a href="#fontloader-error">onerror</a>;
5111 // check and start load if appropriate
5112 // and fire callback when all loads complete
5113 void <a href="#fontloader-loadfont">loadFont</a>(LoadFontParameters params);
5115 // return whether all fonts in the fontlist are loaded (does not initiate load if not available)
5116 boolean <a href="#fontloader-checkfont">checkFont</a>(DOMString font, optional DOMString text = " ");
5118 // async notify upon completion, pending layout changes
5119 void <a href="#fontloader-notifywhenfontsready">notifyWhenFontsReady</a>(FontsReadyCallback fontsReadyCallback);
5121 // loading state, true while one or more fonts loading, false otherwise
5122 readonly attribute boolean loading;
5123 };</pre>
5125 <p>Because font families defined with <code>@font-face</code> rules are
5126 loaded only when they are used, content sometimes needs to understand when
5127 the loading of fonts occurs. Authors can use the events and methods
5128 defined here to allow greater control over actions that are dependent upon
5129 the availability of specific fonts.
5131 <p>The term <dfn id=font-load>font load</dfn> is used below to indicate
5132 when the loading of content for a given <code>@font-face</code> rule
5133 completes. An <code>@font-face</code> rule may list multiple alternate
5134 resources within the ‘<a href="#descdef-src"><code
5135 class=property>src</code></a>’ descriptor, including references to local
5136 fonts, but the term font load only refers to the loading of the finally
5137 selected resource for a given rule, not to the loading of each individual
5138 resource.
5140 <h4 id=events><span class=secno>9.2.1 </span>Events</h4>
5142 <p>The following are the event handlers (and their corresponding event
5143 handler event types) that must be supported by <code>FontLoader</code>
5144 objects as IDL attributes:
5146 <table class=data id=eventhandlers>
5147 <thead>
5148 <tr>
5149 <th>Event handler
5151 <th>Event handler event type
5153 <tbody>
5154 <tr>
5155 <th><code class=idl-code>onloading</code>
5157 <td><code class=idl-code>loading</code>
5159 <tr>
5160 <th><code class=idl-code>onloadingdone</code>
5162 <td><code class=idl-code>loadingdone</code>
5164 <tr>
5165 <th><code class=idl-code>onloadstart</code>
5167 <td><code class=idl-code>loadstart</code>
5169 <tr>
5170 <th><code class=idl-code>onload</code>
5172 <td><code class=idl-code>load</code>
5174 <tr>
5175 <th><code class=idl-code>onerror</code>
5177 <td><code class=idl-code>error</code>
5178 </table>
5180 <p>To <dfn id=fire-a-font-load-event>fire a font load event</dfn> named
5181 <var>e</var> with a given <var>font face rule</var> and an
5182 <var>error</var> at an object <var>target</var> means to <a href="">fire
5183 an event named e</a> at <var>target</var> with an <a>event</a> using the
5184 <code>CSSFontFaceLoadEvent</code> interface that also meets these
5185 conditions:
5187 <ol>
5188 <li>The <code class=idl-code>fontface</code> attribute is initialized to
5189 the given <var>font face rule</var>.
5191 <li>The <code class=idl-code>error</code> attribute is initialized to the
5192 given <var>error</var>.
5193 </ol>
5195 <p>When the user agent determines that one or more fonts defined via
5196 <code>@font-face</code> rules in a document <var>doc</var> need to be
5197 loaded, it must run the following steps:
5199 <ol>
5200 <li>Let <var>font loader</var> be the value of the <code
5201 class=idl-code>fontloader</code> attribute of <var>doc</var>.
5203 <li>Set the <code class=idl-code>loading</code> attribute of <var>font
5204 loader</var> to true.
5206 <li><a href="#fire-a-font-load-event">Fire a font load event</a> named <a
5207 id=fontloader-loading><code class=idl-code>"loading"</code></a> with
5208 <var>font face rule</var> and <var>error</var> at <var>font loader</var>.
5210 <li>When the user agent begins loading the first resource for a given
5211 <code>@font-face</code> rule, it must <a
5212 href="#fire-a-font-load-event">fire a font load event</a> named <a
5213 id=fontloader-loadstart><code class=idl-code>"loadstart"</code></a> with
5214 <var>font face</var> set to the <code>@font-face</code> rule that caused
5215 this load to start and <var>error</var> set to <code>????</code> at
5216 <var>font loader</var>.
5217 </ol>
5219 <p class=issue>What are the error types that should be used here?
5221 <p>The term “font load” covers any of the resources listed in the
5222 ‘src’ descriptor, including local fonts. When multiple resources are
5223 listed, the “font load” is the first resource in the list to
5224 successfully load or the error that occurs on the last resource for which
5225 a load is attempted.
5227 <p class=issue>Given that a set of <code>@font-face</code> rules might load
5228 concurrently, does it make sense to have a non-null value for the <code
5229 class=idl-code>"loading"</code> event?
5231 <p>When the user agent completes each font load for a document
5232 <var>doc</var>, it must run the following steps:
5234 <ol>
5235 <li>Let <var>font loader</var> be the value of the <code
5236 class=idl-code>fontloader</code> attribute of <var>doc</var>.
5238 <li>If none of the resources listed for the ‘<a
5239 href="#descdef-src"><code class=property>src</code></a>’ descriptor
5240 contain valid data, <a href="#fire-a-font-load-event">fire a font load
5241 event</a> named <a id=fontloader-error><code
5242 class=idl-code>"error"</code></a> with <var>font face</var> the
5243 <code>@font-face</code> rule that caused this load to start and
5244 <var>error</var> [something?] at <var>font loader</var>.
5246 <li>Otherwise, <a href="#fire-a-font-load-event">fire a font load
5247 event</a> named <a id=fontloader-load><code
5248 class=idl-code>"load"</code></a> with <var>font face</var> the
5249 <code>@font-face</code> rule that caused this load to start and
5250 <var>error</var> [something?] at <var>font loader</var>.
5251 </ol>
5253 <p>When the user agent completes the final font load for document
5254 <var>doc</var>, it must run the following steps:
5256 <ol>
5257 <li>Let <var>font loader</var> be the value of the <code
5258 class=idl-code>fontloader</code> attribute of <var>doc</var>.
5260 <li>Set the <code class=idl-code>loading</code> attribute of <var>font
5261 loader</var> to false.
5263 <li><a href="#fire-a-font-load-event">Fire a font load event</a> named <a
5264 id=fontloader-loadingdone><code class=idl-code>"loadingdone"</code></a>
5265 with <var>font face rule</var>, set to the last font to load, and
5266 <var>error</var> at <var>font loader</var>.
5267 </ol>
5269 <p>Note: For example, if three fonts are loaded at the same time, a <code
5270 class=idl-code>"loading"</code> event followed by three <code
5271 class=idl-code>"loadstart"</code> events and three <code
5272 class=idl-code>"load"</code> or <code class=idl-code>"error"</code>
5273 events, followed by a <code class=idl-code>"loadingdone"</code> event will
5274 occur.
5276 <h4 id=methods><span class=secno>9.2.2 </span>Methods</h4>
5278 <p>The methods <code class=idl-code>loadFont</code> and <code
5279 class=idl-code>checkFont</code> must determine whether all fonts in the
5280 given font list have been loaded and are available. If all fonts are
5281 available, <code class=idl-code>checkFont</code> must return true, false
5282 if one or more fonts are not available. In the case of <code
5283 class=idl-code>loadFont</code>, if any fonts are downloadable fonts and
5284 have not already been loaded, the user agent must initiate the load of
5285 each of these fonts.
5287 <p>The <a id=fontloader-loadfont><code
5288 class=idl-code>loadFont(params)</code></a> method must use these steps:
5290 <ol>
5291 <li>Parse the value of the <code class=idl-code>font</code> member of
5292 <code class=idl-code>params</code>, using the CSS value syntax of the
5293 ‘<a href="#propdef-font"><code class=property>font</code></a>’
5294 property.
5296 <li>If a syntax error occurs, return.
5298 <li>Otherwise, let <var>font family list</var> be the set of families and
5299 <var>font style</var> be the other font style attributes.
5301 <li>For each family in <var>font family list</var>, use the font matching
5302 rules to select the font faces that match the <var>font style</var>. In
5303 the case where these are font faces defined via <code>@font-face</code>
5304 rules, the use of ‘<a href="#descdef-unicode-range"><code
5305 class=property>unicode-range</code></a>’ means that this may be more
5306 than just a single font face.
5308 <li>Remove from the set of font faces all faces that have defined ‘<a
5309 href="#descdef-unicode-range"><code
5310 class=property>unicode-range</code></a>’ values that don't intersect
5311 the range of character values in the <code class=idl-code>text</code>
5312 member of <code class=idl-code>params</code> and set this to be the
5313 <var>font load list</var>.
5315 <li>For all of the font faces in the <var>font load list</var>, initiate
5316 the load of any font that has not already been loaded and return.
5318 <li>When all fonts in the <var>font load list</var> have been loaded, fire
5319 the appropriate callback handler. If all fonts loaded successfully, call
5320 the callback specified by the <code class=idl-code>onsuccess</code>
5321 member of <code class=idl-code>params</code>. If an error occurred with
5322 any one of the fonts in the <var>font load list</var> or if the list is
5323 empty, call the callback specified by the <code
5324 class=idl-code>onerror</code> member of <code
5325 class=idl-code>params</code>.
5326 </ol>
5328 <p>Callsbacks for <code class=idl-code>loadFont</code> fire in addition to
5329 the callbacks that fire due to font event handlers.
5331 <p>The <a id=fontloader-checkfont><code class=idl-code>checkFont(font,
5332 text)</code></a> method must use these steps:
5334 <ol>
5335 <li>Parse the value of the <code class=idl-code>font</code> parameter,
5336 using the CSS value syntax of the ‘<a href="#propdef-font"><code
5337 class=property>font</code></a>’ property.
5339 <li>If a syntax error occurs, return <code class=idl-code>false</code>.
5341 <li>Otherwise, let <var>font family list</var> be the set of families and
5342 <var>font style</var> be the other font style attributes.
5344 <li>For each family in <var>font family list</var>, use the font matching
5345 rules to select the font faces that match the <var>font style</var>. In
5346 the case where these are font faces defined via <code>@font-face</code>
5347 rules, the use of ‘<a href="#descdef-unicode-range"><code
5348 class=property>unicode-range</code></a>’ means that this may be more
5349 than just a single font face.
5351 <li>Remove from the set of font faces all faces that have defined ‘<a
5352 href="#descdef-unicode-range"><code
5353 class=property>unicode-range</code></a>’ values that don't intersect
5354 the range of character values in the <code class=idl-code>text</code>
5355 parameter and set this to be the <var>font load list</var>.
5357 <li>If the <var>font load list</var> contains no font faces, return <code
5358 class=idl-code>false</code>.
5360 <li>If all fonts in the <var>font load list</var> have already
5361 successfully been loaded, return <code class=idl-code>true</code>.
5362 Otherwise, return <code class=idl-code>false</code>.
5363 </ol>
5365 <p>The <code class=idl-code>font</code> parameter of <code
5366 class=idl-code>checkFont</code> and the <code class=idl-code>font</code>
5367 member of <code class=idl-code>params</code> parameter of <code
5368 class=idl-code>loadFont</code> both specify the list of fonts to load.
5369 These values must be parsed using the same syntax as values for the CSS
5370 ‘<a href="#propdef-font"><code class=property>font</code></a>’
5371 property, the same way the <code class=idl-code>font</code> attribute of
5372 the <code>CanvasRenderingContext2D</code> is interpreted. <a href="#HTML5"
5373 rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> This yields a list of font
5374 families along with font style attributes.
5376 <p>Because the number of fonts loaded depends on the how many fonts are
5377 used for a given piece of text, in some cases whether fonts need to be
5378 loaded or not may not be known. The <a
5379 id=fontloader-notifywhenfontsready><code
5380 class=idl-code>notifyWhenFontsReady</code></a> method provides a way for
5381 authors to avoid having to keep track of which fonts have or haven't been
5382 loaded before examining content affected by which font is used.
5384 <p>The <code class=idl-code>notifyWhenFontsReady(fontsReadyCallback)</code>
5385 method must use these steps:
5387 <ol>
5388 <li>Let <var>font loader</var> be the value of the <code
5389 class=idl-code>fontloader</code> attribute of <var>doc</var>.
5391 <li>Add the value of the <code class=idl-code>fontsReadyCallback</code>
5392 parameter to the <var>notify</var> callback list of the <var>font
5393 loader</var> and return.
5395 <li>Once all pending layout operations have completed, determine whether
5396 font resources need to be loaded.
5398 <li>If no loads are in progress, copy the contents of the
5399 <var>notify</var> callback list to the <var>notify pending</var> list of
5400 the <var>font loader</var> and clear out the <var>notify</var> list.
5401 After the <code class=idl-code>"loadingdone"</code> event fires, call
5402 each of the callbacks in the <var>notify pending</var> list and clear out
5403 the <var>notify pending</var> list.
5405 <li>Otherwise, after all font loads complete and subsequent layout
5406 operations finish, again check whether loads are in progress. If no loads
5407 are in progress, execute the previous step. If fonts are still loading,
5408 continue waiting until those loads complete and repeat this step.
5409 </ol>
5411 <p>Authors should note here that the callback only fires once, the method
5412 needs to be called again when further font loads might occur. This method
5413 is similar to the callback function of the <code
5414 class=idl-code>"loadingdone"</code> event handler, except that in this
5415 case the callback will <strong>always</strong> get called, even when no
5416 font loads occur because the fonts in question are already loaded. It's a
5417 simple, easy way to sync code to font loads without the need to keep track
5418 of what fonts are needed and precisely when they load.
5420 <p>Note that the user agent may need to iterate over multiple font loads
5421 before the notify callback is called. This can occur with font fallback
5422 situations, where one font in the fontlist is loaded but doesn't contain a
5423 particular glyph and other fonts in the fontlist need to be loaded. The
5424 notify callback only fires after layout operations complete and no
5425 additional font loads are necessary.
5427 <h3 id=font-load-event-examples><span class=secno>9.3 </span>Font load
5428 event examples</h3>
5430 <div class=example>
5431 <p>To show content only after all font loads complete:</p>
5433 <pre> document.fontloader.onloadingdone = function() {
5434 var content = document.getElementById("content");
5435 content.style.visibility = "visible";
5436 }
5437 </pre>
5438 </div>
5440 <div class=example>
5441 <p>Drawing text in a canvas with a downloadable font, explicitly
5442 initiating the font download and drawing upon completion:</p>
5444 <pre> function drawStuff() {
5445 var ctx = document.getElementById("c").getContext("2d");
5447 ctx.fillStyle = "red";
5448 ctx.font = "50px MyDownloadableFont";
5449 ctx.fillText("Hello!", 100, 100);
5450 }
5452 document.fontloader.loadFont({font: "50px MyDownloadableFont",
5453 onsuccess: drawStuff,
5454 onerror: handleError});</pre>
5455 </div>
5457 <div class=example>
5458 <p>A rich text editing application may need to measure text elements after
5459 editing operations have taken place. Since style changes may or may not
5460 require additional fonts to be downloaded, or the fonts may already have
5461 been downloaded, the measurement procedures need to occur after those
5462 font loads complete:</p>
5464 <pre> function measureTextElements() {
5465 // contents can now be measured using the metrics of
5466 // the downloadable font(s)
5467 }
5469 function doEditing() {
5471 // content/layout operations that may cause additional font loads
5473 document.fontloader.notifyWhenFontsReady(measureTextElements);
5474 }
5475 </pre>
5476 </div>
5478 <h2 id=conformance><span class=secno>10 </span> Conformance</h2>
5480 <h3 id=conventions><span class=secno>10.1 </span> Document conventions</h3>
5482 <p>Conformance requirements are expressed with a combination of descriptive
5483 assertions and RFC 2119 terminology. The key words “MUST”, “MUST
5484 NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
5485 “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
5486 normative parts of this document are to be interpreted as described in RFC
5487 2119. However, for readability, these words do not appear in all uppercase
5488 letters in this specification.
5490 <p>All of the text of this specification is normative except sections
5491 explicitly marked as non-normative, examples, and notes. <a
5492 href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
5494 <p>Examples in this specification are introduced with the words “for
5495 example” or are set apart from the normative text with
5496 <code>class="example"</code>, like this:
5498 <div class=example>
5499 <p>This is an example of an informative example.</p>
5500 </div>
5502 <p>Informative notes begin with the word “Note” and are set apart from
5503 the normative text with <code>class="note"</code>, like this:
5505 <p class=note>Note, this is an informative note.
5507 <h3 id=conformance-classes><span class=secno>10.2 </span> Conformance
5508 classes</h3>
5510 <p>Conformance to CSS Fonts Module Level 3 is defined for three conformance
5511 classes:
5513 <dl>
5514 <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
5515 sheet</dfn>
5517 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
5518 style sheet</a>.
5520 <dt><dfn id=renderer>renderer</dfn>
5522 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
5523 that interprets the semantics of a style sheet and renders documents that
5524 use them.
5526 <dt><dfn id=authoring-tool>authoring tool</dfn>
5528 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
5529 that writes a style sheet.
5530 </dl>
5532 <p>A style sheet is conformant to CSS Fonts Module Level 3 if all of its
5533 statements that use syntax defined in this module are valid according to
5534 the generic CSS grammar and the individual grammars of each feature
5535 defined in this module.
5537 <p>A renderer is conformant to CSS Fonts Module Level 3 if, in addition to
5538 interpreting the style sheet as defined by the appropriate specifications,
5539 it supports all the features defined by CSS Fonts Module Level 3 by
5540 parsing them correctly and rendering the document accordingly. However,
5541 the inability of a UA to correctly render a document due to limitations of
5542 the device does not make the UA non-conformant. (For example, a UA is not
5543 required to render color on a monochrome monitor.)
5545 <p>An authoring tool is conformant to CSS Fonts Module Level 3 if it writes
5546 style sheets that are syntactically correct according to the generic CSS
5547 grammar and the individual grammars of each feature in this module, and
5548 meet all other conformance requirements of style sheets as described in
5549 this module.
5551 <h3 id=partial><span class=secno>10.3 </span> Partial implementations</h3>
5553 <p>So that authors can exploit the forward-compatible parsing rules to
5554 assign fallback values, CSS renderers <strong>must</strong> treat as
5555 invalid (and <a
5556 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
5557 appropriate</a>) any at-rules, properties, property values, keywords, and
5558 other syntactic constructs for which they have no usable level of support.
5559 In particular, user agents <strong>must not</strong> selectively ignore
5560 unsupported component values and honor supported values in a single
5561 multi-value property declaration: if any value is considered invalid (as
5562 unsupported values must be), CSS requires that the entire declaration be
5563 ignored.
5565 <h3 id=experimental><span class=secno>10.4 </span> Experimental
5566 implementations</h3>
5568 <p>To avoid clashes with future CSS features, the CSS2.1 specification
5569 reserves a <a
5570 href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
5571 syntax</a> for proprietary and experimental extensions to CSS.
5573 <p>Prior to a specification reaching the Candidate Recommendation stage in
5574 the W3C process, all implementations of a CSS feature are considered
5575 experimental. The CSS Working Group recommends that implementations use a
5576 vendor-prefixed syntax for such features, including those in W3C Working
5577 Drafts. This avoids incompatibilities with future changes in the draft.
5579 <h3 id=testing><span class=secno>10.5 </span> Non-experimental
5580 implementations</h3>
5582 <p>Once a specification reaches the Candidate Recommendation stage,
5583 non-experimental implementations are possible, and implementors should
5584 release an unprefixed implementation of any CR-level feature they can
5585 demonstrate to be correctly implemented according to spec.
5587 <p>To establish and maintain the interoperability of CSS across
5588 implementations, the CSS Working Group requests that non-experimental CSS
5589 renderers submit an implementation report (and, if necessary, the
5590 testcases used for that implementation report) to the W3C before releasing
5591 an unprefixed implementation of any CSS features. Testcases submitted to
5592 W3C are subject to review and correction by the CSS Working Group.
5594 <p>Further information on submitting testcases and implementation reports
5595 can be found from on the CSS Working Group's website at <a
5596 href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
5597 Questions should be directed to the <a
5598 href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
5599 mailing list.
5601 <h2 class=no-num id=platform-props-to-css>Appendix A: Mapping platform font
5602 properties to CSS properties</h2>
5604 <p><em>This appendix is included as background for some of the problems and
5605 situations that are described in other sections. It should be viewed as
5606 informative only.</em>
5608 <p>Font properties in CSS are designed to be independent of the underlying
5609 font formats used; they can be used to specify bitmap fonts, Type1 fonts,
5610 SVG fonts in addition to the common TrueType and OpenType fonts. But there
5611 are facets of the TrueType and OpenType formats that often cause confusion
5612 for authors and present challenges to implementers on different platforms.
5614 <p>Originally developed at Apple, TrueType was designed as an outline font
5615 format for both screen and print. Microsoft joined Apple in developing the
5616 TrueType format and both platforms have supported TrueType fonts since
5617 then. Font data in the TrueType format consists of a set of tables
5618 distinguished with common four-letter tag names, each containing a
5619 specific type of data. For example, naming information, including
5620 copyright and license information, is stored in the ‘<code
5621 class=property>name</code>’ table. The character map (‘<code
5622 class=property>cmap</code>’) table contains a mapping of character
5623 encodings to glyphs. Apple later added additional tables for supporting
5624 enhanced typographic functionality; these are now called Apple Advanced
5625 Typography, or AAT, fonts. Microsoft and Adobe developed a separate set of
5626 tables for advanced typography and called their format OpenType <a
5627 href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>.
5629 <p>In many cases the font data used under Microsoft Windows or Linux is
5630 slightly different from the data used under Apple's Mac OS X because the
5631 TrueType format allowed for explicit variation across platforms. This
5632 includes font metrics, names and character map data.
5634 <p>Specifically, font family name data is handled differently across
5635 platforms. For TrueType and OpenType fonts these names are contained in
5636 the ‘<code class=property>name</code>’ table, in name records with
5637 name ID 1. Mulitple names can be stored for different locales but
5638 Microsoft recommends fonts always include at least a US English version of
5639 the name. On Windows, Microsoft made the decision for backwards
5640 compatibility to limit this family name to a maximum of four faces; for
5641 larger groupings the "preferred family" (name ID 16) or "WWS family" (name
5642 ID 21) can be used. Other platforms such as OSX don't have this
5643 limitation, the family name is used to define all possible groupings.
5645 <p>Other name table data provides names used to uniquely identify a
5646 specific face within a family. The full font name (name ID 4) and the
5647 Postscript name (name ID 6) describe a single face uniquely. The bold face
5648 of the Gill Sans family has a fullname of "Gill Sans Bold" and a
5649 Postscript name of "GillSans-Bold". There can be multiple localized
5650 versions of the fullname for a given face but the Postscript name is
5651 always a unique name made from a limited set of ASCII characters.
5653 <p>On various platforms, different names are used to search for a font. For
5654 example, with the Windows GDI CreateIndirectFont API, either a family or
5655 fullname can be used to lookup a face while on Mac OS X the
5656 ATSFontFindFromName and ATSFontFindFromPostScriptName API calls are used
5657 to lookup a given face using the fullname and Postscript name. Under
5658 Linux, the fontconfig API allows fonts to be searched using any of these
5659 names. In situations where platform API's automatically substitute other
5660 font choices, it may be necessary to verify a returned font matches a
5661 given name.
5663 <p>The weight of a given face can be determined via the usWeightClass field
5664 of the OS/2 table or inferred from the style name (name ID 2). Likewise,
5665 the width can be determined via the usWidthClass of the OS/2 table or
5666 inferred from the style name. For historical reasons related to synthetic
5667 bolding at weights 200 or lower with the Windows GDI API, font designers
5668 have sometimes skewed values in the OS/2 table to avoid these weights.
5670 <p>Rendering complex scripts that use contextual shaping such as Thai,
5671 Arabic and Devanagari requires features present only in OpenType or AAT
5672 fonts. Currently, complex script rendering is supported on Windows and
5673 Linux using OpenType font features while AAT font features are used under
5674 Mac OS X. Apple has indicated it intends to support complex script
5675 rendering using OpenType font features in the future.
5677 <h2 class=no-num id=ch-ch-ch-changes>Changes</h2>
5679 <h3 class=no-num id=recent-changes> Changes from the <a
5680 href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/">August 2012 CSS3
5681 Fonts Working Draft</a></h3>
5683 <p>Major changes include:
5685 <ul>
5686 <li>Tightened description and fixed errors in description of
5687 font-variant-caps
5689 <li>Added ‘<code class=property>auto</code>’ value to ‘<a
5690 href="#propdef-font-size-adjust"><code
5691 class=property>font-size-adjust</code></a>’
5693 <li>Added definition of font load events
5695 <li>Defined explicit steps for font matching grapheme clusters
5697 <li>Added font-stretch values to the font shorthand
5699 <li>Created object model section and revised definition of CSSFontFaceRule
5701 <li>Updated syntax of <code>@font-feature-values</code> rule based on <a
5702 href="http://lists.w3.org/Archives/Public/www-style/2012Nov/0292.html">CSS
5703 WG resolution</a>
5705 <li>Other light cleaning and dusting
5706 </ul>
5708 <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
5710 <p>I'd like to thank Tal Leming, Jonathan Kew and Christopher Slye for all
5711 their help and feedback. John Hudson was kind enough to take the time to
5712 explain the subtleties of OpenType language tags and provided the example
5713 of character variant usage for displaying text on Byzantine seals. Ken
5714 Lunde and Eric Muller provided valuable feedback on CJK OpenType features
5715 and Unicode variation selectors. The idea for supporting font features by
5716 using font-variant subproperties originated with Håkon Wium Lie, Adam
5717 Twardoch and Tal Leming. Elika Etemad supplied some of the initial design
5718 ideas for the <code>@font-feature-values</code> rule. Several members of
5719 the Google Fonts team provided helpful feedback on font load events.
5720 Thanks also to House Industries for allowing the use of Ed Interlock in
5721 the discretionary ligatures example.
5723 <p>A special thanks to Robert Bringhurst for the sublime mind expansion
5724 that is <em>The Elements of Typographic Style</em>.
5726 <h2 class=no-num id=references>References</h2>
5728 <h3 class=no-num id=normative-references>Normative References</h3>
5729 <!--begin-normative-->
5730 <!-- Sorted by label -->
5732 <dl class=bibliography>
5733 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
5734 <!---->
5736 <dt id=CHARMOD>[CHARMOD]
5738 <dd>Martin J. Dürst; et al. <a
5739 href="http://www.w3.org/TR/2005/REC-charmod-20050215/"><cite>Character
5740 Model for the World Wide Web 1.0: Fundamentals.</cite></a> 15 February
5741 2005. W3C Recommendation. URL: <a
5742 href="http://www.w3.org/TR/2005/REC-charmod-20050215/">http://www.w3.org/TR/2005/REC-charmod-20050215/</a>
5743 </dd>
5744 <!---->
5746 <dt id=CORS>[CORS]
5748 <dd>Anne van Kesteren. <a
5749 href="http://www.w3.org/TR/2012/WD-cors-20120403/"><cite>Cross-Origin
5750 Resource Sharing.</cite></a> 3 April 2012. W3C Working Draft. (Work in
5751 progress.) URL: <a
5752 href="http://www.w3.org/TR/2012/WD-cors-20120403/">http://www.w3.org/TR/2012/WD-cors-20120403/</a>
5753 </dd>
5754 <!---->
5756 <dt id=CSS21>[CSS21]
5758 <dd>Bert Bos; et al. <a
5759 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
5760 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
5761 2011. W3C Recommendation. URL: <a
5762 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
5763 </dd>
5764 <!---->
5766 <dt id=CSS3VAL>[CSS3VAL]
5768 <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
5769 href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS
5770 Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate
5771 Recommendation. (Work in progress.) URL: <a
5772 href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a>
5773 </dd>
5774 <!---->
5776 <dt id=HTML5>[HTML5]
5778 <dd>Ian Hickson. <a
5779 href="http://www.w3.org/TR/2011/WD-html5-20110525/"><cite>HTML5.</cite></a>
5780 25 May 2011. W3C Working Draft. (Work in progress.) URL: <a
5781 href="http://www.w3.org/TR/2011/WD-html5-20110525/">http://www.w3.org/TR/2011/WD-html5-20110525/</a>
5782 </dd>
5783 <!---->
5785 <dt id=OPEN-FONT-FORMAT>[OPEN-FONT-FORMAT]
5787 <dd><a
5788 href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip"><cite>Information
5789 technology — Coding of audio-visual objects — Part 22: Open Font
5790 Format.</cite></a> International Organization for Standardization.
5791 ISO/IEC 14496-22:2009. URL: <a
5792 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>
5793 </dd>
5794 <!---->
5796 <dt id=OPENTYPE>[OPENTYPE]
5798 <dd><a
5799 href="http://www.microsoft.com/typography/otspec/default.htm"><cite>OpenType
5800 specification.</cite></a> Microsoft. URL: <a
5801 href="http://www.microsoft.com/typography/otspec/default.htm">http://www.microsoft.com/typography/otspec/default.htm</a>
5802 </dd>
5803 <!---->
5805 <dt id=OPENTYPE-FEATURES>[OPENTYPE-FEATURES]
5807 <dd><a
5808 href="http://www.microsoft.com/typography/otspec/featurelist.htm"><cite>OpenType
5809 feature registry.</cite></a> Microsoft. URL: <a
5810 href="http://www.microsoft.com/typography/otspec/featurelist.htm">http://www.microsoft.com/typography/otspec/featurelist.htm</a>
5811 </dd>
5812 <!---->
5814 <dt id=RFC2119>[RFC2119]
5816 <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
5817 words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
5818 RFC 2119. URL: <a
5819 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
5820 </dd>
5821 <!---->
5823 <dt id=UAX15>[UAX15]
5825 <dd>Mark Davis. <a
5826 href="http://www.unicode.org/reports/tr15/tr15-33.html"><cite>Unicode
5827 Normalization Forms.</cite></a> 17 September 2010. Unicode Standard Annex
5828 #15. URL: <a
5829 href="http://www.unicode.org/reports/tr15/tr15-33.html">http://www.unicode.org/reports/tr15/tr15-33.html</a>
5830 </dd>
5831 <!---->
5833 <dt id=UAX29>[UAX29]
5835 <dd>Mark Davis. <a
5836 href="http://www.unicode.org/reports/tr29/"><cite>Unicode Text
5837 Segmentation.</cite></a> 24 January 2012. Unicode Standard Annex #29.
5838 URL: <a
5839 href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a>
5840 </dd>
5841 <!---->
5843 <dt id=UNICODE6>[UNICODE6]
5845 <dd>The Unicode Consortium. <a
5846 href="http://www.unicode.org/versions/Unicode6.1.0/"><cite>The Unicode
5847 Standard, Version 6.1.0.</cite></a> Defined by: The Unicode Standard,
5848 Version 6.1.0 (Mountain View, CA: The Unicode Consortium, 2012. ISBN
5849 978-1-936213-02-3) URL: <a
5850 href="http://www.unicode.org/versions/Unicode6.1.0/">http://www.unicode.org/versions/Unicode6.1.0/</a>
5851 </dd>
5852 <!---->
5853 </dl>
5854 <!--end-normative-->
5855 <!--{{!CSS21}}-->
5856 <!--{{!CSS3VAL}}-->
5857 <!--{{!OPENTYPE}}-->
5858 <!--{{!OPENTYPE-FEATURES}}-->
5859 <!--{{!OPEN-FONT-FORMAT}}-->
5860 <!--{{!UNICODE6}}-->
5861 <!--{{!UAX15}}-->
5862 <!--{{!UAX29}}-->
5863 <!--{{!CORS}}-->
5864 <!--{{!HTML5}}-->
5865 <!--{{!CHARMOD}}-->
5867 <h3 class=no-num id=other-references>Other References</h3>
5868 <!--begin-informative-->
5869 <!-- Sorted by label -->
5871 <dl class=bibliography>
5872 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
5873 <!---->
5875 <dt id=AAT-FEATURES>[AAT-FEATURES]
5877 <dd><a href="http://developer.apple.com/fonts/registry/"><cite>Apple
5878 Advanced Typography font feature registry.</cite></a> Apple. URL: <a
5879 href="http://developer.apple.com/fonts/registry/">http://developer.apple.com/fonts/registry/</a>
5880 </dd>
5881 <!---->
5883 <dt id=ARABIC-TYPO>[ARABIC-TYPO]
5885 <dd>Huda Smitshuijzen AbiFares. <cite>Arabic Typography: A Comprehensive
5886 Sourcebook.</cite> Saqi Books. 2001. ISBN 0-86356-347-3.</dd>
5887 <!---->
5889 <dt id=CHARMOD-NORM>[CHARMOD-NORM]
5891 <dd>François Yergeau; et al. <a
5892 href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/"><cite>Character
5893 Model for the World Wide Web 1.0: Normalization.</cite></a> 1 May 2012.
5894 W3C Working Draft. (Work in progress.) URL: <a
5895 href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/">http://www.w3.org/TR/2012/WD-charmod-norm-20120501/</a>
5896 </dd>
5897 <!---->
5899 <dt id=CJKV-INFO-PROCESSING>[CJKV-INFO-PROCESSING]
5901 <dd>Ken Lunde. <cite>CJKV Information Processing, Second Edition.</cite>
5902 O'Reilly Media, Inc. 2009. ISBN 0-596-51447-1.</dd>
5903 <!---->
5905 <dt id=CSS3-CONDITIONAL>[CSS3-CONDITIONAL]
5907 <dd>L. David Baron. <a
5908 href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/"><cite>CSS
5909 Conditional Rules Module Level 3.</cite></a> 11 September 2012. W3C
5910 Working Draft. (Work in progress.) URL: <a
5911 href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/">http://www.w3.org/TR/2012/WD-css3-conditional-20120911/</a>
5912 </dd>
5913 <!---->
5915 <dt id=CSS3TEXT>[CSS3TEXT]
5917 <dd>Elika J. Etemad; Koji Ishii. <a
5918 href="http://www.w3.org/TR/2012/WD-css3-text-20121113/"><cite>CSS Text
5919 Module Level 3.</cite></a> 13 November 2012. W3C Working Draft. (Work in
5920 progress.) URL: <a
5921 href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">http://www.w3.org/TR/2012/WD-css3-text-20121113/</a>
5922 </dd>
5923 <!---->
5925 <dt id=DIGITAL-TYPOGRAPHY>[DIGITAL-TYPOGRAPHY]
5927 <dd>Richard Rubinstein. <cite>Digital Typography, An Introduction to Type
5928 and Composition for Computer System Design.</cite> Addison-Wesley. 1988.
5929 ISBN 0-201-17633-5.</dd>
5930 <!---->
5932 <dt id=DOM-LEVEL-2-STYLE>[DOM-LEVEL-2-STYLE]
5934 <dd>Chris Wilson; Philippe Le Hégaret; Vidur Apparao. <a
5935 href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/"><cite>Document
5936 Object Model (DOM) Level 2 Style Specification.</cite></a> 13 November
5937 2000. W3C Recommendation. URL: <a
5938 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>
5939 </dd>
5940 <!---->
5942 <dt id=ELEMTYPO>[ELEMTYPO]
5944 <dd>Robert Bringhurst. <cite>The Elements of Typographic Style, Version
5945 3.1.</cite> Hartley & Marks. 2005. ISBN 0-88179-206-3.</dd>
5946 <!---->
5948 <dt id=LANGCULTTYPE>[LANGCULTTYPE]
5950 <dd>John D. Berry, Ed. <cite>Language Culture Type.</cite> Graphis. 2001.
5951 ISBN 1-932026-01-0.</dd>
5952 <!---->
5954 <dt id=OPENTYPE-FONT-GUIDE>[OPENTYPE-FONT-GUIDE]
5956 <dd><a
5957 href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf"><cite>OpenType
5958 User Guide.</cite></a> FontShop International. URL: <a
5959 href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf">https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf</a>
5960 </dd>
5961 <!---->
5963 <dt id=RASTER-TRAGEDY>[RASTER-TRAGEDY]
5965 <dd>Beat Stamm. <a href="http://www.rastertragedy.com/"><cite>The Raster
5966 Tragedy at Low-Resolution Revisited.</cite></a> 7 December 2011. URL: <a
5967 href="http://www.rastertragedy.com/">http://www.rastertragedy.com/</a></dd>
5968 <!---->
5970 <dt id=WINDOWS-GLYPH-PROC>[WINDOWS-GLYPH-PROC]
5972 <dd>John Hudson. <a
5973 href="http://www.microsoft.com/typography/developers/opentype/default.htm"><cite>Windows
5974 Glyph Processing.</cite></a> Microsoft Typogrraphy. URL: <a
5975 href="http://www.microsoft.com/typography/developers/opentype/default.htm">http://www.microsoft.com/typography/developers/opentype/default.htm</a>
5976 </dd>
5977 <!---->
5978 </dl>
5979 <!--end-informative-->
5980 <!--{{ARABIC-TYPO}}-->
5981 <!--{{CJKV-INFO-PROCESSING}}-->
5982 <!--{{DIGITAL-TYPOGRAPHY}}-->
5983 <!--{{DOM-LEVEL-2-STYLE}}-->
5984 <!--{{ELEMTYPO}}-->
5985 <!--{{LANGCULTTYPE}}-->
5986 <!--{{OPENTYPE-FONT-GUIDE}}-->
5987 <!--{{RASTER-TRAGEDY}}-->
5988 <!--{{WINDOWS-GLYPH-PROC}}-->
5989 <!--{{CHARMOD-NORM}}-->
5990 <!--{{AAT-FEATURES}}-->
5991 <!--{{CSS3-CONDITIONAL}}-->
5992 <!--{{CSS3TEXT}}-->
5994 <h2 class=no-num id=index>Index</h2>
5995 <!--begin-index-->
5997 <ul class=indexlist>
5998 <li><absolute-size>, <a href="#ltabsolute-sizegt"
5999 title="<absolute-size>"><strong>3.5</strong></a>
6001 <li><var><common-lig-values></var>, <a href="#ltcommon-lig-values"
6002 title="<common-lig-values>"><strong>6.4</strong></a>
6004 <li><var><contextual-alt-values></var>, <a
6005 href="#ltcontextual-alt-valuesgt"
6006 title="<contextual-alt-values>"><strong>6.4</strong></a>
6008 <li><var><discretionary-lig-values></var>, <a
6009 href="#ltdiscretionary-lig-values"
6010 title="<discretionary-lig-values>"><strong>6.4</strong></a>
6012 <li><var><east-asian-variant-values></var>, <a
6013 href="#lteast-asian-variant-valuesgt"
6014 title="<east-asian-variant-values>"><strong>6.10</strong></a>
6016 <li><var><east-asian-width-values></var>, <a
6017 href="#lteast-asian-width-valuesgt"
6018 title="<east-asian-width-values>"><strong>6.10</strong></a>
6020 <li><var><feature-ident></var>, <a href="#ltfeature-identgt"
6021 title="<feature-ident>"><strong>6.9</strong></a>
6023 <li><var><feature-index></var>, <a href="#ltfeature-indexgt"
6024 title="<feature-index>"><strong>6.9</strong></a>
6026 <li><var><feature-tag-value></var>, <a href="#ltfeature-tag-valuegt"
6027 title="<feature-tag-value>"><strong>6.12</strong></a>
6029 <li><var><feature-type></var>, <a href="#ltfeature-typegt"
6030 title="<feature-type>"><strong>6.9</strong></a>
6032 <li><font-description>, <a href="#ltfont-descriptiongt"
6033 title="<font-description>"><strong>4.1</strong></a>
6035 <li><font-face-name>, <a href="#ltfont-face-namegt"
6036 title="<font-face-name>"><strong>4.3</strong></a>
6038 <li><var><font-family></var>, <a href="#ltfont-familygt"
6039 title="<font-family>"><strong>6.9</strong></a>
6041 <li><var><font-variant-css21></var>, <a
6042 href="#ltfont-variant-css21gt"
6043 title="<font-variant-css21>"><strong>3.7</strong></a>
6045 <li><var><historical-lig-values></var>, <a
6046 href="#lthistorical-lig-values"
6047 title="<historical-lig-values>"><strong>6.4</strong></a>
6049 <li><length>, <a href="#ltlengthgt" title="<length>">3.5</a>
6051 <li><number>, <a href="#ltnumbergt" title="<number>">3.6</a>
6053 <li><var><numeric-figure-values></var>, <a
6054 href="#ltnumeric-figure-valuesgt"
6055 title="<numeric-figure-values>"><strong>6.7</strong></a>
6057 <li><var><numeric-fraction-values></var>, <a
6058 href="#ltnumeric-fraction-valuesgt"
6059 title="<numeric-fraction-values>"><strong>6.7</strong></a>
6061 <li><var><numeric-spacing-values></var>, <a
6062 href="#ltnumeric-spacing-valuesgt"
6063 title="<numeric-spacing-values>"><strong>6.7</strong></a>
6065 <li><percentage>, <a href="#ltpercentagegt-"
6066 title="<percentage>">3.5</a>
6068 <li><relative-size>, <a href="#ltrelative-sizegt"
6069 title="<relative-size>"><strong>3.5</strong></a>
6071 <li><urange>, <a href="#lturangegt"
6072 title="<urange>"><strong>4.5</strong></a>
6074 <li>@font-face, <a href="#font-face"
6075 title="@font-face"><strong>4.1</strong></a>, <a href="#font-face0"
6076 title="@font-face">4.1</a>, <a href="#font-face1"
6077 title="@font-face">4.3</a>
6079 <li>all-petite-caps, <a href="#all-petite-caps"
6080 title=all-petite-caps><strong>6.6</strong></a>
6082 <li>all-small-caps, <a href="#all-small-caps"
6083 title=all-small-caps><strong>6.6</strong></a>
6085 <li>annotation, <a href="#annotationltfeature-value-namegt"
6086 title=annotation><strong>6.8</strong></a>
6088 <li>aspect value, <a href="#aspect-value0" title="aspect
6089 value"><strong>3.6</strong></a>
6091 <li>at-rules, <a href="#at-rule" title=at-rules>4.1</a>
6093 <li>authoring tool, <a href="#authoring-tool" title="authoring
6094 tool"><strong>10.2</strong></a>
6096 <li>character-variant, <a href="#character-variantltfeature-value-namegt"
6097 title=character-variant><strong>6.8</strong></a>
6099 <li>common-ligatures, <a href="#common-ligatures"
6100 title=common-ligatures><strong>6.4</strong></a>
6102 <li>contextual, <a href="#contextual"
6103 title=contextual><strong>6.4</strong></a>
6105 <li>CSSFontFaceRule, <a href="#cssfontfacerule"
6106 title=CSSFontFaceRule><strong>8.1</strong></a>
6108 <li>CSSFontFeatureValuesRule, <a href="#cssfontfeaturevaluesrule"
6109 title=CSSFontFeatureValuesRule><strong>8.2</strong></a>
6111 <li>cursive, definition of, <a href="#cursive0" title="cursive, definition
6112 of"><strong>#</strong></a>
6114 <li>default face, <a href="#default-face" title="default
6115 face"><strong>5.1</strong></a>
6117 <li>diagonal-fractions, <a href="#diagonal-fractions"
6118 title=diagonal-fractions><strong>6.7</strong></a>
6120 <li>discretionary-ligatures, <a href="#discretionary-ligatures"
6121 title=discretionary-ligatures><strong>6.4</strong></a>
6123 <li>fantasy, definition of, <a href="#fantasy0" title="fantasy, definition
6124 of"><strong>#</strong></a>
6126 <li>fire a font load event, <a href="#fire-a-font-load-event" title="fire
6127 a font load event"><strong>9.2.1</strong></a>
6129 <li>font, <a href="#propdef-font" title=font><strong>3.7</strong></a>
6131 <li>font load, <a href="#font-load" title="font
6132 load"><strong>9.2</strong></a>
6134 <li>font-family, <a href="#descdef-font-family"
6135 title=font-family><strong>4.2</strong></a>, <a
6136 href="#propdef-font-family" title=font-family><strong>3.1</strong></a>
6138 <li>font-feature-settings, <a href="#propdef-font-feature-settings"
6139 title=font-feature-settings><strong>6.12</strong></a>
6141 <li>font-feature-settings (descriptor), <a
6142 href="#descdef-font-feature-settings" title="font-feature-settings
6143 (descriptor)"><strong>4.6</strong></a>
6145 <li>font-kerning, <a href="#propdef-font-kerning"
6146 title=font-kerning><strong>6.3</strong></a>
6148 <li>font-language-override, <a href="#propdef-font-language-override"
6149 title=font-language-override><strong>6.13</strong></a>
6151 <li>font-size, <a href="#propdef-font-size"
6152 title=font-size><strong>3.5</strong></a>
6154 <li>font-size-adjust, <a href="#propdef-font-size-adjust"
6155 title=font-size-adjust><strong>3.6</strong></a>
6157 <li>font-stretch, <a href="#propdef-font-stretch"
6158 title=font-stretch><strong>3.3</strong></a>
6160 <li>font-stretch (descriptor), <a href="#descdef-font-stretch"
6161 title="font-stretch (descriptor)"><strong>4.4</strong></a>
6163 <li>font-style, <a href="#propdef-font-style"
6164 title=font-style><strong>3.4</strong></a>
6166 <li>font-style (descriptor), <a href="#descdef-font-style"
6167 title="font-style (descriptor)"><strong>4.4</strong></a>
6169 <li>font-synthesis, <a href="#propdef-font-synthesis"
6170 title=font-synthesis><strong>3.8</strong></a>
6172 <li>font-variant, <a href="#propdef-font-variant"
6173 title=font-variant><strong>6.11</strong></a>
6175 <li>font-variant (descriptor), <a href="#descdef-font-variant"
6176 title="font-variant (descriptor)"><strong>4.6</strong></a>
6178 <li>font-variant-alternates, <a href="#propdef-font-variant-alternates"
6179 title=font-variant-alternates><strong>6.8</strong></a>
6181 <li>font-variant-caps, <a href="#propdef-font-variant-caps"
6182 title=font-variant-caps><strong>6.6</strong></a>
6184 <li>font-variant-east-asian, <a href="#propdef-font-variant-east-asian"
6185 title=font-variant-east-asian><strong>6.10</strong></a>
6187 <li>font-variant-ligatures, <a href="#propdef-font-variant-ligatures"
6188 title=font-variant-ligatures><strong>6.4</strong></a>
6190 <li>font-variant-numeric, <a href="#propdef-font-variant-numeric"
6191 title=font-variant-numeric><strong>6.7</strong></a>
6193 <li>font-variant-position, <a href="#propdef-font-variant-position"
6194 title=font-variant-position><strong>6.5</strong></a>
6196 <li>font-weight, <a href="#propdef-font-weight"
6197 title=font-weight><strong>3.2</strong></a>
6199 <li>font-weight (descriptor), <a href="#descdef-font-weight"
6200 title="font-weight (descriptor)"><strong>4.4</strong></a>
6202 <li>full-width, <a href="#full-width"
6203 title=full-width><strong>6.10</strong></a>
6205 <li>historical-forms, <a href="#historical-forms"
6206 title=historical-forms><strong>6.8</strong></a>
6208 <li>historical-ligatures, <a href="#historical-ligatures"
6209 title=historical-ligatures><strong>6.4</strong></a>
6211 <li>jis04, <a href="#jis04" title=jis04><strong>6.10</strong></a>
6213 <li>jis78, <a href="#jis78" title=jis78><strong>6.10</strong></a>
6215 <li>jis83, <a href="#jis83" title=jis83><strong>6.10</strong></a>
6217 <li>jis90, <a href="#jis90" title=jis90><strong>6.10</strong></a>
6219 <li>lining-nums, <a href="#lining-nums"
6220 title=lining-nums><strong>6.7</strong></a>
6222 <li>monospace, definition of, <a href="#monospace0" title="monospace,
6223 definition of"><strong>#</strong></a>
6225 <li>no-common-ligatures, <a href="#no-common-ligatures"
6226 title=no-common-ligatures><strong>6.4</strong></a>
6228 <li>no-contextual, <a href="#no-contextual"
6229 title=no-contextual><strong>6.4</strong></a>
6231 <li>no-discretionary-ligatures, <a href="#no-discretionary-ligatures"
6232 title=no-discretionary-ligatures><strong>6.4</strong></a>
6234 <li>no-historical-ligatures, <a href="#no-historical-ligatures"
6235 title=no-historical-ligatures><strong>6.4</strong></a>
6237 <li>normal, <a href="#normal" title=normal><strong>6.6</strong></a>, <a
6238 href="#normal0" title=normal><strong>6.7</strong></a>, <a href="#normal1"
6239 title=normal><strong>6.8</strong></a>, <a href="#normal2"
6240 title=normal><strong>6.10</strong></a>
6242 <li>oldstyle-nums, <a href="#oldstyle-nums"
6243 title=oldstyle-nums><strong>6.7</strong></a>
6245 <li>ordinal, <a href="#ordinal" title=ordinal><strong>6.7</strong></a>
6247 <li>ornaments, <a href="#ornamentsltfeature-value-namegt"
6248 title=ornaments><strong>6.8</strong></a>
6250 <li>petite-caps, <a href="#petite-caps"
6251 title=petite-caps><strong>6.6</strong></a>
6253 <li>proportional-nums, <a href="#proportional-nums"
6254 title=proportional-nums><strong>6.7</strong></a>
6256 <li>proportional-width, <a href="#proportional-width"
6257 title=proportional-width><strong>6.10</strong></a>
6259 <li>renderer, <a href="#renderer" title=renderer><strong>10.2</strong></a>
6262 <li>ruby, <a href="#ruby" title=ruby><strong>6.10</strong></a>
6264 <li>sans-serif, definition of, <a href="#sans-serif0" title="sans-serif,
6265 definition of"><strong>#</strong></a>
6267 <li>serif, definition of, <a href="#serif0" title="serif, definition
6268 of"><strong>#</strong></a>
6270 <li>simplified, <a href="#simplified"
6271 title=simplified><strong>6.10</strong></a>
6273 <li>slashed-zero, <a href="#slashed-zero"
6274 title=slashed-zero><strong>6.7</strong></a>
6276 <li>small-caps, <a href="#small-caps"
6277 title=small-caps><strong>6.6</strong></a>
6279 <li>src, <a href="#descdef-src" title=src><strong>4.3</strong></a>
6281 <li>stacked-fractions, <a href="#stacked-fractions"
6282 title=stacked-fractions><strong>6.7</strong></a>
6284 <li>style sheet
6285 <ul>
6286 <li>as conformance class, <a href="#style-sheet" title="style sheet, as
6287 conformance class"><strong>10.2</strong></a>
6288 </ul>
6290 <li>styleset, <a href="#stylesetltfeature-value-namegt"
6291 title=styleset><strong>6.8</strong></a>
6293 <li>stylistic, <a href="#stylisticltfeature-value-namegt"
6294 title=stylistic><strong>6.8</strong></a>
6296 <li>swash, <a href="#swashltfeature-value-namegt"
6297 title=swash><strong>6.8</strong></a>
6299 <li>tabular-nums, <a href="#tabular-nums"
6300 title=tabular-nums><strong>6.7</strong></a>
6302 <li>titling-caps, <a href="#titling-caps"
6303 title=titling-caps><strong>6.6</strong></a>
6305 <li>traditional, <a href="#traditional"
6306 title=traditional><strong>6.10</strong></a>
6308 <li>unicase, <a href="#unicase" title=unicase><strong>6.6</strong></a>
6310 <li>unicode-range, <a href="#descdef-unicode-range"
6311 title=unicode-range><strong>4.5</strong></a>
6312 </ul>
6313 <!--end-index-->
6315 <h2 class=no-num id=property-index>Property index</h2>
6316 <!--begin-properties-->
6318 <table class=proptable>
6319 <thead>
6320 <tr>
6321 <th>Property
6323 <th>Values
6325 <th>Initial
6327 <th>Applies to
6329 <th>Inh.
6331 <th>Percentages
6333 <th>Media
6335 <tbody>
6336 <tr>
6337 <th><a class=property href="#propdef-font">font</a>
6339 <td>[ [ <‘font-style’> || <font-variant-css21> ||
6340 <‘font-weight’> || <‘font-stretch’> ]?
6341 <‘font-size’> [ / <‘line-height’> ]?
6342 <‘font-family’> ] | caption | icon | menu | message-box |
6343 small-caption | status-bar
6345 <td>see individual properties
6347 <td>all elements
6349 <td>yes
6351 <td>see individual properties
6353 <td>visual
6355 <tr>
6356 <th><a class=property href="#descdef-font-family">font-family</a>
6358 <td>[ <family-name> | <generic-family> ]#
6360 <td>depends on user agent
6362 <td>all elements
6364 <td>yes
6366 <td>N/A
6368 <td>visual
6370 <tr>
6371 <th><a class=property
6372 href="#propdef-font-feature-settings">font-feature-settings</a>
6374 <td>normal | <feature-tag-value>#
6376 <td>normal
6378 <td>all elements
6380 <td>yes
6382 <td>N/A
6384 <td>visual
6386 <tr>
6387 <th><a class=property href="#propdef-font-kerning">font-kerning</a>
6389 <td>auto | normal | none
6391 <td>auto
6393 <td>all elements
6395 <td>yes
6397 <td>N/A
6399 <td>visual
6401 <tr>
6402 <th><a class=property
6403 href="#propdef-font-language-override">font-language-override</a>
6405 <td>normal | <string>
6407 <td>normal
6409 <td>all elements
6411 <td>yes
6413 <td>N/A
6415 <td>visual
6417 <tr>
6418 <th><a class=property href="#propdef-font-size">font-size</a>
6420 <td><absolute-size> | <relative-size> | <length> |
6421 <percentage>
6423 <td>medium
6425 <td>all elements
6427 <td>yes
6429 <td>refer to parent element's font size
6431 <td>visual
6433 <tr>
6434 <th><a class=property
6435 href="#propdef-font-size-adjust">font-size-adjust</a>
6437 <td>none | auto | <number>
6439 <td>none
6441 <td>all elements
6443 <td>yes
6445 <td>N/A
6447 <td>visual
6449 <tr>
6450 <th><a class=property href="#propdef-font-stretch">font-stretch</a>
6452 <td>normal | ultra-condensed | extra-condensed | condensed |
6453 semi-condensed | semi-expanded | expanded | extra-expanded |
6454 ultra-expanded
6456 <td>normal
6458 <td>all elements
6460 <td>yes
6462 <td>N/A
6464 <td>visual
6466 <tr>
6467 <th><a class=property href="#propdef-font-style">font-style</a>
6469 <td>normal | italic | oblique
6471 <td>normal
6473 <td>all elements
6475 <td>yes
6477 <td>N/A
6479 <td>visual
6481 <tr>
6482 <th><a class=property href="#propdef-font-synthesis">font-synthesis</a>
6484 <td>none | [ weight || style ]
6486 <td>weight style
6488 <td>all elements
6490 <td>yes
6492 <td>N/A
6494 <td>visual
6496 <tr>
6497 <th><a class=property href="#propdef-font-variant">font-variant</a>
6499 <td>normal | none | [ <common-lig-values> ||
6500 <discretionary-lig-values> || <historical-lig-values> ||
6501 <contextual-alt-values> || stylistic(<feature-value-name>)
6502 || historical-forms || styleset(<feature-value-name>#) ||
6503 character-variant(<feature-value-name>#) ||
6504 swash(<feature-value-name>) ||
6505 ornaments(<feature-value-name>) ||
6506 annotation(<feature-value-name>) || [ small-caps | all-small-caps
6507 | petite-caps | all-petite-caps | unicase | titling-caps ] ||
6508 <numeric-figure-values> || <numeric-spacing-values> ||
6509 <numeric-fraction-values> || ordinal || slashed-zero ||
6510 <east-asian-variant-values> || <east-asian-width-values> ||
6511 ruby ]
6513 <td>normal
6515 <td>all elements
6517 <td>yes
6519 <td>N/A
6521 <td>visual
6523 <tr>
6524 <th><a class=property
6525 href="#propdef-font-variant-alternates">font-variant-alternates</a>
6527 <td>normal | [ stylistic(<feature-value-name>) || historical-forms
6528 || styleset(<feature-value-name>#) ||
6529 character-variant(<feature-value-name>#) ||
6530 swash(<feature-value-name>) ||
6531 ornaments(<feature-value-name>) ||
6532 annotation(<feature-value-name>) ]
6534 <td>normal
6536 <td>all elements
6538 <td>yes
6540 <td>N/A
6542 <td>visual
6544 <tr>
6545 <th><a class=property
6546 href="#propdef-font-variant-caps">font-variant-caps</a>
6548 <td>normal | small-caps | all-small-caps | petite-caps | all-petite-caps
6549 | unicase | titling-caps
6551 <td>normal
6553 <td>all elements
6555 <td>yes
6557 <td>N/A
6559 <td>visual
6561 <tr>
6562 <th><a class=property
6563 href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
6565 <td>normal | [ <east-asian-variant-values> ||
6566 <east-asian-width-values> || ruby ]
6568 <td>normal
6570 <td>all elements
6572 <td>yes
6574 <td>N/A
6576 <td>visual
6578 <tr>
6579 <th><a class=property
6580 href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
6582 <td>normal | none | [ <common-lig-values> ||
6583 <discretionary-lig-values> || <historical-lig-values> ||
6584 <contextual-alt-values> ]
6586 <td>normal
6588 <td>all elements
6590 <td>yes
6592 <td>N/A
6594 <td>visual
6596 <tr>
6597 <th><a class=property
6598 href="#propdef-font-variant-numeric">font-variant-numeric</a>
6600 <td>normal | [ <numeric-figure-values> ||
6601 <numeric-spacing-values> || <numeric-fraction-values> ||
6602 ordinal || slashed-zero ]
6604 <td>normal
6606 <td>all elements
6608 <td>yes
6610 <td>N/A
6612 <td>visual
6614 <tr>
6615 <th><a class=property
6616 href="#propdef-font-variant-position">font-variant-position</a>
6618 <td>normal | sub | super
6620 <td>normal
6622 <td>all elements
6624 <td>yes
6626 <td>N/A
6628 <td>visual
6630 <tr>
6631 <th><a class=property href="#propdef-font-weight">font-weight</a>
6633 <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600
6634 | 700 | 800 | 900
6636 <td>normal
6638 <td>all elements
6640 <td>yes
6642 <td>N/A
6644 <td>visual
6645 </table>
6646 <!--end-properties-->
6647 <!--begin-descriptors-->
6649 <table class=proptable>
6650 <thead>
6651 <tr>
6652 <th>Descriptor
6654 <th>Value
6656 <th>Initial
6658 <th>Percentages
6660 <th>Media
6662 <tbody>
6663 <tr>
6664 <th><a class=property href="#descdef-font-family">font-family</a>
6666 <td><family-name>
6668 <td>N/A
6670 <tr>
6671 <th><a class=property
6672 href="#propdef-font-feature-settings">font-feature-settings</a>
6674 <td>normal | <feature-tag-value>#
6676 <td>normal
6678 <tr>
6679 <th><a class=property href="#propdef-font-stretch">font-stretch</a>
6681 <td>normal | ultra-condensed | extra-condensed | condensed |
6682 semi-condensed | semi-expanded | expanded | extra-expanded |
6683 ultra-expanded
6685 <td>normal
6687 <tr>
6688 <th><a class=property href="#propdef-font-style">font-style</a>
6690 <td>normal | italic | oblique
6692 <td>normal
6694 <tr>
6695 <th><a class=property href="#propdef-font-variant">font-variant</a>
6697 <td>normal | [ <common-lig-values> ||
6698 <discretionary-lig-values> || <historical-lig-values> ||
6699 <contextual-alt-values> || stylistic(<feature-value-name>)
6700 || historical-forms || styleset(<feature-value-name>#) ||
6701 character-variant(<feature-value-name>#) ||
6702 swash(<feature-value-name>) ||
6703 ornaments(<feature-value-name>) ||
6704 annotation(<feature-value-name>) || [ small-caps | all-small-caps
6705 | petite-caps | all-petite-caps | unicase | titling-caps ] ||
6706 <numeric-figure-values> || <numeric-spacing-values> ||
6707 <numeric-fraction-values> || ordinal || slashed-zero ||
6708 <east-asian-variant-values> || <east-asian-width-values> ||
6709 ruby ]
6711 <td>normal
6713 <tr>
6714 <th><a class=property href="#propdef-font-weight">font-weight</a>
6716 <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
6718 <td>normal
6720 <tr>
6721 <th><a class=property href="#descdef-src">src</a>
6723 <td>[ <uri> [format(<string>#)]? | <font-face-name> ]#
6725 <td>N/A
6727 <tr>
6728 <th><a class=property href="#descdef-unicode-range">unicode-range</a>
6730 <td><urange>#
6732 <td>U+0-10FFFF
6733 </table>
6734 <!--end-descriptors-->
6735 <script type="text/javascript">
6736 window.onload = function () {
6737 if (!("devicePixelRatio" in window && window.devicePixelRatio > 1)) return;
6738 var i, hiresElements = document.getElementsByClassName("hires");
6739 for (i = 0; i < hiresElements.length; i++) {
6740 var h = hiresElements[i];
6741 if (h.tagName != "IMG") continue;
6742 var src = h.getAttribute("src");
6743 var src2x = src.replace(/\.\w+$/, function(m) { return "@2x" + m; });
6744 h.src = src2x;
6745 }
6746 }
6747 </script>
6748 </html>
6749 <!-- Keep this comment at the end of the file
6750 Local variables:
6751 mode: sgml
6752 sgml-declaration:"~/SGML/HTML4.decl"
6753 sgml-default-doctype-name:"html"
6754 sgml-minimize-attributes:t
6755 sgml-nofill-elements:("pre" "style" "br")
6756 sgml-live-element-indicator:t
6757 sgml-omittag:nil
6758 sgml-shorttag:nil
6759 sgml-namecase-general:t
6760 sgml-general-insert-case:lower
6761 sgml-always-quote-attributes:t
6762 sgml-indent-step:nil
6763 sgml-indent-data:t
6764 sgml-parent-document:nil
6765 sgml-exposed-tags:nil
6766 sgml-local-catalogs:nil
6767 sgml-local-ecat-files:nil
6768 End:
6769 -->
6770 <!--
6772 to do:
6774 - wording of OpenType family name handling
6775 - handling combining sequences in the font matching algorithm
6776 - fix-up fi ligature example
6778 -->
