css-fonts/Fonts.html

Fri, 07 Jun 2013 08:28:32 +0900

author
John Daggett <jdaggett@mozilla.com>
date
Fri, 07 Jun 2013 08:28:32 +0900
changeset 8365
88cf160c874b
parent 8364
b38d067383a3
child 8368
a0a0866f3b1f
permissions
-rw-r--r--

[css3-fonts] switch OM issue for @font-feature-values rule

jdaggett@484 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
jdaggett@484 2 "http://www.w3.org/TR/html4/strict.dtd">
jdaggett@484 3
jdaggett@484 4 <html lang=en>
jdaggett@484 5 <head><meta content="text/html;charset=utf-8" http-equiv=Content-Type>
jdaggett@484 6
jdaggett@1244 7 <title>CSS Fonts Module Level 3</title>
jdaggett@484 8 <!--
jdaggett@484 9 FIXME when publishing: copy the current default.css and link to
jdaggett@484 10 "default.css" rather than "../default.css"
jdaggett@484 11 -->
jdaggett@484 12 <link href="../default.css" rel=stylesheet type="text/css">
jdaggett@4545 13 <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
jdaggett@4546 14 <!-- I'm just experimenting here, don't get your bee in a bonnet -->
jdaggett@4546 15 <script src="http://use.typekit.com/xon2bky.js"
jdaggett@4546 16 type="text/javascript"></script>
jdaggett@4546 17 <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
jdaggett@484 18
jdaggett@497 19 <style type="text/css">
jdaggett@4546 20
jdaggett@4547 21 body, th, td, h1, h2, h3, h4, h5, h6 {
jdaggett@4547 22 font-family: "myriad-pro", sans-serif !important;
jdaggett@4547 23 }
jdaggett@8277 24
jdaggett@524 25 body {
jdaggett@524 26 padding: 2em 70px 2em 70px;
jdaggett@524 27 }
jdaggett@4546 28
jdaggett@497 29 p + p, p.mtb {
jdaggett@497 30 margin-top: 0.8em;
jdaggett@497 31 text-indent: 0px;
jdaggett@497 32 }
jdaggett@6651 33
jdaggett@6651 34 #bolderlighter {
jdaggett@6651 35 width: 40%;
jdaggett@6651 36 }
jdaggett@6651 37
jdaggett@6651 38 #bolderlighter th {
jdaggett@6651 39 text-align: center;
jdaggett@6651 40 }
jdaggett@8277 41
jdaggett@7103 42 #fontformats td, #eventhandlers td, #fontformats th, #eventhandlers th {
jdaggett@1244 43 padding-right: 2em;
jdaggett@512 44 text-align: left;
jdaggett@512 45 }
jdaggett@8277 46
jdaggett@518 47 dd {
jdaggett@518 48 margin-bottom: 1em;
jdaggett@514 49 }
jdaggett@8277 50
jdaggett@516 51 #authors dd {
jdaggett@516 52 margin-bottom: 0;
jdaggett@516 53 }
jdaggett@8277 54
jdaggett@531 55 #fontstylematchingalg {
jdaggett@531 56 list-style-type: lower-alpha;
jdaggett@531 57 }
jdaggett@8277 58
jdaggett@531 59 #fontmatchingalg ul, #fontmatchingalg ol {
jdaggett@531 60 margin-top: 0.8em;
jdaggett@531 61 }
jdaggett@8277 62
jdaggett@531 63 #fontmatchingalg li + li {
jdaggett@531 64 margin-top: 0.8em;
jdaggett@531 65 }
jdaggett@8277 66
jdaggett@531 67 div.example {
jdaggett@531 68 padding: 1em;
jdaggett@531 69 margin-top: 1em;
jdaggett@531 70 }
jdaggett@531 71
jdaggett@531 72 div.example + div.example {
jdaggett@531 73 margin-top: 2em;
jdaggett@531 74 }
jdaggett@8277 75
jdaggett@531 76 div.figure {
jdaggett@531 77 page-break-inside: avoid;
jdaggett@531 78 }
jdaggett@1244 79
jdaggett@1662 80 pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em }
jdaggett@8277 81
jdaggett@8277 82 div.featex {
jdaggett@1662 83 width: 700px;
jdaggett@1662 84 }
jdaggett@8277 85
jdaggett@1662 86 div.featex img {
jdaggett@1662 87 margin: auto;
jdaggett@1662 88 display: block;
jdaggett@1662 89 }
jdaggett@6436 90
jdaggett@6436 91 span.tag {
jdaggett@6436 92 font-family: monospace;
jdaggett@6436 93 font-size: 120%;
jdaggett@6436 94 }
jdaggett@6648 95
jdaggett@6701 96 ol ol {
jdaggett@6701 97 list-style-type: lower-alpha;
jdaggett@6701 98 }
jdaggett@7060 99
jdaggett@7060 100 .idl-code {
jdaggett@7060 101 font-weight: bold;
jdaggett@7060 102 color: #c50;
jdaggett@7060 103 }
jdaggett@497 104 </style>
jdaggett@2556 105 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
jdaggett@2556 106 type="text/css">
jdaggett@497 107
jdaggett@484 108 <body>
jdaggett@484 109 <div class=head> <!--begin-logo-->
jdaggett@484 110 <p><a href="http://www.w3.org/"><img alt=W3C height=48
jdaggett@890 111 src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
jdaggett@890 112
jdaggett@901 113 <h1>CSS Fonts Module Level 3</h1>
jdaggett@901 114
jdaggett@8363 115 <h2 class="no-num no-toc" id=editors-draft-7-june-2013>Editor's Draft 7
jdaggett@8356 116 June 2013</h2>
jdaggett@484 117
jdaggett@516 118 <dl id=authors>
jdaggett@484 119 <dt>This version:
jdaggett@484 120
jdaggett@484 121 <dd><a
jdaggett@8031 122 href="http://dev.w3.org/csswg/css-fonts/">http://dev.w3.org/csswg/css-fonts/</a>
jdaggett@8363 123 <!-- <dd><a href="http://www.w3.org/TR/2013/ED-css3-fonts-20130607/">http://www.w3.org/TR/2013/ED-css3-fonts-20130607/</a> -->
jdaggett@484 124
jdaggett@484 125
jdaggett@484 126 <dt>Latest version:
jdaggett@484 127
jdaggett@484 128 <dd><a
jdaggett@484 129 href="http://www.w3.org/TR/css3-fonts/">http://www.w3.org/TR/css3-fonts/</a>
jdaggett@484 130
jdaggett@890 131 <dt>Latest editor's draft:
jdaggett@890 132
jdaggett@890 133 <dd><a
jdaggett@8031 134 href="http://dev.w3.org/csswg/css-fonts/">http://dev.w3.org/csswg/css-fonts/</a>
jdaggett@7488 135 (<a
jdaggett@8031 136 href="https://dvcs.w3.org/hg/csswg/log/tip/css-fonts/Fonts.html">change
jdaggett@7488 137 log</a>)
jdaggett@890 138
jdaggett@4624 139 <dt>Previous version:
jdaggett@890 140
jdaggett@890 141 <dd><a
jdaggett@7451 142 href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/">http://www.w3.org/TR/2013/WD-css3-fonts-20130212/</a>
jdaggett@4624 143
jdaggett@4624 144 <dt>Issues List:
jdaggett@4624 145
jdaggett@4624 146 <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/18">CSS3 Fonts
jdaggett@4624 147 issues in Tracker</a>
jdaggett@2556 148
jdaggett@2556 149 <dd><a
jdaggett@6648 150 href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&amp;product=CSS&amp;component=Fonts&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED">CSS3
jdaggett@4624 151 Fonts issues in Bugzilla</a>
jdaggett@4624 152
jdaggett@8031 153 <dt>Discussion:
jdaggett@8031 154
jdaggett@8031 155 <dd><a
jdaggett@8031 156 href="mailto:www-style@w3.org?subject=%5Bcss-fonts%5D%20feedback">www-style@w3.org</a>
jdaggett@8031 157 with subject line “<kbd>[css-fonts] <var>… message topic
jdaggett@8031 158 …</var></kbd>” (<a
jdaggett@8031 159 href="http://lists.w3.org/Archives/Public/www-style/"
jdaggett@8031 160 rel=discussion>archives</a>)
jdaggett@890 161
jdaggett@890 162 <dt>Editor:
jdaggett@484 163
jdaggett@497 164 <dd><a href="mailto:jdaggett@mozilla.com">John Daggett (Mozilla)</a>
jdaggett@484 165 </dl>
jdaggett@484 166 <!--begin-copyright-->
jdaggett@484 167 <p class=copyright><a
jdaggett@484 168 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
jdaggett@7179 169 rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
jdaggett@5530 170 title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
jdaggett@5530 171 href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of
jdaggett@5530 172 Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr
jdaggett@1662 173 title="European Research Consortium for Informatics and
jdaggett@7244 174 Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>,
jdaggett@7244 175 <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C
jdaggett@7244 176 <a
jdaggett@484 177 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
jdaggett@484 178 <a
jdaggett@484 179 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
jdaggett@484 180 and <a
jdaggett@484 181 href="http://www.w3.org/Consortium/Legal/copyright-documents">document
jdaggett@484 182 use</a> rules apply.</p>
jdaggett@484 183 <!--end-copyright-->
jdaggett@484 184 <hr title="Separator for header">
jdaggett@484 185 </div>
jdaggett@525 186
jdaggett@484 187 <h2 class="no-num no-toc" id=abstract>Abstract</h2>
jdaggett@484 188
jdaggett@890 189 <p>This CSS3 module describes how font properties are specified and how
jdaggett@890 190 font resources are loaded dynamically. The contents of this specification
jdaggett@1244 191 are a consolidation of content previously divided into <a
jdaggett@3538 192 href="http://www.w3.org/TR/2002/WD-css3-fonts-20020802/">CSS3 Fonts</a>
jdaggett@3538 193 and <a href="http://www.w3.org/TR/2002/WD-css3-webfonts-20020802/">CSS3
jdaggett@7521 194 Web Fonts</a> modules. The description of font load events was moved into
jdaggett@7521 195 the <a href="http://dev.w3.org/csswg/css3-font-load-events/">CSS3 Font
jdaggett@7521 196 Load Events</a> module.
jdaggett@484 197
jdaggett@484 198 <h2 class="no-num no-toc" id=status>Status of this document</h2>
jdaggett@484 199 <!--begin-status-->
jdaggett@484 200
jdaggett@484 201 <p>This is a public copy of the editors' draft. It is provided for
jdaggett@484 202 discussion only and may change at any moment. Its publication here does
jdaggett@484 203 not imply endorsement of its contents by W3C. Don't cite this document
jdaggett@484 204 other than as work in progress.
jdaggett@484 205
jdaggett@484 206 <p>The (<a
jdaggett@484 207 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
jdaggett@1662 208 mailing list <a
jdaggett@1662 209 href="mailto:www-style@w3.org?Subject=%5Bcss3-fonts%5D%20PUT%20SUBJECT%20HERE">
jdaggett@1662 210 www-style@w3.org</a> (see <a
jdaggett@1662 211 href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
jdaggett@1662 212 discussion of this specification. When sending e-mail, please put the text
jdaggett@1662 213 “css3-fonts” in the subject, preferably like this:
jdaggett@1148 214 “[<!---->css3-fonts<!---->] <em>…summary of comment…</em>”
jdaggett@484 215
jdaggett@8031 216 <p>This document was produced by the <a
jdaggett@8031 217 href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
jdaggett@8031 218 the <a href="http://www.w3.org/Style/">Style Activity</a>).
jdaggett@484 219
jdaggett@484 220 <p>This document was produced by a group operating under the <a
jdaggett@8031 221 href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
jdaggett@8031 222 2004 W3C Patent Policy</a>. W3C maintains a <a
jdaggett@8031 223 href="http://www.w3.org/2004/01/pp-impl/32061/status"
jdaggett@484 224 rel=disclosure>public list of any patent disclosures</a> made in
jdaggett@484 225 connection with the deliverables of the group; that page also includes
jdaggett@484 226 instructions for disclosing a patent. An individual who has actual
jdaggett@484 227 knowledge of a patent which the individual believes contains <a
jdaggett@8031 228 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
jdaggett@484 229 Claim(s)</a> must disclose the information in accordance with <a
jdaggett@8031 230 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
jdaggett@8031 231 6 of the W3C Patent Policy</a>.</p>
jdaggett@484 232 <!--end-status-->
jdaggett@4624 233 <!--
jdaggett@4624 234 <h3 class="no-num no-toc" id="atrisk">Features at risk</h3>
jdaggett@4624 235
jdaggett@4624 236 <p>The following features are at risk and may be removed when exiting CR:</p>
jdaggett@4624 237
jdaggett@4624 238 <ul>
jdaggett@4624 239 </ul>
jdaggett@4624 240 -->
jdaggett@2472 241
jdaggett@484 242 <h2 class="no-num no-toc" id=contents>Table of contents</h2>
jdaggett@484 243 <!--begin-toc-->
jdaggett@484 244
jdaggett@484 245 <ul class=toc>
jdaggett@890 246 <li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
jdaggett@890 247
jdaggett@1244 248 <li><a href="#typography-background"><span class=secno>2 </span>Typography
jdaggett@545 249 Background</a>
jdaggett@545 250
jdaggett@6699 251 <li><a href="#basic-font-props"><span class=secno>3 </span>Basic Font
jdaggett@6699 252 Properties</a>
jdaggett@484 253 <ul class=toc>
jdaggett@1662 254 <li><a href="#font-family-prop"><span class=secno>3.1 </span>Font
jdaggett@1662 255 family: the font-family property</a>
jdaggett@514 256 <ul class=toc>
jdaggett@1244 257 <li><a href="#generic-font-families"><span class=secno>3.1.1
jdaggett@1244 258 </span>Generic font families</a>
jdaggett@514 259 </ul>
jdaggett@484 260
jdaggett@1662 261 <li><a href="#font-weight-prop"><span class=secno>3.2 </span>Font
jdaggett@1662 262 weight: the font-weight property</a>
jdaggett@1662 263
jdaggett@1662 264 <li><a href="#font-stretch-prop"><span class=secno>3.3 </span>Font
jdaggett@1662 265 width: the font-stretch property</a>
jdaggett@1662 266
jdaggett@1662 267 <li><a href="#font-style-prop"><span class=secno>3.4 </span>Font style:
jdaggett@1662 268 the font-style property</a>
jdaggett@1662 269
jdaggett@1662 270 <li><a href="#font-size-prop"><span class=secno>3.5 </span>Font size:
jdaggett@1662 271 the font-size property</a>
jdaggett@1662 272
jdaggett@1662 273 <li><a href="#font-size-adjust-prop"><span class=secno>3.6
jdaggett@1662 274 </span>Relative sizing: the font-size-adjust property</a>
jdaggett@1662 275
jdaggett@1662 276 <li><a href="#font-prop"><span class=secno>3.7 </span>Shorthand font
jdaggett@1662 277 property: the font property</a>
jdaggett@2457 278
jdaggett@2487 279 <li><a href="#font-synthesis-prop"><span class=secno>3.8
jdaggett@2487 280 </span>Controlling synthetic faces: the font-synthesis property</a>
jdaggett@484 281 </ul>
jdaggett@484 282
jdaggett@890 283 <li><a href="#font-resources"><span class=secno>4 </span>Font
jdaggett@6699 284 Resources</a>
jdaggett@512 285 <ul class=toc>
jdaggett@1662 286 <li><a href="#font-face-rule"><span class=secno>4.1 </span>The
jdaggett@7096 287 <code>@font-face</code> rule</a>
jdaggett@1244 288
jdaggett@1662 289 <li><a href="#font-family-desc"><span class=secno>4.2 </span>Font
jdaggett@1662 290 family: the font-family descriptor</a>
jdaggett@1662 291
jdaggett@1662 292 <li><a href="#src-desc"><span class=secno>4.3 </span>Font reference: the
jdaggett@1662 293 src descriptor</a>
jdaggett@1662 294
jdaggett@1662 295 <li><a href="#font-prop-desc"><span class=secno>4.4 </span>Font property
jdaggett@1662 296 descriptors: the font-style, font-weight, font-stretch descriptors</a>
jdaggett@1662 297
jdaggett@1662 298 <li><a href="#unicode-range-desc"><span class=secno>4.5 </span>Character
jdaggett@1662 299 range: the unicode-range descriptor</a>
jdaggett@1662 300
jdaggett@8225 301 <li><a href="#composite-fonts"><span class=secno>4.6 </span>Using
jdaggett@8225 302 character ranges to define composite fonts</a>
jdaggett@8225 303
jdaggett@8225 304 <li><a href="#font-rend-desc"><span class=secno>4.7 </span>Font
jdaggett@1732 305 features: the font-variant and font-feature-settings descriptors</a>
jdaggett@2563 306
jdaggett@8225 307 <li><a href="#font-face-loading"><span class=secno>4.8 </span>Font
jdaggett@2563 308 loading guidelines</a>
jdaggett@2737 309
jdaggett@8225 310 <li><a href="#same-origin-restriction"><span class=secno>4.9
jdaggett@2737 311 </span>Same-origin restriction for fonts</a>
jdaggett@2740 312 <ul class=toc>
jdaggett@8225 313 <li><a href="#default-same-origin-restriction"><span class=secno>4.9.1
jdaggett@2740 314 </span>Default same-origin restriction</a>
jdaggett@2740 315
jdaggett@2740 316 <li><a href="#allowing-cross-origin-font-loading"><span
jdaggett@8225 317 class=secno>4.9.2 </span>Allowing cross-origin font loading</a>
jdaggett@2740 318 </ul>
jdaggett@512 319 </ul>
jdaggett@484 320
jdaggett@1244 321 <li><a href="#font-matching-algorithm"><span class=secno>5 </span>Font
jdaggett@6699 322 Matching Algorithm</a>
jdaggett@2457 323 <ul class=toc>
jdaggett@7309 324 <li><a href="#font-family-casing"><span class=secno>5.1 </span>Case
jdaggett@7309 325 sensitivity of font family names</a>
jdaggett@7309 326
jdaggett@7309 327 <li><a href="#font-style-matching"><span class=secno>5.2 </span>Matching
jdaggett@2457 328 font styles</a>
jdaggett@2457 329
jdaggett@7309 330 <li><a href="#cluster-matching"><span class=secno>5.3 </span>Cluster
jdaggett@6701 331 matching</a>
jdaggett@6701 332
jdaggett@7309 333 <li><a href="#char-handling-issues"><span class=secno>5.4
jdaggett@2457 334 </span>Character handling issues</a>
jdaggett@2509 335
jdaggett@7309 336 <li><a href="#font-matching-changes"><span class=secno>5.5 </span>Font
jdaggett@2509 337 matching changes since CSS 2.1</a>
jdaggett@6701 338
jdaggett@7309 339 <li><a href="#font-matching-examples"><span class=secno>5.6 </span>Font
jdaggett@6701 340 matching examples</a>
jdaggett@2457 341 </ul>
jdaggett@1244 342
jdaggett@6699 343 <li><a href="#font-rend-props"><span class=secno>6 </span>Font Feature
jdaggett@6699 344 Properties</a>
jdaggett@1662 345 <ul class=toc>
jdaggett@1856 346 <li><a href="#glyph-selection-positioning"><span class=secno>6.1
jdaggett@1856 347 </span>Glyph selection and positioning</a>
jdaggett@1856 348
jdaggett@1856 349 <li><a href="#language-specific-support"><span class=secno>6.2
jdaggett@1856 350 </span>Language-specific display</a>
jdaggett@1856 351
jdaggett@1856 352 <li><a href="#font-kerning-prop"><span class=secno>6.3 </span>Kerning:
jdaggett@1662 353 the font-kerning property</a>
jdaggett@1662 354
jdaggett@6176 355 <li><a href="#font-variant-ligatures-prop"><span class=secno>6.4
jdaggett@6176 356 </span>Ligatures: the font-variant-ligatures property</a>
jdaggett@6176 357
jdaggett@6176 358 <li><a href="#font-variant-position-prop"><span class=secno>6.5
jdaggett@3638 359 </span>Subscript and superscript forms: the font-variant-position
jdaggett@3638 360 property</a>
jdaggett@1856 361
jdaggett@2118 362 <li><a href="#font-variant-caps-prop"><span class=secno>6.6
jdaggett@2118 363 </span>Capitalization: the font-variant-caps property</a>
jdaggett@2118 364
jdaggett@2118 365 <li><a href="#font-variant-numeric-prop"><span class=secno>6.7
jdaggett@2118 366 </span>Numerical formatting: the font-variant-numeric property</a>
jdaggett@2118 367
jdaggett@2118 368 <li><a href="#font-variant-alternates-prop"><span class=secno>6.8
jdaggett@1662 369 </span>Alternates and swashes: the font-variant-alternates property</a>
jdaggett@1662 370
jdaggett@1662 371
jdaggett@2472 372 <li><a href="#font-feature-values"><span class=secno>6.9 </span>Defining
jdaggett@7096 373 font specific alternates: the <code>@font-feature-values</code>
jdaggett@7096 374 rule</a>
jdaggett@8356 375 <ul class=toc>
jdaggett@8356 376 <li><a href="#basic-syntax"><span class=secno>6.9.1 </span>Basic
jdaggett@8356 377 syntax</a>
jdaggett@8356 378
jdaggett@8356 379 <li><a href="#multi-valued-feature-value-definitions"><span
jdaggett@8356 380 class=secno>6.9.2 </span>Multi-valued feature value definitions</a>
jdaggett@8356 381 </ul>
jdaggett@2118 382
jdaggett@2118 383 <li><a href="#font-variant-east-asian-prop"><span class=secno>6.10
jdaggett@1662 384 </span>East Asian text rendering: the font-variant-east-asian
jdaggett@1662 385 property</a>
jdaggett@1662 386
jdaggett@2118 387 <li><a href="#font-variant-prop"><span class=secno>6.11 </span>Overall
jdaggett@1662 388 shorthand for font rendering: the font-variant property</a>
jdaggett@1662 389
jdaggett@2118 390 <li><a href="#font-feature-settings-prop"><span class=secno>6.12
jdaggett@2509 391 </span>Low-level font feature settings control: the
jdaggett@2509 392 font-feature-settings property</a>
jdaggett@1662 393
jdaggett@2118 394 <li><a href="#font-language-override-prop"><span class=secno>6.13
jdaggett@1732 395 </span>Font language override: the font-language-override property</a>
jdaggett@1662 396 </ul>
jdaggett@1662 397
jdaggett@6176 398 <li><a href="#font-feature-resolution"><span class=secno>7 </span>Font
jdaggett@6699 399 Feature Resolution </a>
jdaggett@6699 400 <ul class=toc>
jdaggett@6699 401 <li><a href="#default-features"><span class=secno>7.1 </span>Default
jdaggett@6699 402 features</a>
jdaggett@6699 403
jdaggett@6699 404 <li><a href="#feature-precedence"><span class=secno>7.2 </span>Feature
jdaggett@6699 405 precedence</a>
jdaggett@6699 406
jdaggett@6699 407 <li><a href="#feature-precedence-examples"><span class=secno>7.3
jdaggett@6699 408 </span>Feature precedence examples</a>
jdaggett@6699 409 </ul>
jdaggett@6699 410
jdaggett@7021 411 <li><a href="#object-model"><span class=secno>8 </span>Object Model</a>
jdaggett@7021 412 <ul class=toc>
jdaggett@7021 413 <li><a href="#om-fontface"><span class=secno>8.1 </span>The
jdaggett@7021 414 <code>CSSFontFaceRule</code> interface</a>
jdaggett@7021 415
jdaggett@7021 416 <li><a href="#om-fontfeaturevalues"><span class=secno>8.2 </span>The
jdaggett@7021 417 <code>CSSFontFeatureValuesRule</code> interface</a>
jdaggett@7021 418 </ul>
jdaggett@7021 419
jdaggett@2737 420 <li class=no-num><a href="#platform-props-to-css">Appendix A: Mapping
jdaggett@1662 421 platform font properties to CSS properties</a>
jdaggett@1662 422
jdaggett@2472 423 <li class=no-num><a href="#ch-ch-ch-changes">Changes</a>
jdaggett@2472 424 <ul class=toc>
jdaggett@7442 425 <li class=no-num><a href="#recent-changes"> Changes from the February
jdaggett@7442 426 2013 CSS3 Fonts Working Draft</a>
jdaggett@2472 427 </ul>
jdaggett@2472 428
jdaggett@529 429 <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
jdaggett@529 430
jdaggett@7242 431 <li class=no-num><a href="#conformance"> Conformance</a>
jdaggett@7242 432 <ul class=toc>
jdaggett@7242 433 <li class=no-num><a href="#conventions"> Document Conventions</a>
jdaggett@7242 434
jdaggett@7242 435 <li class=no-num><a href="#conformance-classes"> Conformance Classes</a>
jdaggett@7242 436
jdaggett@7242 437
jdaggett@7242 438 <li class=no-num><a href="#partial"> Partial Implementations</a>
jdaggett@7242 439
jdaggett@7242 440 <li class=no-num><a href="#experimental"> Experimental
jdaggett@7242 441 Implementations</a>
jdaggett@7242 442
jdaggett@7242 443 <li class=no-num><a href="#testing"> Non-Experimental
jdaggett@7242 444 Implementations</a>
jdaggett@7242 445 </ul>
jdaggett@7242 446
jdaggett@484 447 <li class=no-num><a href="#references">References</a>
jdaggett@484 448 <ul class=toc>
jdaggett@1662 449 <li class=no-num><a href="#normative-references">Normative
jdaggett@1662 450 References</a>
jdaggett@1662 451
jdaggett@1662 452 <li class=no-num><a href="#other-references">Other References</a>
jdaggett@484 453 </ul>
jdaggett@484 454
jdaggett@484 455 <li class=no-num><a href="#index">Index</a>
jdaggett@484 456
jdaggett@484 457 <li class=no-num><a href="#property-index">Property index</a>
jdaggett@484 458 </ul>
jdaggett@484 459 <!--end-toc-->
jdaggett@484 460
jdaggett@890 461 <h2 id=introduction><span class=secno>1 </span>Introduction</h2>
jdaggett@545 462
jdaggett@1148 463 <p>A font provides a resource containing the visual representation of
jdaggett@1662 464 characters. At the simplest level it contains information that maps
jdaggett@1662 465 character codes to shapes (called glyphs) that represent these characters.
jdaggett@1662 466 Fonts sharing a common design style are commonly grouped into font
jdaggett@1662 467 families classified by a set of standard font properties. Within a family,
jdaggett@1662 468 the shape displayed for a given character can vary by stroke weight, slant
jdaggett@7311 469 or relative width, among others. An individual font face is described by a
jdaggett@1662 470 unique combination of these properties. For a given range of text, CSS
jdaggett@1662 471 font properties are used to select a font family and a specific font face
jdaggett@1662 472 within that family to be used when rendering that text. As a simple
jdaggett@1662 473 example, to use the bold form of Helvetica one could use:
jdaggett@1148 474
jdaggett@8277 475 <pre>body {
jdaggett@8277 476 font-family: Helvetica;
jdaggett@8277 477 font-weight: bold;
jdaggett@1148 478 }</pre>
jdaggett@1148 479
jdaggett@7311 480 <p>Font resources may be installed locally on the system on which a user
jdaggett@7311 481 agent is running or downloadable. For local font resources descriptive
jdaggett@1148 482 information can be obtained directly from the font resource. For
jdaggett@1148 483 downloadable font resources (sometimes referred to as web fonts), the
jdaggett@1148 484 descriptive information is included with the reference to the font
jdaggett@1148 485 resource.
jdaggett@1148 486
jdaggett@1148 487 <p>Families of fonts typically don't contain a single face for each
jdaggett@1148 488 possible variation of font properties. The CSS font selection mechanism
jdaggett@7311 489 describes how to match a given set of CSS font properties to a single font
jdaggett@1148 490 face.
jdaggett@890 491
jdaggett@1244 492 <h2 id=typography-background><span class=secno>2 </span>Typography
jdaggett@1244 493 Background</h2>
jdaggett@890 494
jdaggett@7311 495 <p><em>This section is non-normative.</em>
jdaggett@7311 496
jdaggett@7311 497 <p> Typographic traditions vary across the globe, so there is no unique way
jdaggett@890 498 to classify all fonts across languages and cultures. For even common Latin
jdaggett@890 499 letters, wide variations are possible:
jdaggett@497 500
jdaggett@1150 501 <div class=figure><img alt="variations in glyphs for a single character"
jdaggett@1150 502 src=aaaaaa.png>
jdaggett@890 503 <p class=caption>One character, many glyph variations
jdaggett@498 504 </div>
jdaggett@497 505
jdaggett@497 506 <p>Differences in the anatomy of letterforms is one way to distinguish
jdaggett@497 507 fonts. For Latin fonts, flourishes at the ends of a character's main
jdaggett@497 508 strokes, or serifs, can distinguish a font from those without. Similar
jdaggett@534 509 comparisons exist in non-Latin fonts between fonts with tapered strokes
jdaggett@534 510 and those using primarily uniform strokes:
jdaggett@497 511
jdaggett@1150 512 <div class=figure><img alt="serif vs. non-serifs" src=serifvssansserif.png>
jdaggett@890 513 <p class=caption>Letterforms with and without serifs
jdaggett@534 514 </div>
jdaggett@534 515
jdaggett@1150 516 <div class=figure><img alt="serif vs. non-serifs for japanese"
jdaggett@1150 517 src=minchovsgothic.png>
jdaggett@890 518 <p class=caption>Similar groupings for Japanese typefaces
jdaggett@498 519 </div>
jdaggett@497 520
jdaggett@497 521 <p>Fonts contain letterforms and the data needed to map characters to these
jdaggett@7311 522 letterforms. Often this may be a simple one-to-one mapping, but more
jdaggett@497 523 complex mappings are also possible. The use of combining diacritic marks
jdaggett@497 524 creates many variations for an underlying letterform:
jdaggett@497 525
jdaggett@1150 526 <div class=figure><img alt="diacritic marks" src=aaaaaa-diacritics.png>
jdaggett@890 527 <p class=caption>Variations with diacritic marks
jdaggett@498 528 </div>
jdaggett@525 529
jdaggett@497 530 <p>A sequence of characters can be represented by a single glyph known as a
jdaggett@497 531 ligature:
jdaggett@497 532
jdaggett@1150 533 <div class=figure><img alt="example of a fi ligature"
jdaggett@1150 534 src=final-ligature.png>
jdaggett@890 535 <p class=caption>Ligature example
jdaggett@498 536 </div>
jdaggett@497 537
jdaggett@7311 538 <p>Visual transformations based on textual context are often stylistic
jdaggett@7311 539 option in European languages. They are required to correctly render
jdaggett@7311 540 languages like Arabic, the lam and alef characters below <em>must</em> be
jdaggett@7311 541 combined when they exist in sequence:
jdaggett@497 542
jdaggett@1150 543 <div class=figure><img alt="lam alef ligature" src=lamaleflig.png>
jdaggett@890 544 <p class=caption>Required Arabic ligature
jdaggett@498 545 </div>
jdaggett@497 546
jdaggett@498 547 <p>The relative complexity of these shaping transformations requires
jdaggett@498 548 additional data within the font.
jdaggett@497 549
jdaggett@497 550 <p>Sets of font faces with various stylistic variations are often grouped
jdaggett@512 551 together into font families. In the simplest case a regular face is
jdaggett@7311 552 supplemented with bold and italic faces, but much more extensive groupings
jdaggett@7311 553 are possible. Variations in the thickness of letterform strokes, the <dfn
jdaggett@7311 554 id=weight>weight</dfn>, and the overall proportions of the letterform, the
jdaggett@7311 555 <dfn id=width>width</dfn>, are most common. In the example below, each
jdaggett@7311 556 letter uses a different font face within the Univers font family. The
jdaggett@7311 557 width used increases from top to bottom and the weight increases from left
jdaggett@7311 558 to right:
jdaggett@497 559
jdaggett@1150 560 <div class=figure><img alt="various width and weight variations within a
jdaggett@1150 561 single family" src=weightwidthvariations.png>
jdaggett@890 562 <p class=caption>Weight and width variations within a single font family
jdaggett@498 563 </div>
jdaggett@497 564
jdaggett@545 565 <p>Creating fonts that support multiple scripts is a difficult task;
jdaggett@1148 566 designers need to understand the cultural traditions surrounding the use
jdaggett@1148 567 of type in different scripts and come up with letterforms that somehow
jdaggett@1148 568 share a common theme. Many languages often share a common script and each
jdaggett@7311 569 of these languages may have noticeable stylistic differences. For example,
jdaggett@7311 570 the Arabic script is shared by Persian and Urdu and Cyrillic is used with
jdaggett@7311 571 many languages, not just Russian.
jdaggett@518 572
jdaggett@8225 573 <p>The <a href="#character-map"><em>character map</em></a> of a font
jdaggett@8225 574 defines the mapping of characters to glyphs for that font. If a document
jdaggett@8225 575 contains characters not supported by the <a href="#character-map"><em
jdaggett@8225 576 title="character map">character maps</em></a> of the fonts contained in a
jdaggett@8363 577 font family list, a user agent may use a <a
jdaggett@8363 578 href="#system-font-fallback"><em>system font fallback</em></a> procedure
jdaggett@8363 579 to locate an appropriate font that does. If no appropriate font can be
jdaggett@8363 580 found, some form of "missing glyph" character will be rendered by the user
jdaggett@8363 581 agent. System fallback can occur when the specified list of font families
jdaggett@8363 582 does not include a font that supports a given character.
jdaggett@8225 583
jdaggett@8225 584 <p>Although the <a href="#character-map"><em>character map</em></a> of a
jdaggett@8225 585 font maps a given character to a glyph for that character, modern font
jdaggett@8225 586 technologies such as OpenType and AAT (Apple Advanced Typography) provide
jdaggett@8225 587 ways of mapping a character to different glyphs based upon feature
jdaggett@8225 588 settings. Fonts in these formats allow these features to be embedded in
jdaggett@8225 589 the font itself and controlled by applications. Common typographic
jdaggett@8225 590 features which can be specified this way include ligatures, swashes,
jdaggett@8225 591 contextual alternates, proportional and tabular figures, and automatic
jdaggett@8225 592 fractions, to list just a few. For a visual overview of OpenType features,
jdaggett@8225 593 see the <a href="#OPENTYPE-FONT-GUIDE"
jdaggett@6659 594 rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
jdaggett@1662 595
jdaggett@6699 596 <h2 id=basic-font-props><span class=secno>3 </span>Basic Font Properties</h2>
jdaggett@512 597
jdaggett@512 598 <p>The particular font face used to render a character is determined by the
jdaggett@515 599 font family and other font properties that apply to a given element. This
jdaggett@515 600 structure allows settings to be varied independent of each other.</p>
jdaggett@512 601 <!-- prop: font-family -->
jdaggett@484 602
jdaggett@1662 603 <h3 id=font-family-prop><span class=secno>3.1 </span>Font family: the <a
jdaggett@1662 604 href="#propdef-font-family">font-family</a> property</h3>
jdaggett@1662 605
jdaggett@8225 606 <table class=propdef id=namefont-familyvalue-ltfamily-namegt-ltg>
jdaggett@484 607 <tbody>
jdaggett@484 608 <tr>
jdaggett@484 609 <td>Name:
jdaggett@484 610
jdaggett@8278 611 <td><dfn id=propdef-font-family
jdaggett@8278 612 title="font-family!!property">font-family</dfn>
jdaggett@484 613
jdaggett@484 614 <tr>
jdaggett@484 615 <td>Value:
jdaggett@484 616
jdaggett@8225 617 <td>[ <a href="#family-name-value"><var>&lt;family-name&gt;</var></a> |
jdaggett@8225 618 <a href="#generic-family-value"><var>&lt;generic-family&gt;</var></a> ]
jdaggett@8225 619 #
jdaggett@484 620
jdaggett@484 621 <tr>
jdaggett@484 622 <td>Initial:
jdaggett@484 623
jdaggett@484 624 <td>depends on user agent
jdaggett@484 625
jdaggett@484 626 <tr>
jdaggett@484 627 <td>Applies to:
jdaggett@484 628
jdaggett@484 629 <td>all elements
jdaggett@484 630
jdaggett@484 631 <tr>
jdaggett@484 632 <td>Inherited:
jdaggett@484 633
jdaggett@484 634 <td>yes
jdaggett@484 635
jdaggett@484 636 <tr>
jdaggett@484 637 <td>Percentages:
jdaggett@484 638
jdaggett@484 639 <td>N/A
jdaggett@484 640
jdaggett@484 641 <tr>
jdaggett@484 642 <td>Media:
jdaggett@484 643
jdaggett@484 644 <td>visual
jdaggett@484 645
jdaggett@484 646 <tr>
jdaggett@1148 647 <td>Computed value:
jdaggett@484 648
jdaggett@484 649 <td>as specified
jdaggett@7377 650
jdaggett@7377 651 <tr>
jdaggett@7377 652 <td>Animatable:
jdaggett@7377 653
jdaggett@7377 654 <td>no
jdaggett@484 655 </table>
jdaggett@484 656
jdaggett@514 657 <p>This property specifies a prioritized list of font family names or
jdaggett@6694 658 generic family names. A font family defines a set of faces that vary in
jdaggett@6694 659 weight, width or slope. CSS uses the combination of a family name with
jdaggett@6694 660 other style attributes to select an individual face. Using this selection
jdaggett@6694 661 mechanism, rather than selecting a face via the style name as is often
jdaggett@6694 662 done in design applications, allows some degree of regularity in textual
jdaggett@6694 663 display when fallback occurs.
jdaggett@6694 664
jdaggett@6694 665 <p class=note>Designers should note that the CSS definition of font
jdaggett@6694 666 attributes used for selection are explicitly not intended to define a font
jdaggett@6694 667 taxonomy. A type designer's idea of a family may often extend to a set of
jdaggett@6694 668 faces that vary along axes other than just the standard axes of weight,
jdaggett@6694 669 width and slope. A family may extend to include both a set of serif faces
jdaggett@6694 670 and a set of sans-serif faces or vary along axes that are unique to that
jdaggett@6694 671 family. The CSS font selection mechanism merely provides a way to
jdaggett@6694 672 determine the “closest” substitute when substitution is necessary.
jdaggett@6694 673
jdaggett@6694 674 <p>Unlike other CSS properties, component values are a comma-separated list
jdaggett@6694 675 indicating alternatives. A user agent iterates through the list of family
jdaggett@6694 676 names until it matches an available font that contains a glyph for the
jdaggett@6694 677 character to be rendered. This allows for differences in available fonts
jdaggett@6694 678 across platforms and for differences in the range of characters supported
jdaggett@6694 679 by individual fonts.
jdaggett@514 680
jdaggett@514 681 <p>A font family name only specifies a name given to a set of font faces,
jdaggett@8177 682 it does not specify an individual face. For example, given the
jdaggett@8177 683 availability of the fonts below, Futura would match but Futura Medium
jdaggett@8177 684 would not:
jdaggett@514 685
jdaggett@1150 686 <div class=figure><img alt="family and face names"
jdaggett@1150 687 src=familyvsfacename.png>
jdaggett@890 688 <p class=caption>Family and individual face names
jdaggett@514 689 </div>
jdaggett@514 690
jdaggett@514 691 <p>Consider the example below:
jdaggett@512 692
jdaggett@512 693 <div class=example>
jdaggett@8277 694 <pre>body {
jdaggett@8277 695 font-family: Helvetica, Verdana, sans-serif;
jdaggett@514 696 }</pre>
jdaggett@1758 697
jdaggett@1758 698 <p>If Helvetica is available it will be used when rendering. If neither
jdaggett@1758 699 Helvetica nor Verdana is present, then the user-agent-defined sans serif
jdaggett@1758 700 font will be used.</p>
jdaggett@512 701 </div>
jdaggett@512 702
jdaggett@514 703 <p>There are two types of font family names:
jdaggett@512 704
jdaggett@512 705 <dl>
jdaggett@8225 706 <dt><dfn id=family-name-value><var>&lt;family-name&gt;</var></dfn>
jdaggett@514 707
jdaggett@514 708 <dd>The name of a font family of choice such as Helvetica or Verdana in
jdaggett@2457 709 the previous example.
jdaggett@514 710
jdaggett@8225 711 <dt><dfn id=generic-family-value><var>&lt;generic-family&gt;</var></dfn>
jdaggett@514 712
jdaggett@4624 713 <dd> The following generic family keywords are defined: ‘<a
jdaggett@4624 714 href="#serif"><code class=property>serif</code></a>’, ‘<a
jdaggett@4624 715 href="#sans-serif"><code class=property>sans-serif</code></a>’, ‘<a
jdaggett@4624 716 href="#cursive"><code class=property>cursive</code></a>’, ‘<a
jdaggett@4624 717 href="#fantasy"><code class=property>fantasy</code></a>’, and ‘<a
jdaggett@4624 718 href="#monospace"><code class=property>monospace</code></a>’. These
jdaggett@1148 719 keywords can be used as a general fallback mechanism when an author's
jdaggett@1758 720 desired font choices are not available. As keywords, they must not be
jdaggett@1148 721 quoted. Authors are encouraged to append a generic font family as a last
jdaggett@1148 722 alternative for improved robustness.
jdaggett@512 723 </dl>
jdaggett@512 724
jdaggett@8272 725 <p>Font family names other than generic families must either be given
jdaggett@8272 726 quoted as <a
jdaggett@2457 727 href="//www.w3.org/TR/CSS21/syndata.html#strings">strings,</a> or unquoted
jdaggett@2457 728 as a sequence of one or more <a
jdaggett@2457 729 href="//www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers.</a>
jdaggett@2457 730 This means most punctuation characters and digits at the start of each
jdaggett@2457 731 token must be escaped in unquoted font family names.
jdaggett@2457 732
jdaggett@7377 733 <p>To illustrate this, the following declarations are invalid:
jdaggett@2457 734
jdaggett@2457 735 <pre>
jdaggett@2457 736 font-family: Red/Black, sans-serif;
jdaggett@2457 737 font-family: "Lucida" Grande, sans-serif;
jdaggett@2457 738 font-family: Ahem!, sans-serif;
jdaggett@2457 739 font-family: test@foo, sans-serif;
jdaggett@2457 740 font-family: #POUND, sans-serif;
jdaggett@2457 741 font-family: Hawaii 5-0, sans-serif;
jdaggett@2457 742 </pre>
jdaggett@2457 743
jdaggett@2457 744 <p>If a sequence of identifiers is given as a font family name, the
jdaggett@2457 745 computed value is the name converted to a string by joining all the
jdaggett@2457 746 identifiers in the sequence by single spaces.
jdaggett@2457 747
jdaggett@2457 748 <p>To avoid mistakes in escaping, it is recommended to quote font family
jdaggett@2457 749 names that contain white space, digits, or punctuation characters other
jdaggett@2457 750 than hyphens:
jdaggett@2457 751
jdaggett@2457 752 <pre>
jdaggett@2457 753 body { font-family: "New Century Schoolbook", serif }
jdaggett@2457 754
jdaggett@2457 755 &lt;BODY STYLE="font-family: '21st Century', fantasy">
jdaggett@2457 756 </pre>
jdaggett@2457 757
jdaggett@2457 758 <p>Font family <em>names</em> that happen to be the same as a keyword value
jdaggett@4624 759 (‘<code class=property>inherit</code>’, ‘<a href="#serif"><code
jdaggett@4624 760 class=property>serif</code></a>’, ‘<a href="#sans-serif"><code
jdaggett@4624 761 class=property>sans-serif</code></a>’, ‘<a href="#monospace"><code
jdaggett@4624 762 class=property>monospace</code></a>’, ‘<a href="#fantasy"><code
jdaggett@4624 763 class=property>fantasy</code></a>’, and ‘<a href="#cursive"><code
jdaggett@4624 764 class=property>cursive</code></a>’) must be quoted to prevent confusion
jdaggett@2457 765 with the keywords with the same names. The keywords ‘<code
jdaggett@2457 766 class=property>initial</code>’ and ‘<code
jdaggett@2457 767 class=property>default</code>’ are reserved for future use and must also
jdaggett@2457 768 be quoted when used as font names. UAs must not consider these keywords as
jdaggett@8225 769 matching the <a
jdaggett@8225 770 href="#family-name-value"><var>&lt;family-name&gt;</var></a> type.
jdaggett@2457 771
jdaggett@6694 772 <p>The precise way a set of fonts are grouped into font families varies
jdaggett@6694 773 depending upon the platform font management API's. The Windows GDI API
jdaggett@6694 774 only allows four faces to be grouped into a family while the DirectWrite
jdaggett@6694 775 API and API's on OSX and other platforms support font families with a
jdaggett@6695 776 variety of weights, widths and slopes (see <a
jdaggett@6694 777 href="#platform-props-to-css">Appendix A</a> for more details).
jdaggett@6694 778
jdaggett@2457 779 <p>Some font formats allow fonts to carry multiple localizations of the
jdaggett@2457 780 family name. User agents must recognize and correctly match all of these
jdaggett@2457 781 names independent of the underlying platform localization, system API used
jdaggett@2457 782 or document encoding:
jdaggett@2457 783
jdaggett@2457 784 <div class=figure><img alt="examples of localized family names"
jdaggett@2457 785 src=localizedfamilynames.png>
jdaggett@2457 786 <p class=caption>Localized family names
jdaggett@2457 787 </div>
jdaggett@2457 788
jdaggett@1244 789 <h4 id=generic-font-families><span class=secno>3.1.1 </span>Generic font
jdaggett@1244 790 families</h4>
jdaggett@514 791
jdaggett@518 792 <p>All five generic font families are defined to exist in all CSS
jdaggett@518 793 implementations (they need not necessarily map to five distinct actual
jdaggett@518 794 fonts). User agents should provide reasonable default choices for the
jdaggett@518 795 generic font families, which express the characteristics of each family as
jdaggett@518 796 well as possible within the limits allowed by the underlying technology.
jdaggett@518 797 User agents are encouraged to allow users to select alternative choices
jdaggett@514 798 for the generic fonts.
jdaggett@514 799
jdaggett@890 800 <h5 class="no-num no-toc"> <span class=index-def id=serif0 title="serif,
jdaggett@890 801 definition of"><a name=serif-def><dfn id=serif>serif</dfn></a></span></h5>
jdaggett@514 802
jdaggett@8178 803 <p>Serif fonts represent the formal text style for a script. This often
jdaggett@8178 804 means but is not limited to glyphs that have finishing strokes, flared or
jdaggett@8178 805 tapering ends, or have actual serifed endings (including slab serifs).
jdaggett@8178 806 Serif fonts are typically proportionately-spaced. They often display a
jdaggett@8178 807 greater variation between thick and thin strokes than fonts from the ‘<a
jdaggett@8178 808 href="#sans-serif"><code class=property>sans-serif</code></a>’ generic
jdaggett@8178 809 font family. CSS uses the term ‘<a href="#serif"><code
jdaggett@8178 810 class=property>serif</code></a>’ to apply to a font for any script,
jdaggett@8178 811 although other names may be more familiar for particular scripts, such as
jdaggett@8178 812 Mincho (Japanese), Sung, Song or Kai (Chinese), Batang (Korean). For
jdaggett@8178 813 Arabic, the Naskh style would correspond to ‘<a href="#serif"><code
jdaggett@8178 814 class=property>serif</code></a>’ more due to its typographic role rather
jdaggett@8178 815 than its actual design style. Any font that is so described may be used to
jdaggett@4624 816 represent the generic ‘<a href="#serif"><code
jdaggett@4624 817 class=property>serif</code></a>’ family.
jdaggett@514 818
jdaggett@1150 819 <div class=figure><img alt="sample serif fonts" src=serifexamples.png>
jdaggett@890 820 <p class=caption>Sample serif fonts
jdaggett@514 821 </div>
jdaggett@514 822
jdaggett@890 823 <h5 class="no-num no-toc"> <span class=index-def id=sans-serif0
jdaggett@890 824 title="sans-serif, definition of"> <a name=sans-serif-def><dfn
jdaggett@890 825 id=sans-serif>sans-serif</dfn></a></span></h5>
jdaggett@514 826
jdaggett@8178 827 <p>Glyphs in sans-serif fonts, as the term is used in CSS, are generally
jdaggett@8178 828 low contrast (vertical and horizontal stems have the close to the same
jdaggett@8178 829 thickness) and have stroke endings that are plain -- without any flaring,
jdaggett@8178 830 cross stroke, or other ornamentation. Sans-serif fonts are typically
jdaggett@8178 831 proportionately-spaced. They often have little variation between thick and
jdaggett@8178 832 thin strokes, compared to fonts from the ‘<a href="#serif"><code
jdaggett@4624 833 class=property>serif</code></a>’ family. CSS uses the term ‘<a
jdaggett@4624 834 href="#sans-serif"><code class=property>sans-serif</code></a>’ to apply
jdaggett@4624 835 to a font for any script, although other names may be more familiar for
jdaggett@3041 836 particular scripts, such as Gothic (Japanese), Hei (Chinese), or Gulim
jdaggett@1148 837 (Korean). Any font that is so described may be used to represent the
jdaggett@4624 838 generic ‘<a href="#sans-serif"><code
jdaggett@4624 839 class=property>sans-serif</code></a>’ family.
jdaggett@518 840
jdaggett@1150 841 <div class=figure><img alt="sample sans-serif fonts"
jdaggett@1150 842 src=sansserifexamples.png>
jdaggett@890 843 <p class=caption>Sample sans-serif fonts
jdaggett@514 844 </div>
jdaggett@514 845
jdaggett@890 846 <h5 class="no-num no-toc"> <span class=index-def id=cursive0
jdaggett@545 847 title="cursive, definition of"> <a name=cursive-def><dfn
jdaggett@890 848 id=cursive>cursive</dfn></a></span></h5>
jdaggett@545 849
jdaggett@8178 850 <p>Glyphs in cursive fonts generally use a more informal script style, and
jdaggett@8178 851 the result looks more like handwritten pen or brush writing than printed
jdaggett@8178 852 letterwork. CSS uses the term ‘<a href="#cursive"><code
jdaggett@8178 853 class=property>cursive</code></a>’ to apply to a font for any script,
jdaggett@8178 854 although other names such as Chancery, Brush, Swing and Script are also
jdaggett@8178 855 used in font names.
jdaggett@514 856
jdaggett@1150 857 <div class=figure><img alt="sample cursive fonts" src=cursiveexamples.png>
jdaggett@890 858 <p class=caption>Sample cursive fonts
jdaggett@514 859 </div>
jdaggett@514 860
jdaggett@890 861 <h5 class="no-num no-toc"> <span class=index-def id=fantasy0
jdaggett@545 862 title="fantasy, definition of"> <a name=fantasy-def><dfn
jdaggett@890 863 id=fantasy>fantasy</dfn></a></span></h5>
jdaggett@514 864
jdaggett@8178 865 <p>Fantasy fonts are primarily decorative or expressive fonts that contain
jdaggett@8178 866 playful representations of characters. These do not include Pi or Picture
jdaggett@8178 867 fonts which do not represent actual characters.
jdaggett@514 868
jdaggett@1150 869 <div class=figure><img alt="sample fantasy fonts" src=fantasyexamples.png>
jdaggett@890 870 <p class=caption>Sample fantasy fonts
jdaggett@514 871 </div>
jdaggett@514 872
jdaggett@890 873 <h5 class="no-num no-toc"> <span class=index-def id=monospace0
jdaggett@545 874 title="monospace, definition of"> <a name=monospace-def><dfn
jdaggett@890 875 id=monospace>monospace</dfn></a></span></h5>
jdaggett@514 876
jdaggett@514 877 <p>The sole criterion of a monospace font is that all glyphs have the same
jdaggett@518 878 fixed width. This is often used to render samples of computer code.
jdaggett@514 879
jdaggett@1150 880 <div class=figure><img alt="sample monospace fonts"
jdaggett@1150 881 src=monospaceexamples.png>
jdaggett@890 882 <p class=caption>Sample monospace fonts
jdaggett@514 883 </div>
jdaggett@512 884 <!-- prop: font-weight -->
jdaggett@512 885
jdaggett@1662 886 <h3 id=font-weight-prop><span class=secno>3.2 </span>Font weight: the <a
jdaggett@1662 887 href="#propdef-font-weight">font-weight</a> property</h3>
jdaggett@1662 888
jdaggett@4624 889 <table class=propdef id=namefont-weightvaluenormal-bold-bolder-l>
jdaggett@484 890 <tbody>
jdaggett@484 891 <tr>
jdaggett@484 892 <td>Name:
jdaggett@484 893
jdaggett@8278 894 <td><dfn id=propdef-font-weight
jdaggett@8278 895 title="font-weight!!property">font-weight</dfn>
jdaggett@484 896
jdaggett@484 897 <tr>
jdaggett@484 898 <td>Value:
jdaggett@484 899
jdaggett@8278 900 <td><a href="#font-weight-normal-value"
jdaggett@8278 901 title="normal!!font-weight">normal</a> | <a href="#bold">bold</a> | <a
jdaggett@8278 902 href="#bolder">bolder</a> | <a href="#lighter">lighter</a> | <a
jdaggett@8278 903 href="#font-weight-numeric-values" title="100...900 weight
jdaggett@8278 904 values">100</a> | <a href="#font-weight-numeric-values"
jdaggett@8278 905 title="100...900 weight values">200</a> | <a
jdaggett@8278 906 href="#font-weight-numeric-values" title="100...900 weight
jdaggett@8278 907 values">300</a> | <a href="#font-weight-numeric-values"
jdaggett@8278 908 title="100...900 weight values">400</a> | <a
jdaggett@8278 909 href="#font-weight-numeric-values" title="100...900 weight
jdaggett@8278 910 values">500</a> | <a href="#font-weight-numeric-values"
jdaggett@8278 911 title="100...900 weight values">600</a> | <a
jdaggett@8278 912 href="#font-weight-numeric-values" title="100...900 weight
jdaggett@8278 913 values">700</a> | <a href="#font-weight-numeric-values"
jdaggett@8278 914 title="100...900 weight values">800</a> | <a
jdaggett@8278 915 href="#font-weight-numeric-values" title="100...900 weight
jdaggett@8278 916 values">900</a>
jdaggett@484 917
jdaggett@484 918 <tr>
jdaggett@484 919 <td>Initial:
jdaggett@484 920
jdaggett@484 921 <td>normal
jdaggett@484 922
jdaggett@484 923 <tr>
jdaggett@484 924 <td>Applies to:
jdaggett@484 925
jdaggett@484 926 <td>all elements
jdaggett@484 927
jdaggett@484 928 <tr>
jdaggett@484 929 <td>Inherited:
jdaggett@484 930
jdaggett@484 931 <td>yes
jdaggett@484 932
jdaggett@484 933 <tr>
jdaggett@484 934 <td>Percentages:
jdaggett@484 935
jdaggett@484 936 <td>N/A
jdaggett@484 937
jdaggett@484 938 <tr>
jdaggett@484 939 <td>Media:
jdaggett@484 940
jdaggett@484 941 <td>visual
jdaggett@484 942
jdaggett@484 943 <tr>
jdaggett@1148 944 <td>Computed value:
jdaggett@484 945
jdaggett@8177 946 <td>numeric weight value (see description)
jdaggett@7377 947
jdaggett@7377 948 <tr>
jdaggett@7377 949 <td>Animatable:
jdaggett@7377 950
jdaggett@7377 951 <td>as <a
jdaggett@7377 952 href="http://dev.w3.org/csswg/css3-transitions/#animtype-font-weight">font
jdaggett@7377 953 weight</a>
jdaggett@484 954 </table>
jdaggett@484 955
jdaggett@8278 956 <p>The <a href="#propdef-font-weight"
jdaggett@8278 957 title="font-weight!!property">‘<code
jdaggett@8278 958 class=property>font-weight</code>’</a> property specifies the weight of
jdaggett@8278 959 glyphs in the font, their degree of blackness or stroke thickness.
jdaggett@531 960
jdaggett@531 961 <p>Values have the following meanings:
jdaggett@512 962
jdaggett@512 963 <dl>
jdaggett@8278 964 <dt><dfn id=font-weight-numeric-values title="100...900 weight values">100
jdaggett@8278 965 to 900</dfn>
jdaggett@512 966
jdaggett@512 967 <dd>These values form an ordered sequence, where each number indicates a
jdaggett@514 968 weight that is at least as dark as its predecessor. These roughly
jdaggett@514 969 correspond to the commonly used weight names below:
jdaggett@512 970 </dl>
jdaggett@512 971
jdaggett@512 972 <ul>
jdaggett@512 973 <li>100 - Thin
jdaggett@512 974
jdaggett@518 975 <li>200 - Extra Light (Ultra Light)
jdaggett@512 976
jdaggett@512 977 <li>300 - Light
jdaggett@512 978
jdaggett@512 979 <li>400 - Normal
jdaggett@512 980
jdaggett@512 981 <li>500 - Medium
jdaggett@512 982
jdaggett@518 983 <li>600 - Semi Bold (Demi Bold)
jdaggett@512 984
jdaggett@512 985 <li>700 - Bold
jdaggett@512 986
jdaggett@518 987 <li>800 - Extra Bold (Ultra Bold)
jdaggett@512 988
jdaggett@512 989 <li>900 - Black (Heavy)
jdaggett@512 990 </ul>
jdaggett@512 991
jdaggett@512 992 <dl>
jdaggett@8278 993 <dt><dfn id=font-weight-normal-value
jdaggett@8278 994 title="normal!!font-weight">normal</dfn>
jdaggett@512 995
jdaggett@1148 996 <dd>Same as ‘<code class=css>400</code>’.
jdaggett@512 997
jdaggett@8278 998 <dt><dfn id=bold>bold</dfn>
jdaggett@512 999
jdaggett@1148 1000 <dd>Same as ‘<code class=css>700</code>’.
jdaggett@512 1001
jdaggett@8278 1002 <dt><dfn id=bolder>bolder</dfn>
jdaggett@512 1003
jdaggett@8177 1004 <dd>Specifies a bolder weight than the inherited value.
jdaggett@512 1005
jdaggett@8278 1006 <dt><dfn id=lighter>lighter</dfn>
jdaggett@512 1007
jdaggett@8177 1008 <dd>Specifies a lighter weight than the inherited value.
jdaggett@512 1009 </dl>
jdaggett@512 1010
jdaggett@8177 1011 <p>Font formats that use a scale other than a nine-step scale should map
jdaggett@531 1012 their scale onto the CSS scale so that 400 roughly corresponds with a face
jdaggett@531 1013 that would be labeled as Regular, Book, Roman and 700 roughly matches a
jdaggett@531 1014 face that would be labeled as Bold. Or weights may be inferred from the
jdaggett@531 1015 style names, ones that correspond roughly with the scale above. The scale
jdaggett@1662 1016 is relative, so a face with a larger weight value must never appear
jdaggett@1148 1017 lighter. If style names are used to infer weights, care should be taken to
jdaggett@1148 1018 handle variations in style names across locales.
jdaggett@531 1019
jdaggett@531 1020 <p>Quite often there are only a few weights available for a particular font
jdaggett@534 1021 family. When a weight is specified for which no face exists, a face with a
jdaggett@534 1022 nearby weight is used. In general, bold weights map to faces with heavier
jdaggett@1269 1023 weights and light weights map to faces with lighter weights (see the <a
jdaggett@1269 1024 href="#font-matching-algorithm">font matching section below</a> for a
jdaggett@1269 1025 precise definition). The examples here illustrate which face is used for
jdaggett@1269 1026 different weights, grey indicates a face for that weight does not exist so
jdaggett@1269 1027 a face with a nearby weight is used:
jdaggett@532 1028
jdaggett@1150 1029 <div class=figure><img alt="weight mappings for a family with 400, 700 and
jdaggett@1150 1030 900 weights" src=optimaweights.png>
jdaggett@532 1031 <p class=caption>Weight mappings for a font family with 400, 700 and 900
jdaggett@890 1032 weight faces
jdaggett@518 1033 </div>
jdaggett@518 1034
jdaggett@1150 1035 <div class=figure><img alt="weight mappings for a family with 300, 600
jdaggett@1150 1036 weights" src=hiraginoweights.png>
jdaggett@532 1037 <p class=caption>Weight mappings for a font family with 300 and 600 weight
jdaggett@890 1038 faces
jdaggett@531 1039 </div>
jdaggett@518 1040
jdaggett@2487 1041 <p>Although the practice is not well-loved by typographers, bold faces are
jdaggett@2487 1042 often synthesized by user agents for faces that lack actual bold faces.
jdaggett@2487 1043 For the purposes of style matching, these faces must be treated as if they
jdaggett@8177 1044 exist within the family. Authors can explicitly avoid this behavior by
jdaggett@8177 1045 using the ‘<a href="#propdef-font-synthesis"><code
jdaggett@8177 1046 class=property>font-synthesis</code></a>’ property.
jdaggett@8177 1047
jdaggett@8278 1048 <p>Specified values of ‘<a href="#bolder"><code
jdaggett@8278 1049 class=property>bolder</code></a>’ and ‘<a href="#lighter"><code
jdaggett@8278 1050 class=property>lighter</code></a>’ indicate weights relative to the
jdaggett@8177 1051 weight of the parent element. The computed weight is calculated based on
jdaggett@8278 1052 the inherited <a href="#propdef-font-weight"
jdaggett@8278 1053 title="font-weight!!property">‘<code
jdaggett@8278 1054 class=property>font-weight</code>’</a> value using the chart below.
jdaggett@1148 1055
jdaggett@6651 1056 <table class=data id=bolderlighter summary="Bolder/lighter mappings">
jdaggett@1148 1057 <thead>
jdaggett@1148 1058 <tr>
jdaggett@6651 1059 <th>Inherited value
jdaggett@6651 1060
jdaggett@6651 1061 <th>bolder
jdaggett@6651 1062
jdaggett@6651 1063 <th>lighter
jdaggett@1148 1064
jdaggett@1148 1065 <tbody>
jdaggett@1148 1066 <tr>
jdaggett@1244 1067 <th>100
jdaggett@1148 1068
jdaggett@1148 1069 <td>400
jdaggett@1148 1070
jdaggett@1148 1071 <td>100
jdaggett@1148 1072
jdaggett@1148 1073 <tr>
jdaggett@1244 1074 <th>200
jdaggett@1148 1075
jdaggett@1148 1076 <td>400
jdaggett@1148 1077
jdaggett@1148 1078 <td>100
jdaggett@1148 1079
jdaggett@1148 1080 <tr>
jdaggett@1244 1081 <th>300
jdaggett@1148 1082
jdaggett@1148 1083 <td>400
jdaggett@1148 1084
jdaggett@1148 1085 <td>100
jdaggett@1148 1086
jdaggett@1148 1087 <tr>
jdaggett@1244 1088 <th>400
jdaggett@1148 1089
jdaggett@1148 1090 <td>700
jdaggett@1148 1091
jdaggett@1148 1092 <td>100
jdaggett@1148 1093
jdaggett@1148 1094 <tr>
jdaggett@1244 1095 <th>500
jdaggett@1148 1096
jdaggett@1148 1097 <td>700
jdaggett@1148 1098
jdaggett@1148 1099 <td>100
jdaggett@1148 1100
jdaggett@1148 1101 <tr>
jdaggett@1244 1102 <th>600
jdaggett@1148 1103
jdaggett@1148 1104 <td>900
jdaggett@1148 1105
jdaggett@1148 1106 <td>400
jdaggett@1148 1107
jdaggett@1148 1108 <tr>
jdaggett@1244 1109 <th>700
jdaggett@1148 1110
jdaggett@1148 1111 <td>900
jdaggett@1148 1112
jdaggett@1148 1113 <td>400
jdaggett@1148 1114
jdaggett@1148 1115 <tr>
jdaggett@1244 1116 <th>800
jdaggett@1148 1117
jdaggett@1148 1118 <td>900
jdaggett@1148 1119
jdaggett@1148 1120 <td>700
jdaggett@1148 1121
jdaggett@1148 1122 <tr>
jdaggett@1244 1123 <th>900
jdaggett@1148 1124
jdaggett@1148 1125 <td>900
jdaggett@1148 1126
jdaggett@1148 1127 <td>700
jdaggett@1148 1128 </table>
jdaggett@1148 1129
jdaggett@1148 1130 <p>The table above is equivalent to selecting the next relative bolder or
jdaggett@1148 1131 lighter face, given a font family containing normal and bold faces along
jdaggett@1148 1132 with a thin and a heavy face. Authors who desire finer control over the
jdaggett@8177 1133 exact weight values used for a given element may use numerical values
jdaggett@1148 1134 instead of relative weights.</p>
jdaggett@512 1135 <!-- prop: font-stretch -->
jdaggett@512 1136
jdaggett@1662 1137 <h3 id=font-stretch-prop><span class=secno>3.3 </span>Font width: the <a
jdaggett@1662 1138 href="#propdef-font-stretch">font-stretch</a> property</h3>
jdaggett@1662 1139
jdaggett@8278 1140 <table class=propdef id=namefont-stretchvalue-normal-ultra-conde>
jdaggett@484 1141 <tbody>
jdaggett@484 1142 <tr>
jdaggett@484 1143 <td>Name:
jdaggett@484 1144
jdaggett@8278 1145 <td><dfn id=propdef-font-stretch
jdaggett@8278 1146 title="font-stretch!!property">font-stretch</dfn>
jdaggett@484 1147
jdaggett@484 1148 <tr>
jdaggett@484 1149 <td>Value:
jdaggett@484 1150
jdaggett@8278 1151 <td> <a href="#font-stretch-normal-value"
jdaggett@8278 1152 title="normal!!font-stretch">normal</a> | <a
jdaggett@8278 1153 href="#ultra-condensed">ultra-condensed</a> | <a
jdaggett@8278 1154 href="#extra-condensed">extra-condensed</a> | <a
jdaggett@8278 1155 href="#condensed">condensed</a> | <a
jdaggett@8278 1156 href="#semi-condensed-">semi-condensed</a> | <a
jdaggett@8278 1157 href="#semi-expanded">semi-expanded</a> | <a
jdaggett@8278 1158 href="#expanded">expanded</a> | <a
jdaggett@8278 1159 href="#extra-expanded">extra-expanded</a> | <a
jdaggett@8278 1160 href="#ultra-expanded">ultra-expanded</a>
jdaggett@484 1161
jdaggett@484 1162 <tr>
jdaggett@484 1163 <td>Initial:
jdaggett@484 1164
jdaggett@484 1165 <td>normal
jdaggett@484 1166
jdaggett@484 1167 <tr>
jdaggett@484 1168 <td>Applies to:
jdaggett@484 1169
jdaggett@484 1170 <td>all elements
jdaggett@484 1171
jdaggett@484 1172 <tr>
jdaggett@484 1173 <td>Inherited:
jdaggett@484 1174
jdaggett@484 1175 <td>yes
jdaggett@484 1176
jdaggett@484 1177 <tr>
jdaggett@484 1178 <td>Percentages:
jdaggett@484 1179
jdaggett@484 1180 <td>N/A
jdaggett@484 1181
jdaggett@484 1182 <tr>
jdaggett@484 1183 <td>Media:
jdaggett@484 1184
jdaggett@484 1185 <td>visual
jdaggett@484 1186
jdaggett@484 1187 <tr>
jdaggett@1148 1188 <td>Computed value:
jdaggett@484 1189
jdaggett@484 1190 <td>as specified
jdaggett@7377 1191
jdaggett@7377 1192 <tr>
jdaggett@7377 1193 <td>Animatable:
jdaggett@7377 1194
jdaggett@7377 1195 <td>as <a href="#font-stretch-animation">font stretch</a>
jdaggett@484 1196 </table>
jdaggett@484 1197
jdaggett@8278 1198 <p>The <a href="#propdef-font-stretch"
jdaggett@8278 1199 title="font-stretch!!property">‘<code
jdaggett@8278 1200 class=property>font-stretch</code>’</a> property selects a normal,
jdaggett@8278 1201 condensed, or expanded face from a font family. Absolute keyword values
jdaggett@8278 1202 have the following ordering, from narrowest to widest:
jdaggett@512 1203
jdaggett@512 1204 <ul>
jdaggett@8278 1205 <li><dfn id=ultra-condensed>ultra-condensed</dfn>
jdaggett@8278 1206
jdaggett@8278 1207 <li><dfn id=extra-condensed>extra-condensed</dfn>
jdaggett@8278 1208
jdaggett@8278 1209 <li><dfn id=condensed>condensed</dfn>
jdaggett@8278 1210
jdaggett@8278 1211 <li><dfn id=semi-condensed->semi-condensed </dfn>
jdaggett@8278 1212
jdaggett@8278 1213 <li><dfn id=font-stretch-normal-value
jdaggett@8278 1214 title="normal!!font-stretch">normal</dfn>
jdaggett@8278 1215
jdaggett@8278 1216 <li><dfn id=semi-expanded>semi-expanded</dfn>
jdaggett@8278 1217
jdaggett@8278 1218 <li><dfn id=expanded>expanded</dfn>
jdaggett@8278 1219
jdaggett@8278 1220 <li><dfn id=extra-expanded>extra-expanded</dfn>
jdaggett@8278 1221
jdaggett@8278 1222 <li><dfn id=ultra-expanded>ultra-expanded</dfn>
jdaggett@512 1223 </ul>
jdaggett@512 1224
jdaggett@8197 1225 <p>When a face does not exist for a given width, normal or condensed values
jdaggett@8197 1226 map to a narrower face, otherwise a wider face. Conversely, expanded
jdaggett@8197 1227 values map to a wider face, otherwise a narrower face. The figure below
jdaggett@8197 1228 shows how the nine font-stretch property settings affect font selection
jdaggett@8197 1229 for font family containing a variety of widths, grey indicates a width for
jdaggett@8197 1230 which no face exists and a different width is substituted:
jdaggett@1148 1231
jdaggett@1150 1232 <div class=figure><img alt="width mappings for a family with condensed,
jdaggett@1150 1233 normal and expanded faces" src=universwidths.png>
jdaggett@1148 1234 <p class=caption>Width mappings for a font family with condensed, normal
jdaggett@1148 1235 and expanded width faces
jdaggett@1148 1236 </div>
jdaggett@7377 1237
jdaggett@7377 1238 <p id=font-stretch-animation>Animation of font stretch: Font stretch is
jdaggett@7377 1239 interpolated in discrete steps. The interpolation happens as though the
jdaggett@7377 1240 ordered values are equally spaced real numbers. The interpolation result
jdaggett@7377 1241 is rounded to the nearest value, with values exactly halfway between two
jdaggett@7377 1242 values rounded towards the later value in the list above.</p>
jdaggett@512 1243 <!-- prop: font-style -->
jdaggett@512 1244
jdaggett@1662 1245 <h3 id=font-style-prop><span class=secno>3.4 </span>Font style: the <a
jdaggett@1662 1246 href="#propdef-font-style">font-style</a> property</h3>
jdaggett@1662 1247
jdaggett@4624 1248 <table class=propdef id=namefont-stylevaluenormal-italic-oblique>
jdaggett@484 1249 <tbody>
jdaggett@484 1250 <tr>
jdaggett@484 1251 <td>Name:
jdaggett@484 1252
jdaggett@8278 1253 <td><dfn id=propdef-font-style
jdaggett@8278 1254 title="font-style!!property">font-style</dfn>
jdaggett@484 1255
jdaggett@484 1256 <tr>
jdaggett@484 1257 <td>Value:
jdaggett@484 1258
jdaggett@8278 1259 <td><a href="#font-style-normal-value"
jdaggett@8278 1260 title="normal!!font-style">normal</a> | <a href="#italic">italic</a> |
jdaggett@8278 1261 <a href="#oblique">oblique</a>
jdaggett@484 1262
jdaggett@484 1263 <tr>
jdaggett@484 1264 <td>Initial:
jdaggett@484 1265
jdaggett@484 1266 <td>normal
jdaggett@484 1267
jdaggett@484 1268 <tr>
jdaggett@484 1269 <td>Applies to:
jdaggett@484 1270
jdaggett@484 1271 <td>all elements
jdaggett@484 1272
jdaggett@484 1273 <tr>
jdaggett@484 1274 <td>Inherited:
jdaggett@484 1275
jdaggett@484 1276 <td>yes
jdaggett@484 1277
jdaggett@484 1278 <tr>
jdaggett@484 1279 <td>Percentages:
jdaggett@484 1280
jdaggett@484 1281 <td>N/A
jdaggett@484 1282
jdaggett@484 1283 <tr>
jdaggett@484 1284 <td>Media:
jdaggett@484 1285
jdaggett@484 1286 <td>visual
jdaggett@484 1287
jdaggett@484 1288 <tr>
jdaggett@1148 1289 <td>Computed value:
jdaggett@484 1290
jdaggett@484 1291 <td>as specified
jdaggett@7377 1292
jdaggett@7377 1293 <tr>
jdaggett@7377 1294 <td>Animatable:
jdaggett@7377 1295
jdaggett@7377 1296 <td>no
jdaggett@484 1297 </table>
jdaggett@484 1298
jdaggett@8278 1299 <p>The <a href="#propdef-font-style" title="font-style!!property">‘<code
jdaggett@8278 1300 class=property>font-style</code>’</a> property allows italic or oblique
jdaggett@8278 1301 faces to be selected. Italic forms are generally cursive in nature while
jdaggett@8278 1302 oblique faces are typically sloped versions of the regular face. Oblique
jdaggett@8278 1303 faces can be simulated by artificially sloping the glyphs of the regular
jdaggett@8278 1304 face. Compare the artificially sloped renderings of Palatino ‘<code
jdaggett@2556 1305 class=property>a</code>’ and Baskerville ‘<code
jdaggett@1148 1306 class=property>N</code>’ in grey with the actual italic versions:
jdaggett@518 1307
jdaggett@1150 1308 <div class=figure><img alt="artificial sloping vs. real italics"
jdaggett@1150 1309 src=realvsfakeitalics.png>
jdaggett@890 1310 <p class=caption>Artificial sloping versus real italics
jdaggett@512 1311 </div>
jdaggett@518 1312
jdaggett@8278 1313 <p>Values have the following meanings:
jdaggett@8278 1314
jdaggett@8278 1315 <dl>
jdaggett@8278 1316 <dt><dfn id=font-style-normal-value
jdaggett@8278 1317 title="normal!!font-style">normal</dfn>
jdaggett@8278 1318
jdaggett@8278 1319 <dd>selects a face that is classified as a normal face, one that is
jdaggett@8278 1320 neither italic or obliqued
jdaggett@8278 1321
jdaggett@8278 1322 <dt><dfn id=italic>italic</dfn>
jdaggett@8278 1323
jdaggett@8278 1324 <dd>selects a font that is labeled as an italic face, or an oblique face
jdaggett@8278 1325 if one is not
jdaggett@8278 1326
jdaggett@8278 1327 <dt><dfn id=oblique>oblique</dfn>
jdaggett@8278 1328
jdaggett@8278 1329 <dd>selects a font that is labeled as an oblique face, or an italic face
jdaggett@8278 1330 if one is not
jdaggett@8278 1331 </dl>
jdaggett@8278 1332
jdaggett@8278 1333 <p>If no italic or oblique face is available, oblique faces can be
jdaggett@8363 1334 synthesized by rendering non-obliqued faces with an artificial obliquing
jdaggett@8363 1335 operation. The use of these artificially obliqued faces can be disabled
jdaggett@8363 1336 using the ‘<a href="#propdef-font-synthesis"><code
jdaggett@8363 1337 class=property>font-synthesis</code></a>’ property. The details of the
jdaggett@8363 1338 obliquing operation are not explicitly defined.</p>
jdaggett@8363 1339 <!-- resolution on the "undefined" nature of synthetics: http://www.w3.org/2013/06/06-css-minutes.html#item03 -->
jdaggett@518 1340
jdaggett@518 1341 <p>Many scripts lack the tradition of mixing a cursive form within text
jdaggett@518 1342 rendered with a normal face. Chinese, Japanese and Korean fonts almost
jdaggett@518 1343 always lack italic or oblique faces. Fonts that support a mixture of
jdaggett@518 1344 scripts will sometimes omit specific scripts such as Arabic from the set
jdaggett@518 1345 of glyphs supported in the italic face. User agents should be careful
jdaggett@8225 1346 about making <a href="#character-map"><em>character map</em></a>
jdaggett@8363 1347 assumptions across faces when implementing support for <a
jdaggett@8363 1348 href="#system-font-fallback"><em>system font fallback</em></a>.</p>
jdaggett@1662 1349 <!-- prop: font-size -->
jdaggett@1662 1350
jdaggett@1662 1351 <h3 id=font-size-prop><span class=secno>3.5 </span>Font size: the <a
jdaggett@1662 1352 href="#propdef-font-size">font-size</a> property</h3>
jdaggett@1662 1353
jdaggett@8225 1354 <table class=propdef id=namefont-sizevalueltabsolute-sizegt-ltre>
jdaggett@484 1355 <tbody>
jdaggett@484 1356 <tr>
jdaggett@484 1357 <td>Name:
jdaggett@484 1358
jdaggett@1662 1359 <td><dfn id=propdef-font-size>font-size</dfn>
jdaggett@484 1360
jdaggett@484 1361 <tr>
jdaggett@484 1362 <td>Value:
jdaggett@484 1363
jdaggett@8225 1364 <td><a href="#absolute-size-value"><var>&lt;absolute-size&gt;</var></a>
jdaggett@8225 1365 | <a href="#relative-size-value"><var>&lt;relative-size&gt;</var></a> |
jdaggett@8225 1366 <a href="#length-size-value"><var>&lt;length&gt;</var></a> | <a
jdaggett@8225 1367 href="#percentage-size-value"><var>&lt;percentage&gt;</var></a>
jdaggett@484 1368
jdaggett@484 1369 <tr>
jdaggett@484 1370 <td>Initial:
jdaggett@484 1371
jdaggett@484 1372 <td>medium
jdaggett@484 1373
jdaggett@484 1374 <tr>
jdaggett@484 1375 <td>Applies to:
jdaggett@484 1376
jdaggett@484 1377 <td>all elements
jdaggett@484 1378
jdaggett@484 1379 <tr>
jdaggett@484 1380 <td>Inherited:
jdaggett@484 1381
jdaggett@484 1382 <td>yes
jdaggett@484 1383
jdaggett@484 1384 <tr>
jdaggett@484 1385 <td>Percentages:
jdaggett@484 1386
jdaggett@484 1387 <td>refer to parent element's font size
jdaggett@484 1388
jdaggett@484 1389 <tr>
jdaggett@484 1390 <td>Media:
jdaggett@484 1391
jdaggett@484 1392 <td>visual
jdaggett@484 1393
jdaggett@484 1394 <tr>
jdaggett@1148 1395 <td>Computed value:
jdaggett@484 1396
jdaggett@484 1397 <td>absolute length
jdaggett@7377 1398
jdaggett@7377 1399 <tr>
jdaggett@7377 1400 <td>Animatable:
jdaggett@7377 1401
jdaggett@7377 1402 <td>as <a
jdaggett@7377 1403 href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a>
jdaggett@484 1404 </table>
jdaggett@484 1405
jdaggett@512 1406 <p>This property indicates the desired height of glyphs from the font. For
jdaggett@512 1407 scalable fonts, the font-size is a scale factor applied to the EM unit of
jdaggett@512 1408 the font. (Note that certain glyphs may bleed outside their EM box.) For
jdaggett@512 1409 non-scalable fonts, the font-size is converted into absolute units and
jdaggett@512 1410 matched against the declared font-size of the font, using the same
jdaggett@512 1411 absolute coordinate space for both of the matched values. Values have the
jdaggett@512 1412 following meanings:
jdaggett@512 1413
jdaggett@512 1414 <dl>
jdaggett@8225 1415 <dt><dfn id=absolute-size-value><var>&lt;absolute-size&gt;</var></dfn>
jdaggett@8225 1416
jdaggett@8225 1417 <dd> An <a
jdaggett@8225 1418 href="#absolute-size-value"><var>&lt;absolute-size&gt;</var></a> keyword
jdaggett@8225 1419 refers to an entry in a table of font sizes computed and kept by the user
jdaggett@8225 1420 agent. Possible values are:
jdaggett@512 1421 <p> [ xx-small | x-small | small | medium | large | x-large | xx-large ]</p>
jdaggett@512 1422
jdaggett@8225 1423 <dt><dfn id=relative-size-value><var>&lt;relative-size&gt;</var></dfn>
jdaggett@8225 1424
jdaggett@8225 1425 <dd> A <a href="#relative-size-value"><var>&lt;relative-size&gt;</var></a>
jdaggett@8225 1426 keyword is interpreted relative to the table of font sizes and the
jdaggett@8225 1427 computed ‘<a href="#propdef-font-size"><code
jdaggett@8225 1428 class=property>font-size</code></a>’ of the parent element. Possible
jdaggett@8225 1429 values are:
jdaggett@890 1430 <p> [ larger | smaller ]
jdaggett@890 1431
jdaggett@1148 1432 <p> For example, if the parent element has a font size of ‘<code
jdaggett@1148 1433 class=property>medium</code>’, a value of ‘<code
jdaggett@1148 1434 class=property>larger</code>’ will make the font size of the current
jdaggett@1148 1435 element be ‘<code class=property>large</code>’. If the parent
jdaggett@1148 1436 element's size is not close to a table entry, the user agent is free to
jdaggett@1148 1437 interpolate between table entries or round off to the closest one. The
jdaggett@1148 1438 user agent may have to extrapolate table values if the numerical value
jdaggett@1148 1439 goes beyond the keywords.
jdaggett@512 1440
jdaggett@8225 1441 <dt><dfn id=length-size-value><var>&lt;length&gt;</var></dfn>
jdaggett@512 1442
jdaggett@8187 1443 <dd>A length value specifies an absolute font size (independent of the
jdaggett@8187 1444 user agent's font table). Negative lengths are illegal.
jdaggett@512 1445
jdaggett@8225 1446 <dt><dfn id=percentage-size-value><var>&lt;percentage&gt;</var></dfn>
jdaggett@512 1447
jdaggett@512 1448 <dd>A percentage value specifies an absolute font size relative to the
jdaggett@512 1449 parent element's font size. Use of percentage values, or values in
jdaggett@1148 1450 ‘<code class=property>em</code>’s, leads to more robust and
jdaggett@512 1451 cascadable style sheets.
jdaggett@512 1452 </dl>
jdaggett@512 1453
jdaggett@8187 1454 <p>The following table provides user agent guidelines for the absolute-size
jdaggett@8187 1455 scaling factor and their mapping to HTML heading and absolute font-sizes.
jdaggett@8187 1456 The ‘<code class=property>medium</code>’ value is used as the
jdaggett@8187 1457 reference middle value. The user agent may fine-tune these values for
jdaggett@8187 1458 different fonts or different types of display devices.
jdaggett@1244 1459
jdaggett@1244 1460 <table class=data>
jdaggett@1152 1461 <thead>
jdaggett@1152 1462 <tr>
jdaggett@1152 1463 <th>CSS absolute-size values
jdaggett@1152 1464
jdaggett@1152 1465 <th>xx-small
jdaggett@1152 1466
jdaggett@1152 1467 <th>x-small
jdaggett@1152 1468
jdaggett@1152 1469 <th>small
jdaggett@1152 1470
jdaggett@1152 1471 <th>medium
jdaggett@1152 1472
jdaggett@1152 1473 <th>large
jdaggett@1152 1474
jdaggett@1152 1475 <th>x-large
jdaggett@1152 1476
jdaggett@1152 1477 <th>xx-large
jdaggett@1152 1478
jdaggett@1152 1479 <th> 
jdaggett@1152 1480
jdaggett@512 1481 <tbody>
jdaggett@512 1482 <tr>
jdaggett@1152 1483 <th>scaling factor
jdaggett@1152 1484
jdaggett@1152 1485 <td>3/5
jdaggett@1152 1486
jdaggett@1152 1487 <td>3/4
jdaggett@1152 1488
jdaggett@1152 1489 <td>8/9
jdaggett@1152 1490
jdaggett@1152 1491 <td>1
jdaggett@1152 1492
jdaggett@1152 1493 <td>6/5
jdaggett@1152 1494
jdaggett@1152 1495 <td>3/2
jdaggett@1152 1496
jdaggett@1152 1497 <td>2/1
jdaggett@1152 1498
jdaggett@1152 1499 <td>3/1
jdaggett@512 1500
jdaggett@512 1501 <tr>
jdaggett@8187 1502 <th>HTML headings
jdaggett@1152 1503
jdaggett@1152 1504 <td>h6
jdaggett@1152 1505
jdaggett@1152 1506 <td> 
jdaggett@1152 1507
jdaggett@1152 1508 <td>h5
jdaggett@1152 1509
jdaggett@1152 1510 <td>h4
jdaggett@1152 1511
jdaggett@1152 1512 <td>h3
jdaggett@1152 1513
jdaggett@1152 1514 <td>h2
jdaggett@1152 1515
jdaggett@1152 1516 <td>h1
jdaggett@1152 1517
jdaggett@1152 1518 <td> 
jdaggett@512 1519
jdaggett@512 1520 <tr>
jdaggett@8187 1521 <th>HTML font sizes
jdaggett@1152 1522
jdaggett@1152 1523 <td>1
jdaggett@1152 1524
jdaggett@1152 1525 <td> 
jdaggett@1152 1526
jdaggett@1152 1527 <td>2
jdaggett@1152 1528
jdaggett@1152 1529 <td>3
jdaggett@1152 1530
jdaggett@1152 1531 <td>4
jdaggett@1152 1532
jdaggett@1152 1533 <td>5
jdaggett@1152 1534
jdaggett@1152 1535 <td>6
jdaggett@1152 1536
jdaggett@1152 1537 <td>7
jdaggett@512 1538 </table>
jdaggett@512 1539
jdaggett@512 1540 <p class=note><em><strong>Note 1.</strong> To preserve readability, an UA
jdaggett@512 1541 applying these guidelines should nevertheless avoid creating font-size
jdaggett@8272 1542 resulting in less than 9 device pixels per EM unit on a computer
jdaggett@8272 1543 display.</em>
jdaggett@512 1544
jdaggett@512 1545 <p class=note><em><strong>Note 2.</strong> In CSS1, the suggested scaling
jdaggett@512 1546 factor between adjacent indexes was 1.5 which user experience proved to be
jdaggett@512 1547 too large. In CSS2, the suggested scaling factor for computer screen
jdaggett@512 1548 between adjacent indexes was 1.2 which still created issues for the small
jdaggett@512 1549 sizes. The new scaling factor varies between each index to provide a
jdaggett@512 1550 better readability.</em>
jdaggett@512 1551
jdaggett@6659 1552 <p>The actual value of this property may differ from the computed value due
jdaggett@6659 1553 a numerical value on ‘<a href="#propdef-font-size-adjust"><code
jdaggett@4624 1554 class=property>font-size-adjust</code></a>’ and the unavailability of
jdaggett@4624 1555 certain font sizes.
jdaggett@512 1556
jdaggett@512 1557 <p>Child elements inherit the computed <a class=noxref
jdaggett@6659 1558 href="#font-size-prop"> <span class=property>‘<code
jdaggett@1148 1559 class=property>font-size</code>’</span></a> value (otherwise, the effect
jdaggett@2556 1560 of <a class=noxref href="#font-size-adjust-prop"><span
jdaggett@2556 1561 class=property>‘<code
jdaggett@1148 1562 class=property>font-size-adjust</code>’</span></a> would compound).
jdaggett@512 1563
jdaggett@512 1564 <div class=example>
jdaggett@4624 1565 <p style="display:none">Example(s):
jdaggett@890 1566
jdaggett@890 1567 <p>
jdaggett@512 1568
jdaggett@512 1569 <pre>p { font-size: 12pt; }
jdaggett@512 1570 blockquote { font-size: larger }
jdaggett@512 1571 em { font-size: 150% }
jdaggett@512 1572 em { font-size: 1.5em }
jdaggett@512 1573 </pre>
jdaggett@512 1574 </div>
jdaggett@512 1575 <!-- prop: font-size-adjust -->
jdaggett@512 1576
jdaggett@1662 1577 <h3 id=font-size-adjust-prop><span class=secno>3.6 </span>Relative sizing:
jdaggett@1662 1578 the <a href="#propdef-font-size-adjust">font-size-adjust</a> property</h3>
jdaggett@1662 1579
jdaggett@6659 1580 <table class=propdef id=namefont-size-adjustvaluenone-auto-ltnum>
jdaggett@484 1581 <tbody>
jdaggett@484 1582 <tr>
jdaggett@484 1583 <td>Name:
jdaggett@484 1584
jdaggett@1662 1585 <td><dfn id=propdef-font-size-adjust>font-size-adjust</dfn>
jdaggett@484 1586
jdaggett@484 1587 <tr>
jdaggett@484 1588 <td>Value:
jdaggett@484 1589
jdaggett@8278 1590 <td><a href="#font-size-adjust-none-value"
jdaggett@8278 1591 title="none!!font-size-adjust">none</a> | <a
jdaggett@8278 1592 href="#font-size-adjust-auto-value"
jdaggett@8278 1593 title="auto!!font-size-adjust">auto</a> | <a
jdaggett@8225 1594 href="#aspect-ratio-value"><var>&lt;number&gt;</var></a>
jdaggett@484 1595
jdaggett@484 1596 <tr>
jdaggett@484 1597 <td>Initial:
jdaggett@484 1598
jdaggett@484 1599 <td>none
jdaggett@484 1600
jdaggett@484 1601 <tr>
jdaggett@484 1602 <td>Applies to:
jdaggett@484 1603
jdaggett@484 1604 <td>all elements
jdaggett@484 1605
jdaggett@484 1606 <tr>
jdaggett@484 1607 <td>Inherited:
jdaggett@484 1608
jdaggett@484 1609 <td>yes
jdaggett@484 1610
jdaggett@484 1611 <tr>
jdaggett@484 1612 <td>Percentages:
jdaggett@484 1613
jdaggett@554 1614 <td>N/A
jdaggett@484 1615
jdaggett@484 1616 <tr>
jdaggett@484 1617 <td>Media:
jdaggett@484 1618
jdaggett@484 1619 <td>visual
jdaggett@484 1620
jdaggett@484 1621 <tr>
jdaggett@1148 1622 <td>Computed value:
jdaggett@484 1623
jdaggett@554 1624 <td>as specified
jdaggett@7377 1625
jdaggett@7377 1626 <tr>
jdaggett@7377 1627 <td>Animatable:
jdaggett@7377 1628
jdaggett@7377 1629 <td>as <a
jdaggett@7377 1630 href="http://dev.w3.org/csswg/css3-transitions/#animtype-number">number</a>
jdaggett@484 1631 </table>
jdaggett@484 1632
jdaggett@555 1633 <p>For any given font size, the apparent size and legibility of text varies
jdaggett@555 1634 across fonts. For scripts such as Latin or Cyrillic that distinguish
jdaggett@555 1635 between upper and lowercase letters, the relative height of lowercase
jdaggett@555 1636 letters compared to their uppercase counterparts is a determining factor
jdaggett@555 1637 of legibility. This is commonly referred to as the <a class=index-def
jdaggett@4624 1638 href="#aspect-value" id=aspect-value0 title="aspect value"><dfn
jdaggett@4624 1639 id=aspect-value>aspect value</dfn></a>. Precisely defined, it is equal to
jdaggett@4624 1640 the x-height of a font divided by the font size.
jdaggett@555 1641
jdaggett@555 1642 <p>In situations where font fallback occurs, fallback fonts may not share
jdaggett@555 1643 the same aspect ratio as the desired font family and will thus appear less
jdaggett@555 1644 readable. The font-size-adjust property is a way to preserve the
jdaggett@547 1645 readability of text when font fallback occurs. It does this by adjusting
jdaggett@1662 1646 the font-size so that the x-height is the same regardless of the font
jdaggett@555 1647 used.
jdaggett@547 1648
jdaggett@547 1649 <div class=example>
jdaggett@547 1650 <p>The style defined below defines Verdana as the desired font family, but
jdaggett@547 1651 if Verdana is not available Futura or Times will be used.</p>
jdaggett@547 1652
jdaggett@8277 1653 <pre>p {
jdaggett@8277 1654 font-family: Verdana, Futura, Times;
jdaggett@547 1655 }
jdaggett@547 1656
jdaggett@547 1657 &lt;p>Lorem ipsum dolor sit amet, ...&lt;/p>
jdaggett@547 1658 </pre>
jdaggett@547 1659
jdaggett@547 1660 <p>Verdana has a relatively high aspect ratio, lowercase letters are
jdaggett@547 1661 relatively tall compared to uppercase letters, so at small sizes text
jdaggett@547 1662 appears legible. Times has a lower aspect ratio and so if fallback
jdaggett@547 1663 occurs, the text will be less legible at small sizes than Verdana.</p>
jdaggett@547 1664 </div>
jdaggett@547 1665
jdaggett@547 1666 <p>How text rendered in each of these fonts compares is shown below, the
jdaggett@547 1667 columns show text rendered in Verdana, Futura and Times. The same
jdaggett@547 1668 font-size value is used across cells within each row and red lines are
jdaggett@547 1669 included to show the differences in x-height. In the upper half each row
jdaggett@547 1670 is rendered in the same font-size value. The same is true for the lower
jdaggett@547 1671 half but in this half the font-size-adjust property is also set so that
jdaggett@2462 1672 the actual font size is adjusted to preserve the x-height across each row.
jdaggett@547 1673 Note how small text remains relatively legible across each row in the
jdaggett@547 1674 lower half.
jdaggett@547 1675
jdaggett@1150 1676 <div class=figure><img alt="text with and without font-size-adjust"
jdaggett@1150 1677 src=fontsizeadjust.png>
jdaggett@890 1678 <p class=caption>Text with and without the use of font-size-adjust
jdaggett@547 1679 </div>
jdaggett@512 1680
jdaggett@512 1681 <p>This property allows authors to specify an aspect value for an element
jdaggett@554 1682 that will effectively preserve the x-height of the first choice font,
jdaggett@554 1683 whether it is substituted or not. Values have the following meanings:
jdaggett@512 1684
jdaggett@512 1685 <dl>
jdaggett@8278 1686 <dt><dfn id=font-size-adjust-none-value
jdaggett@8278 1687 title="none!!font-size-adjust">none</dfn>
jdaggett@512 1688
jdaggett@512 1689 <dd>Do not preserve the font's x-height.
jdaggett@512 1690
jdaggett@8278 1691 <dt><dfn id=font-size-adjust-auto-value
jdaggett@8278 1692 title="auto!!font-size-adjust">auto</dfn>
jdaggett@6659 1693
jdaggett@6659 1694 <dd>Behaves just like &lt;number>, except the number used is the aspect
jdaggett@6659 1695 value calculated by user agents for the first font in the list of fonts
jdaggett@8278 1696 defined for the initial value of the <a href="#propdef-font-family"
jdaggett@8278 1697 title="font-family!!property">‘<code
jdaggett@8278 1698 class=property>font-family</code>’</a> property. Effectively this is
jdaggett@8278 1699 the default font used when <a href="#propdef-font-family"
jdaggett@8278 1700 title="font-family!!property">‘<code
jdaggett@8278 1701 class=property>font-family</code>’</a> is not otherwise specified.
jdaggett@6659 1702 <p>Authors can use this value to specify that font size should be
jdaggett@6659 1703 normalized across fonts based on the x-height without the need to
jdaggett@6659 1704 specify the aspect ratio explicitly.</p>
jdaggett@6659 1705
jdaggett@8225 1706 <dt><dfn id=aspect-ratio-value><var>&lt;number&gt;</var></dfn>
jdaggett@512 1707
jdaggett@554 1708 <dd>Specifies the aspect value used in the calculation below to calculate
jdaggett@554 1709 the adjusted font size:
jdaggett@8277 1710 <pre>c = ( a / a' ) s
jdaggett@512 1711 </pre>
jdaggett@512 1712
jdaggett@512 1713 <p>where:</p>
jdaggett@512 1714
jdaggett@554 1715 <pre>s = font-size value
jdaggett@554 1716 a = aspect value as specified by the font-size-adjust property
jdaggett@554 1717 a' = aspect value of actual font
jdaggett@554 1718 c = adjusted font-size to use
jdaggett@512 1719 </pre>
jdaggett@554 1720
jdaggett@554 1721 <p>This value applies to any font that is selected but in typical usage
jdaggett@554 1722 it should be based on the aspect value of the first font in the
jdaggett@555 1723 font-family list. If this is specified accurately, the <tt>(a/a')</tt>
jdaggett@555 1724 term in the formula above is effectively 1 for the first font and no
jdaggett@555 1725 adjustment occurs. If the value is specified inaccurately, text rendered
jdaggett@555 1726 using the first font in the family list will display differently in
jdaggett@555 1727 older user agents that don't support font-size-adjust.</p>
jdaggett@512 1728 </dl>
jdaggett@512 1729
jdaggett@554 1730 <p>Authors can calculate the aspect value for a given font by comparing
jdaggett@554 1731 spans with the same content but different font-size-adjust properties. If
jdaggett@554 1732 the same font-size is used, the spans will match when the font-size-adjust
jdaggett@554 1733 value is accurate for the given font.
jdaggett@554 1734
jdaggett@554 1735 <div class=example>
jdaggett@554 1736 <p>Two spans with borders are used to determine the aspect value of a
jdaggett@554 1737 font. The font-size is the same for both spans but the font-size-adjust
jdaggett@554 1738 property is specified only for the right span. Starting with a value of
jdaggett@554 1739 0.5, the aspect value can be adjusted until the borders around the two
jdaggett@554 1740 letters line up.</p>
jdaggett@554 1741
jdaggett@554 1742 <pre>p {
jdaggett@554 1743 font-family: Futura;
jdaggett@554 1744 font-size: 500px;
jdaggett@554 1745 }
jdaggett@554 1746
jdaggett@554 1747 span {
jdaggett@554 1748 border: solid 1px red;
jdaggett@554 1749 }
jdaggett@554 1750
jdaggett@554 1751 .adjust {
jdaggett@554 1752 font-size-adjust: 0.5;
jdaggett@554 1753 }
jdaggett@554 1754
jdaggett@554 1755 &lt;p>&lt;span>b&lt;/span>&lt;span class="adjust">b&lt;/span>&lt;/p>
jdaggett@554 1756 </pre>
jdaggett@554 1757
jdaggett@1150 1758 <div class=figure><img alt="Futura with an aspect value of 0.5"
jdaggett@1150 1759 src=beforefontsizeadjust.png>
jdaggett@890 1760 <p class=caption>Futura with an aspect value of 0.5
jdaggett@554 1761 </div>
jdaggett@554 1762
jdaggett@554 1763 <p>The box on the right is a bit bigger than the one on the left, so the
jdaggett@554 1764 aspect value of this font is something less than 0.5. Adjust the value
jdaggett@554 1765 until the boxes align.</p>
jdaggett@554 1766 </div>
jdaggett@512 1767 <!-- prop: font -->
jdaggett@512 1768
jdaggett@1662 1769 <h3 id=font-prop><span class=secno>3.7 </span>Shorthand font property: the
jdaggett@1662 1770 <a href="#propdef-font">font</a> property</h3>
jdaggett@1662 1771
jdaggett@8225 1772 <table class=propdef id=namefontvalue-ltlsquofont-stylersquogt-l>
jdaggett@484 1773 <tbody>
jdaggett@484 1774 <tr>
jdaggett@484 1775 <td>Name:
jdaggett@484 1776
jdaggett@1662 1777 <td><dfn id=propdef-font>font</dfn>
jdaggett@484 1778
jdaggett@484 1779 <tr>
jdaggett@484 1780 <td>Value:
jdaggett@484 1781
jdaggett@8278 1782 <td>[ [ <var>&lt;<a href="#propdef-font-style"
jdaggett@8278 1783 title="font-style!!property">‘<code
jdaggett@8278 1784 class=property>font-style</code>’</a>&gt;</var> || <a
jdaggett@8225 1785 href="#font-variant-css21-values"><var>&lt;font-variant-css21&gt;</var></a>
jdaggett@8278 1786 || <var>&lt;<a href="#propdef-font-weight"
jdaggett@8278 1787 title="font-weight!!property">‘<code
jdaggett@8278 1788 class=property>font-weight</code>’</a>&gt;</var> || <var>&lt;<a
jdaggett@8278 1789 href="#propdef-font-stretch" title="font-stretch!!property">‘<code
jdaggett@8278 1790 class=property>font-stretch</code>’</a></var> ]? <var>&lt;‘<a
jdaggett@8225 1791 href="#propdef-font-size"><code
jdaggett@8225 1792 class=property>font-size</code></a>’&gt;</var> [ / <var>&lt;‘<code
jdaggett@8278 1793 class=property>line-height</code>’&gt;</var> ]? <var>&lt;<a
jdaggett@8278 1794 href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8278 1795 class=property>font-family</code>’</a>&gt;</var> ] | caption | icon |
jdaggett@8225 1796 menu | message-box | small-caption | status-bar
jdaggett@484 1797
jdaggett@484 1798 <tr>
jdaggett@484 1799 <td>Initial:
jdaggett@484 1800
jdaggett@484 1801 <td>see individual properties
jdaggett@484 1802
jdaggett@484 1803 <tr>
jdaggett@484 1804 <td>Applies to:
jdaggett@484 1805
jdaggett@484 1806 <td>all elements
jdaggett@484 1807
jdaggett@484 1808 <tr>
jdaggett@484 1809 <td>Inherited:
jdaggett@484 1810
jdaggett@484 1811 <td>yes
jdaggett@484 1812
jdaggett@484 1813 <tr>
jdaggett@484 1814 <td>Percentages:
jdaggett@484 1815
jdaggett@484 1816 <td>see individual properties
jdaggett@484 1817
jdaggett@484 1818 <tr>
jdaggett@484 1819 <td>Media:
jdaggett@484 1820
jdaggett@484 1821 <td>visual
jdaggett@484 1822
jdaggett@484 1823 <tr>
jdaggett@1148 1824 <td>Computed value:
jdaggett@484 1825
jdaggett@484 1826 <td>see individual properties
jdaggett@7377 1827
jdaggett@7377 1828 <tr>
jdaggett@7377 1829 <td>Animatable:
jdaggett@7377 1830
jdaggett@7377 1831 <td>see individual properties
jdaggett@484 1832 </table>
jdaggett@1732 1833
jdaggett@4624 1834 <p>The <span class=property>‘<a href="#propdef-font"><code
jdaggett@4624 1835 class=property>font</code></a>’</span> property is, except as described
jdaggett@8278 1836 below, a shorthand property for setting <a href="#propdef-font-style"
jdaggett@8278 1837 title="font-style!!property">‘<code
jdaggett@8278 1838 class=property>font-style</code>’</a>, <a href="#propdef-font-variant"
jdaggett@8278 1839 title="font-variant!!property">‘<code
jdaggett@8278 1840 class=property>font-variant</code>’</a>, <a href="#propdef-font-weight"
jdaggett@8278 1841 title="font-weight!!property">‘<code
jdaggett@8278 1842 class=property>font-weight</code>’</a>, <a href="#propdef-font-stretch"
jdaggett@8278 1843 title="font-stretch!!property">‘<code
jdaggett@8278 1844 class=property>font-stretch</code>’</a>, <span class=property>‘<a
jdaggett@8278 1845 href="#propdef-font-size"><code
jdaggett@8278 1846 class=property>font-size</code></a>’</span>, <a class=property
jdaggett@8278 1847 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
jdaggett@8278 1848 class=property>line-height</code>’</a>, <a href="#propdef-font-family"
jdaggett@8278 1849 title="font-family!!property">‘<code
jdaggett@8278 1850 class=property>font-family</code>’</a> at the same place in the
jdaggett@8278 1851 stylesheet. Values for the <a href="#propdef-font-variant"
jdaggett@8278 1852 title="font-variant!!property">‘<code
jdaggett@8278 1853 class=property>font-variant</code>’</a> property may also be included
jdaggett@8313 1854 but only those supported in CSS 2.1, none of the <a
jdaggett@8313 1855 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8313 1856 class=property>font-variant</code>’</a> values added in this
jdaggett@8313 1857 specification can be used in the <span class=property>‘<a
jdaggett@8278 1858 href="#propdef-font"><code class=property>font</code></a>’</span>
jdaggett@8278 1859 shorthand:
jdaggett@1732 1860
jdaggett@1732 1861 <pre
jdaggett@8225 1862 class=prod><dfn id=font-variant-css21-values><var>&lt;font-variant-css21&gt;</var></dfn> = [normal | small-caps]</pre>
jdaggett@1732 1863
jdaggett@1732 1864 <p>The syntax of this property is based on a traditional typographical
jdaggett@1732 1865 shorthand notation to set multiple properties related to fonts.
jdaggett@512 1866
jdaggett@8197 1867 <p>All subproperties of the ‘<a href="#propdef-font"><code
jdaggett@8197 1868 class=property>font</code></a>’ property are first reset to their
jdaggett@8197 1869 initial values, including those listed above plus <span
jdaggett@4624 1870 class=property>‘<a href="#propdef-font-size-adjust"><code
jdaggett@4624 1871 class=property>font-size-adjust</code></a>’</span>, <span
jdaggett@4624 1872 class=property>‘<a href="#propdef-font-kerning"><code
jdaggett@8278 1873 class=property>font-kerning</code></a>’</span>, subproperties of <a
jdaggett@8278 1874 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8278 1875 class=property>font-variant</code>’</a> and and <span>‘<a
jdaggett@8278 1876 href="#propdef-font-language-override"><code
jdaggett@8197 1877 class=property>font-language-override</code></a>’</span>. Then, those
jdaggett@8197 1878 properties that are given explicit values in the <span
jdaggett@8197 1879 class=property>‘<a href="#propdef-font"><code
jdaggett@4624 1880 class=property>font</code></a>’</span> shorthand are set to those
jdaggett@512 1881 values. For a definition of allowed and initial values, see the previously
jdaggett@512 1882 defined properties. For reasons of backwards compatibility, it is not
jdaggett@4624 1883 possible to set <span class=property>‘<a
jdaggett@7020 1884 href="#propdef-font-size-adjust"><code
jdaggett@7020 1885 class=property>font-size-adjust</code></a>’</span> to anything other
jdaggett@7020 1886 than its initial value using the <span class=property>‘<a
jdaggett@4624 1887 href="#propdef-font"><code class=property>font</code></a>’</span>
jdaggett@7020 1888 shorthand property; instead, use the individual property.
jdaggett@512 1889
jdaggett@512 1890 <div class=example>
jdaggett@4624 1891 <p style="display:none">Example(s):
jdaggett@890 1892
jdaggett@890 1893 <p>
jdaggett@512 1894
jdaggett@512 1895 <pre>p { font: 12pt/14pt sans-serif }
jdaggett@512 1896 p { font: 80% sans-serif }
jdaggett@512 1897 p { font: x-large/110% &quot;new century schoolbook&quot;, serif }
jdaggett@512 1898 p { font: bold italic large Palatino, serif }
jdaggett@512 1899 p { font: normal small-caps 120%/120% fantasy }
jdaggett@7020 1900 p { font: condensed oblique 12pt &quot;Helvetica Neue&quot;, serif; }
jdaggett@512 1901 </pre>
jdaggett@512 1902
jdaggett@1148 1903 <p> In the second rule, the font size percentage value (‘<code
jdaggett@8187 1904 class=css>80%</code>’) refers to the computed ‘<a
jdaggett@8187 1905 href="#propdef-font-size"><code class=property>font-size</code></a>’ of
jdaggett@8187 1906 the parent element. In the third rule, the line height percentage
jdaggett@8187 1907 (‘<code class=css>110%</code>’) refers to the font size of the
jdaggett@8187 1908 element itself.
jdaggett@512 1909
jdaggett@8278 1910 <p>The first three rules do not specify the <a
jdaggett@8278 1911 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8278 1912 class=property>font-variant</code>’</a> and <a
jdaggett@8278 1913 href="#propdef-font-weight" title="font-weight!!property">‘<code
jdaggett@8278 1914 class=property>font-weight</code>’</a> explicitly, so these properties
jdaggett@8279 1915 receive their initial values (‘<a href="#normal"><code
jdaggett@8279 1916 class=property>normal</code></a>’). Notice that the font family name
jdaggett@8279 1917 "new century schoolbook", which contains spaces, is enclosed in quotes.
jdaggett@8279 1918 The fourth rule sets the <a href="#propdef-font-weight"
jdaggett@8279 1919 title="font-weight!!property">‘<code
jdaggett@8278 1920 class=property>font-weight</code>’</a> to ‘<a href="#bold"><code
jdaggett@8278 1921 class=property>bold</code></a>’, the <a href="#propdef-font-style"
jdaggett@8278 1922 title="font-style!!property">‘<code
jdaggett@8278 1923 class=property>font-style</code>’</a> to ‘<a href="#italic"><code
jdaggett@8278 1924 class=property>italic</code></a>’, and implicitly sets <a
jdaggett@8278 1925 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8279 1926 class=property>font-variant</code>’</a> to ‘<a href="#normal"><code
jdaggett@8279 1927 class=property>normal</code></a>’.
jdaggett@8278 1928
jdaggett@8278 1929 <p> The fifth rule sets the <a href="#propdef-font-variant"
jdaggett@8278 1930 title="font-variant!!property">‘<code
jdaggett@8278 1931 class=property>font-variant</code>’</a> (‘<a href="#small-caps"><code
jdaggett@8278 1932 class=property>small-caps</code></a>’), the <span class=property>‘<a
jdaggett@8278 1933 href="#propdef-font-size"><code
jdaggett@4624 1934 class=property>font-size</code></a>’</span> (120% of the parent's font
jdaggett@8278 1935 size), the <a class=property
jdaggett@8278 1936 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
jdaggett@8278 1937 class=property>line-height</code>’</a> (120% of the font size) and the
jdaggett@8278 1938 <a href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8278 1939 class=property>font-family</code>’</a> (‘<a href="#fantasy"><code
jdaggett@8279 1940 class=property>fantasy</code></a>’). It follows that the keyword ‘<a
jdaggett@8279 1941 href="#normal"><code class=property>normal</code></a>’ applies to the
jdaggett@8279 1942 two remaining properties: <a href="#propdef-font-style"
jdaggett@8278 1943 title="font-style!!property">‘<code
jdaggett@8278 1944 class=property>font-style</code>’</a> and <a
jdaggett@8278 1945 href="#propdef-font-weight" title="font-weight!!property">‘<code
jdaggett@8278 1946 class=property>font-weight</code>’</a>.
jdaggett@8278 1947
jdaggett@8278 1948 <p>The sixth rule sets the <a href="#propdef-font-style"
jdaggett@8278 1949 title="font-style!!property">‘<code
jdaggett@8278 1950 class=property>font-style</code>’</a>, <a href="#propdef-font-stretch"
jdaggett@8278 1951 title="font-stretch!!property">‘<code
jdaggett@8278 1952 class=property>font-stretch</code>’</a>, <span class=property>‘<a
jdaggett@8278 1953 href="#propdef-font-size"><code
jdaggett@8278 1954 class=property>font-size</code></a>’</span>, and <a
jdaggett@8278 1955 href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8278 1956 class=property>font-family</code>’</a>, the other font properties being
jdaggett@8278 1957 set to their initial values.
jdaggett@512 1958 </div>
jdaggett@512 1959
jdaggett@8278 1960 <p>Since the <a href="#propdef-font-stretch"
jdaggett@8278 1961 title="font-stretch!!property">‘<code
jdaggett@8278 1962 class=property>font-stretch</code>’</a> property was not defined in CSS
jdaggett@8278 1963 2.1, when using <a href="#propdef-font-stretch"
jdaggett@8278 1964 title="font-stretch!!property">‘<code
jdaggett@8278 1965 class=property>font-stretch</code>’</a> values within ‘<a
jdaggett@7020 1966 href="#propdef-font"><code class=property>font</code></a>’ rules,
jdaggett@7020 1967 authors should include a extra version compatible with older user agents:
jdaggett@7020 1968
jdaggett@7020 1969 <pre>p {
jdaggett@7020 1970 font: 80% sans-serif; /* for older user agents */
jdaggett@7020 1971 font: condensed 80% sans-serif;
jdaggett@7020 1972 }</pre>
jdaggett@7020 1973
jdaggett@1662 1974 <p>The following values refer to system fonts:
jdaggett@512 1975
jdaggett@512 1976 <dl>
jdaggett@512 1977 <dt><strong>caption</strong>
jdaggett@512 1978
jdaggett@512 1979 <dd>The font used for captioned controls (e.g., buttons, drop-downs,
jdaggett@512 1980 etc.).
jdaggett@512 1981
jdaggett@512 1982 <dt><strong>icon</strong>
jdaggett@512 1983
jdaggett@512 1984 <dd>The font used to label icons.
jdaggett@512 1985
jdaggett@512 1986 <dt><strong>menu</strong>
jdaggett@512 1987
jdaggett@512 1988 <dd>The font used in menus (e.g., dropdown menus and menu lists).
jdaggett@512 1989
jdaggett@512 1990 <dt><strong>message-box</strong>
jdaggett@512 1991
jdaggett@512 1992 <dd>The font used in dialog boxes.
jdaggett@512 1993
jdaggett@512 1994 <dt><strong>small-caption</strong>
jdaggett@512 1995
jdaggett@512 1996 <dd>The font used for labeling small controls.
jdaggett@512 1997
jdaggett@512 1998 <dt><strong>status-bar</strong>
jdaggett@512 1999
jdaggett@512 2000 <dd>The font used in window status bars.
jdaggett@512 2001 </dl>
jdaggett@512 2002
jdaggett@512 2003 <p>System fonts may only be set as a whole; that is, the font family, size,
jdaggett@1662 2004 weight, style, etc. are all set at the same time. These values may then be
jdaggett@512 2005 altered individually if desired. If no font with the indicated
jdaggett@512 2006 characteristics exists on a given platform, the user agent should either
jdaggett@1148 2007 intelligently substitute (e.g., a smaller version of the ‘<code
jdaggett@1148 2008 class=property>caption</code>’ font might be used for the ‘<code
jdaggett@7242 2009 class=property>small-caption</code>’ font), or substitute a user agent
jdaggett@1148 2010 default font. As for regular fonts, if, for a system font, any of the
jdaggett@1148 2011 individual properties are not part of the operating system's available
jdaggett@1148 2012 user preferences, those properties should be set to their initial values.
jdaggett@512 2013
jdaggett@1662 2014 <p>That is why this property is "almost" a shorthand property: system fonts
jdaggett@8278 2015 can only be specified with this property, not with <a
jdaggett@8278 2016 href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8278 2017 class=property>font-family</code>’</a> itself, so <span
jdaggett@4624 2018 class=property>‘<a href="#propdef-font"><code
jdaggett@4624 2019 class=property>font</code></a>’</span> allows authors to do more than
jdaggett@4624 2020 the sum of its subproperties. However, the individual properties such as
jdaggett@8278 2021 <a href="#propdef-font-weight" title="font-weight!!property">‘<code
jdaggett@8278 2022 class=property>font-weight</code>’</a> are still given values taken from
jdaggett@8278 2023 the system font, which can be independently varied.
jdaggett@512 2024
jdaggett@7235 2025 <p>Note that the keywords used for the system fonts listed above are only
jdaggett@7235 2026 treated as keywords when they occur in the initial position, in other
jdaggett@7235 2027 positions the same string is treated as part of the font family name:
jdaggett@7235 2028
jdaggett@7235 2029 <pre> font: menu; /* use the font settings for system menus */
jdaggett@7235 2030 font: large menu; /* use a font family named "menu" */</pre>
jdaggett@7235 2031
jdaggett@512 2032 <div class=example>
jdaggett@4624 2033 <p style="display:none">Example(s):
jdaggett@890 2034
jdaggett@890 2035 <p>
jdaggett@512 2036
jdaggett@512 2037 <pre>button { font: 300 italic 1.3em/1.7em &quot;FB Armada&quot;, sans-serif }
jdaggett@512 2038 button p { font: menu }
jdaggett@512 2039 button p em { font-weight: bolder }
jdaggett@512 2040 </pre>
jdaggett@512 2041
jdaggett@512 2042 <p>If the font used for dropdown menus on a particular system happened to
jdaggett@512 2043 be, for example, 9-point Charcoal, with a weight of 600, then P elements
jdaggett@512 2044 that were descendants of BUTTON would be displayed as if this rule were
jdaggett@890 2045 in effect:
jdaggett@512 2046
jdaggett@512 2047 <pre>button p { font: 600 9pt Charcoal }
jdaggett@512 2048 </pre>
jdaggett@512 2049
jdaggett@4624 2050 <p>Because the <span class=property>‘<a href="#propdef-font"><code
jdaggett@4624 2051 class=property>font</code></a>’</span> shorthand resets to its initial
jdaggett@4624 2052 value any property not explicitly given a value, this has the same effect
jdaggett@4624 2053 as this declaration:
jdaggett@512 2054
jdaggett@512 2055 <pre>button p {
jdaggett@512 2056 font-style: normal;
jdaggett@512 2057 font-variant: normal;
jdaggett@512 2058 font-weight: 600;
jdaggett@512 2059 font-size: 9pt;
jdaggett@512 2060 line-height: normal;
jdaggett@512 2061 font-family: Charcoal
jdaggett@8277 2062 }
jdaggett@512 2063 </pre>
jdaggett@512 2064 </div>
jdaggett@2487 2065 <!-- prop: font-synthesis -->
jdaggett@2487 2066
jdaggett@2487 2067 <h3 id=font-synthesis-prop><span class=secno>3.8 </span>Controlling
jdaggett@2487 2068 synthetic faces: the <a href="#propdef-font-synthesis">font-synthesis</a>
jdaggett@2487 2069 property</h3>
jdaggett@2487 2070
jdaggett@4624 2071 <table class=propdef id=namefont-synthesisvaluenone-weight-style>
jdaggett@2457 2072 <tbody>
jdaggett@2457 2073 <tr>
jdaggett@2457 2074 <td>Name:
jdaggett@2457 2075
jdaggett@2487 2076 <td><dfn id=propdef-font-synthesis>font-synthesis</dfn>
jdaggett@2457 2077
jdaggett@2457 2078 <tr>
jdaggett@2457 2079 <td>Value:
jdaggett@2457 2080
jdaggett@2487 2081 <td>none | [ weight || style ]
jdaggett@2457 2082
jdaggett@2457 2083 <tr>
jdaggett@2457 2084 <td>Initial:
jdaggett@2457 2085
jdaggett@2487 2086 <td>weight style
jdaggett@2457 2087
jdaggett@2457 2088 <tr>
jdaggett@2457 2089 <td>Applies to:
jdaggett@2457 2090
jdaggett@2457 2091 <td>all elements
jdaggett@2457 2092
jdaggett@2457 2093 <tr>
jdaggett@2457 2094 <td>Inherited:
jdaggett@2457 2095
jdaggett@2457 2096 <td>yes
jdaggett@2457 2097
jdaggett@2457 2098 <tr>
jdaggett@2457 2099 <td>Percentages:
jdaggett@2457 2100
jdaggett@2457 2101 <td>N/A
jdaggett@2457 2102
jdaggett@2457 2103 <tr>
jdaggett@2457 2104 <td>Media:
jdaggett@2457 2105
jdaggett@2457 2106 <td>visual
jdaggett@2457 2107
jdaggett@2457 2108 <tr>
jdaggett@2457 2109 <td>Computed value:
jdaggett@2457 2110
jdaggett@2457 2111 <td>as specified
jdaggett@7377 2112
jdaggett@7377 2113 <tr>
jdaggett@7377 2114 <td>Animatable:
jdaggett@7377 2115
jdaggett@7377 2116 <td>no
jdaggett@2457 2117 </table>
jdaggett@2457 2118
jdaggett@2487 2119 <p>This property controls whether user agents are allowed to synthesize
jdaggett@2487 2120 bold or oblique font faces when a font family lacks bold or italic faces.
jdaggett@7311 2121 If ‘<a href="#weight"><code class=property>weight</code></a>’ is not
jdaggett@7311 2122 specified, user agents must not synthesize bold faces and if ‘<code
jdaggett@2487 2123 class=property>style</code>’ is not specified user agents must not
jdaggett@8278 2124 synthesize italic faces. A value of ‘<code class=property>none</code>’
jdaggett@8278 2125 disallows all synthetic faces.
jdaggett@2457 2126
jdaggett@2457 2127 <div class=example>
jdaggett@2488 2128 <p>The style rule below disables the use of synthetically obliqued Arabic:</p>
jdaggett@2457 2129
jdaggett@2487 2130 <pre>*:lang(ar) { font-synthesis: none; }
jdaggett@2457 2131 </pre>
jdaggett@2457 2132 </div>
jdaggett@512 2133
jdaggett@6699 2134 <h2 id=font-resources><span class=secno>4 </span>Font Resources</h2>
jdaggett@545 2135
jdaggett@8311 2136 <h3 id=font-face-rule><span class=secno>4.1 </span>The <dfn
jdaggett@8311 2137 id=at-font-face-rule style="font-weight: inherit; font-style:
jdaggett@8311 2138 inherit"><code>@font-face</code></dfn> rule</h3>
jdaggett@8311 2139
jdaggett@8311 2140 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule allows
jdaggett@8311 2141 for linking to fonts that are automatically fetched and activated when
jdaggett@8311 2142 needed. This allows authors to select a font that closely matches the
jdaggett@8311 2143 design goals for a given page rather than limiting the font choice to a
jdaggett@8311 2144 set of fonts available on all platforms. A set of font descriptors define
jdaggett@8311 2145 the location of a font resource, either locally or externally, along with
jdaggett@8311 2146 the style characteristics of an individual face. Multiple <a
jdaggett@8311 2147 href="#at-font-face-rule"><code>@font-face</code></a> rules can be used to
jdaggett@8311 2148 construct font families with a variety of faces. Using CSS font matching
jdaggett@8311 2149 rules, a user agent can selectively download only those faces that are
jdaggett@8311 2150 needed for a given piece of text.
jdaggett@8311 2151
jdaggett@8311 2152 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule
jdaggett@8311 2153 consists of the <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 2154 at-keyword followed by a block of descriptor declarations. In terms of the
jdaggett@8311 2155 grammar, this specification defines the following productions:
jdaggett@8031 2156
jdaggett@8031 2157 <pre><dfn id=fontfacerule>font_face_rule</dfn>
jdaggett@8225 2158 : <a href="#fontfacesym"><i>FONT_FACE_SYM</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* '{' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#descriptordeclaration"><i>descriptor_declaration</i></a>? [ ';' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#descriptordeclaration"><i>descriptor_declaration</i></a>? ]* '}' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
jdaggett@8031 2159 ;
jdaggett@8031 2160
jdaggett@8031 2161 <dfn id=descriptordeclaration>descriptor_declaration</dfn>
jdaggett@8225 2162 : <a href="http://www.w3.org/TR/CSS21/grammar.html#grammar"><i>property</i></a> ':' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/grammar.html#grammar"><i>expr</i></a>
jdaggett@8031 2163 ;</pre>
jdaggett@8031 2164
jdaggett@8032 2165 <p>The following new definitions are introduced:
jdaggett@8032 2166
jdaggett@8032 2167 <pre>- -|\\0{0,4}2d(\r\n|[ \t\r\n\f])?
jdaggett@8032 2168 F f|\\0{0,4}(46|66)(\r\n|[ \t\r\n\f])?</pre>
jdaggett@8032 2169
jdaggett@8032 2170 <p>The following new token is introduced:
jdaggett@8032 2171
jdaggett@8225 2172 <pre>@{F}{O}{N}{T}{-}{F}{A}{C}{E} {return <dfn id=fontfacesym>FONT_FACE_SYM</dfn>;}</pre>
jdaggett@8032 2173
jdaggett@8311 2174 <p>Each <a href="#at-font-face-rule"><code>@font-face</code></a> rule
jdaggett@8311 2175 specifies a value for every font descriptor, either implicitly or
jdaggett@8311 2176 explicitly. Those not given explicit values in the rule take the initial
jdaggett@8311 2177 value listed with each descriptor in this specification. These descriptors
jdaggett@8311 2178 apply solely within the context of the <a
jdaggett@8311 2179 href="#at-font-face-rule"><code>@font-face</code></a> rule in which they
jdaggett@8311 2180 are defined, and do not apply to document language elements. There is no
jdaggett@8311 2181 notion of which elements the descriptors apply to or whether the values
jdaggett@8311 2182 are inherited by child elements. When a given descriptor occurs multiple
jdaggett@8311 2183 times in a given <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 2184 rule, only the last descriptor declaration is used and all prior
jdaggett@8311 2185 declarations for that descriptor are ignored.
jdaggett@512 2186
jdaggett@525 2187 <div class=example>
jdaggett@525 2188 <p>To use a downloadable font called Gentium:</p>
jdaggett@512 2189
jdaggett@512 2190 <pre>
jdaggett@525 2191 @font-face {
jdaggett@525 2192 font-family: Gentium;
jdaggett@2556 2193 src: url(http://example.com/fonts/Gentium.ttf);
jdaggett@525 2194 }
jdaggett@525 2195
jdaggett@525 2196 p { font-family: Gentium, serif; }
jdaggett@512 2197 </pre>
jdaggett@512 2198
jdaggett@573 2199 <p>The user agent will download Gentium and use it when rendering text
jdaggett@573 2200 within paragraph elements. If for some reason the site serving the font
jdaggett@573 2201 is unavailable, the default serif font will be used.</p>
jdaggett@512 2202 </div>
jdaggett@512 2203
jdaggett@8311 2204 <p>A given set of <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 2205 rules define a set of fonts available for use within the documents that
jdaggett@8311 2206 contain these rules. When font matching is done, fonts defined using these
jdaggett@8311 2207 rules are considered before other available fonts on a system.
jdaggett@8198 2208
jdaggett@8198 2209 <p>Downloaded fonts are only available to documents that reference them.
jdaggett@8198 2210 The process of activating these fonts must not make them available to
jdaggett@2472 2211 other applications or to documents that don't directly link to the same
jdaggett@2556 2212 font. User agent implementers might consider it convenient to use
jdaggett@2472 2213 downloaded fonts when rendering characters in other documents for which no
jdaggett@8363 2214 other available font exists as part of the <a
jdaggett@8363 2215 href="#system-font-fallback"><em>system font fallback</em></a> procedure.
jdaggett@8198 2216 However, this would cause a security leak since the contents of one page
jdaggett@8198 2217 would be able to affect other pages, something an attacker could use as an
jdaggett@8198 2218 attack vector. These restrictions do not affect caching behavior, fonts
jdaggett@8198 2219 are cached the same way other web resources are cached.
jdaggett@8198 2220
jdaggett@8198 2221 <p>This at-rule follows the forward-compatible parsing rules of CSS. Like
jdaggett@8198 2222 properties in a declaration block, declarations of any descriptors that
jdaggett@8311 2223 are not supported by the user agent must be ignored. <a
jdaggett@8311 2224 href="#at-font-face-rule"><code>@font-face</code></a> rules require a
jdaggett@8311 2225 font-family and src descriptor; if either of these are missing, the <a
jdaggett@8311 2226 href="#at-font-face-rule"><code>@font-face</code></a> rule is invalid and
jdaggett@8311 2227 must be ignored entirely.
jdaggett@1244 2228
jdaggett@1244 2229 <p>In cases where user agents have limited platform resources or implement
jdaggett@8311 2230 the ability to disable downloadable font resources, <a
jdaggett@8311 2231 href="#at-font-face-rule"><code>@font-face</code></a> rules must simply be
jdaggett@8311 2232 ignored; the behavior of individual descriptors as defined in this
jdaggett@8311 2233 specification should not be altered.
jdaggett@1662 2234
jdaggett@1662 2235 <h3 id=font-family-desc><span class=secno>4.2 </span>Font family: the <a
jdaggett@1662 2236 href="#descdef-font-family">font-family</a> descriptor</h3>
jdaggett@512 2237
jdaggett@512 2238 <table class=descdef>
jdaggett@512 2239 <tbody>
jdaggett@512 2240 <tr>
jdaggett@512 2241 <td>Name:
jdaggett@512 2242
jdaggett@8278 2243 <td><dfn id=descdef-font-family
jdaggett@8278 2244 title="font-family!!descriptor">font-family</dfn>
jdaggett@512 2245
jdaggett@512 2246 <tr>
jdaggett@512 2247 <td>Value:
jdaggett@512 2248
jdaggett@8225 2249 <td><a href="#family-name-value"><var>&lt;family-name&gt;</var></a>
jdaggett@890 2250
jdaggett@890 2251 <tr>
jdaggett@890 2252 <td><em>Initial:</em>
jdaggett@890 2253
jdaggett@890 2254 <td>N/A
jdaggett@512 2255 </table>
jdaggett@512 2256
jdaggett@525 2257 <p>This descriptor defines the font family name that will be used in all
jdaggett@8311 2258 CSS font family name matching. It is required for the <a
jdaggett@8311 2259 href="#at-font-face-rule"><code>@font-face</code></a> rule to be valid. It
jdaggett@8311 2260 overrides the font family names contained in the underlying font data. If
jdaggett@8311 2261 the font family name is the same as a font family available in a given
jdaggett@8311 2262 user's environment, it effectively hides the underlying font for documents
jdaggett@8311 2263 that use the stylesheet. This permits a web author to freely choose
jdaggett@8311 2264 font-family names without worrying about conflicts with font family names
jdaggett@8311 2265 present in a given user's environment. Likewise, platform substitutions
jdaggett@8311 2266 for a given font family name must not be used.
jdaggett@1244 2267
jdaggett@1662 2268 <h3 id=src-desc><span class=secno>4.3 </span>Font reference: the <a
jdaggett@1662 2269 href="#descdef-src">src</a> descriptor</h3>
jdaggett@512 2270
jdaggett@512 2271 <table class=descdef>
jdaggett@512 2272 <tbody>
jdaggett@512 2273 <tr>
jdaggett@512 2274 <td>Name:
jdaggett@512 2275
jdaggett@1662 2276 <td><dfn id=descdef-src>src</dfn>
jdaggett@512 2277
jdaggett@512 2278 <tr>
jdaggett@512 2279 <td>Value:
jdaggett@512 2280
jdaggett@8225 2281 <td>[ &lt;url> [format(&lt;string> #)]? | <a
jdaggett@8225 2282 href="#font-face-name-value"><var>&lt;font-face-name&gt;</var></a> ] #
jdaggett@890 2283
jdaggett@890 2284 <tr>
jdaggett@890 2285 <td><em>Initial:</em>
jdaggett@890 2286
jdaggett@890 2287 <td>N/A
jdaggett@512 2288 </table>
jdaggett@512 2289
jdaggett@899 2290 <p>This descriptor specifies the resource containing font data. It is
jdaggett@8311 2291 required for the <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 2292 rule to be valid. Its value is a prioritized, comma-separated list of
jdaggett@8311 2293 external references or locally-installed font face names. When a font is
jdaggett@8311 2294 needed the user agent iterates over the set of references listed, using
jdaggett@8311 2295 the first one it can successfully activate. Fonts containing invalid data
jdaggett@8311 2296 or local font faces that are not found are ignored and the user agent
jdaggett@8311 2297 loads the next font in the list.
jdaggett@8272 2298
jdaggett@8272 2299 <p>As with other URLs in CSS, the URL may be relative, in which case it is
jdaggett@8311 2300 resolved relative to the location of the style sheet containing the <a
jdaggett@8311 2301 href="#at-font-face-rule"><code>@font-face</code></a> rule. In the case of
jdaggett@8311 2302 SVG fonts, the URL points to an element within a document containing SVG
jdaggett@8311 2303 font definitions. If the element reference is omitted, a reference to the
jdaggett@8311 2304 first defined font is implied. Similarly, font container formats that can
jdaggett@7096 2305 contain more than one font must load one and only one of the fonts for a
jdaggett@8311 2306 given <a href="#at-font-face-rule"><code>@font-face</code></a> rule.
jdaggett@8311 2307 Fragment identifiers are used to indicate which font to load. If a
jdaggett@8311 2308 container format lacks a defined fragment identifier scheme,
jdaggett@8311 2309 implementations should use a simple 1-based indexing scheme (e.g.
jdaggett@8311 2310 "font-collection#1" for the first font, "font-collection#2" for the second
jdaggett@8311 2311 font).
jdaggett@1244 2312
jdaggett@2527 2313 <pre>
jdaggett@2527 2314 src: url(fonts/simple.ttf); /* load simple.ttf relative to stylesheet location */
jdaggett@2527 2315 src: url(/fonts/simple.ttf); /* load simple.ttf from absolute location */
jdaggett@2527 2316 src: url(fonts.svg#simple); /* load SVG font with id 'simple' */
jdaggett@2527 2317 </pre>
jdaggett@2527 2318
jdaggett@8198 2319 <p>External references consist of a URL, followed by an optional hint
jdaggett@8198 2320 describing the format of the font resource referenced by that URL. The
jdaggett@2527 2321 format hint contains a comma-separated list of format strings that denote
jdaggett@2527 2322 well-known font formats. Conformant user agents must skip downloading a
jdaggett@2527 2323 font resource if the format hints indicate only unsupported or unknown
jdaggett@2527 2324 font formats. If no format hints are supplied, the user agent should
jdaggett@2527 2325 download the font resource.
jdaggett@2527 2326
jdaggett@2527 2327 <pre>
jdaggett@2527 2328 /* load WOFF font if possible, otherwise use OpenType font */
jdaggett@2527 2329 @font-face {
jdaggett@2527 2330 font-family: bodytext;
jdaggett@2527 2331 src: url(ideal-sans-serif.woff) format("woff"),
jdaggett@2527 2332 url(basic-sans-serif.ttf) format("opentype");
jdaggett@2527 2333 }
jdaggett@2527 2334 </pre>
jdaggett@2527 2335
jdaggett@2527 2336 <p>Format strings defined by this specification:
jdaggett@2527 2337
jdaggett@2527 2338 <table class=data id=fontformats>
jdaggett@2527 2339 <thead>
jdaggett@2527 2340 <tr>
jdaggett@2527 2341 <th>String
jdaggett@2527 2342
jdaggett@2527 2343 <th>Font Format
jdaggett@2527 2344
jdaggett@2527 2345 <th>Common extensions
jdaggett@2527 2346
jdaggett@2527 2347 <tbody>
jdaggett@2527 2348 <tr>
jdaggett@2527 2349 <th>"woff"
jdaggett@2527 2350
jdaggett@4624 2351 <td><a href="http://www.w3.org/TR/WOFF/">WOFF (Web Open Font Format)</a>
jdaggett@2527 2352
jdaggett@2527 2353 <td>.woff
jdaggett@2527 2354
jdaggett@2527 2355 <tr>
jdaggett@2527 2356 <th>"truetype"
jdaggett@2527 2357
jdaggett@4624 2358 <td><a
jdaggett@4624 2359 href="http://www.microsoft.com/typography/otspec/default.htm">TrueType</a>
jdaggett@2527 2360
jdaggett@2527 2361 <td>.ttf
jdaggett@2527 2362
jdaggett@2527 2363 <tr>
jdaggett@2527 2364 <th>"opentype"
jdaggett@2527 2365
jdaggett@4624 2366 <td><a
jdaggett@4624 2367 href="http://www.microsoft.com/typography/otspec/default.htm">OpenType</a>
jdaggett@2527 2368
jdaggett@2527 2369 <td>.ttf, .otf
jdaggett@2527 2370
jdaggett@2527 2371 <tr>
jdaggett@2527 2372 <th>"embedded-opentype"
jdaggett@2527 2373
jdaggett@4624 2374 <td><a
jdaggett@4624 2375 href="http://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded
jdaggett@4624 2376 OpenType</a>
jdaggett@2527 2377
jdaggett@2527 2378 <td>.eot
jdaggett@2527 2379
jdaggett@2527 2380 <tr>
jdaggett@2527 2381 <th>"svg"
jdaggett@2527 2382
jdaggett@4624 2383 <td><a href="http://www.w3.org/TR/SVG/fonts.html">SVG Font</a>
jdaggett@2527 2384
jdaggett@2527 2385 <td>.svg, .svgz
jdaggett@2527 2386 </table>
jdaggett@2527 2387
jdaggett@2527 2388 <p>Given the overlap in common usage between TrueType and OpenType, the
jdaggett@2527 2389 format hints "truetype" and "opentype" must be considered as synonymous; a
jdaggett@2527 2390 format hint of "opentype" does not imply that the font contains Postscript
jdaggett@2527 2391 CFF style glyph data or that it contains OpenType layout information (see
jdaggett@7377 2392 <a href="#platform-props-to-css">Appendix A</a> for more background on
jdaggett@7377 2393 this).
jdaggett@2527 2394
jdaggett@2527 2395 <p>When authors would prefer to use a locally available copy of a given
jdaggett@8198 2396 font and download it if it's not, <code>local()</code> can be used. The
jdaggett@8225 2397 locally-installed <dfn
jdaggett@8225 2398 id=font-face-name-value><var>&lt;font-face-name&gt;</var></dfn> argument
jdaggett@8272 2399 to <code>local()</code> is a format-specific string that uniquely
jdaggett@8272 2400 identifies a single font face within a larger family. The syntax for a <a
jdaggett@8225 2401 href="#font-face-name-value"><var>&lt;font-face-name&gt;</var></a> is a
jdaggett@8241 2402 unique font face name enclosed by "local(" and ")". The name can
jdaggett@8241 2403 optionally be enclosed in quotes. If unquoted, the unquoted font family
jdaggett@8241 2404 name processing conventions apply; the name must be a sequence of
jdaggett@8241 2405 identifiers separated by whitespace which is converted to a string by
jdaggett@8241 2406 joining the identifiers together separated by a single space.
jdaggett@2527 2407
jdaggett@2527 2408 <pre>
jdaggett@2527 2409 /* regular face of Gentium */
jdaggett@573 2410 @font-face {
jdaggett@2527 2411 font-family: MyGentium;
jdaggett@2527 2412 src: local(Gentium), /* use locally available Gentium */
jdaggett@2527 2413 url(Gentium.ttf); /* otherwise, download it */
jdaggett@573 2414 }
jdaggett@573 2415 </pre>
jdaggett@573 2416
jdaggett@8241 2417 <p>For OpenType and TrueType fonts, this string is used to match only the
jdaggett@8241 2418 Postscript name or the full font name in the name table of locally
jdaggett@8241 2419 available fonts. Which type of name is used varies by platform and font,
jdaggett@8241 2420 so authors should include both of these names to assure proper matching
jdaggett@8241 2421 across platforms. Platform substitutions for a given font name must not be
jdaggett@8241 2422 used.
jdaggett@2527 2423
jdaggett@2527 2424 <pre>
jdaggett@2527 2425 /* bold face of Gentium */
jdaggett@2527 2426 @font-face {
jdaggett@2527 2427 font-family: MyGentium;
jdaggett@2527 2428 src: local(Gentium Bold), /* full font name */
jdaggett@2527 2429 local(Gentium-Bold), /* Postscript name */
jdaggett@2527 2430 url(GentiumBold.ttf); /* otherwise, download it */
jdaggett@2527 2431 font-weight: bold;
jdaggett@2527 2432 }
jdaggett@2527 2433 </pre>
jdaggett@2527 2434
jdaggett@8311 2435 <p>Just as a <a href="#at-font-face-rule"><code>@font-face</code></a> rule
jdaggett@8311 2436 specifies the characteristics of a single font within a family, the unique
jdaggett@8311 2437 name used with <code>local()</code> specifies a single font, not an entire
jdaggett@8311 2438 font family. Defined in terms of OpenType font data, the Postscript name
jdaggett@8311 2439 is found in the font's <a
jdaggett@2527 2440 href="http://www.microsoft.com/typography/otspec/name.htm">name table</a>,
jdaggett@2527 2441 in the name record with nameID = 6 (see <a href="#OPENTYPE"
jdaggett@2556 2442 rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> for more details). The
jdaggett@2527 2443 Postscript name is the commonly used key for all fonts on OSX and for
jdaggett@2527 2444 Postscript CFF fonts under Windows. The full font name (nameID = 4) is
jdaggett@2527 2445 used as a unique key for fonts with TrueType glyphs on Windows.
jdaggett@2527 2446
jdaggett@2527 2447 <p>For OpenType fonts with multiple localizations of the full font name,
jdaggett@2527 2448 the US English version is used (language ID = 0x409 for Windows and
jdaggett@2527 2449 language ID = 0 for Macintosh) or the first localization when a US English
jdaggett@2527 2450 full font name is not available (the OpenType specification recommends
jdaggett@2527 2451 that <a href="http://www.microsoft.com/typography/otspec/recom.htm">all
jdaggett@2527 2452 fonts minimally include US English names</a>). User agents that also match
jdaggett@2527 2453 other full font names, e.g. matching the Dutch name when the current
jdaggett@2527 2454 system locale is set to Dutch, are considered non-conformant. This is done
jdaggett@2527 2455 not to prefer English but to avoid matching inconsistencies across font
jdaggett@2527 2456 versions and OS localizations, since font style names (e.g. "Bold") are
jdaggett@2527 2457 frequently localized into many languages and the set of localizations
jdaggett@2527 2458 available varies widely across platform and font version. User agents that
jdaggett@2527 2459 match a concatenation of family name (nameID = 1) with style name (nameID
jdaggett@2527 2460 = 2) are considered non-conformant.
jdaggett@2527 2461
jdaggett@2527 2462 <p>This also allows for referencing faces that belong to larger families
jdaggett@2527 2463 that cannot otherwise be referenced.
jdaggett@2527 2464
jdaggett@2527 2465 <div class=example>
jdaggett@525 2466 <p>Use a local font or reference an SVG font in another document:</p>
jdaggett@525 2467
jdaggett@525 2468 <pre>
jdaggett@525 2469 @font-face {
jdaggett@525 2470 font-family: Headline;
jdaggett@8277 2471 src: local(Futura-Medium),
jdaggett@1148 2472 url(fonts.svg#MyGeometricModern) format("svg");
jdaggett@525 2473 }
jdaggett@525 2474 </pre>
jdaggett@525 2475
jdaggett@525 2476 <p>Create an alias for local Japanese fonts on different platforms:</p>
jdaggett@525 2477
jdaggett@525 2478 <pre>
jdaggett@525 2479 @font-face {
jdaggett@2527 2480 font-family: jpgothic;
jdaggett@525 2481 src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic);
jdaggett@525 2482 }
jdaggett@525 2483 </pre>
jdaggett@525 2484
jdaggett@525 2485 <p>Reference a font face that cannot be matched within a larger family:</p>
jdaggett@525 2486
jdaggett@525 2487 <pre>
jdaggett@525 2488 @font-face {
jdaggett@525 2489 font-family: Hoefler Text Ornaments;
jdaggett@525 2490 /* has the same font properties as Hoefler Text Regular */
jdaggett@8277 2491 src: local(HoeflerText-Ornaments);
jdaggett@525 2492 }
jdaggett@525 2493 </pre>
jdaggett@2527 2494
jdaggett@8198 2495 <p>Since localized fullnames never match, a document with the header style
jdaggett@8198 2496 rules below would always render using the default serif font, regardless
jdaggett@8198 2497 whether a particular system locale parameter is set to Finnish or not:</p>
jdaggett@1662 2498
jdaggett@1662 2499 <pre>
jdaggett@1662 2500 @font-face {
jdaggett@1662 2501 font-family: SectionHeader;
jdaggett@6653 2502 src: local("Arial Lihavoitu"); /* Finnish fullname for Arial Bold, should fail */
jdaggett@1662 2503 font-weight: bold;
jdaggett@1662 2504 }
jdaggett@1662 2505
jdaggett@1662 2506 h2 { font-family: SectionHeader, serif; }
jdaggett@1662 2507 </pre>
jdaggett@1662 2508
jdaggett@8198 2509 <p>A conformant user agent would never load the font ‘<code
jdaggett@1662 2510 class=css>gentium.eot</code>’ in the example below, since it is
jdaggett@4624 2511 included in the first definition of the ‘<a href="#descdef-src"><code
jdaggett@4624 2512 class=property>src</code></a>’ descriptor which is overridden by the
jdaggett@8311 2513 second definition in the same <a
jdaggett@8311 2514 href="#at-font-face-rule"><code>@font-face</code></a> rule:</p>
jdaggett@1662 2515
jdaggett@1662 2516 <pre>
jdaggett@1662 2517 @font-face {
jdaggett@1662 2518 font-family: MainText;
jdaggett@6653 2519 src: url(gentium.eot); /* for use with older non-conformant user agents */
jdaggett@1662 2520 src: local("Gentium"), url(gentium.ttf); /* Overrides src definition */
jdaggett@1662 2521 }
jdaggett@1662 2522 </pre>
jdaggett@1662 2523 </div>
jdaggett@1662 2524
jdaggett@1662 2525 <h3 id=font-prop-desc><span class=secno>4.4 </span>Font property
jdaggett@1662 2526 descriptors: the <a href="#descdef-font-style">font-style</a>, <a
jdaggett@1662 2527 href="#descdef-font-weight">font-weight</a>, <a
jdaggett@1662 2528 href="#descdef-font-stretch">font-stretch</a> descriptors</h3>
jdaggett@518 2529
jdaggett@518 2530 <table class=descdef>
jdaggett@518 2531 <tbody>
jdaggett@518 2532 <tr>
jdaggett@518 2533 <td>Name:
jdaggett@518 2534
jdaggett@8278 2535 <td><dfn id=descdef-font-style
jdaggett@8278 2536 title="font-style!!descriptor">font-style</dfn>
jdaggett@518 2537
jdaggett@518 2538 <tr>
jdaggett@518 2539 <td>Value:
jdaggett@518 2540
jdaggett@545 2541 <td>normal | italic | oblique
jdaggett@890 2542
jdaggett@890 2543 <tr>
jdaggett@890 2544 <td><em>Initial:</em>
jdaggett@890 2545
jdaggett@890 2546 <td>normal
jdaggett@518 2547 </table>
jdaggett@518 2548
jdaggett@518 2549 <table class=descdef>
jdaggett@518 2550 <tbody>
jdaggett@518 2551 <tr>
jdaggett@518 2552 <td>Name:
jdaggett@518 2553
jdaggett@8278 2554 <td><dfn id=descdef-font-weight
jdaggett@8278 2555 title="font-weight!!descriptor">font-weight</dfn>
jdaggett@518 2556
jdaggett@518 2557 <tr>
jdaggett@518 2558 <td>Value:
jdaggett@518 2559
jdaggett@545 2560 <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
jdaggett@890 2561
jdaggett@890 2562 <tr>
jdaggett@890 2563 <td><em>Initial:</em>
jdaggett@890 2564
jdaggett@890 2565 <td>normal
jdaggett@518 2566 </table>
jdaggett@518 2567
jdaggett@518 2568 <table class=descdef>
jdaggett@518 2569 <tbody>
jdaggett@518 2570 <tr>
jdaggett@518 2571 <td>Name:
jdaggett@518 2572
jdaggett@8278 2573 <td><dfn id=descdef-font-stretch
jdaggett@8278 2574 title="font-stretch!!descriptor">font-stretch</dfn>
jdaggett@518 2575
jdaggett@518 2576 <tr>
jdaggett@518 2577 <td>Value:
jdaggett@518 2578
jdaggett@545 2579 <td>normal | ultra-condensed | extra-condensed | condensed |
jdaggett@518 2580 semi-condensed | semi-expanded | expanded | extra-expanded |
jdaggett@525 2581 ultra-expanded
jdaggett@890 2582
jdaggett@890 2583 <tr>
jdaggett@890 2584 <td><em>Initial:</em>
jdaggett@890 2585
jdaggett@890 2586 <td>normal
jdaggett@518 2587 </table>
jdaggett@518 2588
jdaggett@573 2589 <p>These descriptors define the characteristics of a font face and are used
jdaggett@573 2590 in the process of matching styles to specific faces. For a font family
jdaggett@8311 2591 defined with several <a
jdaggett@8311 2592 href="#at-font-face-rule"><code>@font-face</code></a> rules, user agents
jdaggett@8311 2593 can either download all faces in the family or use these descriptors to
jdaggett@8311 2594 selectively download font faces that match actual styles used in document.
jdaggett@8311 2595 The values for these descriptors are the same as those for the
jdaggett@8311 2596 corresponding font properties except that relative keywords are not
jdaggett@8311 2597 allowed, ‘<a href="#bolder"><code class=property>bolder</code></a>’
jdaggett@8311 2598 and ‘<a href="#lighter"><code class=property>lighter</code></a>’. If
jdaggett@8311 2599 these descriptors are omitted, initial values are assumed.
jdaggett@890 2600
jdaggett@890 2601 <p>The value for these font face style attributes is used in place of the
jdaggett@890 2602 style implied by the underlying font data. This allows authors to combine
jdaggett@890 2603 faces in flexible combinations, even in situations where the original font
jdaggett@890 2604 data was arranged differently. User agents that implement synthetic
jdaggett@8272 2605 bolding and obliquing must only apply synthetic styling in cases where the
jdaggett@8272 2606 font descriptors imply this is needed, rather than based on the style
jdaggett@890 2607 attributes implied by the font data.
jdaggett@573 2608
jdaggett@1662 2609 <h3 id=unicode-range-desc><span class=secno>4.5 </span>Character range: the
jdaggett@1662 2610 <a href="#descdef-unicode-range">unicode-range</a> descriptor</h3>
jdaggett@518 2611
jdaggett@518 2612 <table class=descdef>
jdaggett@518 2613 <tbody>
jdaggett@518 2614 <tr>
jdaggett@518 2615 <td>Name:
jdaggett@518 2616
jdaggett@1662 2617 <td><dfn id=descdef-unicode-range>unicode-range</dfn>
jdaggett@518 2618
jdaggett@518 2619 <tr>
jdaggett@518 2620 <td>Value:
jdaggett@518 2621
jdaggett@8225 2622 <td><a href="#urange-value"><var>&lt;urange&gt;</var></a> #
jdaggett@890 2623
jdaggett@890 2624 <tr>
jdaggett@890 2625 <td><em>Initial:</em>
jdaggett@890 2626
jdaggett@1148 2627 <td>U+0-10FFFF
jdaggett@518 2628 </table>
jdaggett@518 2629
jdaggett@8213 2630 <p>This descriptor defines the set of Unicode codepoints that may be
jdaggett@8213 2631 supported by the font face for which it is declared. The descriptor value
jdaggett@8225 2632 is a comma-delimited list of Unicode range (<a
jdaggett@8225 2633 href="#urange-value"><var>&lt;urange&gt;</var></a>) values. The union of
jdaggett@8225 2634 these ranges defines the set of codepoints that serves as a hint for user
jdaggett@8225 2635 agents when deciding whether or not to download a font resource for a
jdaggett@8225 2636 given text run.
jdaggett@8225 2637
jdaggett@8225 2638 <p>Each <dfn id=urange-value><var>&lt;urange&gt;</var></dfn> value is a <a
jdaggett@8225 2639 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code
jdaggett@8225 2640 title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token made up of a
jdaggett@8225 2641 "U+" or "u+" prefix followed by a codepoint range in one of the three
jdaggett@8241 2642 forms listed below. Ranges that do not fit one of the these forms are
jdaggett@8241 2643 invalid and cause the declaration to be ignored.
jdaggett@8241 2644
jdaggett@8241 2645 <dl>
jdaggett@8241 2646 <dt>single codepoint (e.g. U+416)
jdaggett@8241 2647
jdaggett@8241 2648 <dd>a valid Unicode codepoint, represented as one to six hexadecimal
jdaggett@8241 2649 digits
jdaggett@8241 2650
jdaggett@8246 2651 <dt>interval range (e.g. U+400-4ff)
jdaggett@8241 2652
jdaggett@8241 2653 <dd>represented as two hyphen-separated valid Unicode codepoints
jdaggett@8241 2654 indicating the inclusive start and end codepoints of a range
jdaggett@8241 2655
jdaggett@8246 2656 <dt>wildcard range (e.g. U+4??)
jdaggett@8241 2657
jdaggett@8241 2658 <dd>defined by the set of codepoints implied when trailing ‘<code
jdaggett@8246 2659 class=css>?</code>’ characters signify any hexadeximal digit
jdaggett@8241 2660 </dl>
jdaggett@573 2661
jdaggett@8213 2662 <p>Individual codepoints are written using hexadecimal values that
jdaggett@8213 2663 correspond to <a href="http://www.unicode.org/charts/">Unicode character
jdaggett@8225 2664 codepoints</a>. Valid Unicode codepoint values vary between 0 and 10FFFF
jdaggett@8225 2665 inclusive. Digit values of codepoints are ASCII case-insensitive. For
jdaggett@8360 2666 interval ranges, the start and end codepoints are valid Unicode values and
jdaggett@8360 2667 the end codepoint is greater than or equal to the start codepoint.
jdaggett@8225 2668
jdaggett@8225 2669 <p>Wildcard ranges specified with ‘?’ that lack an initial digit (e.g.
jdaggett@8225 2670 "U+???") are valid and equivalent to a wildcard range with an initial zero
jdaggett@8225 2671 digit (e.g. "U+0???" = "U+0000-0FFF"). Wildcard ranges that extend beyond
jdaggett@8225 2672 the range of valid Unicode codepoints are invalid. Because of this, the
jdaggett@8225 2673 maximum number of trailing ‘<code class=css>?</code>’ wildcard
jdaggett@8272 2674 characters is five, even though the <a
jdaggett@8225 2675 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code
jdaggett@8225 2676 title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token accepts six.
jdaggett@8213 2677
jdaggett@8213 2678 <p>Within the comma-delimited list of Unicode ranges in a ‘<a
jdaggett@8213 2679 href="#descdef-unicode-range"><code
jdaggett@8213 2680 class=property>unicode-range</code></a>’ descriptor declaration, ranges
jdaggett@8241 2681 may overlap. The union of these ranges defines the set of codepoints for
jdaggett@8241 2682 which the corresponding font may be used. User agents must not download or
jdaggett@8241 2683 use the font for codepoints outside this set. User agents may normalize
jdaggett@8241 2684 the list of ranges into a list that is different but represents the same
jdaggett@8241 2685 set of codepoints.
jdaggett@8213 2686
jdaggett@8272 2687 <p>The associated font might not contain glyphs for the entire set of
jdaggett@8213 2688 codepoints defined by the ‘<a href="#descdef-unicode-range"><code
jdaggett@8213 2689 class=property>unicode-range</code></a>’ descriptor. When the font is
jdaggett@8225 2690 used the effective <a href="#character-map"><em>character map</em></a> is
jdaggett@8225 2691 the intersection of the codepoints defined by ‘<a
jdaggett@8225 2692 href="#descdef-unicode-range"><code
jdaggett@8225 2693 class=property>unicode-range</code></a>’ with the font's <a
jdaggett@8225 2694 href="#character-map"><em>character map</em></a>. This allows authors to
jdaggett@8225 2695 define supported ranges in terms of broad ranges without worrying about
jdaggett@8225 2696 the precise codepoint ranges supported by the underlying font.
jdaggett@8225 2697
jdaggett@8225 2698 <h3 id=composite-fonts><span class=secno>4.6 </span>Using character ranges
jdaggett@8225 2699 to define composite fonts</h3>
jdaggett@8225 2700
jdaggett@8311 2701 <p>Multiple <a href="#at-font-face-rule"><code>@font-face</code></a> rules
jdaggett@8311 2702 with different unicode ranges for the same family and style descriptor
jdaggett@8311 2703 values can be used to create composite fonts that mix the glyphs from
jdaggett@8311 2704 different fonts for different scripts. This can be used to combine fonts
jdaggett@8311 2705 that only contain glyphs for a single script (e.g. Latin, Greek, Cyrillic)
jdaggett@8311 2706 or it can be used by authors as a way of segmenting a font into fonts for
jdaggett@8311 2707 commonly used characters and less frequently used characters. Since the
jdaggett@8311 2708 user agent will only pull down the fonts it needs this helps reduce page
jdaggett@8311 2709 bandwidth.
jdaggett@8311 2710
jdaggett@8311 2711 <p>If the unicode ranges overlap for a set of <a
jdaggett@8311 2712 href="#at-font-face-rule"><code>@font-face</code></a> rules with the same
jdaggett@8311 2713 family and style descriptor values, the rules are ordered in the reverse
jdaggett@8311 2714 order they were defined; the last rule defined is the first to be checked
jdaggett@8311 2715 for a given character.
jdaggett@890 2716
jdaggett@890 2717 <p>Example ranges for specific languages or characters:
jdaggett@518 2718
jdaggett@518 2719 <dl>
jdaggett@529 2720 <dt>unicode-range: U+A5;
jdaggett@529 2721
jdaggett@1149 2722 <dd>a single code point, the yen/yuan symbol
jdaggett@529 2723
jdaggett@1148 2724 <dt>unicode-range: U+0-7F;
jdaggett@1148 2725
jdaggett@1148 2726 <dd>code range for basic ASCII characters
jdaggett@1148 2727
jdaggett@529 2728 <dt>unicode-range: U+590-5ff;
jdaggett@529 2729
jdaggett@529 2730 <dd>code range for Hebrew characters
jdaggett@529 2731
jdaggett@529 2732 <dt>unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;
jdaggett@529 2733
jdaggett@529 2734 <dd>code range for Japanese kanji, hiragana and katakana characters plus
jdaggett@529 2735 yen/yuan symbol
jdaggett@518 2736 </dl>
jdaggett@518 2737
jdaggett@529 2738 <div class=example>
jdaggett@531 2739 <p>The BBC provides news services in a wide variety of languages, many
jdaggett@8311 2740 that are not well supported across all platforms. Using an <a
jdaggett@8311 2741 href="#at-font-face-rule"><code>@font-face</code></a> rule, the BBC could
jdaggett@8311 2742 provide a font for any of these languages, as it already does via a
jdaggett@8311 2743 manual font download.</p>
jdaggett@531 2744
jdaggett@531 2745 <pre>
jdaggett@531 2746 @font-face {
jdaggett@531 2747 font-family: BBCBengali;
jdaggett@531 2748 src: url(fonts/BBCBengali.ttf) format("opentype");
jdaggett@531 2749 unicode-range: U+00-FF, U+980-9FF;
jdaggett@531 2750 }
jdaggett@531 2751 </pre>
jdaggett@529 2752 </div>
jdaggett@529 2753
jdaggett@529 2754 <div class=example>
jdaggett@531 2755 <p>Technical documents often require a wide range of symbols. The STIX
jdaggett@531 2756 Fonts project is one project aimed at providing fonts to support a wide
jdaggett@531 2757 range of technical typesetting in a standardized way. The example below
jdaggett@531 2758 shows the use of a font that provides glyphs for many of the mathematical
jdaggett@531 2759 and technical symbol ranges within Unicode:</p>
jdaggett@531 2760
jdaggett@531 2761 <pre>
jdaggett@531 2762 @font-face {
jdaggett@531 2763 font-family: STIXGeneral;
jdaggett@531 2764 src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
jdaggett@531 2765 unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
jdaggett@531 2766 }
jdaggett@531 2767 </pre>
jdaggett@529 2768 </div>
jdaggett@529 2769
jdaggett@529 2770 <div class=example>
jdaggett@529 2771 <p>This example shows how an author can override the glyphs used for Latin
jdaggett@529 2772 characters in a Japanese font with glyphs from a different font. The
jdaggett@529 2773 first rule specifies no range so it defaults to the entire range. The
jdaggett@529 2774 range specified in the second rule overlaps but takes precedence because
jdaggett@529 2775 it is defined later.</p>
jdaggett@529 2776
jdaggett@529 2777 <pre>
jdaggett@529 2778 @font-face {
jdaggett@529 2779 font-family: JapaneseWithGentium;
jdaggett@529 2780 src: local(MSMincho);
jdaggett@529 2781 /* no range specified, defaults to entire range */
jdaggett@529 2782 }
jdaggett@529 2783
jdaggett@529 2784 @font-face {
jdaggett@529 2785 font-family: JapaneseWithGentium;
jdaggett@529 2786 src: url(../fonts/Gentium.ttf);
jdaggett@529 2787 unicode-range: U+0-2FF;
jdaggett@529 2788 }
jdaggett@529 2789 </pre>
jdaggett@529 2790 </div>
jdaggett@1148 2791
jdaggett@1148 2792 <div class=example>
jdaggett@1148 2793 <p>Consider a family constructed to optimize bandwidth by separating out
jdaggett@1148 2794 Latin, Japanese and other characters into different font files:</p>
jdaggett@1148 2795
jdaggett@1148 2796 <pre>
jdaggett@1148 2797 /* fallback font - size: 4.5MB */
jdaggett@1148 2798 @font-face {
jdaggett@1148 2799 font-family: DroidSans;
jdaggett@1148 2800 src: url(DroidSansFallback.ttf);
jdaggett@1148 2801 /* no range specified, defaults to entire range */
jdaggett@1148 2802 }
jdaggett@1148 2803
jdaggett@1148 2804 /* Japanese glyphs - size: 1.2MB */
jdaggett@1148 2805 @font-face {
jdaggett@1148 2806 font-family: DroidSans;
jdaggett@1148 2807 src: url(DroidSansJapanese.ttf);
jdaggett@1148 2808 unicode-range: U+3000-9FFF, U+ff??;
jdaggett@1148 2809 }
jdaggett@1148 2810
jdaggett@8277 2811 /* Latin, Greek, Cyrillic along with some
jdaggett@1148 2812 punctuation and symbols - size: 190KB */
jdaggett@1148 2813 @font-face {
jdaggett@1148 2814 font-family: DroidSans;
jdaggett@1148 2815 src: url(DroidSans.ttf);
jdaggett@1148 2816 unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
jdaggett@1148 2817 }
jdaggett@1148 2818 </pre>
jdaggett@1148 2819
jdaggett@1148 2820 <p>For simple Latin text, only the font for Latin characters is
jdaggett@1148 2821 downloaded:</p>
jdaggett@1148 2822
jdaggett@1148 2823 <pre>
jdaggett@1148 2824 body { font-family: DroidSans; }
jdaggett@1148 2825
jdaggett@1148 2826 &lt;p>This is that&lt;/p>
jdaggett@1148 2827 </pre>
jdaggett@1148 2828
jdaggett@1148 2829 <p>In this case the user agent first checks the unicode-range for the font
jdaggett@1148 2830 containing Latin characters (DroidSans.ttf). Since all the characters
jdaggett@1148 2831 above are in the range U+0-5FF, the user agent downloads the font and
jdaggett@1148 2832 renders the text with that font.</p>
jdaggett@1148 2833
jdaggett@1148 2834 <p>Next, consider text that makes use of an arrow character (⇨):</p>
jdaggett@1148 2835
jdaggett@1148 2836 <pre>
jdaggett@1148 2837 &lt;p>This &amp;#x21e8; that&lt;p>
jdaggett@1148 2838 </pre>
jdaggett@1148 2839
jdaggett@1148 2840 <p>The user agent again first checks the unicode-range of the font
jdaggett@1149 2841 containing Latin characters. Since U+2000-2300 includes the arrow code
jdaggett@1149 2842 point (U+21E8), the user agent downloads the font. For this character
jdaggett@1148 2843 however the Latin font does not have a matching glyph, so the effective
jdaggett@1149 2844 unicode-range used for font matching excludes this code point. Next, the
jdaggett@1148 2845 user agent evaluates the Japanese font. The unicode-range for the
jdaggett@1148 2846 Japanese font, U+3000-9FFF and U+ff??, does not include U+21E8, so the
jdaggett@1662 2847 user agent does not download the Japanese font. Next the fallback font is
jdaggett@8311 2848 considered. The <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 2849 rule for the fallback font does not define unicode-range so its value
jdaggett@8311 2850 defaults to the range of all Unicode code points. The fallback font is
jdaggett@8311 2851 downloaded and used to render the arrow character.</p>
jdaggett@1148 2852 </div>
jdaggett@890 2853
jdaggett@8225 2854 <h3 id=font-rend-desc><span class=secno>4.7 </span>Font features: the <a
jdaggett@1662 2855 href="#descdef-font-variant">font-variant</a> and <a
jdaggett@1662 2856 href="#descdef-font-feature-settings">font-feature-settings</a>
jdaggett@1662 2857 descriptors</h3>
jdaggett@1662 2858
jdaggett@1662 2859 <table class=descdef>
jdaggett@1662 2860 <tbody>
jdaggett@1662 2861 <tr>
jdaggett@1662 2862 <td>Name:
jdaggett@1662 2863
jdaggett@8278 2864 <td><dfn id=descdef-font-variant
jdaggett@8278 2865 title="font-variant!!descriptor">font-variant</dfn>
jdaggett@1662 2866
jdaggett@1662 2867 <tr>
jdaggett@1662 2868 <td>Value:
jdaggett@1662 2869
jdaggett@8278 2870 <td><a href="#font-variant-normal-value"
jdaggett@8278 2871 title="normal!!font-variant">normal</a> | <a
jdaggett@8278 2872 href="#font-variant-none-value" title="none!!font-variant">none</a> | [
jdaggett@8278 2873 <a href="#common-lig-values"><var>&lt;common-lig-values&gt;</var></a>
jdaggett@8278 2874 || <a
jdaggett@8225 2875 href="#discretionary-lig-values"><var>&lt;discretionary-lig-values&gt;</var></a>
jdaggett@8225 2876 || <a
jdaggett@8225 2877 href="#historical-lig-values"><var>&lt;historical-lig-values&gt;</var></a>
jdaggett@8225 2878 || <a
jdaggett@8225 2879 href="#contextual-alt-values"><var>&lt;contextual-alt-values&gt;</var></a>
jdaggett@8225 2880 || <a href="#stylistic"><var
jdaggett@8225 2881 title=stylistic>stylistic(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 2882 href="#historical-forms"><var>historical-forms</var></a> || <a
jdaggett@8225 2883 href="#styleset"><var
jdaggett@8225 2884 title=styleset>styleset(&lt;feature-value-name&gt; #)</var></a> || <a
jdaggett@8225 2885 href="#character-variant"><var
jdaggett@8225 2886 title=character-variant>character-variant(&lt;feature-value-name&gt;
jdaggett@8225 2887 #)</var></a> || <a href="#swash"><var
jdaggett@8225 2888 title=swash>swash(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 2889 href="#ornaments"><var
jdaggett@8225 2890 title=ornaments>ornaments(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 2891 href="#annotation"><var
jdaggett@8225 2892 title=annotation>annotation(&lt;feature-value-name&gt;)</var></a> || [
jdaggett@8225 2893 <a href="#small-caps"><i>small-caps</i></a> | <a
jdaggett@8225 2894 href="#all-small-caps"><i>all-small-caps</i></a> | <a
jdaggett@8225 2895 href="#petite-caps"><i>petite-caps</i></a> | <a
jdaggett@8225 2896 href="#all-petite-caps"><i>all-petite-caps</i></a> | <a
jdaggett@8225 2897 href="#unicase"><i>unicase</i></a> | <a
jdaggett@8225 2898 href="#titling-caps"><i>titling-caps</i></a> ] || <a
jdaggett@8225 2899 href="#numeric-figure-values"><var>&lt;numeric-figure-values&gt;</var></a>
jdaggett@8225 2900 || <a
jdaggett@8225 2901 href="#numeric-spacing-values"><var>&lt;numeric-spacing-values&gt;</var></a>
jdaggett@8225 2902 || <a
jdaggett@8225 2903 href="#numeric-fraction-values"><var>&lt;numeric-fraction-values&gt;</var></a>
jdaggett@8225 2904 || <a href="#ordinal"><i>ordinal</i></a> || <a
jdaggett@8225 2905 href="#slashed-zero"><i>slashed-zero</i></a> || <a
jdaggett@8225 2906 href="#east-asian-variant-values"><var>&lt;east-asian-variant-values&gt;</var></a>
jdaggett@8225 2907 || <a
jdaggett@8225 2908 href="#east-asian-width-values"><var>&lt;east-asian-width-values&gt;</var></a>
jdaggett@8225 2909 || <a href="#ruby"><i>ruby</i></a> ]
jdaggett@1662 2910
jdaggett@1662 2911 <tr>
jdaggett@1662 2912 <td><em>Initial:</em>
jdaggett@1662 2913
jdaggett@1662 2914 <td>normal
jdaggett@1662 2915 </table>
jdaggett@1662 2916
jdaggett@1662 2917 <table class=descdef>
jdaggett@1662 2918 <tbody>
jdaggett@1662 2919 <tr>
jdaggett@1662 2920 <td>Name:
jdaggett@1662 2921
jdaggett@8278 2922 <td><dfn id=descdef-font-feature-settings
jdaggett@8278 2923 title="font-feature-settings!!descriptor">font-feature-settings</dfn>
jdaggett@1662 2924
jdaggett@1662 2925 <tr>
jdaggett@1662 2926 <td>Value:
jdaggett@1662 2927
jdaggett@8278 2928 <td><a href="#font-feature-settings-normal-value"
jdaggett@8278 2929 title="normal!!font-feature-settings">normal</a> | <a
jdaggett@8225 2930 href="#feature-tag-value"><var>&lt;feature-tag-value&gt;</var></a> #
jdaggett@1662 2931
jdaggett@1662 2932 <tr>
jdaggett@1662 2933 <td><em>Initial:</em>
jdaggett@1662 2934
jdaggett@1662 2935 <td>normal
jdaggett@1662 2936 </table>
jdaggett@1662 2937
jdaggett@8213 2938 <p>These descriptors define initial settings that apply when the font
jdaggett@8311 2939 defined by an <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 2940 rule is rendered. They do not affect font selection. Values are identical
jdaggett@8311 2941 to those defined for the corresponding <a href="#propdef-font-variant"
jdaggett@8278 2942 title="font-variant!!property">‘<code
jdaggett@8279 2943 class=property>font-variant</code>’</a> and <a
jdaggett@8279 2944 href="#propdef-font-feature-settings"
jdaggett@8279 2945 title="font-feature-settings!!property">‘<code
jdaggett@8279 2946 class=property>font-feature-settings</code>’</a> properties defined
jdaggett@8279 2947 below except that the value ‘<code class=property>inherit</code>’ is
jdaggett@8279 2948 omitted. When multiple font feature descriptors or properties are used,
jdaggett@8279 2949 the cumulative effect on text rendering is detailed in the section <a
jdaggett@8031 2950 href="#font-feature-resolution">Font Feature Resolution</a> below. In
jdaggett@8278 2951 cases where specific values define synthesized fallback for certain <a
jdaggett@8278 2952 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8278 2953 class=property>font-variant</code>’</a> subproperties, the same
jdaggett@8031 2954 synthesized fallback applies when used within those values are used with
jdaggett@8278 2955 the <a href="#descdef-font-style" title="font-style!!descriptor">‘<code
jdaggett@8031 2956 class=property>font-variant</code>’</a> descriptor.
jdaggett@1662 2957
jdaggett@8225 2958 <h3 id=font-face-loading><span class=secno>4.8 </span>Font loading
jdaggett@2563 2959 guidelines</h3>
jdaggett@2563 2960
jdaggett@8311 2961 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule is
jdaggett@8311 2962 designed to allow lazy loading of font resources that are only downloaded
jdaggett@8311 2963 when used within a document. A stylesheet can include <a
jdaggett@8311 2964 href="#at-font-face-rule"><code>@font-face</code></a> rules for a library
jdaggett@8311 2965 of fonts of which only a select set are used; user agents must only
jdaggett@8311 2966 download those fonts that are referred to within the style rules
jdaggett@8311 2967 applicable to a given page. User agents that download all fonts defined in
jdaggett@8311 2968 <a href="#at-font-face-rule"><code>@font-face</code></a> rules without
jdaggett@8311 2969 considering whether those fonts are in fact used within a page are
jdaggett@8311 2970 considered non-conformant. In cases where a font might be downloaded in
jdaggett@8360 2971 character fallback cases, user agents may download a font if it's
jdaggett@8360 2972 contained within the computed value of <a href="#propdef-font-family"
jdaggett@8360 2973 title="font-family!!property">‘<code
jdaggett@8360 2974 class=property>font-family</code>’</a> for a given text run.
jdaggett@2563 2975
jdaggett@2563 2976 <pre>
jdaggett@2563 2977 @font-face {
jdaggett@2563 2978 font-family: GeometricModern;
jdaggett@2563 2979 src: url(font.ttf);
jdaggett@2563 2980 }
jdaggett@2563 2981
jdaggett@2563 2982 p {
jdaggett@2563 2983 /* font will be downloaded for pages with p elements */
jdaggett@2563 2984 font-family: GeometricModern, sans-serif;
jdaggett@2563 2985 }
jdaggett@2563 2986
jdaggett@2563 2987 h2 {
jdaggett@2563 2988 /* font may be downloaded for pages with h2 elements, even if Futura is available locally */
jdaggett@2563 2989 font-family: Futura, GeometricModern, sans-serif;
jdaggett@2563 2990 }
jdaggett@2563 2991 </pre>
jdaggett@2563 2992
jdaggett@2563 2993 <p>In cases where textual content is loaded before downloadable fonts are
jdaggett@2563 2994 available, user agents may render text as it would be rendered if
jdaggett@2563 2995 downloadable font resources are not available or they may render text
jdaggett@2563 2996 transparently with fallback fonts to avoid a flash of text using a
jdaggett@2563 2997 fallback font. In cases where the font download fails user agents must
jdaggett@2563 2998 display text, simply leaving transparent text is considered non-conformant
jdaggett@2563 2999 behavior. Authors are advised to use fallback fonts in their font lists
jdaggett@2563 3000 that closely match the vertical metrics of the downloadable fonts to avoid
jdaggett@2563 3001 large page reflows where possible.
jdaggett@2563 3002
jdaggett@8225 3003 <h3 id=same-origin-restriction><span class=secno>4.9 </span>Same-origin
jdaggett@2737 3004 restriction for fonts</h3>
jdaggett@2737 3005
jdaggett@8225 3006 <h4 id=default-same-origin-restriction><span class=secno>4.9.1
jdaggett@2740 3007 </span>Default same-origin restriction</h4>
jdaggett@7253 3008 <!-- TPAC 2011 Resolution to require same-origin restriction for loading fonts:
jdaggett@7253 3009 http://lists.w3.org/Archives/Public/www-style/2011Nov/0711.html
jdaggett@7253 3010 http://www.w3.org/2011/10/31-webapps-minutes.html#item02
jdaggett@7253 3011 -->
jdaggett@2740 3012
jdaggett@2737 3013 <p>User agents must implement a same-origin restriction when loading fonts
jdaggett@8311 3014 via the <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 3015 mechanism. This restriction limits the loading of fonts for a given
jdaggett@8311 3016 document to fonts loaded from the same origin. Fonts can only be loaded
jdaggett@8311 3017 via the same host, port, and method combination as the containing
jdaggett@8311 3018 document, using the <a
jdaggett@7179 3019 href="http://www.w3.org/TR/html5/browsers.html#origin">origin matching
jdaggett@2737 3020 algorithm</a> described in the <a href="#HTML5"
jdaggett@2737 3021 rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> specification. The origin of
jdaggett@8311 3022 the stylesheet containing <a
jdaggett@8311 3023 href="#at-font-face-rule"><code>@font-face</code></a> rules is not used
jdaggett@8311 3024 when deciding whether a font is same origin or not, only the origin of the
jdaggett@7096 3025 containing document is used. The restriction applies to all font types.
jdaggett@2737 3026
jdaggett@2737 3027 <p>Given a document located at http://example.com/page.html, fonts defined
jdaggett@4624 3028 with ‘<a href="#descdef-src"><code class=property>src</code></a>’
jdaggett@2737 3029 definitions considered cross origin must not be loaded:
jdaggett@2737 3030
jdaggett@2737 3031 <pre>
jdaggett@2737 3032 /* same origin (i.e. domain, protocol, port match document) */
jdaggett@8277 3033 src: url(fonts/simple.ttf);
jdaggett@8277 3034 src: url(//fonts/simple.ttf);
jdaggett@2737 3035
jdaggett@2737 3036 /* cross origin, different protocol */
jdaggett@8277 3037 src: url(https://example.com/fonts/simple.ttf);
jdaggett@2737 3038
jdaggett@2737 3039 /* cross origin, different domain */
jdaggett@8277 3040 src: url(http://another.example.com/fonts/simple.ttf);
jdaggett@2737 3041 </pre>
jdaggett@2737 3042
jdaggett@8225 3043 <h4 id=allowing-cross-origin-font-loading><span class=secno>4.9.2
jdaggett@2740 3044 </span>Allowing cross-origin font loading</h4>
jdaggett@2740 3045
jdaggett@2737 3046 <p>User agents must also implement the ability to relax this restriction
jdaggett@2737 3047 using cross-site origin controls <a href="#CORS"
jdaggett@7253 3048 rel=biblioentry>[CORS]<!--{{!CORS}}--></a> for fonts loaded via HTTP.
jdaggett@7253 3049 Sites can explicitly allow cross-site downloading of font data using the
jdaggett@7253 3050 <code>Access-Control-Allow-Origin</code> HTTP header. For other protocols,
jdaggett@7253 3051 no explicit relaxation mechanism is defined or required.
jdaggett@7253 3052
jdaggett@7253 3053 <p>For font loads over HTTP, cross-origin requests must be made with the
jdaggett@7253 3054 following parameter settings which are used in conjunction with the <a
jdaggett@7254 3055 href="http://www.w3.org/TR/cors/#cross-origin-request-0"> <em>cross-origin
jdaggett@7254 3056 request algorithm</em></a> <a href="#CORS"
jdaggett@7254 3057 rel=biblioentry>[CORS]<!--{{!CORS}}--></a>:
jdaggett@7253 3058
jdaggett@7253 3059 <ul>
jdaggett@7253 3060 <li><em>request URL</em> — the URL of the font resource in the <a
jdaggett@7253 3061 href="#descdef-src"><code>src</code></a> descriptor
jdaggett@7253 3062
jdaggett@7253 3063 <li><em>request method</em> — GET
jdaggett@7253 3064
jdaggett@7253 3065 <li><em>author request headers</em> — none
jdaggett@7253 3066
jdaggett@7253 3067 <li><em>request entity body</em> — empty
jdaggett@7253 3068
jdaggett@7253 3069 <li><em>source origin</em> — the origin of the page which linked to the
jdaggett@7253 3070 stylesheet
jdaggett@7253 3071
jdaggett@7253 3072 <li><em>manual redirect flag</em> — false
jdaggett@7253 3073
jdaggett@7253 3074 <li><em>omit credentials flag</em> — true
jdaggett@7253 3075
jdaggett@7253 3076 <li><em>force preflight flag</em> — false
jdaggett@7253 3077 </ul>
jdaggett@2737 3078
jdaggett@6699 3079 <h2 id=font-matching-algorithm><span class=secno>5 </span>Font Matching
jdaggett@6699 3080 Algorithm</h2>
jdaggett@484 3081
jdaggett@2457 3082 <p>The algorithm below describes how fonts are associated with individual
jdaggett@2457 3083 runs of text. For each character in the run a font family is chosen and a
jdaggett@2457 3084 particular font face is selected containing a glyph for that character.
jdaggett@2457 3085
jdaggett@7309 3086 <h3 id=font-family-casing><span class=secno>5.1 </span>Case sensitivity of
jdaggett@7309 3087 font family names</h3>
jdaggett@7309 3088
jdaggett@7309 3089 <p>As part of the font matching algorithm outlined below, user agents must
jdaggett@7309 3090 match font family names used in style rules with actual font family names
jdaggett@8311 3091 contained in fonts available in a given environment or defined via <a
jdaggett@8311 3092 href="#at-font-face-rule"><code>@font-face</code></a> rules. User agents
jdaggett@8311 3093 must match these names case insensitively, using the "Default Caseless
jdaggett@8311 3094 Matching" algorithm outlined in the Unicode specification <a
jdaggett@8311 3095 href="#UNICODE6" rel=biblioentry>[UNICODE6]<!--{{!UNICODE6}}--></a>. This
jdaggett@8311 3096 algorithm is detailed in section 3.13 entitled "Default Case Algorithms".
jdaggett@8311 3097 Specifically, the algorithm must be applied without normalizing the
jdaggett@8311 3098 strings involved and without applying any language-specific tailorings.
jdaggett@8311 3099 The case folding method specified by this algorithm uses the case mappings
jdaggett@8311 3100 with status field ‘<code class=property>C</code>’ or ‘<code
jdaggett@8311 3101 class=property>F</code>’ in the CaseFolding.txt file of the Unicode
jdaggett@8311 3102 Character Database.
jdaggett@7355 3103
jdaggett@7355 3104 <p class=note> Implementors should take care to verify that a given
jdaggett@7355 3105 caseless string comparison implementation uses this precise algorithm and
jdaggett@7355 3106 not assume that a given platform string matching routine follows it, as
jdaggett@7355 3107 many of these have locale-specific behavior or use some level of string
jdaggett@7355 3108 normalization.
jdaggett@7355 3109
jdaggett@7355 3110 <p class=note> For authors this means that font family names are matched
jdaggett@8272 3111 case insensitively, whether those names exist in a platform font or in the
jdaggett@8311 3112 <a href="#at-font-face-rule"><code>@font-face</code></a> rules contained
jdaggett@8311 3113 in a stylesheet. Authors should take care to ensure that names use a
jdaggett@8311 3114 character sequence consistent with the actual font family name,
jdaggett@8311 3115 particularly when using combining characters such as diacritical marks.
jdaggett@8311 3116 For example, a family name that contains an uppercase A (U+0041) followed
jdaggett@8311 3117 by a combining ring (U+030A) will <strong>not</strong> match a name that
jdaggett@8311 3118 looks identical but which uses the precomposed lowercase a-ring character
jdaggett@8311 3119 (U+00E5) instead of the combining sequence.
jdaggett@7309 3120
jdaggett@7309 3121 <h3 id=font-style-matching><span class=secno>5.2 </span>Matching font
jdaggett@2457 3122 styles</h3>
jdaggett@2457 3123
jdaggett@6701 3124 <p>The procedure for choosing fonts consists of iterating over the font
jdaggett@531 3125 families determined by the font-family property, selecting a font face
jdaggett@531 3126 with the appropriate style based on other font properties and then
jdaggett@7311 3127 determining whether a glyph exists for a given character. This is done
jdaggett@7311 3128 using the <dfn id=character-map>character map</dfn> of the font, data
jdaggett@7311 3129 which maps characters to the default glyph for that character. Codepoint
jdaggett@6701 3130 sequences consisting of a base character followed by a sequence of
jdaggett@6701 3131 combining characters are treated slightly differently, see the section on
jdaggett@6701 3132 <a href="#cluster-matching">cluster matching</a> below.
jdaggett@531 3133
jdaggett@7232 3134 <p>For this procedure, the <dfn id=default-face>default face</dfn> for a
jdaggett@7232 3135 given font family is defined to be the face that would be selected if all
jdaggett@7232 3136 font style properties were set to their initial value.
jdaggett@7232 3137
jdaggett@531 3138 <ol id=fontmatchingalg>
jdaggett@2457 3139 <li>Using the computed font property values for a given element, the user
jdaggett@2457 3140 agent starts with the first family name in the fontlist specified by the
jdaggett@8278 3141 <a href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8278 3142 class=property>font-family</code>’</a> property.
jdaggett@2457 3143
jdaggett@2457 3144 <li>If the family name is unquoted and is a generic family name, the user
jdaggett@2457 3145 agent looks up the appropriate font family name to be used. User agents
jdaggett@2457 3146 may choose the generic font family to use based on the language of the
jdaggett@2457 3147 containing element or the Unicode range of the character.
jdaggett@2457 3148
jdaggett@2457 3149 <li>For other family names, the user agent attempts to find the family
jdaggett@8311 3150 name among fonts defined via <a
jdaggett@8311 3151 href="#at-font-face-rule"><code>@font-face</code></a> rules and then
jdaggett@8311 3152 among available system fonts, matching names with a case-insensitive
jdaggett@8311 3153 comparison as outlined <a href="#font-family-casing">in the section
jdaggett@8311 3154 above</a>. On systems containing fonts with multiple localized font
jdaggett@8311 3155 family names, user agents must match any of these names independent of
jdaggett@8311 3156 the underlying system locale or platform API used. If the font resources
jdaggett@8311 3157 defined for a given face in an <a
jdaggett@8311 3158 href="#at-font-face-rule"><code>@font-face</code></a> rule are either not
jdaggett@8311 3159 available or contain invalid font data, then the face should be treated
jdaggett@8311 3160 as not present in the family. If no faces are present for a family
jdaggett@8311 3161 defined via <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 3162 rules, the family should be treated as missing; matching a platform font
jdaggett@8311 3163 with the same name must not occur in this case.
jdaggett@2457 3164
jdaggett@2457 3165 <li>If a font family match occurs, the user agent assembles the set of
jdaggett@6701 3166 font faces in that family and then narrows the set to a single face using
jdaggett@6701 3167 other font properties in the order given below:
jdaggett@2457 3168 <ol id=fontstylematchingalg>
jdaggett@8278 3169 <li><a href="#propdef-font-stretch"
jdaggett@8278 3170 title="font-stretch!!property">‘<code
jdaggett@8278 3171 class=property>font-stretch</code>’</a> is tried first. If the
jdaggett@8278 3172 matching set contains faces with width values matching the <a
jdaggett@8278 3173 href="#propdef-font-stretch" title="font-stretch!!property">‘<code
jdaggett@8278 3174 class=property>font-stretch</code>’</a> value, faces with other width
jdaggett@4624 3175 values are removed from the matching set. If there is no face that
jdaggett@4624 3176 exactly matches the width value the nearest width is used instead. If
jdaggett@8278 3177 the value of <a href="#propdef-font-stretch"
jdaggett@8278 3178 title="font-stretch!!property">‘<code
jdaggett@8279 3179 class=property>font-stretch</code>’</a> is ‘<a href="#normal"><code
jdaggett@8279 3180 class=property>normal</code></a>’ or one of the condensed values,
jdaggett@8278 3181 narrower width values are checked first, then wider values. If the
jdaggett@8278 3182 value of <a href="#propdef-font-stretch"
jdaggett@8278 3183 title="font-stretch!!property">‘<code
jdaggett@8278 3184 class=property>font-stretch</code>’</a> is one of the expanded
jdaggett@4624 3185 values, wider values are checked first, followed by narrower values.
jdaggett@4624 3186 Once the closest matching width has been determined by this process,
jdaggett@4624 3187 faces with other widths are removed from the matching set.
jdaggett@4624 3188
jdaggett@8278 3189 <li><a href="#propdef-font-style" title="font-style!!property">‘<code
jdaggett@8278 3190 class=property>font-style</code>’</a> is tried next. If the value of
jdaggett@8278 3191 <a href="#propdef-font-style" title="font-style!!property">‘<code
jdaggett@8278 3192 class=property>font-style</code>’</a> is ‘<a href="#italic"><code
jdaggett@8278 3193 class=property>italic</code></a>’, italic faces are checked first,
jdaggett@8278 3194 then oblique, then normal faces. If the value is ‘<a
jdaggett@8278 3195 href="#oblique"><code class=property>oblique</code></a>’, oblique
jdaggett@8278 3196 faces are checked first, then italic faces and then normal faces. If
jdaggett@8279 3197 the value is ‘<a href="#normal"><code
jdaggett@8279 3198 class=property>normal</code></a>’, normal faces are checked first,
jdaggett@8279 3199 then oblique faces, then italic faces. Faces with other style values
jdaggett@8279 3200 are excluded from the matching set. User agents are permitted to
jdaggett@8279 3201 distinguish between italic and oblique faces within platform font
jdaggett@8279 3202 families but this is not required, they may treat all italic or oblique
jdaggett@8311 3203 faces as italic faces. However, within font families defined via <a
jdaggett@8311 3204 href="#at-font-face-rule"><code>@font-face</code></a> rules, italic and
jdaggett@8311 3205 oblique faces must be distinguished using the value of the <a
jdaggett@8311 3206 href="#descdef-font-style" title="font-style!!descriptor">‘<code
jdaggett@8278 3207 class=property>font-style</code>’</a> descriptor.
jdaggett@8278 3208
jdaggett@8278 3209 <li><a href="#propdef-font-weight"
jdaggett@8278 3210 title="font-weight!!property">‘<code
jdaggett@8278 3211 class=property>font-weight</code>’</a> is matched next, it will
jdaggett@8278 3212 always reduce the matching set to a single font face. If bolder/lighter
jdaggett@8278 3213 relative weights are used, the effective weight is calculated based on
jdaggett@8278 3214 the inherited weight value, as described in the definition of the <a
jdaggett@8278 3215 href="#propdef-font-weight" title="font-weight!!property">‘<code
jdaggett@8278 3216 class=property>font-weight</code>’</a> property. Given the desired
jdaggett@4624 3217 weight and the weights of faces in the matching set after the steps
jdaggett@4624 3218 above, if the desired weight is available that face matches. Otherwise,
jdaggett@4624 3219 a weight is chosen using the rules below:
jdaggett@531 3220 <ul>
jdaggett@531 3221 <li>If the desired weight is less than 400, weights below the desired
jdaggett@531 3222 weight are checked in descending order followed by weights above the
jdaggett@531 3223 desired weight in ascending order until a match is found.
jdaggett@531 3224
jdaggett@531 3225 <li>If the desired weight is greater than 500, weights above the
jdaggett@531 3226 desired weight are checked in ascending order followed by weights
jdaggett@531 3227 below the desired weight in descending order until a match is found.
jdaggett@531 3228
jdaggett@531 3229 <li>If the desired weight is 400, 500 is checked first and then the
jdaggett@531 3230 rule for desired weights less than 400 is used.
jdaggett@531 3231
jdaggett@531 3232 <li>If the desired weight is 500, 400 is checked first and then the
jdaggett@532 3233 rule for desired weights less than 400 is used.
jdaggett@531 3234 </ul>
jdaggett@531 3235
jdaggett@4624 3236 <li><span class=property>‘<a href="#propdef-font-size"><code
jdaggett@4624 3237 class=property>font-size</code></a>’</span> must be matched within a
jdaggett@4624 3238 UA-dependent margin of tolerance. (Typically, sizes for scalable fonts
jdaggett@4624 3239 are rounded to the nearest whole pixel, while the tolerance for
jdaggett@4624 3240 bitmapped fonts could be as large as 20%.) Further computations, e.g.,
jdaggett@4624 3241 by ‘<code class=property>em</code>’ values in other properties, are
jdaggett@4624 3242 based on the <span class=property>‘<a href="#propdef-font-size"><code
jdaggett@4624 3243 class=property>font-size</code></a>’</span> value that is used, not
jdaggett@4624 3244 the one that is specified.
jdaggett@531 3245 </ol>
jdaggett@531 3246
jdaggett@7232 3247 <li>
jdaggett@7232 3248 <p>If no matching face exists or the matched face does not contain a
jdaggett@7232 3249 glyph for the character to be rendered, the next family name is selected
jdaggett@7232 3250 and the previous two steps repeated. Glyphs from other faces in the
jdaggett@7232 3251 family are not considered. The only exception is that user agents may
jdaggett@7232 3252 optionally substitute a synthetic version of the <a
jdaggett@7232 3253 href="#default-face"><em>default face</em></a> if that face supports a
jdaggett@7232 3254 given glyph (e.g. a synthetic italic version of the regular face may be
jdaggett@7232 3255 used if the italic face doesn't support glyphs for Arabic).</p>
jdaggett@7242 3256 <!-- resolution on the above: http://lists.w3.org/Archives/Public/www-style/2012Nov/0292.html -->
jdaggett@7242 3257
jdaggett@8311 3258 <p>If the matched font is defined via an <a
jdaggett@8311 3259 href="#at-font-face-rule"><code>@font-face</code></a> rule and needs to
jdaggett@8311 3260 be downloaded, the font resource is downloaded. While the download
jdaggett@8311 3261 occurs, the user agent can either wait until the font is downloaded or
jdaggett@8311 3262 render once with substituted font metrics and render again once the font
jdaggett@8311 3263 is downloaded.</p>
jdaggett@531 3264
jdaggett@531 3265 <li>If there are no more font families to be evaluated and no matching
jdaggett@8363 3266 face has been found, then the user agent performs a <dfn
jdaggett@8363 3267 id=system-font-fallback>system font fallback</dfn> procedure to find the
jdaggett@8363 3268 best match for the character to be rendered. The result of this procedure
jdaggett@8363 3269 may vary across user agents.
jdaggett@531 3270
jdaggett@531 3271 <li>If a particular character cannot be displayed using any font, the user
jdaggett@531 3272 agent should indicate by some means that a character is not being
jdaggett@2457 3273 displayed, displaying either a symbolic representation of the missing
jdaggett@2457 3274 glyph (e.g. using a <a
jdaggett@2457 3275 href="http://en.wikipedia.org/wiki/Last_resort_font">Last Resort
jdaggett@2457 3276 Font</a>) or using the missing character glyph from a default font.
jdaggett@512 3277 </ol>
jdaggett@2457 3278
jdaggett@7309 3279 <h3 id=cluster-matching><span class=secno>5.3 </span>Cluster matching</h3>
jdaggett@6701 3280
jdaggett@6701 3281 <p>When text contains characters such as combining diacritics, ideally the
jdaggett@6701 3282 base character should be rendered using the same font as the diacritic,
jdaggett@6701 3283 this assures proper placement of the diacritic. For this reason, the font
jdaggett@6701 3284 matching algorithm for clusters is more specialized than the general case
jdaggett@6701 3285 of matching a single character by itself. For sequences containing
jdaggett@6701 3286 variation selectors, which indicate the precise glyph to be used for a
jdaggett@8363 3287 given character, user agents always attempt <a
jdaggett@8363 3288 href="#system-font-fallback"><em>system font fallback</em></a> to find the
jdaggett@8363 3289 appropriate glyph before using the default glyph of the base character.
jdaggett@6701 3290
jdaggett@7020 3291 <p>A font is considered to <em>support</em> a given character if (1) the
jdaggett@7311 3292 character is contained in the font's <a
jdaggett@7311 3293 href="#character-map"><em>character map</em></a> and (2) if required by
jdaggett@7020 3294 the containing script, shaping information is available for that
jdaggett@7311 3295 character. Some legacy fonts may include a given character in the <a
jdaggett@7311 3296 href="#character-map"><em>character map</em></a> but lack the shaping
jdaggett@7311 3297 information (e.g. <a
jdaggett@7020 3298 href="http://www.microsoft.com/typography/otspec/ttochap1.htm">OpenType
jdaggett@7020 3299 layout tables</a> or <a
jdaggett@7103 3300 href="http://scripts.sil.org/cms/scripts/page.php?site_id=projects&amp;item_id=graphite_techAbout">Graphite
jdaggett@7020 3301 tables</a>) necessary for correctly rendering text runs containing that
jdaggett@7020 3302 character.
jdaggett@7020 3303
jdaggett@6701 3304 <p>A sequence of codepoints containing combining diacritics or other
jdaggett@6701 3305 modifiers is termed a grapheme cluster (see <a href="#CSS3TEXT"
jdaggett@6701 3306 rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a> for a more complete
jdaggett@6701 3307 description). For a given cluster containing a base character, <em>b</em>
jdaggett@6701 3308 and a sequence of combining characters <em>c1, c2…</em>, the entire
jdaggett@6701 3309 cluster is matched using these steps:
jdaggett@6701 3310
jdaggett@6701 3311 <ol>
jdaggett@6701 3312 <li>For each family in the font list, a face is chosen using the style
jdaggett@6701 3313 selection rules defined in the previous section.
jdaggett@6701 3314 <ol>
jdaggett@7020 3315 <li>If all characters in the sequence <em>b + c1 + c2 …</em> are
jdaggett@7021 3316 completely supported by the font, select this font for the sequence.
jdaggett@6701 3317
jdaggett@6701 3318 <li>If a sequence of multiple codepoints is canonically equivalent to a
jdaggett@7021 3319 single character and the font supports that character, select this font
jdaggett@7021 3320 for the sequence.
jdaggett@6701 3321 </ol>
jdaggett@6701 3322
jdaggett@6701 3323 <li>If no font was found in the font list in step 1:
jdaggett@6701 3324 <ol>
jdaggett@6701 3325 <li>If <em>c1</em> is a variation selector, system fallback must be used
jdaggett@6701 3326 to find a font that supports the full sequence of <em>b + c1</em>. If
jdaggett@6701 3327 no font on the system supports the full sequence, match the single
jdaggett@6701 3328 character <em>b</em> using the normal procedure for matching single
jdaggett@6701 3329 characters and ignore the variation selector. Note: a sequence with
jdaggett@6701 3330 more than one variation selector is treated as an encoding error and
jdaggett@6701 3331 the trailing selectors are ignored.
jdaggett@6701 3332
jdaggett@6701 3333 <li>Otherwise, the user agent may optionally use system font fallback to
jdaggett@6701 3334 match a font that supports the entire cluster.
jdaggett@6701 3335 </ol>
jdaggett@6701 3336
jdaggett@6701 3337 <li>If no font is found in step 2, use the matching sequence from step 1
jdaggett@6701 3338 to determine the longest sequence that is completely matched by a font in
jdaggett@6701 3339 the font list and attempt to match the remaining combining characters
jdaggett@6701 3340 separately using the rules for single characters.
jdaggett@6701 3341 </ol>
jdaggett@6701 3342
jdaggett@7309 3343 <h3 id=char-handling-issues><span class=secno>5.4 </span>Character handling
jdaggett@2457 3344 issues</h3>
jdaggett@2457 3345
jdaggett@2461 3346 <p>The procedure above is always performed on text runs containing Unicode
jdaggett@2461 3347 characters, documents using legacy encodings are assumed to have been
jdaggett@7311 3348 transcoded before matching fonts. For fonts containing <a
jdaggett@7311 3349 href="#character-map"><em title="character map">character maps</em></a>
jdaggett@7311 3350 for both legacy encodings and Unicode, the contents of the legacy encoding
jdaggett@7311 3351 <a href="#character-map"><em>character map</em></a> must have no effect on
jdaggett@7311 3352 the results of the font matching process.
jdaggett@2461 3353
jdaggett@2461 3354 <p>The font matching process does not assume that text runs are in either
jdaggett@2461 3355 normalized or denormalized form (see <a href="#CHARMOD-NORM"
jdaggett@3042 3356 rel=biblioentry>[CHARMOD-NORM]<!--{{CHARMOD-NORM}}--></a> for more
jdaggett@2461 3357 details). Layout engines often convert base character plus combining
jdaggett@6701 3358 character sequences into precomposed characters if they exist. The font
jdaggett@6701 3359 matching algorithm outlined here supports both ways and fonts can
jdaggett@6701 3360 generally support either but variations can occur. Authors should always
jdaggett@6701 3361 tailor their choice of fonts to their content, including whether that
jdaggett@6701 3362 content contains normalized or denormalized character streams.
jdaggett@2457 3363
jdaggett@2457 3364 <p>If a given character is a Private-Use Area Unicode codepoint and none of
jdaggett@2457 3365 the fonts in the fontlist contain a glyph for that codepoint, user agents
jdaggett@2457 3366 must display some form of missing glyph symbol for that character rather
jdaggett@8363 3367 than attempting <a href="#system-font-fallback"><em>system font
jdaggett@8363 3368 fallback</em></a> for that codepoint. When matching the replacement
jdaggett@8363 3369 character U+FFFD, user agents may skip the font matching process and
jdaggett@8363 3370 immediately display some form of missing glyph symbol, they are not
jdaggett@8363 3371 required to display the glyph from the font that would be selected by the
jdaggett@8363 3372 font matching process.
jdaggett@2457 3373
jdaggett@2457 3374 <p>In general, the fonts for a given family will all have the same or
jdaggett@7311 3375 similar <a href="#character-map"><em title="character map">character
jdaggett@7311 3376 maps</em></a>. The process outlined here is designed to handle even font
jdaggett@7311 3377 families containing faces with widely variant <a href="#character-map"><em
jdaggett@7311 3378 title="character map">character maps</em></a>. However, authors are
jdaggett@7311 3379 cautioned that the use of such families can lead to unexpected results.
jdaggett@2457 3380
jdaggett@2457 3381 <p>Optimizations of this process are allowed provided that an
jdaggett@2457 3382 implementation behaves as if the algorithm had been followed exactly.
jdaggett@2457 3383 Matching occurs in a well-defined order to insure that the results are as
jdaggett@2457 3384 consistent as possible across user agents, given an identical set of
jdaggett@2509 3385 available fonts and rendering technology.
jdaggett@2509 3386
jdaggett@7309 3387 <h3 id=font-matching-changes><span class=secno>5.5 </span>Font matching
jdaggett@2509 3388 changes since CSS 2.1</h3>
jdaggett@2509 3389
jdaggett@2509 3390 <p>The algorithm above is different from CSS 2.1 in a number of key places.
jdaggett@2509 3391 These changes were made to better reflect actual font matching behavior
jdaggett@2509 3392 across user agent implementations.
jdaggett@2509 3393
jdaggett@2509 3394 <p>Differences compared to the font matching algorithm in CSS 2.1:
jdaggett@2509 3395
jdaggett@2509 3396 <ul>
jdaggett@2509 3397 <li>The algorithm includes font-stretch matching.
jdaggett@2509 3398
jdaggett@2509 3399 <li>All possible font-style matching scenarios are delineated.
jdaggett@2509 3400
jdaggett@2509 3401 <li>Small-caps fonts are not matched as part of the font matching process,
jdaggett@2509 3402 they are now handled via font features.
jdaggett@2509 3403
jdaggett@2509 3404 <li>Unicode variation selector matching is required.
jdaggett@6701 3405
jdaggett@6701 3406 <li>Cluster sequences are matched as a unit.
jdaggett@2509 3407 </ul>
jdaggett@531 3408
jdaggett@7309 3409 <h3 id=font-matching-examples><span class=secno>5.6 </span>Font matching
jdaggett@6701 3410 examples</h3>
jdaggett@6701 3411
jdaggett@531 3412 <div class=example>
jdaggett@531 3413 <p>It's useful to note that the CSS selector syntax may be used to create
jdaggett@531 3414 language-sensitive typography. For example, some Chinese and Japanese
jdaggett@1149 3415 characters are unified to have the same Unicode code point, although the
jdaggett@890 3416 abstract glyphs are not the same in the two languages.
jdaggett@531 3417
jdaggett@531 3418 <pre>*:lang(ja-jp) { font: 900 14pt/16pt &quot;Heisei Mincho W9&quot;, serif; }
jdaggett@531 3419 *:lang(zh-tw) { font: 800 14pt/16.5pt &quot;Li Sung&quot;, serif; }
jdaggett@512 3420 </pre>
jdaggett@531 3421
jdaggett@531 3422 <p>This selects any element that has the given language - Japanese or
jdaggett@890 3423 Traditional Chinese - and uses the appropriate font.
jdaggett@512 3424 </div>
jdaggett@1662 3425
jdaggett@6699 3426 <h2 id=font-rend-props><span class=secno>6 </span>Font Feature Properties</h2>
jdaggett@1662 3427
jdaggett@1856 3428 <p>Modern font technologies support a variety of advanced typographic and
jdaggett@1856 3429 language-specific font features. Using these features, a single font can
jdaggett@1856 3430 provide glyphs for a wide range of ligatures, contextual and stylistic
jdaggett@1856 3431 alternates, tabular and old-style figures, small capitals, automatic
jdaggett@1856 3432 fractions, swashes, and alternates specific to a given language. To allow
jdaggett@8313 3433 authors control over these font capabilities, the ‘<code
jdaggett@8313 3434 class=property>font-variant</code>’ property has been expanded for CSS3.
jdaggett@8313 3435 It now functions as a shorthand for a set of properties that provide
jdaggett@8313 3436 control over stylistic font features.
jdaggett@1856 3437
jdaggett@1856 3438 <h3 id=glyph-selection-positioning><span class=secno>6.1 </span>Glyph
jdaggett@1856 3439 selection and positioning</h3>
jdaggett@1856 3440
jdaggett@1856 3441 <p>Simple fonts used for displaying Latin text use a very basic processing
jdaggett@8313 3442 model. Fonts contain a <a href="#character-map"><em>character map</em></a>
jdaggett@8313 3443 which maps each character to a glyph for that character. Glyphs for
jdaggett@8313 3444 subsequent characters are simply placed one after the other along a run of
jdaggett@8313 3445 text. Modern font formats such as OpenType and AAT (Apple Advanced
jdaggett@8313 3446 Typography) use a richer processing model. The glyph for a given character
jdaggett@8313 3447 can be chosen and positioned not just based on the codepoint of the
jdaggett@8313 3448 character itself, but also on adjacent characters as well as the language,
jdaggett@8313 3449 script, and features enabled for the text. Font features may be required
jdaggett@8313 3450 for specific scripts, or recommended as enabled by default or they might
jdaggett@8313 3451 be stylistic features meant to be used under author control.
jdaggett@1856 3452
jdaggett@1856 3453 <p>For a good visual overview of these features, see the <a
jdaggett@1856 3454 href="#OPENTYPE-FONT-GUIDE"
jdaggett@1856 3455 rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
jdaggett@1856 3456 For a detailed description of glyph processing for OpenType fonts, see <a
jdaggett@1856 3457 href="#WINDOWS-GLYPH-PROC"
jdaggett@1856 3458 rel=biblioentry>[WINDOWS-GLYPH-PROC]<!--{{WINDOWS-GLYPH-PROC}}--></a>.
jdaggett@1856 3459
jdaggett@8313 3460 <p>Stylistic font features can be classified into two broad categories:
jdaggett@6177 3461 ones that affect the harmonization of glyph shapes with the surrounding
jdaggett@8313 3462 context, such as kerning and ligature features, and ones such as the
jdaggett@6177 3463 small-caps, subscript/superscript and alternate features that affect shape
jdaggett@6177 3464 selection.
jdaggett@6176 3465
jdaggett@8313 3466 <p>The subproperties of <a href="#propdef-font-variant"
jdaggett@8313 3467 title="font-variant!!property">‘<code
jdaggett@8313 3468 class=property>font-variant</code>’</a> listed below are used to control
jdaggett@8313 3469 these stylistic font features. They do not control features that are
jdaggett@8313 3470 required for displaying certain scripts, such as the OpenType features
jdaggett@8313 3471 used when displaying Arabic or Indic language text. They affect glyph
jdaggett@8313 3472 selection and positioning, but do not affect font selection as described
jdaggett@8313 3473 in the font matching section (except in cases required for compatibility
jdaggett@8313 3474 with CSS 2.1).
jdaggett@1856 3475
jdaggett@1856 3476 <p>To assure consistent behavior across user agents, the equivalent
jdaggett@8313 3477 OpenType property settings are listed for individual properties and are
jdaggett@8313 3478 normative. When using other font formats these should be used as a
jdaggett@8313 3479 guideline to map CSS font feature property values to specific font
jdaggett@8313 3480 features.
jdaggett@1856 3481
jdaggett@1856 3482 <h3 id=language-specific-support><span class=secno>6.2
jdaggett@1856 3483 </span>Language-specific display</h3>
jdaggett@1856 3484
jdaggett@1856 3485 <p>OpenType also supports language-specific glyph selection and
jdaggett@1856 3486 positioning, so that text can be displayed correctly in cases where the
jdaggett@8313 3487 language dictates a specific display behavior. Many languages share a
jdaggett@8313 3488 common script, but the shape of certain letters can vary across those
jdaggett@8313 3489 languages. For example, certain Cyrillic letters have different shapes in
jdaggett@8313 3490 Russian text than in Bulgarian. In Latin text, it's common to render "fi"
jdaggett@8313 3491 with an explicit fi-ligature that lacks a dot on the "i". However, in
jdaggett@8313 3492 languages such as Turkish which uses both a dotted-i and a dotless-i, it's
jdaggett@8313 3493 important to not use this ligature or use a specialized version that
jdaggett@8313 3494 contains a dot over the "i". The example below shows language-specific
jdaggett@8313 3495 variations based on stylistic traditions found in Spanish, Italian and
jdaggett@8313 3496 French orthography:
jdaggett@2515 3497
jdaggett@2515 3498 <div class=featex><img alt="language specific forms, spanish"
jdaggett@2515 3499 src=locl-1.png></div>
jdaggett@2515 3500
jdaggett@2515 3501 <div class=featex><img alt="language specific forms, italian"
jdaggett@2515 3502 src=locl-2.png></div>
jdaggett@2515 3503
jdaggett@2515 3504 <div class=featex><img alt="language specific forms, french"
jdaggett@2515 3505 src=locl-3.png></div>
jdaggett@1856 3506
jdaggett@8313 3507 <p>If the content language of the element is known according to the rules
jdaggett@7355 3508 of the <a
jdaggett@7355 3509 href="http://www.w3.org/TR/CSS21/conform.html#doclanguage">document
jdaggett@7355 3510 language</a>, user agents are required to infer the OpenType language
jdaggett@7355 3511 system from the content language and use that when selecting and
jdaggett@7355 3512 positioning glyphs using an OpenType font.
jdaggett@7355 3513
jdaggett@7355 3514 <p>For OpenType fonts, in some cases it may be necessary to explicitly
jdaggett@7355 3515 declare the OpenType language to be used, for example when displaying text
jdaggett@7355 3516 in a given language that uses the typographic conventions of another
jdaggett@7355 3517 language or when the font does not explicitly support a given language but
jdaggett@7355 3518 supports a language that shares common typographic conventions. The ‘<a
jdaggett@4624 3519 href="#propdef-font-language-override"><code
jdaggett@4624 3520 class=property>font-language-override</code></a>’ property is used for
jdaggett@8225 3521 this purpose.</p>
jdaggett@1662 3522 <!-- prop: font-kerning -->
jdaggett@1662 3523
jdaggett@1856 3524 <h3 id=font-kerning-prop><span class=secno>6.3 </span>Kerning: the <a
jdaggett@1662 3525 href="#propdef-font-kerning">font-kerning</a> property</h3>
jdaggett@1662 3526
jdaggett@4624 3527 <table class=propdef id=namefont-kerningvalueauto-normal-noneini>
jdaggett@1662 3528 <tbody>
jdaggett@1662 3529 <tr>
jdaggett@1662 3530 <td>Name:
jdaggett@1662 3531
jdaggett@1662 3532 <td><dfn id=propdef-font-kerning>font-kerning</dfn>
jdaggett@1662 3533
jdaggett@1662 3534 <tr>
jdaggett@1662 3535 <td>Value:
jdaggett@1662 3536
jdaggett@8278 3537 <td><a href="#font-kerning-auto-value"
jdaggett@8278 3538 title="auto!!font-kerning">auto</a> | <a
jdaggett@8278 3539 href="#font-kerning-normal-value"
jdaggett@8278 3540 title="normal!!font-kerning">normal</a> | <a
jdaggett@8278 3541 href="#font-kerning-none-value" title="none!!font-kerning">none</a>
jdaggett@1662 3542
jdaggett@1662 3543 <tr>
jdaggett@1662 3544 <td>Initial:
jdaggett@1662 3545
jdaggett@1856 3546 <td>auto
jdaggett@1662 3547
jdaggett@1662 3548 <tr>
jdaggett@1662 3549 <td>Applies to:
jdaggett@1662 3550
jdaggett@1662 3551 <td>all elements
jdaggett@1662 3552
jdaggett@1662 3553 <tr>
jdaggett@1662 3554 <td>Inherited:
jdaggett@1662 3555
jdaggett@1662 3556 <td>yes
jdaggett@1662 3557
jdaggett@1662 3558 <tr>
jdaggett@1662 3559 <td>Percentages:
jdaggett@1662 3560
jdaggett@1662 3561 <td>N/A
jdaggett@1662 3562
jdaggett@1662 3563 <tr>
jdaggett@1662 3564 <td>Media:
jdaggett@1662 3565
jdaggett@1662 3566 <td>visual
jdaggett@1662 3567
jdaggett@1662 3568 <tr>
jdaggett@1662 3569 <td>Computed value:
jdaggett@1662 3570
jdaggett@1662 3571 <td>as specified
jdaggett@7377 3572
jdaggett@7377 3573 <tr>
jdaggett@7377 3574 <td>Animatable:
jdaggett@7377 3575
jdaggett@7377 3576 <td>no
jdaggett@1662 3577 </table>
jdaggett@1662 3578
jdaggett@2509 3579 <p>Kerning is the contextual adjustment of inter-glyph spacing. This
jdaggett@2509 3580 property controls metric kerning, kerning that utilizes adjustment data
jdaggett@8276 3581 contained in the font.
jdaggett@8276 3582
jdaggett@8276 3583 <dl>
jdaggett@8278 3584 <dt><dfn id=font-kerning-auto-value title="auto!!font-kerning">auto</dfn>
jdaggett@8276 3585
jdaggett@8276 3586 <dd>Specifies that kerning is applied at the discretion of the user agent
jdaggett@8276 3587
jdaggett@8278 3588 <dt><dfn id=font-kerning-normal-value
jdaggett@8278 3589 title="normal!!font-kerning">normal</dfn>
jdaggett@8276 3590
jdaggett@8276 3591 <dd>Specifies that kerning is applied
jdaggett@8276 3592
jdaggett@8278 3593 <dt><dfn id=font-kerning-none-value title="none!!font-kerning">none</dfn>
jdaggett@8276 3594
jdaggett@8276 3595 <dd>Specifies that kerning is not applied
jdaggett@8276 3596 </dl>
jdaggett@1662 3597
jdaggett@1662 3598 <p>For fonts that do not include kerning data this property will have no
jdaggett@1662 3599 visible effect. When rendering with OpenType fonts, the <a
jdaggett@1662 3600 href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>
jdaggett@2515 3601 specification suggests that kerning be enabled by default. When kerning is
jdaggett@6436 3602 enabled, the OpenType <span class=tag>kern</span> feature is enabled (for
jdaggett@8276 3603 vertical text runs the <span class=tag>vkrn</span> feature is enabled
jdaggett@8276 3604 instead). User agents must also support fonts that only support kerning
jdaggett@8276 3605 via data contained in a <span class=tag>kern</span> font table, as
jdaggett@8276 3606 detailed in the OpenType specification. If the ‘<code
jdaggett@8276 3607 class=property>letter-spacing</code>’ property is defined, kerning
jdaggett@8276 3608 adjustments are considered part of the default spacing and letter spacing
jdaggett@8276 3609 adjustments are made after kerning has been applied.
jdaggett@8276 3610
jdaggett@8276 3611 <p>When set to ‘<code class=property>auto</code>’, user agents can
jdaggett@8276 3612 determine whether to apply kerning or not based on a number of factors:
jdaggett@8276 3613 text size, script, or other factors that influence text processing speed.
jdaggett@8279 3614 Authors who want proper kerning should use ‘<a href="#normal"><code
jdaggett@8279 3615 class=property>normal</code></a>’ to explicitly enable kerning.
jdaggett@8279 3616 Likewise, some authors may prefer to disable kerning in situations where
jdaggett@8279 3617 performance is more important than precise appearance. However, in
jdaggett@8279 3618 well-designed modern implementations the use of kerning generally does not
jdaggett@8279 3619 have a large impact on text rendering speed.</p>
jdaggett@6176 3620 <!-- prop: font-variant-ligatures -->
jdaggett@6176 3621
jdaggett@6176 3622 <h3 id=font-variant-ligatures-prop><span class=secno>6.4 </span>Ligatures:
jdaggett@6176 3623 the <a href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
jdaggett@6176 3624 property</h3>
jdaggett@6176 3625
jdaggett@6436 3626 <table class=propdef id=namefont-variant-ligaturesvaluenormal-no>
jdaggett@6176 3627 <tbody>
jdaggett@6176 3628 <tr>
jdaggett@6176 3629 <td>Name:
jdaggett@6176 3630
jdaggett@6176 3631 <td><dfn id=propdef-font-variant-ligatures>font-variant-ligatures</dfn>
jdaggett@6176 3632
jdaggett@6176 3633 <tr>
jdaggett@6176 3634 <td>Value:
jdaggett@6176 3635
jdaggett@8278 3636 <td><a href="#font-variant-ligatures-normal-value"
jdaggett@8278 3637 title="normal!!font-variant-ligatures">normal</a> | <a
jdaggett@8278 3638 href="#font-variant-ligatures-none-value"
jdaggett@8278 3639 title="none!!font-variant-ligatures">none</a> | [ <a
jdaggett@8225 3640 href="#common-lig-values"><var>&lt;common-lig-values&gt;</var></a> ||
jdaggett@8225 3641 <a
jdaggett@8225 3642 href="#discretionary-lig-values"><var>&lt;discretionary-lig-values&gt;</var></a>
jdaggett@8225 3643 || <a
jdaggett@8225 3644 href="#historical-lig-values"><var>&lt;historical-lig-values&gt;</var></a>
jdaggett@8225 3645 || <a
jdaggett@8225 3646 href="#contextual-alt-values"><var>&lt;contextual-alt-values&gt;</var></a>
jdaggett@8225 3647 ]
jdaggett@6176 3648
jdaggett@6176 3649 <tr>
jdaggett@6176 3650 <td>Initial:
jdaggett@6176 3651
jdaggett@6176 3652 <td>normal
jdaggett@6176 3653
jdaggett@6176 3654 <tr>
jdaggett@6176 3655 <td>Applies to:
jdaggett@6176 3656
jdaggett@6176 3657 <td>all elements
jdaggett@6176 3658
jdaggett@6176 3659 <tr>
jdaggett@6176 3660 <td>Inherited:
jdaggett@6176 3661
jdaggett@6176 3662 <td>yes
jdaggett@6176 3663
jdaggett@6176 3664 <tr>
jdaggett@6176 3665 <td>Percentages:
jdaggett@6176 3666
jdaggett@6176 3667 <td>N/A
jdaggett@6176 3668
jdaggett@6176 3669 <tr>
jdaggett@6176 3670 <td>Media:
jdaggett@6176 3671
jdaggett@6176 3672 <td>visual
jdaggett@6176 3673
jdaggett@6176 3674 <tr>
jdaggett@6176 3675 <td>Computed value:
jdaggett@6176 3676
jdaggett@6176 3677 <td>as specified
jdaggett@7377 3678
jdaggett@7377 3679 <tr>
jdaggett@7377 3680 <td>Animatable:
jdaggett@7377 3681
jdaggett@7377 3682 <td>no
jdaggett@6176 3683 </table>
jdaggett@6176 3684
jdaggett@6436 3685 <p>Ligatures and contextual forms are ways of combining glyphs to produce
jdaggett@8276 3686 more harmonized forms.
jdaggett@6176 3687
jdaggett@6176 3688 <pre
jdaggett@8225 3689 class=prod><dfn id=common-lig-values><var>&lt;common-lig-values&gt;</var></dfn> = [ <a href="#common-ligatures">common-ligatures</a> | <a href="#no-common-ligatures">no-common-ligatures</a> ]</pre>
jdaggett@6176 3690
jdaggett@6176 3691 <pre
jdaggett@8225 3692 class=prod><dfn id=discretionary-lig-values><var>&lt;discretionary-lig-values&gt;</var></dfn> = [ <a href="#discretionary-ligatures">discretionary-ligatures</a> | <a href="#no-discretionary-ligatures">no-discretionary-ligatures</a> ]</pre>
jdaggett@6176 3693
jdaggett@6176 3694 <pre
jdaggett@8225 3695 class=prod><dfn id=historical-lig-values><var>&lt;historical-lig-values&gt;</var></dfn> = [ <a href="#historical-ligatures">historical-ligatures</a> | <a href="#no-historical-ligatures">no-historical-ligatures</a> ]</pre>
jdaggett@6176 3696
jdaggett@6176 3697 <pre
jdaggett@8225 3698 class=prod><dfn id=contextual-alt-values><var>&lt;contextual-alt-values&gt;</var></dfn> = [ <a href="#contextual">contextual</a> | <a href="#no-contextual">no-contextual</a> ]</pre>
jdaggett@6176 3699
jdaggett@6176 3700 <p>Individual values have the following meanings:
jdaggett@6176 3701
jdaggett@6176 3702 <dl>
jdaggett@8278 3703 <dt><dfn id=font-variant-ligatures-normal-value
jdaggett@8278 3704 title="normal!!font-variant-ligatures">normal</dfn>
jdaggett@8278 3705
jdaggett@8279 3706 <dd>A value of ‘<a href="#normal"><code
jdaggett@8279 3707 class=property>normal</code></a>’ specifies that common default
jdaggett@8279 3708 features are enabled, <a href="#font-feature-resolution">as described in
jdaggett@8279 3709 detail in the next section</a>. For OpenType fonts, common ligatures and
jdaggett@8279 3710 contextual forms are on by default, discretionary and historical
jdaggett@8279 3711 ligatures are not.
jdaggett@8278 3712
jdaggett@8278 3713 <dt><dfn id=font-variant-ligatures-none-value
jdaggett@8278 3714 title="none!!font-variant-ligatures">none</dfn>
jdaggett@8276 3715
jdaggett@8276 3716 <dd>Specifies that all types of ligatures and contextual forms covered by
jdaggett@8276 3717 this property are explicitly disabled. In situations where ligatures are
jdaggett@8276 3718 not considered necessary, this may improve the speed of text rendering.
jdaggett@8276 3719
jdaggett@6176 3720 <dt><dfn id=common-ligatures>common-ligatures</dfn>
jdaggett@6176 3721
jdaggett@6436 3722 <dd>Enables display of common ligatures (OpenType features: <span
jdaggett@6436 3723 class=tag>liga, clig</span>). For OpenType fonts, common ligatures are
jdaggett@6436 3724 enabled by default.
jdaggett@6176 3725 </dl>
jdaggett@6176 3726
jdaggett@6176 3727 <div class=featex><img alt="common ligature example" src=liga.png></div>
jdaggett@6176 3728
jdaggett@6176 3729 <dl>
jdaggett@6176 3730 <dt><dfn id=no-common-ligatures>no-common-ligatures</dfn>
jdaggett@6176 3731
jdaggett@6436 3732 <dd>Disables display of common ligatures (OpenType features: <span
jdaggett@6436 3733 class=tag>liga, clig</span>).
jdaggett@6176 3734
jdaggett@6176 3735 <dt><dfn id=discretionary-ligatures>discretionary-ligatures</dfn>
jdaggett@6176 3736
jdaggett@6436 3737 <dd>Enables display of discretionary ligatures (OpenType feature: <span
jdaggett@8277 3738 class=tag>dlig</span>). Which ligatures are discretionary or optional is
jdaggett@8277 3739 decided by the type designer, so authors will need to refer to the
jdaggett@6176 3740 documentation of a given font to understand which ligatures are
jdaggett@6176 3741 considered discretionary.
jdaggett@6176 3742 </dl>
jdaggett@6176 3743
jdaggett@6176 3744 <div class=featex><img alt="discretionary ligature example" src=dlig.png></div>
jdaggett@6176 3745
jdaggett@6176 3746 <dl>
jdaggett@6176 3747 <dt><dfn id=no-discretionary-ligatures>no-discretionary-ligatures</dfn>
jdaggett@6176 3748
jdaggett@6436 3749 <dd>Disables display of discretionary ligatures (OpenType feature: <span
jdaggett@6436 3750 class=tag>dlig</span>).
jdaggett@6176 3751
jdaggett@6176 3752 <dt><dfn id=historical-ligatures>historical-ligatures</dfn>
jdaggett@6176 3753
jdaggett@6436 3754 <dd>Enables display of historical ligatures (OpenType feature: <span
jdaggett@6436 3755 class=tag>hlig</span>).
jdaggett@6176 3756 </dl>
jdaggett@6176 3757
jdaggett@6176 3758 <div class=featex><img alt="historical ligature example" src=hlig.png></div>
jdaggett@6176 3759
jdaggett@6176 3760 <dl>
jdaggett@6176 3761 <dt><dfn id=no-historical-ligatures>no-historical-ligatures</dfn>
jdaggett@6176 3762
jdaggett@6436 3763 <dd>Disables display of historical ligatures (OpenType feature: <span
jdaggett@6436 3764 class=tag>hlig</span>).
jdaggett@6176 3765
jdaggett@6176 3766 <dt><dfn id=contextual>contextual</dfn>
jdaggett@6176 3767
jdaggett@6436 3768 <dd>Enables display of contextual alternates (OpenType feature: <span
jdaggett@6436 3769 class=tag>calt</span>). Although not strictly a ligature feature, like
jdaggett@6176 3770 ligatures this feature is commonly used to harmonize the shapes of glyphs
jdaggett@6436 3771 with the surrounding context. For OpenType fonts, this feature is on by
jdaggett@6436 3772 default.
jdaggett@6176 3773 </dl>
jdaggett@6176 3774
jdaggett@6176 3775 <div class=featex><img alt="contextual alternate example" src=calt.png></div>
jdaggett@6176 3776
jdaggett@6176 3777 <dl>
jdaggett@6176 3778 <dt><dfn id=no-contextual>no-contextual</dfn>
jdaggett@6176 3779
jdaggett@6436 3780 <dd>Disables display of contextual alternates (OpenType feature: <span
jdaggett@6436 3781 class=tag>calt</span>).
jdaggett@6176 3782 </dl>
jdaggett@6176 3783
jdaggett@6176 3784 <p>Required ligatures, needed for correctly rendering complex scripts, are
jdaggett@8278 3785 not affected by the settings above, including ‘<code
jdaggett@8278 3786 class=property>none</code>’ (OpenType feature: <span
jdaggett@6436 3787 class=tag>rlig</span>).</p>
jdaggett@3460 3788 <!-- prop: font-variant-position -->
jdaggett@3460 3789
jdaggett@6176 3790 <h3 id=font-variant-position-prop><span class=secno>6.5 </span>Subscript
jdaggett@3638 3791 and superscript forms: the <a
jdaggett@3460 3792 href="#propdef-font-variant-position">font-variant-position</a> property</h3>
jdaggett@3460 3793
jdaggett@4624 3794 <table class=propdef id=namefont-variant-positionvaluenormal-sub>
jdaggett@1662 3795 <tbody>
jdaggett@1662 3796 <tr>
jdaggett@1662 3797 <td>Name:
jdaggett@1662 3798
jdaggett@3460 3799 <td><dfn id=propdef-font-variant-position>font-variant-position</dfn>
jdaggett@1662 3800
jdaggett@1662 3801 <tr>
jdaggett@1662 3802 <td>Value:
jdaggett@1662 3803
jdaggett@8279 3804 <td><span title="normal!!font-variant-position">normal</span> | <a
jdaggett@8279 3805 href="#sub">sub</a> | <a href="#super">super</a>
jdaggett@1732 3806
jdaggett@1732 3807 <tr>
jdaggett@1732 3808 <td>Initial:
jdaggett@1732 3809
jdaggett@1732 3810 <td>normal
jdaggett@1732 3811
jdaggett@1732 3812 <tr>
jdaggett@1732 3813 <td>Applies to:
jdaggett@1732 3814
jdaggett@1732 3815 <td>all elements
jdaggett@1732 3816
jdaggett@1732 3817 <tr>
jdaggett@1732 3818 <td>Inherited:
jdaggett@1732 3819
jdaggett@1732 3820 <td>yes
jdaggett@1732 3821
jdaggett@1732 3822 <tr>
jdaggett@1732 3823 <td>Percentages:
jdaggett@1732 3824
jdaggett@1732 3825 <td>N/A
jdaggett@1732 3826
jdaggett@1732 3827 <tr>
jdaggett@1732 3828 <td>Media:
jdaggett@1732 3829
jdaggett@1732 3830 <td>visual
jdaggett@1732 3831
jdaggett@1732 3832 <tr>
jdaggett@1732 3833 <td>Computed value:
jdaggett@1732 3834
jdaggett@1732 3835 <td>as specified
jdaggett@7377 3836
jdaggett@7377 3837 <tr>
jdaggett@7377 3838 <td>Animatable:
jdaggett@7377 3839
jdaggett@7377 3840 <td>no
jdaggett@1732 3841 </table>
jdaggett@1732 3842
jdaggett@5890 3843 <p>This property is used to enable typographic subscript and superscript
jdaggett@5890 3844 glyphs. These are alternate glyphs designed within the same em-box as
jdaggett@5890 3845 default glyphs and are intended to be laid out on the same baseline as the
jdaggett@5890 3846 default glyphs, with no resizing or repositioning of the baseline. They
jdaggett@5890 3847 are explicitly designed to match the surrounding text and to be more
jdaggett@5890 3848 readable without affecting the line height.
jdaggett@3511 3849
jdaggett@3511 3850 <div class=figure><img alt="comparison between real subscript glyphs and
jdaggett@3511 3851 synthesized ones" src=realsubscripts.png>
jdaggett@3511 3852 <p class=caption>Subscript glyphs (top) vs. typical synthesized subscripts
jdaggett@3511 3853 (bottom)
jdaggett@3511 3854 </div>
jdaggett@3460 3855
jdaggett@8279 3856 <p>Individual values have the following meanings:
jdaggett@8279 3857
jdaggett@8279 3858 <dl>
jdaggett@8279 3859 <dt><dfn id=normal>normal</dfn>
jdaggett@8279 3860
jdaggett@8279 3861 <dd>None of the features listed below are enabled.
jdaggett@8279 3862
jdaggett@8279 3863 <dt><dfn id=sub>sub</dfn>
jdaggett@8279 3864
jdaggett@8279 3865 <dd>Enables display of subscript variants (OpenType feature: <span
jdaggett@8279 3866 class=tag>subs</span>).
jdaggett@8279 3867
jdaggett@8279 3868 <dt><dfn id=super>super</dfn>
jdaggett@8279 3869
jdaggett@8279 3870 <dd>Enables display of superscript variants (OpenType feature: <span
jdaggett@8279 3871 class=tag>sups</span>).
jdaggett@8279 3872 </dl>
jdaggett@5890 3873
jdaggett@5890 3874 <p>Because of the semantic nature of subscripts and superscripts, when the
jdaggett@8279 3875 value is either ‘<a href="#sub"><code class=property>sub</code></a>’
jdaggett@8279 3876 or ‘<a href="#super"><code class=property>super</code></a>’ for a
jdaggett@8279 3877 given contiguous run of text, if a variant glyph is not available for all
jdaggett@8279 3878 the characters in the run, simulated glyphs must be synthesized for all
jdaggett@8279 3879 characters using reduced forms of the glyphs that would be used without
jdaggett@8280 3880 this feature applied. This is done per run to avoid a mixture of variant
jdaggett@8280 3881 glyphs and synthesized ones that would not align correctly. In the case of
jdaggett@8280 3882 OpenType fonts that lack subscript or superscript glyphs for a given
jdaggett@8280 3883 character, user agents must use the appropriate subscript and superscript
jdaggett@8280 3884 metrics specified in the selected font's <a
jdaggett@3460 3885 href="http://www.microsoft.com/typography/otspec/os2.htm#subxs">OS/2
jdaggett@3460 3886 table</a> <a href="#OPENTYPE"
jdaggett@5891 3887 rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> to calculate the size
jdaggett@5891 3888 and offset of the synthesized substitutes.
jdaggett@2461 3889
jdaggett@8280 3890 <div class=figure><img alt="alternate superscripts vs. glyphs synthesized
jdaggett@8280 3891 using superscript metrics" src=superscript-alt-synth.png>
jdaggett@8280 3892 <p class=caption>Superscript alternate glyph (left), synthesized
jdaggett@8280 3893 superscript glyphs (middle), and incorrect mixture of the two (right)
jdaggett@8280 3894 </div>
jdaggett@8280 3895
jdaggett@2461 3896 <p>In the past, user agents have used font-size and vertical-align to
jdaggett@8279 3897 simulate subscripts and superscripts for the <a class=tag
jdaggett@8279 3898 href="#sub">sub</a> and <span class=tag>sup</span> elements. To allow a
jdaggett@8279 3899 backwards compatible way of defining subscripts and superscripts, it is
jdaggett@8279 3900 recommended that authors use conditional rules <a href="#CSS3-CONDITIONAL"
jdaggett@3460 3901 rel=biblioentry>[CSS3-CONDITIONAL]<!--{{CSS3-CONDITIONAL}}--></a> so that
jdaggett@5890 3902 older user agents will still render subscripts and superscripts via the
jdaggett@5890 3903 older mechanism.
jdaggett@5890 3904
jdaggett@5890 3905 <p>Authors should note that fonts typically only provide subscript and
jdaggett@5890 3906 superscript glyphs for a subset of all characters supported by the font.
jdaggett@8280 3907 For example, while subscript and superscript glyphs are often available
jdaggett@8280 3908 for Latin numbers, glyphs for punctuation and letter characters are less
jdaggett@8280 3909 frequently provided. The synthetic fallback rules defined for this
jdaggett@8280 3910 property assure that subscripts and superscripts will always appear but
jdaggett@8280 3911 the appearance may not match author expectations if the font used does not
jdaggett@8280 3912 provide the appropriate alternate glyph for all characters contained in a
jdaggett@8280 3913 subscript or superscript.
jdaggett@8280 3914
jdaggett@8280 3915 <p>This property is not cumulative. Applying it to elements within a
jdaggett@5890 3916 subscript or superscript won't nest the placement of a subscript or
jdaggett@5890 3917 superscript glyph. Images contained within text runs where the value of
jdaggett@8279 3918 this property is ‘<a href="#sub"><code class=property>sub</code></a>’
jdaggett@8279 3919 or ‘<a href="#super"><code class=property>super</code></a>’ will be
jdaggett@8279 3920 drawn just as they would if the value was ‘<a href="#normal"><code
jdaggett@8364 3921 class=property>normal</code></a>’. The variant glyphs are laid out just
jdaggett@8364 3922 as default glyphs are. There is no shift in the placement along the
jdaggett@8364 3923 baseline, so the use of these glyphs doesn't affect the linebox height.</p>
jdaggett@8364 3924 <!-- due to lack of consensus, couldn't resolve on exact positioning of text decorations:
jdaggett@8364 3925 http://www.w3.org/2013/06/06-css-minutes.html#item03 -->
jdaggett@8280 3926
jdaggett@8280 3927 <p>Because of these limitations, ‘<a
jdaggett@8280 3928 href="#propdef-font-variant-position"><code
jdaggett@8280 3929 class=property>font-variant-position</code></a>’ is not recommended for
jdaggett@8280 3930 use in user agent stylesheets. Authors should use it in cases where
jdaggett@5890 3931 subscripts or superscripts will only contain the narrow range of
jdaggett@5890 3932 characters supported by the fonts specified.
jdaggett@2509 3933
jdaggett@2461 3934 <div class=example>
jdaggett@8279 3935 <p>A typical user agent default style for the <a class=tag
jdaggett@8279 3936 href="#sub">sub</a> element:</p>
jdaggett@2461 3937
jdaggett@2461 3938 <pre>sub {
jdaggett@2461 3939 vertical-align: sub;
jdaggett@2461 3940 font-size: smaller;
jdaggett@2461 3941 line-height: normal;
jdaggett@2461 3942 }
jdaggett@2461 3943 </pre>
jdaggett@2461 3944
jdaggett@3460 3945 <p>Using font-variant-position to specify typographic subscripts in a way
jdaggett@3460 3946 that will still show subscripts in older user agents:</p>
jdaggett@3460 3947
jdaggett@3460 3948 <pre>@supports ( font-variant-position: sub ) {
jdaggett@3460 3949
jdaggett@3460 3950 sub {
jdaggett@8280 3951 vertical-align: baseline;
jdaggett@3460 3952 font-size: 100%;
jdaggett@3460 3953 line-height: inherit;
jdaggett@3460 3954 font-variant-position: sub;
jdaggett@3460 3955 }
jdaggett@3460 3956
jdaggett@2461 3957 }
jdaggett@2461 3958 </pre>
jdaggett@2461 3959
jdaggett@4624 3960 <p>User agents that support the ‘<a
jdaggett@4624 3961 href="#propdef-font-variant-position"><code
jdaggett@4624 3962 class=property>font-variant-position</code></a>’ property will select a
jdaggett@4624 3963 subscript variant glyph and render this without adjusting the baseline or
jdaggett@4624 3964 font-size. Older user agents will ignore the ‘<a
jdaggett@4624 3965 href="#propdef-font-variant-position"><code
jdaggett@4624 3966 class=property>font-variant-position</code></a>’ property definition
jdaggett@4624 3967 and use the standard defaults for subscripts.</p>
jdaggett@2461 3968 </div>
jdaggett@2118 3969 <!-- prop: font-variant-caps -->
jdaggett@2118 3970
jdaggett@2118 3971 <h3 id=font-variant-caps-prop><span class=secno>6.6 </span>Capitalization:
jdaggett@1662 3972 the <a href="#propdef-font-variant-caps">font-variant-caps</a> property</h3>
jdaggett@1662 3973
jdaggett@5809 3974 <table class=propdef id=namefont-variant-capsvaluenormal-small-c>
jdaggett@1662 3975 <tbody>
jdaggett@1662 3976 <tr>
jdaggett@1662 3977 <td>Name:
jdaggett@1662 3978
jdaggett@1662 3979 <td><dfn id=propdef-font-variant-caps>font-variant-caps</dfn>
jdaggett@1662 3980
jdaggett@1662 3981 <tr>
jdaggett@1662 3982 <td>Value:
jdaggett@1662 3983
jdaggett@8278 3984 <td><a href="#font-variant-caps-normal-value"
jdaggett@8278 3985 title="normal!!font-variant-caps">normal</a> | <a
jdaggett@8278 3986 href="#small-caps">small-caps</a> | <a
jdaggett@8278 3987 href="#all-small-caps">all-small-caps</a> | <a
jdaggett@8278 3988 href="#petite-caps">petite-caps</a> | <a
jdaggett@8278 3989 href="#all-petite-caps">all-petite-caps</a> | <a
jdaggett@8278 3990 href="#unicase">unicase</a> | <a href="#titling-caps">titling-caps</a>
jdaggett@1662 3991
jdaggett@1662 3992 <tr>
jdaggett@1662 3993 <td>Initial:
jdaggett@1662 3994
jdaggett@1662 3995 <td>normal
jdaggett@1662 3996
jdaggett@1662 3997 <tr>
jdaggett@1662 3998 <td>Applies to:
jdaggett@1662 3999
jdaggett@1662 4000 <td>all elements
jdaggett@1662 4001
jdaggett@1662 4002 <tr>
jdaggett@1662 4003 <td>Inherited:
jdaggett@1662 4004
jdaggett@1662 4005 <td>yes
jdaggett@1662 4006
jdaggett@1662 4007 <tr>
jdaggett@1662 4008 <td>Percentages:
jdaggett@1662 4009
jdaggett@1662 4010 <td>N/A
jdaggett@1662 4011
jdaggett@1662 4012 <tr>
jdaggett@1662 4013 <td>Media:
jdaggett@1662 4014
jdaggett@1662 4015 <td>visual
jdaggett@1662 4016
jdaggett@1662 4017 <tr>
jdaggett@1662 4018 <td>Computed value:
jdaggett@1662 4019
jdaggett@1662 4020 <td>as specified
jdaggett@7377 4021
jdaggett@7377 4022 <tr>
jdaggett@7377 4023 <td>Animatable:
jdaggett@7377 4024
jdaggett@7377 4025 <td>no
jdaggett@1662 4026 </table>
jdaggett@1662 4027
jdaggett@8280 4028 <p>This property allows the selection of alternate glyphs used for small or
jdaggett@8280 4029 petite capitals or for titling. These glyphs are specifically designed to
jdaggett@8280 4030 blend well with the surrounding normal glyphs, to maintain the weight and
jdaggett@8280 4031 readability which suffers when text is simply resized to fit this purpose.
jdaggett@1662 4032
jdaggett@1732 4033 <p>Individual values have the following meanings:
jdaggett@1662 4034
jdaggett@1662 4035 <dl>
jdaggett@8278 4036 <dt><dfn id=font-variant-caps-normal-value
jdaggett@8278 4037 title="normal!!font-variant-caps">normal</dfn>
jdaggett@5809 4038
jdaggett@5809 4039 <dd>None of the features listed below are enabled.
jdaggett@5809 4040
jdaggett@1662 4041 <dt><dfn id=small-caps>small-caps</dfn>
jdaggett@1662 4042
jdaggett@6436 4043 <dd>Enables display of small capitals (OpenType feature: <span
jdaggett@6436 4044 class=tag>smcp</span>). Small-caps glyphs typically use the form of
jdaggett@6436 4045 uppercase letters but are reduced to the size of lowercase letters.
jdaggett@1662 4046 </dl>
jdaggett@1662 4047
jdaggett@1662 4048 <div class=featex><img alt="small-caps example" src=smcp.png></div>
jdaggett@1662 4049
jdaggett@1662 4050 <dl>
jdaggett@1732 4051 <dt><dfn id=all-small-caps>all-small-caps</dfn>
jdaggett@1732 4052
jdaggett@1732 4053 <dd>Enables display of small capitals for both upper and lowercase letters
jdaggett@6436 4054 (OpenType features: <span class=tag>c2sc, smcp</span>).
jdaggett@1732 4055
jdaggett@1662 4056 <dt><dfn id=petite-caps>petite-caps</dfn>
jdaggett@1662 4057
jdaggett@6436 4058 <dd>Enables display of petite capitals (OpenType feature: <span
jdaggett@6436 4059 class=tag>pcap</span>).
jdaggett@1662 4060
jdaggett@1732 4061 <dt><dfn id=all-petite-caps>all-petite-caps</dfn>
jdaggett@1732 4062
jdaggett@1732 4063 <dd>Enables display of petite capitals for both upper and lowercase
jdaggett@6436 4064 letters (OpenType features: <span class=tag>c2pc, pcap</span>).
jdaggett@1732 4065
jdaggett@6648 4066 <dt><dfn id=unicase>unicase</dfn>
jdaggett@6648 4067
jdaggett@6648 4068 <dd>Enables display of mixture of small capitals for uppercase letters
jdaggett@6648 4069 with normal lowercase letters (OpenType feature: <span
jdaggett@6648 4070 class=tag>unic</span>).
jdaggett@6648 4071
jdaggett@1662 4072 <dt><dfn id=titling-caps>titling-caps</dfn>
jdaggett@1662 4073
jdaggett@6436 4074 <dd>Enables display of titling capitals (OpenType feature: <span
jdaggett@6436 4075 class=tag>titl</span>). Uppercase letter glyphs are often designed for
jdaggett@6436 4076 use with lowercase letters. When used in all uppercase titling sequences
jdaggett@6436 4077 they can appear too strong. Titling capitals are designed specifically
jdaggett@6436 4078 for this situation.
jdaggett@1662 4079 </dl>
jdaggett@1662 4080
jdaggett@6648 4081 <p>The availability of these glyphs is based on whether a given feature is
jdaggett@6648 4082 defined or not in the feature list of the font. User agents can optionally
jdaggett@6648 4083 decide this on a per-script basis but should explicitly not decide this on
jdaggett@6648 4084 a per-character basis.
jdaggett@6648 4085
jdaggett@6648 4086 <p>Some fonts may only support a subset or none of the features described
jdaggett@6648 4087 for this property. For backwards compatibility with CSS 2.1, if ‘<a
jdaggett@4624 4088 href="#small-caps"><code class=property>small-caps</code></a>’ or ‘<a
jdaggett@4624 4089 href="#all-small-caps"><code class=property>all-small-caps</code></a>’
jdaggett@4624 4090 is specified but small-caps glyphs are not available for a given font,
jdaggett@4624 4091 user agents should simulate a small-caps font, for example by taking a
jdaggett@6648 4092 normal font and replacing the glyphs for lowercase letters with scaled
jdaggett@6648 4093 versions of the glyphs for uppercase characters (replacing the glyphs for
jdaggett@6648 4094 both upper and lowercase letters in the case of ‘<a
jdaggett@4624 4095 href="#all-small-caps"><code class=property>all-small-caps</code></a>’).
jdaggett@6648 4096
jdaggett@6648 4097 <div class=figure style="padding: 0; margin: auto;"><img alt="synthetic vs.
jdaggett@6648 4098 real small-caps" class=hires src=synthetic-vs-real-small-caps.png
jdaggett@6648 4099 width=512px>
jdaggett@6648 4100 <p class=caption>Synthetic vs. real small-caps
jdaggett@6648 4101 </div>
jdaggett@6648 4102
jdaggett@6648 4103 <p>To match the surrounding text, a font may provide alternate glyphs for
jdaggett@6648 4104 caseless characters when these features are enabled but when a user agent
jdaggett@6648 4105 simulates small capitals, it must not attempt to simulate alternates for
jdaggett@6648 4106 codepoints which are considered caseless.
jdaggett@6648 4107
jdaggett@6648 4108 <div class=figure style="padding: 0; margin: auto;"><img alt="caseless
jdaggett@6648 4109 characters with small-caps, all-small-caps enabled" class=hires
jdaggett@6648 4110 src=small-capitals-variations.png width=418px>
jdaggett@6648 4111 <p class=caption>Caseless characters with small-caps, all-small-caps
jdaggett@6648 4112 enabled
jdaggett@6648 4113 </div>
jdaggett@6648 4114
jdaggett@6648 4115 <p>If either ‘<a href="#petite-caps"><code
jdaggett@4624 4116 class=property>petite-caps</code></a>’ or ‘<a
jdaggett@4624 4117 href="#all-petite-caps"><code class=property>all-petite-caps</code></a>’
jdaggett@4624 4118 is specified for a font that doesn't support these features, the property
jdaggett@4624 4119 behaves as if ‘<a href="#small-caps"><code
jdaggett@4624 4120 class=property>small-caps</code></a>’ or ‘<a
jdaggett@4624 4121 href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
jdaggett@6648 4122 respectively, had been specified. If ‘<a href="#unicase"><code
jdaggett@6648 4123 class=property>unicase</code></a>’ is specified for a font that doesn't
jdaggett@6648 4124 support that feature, the property behaves as if ‘<a
jdaggett@6648 4125 href="#small-caps"><code class=property>small-caps</code></a>’ was
jdaggett@6648 4126 applied only to lowercased uppercase letters. If ‘<a
jdaggett@6648 4127 href="#titling-caps"><code class=property>titling-caps</code></a>’ is
jdaggett@6648 4128 specified with a font that does not support this feature, this property
jdaggett@6648 4129 has no visible effect. When simulated small capital glyphs are used, for
jdaggett@4624 4130 scripts that lack uppercase and lowercase letters, ‘<a
jdaggett@4624 4131 href="#small-caps"><code class=property>small-caps</code></a>’, ‘<a
jdaggett@4624 4132 href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
jdaggett@4624 4133 ‘<a href="#petite-caps"><code class=property>petite-caps</code></a>’,
jdaggett@4624 4134 ‘<a href="#all-petite-caps"><code
jdaggett@4624 4135 class=property>all-petite-caps</code></a>’ and ‘<a
jdaggett@4624 4136 href="#unicase"><code class=property>unicase</code></a>’ have no visible
jdaggett@2462 4137 effect.
jdaggett@1662 4138
jdaggett@6648 4139 <p>When casing transforms are used to simulate small capitals, the casing
jdaggett@8280 4140 transformations must match those used for the <span
jdaggett@6648 4141 class=property>‘<code class=property>text-transform</code>’</span>
jdaggett@6648 4142 property.
jdaggett@6648 4143
jdaggett@6648 4144 <p>As a last resort, unscaled uppercase letter glyphs in a normal font may
jdaggett@6648 4145 replace glyphs in a small-caps font so that the text appears in all
jdaggett@6648 4146 uppercase letters.
jdaggett@6648 4147
jdaggett@6648 4148 <div class=figure style="padding: 0; margin: auto;"><img alt="using
jdaggett@6648 4149 all-small-caps in acronym-laden text" class=hires
jdaggett@6648 4150 src=acronym-laden-text.png width=596px>
jdaggett@6648 4151 <p class=caption>Using small capitals to improve readability in
jdaggett@6648 4152 acronym-laden text
jdaggett@6648 4153 </div>
jdaggett@6648 4154
jdaggett@1662 4155 <div class=example>
jdaggett@1662 4156 <p>Quotes rendered italicised, with small-caps on the first line:</p>
jdaggett@1662 4157
jdaggett@1662 4158 <pre>blockquote { font-style: italic; }
jdaggett@1662 4159 blockquote:first-line { font-variant: small-caps; }
jdaggett@1662 4160
jdaggett@1662 4161 &lt;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>&lt;/blockquote>
jdaggett@1662 4162 </pre>
jdaggett@1662 4163 </div>
jdaggett@2118 4164 <!-- prop: font-variant-numeric -->
jdaggett@2118 4165
jdaggett@2118 4166 <h3 id=font-variant-numeric-prop><span class=secno>6.7 </span>Numerical
jdaggett@1662 4167 formatting: the <a
jdaggett@1662 4168 href="#propdef-font-variant-numeric">font-variant-numeric</a> property</h3>
jdaggett@1662 4169
jdaggett@5809 4170 <table class=propdef id=namefont-variant-numericvaluenormal-ltnu>
jdaggett@1662 4171 <tbody>
jdaggett@1662 4172 <tr>
jdaggett@1662 4173 <td>Name:
jdaggett@1662 4174
jdaggett@1662 4175 <td><dfn id=propdef-font-variant-numeric>font-variant-numeric</dfn>
jdaggett@1662 4176
jdaggett@1662 4177 <tr>
jdaggett@1662 4178 <td>Value:
jdaggett@1662 4179
jdaggett@8278 4180 <td><a href="#font-variant-numeric-normal-value"
jdaggett@8278 4181 title="normal!!font-variant-numeric">normal</a> | [ <a
jdaggett@8225 4182 href="#numeric-figure-values"><var>&lt;numeric-figure-values&gt;</var></a>
jdaggett@8225 4183 || <a
jdaggett@8225 4184 href="#numeric-spacing-values"><var>&lt;numeric-spacing-values&gt;</var></a>
jdaggett@8225 4185 || <a
jdaggett@8225 4186 href="#numeric-fraction-values"><var>&lt;numeric-fraction-values&gt;</var></a>
jdaggett@8225 4187 || <a href="#ordinal">ordinal</a> || <a
jdaggett@8225 4188 href="#slashed-zero">slashed-zero</a> ]
jdaggett@1662 4189
jdaggett@1662 4190 <tr>
jdaggett@1662 4191 <td>Initial:
jdaggett@1662 4192
jdaggett@1662 4193 <td>normal
jdaggett@1662 4194
jdaggett@1662 4195 <tr>
jdaggett@1662 4196 <td>Applies to:
jdaggett@1662 4197
jdaggett@1662 4198 <td>all elements
jdaggett@1662 4199
jdaggett@1662 4200 <tr>
jdaggett@1662 4201 <td>Inherited:
jdaggett@1662 4202
jdaggett@1662 4203 <td>yes
jdaggett@1662 4204
jdaggett@1662 4205 <tr>
jdaggett@1662 4206 <td>Percentages:
jdaggett@1662 4207
jdaggett@1662 4208 <td>N/A
jdaggett@1662 4209
jdaggett@1662 4210 <tr>
jdaggett@1662 4211 <td>Media:
jdaggett@1662 4212
jdaggett@1662 4213 <td>visual
jdaggett@1662 4214
jdaggett@1662 4215 <tr>
jdaggett@1662 4216 <td>Computed value:
jdaggett@1662 4217
jdaggett@1662 4218 <td>as specified
jdaggett@7377 4219
jdaggett@7377 4220 <tr>
jdaggett@7377 4221 <td>Animatable:
jdaggett@7377 4222
jdaggett@7377 4223 <td>no
jdaggett@1662 4224 </table>
jdaggett@1662 4225
jdaggett@8311 4226 <p>Specifies control over numerical forms. The example below shows how some
jdaggett@8311 4227 of these values can be combined to influence the rendering of tabular data
jdaggett@8311 4228 with fonts that support these features. Within normal paragraph text,
jdaggett@8311 4229 proportional numbers are used while tabular numbers are used so that
jdaggett@8311 4230 columns of numbers line up properly:
jdaggett@1662 4231
jdaggett@1662 4232 <div class=figure style="padding: 0; margin: auto;"><img alt="combining
jdaggett@1662 4233 number styles" src=numberstyles.png>
jdaggett@1662 4234 <p class=caption>Using number styles
jdaggett@1662 4235 </div>
jdaggett@1662 4236
jdaggett@8311 4237 <p>Possible combinations:
jdaggett@8311 4238
jdaggett@8311 4239 <pre
jdaggett@8311 4240 class=prod><dfn id=numeric-figure-values><var>&lt;numeric-figure-values&gt;</var></dfn> = [ <a href="#lining-nums">lining-nums</a> | <a href="#oldstyle-nums">oldstyle-nums</a> ]</pre>
jdaggett@8311 4241
jdaggett@8311 4242 <pre
jdaggett@8311 4243 class=prod><dfn id=numeric-spacing-values><var>&lt;numeric-spacing-values&gt;</var></dfn> = [ <a href="#proportional-nums">proportional-nums</a> | <a href="#tabular-nums">tabular-nums</a> ]</pre>
jdaggett@8311 4244
jdaggett@8311 4245 <pre
jdaggett@8311 4246 class=prod><dfn id=numeric-fraction-values><var>&lt;numeric-fraction-values&gt;</var></dfn> = [ <a href="#diagonal-fractions">diagonal-fractions</a> | <a href="#stacked-fractions">stacked-fractions</a> ]</pre>
jdaggett@8311 4247
jdaggett@8311 4248 <p>Individual values have the following meanings:
jdaggett@8311 4249
jdaggett@1662 4250 <dl>
jdaggett@8311 4251 <dt><dfn id=font-variant-numeric-normal-value
jdaggett@8311 4252 title="normal!!font-variant-numeric">normal</dfn>
jdaggett@8311 4253
jdaggett@8311 4254 <dd>None of the features listed below are enabled.
jdaggett@8311 4255
jdaggett@8311 4256 <dt><dfn id=lining-nums>lining-nums</dfn>
jdaggett@8311 4257
jdaggett@8311 4258 <dd>Enables display of lining numerals (OpenType feature: <span
jdaggett@8311 4259 class=tag>lnum</span>).
jdaggett@8311 4260
jdaggett@8311 4261 <dt><dfn id=oldstyle-nums>oldstyle-nums</dfn>
jdaggett@8311 4262
jdaggett@8311 4263 <dd>Enables display of old-style numerals (OpenType feature: <span
jdaggett@8311 4264 class=tag>onum</span>).
jdaggett@8311 4265
jdaggett@8311 4266 <dt><dfn id=proportional-nums>proportional-nums</dfn>
jdaggett@8311 4267
jdaggett@8311 4268 <dd>Enables display of proportional numerals (OpenType feature: <span
jdaggett@8311 4269 class=tag>pnum</span>).
jdaggett@8311 4270
jdaggett@8311 4271 <dt><dfn id=tabular-nums>tabular-nums</dfn>
jdaggett@8311 4272
jdaggett@8311 4273 <dd>Enables display of tabular numerals (OpenType feature: <span
jdaggett@8311 4274 class=tag>tnum</span>).
jdaggett@8311 4275
jdaggett@1662 4276 <dt><dfn id=diagonal-fractions>diagonal-fractions</dfn>
jdaggett@1662 4277
jdaggett@6436 4278 <dd>Enables display of lining diagonal fractions (OpenType feature: <span
jdaggett@6436 4279 class=tag>frac</span>).
jdaggett@1662 4280 </dl>
jdaggett@1662 4281
jdaggett@1662 4282 <div class=featex><img alt="diagonal fraction example" src=frac.png></div>
jdaggett@1662 4283
jdaggett@1662 4284 <dl>
jdaggett@1662 4285 <dt><dfn id=stacked-fractions>stacked-fractions</dfn>
jdaggett@1662 4286
jdaggett@6436 4287 <dd>Enables display of lining stacked fractions (OpenType feature: <span
jdaggett@6436 4288 class=tag>afrc</span>).
jdaggett@1662 4289 </dl>
jdaggett@1662 4290
jdaggett@1662 4291 <div class=featex><img alt="stacked fraction example" src=afrc.png></div>
jdaggett@1662 4292
jdaggett@1662 4293 <dl>
jdaggett@3638 4294 <dt><dfn id=ordinal>ordinal</dfn>
jdaggett@3638 4295
jdaggett@3638 4296 <dd>Enables display of forms used with ordinal numbers (OpenType feature:
jdaggett@6436 4297 <span class=tag>ordn</span>).
jdaggett@3638 4298
jdaggett@1662 4299 <dt><dfn id=slashed-zero>slashed-zero</dfn>
jdaggett@1662 4300
jdaggett@6436 4301 <dd>Enables display of slashed zeros (OpenType feature: <span
jdaggett@6436 4302 class=tag>zero</span>).
jdaggett@1662 4303 </dl>
jdaggett@1662 4304
jdaggett@1662 4305 <div class=featex><img alt="slashed zero example" src=zero.png></div>
jdaggett@1662 4306
jdaggett@1662 4307 <div class=example id=steak-marinade>
jdaggett@1662 4308 <p>A simple flank steak marinade recipe, rendered with automatic fractions
jdaggett@1662 4309 and old-style numerals:</p>
jdaggett@1662 4310
jdaggett@1662 4311 <pre>.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; }
jdaggett@1662 4312
jdaggett@1662 4313 &lt;h4>Steak marinade:&lt;/h4>
jdaggett@1662 4314 &lt;ul>
jdaggett@1662 4315 &lt;li>&lt;span class="amount">2&lt;/span> tbsp olive oil&lt;/li>
jdaggett@1662 4316 &lt;li>&lt;span class="amount">1&lt;/span> tbsp lemon juice&lt;/li>
jdaggett@1662 4317 &lt;li>&lt;span class="amount">1&lt;/span> tbsp soy sauce&lt;/li>
jdaggett@1662 4318 &lt;li>&lt;span class="amount">1 1/2&lt;/span> tbsp dry minced onion&lt;/li>
jdaggett@1662 4319 &lt;li>&lt;span class="amount">2 1/2&lt;/span> tsp italian seasoning&lt;/li>
jdaggett@1732 4320 &lt;li>Salt &amp;amp; pepper&lt;/li>
jdaggett@1662 4321 &lt;/ul>
jdaggett@1662 4322
jdaggett@5596 4323 &lt;p>Mix the meat with the marinade and let it sit covered in the refrigerator
jdaggett@5596 4324 for a few hours or overnight.&lt;/p>
jdaggett@1662 4325 </pre>
jdaggett@8311 4326
jdaggett@8311 4327 <p>Note that the fraction feature is only applied to values not the entire
jdaggett@8311 4328 paragraph. Fonts often implement this feature using contextual rules
jdaggett@8311 4329 based on the use of the slash (‘<code class=css>/</code>’) character.
jdaggett@8311 4330 As such, it's not suitable for use as a paragraph-level style.</p>
jdaggett@1662 4331 </div>
jdaggett@2118 4332 <!-- prop: font-variant-alternates -->
jdaggett@2118 4333
jdaggett@2118 4334 <h3 id=font-variant-alternates-prop><span class=secno>6.8 </span>Alternates
jdaggett@2118 4335 and swashes: the <a
jdaggett@2118 4336 href="#propdef-font-variant-alternates">font-variant-alternates</a>
jdaggett@2118 4337 property</h3>
jdaggett@2118 4338
jdaggett@6176 4339 <table class=propdef id=namefont-variant-alternatesvaluenormal-s>
jdaggett@2118 4340 <tbody>
jdaggett@2118 4341 <tr>
jdaggett@2118 4342 <td>Name:
jdaggett@2118 4343
jdaggett@2118 4344 <td><dfn
jdaggett@2118 4345 id=propdef-font-variant-alternates>font-variant-alternates</dfn>
jdaggett@2118 4346
jdaggett@2118 4347 <tr>
jdaggett@2118 4348 <td>Value:
jdaggett@2118 4349
jdaggett@8225 4350 <td>normal | [ <a href="#stylistic"
jdaggett@8225 4351 title=stylistic>stylistic(&lt;feature-value-name&gt;)</a> || <a
jdaggett@8225 4352 href="#historical-forms">historical-forms</a> || <a href="#styleset"
jdaggett@8225 4353 title=styleset>styleset(&lt;feature-value-name&gt; #)</a> || <a
jdaggett@8225 4354 href="#character-variant"
jdaggett@8225 4355 title=character-variant>character-variant(&lt;feature-value-name&gt;
jdaggett@8225 4356 #)</a> || <a href="#swash"
jdaggett@8225 4357 title=swash>swash(&lt;feature-value-name&gt;)</a> || <a
jdaggett@8225 4358 href="#ornaments"
jdaggett@8225 4359 title=ornaments>ornaments(&lt;feature-value-name&gt;)</a> || <a
jdaggett@8225 4360 href="#annotation"
jdaggett@8225 4361 title=annotation>annotation(&lt;feature-value-name&gt;)</a> ]
jdaggett@2118 4362
jdaggett@2118 4363 <tr>
jdaggett@2118 4364 <td>Initial:
jdaggett@2118 4365
jdaggett@2118 4366 <td>normal
jdaggett@2118 4367
jdaggett@2118 4368 <tr>
jdaggett@2118 4369 <td>Applies to:
jdaggett@2118 4370
jdaggett@2118 4371 <td>all elements
jdaggett@2118 4372
jdaggett@2118 4373 <tr>
jdaggett@2118 4374 <td>Inherited:
jdaggett@2118 4375
jdaggett@2118 4376 <td>yes
jdaggett@2118 4377
jdaggett@2118 4378 <tr>
jdaggett@2118 4379 <td>Percentages:
jdaggett@2118 4380
jdaggett@2118 4381 <td>N/A
jdaggett@2118 4382
jdaggett@2118 4383 <tr>
jdaggett@2118 4384 <td>Media:
jdaggett@2118 4385
jdaggett@2118 4386 <td>visual
jdaggett@2118 4387
jdaggett@2118 4388 <tr>
jdaggett@2118 4389 <td>Computed value:
jdaggett@2118 4390
jdaggett@2118 4391 <td>as specified
jdaggett@7377 4392
jdaggett@7377 4393 <tr>
jdaggett@7377 4394 <td>Animatable:
jdaggett@7377 4395
jdaggett@7377 4396 <td>no
jdaggett@2118 4397 </table>
jdaggett@2118 4398
jdaggett@2118 4399 <p>For any given character, fonts can provide a variety of alternate glyphs
jdaggett@2118 4400 in addition to the default glyph for that character. This property
jdaggett@2118 4401 provides control over the selection of these alternate glyphs.
jdaggett@2118 4402
jdaggett@8311 4403 <p>For many of the property values listed below, several different
jdaggett@8311 4404 alternate glyphs are available. How many alternates are available and what
jdaggett@8356 4405 they represent is font-specific, so these are each marked <dfn
jdaggett@8356 4406 id=font-specific>font specific</dfn> in the value definitions below.
jdaggett@8356 4407 Because the nature of these alternates is font-specific, the <a
jdaggett@8311 4408 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8311 4409 rule is used to define values for a specific font family or set of
jdaggett@8311 4410 families that associate a font-specific numeric
jdaggett@8311 4411 <code>&lt;feature-index&gt;</code> with a custom
jdaggett@8311 4412 <code>&lt;feature-value-name&gt;</code>, which is then used in this
jdaggett@8311 4413 property to select specific alternates:
jdaggett@8311 4414
jdaggett@8311 4415 <pre>@font-feature-values Noble Script { @swash { swishy: 1; flowing: 2; } }
jdaggett@8311 4416
jdaggett@8311 4417 p {
jdaggett@8311 4418 font-family: Noble Script;
jdaggett@8311 4419 font-variant-alternates: swash(flowing); /* use swash alternate #2 */
jdaggett@8311 4420 }</pre>
jdaggett@8311 4421
jdaggett@8312 4422 <p>When a particular <code>&lt;feature-value-name&gt;</code> has not been
jdaggett@8312 4423 defined for a given family or for a particular feature type, the computed
jdaggett@8312 4424 value must be the same as if it had been defined. However, property values
jdaggett@8312 4425 that contain these undefined <code>&lt;feature-value-name&gt;</code>
jdaggett@8312 4426 identifiers must be ignored when choosing glyphs.
jdaggett@8312 4427
jdaggett@8312 4428 <pre>/* these two style rules are effectively the same */
jdaggett@8312 4429 p { font-variant-alternates: swash(unknown-value); } /* not a defined value, ignored */
jdaggett@8312 4430 p { font-variant-alternates: normal; }
jdaggett@8312 4431 </pre>
jdaggett@8312 4432
jdaggett@8312 4433 <p>This allows values to be defined and used for a given set of font
jdaggett@8312 4434 families but ignored if fallback occurs, since the font family name would
jdaggett@8312 4435 be different. If a given value is outside the range supported by a given
jdaggett@8312 4436 font, the value is ignored. These values never apply to generic font
jdaggett@8312 4437 families.
jdaggett@2556 4438
jdaggett@2118 4439 <p>Individual values have the following meanings:
jdaggett@2118 4440
jdaggett@2118 4441 <dl>
jdaggett@8278 4442 <dt><dfn id=font-variant-alternates-normal-value
jdaggett@8278 4443 title="normal!!font-variant-alternates">normal</dfn>
jdaggett@5809 4444
jdaggett@5809 4445 <dd>None of the features listed below are enabled.
jdaggett@5809 4446
jdaggett@2118 4447 <dt><dfn id=historical-forms>historical-forms</dfn>
jdaggett@2118 4448
jdaggett@6436 4449 <dd>Enables display of historical forms (OpenType feature: <span
jdaggett@6436 4450 class=tag>hist</span>).
jdaggett@2118 4451 </dl>
jdaggett@2118 4452
jdaggett@2118 4453 <div class=featex><img alt="historical form example" src=hist.png></div>
jdaggett@2118 4454
jdaggett@2118 4455 <dl>
jdaggett@8311 4456 <dt><dfn id=stylistic
jdaggett@8311 4457 title=stylistic>stylistic(&lt;feature-value-name&gt;)</dfn>
jdaggett@8311 4458
jdaggett@8356 4459 <dd>Enables display of stylistic alternates (<a
jdaggett@8356 4460 href="#font-specific"><em>font specific</em></a>, OpenType feature: <span
jdaggett@8356 4461 class=tag>salt &lt;feature-index&gt;</span>).
jdaggett@8311 4462 </dl>
jdaggett@8311 4463
jdaggett@8311 4464 <div class=featex><img alt="stylistic alternate example" src=salt.png></div>
jdaggett@8311 4465
jdaggett@8311 4466 <dl>
jdaggett@8225 4467 <dt><dfn id=styleset title=styleset>styleset(&lt;feature-value-name&gt;
jdaggett@8225 4468 #)</dfn>
jdaggett@2118 4469
jdaggett@8356 4470 <dd>Enables display with stylistic sets (<a href="#font-specific"><em>font
jdaggett@8356 4471 specific</em></a>, OpenType feature: <span
jdaggett@8356 4472 class=tag>ss&lt;feature-index&gt;</span> OpenType currently defines <span
jdaggett@8356 4473 class=tag>ss01</span> through <span class=tag>ss20</span>).
jdaggett@2118 4474 </dl>
jdaggett@2118 4475
jdaggett@2118 4476 <div class=featex><img alt="styleset example" src=ssnn.png></div>
jdaggett@2118 4477
jdaggett@2118 4478 <dl>
jdaggett@8225 4479 <dt><dfn id=character-variant
jdaggett@8225 4480 title=character-variant>character-variant(&lt;feature-value-name&gt;
jdaggett@8225 4481 #)</dfn>
jdaggett@2118 4482
jdaggett@8356 4483 <dd>Enables display of specific character variants (<a
jdaggett@8356 4484 href="#font-specific"><em>font specific</em></a>, OpenType feature: <span
jdaggett@6436 4485 class=tag>cv&lt;feature-index&gt;</span> OpenType currently defines <span
jdaggett@6436 4486 class=tag>cv01</span> through <span class=tag>cv99</span>).
jdaggett@2118 4487
jdaggett@8225 4488 <dt><dfn id=swash title=swash>swash(&lt;feature-value-name&gt;)</dfn>
jdaggett@2118 4489
jdaggett@8356 4490 <dd>Enables display of swash glyphs (<a href="#font-specific"><em>font
jdaggett@8356 4491 specific</em></a>, OpenType feature: <span class=tag>swsh
jdaggett@8356 4492 &lt;feature-index&gt;, cswh &lt;feature-index&gt;</span>).
jdaggett@2118 4493 </dl>
jdaggett@2118 4494
jdaggett@2118 4495 <div class=featex><img alt="swash example" src=swsh.png></div>
jdaggett@2118 4496
jdaggett@2118 4497 <dl>
jdaggett@8225 4498 <dt><dfn id=ornaments
jdaggett@7060 4499 title=ornaments>ornaments(&lt;feature-value-name&gt;)</dfn>
jdaggett@2118 4500
jdaggett@2118 4501 <dd>Enables replacement of default glyphs with ornaments, if provided in
jdaggett@8356 4502 the font (<a href="#font-specific"><em>font specific</em></a>, OpenType
jdaggett@8356 4503 feature: <span class=tag>ornm &lt;feature-index&gt;</span>). Some fonts
jdaggett@8356 4504 may offer ornament glyphs as alternates for a wide collection of
jdaggett@8356 4505 characters; however, displaying arbitrary characters (e.g.,
jdaggett@8356 4506 alphanumerics) as ornaments is poor practice as it distorts the semantics
jdaggett@8356 4507 of the data. Font designers are encouraged to encode all ornaments
jdaggett@8356 4508 (except those explicitly encoded in the Unicode Dingbats blocks, etc.) as
jdaggett@8356 4509 alternates for the bullet character (U+2022) to allow authors to select
jdaggett@8356 4510 the desired glyph using ‘<a href="#ornaments"><code
jdaggett@8356 4511 class=property>ornaments</code></a>’.
jdaggett@2118 4512 </dl>
jdaggett@2118 4513
jdaggett@2118 4514 <div class=featex><img alt="ornaments example" src=ornm.png></div>
jdaggett@2118 4515
jdaggett@2118 4516 <dl>
jdaggett@8225 4517 <dt><dfn id=annotation
jdaggett@7060 4518 title=annotation>annotation(&lt;feature-value-name&gt;)</dfn>
jdaggett@2118 4519
jdaggett@8356 4520 <dd>Enables display of alternate annotation forms (<a
jdaggett@8356 4521 href="#font-specific"><em>font specific</em></a>, OpenType feature: <span
jdaggett@8356 4522 class=tag>nalt &lt;feature-index&gt;</span>).
jdaggett@2118 4523 </dl>
jdaggett@2118 4524
jdaggett@2118 4525 <div class=featex><img alt="alternate annotation form example"
jdaggett@2118 4526 src=nalt.png></div>
jdaggett@2118 4527
jdaggett@2472 4528 <h3 id=font-feature-values><span class=secno>6.9 </span>Defining font
jdaggett@8311 4529 specific alternates: the <dfn id=at-font-feature-values-rule
jdaggett@8311 4530 style="font-weight: inherit; font-style:
jdaggett@8311 4531 inherit"><code>@font-feature-values</code></dfn> rule</h3>
jdaggett@2472 4532
jdaggett@4624 4533 <p>Several of the possible values of ‘<a
jdaggett@4624 4534 href="#propdef-font-variant-alternates"><code
jdaggett@4624 4535 class=property>font-variant-alternates</code></a>’ listed above are
jdaggett@8356 4536 labeled as <a href="#font-specific"><em>font specific</em></a>. For these
jdaggett@8356 4537 features fonts may define not just a single glyph but a set of alternate
jdaggett@8356 4538 glyphs with an index to select a given alternate. Since these are font
jdaggett@8356 4539 family specific, the <a
jdaggett@8311 4540 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8356 4541 rule is used to define named values for these indices for a given family.
jdaggett@8356 4542
jdaggett@8356 4543 <p class=note>See the <a href="#om-fontfeaturevalues">object model
jdaggett@8356 4544 reference section</a> for a description of the interfaces used to modify
jdaggett@8356 4545 these rules via the CSS Object Model.
jdaggett@8356 4546
jdaggett@8356 4547 <div class=example>
jdaggett@8356 4548 <p>In the case of the swash Q in the example shown above, the swash could
jdaggett@8356 4549 be specified using these style rules:</p>
jdaggett@8356 4550
jdaggett@8356 4551 <pre>
jdaggett@7041 4552
jdaggett@2472 4553 @font-feature-values Jupiter Sans {
jdaggett@7041 4554 @swash {
jdaggett@7041 4555 delicate: 1;
jdaggett@7041 4556 flowing: 2;
jdaggett@7041 4557 }
jdaggett@2472 4558 }
jdaggett@2472 4559
jdaggett@2472 4560 h2 { font-family: Jupiter Sans, sans-serif; }
jdaggett@2472 4561
jdaggett@2472 4562 /* show the second swash variant in h2 headings */
jdaggett@2472 4563 h2:first-letter { font-variant-alternates: swash(flowing); }
jdaggett@2472 4564
jdaggett@2479 4565 &lt;h2>Quick&lt;/h2></pre>
jdaggett@2472 4566
jdaggett@8356 4567 <p>When Jupiter Sans is present, the second alternate swash alternate will
jdaggett@8356 4568 be displayed. When not present, no swash character will be shown, since
jdaggett@8356 4569 the specific named value "flowing" is only defined for the Jupiter Sans
jdaggett@8356 4570 family. The @-mark indicates the name of the property value for which a
jdaggett@8356 4571 named value can be used. The name "flowing" is chosen by the author. The
jdaggett@8356 4572 index that represents each alternate is defined within a given font's
jdaggett@8356 4573 data.</p>
jdaggett@8356 4574 </div>
jdaggett@8356 4575
jdaggett@8356 4576 <h4 id=basic-syntax><span class=secno>6.9.1 </span>Basic syntax</h4>
jdaggett@8356 4577
jdaggett@8356 4578 <p>An <a
jdaggett@8356 4579 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8356 4580 rule is composed of a list of font families followed by a block containing
jdaggett@8356 4581 individual <a href="#featurevalueblock"><i
jdaggett@8356 4582 title="feature_value_block">feature value blocks</i></a> that take the
jdaggett@8356 4583 form of @-rules. Each block defines a set of named values for a specific
jdaggett@8356 4584 font feature when a given set of font families is used. Effectively, they
jdaggett@8356 4585 define a mapping of ⟨family, feature, ident⟩ → ⟨values⟩ where
jdaggett@8356 4586 ⟨values⟩ are the numeric indices used for specific features defined
jdaggett@8356 4587 for a given font.
jdaggett@8031 4588
jdaggett@8031 4589 <p>In terms of the grammar, this specification defines the following
jdaggett@8312 4590 productions:
jdaggett@8225 4591
jdaggett@8225 4592 <pre><dfn id=fontfeaturevaluesrule>font_feature_values_rule</dfn>
jdaggett@8225 4593 : <a href="#fontfeaturevaluessym"><i>FONT_FEATURE_VALUES_SYM</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#fontfamilynamelist"><i>font_family_name_list</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
jdaggett@8225 4594 '{' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevalueblock"><i>feature_value_block</i></a>? [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevalueblock"><i>feature_value_block</i></a>? ]* '}' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
jdaggett@8225 4595 ;
jdaggett@8225 4596
jdaggett@8225 4597 <dfn id=fontfamilynamelist>font_family_name_list</dfn>
jdaggett@8225 4598 : <a href="#fontfamilyname"><i>font_family_name</i></a> [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* ',' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#fontfamilyname"><i>font_family_name</i></a> ]*
jdaggett@8225 4599 ;
jdaggett@8225 4600
jdaggett@8225 4601 <dfn id=fontfamilyname>font_family_name</dfn>
jdaggett@8225 4602 : <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>STRING</i></a> | [ <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>IDENT</i></a> [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>IDENT</i></a> ]* ]
jdaggett@8225 4603 ;
jdaggett@8225 4604
jdaggett@8225 4605 <dfn id=featurevalueblock>feature_value_block</dfn>
jdaggett@8225 4606 : <a href="#featuretype"><i>feature_type</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
jdaggett@8225 4607 '{' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevaluedefinition"><i>feature_value_definition</i></a>? [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* ';' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevaluedefinition"><i>feature_value_definition</i></a>? ]* '}' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
jdaggett@8225 4608 ;
jdaggett@8225 4609
jdaggett@8225 4610 <dfn id=featuretype>feature_type</dfn>:
jdaggett@8225 4611 <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>ATKEYWORD</i></a>
jdaggett@8225 4612 ;
jdaggett@8225 4613
jdaggett@8225 4614 <dfn id=featurevaluedefinition>feature_value_definition</dfn>
jdaggett@8225 4615 : <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>IDENT</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* ':' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>NUMBER</i></a> [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>NUMBER</i></a> ]*
jdaggett@8225 4616 ;
jdaggett@8225 4617 </pre>
jdaggett@8225 4618
jdaggett@8032 4619 <p>The following new token is introduced:
jdaggett@8032 4620
jdaggett@8225 4621 <pre>@{F}{O}{N}{T}{-}{F}{E}{A}{T}{U}{R}{E}{-}{V}{A}{L}{U}{E}{S} {return <dfn id=fontfeaturevaluessym>FONT_FEATURE_VALUES_SYM</dfn>;}
jdaggett@2118 4622 </pre>
jdaggett@2118 4623
jdaggett@8356 4624 <p><a href="#featurevalueblock"><i title="feature_value_block">Feature
jdaggett@8356 4625 value blocks</i></a> are handled as <a
jdaggett@8356 4626 href="http://www.w3.org/TR/CSS2/syndata.html#at-rules">at-rules</a>, they
jdaggett@8356 4627 consist of everything up to the next block or semi-colon, whichever comes
jdaggett@8356 4628 first.
jdaggett@8356 4629
jdaggett@8356 4630 <p>The <a href="#fontfamilynamelist"><i title="font_family_name_list">font
jdaggett@8356 4631 family list</i></a> is a comma-delimited list of <a
jdaggett@8356 4632 href="#fontfamilyname"><i title="font_family_name">font family
jdaggett@8356 4633 names</i></a> that match the definition of <a
jdaggett@8356 4634 href="#family-name-value"><var>&lt;family-name&gt;</var></a> for the <a
jdaggett@8278 4635 href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8356 4636 class=property>font-family</code>’</a> property. This means that only
jdaggett@8356 4637 named font families are allowed, rules that include generic or system
jdaggett@8356 4638 fonts in the list of font families are syntax errors. However, if a user
jdaggett@8356 4639 agent defines a generic font to be a specific named font (e.g. Helvetica),
jdaggett@8356 4640 the settings associated with that family name will be used. If syntax
jdaggett@8356 4641 errors occur within the font family list, the entire rule must be ignored.
jdaggett@8356 4642
jdaggett@8356 4643 <p>Within <a href="#featurevalueblock"><i
jdaggett@8356 4644 title="feature_value_block">feature value blocks</i></a>, the <a
jdaggett@8356 4645 href="#featuretype"><i title="feature_type">feature type</i></a> is
jdaggett@8356 4646 ‘<code class=css>@</code>’ followed by the name of one of the <a
jdaggett@8356 4647 href="#font-specific"><em>font specific</em></a> property values of ‘<a
jdaggett@8356 4648 href="#propdef-font-variant-alternates"><code
jdaggett@8356 4649 class=property>font-variant-alternates</code></a>’ (e.g. <a
jdaggett@8356 4650 href="#swash"><code>@swash</code></a>). The identifiers used within
jdaggett@8356 4651 feature value definitions follow the rules of CSS user identifiers and are
jdaggett@8356 4652 case-sensitive. They are unique only for a given set of font families and
jdaggett@8356 4653 <a href="#featuretype"><i title="feature_type">feature type</i></a>. The
jdaggett@8356 4654 same identifier used with a different <a href="#featuretype"><i
jdaggett@8356 4655 title="feature_type">feature type</i></a> is treated as a separate and
jdaggett@8356 4656 distinct value. If the same identifier is defined mulitple times for a
jdaggett@8356 4657 given <a href="#featuretype"><i title="feature_type">feature type</i></a>
jdaggett@8356 4658 and font family, the last defined value is used. Values associated with a
jdaggett@8356 4659 given identifier are limited to integer values 0 or greater.
jdaggett@8356 4660
jdaggett@8356 4661 <p>When syntax errors occur within a <a href="#featurevaluedefinition"><i
jdaggett@8356 4662 title="feature_value_definition">feature value definition</i></a>, such as
jdaggett@8356 4663 invalid identifiers or values, the entire <a
jdaggett@8356 4664 href="#featurevaluedefinition"><i title="feature_value_definition">feature
jdaggett@8356 4665 value definition</i></a> must be omitted, just as syntax errors in style
jdaggett@8356 4666 declarations are handled. When the <a href="#featuretype"><i
jdaggett@8356 4667 title="feature_type">feature type</i></a> is invalid, the entire
jdaggett@8356 4668 associated <a href="#featurevalueblock"><i
jdaggett@8356 4669 title="feature_value_block">feature value block</i></a> must be ignored.
jdaggett@8356 4670
jdaggett@8356 4671 <div class=example>
jdaggett@8356 4672 <p>Rules that are equivalent given syntax error handling:</p>
jdaggett@8356 4673
jdaggett@8356 4674 <pre>@font-feature-values Bongo {
jdaggett@7679 4675 @swash { ornate: 1; }
jdaggett@7679 4676 annotation { boxed: 4; } /* should be @annotation! */
jdaggett@8031 4677 @swash { double-loops: 1; flowing: -1; } /* negative value */
jdaggett@8031 4678 @ornaments ; /* incomplete definition */
jdaggett@8031 4679 @styleset { double-W: 14; sharp-terminals: 16 1 } /* missing ; */
jdaggett@8356 4680 <a href="http://www.angryalien.com/0504/shiningbunnies.html" style="text-decoration: none; border: none;">redrum</a> /* random editing mistake */
jdaggett@7679 4681 }</pre>
jdaggett@7679 4682
jdaggett@8356 4683 <p>The example above is equivalent to:</p>
jdaggett@8356 4684
jdaggett@8356 4685 <pre>@font-feature-values Bongo {
jdaggett@7679 4686 @swash { ornate: 1; }
jdaggett@8031 4687 @swash { double-loops: 1; }
jdaggett@8031 4688 @styleset { double-W: 14; sharp-terminals: 16 1; }
jdaggett@7679 4689 }</pre>
jdaggett@8356 4690 </div>
jdaggett@7096 4691
jdaggett@8311 4692 <p>If multiple <a
jdaggett@8311 4693 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8356 4694 rules are defined for a given family, the resulting values definitions are
jdaggett@8356 4695 the union of the definitions contained within these rules. This allows a
jdaggett@8356 4696 set of named values to be defined for a given font family globally for a
jdaggett@8356 4697 site and specific additions made per-page.
jdaggett@8356 4698
jdaggett@8356 4699 <div class=example>
jdaggett@8356 4700 <p>Using both site-wide and per-page feature values:</p>
jdaggett@8356 4701
jdaggett@8356 4702 <pre>
jdaggett@2472 4703 site.css:
jdaggett@2472 4704
jdaggett@2472 4705 @font-feature-values Mercury Serif {
jdaggett@7041 4706 @styleset {
jdaggett@7041 4707 stacked-g: 3; /* "two-storey" versions of g, a */
jdaggett@7041 4708 stacked-a: 4;
jdaggett@7041 4709 }
jdaggett@2472 4710 }
jdaggett@2472 4711
jdaggett@2472 4712 page.css:
jdaggett@8277 4713
jdaggett@2472 4714 @font-feature-values Mercury Serif {
jdaggett@7041 4715 @styleset {
jdaggett@7041 4716 geometric-m: 7; /* alternate version of m */
jdaggett@7041 4717 }
jdaggett@2472 4718 }
jdaggett@8277 4719
jdaggett@2472 4720 body {
jdaggett@2472 4721 font-family: Mercury Serif, serif;
jdaggett@2472 4722
jdaggett@2472 4723 /* enable both the use of stacked g and alternate m */
jdaggett@2472 4724 font-variant-alternates: styleset(stacked-g, geometric-m);
jdaggett@2472 4725 }</pre>
jdaggett@8356 4726 </div>
jdaggett@8356 4727
jdaggett@8356 4728 <div class=example>
jdaggett@8356 4729 <p>Using a commonly named value allows authors to use a single style rule
jdaggett@8356 4730 to cover a set of fonts for which the underlying selector is different
jdaggett@8356 4731 for each font. If either font in the example below is found, a circled
jdaggett@8356 4732 number glyph will be used:</p>
jdaggett@8356 4733
jdaggett@8356 4734 <pre>@font-feature-values Taisho Gothic {
jdaggett@7041 4735 @annotation { boxed: 1; circled: 4; }
jdaggett@2118 4736 }
jdaggett@2118 4737
jdaggett@2118 4738 @font-feature-values Otaru Kisa {
jdaggett@7041 4739 @annotation { circled: 1; black-boxed: 3; }
jdaggett@2118 4740 }
jdaggett@2118 4741
jdaggett@2118 4742 h3.title {
jdaggett@2118 4743 /* circled form defined for both fonts */
jdaggett@2118 4744 font-family: Taisho Gothic, Otaru Kisa;
jdaggett@2118 4745 font-variant: annotation(circled);
jdaggett@2118 4746 }</pre>
jdaggett@8356 4747 </div>
jdaggett@8356 4748
jdaggett@8356 4749 <h4 id=multi-valued-feature-value-definitions><span class=secno>6.9.2
jdaggett@8356 4750 </span>Multi-valued feature value definitions</h4>
jdaggett@8356 4751
jdaggett@8356 4752 <p>Most <a href="#font-specific"><em>font specific</em></a> ‘<a
jdaggett@8356 4753 href="#propdef-font-variant-alternates"><code
jdaggett@8356 4754 class=property>font-variant-alternates</code></a>’ property values take
jdaggett@8356 4755 a single value (e.g. ‘<a href="#swash"><code
jdaggett@8356 4756 class=property>swash</code></a>’). The ‘<a
jdaggett@8356 4757 href="#character-variant"><code
jdaggett@8356 4758 class=property>character-variant</code></a>’ property value allows two
jdaggett@8356 4759 values and ‘<a href="#styleset"><code
jdaggett@8356 4760 class=property>styleset</code></a>’ allows an unlimited number.
jdaggett@3571 4761
jdaggett@3571 4762 <p>For the styleset property value, multiple values indicate the style sets
jdaggett@7095 4763 to be enabled. Values between 1 and 99 enable OpenType features <span
jdaggett@7095 4764 class=tag>ss01</span> through <span class=tag>ss99</span>. However, the
jdaggett@7095 4765 OpenType standard only officially defines <span class=tag>ss01</span>
jdaggett@8356 4766 through <span class=tag>ss20</span>. For OpenType fonts, values greater
jdaggett@8356 4767 than 99 or equal to 0 do not generate a syntax error when parsed but
jdaggett@8356 4768 enable no OpenType features.
jdaggett@2472 4769
jdaggett@2472 4770 <pre>@font-feature-values Mars Serif {
jdaggett@8277 4771 @styleset {
jdaggett@7041 4772 alt-g: 1; /* implies ss01 = 1 */
jdaggett@7041 4773 curly-quotes: 3; /* implies ss03 = 1 */
jdaggett@7041 4774 code: 4 5; /* implies ss04 = 1, ss05 = 1 */
jdaggett@7041 4775 }
jdaggett@7041 4776
jdaggett@7041 4777 @styleset {
jdaggett@7095 4778 dumb: 125; /* &gt;99, ignored */
jdaggett@7041 4779 }
jdaggett@7041 4780
jdaggett@7041 4781 @swash {
jdaggett@7041 4782 swishy: 3 5; /* more than 1 value for swash, syntax error */
jdaggett@7041 4783 }
jdaggett@2472 4784 }
jdaggett@2472 4785
jdaggett@2472 4786 p.codeblock {
jdaggett@2472 4787 /* implies ss03 = 1, ss04 = 1, ss05 = 1 */
jdaggett@2472 4788 font-variant-alternates: styleset(curly-quotes, code);
jdaggett@2472 4789 }</pre>
jdaggett@2472 4790
jdaggett@2472 4791 <p>For character-variant, a single value between 1 and 99 indicates the
jdaggett@6436 4792 enabling of OpenType feature <span class=tag>cv01</span> through <span
jdaggett@7095 4793 class=tag>cv99</span>. For OpenType fonts, values greater than 99 or equal
jdaggett@8356 4794 to 0 are ignored but do not generate a syntax error when parsed but enable
jdaggett@8356 4795 no OpenType features. When two values are listed, the first value
jdaggett@8356 4796 indicates the feature used and the second the value passed for that
jdaggett@8356 4797 feature. If more than two values are assigned to a given name, a syntax
jdaggett@8356 4798 error occurs and the entire <a href="#featurevaluedefinition"><i
jdaggett@8356 4799 title="feature_value_definition">feature value definition</i></a> is
jdaggett@8356 4800 ignored.
jdaggett@2472 4801
jdaggett@2472 4802 <pre>@font-feature-values MM Greek {
jdaggett@7041 4803 @character-variant { alpha-2: 1 2; } /* implies cv01 = 2 */
jdaggett@7041 4804 @character-variant { beta-3: 2 3; } /* implies cv02 = 3 */
jdaggett@8356 4805 @character-variant { epsilon: 5 3 6; } /* more than 2 values, syntax error, definition ignored */
jdaggett@7041 4806 @character-variant { gamma: 12; } /* implies cv12 = 1 */
jdaggett@7041 4807 @character-variant { zeta: 20 3; } /* implies cv20 = 3 */
jdaggett@7041 4808 @character-variant { zeta-2: 20 2; } /* implies cv20 = 2 */
jdaggett@7041 4809 @character-variant { silly: 105; } /* &gt;99, ignored */
jdaggett@7041 4810 @character-variant { dumb: 323 3; } /* &gt;99, ignored */
jdaggett@2472 4811 }
jdaggett@2472 4812
jdaggett@2472 4813 #title {
jdaggett@2472 4814 /* use the third alternate beta, first alternate gamma */
jdaggett@2472 4815 font-variant-alternates: character-variant(beta-3, gamma);
jdaggett@3571 4816 }
jdaggett@3571 4817
jdaggett@3571 4818 p {
jdaggett@3571 4819 /* zeta-2 follows zeta, implies cv20 = 2 */
jdaggett@3571 4820 font-variant-alternates: character-variant(zeta, zeta-2);
jdaggett@3571 4821 }
jdaggett@3571 4822
jdaggett@3571 4823 .special {
jdaggett@3571 4824 /* zeta follows zeta-2, implies cv20 = 3 */
jdaggett@3571 4825 font-variant-alternates: character-variant(zeta-2, zeta);
jdaggett@2472 4826 }</pre>
jdaggett@2472 4827
jdaggett@2472 4828 <div class=figure><img alt="Matching text on Byzantine seals using
jdaggett@2472 4829 character variants" src=byzantineseal.png>
jdaggett@2472 4830 <p class=caption>Byzantine seal text displayed with character variants
jdaggett@2472 4831 </div>
jdaggett@2472 4832
jdaggett@2472 4833 <div class=example>
jdaggett@2472 4834 <p>In the figure above, the text in red is rendered using a font
jdaggett@2472 4835 containing character variants that mimic the character forms found on a
jdaggett@2472 4836 Byzantine seal from the 8th century A.D. Two lines below is the same text
jdaggett@2472 4837 displayed in a font without variants. Note the two variants for U and N
jdaggett@2509 4838 used on the seal.</p>
jdaggett@2472 4839
jdaggett@2472 4840 <pre>@font-feature-values Athena Ruby {
jdaggett@7041 4841 @character-variant {
jdaggett@7041 4842 leo-B: 2 1;
jdaggett@7041 4843 leo-M: 13 3;
jdaggett@7041 4844 leo-alt-N: 14 1;
jdaggett@7041 4845 leo-N: 14 2;
jdaggett@8277 4846 leo-T: 20 1;
jdaggett@7041 4847 leo-U: 21 2;
jdaggett@7041 4848 leo-alt-U: 21 4;
jdaggett@7041 4849 }
jdaggett@2472 4850 }
jdaggett@2472 4851
jdaggett@2472 4852 p {
jdaggett@6653 4853 font-variant: discretionary-ligatures,
jdaggett@6653 4854 character-variant(leo-B, leo-M, leo-N, leo-T, leo-U);
jdaggett@2472 4855 }
jdaggett@2472 4856
jdaggett@8277 4857 span.alt-N {
jdaggett@2472 4858 font-variant-alternates: character-variant(leo-alt-N);
jdaggett@2472 4859 }
jdaggett@2472 4860
jdaggett@2472 4861 span.alt-U {
jdaggett@2472 4862 font-variant-alternates: character-variant(leo-alt-U);
jdaggett@2472 4863 }
jdaggett@2472 4864
jdaggett@2472 4865 &lt;p>ENO....UP͞RSTU&lt;span class="alt-U">U&lt;/span>͞&lt;span class="alt-U">U&lt;/span>ΚΑΙTỤẠG̣IUPNS&lt;/p>
jdaggett@2472 4866
jdaggett@8277 4867 &lt;p>LEON|ΚΑΙCONSTA|NTI&lt;span class="alt-N">N&lt;/span>OS..|STOIBAṢ.|LIṢROM|AIO&lt;span class="alt-N">N&lt;/span>&lt;/p>
jdaggett@2472 4868 </pre>
jdaggett@2118 4869 </div>
jdaggett@2118 4870
jdaggett@2118 4871 <h3 id=font-variant-east-asian-prop><span class=secno>6.10 </span>East
jdaggett@2118 4872 Asian text rendering: the <a
jdaggett@1662 4873 href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
jdaggett@1662 4874 property</h3>
jdaggett@1662 4875
jdaggett@5809 4876 <table class=propdef id=namefont-variant-east-asianvaluenormal-l>
jdaggett@1662 4877 <tbody>
jdaggett@1662 4878 <tr>
jdaggett@1662 4879 <td>Name:
jdaggett@1662 4880
jdaggett@1662 4881 <td><dfn
jdaggett@1662 4882 id=propdef-font-variant-east-asian>font-variant-east-asian</dfn>
jdaggett@1662 4883
jdaggett@1662 4884 <tr>
jdaggett@1662 4885 <td>Value:
jdaggett@1662 4886
jdaggett@8278 4887 <td><a href="#font-variant-east-asian-normal-value"
jdaggett@8278 4888 title="normal!!font-variant-east-asian">normal</a> | [ <a
jdaggett@8225 4889 href="#east-asian-variant-values"><var>&lt;east-asian-variant-values&gt;</var></a>
jdaggett@8225 4890 || <a
jdaggett@8225 4891 href="#east-asian-width-values"><var>&lt;east-asian-width-values&gt;</var></a>
jdaggett@8225 4892 || <a href="#ruby">ruby</a> ]
jdaggett@1662 4893
jdaggett@1662 4894 <tr>
jdaggett@1662 4895 <td>Initial:
jdaggett@1662 4896
jdaggett@1662 4897 <td>normal
jdaggett@1662 4898
jdaggett@1662 4899 <tr>
jdaggett@1662 4900 <td>Applies to:
jdaggett@1662 4901
jdaggett@1662 4902 <td>all elements
jdaggett@1662 4903
jdaggett@1662 4904 <tr>
jdaggett@1662 4905 <td>Inherited:
jdaggett@1662 4906
jdaggett@1662 4907 <td>yes
jdaggett@1662 4908
jdaggett@1662 4909 <tr>
jdaggett@1662 4910 <td>Percentages:
jdaggett@1662 4911
jdaggett@1662 4912 <td>N/A
jdaggett@1662 4913
jdaggett@1662 4914 <tr>
jdaggett@1662 4915 <td>Media:
jdaggett@1662 4916
jdaggett@1662 4917 <td>visual
jdaggett@1662 4918
jdaggett@1662 4919 <tr>
jdaggett@1662 4920 <td>Computed value:
jdaggett@1662 4921
jdaggett@1662 4922 <td>as specified
jdaggett@7377 4923
jdaggett@7377 4924 <tr>
jdaggett@7377 4925 <td>Animatable:
jdaggett@7377 4926
jdaggett@7377 4927 <td>no
jdaggett@1662 4928 </table>
jdaggett@1662 4929
jdaggett@6693 4930 <p>Allows control of glyph substitution and sizing in East Asian text.
jdaggett@1662 4931
jdaggett@1662 4932 <pre
jdaggett@8225 4933 class=prod><dfn id=east-asian-variant-values><var>&lt;east-asian-variant-values&gt;</var></dfn> = [ <a href="#jis78">jis78</a> | <a href="#jis83">jis83</a> | <a href="#jis90">jis90</a> | <a href="#jis04">jis04</a> | <a href="#simplified">simplified</a> | <a href="#traditional">traditional</a> ]</pre>
jdaggett@1662 4934
jdaggett@1662 4935 <pre
jdaggett@8225 4936 class=prod><dfn id=east-asian-width-values><var>&lt;east-asian-width-values&gt;</var></dfn> = [ <a href="#full-width">full-width</a> | <a href="#proportional-width">proportional-width</a> ]</pre>
jdaggett@1732 4937
jdaggett@1732 4938 <p>Individual values have the following meanings:
jdaggett@1662 4939
jdaggett@1662 4940 <dl>
jdaggett@8278 4941 <dt><dfn id=font-variant-east-asian-normal-value
jdaggett@8278 4942 title="normal!!font-variant-east-asian">normal</dfn>
jdaggett@5809 4943
jdaggett@5809 4944 <dd>None of the features listed below are enabled.
jdaggett@5809 4945
jdaggett@1662 4946 <dt><dfn id=jis78>jis78</dfn>
jdaggett@1662 4947
jdaggett@6436 4948 <dd>Enables rendering of JIS78 forms (OpenType feature: <span
jdaggett@6436 4949 class=tag>jp78</span>).
jdaggett@1662 4950 </dl>
jdaggett@1662 4951
jdaggett@1662 4952 <div class=featex><img alt="JIS78 form example" src=jp78.png></div>
jdaggett@1662 4953
jdaggett@1662 4954 <dl>
jdaggett@1662 4955 <dt><dfn id=jis83>jis83</dfn>
jdaggett@1662 4956
jdaggett@6436 4957 <dd>Enables rendering of JIS83 forms (OpenType feature: <span
jdaggett@6436 4958 class=tag>jp83</span>).
jdaggett@1662 4959
jdaggett@1662 4960 <dt><dfn id=jis90>jis90</dfn>
jdaggett@1662 4961
jdaggett@6436 4962 <dd>Enables rendering of JIS90 forms (OpenType feature: <span
jdaggett@6436 4963 class=tag>jp90</span>).
jdaggett@1662 4964
jdaggett@1662 4965 <dt><dfn id=jis04>jis04</dfn>
jdaggett@1662 4966
jdaggett@6436 4967 <dd>Enables rendering of JIS2004 forms (OpenType feature: <span
jdaggett@6436 4968 class=tag>jp04</span>).
jdaggett@6693 4969 <p>The various JIS variants reflect the glyph forms defined in different
jdaggett@6693 4970 Japanese national standards. Fonts generally include glyphs defined by
jdaggett@6693 4971 the most recent national standard but it's sometimes necessary to use
jdaggett@6693 4972 older variants, to match signage for example.</p>
jdaggett@1662 4973
jdaggett@2504 4974 <dt><dfn id=simplified>simplified</dfn>
jdaggett@2504 4975
jdaggett@6436 4976 <dd>Enables rendering of simplified forms (OpenType feature: <span
jdaggett@6436 4977 class=tag>smpl</span>).
jdaggett@2504 4978
jdaggett@2504 4979 <dt><dfn id=traditional>traditional</dfn>
jdaggett@2504 4980
jdaggett@6436 4981 <dd>Enables rendering of traditional forms (OpenType feature: <span
jdaggett@6436 4982 class=tag>trad</span>).
jdaggett@1662 4983 </dl>
jdaggett@1662 4984
jdaggett@8312 4985 <p>The ‘<a href="#simplified"><code
jdaggett@8312 4986 class=property>simplified</code></a>’ and ‘<a
jdaggett@8312 4987 href="#traditional"><code class=property>traditional</code></a>’ values
jdaggett@8312 4988 allow control over the glyph forms for characters which have been
jdaggett@8312 4989 simplified over time but for which the older, traditional form is still
jdaggett@8312 4990 used in some contexts. The exact set of characters and glyph forms will
jdaggett@8312 4991 vary to some degree by context for which a given font was designed.
jdaggett@8312 4992
jdaggett@1662 4993 <div class=featex><img alt="tradtional form example" src=trad.png></div>
jdaggett@1662 4994
jdaggett@1662 4995 <dl>
jdaggett@1662 4996 <dt><dfn id=full-width>full-width</dfn>
jdaggett@1662 4997
jdaggett@6436 4998 <dd>Enables rendering of full-width variants (OpenType feature: <span
jdaggett@6436 4999 class=tag>fwid</span>).
jdaggett@1662 5000
jdaggett@1662 5001 <dt><dfn id=proportional-width>proportional-width</dfn>
jdaggett@1662 5002
jdaggett@1662 5003 <dd>Enables rendering of proportionally-spaced variants (OpenType feature:
jdaggett@6436 5004 <span class=tag>pwid</span>).
jdaggett@1662 5005 </dl>
jdaggett@1662 5006
jdaggett@1662 5007 <div class=featex><img alt="proportionally spaced Japanese example"
jdaggett@1662 5008 src=pwid.png></div>
jdaggett@1662 5009
jdaggett@3638 5010 <dl>
jdaggett@3638 5011 <dt><dfn id=ruby>ruby</dfn>
jdaggett@3638 5012
jdaggett@6436 5013 <dd>Enables display of ruby variant glyphs (OpenType feature: <span
jdaggett@6436 5014 class=tag>ruby</span>). Since ruby text is generally smaller than the
jdaggett@3638 5015 associated body text, font designers can design special glyphs for use
jdaggett@3638 5016 with ruby that are more readable than scaled down versions of the default
jdaggett@3638 5017 glyphs. Only glyph selection is affected, there is no associated font
jdaggett@3638 5018 scaling or other change that affects line layout. The red ruby text below
jdaggett@3638 5019 is shown with default glyphs (top) and with ruby variant glyphs (bottom).
jdaggett@3638 5020 Note the slight difference in stroke thickness.
jdaggett@3638 5021 </dl>
jdaggett@3638 5022
jdaggett@3638 5023 <div class=featex><img alt="ruby variant example" src=rubyshinkansen.png></div>
jdaggett@3638 5024
jdaggett@2118 5025 <h3 id=font-variant-prop><span class=secno>6.11 </span>Overall shorthand
jdaggett@1856 5026 for font rendering: the <a href="#propdef-font-variant">font-variant</a>
jdaggett@1662 5027 property</h3>
jdaggett@1662 5028
jdaggett@6436 5029 <table class=propdef id=namefont-variantvaluenormal-none-ltcommo>
jdaggett@1662 5030 <tbody>
jdaggett@1662 5031 <tr>
jdaggett@1662 5032 <td>Name:
jdaggett@1662 5033
jdaggett@8278 5034 <td><dfn id=propdef-font-variant
jdaggett@8278 5035 title="font-variant!!property">font-variant</dfn>
jdaggett@1662 5036
jdaggett@1662 5037 <tr>
jdaggett@1662 5038 <td>Value:
jdaggett@1662 5039
jdaggett@8278 5040 <td><a href="#font-variant-normal-value"
jdaggett@8278 5041 title="normal!!font-variant">normal</a> | <a
jdaggett@8278 5042 href="#font-variant-none-value" title="none!!font-variant">none</a> | [
jdaggett@8278 5043 <a href="#common-lig-values"><var>&lt;common-lig-values&gt;</var></a>
jdaggett@8278 5044 || <a
jdaggett@8225 5045 href="#discretionary-lig-values"><var>&lt;discretionary-lig-values&gt;</var></a>
jdaggett@8225 5046 || <a
jdaggett@8225 5047 href="#historical-lig-values"><var>&lt;historical-lig-values&gt;</var></a>
jdaggett@8225 5048 || <a
jdaggett@8225 5049 href="#contextual-alt-values"><var>&lt;contextual-alt-values&gt;</var></a>
jdaggett@8225 5050 || <a href="#stylistic"><var
jdaggett@8225 5051 title=stylistic>stylistic(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 5052 href="#historical-forms"><var>historical-forms</var></a> || <a
jdaggett@8225 5053 href="#styleset"><var
jdaggett@8225 5054 title=styleset>styleset(&lt;feature-value-name&gt; #)</var></a> || <a
jdaggett@8225 5055 href="#character-variant"><var
jdaggett@8225 5056 title=character-variant>character-variant(&lt;feature-value-name&gt;
jdaggett@8225 5057 #)</var></a> || <a href="#swash"><var
jdaggett@8225 5058 title=swash>swash(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 5059 href="#ornaments"><var
jdaggett@8225 5060 title=ornaments>ornaments(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 5061 href="#annotation"><var
jdaggett@8225 5062 title=annotation>annotation(&lt;feature-value-name&gt;)</var></a> || [
jdaggett@8225 5063 <a href="#small-caps"><i>small-caps</i></a> | <a
jdaggett@8225 5064 href="#all-small-caps"><i>all-small-caps</i></a> | <a
jdaggett@8225 5065 href="#petite-caps"><i>petite-caps</i></a> | <a
jdaggett@8225 5066 href="#all-petite-caps"><i>all-petite-caps</i></a> | <a
jdaggett@8225 5067 href="#unicase"><i>unicase</i></a> | <a
jdaggett@8225 5068 href="#titling-caps"><i>titling-caps</i></a> ] || <a
jdaggett@8225 5069 href="#numeric-figure-values"><var>&lt;numeric-figure-values&gt;</var></a>
jdaggett@8225 5070 || <a
jdaggett@8225 5071 href="#numeric-spacing-values"><var>&lt;numeric-spacing-values&gt;</var></a>
jdaggett@8225 5072 || <a
jdaggett@8225 5073 href="#numeric-fraction-values"><var>&lt;numeric-fraction-values&gt;</var></a>
jdaggett@8225 5074 || <a href="#ordinal"><i>ordinal</i></a> || <a
jdaggett@8225 5075 href="#slashed-zero"><i>slashed-zero</i></a> || <a
jdaggett@8225 5076 href="#east-asian-variant-values"><var>&lt;east-asian-variant-values&gt;</var></a>
jdaggett@8225 5077 || <a
jdaggett@8225 5078 href="#east-asian-width-values"><var>&lt;east-asian-width-values&gt;</var></a>
jdaggett@8225 5079 || <a href="#ruby"><i>ruby</i></a> ]
jdaggett@1662 5080
jdaggett@1662 5081 <tr>
jdaggett@1662 5082 <td>Initial:
jdaggett@1662 5083
jdaggett@1662 5084 <td>normal
jdaggett@1662 5085
jdaggett@1662 5086 <tr>
jdaggett@1662 5087 <td>Applies to:
jdaggett@1662 5088
jdaggett@1662 5089 <td>all elements
jdaggett@1662 5090
jdaggett@1662 5091 <tr>
jdaggett@1662 5092 <td>Inherited:
jdaggett@1662 5093
jdaggett@1662 5094 <td>yes
jdaggett@1662 5095
jdaggett@1662 5096 <tr>
jdaggett@1662 5097 <td>Percentages:
jdaggett@1662 5098
jdaggett@7377 5099 <td>see individual properties
jdaggett@1662 5100
jdaggett@1662 5101 <tr>
jdaggett@1662 5102 <td>Media:
jdaggett@1662 5103
jdaggett@1662 5104 <td>visual
jdaggett@1662 5105
jdaggett@1662 5106 <tr>
jdaggett@1662 5107 <td>Computed value:
jdaggett@1662 5108
jdaggett@7377 5109 <td>see individual properties
jdaggett@7377 5110
jdaggett@7377 5111 <tr>
jdaggett@7377 5112 <td>Animatable:
jdaggett@7377 5113
jdaggett@7377 5114 <td>see individual properties
jdaggett@1662 5115 </table>
jdaggett@1662 5116
jdaggett@8313 5117 <p>The <a href="#propdef-font-variant"
jdaggett@8313 5118 title="font-variant!!property">‘<code
jdaggett@8313 5119 class=property>font-variant</code>’</a> property is a shorthand for all
jdaggett@8313 5120 font-variant subproperties. The value <dfn id=font-variant-normal-value
jdaggett@8313 5121 title="normal!!font-variant">‘<code
jdaggett@8313 5122 class=property>normal</code>’</dfn> resets all subproperties of <a
jdaggett@8313 5123 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8313 5124 class=property>font-variant</code>’</a> to their inital value. The <dfn
jdaggett@8313 5125 id=font-variant-none-value title="none!!font-variant">‘<code
jdaggett@8313 5126 class=property>none</code>’</dfn> value sets ‘<a
jdaggett@8313 5127 href="#propdef-font-variant-ligatures"><code
jdaggett@8278 5128 class=property>font-variant-ligatures</code></a>’ to ‘<code
jdaggett@8278 5129 class=property>none</code>’ and resets all other font feature properties
jdaggett@8278 5130 to their initial value. Like other shorthands, using <a
jdaggett@8278 5131 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8313 5132 class=property>font-variant</code>’</a> resets unspecified <a
jdaggett@8313 5133 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8313 5134 class=property>font-variant</code>’</a> subproperties to their initial
jdaggett@8313 5135 values. It does not reset the values of either ‘<a
jdaggett@8313 5136 href="#propdef-font-language-override"><code
jdaggett@8279 5137 class=property>font-language-override</code></a>’ or <a
jdaggett@8279 5138 href="#propdef-font-feature-settings"
jdaggett@8279 5139 title="font-feature-settings!!property">‘<code
jdaggett@8279 5140 class=property>font-feature-settings</code>’</a>.
jdaggett@1662 5141
jdaggett@2118 5142 <h3 id=font-feature-settings-prop><span class=secno>6.12 </span>Low-level
jdaggett@2509 5143 font feature settings control: the <a
jdaggett@1662 5144 href="#propdef-font-feature-settings">font-feature-settings</a> property</h3>
jdaggett@1662 5145
jdaggett@4624 5146 <table class=propdef id=namefont-feature-settingsvaluenormal-ltf>
jdaggett@1662 5147 <tbody>
jdaggett@1662 5148 <tr>
jdaggett@1662 5149 <td>Name:
jdaggett@1662 5150
jdaggett@8279 5151 <td><dfn id=propdef-font-feature-settings
jdaggett@8279 5152 title="font-feature-settings!!property">font-feature-settings</dfn>
jdaggett@1662 5153
jdaggett@1662 5154 <tr>
jdaggett@1662 5155 <td>Value:
jdaggett@1662 5156
jdaggett@8278 5157 <td><a href="#font-feature-settings-normal-value"
jdaggett@8278 5158 title="normal!!font-feature-settings">normal</a> | <a
jdaggett@8225 5159 href="#feature-tag-value"><var>&lt;feature-tag-value&gt;</var></a> #
jdaggett@1662 5160
jdaggett@1662 5161 <tr>
jdaggett@1662 5162 <td>Initial:
jdaggett@1662 5163
jdaggett@1662 5164 <td>normal
jdaggett@1662 5165
jdaggett@1662 5166 <tr>
jdaggett@1662 5167 <td>Applies to:
jdaggett@1662 5168
jdaggett@1662 5169 <td>all elements
jdaggett@1662 5170
jdaggett@1662 5171 <tr>
jdaggett@1662 5172 <td>Inherited:
jdaggett@1662 5173
jdaggett@1662 5174 <td>yes
jdaggett@1662 5175
jdaggett@1662 5176 <tr>
jdaggett@1662 5177 <td>Percentages:
jdaggett@1662 5178
jdaggett@1662 5179 <td>N/A
jdaggett@1662 5180
jdaggett@1662 5181 <tr>
jdaggett@1662 5182 <td>Media:
jdaggett@1662 5183
jdaggett@1662 5184 <td>visual
jdaggett@1662 5185
jdaggett@1662 5186 <tr>
jdaggett@1662 5187 <td>Computed value:
jdaggett@1662 5188
jdaggett@1662 5189 <td>as specified
jdaggett@7377 5190
jdaggett@7377 5191 <tr>
jdaggett@7377 5192 <td>Animatable:
jdaggett@7377 5193
jdaggett@7377 5194 <td>no
jdaggett@1662 5195 </table>
jdaggett@2474 5196
jdaggett@2474 5197 <p>This property provides low-level control over OpenType font features. It
jdaggett@2474 5198 is intended as a way of providing access to font features that are not
jdaggett@8312 5199 widely used but are needed for a particular use case.
jdaggett@8312 5200
jdaggett@8312 5201 <p>Authors should generally use <a href="#propdef-font-variant"
jdaggett@8312 5202 title="font-variant!!property">‘<code
jdaggett@8312 5203 class=property>font-variant</code>’</a> and its related subproperties
jdaggett@8312 5204 whenever possible and only use this property for special cases where its
jdaggett@8312 5205 use is the only way of accessing a particular infrequently used font
jdaggett@8312 5206 feature.
jdaggett@8312 5207
jdaggett@8312 5208 <pre>/* enable small caps and use second swash alternate */
jdaggett@8312 5209 font-feature-settings: "smcp", "swsh" 2;</pre>
jdaggett@8312 5210
jdaggett@8312 5211 <p>A value of <dfn id=font-feature-settings-normal-value
jdaggett@8278 5212 title="normal!!font-feature-settings">‘<code
jdaggett@8278 5213 class=property>normal</code>’</dfn> means that no change in glyph
jdaggett@8278 5214 selection or positioning occurs due to this property.
jdaggett@2474 5215
jdaggett@2509 5216 <p>Feature tag values have the following syntax:
jdaggett@2474 5217
jdaggett@2474 5218 <pre
jdaggett@8225 5219 class=prod><dfn id=feature-tag-value><var>&lt;feature-tag-value&gt;</var></dfn> = &lt;string&gt; [ &lt;integer&gt; | on | off ]?</pre>
jdaggett@2509 5220
jdaggett@5532 5221 <p>The &lt;string&gt; is a case-sensitive OpenType feature tag. As
jdaggett@5532 5222 specified in the OpenType specification, feature tags contain four ASCII
jdaggett@5532 5223 characters. Tag strings longer or shorter than four characters, or
jdaggett@5596 5224 containing characters outside the U+20–7E codepoint range are invalid.
jdaggett@8312 5225 Feature tags need only match a feature tag defined in the font, so they
jdaggett@8312 5226 are not limited to explicitly registered OpenType features. Fonts defining
jdaggett@8312 5227 custom feature tags should follow the <a
jdaggett@2474 5228 href="http://www.microsoft.com/typography/otspec/featuretags.htm">tag name
jdaggett@2474 5229 rules</a> defined in the OpenType specification <a
jdaggett@1662 5230 href="#OPENTYPE-FEATURES"
jdaggett@2474 5231 rel=biblioentry>[OPENTYPE-FEATURES]<!--{{!OPENTYPE-FEATURES}}--></a>.
jdaggett@2474 5232 Feature tags not present in the font are ignored; a user agent must not
jdaggett@2474 5233 attempt to synthesize fallback behavior based on these feature tags.
jdaggett@2474 5234
jdaggett@6436 5235 <p>This means that explicitly disabling the <span class=tag>kern</span>
jdaggett@6436 5236 feature will not affect the application of kerning data found in the
jdaggett@6436 5237 ‘<code class=property>kern</code>’ table (as opposed to kerning data
jdaggett@6436 5238 associated with the <span class=tag>kern</span> feature in the ‘<code
jdaggett@5946 5239 class=property>GPOS</code>’ table). Authors should use the ‘<a
jdaggett@5946 5240 href="#propdef-font-kerning"><code
jdaggett@5946 5241 class=property>font-kerning</code></a>’ property to explictly enable or
jdaggett@5946 5242 disable kerning since this property affects both types of kerning.
jdaggett@5946 5243
jdaggett@2509 5244 <p>If present, a value indicates an index used for glyph selection. An
jdaggett@2509 5245 &lt;integer&gt; value must be 0 or greater. A value of 0 indicates that
jdaggett@2509 5246 the feature is disabled. For boolean features, a value of 1 enables the
jdaggett@2509 5247 feature. For non-boolean features, a value of 1 or greater enables the
jdaggett@2509 5248 feature and indicates the feature selection index. A value of ‘<code
jdaggett@2509 5249 class=property>on</code>’ is synonymous with 1 and ‘<code
jdaggett@2509 5250 class=property>off</code>’ is synonymous with 0. If the value is
jdaggett@2509 5251 omitted, a value of 1 is assumed.
jdaggett@2474 5252
jdaggett@2474 5253 <pre>
jdaggett@2509 5254 font-feature-settings: "dlig" 1; /* dlig=1 enable discretionary ligatures */
jdaggett@2509 5255 font-feature-settings: "smcp" on; /* smcp=1 enable small caps */
jdaggett@2515 5256 font-feature-settings: 'c2sc'; /* c2sc=1 enable caps to small caps */
jdaggett@2509 5257 font-feature-settings: "liga" off; /* liga=0 no common ligatures */
jdaggett@2515 5258 font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms */
jdaggett@5530 5259 font-feature-settings: "tnum" "hist"; /* invalid, need a comma-delimited list */
jdaggett@5530 5260 font-feature-settings: "palin" off; /* good idea but invalid tagname */
jdaggett@2509 5261 font-feature-settings: "PKRN"; /* PKRN=1 enable custom feature */
jdaggett@5530 5262 font-feature-settings: dlig; /* invalid, tag must be a string */
jdaggett@2474 5263 </pre>
jdaggett@1662 5264
jdaggett@8272 5265 <p>When values greater than the range supported by the font are specified,
jdaggett@8272 5266 the behavior is explicitly undefined. For boolean features, in general
jdaggett@8272 5267 these will enable the feature. For non-boolean features, out of range
jdaggett@8272 5268 values will in general be equivalent to a 0 value. However, in both cases
jdaggett@8272 5269 the exact behavior will depend upon the way the font is designed
jdaggett@8272 5270 (specifically, which type of lookup is used to define the feature).
jdaggett@8272 5271
jdaggett@2474 5272 <p>Although specifically defined for OpenType feature tags, feature tags
jdaggett@2474 5273 for other modern font formats that support font features may be added in
jdaggett@5530 5274 the future. Where possible, features defined for other font formats should
jdaggett@5530 5275 attempt to follow the pattern of registered OpenType tags.
jdaggett@2509 5276
jdaggett@1662 5277 <div class=example>
jdaggett@1662 5278 <p>The Japanese text below will be rendered with half-width kana
jdaggett@1662 5279 characters:</p>
jdaggett@1662 5280
jdaggett@1662 5281 <pre lang=ja>
jdaggett@2509 5282 body { font-feature-settings: "hwid"; /* Half-width OpenType feature */ }
jdaggett@1662 5283
jdaggett@1662 5284 &lt;p>毎日<a href="http://images.google.com/images?q=%E3%82%AB%E3%83%AC%E3%83%BC" style="text-decoration: none;">カレー</a>食べてるのに、飽きない&lt;/p>
jdaggett@1662 5285 </pre>
jdaggett@1662 5286 </div>
jdaggett@1662 5287
jdaggett@2118 5288 <h3 id=font-language-override-prop><span class=secno>6.13 </span>Font
jdaggett@1732 5289 language override: the <a
jdaggett@1732 5290 href="#propdef-font-language-override">font-language-override</a> property</h3>
jdaggett@1732 5291
jdaggett@5809 5292 <table class=propdef id=namefont-language-overridevaluenormal-lt>
jdaggett@1662 5293 <tbody>
jdaggett@1662 5294 <tr>
jdaggett@1662 5295 <td>Name:
jdaggett@1662 5296
jdaggett@1732 5297 <td><dfn id=propdef-font-language-override>font-language-override</dfn>
jdaggett@1662 5298
jdaggett@1662 5299 <tr>
jdaggett@1662 5300 <td>Value:
jdaggett@1662 5301
jdaggett@8278 5302 <td><a href="#font-language-override-normal-value"
jdaggett@8278 5303 title="normal!!font-language-override">normal</a> | <a
jdaggett@8278 5304 href="#font-language-override-string-value"><var>&lt;string&gt;</var></a>
jdaggett@1662 5305
jdaggett@1662 5306 <tr>
jdaggett@1662 5307 <td>Initial:
jdaggett@1662 5308
jdaggett@8278 5309 <td><a href="#font-language-override-normal-value"
jdaggett@8278 5310 title="normal!!font-language-override">normal</a>
jdaggett@1662 5311
jdaggett@1662 5312 <tr>
jdaggett@1662 5313 <td>Applies to:
jdaggett@1662 5314
jdaggett@1662 5315 <td>all elements
jdaggett@1662 5316
jdaggett@1662 5317 <tr>
jdaggett@1662 5318 <td>Inherited:
jdaggett@1662 5319
jdaggett@1662 5320 <td>yes
jdaggett@1662 5321
jdaggett@1662 5322 <tr>
jdaggett@1662 5323 <td>Percentages:
jdaggett@1662 5324
jdaggett@1662 5325 <td>N/A
jdaggett@1662 5326
jdaggett@1662 5327 <tr>
jdaggett@1662 5328 <td>Media:
jdaggett@1662 5329
jdaggett@1662 5330 <td>visual
jdaggett@1662 5331
jdaggett@1662 5332 <tr>
jdaggett@1662 5333 <td>Computed value:
jdaggett@1662 5334
jdaggett@1662 5335 <td>as specified
jdaggett@7377 5336
jdaggett@7377 5337 <tr>
jdaggett@7377 5338 <td>Animatable:
jdaggett@7377 5339
jdaggett@7377 5340 <td>no
jdaggett@1662 5341 </table>
jdaggett@1662 5342
jdaggett@8278 5343 <p>Normally, authors can control the use of language-specific glyph
jdaggett@8278 5344 substitutions and positioning by setting the content language of an
jdaggett@8278 5345 element, as <a href="#language-specific-support">described above</a>:
jdaggett@8278 5346
jdaggett@8278 5347 <pre>&lt;!-- Display text using S'gaw Karen specific features -->
jdaggett@8278 5348 &ltp lang="ksw">...&lt;/p></pre>
jdaggett@8278 5349
jdaggett@8278 5350 <p>In some cases, authors may need to specify a language system that
jdaggett@8278 5351 differs from the content language, for example due to the need to mimic
jdaggett@8278 5352 another language's typographic traditions. The ‘<a
jdaggett@8278 5353 href="#propdef-font-language-override"><code
jdaggett@8278 5354 class=property>font-language-override</code></a>’ property allows
jdaggett@8278 5355 authors to explicitly specify the language system of the font, overriding
jdaggett@8278 5356 the language system implied by the content language.
jdaggett@8278 5357
jdaggett@8278 5358 <p>Values have the following meanings:
jdaggett@8278 5359
jdaggett@8278 5360 <dl>
jdaggett@8278 5361 <dt><dfn id=font-language-override-normal-value
jdaggett@8278 5362 title="normal!!font-language-override">normal</dfn>
jdaggett@8278 5363
jdaggett@8278 5364 <dd>specifies that when rendering with OpenType fonts, the content
jdaggett@8278 5365 language of the element is used to infer the OpenType language system
jdaggett@8278 5366
jdaggett@8278 5367 <dt><dfn
jdaggett@8278 5368 id=font-language-override-string-value><var>&lt;string&gt;</var></dfn>
jdaggett@8278 5369
jdaggett@8278 5370 <dd>single three-letter OpenType <a
jdaggett@8278 5371 href="http://www.microsoft.com/typography/otspec/languagetags.htm">language
jdaggett@8278 5372 system tag</a>, specifies the OpenType language system to be used instead
jdaggett@8278 5373 of the language system implied by the language of the element
jdaggett@8278 5374 </dl>
jdaggett@1662 5375
jdaggett@8312 5376 <p>Use of invalid OpenType language system tags must not generate a parse
jdaggett@8312 5377 error but must be ignored when doing glyph selection and placement.
jdaggett@8312 5378
jdaggett@1662 5379 <div class=example>
jdaggett@7179 5380 <p>The <a href="http://www.un.org/en/documents/udhr/index.shtml">Universal
jdaggett@1662 5381 Declaration of Human Rights</a> has been translated into a wide variety
jdaggett@1662 5382 of languages. In Turkish, Article 9 of this document might be marked up
jdaggett@1662 5383 as below:</p>
jdaggett@1662 5384
jdaggett@1662 5385 <pre lang=tr>&lt;body lang="tr">
jdaggett@1662 5386
jdaggett@1662 5387 &lt;h4>Madde 9&lt;/h4>
jdaggett@1662 5388 &lt;p>Hiç kimse keyfi olarak tutuklanamaz, alıkonulanamaz veya sürülemez.&lt;/p>
jdaggett@1662 5389 </pre>
jdaggett@1662 5390
jdaggett@1662 5391 <p>Here the user agent uses the value of the ‘<code
jdaggett@1662 5392 class=property>lang</code>’ attribute when rendering text and
jdaggett@1662 5393 appropriately renders this text without ‘<code
jdaggett@4624 5394 class=property>fi</code>’ ligatures. There is no need to use the ‘<a
jdaggett@4624 5395 href="#propdef-font-language-override"><code
jdaggett@4624 5396 class=property>font-language-override</code></a>’ property.</p>
jdaggett@1662 5397
jdaggett@1662 5398 <p>However, a given font may lack support for a specific language. In this
jdaggett@1662 5399 situation authors may need to use the typographic conventions of a
jdaggett@1662 5400 related language that are supported by that font:</p>
jdaggett@1662 5401
jdaggett@1662 5402 <pre lang=mk>&lt;body lang="mk"> &lt;!-- Macedonian lang code --&gt;
jdaggett@1662 5403
jdaggett@1732 5404 body { font-language-override: "SRB"; /* Serbian OpenType language tag */ }
jdaggett@1662 5405
jdaggett@1662 5406 &lt;h4>Члeн 9&lt;/h4>
jdaggett@1662 5407 &lt;p>Никoj чoвeк нeмa дa бидe пoдлoжeн нa прoизвoлнo aпсeњe, притвoр или прoгoнувaњe.&lt;/p>
jdaggett@1662 5408
jdaggett@1662 5409 </pre>
jdaggett@1662 5410
jdaggett@1662 5411 <p>The Macedonian text here will be rendered using Serbian typographic
jdaggett@1662 5412 conventions, with the assumption that the font specified supports
jdaggett@1662 5413 Serbian.</p>
jdaggett@1662 5414 </div>
jdaggett@1662 5415
jdaggett@6176 5416 <p><a id=rendering-considerations></a>
jdaggett@6176 5417
jdaggett@6699 5418 <h2 id=font-feature-resolution><span class=secno>7 </span>Font Feature
jdaggett@6699 5419 Resolution</h2>
jdaggett@6176 5420
jdaggett@6176 5421 <p>As described in the previous section, font features can be enabled in a
jdaggett@8278 5422 variety of ways, either via the use of <a href="#propdef-font-variant"
jdaggett@8278 5423 title="font-variant!!property">‘<code
jdaggett@8279 5424 class=property>font-variant</code>’</a> or <a
jdaggett@8279 5425 href="#propdef-font-feature-settings"
jdaggett@8279 5426 title="font-feature-settings!!property">‘<code
jdaggett@8279 5427 class=property>font-feature-settings</code>’</a> in a style rule or
jdaggett@8311 5428 within an <a href="#at-font-face-rule"><code>@font-face</code></a> rule.
jdaggett@8311 5429 The resolution order for the union of these settings is defined below.
jdaggett@8311 5430 Features defined via CSS properties are applied on top of layout engine
jdaggett@8311 5431 default features.
jdaggett@6176 5432
jdaggett@6699 5433 <h3 id=default-features><span class=secno>7.1 </span>Default features</h3>
jdaggett@6699 5434
jdaggett@6176 5435 <p>For OpenType fonts, user agents must enable the default features defined
jdaggett@6436 5436 in the OpenType documentation for a given script and writing mode.
jdaggett@6436 5437 Required ligatures, common ligatures and contextual forms must be enabled
jdaggett@6436 5438 by default (OpenType features: <span class=tag>rlig, liga, clig,
jdaggett@6436 5439 calt</span>), along with localized forms (OpenType feature: <span
jdaggett@6436 5440 class=tag>locl</span>), and features required for proper display of
jdaggett@6436 5441 composed characters and marks (OpenType features: <span class=tag>ccmp,
jdaggett@6436 5442 mark, mkmk</span>). These features must always be enabled, even when the
jdaggett@8278 5443 value of the <a href="#propdef-font-variant"
jdaggett@8278 5444 title="font-variant!!property">‘<code
jdaggett@8279 5445 class=property>font-variant</code>’</a> and <a
jdaggett@8279 5446 href="#propdef-font-feature-settings"
jdaggett@8279 5447 title="font-feature-settings!!property">‘<code
jdaggett@8279 5448 class=property>font-feature-settings</code>’</a> properties is ‘<a
jdaggett@8279 5449 href="#normal"><code class=property>normal</code></a>’. Individual
jdaggett@8279 5450 features are only disabled when explicitly overridden by the author, as
jdaggett@8279 5451 when ‘<a href="#propdef-font-variant-ligatures"><code
jdaggett@6176 5452 class=property>font-variant-ligatures</code></a>’ is set to ‘<a
jdaggett@6176 5453 href="#no-common-ligatures"><code
jdaggett@7377 5454 class=property>no-common-ligatures</code></a>’. For handling complex
jdaggett@7377 5455 scripts such as <a
jdaggett@6176 5456 href="http://www.microsoft.com/typography/otfntdev/arabicot/features.aspx">Arabic</a>,
jdaggett@6176 5457 <a
jdaggett@6176 5458 href="http://www.microsoft.com/typography/otfntdev/mongolot/features.htm">Mongolian</a>
jdaggett@6176 5459 or <a
jdaggett@6176 5460 href="http://www.microsoft.com/typography/otfntdev/devanot/features.aspx">Devanagari</a>
jdaggett@6436 5461 additional features are required. For upright text within vertical text
jdaggett@6436 5462 runs, vertical alternates (OpenType feature: <span class=tag>vert</span>)
jdaggett@6436 5463 must be enabled.
jdaggett@1662 5464
jdaggett@6699 5465 <h3 id=feature-precedence><span class=secno>7.2 </span>Feature precedence</h3>
jdaggett@6699 5466
jdaggett@8356 5467 <p>General and <a href="#font-specific"><em>font specific</em></a> font
jdaggett@8356 5468 feature property settings are resolved in the order below, in ascending
jdaggett@8360 5469 order of precedence. This ordering is used to construct a combined list of
jdaggett@8356 5470 font features that affect a given text run.
jdaggett@1662 5471
jdaggett@1662 5472 <ol>
jdaggett@6436 5473 <li>Font features enabled by default, including features required for a
jdaggett@6436 5474 given script.
jdaggett@6176 5475
jdaggett@8311 5476 <li>If the font is defined via an <a
jdaggett@8311 5477 href="#at-font-face-rule"><code>@font-face</code></a> rule, the font
jdaggett@8311 5478 features implied by the font-variant descriptor in the <a
jdaggett@8311 5479 href="#at-font-face-rule"><code>@font-face</code></a> rule.
jdaggett@8311 5480
jdaggett@8311 5481 <li>If the font is defined via an <a
jdaggett@8311 5482 href="#at-font-face-rule"><code>@font-face</code></a> rule, the font
jdaggett@8311 5483 features implied by the font-feature-settings descriptor in the <a
jdaggett@8311 5484 href="#at-font-face-rule"><code>@font-face</code></a> rule.
jdaggett@1662 5485
jdaggett@8278 5486 <li>Feature settings determined by properties other than <a
jdaggett@8278 5487 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8279 5488 class=property>font-variant</code>’</a> or <a
jdaggett@8279 5489 href="#propdef-font-feature-settings"
jdaggett@8279 5490 title="font-feature-settings!!property">‘<code
jdaggett@8279 5491 class=property>font-feature-settings</code>’</a>. For example, setting
jdaggett@8279 5492 a non-default value for the ‘<code
jdaggett@8360 5493 class=property>letter-spacing</code>’ property disables common
jdaggett@8360 5494 ligatures.
jdaggett@6176 5495
jdaggett@8278 5496 <li>Font features implied by the value of the <a
jdaggett@8278 5497 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8313 5498 class=property>font-variant</code>’</a> property, the related <a
jdaggett@8313 5499 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8313 5500 class=property>font-variant</code>’</a> subproperties and any other CSS
jdaggett@8360 5501 property that uses OpenType features (e.g. the ‘<a
jdaggett@8313 5502 href="#propdef-font-kerning"><code
jdaggett@4624 5503 class=property>font-kerning</code></a>’ property).
jdaggett@4624 5504
jdaggett@8279 5505 <li>Font features implied by the value of <a
jdaggett@8279 5506 href="#propdef-font-feature-settings"
jdaggett@8279 5507 title="font-feature-settings!!property">‘<code
jdaggett@8279 5508 class=property>font-feature-settings</code>’</a> property.
jdaggett@1662 5509 </ol>
jdaggett@1662 5510
jdaggett@3511 5511 <p>This ordering allows authors to set up a general set of defaults for
jdaggett@8311 5512 fonts within their <a
jdaggett@8311 5513 href="#at-font-face-rule"><code>@font-face</code></a> rules, then override
jdaggett@8311 5514 them with property settings for specific elements. General property
jdaggett@8311 5515 settings override the settings in <a
jdaggett@8311 5516 href="#at-font-face-rule"><code>@font-face</code></a> rules and low-level
jdaggett@8311 5517 font feature settings override <a href="#propdef-font-variant"
jdaggett@8278 5518 title="font-variant!!property">‘<code
jdaggett@8278 5519 class=property>font-variant</code>’</a> property settings.
jdaggett@1732 5520
jdaggett@1732 5521 <p>For situations where the combined list of font feature settings contains
jdaggett@3511 5522 more than one value for the same feature, the last value is used. When a
jdaggett@3511 5523 font lacks support for a given underlying font feature, text is simply
jdaggett@3511 5524 rendered as if that font feature was not enabled; font fallback does not
jdaggett@3511 5525 occur and no attempt is made to synthesize the feature except where
jdaggett@8360 5526 explicitly defined for specific properties.
jdaggett@1662 5527
jdaggett@6699 5528 <h3 id=feature-precedence-examples><span class=secno>7.3 </span>Feature
jdaggett@6699 5529 precedence examples</h3>
jdaggett@6699 5530
jdaggett@1662 5531 <div class=example>
jdaggett@1662 5532 <p>With the styles below, numbers are rendered proportionally when used
jdaggett@1662 5533 within a paragraph but are shown in tabular form within tables of prices:</p>
jdaggett@1662 5534
jdaggett@8277 5535 <pre>body {
jdaggett@8277 5536 font-variant-numeric: proportional-nums;
jdaggett@1662 5537 }
jdaggett@1662 5538
jdaggett@1662 5539 table.prices td {
jdaggett@8277 5540 font-variant-numeric: tabular-nums;
jdaggett@1662 5541 }
jdaggett@1662 5542 </pre>
jdaggett@1662 5543 </div>
jdaggett@1662 5544
jdaggett@1662 5545 <div class=example>
jdaggett@8360 5546 <p>When the <a href="#descdef-font-variant"
jdaggett@8360 5547 title="font-variant!!descriptor">font-variant</a> descriptor is used
jdaggett@8360 5548 within an <a href="#at-font-face-rule"><code>@font-face</code></a> rule,
jdaggett@8360 5549 it only applies to the font defined by that rule.</p>
jdaggett@1662 5550
jdaggett@1662 5551 <pre>@font-face {
jdaggett@1662 5552 font-family: MainText;
jdaggett@2556 5553 src: url(http://example.com/font.ttf);
jdaggett@1662 5554 font-variant: oldstyle-nums proportional-nums styleset(1,3);
jdaggett@1662 5555 }
jdaggett@1662 5556
jdaggett@1662 5557 body {
jdaggett@1662 5558 font-family: MainText, Helvetica;
jdaggett@1662 5559 }
jdaggett@1662 5560
jdaggett@1662 5561 table.prices td {
jdaggett@8277 5562 font-variant-numeric: tabular-nums;
jdaggett@1662 5563 }
jdaggett@1662 5564 </pre>
jdaggett@1662 5565
jdaggett@1662 5566 <p>In this case, old-style numerals will be used throughout but only where
jdaggett@1662 5567 the font "MainText" is used. Just as in the previous example, tabular
jdaggett@4624 5568 values will be used in price tables since ‘<a
jdaggett@4624 5569 href="#tabular-nums"><code class=property>tabular-nums</code></a>’
jdaggett@4624 5570 appears in a general style rule and its use is mutually exclusive with
jdaggett@4624 5571 ‘<a href="#proportional-nums"><code
jdaggett@4624 5572 class=property>proportional-nums</code></a>’. Stylistic alternate sets
jdaggett@4624 5573 will only be used where MainText is used.</p>
jdaggett@1662 5574 </div>
jdaggett@1662 5575
jdaggett@1662 5576 <div class=example>
jdaggett@8311 5577 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule can
jdaggett@8311 5578 also be used to access font features in locally available fonts via the
jdaggett@8311 5579 use of <code>local()</code> in the ‘<a href="#descdef-src"><code
jdaggett@8311 5580 class=property>src</code></a>’ descriptor of the <a
jdaggett@8311 5581 href="#at-font-face-rule"><code>@font-face</code></a> definition:</p>
jdaggett@1662 5582
jdaggett@1662 5583 <pre>@font-face {
jdaggett@1662 5584 font-family: BodyText;
jdaggett@1662 5585 src: local("HiraMaruPro-W4");
jdaggett@1662 5586 font-variant: proportional-width;
jdaggett@2509 5587 font-feature-settings: "ital"; /* Latin italics within CJK text feature */
jdaggett@1662 5588 }
jdaggett@1662 5589
jdaggett@1662 5590 body { font-family: BodyText, serif; }
jdaggett@1662 5591 </pre>
jdaggett@1662 5592
jdaggett@1662 5593 <p>If available, a Japanese font "Hiragino Maru Gothic" will be used. When
jdaggett@1662 5594 text rendering occurs, Japanese kana will be proportionally spaced and
jdaggett@1662 5595 Latin text will be italicised. Text rendered with the fallback serif font
jdaggett@1662 5596 will use default rendering properties.</p>
jdaggett@1662 5597 </div>
jdaggett@1662 5598
jdaggett@1662 5599 <div class=example>
jdaggett@3460 5600 <p>In the example below, discretionary ligatures are enabled only for a
jdaggett@1662 5601 downloadable font but are disabled within spans of class "special":</p>
jdaggett@1662 5602
jdaggett@1662 5603 <pre>@font-face {
jdaggett@1662 5604 font-family: main;
jdaggett@1662 5605 src: url(fonts/ffmeta.woff) format("woff");
jdaggett@3460 5606 font-variant: discretionary-ligatures;
jdaggett@1662 5607 }
jdaggett@1662 5608
jdaggett@1662 5609 body { font-family: main, Helvetica; }
jdaggett@3460 5610 span.special { font-variant-ligatures: no-discretionary-ligatures; }
jdaggett@1662 5611 </pre>
jdaggett@1662 5612
jdaggett@8360 5613 <p>Suppose one adds a rule using ‘<code
jdaggett@8360 5614 class=property>font-feature-settings</code>’ to enable discretionary
jdaggett@8360 5615 ligatures:</p>
jdaggett@1662 5616
jdaggett@1662 5617 <pre>body { font-family: main, Helvetica; }
jdaggett@2509 5618 span { font-feature-settings: "dlig"; }
jdaggett@3460 5619 span.special { font-variant-ligatures: no-discretionary-ligatures; }
jdaggett@1662 5620 </pre>
jdaggett@1662 5621
jdaggett@8360 5622 <p>In this case, discretionary ligatures <em>will</em> be rendered within
jdaggett@8360 5623 spans of class "special". This is because both the <a
jdaggett@8279 5624 href="#propdef-font-feature-settings"
jdaggett@8279 5625 title="font-feature-settings!!property">‘<code
jdaggett@8279 5626 class=property>font-feature-settings</code>’</a> and ‘<a
jdaggett@4624 5627 href="#propdef-font-variant-ligatures"><code
jdaggett@4624 5628 class=property>font-variant-ligatures</code></a>’ properties apply to
jdaggett@4624 5629 these spans. Although the ‘<code class=css>no-discretionary
jdaggett@4624 5630 ligatures</code>’ setting of ‘<a
jdaggett@4624 5631 href="#propdef-font-variant-ligatures"><code
jdaggett@4624 5632 class=property>font-variant-ligatures</code></a>’ effectively disables
jdaggett@8279 5633 the OpenType <span class=tag>dlig</span> feature, because the <a
jdaggett@8279 5634 href="#propdef-font-feature-settings"
jdaggett@8279 5635 title="font-feature-settings!!property">‘<code
jdaggett@8279 5636 class=property>font-feature-settings</code>’</a> is resolved after
jdaggett@8279 5637 that, the ‘<code class=property>dlig</code>’ value reenables
jdaggett@4624 5638 discretionary ligatures.</p>
jdaggett@1662 5639 </div>
jdaggett@1244 5640
jdaggett@7021 5641 <h2 id=object-model><span class=secno>8 </span>Object Model</h2>
jdaggett@7021 5642
jdaggett@8311 5643 <p>The contents of <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 5644 and <a
jdaggett@8311 5645 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8311 5646 rules can be accessed via the following extensions to the CSS Object
jdaggett@8311 5647 Model.
jdaggett@7021 5648
jdaggett@7021 5649 <h3 id=om-fontface><span class=secno>8.1 </span>The <a
jdaggett@7021 5650 href="#cssfontfacerule"><code>CSSFontFaceRule</code></a> interface</h3>
jdaggett@7021 5651
jdaggett@7021 5652 <p>The <dfn id=cssfontfacerule>CSSFontFaceRule</dfn> interface represents a
jdaggett@8311 5653 <a href="#at-font-face-rule"><code>@font-face</code></a> rule.
jdaggett@7021 5654
jdaggett@7021 5655 <pre class=idl>
jdaggett@7021 5656 interface CSSFontFaceRule : CSSRule {
jdaggett@7041 5657 attribute DOMString family;
jdaggett@7041 5658 attribute DOMString src;
jdaggett@7041 5659 attribute DOMString style;
jdaggett@7041 5660 attribute DOMString weight;
jdaggett@7041 5661 attribute DOMString stretch;
jdaggett@7041 5662 attribute DOMString unicodeRange;
jdaggett@7041 5663 attribute DOMString variant;
jdaggett@7041 5664 attribute DOMString featureSettings;
jdaggett@7021 5665 }</pre>
jdaggett@7021 5666
jdaggett@7022 5667 <p>The DOM Level 2 Style specification <a href="#DOM-LEVEL-2-STYLE"
jdaggett@7022 5668 rel=biblioentry>[DOM-LEVEL-2-STYLE]<!--{{DOM-LEVEL-2-STYLE}}--></a>
jdaggett@7022 5669 defined a different variant of this rule. This definition supercedes that
jdaggett@7022 5670 one.
jdaggett@7021 5671
jdaggett@7021 5672 <h3 id=om-fontfeaturevalues><span class=secno>8.2 </span>The <a
jdaggett@7021 5673 href="#cssfontfeaturevaluesrule"><code>CSSFontFeatureValuesRule</code></a>
jdaggett@7021 5674 interface</h3>
jdaggett@7021 5675
jdaggett@7021 5676 <p>The <code>CSSRule</code> interface is extended as follows:
jdaggett@7021 5677
jdaggett@7021 5678 <pre class=idl>partial interface CSSRule {
jdaggett@7021 5679 const unsigned short FONT_FEATURE_VALUES_RULE = 14;
jdaggett@7021 5680 }</pre>
jdaggett@7021 5681
jdaggett@7021 5682 <p>The <dfn id=cssfontfeaturevaluesrule>CSSFontFeatureValuesRule</dfn>
jdaggett@8311 5683 interface represents a <a
jdaggett@8311 5684 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8311 5685 rule.
jdaggett@7021 5686
jdaggett@7021 5687 <pre class=idl>interface CSSFontFeatureValuesRule : CSSRule {
jdaggett@7021 5688 readonly attribute DOMString familyList;
jdaggett@7021 5689 readonly attribute DOMString valueText;
jdaggett@7021 5690 };</pre>
jdaggett@7021 5691
jdaggett@7021 5692 <dl class=idl-attributes>
jdaggett@7021 5693 <dt><var>familyList</var> of type <code>DOMString</code>, readonly
jdaggett@7021 5694
jdaggett@7021 5695 <dd>The list of one or more font families for which a given set of feature
jdaggett@7021 5696 values is defined.
jdaggett@7021 5697
jdaggett@7021 5698 <dt><var>valueText</var> of type <code>DOMString</code>, readonly
jdaggett@7021 5699
jdaggett@7021 5700 <dd>Serialized set of feature values.
jdaggett@7021 5701 </dl>
jdaggett@7021 5702
jdaggett@8365 5703 <p class=issue>This needs to be reworked along the lines of <a
jdaggett@8365 5704 href="http://lists.w3.org/Archives/Public/www-style/2013May/0781.html">Tab's
jdaggett@8365 5705 proposal</a> for a rule containing a family list and map objects for each
jdaggett@8365 5706 of the feature types.
jdaggett@8279 5707
jdaggett@2737 5708 <h2 class=no-num id=platform-props-to-css>Appendix A: Mapping platform font
jdaggett@1662 5709 properties to CSS properties</h2>
jdaggett@1662 5710
jdaggett@1662 5711 <p><em>This appendix is included as background for some of the problems and
jdaggett@890 5712 situations that are described in other sections. It should be viewed as
jdaggett@890 5713 informative only.</em>
jdaggett@890 5714
jdaggett@512 5715 <p>Font properties in CSS are designed to be independent of the underlying
jdaggett@512 5716 font formats used; they can be used to specify bitmap fonts, Type1 fonts,
jdaggett@890 5717 SVG fonts in addition to the common TrueType and OpenType fonts. But there
jdaggett@1244 5718 are facets of the TrueType and OpenType formats that often cause confusion
jdaggett@2556 5719 for authors and present challenges to implementers on different platforms.
jdaggett@1244 5720
jdaggett@1244 5721 <p>Originally developed at Apple, TrueType was designed as an outline font
jdaggett@1244 5722 format for both screen and print. Microsoft joined Apple in developing the
jdaggett@1244 5723 TrueType format and both platforms have supported TrueType fonts since
jdaggett@1244 5724 then. Font data in the TrueType format consists of a set of tables
jdaggett@1244 5725 distinguished with common four-letter tag names, each containing a
jdaggett@1244 5726 specific type of data. For example, naming information, including
jdaggett@1244 5727 copyright and license information, is stored in the ‘<code
jdaggett@7311 5728 class=property>name</code>’ table. The <a
jdaggett@7311 5729 href="#character-map"><em>character map</em></a> (‘<code
jdaggett@1244 5730 class=property>cmap</code>’) table contains a mapping of character
jdaggett@1244 5731 encodings to glyphs. Apple later added additional tables for supporting
jdaggett@1244 5732 enhanced typographic functionality; these are now called Apple Advanced
jdaggett@1244 5733 Typography, or AAT, fonts. Microsoft and Adobe developed a separate set of
jdaggett@1662 5734 tables for advanced typography and called their format OpenType <a
jdaggett@1662 5735 href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>.
jdaggett@890 5736
jdaggett@890 5737 <p>In many cases the font data used under Microsoft Windows or Linux is
jdaggett@890 5738 slightly different from the data used under Apple's Mac OS X because the
jdaggett@6694 5739 TrueType format allowed for explicit variation across platforms. This
jdaggett@7311 5740 includes font metrics, names and <a href="#character-map"><em>character
jdaggett@7311 5741 map</em></a> data.
jdaggett@6694 5742
jdaggett@6694 5743 <p>Specifically, font family name data is handled differently across
jdaggett@6694 5744 platforms. For TrueType and OpenType fonts these names are contained in
jdaggett@6694 5745 the ‘<code class=property>name</code>’ table, in name records with
jdaggett@8276 5746 name ID 1. Mulitple names can be stored for different locales, but
jdaggett@6694 5747 Microsoft recommends fonts always include at least a US English version of
jdaggett@6694 5748 the name. On Windows, Microsoft made the decision for backwards
jdaggett@6694 5749 compatibility to limit this family name to a maximum of four faces; for
jdaggett@6694 5750 larger groupings the "preferred family" (name ID 16) or "WWS family" (name
jdaggett@6694 5751 ID 21) can be used. Other platforms such as OSX don't have this
jdaggett@8276 5752 limitation, so the family name is used to define all possible groupings.
jdaggett@6694 5753
jdaggett@6694 5754 <p>Other name table data provides names used to uniquely identify a
jdaggett@6694 5755 specific face within a family. The full font name (name ID 4) and the
jdaggett@8276 5756 Postscript name (name ID 6) describe a single face uniquely. For example,
jdaggett@8276 5757 the bold face of the Gill Sans family has a fullname of "Gill Sans Bold"
jdaggett@8276 5758 and a Postscript name of "GillSans-Bold". There can be multiple localized
jdaggett@8276 5759 versions of the fullname for a given face, but the Postscript name is
jdaggett@1244 5760 always a unique name made from a limited set of ASCII characters.
jdaggett@1244 5761
jdaggett@1244 5762 <p>On various platforms, different names are used to search for a font. For
jdaggett@1244 5763 example, with the Windows GDI CreateIndirectFont API, either a family or
jdaggett@8276 5764 fullname can be used to lookup a face, while on Mac OS X the
jdaggett@8095 5765 CTFontCreateWithName API call is used to lookup a given face using the
jdaggett@8095 5766 fullname and Postscript name. Under Linux, the fontconfig API allows fonts
jdaggett@8095 5767 to be searched using any of these names. In situations where platform
jdaggett@8095 5768 API's automatically substitute other font choices, it may be necessary to
jdaggett@8095 5769 verify a returned font matches a given name.
jdaggett@1244 5770
jdaggett@1244 5771 <p>The weight of a given face can be determined via the usWeightClass field
jdaggett@1244 5772 of the OS/2 table or inferred from the style name (name ID 2). Likewise,
jdaggett@1244 5773 the width can be determined via the usWidthClass of the OS/2 table or
jdaggett@6694 5774 inferred from the style name. For historical reasons related to synthetic
jdaggett@6694 5775 bolding at weights 200 or lower with the Windows GDI API, font designers
jdaggett@6694 5776 have sometimes skewed values in the OS/2 table to avoid these weights.
jdaggett@1244 5777
jdaggett@1244 5778 <p>Rendering complex scripts that use contextual shaping such as Thai,
jdaggett@1244 5779 Arabic and Devanagari requires features present only in OpenType or AAT
jdaggett@1244 5780 fonts. Currently, complex script rendering is supported on Windows and
jdaggett@7521 5781 Linux using OpenType font features while both OpenType and AAT font
jdaggett@7521 5782 features are used under Mac OS X.
jdaggett@1244 5783
jdaggett@2472 5784 <h2 class=no-num id=ch-ch-ch-changes>Changes</h2>
jdaggett@2472 5785
jdaggett@2472 5786 <h3 class=no-num id=recent-changes> Changes from the <a
jdaggett@7451 5787 href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/">February 2013
jdaggett@7242 5788 CSS3 Fonts Working Draft</a></h3>
jdaggett@2472 5789
jdaggett@2472 5790 <p>Major changes include:
jdaggett@2472 5791
jdaggett@2472 5792 <ul>
jdaggett@7521 5793 <li>Moved font load events into a separate <a
jdaggett@7521 5794 href="http://dev.w3.org/csswg/css3-font-load-events/">spec</a>
jdaggett@7679 5795
jdaggett@8356 5796 <li>Tightened syntax rules for <a
jdaggett@8311 5797 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@7679 5798 rules
jdaggett@8031 5799
jdaggett@8311 5800 <li>Added grammar productions for <a
jdaggett@8311 5801 href="#at-font-face-rule"><code>@font-face</code></a> and <a
jdaggett@8311 5802 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8311 5803 rules
jdaggett@8095 5804
jdaggett@8095 5805 <li>Tightened definition of synthetic oblique
jdaggett@8225 5806
jdaggett@8225 5807 <li>Revised definition of ‘<a href="#descdef-unicode-range"><code
jdaggett@8225 5808 class=property>unicode-range</code></a>’ descriptor
jdaggett@2472 5809 </ul>
jdaggett@2472 5810
jdaggett@529 5811 <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
jdaggett@529 5812
jdaggett@1662 5813 <p>I'd like to thank Tal Leming, Jonathan Kew and Christopher Slye for all
jdaggett@1662 5814 their help and feedback. John Hudson was kind enough to take the time to
jdaggett@2472 5815 explain the subtleties of OpenType language tags and provided the example
jdaggett@2472 5816 of character variant usage for displaying text on Byzantine seals. Ken
jdaggett@2472 5817 Lunde and Eric Muller provided valuable feedback on CJK OpenType features
jdaggett@2472 5818 and Unicode variation selectors. The idea for supporting font features by
jdaggett@8313 5819 using <a href="#propdef-font-variant"
jdaggett@8313 5820 title="font-variant!!property">‘<code
jdaggett@8313 5821 class=property>font-variant</code>’</a> subproperties originated with
jdaggett@8313 5822 Håkon Wium Lie, Adam Twardoch and Tal Leming. Elika Etemad supplied some
jdaggett@8313 5823 of the initial design ideas for the <a
jdaggett@8311 5824 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8311 5825 rule. Thanks also to House Industries for allowing the use of Ed Interlock
jdaggett@8311 5826 in the discretionary ligatures example.
jdaggett@1662 5827
jdaggett@529 5828 <p>A special thanks to Robert Bringhurst for the sublime mind expansion
jdaggett@529 5829 that is <em>The Elements of Typographic Style</em>.
jdaggett@529 5830
jdaggett@7242 5831 <h2 class=no-num id=conformance> Conformance</h2>
jdaggett@7242 5832
jdaggett@7242 5833 <h3 class=no-num id=conventions> Document Conventions</h3>
jdaggett@7242 5834
jdaggett@7242 5835 <p>Conformance requirements are expressed with a combination of descriptive
jdaggett@7242 5836 assertions and RFC 2119 terminology. The key words “MUST”, “MUST
jdaggett@7242 5837 NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
jdaggett@7242 5838 “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
jdaggett@7242 5839 normative parts of this document are to be interpreted as described in RFC
jdaggett@7242 5840 2119. However, for readability, these words do not appear in all uppercase
jdaggett@7242 5841 letters in this specification.
jdaggett@7242 5842
jdaggett@7242 5843 <p>All of the text of this specification is normative except sections
jdaggett@7242 5844 explicitly marked as non-normative, examples, and notes. <a
jdaggett@7242 5845 href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
jdaggett@7242 5846
jdaggett@7242 5847 <p>Examples in this specification are introduced with the words “for
jdaggett@7242 5848 example” or are set apart from the normative text with
jdaggett@7242 5849 <code>class="example"</code>, like this:
jdaggett@7242 5850
jdaggett@7242 5851 <div class=example>
jdaggett@7242 5852 <p>This is an example of an informative example.
jdaggett@7242 5853 </div>
jdaggett@7242 5854
jdaggett@7242 5855 <p>Informative notes begin with the word “Note” and are set apart from
jdaggett@7242 5856 the normative text with <code>class="note"</code>, like this:
jdaggett@7242 5857
jdaggett@7242 5858 <p class=note>Note, this is an informative note.
jdaggett@7242 5859
jdaggett@7242 5860 <h3 class=no-num id=conformance-classes> Conformance Classes</h3>
jdaggett@7242 5861
jdaggett@7242 5862 <p>Conformance to CSS Fonts Level 3 Module is defined for three conformance
jdaggett@7242 5863 classes:
jdaggett@7242 5864
jdaggett@7242 5865 <dl>
jdaggett@7243 5866 <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
jdaggett@7242 5867 sheet</dfn>
jdaggett@7242 5868
jdaggett@7242 5869 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
jdaggett@7242 5870 style sheet</a>.
jdaggett@7242 5871
jdaggett@7243 5872 <dt><dfn id=renderer>renderer</dfn>
jdaggett@7242 5873
jdaggett@7242 5874 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
jdaggett@7242 5875 that interprets the semantics of a style sheet and renders documents that
jdaggett@7242 5876 use them.
jdaggett@7242 5877
jdaggett@7242 5878 <dt><dfn id=authoring-tool>authoring tool</dfn>
jdaggett@7242 5879
jdaggett@7242 5880 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
jdaggett@7242 5881 that writes a style sheet.
jdaggett@7242 5882 </dl>
jdaggett@7242 5883
jdaggett@7242 5884 <p>A style sheet is conformant to CSS Fonts Level 3 Module if all of its
jdaggett@7242 5885 declarations that use properties defined in this module have values that
jdaggett@7242 5886 are valid according to the generic CSS grammar and the individual grammars
jdaggett@7242 5887 of each property as given in this module.
jdaggett@7242 5888
jdaggett@7242 5889 <p>A renderer is conformant to CSS Fonts Level 3 Module if, in addition to
jdaggett@7242 5890 interpreting the style sheet as defined by the appropriate specifications,
jdaggett@7242 5891 it supports all the features defined by CSS Fonts Level 3 Module by
jdaggett@7242 5892 parsing them correctly and rendering the document accordingly. However,
jdaggett@7242 5893 the inability of a UA to correctly render a document due to limitations of
jdaggett@7242 5894 the device does not make the UA non-conformant. (For example, a UA is not
jdaggett@7242 5895 required to render color on a monochrome monitor.)
jdaggett@7242 5896
jdaggett@7242 5897 <p>An authoring tool is conformant to CSS Fonts Level 3 Module if it writes
jdaggett@7242 5898 style sheets that are syntactically correct according to the generic CSS
jdaggett@7242 5899 grammar and the individual grammars of each feature in this module, and
jdaggett@7242 5900 meet all other conformance requirements of style sheets as described in
jdaggett@7242 5901 this module.
jdaggett@7242 5902
jdaggett@7242 5903 <h3 class=no-num id=partial> Partial Implementations</h3>
jdaggett@7242 5904
jdaggett@7242 5905 <p>So that authors can exploit the forward-compatible parsing rules to
jdaggett@7242 5906 assign fallback values, CSS renderers <strong>must</strong> treat as
jdaggett@7242 5907 invalid (and <a
jdaggett@7242 5908 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
jdaggett@7242 5909 appropriate</a>) any at-rules, properties, property values, keywords, and
jdaggett@7242 5910 other syntactic constructs for which they have no usable level of support.
jdaggett@7242 5911 In particular, user agents <strong>must not</strong> selectively ignore
jdaggett@7242 5912 unsupported component values and honor supported values in a single
jdaggett@7242 5913 multi-value property declaration: if any value is considered invalid (as
jdaggett@7242 5914 unsupported values must be), CSS requires that the entire declaration be
jdaggett@7242 5915 ignored.
jdaggett@7242 5916
jdaggett@7242 5917 <h3 class=no-num id=experimental> Experimental Implementations</h3>
jdaggett@7242 5918
jdaggett@7242 5919 <p>To avoid clashes with future CSS features, the CSS2.1 specification
jdaggett@7242 5920 reserves a <a
jdaggett@7242 5921 href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
jdaggett@7242 5922 syntax</a> for proprietary and experimental extensions to CSS.
jdaggett@7242 5923
jdaggett@7242 5924 <p>Prior to a specification reaching the Candidate Recommendation stage in
jdaggett@7242 5925 the W3C process, all implementations of a CSS feature are considered
jdaggett@7242 5926 experimental. The CSS Working Group recommends that implementations use a
jdaggett@7242 5927 vendor-prefixed syntax for such features, including those in W3C Working
jdaggett@7242 5928 Drafts. This avoids incompatibilities with future changes in the draft.
jdaggett@7242 5929
jdaggett@7242 5930 <h3 class=no-num id=testing> Non-Experimental Implementations</h3>
jdaggett@7242 5931
jdaggett@7242 5932 <p>Once a specification reaches the Candidate Recommendation stage,
jdaggett@7242 5933 non-experimental implementations are possible, and implementors should
jdaggett@7242 5934 release an unprefixed implementation of any CR-level feature they can
jdaggett@7242 5935 demonstrate to be correctly implemented according to spec.
jdaggett@7242 5936
jdaggett@7242 5937 <p>To establish and maintain the interoperability of CSS across
jdaggett@7242 5938 implementations, the CSS Working Group requests that non-experimental CSS
jdaggett@7242 5939 renderers submit an implementation report (and, if necessary, the
jdaggett@7242 5940 testcases used for that implementation report) to the W3C before releasing
jdaggett@7242 5941 an unprefixed implementation of any CSS features. Testcases submitted to
jdaggett@7242 5942 W3C are subject to review and correction by the CSS Working Group.
jdaggett@7242 5943
jdaggett@7242 5944 <p>Further information on submitting testcases and implementation reports
jdaggett@7242 5945 can be found from on the CSS Working Group's website at <a
jdaggett@7242 5946 href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
jdaggett@7242 5947 Questions should be directed to the <a
jdaggett@7242 5948 href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
jdaggett@7242 5949 mailing list.
jdaggett@7242 5950
jdaggett@484 5951 <h2 class=no-num id=references>References</h2>
jdaggett@484 5952
jdaggett@1662 5953 <h3 class=no-num id=normative-references>Normative References</h3>
jdaggett@484 5954 <!--begin-normative-->
jdaggett@484 5955 <!-- Sorted by label -->
jdaggett@484 5956
jdaggett@484 5957 <dl class=bibliography>
jdaggett@8031 5958 <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
jdaggett@484 5959 <!---->
jdaggett@531 5960
jdaggett@2461 5961 <dt id=CHARMOD>[CHARMOD]
jdaggett@2461 5962
jdaggett@2461 5963 <dd>Martin J. Dürst; et al. <a
jdaggett@2737 5964 href="http://www.w3.org/TR/2005/REC-charmod-20050215/"><cite>Character
jdaggett@2461 5965 Model for the World Wide Web 1.0: Fundamentals.</cite></a> 15 February
jdaggett@2461 5966 2005. W3C Recommendation. URL: <a
jdaggett@2737 5967 href="http://www.w3.org/TR/2005/REC-charmod-20050215/">http://www.w3.org/TR/2005/REC-charmod-20050215/</a>
jdaggett@2461 5968 </dd>
jdaggett@2461 5969 <!---->
jdaggett@2461 5970
jdaggett@2457 5971 <dt id=CORS>[CORS]
jdaggett@1662 5972
jdaggett@1662 5973 <dd>Anne van Kesteren. <a
jdaggett@7242 5974 href="http://www.w3.org/TR/2013/CR-cors-20130129/"><cite>Cross-Origin
jdaggett@7242 5975 Resource Sharing.</cite></a> 29 January 2013. W3C Candidate
jdaggett@7242 5976 Recommendation. (Work in progress.) URL: <a
jdaggett@7242 5977 href="http://www.w3.org/TR/2013/CR-cors-20130129/">http://www.w3.org/TR/2013/CR-cors-20130129/</a>
jdaggett@1662 5978 </dd>
jdaggett@1662 5979 <!---->
jdaggett@1662 5980
jdaggett@3041 5981 <dt id=CSS21>[CSS21]
jdaggett@3041 5982
jdaggett@3041 5983 <dd>Bert Bos; et al. <a
jdaggett@8031 5984 href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
jdaggett@3041 5985 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
jdaggett@3041 5986 2011. W3C Recommendation. URL: <a
jdaggett@8031 5987 href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
jdaggett@3041 5988 </dd>
jdaggett@3041 5989 <!---->
jdaggett@3041 5990
jdaggett@5833 5991 <dt id=CSS3VAL>[CSS3VAL]
jdaggett@5833 5992
jdaggett@5833 5993 <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
jdaggett@6701 5994 href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS
jdaggett@6701 5995 Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate
jdaggett@6701 5996 Recommendation. (Work in progress.) URL: <a
jdaggett@6701 5997 href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a>
jdaggett@5833 5998 </dd>
jdaggett@5833 5999 <!---->
jdaggett@5833 6000
jdaggett@1662 6001 <dt id=HTML5>[HTML5]
jdaggett@1662 6002
jdaggett@1856 6003 <dd>Ian Hickson. <a
jdaggett@7242 6004 href="http://www.w3.org/TR/2012/CR-html5-20121217/"><cite>HTML5.</cite></a>
jdaggett@7242 6005 17 December 2012. W3C Candidate Recommendation. (Work in progress.) URL:
jdaggett@7242 6006 <a
jdaggett@7242 6007 href="http://www.w3.org/TR/2012/CR-html5-20121217/">http://www.w3.org/TR/2012/CR-html5-20121217/</a>
jdaggett@1662 6008 </dd>
jdaggett@1662 6009 <!---->
jdaggett@1662 6010
jdaggett@1662 6011 <dt id=OPEN-FONT-FORMAT>[OPEN-FONT-FORMAT]
jdaggett@1662 6012
jdaggett@1662 6013 <dd><a
jdaggett@1662 6014 href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip"><cite>Information
jdaggett@1662 6015 technology — Coding of audio-visual objects — Part 22: Open Font
jdaggett@1662 6016 Format.</cite></a> International Organization for Standardization.
jdaggett@1662 6017 ISO/IEC 14496-22:2009. URL: <a
jdaggett@1662 6018 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>
jdaggett@1662 6019 </dd>
jdaggett@1662 6020 <!---->
jdaggett@1662 6021
jdaggett@1662 6022 <dt id=OPENTYPE>[OPENTYPE]
jdaggett@1662 6023
jdaggett@1662 6024 <dd><a
jdaggett@1662 6025 href="http://www.microsoft.com/typography/otspec/default.htm"><cite>OpenType
jdaggett@1662 6026 specification.</cite></a> Microsoft. URL: <a
jdaggett@1662 6027 href="http://www.microsoft.com/typography/otspec/default.htm">http://www.microsoft.com/typography/otspec/default.htm</a>
jdaggett@1662 6028 </dd>
jdaggett@1662 6029 <!---->
jdaggett@1662 6030
jdaggett@1662 6031 <dt id=OPENTYPE-FEATURES>[OPENTYPE-FEATURES]
jdaggett@1662 6032
jdaggett@1662 6033 <dd><a
jdaggett@1662 6034 href="http://www.microsoft.com/typography/otspec/featurelist.htm"><cite>OpenType
jdaggett@1662 6035 feature registry.</cite></a> Microsoft. URL: <a
jdaggett@1662 6036 href="http://www.microsoft.com/typography/otspec/featurelist.htm">http://www.microsoft.com/typography/otspec/featurelist.htm</a>
jdaggett@1662 6037 </dd>
jdaggett@1662 6038 <!---->
jdaggett@1662 6039
jdaggett@7103 6040 <dt id=RFC2119>[RFC2119]
jdaggett@7103 6041
jdaggett@7103 6042 <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
jdaggett@7103 6043 words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
jdaggett@7103 6044 RFC 2119. URL: <a
jdaggett@7103 6045 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
jdaggett@7103 6046 </dd>
jdaggett@7103 6047 <!---->
jdaggett@7103 6048
jdaggett@2457 6049 <dt id=UAX15>[UAX15]
jdaggett@2457 6050
jdaggett@7242 6051 <dd>Mark Davis; Ken Whistler. <a
jdaggett@7242 6052 href="http://www.unicode.org/reports/tr15/"><cite>Unicode Normalization
jdaggett@7242 6053 Forms.</cite></a> 31 August 2012. Unicode Standard Annex #15. URL: <a
jdaggett@7242 6054 href="http://www.unicode.org/reports/tr15/">http://www.unicode.org/reports/tr15/</a>
jdaggett@2457 6055 </dd>
jdaggett@2457 6056 <!---->
jdaggett@2457 6057
jdaggett@1856 6058 <dt id=UAX29>[UAX29]
jdaggett@1856 6059
jdaggett@1856 6060 <dd>Mark Davis. <a
jdaggett@5809 6061 href="http://www.unicode.org/reports/tr29/"><cite>Unicode Text
jdaggett@7242 6062 Segmentation.</cite></a> 12 September 2012. Unicode Standard Annex #29.
jdaggett@2461 6063 URL: <a
jdaggett@5809 6064 href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a>
jdaggett@1856 6065 </dd>
jdaggett@1856 6066 <!---->
jdaggett@1856 6067
jdaggett@3041 6068 <dt id=UNICODE6>[UNICODE6]
jdaggett@531 6069
jdaggett@531 6070 <dd>The Unicode Consortium. <a
jdaggett@7242 6071 href="http://www.unicode.org/versions/Unicode6.2.0/"><cite>The Unicode
jdaggett@7242 6072 Standard, Version 6.2.0.</cite></a> Defined by: The Unicode Standard,
jdaggett@7242 6073 Version 6.2.0 URL: <a
jdaggett@7242 6074 href="http://www.unicode.org/versions/Unicode6.2.0/">http://www.unicode.org/versions/Unicode6.2.0/</a>
jdaggett@531 6075 </dd>
jdaggett@531 6076 <!---->
jdaggett@484 6077 </dl>
jdaggett@484 6078 <!--end-normative-->
jdaggett@3041 6079 <!--{{!CSS21}}-->
jdaggett@5833 6080 <!--{{!CSS3VAL}}-->
jdaggett@1662 6081 <!--{{!OPENTYPE}}-->
jdaggett@1662 6082 <!--{{!OPENTYPE-FEATURES}}-->
jdaggett@1662 6083 <!--{{!OPEN-FONT-FORMAT}}-->
jdaggett@3041 6084 <!--{{!UNICODE6}}-->
jdaggett@2457 6085 <!--{{!UAX15}}-->
jdaggett@1856 6086 <!--{{!UAX29}}-->
jdaggett@2457 6087 <!--{{!CORS}}-->
jdaggett@1662 6088 <!--{{!HTML5}}-->
jdaggett@2461 6089 <!--{{!CHARMOD}}-->
jdaggett@1662 6090
jdaggett@1662 6091 <h3 class=no-num id=other-references>Other References</h3>
jdaggett@484 6092 <!--begin-informative-->
jdaggett@484 6093 <!-- Sorted by label -->
jdaggett@484 6094
jdaggett@484 6095 <dl class=bibliography>
jdaggett@8031 6096 <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
jdaggett@484 6097 <!---->
jdaggett@484 6098
jdaggett@3042 6099 <dt id=AAT-FEATURES>[AAT-FEATURES]
jdaggett@3042 6100
jdaggett@3042 6101 <dd><a href="http://developer.apple.com/fonts/registry/"><cite>Apple
jdaggett@3042 6102 Advanced Typography font feature registry.</cite></a> Apple. URL: <a
jdaggett@3042 6103 href="http://developer.apple.com/fonts/registry/">http://developer.apple.com/fonts/registry/</a>
jdaggett@3042 6104 </dd>
jdaggett@3042 6105 <!---->
jdaggett@3042 6106
jdaggett@512 6107 <dt id=ARABIC-TYPO>[ARABIC-TYPO]
jdaggett@512 6108
jdaggett@513 6109 <dd>Huda Smitshuijzen AbiFares. <cite>Arabic Typography: A Comprehensive
jdaggett@1148 6110 Sourcebook.</cite> Saqi Books. 2001. ISBN 0-86356-347-3.</dd>
jdaggett@512 6111 <!---->
jdaggett@512 6112
jdaggett@3042 6113 <dt id=CHARMOD-NORM>[CHARMOD-NORM]
jdaggett@3042 6114
jdaggett@3042 6115 <dd>François Yergeau; et al. <a
jdaggett@5809 6116 href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/"><cite>Character
jdaggett@5809 6117 Model for the World Wide Web 1.0: Normalization.</cite></a> 1 May 2012.
jdaggett@5809 6118 W3C Working Draft. (Work in progress.) URL: <a
jdaggett@5809 6119 href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/">http://www.w3.org/TR/2012/WD-charmod-norm-20120501/</a>
jdaggett@3042 6120 </dd>
jdaggett@3042 6121 <!---->
jdaggett@3042 6122
jdaggett@1732 6123 <dt id=CJKV-INFO-PROCESSING>[CJKV-INFO-PROCESSING]
jdaggett@1732 6124
jdaggett@1732 6125 <dd>Ken Lunde. <cite>CJKV Information Processing, Second Edition.</cite>
jdaggett@1732 6126 O'Reilly Media, Inc. 2009. ISBN 0-596-51447-1.</dd>
jdaggett@1732 6127 <!---->
jdaggett@1732 6128
jdaggett@3460 6129 <dt id=CSS3-CONDITIONAL>[CSS3-CONDITIONAL]
jdaggett@3460 6130
jdaggett@3460 6131 <dd>L. David Baron. <a
jdaggett@7242 6132 href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/"><cite>CSS
jdaggett@7242 6133 Conditional Rules Module Level 3.</cite></a> 13 December 2012. W3C
jdaggett@3460 6134 Working Draft. (Work in progress.) URL: <a
jdaggett@7242 6135 href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/">http://www.w3.org/TR/2012/WD-css3-conditional-20121213/</a>
jdaggett@3460 6136 </dd>
jdaggett@3460 6137 <!---->
jdaggett@3460 6138
jdaggett@6701 6139 <dt id=CSS3TEXT>[CSS3TEXT]
jdaggett@6701 6140
jdaggett@6701 6141 <dd>Elika J. Etemad; Koji Ishii. <a
jdaggett@7041 6142 href="http://www.w3.org/TR/2012/WD-css3-text-20121113/"><cite>CSS Text
jdaggett@7041 6143 Module Level 3.</cite></a> 13 November 2012. W3C Working Draft. (Work in
jdaggett@6701 6144 progress.) URL: <a
jdaggett@7041 6145 href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">http://www.w3.org/TR/2012/WD-css3-text-20121113/</a>
jdaggett@6701 6146 </dd>
jdaggett@6701 6147 <!---->
jdaggett@6701 6148
jdaggett@1856 6149 <dt id=DIGITAL-TYPOGRAPHY>[DIGITAL-TYPOGRAPHY]
jdaggett@1856 6150
jdaggett@1856 6151 <dd>Richard Rubinstein. <cite>Digital Typography, An Introduction to Type
jdaggett@1856 6152 and Composition for Computer System Design.</cite> Addison-Wesley. 1988.
jdaggett@1856 6153 ISBN 0-201-17633-5.</dd>
jdaggett@1856 6154 <!---->
jdaggett@1856 6155
jdaggett@7022 6156 <dt id=DOM-LEVEL-2-STYLE>[DOM-LEVEL-2-STYLE]
jdaggett@7022 6157
jdaggett@7022 6158 <dd>Chris Wilson; Philippe Le Hégaret; Vidur Apparao. <a
jdaggett@7179 6159 href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/"><cite>Document
jdaggett@7022 6160 Object Model (DOM) Level 2 Style Specification.</cite></a> 13 November
jdaggett@7022 6161 2000. W3C Recommendation. URL: <a
jdaggett@7179 6162 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>
jdaggett@7022 6163 </dd>
jdaggett@7022 6164 <!---->
jdaggett@7022 6165
jdaggett@498 6166 <dt id=ELEMTYPO>[ELEMTYPO]
jdaggett@498 6167
jdaggett@498 6168 <dd>Robert Bringhurst. <cite>The Elements of Typographic Style, Version
jdaggett@7488 6169 4.</cite> Hartley &amp; Marks. 2013. ISBN 0-88179-212-8.</dd>
jdaggett@498 6170 <!---->
jdaggett@498 6171
jdaggett@513 6172 <dt id=LANGCULTTYPE>[LANGCULTTYPE]
jdaggett@513 6173
jdaggett@1148 6174 <dd>John D. Berry, Ed. <cite>Language Culture Type.</cite> Graphis. 2001.
jdaggett@1148 6175 ISBN 1-932026-01-0.</dd>
jdaggett@512 6176 <!---->
jdaggett@1662 6177
jdaggett@1662 6178 <dt id=OPENTYPE-FONT-GUIDE>[OPENTYPE-FONT-GUIDE]
jdaggett@1662 6179
jdaggett@1662 6180 <dd><a
jdaggett@3538 6181 href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf"><cite>OpenType
jdaggett@1662 6182 User Guide.</cite></a> FontShop International. URL: <a
jdaggett@3538 6183 href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf">https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf</a>
jdaggett@1662 6184 </dd>
jdaggett@1662 6185 <!---->
jdaggett@1856 6186
jdaggett@2527 6187 <dt id=RASTER-TRAGEDY>[RASTER-TRAGEDY]
jdaggett@2527 6188
jdaggett@2527 6189 <dd>Beat Stamm. <a href="http://www.rastertragedy.com/"><cite>The Raster
jdaggett@6659 6190 Tragedy at Low-Resolution Revisited.</cite></a> 7 December 2011. URL: <a
jdaggett@2527 6191 href="http://www.rastertragedy.com/">http://www.rastertragedy.com/</a></dd>
jdaggett@2527 6192 <!---->
jdaggett@2527 6193
jdaggett@1856 6194 <dt id=WINDOWS-GLYPH-PROC>[WINDOWS-GLYPH-PROC]
jdaggett@1856 6195
jdaggett@1856 6196 <dd>John Hudson. <a
jdaggett@1856 6197 href="http://www.microsoft.com/typography/developers/opentype/default.htm"><cite>Windows
jdaggett@1856 6198 Glyph Processing.</cite></a> Microsoft Typogrraphy. URL: <a
jdaggett@1856 6199 href="http://www.microsoft.com/typography/developers/opentype/default.htm">http://www.microsoft.com/typography/developers/opentype/default.htm</a>
jdaggett@1856 6200 </dd>
jdaggett@1856 6201 <!---->
jdaggett@484 6202 </dl>
jdaggett@484 6203 <!--end-informative-->
jdaggett@518 6204 <!--{{ARABIC-TYPO}}-->
jdaggett@1732 6205 <!--{{CJKV-INFO-PROCESSING}}-->
jdaggett@1856 6206 <!--{{DIGITAL-TYPOGRAPHY}}-->
jdaggett@7022 6207 <!--{{DOM-LEVEL-2-STYLE}}-->
jdaggett@518 6208 <!--{{ELEMTYPO}}-->
jdaggett@1856 6209 <!--{{LANGCULTTYPE}}-->
jdaggett@1662 6210 <!--{{OPENTYPE-FONT-GUIDE}}-->
jdaggett@2527 6211 <!--{{RASTER-TRAGEDY}}-->
jdaggett@1856 6212 <!--{{WINDOWS-GLYPH-PROC}}-->
jdaggett@3042 6213 <!--{{CHARMOD-NORM}}-->
jdaggett@3042 6214 <!--{{AAT-FEATURES}}-->
jdaggett@3460 6215 <!--{{CSS3-CONDITIONAL}}-->
jdaggett@6701 6216 <!--{{CSS3TEXT}}-->
jdaggett@484 6217
jdaggett@484 6218 <h2 class=no-num id=index>Index</h2>
jdaggett@484 6219 <!--begin-index-->
jdaggett@484 6220
jdaggett@484 6221 <ul class=indexlist>
jdaggett@8278 6222 <li>100...900 weight values, <a href="#font-weight-numeric-values"
jdaggett@8278 6223 title="100...900 weight values"><strong>3.2</strong></a>
jdaggett@8278 6224
jdaggett@8225 6225 <li><var>&lt;absolute-size&gt;</var>, <a href="#absolute-size-value"
jdaggett@7060 6226 title="&lt;absolute-size&gt;"><strong>3.5</strong></a>
jdaggett@890 6227
jdaggett@8225 6228 <li><var>&lt;common-lig-values&gt;</var>, <a href="#common-lig-values"
jdaggett@8225 6229 title="&lt;common-lig-values&gt;"><strong>6.4</strong></a>
jdaggett@2479 6230
jdaggett@2479 6231 <li><var>&lt;contextual-alt-values&gt;</var>, <a
jdaggett@8225 6232 href="#contextual-alt-values"
jdaggett@6176 6233 title="&lt;contextual-alt-values&gt;"><strong>6.4</strong></a>
jdaggett@2479 6234
jdaggett@8225 6235 <li><var>&lt;discretionary-lig-values&gt;</var>, <a
jdaggett@8225 6236 href="#discretionary-lig-values"
jdaggett@8225 6237 title="&lt;discretionary-lig-values&gt;"><strong>6.4</strong></a>
jdaggett@3460 6238
jdaggett@2479 6239 <li><var>&lt;east-asian-variant-values&gt;</var>, <a
jdaggett@8225 6240 href="#east-asian-variant-values"
jdaggett@2479 6241 title="&lt;east-asian-variant-values&gt;"><strong>6.10</strong></a>
jdaggett@2479 6242
jdaggett@2479 6243 <li><var>&lt;east-asian-width-values&gt;</var>, <a
jdaggett@8225 6244 href="#east-asian-width-values"
jdaggett@2479 6245 title="&lt;east-asian-width-values&gt;"><strong>6.10</strong></a>
jdaggett@2479 6246
jdaggett@8225 6247 <li><var>&lt;family-name&gt;</var>, <a href="#family-name-value"
jdaggett@8225 6248 title="&lt;family-name&gt;"><strong>3.1</strong></a>
jdaggett@8225 6249
jdaggett@8225 6250 <li><var>&lt;feature-tag-value&gt;</var>, <a href="#feature-tag-value"
jdaggett@2515 6251 title="&lt;feature-tag-value&gt;"><strong>6.12</strong></a>
jdaggett@2515 6252
jdaggett@8225 6253 <li><var>&lt;font-face-name&gt;</var>, <a href="#font-face-name-value"
jdaggett@7060 6254 title="&lt;font-face-name&gt;"><strong>4.3</strong></a>
jdaggett@4624 6255
jdaggett@4624 6256 <li><var>&lt;font-variant-css21&gt;</var>, <a
jdaggett@8225 6257 href="#font-variant-css21-values"
jdaggett@4624 6258 title="&lt;font-variant-css21&gt;"><strong>3.7</strong></a>
jdaggett@4624 6259
jdaggett@8225 6260 <li><var>&lt;generic-family&gt;</var>, <a href="#generic-family-value"
jdaggett@8225 6261 title="&lt;generic-family&gt;"><strong>3.1</strong></a>
jdaggett@8225 6262
jdaggett@8225 6263 <li><var>&lt;historical-lig-values&gt;</var>, <a
jdaggett@8225 6264 href="#historical-lig-values"
jdaggett@8225 6265 title="&lt;historical-lig-values&gt;"><strong>6.4</strong></a>
jdaggett@8225 6266
jdaggett@8225 6267 <li><var>&lt;length&gt;</var>, <a href="#length-size-value"
jdaggett@8225 6268 title="&lt;length&gt;"><strong>3.5</strong></a>
jdaggett@8225 6269
jdaggett@8225 6270 <li><var>&lt;number&gt;</var>, <a href="#aspect-ratio-value"
jdaggett@8225 6271 title="&lt;number&gt;"><strong>3.6</strong></a>
jdaggett@4624 6272
jdaggett@4624 6273 <li><var>&lt;numeric-figure-values&gt;</var>, <a
jdaggett@8225 6274 href="#numeric-figure-values"
jdaggett@4624 6275 title="&lt;numeric-figure-values&gt;"><strong>6.7</strong></a>
jdaggett@4624 6276
jdaggett@4624 6277 <li><var>&lt;numeric-fraction-values&gt;</var>, <a
jdaggett@8225 6278 href="#numeric-fraction-values"
jdaggett@4624 6279 title="&lt;numeric-fraction-values&gt;"><strong>6.7</strong></a>
jdaggett@4624 6280
jdaggett@4624 6281 <li><var>&lt;numeric-spacing-values&gt;</var>, <a
jdaggett@8225 6282 href="#numeric-spacing-values"
jdaggett@4624 6283 title="&lt;numeric-spacing-values&gt;"><strong>6.7</strong></a>
jdaggett@4624 6284
jdaggett@8225 6285 <li><var>&lt;percentage&gt;</var>, <a href="#percentage-size-value"
jdaggett@8225 6286 title="&lt;percentage&gt;"><strong>3.5</strong></a>
jdaggett@8225 6287
jdaggett@8225 6288 <li><var>&lt;relative-size&gt;</var>, <a href="#relative-size-value"
jdaggett@7060 6289 title="&lt;relative-size&gt;"><strong>3.5</strong></a>
jdaggett@7060 6290
jdaggett@8278 6291 <li><var>&lt;string&gt;</var>, <a
jdaggett@8278 6292 href="#font-language-override-string-value"
jdaggett@8278 6293 title="&lt;string&gt;"><strong>6.13</strong></a>
jdaggett@8278 6294
jdaggett@8225 6295 <li><var>&lt;urange&gt;</var>, <a href="#urange-value"
jdaggett@8225 6296 title="&lt;urange&gt;"><strong>4.5</strong></a>
jdaggett@2479 6297
jdaggett@8311 6298 <li><code>@font-face</code>, <a href="#at-font-face-rule"
jdaggett@8311 6299 title="@font-face"><strong>4.1</strong></a>
jdaggett@8311 6300
jdaggett@8311 6301 <li><code>@font-feature-values</code>, <a
jdaggett@8311 6302 href="#at-font-feature-values-rule"
jdaggett@8311 6303 title="@font-feature-values"><strong>6.9</strong></a>
jdaggett@2479 6304
jdaggett@4624 6305 <li>all-petite-caps, <a href="#all-petite-caps"
jdaggett@4624 6306 title=all-petite-caps><strong>6.6</strong></a>
jdaggett@4624 6307
jdaggett@4624 6308 <li>all-small-caps, <a href="#all-small-caps"
jdaggett@4624 6309 title=all-small-caps><strong>6.6</strong></a>
jdaggett@4624 6310
jdaggett@8225 6311 <li>annotation, <a href="#annotation"
jdaggett@7060 6312 title=annotation><strong>6.8</strong></a>
jdaggett@4624 6313
jdaggett@4624 6314 <li>aspect value, <a href="#aspect-value0" title="aspect
jdaggett@4624 6315 value"><strong>3.6</strong></a>
jdaggett@4624 6316
jdaggett@7103 6317 <li>authoring tool, <a href="#authoring-tool" title="authoring
jdaggett@7243 6318 tool"><strong>#</strong></a>
jdaggett@7103 6319
jdaggett@8278 6320 <li>auto
jdaggett@8278 6321 <ul>
jdaggett@8278 6322 <li>font-kerning, <a href="#font-kerning-auto-value" title="auto,
jdaggett@8278 6323 font-kerning"><strong>6.3</strong></a>
jdaggett@8278 6324
jdaggett@8278 6325 <li>font-size-adjust, <a href="#font-size-adjust-auto-value"
jdaggett@8278 6326 title="auto, font-size-adjust"><strong>3.6</strong></a>
jdaggett@8278 6327 </ul>
jdaggett@8278 6328
jdaggett@8278 6329 <li>bold, <a href="#bold" title=bold><strong>3.2</strong></a>
jdaggett@8278 6330
jdaggett@8278 6331 <li>bolder, <a href="#bolder" title=bolder><strong>3.2</strong></a>
jdaggett@8278 6332
jdaggett@7311 6333 <li>character map, <a href="#character-map" title="character
jdaggett@7311 6334 map"><strong>5.2</strong></a>
jdaggett@7311 6335
jdaggett@8225 6336 <li>character-variant, <a href="#character-variant"
jdaggett@7060 6337 title=character-variant><strong>6.8</strong></a>
jdaggett@4624 6338
jdaggett@4624 6339 <li>common-ligatures, <a href="#common-ligatures"
jdaggett@6176 6340 title=common-ligatures><strong>6.4</strong></a>
jdaggett@4624 6341
jdaggett@8278 6342 <li>condensed, <a href="#condensed"
jdaggett@8278 6343 title=condensed><strong>3.3</strong></a>
jdaggett@8278 6344
jdaggett@4624 6345 <li>contextual, <a href="#contextual"
jdaggett@6176 6346 title=contextual><strong>6.4</strong></a>
jdaggett@4624 6347
jdaggett@7021 6348 <li>CSSFontFaceRule, <a href="#cssfontfacerule"
jdaggett@7021 6349 title=CSSFontFaceRule><strong>8.1</strong></a>
jdaggett@7021 6350
jdaggett@7021 6351 <li>CSSFontFeatureValuesRule, <a href="#cssfontfeaturevaluesrule"
jdaggett@7021 6352 title=CSSFontFeatureValuesRule><strong>8.2</strong></a>
jdaggett@7021 6353
jdaggett@4624 6354 <li>cursive, definition of, <a href="#cursive0" title="cursive, definition
jdaggett@4624 6355 of"><strong>#</strong></a>
jdaggett@4624 6356
jdaggett@7232 6357 <li>default face, <a href="#default-face" title="default
jdaggett@7309 6358 face"><strong>5.2</strong></a>
jdaggett@7232 6359
jdaggett@8031 6360 <li>descriptor_declaration, <a href="#descriptordeclaration"
jdaggett@8031 6361 title="descriptor_declaration"><strong>4.1</strong></a>
jdaggett@8031 6362
jdaggett@4624 6363 <li>diagonal-fractions, <a href="#diagonal-fractions"
jdaggett@4624 6364 title=diagonal-fractions><strong>6.7</strong></a>
jdaggett@4624 6365
jdaggett@4624 6366 <li>discretionary-ligatures, <a href="#discretionary-ligatures"
jdaggett@6176 6367 title=discretionary-ligatures><strong>6.4</strong></a>
jdaggett@4624 6368
jdaggett@8278 6369 <li>expanded, <a href="#expanded" title=expanded><strong>3.3</strong></a>
jdaggett@8278 6370
jdaggett@8278 6371 <li>extra-condensed, <a href="#extra-condensed"
jdaggett@8278 6372 title=extra-condensed><strong>3.3</strong></a>
jdaggett@8278 6373
jdaggett@8278 6374 <li>extra-expanded, <a href="#extra-expanded"
jdaggett@8278 6375 title=extra-expanded><strong>3.3</strong></a>
jdaggett@8278 6376
jdaggett@4624 6377 <li>fantasy, definition of, <a href="#fantasy0" title="fantasy, definition
jdaggett@4624 6378 of"><strong>#</strong></a>
jdaggett@4624 6379
jdaggett@8031 6380 <li>feature_type, <a href="#featuretype"
jdaggett@8356 6381 title="feature_type"><strong>6.9.1</strong></a>
jdaggett@8031 6382
jdaggett@8031 6383 <li>feature_value_block, <a href="#featurevalueblock"
jdaggett@8356 6384 title="feature_value_block"><strong>6.9.1</strong></a>
jdaggett@8031 6385
jdaggett@8031 6386 <li>feature_value_definition, <a href="#featurevaluedefinition"
jdaggett@8356 6387 title="feature_value_definition"><strong>6.9.1</strong></a>
jdaggett@7679 6388
jdaggett@4624 6389 <li>font, <a href="#propdef-font" title=font><strong>3.7</strong></a>
jdaggett@2472 6390
jdaggett@8356 6391 <li>font specific, <a href="#font-specific" title="font
jdaggett@8356 6392 specific"><strong>6.8</strong></a>
jdaggett@8356 6393
jdaggett@8278 6394 <li>font-family
jdaggett@8278 6395 <ul>
jdaggett@8278 6396 <li>descriptor, <a href="#descdef-font-family" title="font-family,
jdaggett@8278 6397 descriptor"><strong>4.2</strong></a>
jdaggett@8278 6398
jdaggett@8278 6399 <li>property, <a href="#propdef-font-family" title="font-family,
jdaggett@8278 6400 property"><strong>3.1</strong></a>
jdaggett@8278 6401 </ul>
jdaggett@1662 6402
jdaggett@8279 6403 <li>font-feature-settings
jdaggett@8278 6404 <ul>
jdaggett@8278 6405 <li>descriptor, <a href="#descdef-font-feature-settings"
jdaggett@8278 6406 title="font-feature-settings, descriptor"><strong>4.7</strong></a>
jdaggett@8279 6407
jdaggett@8279 6408 <li>property, <a href="#propdef-font-feature-settings"
jdaggett@8279 6409 title="font-feature-settings, property"><strong>6.12</strong></a>
jdaggett@8278 6410 </ul>
jdaggett@7060 6411
jdaggett@1662 6412 <li>font-kerning, <a href="#propdef-font-kerning"
jdaggett@1856 6413 title=font-kerning><strong>6.3</strong></a>
jdaggett@1662 6414
jdaggett@1732 6415 <li>font-language-override, <a href="#propdef-font-language-override"
jdaggett@2118 6416 title=font-language-override><strong>6.13</strong></a>
jdaggett@1662 6417
jdaggett@1662 6418 <li>font-size, <a href="#propdef-font-size"
jdaggett@1662 6419 title=font-size><strong>3.5</strong></a>
jdaggett@1662 6420
jdaggett@1662 6421 <li>font-size-adjust, <a href="#propdef-font-size-adjust"
jdaggett@1662 6422 title=font-size-adjust><strong>3.6</strong></a>
jdaggett@1662 6423
jdaggett@8278 6424 <li>font-stretch
jdaggett@8278 6425 <ul>
jdaggett@8278 6426 <li>descriptor, <a href="#descdef-font-stretch" title="font-stretch,
jdaggett@8278 6427 descriptor"><strong>4.4</strong></a>
jdaggett@8278 6428
jdaggett@8278 6429 <li>property, <a href="#propdef-font-stretch" title="font-stretch,
jdaggett@8278 6430 property"><strong>3.3</strong></a>
jdaggett@8278 6431 </ul>
jdaggett@8278 6432
jdaggett@8278 6433 <li>font-style
jdaggett@8278 6434 <ul>
jdaggett@8278 6435 <li>descriptor, <a href="#descdef-font-style" title="font-style,
jdaggett@8278 6436 descriptor"><strong>4.4</strong></a>
jdaggett@8278 6437
jdaggett@8278 6438 <li>property, <a href="#propdef-font-style" title="font-style,
jdaggett@8278 6439 property"><strong>3.4</strong></a>
jdaggett@8278 6440 </ul>
jdaggett@7060 6441
jdaggett@2487 6442 <li>font-synthesis, <a href="#propdef-font-synthesis"
jdaggett@2487 6443 title=font-synthesis><strong>3.8</strong></a>
jdaggett@2457 6444
jdaggett@8278 6445 <li>font-variant
jdaggett@8278 6446 <ul>
jdaggett@8278 6447 <li>descriptor, <a href="#descdef-font-variant" title="font-variant,
jdaggett@8278 6448 descriptor"><strong>4.7</strong></a>
jdaggett@8278 6449
jdaggett@8278 6450 <li>property, <a href="#propdef-font-variant" title="font-variant,
jdaggett@8278 6451 property"><strong>6.11</strong></a>
jdaggett@8278 6452 </ul>
jdaggett@1662 6453
jdaggett@1662 6454 <li>font-variant-alternates, <a href="#propdef-font-variant-alternates"
jdaggett@2118 6455 title=font-variant-alternates><strong>6.8</strong></a>
jdaggett@1662 6456
jdaggett@1662 6457 <li>font-variant-caps, <a href="#propdef-font-variant-caps"
jdaggett@2118 6458 title=font-variant-caps><strong>6.6</strong></a>
jdaggett@1732 6459
jdaggett@1662 6460 <li>font-variant-east-asian, <a href="#propdef-font-variant-east-asian"
jdaggett@2118 6461 title=font-variant-east-asian><strong>6.10</strong></a>
jdaggett@1662 6462
jdaggett@1662 6463 <li>font-variant-ligatures, <a href="#propdef-font-variant-ligatures"
jdaggett@6176 6464 title=font-variant-ligatures><strong>6.4</strong></a>
jdaggett@1662 6465
jdaggett@1662 6466 <li>font-variant-numeric, <a href="#propdef-font-variant-numeric"
jdaggett@2118 6467 title=font-variant-numeric><strong>6.7</strong></a>
jdaggett@2118 6468
jdaggett@3460 6469 <li>font-variant-position, <a href="#propdef-font-variant-position"
jdaggett@6176 6470 title=font-variant-position><strong>6.5</strong></a>
jdaggett@3460 6471
jdaggett@8278 6472 <li>font-weight
jdaggett@8278 6473 <ul>
jdaggett@8278 6474 <li>descriptor, <a href="#descdef-font-weight" title="font-weight,
jdaggett@8278 6475 descriptor"><strong>4.4</strong></a>
jdaggett@8278 6476
jdaggett@8278 6477 <li>property, <a href="#propdef-font-weight" title="font-weight,
jdaggett@8278 6478 property"><strong>3.2</strong></a>
jdaggett@8278 6479 </ul>
jdaggett@1662 6480
jdaggett@8031 6481 <li>font_face_rule, <a href="#fontfacerule"
jdaggett@8031 6482 title="font_face_rule"><strong>4.1</strong></a>
jdaggett@8031 6483
jdaggett@8225 6484 <li>FONT_FACE_SYM, <a href="#fontfacesym"
jdaggett@8225 6485 title="FONT_FACE_SYM"><strong>4.1</strong></a>
jdaggett@8225 6486
jdaggett@8031 6487 <li>font_family_name, <a href="#fontfamilyname"
jdaggett@8356 6488 title="font_family_name"><strong>6.9.1</strong></a>
jdaggett@8031 6489
jdaggett@8031 6490 <li>font_family_name_list, <a href="#fontfamilynamelist"
jdaggett@8356 6491 title="font_family_name_list"><strong>6.9.1</strong></a>
jdaggett@8031 6492
jdaggett@8031 6493 <li>font_feature_values_rule, <a href="#fontfeaturevaluesrule"
jdaggett@8356 6494 title="font_feature_values_rule"><strong>6.9.1</strong></a>
jdaggett@8031 6495
jdaggett@8225 6496 <li>FONT_FEATURE_VALUES_SYM, <a href="#fontfeaturevaluessym"
jdaggett@8356 6497 title="FONT_FEATURE_VALUES_SYM"><strong>6.9.1</strong></a>
jdaggett@8225 6498
jdaggett@1662 6499 <li>full-width, <a href="#full-width"
jdaggett@2118 6500 title=full-width><strong>6.10</strong></a>
jdaggett@1662 6501
jdaggett@1662 6502 <li>historical-forms, <a href="#historical-forms"
jdaggett@2118 6503 title=historical-forms><strong>6.8</strong></a>
jdaggett@1662 6504
jdaggett@1662 6505 <li>historical-ligatures, <a href="#historical-ligatures"
jdaggett@6176 6506 title=historical-ligatures><strong>6.4</strong></a>
jdaggett@1732 6507
jdaggett@8278 6508 <li>italic, <a href="#italic" title=italic><strong>3.4</strong></a>
jdaggett@8278 6509
jdaggett@2118 6510 <li>jis04, <a href="#jis04" title=jis04><strong>6.10</strong></a>
jdaggett@2118 6511
jdaggett@2118 6512 <li>jis78, <a href="#jis78" title=jis78><strong>6.10</strong></a>
jdaggett@2118 6513
jdaggett@2118 6514 <li>jis83, <a href="#jis83" title=jis83><strong>6.10</strong></a>
jdaggett@2118 6515
jdaggett@2118 6516 <li>jis90, <a href="#jis90" title=jis90><strong>6.10</strong></a>
jdaggett@1662 6517
jdaggett@8278 6518 <li>lighter, <a href="#lighter" title=lighter><strong>3.2</strong></a>
jdaggett@8278 6519
jdaggett@1662 6520 <li>lining-nums, <a href="#lining-nums"
jdaggett@2118 6521 title=lining-nums><strong>6.7</strong></a>
jdaggett@890 6522
jdaggett@890 6523 <li>monospace, definition of, <a href="#monospace0" title="monospace,
jdaggett@890 6524 definition of"><strong>#</strong></a>
jdaggett@890 6525
jdaggett@1662 6526 <li>no-common-ligatures, <a href="#no-common-ligatures"
jdaggett@6176 6527 title=no-common-ligatures><strong>6.4</strong></a>
jdaggett@1662 6528
jdaggett@1662 6529 <li>no-contextual, <a href="#no-contextual"
jdaggett@6176 6530 title=no-contextual><strong>6.4</strong></a>
jdaggett@1662 6531
jdaggett@3460 6532 <li>no-discretionary-ligatures, <a href="#no-discretionary-ligatures"
jdaggett@6176 6533 title=no-discretionary-ligatures><strong>6.4</strong></a>
jdaggett@3460 6534
jdaggett@1662 6535 <li>no-historical-ligatures, <a href="#no-historical-ligatures"
jdaggett@6176 6536 title=no-historical-ligatures><strong>6.4</strong></a>
jdaggett@1662 6537
jdaggett@8278 6538 <li>none
jdaggett@8278 6539 <ul>
jdaggett@8278 6540 <li>font-kerning, <a href="#font-kerning-none-value" title="none,
jdaggett@8278 6541 font-kerning"><strong>6.3</strong></a>
jdaggett@8278 6542
jdaggett@8278 6543 <li>font-size-adjust, <a href="#font-size-adjust-none-value"
jdaggett@8278 6544 title="none, font-size-adjust"><strong>3.6</strong></a>
jdaggett@8278 6545
jdaggett@8278 6546 <li>font-variant, <a href="#font-variant-none-value" title="none,
jdaggett@8278 6547 font-variant"><strong>6.11</strong></a>
jdaggett@8278 6548
jdaggett@8278 6549 <li>font-variant-ligatures, <a href="#font-variant-ligatures-none-value"
jdaggett@8278 6550 title="none, font-variant-ligatures"><strong>6.4</strong></a>
jdaggett@8278 6551 </ul>
jdaggett@8278 6552
jdaggett@8279 6553 <li>normal, <a href="#normal" title=normal><strong>6.5</strong></a>
jdaggett@8278 6554 <ul>
jdaggett@8278 6555 <li>font-feature-settings, <a href="#font-feature-settings-normal-value"
jdaggett@8278 6556 title="normal, font-feature-settings"><strong>6.12</strong></a>
jdaggett@8278 6557
jdaggett@8278 6558 <li>font-kerning, <a href="#font-kerning-normal-value" title="normal,
jdaggett@8278 6559 font-kerning"><strong>6.3</strong></a>
jdaggett@8278 6560
jdaggett@8278 6561 <li>font-language-override, <a
jdaggett@8278 6562 href="#font-language-override-normal-value" title="normal,
jdaggett@8278 6563 font-language-override"><strong>6.13</strong></a>
jdaggett@8278 6564
jdaggett@8278 6565 <li>font-stretch, <a href="#font-stretch-normal-value" title="normal,
jdaggett@8278 6566 font-stretch"><strong>3.3</strong></a>
jdaggett@8278 6567
jdaggett@8278 6568 <li>font-style, <a href="#font-style-normal-value" title="normal,
jdaggett@8278 6569 font-style"><strong>3.4</strong></a>
jdaggett@8278 6570
jdaggett@8278 6571 <li>font-variant, <a href="#font-variant-normal-value" title="normal,
jdaggett@8278 6572 font-variant"><strong>6.11</strong></a>
jdaggett@8278 6573
jdaggett@8278 6574 <li>font-variant-alternates, <a
jdaggett@8278 6575 href="#font-variant-alternates-normal-value" title="normal,
jdaggett@8278 6576 font-variant-alternates"><strong>6.8</strong></a>
jdaggett@8278 6577
jdaggett@8278 6578 <li>font-variant-caps, <a href="#font-variant-caps-normal-value"
jdaggett@8278 6579 title="normal, font-variant-caps"><strong>6.6</strong></a>
jdaggett@8278 6580
jdaggett@8278 6581 <li>font-variant-east-asian, <a
jdaggett@8278 6582 href="#font-variant-east-asian-normal-value" title="normal,
jdaggett@8278 6583 font-variant-east-asian"><strong>6.10</strong></a>
jdaggett@8278 6584
jdaggett@8278 6585 <li>font-variant-ligatures, <a
jdaggett@8278 6586 href="#font-variant-ligatures-normal-value" title="normal,
jdaggett@8278 6587 font-variant-ligatures"><strong>6.4</strong></a>
jdaggett@8278 6588
jdaggett@8278 6589 <li>font-variant-numeric, <a href="#font-variant-numeric-normal-value"
jdaggett@8278 6590 title="normal, font-variant-numeric"><strong>6.7</strong></a>
jdaggett@8278 6591
jdaggett@8278 6592 <li>font-weight, <a href="#font-weight-normal-value" title="normal,
jdaggett@8278 6593 font-weight"><strong>3.2</strong></a>
jdaggett@8278 6594 </ul>
jdaggett@8278 6595
jdaggett@8278 6596 <li>oblique, <a href="#oblique" title=oblique><strong>3.4</strong></a>
jdaggett@5809 6597
jdaggett@1662 6598 <li>oldstyle-nums, <a href="#oldstyle-nums"
jdaggett@2118 6599 title=oldstyle-nums><strong>6.7</strong></a>
jdaggett@2118 6600
jdaggett@3638 6601 <li>ordinal, <a href="#ordinal" title=ordinal><strong>6.7</strong></a>
jdaggett@3638 6602
jdaggett@8225 6603 <li>ornaments, <a href="#ornaments"
jdaggett@7060 6604 title=ornaments><strong>6.8</strong></a>
jdaggett@2118 6605
jdaggett@1662 6606 <li>petite-caps, <a href="#petite-caps"
jdaggett@2118 6607 title=petite-caps><strong>6.6</strong></a>
jdaggett@1662 6608
jdaggett@1662 6609 <li>proportional-nums, <a href="#proportional-nums"
jdaggett@2118 6610 title=proportional-nums><strong>6.7</strong></a>
jdaggett@1662 6611
jdaggett@1662 6612 <li>proportional-width, <a href="#proportional-width"
jdaggett@2118 6613 title=proportional-width><strong>6.10</strong></a>
jdaggett@512 6614
jdaggett@7243 6615 <li>renderer, <a href="#renderer" title=renderer><strong>#</strong></a>
jdaggett@7103 6616
jdaggett@3638 6617 <li>ruby, <a href="#ruby" title=ruby><strong>6.10</strong></a>
jdaggett@1662 6618
jdaggett@890 6619 <li>sans-serif, definition of, <a href="#sans-serif0" title="sans-serif,
jdaggett@890 6620 definition of"><strong>#</strong></a>
jdaggett@890 6621
jdaggett@8278 6622 <li>semi-condensed, <a href="#semi-condensed-"
jdaggett@8278 6623 title=semi-condensed><strong>3.3</strong></a>
jdaggett@8278 6624
jdaggett@8278 6625 <li>semi-expanded, <a href="#semi-expanded"
jdaggett@8278 6626 title=semi-expanded><strong>3.3</strong></a>
jdaggett@8278 6627
jdaggett@890 6628 <li>serif, definition of, <a href="#serif0" title="serif, definition
jdaggett@890 6629 of"><strong>#</strong></a>
jdaggett@890 6630
jdaggett@2504 6631 <li>simplified, <a href="#simplified"
jdaggett@2504 6632 title=simplified><strong>6.10</strong></a>
jdaggett@1662 6633
jdaggett@1662 6634 <li>slashed-zero, <a href="#slashed-zero"
jdaggett@2118 6635 title=slashed-zero><strong>6.7</strong></a>
jdaggett@1662 6636
jdaggett@1662 6637 <li>small-caps, <a href="#small-caps"
jdaggett@2118 6638 title=small-caps><strong>6.6</strong></a>
jdaggett@1662 6639
jdaggett@1662 6640 <li>src, <a href="#descdef-src" title=src><strong>4.3</strong></a>
jdaggett@1662 6641
jdaggett@1662 6642 <li>stacked-fractions, <a href="#stacked-fractions"
jdaggett@2118 6643 title=stacked-fractions><strong>6.7</strong></a>
jdaggett@2118 6644
jdaggett@7103 6645 <li>style sheet
jdaggett@7103 6646 <ul>
jdaggett@7103 6647 <li>as conformance class, <a href="#style-sheet" title="style sheet, as
jdaggett@7243 6648 conformance class"><strong>#</strong></a>
jdaggett@7103 6649 </ul>
jdaggett@7103 6650
jdaggett@8225 6651 <li>styleset, <a href="#styleset" title=styleset><strong>6.8</strong></a>
jdaggett@8225 6652
jdaggett@8225 6653 <li>stylistic, <a href="#stylistic"
jdaggett@7060 6654 title=stylistic><strong>6.8</strong></a>
jdaggett@7060 6655
jdaggett@8279 6656 <li>sub, <a href="#sub" title=sub><strong>6.5</strong></a>
jdaggett@8279 6657
jdaggett@8279 6658 <li>super, <a href="#super" title=super><strong>6.5</strong></a>
jdaggett@8279 6659
jdaggett@8225 6660 <li>swash, <a href="#swash" title=swash><strong>6.8</strong></a>
jdaggett@1662 6661
jdaggett@8363 6662 <li>system font fallback, <a href="#system-font-fallback" title="system
jdaggett@8363 6663 font fallback"><strong>5.2</strong></a>
jdaggett@8363 6664
jdaggett@1662 6665 <li>tabular-nums, <a href="#tabular-nums"
jdaggett@2118 6666 title=tabular-nums><strong>6.7</strong></a>
jdaggett@1662 6667
jdaggett@1662 6668 <li>titling-caps, <a href="#titling-caps"
jdaggett@2118 6669 title=titling-caps><strong>6.6</strong></a>
jdaggett@1856 6670
jdaggett@2504 6671 <li>traditional, <a href="#traditional"
jdaggett@2504 6672 title=traditional><strong>6.10</strong></a>
jdaggett@2118 6673
jdaggett@8278 6674 <li>ultra-condensed, <a href="#ultra-condensed"
jdaggett@8278 6675 title=ultra-condensed><strong>3.3</strong></a>
jdaggett@8278 6676
jdaggett@8278 6677 <li>ultra-expanded, <a href="#ultra-expanded"
jdaggett@8278 6678 title=ultra-expanded><strong>3.3</strong></a>
jdaggett@8278 6679
jdaggett@2118 6680 <li>unicase, <a href="#unicase" title=unicase><strong>6.6</strong></a>
jdaggett@1662 6681
jdaggett@1662 6682 <li>unicode-range, <a href="#descdef-unicode-range"
jdaggett@890 6683 title=unicode-range><strong>4.5</strong></a>
jdaggett@7311 6684
jdaggett@7311 6685 <li>weight, <a href="#weight" title=weight><strong>2</strong></a>
jdaggett@7311 6686
jdaggett@7311 6687 <li>width, <a href="#width" title=width><strong>2</strong></a>
jdaggett@484 6688 </ul>
jdaggett@484 6689 <!--end-index-->
jdaggett@484 6690
jdaggett@484 6691 <h2 class=no-num id=property-index>Property index</h2>
jdaggett@890 6692 <!--begin-properties-->
jdaggett@484 6693
jdaggett@484 6694 <table class=proptable>
jdaggett@484 6695 <thead>
jdaggett@484 6696 <tr>
jdaggett@484 6697 <th>Property
jdaggett@484 6698
jdaggett@484 6699 <th>Values
jdaggett@484 6700
jdaggett@484 6701 <th>Initial
jdaggett@484 6702
jdaggett@1148 6703 <th>Applies to
jdaggett@484 6704
jdaggett@484 6705 <th>Inh.
jdaggett@484 6706
jdaggett@484 6707 <th>Percentages
jdaggett@484 6708
jdaggett@484 6709 <th>Media
jdaggett@484 6710
jdaggett@484 6711 <tbody>
jdaggett@3460 6712 <tr>
jdaggett@3460 6713 <th><a class=property href="#propdef-font">font</a>
jdaggett@484 6714
jdaggett@8225 6715 <td>[ [ &lt;‘font-style’&gt; || &lt;font-variant-css21&gt; ||
jdaggett@8225 6716 &lt;‘font-weight’&gt; || &lt;‘font-stretch’ ]?
jdaggett@8225 6717 &lt;‘font-size’&gt; [ / &lt;‘line-height’&gt; ]?
jdaggett@8225 6718 &lt;‘font-family’&gt; ] | caption | icon | menu | message-box |
jdaggett@7020 6719 small-caption | status-bar
jdaggett@484 6720
jdaggett@484 6721 <td>see individual properties
jdaggett@484 6722
jdaggett@484 6723 <td>all elements
jdaggett@484 6724
jdaggett@484 6725 <td>yes
jdaggett@484 6726
jdaggett@484 6727 <td>see individual properties
jdaggett@484 6728
jdaggett@484 6729 <td>visual
jdaggett@484 6730
jdaggett@3460 6731 <tr>
jdaggett@8278 6732 <th><span class=property>font-family</span>
jdaggett@484 6733
jdaggett@8225 6734 <td>[ &lt;family-name&gt; | &lt;generic-family&gt; ] #
jdaggett@484 6735
jdaggett@484 6736 <td>depends on user agent
jdaggett@484 6737
jdaggett@484 6738 <td>all elements
jdaggett@484 6739
jdaggett@484 6740 <td>yes
jdaggett@484 6741
jdaggett@484 6742 <td>N/A
jdaggett@484 6743
jdaggett@484 6744 <td>visual
jdaggett@484 6745
jdaggett@3460 6746 <tr>
jdaggett@8279 6747 <th><span class=property>font-feature-settings</span>
jdaggett@1662 6748
jdaggett@8225 6749 <td>normal | &lt;feature-tag-value&gt; #
jdaggett@1662 6750
jdaggett@1662 6751 <td>normal
jdaggett@1662 6752
jdaggett@1662 6753 <td>all elements
jdaggett@1662 6754
jdaggett@1662 6755 <td>yes
jdaggett@1662 6756
jdaggett@1662 6757 <td>N/A
jdaggett@1662 6758
jdaggett@1662 6759 <td>visual
jdaggett@1662 6760
jdaggett@3460 6761 <tr>
jdaggett@3460 6762 <th><a class=property href="#propdef-font-kerning">font-kerning</a>
jdaggett@1662 6763
jdaggett@1856 6764 <td>auto | normal | none
jdaggett@1856 6765
jdaggett@1856 6766 <td>auto
jdaggett@1662 6767
jdaggett@1662 6768 <td>all elements
jdaggett@1662 6769
jdaggett@1662 6770 <td>yes
jdaggett@1662 6771
jdaggett@1662 6772 <td>N/A
jdaggett@1662 6773
jdaggett@1662 6774 <td>visual
jdaggett@1662 6775
jdaggett@3460 6776 <tr>
jdaggett@3460 6777 <th><a class=property
jdaggett@1732 6778 href="#propdef-font-language-override">font-language-override</a>
jdaggett@1662 6779
jdaggett@5809 6780 <td>normal | &lt;string&gt;
jdaggett@1662 6781
jdaggett@1662 6782 <td>normal
jdaggett@1662 6783
jdaggett@1662 6784 <td>all elements
jdaggett@1662 6785
jdaggett@1662 6786 <td>yes
jdaggett@1662 6787
jdaggett@1662 6788 <td>N/A
jdaggett@1662 6789
jdaggett@1662 6790 <td>visual
jdaggett@1662 6791
jdaggett@3460 6792 <tr>
jdaggett@3460 6793 <th><a class=property href="#propdef-font-size">font-size</a>
jdaggett@484 6794
jdaggett@8225 6795 <td>&lt;absolute-size&gt; | &lt;relative-size&gt; | &lt;length&gt; |
jdaggett@8225 6796 &lt;percentage&gt;
jdaggett@484 6797
jdaggett@484 6798 <td>medium
jdaggett@484 6799
jdaggett@484 6800 <td>all elements
jdaggett@484 6801
jdaggett@484 6802 <td>yes
jdaggett@484 6803
jdaggett@484 6804 <td>refer to parent element's font size
jdaggett@484 6805
jdaggett@484 6806 <td>visual
jdaggett@484 6807
jdaggett@3460 6808 <tr>
jdaggett@3460 6809 <th><a class=property
jdaggett@1662 6810 href="#propdef-font-size-adjust">font-size-adjust</a>
jdaggett@484 6811
jdaggett@8225 6812 <td>none | auto | &lt;number&gt;
jdaggett@484 6813
jdaggett@484 6814 <td>none
jdaggett@484 6815
jdaggett@484 6816 <td>all elements
jdaggett@484 6817
jdaggett@484 6818 <td>yes
jdaggett@484 6819
jdaggett@554 6820 <td>N/A
jdaggett@484 6821
jdaggett@484 6822 <td>visual
jdaggett@484 6823
jdaggett@3460 6824 <tr>
jdaggett@8278 6825 <th><span class=property>font-stretch</span>
jdaggett@1662 6826
jdaggett@1662 6827 <td>normal | ultra-condensed | extra-condensed | condensed |
jdaggett@1662 6828 semi-condensed | semi-expanded | expanded | extra-expanded |
jdaggett@5809 6829 ultra-expanded
jdaggett@484 6830
jdaggett@484 6831 <td>normal
jdaggett@484 6832
jdaggett@484 6833 <td>all elements
jdaggett@484 6834
jdaggett@484 6835 <td>yes
jdaggett@484 6836
jdaggett@484 6837 <td>N/A
jdaggett@484 6838
jdaggett@484 6839 <td>visual
jdaggett@484 6840
jdaggett@3460 6841 <tr>
jdaggett@8278 6842 <th><span class=property>font-style</span>
jdaggett@484 6843
jdaggett@5809 6844 <td>normal | italic | oblique
jdaggett@484 6845
jdaggett@484 6846 <td>normal
jdaggett@484 6847
jdaggett@484 6848 <td>all elements
jdaggett@484 6849
jdaggett@484 6850 <td>yes
jdaggett@484 6851
jdaggett@484 6852 <td>N/A
jdaggett@484 6853
jdaggett@484 6854 <td>visual
jdaggett@484 6855
jdaggett@3460 6856 <tr>
jdaggett@3460 6857 <th><a class=property href="#propdef-font-synthesis">font-synthesis</a>
jdaggett@2487 6858
jdaggett@2487 6859 <td>none | [ weight || style ]
jdaggett@2487 6860
jdaggett@2487 6861 <td>weight style
jdaggett@2457 6862
jdaggett@2457 6863 <td>all elements
jdaggett@2457 6864
jdaggett@2457 6865 <td>yes
jdaggett@2457 6866
jdaggett@2457 6867 <td>N/A
jdaggett@2457 6868
jdaggett@2457 6869 <td>visual
jdaggett@2457 6870
jdaggett@3460 6871 <tr>
jdaggett@8278 6872 <th><span class=property>font-variant</span>
jdaggett@1662 6873
jdaggett@6436 6874 <td>normal | none | [ &lt;common-lig-values&gt; ||
jdaggett@3460 6875 &lt;discretionary-lig-values&gt; || &lt;historical-lig-values&gt; ||
jdaggett@3041 6876 &lt;contextual-alt-values&gt; || stylistic(&lt;feature-value-name&gt;)
jdaggett@8225 6877 || historical-forms || styleset(&lt;feature-value-name&gt; #) ||
jdaggett@8225 6878 character-variant(&lt;feature-value-name&gt; #) ||
jdaggett@5833 6879 swash(&lt;feature-value-name&gt;) ||
jdaggett@3041 6880 ornaments(&lt;feature-value-name&gt;) ||
jdaggett@4545 6881 annotation(&lt;feature-value-name&gt;) || [ small-caps | all-small-caps
jdaggett@6648 6882 | petite-caps | all-petite-caps | unicase | titling-caps ] ||
jdaggett@2509 6883 &lt;numeric-figure-values&gt; || &lt;numeric-spacing-values&gt; ||
jdaggett@3638 6884 &lt;numeric-fraction-values&gt; || ordinal || slashed-zero ||
jdaggett@3638 6885 &lt;east-asian-variant-values&gt; || &lt;east-asian-width-values&gt; ||
jdaggett@3638 6886 ruby ]
jdaggett@484 6887
jdaggett@484 6888 <td>normal
jdaggett@484 6889
jdaggett@484 6890 <td>all elements
jdaggett@484 6891
jdaggett@484 6892 <td>yes
jdaggett@484 6893
jdaggett@7377 6894 <td>see individual properties
jdaggett@484 6895
jdaggett@484 6896 <td>visual
jdaggett@484 6897
jdaggett@3460 6898 <tr>
jdaggett@3460 6899 <th><a class=property
jdaggett@1662 6900 href="#propdef-font-variant-alternates">font-variant-alternates</a>
jdaggett@1662 6901
jdaggett@6176 6902 <td>normal | [ stylistic(&lt;feature-value-name&gt;) || historical-forms
jdaggett@8225 6903 || styleset(&lt;feature-value-name&gt; #) ||
jdaggett@8225 6904 character-variant(&lt;feature-value-name&gt; #) ||
jdaggett@5833 6905 swash(&lt;feature-value-name&gt;) ||
jdaggett@3638 6906 ornaments(&lt;feature-value-name&gt;) ||
jdaggett@3638 6907 annotation(&lt;feature-value-name&gt;) ]
jdaggett@1662 6908
jdaggett@1662 6909 <td>normal
jdaggett@1662 6910
jdaggett@1662 6911 <td>all elements
jdaggett@1662 6912
jdaggett@1662 6913 <td>yes
jdaggett@1662 6914
jdaggett@1662 6915 <td>N/A
jdaggett@1662 6916
jdaggett@1662 6917 <td>visual
jdaggett@1662 6918
jdaggett@3460 6919 <tr>
jdaggett@3460 6920 <th><a class=property
jdaggett@1662 6921 href="#propdef-font-variant-caps">font-variant-caps</a>
jdaggett@1662 6922
jdaggett@5809 6923 <td>normal | small-caps | all-small-caps | petite-caps | all-petite-caps
jdaggett@6648 6924 | unicase | titling-caps
jdaggett@1662 6925
jdaggett@1662 6926 <td>normal
jdaggett@1662 6927
jdaggett@1662 6928 <td>all elements
jdaggett@1662 6929
jdaggett@1662 6930 <td>yes
jdaggett@1662 6931
jdaggett@1662 6932 <td>N/A
jdaggett@1662 6933
jdaggett@1662 6934 <td>visual
jdaggett@1662 6935
jdaggett@3460 6936 <tr>
jdaggett@3460 6937 <th><a class=property
jdaggett@1662 6938 href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
jdaggett@1662 6939
jdaggett@5809 6940 <td>normal | [ &lt;east-asian-variant-values&gt; ||
jdaggett@3638 6941 &lt;east-asian-width-values&gt; || ruby ]
jdaggett@1662 6942
jdaggett@1662 6943 <td>normal
jdaggett@1662 6944
jdaggett@1662 6945 <td>all elements
jdaggett@1662 6946
jdaggett@1662 6947 <td>yes
jdaggett@1662 6948
jdaggett@1662 6949 <td>N/A
jdaggett@1662 6950
jdaggett@1662 6951 <td>visual
jdaggett@1662 6952
jdaggett@3460 6953 <tr>
jdaggett@3460 6954 <th><a class=property
jdaggett@1662 6955 href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
jdaggett@1662 6956
jdaggett@8225 6957 <td>normal | none | [ &lt;common-lig-values&gt; ||
jdaggett@8225 6958 &lt;discretionary-lig-values&gt; || &lt;historical-lig-values&gt; ||
jdaggett@8225 6959 &lt;contextual-alt-values&gt; ]
jdaggett@1662 6960
jdaggett@1662 6961 <td>normal
jdaggett@1662 6962
jdaggett@1662 6963 <td>all elements
jdaggett@1662 6964
jdaggett@1662 6965 <td>yes
jdaggett@1662 6966
jdaggett@1662 6967 <td>N/A
jdaggett@1662 6968
jdaggett@1662 6969 <td>visual
jdaggett@1662 6970
jdaggett@3460 6971 <tr>
jdaggett@3460 6972 <th><a class=property
jdaggett@1662 6973 href="#propdef-font-variant-numeric">font-variant-numeric</a>
jdaggett@1662 6974
jdaggett@5809 6975 <td>normal | [ &lt;numeric-figure-values&gt; ||
jdaggett@1732 6976 &lt;numeric-spacing-values&gt; || &lt;numeric-fraction-values&gt; ||
jdaggett@3638 6977 ordinal || slashed-zero ]
jdaggett@1662 6978
jdaggett@1662 6979 <td>normal
jdaggett@1662 6980
jdaggett@1662 6981 <td>all elements
jdaggett@1662 6982
jdaggett@1662 6983 <td>yes
jdaggett@1662 6984
jdaggett@1662 6985 <td>N/A
jdaggett@1662 6986
jdaggett@1662 6987 <td>visual
jdaggett@1662 6988
jdaggett@3460 6989 <tr>
jdaggett@3460 6990 <th><a class=property
jdaggett@3460 6991 href="#propdef-font-variant-position">font-variant-position</a>
jdaggett@3460 6992
jdaggett@3638 6993 <td>normal | sub | super
jdaggett@3460 6994
jdaggett@3460 6995 <td>normal
jdaggett@3460 6996
jdaggett@3460 6997 <td>all elements
jdaggett@3460 6998
jdaggett@3460 6999 <td>yes
jdaggett@3460 7000
jdaggett@3460 7001 <td>N/A
jdaggett@3460 7002
jdaggett@3460 7003 <td>visual
jdaggett@3460 7004
jdaggett@3460 7005 <tr>
jdaggett@8278 7006 <th><span class=property>font-weight</span>
jdaggett@484 7007
jdaggett@484 7008 <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600
jdaggett@5809 7009 | 700 | 800 | 900
jdaggett@484 7010
jdaggett@484 7011 <td>normal
jdaggett@484 7012
jdaggett@484 7013 <td>all elements
jdaggett@484 7014
jdaggett@484 7015 <td>yes
jdaggett@484 7016
jdaggett@484 7017 <td>N/A
jdaggett@484 7018
jdaggett@484 7019 <td>visual
jdaggett@484 7020 </table>
jdaggett@890 7021 <!--end-properties-->
jdaggett@5596 7022 <!--begin-descriptors-->
jdaggett@5596 7023
jdaggett@5596 7024 <table class=proptable>
jdaggett@5596 7025 <thead>
jdaggett@5596 7026 <tr>
jdaggett@5596 7027 <th>Descriptor
jdaggett@5596 7028
jdaggett@5596 7029 <th>Value
jdaggett@5596 7030
jdaggett@5596 7031 <th>Initial
jdaggett@5596 7032
jdaggett@5596 7033 <th>Percentages
jdaggett@5596 7034
jdaggett@5596 7035 <th>Media
jdaggett@5596 7036
jdaggett@5596 7037 <tbody>
jdaggett@5596 7038 <tr>
jdaggett@8278 7039 <th><span class=property>font-family</span>
jdaggett@5596 7040
jdaggett@8225 7041 <td>&lt;family-name&gt;
jdaggett@5596 7042
jdaggett@5596 7043 <td>N/A
jdaggett@5596 7044
jdaggett@5596 7045 <tr>
jdaggett@8279 7046 <th><span class=property>font-feature-settings</span>
jdaggett@5596 7047
jdaggett@8225 7048 <td>normal | &lt;feature-tag-value&gt; #
jdaggett@5596 7049
jdaggett@5596 7050 <td>normal
jdaggett@5596 7051
jdaggett@5596 7052 <tr>
jdaggett@8278 7053 <th><span class=property>font-stretch</span>
jdaggett@5596 7054
jdaggett@5596 7055 <td>normal | ultra-condensed | extra-condensed | condensed |
jdaggett@5596 7056 semi-condensed | semi-expanded | expanded | extra-expanded |
jdaggett@5596 7057 ultra-expanded
jdaggett@5596 7058
jdaggett@5596 7059 <td>normal
jdaggett@5596 7060
jdaggett@5596 7061 <tr>
jdaggett@8278 7062 <th><span class=property>font-style</span>
jdaggett@5596 7063
jdaggett@5596 7064 <td>normal | italic | oblique
jdaggett@5596 7065
jdaggett@5596 7066 <td>normal
jdaggett@5596 7067
jdaggett@5596 7068 <tr>
jdaggett@8278 7069 <th><span class=property>font-variant</span>
jdaggett@5596 7070
jdaggett@8225 7071 <td>normal | none | [ &lt;common-lig-values&gt; ||
jdaggett@5596 7072 &lt;discretionary-lig-values&gt; || &lt;historical-lig-values&gt; ||
jdaggett@5596 7073 &lt;contextual-alt-values&gt; || stylistic(&lt;feature-value-name&gt;)
jdaggett@8225 7074 || historical-forms || styleset(&lt;feature-value-name&gt; #) ||
jdaggett@8225 7075 character-variant(&lt;feature-value-name&gt; #) ||
jdaggett@5833 7076 swash(&lt;feature-value-name&gt;) ||
jdaggett@5596 7077 ornaments(&lt;feature-value-name&gt;) ||
jdaggett@5596 7078 annotation(&lt;feature-value-name&gt;) || [ small-caps | all-small-caps
jdaggett@6648 7079 | petite-caps | all-petite-caps | unicase | titling-caps ] ||
jdaggett@5596 7080 &lt;numeric-figure-values&gt; || &lt;numeric-spacing-values&gt; ||
jdaggett@5596 7081 &lt;numeric-fraction-values&gt; || ordinal || slashed-zero ||
jdaggett@5596 7082 &lt;east-asian-variant-values&gt; || &lt;east-asian-width-values&gt; ||
jdaggett@5596 7083 ruby ]
jdaggett@5596 7084
jdaggett@5596 7085 <td>normal
jdaggett@5596 7086
jdaggett@5596 7087 <tr>
jdaggett@8278 7088 <th><span class=property>font-weight</span>
jdaggett@5596 7089
jdaggett@5596 7090 <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
jdaggett@5596 7091
jdaggett@5596 7092 <td>normal
jdaggett@5596 7093
jdaggett@5596 7094 <tr>
jdaggett@5596 7095 <th><a class=property href="#descdef-src">src</a>
jdaggett@5596 7096
jdaggett@8225 7097 <td>[ &lt;url> [format(&lt;string> #)]? | &lt;font-face-name&gt; ] #
jdaggett@5596 7098
jdaggett@5596 7099 <td>N/A
jdaggett@5596 7100
jdaggett@5596 7101 <tr>
jdaggett@5596 7102 <th><a class=property href="#descdef-unicode-range">unicode-range</a>
jdaggett@5596 7103
jdaggett@8225 7104 <td>&lt;urange&gt; #
jdaggett@5596 7105
jdaggett@5596 7106 <td>U+0-10FFFF
jdaggett@5596 7107 </table>
jdaggett@5596 7108 <!--end-descriptors-->
jdaggett@6648 7109 <script type="text/javascript">
jdaggett@6648 7110 window.onload = function () {
jdaggett@6648 7111 if (!("devicePixelRatio" in window && window.devicePixelRatio > 1)) return;
jdaggett@6648 7112 var i, hiresElements = document.getElementsByClassName("hires");
jdaggett@6648 7113 for (i = 0; i < hiresElements.length; i++) {
jdaggett@6648 7114 var h = hiresElements[i];
jdaggett@6648 7115 if (h.tagName != "IMG") continue;
jdaggett@6648 7116 var src = h.getAttribute("src");
jdaggett@6648 7117 var src2x = src.replace(/\.\w+$/, function(m) { return "@2x" + m; });
jdaggett@6648 7118 h.src = src2x;
jdaggett@6648 7119 }
jdaggett@6648 7120 }
jdaggett@6648 7121 </script>
jdaggett@484 7122 </html>
jdaggett@484 7123 <!-- Keep this comment at the end of the file
jdaggett@484 7124 Local variables:
jdaggett@484 7125 mode: sgml
jdaggett@484 7126 sgml-declaration:"~/SGML/HTML4.decl"
jdaggett@484 7127 sgml-default-doctype-name:"html"
jdaggett@484 7128 sgml-minimize-attributes:t
jdaggett@484 7129 sgml-nofill-elements:("pre" "style" "br")
jdaggett@484 7130 sgml-live-element-indicator:t
jdaggett@484 7131 sgml-omittag:nil
jdaggett@484 7132 sgml-shorttag:nil
jdaggett@484 7133 sgml-namecase-general:t
jdaggett@484 7134 sgml-general-insert-case:lower
jdaggett@484 7135 sgml-always-quote-attributes:t
jdaggett@484 7136 sgml-indent-step:nil
jdaggett@484 7137 sgml-indent-data:t
jdaggett@484 7138 sgml-parent-document:nil
jdaggett@484 7139 sgml-exposed-tags:nil
jdaggett@484 7140 sgml-local-catalogs:nil
jdaggett@484 7141 sgml-local-ecat-files:nil
jdaggett@484 7142 End:
jdaggett@484 7143 -->
jdaggett@8277 7144 <!--
jdaggett@1856 7145
jdaggett@1856 7146 to do:
jdaggett@1856 7147
jdaggett@1856 7148 - wording of OpenType family name handling
jdaggett@1856 7149 - handling combining sequences in the font matching algorithm
jdaggett@1856 7150 - fix-up fi ligature example
jdaggett@1856 7151
jdaggett@1856 7152 -->

mercurial