css-fonts/Fonts.html

Thu, 30 May 2013 11:39:14 +0900

author
John Daggett <jdaggett@mozilla.com>
date
Thu, 30 May 2013 11:39:14 +0900
changeset 8276
bf52664a49ae
parent 8272
5e29c9d80cca
child 8277
a09de2f3e565
permissions
-rw-r--r--

[css-fonts] rework font-kerning description

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@4547 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@497 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@512 46
jdaggett@518 47 dd {
jdaggett@518 48 margin-bottom: 1em;
jdaggett@514 49 }
jdaggett@514 50
jdaggett@516 51 #authors dd {
jdaggett@516 52 margin-bottom: 0;
jdaggett@516 53 }
jdaggett@516 54
jdaggett@531 55 #fontstylematchingalg {
jdaggett@531 56 list-style-type: lower-alpha;
jdaggett@531 57 }
jdaggett@531 58
jdaggett@531 59 #fontmatchingalg ul, #fontmatchingalg ol {
jdaggett@531 60 margin-top: 0.8em;
jdaggett@531 61 }
jdaggett@531 62
jdaggett@531 63 #fontmatchingalg li + li {
jdaggett@531 64 margin-top: 0.8em;
jdaggett@531 65 }
jdaggett@531 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@531 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@1662 81
jdaggett@1662 82 div.featex {
jdaggett@1662 83 width: 700px;
jdaggett@1662 84 }
jdaggett@1662 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@8272 115 <h2 class="no-num no-toc" id=editors-draft-29-may-2013>Editor's Draft 29
jdaggett@8177 116 May 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@8272 123 <!-- <dd><a href="http://www.w3.org/TR/2013/ED-css3-fonts-20130529/">http://www.w3.org/TR/2013/ED-css3-fonts-20130529/</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@2118 375
jdaggett@2118 376 <li><a href="#font-variant-east-asian-prop"><span class=secno>6.10
jdaggett@1662 377 </span>East Asian text rendering: the font-variant-east-asian
jdaggett@1662 378 property</a>
jdaggett@1662 379
jdaggett@2118 380 <li><a href="#font-variant-prop"><span class=secno>6.11 </span>Overall
jdaggett@1662 381 shorthand for font rendering: the font-variant property</a>
jdaggett@1662 382
jdaggett@2118 383 <li><a href="#font-feature-settings-prop"><span class=secno>6.12
jdaggett@2509 384 </span>Low-level font feature settings control: the
jdaggett@2509 385 font-feature-settings property</a>
jdaggett@1662 386
jdaggett@2118 387 <li><a href="#font-language-override-prop"><span class=secno>6.13
jdaggett@1732 388 </span>Font language override: the font-language-override property</a>
jdaggett@1662 389 </ul>
jdaggett@1662 390
jdaggett@6176 391 <li><a href="#font-feature-resolution"><span class=secno>7 </span>Font
jdaggett@6699 392 Feature Resolution </a>
jdaggett@6699 393 <ul class=toc>
jdaggett@6699 394 <li><a href="#default-features"><span class=secno>7.1 </span>Default
jdaggett@6699 395 features</a>
jdaggett@6699 396
jdaggett@6699 397 <li><a href="#feature-precedence"><span class=secno>7.2 </span>Feature
jdaggett@6699 398 precedence</a>
jdaggett@6699 399
jdaggett@6699 400 <li><a href="#feature-precedence-examples"><span class=secno>7.3
jdaggett@6699 401 </span>Feature precedence examples</a>
jdaggett@6699 402 </ul>
jdaggett@6699 403
jdaggett@7021 404 <li><a href="#object-model"><span class=secno>8 </span>Object Model</a>
jdaggett@7021 405 <ul class=toc>
jdaggett@7021 406 <li><a href="#om-fontface"><span class=secno>8.1 </span>The
jdaggett@7021 407 <code>CSSFontFaceRule</code> interface</a>
jdaggett@7021 408
jdaggett@7021 409 <li><a href="#om-fontfeaturevalues"><span class=secno>8.2 </span>The
jdaggett@7021 410 <code>CSSFontFeatureValuesRule</code> interface</a>
jdaggett@7021 411 </ul>
jdaggett@7021 412
jdaggett@2737 413 <li class=no-num><a href="#platform-props-to-css">Appendix A: Mapping
jdaggett@1662 414 platform font properties to CSS properties</a>
jdaggett@1662 415
jdaggett@2472 416 <li class=no-num><a href="#ch-ch-ch-changes">Changes</a>
jdaggett@2472 417 <ul class=toc>
jdaggett@7442 418 <li class=no-num><a href="#recent-changes"> Changes from the February
jdaggett@7442 419 2013 CSS3 Fonts Working Draft</a>
jdaggett@2472 420 </ul>
jdaggett@2472 421
jdaggett@529 422 <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
jdaggett@529 423
jdaggett@7242 424 <li class=no-num><a href="#conformance"> Conformance</a>
jdaggett@7242 425 <ul class=toc>
jdaggett@7242 426 <li class=no-num><a href="#conventions"> Document Conventions</a>
jdaggett@7242 427
jdaggett@7242 428 <li class=no-num><a href="#conformance-classes"> Conformance Classes</a>
jdaggett@7242 429
jdaggett@7242 430
jdaggett@7242 431 <li class=no-num><a href="#partial"> Partial Implementations</a>
jdaggett@7242 432
jdaggett@7242 433 <li class=no-num><a href="#experimental"> Experimental
jdaggett@7242 434 Implementations</a>
jdaggett@7242 435
jdaggett@7242 436 <li class=no-num><a href="#testing"> Non-Experimental
jdaggett@7242 437 Implementations</a>
jdaggett@7242 438 </ul>
jdaggett@7242 439
jdaggett@484 440 <li class=no-num><a href="#references">References</a>
jdaggett@484 441 <ul class=toc>
jdaggett@1662 442 <li class=no-num><a href="#normative-references">Normative
jdaggett@1662 443 References</a>
jdaggett@1662 444
jdaggett@1662 445 <li class=no-num><a href="#other-references">Other References</a>
jdaggett@484 446 </ul>
jdaggett@484 447
jdaggett@484 448 <li class=no-num><a href="#index">Index</a>
jdaggett@484 449
jdaggett@484 450 <li class=no-num><a href="#property-index">Property index</a>
jdaggett@484 451 </ul>
jdaggett@484 452 <!--end-toc-->
jdaggett@484 453
jdaggett@890 454 <h2 id=introduction><span class=secno>1 </span>Introduction</h2>
jdaggett@545 455
jdaggett@1148 456 <p>A font provides a resource containing the visual representation of
jdaggett@1662 457 characters. At the simplest level it contains information that maps
jdaggett@1662 458 character codes to shapes (called glyphs) that represent these characters.
jdaggett@1662 459 Fonts sharing a common design style are commonly grouped into font
jdaggett@1662 460 families classified by a set of standard font properties. Within a family,
jdaggett@1662 461 the shape displayed for a given character can vary by stroke weight, slant
jdaggett@7311 462 or relative width, among others. An individual font face is described by a
jdaggett@1662 463 unique combination of these properties. For a given range of text, CSS
jdaggett@1662 464 font properties are used to select a font family and a specific font face
jdaggett@1662 465 within that family to be used when rendering that text. As a simple
jdaggett@1662 466 example, to use the bold form of Helvetica one could use:
jdaggett@1148 467
jdaggett@1148 468 <pre>body {
jdaggett@1148 469 font-family: Helvetica;
jdaggett@1148 470 font-weight: bold;
jdaggett@1148 471 }</pre>
jdaggett@1148 472
jdaggett@7311 473 <p>Font resources may be installed locally on the system on which a user
jdaggett@7311 474 agent is running or downloadable. For local font resources descriptive
jdaggett@1148 475 information can be obtained directly from the font resource. For
jdaggett@1148 476 downloadable font resources (sometimes referred to as web fonts), the
jdaggett@1148 477 descriptive information is included with the reference to the font
jdaggett@1148 478 resource.
jdaggett@1148 479
jdaggett@1148 480 <p>Families of fonts typically don't contain a single face for each
jdaggett@1148 481 possible variation of font properties. The CSS font selection mechanism
jdaggett@7311 482 describes how to match a given set of CSS font properties to a single font
jdaggett@1148 483 face.
jdaggett@890 484
jdaggett@1244 485 <h2 id=typography-background><span class=secno>2 </span>Typography
jdaggett@1244 486 Background</h2>
jdaggett@890 487
jdaggett@7311 488 <p><em>This section is non-normative.</em>
jdaggett@7311 489
jdaggett@7311 490 <p> Typographic traditions vary across the globe, so there is no unique way
jdaggett@890 491 to classify all fonts across languages and cultures. For even common Latin
jdaggett@890 492 letters, wide variations are possible:
jdaggett@497 493
jdaggett@1150 494 <div class=figure><img alt="variations in glyphs for a single character"
jdaggett@1150 495 src=aaaaaa.png>
jdaggett@890 496 <p class=caption>One character, many glyph variations
jdaggett@498 497 </div>
jdaggett@497 498
jdaggett@497 499 <p>Differences in the anatomy of letterforms is one way to distinguish
jdaggett@497 500 fonts. For Latin fonts, flourishes at the ends of a character's main
jdaggett@497 501 strokes, or serifs, can distinguish a font from those without. Similar
jdaggett@534 502 comparisons exist in non-Latin fonts between fonts with tapered strokes
jdaggett@534 503 and those using primarily uniform strokes:
jdaggett@497 504
jdaggett@1150 505 <div class=figure><img alt="serif vs. non-serifs" src=serifvssansserif.png>
jdaggett@890 506 <p class=caption>Letterforms with and without serifs
jdaggett@534 507 </div>
jdaggett@534 508
jdaggett@1150 509 <div class=figure><img alt="serif vs. non-serifs for japanese"
jdaggett@1150 510 src=minchovsgothic.png>
jdaggett@890 511 <p class=caption>Similar groupings for Japanese typefaces
jdaggett@498 512 </div>
jdaggett@497 513
jdaggett@497 514 <p>Fonts contain letterforms and the data needed to map characters to these
jdaggett@7311 515 letterforms. Often this may be a simple one-to-one mapping, but more
jdaggett@497 516 complex mappings are also possible. The use of combining diacritic marks
jdaggett@497 517 creates many variations for an underlying letterform:
jdaggett@497 518
jdaggett@1150 519 <div class=figure><img alt="diacritic marks" src=aaaaaa-diacritics.png>
jdaggett@890 520 <p class=caption>Variations with diacritic marks
jdaggett@498 521 </div>
jdaggett@525 522
jdaggett@497 523 <p>A sequence of characters can be represented by a single glyph known as a
jdaggett@497 524 ligature:
jdaggett@497 525
jdaggett@1150 526 <div class=figure><img alt="example of a fi ligature"
jdaggett@1150 527 src=final-ligature.png>
jdaggett@890 528 <p class=caption>Ligature example
jdaggett@498 529 </div>
jdaggett@497 530
jdaggett@7311 531 <p>Visual transformations based on textual context are often stylistic
jdaggett@7311 532 option in European languages. They are required to correctly render
jdaggett@7311 533 languages like Arabic, the lam and alef characters below <em>must</em> be
jdaggett@7311 534 combined when they exist in sequence:
jdaggett@497 535
jdaggett@1150 536 <div class=figure><img alt="lam alef ligature" src=lamaleflig.png>
jdaggett@890 537 <p class=caption>Required Arabic ligature
jdaggett@498 538 </div>
jdaggett@497 539
jdaggett@498 540 <p>The relative complexity of these shaping transformations requires
jdaggett@498 541 additional data within the font.
jdaggett@497 542
jdaggett@497 543 <p>Sets of font faces with various stylistic variations are often grouped
jdaggett@512 544 together into font families. In the simplest case a regular face is
jdaggett@7311 545 supplemented with bold and italic faces, but much more extensive groupings
jdaggett@7311 546 are possible. Variations in the thickness of letterform strokes, the <dfn
jdaggett@7311 547 id=weight>weight</dfn>, and the overall proportions of the letterform, the
jdaggett@7311 548 <dfn id=width>width</dfn>, are most common. In the example below, each
jdaggett@7311 549 letter uses a different font face within the Univers font family. The
jdaggett@7311 550 width used increases from top to bottom and the weight increases from left
jdaggett@7311 551 to right:
jdaggett@497 552
jdaggett@1150 553 <div class=figure><img alt="various width and weight variations within a
jdaggett@1150 554 single family" src=weightwidthvariations.png>
jdaggett@890 555 <p class=caption>Weight and width variations within a single font family
jdaggett@498 556 </div>
jdaggett@497 557
jdaggett@545 558 <p>Creating fonts that support multiple scripts is a difficult task;
jdaggett@1148 559 designers need to understand the cultural traditions surrounding the use
jdaggett@1148 560 of type in different scripts and come up with letterforms that somehow
jdaggett@1148 561 share a common theme. Many languages often share a common script and each
jdaggett@7311 562 of these languages may have noticeable stylistic differences. For example,
jdaggett@7311 563 the Arabic script is shared by Persian and Urdu and Cyrillic is used with
jdaggett@7311 564 many languages, not just Russian.
jdaggett@518 565
jdaggett@8225 566 <p>The <a href="#character-map"><em>character map</em></a> of a font
jdaggett@8225 567 defines the mapping of characters to glyphs for that font. If a document
jdaggett@8225 568 contains characters not supported by the <a href="#character-map"><em
jdaggett@8225 569 title="character map">character maps</em></a> of the fonts contained in a
jdaggett@8225 570 font family list, a user agent may use a system font fallback procedure to
jdaggett@8225 571 locate an appropriate font that does. If no appropriate font can be found,
jdaggett@8225 572 some form of "missing glyph" character will be rendered by the user agent.
jdaggett@8225 573 System fallback can occur when the specified list of font families does
jdaggett@8225 574 not include a font that supports a given character.
jdaggett@8225 575
jdaggett@8225 576 <p>Although the <a href="#character-map"><em>character map</em></a> of a
jdaggett@8225 577 font maps a given character to a glyph for that character, modern font
jdaggett@8225 578 technologies such as OpenType and AAT (Apple Advanced Typography) provide
jdaggett@8225 579 ways of mapping a character to different glyphs based upon feature
jdaggett@8225 580 settings. Fonts in these formats allow these features to be embedded in
jdaggett@8225 581 the font itself and controlled by applications. Common typographic
jdaggett@8225 582 features which can be specified this way include ligatures, swashes,
jdaggett@8225 583 contextual alternates, proportional and tabular figures, and automatic
jdaggett@8225 584 fractions, to list just a few. For a visual overview of OpenType features,
jdaggett@8225 585 see the <a href="#OPENTYPE-FONT-GUIDE"
jdaggett@6659 586 rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
jdaggett@1662 587
jdaggett@6699 588 <h2 id=basic-font-props><span class=secno>3 </span>Basic Font Properties</h2>
jdaggett@512 589
jdaggett@512 590 <p>The particular font face used to render a character is determined by the
jdaggett@515 591 font family and other font properties that apply to a given element. This
jdaggett@515 592 structure allows settings to be varied independent of each other.</p>
jdaggett@512 593 <!-- prop: font-family -->
jdaggett@484 594
jdaggett@1662 595 <h3 id=font-family-prop><span class=secno>3.1 </span>Font family: the <a
jdaggett@1662 596 href="#propdef-font-family">font-family</a> property</h3>
jdaggett@1662 597
jdaggett@8225 598 <table class=propdef id=namefont-familyvalue-ltfamily-namegt-ltg>
jdaggett@484 599 <tbody>
jdaggett@484 600 <tr>
jdaggett@484 601 <td>Name:
jdaggett@484 602
jdaggett@1662 603 <td><dfn id=propdef-font-family>font-family</dfn>
jdaggett@484 604
jdaggett@484 605 <tr>
jdaggett@484 606 <td>Value:
jdaggett@484 607
jdaggett@8225 608 <td>[ <a href="#family-name-value"><var>&lt;family-name&gt;</var></a> |
jdaggett@8225 609 <a href="#generic-family-value"><var>&lt;generic-family&gt;</var></a> ]
jdaggett@8225 610 #
jdaggett@484 611
jdaggett@484 612 <tr>
jdaggett@484 613 <td>Initial:
jdaggett@484 614
jdaggett@484 615 <td>depends on user agent
jdaggett@484 616
jdaggett@484 617 <tr>
jdaggett@484 618 <td>Applies to:
jdaggett@484 619
jdaggett@484 620 <td>all elements
jdaggett@484 621
jdaggett@484 622 <tr>
jdaggett@484 623 <td>Inherited:
jdaggett@484 624
jdaggett@484 625 <td>yes
jdaggett@484 626
jdaggett@484 627 <tr>
jdaggett@484 628 <td>Percentages:
jdaggett@484 629
jdaggett@484 630 <td>N/A
jdaggett@484 631
jdaggett@484 632 <tr>
jdaggett@484 633 <td>Media:
jdaggett@484 634
jdaggett@484 635 <td>visual
jdaggett@484 636
jdaggett@484 637 <tr>
jdaggett@1148 638 <td>Computed value:
jdaggett@484 639
jdaggett@484 640 <td>as specified
jdaggett@7377 641
jdaggett@7377 642 <tr>
jdaggett@7377 643 <td>Animatable:
jdaggett@7377 644
jdaggett@7377 645 <td>no
jdaggett@484 646 </table>
jdaggett@484 647
jdaggett@514 648 <p>This property specifies a prioritized list of font family names or
jdaggett@6694 649 generic family names. A font family defines a set of faces that vary in
jdaggett@6694 650 weight, width or slope. CSS uses the combination of a family name with
jdaggett@6694 651 other style attributes to select an individual face. Using this selection
jdaggett@6694 652 mechanism, rather than selecting a face via the style name as is often
jdaggett@6694 653 done in design applications, allows some degree of regularity in textual
jdaggett@6694 654 display when fallback occurs.
jdaggett@6694 655
jdaggett@6694 656 <p class=note>Designers should note that the CSS definition of font
jdaggett@6694 657 attributes used for selection are explicitly not intended to define a font
jdaggett@6694 658 taxonomy. A type designer's idea of a family may often extend to a set of
jdaggett@6694 659 faces that vary along axes other than just the standard axes of weight,
jdaggett@6694 660 width and slope. A family may extend to include both a set of serif faces
jdaggett@6694 661 and a set of sans-serif faces or vary along axes that are unique to that
jdaggett@6694 662 family. The CSS font selection mechanism merely provides a way to
jdaggett@6694 663 determine the “closest” substitute when substitution is necessary.
jdaggett@6694 664
jdaggett@6694 665 <p>Unlike other CSS properties, component values are a comma-separated list
jdaggett@6694 666 indicating alternatives. A user agent iterates through the list of family
jdaggett@6694 667 names until it matches an available font that contains a glyph for the
jdaggett@6694 668 character to be rendered. This allows for differences in available fonts
jdaggett@6694 669 across platforms and for differences in the range of characters supported
jdaggett@6694 670 by individual fonts.
jdaggett@514 671
jdaggett@514 672 <p>A font family name only specifies a name given to a set of font faces,
jdaggett@8177 673 it does not specify an individual face. For example, given the
jdaggett@8177 674 availability of the fonts below, Futura would match but Futura Medium
jdaggett@8177 675 would not:
jdaggett@514 676
jdaggett@1150 677 <div class=figure><img alt="family and face names"
jdaggett@1150 678 src=familyvsfacename.png>
jdaggett@890 679 <p class=caption>Family and individual face names
jdaggett@514 680 </div>
jdaggett@514 681
jdaggett@514 682 <p>Consider the example below:
jdaggett@512 683
jdaggett@512 684 <div class=example>
jdaggett@514 685 <pre>body {
jdaggett@514 686 font-family: Helvetica, Verdana, sans-serif;
jdaggett@514 687 }</pre>
jdaggett@1758 688
jdaggett@1758 689 <p>If Helvetica is available it will be used when rendering. If neither
jdaggett@1758 690 Helvetica nor Verdana is present, then the user-agent-defined sans serif
jdaggett@1758 691 font will be used.</p>
jdaggett@512 692 </div>
jdaggett@512 693
jdaggett@514 694 <p>There are two types of font family names:
jdaggett@512 695
jdaggett@512 696 <dl>
jdaggett@8225 697 <dt><dfn id=family-name-value><var>&lt;family-name&gt;</var></dfn>
jdaggett@514 698
jdaggett@514 699 <dd>The name of a font family of choice such as Helvetica or Verdana in
jdaggett@2457 700 the previous example.
jdaggett@514 701
jdaggett@8225 702 <dt><dfn id=generic-family-value><var>&lt;generic-family&gt;</var></dfn>
jdaggett@514 703
jdaggett@4624 704 <dd> The following generic family keywords are defined: ‘<a
jdaggett@4624 705 href="#serif"><code class=property>serif</code></a>’, ‘<a
jdaggett@4624 706 href="#sans-serif"><code class=property>sans-serif</code></a>’, ‘<a
jdaggett@4624 707 href="#cursive"><code class=property>cursive</code></a>’, ‘<a
jdaggett@4624 708 href="#fantasy"><code class=property>fantasy</code></a>’, and ‘<a
jdaggett@4624 709 href="#monospace"><code class=property>monospace</code></a>’. These
jdaggett@1148 710 keywords can be used as a general fallback mechanism when an author's
jdaggett@1758 711 desired font choices are not available. As keywords, they must not be
jdaggett@1148 712 quoted. Authors are encouraged to append a generic font family as a last
jdaggett@1148 713 alternative for improved robustness.
jdaggett@512 714 </dl>
jdaggett@512 715
jdaggett@8272 716 <p>Font family names other than generic families must either be given
jdaggett@8272 717 quoted as <a
jdaggett@2457 718 href="//www.w3.org/TR/CSS21/syndata.html#strings">strings,</a> or unquoted
jdaggett@2457 719 as a sequence of one or more <a
jdaggett@2457 720 href="//www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers.</a>
jdaggett@2457 721 This means most punctuation characters and digits at the start of each
jdaggett@2457 722 token must be escaped in unquoted font family names.
jdaggett@2457 723
jdaggett@7377 724 <p>To illustrate this, the following declarations are invalid:
jdaggett@2457 725
jdaggett@2457 726 <pre>
jdaggett@2457 727 font-family: Red/Black, sans-serif;
jdaggett@2457 728 font-family: "Lucida" Grande, sans-serif;
jdaggett@2457 729 font-family: Ahem!, sans-serif;
jdaggett@2457 730 font-family: test@foo, sans-serif;
jdaggett@2457 731 font-family: #POUND, sans-serif;
jdaggett@2457 732 font-family: Hawaii 5-0, sans-serif;
jdaggett@2457 733 </pre>
jdaggett@2457 734
jdaggett@2457 735 <p>If a sequence of identifiers is given as a font family name, the
jdaggett@2457 736 computed value is the name converted to a string by joining all the
jdaggett@2457 737 identifiers in the sequence by single spaces.
jdaggett@2457 738
jdaggett@2457 739 <p>To avoid mistakes in escaping, it is recommended to quote font family
jdaggett@2457 740 names that contain white space, digits, or punctuation characters other
jdaggett@2457 741 than hyphens:
jdaggett@2457 742
jdaggett@2457 743 <pre>
jdaggett@2457 744 body { font-family: "New Century Schoolbook", serif }
jdaggett@2457 745
jdaggett@2457 746 &lt;BODY STYLE="font-family: '21st Century', fantasy">
jdaggett@2457 747 </pre>
jdaggett@2457 748
jdaggett@2457 749 <p>Font family <em>names</em> that happen to be the same as a keyword value
jdaggett@4624 750 (‘<code class=property>inherit</code>’, ‘<a href="#serif"><code
jdaggett@4624 751 class=property>serif</code></a>’, ‘<a href="#sans-serif"><code
jdaggett@4624 752 class=property>sans-serif</code></a>’, ‘<a href="#monospace"><code
jdaggett@4624 753 class=property>monospace</code></a>’, ‘<a href="#fantasy"><code
jdaggett@4624 754 class=property>fantasy</code></a>’, and ‘<a href="#cursive"><code
jdaggett@4624 755 class=property>cursive</code></a>’) must be quoted to prevent confusion
jdaggett@2457 756 with the keywords with the same names. The keywords ‘<code
jdaggett@2457 757 class=property>initial</code>’ and ‘<code
jdaggett@2457 758 class=property>default</code>’ are reserved for future use and must also
jdaggett@2457 759 be quoted when used as font names. UAs must not consider these keywords as
jdaggett@8225 760 matching the <a
jdaggett@8225 761 href="#family-name-value"><var>&lt;family-name&gt;</var></a> type.
jdaggett@2457 762
jdaggett@6694 763 <p>The precise way a set of fonts are grouped into font families varies
jdaggett@6694 764 depending upon the platform font management API's. The Windows GDI API
jdaggett@6694 765 only allows four faces to be grouped into a family while the DirectWrite
jdaggett@6694 766 API and API's on OSX and other platforms support font families with a
jdaggett@6695 767 variety of weights, widths and slopes (see <a
jdaggett@6694 768 href="#platform-props-to-css">Appendix A</a> for more details).
jdaggett@6694 769
jdaggett@2457 770 <p>Some font formats allow fonts to carry multiple localizations of the
jdaggett@2457 771 family name. User agents must recognize and correctly match all of these
jdaggett@2457 772 names independent of the underlying platform localization, system API used
jdaggett@2457 773 or document encoding:
jdaggett@2457 774
jdaggett@2457 775 <div class=figure><img alt="examples of localized family names"
jdaggett@2457 776 src=localizedfamilynames.png>
jdaggett@2457 777 <p class=caption>Localized family names
jdaggett@2457 778 </div>
jdaggett@2457 779
jdaggett@1244 780 <h4 id=generic-font-families><span class=secno>3.1.1 </span>Generic font
jdaggett@1244 781 families</h4>
jdaggett@514 782
jdaggett@518 783 <p>All five generic font families are defined to exist in all CSS
jdaggett@518 784 implementations (they need not necessarily map to five distinct actual
jdaggett@518 785 fonts). User agents should provide reasonable default choices for the
jdaggett@518 786 generic font families, which express the characteristics of each family as
jdaggett@518 787 well as possible within the limits allowed by the underlying technology.
jdaggett@518 788 User agents are encouraged to allow users to select alternative choices
jdaggett@514 789 for the generic fonts.
jdaggett@514 790
jdaggett@890 791 <h5 class="no-num no-toc"> <span class=index-def id=serif0 title="serif,
jdaggett@890 792 definition of"><a name=serif-def><dfn id=serif>serif</dfn></a></span></h5>
jdaggett@514 793
jdaggett@8178 794 <p>Serif fonts represent the formal text style for a script. This often
jdaggett@8178 795 means but is not limited to glyphs that have finishing strokes, flared or
jdaggett@8178 796 tapering ends, or have actual serifed endings (including slab serifs).
jdaggett@8178 797 Serif fonts are typically proportionately-spaced. They often display a
jdaggett@8178 798 greater variation between thick and thin strokes than fonts from the ‘<a
jdaggett@8178 799 href="#sans-serif"><code class=property>sans-serif</code></a>’ generic
jdaggett@8178 800 font family. CSS uses the term ‘<a href="#serif"><code
jdaggett@8178 801 class=property>serif</code></a>’ to apply to a font for any script,
jdaggett@8178 802 although other names may be more familiar for particular scripts, such as
jdaggett@8178 803 Mincho (Japanese), Sung, Song or Kai (Chinese), Batang (Korean). For
jdaggett@8178 804 Arabic, the Naskh style would correspond to ‘<a href="#serif"><code
jdaggett@8178 805 class=property>serif</code></a>’ more due to its typographic role rather
jdaggett@8178 806 than its actual design style. Any font that is so described may be used to
jdaggett@4624 807 represent the generic ‘<a href="#serif"><code
jdaggett@4624 808 class=property>serif</code></a>’ family.
jdaggett@514 809
jdaggett@1150 810 <div class=figure><img alt="sample serif fonts" src=serifexamples.png>
jdaggett@890 811 <p class=caption>Sample serif fonts
jdaggett@514 812 </div>
jdaggett@514 813
jdaggett@890 814 <h5 class="no-num no-toc"> <span class=index-def id=sans-serif0
jdaggett@890 815 title="sans-serif, definition of"> <a name=sans-serif-def><dfn
jdaggett@890 816 id=sans-serif>sans-serif</dfn></a></span></h5>
jdaggett@514 817
jdaggett@8178 818 <p>Glyphs in sans-serif fonts, as the term is used in CSS, are generally
jdaggett@8178 819 low contrast (vertical and horizontal stems have the close to the same
jdaggett@8178 820 thickness) and have stroke endings that are plain -- without any flaring,
jdaggett@8178 821 cross stroke, or other ornamentation. Sans-serif fonts are typically
jdaggett@8178 822 proportionately-spaced. They often have little variation between thick and
jdaggett@8178 823 thin strokes, compared to fonts from the ‘<a href="#serif"><code
jdaggett@4624 824 class=property>serif</code></a>’ family. CSS uses the term ‘<a
jdaggett@4624 825 href="#sans-serif"><code class=property>sans-serif</code></a>’ to apply
jdaggett@4624 826 to a font for any script, although other names may be more familiar for
jdaggett@3041 827 particular scripts, such as Gothic (Japanese), Hei (Chinese), or Gulim
jdaggett@1148 828 (Korean). Any font that is so described may be used to represent the
jdaggett@4624 829 generic ‘<a href="#sans-serif"><code
jdaggett@4624 830 class=property>sans-serif</code></a>’ family.
jdaggett@518 831
jdaggett@1150 832 <div class=figure><img alt="sample sans-serif fonts"
jdaggett@1150 833 src=sansserifexamples.png>
jdaggett@890 834 <p class=caption>Sample sans-serif fonts
jdaggett@514 835 </div>
jdaggett@514 836
jdaggett@890 837 <h5 class="no-num no-toc"> <span class=index-def id=cursive0
jdaggett@545 838 title="cursive, definition of"> <a name=cursive-def><dfn
jdaggett@890 839 id=cursive>cursive</dfn></a></span></h5>
jdaggett@545 840
jdaggett@8178 841 <p>Glyphs in cursive fonts generally use a more informal script style, and
jdaggett@8178 842 the result looks more like handwritten pen or brush writing than printed
jdaggett@8178 843 letterwork. CSS uses the term ‘<a href="#cursive"><code
jdaggett@8178 844 class=property>cursive</code></a>’ to apply to a font for any script,
jdaggett@8178 845 although other names such as Chancery, Brush, Swing and Script are also
jdaggett@8178 846 used in font names.
jdaggett@514 847
jdaggett@1150 848 <div class=figure><img alt="sample cursive fonts" src=cursiveexamples.png>
jdaggett@890 849 <p class=caption>Sample cursive fonts
jdaggett@514 850 </div>
jdaggett@514 851
jdaggett@890 852 <h5 class="no-num no-toc"> <span class=index-def id=fantasy0
jdaggett@545 853 title="fantasy, definition of"> <a name=fantasy-def><dfn
jdaggett@890 854 id=fantasy>fantasy</dfn></a></span></h5>
jdaggett@514 855
jdaggett@8178 856 <p>Fantasy fonts are primarily decorative or expressive fonts that contain
jdaggett@8178 857 playful representations of characters. These do not include Pi or Picture
jdaggett@8178 858 fonts which do not represent actual characters.
jdaggett@514 859
jdaggett@1150 860 <div class=figure><img alt="sample fantasy fonts" src=fantasyexamples.png>
jdaggett@890 861 <p class=caption>Sample fantasy fonts
jdaggett@514 862 </div>
jdaggett@514 863
jdaggett@890 864 <h5 class="no-num no-toc"> <span class=index-def id=monospace0
jdaggett@545 865 title="monospace, definition of"> <a name=monospace-def><dfn
jdaggett@890 866 id=monospace>monospace</dfn></a></span></h5>
jdaggett@514 867
jdaggett@514 868 <p>The sole criterion of a monospace font is that all glyphs have the same
jdaggett@518 869 fixed width. This is often used to render samples of computer code.
jdaggett@514 870
jdaggett@1150 871 <div class=figure><img alt="sample monospace fonts"
jdaggett@1150 872 src=monospaceexamples.png>
jdaggett@890 873 <p class=caption>Sample monospace fonts
jdaggett@514 874 </div>
jdaggett@512 875 <!-- prop: font-weight -->
jdaggett@512 876
jdaggett@1662 877 <h3 id=font-weight-prop><span class=secno>3.2 </span>Font weight: the <a
jdaggett@1662 878 href="#propdef-font-weight">font-weight</a> property</h3>
jdaggett@1662 879
jdaggett@4624 880 <table class=propdef id=namefont-weightvaluenormal-bold-bolder-l>
jdaggett@484 881 <tbody>
jdaggett@484 882 <tr>
jdaggett@484 883 <td>Name:
jdaggett@484 884
jdaggett@1662 885 <td><dfn id=propdef-font-weight>font-weight</dfn>
jdaggett@484 886
jdaggett@484 887 <tr>
jdaggett@484 888 <td>Value:
jdaggett@484 889
jdaggett@484 890 <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600
jdaggett@5809 891 | 700 | 800 | 900
jdaggett@484 892
jdaggett@484 893 <tr>
jdaggett@484 894 <td>Initial:
jdaggett@484 895
jdaggett@484 896 <td>normal
jdaggett@484 897
jdaggett@484 898 <tr>
jdaggett@484 899 <td>Applies to:
jdaggett@484 900
jdaggett@484 901 <td>all elements
jdaggett@484 902
jdaggett@484 903 <tr>
jdaggett@484 904 <td>Inherited:
jdaggett@484 905
jdaggett@484 906 <td>yes
jdaggett@484 907
jdaggett@484 908 <tr>
jdaggett@484 909 <td>Percentages:
jdaggett@484 910
jdaggett@484 911 <td>N/A
jdaggett@484 912
jdaggett@484 913 <tr>
jdaggett@484 914 <td>Media:
jdaggett@484 915
jdaggett@484 916 <td>visual
jdaggett@484 917
jdaggett@484 918 <tr>
jdaggett@1148 919 <td>Computed value:
jdaggett@484 920
jdaggett@8177 921 <td>numeric weight value (see description)
jdaggett@7377 922
jdaggett@7377 923 <tr>
jdaggett@7377 924 <td>Animatable:
jdaggett@7377 925
jdaggett@7377 926 <td>as <a
jdaggett@7377 927 href="http://dev.w3.org/csswg/css3-transitions/#animtype-font-weight">font
jdaggett@7377 928 weight</a>
jdaggett@484 929 </table>
jdaggett@484 930
jdaggett@2556 931 <p>The <a class=noxref href="#font-weight-prop"><span
jdaggett@2556 932 class=property>‘<code class=property>font-weight</code>’</span></a>
jdaggett@8177 933 property specifies the weight of glyphs in the font, their degree of
jdaggett@8177 934 blackness or stroke thickness.
jdaggett@531 935
jdaggett@531 936 <p>Values have the following meanings:
jdaggett@512 937
jdaggett@512 938 <dl>
jdaggett@514 939 <dt>100 to 900
jdaggett@512 940
jdaggett@512 941 <dd>These values form an ordered sequence, where each number indicates a
jdaggett@514 942 weight that is at least as dark as its predecessor. These roughly
jdaggett@514 943 correspond to the commonly used weight names below:
jdaggett@512 944 </dl>
jdaggett@512 945
jdaggett@512 946 <ul>
jdaggett@512 947 <li>100 - Thin
jdaggett@512 948
jdaggett@518 949 <li>200 - Extra Light (Ultra Light)
jdaggett@512 950
jdaggett@512 951 <li>300 - Light
jdaggett@512 952
jdaggett@512 953 <li>400 - Normal
jdaggett@512 954
jdaggett@512 955 <li>500 - Medium
jdaggett@512 956
jdaggett@518 957 <li>600 - Semi Bold (Demi Bold)
jdaggett@512 958
jdaggett@512 959 <li>700 - Bold
jdaggett@512 960
jdaggett@518 961 <li>800 - Extra Bold (Ultra Bold)
jdaggett@512 962
jdaggett@512 963 <li>900 - Black (Heavy)
jdaggett@512 964 </ul>
jdaggett@512 965
jdaggett@512 966 <dl>
jdaggett@5809 967 <dt><a href="#normal2"><strong>normal</strong></a>
jdaggett@512 968
jdaggett@1148 969 <dd>Same as ‘<code class=css>400</code>’.
jdaggett@512 970
jdaggett@512 971 <dt><strong>bold</strong>
jdaggett@512 972
jdaggett@1148 973 <dd>Same as ‘<code class=css>700</code>’.
jdaggett@512 974
jdaggett@512 975 <dt><strong>bolder</strong>
jdaggett@512 976
jdaggett@8177 977 <dd>Specifies a bolder weight than the inherited value.
jdaggett@512 978
jdaggett@512 979 <dt><strong>lighter</strong>
jdaggett@512 980
jdaggett@8177 981 <dd>Specifies a lighter weight than the inherited value.
jdaggett@512 982 </dl>
jdaggett@512 983
jdaggett@8177 984 <p>Font formats that use a scale other than a nine-step scale should map
jdaggett@531 985 their scale onto the CSS scale so that 400 roughly corresponds with a face
jdaggett@531 986 that would be labeled as Regular, Book, Roman and 700 roughly matches a
jdaggett@531 987 face that would be labeled as Bold. Or weights may be inferred from the
jdaggett@531 988 style names, ones that correspond roughly with the scale above. The scale
jdaggett@1662 989 is relative, so a face with a larger weight value must never appear
jdaggett@1148 990 lighter. If style names are used to infer weights, care should be taken to
jdaggett@1148 991 handle variations in style names across locales.
jdaggett@531 992
jdaggett@531 993 <p>Quite often there are only a few weights available for a particular font
jdaggett@534 994 family. When a weight is specified for which no face exists, a face with a
jdaggett@534 995 nearby weight is used. In general, bold weights map to faces with heavier
jdaggett@1269 996 weights and light weights map to faces with lighter weights (see the <a
jdaggett@1269 997 href="#font-matching-algorithm">font matching section below</a> for a
jdaggett@1269 998 precise definition). The examples here illustrate which face is used for
jdaggett@1269 999 different weights, grey indicates a face for that weight does not exist so
jdaggett@1269 1000 a face with a nearby weight is used:
jdaggett@532 1001
jdaggett@1150 1002 <div class=figure><img alt="weight mappings for a family with 400, 700 and
jdaggett@1150 1003 900 weights" src=optimaweights.png>
jdaggett@532 1004 <p class=caption>Weight mappings for a font family with 400, 700 and 900
jdaggett@890 1005 weight faces
jdaggett@518 1006 </div>
jdaggett@518 1007
jdaggett@1150 1008 <div class=figure><img alt="weight mappings for a family with 300, 600
jdaggett@1150 1009 weights" src=hiraginoweights.png>
jdaggett@532 1010 <p class=caption>Weight mappings for a font family with 300 and 600 weight
jdaggett@890 1011 faces
jdaggett@531 1012 </div>
jdaggett@518 1013
jdaggett@2487 1014 <p>Although the practice is not well-loved by typographers, bold faces are
jdaggett@2487 1015 often synthesized by user agents for faces that lack actual bold faces.
jdaggett@2487 1016 For the purposes of style matching, these faces must be treated as if they
jdaggett@8177 1017 exist within the family. Authors can explicitly avoid this behavior by
jdaggett@8177 1018 using the ‘<a href="#propdef-font-synthesis"><code
jdaggett@8177 1019 class=property>font-synthesis</code></a>’ property.
jdaggett@8177 1020
jdaggett@8177 1021 <p>Specified values of ‘<code class=property>bolder</code>’ and
jdaggett@8177 1022 ‘<code class=property>lighter</code>’ indicate weights relative to the
jdaggett@8177 1023 weight of the parent element. The computed weight is calculated based on
jdaggett@8177 1024 the inherited ‘<a href="#propdef-font-weight"><code
jdaggett@8177 1025 class=property>font-weight</code></a>’ value using the chart below.
jdaggett@1148 1026
jdaggett@6651 1027 <table class=data id=bolderlighter summary="Bolder/lighter mappings">
jdaggett@1148 1028 <thead>
jdaggett@1148 1029 <tr>
jdaggett@6651 1030 <th>Inherited value
jdaggett@6651 1031
jdaggett@6651 1032 <th>bolder
jdaggett@6651 1033
jdaggett@6651 1034 <th>lighter
jdaggett@1148 1035
jdaggett@1148 1036 <tbody>
jdaggett@1148 1037 <tr>
jdaggett@1244 1038 <th>100
jdaggett@1148 1039
jdaggett@1148 1040 <td>400
jdaggett@1148 1041
jdaggett@1148 1042 <td>100
jdaggett@1148 1043
jdaggett@1148 1044 <tr>
jdaggett@1244 1045 <th>200
jdaggett@1148 1046
jdaggett@1148 1047 <td>400
jdaggett@1148 1048
jdaggett@1148 1049 <td>100
jdaggett@1148 1050
jdaggett@1148 1051 <tr>
jdaggett@1244 1052 <th>300
jdaggett@1148 1053
jdaggett@1148 1054 <td>400
jdaggett@1148 1055
jdaggett@1148 1056 <td>100
jdaggett@1148 1057
jdaggett@1148 1058 <tr>
jdaggett@1244 1059 <th>400
jdaggett@1148 1060
jdaggett@1148 1061 <td>700
jdaggett@1148 1062
jdaggett@1148 1063 <td>100
jdaggett@1148 1064
jdaggett@1148 1065 <tr>
jdaggett@1244 1066 <th>500
jdaggett@1148 1067
jdaggett@1148 1068 <td>700
jdaggett@1148 1069
jdaggett@1148 1070 <td>100
jdaggett@1148 1071
jdaggett@1148 1072 <tr>
jdaggett@1244 1073 <th>600
jdaggett@1148 1074
jdaggett@1148 1075 <td>900
jdaggett@1148 1076
jdaggett@1148 1077 <td>400
jdaggett@1148 1078
jdaggett@1148 1079 <tr>
jdaggett@1244 1080 <th>700
jdaggett@1148 1081
jdaggett@1148 1082 <td>900
jdaggett@1148 1083
jdaggett@1148 1084 <td>400
jdaggett@1148 1085
jdaggett@1148 1086 <tr>
jdaggett@1244 1087 <th>800
jdaggett@1148 1088
jdaggett@1148 1089 <td>900
jdaggett@1148 1090
jdaggett@1148 1091 <td>700
jdaggett@1148 1092
jdaggett@1148 1093 <tr>
jdaggett@1244 1094 <th>900
jdaggett@1148 1095
jdaggett@1148 1096 <td>900
jdaggett@1148 1097
jdaggett@1148 1098 <td>700
jdaggett@1148 1099 </table>
jdaggett@1148 1100
jdaggett@1148 1101 <p>The table above is equivalent to selecting the next relative bolder or
jdaggett@1148 1102 lighter face, given a font family containing normal and bold faces along
jdaggett@1148 1103 with a thin and a heavy face. Authors who desire finer control over the
jdaggett@8177 1104 exact weight values used for a given element may use numerical values
jdaggett@1148 1105 instead of relative weights.</p>
jdaggett@512 1106 <!-- prop: font-stretch -->
jdaggett@512 1107
jdaggett@1662 1108 <h3 id=font-stretch-prop><span class=secno>3.3 </span>Font width: the <a
jdaggett@1662 1109 href="#propdef-font-stretch">font-stretch</a> property</h3>
jdaggett@1662 1110
jdaggett@4624 1111 <table class=propdef id=namefont-stretchvaluenormal-ultra-conden>
jdaggett@484 1112 <tbody>
jdaggett@484 1113 <tr>
jdaggett@484 1114 <td>Name:
jdaggett@484 1115
jdaggett@1662 1116 <td><dfn id=propdef-font-stretch>font-stretch</dfn>
jdaggett@484 1117
jdaggett@484 1118 <tr>
jdaggett@484 1119 <td>Value:
jdaggett@484 1120
jdaggett@1662 1121 <td>normal | ultra-condensed | extra-condensed | condensed |
jdaggett@1662 1122 semi-condensed | semi-expanded | expanded | extra-expanded |
jdaggett@5809 1123 ultra-expanded
jdaggett@484 1124
jdaggett@484 1125 <tr>
jdaggett@484 1126 <td>Initial:
jdaggett@484 1127
jdaggett@484 1128 <td>normal
jdaggett@484 1129
jdaggett@484 1130 <tr>
jdaggett@484 1131 <td>Applies to:
jdaggett@484 1132
jdaggett@484 1133 <td>all elements
jdaggett@484 1134
jdaggett@484 1135 <tr>
jdaggett@484 1136 <td>Inherited:
jdaggett@484 1137
jdaggett@484 1138 <td>yes
jdaggett@484 1139
jdaggett@484 1140 <tr>
jdaggett@484 1141 <td>Percentages:
jdaggett@484 1142
jdaggett@484 1143 <td>N/A
jdaggett@484 1144
jdaggett@484 1145 <tr>
jdaggett@484 1146 <td>Media:
jdaggett@484 1147
jdaggett@484 1148 <td>visual
jdaggett@484 1149
jdaggett@484 1150 <tr>
jdaggett@1148 1151 <td>Computed value:
jdaggett@484 1152
jdaggett@484 1153 <td>as specified
jdaggett@7377 1154
jdaggett@7377 1155 <tr>
jdaggett@7377 1156 <td>Animatable:
jdaggett@7377 1157
jdaggett@7377 1158 <td>as <a href="#font-stretch-animation">font stretch</a>
jdaggett@484 1159 </table>
jdaggett@484 1160
jdaggett@2556 1161 <p>The <a class=noxref href="#font-stretch-prop"><span
jdaggett@2556 1162 class=property>‘<code class=property>font-stretch</code>’</span></a>
jdaggett@2556 1163 property selects a normal, condensed, or expanded face from a font family.
jdaggett@2556 1164 Absolute keyword values have the following ordering, from narrowest to
jdaggett@2556 1165 widest:
jdaggett@512 1166
jdaggett@512 1167 <ul>
jdaggett@8177 1168 <li><code>ultra-condensed</code>
jdaggett@8177 1169
jdaggett@8177 1170 <li><code>extra-condensed</code>
jdaggett@8177 1171
jdaggett@8177 1172 <li><code>condensed</code>
jdaggett@8177 1173
jdaggett@8177 1174 <li><code>semi-condensed </code>
jdaggett@8177 1175
jdaggett@8177 1176 <li><code>normal</code>
jdaggett@8177 1177
jdaggett@8177 1178 <li><code>semi-expanded</code>
jdaggett@8177 1179
jdaggett@8177 1180 <li><code>expanded</code>
jdaggett@8177 1181
jdaggett@8177 1182 <li><code>extra-expanded</code>
jdaggett@8177 1183
jdaggett@8177 1184 <li><code>ultra-expanded</code>
jdaggett@512 1185 </ul>
jdaggett@512 1186
jdaggett@8197 1187 <p>When a face does not exist for a given width, normal or condensed values
jdaggett@8197 1188 map to a narrower face, otherwise a wider face. Conversely, expanded
jdaggett@8197 1189 values map to a wider face, otherwise a narrower face. The figure below
jdaggett@8197 1190 shows how the nine font-stretch property settings affect font selection
jdaggett@8197 1191 for font family containing a variety of widths, grey indicates a width for
jdaggett@8197 1192 which no face exists and a different width is substituted:
jdaggett@1148 1193
jdaggett@1150 1194 <div class=figure><img alt="width mappings for a family with condensed,
jdaggett@1150 1195 normal and expanded faces" src=universwidths.png>
jdaggett@1148 1196 <p class=caption>Width mappings for a font family with condensed, normal
jdaggett@1148 1197 and expanded width faces
jdaggett@1148 1198 </div>
jdaggett@7377 1199
jdaggett@7377 1200 <p id=font-stretch-animation>Animation of font stretch: Font stretch is
jdaggett@7377 1201 interpolated in discrete steps. The interpolation happens as though the
jdaggett@7377 1202 ordered values are equally spaced real numbers. The interpolation result
jdaggett@7377 1203 is rounded to the nearest value, with values exactly halfway between two
jdaggett@7377 1204 values rounded towards the later value in the list above.</p>
jdaggett@512 1205 <!-- prop: font-style -->
jdaggett@512 1206
jdaggett@1662 1207 <h3 id=font-style-prop><span class=secno>3.4 </span>Font style: the <a
jdaggett@1662 1208 href="#propdef-font-style">font-style</a> property</h3>
jdaggett@1662 1209
jdaggett@4624 1210 <table class=propdef id=namefont-stylevaluenormal-italic-oblique>
jdaggett@484 1211 <tbody>
jdaggett@484 1212 <tr>
jdaggett@484 1213 <td>Name:
jdaggett@484 1214
jdaggett@1662 1215 <td><dfn id=propdef-font-style>font-style</dfn>
jdaggett@484 1216
jdaggett@484 1217 <tr>
jdaggett@484 1218 <td>Value:
jdaggett@484 1219
jdaggett@5809 1220 <td>normal | italic | oblique
jdaggett@484 1221
jdaggett@484 1222 <tr>
jdaggett@484 1223 <td>Initial:
jdaggett@484 1224
jdaggett@484 1225 <td>normal
jdaggett@484 1226
jdaggett@484 1227 <tr>
jdaggett@484 1228 <td>Applies to:
jdaggett@484 1229
jdaggett@484 1230 <td>all elements
jdaggett@484 1231
jdaggett@484 1232 <tr>
jdaggett@484 1233 <td>Inherited:
jdaggett@484 1234
jdaggett@484 1235 <td>yes
jdaggett@484 1236
jdaggett@484 1237 <tr>
jdaggett@484 1238 <td>Percentages:
jdaggett@484 1239
jdaggett@484 1240 <td>N/A
jdaggett@484 1241
jdaggett@484 1242 <tr>
jdaggett@484 1243 <td>Media:
jdaggett@484 1244
jdaggett@484 1245 <td>visual
jdaggett@484 1246
jdaggett@484 1247 <tr>
jdaggett@1148 1248 <td>Computed value:
jdaggett@484 1249
jdaggett@484 1250 <td>as specified
jdaggett@7377 1251
jdaggett@7377 1252 <tr>
jdaggett@7377 1253 <td>Animatable:
jdaggett@7377 1254
jdaggett@7377 1255 <td>no
jdaggett@484 1256 </table>
jdaggett@484 1257
jdaggett@2556 1258 <p>The <a class=noxref href="#font-style-prop"><span
jdaggett@2556 1259 class=property>‘<code class=property>font-style</code>’</span></a>
jdaggett@2556 1260 property allows italic or oblique faces to be selected. Italic forms are
jdaggett@2556 1261 generally cursive in nature while oblique faces are typically sloped
jdaggett@2556 1262 versions of the regular face. Oblique faces can be simulated by
jdaggett@2556 1263 artificially sloping the glyphs of the regular face. Compare the
jdaggett@2556 1264 artificially sloped renderings of Palatino ‘<code
jdaggett@2556 1265 class=property>a</code>’ and Baskerville ‘<code
jdaggett@1148 1266 class=property>N</code>’ in grey with the actual italic versions:
jdaggett@518 1267
jdaggett@1150 1268 <div class=figure><img alt="artificial sloping vs. real italics"
jdaggett@1150 1269 src=realvsfakeitalics.png>
jdaggett@890 1270 <p class=caption>Artificial sloping versus real italics
jdaggett@512 1271 </div>
jdaggett@518 1272
jdaggett@5809 1273 <p>A value of ‘<a href="#normal2"><code
jdaggett@5809 1274 class=property>normal</code></a>’ selects a face that is classified as
jdaggett@5809 1275 ‘<a href="#normal2"><code class=property>normal</code></a>’, while
jdaggett@5809 1276 ‘<code class=property>oblique</code>’ selects a font that is labeled
jdaggett@5809 1277 ‘<code class=property>oblique</code>’. A value of ‘<code
jdaggett@1148 1278 class=property>italic</code>’ selects a font that is labeled ‘<code
jdaggett@1148 1279 class=property>italic</code>’, or, if that is not available, one labeled
jdaggett@8093 1280 ‘<code class=property>oblique</code>’. If no italic or oblique face is
jdaggett@8096 1281 available, oblique faces can be synthesized by rendering non-obliqued
jdaggett@8093 1282 faces with a right sloping transformation applied. When synthesizing these
jdaggett@8093 1283 faces, the transformation should apply to all glyphs in the same way and
jdaggett@8093 1284 not vary based on codepoint or due to horizontal or vertical line
jdaggett@8093 1285 orientation.
jdaggett@518 1286
jdaggett@518 1287 <p>Many scripts lack the tradition of mixing a cursive form within text
jdaggett@518 1288 rendered with a normal face. Chinese, Japanese and Korean fonts almost
jdaggett@518 1289 always lack italic or oblique faces. Fonts that support a mixture of
jdaggett@518 1290 scripts will sometimes omit specific scripts such as Arabic from the set
jdaggett@518 1291 of glyphs supported in the italic face. User agents should be careful
jdaggett@8225 1292 about making <a href="#character-map"><em>character map</em></a>
jdaggett@8225 1293 assumptions across faces.
jdaggett@7355 1294
jdaggett@7355 1295 <p class=issue>For synthetic italics in vertical runs of Chinese, Japanese,
jdaggett@7355 1296 or Korean text, is there a need to define explicitly the direction of the
jdaggett@7355 1297 faux oblique for runs that include a mixture of ideographic and Latin
jdaggett@7355 1298 text?</p>
jdaggett@1662 1299 <!-- prop: font-size -->
jdaggett@1662 1300
jdaggett@1662 1301 <h3 id=font-size-prop><span class=secno>3.5 </span>Font size: the <a
jdaggett@1662 1302 href="#propdef-font-size">font-size</a> property</h3>
jdaggett@1662 1303
jdaggett@8225 1304 <table class=propdef id=namefont-sizevalueltabsolute-sizegt-ltre>
jdaggett@484 1305 <tbody>
jdaggett@484 1306 <tr>
jdaggett@484 1307 <td>Name:
jdaggett@484 1308
jdaggett@1662 1309 <td><dfn id=propdef-font-size>font-size</dfn>
jdaggett@484 1310
jdaggett@484 1311 <tr>
jdaggett@484 1312 <td>Value:
jdaggett@484 1313
jdaggett@8225 1314 <td><a href="#absolute-size-value"><var>&lt;absolute-size&gt;</var></a>
jdaggett@8225 1315 | <a href="#relative-size-value"><var>&lt;relative-size&gt;</var></a> |
jdaggett@8225 1316 <a href="#length-size-value"><var>&lt;length&gt;</var></a> | <a
jdaggett@8225 1317 href="#percentage-size-value"><var>&lt;percentage&gt;</var></a>
jdaggett@484 1318
jdaggett@484 1319 <tr>
jdaggett@484 1320 <td>Initial:
jdaggett@484 1321
jdaggett@484 1322 <td>medium
jdaggett@484 1323
jdaggett@484 1324 <tr>
jdaggett@484 1325 <td>Applies to:
jdaggett@484 1326
jdaggett@484 1327 <td>all elements
jdaggett@484 1328
jdaggett@484 1329 <tr>
jdaggett@484 1330 <td>Inherited:
jdaggett@484 1331
jdaggett@484 1332 <td>yes
jdaggett@484 1333
jdaggett@484 1334 <tr>
jdaggett@484 1335 <td>Percentages:
jdaggett@484 1336
jdaggett@484 1337 <td>refer to parent element's font size
jdaggett@484 1338
jdaggett@484 1339 <tr>
jdaggett@484 1340 <td>Media:
jdaggett@484 1341
jdaggett@484 1342 <td>visual
jdaggett@484 1343
jdaggett@484 1344 <tr>
jdaggett@1148 1345 <td>Computed value:
jdaggett@484 1346
jdaggett@484 1347 <td>absolute length
jdaggett@7377 1348
jdaggett@7377 1349 <tr>
jdaggett@7377 1350 <td>Animatable:
jdaggett@7377 1351
jdaggett@7377 1352 <td>as <a
jdaggett@7377 1353 href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a>
jdaggett@484 1354 </table>
jdaggett@484 1355
jdaggett@512 1356 <p>This property indicates the desired height of glyphs from the font. For
jdaggett@512 1357 scalable fonts, the font-size is a scale factor applied to the EM unit of
jdaggett@512 1358 the font. (Note that certain glyphs may bleed outside their EM box.) For
jdaggett@512 1359 non-scalable fonts, the font-size is converted into absolute units and
jdaggett@512 1360 matched against the declared font-size of the font, using the same
jdaggett@512 1361 absolute coordinate space for both of the matched values. Values have the
jdaggett@512 1362 following meanings:
jdaggett@512 1363
jdaggett@512 1364 <dl>
jdaggett@8225 1365 <dt><dfn id=absolute-size-value><var>&lt;absolute-size&gt;</var></dfn>
jdaggett@8225 1366
jdaggett@8225 1367 <dd> An <a
jdaggett@8225 1368 href="#absolute-size-value"><var>&lt;absolute-size&gt;</var></a> keyword
jdaggett@8225 1369 refers to an entry in a table of font sizes computed and kept by the user
jdaggett@8225 1370 agent. Possible values are:
jdaggett@512 1371 <p> [ xx-small | x-small | small | medium | large | x-large | xx-large ]</p>
jdaggett@512 1372
jdaggett@8225 1373 <dt><dfn id=relative-size-value><var>&lt;relative-size&gt;</var></dfn>
jdaggett@8225 1374
jdaggett@8225 1375 <dd> A <a href="#relative-size-value"><var>&lt;relative-size&gt;</var></a>
jdaggett@8225 1376 keyword is interpreted relative to the table of font sizes and the
jdaggett@8225 1377 computed ‘<a href="#propdef-font-size"><code
jdaggett@8225 1378 class=property>font-size</code></a>’ of the parent element. Possible
jdaggett@8225 1379 values are:
jdaggett@890 1380 <p> [ larger | smaller ]
jdaggett@890 1381
jdaggett@1148 1382 <p> For example, if the parent element has a font size of ‘<code
jdaggett@1148 1383 class=property>medium</code>’, a value of ‘<code
jdaggett@1148 1384 class=property>larger</code>’ will make the font size of the current
jdaggett@1148 1385 element be ‘<code class=property>large</code>’. If the parent
jdaggett@1148 1386 element's size is not close to a table entry, the user agent is free to
jdaggett@1148 1387 interpolate between table entries or round off to the closest one. The
jdaggett@1148 1388 user agent may have to extrapolate table values if the numerical value
jdaggett@1148 1389 goes beyond the keywords.
jdaggett@512 1390
jdaggett@8225 1391 <dt><dfn id=length-size-value><var>&lt;length&gt;</var></dfn>
jdaggett@512 1392
jdaggett@8187 1393 <dd>A length value specifies an absolute font size (independent of the
jdaggett@8187 1394 user agent's font table). Negative lengths are illegal.
jdaggett@512 1395
jdaggett@8225 1396 <dt><dfn id=percentage-size-value><var>&lt;percentage&gt;</var></dfn>
jdaggett@512 1397
jdaggett@512 1398 <dd>A percentage value specifies an absolute font size relative to the
jdaggett@512 1399 parent element's font size. Use of percentage values, or values in
jdaggett@1148 1400 ‘<code class=property>em</code>’s, leads to more robust and
jdaggett@512 1401 cascadable style sheets.
jdaggett@512 1402 </dl>
jdaggett@512 1403
jdaggett@8187 1404 <p>The following table provides user agent guidelines for the absolute-size
jdaggett@8187 1405 scaling factor and their mapping to HTML heading and absolute font-sizes.
jdaggett@8187 1406 The ‘<code class=property>medium</code>’ value is used as the
jdaggett@8187 1407 reference middle value. The user agent may fine-tune these values for
jdaggett@8187 1408 different fonts or different types of display devices.
jdaggett@1244 1409
jdaggett@1244 1410 <table class=data>
jdaggett@1152 1411 <thead>
jdaggett@1152 1412 <tr>
jdaggett@1152 1413 <th>CSS absolute-size values
jdaggett@1152 1414
jdaggett@1152 1415 <th>xx-small
jdaggett@1152 1416
jdaggett@1152 1417 <th>x-small
jdaggett@1152 1418
jdaggett@1152 1419 <th>small
jdaggett@1152 1420
jdaggett@1152 1421 <th>medium
jdaggett@1152 1422
jdaggett@1152 1423 <th>large
jdaggett@1152 1424
jdaggett@1152 1425 <th>x-large
jdaggett@1152 1426
jdaggett@1152 1427 <th>xx-large
jdaggett@1152 1428
jdaggett@1152 1429 <th> 
jdaggett@1152 1430
jdaggett@512 1431 <tbody>
jdaggett@512 1432 <tr>
jdaggett@1152 1433 <th>scaling factor
jdaggett@1152 1434
jdaggett@1152 1435 <td>3/5
jdaggett@1152 1436
jdaggett@1152 1437 <td>3/4
jdaggett@1152 1438
jdaggett@1152 1439 <td>8/9
jdaggett@1152 1440
jdaggett@1152 1441 <td>1
jdaggett@1152 1442
jdaggett@1152 1443 <td>6/5
jdaggett@1152 1444
jdaggett@1152 1445 <td>3/2
jdaggett@1152 1446
jdaggett@1152 1447 <td>2/1
jdaggett@1152 1448
jdaggett@1152 1449 <td>3/1
jdaggett@512 1450
jdaggett@512 1451 <tr>
jdaggett@8187 1452 <th>HTML headings
jdaggett@1152 1453
jdaggett@1152 1454 <td>h6
jdaggett@1152 1455
jdaggett@1152 1456 <td> 
jdaggett@1152 1457
jdaggett@1152 1458 <td>h5
jdaggett@1152 1459
jdaggett@1152 1460 <td>h4
jdaggett@1152 1461
jdaggett@1152 1462 <td>h3
jdaggett@1152 1463
jdaggett@1152 1464 <td>h2
jdaggett@1152 1465
jdaggett@1152 1466 <td>h1
jdaggett@1152 1467
jdaggett@1152 1468 <td> 
jdaggett@512 1469
jdaggett@512 1470 <tr>
jdaggett@8187 1471 <th>HTML font sizes
jdaggett@1152 1472
jdaggett@1152 1473 <td>1
jdaggett@1152 1474
jdaggett@1152 1475 <td> 
jdaggett@1152 1476
jdaggett@1152 1477 <td>2
jdaggett@1152 1478
jdaggett@1152 1479 <td>3
jdaggett@1152 1480
jdaggett@1152 1481 <td>4
jdaggett@1152 1482
jdaggett@1152 1483 <td>5
jdaggett@1152 1484
jdaggett@1152 1485 <td>6
jdaggett@1152 1486
jdaggett@1152 1487 <td>7
jdaggett@512 1488 </table>
jdaggett@512 1489
jdaggett@512 1490 <p class=note><em><strong>Note 1.</strong> To preserve readability, an UA
jdaggett@512 1491 applying these guidelines should nevertheless avoid creating font-size
jdaggett@8272 1492 resulting in less than 9 device pixels per EM unit on a computer
jdaggett@8272 1493 display.</em>
jdaggett@512 1494
jdaggett@512 1495 <p class=note><em><strong>Note 2.</strong> In CSS1, the suggested scaling
jdaggett@512 1496 factor between adjacent indexes was 1.5 which user experience proved to be
jdaggett@512 1497 too large. In CSS2, the suggested scaling factor for computer screen
jdaggett@512 1498 between adjacent indexes was 1.2 which still created issues for the small
jdaggett@512 1499 sizes. The new scaling factor varies between each index to provide a
jdaggett@512 1500 better readability.</em>
jdaggett@512 1501
jdaggett@6659 1502 <p>The actual value of this property may differ from the computed value due
jdaggett@6659 1503 a numerical value on ‘<a href="#propdef-font-size-adjust"><code
jdaggett@4624 1504 class=property>font-size-adjust</code></a>’ and the unavailability of
jdaggett@4624 1505 certain font sizes.
jdaggett@512 1506
jdaggett@512 1507 <p>Child elements inherit the computed <a class=noxref
jdaggett@6659 1508 href="#font-size-prop"> <span class=property>‘<code
jdaggett@1148 1509 class=property>font-size</code>’</span></a> value (otherwise, the effect
jdaggett@2556 1510 of <a class=noxref href="#font-size-adjust-prop"><span
jdaggett@2556 1511 class=property>‘<code
jdaggett@1148 1512 class=property>font-size-adjust</code>’</span></a> would compound).
jdaggett@512 1513
jdaggett@512 1514 <div class=example>
jdaggett@4624 1515 <p style="display:none">Example(s):
jdaggett@890 1516
jdaggett@890 1517 <p>
jdaggett@512 1518
jdaggett@512 1519 <pre>p { font-size: 12pt; }
jdaggett@512 1520 blockquote { font-size: larger }
jdaggett@512 1521 em { font-size: 150% }
jdaggett@512 1522 em { font-size: 1.5em }
jdaggett@512 1523 </pre>
jdaggett@512 1524 </div>
jdaggett@512 1525 <!-- prop: font-size-adjust -->
jdaggett@512 1526
jdaggett@1662 1527 <h3 id=font-size-adjust-prop><span class=secno>3.6 </span>Relative sizing:
jdaggett@1662 1528 the <a href="#propdef-font-size-adjust">font-size-adjust</a> property</h3>
jdaggett@1662 1529
jdaggett@6659 1530 <table class=propdef id=namefont-size-adjustvaluenone-auto-ltnum>
jdaggett@484 1531 <tbody>
jdaggett@484 1532 <tr>
jdaggett@484 1533 <td>Name:
jdaggett@484 1534
jdaggett@1662 1535 <td><dfn id=propdef-font-size-adjust>font-size-adjust</dfn>
jdaggett@484 1536
jdaggett@484 1537 <tr>
jdaggett@484 1538 <td>Value:
jdaggett@484 1539
jdaggett@8225 1540 <td>none | auto | <a
jdaggett@8225 1541 href="#aspect-ratio-value"><var>&lt;number&gt;</var></a>
jdaggett@484 1542
jdaggett@484 1543 <tr>
jdaggett@484 1544 <td>Initial:
jdaggett@484 1545
jdaggett@484 1546 <td>none
jdaggett@484 1547
jdaggett@484 1548 <tr>
jdaggett@484 1549 <td>Applies to:
jdaggett@484 1550
jdaggett@484 1551 <td>all elements
jdaggett@484 1552
jdaggett@484 1553 <tr>
jdaggett@484 1554 <td>Inherited:
jdaggett@484 1555
jdaggett@484 1556 <td>yes
jdaggett@484 1557
jdaggett@484 1558 <tr>
jdaggett@484 1559 <td>Percentages:
jdaggett@484 1560
jdaggett@554 1561 <td>N/A
jdaggett@484 1562
jdaggett@484 1563 <tr>
jdaggett@484 1564 <td>Media:
jdaggett@484 1565
jdaggett@484 1566 <td>visual
jdaggett@484 1567
jdaggett@484 1568 <tr>
jdaggett@1148 1569 <td>Computed value:
jdaggett@484 1570
jdaggett@554 1571 <td>as specified
jdaggett@7377 1572
jdaggett@7377 1573 <tr>
jdaggett@7377 1574 <td>Animatable:
jdaggett@7377 1575
jdaggett@7377 1576 <td>as <a
jdaggett@7377 1577 href="http://dev.w3.org/csswg/css3-transitions/#animtype-number">number</a>
jdaggett@484 1578 </table>
jdaggett@484 1579
jdaggett@555 1580 <p>For any given font size, the apparent size and legibility of text varies
jdaggett@555 1581 across fonts. For scripts such as Latin or Cyrillic that distinguish
jdaggett@555 1582 between upper and lowercase letters, the relative height of lowercase
jdaggett@555 1583 letters compared to their uppercase counterparts is a determining factor
jdaggett@555 1584 of legibility. This is commonly referred to as the <a class=index-def
jdaggett@4624 1585 href="#aspect-value" id=aspect-value0 title="aspect value"><dfn
jdaggett@4624 1586 id=aspect-value>aspect value</dfn></a>. Precisely defined, it is equal to
jdaggett@4624 1587 the x-height of a font divided by the font size.
jdaggett@555 1588
jdaggett@555 1589 <p>In situations where font fallback occurs, fallback fonts may not share
jdaggett@555 1590 the same aspect ratio as the desired font family and will thus appear less
jdaggett@555 1591 readable. The font-size-adjust property is a way to preserve the
jdaggett@547 1592 readability of text when font fallback occurs. It does this by adjusting
jdaggett@1662 1593 the font-size so that the x-height is the same regardless of the font
jdaggett@555 1594 used.
jdaggett@547 1595
jdaggett@547 1596 <div class=example>
jdaggett@547 1597 <p>The style defined below defines Verdana as the desired font family, but
jdaggett@547 1598 if Verdana is not available Futura or Times will be used.</p>
jdaggett@547 1599
jdaggett@547 1600 <pre>p {
jdaggett@547 1601 font-family: Verdana, Futura, Times;
jdaggett@547 1602 }
jdaggett@547 1603
jdaggett@547 1604 &lt;p>Lorem ipsum dolor sit amet, ...&lt;/p>
jdaggett@547 1605 </pre>
jdaggett@547 1606
jdaggett@547 1607 <p>Verdana has a relatively high aspect ratio, lowercase letters are
jdaggett@547 1608 relatively tall compared to uppercase letters, so at small sizes text
jdaggett@547 1609 appears legible. Times has a lower aspect ratio and so if fallback
jdaggett@547 1610 occurs, the text will be less legible at small sizes than Verdana.</p>
jdaggett@547 1611 </div>
jdaggett@547 1612
jdaggett@547 1613 <p>How text rendered in each of these fonts compares is shown below, the
jdaggett@547 1614 columns show text rendered in Verdana, Futura and Times. The same
jdaggett@547 1615 font-size value is used across cells within each row and red lines are
jdaggett@547 1616 included to show the differences in x-height. In the upper half each row
jdaggett@547 1617 is rendered in the same font-size value. The same is true for the lower
jdaggett@547 1618 half but in this half the font-size-adjust property is also set so that
jdaggett@2462 1619 the actual font size is adjusted to preserve the x-height across each row.
jdaggett@547 1620 Note how small text remains relatively legible across each row in the
jdaggett@547 1621 lower half.
jdaggett@547 1622
jdaggett@1150 1623 <div class=figure><img alt="text with and without font-size-adjust"
jdaggett@1150 1624 src=fontsizeadjust.png>
jdaggett@890 1625 <p class=caption>Text with and without the use of font-size-adjust
jdaggett@547 1626 </div>
jdaggett@512 1627
jdaggett@512 1628 <p>This property allows authors to specify an aspect value for an element
jdaggett@554 1629 that will effectively preserve the x-height of the first choice font,
jdaggett@554 1630 whether it is substituted or not. Values have the following meanings:
jdaggett@512 1631
jdaggett@512 1632 <dl>
jdaggett@8276 1633 <dt><a href="#font-variant-ligatures-none-value"><strong>none</strong></a>
jdaggett@8276 1634
jdaggett@512 1635
jdaggett@512 1636 <dd>Do not preserve the font's x-height.
jdaggett@512 1637
jdaggett@6659 1638 <dt><strong>auto</strong>
jdaggett@6659 1639
jdaggett@6659 1640 <dd>Behaves just like &lt;number>, except the number used is the aspect
jdaggett@6659 1641 value calculated by user agents for the first font in the list of fonts
jdaggett@6659 1642 defined for the initial value of the ‘<a
jdaggett@6659 1643 href="#descdef-font-family"><code
jdaggett@6659 1644 class=property>font-family</code></a>’ property. Effectively this is
jdaggett@6659 1645 the default font used when ‘<a href="#descdef-font-family"><code
jdaggett@6659 1646 class=property>font-family</code></a>’ is not otherwise specified.
jdaggett@6659 1647 <p>Authors can use this value to specify that font size should be
jdaggett@6659 1648 normalized across fonts based on the x-height without the need to
jdaggett@6659 1649 specify the aspect ratio explicitly.</p>
jdaggett@6659 1650
jdaggett@8225 1651 <dt><dfn id=aspect-ratio-value><var>&lt;number&gt;</var></dfn>
jdaggett@512 1652
jdaggett@554 1653 <dd>Specifies the aspect value used in the calculation below to calculate
jdaggett@554 1654 the adjusted font size:
jdaggett@554 1655 <pre>c = ( a / a' ) s
jdaggett@512 1656 </pre>
jdaggett@512 1657
jdaggett@512 1658 <p>where:</p>
jdaggett@512 1659
jdaggett@554 1660 <pre>s = font-size value
jdaggett@554 1661 a = aspect value as specified by the font-size-adjust property
jdaggett@554 1662 a' = aspect value of actual font
jdaggett@554 1663 c = adjusted font-size to use
jdaggett@512 1664 </pre>
jdaggett@554 1665
jdaggett@554 1666 <p>This value applies to any font that is selected but in typical usage
jdaggett@554 1667 it should be based on the aspect value of the first font in the
jdaggett@555 1668 font-family list. If this is specified accurately, the <tt>(a/a')</tt>
jdaggett@555 1669 term in the formula above is effectively 1 for the first font and no
jdaggett@555 1670 adjustment occurs. If the value is specified inaccurately, text rendered
jdaggett@555 1671 using the first font in the family list will display differently in
jdaggett@555 1672 older user agents that don't support font-size-adjust.</p>
jdaggett@512 1673 </dl>
jdaggett@512 1674
jdaggett@554 1675 <p>Authors can calculate the aspect value for a given font by comparing
jdaggett@554 1676 spans with the same content but different font-size-adjust properties. If
jdaggett@554 1677 the same font-size is used, the spans will match when the font-size-adjust
jdaggett@554 1678 value is accurate for the given font.
jdaggett@554 1679
jdaggett@554 1680 <div class=example>
jdaggett@554 1681 <p>Two spans with borders are used to determine the aspect value of a
jdaggett@554 1682 font. The font-size is the same for both spans but the font-size-adjust
jdaggett@554 1683 property is specified only for the right span. Starting with a value of
jdaggett@554 1684 0.5, the aspect value can be adjusted until the borders around the two
jdaggett@554 1685 letters line up.</p>
jdaggett@554 1686
jdaggett@554 1687 <pre>p {
jdaggett@554 1688 font-family: Futura;
jdaggett@554 1689 font-size: 500px;
jdaggett@554 1690 }
jdaggett@554 1691
jdaggett@554 1692 span {
jdaggett@554 1693 border: solid 1px red;
jdaggett@554 1694 }
jdaggett@554 1695
jdaggett@554 1696 .adjust {
jdaggett@554 1697 font-size-adjust: 0.5;
jdaggett@554 1698 }
jdaggett@554 1699
jdaggett@554 1700 &lt;p>&lt;span>b&lt;/span>&lt;span class="adjust">b&lt;/span>&lt;/p>
jdaggett@554 1701 </pre>
jdaggett@554 1702
jdaggett@1150 1703 <div class=figure><img alt="Futura with an aspect value of 0.5"
jdaggett@1150 1704 src=beforefontsizeadjust.png>
jdaggett@890 1705 <p class=caption>Futura with an aspect value of 0.5
jdaggett@554 1706 </div>
jdaggett@554 1707
jdaggett@554 1708 <p>The box on the right is a bit bigger than the one on the left, so the
jdaggett@554 1709 aspect value of this font is something less than 0.5. Adjust the value
jdaggett@554 1710 until the boxes align.</p>
jdaggett@554 1711 </div>
jdaggett@512 1712 <!-- prop: font -->
jdaggett@3460 1713 <!-- jtdfix, crap, preprocessor is inserting links to descriptors rather than properties. bert, make it stop... -->
jdaggett@7020 1714 <!-- <a href="#font-stretch-prop" class="noxref"><span class="property">'font-stretch'</span></a> -->
jdaggett@512 1715
jdaggett@1662 1716 <h3 id=font-prop><span class=secno>3.7 </span>Shorthand font property: the
jdaggett@1662 1717 <a href="#propdef-font">font</a> property</h3>
jdaggett@1662 1718
jdaggett@8225 1719 <table class=propdef id=namefontvalue-ltlsquofont-stylersquogt-l>
jdaggett@484 1720 <tbody>
jdaggett@484 1721 <tr>
jdaggett@484 1722 <td>Name:
jdaggett@484 1723
jdaggett@1662 1724 <td><dfn id=propdef-font>font</dfn>
jdaggett@484 1725
jdaggett@484 1726 <tr>
jdaggett@484 1727 <td>Value:
jdaggett@484 1728
jdaggett@8225 1729 <td>[ [ <var>&lt;‘<a href="#propdef-font-style"><code
jdaggett@8225 1730 class=property>font-style</code></a>’&gt;</var> || <a
jdaggett@8225 1731 href="#font-variant-css21-values"><var>&lt;font-variant-css21&gt;</var></a>
jdaggett@8225 1732 || <var>&lt;‘<a href="#propdef-font-weight"><code
jdaggett@8225 1733 class=property>font-weight</code></a>’&gt;</var> || <var>&lt;‘<a
jdaggett@7060 1734 href="#propdef-font-stretch"><code
jdaggett@8225 1735 class=property>font-stretch</code></a>’</var> ]? <var>&lt;‘<a
jdaggett@8225 1736 href="#propdef-font-size"><code
jdaggett@8225 1737 class=property>font-size</code></a>’&gt;</var> [ / <var>&lt;‘<code
jdaggett@8225 1738 class=property>line-height</code>’&gt;</var> ]? <var>&lt;‘<a
jdaggett@4624 1739 href="#descdef-font-family"><code
jdaggett@8225 1740 class=property>font-family</code></a>’&gt;</var> ] | caption | icon |
jdaggett@8225 1741 menu | message-box | small-caption | status-bar
jdaggett@484 1742
jdaggett@484 1743 <tr>
jdaggett@484 1744 <td>Initial:
jdaggett@484 1745
jdaggett@484 1746 <td>see individual properties
jdaggett@484 1747
jdaggett@484 1748 <tr>
jdaggett@484 1749 <td>Applies to:
jdaggett@484 1750
jdaggett@484 1751 <td>all elements
jdaggett@484 1752
jdaggett@484 1753 <tr>
jdaggett@484 1754 <td>Inherited:
jdaggett@484 1755
jdaggett@484 1756 <td>yes
jdaggett@484 1757
jdaggett@484 1758 <tr>
jdaggett@484 1759 <td>Percentages:
jdaggett@484 1760
jdaggett@484 1761 <td>see individual properties
jdaggett@484 1762
jdaggett@484 1763 <tr>
jdaggett@484 1764 <td>Media:
jdaggett@484 1765
jdaggett@484 1766 <td>visual
jdaggett@484 1767
jdaggett@484 1768 <tr>
jdaggett@1148 1769 <td>Computed value:
jdaggett@484 1770
jdaggett@484 1771 <td>see individual properties
jdaggett@7377 1772
jdaggett@7377 1773 <tr>
jdaggett@7377 1774 <td>Animatable:
jdaggett@7377 1775
jdaggett@7377 1776 <td>see individual properties
jdaggett@484 1777 </table>
jdaggett@1732 1778
jdaggett@4624 1779 <p>The <span class=property>‘<a href="#propdef-font"><code
jdaggett@4624 1780 class=property>font</code></a>’</span> property is, except as described
jdaggett@4624 1781 below, a shorthand property for setting ‘<a
jdaggett@7060 1782 href="#propdef-font-style"><code class=property>font-style</code></a>’,
jdaggett@4624 1783 <span class=property>‘<a href="#propdef-font-variant"><code
jdaggett@4624 1784 class=property>font-variant</code></a>’</span>, <span
jdaggett@7060 1785 class=property>‘<a href="#propdef-font-weight"><code
jdaggett@4624 1786 class=property>font-weight</code></a>’</span>, <span
jdaggett@7060 1787 class=property>‘<a href="#propdef-font-stretch"><code
jdaggett@7020 1788 class=property>font-stretch</code></a>’</span>, <span
jdaggett@4624 1789 class=property>‘<a href="#propdef-font-size"><code
jdaggett@4624 1790 class=property>font-size</code></a>’</span>, ‘<code
jdaggett@4624 1791 class=property>line-height</code>’, <span class=property>‘<a
jdaggett@4624 1792 href="#descdef-font-family"><code
jdaggett@4624 1793 class=property>font-family</code></a>’</span> at the same place in the
jdaggett@4624 1794 stylesheet. Values for the <span class=property>‘<a
jdaggett@4624 1795 href="#propdef-font-variant"><code
jdaggett@4624 1796 class=property>font-variant</code></a>’</span> property may also be
jdaggett@4624 1797 included but only those supported in CSS 2.1, none of the font-variant
jdaggett@4624 1798 values added in this specification can be used in the <span
jdaggett@4624 1799 class=property>‘<a href="#propdef-font"><code
jdaggett@4624 1800 class=property>font</code></a>’</span> shorthand:
jdaggett@1732 1801
jdaggett@1732 1802 <pre
jdaggett@8225 1803 class=prod><dfn id=font-variant-css21-values><var>&lt;font-variant-css21&gt;</var></dfn> = [normal | small-caps]</pre>
jdaggett@1732 1804
jdaggett@1732 1805 <p>The syntax of this property is based on a traditional typographical
jdaggett@1732 1806 shorthand notation to set multiple properties related to fonts.
jdaggett@512 1807
jdaggett@8197 1808 <p>All subproperties of the ‘<a href="#propdef-font"><code
jdaggett@8197 1809 class=property>font</code></a>’ property are first reset to their
jdaggett@8197 1810 initial values, including those listed above plus <span
jdaggett@4624 1811 class=property>‘<a href="#propdef-font-size-adjust"><code
jdaggett@4624 1812 class=property>font-size-adjust</code></a>’</span>, <span
jdaggett@4624 1813 class=property>‘<a href="#propdef-font-kerning"><code
jdaggett@8197 1814 class=property>font-kerning</code></a>’</span>, subproperties of <span
jdaggett@8197 1815 class=property>‘<a href="#propdef-font-variant"><code
jdaggett@8197 1816 class=property>font-variant</code></a>’</span> and and <span
jdaggett@8197 1817 class=property>‘<a href="#propdef-font-language-override"><code
jdaggett@8197 1818 class=property>font-language-override</code></a>’</span>. Then, those
jdaggett@8197 1819 properties that are given explicit values in the <span
jdaggett@8197 1820 class=property>‘<a href="#propdef-font"><code
jdaggett@4624 1821 class=property>font</code></a>’</span> shorthand are set to those
jdaggett@512 1822 values. For a definition of allowed and initial values, see the previously
jdaggett@512 1823 defined properties. For reasons of backwards compatibility, it is not
jdaggett@4624 1824 possible to set <span class=property>‘<a
jdaggett@7020 1825 href="#propdef-font-size-adjust"><code
jdaggett@7020 1826 class=property>font-size-adjust</code></a>’</span> to anything other
jdaggett@7020 1827 than its initial value using the <span class=property>‘<a
jdaggett@4624 1828 href="#propdef-font"><code class=property>font</code></a>’</span>
jdaggett@7020 1829 shorthand property; instead, use the individual property.
jdaggett@512 1830
jdaggett@512 1831 <div class=example>
jdaggett@4624 1832 <p style="display:none">Example(s):
jdaggett@890 1833
jdaggett@890 1834 <p>
jdaggett@512 1835
jdaggett@512 1836 <pre>p { font: 12pt/14pt sans-serif }
jdaggett@512 1837 p { font: 80% sans-serif }
jdaggett@512 1838 p { font: x-large/110% &quot;new century schoolbook&quot;, serif }
jdaggett@512 1839 p { font: bold italic large Palatino, serif }
jdaggett@512 1840 p { font: normal small-caps 120%/120% fantasy }
jdaggett@7020 1841 p { font: condensed oblique 12pt &quot;Helvetica Neue&quot;, serif; }
jdaggett@512 1842 </pre>
jdaggett@512 1843
jdaggett@1148 1844 <p> In the second rule, the font size percentage value (‘<code
jdaggett@8187 1845 class=css>80%</code>’) refers to the computed ‘<a
jdaggett@8187 1846 href="#propdef-font-size"><code class=property>font-size</code></a>’ of
jdaggett@8187 1847 the parent element. In the third rule, the line height percentage
jdaggett@8187 1848 (‘<code class=css>110%</code>’) refers to the font size of the
jdaggett@8187 1849 element itself.
jdaggett@512 1850
jdaggett@4624 1851 <p>The first three rules do not specify the <span class=property>‘<a
jdaggett@4624 1852 href="#propdef-font-variant"><code
jdaggett@4624 1853 class=property>font-variant</code></a>’</span> and <span
jdaggett@7060 1854 class=property>‘<a href="#propdef-font-weight"><code
jdaggett@4624 1855 class=property>font-weight</code></a>’</span> explicitly, so these
jdaggett@5809 1856 properties receive their initial values (‘<a href="#normal2"><code
jdaggett@5809 1857 class=property>normal</code></a>’). Notice that the font family name
jdaggett@5809 1858 "new century schoolbook", which contains spaces, is enclosed in quotes.
jdaggett@5809 1859 The fourth rule sets the <span class=property>‘<a
jdaggett@7060 1860 href="#propdef-font-weight"><code
jdaggett@4624 1861 class=property>font-weight</code></a>’</span> to ‘<code
jdaggett@4624 1862 class=property>bold</code>’, the <span class=property>‘<a
jdaggett@7060 1863 href="#propdef-font-style"><code
jdaggett@4624 1864 class=property>font-style</code></a>’</span> to ‘<code
jdaggett@1662 1865 class=property>italic</code>’, and implicitly sets <span
jdaggett@4624 1866 class=property>‘<a href="#propdef-font-variant"><code
jdaggett@5809 1867 class=property>font-variant</code></a>’</span> to ‘<a
jdaggett@5809 1868 href="#normal2"><code class=property>normal</code></a>’.
jdaggett@4624 1869
jdaggett@4624 1870 <p> The fifth rule sets the <span class=property>‘<a
jdaggett@4624 1871 href="#propdef-font-variant"><code
jdaggett@4624 1872 class=property>font-variant</code></a>’</span> (‘<a
jdaggett@4624 1873 href="#small-caps"><code class=property>small-caps</code></a>’), the
jdaggett@4624 1874 <span class=property>‘<a href="#propdef-font-size"><code
jdaggett@4624 1875 class=property>font-size</code></a>’</span> (120% of the parent's font
jdaggett@4624 1876 size), the <span class=property>‘<code
jdaggett@1148 1877 class=property>line-height</code>’</span> (120% of the font size) and
jdaggett@4624 1878 the <span class=property>‘<a href="#descdef-font-family"><code
jdaggett@4624 1879 class=property>font-family</code></a>’</span> (‘<a
jdaggett@4624 1880 href="#fantasy"><code class=property>fantasy</code></a>’). It follows
jdaggett@5809 1881 that the keyword ‘<a href="#normal2"><code
jdaggett@5809 1882 class=property>normal</code></a>’ applies to the two remaining
jdaggett@7060 1883 properties: <span class=property>‘<a href="#propdef-font-style"><code
jdaggett@4624 1884 class=property>font-style</code></a>’</span> and <span
jdaggett@7060 1885 class=property>‘<a href="#propdef-font-weight"><code
jdaggett@4624 1886 class=property>font-weight</code></a>’</span>.
jdaggett@4624 1887
jdaggett@7179 1888 <p>The sixth rule sets the <span class=property>‘<a
jdaggett@7060 1889 href="#propdef-font-style"><code
jdaggett@4624 1890 class=property>font-style</code></a>’</span>, <span
jdaggett@7060 1891 class=property>‘<a href="#propdef-font-stretch"><code
jdaggett@7020 1892 class=property>font-stretch</code></a>’</span>, <span
jdaggett@4624 1893 class=property>‘<a href="#propdef-font-size"><code
jdaggett@4624 1894 class=property>font-size</code></a>’</span>, and <span
jdaggett@4624 1895 class=property>‘<a href="#descdef-font-family"><code
jdaggett@4624 1896 class=property>font-family</code></a>’</span>, the other font
jdaggett@7020 1897 properties being set to their initial values.
jdaggett@512 1898 </div>
jdaggett@512 1899
jdaggett@7060 1900 <p>Since the ‘<a href="#propdef-font-stretch"><code
jdaggett@7020 1901 class=property>font-stretch</code></a>’ property was not defined in CSS
jdaggett@7060 1902 2.1, when using ‘<a href="#propdef-font-stretch"><code
jdaggett@7020 1903 class=property>font-stretch</code></a>’ values within ‘<a
jdaggett@7020 1904 href="#propdef-font"><code class=property>font</code></a>’ rules,
jdaggett@7020 1905 authors should include a extra version compatible with older user agents:
jdaggett@7020 1906
jdaggett@7020 1907 <pre>p {
jdaggett@7020 1908 font: 80% sans-serif; /* for older user agents */
jdaggett@7020 1909 font: condensed 80% sans-serif;
jdaggett@7020 1910 }</pre>
jdaggett@7020 1911
jdaggett@1662 1912 <p>The following values refer to system fonts:
jdaggett@512 1913
jdaggett@512 1914 <dl>
jdaggett@512 1915 <dt><strong>caption</strong>
jdaggett@512 1916
jdaggett@512 1917 <dd>The font used for captioned controls (e.g., buttons, drop-downs,
jdaggett@512 1918 etc.).
jdaggett@512 1919
jdaggett@512 1920 <dt><strong>icon</strong>
jdaggett@512 1921
jdaggett@512 1922 <dd>The font used to label icons.
jdaggett@512 1923
jdaggett@512 1924 <dt><strong>menu</strong>
jdaggett@512 1925
jdaggett@512 1926 <dd>The font used in menus (e.g., dropdown menus and menu lists).
jdaggett@512 1927
jdaggett@512 1928 <dt><strong>message-box</strong>
jdaggett@512 1929
jdaggett@512 1930 <dd>The font used in dialog boxes.
jdaggett@512 1931
jdaggett@512 1932 <dt><strong>small-caption</strong>
jdaggett@512 1933
jdaggett@512 1934 <dd>The font used for labeling small controls.
jdaggett@512 1935
jdaggett@512 1936 <dt><strong>status-bar</strong>
jdaggett@512 1937
jdaggett@512 1938 <dd>The font used in window status bars.
jdaggett@512 1939 </dl>
jdaggett@512 1940
jdaggett@512 1941 <p>System fonts may only be set as a whole; that is, the font family, size,
jdaggett@1662 1942 weight, style, etc. are all set at the same time. These values may then be
jdaggett@512 1943 altered individually if desired. If no font with the indicated
jdaggett@512 1944 characteristics exists on a given platform, the user agent should either
jdaggett@1148 1945 intelligently substitute (e.g., a smaller version of the ‘<code
jdaggett@1148 1946 class=property>caption</code>’ font might be used for the ‘<code
jdaggett@7242 1947 class=property>small-caption</code>’ font), or substitute a user agent
jdaggett@1148 1948 default font. As for regular fonts, if, for a system font, any of the
jdaggett@1148 1949 individual properties are not part of the operating system's available
jdaggett@1148 1950 user preferences, those properties should be set to their initial values.
jdaggett@512 1951
jdaggett@1662 1952 <p>That is why this property is "almost" a shorthand property: system fonts
jdaggett@1662 1953 can only be specified with this property, not with <span
jdaggett@4624 1954 class=property>‘<a href="#descdef-font-family"><code
jdaggett@4624 1955 class=property>font-family</code></a>’</span> itself, so <span
jdaggett@4624 1956 class=property>‘<a href="#propdef-font"><code
jdaggett@4624 1957 class=property>font</code></a>’</span> allows authors to do more than
jdaggett@4624 1958 the sum of its subproperties. However, the individual properties such as
jdaggett@7060 1959 <span class=property>‘<a href="#propdef-font-weight"><code
jdaggett@4624 1960 class=property>font-weight</code></a>’</span> are still given values
jdaggett@4624 1961 taken from the system font, which can be independently varied.
jdaggett@512 1962
jdaggett@7235 1963 <p>Note that the keywords used for the system fonts listed above are only
jdaggett@7235 1964 treated as keywords when they occur in the initial position, in other
jdaggett@7235 1965 positions the same string is treated as part of the font family name:
jdaggett@7235 1966
jdaggett@7235 1967 <pre> font: menu; /* use the font settings for system menus */
jdaggett@7235 1968 font: large menu; /* use a font family named "menu" */</pre>
jdaggett@7235 1969
jdaggett@512 1970 <div class=example>
jdaggett@4624 1971 <p style="display:none">Example(s):
jdaggett@890 1972
jdaggett@890 1973 <p>
jdaggett@512 1974
jdaggett@512 1975 <pre>button { font: 300 italic 1.3em/1.7em &quot;FB Armada&quot;, sans-serif }
jdaggett@512 1976 button p { font: menu }
jdaggett@512 1977 button p em { font-weight: bolder }
jdaggett@512 1978 </pre>
jdaggett@512 1979
jdaggett@512 1980 <p>If the font used for dropdown menus on a particular system happened to
jdaggett@512 1981 be, for example, 9-point Charcoal, with a weight of 600, then P elements
jdaggett@512 1982 that were descendants of BUTTON would be displayed as if this rule were
jdaggett@890 1983 in effect:
jdaggett@512 1984
jdaggett@512 1985 <pre>button p { font: 600 9pt Charcoal }
jdaggett@512 1986 </pre>
jdaggett@512 1987
jdaggett@4624 1988 <p>Because the <span class=property>‘<a href="#propdef-font"><code
jdaggett@4624 1989 class=property>font</code></a>’</span> shorthand resets to its initial
jdaggett@4624 1990 value any property not explicitly given a value, this has the same effect
jdaggett@4624 1991 as this declaration:
jdaggett@512 1992
jdaggett@512 1993 <pre>button p {
jdaggett@512 1994 font-style: normal;
jdaggett@512 1995 font-variant: normal;
jdaggett@512 1996 font-weight: 600;
jdaggett@512 1997 font-size: 9pt;
jdaggett@512 1998 line-height: normal;
jdaggett@512 1999 font-family: Charcoal
jdaggett@512 2000 }
jdaggett@512 2001 </pre>
jdaggett@512 2002 </div>
jdaggett@2487 2003 <!-- prop: font-synthesis -->
jdaggett@2487 2004
jdaggett@2487 2005 <h3 id=font-synthesis-prop><span class=secno>3.8 </span>Controlling
jdaggett@2487 2006 synthetic faces: the <a href="#propdef-font-synthesis">font-synthesis</a>
jdaggett@2487 2007 property</h3>
jdaggett@2487 2008
jdaggett@4624 2009 <table class=propdef id=namefont-synthesisvaluenone-weight-style>
jdaggett@2457 2010 <tbody>
jdaggett@2457 2011 <tr>
jdaggett@2457 2012 <td>Name:
jdaggett@2457 2013
jdaggett@2487 2014 <td><dfn id=propdef-font-synthesis>font-synthesis</dfn>
jdaggett@2457 2015
jdaggett@2457 2016 <tr>
jdaggett@2457 2017 <td>Value:
jdaggett@2457 2018
jdaggett@2487 2019 <td>none | [ weight || style ]
jdaggett@2457 2020
jdaggett@2457 2021 <tr>
jdaggett@2457 2022 <td>Initial:
jdaggett@2457 2023
jdaggett@2487 2024 <td>weight style
jdaggett@2457 2025
jdaggett@2457 2026 <tr>
jdaggett@2457 2027 <td>Applies to:
jdaggett@2457 2028
jdaggett@2457 2029 <td>all elements
jdaggett@2457 2030
jdaggett@2457 2031 <tr>
jdaggett@2457 2032 <td>Inherited:
jdaggett@2457 2033
jdaggett@2457 2034 <td>yes
jdaggett@2457 2035
jdaggett@2457 2036 <tr>
jdaggett@2457 2037 <td>Percentages:
jdaggett@2457 2038
jdaggett@2457 2039 <td>N/A
jdaggett@2457 2040
jdaggett@2457 2041 <tr>
jdaggett@2457 2042 <td>Media:
jdaggett@2457 2043
jdaggett@2457 2044 <td>visual
jdaggett@2457 2045
jdaggett@2457 2046 <tr>
jdaggett@2457 2047 <td>Computed value:
jdaggett@2457 2048
jdaggett@2457 2049 <td>as specified
jdaggett@7377 2050
jdaggett@7377 2051 <tr>
jdaggett@7377 2052 <td>Animatable:
jdaggett@7377 2053
jdaggett@7377 2054 <td>no
jdaggett@2457 2055 </table>
jdaggett@2457 2056
jdaggett@2487 2057 <p>This property controls whether user agents are allowed to synthesize
jdaggett@2487 2058 bold or oblique font faces when a font family lacks bold or italic faces.
jdaggett@7311 2059 If ‘<a href="#weight"><code class=property>weight</code></a>’ is not
jdaggett@7311 2060 specified, user agents must not synthesize bold faces and if ‘<code
jdaggett@2487 2061 class=property>style</code>’ is not specified user agents must not
jdaggett@8276 2062 synthesize italic faces. A value of ‘<a
jdaggett@8276 2063 href="#font-variant-ligatures-none-value"><code
jdaggett@8276 2064 class=property>none</code></a>’ disallows all synthetic faces.
jdaggett@2457 2065
jdaggett@2457 2066 <div class=example>
jdaggett@2488 2067 <p>The style rule below disables the use of synthetically obliqued Arabic:</p>
jdaggett@2457 2068
jdaggett@2487 2069 <pre>*:lang(ar) { font-synthesis: none; }
jdaggett@2457 2070 </pre>
jdaggett@2457 2071 </div>
jdaggett@512 2072
jdaggett@6699 2073 <h2 id=font-resources><span class=secno>4 </span>Font Resources</h2>
jdaggett@545 2074
jdaggett@7096 2075 <h3 id=font-face-rule><span class=secno>4.1 </span>The
jdaggett@7096 2076 <code>@font-face</code> rule</h3>
jdaggett@7096 2077
jdaggett@7096 2078 <p>The <code>@font-face</code> rule allows for linking to fonts that are
jdaggett@8198 2079 automatically fetched and activated when needed. This allows authors to
jdaggett@8198 2080 select a font that closely matches the design goals for a given page
jdaggett@8198 2081 rather than limiting the font choice to a set of fonts available on all
jdaggett@8198 2082 platforms. A set of font descriptors define the location of a font
jdaggett@8198 2083 resource, either locally or externally, along with the style
jdaggett@8198 2084 characteristics of an individual face. Multiple <code>@font-face</code>
jdaggett@8198 2085 rules can be used to construct font families with a variety of faces.
jdaggett@8198 2086 Using CSS font matching rules, a user agent can selectively download only
jdaggett@8198 2087 those faces that are needed for a given piece of text.
jdaggett@8198 2088
jdaggett@8198 2089 <p>The @font-face rule consists of the @font-face at-keyword followed by a
jdaggett@8198 2090 block of descriptor declarations. In terms of the grammar, this
jdaggett@8198 2091 specification defines the following productions:
jdaggett@8031 2092
jdaggett@8031 2093 <pre><dfn id=fontfacerule>font_face_rule</dfn>
jdaggett@8225 2094 : <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 2095 ;
jdaggett@8031 2096
jdaggett@8031 2097 <dfn id=descriptordeclaration>descriptor_declaration</dfn>
jdaggett@8225 2098 : <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 2099 ;</pre>
jdaggett@8031 2100
jdaggett@8032 2101 <p>The following new definitions are introduced:
jdaggett@8032 2102
jdaggett@8032 2103 <pre>- -|\\0{0,4}2d(\r\n|[ \t\r\n\f])?
jdaggett@8032 2104 F f|\\0{0,4}(46|66)(\r\n|[ \t\r\n\f])?</pre>
jdaggett@8032 2105
jdaggett@8032 2106 <p>The following new token is introduced:
jdaggett@8032 2107
jdaggett@8225 2108 <pre>@{F}{O}{N}{T}{-}{F}{A}{C}{E} {return <dfn id=fontfacesym>FONT_FACE_SYM</dfn>;}</pre>
jdaggett@8032 2109
jdaggett@8031 2110 <p>Each <span class=index-inst id=font-face
jdaggett@7096 2111 title="@font-face"><code>@font-face</code></span> rule specifies a value
jdaggett@7096 2112 for every font descriptor, either implicitly or explicitly. Those not
jdaggett@7096 2113 given explicit values in the rule take the initial value listed with each
jdaggett@7096 2114 descriptor in this specification. These descriptors apply solely within
jdaggett@7096 2115 the context of the <code>@font-face</code> rule in which they are defined,
jdaggett@7096 2116 and do not apply to document language elements. There is no notion of
jdaggett@7096 2117 which elements the descriptors apply to or whether the values are
jdaggett@7096 2118 inherited by child elements. When a given descriptor occurs multiple times
jdaggett@8198 2119 in a given <code>@font-face</code> rule, only the last descriptor
jdaggett@8198 2120 declaration is used and all prior declarations for that descriptor are
jdaggett@8198 2121 ignored.
jdaggett@512 2122
jdaggett@525 2123 <div class=example>
jdaggett@525 2124 <p>To use a downloadable font called Gentium:</p>
jdaggett@512 2125
jdaggett@512 2126 <pre>
jdaggett@525 2127 @font-face {
jdaggett@525 2128 font-family: Gentium;
jdaggett@2556 2129 src: url(http://example.com/fonts/Gentium.ttf);
jdaggett@525 2130 }
jdaggett@525 2131
jdaggett@525 2132 p { font-family: Gentium, serif; }
jdaggett@512 2133 </pre>
jdaggett@512 2134
jdaggett@573 2135 <p>The user agent will download Gentium and use it when rendering text
jdaggett@573 2136 within paragraph elements. If for some reason the site serving the font
jdaggett@573 2137 is unavailable, the default serif font will be used.</p>
jdaggett@512 2138 </div>
jdaggett@512 2139
jdaggett@7096 2140 <p>A given set of <code>@font-face</code> rules define a set of fonts
jdaggett@8198 2141 available for use within the documents that contain these rules. When font
jdaggett@8198 2142 matching is done, fonts defined using these rules are considered before
jdaggett@8198 2143 other available fonts on a system.
jdaggett@8198 2144
jdaggett@8198 2145 <p>Downloaded fonts are only available to documents that reference them.
jdaggett@8198 2146 The process of activating these fonts must not make them available to
jdaggett@2472 2147 other applications or to documents that don't directly link to the same
jdaggett@2556 2148 font. User agent implementers might consider it convenient to use
jdaggett@2472 2149 downloaded fonts when rendering characters in other documents for which no
jdaggett@2472 2150 other available font exists as part of the system font fallback procedure.
jdaggett@8198 2151 However, this would cause a security leak since the contents of one page
jdaggett@8198 2152 would be able to affect other pages, something an attacker could use as an
jdaggett@8198 2153 attack vector. These restrictions do not affect caching behavior, fonts
jdaggett@8198 2154 are cached the same way other web resources are cached.
jdaggett@8198 2155
jdaggett@8198 2156 <p>This at-rule follows the forward-compatible parsing rules of CSS. Like
jdaggett@8198 2157 properties in a declaration block, declarations of any descriptors that
jdaggett@8198 2158 are not supported by the user agent must be ignored.
jdaggett@8198 2159 <code>@font-face</code> rules require a font-family and src descriptor; if
jdaggett@8198 2160 either of these are missing, the <code>@font-face</code> rule is invalid
jdaggett@8198 2161 and must be ignored entirely.
jdaggett@1244 2162
jdaggett@1244 2163 <p>In cases where user agents have limited platform resources or implement
jdaggett@7096 2164 the ability to disable downloadable font resources,
jdaggett@7096 2165 <code>@font-face</code> rules must simply be ignored; the behavior of
jdaggett@7096 2166 individual descriptors as defined in this specification should not be
jdaggett@7096 2167 altered.
jdaggett@1662 2168
jdaggett@1662 2169 <h3 id=font-family-desc><span class=secno>4.2 </span>Font family: the <a
jdaggett@1662 2170 href="#descdef-font-family">font-family</a> descriptor</h3>
jdaggett@512 2171
jdaggett@512 2172 <table class=descdef>
jdaggett@512 2173 <tbody>
jdaggett@512 2174 <tr>
jdaggett@512 2175 <td>Name:
jdaggett@512 2176
jdaggett@1662 2177 <td><dfn id=descdef-font-family>font-family</dfn>
jdaggett@512 2178
jdaggett@512 2179 <tr>
jdaggett@512 2180 <td>Value:
jdaggett@512 2181
jdaggett@8225 2182 <td><a href="#family-name-value"><var>&lt;family-name&gt;</var></a>
jdaggett@890 2183
jdaggett@890 2184 <tr>
jdaggett@890 2185 <td><em>Initial:</em>
jdaggett@890 2186
jdaggett@890 2187 <td>N/A
jdaggett@512 2188 </table>
jdaggett@512 2189
jdaggett@525 2190 <p>This descriptor defines the font family name that will be used in all
jdaggett@8198 2191 CSS font family name matching. It is required for the @font-face rule to
jdaggett@8198 2192 be valid. It overrides the font family names contained in the underlying
jdaggett@8198 2193 font data. If the font family name is the same as a font family available
jdaggett@8198 2194 in a given user's environment, it effectively hides the underlying font
jdaggett@8198 2195 for documents that use the stylesheet. This permits a web author to freely
jdaggett@8198 2196 choose font-family names without worrying about conflicts with font family
jdaggett@8198 2197 names present in a given user's environment. Likewise, platform
jdaggett@8198 2198 substitutions for a given font family name must not be used.
jdaggett@1244 2199
jdaggett@1662 2200 <h3 id=src-desc><span class=secno>4.3 </span>Font reference: the <a
jdaggett@1662 2201 href="#descdef-src">src</a> descriptor</h3>
jdaggett@512 2202
jdaggett@512 2203 <table class=descdef>
jdaggett@512 2204 <tbody>
jdaggett@512 2205 <tr>
jdaggett@512 2206 <td>Name:
jdaggett@512 2207
jdaggett@1662 2208 <td><dfn id=descdef-src>src</dfn>
jdaggett@512 2209
jdaggett@512 2210 <tr>
jdaggett@512 2211 <td>Value:
jdaggett@512 2212
jdaggett@8225 2213 <td>[ &lt;url> [format(&lt;string> #)]? | <a
jdaggett@8225 2214 href="#font-face-name-value"><var>&lt;font-face-name&gt;</var></a> ] #
jdaggett@890 2215
jdaggett@890 2216 <tr>
jdaggett@890 2217 <td><em>Initial:</em>
jdaggett@890 2218
jdaggett@890 2219 <td>N/A
jdaggett@512 2220 </table>
jdaggett@512 2221
jdaggett@899 2222 <p>This descriptor specifies the resource containing font data. It is
jdaggett@8198 2223 required for the <code>@font-face</code> rule to be valid. Its value is a
jdaggett@8272 2224 prioritized, comma-separated list of external references or
jdaggett@8272 2225 locally-installed font face names. When a font is needed the user agent
jdaggett@8272 2226 iterates over the set of references listed, using the first one it can
jdaggett@8272 2227 successfully activate. Fonts containing invalid data or local font faces
jdaggett@8272 2228 that are not found are ignored and the user agent loads the next font in
jdaggett@8272 2229 the list.
jdaggett@8272 2230
jdaggett@8272 2231 <p>As with other URLs in CSS, the URL may be relative, in which case it is
jdaggett@1244 2232 resolved relative to the location of the style sheet containing the <span
jdaggett@8031 2233 class=index-inst id=font-face0
jdaggett@7096 2234 title="@font-face"><code>@font-face</code></span> rule. In the case of SVG
jdaggett@7096 2235 fonts, the URL points to an element within a document containing SVG font
jdaggett@7096 2236 definitions. If the element reference is omitted, a reference to the first
jdaggett@7096 2237 defined font is implied. Similarly, font container formats that can
jdaggett@7096 2238 contain more than one font must load one and only one of the fonts for a
jdaggett@7096 2239 given <code>@font-face</code> rule. Fragment identifiers are used to
jdaggett@5928 2240 indicate which font to load. If a container format lacks a defined
jdaggett@5928 2241 fragment identifier scheme, implementations should use a simple 1-based
jdaggett@5928 2242 indexing scheme (e.g. "font-collection#1" for the first font,
jdaggett@5928 2243 "font-collection#2" for the second font).
jdaggett@1244 2244
jdaggett@2527 2245 <pre>
jdaggett@2527 2246 src: url(fonts/simple.ttf); /* load simple.ttf relative to stylesheet location */
jdaggett@2527 2247 src: url(/fonts/simple.ttf); /* load simple.ttf from absolute location */
jdaggett@2527 2248 src: url(fonts.svg#simple); /* load SVG font with id 'simple' */
jdaggett@2527 2249 </pre>
jdaggett@2527 2250
jdaggett@8198 2251 <p>External references consist of a URL, followed by an optional hint
jdaggett@8198 2252 describing the format of the font resource referenced by that URL. The
jdaggett@2527 2253 format hint contains a comma-separated list of format strings that denote
jdaggett@2527 2254 well-known font formats. Conformant user agents must skip downloading a
jdaggett@2527 2255 font resource if the format hints indicate only unsupported or unknown
jdaggett@2527 2256 font formats. If no format hints are supplied, the user agent should
jdaggett@2527 2257 download the font resource.
jdaggett@2527 2258
jdaggett@2527 2259 <pre>
jdaggett@2527 2260 /* load WOFF font if possible, otherwise use OpenType font */
jdaggett@2527 2261 @font-face {
jdaggett@2527 2262 font-family: bodytext;
jdaggett@2527 2263 src: url(ideal-sans-serif.woff) format("woff"),
jdaggett@2527 2264 url(basic-sans-serif.ttf) format("opentype");
jdaggett@2527 2265 }
jdaggett@2527 2266 </pre>
jdaggett@2527 2267
jdaggett@2527 2268 <p>Format strings defined by this specification:
jdaggett@2527 2269
jdaggett@2527 2270 <table class=data id=fontformats>
jdaggett@2527 2271 <thead>
jdaggett@2527 2272 <tr>
jdaggett@2527 2273 <th>String
jdaggett@2527 2274
jdaggett@2527 2275 <th>Font Format
jdaggett@2527 2276
jdaggett@2527 2277 <th>Common extensions
jdaggett@2527 2278
jdaggett@2527 2279 <tbody>
jdaggett@2527 2280 <tr>
jdaggett@2527 2281 <th>"woff"
jdaggett@2527 2282
jdaggett@4624 2283 <td><a href="http://www.w3.org/TR/WOFF/">WOFF (Web Open Font Format)</a>
jdaggett@2527 2284
jdaggett@2527 2285 <td>.woff
jdaggett@2527 2286
jdaggett@2527 2287 <tr>
jdaggett@2527 2288 <th>"truetype"
jdaggett@2527 2289
jdaggett@4624 2290 <td><a
jdaggett@4624 2291 href="http://www.microsoft.com/typography/otspec/default.htm">TrueType</a>
jdaggett@2527 2292
jdaggett@2527 2293 <td>.ttf
jdaggett@2527 2294
jdaggett@2527 2295 <tr>
jdaggett@2527 2296 <th>"opentype"
jdaggett@2527 2297
jdaggett@4624 2298 <td><a
jdaggett@4624 2299 href="http://www.microsoft.com/typography/otspec/default.htm">OpenType</a>
jdaggett@2527 2300
jdaggett@2527 2301 <td>.ttf, .otf
jdaggett@2527 2302
jdaggett@2527 2303 <tr>
jdaggett@2527 2304 <th>"embedded-opentype"
jdaggett@2527 2305
jdaggett@4624 2306 <td><a
jdaggett@4624 2307 href="http://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded
jdaggett@4624 2308 OpenType</a>
jdaggett@2527 2309
jdaggett@2527 2310 <td>.eot
jdaggett@2527 2311
jdaggett@2527 2312 <tr>
jdaggett@2527 2313 <th>"svg"
jdaggett@2527 2314
jdaggett@4624 2315 <td><a href="http://www.w3.org/TR/SVG/fonts.html">SVG Font</a>
jdaggett@2527 2316
jdaggett@2527 2317 <td>.svg, .svgz
jdaggett@2527 2318 </table>
jdaggett@2527 2319
jdaggett@2527 2320 <p>Given the overlap in common usage between TrueType and OpenType, the
jdaggett@2527 2321 format hints "truetype" and "opentype" must be considered as synonymous; a
jdaggett@2527 2322 format hint of "opentype" does not imply that the font contains Postscript
jdaggett@2527 2323 CFF style glyph data or that it contains OpenType layout information (see
jdaggett@7377 2324 <a href="#platform-props-to-css">Appendix A</a> for more background on
jdaggett@7377 2325 this).
jdaggett@2527 2326
jdaggett@2527 2327 <p>When authors would prefer to use a locally available copy of a given
jdaggett@8198 2328 font and download it if it's not, <code>local()</code> can be used. The
jdaggett@8225 2329 locally-installed <dfn
jdaggett@8225 2330 id=font-face-name-value><var>&lt;font-face-name&gt;</var></dfn> argument
jdaggett@8272 2331 to <code>local()</code> is a format-specific string that uniquely
jdaggett@8272 2332 identifies a single font face within a larger family. The syntax for a <a
jdaggett@8225 2333 href="#font-face-name-value"><var>&lt;font-face-name&gt;</var></a> is a
jdaggett@8241 2334 unique font face name enclosed by "local(" and ")". The name can
jdaggett@8241 2335 optionally be enclosed in quotes. If unquoted, the unquoted font family
jdaggett@8241 2336 name processing conventions apply; the name must be a sequence of
jdaggett@8241 2337 identifiers separated by whitespace which is converted to a string by
jdaggett@8241 2338 joining the identifiers together separated by a single space.
jdaggett@2527 2339
jdaggett@2527 2340 <pre>
jdaggett@2527 2341 /* regular face of Gentium */
jdaggett@573 2342 @font-face {
jdaggett@2527 2343 font-family: MyGentium;
jdaggett@2527 2344 src: local(Gentium), /* use locally available Gentium */
jdaggett@2527 2345 url(Gentium.ttf); /* otherwise, download it */
jdaggett@573 2346 }
jdaggett@573 2347 </pre>
jdaggett@573 2348
jdaggett@8241 2349 <p>For OpenType and TrueType fonts, this string is used to match only the
jdaggett@8241 2350 Postscript name or the full font name in the name table of locally
jdaggett@8241 2351 available fonts. Which type of name is used varies by platform and font,
jdaggett@8241 2352 so authors should include both of these names to assure proper matching
jdaggett@8241 2353 across platforms. Platform substitutions for a given font name must not be
jdaggett@8241 2354 used.
jdaggett@2527 2355
jdaggett@2527 2356 <pre>
jdaggett@2527 2357 /* bold face of Gentium */
jdaggett@2527 2358 @font-face {
jdaggett@2527 2359 font-family: MyGentium;
jdaggett@2527 2360 src: local(Gentium Bold), /* full font name */
jdaggett@2527 2361 local(Gentium-Bold), /* Postscript name */
jdaggett@2527 2362 url(GentiumBold.ttf); /* otherwise, download it */
jdaggett@2527 2363 font-weight: bold;
jdaggett@2527 2364 }
jdaggett@2527 2365 </pre>
jdaggett@2527 2366
jdaggett@7096 2367 <p>Just as a <code>@font-face</code> rule specifies the characteristics of
jdaggett@8198 2368 a single font within a family, the unique name used with
jdaggett@8198 2369 <code>local()</code> specifies a single font, not an entire font family.
jdaggett@8198 2370 Defined in terms of OpenType font data, the Postscript name is found in
jdaggett@8198 2371 the font's <a
jdaggett@2527 2372 href="http://www.microsoft.com/typography/otspec/name.htm">name table</a>,
jdaggett@2527 2373 in the name record with nameID = 6 (see <a href="#OPENTYPE"
jdaggett@2556 2374 rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> for more details). The
jdaggett@2527 2375 Postscript name is the commonly used key for all fonts on OSX and for
jdaggett@2527 2376 Postscript CFF fonts under Windows. The full font name (nameID = 4) is
jdaggett@2527 2377 used as a unique key for fonts with TrueType glyphs on Windows.
jdaggett@2527 2378
jdaggett@2527 2379 <p>For OpenType fonts with multiple localizations of the full font name,
jdaggett@2527 2380 the US English version is used (language ID = 0x409 for Windows and
jdaggett@2527 2381 language ID = 0 for Macintosh) or the first localization when a US English
jdaggett@2527 2382 full font name is not available (the OpenType specification recommends
jdaggett@2527 2383 that <a href="http://www.microsoft.com/typography/otspec/recom.htm">all
jdaggett@2527 2384 fonts minimally include US English names</a>). User agents that also match
jdaggett@2527 2385 other full font names, e.g. matching the Dutch name when the current
jdaggett@2527 2386 system locale is set to Dutch, are considered non-conformant. This is done
jdaggett@2527 2387 not to prefer English but to avoid matching inconsistencies across font
jdaggett@2527 2388 versions and OS localizations, since font style names (e.g. "Bold") are
jdaggett@2527 2389 frequently localized into many languages and the set of localizations
jdaggett@2527 2390 available varies widely across platform and font version. User agents that
jdaggett@2527 2391 match a concatenation of family name (nameID = 1) with style name (nameID
jdaggett@2527 2392 = 2) are considered non-conformant.
jdaggett@2527 2393
jdaggett@2527 2394 <p>This also allows for referencing faces that belong to larger families
jdaggett@2527 2395 that cannot otherwise be referenced.
jdaggett@2527 2396
jdaggett@2527 2397 <div class=example>
jdaggett@525 2398 <p>Use a local font or reference an SVG font in another document:</p>
jdaggett@525 2399
jdaggett@525 2400 <pre>
jdaggett@525 2401 @font-face {
jdaggett@525 2402 font-family: Headline;
jdaggett@1148 2403 src: local(Futura-Medium),
jdaggett@1148 2404 url(fonts.svg#MyGeometricModern) format("svg");
jdaggett@525 2405 }
jdaggett@525 2406 </pre>
jdaggett@525 2407
jdaggett@525 2408 <p>Create an alias for local Japanese fonts on different platforms:</p>
jdaggett@525 2409
jdaggett@525 2410 <pre>
jdaggett@525 2411 @font-face {
jdaggett@2527 2412 font-family: jpgothic;
jdaggett@525 2413 src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic);
jdaggett@525 2414 }
jdaggett@525 2415 </pre>
jdaggett@525 2416
jdaggett@525 2417 <p>Reference a font face that cannot be matched within a larger family:</p>
jdaggett@525 2418
jdaggett@525 2419 <pre>
jdaggett@525 2420 @font-face {
jdaggett@525 2421 font-family: Hoefler Text Ornaments;
jdaggett@525 2422 /* has the same font properties as Hoefler Text Regular */
jdaggett@525 2423 src: local(HoeflerText-Ornaments);
jdaggett@525 2424 }
jdaggett@525 2425 </pre>
jdaggett@2527 2426
jdaggett@8198 2427 <p>Since localized fullnames never match, a document with the header style
jdaggett@8198 2428 rules below would always render using the default serif font, regardless
jdaggett@8198 2429 whether a particular system locale parameter is set to Finnish or not:</p>
jdaggett@1662 2430
jdaggett@1662 2431 <pre>
jdaggett@1662 2432 @font-face {
jdaggett@1662 2433 font-family: SectionHeader;
jdaggett@6653 2434 src: local("Arial Lihavoitu"); /* Finnish fullname for Arial Bold, should fail */
jdaggett@1662 2435 font-weight: bold;
jdaggett@1662 2436 }
jdaggett@1662 2437
jdaggett@1662 2438 h2 { font-family: SectionHeader, serif; }
jdaggett@1662 2439 </pre>
jdaggett@1662 2440
jdaggett@8198 2441 <p>A conformant user agent would never load the font ‘<code
jdaggett@1662 2442 class=css>gentium.eot</code>’ in the example below, since it is
jdaggett@4624 2443 included in the first definition of the ‘<a href="#descdef-src"><code
jdaggett@4624 2444 class=property>src</code></a>’ descriptor which is overridden by the
jdaggett@7096 2445 second definition in the same <code>@font-face</code> rule:</p>
jdaggett@1662 2446
jdaggett@1662 2447 <pre>
jdaggett@1662 2448 @font-face {
jdaggett@1662 2449 font-family: MainText;
jdaggett@6653 2450 src: url(gentium.eot); /* for use with older non-conformant user agents */
jdaggett@1662 2451 src: local("Gentium"), url(gentium.ttf); /* Overrides src definition */
jdaggett@1662 2452 }
jdaggett@1662 2453 </pre>
jdaggett@1662 2454 </div>
jdaggett@1662 2455
jdaggett@1662 2456 <h3 id=font-prop-desc><span class=secno>4.4 </span>Font property
jdaggett@1662 2457 descriptors: the <a href="#descdef-font-style">font-style</a>, <a
jdaggett@1662 2458 href="#descdef-font-weight">font-weight</a>, <a
jdaggett@1662 2459 href="#descdef-font-stretch">font-stretch</a> descriptors</h3>
jdaggett@518 2460
jdaggett@518 2461 <table class=descdef>
jdaggett@518 2462 <tbody>
jdaggett@518 2463 <tr>
jdaggett@518 2464 <td>Name:
jdaggett@518 2465
jdaggett@7060 2466 <td><dfn id=descdef-font-style title="font-style
jdaggett@7060 2467 (descriptor)">font-style</dfn>
jdaggett@518 2468
jdaggett@518 2469 <tr>
jdaggett@518 2470 <td>Value:
jdaggett@518 2471
jdaggett@545 2472 <td>normal | italic | oblique
jdaggett@890 2473
jdaggett@890 2474 <tr>
jdaggett@890 2475 <td><em>Initial:</em>
jdaggett@890 2476
jdaggett@890 2477 <td>normal
jdaggett@518 2478 </table>
jdaggett@518 2479
jdaggett@518 2480 <table class=descdef>
jdaggett@518 2481 <tbody>
jdaggett@518 2482 <tr>
jdaggett@518 2483 <td>Name:
jdaggett@518 2484
jdaggett@7060 2485 <td><dfn id=descdef-font-weight title="font-weight
jdaggett@7060 2486 (descriptor)">font-weight</dfn>
jdaggett@518 2487
jdaggett@518 2488 <tr>
jdaggett@518 2489 <td>Value:
jdaggett@518 2490
jdaggett@545 2491 <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
jdaggett@890 2492
jdaggett@890 2493 <tr>
jdaggett@890 2494 <td><em>Initial:</em>
jdaggett@890 2495
jdaggett@890 2496 <td>normal
jdaggett@518 2497 </table>
jdaggett@518 2498
jdaggett@518 2499 <table class=descdef>
jdaggett@518 2500 <tbody>
jdaggett@518 2501 <tr>
jdaggett@518 2502 <td>Name:
jdaggett@518 2503
jdaggett@7060 2504 <td><dfn id=descdef-font-stretch title="font-stretch
jdaggett@7060 2505 (descriptor)">font-stretch</dfn>
jdaggett@518 2506
jdaggett@518 2507 <tr>
jdaggett@518 2508 <td>Value:
jdaggett@518 2509
jdaggett@545 2510 <td>normal | ultra-condensed | extra-condensed | condensed |
jdaggett@518 2511 semi-condensed | semi-expanded | expanded | extra-expanded |
jdaggett@525 2512 ultra-expanded
jdaggett@890 2513
jdaggett@890 2514 <tr>
jdaggett@890 2515 <td><em>Initial:</em>
jdaggett@890 2516
jdaggett@890 2517 <td>normal
jdaggett@518 2518 </table>
jdaggett@518 2519
jdaggett@573 2520 <p>These descriptors define the characteristics of a font face and are used
jdaggett@573 2521 in the process of matching styles to specific faces. For a font family
jdaggett@7096 2522 defined with several <code>@font-face</code> rules, user agents can either
jdaggett@7096 2523 download all faces in the family or use these descriptors to selectively
jdaggett@7096 2524 download font faces that match actual styles used in document. The values
jdaggett@7096 2525 for these descriptors are the same as those for the corresponding font
jdaggett@7096 2526 properties except that relative keywords are not allowed, ‘<code
jdaggett@2527 2527 class=property>bolder</code>’ and ‘<code
jdaggett@2527 2528 class=property>lighter</code>’. If these descriptors are omitted,
jdaggett@8213 2529 initial values are assumed.
jdaggett@890 2530
jdaggett@890 2531 <p>The value for these font face style attributes is used in place of the
jdaggett@890 2532 style implied by the underlying font data. This allows authors to combine
jdaggett@890 2533 faces in flexible combinations, even in situations where the original font
jdaggett@890 2534 data was arranged differently. User agents that implement synthetic
jdaggett@8272 2535 bolding and obliquing must only apply synthetic styling in cases where the
jdaggett@8272 2536 font descriptors imply this is needed, rather than based on the style
jdaggett@890 2537 attributes implied by the font data.
jdaggett@573 2538
jdaggett@1662 2539 <h3 id=unicode-range-desc><span class=secno>4.5 </span>Character range: the
jdaggett@1662 2540 <a href="#descdef-unicode-range">unicode-range</a> descriptor</h3>
jdaggett@518 2541
jdaggett@518 2542 <table class=descdef>
jdaggett@518 2543 <tbody>
jdaggett@518 2544 <tr>
jdaggett@518 2545 <td>Name:
jdaggett@518 2546
jdaggett@1662 2547 <td><dfn id=descdef-unicode-range>unicode-range</dfn>
jdaggett@518 2548
jdaggett@518 2549 <tr>
jdaggett@518 2550 <td>Value:
jdaggett@518 2551
jdaggett@8225 2552 <td><a href="#urange-value"><var>&lt;urange&gt;</var></a> #
jdaggett@890 2553
jdaggett@890 2554 <tr>
jdaggett@890 2555 <td><em>Initial:</em>
jdaggett@890 2556
jdaggett@1148 2557 <td>U+0-10FFFF
jdaggett@518 2558 </table>
jdaggett@518 2559
jdaggett@8213 2560 <p>This descriptor defines the set of Unicode codepoints that may be
jdaggett@8213 2561 supported by the font face for which it is declared. The descriptor value
jdaggett@8225 2562 is a comma-delimited list of Unicode range (<a
jdaggett@8225 2563 href="#urange-value"><var>&lt;urange&gt;</var></a>) values. The union of
jdaggett@8225 2564 these ranges defines the set of codepoints that serves as a hint for user
jdaggett@8225 2565 agents when deciding whether or not to download a font resource for a
jdaggett@8225 2566 given text run.
jdaggett@8225 2567
jdaggett@8225 2568 <p>Each <dfn id=urange-value><var>&lt;urange&gt;</var></dfn> value is a <a
jdaggett@8225 2569 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code
jdaggett@8225 2570 title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token made up of a
jdaggett@8225 2571 "U+" or "u+" prefix followed by a codepoint range in one of the three
jdaggett@8241 2572 forms listed below. Ranges that do not fit one of the these forms are
jdaggett@8241 2573 invalid and cause the declaration to be ignored.
jdaggett@8241 2574
jdaggett@8241 2575 <dl>
jdaggett@8241 2576 <dt>single codepoint (e.g. U+416)
jdaggett@8241 2577
jdaggett@8241 2578 <dd>a valid Unicode codepoint, represented as one to six hexadecimal
jdaggett@8241 2579 digits
jdaggett@8241 2580
jdaggett@8246 2581 <dt>interval range (e.g. U+400-4ff)
jdaggett@8241 2582
jdaggett@8241 2583 <dd>represented as two hyphen-separated valid Unicode codepoints
jdaggett@8241 2584 indicating the inclusive start and end codepoints of a range
jdaggett@8241 2585
jdaggett@8246 2586 <dt>wildcard range (e.g. U+4??)
jdaggett@8241 2587
jdaggett@8241 2588 <dd>defined by the set of codepoints implied when trailing ‘<code
jdaggett@8246 2589 class=css>?</code>’ characters signify any hexadeximal digit
jdaggett@8241 2590 </dl>
jdaggett@573 2591
jdaggett@8213 2592 <p>Individual codepoints are written using hexadecimal values that
jdaggett@8213 2593 correspond to <a href="http://www.unicode.org/charts/">Unicode character
jdaggett@8225 2594 codepoints</a>. Valid Unicode codepoint values vary between 0 and 10FFFF
jdaggett@8225 2595 inclusive. Digit values of codepoints are ASCII case-insensitive. For
jdaggett@8225 2596 interval ranges, the start and end codepoints must be valid Unicode values
jdaggett@8225 2597 and the end codepoint must be greater than or equal to the start
jdaggett@8225 2598 codepoint.
jdaggett@8225 2599
jdaggett@8225 2600 <p>Wildcard ranges specified with ‘?’ that lack an initial digit (e.g.
jdaggett@8225 2601 "U+???") are valid and equivalent to a wildcard range with an initial zero
jdaggett@8225 2602 digit (e.g. "U+0???" = "U+0000-0FFF"). Wildcard ranges that extend beyond
jdaggett@8225 2603 the range of valid Unicode codepoints are invalid. Because of this, the
jdaggett@8225 2604 maximum number of trailing ‘<code class=css>?</code>’ wildcard
jdaggett@8272 2605 characters is five, even though the <a
jdaggett@8225 2606 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code
jdaggett@8225 2607 title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token accepts six.
jdaggett@8213 2608
jdaggett@8213 2609 <p>Within the comma-delimited list of Unicode ranges in a ‘<a
jdaggett@8213 2610 href="#descdef-unicode-range"><code
jdaggett@8213 2611 class=property>unicode-range</code></a>’ descriptor declaration, ranges
jdaggett@8241 2612 may overlap. The union of these ranges defines the set of codepoints for
jdaggett@8241 2613 which the corresponding font may be used. User agents must not download or
jdaggett@8241 2614 use the font for codepoints outside this set. User agents may normalize
jdaggett@8241 2615 the list of ranges into a list that is different but represents the same
jdaggett@8241 2616 set of codepoints.
jdaggett@8213 2617
jdaggett@8272 2618 <p>The associated font might not contain glyphs for the entire set of
jdaggett@8213 2619 codepoints defined by the ‘<a href="#descdef-unicode-range"><code
jdaggett@8213 2620 class=property>unicode-range</code></a>’ descriptor. When the font is
jdaggett@8225 2621 used the effective <a href="#character-map"><em>character map</em></a> is
jdaggett@8225 2622 the intersection of the codepoints defined by ‘<a
jdaggett@8225 2623 href="#descdef-unicode-range"><code
jdaggett@8225 2624 class=property>unicode-range</code></a>’ with the font's <a
jdaggett@8225 2625 href="#character-map"><em>character map</em></a>. This allows authors to
jdaggett@8225 2626 define supported ranges in terms of broad ranges without worrying about
jdaggett@8225 2627 the precise codepoint ranges supported by the underlying font.
jdaggett@8225 2628
jdaggett@8225 2629 <h3 id=composite-fonts><span class=secno>4.6 </span>Using character ranges
jdaggett@8225 2630 to define composite fonts</h3>
jdaggett@8225 2631
jdaggett@8225 2632 <p>Multiple <code>@font-face</code> rules with different unicode ranges for
jdaggett@8225 2633 the same family and style descriptor values can be used to create
jdaggett@8225 2634 composite fonts that mix the glyphs from different fonts for different
jdaggett@8225 2635 scripts. This can be used to combine fonts that only contain glyphs for a
jdaggett@8225 2636 single script (e.g. Latin, Greek, Cyrillic) or it can be used by authors
jdaggett@8225 2637 as a way of segmenting a font into fonts for commonly used characters and
jdaggett@8225 2638 less frequently used characters. Since the user agent will only pull down
jdaggett@8225 2639 the fonts it needs this helps reduce page bandwidth.
jdaggett@8225 2640
jdaggett@8225 2641 <p>If the unicode ranges overlap for a set of <code>@font-face</code> rules
jdaggett@8225 2642 with the same family and style descriptor values, the rules are ordered in
jdaggett@8225 2643 the reverse order they were defined; the last rule defined is the first to
jdaggett@8225 2644 be checked for a given character.
jdaggett@890 2645
jdaggett@890 2646 <p>Example ranges for specific languages or characters:
jdaggett@518 2647
jdaggett@518 2648 <dl>
jdaggett@529 2649 <dt>unicode-range: U+A5;
jdaggett@529 2650
jdaggett@1149 2651 <dd>a single code point, the yen/yuan symbol
jdaggett@529 2652
jdaggett@1148 2653 <dt>unicode-range: U+0-7F;
jdaggett@1148 2654
jdaggett@1148 2655 <dd>code range for basic ASCII characters
jdaggett@1148 2656
jdaggett@529 2657 <dt>unicode-range: U+590-5ff;
jdaggett@529 2658
jdaggett@529 2659 <dd>code range for Hebrew characters
jdaggett@529 2660
jdaggett@529 2661 <dt>unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;
jdaggett@529 2662
jdaggett@529 2663 <dd>code range for Japanese kanji, hiragana and katakana characters plus
jdaggett@529 2664 yen/yuan symbol
jdaggett@518 2665 </dl>
jdaggett@518 2666
jdaggett@529 2667 <div class=example>
jdaggett@531 2668 <p>The BBC provides news services in a wide variety of languages, many
jdaggett@7096 2669 that are not well supported across all platforms. Using an
jdaggett@7096 2670 <code>@font-face</code> rule, the BBC could provide a font for any of
jdaggett@7096 2671 these languages, as it already does via a manual font download.</p>
jdaggett@531 2672
jdaggett@531 2673 <pre>
jdaggett@531 2674 @font-face {
jdaggett@531 2675 font-family: BBCBengali;
jdaggett@531 2676 src: url(fonts/BBCBengali.ttf) format("opentype");
jdaggett@531 2677 unicode-range: U+00-FF, U+980-9FF;
jdaggett@531 2678 }
jdaggett@531 2679 </pre>
jdaggett@529 2680 </div>
jdaggett@529 2681
jdaggett@529 2682 <div class=example>
jdaggett@531 2683 <p>Technical documents often require a wide range of symbols. The STIX
jdaggett@531 2684 Fonts project is one project aimed at providing fonts to support a wide
jdaggett@531 2685 range of technical typesetting in a standardized way. The example below
jdaggett@531 2686 shows the use of a font that provides glyphs for many of the mathematical
jdaggett@531 2687 and technical symbol ranges within Unicode:</p>
jdaggett@531 2688
jdaggett@531 2689 <pre>
jdaggett@531 2690 @font-face {
jdaggett@531 2691 font-family: STIXGeneral;
jdaggett@531 2692 src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
jdaggett@531 2693 unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
jdaggett@531 2694 }
jdaggett@531 2695 </pre>
jdaggett@529 2696 </div>
jdaggett@529 2697
jdaggett@529 2698 <div class=example>
jdaggett@529 2699 <p>This example shows how an author can override the glyphs used for Latin
jdaggett@529 2700 characters in a Japanese font with glyphs from a different font. The
jdaggett@529 2701 first rule specifies no range so it defaults to the entire range. The
jdaggett@529 2702 range specified in the second rule overlaps but takes precedence because
jdaggett@529 2703 it is defined later.</p>
jdaggett@529 2704
jdaggett@529 2705 <pre>
jdaggett@529 2706 @font-face {
jdaggett@529 2707 font-family: JapaneseWithGentium;
jdaggett@529 2708 src: local(MSMincho);
jdaggett@529 2709 /* no range specified, defaults to entire range */
jdaggett@529 2710 }
jdaggett@529 2711
jdaggett@529 2712 @font-face {
jdaggett@529 2713 font-family: JapaneseWithGentium;
jdaggett@529 2714 src: url(../fonts/Gentium.ttf);
jdaggett@529 2715 unicode-range: U+0-2FF;
jdaggett@529 2716 }
jdaggett@529 2717 </pre>
jdaggett@529 2718 </div>
jdaggett@1148 2719
jdaggett@1148 2720 <div class=example>
jdaggett@1148 2721 <p>Consider a family constructed to optimize bandwidth by separating out
jdaggett@1148 2722 Latin, Japanese and other characters into different font files:</p>
jdaggett@1148 2723
jdaggett@1148 2724 <pre>
jdaggett@1148 2725 /* fallback font - size: 4.5MB */
jdaggett@1148 2726 @font-face {
jdaggett@1148 2727 font-family: DroidSans;
jdaggett@1148 2728 src: url(DroidSansFallback.ttf);
jdaggett@1148 2729 /* no range specified, defaults to entire range */
jdaggett@1148 2730 }
jdaggett@1148 2731
jdaggett@1148 2732 /* Japanese glyphs - size: 1.2MB */
jdaggett@1148 2733 @font-face {
jdaggett@1148 2734 font-family: DroidSans;
jdaggett@1148 2735 src: url(DroidSansJapanese.ttf);
jdaggett@1148 2736 unicode-range: U+3000-9FFF, U+ff??;
jdaggett@1148 2737 }
jdaggett@1148 2738
jdaggett@1148 2739 /* Latin, Greek, Cyrillic along with some
jdaggett@1148 2740 punctuation and symbols - size: 190KB */
jdaggett@1148 2741 @font-face {
jdaggett@1148 2742 font-family: DroidSans;
jdaggett@1148 2743 src: url(DroidSans.ttf);
jdaggett@1148 2744 unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
jdaggett@1148 2745 }
jdaggett@1148 2746 </pre>
jdaggett@1148 2747
jdaggett@1148 2748 <p>For simple Latin text, only the font for Latin characters is
jdaggett@1148 2749 downloaded:</p>
jdaggett@1148 2750
jdaggett@1148 2751 <pre>
jdaggett@1148 2752 body { font-family: DroidSans; }
jdaggett@1148 2753
jdaggett@1148 2754 &lt;p>This is that&lt;/p>
jdaggett@1148 2755 </pre>
jdaggett@1148 2756
jdaggett@1148 2757 <p>In this case the user agent first checks the unicode-range for the font
jdaggett@1148 2758 containing Latin characters (DroidSans.ttf). Since all the characters
jdaggett@1148 2759 above are in the range U+0-5FF, the user agent downloads the font and
jdaggett@1148 2760 renders the text with that font.</p>
jdaggett@1148 2761
jdaggett@1148 2762 <p>Next, consider text that makes use of an arrow character (⇨):</p>
jdaggett@1148 2763
jdaggett@1148 2764 <pre>
jdaggett@1148 2765 &lt;p>This &amp;#x21e8; that&lt;p>
jdaggett@1148 2766 </pre>
jdaggett@1148 2767
jdaggett@1148 2768 <p>The user agent again first checks the unicode-range of the font
jdaggett@1149 2769 containing Latin characters. Since U+2000-2300 includes the arrow code
jdaggett@1149 2770 point (U+21E8), the user agent downloads the font. For this character
jdaggett@1148 2771 however the Latin font does not have a matching glyph, so the effective
jdaggett@1149 2772 unicode-range used for font matching excludes this code point. Next, the
jdaggett@1148 2773 user agent evaluates the Japanese font. The unicode-range for the
jdaggett@1148 2774 Japanese font, U+3000-9FFF and U+ff??, does not include U+21E8, so the
jdaggett@1662 2775 user agent does not download the Japanese font. Next the fallback font is
jdaggett@7096 2776 considered. The <code>@font-face</code> rule for the fallback font does
jdaggett@7096 2777 not define unicode-range so its value defaults to the range of all
jdaggett@7096 2778 Unicode code points. The fallback font is downloaded and used to render
jdaggett@7096 2779 the arrow character.</p>
jdaggett@1148 2780 </div>
jdaggett@890 2781
jdaggett@8225 2782 <h3 id=font-rend-desc><span class=secno>4.7 </span>Font features: the <a
jdaggett@1662 2783 href="#descdef-font-variant">font-variant</a> and <a
jdaggett@1662 2784 href="#descdef-font-feature-settings">font-feature-settings</a>
jdaggett@1662 2785 descriptors</h3>
jdaggett@1662 2786
jdaggett@1662 2787 <table class=descdef>
jdaggett@1662 2788 <tbody>
jdaggett@1662 2789 <tr>
jdaggett@1662 2790 <td>Name:
jdaggett@1662 2791
jdaggett@7060 2792 <td><dfn id=descdef-font-variant title="font-variant
jdaggett@7060 2793 (descriptor)">font-variant</dfn>
jdaggett@1662 2794
jdaggett@1662 2795 <tr>
jdaggett@1662 2796 <td>Value:
jdaggett@1662 2797
jdaggett@8225 2798 <td>normal | none | [ <a
jdaggett@8225 2799 href="#common-lig-values"><var>&lt;common-lig-values&gt;</var></a> ||
jdaggett@8225 2800 <a
jdaggett@8225 2801 href="#discretionary-lig-values"><var>&lt;discretionary-lig-values&gt;</var></a>
jdaggett@8225 2802 || <a
jdaggett@8225 2803 href="#historical-lig-values"><var>&lt;historical-lig-values&gt;</var></a>
jdaggett@8225 2804 || <a
jdaggett@8225 2805 href="#contextual-alt-values"><var>&lt;contextual-alt-values&gt;</var></a>
jdaggett@8225 2806 || <a href="#stylistic"><var
jdaggett@8225 2807 title=stylistic>stylistic(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 2808 href="#historical-forms"><var>historical-forms</var></a> || <a
jdaggett@8225 2809 href="#styleset"><var
jdaggett@8225 2810 title=styleset>styleset(&lt;feature-value-name&gt; #)</var></a> || <a
jdaggett@8225 2811 href="#character-variant"><var
jdaggett@8225 2812 title=character-variant>character-variant(&lt;feature-value-name&gt;
jdaggett@8225 2813 #)</var></a> || <a href="#swash"><var
jdaggett@8225 2814 title=swash>swash(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 2815 href="#ornaments"><var
jdaggett@8225 2816 title=ornaments>ornaments(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 2817 href="#annotation"><var
jdaggett@8225 2818 title=annotation>annotation(&lt;feature-value-name&gt;)</var></a> || [
jdaggett@8225 2819 <a href="#small-caps"><i>small-caps</i></a> | <a
jdaggett@8225 2820 href="#all-small-caps"><i>all-small-caps</i></a> | <a
jdaggett@8225 2821 href="#petite-caps"><i>petite-caps</i></a> | <a
jdaggett@8225 2822 href="#all-petite-caps"><i>all-petite-caps</i></a> | <a
jdaggett@8225 2823 href="#unicase"><i>unicase</i></a> | <a
jdaggett@8225 2824 href="#titling-caps"><i>titling-caps</i></a> ] || <a
jdaggett@8225 2825 href="#numeric-figure-values"><var>&lt;numeric-figure-values&gt;</var></a>
jdaggett@8225 2826 || <a
jdaggett@8225 2827 href="#numeric-spacing-values"><var>&lt;numeric-spacing-values&gt;</var></a>
jdaggett@8225 2828 || <a
jdaggett@8225 2829 href="#numeric-fraction-values"><var>&lt;numeric-fraction-values&gt;</var></a>
jdaggett@8225 2830 || <a href="#ordinal"><i>ordinal</i></a> || <a
jdaggett@8225 2831 href="#slashed-zero"><i>slashed-zero</i></a> || <a
jdaggett@8225 2832 href="#east-asian-variant-values"><var>&lt;east-asian-variant-values&gt;</var></a>
jdaggett@8225 2833 || <a
jdaggett@8225 2834 href="#east-asian-width-values"><var>&lt;east-asian-width-values&gt;</var></a>
jdaggett@8225 2835 || <a href="#ruby"><i>ruby</i></a> ]
jdaggett@1662 2836
jdaggett@1662 2837 <tr>
jdaggett@1662 2838 <td><em>Initial:</em>
jdaggett@1662 2839
jdaggett@1662 2840 <td>normal
jdaggett@1662 2841 </table>
jdaggett@1662 2842
jdaggett@1662 2843 <table class=descdef>
jdaggett@1662 2844 <tbody>
jdaggett@1662 2845 <tr>
jdaggett@1662 2846 <td>Name:
jdaggett@1662 2847
jdaggett@7060 2848 <td><dfn id=descdef-font-feature-settings title="font-feature-settings
jdaggett@7060 2849 (descriptor)">font-feature-settings</dfn>
jdaggett@1662 2850
jdaggett@1662 2851 <tr>
jdaggett@1662 2852 <td>Value:
jdaggett@1662 2853
jdaggett@8225 2854 <td>normal | <a
jdaggett@8225 2855 href="#feature-tag-value"><var>&lt;feature-tag-value&gt;</var></a> #
jdaggett@1662 2856
jdaggett@1662 2857 <tr>
jdaggett@1662 2858 <td><em>Initial:</em>
jdaggett@1662 2859
jdaggett@1662 2860 <td>normal
jdaggett@1662 2861 </table>
jdaggett@1662 2862
jdaggett@8213 2863 <p>These descriptors define initial settings that apply when the font
jdaggett@8197 2864 defined by an <code>@font-face</code> rule is rendered. They do not affect
jdaggett@8197 2865 font selection. Values are identical to those defined for the
jdaggett@8197 2866 corresponding ‘<a href="#propdef-font-variant"><code
jdaggett@4624 2867 class=property>font-variant</code></a>’ and ‘<a
jdaggett@4624 2868 href="#propdef-font-feature-settings"><code
jdaggett@4624 2869 class=property>font-feature-settings</code></a>’ properties defined
jdaggett@4624 2870 below except that the value ‘<code class=property>inherit</code>’ is
jdaggett@4624 2871 omitted. When multiple font feature descriptors or properties are used,
jdaggett@8031 2872 the cumulative effect on text rendering is detailed in the section <a
jdaggett@8031 2873 href="#font-feature-resolution">Font Feature Resolution</a> below. In
jdaggett@8031 2874 cases where specific values define synthesized fallback for certain ‘<a
jdaggett@8031 2875 href="#propdef-font-variant"><code
jdaggett@8031 2876 class=property>font-variant</code></a>’ subproperties, the same
jdaggett@8031 2877 synthesized fallback applies when used within those values are used with
jdaggett@8031 2878 the <a href="#descdef-font-variant">‘<code
jdaggett@8031 2879 class=property>font-variant</code>’</a> descriptor.
jdaggett@1662 2880
jdaggett@8225 2881 <h3 id=font-face-loading><span class=secno>4.8 </span>Font loading
jdaggett@2563 2882 guidelines</h3>
jdaggett@2563 2883
jdaggett@7096 2884 <p>The <code>@font-face</code> rule is designed to allow lazy loading of
jdaggett@8272 2885 font resources that are only downloaded when used within a document. A
jdaggett@7096 2886 stylesheet can include <code>@font-face</code> rules for a library of
jdaggett@7096 2887 fonts of which only a select set are used; user agents must only download
jdaggett@7096 2888 those fonts that are referred to within the style rules applicable to a
jdaggett@7096 2889 given page. User agents that download all fonts defined in
jdaggett@7096 2890 <code>@font-face</code> rules without considering whether those fonts are
jdaggett@7096 2891 in fact used within a page are considered non-conformant. In cases where a
jdaggett@7096 2892 font might be downloaded in character fallback cases, user agents may
jdaggett@7096 2893 download a font if it's listed in a font list but is not actually used for
jdaggett@7096 2894 a given text run.
jdaggett@2563 2895
jdaggett@2563 2896 <pre>
jdaggett@2563 2897 @font-face {
jdaggett@2563 2898 font-family: GeometricModern;
jdaggett@2563 2899 src: url(font.ttf);
jdaggett@2563 2900 }
jdaggett@2563 2901
jdaggett@2563 2902 p {
jdaggett@2563 2903 /* font will be downloaded for pages with p elements */
jdaggett@2563 2904 font-family: GeometricModern, sans-serif;
jdaggett@2563 2905 }
jdaggett@2563 2906
jdaggett@2563 2907 h2 {
jdaggett@2563 2908 /* font may be downloaded for pages with h2 elements, even if Futura is available locally */
jdaggett@2563 2909 font-family: Futura, GeometricModern, sans-serif;
jdaggett@2563 2910 }
jdaggett@2563 2911 </pre>
jdaggett@2563 2912
jdaggett@2563 2913 <p>In cases where textual content is loaded before downloadable fonts are
jdaggett@2563 2914 available, user agents may render text as it would be rendered if
jdaggett@2563 2915 downloadable font resources are not available or they may render text
jdaggett@2563 2916 transparently with fallback fonts to avoid a flash of text using a
jdaggett@2563 2917 fallback font. In cases where the font download fails user agents must
jdaggett@2563 2918 display text, simply leaving transparent text is considered non-conformant
jdaggett@2563 2919 behavior. Authors are advised to use fallback fonts in their font lists
jdaggett@2563 2920 that closely match the vertical metrics of the downloadable fonts to avoid
jdaggett@2563 2921 large page reflows where possible.
jdaggett@2563 2922
jdaggett@8225 2923 <h3 id=same-origin-restriction><span class=secno>4.9 </span>Same-origin
jdaggett@2737 2924 restriction for fonts</h3>
jdaggett@2737 2925
jdaggett@8225 2926 <h4 id=default-same-origin-restriction><span class=secno>4.9.1
jdaggett@2740 2927 </span>Default same-origin restriction</h4>
jdaggett@7253 2928 <!-- TPAC 2011 Resolution to require same-origin restriction for loading fonts:
jdaggett@7253 2929 http://lists.w3.org/Archives/Public/www-style/2011Nov/0711.html
jdaggett@7253 2930 http://www.w3.org/2011/10/31-webapps-minutes.html#item02
jdaggett@7253 2931 -->
jdaggett@2740 2932
jdaggett@2737 2933 <p>User agents must implement a same-origin restriction when loading fonts
jdaggett@7096 2934 via the <code>@font-face</code> mechanism. This restriction limits the
jdaggett@7096 2935 loading of fonts for a given document to fonts loaded from the same
jdaggett@7096 2936 origin. Fonts can only be loaded via the same host, port, and method
jdaggett@7096 2937 combination as the containing document, using the <a
jdaggett@7179 2938 href="http://www.w3.org/TR/html5/browsers.html#origin">origin matching
jdaggett@2737 2939 algorithm</a> described in the <a href="#HTML5"
jdaggett@2737 2940 rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> specification. The origin of
jdaggett@7096 2941 the stylesheet containing <code>@font-face</code> rules is not used when
jdaggett@7096 2942 deciding whether a font is same origin or not, only the origin of the
jdaggett@7096 2943 containing document is used. The restriction applies to all font types.
jdaggett@2737 2944
jdaggett@2737 2945 <p>Given a document located at http://example.com/page.html, fonts defined
jdaggett@4624 2946 with ‘<a href="#descdef-src"><code class=property>src</code></a>’
jdaggett@2737 2947 definitions considered cross origin must not be loaded:
jdaggett@2737 2948
jdaggett@2737 2949 <pre>
jdaggett@2737 2950 /* same origin (i.e. domain, protocol, port match document) */
jdaggett@2737 2951 src: url(fonts/simple.ttf);
jdaggett@2737 2952 src: url(//fonts/simple.ttf);
jdaggett@2737 2953
jdaggett@2737 2954 /* cross origin, different protocol */
jdaggett@2737 2955 src: url(https://example.com/fonts/simple.ttf);
jdaggett@2737 2956
jdaggett@2737 2957 /* cross origin, different domain */
jdaggett@2737 2958 src: url(http://another.example.com/fonts/simple.ttf);
jdaggett@2737 2959 </pre>
jdaggett@2737 2960
jdaggett@8225 2961 <h4 id=allowing-cross-origin-font-loading><span class=secno>4.9.2
jdaggett@2740 2962 </span>Allowing cross-origin font loading</h4>
jdaggett@2740 2963
jdaggett@2737 2964 <p>User agents must also implement the ability to relax this restriction
jdaggett@2737 2965 using cross-site origin controls <a href="#CORS"
jdaggett@7253 2966 rel=biblioentry>[CORS]<!--{{!CORS}}--></a> for fonts loaded via HTTP.
jdaggett@7253 2967 Sites can explicitly allow cross-site downloading of font data using the
jdaggett@7253 2968 <code>Access-Control-Allow-Origin</code> HTTP header. For other protocols,
jdaggett@7253 2969 no explicit relaxation mechanism is defined or required.
jdaggett@7253 2970
jdaggett@7253 2971 <p>For font loads over HTTP, cross-origin requests must be made with the
jdaggett@7253 2972 following parameter settings which are used in conjunction with the <a
jdaggett@7254 2973 href="http://www.w3.org/TR/cors/#cross-origin-request-0"> <em>cross-origin
jdaggett@7254 2974 request algorithm</em></a> <a href="#CORS"
jdaggett@7254 2975 rel=biblioentry>[CORS]<!--{{!CORS}}--></a>:
jdaggett@7253 2976
jdaggett@7253 2977 <ul>
jdaggett@7253 2978 <li><em>request URL</em> — the URL of the font resource in the <a
jdaggett@7253 2979 href="#descdef-src"><code>src</code></a> descriptor
jdaggett@7253 2980
jdaggett@7253 2981 <li><em>request method</em> — GET
jdaggett@7253 2982
jdaggett@7253 2983 <li><em>author request headers</em> — none
jdaggett@7253 2984
jdaggett@7253 2985 <li><em>request entity body</em> — empty
jdaggett@7253 2986
jdaggett@7253 2987 <li><em>source origin</em> — the origin of the page which linked to the
jdaggett@7253 2988 stylesheet
jdaggett@7253 2989
jdaggett@7253 2990 <li><em>manual redirect flag</em> — false
jdaggett@7253 2991
jdaggett@7253 2992 <li><em>omit credentials flag</em> — true
jdaggett@7253 2993
jdaggett@7253 2994 <li><em>force preflight flag</em> — false
jdaggett@7253 2995 </ul>
jdaggett@2737 2996
jdaggett@6699 2997 <h2 id=font-matching-algorithm><span class=secno>5 </span>Font Matching
jdaggett@6699 2998 Algorithm</h2>
jdaggett@484 2999
jdaggett@2457 3000 <p>The algorithm below describes how fonts are associated with individual
jdaggett@2457 3001 runs of text. For each character in the run a font family is chosen and a
jdaggett@2457 3002 particular font face is selected containing a glyph for that character.
jdaggett@2457 3003
jdaggett@7309 3004 <h3 id=font-family-casing><span class=secno>5.1 </span>Case sensitivity of
jdaggett@7309 3005 font family names</h3>
jdaggett@7309 3006
jdaggett@7309 3007 <p>As part of the font matching algorithm outlined below, user agents must
jdaggett@7309 3008 match font family names used in style rules with actual font family names
jdaggett@7309 3009 contained in fonts available in a given environment or defined via
jdaggett@7309 3010 <code>@font-face</code> rules. User agents must match these names case
jdaggett@7309 3011 insensitively, using the "Default Caseless Matching" algorithm outlined in
jdaggett@7309 3012 the Unicode specification <a href="#UNICODE6"
jdaggett@7309 3013 rel=biblioentry>[UNICODE6]<!--{{!UNICODE6}}--></a>. This algorithm is
jdaggett@7309 3014 detailed in section 3.13 entitled "Default Case Algorithms". Specifically,
jdaggett@7309 3015 the algorithm must be applied without normalizing the strings involved and
jdaggett@7309 3016 without applying any language-specific tailorings. The case folding method
jdaggett@7309 3017 specified by this algorithm uses the case mappings with status field
jdaggett@7309 3018 ‘<code class=property>C</code>’ or ‘<code class=property>F</code>’
jdaggett@7309 3019 in the CaseFolding.txt file of the Unicode Character Database.
jdaggett@7355 3020
jdaggett@7355 3021 <p class=note> Implementors should take care to verify that a given
jdaggett@7355 3022 caseless string comparison implementation uses this precise algorithm and
jdaggett@7355 3023 not assume that a given platform string matching routine follows it, as
jdaggett@7355 3024 many of these have locale-specific behavior or use some level of string
jdaggett@7355 3025 normalization.
jdaggett@7355 3026
jdaggett@7355 3027 <p class=note> For authors this means that font family names are matched
jdaggett@8272 3028 case insensitively, whether those names exist in a platform font or in the
jdaggett@8272 3029 <code>@font-face</code> rules contained in a stylesheet. Authors should
jdaggett@8272 3030 take care to ensure that names use a character sequence consistent with
jdaggett@8272 3031 the actual font family name, particularly when using combining characters
jdaggett@8272 3032 such as diacritical marks. For example, a family name that contains an
jdaggett@8272 3033 uppercase A (U+0041) followed by a combining ring (U+030A) will
jdaggett@8272 3034 <strong>not</strong> match a name that looks identical but which uses the
jdaggett@8272 3035 precomposed lowercase a-ring character (U+00E5) instead of the combining
jdaggett@8272 3036 sequence.
jdaggett@7309 3037
jdaggett@7309 3038 <h3 id=font-style-matching><span class=secno>5.2 </span>Matching font
jdaggett@2457 3039 styles</h3>
jdaggett@2457 3040
jdaggett@6701 3041 <p>The procedure for choosing fonts consists of iterating over the font
jdaggett@531 3042 families determined by the font-family property, selecting a font face
jdaggett@531 3043 with the appropriate style based on other font properties and then
jdaggett@7311 3044 determining whether a glyph exists for a given character. This is done
jdaggett@7311 3045 using the <dfn id=character-map>character map</dfn> of the font, data
jdaggett@7311 3046 which maps characters to the default glyph for that character. Codepoint
jdaggett@6701 3047 sequences consisting of a base character followed by a sequence of
jdaggett@6701 3048 combining characters are treated slightly differently, see the section on
jdaggett@6701 3049 <a href="#cluster-matching">cluster matching</a> below.
jdaggett@531 3050
jdaggett@7232 3051 <p>For this procedure, the <dfn id=default-face>default face</dfn> for a
jdaggett@7232 3052 given font family is defined to be the face that would be selected if all
jdaggett@7232 3053 font style properties were set to their initial value.
jdaggett@7232 3054
jdaggett@531 3055 <ol id=fontmatchingalg>
jdaggett@2457 3056 <li>Using the computed font property values for a given element, the user
jdaggett@2457 3057 agent starts with the first family name in the fontlist specified by the
jdaggett@4624 3058 <span class=property>‘<a href="#descdef-font-family"><code
jdaggett@4624 3059 class=property>font-family</code></a>’</span> property.
jdaggett@2457 3060
jdaggett@2457 3061 <li>If the family name is unquoted and is a generic family name, the user
jdaggett@2457 3062 agent looks up the appropriate font family name to be used. User agents
jdaggett@2457 3063 may choose the generic font family to use based on the language of the
jdaggett@2457 3064 containing element or the Unicode range of the character.
jdaggett@2457 3065
jdaggett@2457 3066 <li>For other family names, the user agent attempts to find the family
jdaggett@7096 3067 name among fonts defined via <code>@font-face</code> rules and then among
jdaggett@7309 3068 available system fonts, matching names with a case-insensitive comparison
jdaggett@7309 3069 as outlined <a href="#font-family-casing">in the section above</a>. On
jdaggett@7309 3070 systems containing fonts with multiple localized font family names, user
jdaggett@7309 3071 agents must match any of these names independent of the underlying system
jdaggett@7674 3072 locale or platform API used. If the font resources defined for a given
jdaggett@7674 3073 face in an @font-face rule are either not available or contain invalid
jdaggett@7674 3074 font data, then the face should be treated as not present in the family.
jdaggett@7674 3075 If no faces are present for a family defined via @font-face rules, the
jdaggett@7674 3076 family should be treated as missing; matching a platform font with the
jdaggett@7674 3077 same name must not occur in this case.
jdaggett@2457 3078
jdaggett@2457 3079 <li>If a font family match occurs, the user agent assembles the set of
jdaggett@6701 3080 font faces in that family and then narrows the set to a single face using
jdaggett@6701 3081 other font properties in the order given below:
jdaggett@2457 3082 <ol id=fontstylematchingalg>
jdaggett@7060 3083 <li><span class=property>‘<a href="#propdef-font-stretch"><code
jdaggett@4624 3084 class=property>font-stretch</code></a>’</span> is tried first. If the
jdaggett@4624 3085 matching set contains faces with width values matching the ‘<a
jdaggett@7060 3086 href="#propdef-font-stretch"><code
jdaggett@4624 3087 class=property>font-stretch</code></a>’ value, faces with other width
jdaggett@4624 3088 values are removed from the matching set. If there is no face that
jdaggett@4624 3089 exactly matches the width value the nearest width is used instead. If
jdaggett@7060 3090 the value of ‘<a href="#propdef-font-stretch"><code
jdaggett@5809 3091 class=property>font-stretch</code></a>’ is ‘<a
jdaggett@5809 3092 href="#normal2"><code class=property>normal</code></a>’ or one of the
jdaggett@5809 3093 condensed values, narrower width values are checked first, then wider
jdaggett@7060 3094 values. If the value of ‘<a href="#propdef-font-stretch"><code
jdaggett@4624 3095 class=property>font-stretch</code></a>’ is one of the expanded
jdaggett@4624 3096 values, wider values are checked first, followed by narrower values.
jdaggett@4624 3097 Once the closest matching width has been determined by this process,
jdaggett@4624 3098 faces with other widths are removed from the matching set.
jdaggett@4624 3099
jdaggett@7060 3100 <li><span class=property>‘<a href="#propdef-font-style"><code
jdaggett@4624 3101 class=property>font-style</code></a>’</span> is tried next. If the
jdaggett@7060 3102 value of ‘<a href="#propdef-font-style"><code
jdaggett@4624 3103 class=property>font-style</code></a>’ is ‘<code
jdaggett@2457 3104 class=property>italic</code>’, italic faces are checked first, then
jdaggett@2457 3105 oblique, then normal faces. If the value is ‘<code
jdaggett@2457 3106 class=property>oblique</code>’, oblique faces are checked first, then
jdaggett@5809 3107 italic faces and then normal faces. If the value is ‘<a
jdaggett@5809 3108 href="#normal2"><code class=property>normal</code></a>’, normal faces
jdaggett@5809 3109 are checked first, then oblique faces, then italic faces. Faces with
jdaggett@5809 3110 other style values are excluded from the matching set. User agents are
jdaggett@5809 3111 permitted to distinguish between italic and oblique faces within
jdaggett@5809 3112 platform font families but this is not required, they may treat all
jdaggett@5809 3113 italic or oblique faces as italic faces. However, within font families
jdaggett@7096 3114 defined via <code>@font-face</code> rules, italic and oblique faces
jdaggett@7096 3115 must be distinguished using the value of the ‘<a
jdaggett@7060 3116 href="#propdef-font-style"><code
jdaggett@4624 3117 class=property>font-style</code></a>’ descriptor.
jdaggett@4624 3118
jdaggett@7060 3119 <li><span class=property>‘<a href="#propdef-font-weight"><code
jdaggett@4624 3120 class=property>font-weight</code></a>’</span> is matched next, it
jdaggett@4624 3121 will always reduce the matching set to a single font face. If
jdaggett@2457 3122 bolder/lighter relative weights are used, the effective weight is
jdaggett@2457 3123 calculated based on the inherited weight value, as described in the
jdaggett@7060 3124 definition of the ‘<a href="#propdef-font-weight"><code
jdaggett@4624 3125 class=property>font-weight</code></a>’ property. Given the desired
jdaggett@4624 3126 weight and the weights of faces in the matching set after the steps
jdaggett@4624 3127 above, if the desired weight is available that face matches. Otherwise,
jdaggett@4624 3128 a weight is chosen using the rules below:
jdaggett@531 3129 <ul>
jdaggett@531 3130 <li>If the desired weight is less than 400, weights below the desired
jdaggett@531 3131 weight are checked in descending order followed by weights above the
jdaggett@531 3132 desired weight in ascending order until a match is found.
jdaggett@531 3133
jdaggett@531 3134 <li>If the desired weight is greater than 500, weights above the
jdaggett@531 3135 desired weight are checked in ascending order followed by weights
jdaggett@531 3136 below the desired weight in descending order until a match is found.
jdaggett@531 3137
jdaggett@531 3138 <li>If the desired weight is 400, 500 is checked first and then the
jdaggett@531 3139 rule for desired weights less than 400 is used.
jdaggett@531 3140
jdaggett@531 3141 <li>If the desired weight is 500, 400 is checked first and then the
jdaggett@532 3142 rule for desired weights less than 400 is used.
jdaggett@531 3143 </ul>
jdaggett@531 3144
jdaggett@4624 3145 <li><span class=property>‘<a href="#propdef-font-size"><code
jdaggett@4624 3146 class=property>font-size</code></a>’</span> must be matched within a
jdaggett@4624 3147 UA-dependent margin of tolerance. (Typically, sizes for scalable fonts
jdaggett@4624 3148 are rounded to the nearest whole pixel, while the tolerance for
jdaggett@4624 3149 bitmapped fonts could be as large as 20%.) Further computations, e.g.,
jdaggett@4624 3150 by ‘<code class=property>em</code>’ values in other properties, are
jdaggett@4624 3151 based on the <span class=property>‘<a href="#propdef-font-size"><code
jdaggett@4624 3152 class=property>font-size</code></a>’</span> value that is used, not
jdaggett@4624 3153 the one that is specified.
jdaggett@531 3154 </ol>
jdaggett@531 3155
jdaggett@7232 3156 <li>
jdaggett@7232 3157 <p>If no matching face exists or the matched face does not contain a
jdaggett@7232 3158 glyph for the character to be rendered, the next family name is selected
jdaggett@7232 3159 and the previous two steps repeated. Glyphs from other faces in the
jdaggett@7232 3160 family are not considered. The only exception is that user agents may
jdaggett@7232 3161 optionally substitute a synthetic version of the <a
jdaggett@7232 3162 href="#default-face"><em>default face</em></a> if that face supports a
jdaggett@7232 3163 given glyph (e.g. a synthetic italic version of the regular face may be
jdaggett@7232 3164 used if the italic face doesn't support glyphs for Arabic).</p>
jdaggett@7242 3165 <!-- resolution on the above: http://lists.w3.org/Archives/Public/www-style/2012Nov/0292.html -->
jdaggett@7242 3166
jdaggett@7232 3167 <p>If the matched font is defined via an <code>@font-face</code> rule and
jdaggett@7232 3168 needs to be downloaded, the font resource is downloaded. While the
jdaggett@7232 3169 download occurs, the user agent can either wait until the font is
jdaggett@7232 3170 downloaded or render once with substituted font metrics and render again
jdaggett@7232 3171 once the font is downloaded.</p>
jdaggett@531 3172
jdaggett@531 3173 <li>If there are no more font families to be evaluated and no matching
jdaggett@2457 3174 face has been found, then the user agent performs a <em>system font
jdaggett@2457 3175 fallback</em> procedure to find the best match for the character to be
jdaggett@2457 3176 rendered. The result of this procedure may vary across user agents.
jdaggett@531 3177
jdaggett@531 3178 <li>If a particular character cannot be displayed using any font, the user
jdaggett@531 3179 agent should indicate by some means that a character is not being
jdaggett@2457 3180 displayed, displaying either a symbolic representation of the missing
jdaggett@2457 3181 glyph (e.g. using a <a
jdaggett@2457 3182 href="http://en.wikipedia.org/wiki/Last_resort_font">Last Resort
jdaggett@2457 3183 Font</a>) or using the missing character glyph from a default font.
jdaggett@512 3184 </ol>
jdaggett@2457 3185
jdaggett@7309 3186 <h3 id=cluster-matching><span class=secno>5.3 </span>Cluster matching</h3>
jdaggett@6701 3187
jdaggett@6701 3188 <p>When text contains characters such as combining diacritics, ideally the
jdaggett@6701 3189 base character should be rendered using the same font as the diacritic,
jdaggett@6701 3190 this assures proper placement of the diacritic. For this reason, the font
jdaggett@6701 3191 matching algorithm for clusters is more specialized than the general case
jdaggett@6701 3192 of matching a single character by itself. For sequences containing
jdaggett@6701 3193 variation selectors, which indicate the precise glyph to be used for a
jdaggett@6701 3194 given character, user agents always attempt system font fallback to find
jdaggett@6701 3195 the appropriate glyph before using the default glyph of the base
jdaggett@6701 3196 character.
jdaggett@6701 3197
jdaggett@7020 3198 <p>A font is considered to <em>support</em> a given character if (1) the
jdaggett@7311 3199 character is contained in the font's <a
jdaggett@7311 3200 href="#character-map"><em>character map</em></a> and (2) if required by
jdaggett@7020 3201 the containing script, shaping information is available for that
jdaggett@7311 3202 character. Some legacy fonts may include a given character in the <a
jdaggett@7311 3203 href="#character-map"><em>character map</em></a> but lack the shaping
jdaggett@7311 3204 information (e.g. <a
jdaggett@7020 3205 href="http://www.microsoft.com/typography/otspec/ttochap1.htm">OpenType
jdaggett@7020 3206 layout tables</a> or <a
jdaggett@7103 3207 href="http://scripts.sil.org/cms/scripts/page.php?site_id=projects&amp;item_id=graphite_techAbout">Graphite
jdaggett@7020 3208 tables</a>) necessary for correctly rendering text runs containing that
jdaggett@7020 3209 character.
jdaggett@7020 3210
jdaggett@6701 3211 <p>A sequence of codepoints containing combining diacritics or other
jdaggett@6701 3212 modifiers is termed a grapheme cluster (see <a href="#CSS3TEXT"
jdaggett@6701 3213 rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a> for a more complete
jdaggett@6701 3214 description). For a given cluster containing a base character, <em>b</em>
jdaggett@6701 3215 and a sequence of combining characters <em>c1, c2…</em>, the entire
jdaggett@6701 3216 cluster is matched using these steps:
jdaggett@6701 3217
jdaggett@6701 3218 <ol>
jdaggett@6701 3219 <li>For each family in the font list, a face is chosen using the style
jdaggett@6701 3220 selection rules defined in the previous section.
jdaggett@6701 3221 <ol>
jdaggett@7020 3222 <li>If all characters in the sequence <em>b + c1 + c2 …</em> are
jdaggett@7021 3223 completely supported by the font, select this font for the sequence.
jdaggett@6701 3224
jdaggett@6701 3225 <li>If a sequence of multiple codepoints is canonically equivalent to a
jdaggett@7021 3226 single character and the font supports that character, select this font
jdaggett@7021 3227 for the sequence.
jdaggett@6701 3228 </ol>
jdaggett@6701 3229
jdaggett@6701 3230 <li>If no font was found in the font list in step 1:
jdaggett@6701 3231 <ol>
jdaggett@6701 3232 <li>If <em>c1</em> is a variation selector, system fallback must be used
jdaggett@6701 3233 to find a font that supports the full sequence of <em>b + c1</em>. If
jdaggett@6701 3234 no font on the system supports the full sequence, match the single
jdaggett@6701 3235 character <em>b</em> using the normal procedure for matching single
jdaggett@6701 3236 characters and ignore the variation selector. Note: a sequence with
jdaggett@6701 3237 more than one variation selector is treated as an encoding error and
jdaggett@6701 3238 the trailing selectors are ignored.
jdaggett@6701 3239
jdaggett@6701 3240 <li>Otherwise, the user agent may optionally use system font fallback to
jdaggett@6701 3241 match a font that supports the entire cluster.
jdaggett@6701 3242 </ol>
jdaggett@6701 3243
jdaggett@6701 3244 <li>If no font is found in step 2, use the matching sequence from step 1
jdaggett@6701 3245 to determine the longest sequence that is completely matched by a font in
jdaggett@6701 3246 the font list and attempt to match the remaining combining characters
jdaggett@6701 3247 separately using the rules for single characters.
jdaggett@6701 3248 </ol>
jdaggett@6701 3249
jdaggett@7309 3250 <h3 id=char-handling-issues><span class=secno>5.4 </span>Character handling
jdaggett@2457 3251 issues</h3>
jdaggett@2457 3252
jdaggett@2461 3253 <p>The procedure above is always performed on text runs containing Unicode
jdaggett@2461 3254 characters, documents using legacy encodings are assumed to have been
jdaggett@7311 3255 transcoded before matching fonts. For fonts containing <a
jdaggett@7311 3256 href="#character-map"><em title="character map">character maps</em></a>
jdaggett@7311 3257 for both legacy encodings and Unicode, the contents of the legacy encoding
jdaggett@7311 3258 <a href="#character-map"><em>character map</em></a> must have no effect on
jdaggett@7311 3259 the results of the font matching process.
jdaggett@2461 3260
jdaggett@2461 3261 <p>The font matching process does not assume that text runs are in either
jdaggett@2461 3262 normalized or denormalized form (see <a href="#CHARMOD-NORM"
jdaggett@3042 3263 rel=biblioentry>[CHARMOD-NORM]<!--{{CHARMOD-NORM}}--></a> for more
jdaggett@2461 3264 details). Layout engines often convert base character plus combining
jdaggett@6701 3265 character sequences into precomposed characters if they exist. The font
jdaggett@6701 3266 matching algorithm outlined here supports both ways and fonts can
jdaggett@6701 3267 generally support either but variations can occur. Authors should always
jdaggett@6701 3268 tailor their choice of fonts to their content, including whether that
jdaggett@6701 3269 content contains normalized or denormalized character streams.
jdaggett@2457 3270
jdaggett@2457 3271 <p>If a given character is a Private-Use Area Unicode codepoint and none of
jdaggett@2457 3272 the fonts in the fontlist contain a glyph for that codepoint, user agents
jdaggett@2457 3273 must display some form of missing glyph symbol for that character rather
jdaggett@2457 3274 than attempting system font fallback for that codepoint. When matching the
jdaggett@2457 3275 replacement character U+FFFD, user agents may skip the font matching
jdaggett@2457 3276 process and immediately display some form of missing glyph symbol, they
jdaggett@2457 3277 are not required to display the glyph from the font that would be selected
jdaggett@2457 3278 by the font matching process.
jdaggett@2457 3279
jdaggett@2457 3280 <p>In general, the fonts for a given family will all have the same or
jdaggett@7311 3281 similar <a href="#character-map"><em title="character map">character
jdaggett@7311 3282 maps</em></a>. The process outlined here is designed to handle even font
jdaggett@7311 3283 families containing faces with widely variant <a href="#character-map"><em
jdaggett@7311 3284 title="character map">character maps</em></a>. However, authors are
jdaggett@7311 3285 cautioned that the use of such families can lead to unexpected results.
jdaggett@2457 3286
jdaggett@2457 3287 <p>Optimizations of this process are allowed provided that an
jdaggett@2457 3288 implementation behaves as if the algorithm had been followed exactly.
jdaggett@2457 3289 Matching occurs in a well-defined order to insure that the results are as
jdaggett@2457 3290 consistent as possible across user agents, given an identical set of
jdaggett@2509 3291 available fonts and rendering technology.
jdaggett@2509 3292
jdaggett@7309 3293 <h3 id=font-matching-changes><span class=secno>5.5 </span>Font matching
jdaggett@2509 3294 changes since CSS 2.1</h3>
jdaggett@2509 3295
jdaggett@2509 3296 <p>The algorithm above is different from CSS 2.1 in a number of key places.
jdaggett@2509 3297 These changes were made to better reflect actual font matching behavior
jdaggett@2509 3298 across user agent implementations.
jdaggett@2509 3299
jdaggett@2509 3300 <p>Differences compared to the font matching algorithm in CSS 2.1:
jdaggett@2509 3301
jdaggett@2509 3302 <ul>
jdaggett@2509 3303 <li>The algorithm includes font-stretch matching.
jdaggett@2509 3304
jdaggett@2509 3305 <li>All possible font-style matching scenarios are delineated.
jdaggett@2509 3306
jdaggett@2509 3307 <li>Small-caps fonts are not matched as part of the font matching process,
jdaggett@2509 3308 they are now handled via font features.
jdaggett@2509 3309
jdaggett@2509 3310 <li>Unicode variation selector matching is required.
jdaggett@6701 3311
jdaggett@6701 3312 <li>Cluster sequences are matched as a unit.
jdaggett@2509 3313 </ul>
jdaggett@531 3314
jdaggett@7309 3315 <h3 id=font-matching-examples><span class=secno>5.6 </span>Font matching
jdaggett@6701 3316 examples</h3>
jdaggett@6701 3317
jdaggett@531 3318 <div class=example>
jdaggett@531 3319 <p>It's useful to note that the CSS selector syntax may be used to create
jdaggett@531 3320 language-sensitive typography. For example, some Chinese and Japanese
jdaggett@1149 3321 characters are unified to have the same Unicode code point, although the
jdaggett@890 3322 abstract glyphs are not the same in the two languages.
jdaggett@531 3323
jdaggett@531 3324 <pre>*:lang(ja-jp) { font: 900 14pt/16pt &quot;Heisei Mincho W9&quot;, serif; }
jdaggett@531 3325 *:lang(zh-tw) { font: 800 14pt/16.5pt &quot;Li Sung&quot;, serif; }
jdaggett@512 3326 </pre>
jdaggett@531 3327
jdaggett@531 3328 <p>This selects any element that has the given language - Japanese or
jdaggett@890 3329 Traditional Chinese - and uses the appropriate font.
jdaggett@512 3330 </div>
jdaggett@1662 3331
jdaggett@6699 3332 <h2 id=font-rend-props><span class=secno>6 </span>Font Feature Properties</h2>
jdaggett@1662 3333
jdaggett@1856 3334 <p>Modern font technologies support a variety of advanced typographic and
jdaggett@1856 3335 language-specific font features. Using these features, a single font can
jdaggett@1856 3336 provide glyphs for a wide range of ligatures, contextual and stylistic
jdaggett@1856 3337 alternates, tabular and old-style figures, small capitals, automatic
jdaggett@1856 3338 fractions, swashes, and alternates specific to a given language. To allow
jdaggett@1856 3339 authors control over these font capabilities, the font-variant property
jdaggett@1856 3340 has been expanded for CSS3, it now functions as a shorthand for a set of
jdaggett@1856 3341 properties that provide control over stylistic font features.
jdaggett@1856 3342
jdaggett@1856 3343 <h3 id=glyph-selection-positioning><span class=secno>6.1 </span>Glyph
jdaggett@1856 3344 selection and positioning</h3>
jdaggett@1856 3345
jdaggett@1856 3346 <p>Simple fonts used for displaying Latin text use a very basic processing
jdaggett@7311 3347 model, fonts contain a <a href="#character-map"><em>character map</em></a>
jdaggett@7311 3348 which maps a given character to a glyph for that character. Glyphs for
jdaggett@7311 3349 subsequent characters are simply placed next in line along a run of text.
jdaggett@7311 3350 Font formats such as OpenType and AAT (Apple Advanced Typography) use a
jdaggett@7311 3351 richer processing model, the glyph for a given character can be chosen and
jdaggett@7311 3352 positioned not just based on a single character, but also based on
jdaggett@7311 3353 surrounding characters along with the language, script, and features
jdaggett@7311 3354 enabled for the text. Font features may be required for specific scripts,
jdaggett@7311 3355 or recommended as enabled by default or they may be stylistic features
jdaggett@7311 3356 meant to be used under author control.
jdaggett@1856 3357
jdaggett@1856 3358 <p>For a good visual overview of these features, see the <a
jdaggett@1856 3359 href="#OPENTYPE-FONT-GUIDE"
jdaggett@1856 3360 rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
jdaggett@1856 3361 For a detailed description of glyph processing for OpenType fonts, see <a
jdaggett@1856 3362 href="#WINDOWS-GLYPH-PROC"
jdaggett@1856 3363 rel=biblioentry>[WINDOWS-GLYPH-PROC]<!--{{WINDOWS-GLYPH-PROC}}--></a>.
jdaggett@1856 3364
jdaggett@6176 3365 <p>Stylistic font features can be classified into two broad categories,
jdaggett@6177 3366 ones that affect the harmonization of glyph shapes with the surrounding
jdaggett@6177 3367 context, such as kerning and ligature features, and those such as the
jdaggett@6177 3368 small-caps, subscript/superscript and alternate features that affect shape
jdaggett@6177 3369 selection.
jdaggett@6176 3370
jdaggett@1856 3371 <p>The subproperties of font-variant listed below are used to control these
jdaggett@1856 3372 stylistic font features; they do not control features that are required
jdaggett@1856 3373 for displaying certain scripts, such as the OpenType features used when
jdaggett@1856 3374 displaying Arabic or Indic language text. They affect glyph selection and
jdaggett@1856 3375 positioning, they do not affect font selection as described in the font
jdaggett@1856 3376 matching section (except in cases required for compatibility with CSS
jdaggett@1856 3377 2.1).
jdaggett@1856 3378
jdaggett@1856 3379 <p>To assure consistent behavior across user agents, the equivalent
jdaggett@1662 3380 OpenType property settings are listed for individual properties and must
jdaggett@1856 3381 be considered normative. When using other font formats these should be
jdaggett@1856 3382 used as a guideline to map CSS font feature property values to specific
jdaggett@1856 3383 font features.
jdaggett@1856 3384
jdaggett@1856 3385 <h3 id=language-specific-support><span class=secno>6.2
jdaggett@1856 3386 </span>Language-specific display</h3>
jdaggett@1856 3387
jdaggett@1856 3388 <p>OpenType also supports language-specific glyph selection and
jdaggett@1856 3389 positioning, so that text can be displayed correctly in cases where the
jdaggett@1856 3390 language dictates a specific display behavior. Languages often share a
jdaggett@1856 3391 common script but the shape of certain letters may vary across those
jdaggett@1856 3392 languages, such as the variations in certain Cyrillic letters used in
jdaggett@1856 3393 Russian and Bulgarian text. In Latin text, it's common to render "fi" with
jdaggett@1856 3394 an explicit fi-ligature that lacks a dot on the "i". However, in languages
jdaggett@1856 3395 such as Turkish which uses both a dotted-i and a dotless-i, it's important
jdaggett@1856 3396 to not use this ligature or use a specialized version that contains a dot
jdaggett@2515 3397 over the "i". The example below shows language-specific variations based
jdaggett@2515 3398 on stylistic traditions found in Spanish, Italian and French orthography:
jdaggett@2515 3399
jdaggett@2515 3400 <div class=featex><img alt="language specific forms, spanish"
jdaggett@2515 3401 src=locl-1.png></div>
jdaggett@2515 3402
jdaggett@2515 3403 <div class=featex><img alt="language specific forms, italian"
jdaggett@2515 3404 src=locl-2.png></div>
jdaggett@2515 3405
jdaggett@2515 3406 <div class=featex><img alt="language specific forms, french"
jdaggett@2515 3407 src=locl-3.png></div>
jdaggett@1856 3408
jdaggett@7355 3409 <p>If the content language of the element is known, according to the rules
jdaggett@7355 3410 of the <a
jdaggett@7355 3411 href="http://www.w3.org/TR/CSS21/conform.html#doclanguage">document
jdaggett@7355 3412 language</a>, user agents are required to infer the OpenType language
jdaggett@7355 3413 system from the content language and use that when selecting and
jdaggett@7355 3414 positioning glyphs using an OpenType font.
jdaggett@7355 3415
jdaggett@7355 3416 <p>For OpenType fonts, in some cases it may be necessary to explicitly
jdaggett@7355 3417 declare the OpenType language to be used, for example when displaying text
jdaggett@7355 3418 in a given language that uses the typographic conventions of another
jdaggett@7355 3419 language or when the font does not explicitly support a given language but
jdaggett@7355 3420 supports a language that shares common typographic conventions. The ‘<a
jdaggett@4624 3421 href="#propdef-font-language-override"><code
jdaggett@4624 3422 class=property>font-language-override</code></a>’ property is used for
jdaggett@8225 3423 this purpose.</p>
jdaggett@1662 3424 <!-- prop: font-kerning -->
jdaggett@1662 3425
jdaggett@1856 3426 <h3 id=font-kerning-prop><span class=secno>6.3 </span>Kerning: the <a
jdaggett@1662 3427 href="#propdef-font-kerning">font-kerning</a> property</h3>
jdaggett@1662 3428
jdaggett@4624 3429 <table class=propdef id=namefont-kerningvalueauto-normal-noneini>
jdaggett@1662 3430 <tbody>
jdaggett@1662 3431 <tr>
jdaggett@1662 3432 <td>Name:
jdaggett@1662 3433
jdaggett@1662 3434 <td><dfn id=propdef-font-kerning>font-kerning</dfn>
jdaggett@1662 3435
jdaggett@1662 3436 <tr>
jdaggett@1662 3437 <td>Value:
jdaggett@1662 3438
jdaggett@1856 3439 <td>auto | normal | none
jdaggett@1662 3440
jdaggett@1662 3441 <tr>
jdaggett@1662 3442 <td>Initial:
jdaggett@1662 3443
jdaggett@1856 3444 <td>auto
jdaggett@1662 3445
jdaggett@1662 3446 <tr>
jdaggett@1662 3447 <td>Applies to:
jdaggett@1662 3448
jdaggett@1662 3449 <td>all elements
jdaggett@1662 3450
jdaggett@1662 3451 <tr>
jdaggett@1662 3452 <td>Inherited:
jdaggett@1662 3453
jdaggett@1662 3454 <td>yes
jdaggett@1662 3455
jdaggett@1662 3456 <tr>
jdaggett@1662 3457 <td>Percentages:
jdaggett@1662 3458
jdaggett@1662 3459 <td>N/A
jdaggett@1662 3460
jdaggett@1662 3461 <tr>
jdaggett@1662 3462 <td>Media:
jdaggett@1662 3463
jdaggett@1662 3464 <td>visual
jdaggett@1662 3465
jdaggett@1662 3466 <tr>
jdaggett@1662 3467 <td>Computed value:
jdaggett@1662 3468
jdaggett@1662 3469 <td>as specified
jdaggett@7377 3470
jdaggett@7377 3471 <tr>
jdaggett@7377 3472 <td>Animatable:
jdaggett@7377 3473
jdaggett@7377 3474 <td>no
jdaggett@1662 3475 </table>
jdaggett@1662 3476
jdaggett@2509 3477 <p>Kerning is the contextual adjustment of inter-glyph spacing. This
jdaggett@2509 3478 property controls metric kerning, kerning that utilizes adjustment data
jdaggett@8276 3479 contained in the font.
jdaggett@8276 3480
jdaggett@8276 3481 <dl>
jdaggett@8276 3482 <dt>auto
jdaggett@8276 3483
jdaggett@8276 3484 <dd>Specifies that kerning is applied at the discretion of the user agent
jdaggett@8276 3485
jdaggett@8276 3486 <dt>normal
jdaggett@8276 3487
jdaggett@8276 3488 <dd>Specifies that kerning is applied
jdaggett@8276 3489
jdaggett@8276 3490 <dt>none
jdaggett@8276 3491
jdaggett@8276 3492 <dd>Specifies that kerning is not applied
jdaggett@8276 3493 </dl>
jdaggett@1662 3494
jdaggett@1662 3495 <p>For fonts that do not include kerning data this property will have no
jdaggett@1662 3496 visible effect. When rendering with OpenType fonts, the <a
jdaggett@1662 3497 href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>
jdaggett@2515 3498 specification suggests that kerning be enabled by default. When kerning is
jdaggett@6436 3499 enabled, the OpenType <span class=tag>kern</span> feature is enabled (for
jdaggett@8276 3500 vertical text runs the <span class=tag>vkrn</span> feature is enabled
jdaggett@8276 3501 instead). User agents must also support fonts that only support kerning
jdaggett@8276 3502 via data contained in a <span class=tag>kern</span> font table, as
jdaggett@8276 3503 detailed in the OpenType specification. If the ‘<code
jdaggett@8276 3504 class=property>letter-spacing</code>’ property is defined, kerning
jdaggett@8276 3505 adjustments are considered part of the default spacing and letter spacing
jdaggett@8276 3506 adjustments are made after kerning has been applied.
jdaggett@8276 3507
jdaggett@8276 3508 <p>When set to ‘<code class=property>auto</code>’, user agents can
jdaggett@8276 3509 determine whether to apply kerning or not based on a number of factors:
jdaggett@8276 3510 text size, script, or other factors that influence text processing speed.
jdaggett@8276 3511 Authors who want proper kerning should use ‘<a href="#normal2"><code
jdaggett@8276 3512 class=property>normal</code></a>’ to explicitly enable kerning.
jdaggett@8276 3513 Likewise, some authors may prefer to disable kerning in situations where
jdaggett@8276 3514 performance is more important than precise appearance. However, in
jdaggett@8276 3515 well-designed modern implementations the use of kerning generally does not
jdaggett@8276 3516 have a large impact on text rendering speed.</p>
jdaggett@6176 3517 <!-- prop: font-variant-ligatures -->
jdaggett@6176 3518
jdaggett@6176 3519 <h3 id=font-variant-ligatures-prop><span class=secno>6.4 </span>Ligatures:
jdaggett@6176 3520 the <a href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
jdaggett@6176 3521 property</h3>
jdaggett@6176 3522
jdaggett@6436 3523 <table class=propdef id=namefont-variant-ligaturesvaluenormal-no>
jdaggett@6176 3524 <tbody>
jdaggett@6176 3525 <tr>
jdaggett@6176 3526 <td>Name:
jdaggett@6176 3527
jdaggett@6176 3528 <td><dfn id=propdef-font-variant-ligatures>font-variant-ligatures</dfn>
jdaggett@6176 3529
jdaggett@6176 3530 <tr>
jdaggett@6176 3531 <td>Value:
jdaggett@6176 3532
jdaggett@8225 3533 <td>normal | none | [ <a
jdaggett@8225 3534 href="#common-lig-values"><var>&lt;common-lig-values&gt;</var></a> ||
jdaggett@8225 3535 <a
jdaggett@8225 3536 href="#discretionary-lig-values"><var>&lt;discretionary-lig-values&gt;</var></a>
jdaggett@8225 3537 || <a
jdaggett@8225 3538 href="#historical-lig-values"><var>&lt;historical-lig-values&gt;</var></a>
jdaggett@8225 3539 || <a
jdaggett@8225 3540 href="#contextual-alt-values"><var>&lt;contextual-alt-values&gt;</var></a>
jdaggett@8225 3541 ]
jdaggett@6176 3542
jdaggett@6176 3543 <tr>
jdaggett@6176 3544 <td>Initial:
jdaggett@6176 3545
jdaggett@6176 3546 <td>normal
jdaggett@6176 3547
jdaggett@6176 3548 <tr>
jdaggett@6176 3549 <td>Applies to:
jdaggett@6176 3550
jdaggett@6176 3551 <td>all elements
jdaggett@6176 3552
jdaggett@6176 3553 <tr>
jdaggett@6176 3554 <td>Inherited:
jdaggett@6176 3555
jdaggett@6176 3556 <td>yes
jdaggett@6176 3557
jdaggett@6176 3558 <tr>
jdaggett@6176 3559 <td>Percentages:
jdaggett@6176 3560
jdaggett@6176 3561 <td>N/A
jdaggett@6176 3562
jdaggett@6176 3563 <tr>
jdaggett@6176 3564 <td>Media:
jdaggett@6176 3565
jdaggett@6176 3566 <td>visual
jdaggett@6176 3567
jdaggett@6176 3568 <tr>
jdaggett@6176 3569 <td>Computed value:
jdaggett@6176 3570
jdaggett@6176 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@6176 3577 </table>
jdaggett@6176 3578
jdaggett@6436 3579 <p>Ligatures and contextual forms are ways of combining glyphs to produce
jdaggett@8276 3580 more harmonized forms.
jdaggett@6176 3581
jdaggett@6176 3582 <pre
jdaggett@8225 3583 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 3584
jdaggett@6176 3585 <pre
jdaggett@8225 3586 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 3587
jdaggett@6176 3588 <pre
jdaggett@8225 3589 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 3590
jdaggett@6176 3591 <pre
jdaggett@8225 3592 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 3593
jdaggett@6176 3594 <p>Individual values have the following meanings:
jdaggett@6176 3595
jdaggett@6176 3596 <dl>
jdaggett@8276 3597 <dt><dfn id=font-variant-ligatures-normal-value
jdaggett@8276 3598 title="font-variant-ligatures normal value">normal</dfn>
jdaggett@8276 3599
jdaggett@8276 3600 <dd>A value of ‘<a href="#normal2"><code
jdaggett@8276 3601 class=property>normal</code></a>’ specifies that common default
jdaggett@8276 3602 features are enabled, <a href="#font-feature-resolution">as described in
jdaggett@8276 3603 detail in the next section</a>. For OpenType fonts, common ligatures and
jdaggett@8276 3604 contextual forms are on by default, discretionary and historical
jdaggett@8276 3605 ligatures are not.
jdaggett@8276 3606
jdaggett@8276 3607 <dt><dfn id=font-variant-ligatures-none-value>none</dfn>
jdaggett@8276 3608
jdaggett@8276 3609 <dd>Specifies that all types of ligatures and contextual forms covered by
jdaggett@8276 3610 this property are explicitly disabled. In situations where ligatures are
jdaggett@8276 3611 not considered necessary, this may improve the speed of text rendering.
jdaggett@8276 3612
jdaggett@6176 3613 <dt><dfn id=common-ligatures>common-ligatures</dfn>
jdaggett@6176 3614
jdaggett@6436 3615 <dd>Enables display of common ligatures (OpenType features: <span
jdaggett@6436 3616 class=tag>liga, clig</span>). For OpenType fonts, common ligatures are
jdaggett@6436 3617 enabled by default.
jdaggett@6176 3618 </dl>
jdaggett@6176 3619
jdaggett@6176 3620 <div class=featex><img alt="common ligature example" src=liga.png></div>
jdaggett@6176 3621
jdaggett@6176 3622 <dl>
jdaggett@6176 3623 <dt><dfn id=no-common-ligatures>no-common-ligatures</dfn>
jdaggett@6176 3624
jdaggett@6436 3625 <dd>Disables display of common ligatures (OpenType features: <span
jdaggett@6436 3626 class=tag>liga, clig</span>).
jdaggett@6176 3627
jdaggett@6176 3628 <dt><dfn id=discretionary-ligatures>discretionary-ligatures</dfn>
jdaggett@6176 3629
jdaggett@6436 3630 <dd>Enables display of discretionary ligatures (OpenType feature: <span
jdaggett@6436 3631 class=tag>dlig</span>). Which ligatures are discretionary, or optional,
jdaggett@6436 3632 is decided by the type designer so authors will need to refer to the
jdaggett@6176 3633 documentation of a given font to understand which ligatures are
jdaggett@6176 3634 considered discretionary.
jdaggett@6176 3635 </dl>
jdaggett@6176 3636
jdaggett@6176 3637 <div class=featex><img alt="discretionary ligature example" src=dlig.png></div>
jdaggett@6176 3638
jdaggett@6176 3639 <dl>
jdaggett@6176 3640 <dt><dfn id=no-discretionary-ligatures>no-discretionary-ligatures</dfn>
jdaggett@6176 3641
jdaggett@6436 3642 <dd>Disables display of discretionary ligatures (OpenType feature: <span
jdaggett@6436 3643 class=tag>dlig</span>).
jdaggett@6176 3644
jdaggett@6176 3645 <dt><dfn id=historical-ligatures>historical-ligatures</dfn>
jdaggett@6176 3646
jdaggett@6436 3647 <dd>Enables display of historical ligatures (OpenType feature: <span
jdaggett@6436 3648 class=tag>hlig</span>).
jdaggett@6176 3649 </dl>
jdaggett@6176 3650
jdaggett@6176 3651 <div class=featex><img alt="historical ligature example" src=hlig.png></div>
jdaggett@6176 3652
jdaggett@6176 3653 <dl>
jdaggett@6176 3654 <dt><dfn id=no-historical-ligatures>no-historical-ligatures</dfn>
jdaggett@6176 3655
jdaggett@6436 3656 <dd>Disables display of historical ligatures (OpenType feature: <span
jdaggett@6436 3657 class=tag>hlig</span>).
jdaggett@6176 3658
jdaggett@6176 3659 <dt><dfn id=contextual>contextual</dfn>
jdaggett@6176 3660
jdaggett@6436 3661 <dd>Enables display of contextual alternates (OpenType feature: <span
jdaggett@6436 3662 class=tag>calt</span>). Although not strictly a ligature feature, like
jdaggett@6176 3663 ligatures this feature is commonly used to harmonize the shapes of glyphs
jdaggett@6436 3664 with the surrounding context. For OpenType fonts, this feature is on by
jdaggett@6436 3665 default.
jdaggett@6176 3666 </dl>
jdaggett@6176 3667
jdaggett@6176 3668 <div class=featex><img alt="contextual alternate example" src=calt.png></div>
jdaggett@6176 3669
jdaggett@6176 3670 <dl>
jdaggett@6176 3671 <dt><dfn id=no-contextual>no-contextual</dfn>
jdaggett@6176 3672
jdaggett@6436 3673 <dd>Disables display of contextual alternates (OpenType feature: <span
jdaggett@6436 3674 class=tag>calt</span>).
jdaggett@6176 3675 </dl>
jdaggett@6176 3676
jdaggett@6176 3677 <p>Required ligatures, needed for correctly rendering complex scripts, are
jdaggett@8276 3678 not affected by the settings above, including ‘<a
jdaggett@8276 3679 href="#font-variant-ligatures-none-value"><code
jdaggett@8276 3680 class=property>none</code></a>’ (OpenType feature: <span
jdaggett@6436 3681 class=tag>rlig</span>).</p>
jdaggett@3460 3682 <!-- prop: font-variant-position -->
jdaggett@3460 3683
jdaggett@6176 3684 <h3 id=font-variant-position-prop><span class=secno>6.5 </span>Subscript
jdaggett@3638 3685 and superscript forms: the <a
jdaggett@3460 3686 href="#propdef-font-variant-position">font-variant-position</a> property</h3>
jdaggett@3460 3687
jdaggett@4624 3688 <table class=propdef id=namefont-variant-positionvaluenormal-sub>
jdaggett@1662 3689 <tbody>
jdaggett@1662 3690 <tr>
jdaggett@1662 3691 <td>Name:
jdaggett@1662 3692
jdaggett@3460 3693 <td><dfn id=propdef-font-variant-position>font-variant-position</dfn>
jdaggett@1662 3694
jdaggett@1662 3695 <tr>
jdaggett@1662 3696 <td>Value:
jdaggett@1662 3697
jdaggett@3638 3698 <td>normal | sub | super
jdaggett@1732 3699
jdaggett@1732 3700 <tr>
jdaggett@1732 3701 <td>Initial:
jdaggett@1732 3702
jdaggett@1732 3703 <td>normal
jdaggett@1732 3704
jdaggett@1732 3705 <tr>
jdaggett@1732 3706 <td>Applies to:
jdaggett@1732 3707
jdaggett@1732 3708 <td>all elements
jdaggett@1732 3709
jdaggett@1732 3710 <tr>
jdaggett@1732 3711 <td>Inherited:
jdaggett@1732 3712
jdaggett@1732 3713 <td>yes
jdaggett@1732 3714
jdaggett@1732 3715 <tr>
jdaggett@1732 3716 <td>Percentages:
jdaggett@1732 3717
jdaggett@1732 3718 <td>N/A
jdaggett@1732 3719
jdaggett@1732 3720 <tr>
jdaggett@1732 3721 <td>Media:
jdaggett@1732 3722
jdaggett@1732 3723 <td>visual
jdaggett@1732 3724
jdaggett@1732 3725 <tr>
jdaggett@1732 3726 <td>Computed value:
jdaggett@1732 3727
jdaggett@1732 3728 <td>as specified
jdaggett@7377 3729
jdaggett@7377 3730 <tr>
jdaggett@7377 3731 <td>Animatable:
jdaggett@7377 3732
jdaggett@7377 3733 <td>no
jdaggett@1732 3734 </table>
jdaggett@1732 3735
jdaggett@5890 3736 <p>This property is used to enable typographic subscript and superscript
jdaggett@5890 3737 glyphs. These are alternate glyphs designed within the same em-box as
jdaggett@5890 3738 default glyphs and are intended to be laid out on the same baseline as the
jdaggett@5890 3739 default glyphs, with no resizing or repositioning of the baseline. They
jdaggett@5890 3740 are explicitly designed to match the surrounding text and to be more
jdaggett@5890 3741 readable without affecting the line height.
jdaggett@3511 3742
jdaggett@3511 3743 <div class=figure><img alt="comparison between real subscript glyphs and
jdaggett@3511 3744 synthesized ones" src=realsubscripts.png>
jdaggett@3511 3745 <p class=caption>Subscript glyphs (top) vs. typical synthesized subscripts
jdaggett@3511 3746 (bottom)
jdaggett@3511 3747 </div>
jdaggett@3460 3748
jdaggett@3638 3749 <p>The values ‘<code class=property>sub</code>’ and ‘<code
jdaggett@3638 3750 class=property>super</code>’ imply the appropriate variant glyph is
jdaggett@6436 3751 displayed when available in the font (OpenType features: <span
jdaggett@6436 3752 class=tag>subs, sups</span>). A value of ‘<a href="#normal2"><code
jdaggett@8276 3753 class=property>normal</code></a>’ specifies neither of these alternate
jdaggett@5890 3754 glyphs are substituted.
jdaggett@5890 3755
jdaggett@5890 3756 <p>Because of the semantic nature of subscripts and superscripts, when the
jdaggett@5890 3757 value is either ‘<code class=property>sub</code>’ or ‘<code
jdaggett@8177 3758 class=property>super</code>’ for a given contiguous run of text, if a
jdaggett@8177 3759 variant glyph is not available for all the characters in the run,
jdaggett@8177 3760 simulated glyphs must be synthesized for all characters using reduced
jdaggett@8177 3761 forms of the glyphs that would be used without this feature applied. This
jdaggett@8177 3762 is done to avoid a mixture of variant glyphs and synthesized ones that
jdaggett@8177 3763 would not align correctly.
jdaggett@3460 3764
jdaggett@3460 3765 <p>In the case of OpenType fonts that lack subscript or superscript glyphs
jdaggett@5891 3766 for a given character, user agents must use the appropriate subscript and
jdaggett@5891 3767 superscript metrics specified in the selected font's <a
jdaggett@3460 3768 href="http://www.microsoft.com/typography/otspec/os2.htm#subxs">OS/2
jdaggett@3460 3769 table</a> <a href="#OPENTYPE"
jdaggett@5891 3770 rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> to calculate the size
jdaggett@5891 3771 and offset of the synthesized substitutes.
jdaggett@2461 3772
jdaggett@2461 3773 <p>In the past, user agents have used font-size and vertical-align to
jdaggett@6436 3774 simulate subscripts and superscripts for the <span class=tag>sub</span>
jdaggett@6436 3775 and <span class=tag>sup</span> elements. To allow a backwards compatible
jdaggett@6436 3776 way of defining subscripts and superscripts, it is recommended that
jdaggett@6436 3777 authors use conditional rules <a href="#CSS3-CONDITIONAL"
jdaggett@3460 3778 rel=biblioentry>[CSS3-CONDITIONAL]<!--{{CSS3-CONDITIONAL}}--></a> so that
jdaggett@5890 3779 older user agents will still render subscripts and superscripts via the
jdaggett@5890 3780 older mechanism.
jdaggett@5890 3781
jdaggett@5890 3782 <p>Authors should note that fonts typically only provide subscript and
jdaggett@5890 3783 superscript glyphs for a subset of all characters supported by the font.
jdaggett@5891 3784 While subscript and superscript glyphs are often available for Latin
jdaggett@5891 3785 numbers, glyphs for punctuation and letter characters are less frequently
jdaggett@5891 3786 provided. The synthetic fallback rules defined for this property assure
jdaggett@5891 3787 that subscripts and superscripts will always appear but the appearance may
jdaggett@5891 3788 not match author expectations if the font used does not provide the
jdaggett@5891 3789 appropriate alternate glyph for all characters contained in a subscript or
jdaggett@5890 3790 superscript.
jdaggett@5890 3791
jdaggett@5890 3792 <div class=figure><img alt="alternate superscripts vs. glyphs synthesized
jdaggett@5890 3793 using superscript metrics" src=superscript-alt-synth.png>
jdaggett@5890 3794 <p class=caption>Superscript alternate glyph (left), synthesized
jdaggett@5890 3795 superscript glyphs (middle), and incorrect mixture of the two (right)
jdaggett@5890 3796 </div>
jdaggett@5890 3797
jdaggett@5890 3798 <p>This property is not cumulative, applying it to subelements within a
jdaggett@5890 3799 subscript or superscript won't nest the placement of a subscript or
jdaggett@5890 3800 superscript glyph. Images contained within text runs where the value of
jdaggett@5890 3801 this property is ‘<code class=property>sub</code>’ or ‘<code
jdaggett@5890 3802 class=property>super</code>’ will be drawn just as they would if the
jdaggett@5890 3803 value was ‘<a href="#normal2"><code class=property>normal</code></a>’.
jdaggett@5890 3804 Likewise, text decorations such as underlines or emphasis marks will
jdaggett@5890 3805 render in the same position as they would for the default glyphs, since
jdaggett@5890 3806 this property does not affect the baseline position.
jdaggett@5890 3807
jdaggett@5890 3808 <p>Because of these limitations, font-variant-position is not recommended
jdaggett@5890 3809 for use in user agent stylesheets. Authors should use it in cases where
jdaggett@5890 3810 subscripts or superscripts will only contain the narrow range of
jdaggett@5890 3811 characters supported by the fonts specified.
jdaggett@2509 3812
jdaggett@2461 3813 <div class=example>
jdaggett@6436 3814 <p>A typical user agent default style for the <span class=tag>sub</span>
jdaggett@6436 3815 element:</p>
jdaggett@2461 3816
jdaggett@2461 3817 <pre>sub {
jdaggett@2461 3818 vertical-align: sub;
jdaggett@2461 3819 font-size: smaller;
jdaggett@2461 3820 line-height: normal;
jdaggett@2461 3821 }
jdaggett@2461 3822 </pre>
jdaggett@2461 3823
jdaggett@3460 3824 <p>Using font-variant-position to specify typographic subscripts in a way
jdaggett@3460 3825 that will still show subscripts in older user agents:</p>
jdaggett@3460 3826
jdaggett@3460 3827 <pre>@supports ( font-variant-position: sub ) {
jdaggett@3460 3828
jdaggett@3460 3829 sub {
jdaggett@3460 3830 vertical-align: inherit;
jdaggett@3460 3831 font-size: 100%;
jdaggett@3460 3832 line-height: inherit;
jdaggett@3460 3833 font-variant-position: sub;
jdaggett@3460 3834 }
jdaggett@3460 3835
jdaggett@2461 3836 }
jdaggett@2461 3837 </pre>
jdaggett@2461 3838
jdaggett@4624 3839 <p>User agents that support the ‘<a
jdaggett@4624 3840 href="#propdef-font-variant-position"><code
jdaggett@4624 3841 class=property>font-variant-position</code></a>’ property will select a
jdaggett@4624 3842 subscript variant glyph and render this without adjusting the baseline or
jdaggett@4624 3843 font-size. Older user agents will ignore the ‘<a
jdaggett@4624 3844 href="#propdef-font-variant-position"><code
jdaggett@4624 3845 class=property>font-variant-position</code></a>’ property definition
jdaggett@4624 3846 and use the standard defaults for subscripts.</p>
jdaggett@2461 3847 </div>
jdaggett@2118 3848 <!-- prop: font-variant-caps -->
jdaggett@2118 3849
jdaggett@2118 3850 <h3 id=font-variant-caps-prop><span class=secno>6.6 </span>Capitalization:
jdaggett@1662 3851 the <a href="#propdef-font-variant-caps">font-variant-caps</a> property</h3>
jdaggett@1662 3852
jdaggett@5809 3853 <table class=propdef id=namefont-variant-capsvaluenormal-small-c>
jdaggett@1662 3854 <tbody>
jdaggett@1662 3855 <tr>
jdaggett@1662 3856 <td>Name:
jdaggett@1662 3857
jdaggett@1662 3858 <td><dfn id=propdef-font-variant-caps>font-variant-caps</dfn>
jdaggett@1662 3859
jdaggett@1662 3860 <tr>
jdaggett@1662 3861 <td>Value:
jdaggett@1662 3862
jdaggett@5809 3863 <td>normal | small-caps | all-small-caps | petite-caps | all-petite-caps
jdaggett@6648 3864 | unicase | titling-caps
jdaggett@1662 3865
jdaggett@1662 3866 <tr>
jdaggett@1662 3867 <td>Initial:
jdaggett@1662 3868
jdaggett@1662 3869 <td>normal
jdaggett@1662 3870
jdaggett@1662 3871 <tr>
jdaggett@1662 3872 <td>Applies to:
jdaggett@1662 3873
jdaggett@1662 3874 <td>all elements
jdaggett@1662 3875
jdaggett@1662 3876 <tr>
jdaggett@1662 3877 <td>Inherited:
jdaggett@1662 3878
jdaggett@1662 3879 <td>yes
jdaggett@1662 3880
jdaggett@1662 3881 <tr>
jdaggett@1662 3882 <td>Percentages:
jdaggett@1662 3883
jdaggett@1662 3884 <td>N/A
jdaggett@1662 3885
jdaggett@1662 3886 <tr>
jdaggett@1662 3887 <td>Media:
jdaggett@1662 3888
jdaggett@1662 3889 <td>visual
jdaggett@1662 3890
jdaggett@1662 3891 <tr>
jdaggett@1662 3892 <td>Computed value:
jdaggett@1662 3893
jdaggett@1662 3894 <td>as specified
jdaggett@7377 3895
jdaggett@7377 3896 <tr>
jdaggett@7377 3897 <td>Animatable:
jdaggett@7377 3898
jdaggett@7377 3899 <td>no
jdaggett@1662 3900 </table>
jdaggett@1662 3901
jdaggett@1662 3902 <p>Specifies control over capitalized forms.
jdaggett@1662 3903
jdaggett@1732 3904 <p>Individual values have the following meanings:
jdaggett@1662 3905
jdaggett@1662 3906 <dl>
jdaggett@5809 3907 <dt><dfn id=normal>normal</dfn>
jdaggett@5809 3908
jdaggett@5809 3909 <dd>None of the features listed below are enabled.
jdaggett@5809 3910
jdaggett@1662 3911 <dt><dfn id=small-caps>small-caps</dfn>
jdaggett@1662 3912
jdaggett@6436 3913 <dd>Enables display of small capitals (OpenType feature: <span
jdaggett@6436 3914 class=tag>smcp</span>). Small-caps glyphs typically use the form of
jdaggett@6436 3915 uppercase letters but are reduced to the size of lowercase letters.
jdaggett@1662 3916 </dl>
jdaggett@1662 3917
jdaggett@1662 3918 <div class=featex><img alt="small-caps example" src=smcp.png></div>
jdaggett@1662 3919
jdaggett@1662 3920 <dl>
jdaggett@1732 3921 <dt><dfn id=all-small-caps>all-small-caps</dfn>
jdaggett@1732 3922
jdaggett@1732 3923 <dd>Enables display of small capitals for both upper and lowercase letters
jdaggett@6436 3924 (OpenType features: <span class=tag>c2sc, smcp</span>).
jdaggett@1732 3925
jdaggett@1662 3926 <dt><dfn id=petite-caps>petite-caps</dfn>
jdaggett@1662 3927
jdaggett@6436 3928 <dd>Enables display of petite capitals (OpenType feature: <span
jdaggett@6436 3929 class=tag>pcap</span>).
jdaggett@1662 3930
jdaggett@1732 3931 <dt><dfn id=all-petite-caps>all-petite-caps</dfn>
jdaggett@1732 3932
jdaggett@1732 3933 <dd>Enables display of petite capitals for both upper and lowercase
jdaggett@6436 3934 letters (OpenType features: <span class=tag>c2pc, pcap</span>).
jdaggett@1732 3935
jdaggett@6648 3936 <dt><dfn id=unicase>unicase</dfn>
jdaggett@6648 3937
jdaggett@6648 3938 <dd>Enables display of mixture of small capitals for uppercase letters
jdaggett@6648 3939 with normal lowercase letters (OpenType feature: <span
jdaggett@6648 3940 class=tag>unic</span>).
jdaggett@6648 3941
jdaggett@1662 3942 <dt><dfn id=titling-caps>titling-caps</dfn>
jdaggett@1662 3943
jdaggett@6436 3944 <dd>Enables display of titling capitals (OpenType feature: <span
jdaggett@6436 3945 class=tag>titl</span>). Uppercase letter glyphs are often designed for
jdaggett@6436 3946 use with lowercase letters. When used in all uppercase titling sequences
jdaggett@6436 3947 they can appear too strong. Titling capitals are designed specifically
jdaggett@6436 3948 for this situation.
jdaggett@1662 3949 </dl>
jdaggett@1662 3950
jdaggett@6648 3951 <p>This property allows the selection of alternate glyphs used for small or
jdaggett@6648 3952 petite capitals or for titling. These glyphs are specifically designed to
jdaggett@6648 3953 blend well with the surrounding normal glyphs, to maintain the weight and
jdaggett@6648 3954 readability which suffers when text is simply resized to fit this purpose.
jdaggett@6648 3955
jdaggett@6648 3956 <p>The availability of these glyphs is based on whether a given feature is
jdaggett@6648 3957 defined or not in the feature list of the font. User agents can optionally
jdaggett@6648 3958 decide this on a per-script basis but should explicitly not decide this on
jdaggett@6648 3959 a per-character basis.
jdaggett@6648 3960
jdaggett@6648 3961 <p>Some fonts may only support a subset or none of the features described
jdaggett@6648 3962 for this property. For backwards compatibility with CSS 2.1, if ‘<a
jdaggett@4624 3963 href="#small-caps"><code class=property>small-caps</code></a>’ or ‘<a
jdaggett@4624 3964 href="#all-small-caps"><code class=property>all-small-caps</code></a>’
jdaggett@4624 3965 is specified but small-caps glyphs are not available for a given font,
jdaggett@4624 3966 user agents should simulate a small-caps font, for example by taking a
jdaggett@6648 3967 normal font and replacing the glyphs for lowercase letters with scaled
jdaggett@6648 3968 versions of the glyphs for uppercase characters (replacing the glyphs for
jdaggett@6648 3969 both upper and lowercase letters in the case of ‘<a
jdaggett@4624 3970 href="#all-small-caps"><code class=property>all-small-caps</code></a>’).
jdaggett@6648 3971
jdaggett@6648 3972 <div class=figure style="padding: 0; margin: auto;"><img alt="synthetic vs.
jdaggett@6648 3973 real small-caps" class=hires src=synthetic-vs-real-small-caps.png
jdaggett@6648 3974 width=512px>
jdaggett@6648 3975 <p class=caption>Synthetic vs. real small-caps
jdaggett@6648 3976 </div>
jdaggett@6648 3977
jdaggett@6648 3978 <p>To match the surrounding text, a font may provide alternate glyphs for
jdaggett@6648 3979 caseless characters when these features are enabled but when a user agent
jdaggett@6648 3980 simulates small capitals, it must not attempt to simulate alternates for
jdaggett@6648 3981 codepoints which are considered caseless.
jdaggett@6648 3982
jdaggett@6648 3983 <div class=figure style="padding: 0; margin: auto;"><img alt="caseless
jdaggett@6648 3984 characters with small-caps, all-small-caps enabled" class=hires
jdaggett@6648 3985 src=small-capitals-variations.png width=418px>
jdaggett@6648 3986 <p class=caption>Caseless characters with small-caps, all-small-caps
jdaggett@6648 3987 enabled
jdaggett@6648 3988 </div>
jdaggett@6648 3989
jdaggett@6648 3990 <p>If either ‘<a href="#petite-caps"><code
jdaggett@4624 3991 class=property>petite-caps</code></a>’ or ‘<a
jdaggett@4624 3992 href="#all-petite-caps"><code class=property>all-petite-caps</code></a>’
jdaggett@4624 3993 is specified for a font that doesn't support these features, the property
jdaggett@4624 3994 behaves as if ‘<a href="#small-caps"><code
jdaggett@4624 3995 class=property>small-caps</code></a>’ or ‘<a
jdaggett@4624 3996 href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
jdaggett@6648 3997 respectively, had been specified. If ‘<a href="#unicase"><code
jdaggett@6648 3998 class=property>unicase</code></a>’ is specified for a font that doesn't
jdaggett@6648 3999 support that feature, the property behaves as if ‘<a
jdaggett@6648 4000 href="#small-caps"><code class=property>small-caps</code></a>’ was
jdaggett@6648 4001 applied only to lowercased uppercase letters. If ‘<a
jdaggett@6648 4002 href="#titling-caps"><code class=property>titling-caps</code></a>’ is
jdaggett@6648 4003 specified with a font that does not support this feature, this property
jdaggett@6648 4004 has no visible effect. When simulated small capital glyphs are used, for
jdaggett@4624 4005 scripts that lack uppercase and lowercase letters, ‘<a
jdaggett@4624 4006 href="#small-caps"><code class=property>small-caps</code></a>’, ‘<a
jdaggett@4624 4007 href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
jdaggett@4624 4008 ‘<a href="#petite-caps"><code class=property>petite-caps</code></a>’,
jdaggett@4624 4009 ‘<a href="#all-petite-caps"><code
jdaggett@4624 4010 class=property>all-petite-caps</code></a>’ and ‘<a
jdaggett@4624 4011 href="#unicase"><code class=property>unicase</code></a>’ have no visible
jdaggett@2462 4012 effect.
jdaggett@1662 4013
jdaggett@6648 4014 <p>When casing transforms are used to simulate small capitals, the casing
jdaggett@6648 4015 transformations should match those used for the <span
jdaggett@6648 4016 class=property>‘<code class=property>text-transform</code>’</span>
jdaggett@6648 4017 property.
jdaggett@6648 4018
jdaggett@6648 4019 <p>As a last resort, unscaled uppercase letter glyphs in a normal font may
jdaggett@6648 4020 replace glyphs in a small-caps font so that the text appears in all
jdaggett@6648 4021 uppercase letters.
jdaggett@6648 4022
jdaggett@6648 4023 <div class=figure style="padding: 0; margin: auto;"><img alt="using
jdaggett@6648 4024 all-small-caps in acronym-laden text" class=hires
jdaggett@6648 4025 src=acronym-laden-text.png width=596px>
jdaggett@6648 4026 <p class=caption>Using small capitals to improve readability in
jdaggett@6648 4027 acronym-laden text
jdaggett@6648 4028 </div>
jdaggett@6648 4029
jdaggett@1662 4030 <div class=example>
jdaggett@1662 4031 <p>Quotes rendered italicised, with small-caps on the first line:</p>
jdaggett@1662 4032
jdaggett@1662 4033 <pre>blockquote { font-style: italic; }
jdaggett@1662 4034 blockquote:first-line { font-variant: small-caps; }
jdaggett@1662 4035
jdaggett@1662 4036 &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 4037 </pre>
jdaggett@1662 4038 </div>
jdaggett@2118 4039 <!-- prop: font-variant-numeric -->
jdaggett@2118 4040
jdaggett@2118 4041 <h3 id=font-variant-numeric-prop><span class=secno>6.7 </span>Numerical
jdaggett@1662 4042 formatting: the <a
jdaggett@1662 4043 href="#propdef-font-variant-numeric">font-variant-numeric</a> property</h3>
jdaggett@1662 4044
jdaggett@5809 4045 <table class=propdef id=namefont-variant-numericvaluenormal-ltnu>
jdaggett@1662 4046 <tbody>
jdaggett@1662 4047 <tr>
jdaggett@1662 4048 <td>Name:
jdaggett@1662 4049
jdaggett@1662 4050 <td><dfn id=propdef-font-variant-numeric>font-variant-numeric</dfn>
jdaggett@1662 4051
jdaggett@1662 4052 <tr>
jdaggett@1662 4053 <td>Value:
jdaggett@1662 4054
jdaggett@8225 4055 <td>normal | [ <a
jdaggett@8225 4056 href="#numeric-figure-values"><var>&lt;numeric-figure-values&gt;</var></a>
jdaggett@8225 4057 || <a
jdaggett@8225 4058 href="#numeric-spacing-values"><var>&lt;numeric-spacing-values&gt;</var></a>
jdaggett@8225 4059 || <a
jdaggett@8225 4060 href="#numeric-fraction-values"><var>&lt;numeric-fraction-values&gt;</var></a>
jdaggett@8225 4061 || <a href="#ordinal">ordinal</a> || <a
jdaggett@8225 4062 href="#slashed-zero">slashed-zero</a> ]
jdaggett@1662 4063
jdaggett@1662 4064 <tr>
jdaggett@1662 4065 <td>Initial:
jdaggett@1662 4066
jdaggett@1662 4067 <td>normal
jdaggett@1662 4068
jdaggett@1662 4069 <tr>
jdaggett@1662 4070 <td>Applies to:
jdaggett@1662 4071
jdaggett@1662 4072 <td>all elements
jdaggett@1662 4073
jdaggett@1662 4074 <tr>
jdaggett@1662 4075 <td>Inherited:
jdaggett@1662 4076
jdaggett@1662 4077 <td>yes
jdaggett@1662 4078
jdaggett@1662 4079 <tr>
jdaggett@1662 4080 <td>Percentages:
jdaggett@1662 4081
jdaggett@1662 4082 <td>N/A
jdaggett@1662 4083
jdaggett@1662 4084 <tr>
jdaggett@1662 4085 <td>Media:
jdaggett@1662 4086
jdaggett@1662 4087 <td>visual
jdaggett@1662 4088
jdaggett@1662 4089 <tr>
jdaggett@1662 4090 <td>Computed value:
jdaggett@1662 4091
jdaggett@1662 4092 <td>as specified
jdaggett@7377 4093
jdaggett@7377 4094 <tr>
jdaggett@7377 4095 <td>Animatable:
jdaggett@7377 4096
jdaggett@7377 4097 <td>no
jdaggett@1662 4098 </table>
jdaggett@1662 4099
jdaggett@1662 4100 <p>Specifies control over numerical forms.
jdaggett@1662 4101
jdaggett@1662 4102 <pre
jdaggett@8225 4103 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@1732 4104
jdaggett@1732 4105 <pre
jdaggett@8225 4106 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@1732 4107
jdaggett@1732 4108 <pre
jdaggett@8225 4109 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@1732 4110
jdaggett@1732 4111 <p>Individual values have the following meanings:
jdaggett@1662 4112
jdaggett@1662 4113 <dl>
jdaggett@5809 4114 <dt><dfn id=normal0>normal</dfn>
jdaggett@5809 4115
jdaggett@5809 4116 <dd>None of the features listed below are enabled.
jdaggett@5809 4117
jdaggett@1662 4118 <dt><dfn id=lining-nums>lining-nums</dfn>
jdaggett@1662 4119
jdaggett@6436 4120 <dd>Enables display of lining numerals (OpenType feature: <span
jdaggett@6436 4121 class=tag>lnum</span>).
jdaggett@1662 4122
jdaggett@1662 4123 <dt><dfn id=oldstyle-nums>oldstyle-nums</dfn>
jdaggett@1662 4124
jdaggett@6436 4125 <dd>Enables display of old-style numerals (OpenType feature: <span
jdaggett@6436 4126 class=tag>onum</span>).
jdaggett@1662 4127
jdaggett@1662 4128 <dt><dfn id=proportional-nums>proportional-nums</dfn>
jdaggett@1662 4129
jdaggett@6436 4130 <dd>Enables display of proportional numerals (OpenType feature: <span
jdaggett@6436 4131 class=tag>pnum</span>).
jdaggett@1662 4132
jdaggett@1662 4133 <dt><dfn id=tabular-nums>tabular-nums</dfn>
jdaggett@1662 4134
jdaggett@6436 4135 <dd>Enables display of tabular numerals (OpenType feature: <span
jdaggett@6436 4136 class=tag>tnum</span>).
jdaggett@1662 4137 </dl>
jdaggett@1662 4138
jdaggett@1662 4139 <p>The example below shows how these different properties can be combined
jdaggett@1662 4140 to influence the rendering of tabular data with fonts that support these
jdaggett@1662 4141 features. Within normal paragraph text, proportional numbers are used
jdaggett@1662 4142 while tabular numbers are used so that columns of numbers line up
jdaggett@1662 4143 properly:
jdaggett@1662 4144
jdaggett@1662 4145 <div class=figure style="padding: 0; margin: auto;"><img alt="combining
jdaggett@1662 4146 number styles" src=numberstyles.png>
jdaggett@1662 4147 <p class=caption>Using number styles
jdaggett@1662 4148 </div>
jdaggett@1662 4149
jdaggett@1662 4150 <dl>
jdaggett@1662 4151 <dt><dfn id=diagonal-fractions>diagonal-fractions</dfn>
jdaggett@1662 4152
jdaggett@6436 4153 <dd>Enables display of lining diagonal fractions (OpenType feature: <span
jdaggett@6436 4154 class=tag>frac</span>).
jdaggett@1662 4155 </dl>
jdaggett@1662 4156
jdaggett@1662 4157 <div class=featex><img alt="diagonal fraction example" src=frac.png></div>
jdaggett@1662 4158
jdaggett@1662 4159 <dl>
jdaggett@1662 4160 <dt><dfn id=stacked-fractions>stacked-fractions</dfn>
jdaggett@1662 4161
jdaggett@6436 4162 <dd>Enables display of lining stacked fractions (OpenType feature: <span
jdaggett@6436 4163 class=tag>afrc</span>).
jdaggett@1662 4164 </dl>
jdaggett@1662 4165
jdaggett@1662 4166 <div class=featex><img alt="stacked fraction example" src=afrc.png></div>
jdaggett@1662 4167
jdaggett@1662 4168 <dl>
jdaggett@3638 4169 <dt><dfn id=ordinal>ordinal</dfn>
jdaggett@3638 4170
jdaggett@3638 4171 <dd>Enables display of forms used with ordinal numbers (OpenType feature:
jdaggett@6436 4172 <span class=tag>ordn</span>).
jdaggett@3638 4173
jdaggett@1662 4174 <dt><dfn id=slashed-zero>slashed-zero</dfn>
jdaggett@1662 4175
jdaggett@6436 4176 <dd>Enables display of slashed zeros (OpenType feature: <span
jdaggett@6436 4177 class=tag>zero</span>).
jdaggett@1662 4178 </dl>
jdaggett@1662 4179
jdaggett@1662 4180 <div class=featex><img alt="slashed zero example" src=zero.png></div>
jdaggett@1662 4181
jdaggett@1662 4182 <div class=example id=steak-marinade>
jdaggett@1662 4183 <p>A simple flank steak marinade recipe, rendered with automatic fractions
jdaggett@1662 4184 and old-style numerals:</p>
jdaggett@1662 4185
jdaggett@1662 4186 <pre>.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; }
jdaggett@1662 4187
jdaggett@1662 4188 &lt;h4>Steak marinade:&lt;/h4>
jdaggett@1662 4189 &lt;ul>
jdaggett@1662 4190 &lt;li>&lt;span class="amount">2&lt;/span> tbsp olive oil&lt;/li>
jdaggett@1662 4191 &lt;li>&lt;span class="amount">1&lt;/span> tbsp lemon juice&lt;/li>
jdaggett@1662 4192 &lt;li>&lt;span class="amount">1&lt;/span> tbsp soy sauce&lt;/li>
jdaggett@1662 4193 &lt;li>&lt;span class="amount">1 1/2&lt;/span> tbsp dry minced onion&lt;/li>
jdaggett@1662 4194 &lt;li>&lt;span class="amount">2 1/2&lt;/span> tsp italian seasoning&lt;/li>
jdaggett@1732 4195 &lt;li>Salt &amp;amp; pepper&lt;/li>
jdaggett@1662 4196 &lt;/ul>
jdaggett@1662 4197
jdaggett@5596 4198 &lt;p>Mix the meat with the marinade and let it sit covered in the refrigerator
jdaggett@5596 4199 for a few hours or overnight.&lt;/p>
jdaggett@1662 4200 </pre>
jdaggett@1662 4201 </div>
jdaggett@2118 4202 <!-- prop: font-variant-alternates -->
jdaggett@2118 4203
jdaggett@2118 4204 <h3 id=font-variant-alternates-prop><span class=secno>6.8 </span>Alternates
jdaggett@2118 4205 and swashes: the <a
jdaggett@2118 4206 href="#propdef-font-variant-alternates">font-variant-alternates</a>
jdaggett@2118 4207 property</h3>
jdaggett@2118 4208
jdaggett@6176 4209 <table class=propdef id=namefont-variant-alternatesvaluenormal-s>
jdaggett@2118 4210 <tbody>
jdaggett@2118 4211 <tr>
jdaggett@2118 4212 <td>Name:
jdaggett@2118 4213
jdaggett@2118 4214 <td><dfn
jdaggett@2118 4215 id=propdef-font-variant-alternates>font-variant-alternates</dfn>
jdaggett@2118 4216
jdaggett@2118 4217 <tr>
jdaggett@2118 4218 <td>Value:
jdaggett@2118 4219
jdaggett@8225 4220 <td>normal | [ <a href="#stylistic"
jdaggett@8225 4221 title=stylistic>stylistic(&lt;feature-value-name&gt;)</a> || <a
jdaggett@8225 4222 href="#historical-forms">historical-forms</a> || <a href="#styleset"
jdaggett@8225 4223 title=styleset>styleset(&lt;feature-value-name&gt; #)</a> || <a
jdaggett@8225 4224 href="#character-variant"
jdaggett@8225 4225 title=character-variant>character-variant(&lt;feature-value-name&gt;
jdaggett@8225 4226 #)</a> || <a href="#swash"
jdaggett@8225 4227 title=swash>swash(&lt;feature-value-name&gt;)</a> || <a
jdaggett@8225 4228 href="#ornaments"
jdaggett@8225 4229 title=ornaments>ornaments(&lt;feature-value-name&gt;)</a> || <a
jdaggett@8225 4230 href="#annotation"
jdaggett@8225 4231 title=annotation>annotation(&lt;feature-value-name&gt;)</a> ]
jdaggett@2118 4232
jdaggett@2118 4233 <tr>
jdaggett@2118 4234 <td>Initial:
jdaggett@2118 4235
jdaggett@2118 4236 <td>normal
jdaggett@2118 4237
jdaggett@2118 4238 <tr>
jdaggett@2118 4239 <td>Applies to:
jdaggett@2118 4240
jdaggett@2118 4241 <td>all elements
jdaggett@2118 4242
jdaggett@2118 4243 <tr>
jdaggett@2118 4244 <td>Inherited:
jdaggett@2118 4245
jdaggett@2118 4246 <td>yes
jdaggett@2118 4247
jdaggett@2118 4248 <tr>
jdaggett@2118 4249 <td>Percentages:
jdaggett@2118 4250
jdaggett@2118 4251 <td>N/A
jdaggett@2118 4252
jdaggett@2118 4253 <tr>
jdaggett@2118 4254 <td>Media:
jdaggett@2118 4255
jdaggett@2118 4256 <td>visual
jdaggett@2118 4257
jdaggett@2118 4258 <tr>
jdaggett@2118 4259 <td>Computed value:
jdaggett@2118 4260
jdaggett@2118 4261 <td>as specified
jdaggett@7377 4262
jdaggett@7377 4263 <tr>
jdaggett@7377 4264 <td>Animatable:
jdaggett@7377 4265
jdaggett@7377 4266 <td>no
jdaggett@2118 4267 </table>
jdaggett@2118 4268
jdaggett@2118 4269 <p>For any given character, fonts can provide a variety of alternate glyphs
jdaggett@2118 4270 in addition to the default glyph for that character. This property
jdaggett@2118 4271 provides control over the selection of these alternate glyphs.
jdaggett@2118 4272
jdaggett@7041 4273 <p>In cases where multiple alternates are possible, authors define a
jdaggett@7041 4274 <code>&lt;feature-value-name&gt;</code> using the
jdaggett@7041 4275 <code>@font-feature-values</code> rule described below to indicate the
jdaggett@7041 4276 specific alternate to be used. The nature of these alternates is font
jdaggett@7041 4277 specific, so the rule defines values for a specific font family or set of
jdaggett@7041 4278 families. When a particular value has not been defined for a given family,
jdaggett@7041 4279 the named value is treated as if the feature had omitted from the style
jdaggett@7041 4280 rule. If a given value is outside the range supported by a given font, the
jdaggett@7041 4281 value is ignored. These values never apply to generic font families, nor
jdaggett@7041 4282 to families selected as part of system font fallback. Values that behave
jdaggett@7041 4283 this way are marked as <em>font specific</em>.
jdaggett@2556 4284
jdaggett@2118 4285 <p>Individual values have the following meanings:
jdaggett@2118 4286
jdaggett@2118 4287 <dl>
jdaggett@5809 4288 <dt><dfn id=normal1>normal</dfn>
jdaggett@5809 4289
jdaggett@5809 4290 <dd>None of the features listed below are enabled.
jdaggett@5809 4291
jdaggett@8225 4292 <dt><dfn id=stylistic
jdaggett@7060 4293 title=stylistic>stylistic(&lt;feature-value-name&gt;)</dfn>
jdaggett@2118 4294
jdaggett@2118 4295 <dd>Enables display of stylistic alternates (<em>font specific</em>,
jdaggett@6436 4296 OpenType feature: <span class=tag>salt
jdaggett@6436 4297 &lt;feature-value-name&gt;</span>).
jdaggett@2118 4298 </dl>
jdaggett@2118 4299
jdaggett@2118 4300 <div class=featex><img alt="stylistic alternate example" src=salt.png></div>
jdaggett@2118 4301
jdaggett@2118 4302 <dl>
jdaggett@2118 4303 <dt><dfn id=historical-forms>historical-forms</dfn>
jdaggett@2118 4304
jdaggett@6436 4305 <dd>Enables display of historical forms (OpenType feature: <span
jdaggett@6436 4306 class=tag>hist</span>).
jdaggett@2118 4307 </dl>
jdaggett@2118 4308
jdaggett@2118 4309 <div class=featex><img alt="historical form example" src=hist.png></div>
jdaggett@2118 4310
jdaggett@2118 4311 <dl>
jdaggett@8225 4312 <dt><dfn id=styleset title=styleset>styleset(&lt;feature-value-name&gt;
jdaggett@8225 4313 #)</dfn>
jdaggett@2118 4314
jdaggett@2118 4315 <dd>Enables display with stylistic sets (<em>font specific</em>, OpenType
jdaggett@6436 4316 feature: <span class=tag>ss&lt;feature-index&gt;</span> OpenType
jdaggett@6436 4317 currently defines <span class=tag>ss01</span> through <span
jdaggett@6436 4318 class=tag>ss20</span>).
jdaggett@2118 4319 </dl>
jdaggett@2118 4320
jdaggett@2118 4321 <div class=featex><img alt="styleset example" src=ssnn.png></div>
jdaggett@2118 4322
jdaggett@2118 4323 <dl>
jdaggett@8225 4324 <dt><dfn id=character-variant
jdaggett@8225 4325 title=character-variant>character-variant(&lt;feature-value-name&gt;
jdaggett@8225 4326 #)</dfn>
jdaggett@2118 4327
jdaggett@2118 4328 <dd>Enables display of specific character variants (<em>font
jdaggett@6436 4329 specific</em>, OpenType feature: <span
jdaggett@6436 4330 class=tag>cv&lt;feature-index&gt;</span> OpenType currently defines <span
jdaggett@6436 4331 class=tag>cv01</span> through <span class=tag>cv99</span>).
jdaggett@2118 4332
jdaggett@8225 4333 <dt><dfn id=swash title=swash>swash(&lt;feature-value-name&gt;)</dfn>
jdaggett@2118 4334
jdaggett@2118 4335 <dd>Enables display of swash glyphs (<em>font specific</em>, OpenType
jdaggett@6436 4336 feature: <span class=tag>swsh &lt;feature-index&gt;, cswh
jdaggett@6436 4337 &lt;feature-index&gt;</span>).
jdaggett@2118 4338 </dl>
jdaggett@2118 4339
jdaggett@2118 4340 <div class=featex><img alt="swash example" src=swsh.png></div>
jdaggett@2118 4341
jdaggett@2118 4342 <dl>
jdaggett@8225 4343 <dt><dfn id=ornaments
jdaggett@7060 4344 title=ornaments>ornaments(&lt;feature-value-name&gt;)</dfn>
jdaggett@2118 4345
jdaggett@2118 4346 <dd>Enables replacement of default glyphs with ornaments, if provided in
jdaggett@6436 4347 the font (<em>font specific</em>, OpenType feature: <span class=tag>ornm
jdaggett@6436 4348 &lt;feature-index&gt;</span>). Some fonts may offer ornament glyphs as
jdaggett@2118 4349 alternates for a wide collection of characters; however, displaying
jdaggett@2118 4350 arbitrary characters (e.g., alphanumerics) as ornaments is poor practice
jdaggett@2118 4351 as it distorts the semantics of the data. Font designers are encouraged
jdaggett@2118 4352 to encode all ornaments (except those explicitly encoded in the Unicode
jdaggett@2118 4353 Dingbats blocks, etc.) as alternates for the bullet character (U+2022) to
jdaggett@2118 4354 allow authors to select the desired glyph using
jdaggett@2118 4355 &lt;feature-value-name&gt;.
jdaggett@2118 4356 </dl>
jdaggett@2118 4357
jdaggett@2118 4358 <div class=featex><img alt="ornaments example" src=ornm.png></div>
jdaggett@2118 4359
jdaggett@2118 4360 <dl>
jdaggett@8225 4361 <dt><dfn id=annotation
jdaggett@7060 4362 title=annotation>annotation(&lt;feature-value-name&gt;)</dfn>
jdaggett@2118 4363
jdaggett@2118 4364 <dd>Enables display of alternate annotation forms (<em>font specific</em>,
jdaggett@6436 4365 OpenType feature: <span class=tag>nalt &lt;feature-index&gt;</span>).
jdaggett@2118 4366 </dl>
jdaggett@2118 4367
jdaggett@2118 4368 <div class=featex><img alt="alternate annotation form example"
jdaggett@2118 4369 src=nalt.png></div>
jdaggett@2118 4370
jdaggett@2472 4371 <h3 id=font-feature-values><span class=secno>6.9 </span>Defining font
jdaggett@7096 4372 specific alternates: the <code>@font-feature-values</code> rule</h3>
jdaggett@2472 4373
jdaggett@4624 4374 <p>Several of the possible values of ‘<a
jdaggett@4624 4375 href="#propdef-font-variant-alternates"><code
jdaggett@4624 4376 class=property>font-variant-alternates</code></a>’ listed above are
jdaggett@4624 4377 labeled as "font specific". For these features fonts may define not just a
jdaggett@4624 4378 single glyph but a set of alternate glyphs with an index to select a given
jdaggett@7096 4379 alternate. Since these are font family specific, the
jdaggett@7096 4380 <code>@font-feature-values</code> rule is used to define named-values for
jdaggett@7096 4381 these indices for a given family.
jdaggett@2472 4382
jdaggett@2472 4383 <p>In the case of the swash Q in the example shown above, the swash could
jdaggett@2472 4384 be specified using these style rules:
jdaggett@2472 4385
jdaggett@2472 4386 <pre>
jdaggett@7041 4387
jdaggett@2472 4388 @font-feature-values Jupiter Sans {
jdaggett@7041 4389 @swash {
jdaggett@7041 4390 delicate: 1;
jdaggett@7041 4391 flowing: 2;
jdaggett@7041 4392 }
jdaggett@2472 4393 }
jdaggett@2472 4394
jdaggett@2472 4395 h2 { font-family: Jupiter Sans, sans-serif; }
jdaggett@2472 4396
jdaggett@2472 4397 /* show the second swash variant in h2 headings */
jdaggett@2472 4398 h2:first-letter { font-variant-alternates: swash(flowing); }
jdaggett@2472 4399
jdaggett@2479 4400 &lt;h2>Quick&lt;/h2></pre>
jdaggett@2472 4401
jdaggett@2472 4402 <p>When Jupiter Sans is present, the second alternate swash alternate will
jdaggett@2472 4403 be displayed. When not present, no swash character will be shown, since
jdaggett@2472 4404 the specific named-value "flowing" is only defined for the Jupiter Sans
jdaggett@2472 4405 family. The @-mark indicates the name of the property value for which a
jdaggett@8031 4406 named-value can be used. The name "flowing" is chosen by the author, the
jdaggett@8031 4407 values specified within a given font's data.
jdaggett@8031 4408
jdaggett@8031 4409 <p>In terms of the grammar, this specification defines the following
jdaggett@8225 4410 productions:</p>
jdaggett@8225 4411 <!--
jdaggett@8225 4412 <pre><dfn>supports_rule</dfn>
jdaggett@8225 4413 : <i>SUPPORTS_SYM</i> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <i>supports_condition</i> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <i>group_rule_body</i>
jdaggett@8031 4414 ;
jdaggett@8031 4415
jdaggett@8225 4416 <dfn>supports_condition</dfn>
jdaggett@8225 4417 : <i>supports_negation</i> | <i>supports_conjunction</i> | <i>supports_disjunction</i> |
jdaggett@8225 4418 <i>supports_condition_in_parens</i>
jdaggett@8031 4419 ;
jdaggett@8031 4420
jdaggett@8225 4421 <dfn>supports_condition_in_parens</dfn>
jdaggett@8225 4422 : ( '(' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <i>supports_condition</i> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* ')' ) | <i>supports_declaration_condition</i> |
jdaggett@8225 4423 <i>general_enclosed</i>
jdaggett@8031 4424 ;
jdaggett@8031 4425
jdaggett@8225 4426 <dfn>supports_negation</dfn>
jdaggett@8225 4427 : <a href="http://www.w3.org/TR/css3-mediaqueries/#syntax"><i>NOT</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>+ <i>supports_condition_in_parens</i>
jdaggett@8031 4428 ;
jdaggett@8031 4429
jdaggett@8225 4430 <dfn>supports_conjunction</dfn>
jdaggett@8225 4431 : <i>supports_condition_in_parens</i> ( <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>+ <a href="http://www.w3.org/TR/css3-mediaqueries/#syntax"><i>AND</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>+ <i>supports_condition_in_parens</i> )+
jdaggett@8031 4432 ;
jdaggett@8031 4433
jdaggett@8225 4434 <dfn>supports_disjunction</dfn>
jdaggett@8225 4435 : <i>supports_condition_in_parens</i> ( <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>+ <i>OR</i> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>+ <i>supports_condition_in_parens</i> )+
jdaggett@8225 4436 ;
jdaggett@8225 4437
jdaggett@8225 4438 <dfn>supports_declaration_condition</dfn>
jdaggett@8225 4439 : '(' <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>declaration</i></a> ')'
jdaggett@8225 4440 ;
jdaggett@8225 4441
jdaggett@8225 4442 <dfn>general_enclosed</dfn>
jdaggett@8225 4443 : ( <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>FUNCTION</i></a> | '(' ) ( <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>any</i></a> | <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>unused</i></a> )* ')'
jdaggett@8031 4444 ;
jdaggett@8032 4445 </pre>
jdaggett@8032 4446
jdaggett@8225 4447 -->
jdaggett@8225 4448
jdaggett@8225 4449 <pre><dfn id=fontfeaturevaluesrule>font_feature_values_rule</dfn>
jdaggett@8225 4450 : <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 4451 '{' <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 4452 ;
jdaggett@8225 4453
jdaggett@8225 4454 <dfn id=fontfamilynamelist>font_family_name_list</dfn>
jdaggett@8225 4455 : <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 4456 ;
jdaggett@8225 4457
jdaggett@8225 4458 <dfn id=fontfamilyname>font_family_name</dfn>
jdaggett@8225 4459 : <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 4460 ;
jdaggett@8225 4461
jdaggett@8225 4462 <dfn id=featurevalueblock>feature_value_block</dfn>
jdaggett@8225 4463 : <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 4464 '{' <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 4465 ;
jdaggett@8225 4466
jdaggett@8225 4467 <dfn id=featuretype>feature_type</dfn>:
jdaggett@8225 4468 <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>ATKEYWORD</i></a>
jdaggett@8225 4469 ;
jdaggett@8225 4470
jdaggett@8225 4471 <dfn id=featurevaluedefinition>feature_value_definition</dfn>
jdaggett@8225 4472 : <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 4473 ;
jdaggett@8225 4474 </pre>
jdaggett@8225 4475
jdaggett@8032 4476 <p>The following new token is introduced:
jdaggett@8032 4477
jdaggett@8225 4478 <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 4479 </pre>
jdaggett@2118 4480
jdaggett@8113 4481 <p>Feature value blocks are treated <a
jdaggett@8113 4482 href="http://www.w3.org/TR/CSS2/syndata.html#at-rules">similar to
jdaggett@8113 4483 at-rules</a>, they consist of everything up to the next block or
jdaggett@8113 4484 semi-colon, whichever comes first.
jdaggett@8113 4485
jdaggett@8113 4486 <p>Font feature values rules define a set of values for a specific font
jdaggett@8113 4487 feature as used for a given set of families. Effectively, they define a
jdaggett@8113 4488 mapping of ⟨family, feature, ident⟩ → ⟨values⟩ where
jdaggett@8113 4489 ⟨values⟩ are the indices used for specific features defined for a
jdaggett@8113 4490 given font.
jdaggett@8031 4491
jdaggett@8031 4492 <p>The font family list uses the same syntax as that used for the ‘<a
jdaggett@8031 4493 href="#descdef-font-family"><code class=property>font-family</code></a>’
jdaggett@8031 4494 property. Within feature value blocks, the feature type is ‘<code
jdaggett@8031 4495 class=css>@</code>’ followed by the name of the font-specific property
jdaggett@8225 4496 value (e.g. <a href="#swash"><code>@swash</code></a>). The feature type
jdaggett@8225 4497 must match, using an ASCII case-insensitive comparison, one of the
jdaggett@8031 4498 <em>font specific</em> values of the <a
jdaggett@7680 4499 href="#propdef-font-variant-alternates"><code>font-variant-alternates</code></a>
jdaggett@8031 4500 property. The values associated with a given idenitifier are limited to
jdaggett@8031 4501 integer values 0 or greater.
jdaggett@7679 4502
jdaggett@7679 4503 <p>If syntax errors occur within the font family list, the entire rule must
jdaggett@7679 4504 be ignored. When syntax errors occur within a feature value definition,
jdaggett@7679 4505 such as invalid identifiers or values, the entire feature value definition
jdaggett@7679 4506 must be omitted, similar to the way syntax errors in style declarations
jdaggett@7679 4507 are handled. When the <code>&lt;feature-type></code> is invalid, the
jdaggett@8031 4508 entire associated feature value block must be ignored.
jdaggett@7679 4509
jdaggett@7679 4510 <pre>@font-feature-values Bongo {
jdaggett@7679 4511 @swash { ornate: 1; }
jdaggett@7679 4512 annotation { boxed: 4; } /* should be @annotation! */
jdaggett@8031 4513 @swash { double-loops: 1; flowing: -1; } /* negative value */
jdaggett@8031 4514 @ornaments ; /* incomplete definition */
jdaggett@8031 4515 @styleset { double-W: 14; sharp-terminals: 16 1 } /* missing ; */
jdaggett@7680 4516 <a href="http://www.angryalien.com/0504/shiningbunnies.html" style="text-decoration: none;">redrum</a> /* random editing mistake */
jdaggett@7679 4517 }</pre>
jdaggett@7679 4518
jdaggett@7679 4519 <p>The example above is equivalent to:
jdaggett@7679 4520
jdaggett@7679 4521 <pre>@font-feature-values Bongo {
jdaggett@7679 4522 @swash { ornate: 1; }
jdaggett@8031 4523 @swash { double-loops: 1; }
jdaggett@8031 4524 @styleset { double-W: 14; sharp-terminals: 16 1; }
jdaggett@7679 4525 }</pre>
jdaggett@7096 4526
jdaggett@7096 4527 <p>If multiple <code>@font-feature-values</code> rules are defined for a
jdaggett@7096 4528 given family, the resulting values defined are the union of these rules.
jdaggett@7096 4529 This allows a set of named-values to be defined for a given font family
jdaggett@7096 4530 globally for a site and specific additions made per-page. If the same
jdaggett@6307 4531 &lt;feature-value-name&gt; is defined mulitple times for a given
jdaggett@6307 4532 font-variant value, the last defined value is used.
jdaggett@2472 4533
jdaggett@2472 4534 <pre>
jdaggett@2472 4535 site.css:
jdaggett@2472 4536
jdaggett@2472 4537 @font-feature-values Mercury Serif {
jdaggett@7041 4538 @styleset {
jdaggett@7041 4539 stacked-g: 3; /* "two-storey" versions of g, a */
jdaggett@7041 4540 stacked-a: 4;
jdaggett@7041 4541 }
jdaggett@2472 4542 }
jdaggett@2472 4543
jdaggett@2472 4544 page.css:
jdaggett@2472 4545
jdaggett@2472 4546 @font-feature-values Mercury Serif {
jdaggett@7041 4547 @styleset {
jdaggett@7041 4548 geometric-m: 7; /* alternate version of m */
jdaggett@7041 4549 }
jdaggett@2472 4550 }
jdaggett@2472 4551
jdaggett@2472 4552 body {
jdaggett@2472 4553 font-family: Mercury Serif, serif;
jdaggett@2472 4554
jdaggett@2472 4555 /* enable both the use of stacked g and alternate m */
jdaggett@2472 4556 font-variant-alternates: styleset(stacked-g, geometric-m);
jdaggett@2472 4557 }</pre>
jdaggett@2472 4558
jdaggett@3571 4559 <p>Only named font families are allowed for &lt;font-family&gt;, rules that
jdaggett@3571 4560 include generic or system fonts in the list of font families are
jdaggett@6307 4561 considered syntax errors and the contents of the rules are ignored.
jdaggett@6307 4562 However, if a user agent defines a generic font to be a specific named
jdaggett@6307 4563 font (e.g. Helvetica), the settings associated with that family name will
jdaggett@6307 4564 be used.
jdaggett@3571 4565
jdaggett@3571 4566 <p>For &lt;font-variant-property-value>, only font specific property value
jdaggett@4624 4567 names supported by the ‘<a href="#propdef-font-variant"><code
jdaggett@4624 4568 class=property>font-variant</code></a>’ property are recognized,
jdaggett@4624 4569 definitions for other value names cause a syntax error and are ignored.
jdaggett@4624 4570 Each property value that is font specific is clearly marked as such.
jdaggett@7309 4571 Feature value names follow the rules of CSS user identifiers and are
jdaggett@7229 4572 case-sensitive. They are unique only for a given set of font families and
jdaggett@3571 4573 font-variant property value; the same identifier used with a different
jdaggett@3571 4574 font-variant property value is treated as a separate and distinct value.
jdaggett@2472 4575
jdaggett@2472 4576 <p>Using a commonly named value allows authors to use a single style rule
jdaggett@2472 4577 to cover a set of fonts for which the underlying selector is different for
jdaggett@2472 4578 each font. If either font in the example below is found, a circled number
jdaggett@2472 4579 glyph will be used:
jdaggett@2472 4580
jdaggett@2472 4581 <pre>@font-feature-values Taisho Gothic {
jdaggett@7041 4582 @annotation { boxed: 1; circled: 4; }
jdaggett@2118 4583 }
jdaggett@2118 4584
jdaggett@2118 4585 @font-feature-values Otaru Kisa {
jdaggett@7041 4586 @annotation { circled: 1; black-boxed: 3; }
jdaggett@2118 4587 }
jdaggett@2118 4588
jdaggett@2118 4589 h3.title {
jdaggett@2118 4590 /* circled form defined for both fonts */
jdaggett@2118 4591 font-family: Taisho Gothic, Otaru Kisa;
jdaggett@2118 4592 font-variant: annotation(circled);
jdaggett@2118 4593 }</pre>
jdaggett@2472 4594
jdaggett@3571 4595 <p>Most font specific font-variant property values take a single value
jdaggett@3571 4596 (e.g. swash). The character-variant property value allows two values and
jdaggett@3571 4597 styleset allows an unlimited number. If a larger number of values are
jdaggett@3571 4598 assigned to a given name, a syntax error occurs and the entire
jdaggett@3571 4599 &lt;font-feature-values-declaration&gt; is ignored.
jdaggett@3571 4600
jdaggett@3571 4601 <p>For the styleset property value, multiple values indicate the style sets
jdaggett@7095 4602 to be enabled. Values between 1 and 99 enable OpenType features <span
jdaggett@7095 4603 class=tag>ss01</span> through <span class=tag>ss99</span>. However, the
jdaggett@7095 4604 OpenType standard only officially defines <span class=tag>ss01</span>
jdaggett@7095 4605 through <span class=tag>ss20</span>. Values greater than 99 or equal to 0
jdaggett@7095 4606 are ignored but do not generate a syntax error when parsed.
jdaggett@2472 4607
jdaggett@2472 4608 <pre>@font-feature-values Mars Serif {
jdaggett@7041 4609 @styleset {
jdaggett@7041 4610 alt-g: 1; /* implies ss01 = 1 */
jdaggett@7041 4611 curly-quotes: 3; /* implies ss03 = 1 */
jdaggett@7041 4612 code: 4 5; /* implies ss04 = 1, ss05 = 1 */
jdaggett@7041 4613 }
jdaggett@7041 4614
jdaggett@7041 4615 @styleset {
jdaggett@7095 4616 dumb: 125; /* &gt;99, ignored */
jdaggett@7041 4617 }
jdaggett@7041 4618
jdaggett@7041 4619 @swash {
jdaggett@7041 4620 swishy: 3 5; /* more than 1 value for swash, syntax error */
jdaggett@7041 4621 }
jdaggett@2472 4622 }
jdaggett@2472 4623
jdaggett@2472 4624 p.codeblock {
jdaggett@2472 4625 /* implies ss03 = 1, ss04 = 1, ss05 = 1 */
jdaggett@2472 4626 font-variant-alternates: styleset(curly-quotes, code);
jdaggett@2472 4627 }</pre>
jdaggett@2472 4628
jdaggett@2472 4629 <p>For character-variant, a single value between 1 and 99 indicates the
jdaggett@6436 4630 enabling of OpenType feature <span class=tag>cv01</span> through <span
jdaggett@7095 4631 class=tag>cv99</span>. For OpenType fonts, values greater than 99 or equal
jdaggett@7095 4632 to 0 are ignored but do not generate a syntax error when parsed. When two
jdaggett@7095 4633 values are listed, the first value indicates the feature used and the
jdaggett@7095 4634 second the value passed for that feature. When two value names imply
jdaggett@7095 4635 different settings for the same underlying feature the last setting is
jdaggett@7095 4636 used.
jdaggett@2472 4637
jdaggett@2472 4638 <pre>@font-feature-values MM Greek {
jdaggett@7041 4639 @character-variant { alpha-2: 1 2; } /* implies cv01 = 2 */
jdaggett@7041 4640 @character-variant { beta-3: 2 3; } /* implies cv02 = 3 */
jdaggett@7041 4641 @character-variant { epsilon: 5 3 6; } /* more than 2 values, syntax error, ignored */
jdaggett@7041 4642 @character-variant { gamma: 12; } /* implies cv12 = 1 */
jdaggett@7041 4643 @character-variant { zeta: 20 3; } /* implies cv20 = 3 */
jdaggett@7041 4644 @character-variant { zeta-2: 20 2; } /* implies cv20 = 2 */
jdaggett@7041 4645 @character-variant { silly: 105; } /* &gt;99, ignored */
jdaggett@7041 4646 @character-variant { dumb: 323 3; } /* &gt;99, ignored */
jdaggett@2472 4647 }
jdaggett@2472 4648
jdaggett@2472 4649 #title {
jdaggett@2472 4650 /* use the third alternate beta, first alternate gamma */
jdaggett@2472 4651 font-variant-alternates: character-variant(beta-3, gamma);
jdaggett@3571 4652 }
jdaggett@3571 4653
jdaggett@3571 4654 p {
jdaggett@3571 4655 /* zeta-2 follows zeta, implies cv20 = 2 */
jdaggett@3571 4656 font-variant-alternates: character-variant(zeta, zeta-2);
jdaggett@3571 4657 }
jdaggett@3571 4658
jdaggett@3571 4659 .special {
jdaggett@3571 4660 /* zeta follows zeta-2, implies cv20 = 3 */
jdaggett@3571 4661 font-variant-alternates: character-variant(zeta-2, zeta);
jdaggett@2472 4662 }</pre>
jdaggett@2472 4663
jdaggett@7377 4664 <p>See the <a href="#om-fontfeaturevalues">object model reference
jdaggett@7377 4665 section</a> for a description of the interfaces used to modify these rules
jdaggett@7377 4666 via the CSS Object Model.
jdaggett@3517 4667
jdaggett@2472 4668 <div class=figure><img alt="Matching text on Byzantine seals using
jdaggett@2472 4669 character variants" src=byzantineseal.png>
jdaggett@2472 4670 <p class=caption>Byzantine seal text displayed with character variants
jdaggett@2472 4671 </div>
jdaggett@2472 4672
jdaggett@2472 4673 <div class=example>
jdaggett@2472 4674 <p>In the figure above, the text in red is rendered using a font
jdaggett@2472 4675 containing character variants that mimic the character forms found on a
jdaggett@2472 4676 Byzantine seal from the 8th century A.D. Two lines below is the same text
jdaggett@2472 4677 displayed in a font without variants. Note the two variants for U and N
jdaggett@2509 4678 used on the seal.</p>
jdaggett@2472 4679
jdaggett@2472 4680 <pre>@font-feature-values Athena Ruby {
jdaggett@7041 4681 @character-variant {
jdaggett@7041 4682 leo-B: 2 1;
jdaggett@7041 4683 leo-M: 13 3;
jdaggett@7041 4684 leo-alt-N: 14 1;
jdaggett@7041 4685 leo-N: 14 2;
jdaggett@7041 4686 leo-T: 20 1;
jdaggett@7041 4687 leo-U: 21 2;
jdaggett@7041 4688 leo-alt-U: 21 4;
jdaggett@7041 4689 }
jdaggett@2472 4690 }
jdaggett@2472 4691
jdaggett@2472 4692 p {
jdaggett@6653 4693 font-variant: discretionary-ligatures,
jdaggett@6653 4694 character-variant(leo-B, leo-M, leo-N, leo-T, leo-U);
jdaggett@2472 4695 }
jdaggett@2472 4696
jdaggett@2472 4697 span.alt-N {
jdaggett@2472 4698 font-variant-alternates: character-variant(leo-alt-N);
jdaggett@2472 4699 }
jdaggett@2472 4700
jdaggett@2472 4701 span.alt-U {
jdaggett@2472 4702 font-variant-alternates: character-variant(leo-alt-U);
jdaggett@2472 4703 }
jdaggett@2472 4704
jdaggett@2472 4705 &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 4706
jdaggett@2472 4707 &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 4708 </pre>
jdaggett@2118 4709 </div>
jdaggett@2118 4710
jdaggett@2118 4711 <h3 id=font-variant-east-asian-prop><span class=secno>6.10 </span>East
jdaggett@2118 4712 Asian text rendering: the <a
jdaggett@1662 4713 href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
jdaggett@1662 4714 property</h3>
jdaggett@1662 4715
jdaggett@5809 4716 <table class=propdef id=namefont-variant-east-asianvaluenormal-l>
jdaggett@1662 4717 <tbody>
jdaggett@1662 4718 <tr>
jdaggett@1662 4719 <td>Name:
jdaggett@1662 4720
jdaggett@1662 4721 <td><dfn
jdaggett@1662 4722 id=propdef-font-variant-east-asian>font-variant-east-asian</dfn>
jdaggett@1662 4723
jdaggett@1662 4724 <tr>
jdaggett@1662 4725 <td>Value:
jdaggett@1662 4726
jdaggett@8225 4727 <td>normal | [ <a
jdaggett@8225 4728 href="#east-asian-variant-values"><var>&lt;east-asian-variant-values&gt;</var></a>
jdaggett@8225 4729 || <a
jdaggett@8225 4730 href="#east-asian-width-values"><var>&lt;east-asian-width-values&gt;</var></a>
jdaggett@8225 4731 || <a href="#ruby">ruby</a> ]
jdaggett@1662 4732
jdaggett@1662 4733 <tr>
jdaggett@1662 4734 <td>Initial:
jdaggett@1662 4735
jdaggett@1662 4736 <td>normal
jdaggett@1662 4737
jdaggett@1662 4738 <tr>
jdaggett@1662 4739 <td>Applies to:
jdaggett@1662 4740
jdaggett@1662 4741 <td>all elements
jdaggett@1662 4742
jdaggett@1662 4743 <tr>
jdaggett@1662 4744 <td>Inherited:
jdaggett@1662 4745
jdaggett@1662 4746 <td>yes
jdaggett@1662 4747
jdaggett@1662 4748 <tr>
jdaggett@1662 4749 <td>Percentages:
jdaggett@1662 4750
jdaggett@1662 4751 <td>N/A
jdaggett@1662 4752
jdaggett@1662 4753 <tr>
jdaggett@1662 4754 <td>Media:
jdaggett@1662 4755
jdaggett@1662 4756 <td>visual
jdaggett@1662 4757
jdaggett@1662 4758 <tr>
jdaggett@1662 4759 <td>Computed value:
jdaggett@1662 4760
jdaggett@1662 4761 <td>as specified
jdaggett@7377 4762
jdaggett@7377 4763 <tr>
jdaggett@7377 4764 <td>Animatable:
jdaggett@7377 4765
jdaggett@7377 4766 <td>no
jdaggett@1662 4767 </table>
jdaggett@1662 4768
jdaggett@6693 4769 <p>Allows control of glyph substitution and sizing in East Asian text.
jdaggett@1662 4770
jdaggett@1662 4771 <pre
jdaggett@8225 4772 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 4773
jdaggett@1662 4774 <pre
jdaggett@8225 4775 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 4776
jdaggett@1732 4777 <p>Individual values have the following meanings:
jdaggett@1662 4778
jdaggett@1662 4779 <dl>
jdaggett@5809 4780 <dt><dfn id=normal2>normal</dfn>
jdaggett@5809 4781
jdaggett@5809 4782 <dd>None of the features listed below are enabled.
jdaggett@5809 4783
jdaggett@1662 4784 <dt><dfn id=jis78>jis78</dfn>
jdaggett@1662 4785
jdaggett@6436 4786 <dd>Enables rendering of JIS78 forms (OpenType feature: <span
jdaggett@6436 4787 class=tag>jp78</span>).
jdaggett@1662 4788 </dl>
jdaggett@1662 4789
jdaggett@1662 4790 <div class=featex><img alt="JIS78 form example" src=jp78.png></div>
jdaggett@1662 4791
jdaggett@1662 4792 <dl>
jdaggett@1662 4793 <dt><dfn id=jis83>jis83</dfn>
jdaggett@1662 4794
jdaggett@6436 4795 <dd>Enables rendering of JIS83 forms (OpenType feature: <span
jdaggett@6436 4796 class=tag>jp83</span>).
jdaggett@1662 4797
jdaggett@1662 4798 <dt><dfn id=jis90>jis90</dfn>
jdaggett@1662 4799
jdaggett@6436 4800 <dd>Enables rendering of JIS90 forms (OpenType feature: <span
jdaggett@6436 4801 class=tag>jp90</span>).
jdaggett@1662 4802
jdaggett@1662 4803 <dt><dfn id=jis04>jis04</dfn>
jdaggett@1662 4804
jdaggett@6436 4805 <dd>Enables rendering of JIS2004 forms (OpenType feature: <span
jdaggett@6436 4806 class=tag>jp04</span>).
jdaggett@6693 4807 <p>The various JIS variants reflect the glyph forms defined in different
jdaggett@6693 4808 Japanese national standards. Fonts generally include glyphs defined by
jdaggett@6693 4809 the most recent national standard but it's sometimes necessary to use
jdaggett@6693 4810 older variants, to match signage for example.</p>
jdaggett@1662 4811
jdaggett@2504 4812 <dt><dfn id=simplified>simplified</dfn>
jdaggett@2504 4813
jdaggett@6436 4814 <dd>Enables rendering of simplified forms (OpenType feature: <span
jdaggett@6436 4815 class=tag>smpl</span>).
jdaggett@6693 4816 <p>The ‘<a href="#simplified"><code
jdaggett@6693 4817 class=property>simplified</code></a>’ and ‘<a
jdaggett@6693 4818 href="#traditional"><code class=property>traditional</code></a>’
jdaggett@6693 4819 values allow control over the glyph forms for characters which have been
jdaggett@6693 4820 simplified over time but for which the older, traditional form is still
jdaggett@6693 4821 used in some contexts. The exact set of characters and glyph forms will
jdaggett@6693 4822 vary to some degree by context for which a given font was designed.</p>
jdaggett@2504 4823
jdaggett@2504 4824 <dt><dfn id=traditional>traditional</dfn>
jdaggett@2504 4825
jdaggett@6436 4826 <dd>Enables rendering of traditional forms (OpenType feature: <span
jdaggett@6436 4827 class=tag>trad</span>).
jdaggett@1662 4828 </dl>
jdaggett@1662 4829
jdaggett@1662 4830 <div class=featex><img alt="tradtional form example" src=trad.png></div>
jdaggett@1662 4831
jdaggett@1662 4832 <dl>
jdaggett@1662 4833 <dt><dfn id=full-width>full-width</dfn>
jdaggett@1662 4834
jdaggett@6436 4835 <dd>Enables rendering of full-width variants (OpenType feature: <span
jdaggett@6436 4836 class=tag>fwid</span>).
jdaggett@1662 4837
jdaggett@1662 4838 <dt><dfn id=proportional-width>proportional-width</dfn>
jdaggett@1662 4839
jdaggett@1662 4840 <dd>Enables rendering of proportionally-spaced variants (OpenType feature:
jdaggett@6436 4841 <span class=tag>pwid</span>).
jdaggett@1662 4842 </dl>
jdaggett@1662 4843
jdaggett@1662 4844 <div class=featex><img alt="proportionally spaced Japanese example"
jdaggett@1662 4845 src=pwid.png></div>
jdaggett@1662 4846
jdaggett@3638 4847 <dl>
jdaggett@3638 4848 <dt><dfn id=ruby>ruby</dfn>
jdaggett@3638 4849
jdaggett@6436 4850 <dd>Enables display of ruby variant glyphs (OpenType feature: <span
jdaggett@6436 4851 class=tag>ruby</span>). Since ruby text is generally smaller than the
jdaggett@3638 4852 associated body text, font designers can design special glyphs for use
jdaggett@3638 4853 with ruby that are more readable than scaled down versions of the default
jdaggett@3638 4854 glyphs. Only glyph selection is affected, there is no associated font
jdaggett@3638 4855 scaling or other change that affects line layout. The red ruby text below
jdaggett@3638 4856 is shown with default glyphs (top) and with ruby variant glyphs (bottom).
jdaggett@3638 4857 Note the slight difference in stroke thickness.
jdaggett@3638 4858 </dl>
jdaggett@3638 4859
jdaggett@3638 4860 <div class=featex><img alt="ruby variant example" src=rubyshinkansen.png></div>
jdaggett@3638 4861
jdaggett@2118 4862 <h3 id=font-variant-prop><span class=secno>6.11 </span>Overall shorthand
jdaggett@1856 4863 for font rendering: the <a href="#propdef-font-variant">font-variant</a>
jdaggett@1662 4864 property</h3>
jdaggett@1662 4865
jdaggett@6436 4866 <table class=propdef id=namefont-variantvaluenormal-none-ltcommo>
jdaggett@1662 4867 <tbody>
jdaggett@1662 4868 <tr>
jdaggett@1662 4869 <td>Name:
jdaggett@1662 4870
jdaggett@1662 4871 <td><dfn id=propdef-font-variant>font-variant</dfn>
jdaggett@1662 4872
jdaggett@1662 4873 <tr>
jdaggett@1662 4874 <td>Value:
jdaggett@1662 4875
jdaggett@8225 4876 <td>normal | none | [ <a
jdaggett@8225 4877 href="#common-lig-values"><var>&lt;common-lig-values&gt;</var></a> ||
jdaggett@8225 4878 <a
jdaggett@8225 4879 href="#discretionary-lig-values"><var>&lt;discretionary-lig-values&gt;</var></a>
jdaggett@8225 4880 || <a
jdaggett@8225 4881 href="#historical-lig-values"><var>&lt;historical-lig-values&gt;</var></a>
jdaggett@8225 4882 || <a
jdaggett@8225 4883 href="#contextual-alt-values"><var>&lt;contextual-alt-values&gt;</var></a>
jdaggett@8225 4884 || <a href="#stylistic"><var
jdaggett@8225 4885 title=stylistic>stylistic(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 4886 href="#historical-forms"><var>historical-forms</var></a> || <a
jdaggett@8225 4887 href="#styleset"><var
jdaggett@8225 4888 title=styleset>styleset(&lt;feature-value-name&gt; #)</var></a> || <a
jdaggett@8225 4889 href="#character-variant"><var
jdaggett@8225 4890 title=character-variant>character-variant(&lt;feature-value-name&gt;
jdaggett@8225 4891 #)</var></a> || <a href="#swash"><var
jdaggett@8225 4892 title=swash>swash(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 4893 href="#ornaments"><var
jdaggett@8225 4894 title=ornaments>ornaments(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 4895 href="#annotation"><var
jdaggett@8225 4896 title=annotation>annotation(&lt;feature-value-name&gt;)</var></a> || [
jdaggett@8225 4897 <a href="#small-caps"><i>small-caps</i></a> | <a
jdaggett@8225 4898 href="#all-small-caps"><i>all-small-caps</i></a> | <a
jdaggett@8225 4899 href="#petite-caps"><i>petite-caps</i></a> | <a
jdaggett@8225 4900 href="#all-petite-caps"><i>all-petite-caps</i></a> | <a
jdaggett@8225 4901 href="#unicase"><i>unicase</i></a> | <a
jdaggett@8225 4902 href="#titling-caps"><i>titling-caps</i></a> ] || <a
jdaggett@8225 4903 href="#numeric-figure-values"><var>&lt;numeric-figure-values&gt;</var></a>
jdaggett@8225 4904 || <a
jdaggett@8225 4905 href="#numeric-spacing-values"><var>&lt;numeric-spacing-values&gt;</var></a>
jdaggett@8225 4906 || <a
jdaggett@8225 4907 href="#numeric-fraction-values"><var>&lt;numeric-fraction-values&gt;</var></a>
jdaggett@8225 4908 || <a href="#ordinal"><i>ordinal</i></a> || <a
jdaggett@8225 4909 href="#slashed-zero"><i>slashed-zero</i></a> || <a
jdaggett@8225 4910 href="#east-asian-variant-values"><var>&lt;east-asian-variant-values&gt;</var></a>
jdaggett@8225 4911 || <a
jdaggett@8225 4912 href="#east-asian-width-values"><var>&lt;east-asian-width-values&gt;</var></a>
jdaggett@8225 4913 || <a href="#ruby"><i>ruby</i></a> ]
jdaggett@1662 4914
jdaggett@1662 4915 <tr>
jdaggett@1662 4916 <td>Initial:
jdaggett@1662 4917
jdaggett@1662 4918 <td>normal
jdaggett@1662 4919
jdaggett@1662 4920 <tr>
jdaggett@1662 4921 <td>Applies to:
jdaggett@1662 4922
jdaggett@1662 4923 <td>all elements
jdaggett@1662 4924
jdaggett@1662 4925 <tr>
jdaggett@1662 4926 <td>Inherited:
jdaggett@1662 4927
jdaggett@1662 4928 <td>yes
jdaggett@1662 4929
jdaggett@1662 4930 <tr>
jdaggett@1662 4931 <td>Percentages:
jdaggett@1662 4932
jdaggett@7377 4933 <td>see individual properties
jdaggett@1662 4934
jdaggett@1662 4935 <tr>
jdaggett@1662 4936 <td>Media:
jdaggett@1662 4937
jdaggett@1662 4938 <td>visual
jdaggett@1662 4939
jdaggett@1662 4940 <tr>
jdaggett@1662 4941 <td>Computed value:
jdaggett@1662 4942
jdaggett@7377 4943 <td>see individual properties
jdaggett@7377 4944
jdaggett@7377 4945 <tr>
jdaggett@7377 4946 <td>Animatable:
jdaggett@7377 4947
jdaggett@7377 4948 <td>see individual properties
jdaggett@1662 4949 </table>
jdaggett@1662 4950
jdaggett@5809 4951 <p>The value ‘<a href="#normal2"><code
jdaggett@5809 4952 class=property>normal</code></a>’ resets all other font feature
jdaggett@8276 4953 properties to their inital value. The ‘<a
jdaggett@8276 4954 href="#font-variant-ligatures-none-value"><code
jdaggett@8276 4955 class=property>none</code></a>’ value sets ‘<a
jdaggett@6436 4956 href="#propdef-font-variant-ligatures"><code
jdaggett@8276 4957 class=property>font-variant-ligatures</code></a>’ to ‘<a
jdaggett@8276 4958 href="#font-variant-ligatures-none-value"><code
jdaggett@8276 4959 class=property>none</code></a>’ and resets all other font feature
jdaggett@8276 4960 properties to their initial value. Like other shorthands, using ‘<a
jdaggett@6436 4961 href="#propdef-font-variant"><code
jdaggett@6436 4962 class=property>font-variant</code></a>’ resets unspecified font-variant
jdaggett@6436 4963 subproperties to their initial values. It does not reset the values of
jdaggett@6436 4964 either ‘<a href="#propdef-font-language-override"><code
jdaggett@4624 4965 class=property>font-language-override</code></a>’ or ‘<a
jdaggett@4624 4966 href="#propdef-font-feature-settings"><code
jdaggett@4624 4967 class=property>font-feature-settings</code></a>’.
jdaggett@1662 4968
jdaggett@2118 4969 <h3 id=font-feature-settings-prop><span class=secno>6.12 </span>Low-level
jdaggett@2509 4970 font feature settings control: the <a
jdaggett@1662 4971 href="#propdef-font-feature-settings">font-feature-settings</a> property</h3>
jdaggett@1662 4972
jdaggett@4624 4973 <table class=propdef id=namefont-feature-settingsvaluenormal-ltf>
jdaggett@1662 4974 <tbody>
jdaggett@1662 4975 <tr>
jdaggett@1662 4976 <td>Name:
jdaggett@1662 4977
jdaggett@1662 4978 <td><dfn id=propdef-font-feature-settings>font-feature-settings</dfn>
jdaggett@1662 4979
jdaggett@1662 4980 <tr>
jdaggett@1662 4981 <td>Value:
jdaggett@1662 4982
jdaggett@8225 4983 <td>normal | <a
jdaggett@8225 4984 href="#feature-tag-value"><var>&lt;feature-tag-value&gt;</var></a> #
jdaggett@1662 4985
jdaggett@1662 4986 <tr>
jdaggett@1662 4987 <td>Initial:
jdaggett@1662 4988
jdaggett@1662 4989 <td>normal
jdaggett@1662 4990
jdaggett@1662 4991 <tr>
jdaggett@1662 4992 <td>Applies to:
jdaggett@1662 4993
jdaggett@1662 4994 <td>all elements
jdaggett@1662 4995
jdaggett@1662 4996 <tr>
jdaggett@1662 4997 <td>Inherited:
jdaggett@1662 4998
jdaggett@1662 4999 <td>yes
jdaggett@1662 5000
jdaggett@1662 5001 <tr>
jdaggett@1662 5002 <td>Percentages:
jdaggett@1662 5003
jdaggett@1662 5004 <td>N/A
jdaggett@1662 5005
jdaggett@1662 5006 <tr>
jdaggett@1662 5007 <td>Media:
jdaggett@1662 5008
jdaggett@1662 5009 <td>visual
jdaggett@1662 5010
jdaggett@1662 5011 <tr>
jdaggett@1662 5012 <td>Computed value:
jdaggett@1662 5013
jdaggett@1662 5014 <td>as specified
jdaggett@7377 5015
jdaggett@7377 5016 <tr>
jdaggett@7377 5017 <td>Animatable:
jdaggett@7377 5018
jdaggett@7377 5019 <td>no
jdaggett@1662 5020 </table>
jdaggett@2474 5021
jdaggett@2474 5022 <p>This property provides low-level control over OpenType font features. It
jdaggett@2474 5023 is intended as a way of providing access to font features that are not
jdaggett@5809 5024 widely used but are needed for a particular use case. A value of ‘<a
jdaggett@5809 5025 href="#normal2"><code class=property>normal</code></a>’ means that no
jdaggett@5809 5026 change in glyph selection or positioning occurs due to this property.
jdaggett@2474 5027
jdaggett@2474 5028 <p>
jdaggett@2474 5029
jdaggett@2474 5030 <pre>/* enable small caps and use second swash alternate */
jdaggett@2509 5031 font-feature-settings: "smcp", "swsh" 2;</pre>
jdaggett@2509 5032
jdaggett@2509 5033 <p>Feature tag values have the following syntax:
jdaggett@2474 5034
jdaggett@2474 5035 <pre
jdaggett@8225 5036 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 5037
jdaggett@5532 5038 <p>The &lt;string&gt; is a case-sensitive OpenType feature tag. As
jdaggett@5532 5039 specified in the OpenType specification, feature tags contain four ASCII
jdaggett@5532 5040 characters. Tag strings longer or shorter than four characters, or
jdaggett@5596 5041 containing characters outside the U+20–7E codepoint range are invalid.
jdaggett@5532 5042 User agents must not use a feature tag created by truncating or padding
jdaggett@5532 5043 the string to four characters. Feature tags need only match a feature tag
jdaggett@5532 5044 defined in the font, they are not limited to explicitly registered
jdaggett@5532 5045 OpenType features. Fonts defining custom feature tags should follow the <a
jdaggett@2474 5046 href="http://www.microsoft.com/typography/otspec/featuretags.htm">tag name
jdaggett@2474 5047 rules</a> defined in the OpenType specification <a
jdaggett@1662 5048 href="#OPENTYPE-FEATURES"
jdaggett@2474 5049 rel=biblioentry>[OPENTYPE-FEATURES]<!--{{!OPENTYPE-FEATURES}}--></a>.
jdaggett@2474 5050 Feature tags not present in the font are ignored; a user agent must not
jdaggett@2474 5051 attempt to synthesize fallback behavior based on these feature tags.
jdaggett@2474 5052
jdaggett@6436 5053 <p>This means that explicitly disabling the <span class=tag>kern</span>
jdaggett@6436 5054 feature will not affect the application of kerning data found in the
jdaggett@6436 5055 ‘<code class=property>kern</code>’ table (as opposed to kerning data
jdaggett@6436 5056 associated with the <span class=tag>kern</span> feature in the ‘<code
jdaggett@5946 5057 class=property>GPOS</code>’ table). Authors should use the ‘<a
jdaggett@5946 5058 href="#propdef-font-kerning"><code
jdaggett@5946 5059 class=property>font-kerning</code></a>’ property to explictly enable or
jdaggett@5946 5060 disable kerning since this property affects both types of kerning.
jdaggett@5946 5061
jdaggett@2509 5062 <p>If present, a value indicates an index used for glyph selection. An
jdaggett@2509 5063 &lt;integer&gt; value must be 0 or greater. A value of 0 indicates that
jdaggett@2509 5064 the feature is disabled. For boolean features, a value of 1 enables the
jdaggett@2509 5065 feature. For non-boolean features, a value of 1 or greater enables the
jdaggett@2509 5066 feature and indicates the feature selection index. A value of ‘<code
jdaggett@2509 5067 class=property>on</code>’ is synonymous with 1 and ‘<code
jdaggett@2509 5068 class=property>off</code>’ is synonymous with 0. If the value is
jdaggett@2509 5069 omitted, a value of 1 is assumed.
jdaggett@2474 5070
jdaggett@2474 5071 <pre>
jdaggett@2509 5072 font-feature-settings: "dlig" 1; /* dlig=1 enable discretionary ligatures */
jdaggett@2509 5073 font-feature-settings: "smcp" on; /* smcp=1 enable small caps */
jdaggett@2515 5074 font-feature-settings: 'c2sc'; /* c2sc=1 enable caps to small caps */
jdaggett@2509 5075 font-feature-settings: "liga" off; /* liga=0 no common ligatures */
jdaggett@2515 5076 font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms */
jdaggett@5530 5077 font-feature-settings: "tnum" "hist"; /* invalid, need a comma-delimited list */
jdaggett@5530 5078 font-feature-settings: "palin" off; /* good idea but invalid tagname */
jdaggett@2509 5079 font-feature-settings: "PKRN"; /* PKRN=1 enable custom feature */
jdaggett@5530 5080 font-feature-settings: dlig; /* invalid, tag must be a string */
jdaggett@2474 5081 </pre>
jdaggett@1662 5082
jdaggett@8272 5083 <p>When values greater than the range supported by the font are specified,
jdaggett@8272 5084 the behavior is explicitly undefined. For boolean features, in general
jdaggett@8272 5085 these will enable the feature. For non-boolean features, out of range
jdaggett@8272 5086 values will in general be equivalent to a 0 value. However, in both cases
jdaggett@8272 5087 the exact behavior will depend upon the way the font is designed
jdaggett@8272 5088 (specifically, which type of lookup is used to define the feature).
jdaggett@8272 5089
jdaggett@4624 5090 <p>Authors should generally use ‘<a href="#propdef-font-variant"><code
jdaggett@4624 5091 class=property>font-variant</code></a>’ and its related subproperties
jdaggett@4624 5092 whenever possible and only use this property for special cases where its
jdaggett@4624 5093 use is the only way of accessing a particular infrequently used font
jdaggett@4624 5094 feature.
jdaggett@2474 5095
jdaggett@2474 5096 <p>Although specifically defined for OpenType feature tags, feature tags
jdaggett@2474 5097 for other modern font formats that support font features may be added in
jdaggett@5530 5098 the future. Where possible, features defined for other font formats should
jdaggett@5530 5099 attempt to follow the pattern of registered OpenType tags.
jdaggett@2509 5100
jdaggett@1662 5101 <div class=example>
jdaggett@1662 5102 <p>The Japanese text below will be rendered with half-width kana
jdaggett@1662 5103 characters:</p>
jdaggett@1662 5104
jdaggett@1662 5105 <pre lang=ja>
jdaggett@2509 5106 body { font-feature-settings: "hwid"; /* Half-width OpenType feature */ }
jdaggett@1662 5107
jdaggett@1662 5108 &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 5109 </pre>
jdaggett@1662 5110 </div>
jdaggett@1662 5111
jdaggett@2118 5112 <h3 id=font-language-override-prop><span class=secno>6.13 </span>Font
jdaggett@1732 5113 language override: the <a
jdaggett@1732 5114 href="#propdef-font-language-override">font-language-override</a> property</h3>
jdaggett@1732 5115
jdaggett@5809 5116 <table class=propdef id=namefont-language-overridevaluenormal-lt>
jdaggett@1662 5117 <tbody>
jdaggett@1662 5118 <tr>
jdaggett@1662 5119 <td>Name:
jdaggett@1662 5120
jdaggett@1732 5121 <td><dfn id=propdef-font-language-override>font-language-override</dfn>
jdaggett@1662 5122
jdaggett@1662 5123 <tr>
jdaggett@1662 5124 <td>Value:
jdaggett@1662 5125
jdaggett@5809 5126 <td>normal | &lt;string&gt;
jdaggett@1662 5127
jdaggett@1662 5128 <tr>
jdaggett@1662 5129 <td>Initial:
jdaggett@1662 5130
jdaggett@1662 5131 <td>normal
jdaggett@1662 5132
jdaggett@1662 5133 <tr>
jdaggett@1662 5134 <td>Applies to:
jdaggett@1662 5135
jdaggett@1662 5136 <td>all elements
jdaggett@1662 5137
jdaggett@1662 5138 <tr>
jdaggett@1662 5139 <td>Inherited:
jdaggett@1662 5140
jdaggett@1662 5141 <td>yes
jdaggett@1662 5142
jdaggett@1662 5143 <tr>
jdaggett@1662 5144 <td>Percentages:
jdaggett@1662 5145
jdaggett@1662 5146 <td>N/A
jdaggett@1662 5147
jdaggett@1662 5148 <tr>
jdaggett@1662 5149 <td>Media:
jdaggett@1662 5150
jdaggett@1662 5151 <td>visual
jdaggett@1662 5152
jdaggett@1662 5153 <tr>
jdaggett@1662 5154 <td>Computed value:
jdaggett@1662 5155
jdaggett@1662 5156 <td>as specified
jdaggett@7377 5157
jdaggett@7377 5158 <tr>
jdaggett@7377 5159 <td>Animatable:
jdaggett@7377 5160
jdaggett@7377 5161 <td>no
jdaggett@1662 5162 </table>
jdaggett@1662 5163
jdaggett@5809 5164 <p>The value of ‘<a href="#normal2"><code
jdaggett@8276 5165 class=property>normal</code></a>’ specifies that when rendering with
jdaggett@8276 5166 OpenType fonts the content language of the element is used to infer the
jdaggett@8276 5167 OpenType language system. The value of the &lt;string&gt; is a single
jdaggett@8276 5168 three-letter OpenType <a
jdaggett@1662 5169 href="http://www.microsoft.com/typography/otspec/languagetags.htm">language
jdaggett@1662 5170 system tag</a>, defined in the layout tag registry of the OpenType
jdaggett@8276 5171 specification. It indicates the OpenType language system to be used
jdaggett@8276 5172 instead of the language system implied by the language of the element.
jdaggett@1662 5173
jdaggett@1662 5174 <div class=example>
jdaggett@7179 5175 <p>The <a href="http://www.un.org/en/documents/udhr/index.shtml">Universal
jdaggett@1662 5176 Declaration of Human Rights</a> has been translated into a wide variety
jdaggett@1662 5177 of languages. In Turkish, Article 9 of this document might be marked up
jdaggett@1662 5178 as below:</p>
jdaggett@1662 5179
jdaggett@1662 5180 <pre lang=tr>&lt;body lang="tr">
jdaggett@1662 5181
jdaggett@1662 5182 &lt;h4>Madde 9&lt;/h4>
jdaggett@1662 5183 &lt;p>Hiç kimse keyfi olarak tutuklanamaz, alıkonulanamaz veya sürülemez.&lt;/p>
jdaggett@1662 5184 </pre>
jdaggett@1662 5185
jdaggett@1662 5186 <p>Here the user agent uses the value of the ‘<code
jdaggett@1662 5187 class=property>lang</code>’ attribute when rendering text and
jdaggett@1662 5188 appropriately renders this text without ‘<code
jdaggett@4624 5189 class=property>fi</code>’ ligatures. There is no need to use the ‘<a
jdaggett@4624 5190 href="#propdef-font-language-override"><code
jdaggett@4624 5191 class=property>font-language-override</code></a>’ property.</p>
jdaggett@1662 5192
jdaggett@1662 5193 <p>However, a given font may lack support for a specific language. In this
jdaggett@1662 5194 situation authors may need to use the typographic conventions of a
jdaggett@1662 5195 related language that are supported by that font:</p>
jdaggett@1662 5196
jdaggett@1662 5197 <pre lang=mk>&lt;body lang="mk"> &lt;!-- Macedonian lang code --&gt;
jdaggett@1662 5198
jdaggett@1732 5199 body { font-language-override: "SRB"; /* Serbian OpenType language tag */ }
jdaggett@1662 5200
jdaggett@1662 5201 &lt;h4>Члeн 9&lt;/h4>
jdaggett@1662 5202 &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 5203
jdaggett@1662 5204 </pre>
jdaggett@1662 5205
jdaggett@1662 5206 <p>The Macedonian text here will be rendered using Serbian typographic
jdaggett@1662 5207 conventions, with the assumption that the font specified supports
jdaggett@1662 5208 Serbian.</p>
jdaggett@1662 5209 </div>
jdaggett@1662 5210
jdaggett@6176 5211 <p><a id=rendering-considerations></a>
jdaggett@6176 5212
jdaggett@6699 5213 <h2 id=font-feature-resolution><span class=secno>7 </span>Font Feature
jdaggett@6699 5214 Resolution</h2>
jdaggett@6176 5215
jdaggett@6176 5216 <p>As described in the previous section, font features can be enabled in a
jdaggett@6176 5217 variety of ways, either via the use of ‘<a
jdaggett@6176 5218 href="#propdef-font-variant"><code
jdaggett@6176 5219 class=property>font-variant</code></a>’ or ‘<a
jdaggett@6176 5220 href="#propdef-font-feature-settings"><code
jdaggett@6176 5221 class=property>font-feature-settings</code></a>’ in a style rule or
jdaggett@7096 5222 within an <code>@font-face</code> rule. The resolution order for the union
jdaggett@7096 5223 of these settings is defined below. Features defined via CSS properties
jdaggett@7096 5224 are applied on top of layout engine default features.
jdaggett@6176 5225
jdaggett@6699 5226 <h3 id=default-features><span class=secno>7.1 </span>Default features</h3>
jdaggett@6699 5227
jdaggett@6176 5228 <p>For OpenType fonts, user agents must enable the default features defined
jdaggett@6436 5229 in the OpenType documentation for a given script and writing mode.
jdaggett@6436 5230 Required ligatures, common ligatures and contextual forms must be enabled
jdaggett@6436 5231 by default (OpenType features: <span class=tag>rlig, liga, clig,
jdaggett@6436 5232 calt</span>), along with localized forms (OpenType feature: <span
jdaggett@6436 5233 class=tag>locl</span>), and features required for proper display of
jdaggett@6436 5234 composed characters and marks (OpenType features: <span class=tag>ccmp,
jdaggett@6436 5235 mark, mkmk</span>). These features must always be enabled, even when the
jdaggett@6176 5236 value of the ‘<a href="#propdef-font-variant"><code
jdaggett@6176 5237 class=property>font-variant</code></a>’ and ‘<a
jdaggett@6176 5238 href="#propdef-font-feature-settings"><code
jdaggett@6176 5239 class=property>font-feature-settings</code></a>’ properties is ‘<a
jdaggett@6436 5240 href="#normal2"><code class=property>normal</code></a>’. Individual
jdaggett@7377 5241 features are only disabled when explicitly overridden by the author, as
jdaggett@7377 5242 when ‘<a href="#propdef-font-variant-ligatures"><code
jdaggett@6176 5243 class=property>font-variant-ligatures</code></a>’ is set to ‘<a
jdaggett@6176 5244 href="#no-common-ligatures"><code
jdaggett@7377 5245 class=property>no-common-ligatures</code></a>’. For handling complex
jdaggett@7377 5246 scripts such as <a
jdaggett@6176 5247 href="http://www.microsoft.com/typography/otfntdev/arabicot/features.aspx">Arabic</a>,
jdaggett@6176 5248 <a
jdaggett@6176 5249 href="http://www.microsoft.com/typography/otfntdev/mongolot/features.htm">Mongolian</a>
jdaggett@6176 5250 or <a
jdaggett@6176 5251 href="http://www.microsoft.com/typography/otfntdev/devanot/features.aspx">Devanagari</a>
jdaggett@6436 5252 additional features are required. For upright text within vertical text
jdaggett@6436 5253 runs, vertical alternates (OpenType feature: <span class=tag>vert</span>)
jdaggett@6436 5254 must be enabled.
jdaggett@1662 5255
jdaggett@6699 5256 <h3 id=feature-precedence><span class=secno>7.2 </span>Feature precedence</h3>
jdaggett@6699 5257
jdaggett@3571 5258 <p>General and font specific font feature property settings are resolved in
jdaggett@6176 5259 the order below, in ascending precedence order. This ordering is used to
jdaggett@3511 5260 construct a combined list of font features that affect a given text run.
jdaggett@1662 5261
jdaggett@1662 5262 <ol>
jdaggett@6436 5263 <li>Font features enabled by default, including features required for a
jdaggett@6436 5264 given script.
jdaggett@6176 5265
jdaggett@7096 5266 <li>If the font is defined via an <code>@font-face</code> rule, the font
jdaggett@7096 5267 features implied by the font-variant descriptor in the
jdaggett@7096 5268 <code>@font-face</code> rule.
jdaggett@7096 5269
jdaggett@7096 5270 <li>If the font is defined via an <code>@font-face</code> rule, the font
jdaggett@7096 5271 features implied by the font-feature-settings descriptor in the
jdaggett@7096 5272 <code>@font-face</code> rule.
jdaggett@1662 5273
jdaggett@6176 5274 <li>Feature settings determined by properties other than ‘<a
jdaggett@6176 5275 href="#propdef-font-variant"><code
jdaggett@6176 5276 class=property>font-variant</code></a>’ or ‘<a
jdaggett@6176 5277 href="#propdef-font-feature-settings"><code
jdaggett@6176 5278 class=property>font-feature-settings</code></a>’. For example, setting
jdaggett@6176 5279 a non-default value for the ‘<code
jdaggett@6176 5280 class=property>letter-spacing</code>’ property disables ligatures.
jdaggett@6176 5281
jdaggett@4624 5282 <li>Font features implied by the value of the ‘<a
jdaggett@4624 5283 href="#propdef-font-variant"><code
jdaggett@4624 5284 class=property>font-variant</code></a>’ property, the related
jdaggett@4624 5285 font-variant subproperties and any other CSS property that may use
jdaggett@4624 5286 OpenType features (e.g. the ‘<a href="#propdef-font-kerning"><code
jdaggett@4624 5287 class=property>font-kerning</code></a>’ property).
jdaggett@4624 5288
jdaggett@4624 5289 <li>Font features implied by the value of ‘<a
jdaggett@4624 5290 href="#propdef-font-feature-settings"><code
jdaggett@4624 5291 class=property>font-feature-settings</code></a>’ property.
jdaggett@1662 5292 </ol>
jdaggett@1662 5293
jdaggett@3511 5294 <p>This ordering allows authors to set up a general set of defaults for
jdaggett@7096 5295 fonts within their <code>@font-face</code> rules, then override them with
jdaggett@7096 5296 property settings for specific elements. General property settings
jdaggett@7096 5297 override the settings in <code>@font-face</code> rules and low-level font
jdaggett@7096 5298 feature settings override ‘<a href="#propdef-font-variant"><code
jdaggett@4624 5299 class=property>font-variant</code></a>’ property settings.
jdaggett@1732 5300
jdaggett@1732 5301 <p>For situations where the combined list of font feature settings contains
jdaggett@3511 5302 more than one value for the same feature, the last value is used. When a
jdaggett@3511 5303 font lacks support for a given underlying font feature, text is simply
jdaggett@3511 5304 rendered as if that font feature was not enabled; font fallback does not
jdaggett@3511 5305 occur and no attempt is made to synthesize the feature except where
jdaggett@3511 5306 explicitly noted for specific properties.
jdaggett@1662 5307
jdaggett@6699 5308 <h3 id=feature-precedence-examples><span class=secno>7.3 </span>Feature
jdaggett@6699 5309 precedence examples</h3>
jdaggett@6699 5310
jdaggett@1662 5311 <div class=example>
jdaggett@1662 5312 <p>With the styles below, numbers are rendered proportionally when used
jdaggett@1662 5313 within a paragraph but are shown in tabular form within tables of prices:</p>
jdaggett@1662 5314
jdaggett@1662 5315 <pre>body {
jdaggett@1662 5316 font-variant-numeric: proportional-nums;
jdaggett@1662 5317 }
jdaggett@1662 5318
jdaggett@1662 5319 table.prices td {
jdaggett@1662 5320 font-variant-numeric: tabular-nums;
jdaggett@1662 5321 }
jdaggett@1662 5322 </pre>
jdaggett@1662 5323 </div>
jdaggett@1662 5324
jdaggett@1662 5325 <div class=example>
jdaggett@7096 5326 <p>When the font-variant descriptor is used within an
jdaggett@7096 5327 <code>@font-face</code> rule, it only applies to the font defined by that
jdaggett@7096 5328 rule.</p>
jdaggett@1662 5329
jdaggett@1662 5330 <pre>@font-face {
jdaggett@1662 5331 font-family: MainText;
jdaggett@2556 5332 src: url(http://example.com/font.ttf);
jdaggett@1662 5333 font-variant: oldstyle-nums proportional-nums styleset(1,3);
jdaggett@1662 5334 }
jdaggett@1662 5335
jdaggett@1662 5336 body {
jdaggett@1662 5337 font-family: MainText, Helvetica;
jdaggett@1662 5338 }
jdaggett@1662 5339
jdaggett@1662 5340 table.prices td {
jdaggett@1662 5341 font-variant-numeric: tabular-nums;
jdaggett@1662 5342 }
jdaggett@1662 5343 </pre>
jdaggett@1662 5344
jdaggett@1662 5345 <p>In this case, old-style numerals will be used throughout but only where
jdaggett@1662 5346 the font "MainText" is used. Just as in the previous example, tabular
jdaggett@4624 5347 values will be used in price tables since ‘<a
jdaggett@4624 5348 href="#tabular-nums"><code class=property>tabular-nums</code></a>’
jdaggett@4624 5349 appears in a general style rule and its use is mutually exclusive with
jdaggett@4624 5350 ‘<a href="#proportional-nums"><code
jdaggett@4624 5351 class=property>proportional-nums</code></a>’. Stylistic alternate sets
jdaggett@4624 5352 will only be used where MainText is used.</p>
jdaggett@1662 5353 </div>
jdaggett@1662 5354
jdaggett@1662 5355 <div class=example>
jdaggett@7096 5356 <p>The <code>@font-face</code> rule can also be used to access font
jdaggett@8198 5357 features in locally available fonts via the use of <code>local()</code>
jdaggett@8198 5358 in the ‘<a href="#descdef-src"><code class=property>src</code></a>’
jdaggett@8198 5359 descriptor of the <code>@font-face</code> definition:</p>
jdaggett@1662 5360
jdaggett@1662 5361 <pre>@font-face {
jdaggett@1662 5362 font-family: BodyText;
jdaggett@1662 5363 src: local("HiraMaruPro-W4");
jdaggett@1662 5364 font-variant: proportional-width;
jdaggett@2509 5365 font-feature-settings: "ital"; /* Latin italics within CJK text feature */
jdaggett@1662 5366 }
jdaggett@1662 5367
jdaggett@1662 5368 body { font-family: BodyText, serif; }
jdaggett@1662 5369 </pre>
jdaggett@1662 5370
jdaggett@1662 5371 <p>If available, a Japanese font "Hiragino Maru Gothic" will be used. When
jdaggett@1662 5372 text rendering occurs, Japanese kana will be proportionally spaced and
jdaggett@1662 5373 Latin text will be italicised. Text rendered with the fallback serif font
jdaggett@1662 5374 will use default rendering properties.</p>
jdaggett@1662 5375 </div>
jdaggett@1662 5376
jdaggett@1662 5377 <div class=example>
jdaggett@3460 5378 <p>In the example below, discretionary ligatures are enabled only for a
jdaggett@1662 5379 downloadable font but are disabled within spans of class "special":</p>
jdaggett@1662 5380
jdaggett@1662 5381 <pre>@font-face {
jdaggett@1662 5382 font-family: main;
jdaggett@1662 5383 src: url(fonts/ffmeta.woff) format("woff");
jdaggett@3460 5384 font-variant: discretionary-ligatures;
jdaggett@1662 5385 }
jdaggett@1662 5386
jdaggett@1662 5387 body { font-family: main, Helvetica; }
jdaggett@3460 5388 span.special { font-variant-ligatures: no-discretionary-ligatures; }
jdaggett@1662 5389 </pre>
jdaggett@1662 5390
jdaggett@7096 5391 <p>Adding an discretionary style rule with the <code>@font-face</code>
jdaggett@7096 5392 above:</p>
jdaggett@1662 5393
jdaggett@1662 5394 <pre>body { font-family: main, Helvetica; }
jdaggett@2509 5395 span { font-feature-settings: "dlig"; }
jdaggett@3460 5396 span.special { font-variant-ligatures: no-discretionary-ligatures; }
jdaggett@1662 5397 </pre>
jdaggett@1662 5398
jdaggett@3460 5399 <p>Within spans of class "special", discretionary ligatures <em>will</em>
jdaggett@4624 5400 be rendered. This is because both the ‘<a
jdaggett@4624 5401 href="#propdef-font-feature-settings"><code
jdaggett@4624 5402 class=property>font-feature-settings</code></a>’ and ‘<a
jdaggett@4624 5403 href="#propdef-font-variant-ligatures"><code
jdaggett@4624 5404 class=property>font-variant-ligatures</code></a>’ properties apply to
jdaggett@4624 5405 these spans. Although the ‘<code class=css>no-discretionary
jdaggett@4624 5406 ligatures</code>’ setting of ‘<a
jdaggett@4624 5407 href="#propdef-font-variant-ligatures"><code
jdaggett@4624 5408 class=property>font-variant-ligatures</code></a>’ effectively disables
jdaggett@6436 5409 the OpenType <span class=tag>dlig</span> feature, because the ‘<a
jdaggett@4624 5410 href="#propdef-font-feature-settings"><code
jdaggett@4624 5411 class=property>font-feature-settings</code></a>’ is resolved after
jdaggett@4624 5412 that, the ‘<code class=property>dlig</code>’ value reenables
jdaggett@4624 5413 discretionary ligatures.</p>
jdaggett@1662 5414 </div>
jdaggett@1244 5415
jdaggett@7021 5416 <h2 id=object-model><span class=secno>8 </span>Object Model</h2>
jdaggett@7021 5417
jdaggett@7021 5418 <p>The contents of <code>@font-face</code> and
jdaggett@7021 5419 <code>@font-feature-values</code> rules can be accessed via the following
jdaggett@7021 5420 extensions to the CSS Object Model.
jdaggett@7021 5421
jdaggett@7021 5422 <h3 id=om-fontface><span class=secno>8.1 </span>The <a
jdaggett@7021 5423 href="#cssfontfacerule"><code>CSSFontFaceRule</code></a> interface</h3>
jdaggett@7021 5424
jdaggett@7021 5425 <p>The <dfn id=cssfontfacerule>CSSFontFaceRule</dfn> interface represents a
jdaggett@7096 5426 <code>@font-face</code> rule.
jdaggett@7021 5427
jdaggett@7021 5428 <pre class=idl>
jdaggett@7021 5429 interface CSSFontFaceRule : CSSRule {
jdaggett@7041 5430 attribute DOMString family;
jdaggett@7041 5431 attribute DOMString src;
jdaggett@7041 5432 attribute DOMString style;
jdaggett@7041 5433 attribute DOMString weight;
jdaggett@7041 5434 attribute DOMString stretch;
jdaggett@7041 5435 attribute DOMString unicodeRange;
jdaggett@7041 5436 attribute DOMString variant;
jdaggett@7041 5437 attribute DOMString featureSettings;
jdaggett@7021 5438 }</pre>
jdaggett@7021 5439
jdaggett@7022 5440 <p>The DOM Level 2 Style specification <a href="#DOM-LEVEL-2-STYLE"
jdaggett@7022 5441 rel=biblioentry>[DOM-LEVEL-2-STYLE]<!--{{DOM-LEVEL-2-STYLE}}--></a>
jdaggett@7022 5442 defined a different variant of this rule. This definition supercedes that
jdaggett@7022 5443 one.
jdaggett@7021 5444
jdaggett@7021 5445 <h3 id=om-fontfeaturevalues><span class=secno>8.2 </span>The <a
jdaggett@7021 5446 href="#cssfontfeaturevaluesrule"><code>CSSFontFeatureValuesRule</code></a>
jdaggett@7021 5447 interface</h3>
jdaggett@7021 5448
jdaggett@7021 5449 <p>The <code>CSSRule</code> interface is extended as follows:
jdaggett@7021 5450
jdaggett@7021 5451 <pre class=idl>partial interface CSSRule {
jdaggett@7021 5452 const unsigned short FONT_FEATURE_VALUES_RULE = 14;
jdaggett@7021 5453 }</pre>
jdaggett@7021 5454
jdaggett@7021 5455 <p>The <dfn id=cssfontfeaturevaluesrule>CSSFontFeatureValuesRule</dfn>
jdaggett@7096 5456 interface represents a <code>@font-feature-values</code> rule.
jdaggett@7021 5457
jdaggett@7021 5458 <pre class=idl>interface CSSFontFeatureValuesRule : CSSRule {
jdaggett@7021 5459 readonly attribute DOMString familyList;
jdaggett@7021 5460 readonly attribute DOMString valueText;
jdaggett@7021 5461 };</pre>
jdaggett@7021 5462
jdaggett@7021 5463 <dl class=idl-attributes>
jdaggett@7021 5464 <dt><var>familyList</var> of type <code>DOMString</code>, readonly
jdaggett@7021 5465
jdaggett@7021 5466 <dd>The list of one or more font families for which a given set of feature
jdaggett@7021 5467 values is defined.
jdaggett@7021 5468
jdaggett@7021 5469 <dt><var>valueText</var> of type <code>DOMString</code>, readonly
jdaggett@7021 5470
jdaggett@7021 5471 <dd>Serialized set of feature values.
jdaggett@7021 5472 </dl>
jdaggett@7021 5473
jdaggett@2737 5474 <h2 class=no-num id=platform-props-to-css>Appendix A: Mapping platform font
jdaggett@1662 5475 properties to CSS properties</h2>
jdaggett@1662 5476
jdaggett@1662 5477 <p><em>This appendix is included as background for some of the problems and
jdaggett@890 5478 situations that are described in other sections. It should be viewed as
jdaggett@890 5479 informative only.</em>
jdaggett@890 5480
jdaggett@512 5481 <p>Font properties in CSS are designed to be independent of the underlying
jdaggett@512 5482 font formats used; they can be used to specify bitmap fonts, Type1 fonts,
jdaggett@890 5483 SVG fonts in addition to the common TrueType and OpenType fonts. But there
jdaggett@1244 5484 are facets of the TrueType and OpenType formats that often cause confusion
jdaggett@2556 5485 for authors and present challenges to implementers on different platforms.
jdaggett@1244 5486
jdaggett@1244 5487 <p>Originally developed at Apple, TrueType was designed as an outline font
jdaggett@1244 5488 format for both screen and print. Microsoft joined Apple in developing the
jdaggett@1244 5489 TrueType format and both platforms have supported TrueType fonts since
jdaggett@1244 5490 then. Font data in the TrueType format consists of a set of tables
jdaggett@1244 5491 distinguished with common four-letter tag names, each containing a
jdaggett@1244 5492 specific type of data. For example, naming information, including
jdaggett@1244 5493 copyright and license information, is stored in the ‘<code
jdaggett@7311 5494 class=property>name</code>’ table. The <a
jdaggett@7311 5495 href="#character-map"><em>character map</em></a> (‘<code
jdaggett@1244 5496 class=property>cmap</code>’) table contains a mapping of character
jdaggett@1244 5497 encodings to glyphs. Apple later added additional tables for supporting
jdaggett@1244 5498 enhanced typographic functionality; these are now called Apple Advanced
jdaggett@1244 5499 Typography, or AAT, fonts. Microsoft and Adobe developed a separate set of
jdaggett@1662 5500 tables for advanced typography and called their format OpenType <a
jdaggett@1662 5501 href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>.
jdaggett@890 5502
jdaggett@890 5503 <p>In many cases the font data used under Microsoft Windows or Linux is
jdaggett@890 5504 slightly different from the data used under Apple's Mac OS X because the
jdaggett@6694 5505 TrueType format allowed for explicit variation across platforms. This
jdaggett@7311 5506 includes font metrics, names and <a href="#character-map"><em>character
jdaggett@7311 5507 map</em></a> data.
jdaggett@6694 5508
jdaggett@6694 5509 <p>Specifically, font family name data is handled differently across
jdaggett@6694 5510 platforms. For TrueType and OpenType fonts these names are contained in
jdaggett@6694 5511 the ‘<code class=property>name</code>’ table, in name records with
jdaggett@8276 5512 name ID 1. Mulitple names can be stored for different locales, but
jdaggett@6694 5513 Microsoft recommends fonts always include at least a US English version of
jdaggett@6694 5514 the name. On Windows, Microsoft made the decision for backwards
jdaggett@6694 5515 compatibility to limit this family name to a maximum of four faces; for
jdaggett@6694 5516 larger groupings the "preferred family" (name ID 16) or "WWS family" (name
jdaggett@6694 5517 ID 21) can be used. Other platforms such as OSX don't have this
jdaggett@8276 5518 limitation, so the family name is used to define all possible groupings.
jdaggett@6694 5519
jdaggett@6694 5520 <p>Other name table data provides names used to uniquely identify a
jdaggett@6694 5521 specific face within a family. The full font name (name ID 4) and the
jdaggett@8276 5522 Postscript name (name ID 6) describe a single face uniquely. For example,
jdaggett@8276 5523 the bold face of the Gill Sans family has a fullname of "Gill Sans Bold"
jdaggett@8276 5524 and a Postscript name of "GillSans-Bold". There can be multiple localized
jdaggett@8276 5525 versions of the fullname for a given face, but the Postscript name is
jdaggett@1244 5526 always a unique name made from a limited set of ASCII characters.
jdaggett@1244 5527
jdaggett@1244 5528 <p>On various platforms, different names are used to search for a font. For
jdaggett@1244 5529 example, with the Windows GDI CreateIndirectFont API, either a family or
jdaggett@8276 5530 fullname can be used to lookup a face, while on Mac OS X the
jdaggett@8095 5531 CTFontCreateWithName API call is used to lookup a given face using the
jdaggett@8095 5532 fullname and Postscript name. Under Linux, the fontconfig API allows fonts
jdaggett@8095 5533 to be searched using any of these names. In situations where platform
jdaggett@8095 5534 API's automatically substitute other font choices, it may be necessary to
jdaggett@8095 5535 verify a returned font matches a given name.
jdaggett@1244 5536
jdaggett@1244 5537 <p>The weight of a given face can be determined via the usWeightClass field
jdaggett@1244 5538 of the OS/2 table or inferred from the style name (name ID 2). Likewise,
jdaggett@1244 5539 the width can be determined via the usWidthClass of the OS/2 table or
jdaggett@6694 5540 inferred from the style name. For historical reasons related to synthetic
jdaggett@6694 5541 bolding at weights 200 or lower with the Windows GDI API, font designers
jdaggett@6694 5542 have sometimes skewed values in the OS/2 table to avoid these weights.
jdaggett@1244 5543
jdaggett@1244 5544 <p>Rendering complex scripts that use contextual shaping such as Thai,
jdaggett@1244 5545 Arabic and Devanagari requires features present only in OpenType or AAT
jdaggett@1244 5546 fonts. Currently, complex script rendering is supported on Windows and
jdaggett@7521 5547 Linux using OpenType font features while both OpenType and AAT font
jdaggett@7521 5548 features are used under Mac OS X.
jdaggett@1244 5549
jdaggett@2472 5550 <h2 class=no-num id=ch-ch-ch-changes>Changes</h2>
jdaggett@2472 5551
jdaggett@2472 5552 <h3 class=no-num id=recent-changes> Changes from the <a
jdaggett@7451 5553 href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/">February 2013
jdaggett@7242 5554 CSS3 Fonts Working Draft</a></h3>
jdaggett@2472 5555
jdaggett@2472 5556 <p>Major changes include:
jdaggett@2472 5557
jdaggett@2472 5558 <ul>
jdaggett@7521 5559 <li>Moved font load events into a separate <a
jdaggett@7521 5560 href="http://dev.w3.org/csswg/css3-font-load-events/">spec</a>
jdaggett@7679 5561
jdaggett@7679 5562 <li>Tightened error handling rules for <code>@font-feature-values</code>
jdaggett@7679 5563 rules
jdaggett@8031 5564
jdaggett@8031 5565 <li>Added grammar productions for <code>@font-face</code> and
jdaggett@8031 5566 <code>@font-feature-values</code> rules
jdaggett@8095 5567
jdaggett@8095 5568 <li>Tightened definition of synthetic oblique
jdaggett@8225 5569
jdaggett@8225 5570 <li>Revised definition of ‘<a href="#descdef-unicode-range"><code
jdaggett@8225 5571 class=property>unicode-range</code></a>’ descriptor
jdaggett@2472 5572 </ul>
jdaggett@2472 5573
jdaggett@529 5574 <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
jdaggett@529 5575
jdaggett@1662 5576 <p>I'd like to thank Tal Leming, Jonathan Kew and Christopher Slye for all
jdaggett@1662 5577 their help and feedback. John Hudson was kind enough to take the time to
jdaggett@2472 5578 explain the subtleties of OpenType language tags and provided the example
jdaggett@2472 5579 of character variant usage for displaying text on Byzantine seals. Ken
jdaggett@2472 5580 Lunde and Eric Muller provided valuable feedback on CJK OpenType features
jdaggett@2472 5581 and Unicode variation selectors. The idea for supporting font features by
jdaggett@2472 5582 using font-variant subproperties originated with Håkon Wium Lie, Adam
jdaggett@5890 5583 Twardoch and Tal Leming. Elika Etemad supplied some of the initial design
jdaggett@7521 5584 ideas for the <code>@font-feature-values</code> rule. Thanks also to House
jdaggett@7355 5585 Industries for allowing the use of Ed Interlock in the discretionary
jdaggett@7355 5586 ligatures example.
jdaggett@1662 5587
jdaggett@529 5588 <p>A special thanks to Robert Bringhurst for the sublime mind expansion
jdaggett@529 5589 that is <em>The Elements of Typographic Style</em>.
jdaggett@529 5590
jdaggett@7242 5591 <h2 class=no-num id=conformance> Conformance</h2>
jdaggett@7242 5592
jdaggett@7242 5593 <h3 class=no-num id=conventions> Document Conventions</h3>
jdaggett@7242 5594
jdaggett@7242 5595 <p>Conformance requirements are expressed with a combination of descriptive
jdaggett@7242 5596 assertions and RFC 2119 terminology. The key words “MUST”, “MUST
jdaggett@7242 5597 NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
jdaggett@7242 5598 “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
jdaggett@7242 5599 normative parts of this document are to be interpreted as described in RFC
jdaggett@7242 5600 2119. However, for readability, these words do not appear in all uppercase
jdaggett@7242 5601 letters in this specification.
jdaggett@7242 5602
jdaggett@7242 5603 <p>All of the text of this specification is normative except sections
jdaggett@7242 5604 explicitly marked as non-normative, examples, and notes. <a
jdaggett@7242 5605 href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
jdaggett@7242 5606
jdaggett@7242 5607 <p>Examples in this specification are introduced with the words “for
jdaggett@7242 5608 example” or are set apart from the normative text with
jdaggett@7242 5609 <code>class="example"</code>, like this:
jdaggett@7242 5610
jdaggett@7242 5611 <div class=example>
jdaggett@7242 5612 <p>This is an example of an informative example.
jdaggett@7242 5613 </div>
jdaggett@7242 5614
jdaggett@7242 5615 <p>Informative notes begin with the word “Note” and are set apart from
jdaggett@7242 5616 the normative text with <code>class="note"</code>, like this:
jdaggett@7242 5617
jdaggett@7242 5618 <p class=note>Note, this is an informative note.
jdaggett@7242 5619
jdaggett@7242 5620 <h3 class=no-num id=conformance-classes> Conformance Classes</h3>
jdaggett@7242 5621
jdaggett@7242 5622 <p>Conformance to CSS Fonts Level 3 Module is defined for three conformance
jdaggett@7242 5623 classes:
jdaggett@7242 5624
jdaggett@7242 5625 <dl>
jdaggett@7243 5626 <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
jdaggett@7242 5627 sheet</dfn>
jdaggett@7242 5628
jdaggett@7242 5629 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
jdaggett@7242 5630 style sheet</a>.
jdaggett@7242 5631
jdaggett@7243 5632 <dt><dfn id=renderer>renderer</dfn>
jdaggett@7242 5633
jdaggett@7242 5634 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
jdaggett@7242 5635 that interprets the semantics of a style sheet and renders documents that
jdaggett@7242 5636 use them.
jdaggett@7242 5637
jdaggett@7242 5638 <dt><dfn id=authoring-tool>authoring tool</dfn>
jdaggett@7242 5639
jdaggett@7242 5640 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
jdaggett@7242 5641 that writes a style sheet.
jdaggett@7242 5642 </dl>
jdaggett@7242 5643
jdaggett@7242 5644 <p>A style sheet is conformant to CSS Fonts Level 3 Module if all of its
jdaggett@7242 5645 declarations that use properties defined in this module have values that
jdaggett@7242 5646 are valid according to the generic CSS grammar and the individual grammars
jdaggett@7242 5647 of each property as given in this module.
jdaggett@7242 5648
jdaggett@7242 5649 <p>A renderer is conformant to CSS Fonts Level 3 Module if, in addition to
jdaggett@7242 5650 interpreting the style sheet as defined by the appropriate specifications,
jdaggett@7242 5651 it supports all the features defined by CSS Fonts Level 3 Module by
jdaggett@7242 5652 parsing them correctly and rendering the document accordingly. However,
jdaggett@7242 5653 the inability of a UA to correctly render a document due to limitations of
jdaggett@7242 5654 the device does not make the UA non-conformant. (For example, a UA is not
jdaggett@7242 5655 required to render color on a monochrome monitor.)
jdaggett@7242 5656
jdaggett@7242 5657 <p>An authoring tool is conformant to CSS Fonts Level 3 Module if it writes
jdaggett@7242 5658 style sheets that are syntactically correct according to the generic CSS
jdaggett@7242 5659 grammar and the individual grammars of each feature in this module, and
jdaggett@7242 5660 meet all other conformance requirements of style sheets as described in
jdaggett@7242 5661 this module.
jdaggett@7242 5662
jdaggett@7242 5663 <h3 class=no-num id=partial> Partial Implementations</h3>
jdaggett@7242 5664
jdaggett@7242 5665 <p>So that authors can exploit the forward-compatible parsing rules to
jdaggett@7242 5666 assign fallback values, CSS renderers <strong>must</strong> treat as
jdaggett@7242 5667 invalid (and <a
jdaggett@7242 5668 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
jdaggett@7242 5669 appropriate</a>) any at-rules, properties, property values, keywords, and
jdaggett@7242 5670 other syntactic constructs for which they have no usable level of support.
jdaggett@7242 5671 In particular, user agents <strong>must not</strong> selectively ignore
jdaggett@7242 5672 unsupported component values and honor supported values in a single
jdaggett@7242 5673 multi-value property declaration: if any value is considered invalid (as
jdaggett@7242 5674 unsupported values must be), CSS requires that the entire declaration be
jdaggett@7242 5675 ignored.
jdaggett@7242 5676
jdaggett@7242 5677 <h3 class=no-num id=experimental> Experimental Implementations</h3>
jdaggett@7242 5678
jdaggett@7242 5679 <p>To avoid clashes with future CSS features, the CSS2.1 specification
jdaggett@7242 5680 reserves a <a
jdaggett@7242 5681 href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
jdaggett@7242 5682 syntax</a> for proprietary and experimental extensions to CSS.
jdaggett@7242 5683
jdaggett@7242 5684 <p>Prior to a specification reaching the Candidate Recommendation stage in
jdaggett@7242 5685 the W3C process, all implementations of a CSS feature are considered
jdaggett@7242 5686 experimental. The CSS Working Group recommends that implementations use a
jdaggett@7242 5687 vendor-prefixed syntax for such features, including those in W3C Working
jdaggett@7242 5688 Drafts. This avoids incompatibilities with future changes in the draft.
jdaggett@7242 5689
jdaggett@7242 5690 <h3 class=no-num id=testing> Non-Experimental Implementations</h3>
jdaggett@7242 5691
jdaggett@7242 5692 <p>Once a specification reaches the Candidate Recommendation stage,
jdaggett@7242 5693 non-experimental implementations are possible, and implementors should
jdaggett@7242 5694 release an unprefixed implementation of any CR-level feature they can
jdaggett@7242 5695 demonstrate to be correctly implemented according to spec.
jdaggett@7242 5696
jdaggett@7242 5697 <p>To establish and maintain the interoperability of CSS across
jdaggett@7242 5698 implementations, the CSS Working Group requests that non-experimental CSS
jdaggett@7242 5699 renderers submit an implementation report (and, if necessary, the
jdaggett@7242 5700 testcases used for that implementation report) to the W3C before releasing
jdaggett@7242 5701 an unprefixed implementation of any CSS features. Testcases submitted to
jdaggett@7242 5702 W3C are subject to review and correction by the CSS Working Group.
jdaggett@7242 5703
jdaggett@7242 5704 <p>Further information on submitting testcases and implementation reports
jdaggett@7242 5705 can be found from on the CSS Working Group's website at <a
jdaggett@7242 5706 href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
jdaggett@7242 5707 Questions should be directed to the <a
jdaggett@7242 5708 href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
jdaggett@7242 5709 mailing list.
jdaggett@7242 5710
jdaggett@484 5711 <h2 class=no-num id=references>References</h2>
jdaggett@484 5712
jdaggett@1662 5713 <h3 class=no-num id=normative-references>Normative References</h3>
jdaggett@484 5714 <!--begin-normative-->
jdaggett@484 5715 <!-- Sorted by label -->
jdaggett@484 5716
jdaggett@484 5717 <dl class=bibliography>
jdaggett@8031 5718 <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
jdaggett@484 5719 <!---->
jdaggett@531 5720
jdaggett@2461 5721 <dt id=CHARMOD>[CHARMOD]
jdaggett@2461 5722
jdaggett@2461 5723 <dd>Martin J. Dürst; et al. <a
jdaggett@2737 5724 href="http://www.w3.org/TR/2005/REC-charmod-20050215/"><cite>Character
jdaggett@2461 5725 Model for the World Wide Web 1.0: Fundamentals.</cite></a> 15 February
jdaggett@2461 5726 2005. W3C Recommendation. URL: <a
jdaggett@2737 5727 href="http://www.w3.org/TR/2005/REC-charmod-20050215/">http://www.w3.org/TR/2005/REC-charmod-20050215/</a>
jdaggett@2461 5728 </dd>
jdaggett@2461 5729 <!---->
jdaggett@2461 5730
jdaggett@2457 5731 <dt id=CORS>[CORS]
jdaggett@1662 5732
jdaggett@1662 5733 <dd>Anne van Kesteren. <a
jdaggett@7242 5734 href="http://www.w3.org/TR/2013/CR-cors-20130129/"><cite>Cross-Origin
jdaggett@7242 5735 Resource Sharing.</cite></a> 29 January 2013. W3C Candidate
jdaggett@7242 5736 Recommendation. (Work in progress.) URL: <a
jdaggett@7242 5737 href="http://www.w3.org/TR/2013/CR-cors-20130129/">http://www.w3.org/TR/2013/CR-cors-20130129/</a>
jdaggett@1662 5738 </dd>
jdaggett@1662 5739 <!---->
jdaggett@1662 5740
jdaggett@3041 5741 <dt id=CSS21>[CSS21]
jdaggett@3041 5742
jdaggett@3041 5743 <dd>Bert Bos; et al. <a
jdaggett@8031 5744 href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
jdaggett@3041 5745 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
jdaggett@3041 5746 2011. W3C Recommendation. URL: <a
jdaggett@8031 5747 href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
jdaggett@3041 5748 </dd>
jdaggett@3041 5749 <!---->
jdaggett@3041 5750
jdaggett@5833 5751 <dt id=CSS3VAL>[CSS3VAL]
jdaggett@5833 5752
jdaggett@5833 5753 <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
jdaggett@6701 5754 href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS
jdaggett@6701 5755 Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate
jdaggett@6701 5756 Recommendation. (Work in progress.) URL: <a
jdaggett@6701 5757 href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a>
jdaggett@5833 5758 </dd>
jdaggett@5833 5759 <!---->
jdaggett@5833 5760
jdaggett@1662 5761 <dt id=HTML5>[HTML5]
jdaggett@1662 5762
jdaggett@1856 5763 <dd>Ian Hickson. <a
jdaggett@7242 5764 href="http://www.w3.org/TR/2012/CR-html5-20121217/"><cite>HTML5.</cite></a>
jdaggett@7242 5765 17 December 2012. W3C Candidate Recommendation. (Work in progress.) URL:
jdaggett@7242 5766 <a
jdaggett@7242 5767 href="http://www.w3.org/TR/2012/CR-html5-20121217/">http://www.w3.org/TR/2012/CR-html5-20121217/</a>
jdaggett@1662 5768 </dd>
jdaggett@1662 5769 <!---->
jdaggett@1662 5770
jdaggett@1662 5771 <dt id=OPEN-FONT-FORMAT>[OPEN-FONT-FORMAT]
jdaggett@1662 5772
jdaggett@1662 5773 <dd><a
jdaggett@1662 5774 href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip"><cite>Information
jdaggett@1662 5775 technology — Coding of audio-visual objects — Part 22: Open Font
jdaggett@1662 5776 Format.</cite></a> International Organization for Standardization.
jdaggett@1662 5777 ISO/IEC 14496-22:2009. URL: <a
jdaggett@1662 5778 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 5779 </dd>
jdaggett@1662 5780 <!---->
jdaggett@1662 5781
jdaggett@1662 5782 <dt id=OPENTYPE>[OPENTYPE]
jdaggett@1662 5783
jdaggett@1662 5784 <dd><a
jdaggett@1662 5785 href="http://www.microsoft.com/typography/otspec/default.htm"><cite>OpenType
jdaggett@1662 5786 specification.</cite></a> Microsoft. URL: <a
jdaggett@1662 5787 href="http://www.microsoft.com/typography/otspec/default.htm">http://www.microsoft.com/typography/otspec/default.htm</a>
jdaggett@1662 5788 </dd>
jdaggett@1662 5789 <!---->
jdaggett@1662 5790
jdaggett@1662 5791 <dt id=OPENTYPE-FEATURES>[OPENTYPE-FEATURES]
jdaggett@1662 5792
jdaggett@1662 5793 <dd><a
jdaggett@1662 5794 href="http://www.microsoft.com/typography/otspec/featurelist.htm"><cite>OpenType
jdaggett@1662 5795 feature registry.</cite></a> Microsoft. URL: <a
jdaggett@1662 5796 href="http://www.microsoft.com/typography/otspec/featurelist.htm">http://www.microsoft.com/typography/otspec/featurelist.htm</a>
jdaggett@1662 5797 </dd>
jdaggett@1662 5798 <!---->
jdaggett@1662 5799
jdaggett@7103 5800 <dt id=RFC2119>[RFC2119]
jdaggett@7103 5801
jdaggett@7103 5802 <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
jdaggett@7103 5803 words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
jdaggett@7103 5804 RFC 2119. URL: <a
jdaggett@7103 5805 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
jdaggett@7103 5806 </dd>
jdaggett@7103 5807 <!---->
jdaggett@7103 5808
jdaggett@2457 5809 <dt id=UAX15>[UAX15]
jdaggett@2457 5810
jdaggett@7242 5811 <dd>Mark Davis; Ken Whistler. <a
jdaggett@7242 5812 href="http://www.unicode.org/reports/tr15/"><cite>Unicode Normalization
jdaggett@7242 5813 Forms.</cite></a> 31 August 2012. Unicode Standard Annex #15. URL: <a
jdaggett@7242 5814 href="http://www.unicode.org/reports/tr15/">http://www.unicode.org/reports/tr15/</a>
jdaggett@2457 5815 </dd>
jdaggett@2457 5816 <!---->
jdaggett@2457 5817
jdaggett@1856 5818 <dt id=UAX29>[UAX29]
jdaggett@1856 5819
jdaggett@1856 5820 <dd>Mark Davis. <a
jdaggett@5809 5821 href="http://www.unicode.org/reports/tr29/"><cite>Unicode Text
jdaggett@7242 5822 Segmentation.</cite></a> 12 September 2012. Unicode Standard Annex #29.
jdaggett@2461 5823 URL: <a
jdaggett@5809 5824 href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a>
jdaggett@1856 5825 </dd>
jdaggett@1856 5826 <!---->
jdaggett@1856 5827
jdaggett@3041 5828 <dt id=UNICODE6>[UNICODE6]
jdaggett@531 5829
jdaggett@531 5830 <dd>The Unicode Consortium. <a
jdaggett@7242 5831 href="http://www.unicode.org/versions/Unicode6.2.0/"><cite>The Unicode
jdaggett@7242 5832 Standard, Version 6.2.0.</cite></a> Defined by: The Unicode Standard,
jdaggett@7242 5833 Version 6.2.0 URL: <a
jdaggett@7242 5834 href="http://www.unicode.org/versions/Unicode6.2.0/">http://www.unicode.org/versions/Unicode6.2.0/</a>
jdaggett@531 5835 </dd>
jdaggett@531 5836 <!---->
jdaggett@484 5837 </dl>
jdaggett@484 5838 <!--end-normative-->
jdaggett@3041 5839 <!--{{!CSS21}}-->
jdaggett@5833 5840 <!--{{!CSS3VAL}}-->
jdaggett@1662 5841 <!--{{!OPENTYPE}}-->
jdaggett@1662 5842 <!--{{!OPENTYPE-FEATURES}}-->
jdaggett@1662 5843 <!--{{!OPEN-FONT-FORMAT}}-->
jdaggett@3041 5844 <!--{{!UNICODE6}}-->
jdaggett@2457 5845 <!--{{!UAX15}}-->
jdaggett@1856 5846 <!--{{!UAX29}}-->
jdaggett@2457 5847 <!--{{!CORS}}-->
jdaggett@1662 5848 <!--{{!HTML5}}-->
jdaggett@2461 5849 <!--{{!CHARMOD}}-->
jdaggett@1662 5850
jdaggett@1662 5851 <h3 class=no-num id=other-references>Other References</h3>
jdaggett@484 5852 <!--begin-informative-->
jdaggett@484 5853 <!-- Sorted by label -->
jdaggett@484 5854
jdaggett@484 5855 <dl class=bibliography>
jdaggett@8031 5856 <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
jdaggett@484 5857 <!---->
jdaggett@484 5858
jdaggett@3042 5859 <dt id=AAT-FEATURES>[AAT-FEATURES]
jdaggett@3042 5860
jdaggett@3042 5861 <dd><a href="http://developer.apple.com/fonts/registry/"><cite>Apple
jdaggett@3042 5862 Advanced Typography font feature registry.</cite></a> Apple. URL: <a
jdaggett@3042 5863 href="http://developer.apple.com/fonts/registry/">http://developer.apple.com/fonts/registry/</a>
jdaggett@3042 5864 </dd>
jdaggett@3042 5865 <!---->
jdaggett@3042 5866
jdaggett@512 5867 <dt id=ARABIC-TYPO>[ARABIC-TYPO]
jdaggett@512 5868
jdaggett@513 5869 <dd>Huda Smitshuijzen AbiFares. <cite>Arabic Typography: A Comprehensive
jdaggett@1148 5870 Sourcebook.</cite> Saqi Books. 2001. ISBN 0-86356-347-3.</dd>
jdaggett@512 5871 <!---->
jdaggett@512 5872
jdaggett@3042 5873 <dt id=CHARMOD-NORM>[CHARMOD-NORM]
jdaggett@3042 5874
jdaggett@3042 5875 <dd>François Yergeau; et al. <a
jdaggett@5809 5876 href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/"><cite>Character
jdaggett@5809 5877 Model for the World Wide Web 1.0: Normalization.</cite></a> 1 May 2012.
jdaggett@5809 5878 W3C Working Draft. (Work in progress.) URL: <a
jdaggett@5809 5879 href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/">http://www.w3.org/TR/2012/WD-charmod-norm-20120501/</a>
jdaggett@3042 5880 </dd>
jdaggett@3042 5881 <!---->
jdaggett@3042 5882
jdaggett@1732 5883 <dt id=CJKV-INFO-PROCESSING>[CJKV-INFO-PROCESSING]
jdaggett@1732 5884
jdaggett@1732 5885 <dd>Ken Lunde. <cite>CJKV Information Processing, Second Edition.</cite>
jdaggett@1732 5886 O'Reilly Media, Inc. 2009. ISBN 0-596-51447-1.</dd>
jdaggett@1732 5887 <!---->
jdaggett@1732 5888
jdaggett@3460 5889 <dt id=CSS3-CONDITIONAL>[CSS3-CONDITIONAL]
jdaggett@3460 5890
jdaggett@3460 5891 <dd>L. David Baron. <a
jdaggett@7242 5892 href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/"><cite>CSS
jdaggett@7242 5893 Conditional Rules Module Level 3.</cite></a> 13 December 2012. W3C
jdaggett@3460 5894 Working Draft. (Work in progress.) URL: <a
jdaggett@7242 5895 href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/">http://www.w3.org/TR/2012/WD-css3-conditional-20121213/</a>
jdaggett@3460 5896 </dd>
jdaggett@3460 5897 <!---->
jdaggett@3460 5898
jdaggett@6701 5899 <dt id=CSS3TEXT>[CSS3TEXT]
jdaggett@6701 5900
jdaggett@6701 5901 <dd>Elika J. Etemad; Koji Ishii. <a
jdaggett@7041 5902 href="http://www.w3.org/TR/2012/WD-css3-text-20121113/"><cite>CSS Text
jdaggett@7041 5903 Module Level 3.</cite></a> 13 November 2012. W3C Working Draft. (Work in
jdaggett@6701 5904 progress.) URL: <a
jdaggett@7041 5905 href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">http://www.w3.org/TR/2012/WD-css3-text-20121113/</a>
jdaggett@6701 5906 </dd>
jdaggett@6701 5907 <!---->
jdaggett@6701 5908
jdaggett@1856 5909 <dt id=DIGITAL-TYPOGRAPHY>[DIGITAL-TYPOGRAPHY]
jdaggett@1856 5910
jdaggett@1856 5911 <dd>Richard Rubinstein. <cite>Digital Typography, An Introduction to Type
jdaggett@1856 5912 and Composition for Computer System Design.</cite> Addison-Wesley. 1988.
jdaggett@1856 5913 ISBN 0-201-17633-5.</dd>
jdaggett@1856 5914 <!---->
jdaggett@1856 5915
jdaggett@7022 5916 <dt id=DOM-LEVEL-2-STYLE>[DOM-LEVEL-2-STYLE]
jdaggett@7022 5917
jdaggett@7022 5918 <dd>Chris Wilson; Philippe Le Hégaret; Vidur Apparao. <a
jdaggett@7179 5919 href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/"><cite>Document
jdaggett@7022 5920 Object Model (DOM) Level 2 Style Specification.</cite></a> 13 November
jdaggett@7022 5921 2000. W3C Recommendation. URL: <a
jdaggett@7179 5922 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 5923 </dd>
jdaggett@7022 5924 <!---->
jdaggett@7022 5925
jdaggett@498 5926 <dt id=ELEMTYPO>[ELEMTYPO]
jdaggett@498 5927
jdaggett@498 5928 <dd>Robert Bringhurst. <cite>The Elements of Typographic Style, Version
jdaggett@7488 5929 4.</cite> Hartley &amp; Marks. 2013. ISBN 0-88179-212-8.</dd>
jdaggett@498 5930 <!---->
jdaggett@498 5931
jdaggett@513 5932 <dt id=LANGCULTTYPE>[LANGCULTTYPE]
jdaggett@513 5933
jdaggett@1148 5934 <dd>John D. Berry, Ed. <cite>Language Culture Type.</cite> Graphis. 2001.
jdaggett@1148 5935 ISBN 1-932026-01-0.</dd>
jdaggett@512 5936 <!---->
jdaggett@1662 5937
jdaggett@1662 5938 <dt id=OPENTYPE-FONT-GUIDE>[OPENTYPE-FONT-GUIDE]
jdaggett@1662 5939
jdaggett@1662 5940 <dd><a
jdaggett@3538 5941 href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf"><cite>OpenType
jdaggett@1662 5942 User Guide.</cite></a> FontShop International. URL: <a
jdaggett@3538 5943 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 5944 </dd>
jdaggett@1662 5945 <!---->
jdaggett@1856 5946
jdaggett@2527 5947 <dt id=RASTER-TRAGEDY>[RASTER-TRAGEDY]
jdaggett@2527 5948
jdaggett@2527 5949 <dd>Beat Stamm. <a href="http://www.rastertragedy.com/"><cite>The Raster
jdaggett@6659 5950 Tragedy at Low-Resolution Revisited.</cite></a> 7 December 2011. URL: <a
jdaggett@2527 5951 href="http://www.rastertragedy.com/">http://www.rastertragedy.com/</a></dd>
jdaggett@2527 5952 <!---->
jdaggett@2527 5953
jdaggett@1856 5954 <dt id=WINDOWS-GLYPH-PROC>[WINDOWS-GLYPH-PROC]
jdaggett@1856 5955
jdaggett@1856 5956 <dd>John Hudson. <a
jdaggett@1856 5957 href="http://www.microsoft.com/typography/developers/opentype/default.htm"><cite>Windows
jdaggett@1856 5958 Glyph Processing.</cite></a> Microsoft Typogrraphy. URL: <a
jdaggett@1856 5959 href="http://www.microsoft.com/typography/developers/opentype/default.htm">http://www.microsoft.com/typography/developers/opentype/default.htm</a>
jdaggett@1856 5960 </dd>
jdaggett@1856 5961 <!---->
jdaggett@484 5962 </dl>
jdaggett@484 5963 <!--end-informative-->
jdaggett@518 5964 <!--{{ARABIC-TYPO}}-->
jdaggett@1732 5965 <!--{{CJKV-INFO-PROCESSING}}-->
jdaggett@1856 5966 <!--{{DIGITAL-TYPOGRAPHY}}-->
jdaggett@7022 5967 <!--{{DOM-LEVEL-2-STYLE}}-->
jdaggett@518 5968 <!--{{ELEMTYPO}}-->
jdaggett@1856 5969 <!--{{LANGCULTTYPE}}-->
jdaggett@1662 5970 <!--{{OPENTYPE-FONT-GUIDE}}-->
jdaggett@2527 5971 <!--{{RASTER-TRAGEDY}}-->
jdaggett@1856 5972 <!--{{WINDOWS-GLYPH-PROC}}-->
jdaggett@3042 5973 <!--{{CHARMOD-NORM}}-->
jdaggett@3042 5974 <!--{{AAT-FEATURES}}-->
jdaggett@3460 5975 <!--{{CSS3-CONDITIONAL}}-->
jdaggett@6701 5976 <!--{{CSS3TEXT}}-->
jdaggett@484 5977
jdaggett@484 5978 <h2 class=no-num id=index>Index</h2>
jdaggett@484 5979 <!--begin-index-->
jdaggett@484 5980
jdaggett@484 5981 <ul class=indexlist>
jdaggett@8225 5982 <li><var>&lt;absolute-size&gt;</var>, <a href="#absolute-size-value"
jdaggett@7060 5983 title="&lt;absolute-size&gt;"><strong>3.5</strong></a>
jdaggett@890 5984
jdaggett@8225 5985 <li><var>&lt;common-lig-values&gt;</var>, <a href="#common-lig-values"
jdaggett@8225 5986 title="&lt;common-lig-values&gt;"><strong>6.4</strong></a>
jdaggett@2479 5987
jdaggett@2479 5988 <li><var>&lt;contextual-alt-values&gt;</var>, <a
jdaggett@8225 5989 href="#contextual-alt-values"
jdaggett@6176 5990 title="&lt;contextual-alt-values&gt;"><strong>6.4</strong></a>
jdaggett@2479 5991
jdaggett@8225 5992 <li><var>&lt;discretionary-lig-values&gt;</var>, <a
jdaggett@8225 5993 href="#discretionary-lig-values"
jdaggett@8225 5994 title="&lt;discretionary-lig-values&gt;"><strong>6.4</strong></a>
jdaggett@3460 5995
jdaggett@2479 5996 <li><var>&lt;east-asian-variant-values&gt;</var>, <a
jdaggett@8225 5997 href="#east-asian-variant-values"
jdaggett@2479 5998 title="&lt;east-asian-variant-values&gt;"><strong>6.10</strong></a>
jdaggett@2479 5999
jdaggett@2479 6000 <li><var>&lt;east-asian-width-values&gt;</var>, <a
jdaggett@8225 6001 href="#east-asian-width-values"
jdaggett@2479 6002 title="&lt;east-asian-width-values&gt;"><strong>6.10</strong></a>
jdaggett@2479 6003
jdaggett@8225 6004 <li><var>&lt;family-name&gt;</var>, <a href="#family-name-value"
jdaggett@8225 6005 title="&lt;family-name&gt;"><strong>3.1</strong></a>
jdaggett@8225 6006
jdaggett@8225 6007 <li><var>&lt;feature-tag-value&gt;</var>, <a href="#feature-tag-value"
jdaggett@2515 6008 title="&lt;feature-tag-value&gt;"><strong>6.12</strong></a>
jdaggett@2515 6009
jdaggett@8225 6010 <li><var>&lt;font-face-name&gt;</var>, <a href="#font-face-name-value"
jdaggett@7060 6011 title="&lt;font-face-name&gt;"><strong>4.3</strong></a>
jdaggett@4624 6012
jdaggett@4624 6013 <li><var>&lt;font-variant-css21&gt;</var>, <a
jdaggett@8225 6014 href="#font-variant-css21-values"
jdaggett@4624 6015 title="&lt;font-variant-css21&gt;"><strong>3.7</strong></a>
jdaggett@4624 6016
jdaggett@8225 6017 <li><var>&lt;generic-family&gt;</var>, <a href="#generic-family-value"
jdaggett@8225 6018 title="&lt;generic-family&gt;"><strong>3.1</strong></a>
jdaggett@8225 6019
jdaggett@8225 6020 <li><var>&lt;historical-lig-values&gt;</var>, <a
jdaggett@8225 6021 href="#historical-lig-values"
jdaggett@8225 6022 title="&lt;historical-lig-values&gt;"><strong>6.4</strong></a>
jdaggett@8225 6023
jdaggett@8225 6024 <li><var>&lt;length&gt;</var>, <a href="#length-size-value"
jdaggett@8225 6025 title="&lt;length&gt;"><strong>3.5</strong></a>
jdaggett@8225 6026
jdaggett@8225 6027 <li><var>&lt;number&gt;</var>, <a href="#aspect-ratio-value"
jdaggett@8225 6028 title="&lt;number&gt;"><strong>3.6</strong></a>
jdaggett@4624 6029
jdaggett@4624 6030 <li><var>&lt;numeric-figure-values&gt;</var>, <a
jdaggett@8225 6031 href="#numeric-figure-values"
jdaggett@4624 6032 title="&lt;numeric-figure-values&gt;"><strong>6.7</strong></a>
jdaggett@4624 6033
jdaggett@4624 6034 <li><var>&lt;numeric-fraction-values&gt;</var>, <a
jdaggett@8225 6035 href="#numeric-fraction-values"
jdaggett@4624 6036 title="&lt;numeric-fraction-values&gt;"><strong>6.7</strong></a>
jdaggett@4624 6037
jdaggett@4624 6038 <li><var>&lt;numeric-spacing-values&gt;</var>, <a
jdaggett@8225 6039 href="#numeric-spacing-values"
jdaggett@4624 6040 title="&lt;numeric-spacing-values&gt;"><strong>6.7</strong></a>
jdaggett@4624 6041
jdaggett@8225 6042 <li><var>&lt;percentage&gt;</var>, <a href="#percentage-size-value"
jdaggett@8225 6043 title="&lt;percentage&gt;"><strong>3.5</strong></a>
jdaggett@8225 6044
jdaggett@8225 6045 <li><var>&lt;relative-size&gt;</var>, <a href="#relative-size-value"
jdaggett@7060 6046 title="&lt;relative-size&gt;"><strong>3.5</strong></a>
jdaggett@7060 6047
jdaggett@8225 6048 <li><var>&lt;urange&gt;</var>, <a href="#urange-value"
jdaggett@8225 6049 title="&lt;urange&gt;"><strong>4.5</strong></a>
jdaggett@2479 6050
jdaggett@8031 6051 <li>@font-face, <a href="#font-face" title="@font-face">4.1</a>, <a
jdaggett@8031 6052 href="#font-face0" title="@font-face">4.3</a>
jdaggett@2479 6053
jdaggett@4624 6054 <li>all-petite-caps, <a href="#all-petite-caps"
jdaggett@4624 6055 title=all-petite-caps><strong>6.6</strong></a>
jdaggett@4624 6056
jdaggett@4624 6057 <li>all-small-caps, <a href="#all-small-caps"
jdaggett@4624 6058 title=all-small-caps><strong>6.6</strong></a>
jdaggett@4624 6059
jdaggett@8225 6060 <li>annotation, <a href="#annotation"
jdaggett@7060 6061 title=annotation><strong>6.8</strong></a>
jdaggett@4624 6062
jdaggett@4624 6063 <li>aspect value, <a href="#aspect-value0" title="aspect
jdaggett@4624 6064 value"><strong>3.6</strong></a>
jdaggett@4624 6065
jdaggett@7103 6066 <li>authoring tool, <a href="#authoring-tool" title="authoring
jdaggett@7243 6067 tool"><strong>#</strong></a>
jdaggett@7103 6068
jdaggett@7311 6069 <li>character map, <a href="#character-map" title="character
jdaggett@7311 6070 map"><strong>5.2</strong></a>
jdaggett@7311 6071
jdaggett@8225 6072 <li>character-variant, <a href="#character-variant"
jdaggett@7060 6073 title=character-variant><strong>6.8</strong></a>
jdaggett@4624 6074
jdaggett@4624 6075 <li>common-ligatures, <a href="#common-ligatures"
jdaggett@6176 6076 title=common-ligatures><strong>6.4</strong></a>
jdaggett@4624 6077
jdaggett@4624 6078 <li>contextual, <a href="#contextual"
jdaggett@6176 6079 title=contextual><strong>6.4</strong></a>
jdaggett@4624 6080
jdaggett@7021 6081 <li>CSSFontFaceRule, <a href="#cssfontfacerule"
jdaggett@7021 6082 title=CSSFontFaceRule><strong>8.1</strong></a>
jdaggett@7021 6083
jdaggett@7021 6084 <li>CSSFontFeatureValuesRule, <a href="#cssfontfeaturevaluesrule"
jdaggett@7021 6085 title=CSSFontFeatureValuesRule><strong>8.2</strong></a>
jdaggett@7021 6086
jdaggett@4624 6087 <li>cursive, definition of, <a href="#cursive0" title="cursive, definition
jdaggett@4624 6088 of"><strong>#</strong></a>
jdaggett@4624 6089
jdaggett@7232 6090 <li>default face, <a href="#default-face" title="default
jdaggett@7309 6091 face"><strong>5.2</strong></a>
jdaggett@7232 6092
jdaggett@8031 6093 <li>descriptor_declaration, <a href="#descriptordeclaration"
jdaggett@8031 6094 title="descriptor_declaration"><strong>4.1</strong></a>
jdaggett@8031 6095
jdaggett@4624 6096 <li>diagonal-fractions, <a href="#diagonal-fractions"
jdaggett@4624 6097 title=diagonal-fractions><strong>6.7</strong></a>
jdaggett@4624 6098
jdaggett@4624 6099 <li>discretionary-ligatures, <a href="#discretionary-ligatures"
jdaggett@6176 6100 title=discretionary-ligatures><strong>6.4</strong></a>
jdaggett@4624 6101
jdaggett@4624 6102 <li>fantasy, definition of, <a href="#fantasy0" title="fantasy, definition
jdaggett@4624 6103 of"><strong>#</strong></a>
jdaggett@4624 6104
jdaggett@8031 6105 <li>feature_type, <a href="#featuretype"
jdaggett@8031 6106 title="feature_type"><strong>6.9</strong></a>
jdaggett@8031 6107
jdaggett@8031 6108 <li>feature_value_block, <a href="#featurevalueblock"
jdaggett@8031 6109 title="feature_value_block"><strong>6.9</strong></a>
jdaggett@8031 6110
jdaggett@8031 6111 <li>feature_value_definition, <a href="#featurevaluedefinition"
jdaggett@8031 6112 title="feature_value_definition"><strong>6.9</strong></a>
jdaggett@7679 6113
jdaggett@4624 6114 <li>font, <a href="#propdef-font" title=font><strong>3.7</strong></a>
jdaggett@2472 6115
jdaggett@1662 6116 <li>font-family, <a href="#descdef-font-family"
jdaggett@4624 6117 title=font-family><strong>4.2</strong></a>, <a
jdaggett@1662 6118 href="#propdef-font-family" title=font-family><strong>3.1</strong></a>
jdaggett@1662 6119
jdaggett@7060 6120 <li>font-feature-settings, <a href="#propdef-font-feature-settings"
jdaggett@2118 6121 title=font-feature-settings><strong>6.12</strong></a>
jdaggett@1662 6122
jdaggett@7060 6123 <li>font-feature-settings (descriptor), <a
jdaggett@7060 6124 href="#descdef-font-feature-settings" title="font-feature-settings
jdaggett@8225 6125 (descriptor)"><strong>4.7</strong></a>
jdaggett@7060 6126
jdaggett@1662 6127 <li>font-kerning, <a href="#propdef-font-kerning"
jdaggett@1856 6128 title=font-kerning><strong>6.3</strong></a>
jdaggett@1662 6129
jdaggett@1732 6130 <li>font-language-override, <a href="#propdef-font-language-override"
jdaggett@2118 6131 title=font-language-override><strong>6.13</strong></a>
jdaggett@1662 6132
jdaggett@1662 6133 <li>font-size, <a href="#propdef-font-size"
jdaggett@1662 6134 title=font-size><strong>3.5</strong></a>
jdaggett@1662 6135
jdaggett@1662 6136 <li>font-size-adjust, <a href="#propdef-font-size-adjust"
jdaggett@1662 6137 title=font-size-adjust><strong>3.6</strong></a>
jdaggett@1662 6138
jdaggett@7060 6139 <li>font-stretch, <a href="#propdef-font-stretch"
jdaggett@7060 6140 title=font-stretch><strong>3.3</strong></a>
jdaggett@7060 6141
jdaggett@7060 6142 <li>font-stretch (descriptor), <a href="#descdef-font-stretch"
jdaggett@7060 6143 title="font-stretch (descriptor)"><strong>4.4</strong></a>
jdaggett@7060 6144
jdaggett@7060 6145 <li>font-style, <a href="#propdef-font-style"
jdaggett@1662 6146 title=font-style><strong>3.4</strong></a>
jdaggett@1662 6147
jdaggett@7060 6148 <li>font-style (descriptor), <a href="#descdef-font-style"
jdaggett@7060 6149 title="font-style (descriptor)"><strong>4.4</strong></a>
jdaggett@7060 6150
jdaggett@2487 6151 <li>font-synthesis, <a href="#propdef-font-synthesis"
jdaggett@2487 6152 title=font-synthesis><strong>3.8</strong></a>
jdaggett@2457 6153
jdaggett@7060 6154 <li>font-variant, <a href="#propdef-font-variant"
jdaggett@7060 6155 title=font-variant><strong>6.11</strong></a>
jdaggett@7060 6156
jdaggett@7060 6157 <li>font-variant (descriptor), <a href="#descdef-font-variant"
jdaggett@8225 6158 title="font-variant (descriptor)"><strong>4.7</strong></a>
jdaggett@1662 6159
jdaggett@1662 6160 <li>font-variant-alternates, <a href="#propdef-font-variant-alternates"
jdaggett@2118 6161 title=font-variant-alternates><strong>6.8</strong></a>
jdaggett@1662 6162
jdaggett@1662 6163 <li>font-variant-caps, <a href="#propdef-font-variant-caps"
jdaggett@2118 6164 title=font-variant-caps><strong>6.6</strong></a>
jdaggett@1732 6165
jdaggett@1662 6166 <li>font-variant-east-asian, <a href="#propdef-font-variant-east-asian"
jdaggett@2118 6167 title=font-variant-east-asian><strong>6.10</strong></a>
jdaggett@1662 6168
jdaggett@1662 6169 <li>font-variant-ligatures, <a href="#propdef-font-variant-ligatures"
jdaggett@6176 6170 title=font-variant-ligatures><strong>6.4</strong></a>
jdaggett@1662 6171
jdaggett@8276 6172 <li>font-variant-ligatures normal value, <a
jdaggett@8276 6173 href="#font-variant-ligatures-normal-value" title="font-variant-ligatures
jdaggett@8276 6174 normal value"><strong>6.4</strong></a>
jdaggett@8276 6175
jdaggett@1662 6176 <li>font-variant-numeric, <a href="#propdef-font-variant-numeric"
jdaggett@2118 6177 title=font-variant-numeric><strong>6.7</strong></a>
jdaggett@2118 6178
jdaggett@3460 6179 <li>font-variant-position, <a href="#propdef-font-variant-position"
jdaggett@6176 6180 title=font-variant-position><strong>6.5</strong></a>
jdaggett@3460 6181
jdaggett@7060 6182 <li>font-weight, <a href="#propdef-font-weight"
jdaggett@7060 6183 title=font-weight><strong>3.2</strong></a>
jdaggett@7060 6184
jdaggett@7060 6185 <li>font-weight (descriptor), <a href="#descdef-font-weight"
jdaggett@7060 6186 title="font-weight (descriptor)"><strong>4.4</strong></a>
jdaggett@1662 6187
jdaggett@8031 6188 <li>font_face_rule, <a href="#fontfacerule"
jdaggett@8031 6189 title="font_face_rule"><strong>4.1</strong></a>
jdaggett@8031 6190
jdaggett@8225 6191 <li>FONT_FACE_SYM, <a href="#fontfacesym"
jdaggett@8225 6192 title="FONT_FACE_SYM"><strong>4.1</strong></a>
jdaggett@8225 6193
jdaggett@8031 6194 <li>font_family_name, <a href="#fontfamilyname"
jdaggett@8031 6195 title="font_family_name"><strong>6.9</strong></a>
jdaggett@8031 6196
jdaggett@8031 6197 <li>font_family_name_list, <a href="#fontfamilynamelist"
jdaggett@8031 6198 title="font_family_name_list"><strong>6.9</strong></a>
jdaggett@8031 6199
jdaggett@8031 6200 <li>font_feature_values_rule, <a href="#fontfeaturevaluesrule"
jdaggett@8031 6201 title="font_feature_values_rule"><strong>6.9</strong></a>
jdaggett@8031 6202
jdaggett@8225 6203 <li>FONT_FEATURE_VALUES_SYM, <a href="#fontfeaturevaluessym"
jdaggett@8225 6204 title="FONT_FEATURE_VALUES_SYM"><strong>6.9</strong></a>
jdaggett@8225 6205
jdaggett@1662 6206 <li>full-width, <a href="#full-width"
jdaggett@2118 6207 title=full-width><strong>6.10</strong></a>
jdaggett@1662 6208
jdaggett@1662 6209 <li>historical-forms, <a href="#historical-forms"
jdaggett@2118 6210 title=historical-forms><strong>6.8</strong></a>
jdaggett@1662 6211
jdaggett@1662 6212 <li>historical-ligatures, <a href="#historical-ligatures"
jdaggett@6176 6213 title=historical-ligatures><strong>6.4</strong></a>
jdaggett@1732 6214
jdaggett@2118 6215 <li>jis04, <a href="#jis04" title=jis04><strong>6.10</strong></a>
jdaggett@2118 6216
jdaggett@2118 6217 <li>jis78, <a href="#jis78" title=jis78><strong>6.10</strong></a>
jdaggett@2118 6218
jdaggett@2118 6219 <li>jis83, <a href="#jis83" title=jis83><strong>6.10</strong></a>
jdaggett@2118 6220
jdaggett@2118 6221 <li>jis90, <a href="#jis90" title=jis90><strong>6.10</strong></a>
jdaggett@1662 6222
jdaggett@1662 6223 <li>lining-nums, <a href="#lining-nums"
jdaggett@2118 6224 title=lining-nums><strong>6.7</strong></a>
jdaggett@890 6225
jdaggett@890 6226 <li>monospace, definition of, <a href="#monospace0" title="monospace,
jdaggett@890 6227 definition of"><strong>#</strong></a>
jdaggett@890 6228
jdaggett@1662 6229 <li>no-common-ligatures, <a href="#no-common-ligatures"
jdaggett@6176 6230 title=no-common-ligatures><strong>6.4</strong></a>
jdaggett@1662 6231
jdaggett@1662 6232 <li>no-contextual, <a href="#no-contextual"
jdaggett@6176 6233 title=no-contextual><strong>6.4</strong></a>
jdaggett@1662 6234
jdaggett@3460 6235 <li>no-discretionary-ligatures, <a href="#no-discretionary-ligatures"
jdaggett@6176 6236 title=no-discretionary-ligatures><strong>6.4</strong></a>
jdaggett@3460 6237
jdaggett@1662 6238 <li>no-historical-ligatures, <a href="#no-historical-ligatures"
jdaggett@6176 6239 title=no-historical-ligatures><strong>6.4</strong></a>
jdaggett@1662 6240
jdaggett@8276 6241 <li>none, <a href="#font-variant-ligatures-none-value"
jdaggett@8276 6242 title=none><strong>6.4</strong></a>
jdaggett@8276 6243
jdaggett@5809 6244 <li>normal, <a href="#normal" title=normal><strong>6.6</strong></a>, <a
jdaggett@5809 6245 href="#normal0" title=normal><strong>6.7</strong></a>, <a href="#normal1"
jdaggett@5809 6246 title=normal><strong>6.8</strong></a>, <a href="#normal2"
jdaggett@5809 6247 title=normal><strong>6.10</strong></a>
jdaggett@5809 6248
jdaggett@1662 6249 <li>oldstyle-nums, <a href="#oldstyle-nums"
jdaggett@2118 6250 title=oldstyle-nums><strong>6.7</strong></a>
jdaggett@2118 6251
jdaggett@3638 6252 <li>ordinal, <a href="#ordinal" title=ordinal><strong>6.7</strong></a>
jdaggett@3638 6253
jdaggett@8225 6254 <li>ornaments, <a href="#ornaments"
jdaggett@7060 6255 title=ornaments><strong>6.8</strong></a>
jdaggett@2118 6256
jdaggett@1662 6257 <li>petite-caps, <a href="#petite-caps"
jdaggett@2118 6258 title=petite-caps><strong>6.6</strong></a>
jdaggett@1662 6259
jdaggett@1662 6260 <li>proportional-nums, <a href="#proportional-nums"
jdaggett@2118 6261 title=proportional-nums><strong>6.7</strong></a>
jdaggett@1662 6262
jdaggett@1662 6263 <li>proportional-width, <a href="#proportional-width"
jdaggett@2118 6264 title=proportional-width><strong>6.10</strong></a>
jdaggett@512 6265
jdaggett@7243 6266 <li>renderer, <a href="#renderer" title=renderer><strong>#</strong></a>
jdaggett@7103 6267
jdaggett@3638 6268 <li>ruby, <a href="#ruby" title=ruby><strong>6.10</strong></a>
jdaggett@1662 6269
jdaggett@890 6270 <li>sans-serif, definition of, <a href="#sans-serif0" title="sans-serif,
jdaggett@890 6271 definition of"><strong>#</strong></a>
jdaggett@890 6272
jdaggett@890 6273 <li>serif, definition of, <a href="#serif0" title="serif, definition
jdaggett@890 6274 of"><strong>#</strong></a>
jdaggett@890 6275
jdaggett@2504 6276 <li>simplified, <a href="#simplified"
jdaggett@2504 6277 title=simplified><strong>6.10</strong></a>
jdaggett@1662 6278
jdaggett@1662 6279 <li>slashed-zero, <a href="#slashed-zero"
jdaggett@2118 6280 title=slashed-zero><strong>6.7</strong></a>
jdaggett@1662 6281
jdaggett@1662 6282 <li>small-caps, <a href="#small-caps"
jdaggett@2118 6283 title=small-caps><strong>6.6</strong></a>
jdaggett@1662 6284
jdaggett@1662 6285 <li>src, <a href="#descdef-src" title=src><strong>4.3</strong></a>
jdaggett@1662 6286
jdaggett@1662 6287 <li>stacked-fractions, <a href="#stacked-fractions"
jdaggett@2118 6288 title=stacked-fractions><strong>6.7</strong></a>
jdaggett@2118 6289
jdaggett@7103 6290 <li>style sheet
jdaggett@7103 6291 <ul>
jdaggett@7103 6292 <li>as conformance class, <a href="#style-sheet" title="style sheet, as
jdaggett@7243 6293 conformance class"><strong>#</strong></a>
jdaggett@7103 6294 </ul>
jdaggett@7103 6295
jdaggett@8225 6296 <li>styleset, <a href="#styleset" title=styleset><strong>6.8</strong></a>
jdaggett@8225 6297
jdaggett@8225 6298 <li>stylistic, <a href="#stylistic"
jdaggett@7060 6299 title=stylistic><strong>6.8</strong></a>
jdaggett@7060 6300
jdaggett@8225 6301 <li>swash, <a href="#swash" title=swash><strong>6.8</strong></a>
jdaggett@1662 6302
jdaggett@1662 6303 <li>tabular-nums, <a href="#tabular-nums"
jdaggett@2118 6304 title=tabular-nums><strong>6.7</strong></a>
jdaggett@1662 6305
jdaggett@1662 6306 <li>titling-caps, <a href="#titling-caps"
jdaggett@2118 6307 title=titling-caps><strong>6.6</strong></a>
jdaggett@1856 6308
jdaggett@2504 6309 <li>traditional, <a href="#traditional"
jdaggett@2504 6310 title=traditional><strong>6.10</strong></a>
jdaggett@2118 6311
jdaggett@2118 6312 <li>unicase, <a href="#unicase" title=unicase><strong>6.6</strong></a>
jdaggett@1662 6313
jdaggett@1662 6314 <li>unicode-range, <a href="#descdef-unicode-range"
jdaggett@890 6315 title=unicode-range><strong>4.5</strong></a>
jdaggett@7311 6316
jdaggett@7311 6317 <li>weight, <a href="#weight" title=weight><strong>2</strong></a>
jdaggett@7311 6318
jdaggett@7311 6319 <li>width, <a href="#width" title=width><strong>2</strong></a>
jdaggett@484 6320 </ul>
jdaggett@484 6321 <!--end-index-->
jdaggett@484 6322
jdaggett@484 6323 <h2 class=no-num id=property-index>Property index</h2>
jdaggett@890 6324 <!--begin-properties-->
jdaggett@484 6325
jdaggett@484 6326 <table class=proptable>
jdaggett@484 6327 <thead>
jdaggett@484 6328 <tr>
jdaggett@484 6329 <th>Property
jdaggett@484 6330
jdaggett@484 6331 <th>Values
jdaggett@484 6332
jdaggett@484 6333 <th>Initial
jdaggett@484 6334
jdaggett@1148 6335 <th>Applies to
jdaggett@484 6336
jdaggett@484 6337 <th>Inh.
jdaggett@484 6338
jdaggett@484 6339 <th>Percentages
jdaggett@484 6340
jdaggett@484 6341 <th>Media
jdaggett@484 6342
jdaggett@484 6343 <tbody>
jdaggett@3460 6344 <tr>
jdaggett@3460 6345 <th><a class=property href="#propdef-font">font</a>
jdaggett@484 6346
jdaggett@8225 6347 <td>[ [ &lt;‘font-style’&gt; || &lt;font-variant-css21&gt; ||
jdaggett@8225 6348 &lt;‘font-weight’&gt; || &lt;‘font-stretch’ ]?
jdaggett@8225 6349 &lt;‘font-size’&gt; [ / &lt;‘line-height’&gt; ]?
jdaggett@8225 6350 &lt;‘font-family’&gt; ] | caption | icon | menu | message-box |
jdaggett@7020 6351 small-caption | status-bar
jdaggett@484 6352
jdaggett@484 6353 <td>see individual properties
jdaggett@484 6354
jdaggett@484 6355 <td>all elements
jdaggett@484 6356
jdaggett@484 6357 <td>yes
jdaggett@484 6358
jdaggett@484 6359 <td>see individual properties
jdaggett@484 6360
jdaggett@484 6361 <td>visual
jdaggett@484 6362
jdaggett@3460 6363 <tr>
jdaggett@3460 6364 <th><a class=property href="#descdef-font-family">font-family</a>
jdaggett@484 6365
jdaggett@8225 6366 <td>[ &lt;family-name&gt; | &lt;generic-family&gt; ] #
jdaggett@484 6367
jdaggett@484 6368 <td>depends on user agent
jdaggett@484 6369
jdaggett@484 6370 <td>all elements
jdaggett@484 6371
jdaggett@484 6372 <td>yes
jdaggett@484 6373
jdaggett@484 6374 <td>N/A
jdaggett@484 6375
jdaggett@484 6376 <td>visual
jdaggett@484 6377
jdaggett@3460 6378 <tr>
jdaggett@3460 6379 <th><a class=property
jdaggett@1662 6380 href="#propdef-font-feature-settings">font-feature-settings</a>
jdaggett@1662 6381
jdaggett@8225 6382 <td>normal | &lt;feature-tag-value&gt; #
jdaggett@1662 6383
jdaggett@1662 6384 <td>normal
jdaggett@1662 6385
jdaggett@1662 6386 <td>all elements
jdaggett@1662 6387
jdaggett@1662 6388 <td>yes
jdaggett@1662 6389
jdaggett@1662 6390 <td>N/A
jdaggett@1662 6391
jdaggett@1662 6392 <td>visual
jdaggett@1662 6393
jdaggett@3460 6394 <tr>
jdaggett@3460 6395 <th><a class=property href="#propdef-font-kerning">font-kerning</a>
jdaggett@1662 6396
jdaggett@1856 6397 <td>auto | normal | none
jdaggett@1856 6398
jdaggett@1856 6399 <td>auto
jdaggett@1662 6400
jdaggett@1662 6401 <td>all elements
jdaggett@1662 6402
jdaggett@1662 6403 <td>yes
jdaggett@1662 6404
jdaggett@1662 6405 <td>N/A
jdaggett@1662 6406
jdaggett@1662 6407 <td>visual
jdaggett@1662 6408
jdaggett@3460 6409 <tr>
jdaggett@3460 6410 <th><a class=property
jdaggett@1732 6411 href="#propdef-font-language-override">font-language-override</a>
jdaggett@1662 6412
jdaggett@5809 6413 <td>normal | &lt;string&gt;
jdaggett@1662 6414
jdaggett@1662 6415 <td>normal
jdaggett@1662 6416
jdaggett@1662 6417 <td>all elements
jdaggett@1662 6418
jdaggett@1662 6419 <td>yes
jdaggett@1662 6420
jdaggett@1662 6421 <td>N/A
jdaggett@1662 6422
jdaggett@1662 6423 <td>visual
jdaggett@1662 6424
jdaggett@3460 6425 <tr>
jdaggett@3460 6426 <th><a class=property href="#propdef-font-size">font-size</a>
jdaggett@484 6427
jdaggett@8225 6428 <td>&lt;absolute-size&gt; | &lt;relative-size&gt; | &lt;length&gt; |
jdaggett@8225 6429 &lt;percentage&gt;
jdaggett@484 6430
jdaggett@484 6431 <td>medium
jdaggett@484 6432
jdaggett@484 6433 <td>all elements
jdaggett@484 6434
jdaggett@484 6435 <td>yes
jdaggett@484 6436
jdaggett@484 6437 <td>refer to parent element's font size
jdaggett@484 6438
jdaggett@484 6439 <td>visual
jdaggett@484 6440
jdaggett@3460 6441 <tr>
jdaggett@3460 6442 <th><a class=property
jdaggett@1662 6443 href="#propdef-font-size-adjust">font-size-adjust</a>
jdaggett@484 6444
jdaggett@8225 6445 <td>none | auto | &lt;number&gt;
jdaggett@484 6446
jdaggett@484 6447 <td>none
jdaggett@484 6448
jdaggett@484 6449 <td>all elements
jdaggett@484 6450
jdaggett@484 6451 <td>yes
jdaggett@484 6452
jdaggett@554 6453 <td>N/A
jdaggett@484 6454
jdaggett@484 6455 <td>visual
jdaggett@484 6456
jdaggett@3460 6457 <tr>
jdaggett@7060 6458 <th><a class=property href="#propdef-font-stretch">font-stretch</a>
jdaggett@1662 6459
jdaggett@1662 6460 <td>normal | ultra-condensed | extra-condensed | condensed |
jdaggett@1662 6461 semi-condensed | semi-expanded | expanded | extra-expanded |
jdaggett@5809 6462 ultra-expanded
jdaggett@484 6463
jdaggett@484 6464 <td>normal
jdaggett@484 6465
jdaggett@484 6466 <td>all elements
jdaggett@484 6467
jdaggett@484 6468 <td>yes
jdaggett@484 6469
jdaggett@484 6470 <td>N/A
jdaggett@484 6471
jdaggett@484 6472 <td>visual
jdaggett@484 6473
jdaggett@3460 6474 <tr>
jdaggett@7060 6475 <th><a class=property href="#propdef-font-style">font-style</a>
jdaggett@484 6476
jdaggett@5809 6477 <td>normal | italic | oblique
jdaggett@484 6478
jdaggett@484 6479 <td>normal
jdaggett@484 6480
jdaggett@484 6481 <td>all elements
jdaggett@484 6482
jdaggett@484 6483 <td>yes
jdaggett@484 6484
jdaggett@484 6485 <td>N/A
jdaggett@484 6486
jdaggett@484 6487 <td>visual
jdaggett@484 6488
jdaggett@3460 6489 <tr>
jdaggett@3460 6490 <th><a class=property href="#propdef-font-synthesis">font-synthesis</a>
jdaggett@2487 6491
jdaggett@2487 6492 <td>none | [ weight || style ]
jdaggett@2487 6493
jdaggett@2487 6494 <td>weight style
jdaggett@2457 6495
jdaggett@2457 6496 <td>all elements
jdaggett@2457 6497
jdaggett@2457 6498 <td>yes
jdaggett@2457 6499
jdaggett@2457 6500 <td>N/A
jdaggett@2457 6501
jdaggett@2457 6502 <td>visual
jdaggett@2457 6503
jdaggett@3460 6504 <tr>
jdaggett@3460 6505 <th><a class=property href="#propdef-font-variant">font-variant</a>
jdaggett@1662 6506
jdaggett@6436 6507 <td>normal | none | [ &lt;common-lig-values&gt; ||
jdaggett@3460 6508 &lt;discretionary-lig-values&gt; || &lt;historical-lig-values&gt; ||
jdaggett@3041 6509 &lt;contextual-alt-values&gt; || stylistic(&lt;feature-value-name&gt;)
jdaggett@8225 6510 || historical-forms || styleset(&lt;feature-value-name&gt; #) ||
jdaggett@8225 6511 character-variant(&lt;feature-value-name&gt; #) ||
jdaggett@5833 6512 swash(&lt;feature-value-name&gt;) ||
jdaggett@3041 6513 ornaments(&lt;feature-value-name&gt;) ||
jdaggett@4545 6514 annotation(&lt;feature-value-name&gt;) || [ small-caps | all-small-caps
jdaggett@6648 6515 | petite-caps | all-petite-caps | unicase | titling-caps ] ||
jdaggett@2509 6516 &lt;numeric-figure-values&gt; || &lt;numeric-spacing-values&gt; ||
jdaggett@3638 6517 &lt;numeric-fraction-values&gt; || ordinal || slashed-zero ||
jdaggett@3638 6518 &lt;east-asian-variant-values&gt; || &lt;east-asian-width-values&gt; ||
jdaggett@3638 6519 ruby ]
jdaggett@484 6520
jdaggett@484 6521 <td>normal
jdaggett@484 6522
jdaggett@484 6523 <td>all elements
jdaggett@484 6524
jdaggett@484 6525 <td>yes
jdaggett@484 6526
jdaggett@7377 6527 <td>see individual properties
jdaggett@484 6528
jdaggett@484 6529 <td>visual
jdaggett@484 6530
jdaggett@3460 6531 <tr>
jdaggett@3460 6532 <th><a class=property
jdaggett@1662 6533 href="#propdef-font-variant-alternates">font-variant-alternates</a>
jdaggett@1662 6534
jdaggett@6176 6535 <td>normal | [ stylistic(&lt;feature-value-name&gt;) || historical-forms
jdaggett@8225 6536 || styleset(&lt;feature-value-name&gt; #) ||
jdaggett@8225 6537 character-variant(&lt;feature-value-name&gt; #) ||
jdaggett@5833 6538 swash(&lt;feature-value-name&gt;) ||
jdaggett@3638 6539 ornaments(&lt;feature-value-name&gt;) ||
jdaggett@3638 6540 annotation(&lt;feature-value-name&gt;) ]
jdaggett@1662 6541
jdaggett@1662 6542 <td>normal
jdaggett@1662 6543
jdaggett@1662 6544 <td>all elements
jdaggett@1662 6545
jdaggett@1662 6546 <td>yes
jdaggett@1662 6547
jdaggett@1662 6548 <td>N/A
jdaggett@1662 6549
jdaggett@1662 6550 <td>visual
jdaggett@1662 6551
jdaggett@3460 6552 <tr>
jdaggett@3460 6553 <th><a class=property
jdaggett@1662 6554 href="#propdef-font-variant-caps">font-variant-caps</a>
jdaggett@1662 6555
jdaggett@5809 6556 <td>normal | small-caps | all-small-caps | petite-caps | all-petite-caps
jdaggett@6648 6557 | unicase | titling-caps
jdaggett@1662 6558
jdaggett@1662 6559 <td>normal
jdaggett@1662 6560
jdaggett@1662 6561 <td>all elements
jdaggett@1662 6562
jdaggett@1662 6563 <td>yes
jdaggett@1662 6564
jdaggett@1662 6565 <td>N/A
jdaggett@1662 6566
jdaggett@1662 6567 <td>visual
jdaggett@1662 6568
jdaggett@3460 6569 <tr>
jdaggett@3460 6570 <th><a class=property
jdaggett@1662 6571 href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
jdaggett@1662 6572
jdaggett@5809 6573 <td>normal | [ &lt;east-asian-variant-values&gt; ||
jdaggett@3638 6574 &lt;east-asian-width-values&gt; || ruby ]
jdaggett@1662 6575
jdaggett@1662 6576 <td>normal
jdaggett@1662 6577
jdaggett@1662 6578 <td>all elements
jdaggett@1662 6579
jdaggett@1662 6580 <td>yes
jdaggett@1662 6581
jdaggett@1662 6582 <td>N/A
jdaggett@1662 6583
jdaggett@1662 6584 <td>visual
jdaggett@1662 6585
jdaggett@3460 6586 <tr>
jdaggett@3460 6587 <th><a class=property
jdaggett@1662 6588 href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
jdaggett@1662 6589
jdaggett@8225 6590 <td>normal | none | [ &lt;common-lig-values&gt; ||
jdaggett@8225 6591 &lt;discretionary-lig-values&gt; || &lt;historical-lig-values&gt; ||
jdaggett@8225 6592 &lt;contextual-alt-values&gt; ]
jdaggett@1662 6593
jdaggett@1662 6594 <td>normal
jdaggett@1662 6595
jdaggett@1662 6596 <td>all elements
jdaggett@1662 6597
jdaggett@1662 6598 <td>yes
jdaggett@1662 6599
jdaggett@1662 6600 <td>N/A
jdaggett@1662 6601
jdaggett@1662 6602 <td>visual
jdaggett@1662 6603
jdaggett@3460 6604 <tr>
jdaggett@3460 6605 <th><a class=property
jdaggett@1662 6606 href="#propdef-font-variant-numeric">font-variant-numeric</a>
jdaggett@1662 6607
jdaggett@5809 6608 <td>normal | [ &lt;numeric-figure-values&gt; ||
jdaggett@1732 6609 &lt;numeric-spacing-values&gt; || &lt;numeric-fraction-values&gt; ||
jdaggett@3638 6610 ordinal || slashed-zero ]
jdaggett@1662 6611
jdaggett@1662 6612 <td>normal
jdaggett@1662 6613
jdaggett@1662 6614 <td>all elements
jdaggett@1662 6615
jdaggett@1662 6616 <td>yes
jdaggett@1662 6617
jdaggett@1662 6618 <td>N/A
jdaggett@1662 6619
jdaggett@1662 6620 <td>visual
jdaggett@1662 6621
jdaggett@3460 6622 <tr>
jdaggett@3460 6623 <th><a class=property
jdaggett@3460 6624 href="#propdef-font-variant-position">font-variant-position</a>
jdaggett@3460 6625
jdaggett@3638 6626 <td>normal | sub | super
jdaggett@3460 6627
jdaggett@3460 6628 <td>normal
jdaggett@3460 6629
jdaggett@3460 6630 <td>all elements
jdaggett@3460 6631
jdaggett@3460 6632 <td>yes
jdaggett@3460 6633
jdaggett@3460 6634 <td>N/A
jdaggett@3460 6635
jdaggett@3460 6636 <td>visual
jdaggett@3460 6637
jdaggett@3460 6638 <tr>
jdaggett@7060 6639 <th><a class=property href="#propdef-font-weight">font-weight</a>
jdaggett@484 6640
jdaggett@484 6641 <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600
jdaggett@5809 6642 | 700 | 800 | 900
jdaggett@484 6643
jdaggett@484 6644 <td>normal
jdaggett@484 6645
jdaggett@484 6646 <td>all elements
jdaggett@484 6647
jdaggett@484 6648 <td>yes
jdaggett@484 6649
jdaggett@484 6650 <td>N/A
jdaggett@484 6651
jdaggett@484 6652 <td>visual
jdaggett@484 6653 </table>
jdaggett@890 6654 <!--end-properties-->
jdaggett@5596 6655 <!--begin-descriptors-->
jdaggett@5596 6656
jdaggett@5596 6657 <table class=proptable>
jdaggett@5596 6658 <thead>
jdaggett@5596 6659 <tr>
jdaggett@5596 6660 <th>Descriptor
jdaggett@5596 6661
jdaggett@5596 6662 <th>Value
jdaggett@5596 6663
jdaggett@5596 6664 <th>Initial
jdaggett@5596 6665
jdaggett@5596 6666 <th>Percentages
jdaggett@5596 6667
jdaggett@5596 6668 <th>Media
jdaggett@5596 6669
jdaggett@5596 6670 <tbody>
jdaggett@5596 6671 <tr>
jdaggett@5596 6672 <th><a class=property href="#descdef-font-family">font-family</a>
jdaggett@5596 6673
jdaggett@8225 6674 <td>&lt;family-name&gt;
jdaggett@5596 6675
jdaggett@5596 6676 <td>N/A
jdaggett@5596 6677
jdaggett@5596 6678 <tr>
jdaggett@5596 6679 <th><a class=property
jdaggett@5596 6680 href="#propdef-font-feature-settings">font-feature-settings</a>
jdaggett@5596 6681
jdaggett@8225 6682 <td>normal | &lt;feature-tag-value&gt; #
jdaggett@5596 6683
jdaggett@5596 6684 <td>normal
jdaggett@5596 6685
jdaggett@5596 6686 <tr>
jdaggett@7060 6687 <th><a class=property href="#propdef-font-stretch">font-stretch</a>
jdaggett@5596 6688
jdaggett@5596 6689 <td>normal | ultra-condensed | extra-condensed | condensed |
jdaggett@5596 6690 semi-condensed | semi-expanded | expanded | extra-expanded |
jdaggett@5596 6691 ultra-expanded
jdaggett@5596 6692
jdaggett@5596 6693 <td>normal
jdaggett@5596 6694
jdaggett@5596 6695 <tr>
jdaggett@7060 6696 <th><a class=property href="#propdef-font-style">font-style</a>
jdaggett@5596 6697
jdaggett@5596 6698 <td>normal | italic | oblique
jdaggett@5596 6699
jdaggett@5596 6700 <td>normal
jdaggett@5596 6701
jdaggett@5596 6702 <tr>
jdaggett@5596 6703 <th><a class=property href="#propdef-font-variant">font-variant</a>
jdaggett@5596 6704
jdaggett@8225 6705 <td>normal | none | [ &lt;common-lig-values&gt; ||
jdaggett@5596 6706 &lt;discretionary-lig-values&gt; || &lt;historical-lig-values&gt; ||
jdaggett@5596 6707 &lt;contextual-alt-values&gt; || stylistic(&lt;feature-value-name&gt;)
jdaggett@8225 6708 || historical-forms || styleset(&lt;feature-value-name&gt; #) ||
jdaggett@8225 6709 character-variant(&lt;feature-value-name&gt; #) ||
jdaggett@5833 6710 swash(&lt;feature-value-name&gt;) ||
jdaggett@5596 6711 ornaments(&lt;feature-value-name&gt;) ||
jdaggett@5596 6712 annotation(&lt;feature-value-name&gt;) || [ small-caps | all-small-caps
jdaggett@6648 6713 | petite-caps | all-petite-caps | unicase | titling-caps ] ||
jdaggett@5596 6714 &lt;numeric-figure-values&gt; || &lt;numeric-spacing-values&gt; ||
jdaggett@5596 6715 &lt;numeric-fraction-values&gt; || ordinal || slashed-zero ||
jdaggett@5596 6716 &lt;east-asian-variant-values&gt; || &lt;east-asian-width-values&gt; ||
jdaggett@5596 6717 ruby ]
jdaggett@5596 6718
jdaggett@5596 6719 <td>normal
jdaggett@5596 6720
jdaggett@5596 6721 <tr>
jdaggett@7060 6722 <th><a class=property href="#propdef-font-weight">font-weight</a>
jdaggett@5596 6723
jdaggett@5596 6724 <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
jdaggett@5596 6725
jdaggett@5596 6726 <td>normal
jdaggett@5596 6727
jdaggett@5596 6728 <tr>
jdaggett@5596 6729 <th><a class=property href="#descdef-src">src</a>
jdaggett@5596 6730
jdaggett@8225 6731 <td>[ &lt;url> [format(&lt;string> #)]? | &lt;font-face-name&gt; ] #
jdaggett@5596 6732
jdaggett@5596 6733 <td>N/A
jdaggett@5596 6734
jdaggett@5596 6735 <tr>
jdaggett@5596 6736 <th><a class=property href="#descdef-unicode-range">unicode-range</a>
jdaggett@5596 6737
jdaggett@8225 6738 <td>&lt;urange&gt; #
jdaggett@5596 6739
jdaggett@5596 6740 <td>U+0-10FFFF
jdaggett@5596 6741 </table>
jdaggett@5596 6742 <!--end-descriptors-->
jdaggett@6648 6743 <script type="text/javascript">
jdaggett@6648 6744 window.onload = function () {
jdaggett@6648 6745 if (!("devicePixelRatio" in window && window.devicePixelRatio > 1)) return;
jdaggett@6648 6746 var i, hiresElements = document.getElementsByClassName("hires");
jdaggett@6648 6747 for (i = 0; i < hiresElements.length; i++) {
jdaggett@6648 6748 var h = hiresElements[i];
jdaggett@6648 6749 if (h.tagName != "IMG") continue;
jdaggett@6648 6750 var src = h.getAttribute("src");
jdaggett@6648 6751 var src2x = src.replace(/\.\w+$/, function(m) { return "@2x" + m; });
jdaggett@6648 6752 h.src = src2x;
jdaggett@6648 6753 }
jdaggett@6648 6754 }
jdaggett@6648 6755 </script>
jdaggett@484 6756 </html>
jdaggett@484 6757 <!-- Keep this comment at the end of the file
jdaggett@484 6758 Local variables:
jdaggett@484 6759 mode: sgml
jdaggett@484 6760 sgml-declaration:"~/SGML/HTML4.decl"
jdaggett@484 6761 sgml-default-doctype-name:"html"
jdaggett@484 6762 sgml-minimize-attributes:t
jdaggett@484 6763 sgml-nofill-elements:("pre" "style" "br")
jdaggett@484 6764 sgml-live-element-indicator:t
jdaggett@484 6765 sgml-omittag:nil
jdaggett@484 6766 sgml-shorttag:nil
jdaggett@484 6767 sgml-namecase-general:t
jdaggett@484 6768 sgml-general-insert-case:lower
jdaggett@484 6769 sgml-always-quote-attributes:t
jdaggett@484 6770 sgml-indent-step:nil
jdaggett@484 6771 sgml-indent-data:t
jdaggett@484 6772 sgml-parent-document:nil
jdaggett@484 6773 sgml-exposed-tags:nil
jdaggett@484 6774 sgml-local-catalogs:nil
jdaggett@484 6775 sgml-local-ecat-files:nil
jdaggett@484 6776 End:
jdaggett@484 6777 -->
jdaggett@1856 6778 <!--
jdaggett@1856 6779
jdaggett@1856 6780 to do:
jdaggett@1856 6781
jdaggett@1856 6782 - wording of OpenType family name handling
jdaggett@1856 6783 - handling combining sequences in the font matching algorithm
jdaggett@1856 6784 - fix-up fi ligature example
jdaggett@1856 6785
jdaggett@1856 6786 -->

mercurial