css-fonts/Fonts.html

Mon, 08 Jul 2013 15:00:18 +0900

author
John Daggett <jdaggett@mozilla.com>
date
Mon, 08 Jul 2013 15:00:18 +0900
changeset 8655
ab973f06eb50
parent 8654
aad9d3a5502b
child 8683
7236acf0b724
permissions
-rw-r--r--

[css3-fonts] yup, another wording tweak of map class methods

jdaggett@484 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
jdaggett@484 2 "http://www.w3.org/TR/html4/strict.dtd">
jdaggett@484 3
jdaggett@484 4 <html lang=en>
jdaggett@484 5 <head><meta content="text/html;charset=utf-8" http-equiv=Content-Type>
jdaggett@484 6
jdaggett@1244 7 <title>CSS Fonts Module Level 3</title>
jdaggett@484 8 <!--
jdaggett@484 9 FIXME when publishing: copy the current default.css and link to
jdaggett@484 10 "default.css" rather than "../default.css"
jdaggett@484 11 -->
jdaggett@484 12 <link href="../default.css" rel=stylesheet type="text/css">
jdaggett@4545 13 <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
jdaggett@4546 14 <!-- I'm just experimenting here, don't get your bee in a bonnet -->
jdaggett@4546 15 <script src="http://use.typekit.com/xon2bky.js"
jdaggett@4546 16 type="text/javascript"></script>
jdaggett@4546 17 <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
jdaggett@484 18
jdaggett@497 19 <style type="text/css">
jdaggett@4546 20
jdaggett@4547 21 body, th, td, h1, h2, h3, h4, h5, h6 {
jdaggett@4547 22 font-family: "myriad-pro", sans-serif !important;
jdaggett@4547 23 }
jdaggett@8277 24
jdaggett@524 25 body {
jdaggett@524 26 padding: 2em 70px 2em 70px;
jdaggett@524 27 }
jdaggett@4546 28
jdaggett@497 29 p + p, p.mtb {
jdaggett@497 30 margin-top: 0.8em;
jdaggett@497 31 text-indent: 0px;
jdaggett@497 32 }
jdaggett@6651 33
jdaggett@6651 34 #bolderlighter {
jdaggett@6651 35 width: 40%;
jdaggett@6651 36 }
jdaggett@6651 37
jdaggett@6651 38 #bolderlighter th {
jdaggett@6651 39 text-align: center;
jdaggett@6651 40 }
jdaggett@8277 41
jdaggett@7103 42 #fontformats td, #eventhandlers td, #fontformats th, #eventhandlers th {
jdaggett@1244 43 padding-right: 2em;
jdaggett@512 44 text-align: left;
jdaggett@512 45 }
jdaggett@8277 46
jdaggett@518 47 dd {
jdaggett@518 48 margin-bottom: 1em;
jdaggett@514 49 }
jdaggett@8277 50
jdaggett@516 51 #authors dd {
jdaggett@516 52 margin-bottom: 0;
jdaggett@516 53 }
jdaggett@8277 54
jdaggett@531 55 #fontstylematchingalg {
jdaggett@531 56 list-style-type: lower-alpha;
jdaggett@531 57 }
jdaggett@8277 58
jdaggett@531 59 #fontmatchingalg ul, #fontmatchingalg ol {
jdaggett@531 60 margin-top: 0.8em;
jdaggett@531 61 }
jdaggett@8277 62
jdaggett@531 63 #fontmatchingalg li + li {
jdaggett@531 64 margin-top: 0.8em;
jdaggett@531 65 }
jdaggett@8277 66
jdaggett@531 67 div.example {
jdaggett@531 68 padding: 1em;
jdaggett@531 69 margin-top: 1em;
jdaggett@531 70 }
jdaggett@531 71
jdaggett@531 72 div.example + div.example {
jdaggett@531 73 margin-top: 2em;
jdaggett@531 74 }
jdaggett@8277 75
jdaggett@531 76 div.figure {
jdaggett@531 77 page-break-inside: avoid;
jdaggett@531 78 }
jdaggett@1244 79
jdaggett@1662 80 pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em }
jdaggett@8277 81
jdaggett@8277 82 div.featex {
jdaggett@1662 83 width: 700px;
jdaggett@1662 84 }
jdaggett@8277 85
jdaggett@1662 86 div.featex img {
jdaggett@1662 87 margin: auto;
jdaggett@1662 88 display: block;
jdaggett@1662 89 }
jdaggett@6436 90
jdaggett@6436 91 span.tag {
jdaggett@6436 92 font-family: monospace;
jdaggett@6436 93 font-size: 120%;
jdaggett@6436 94 }
jdaggett@6648 95
jdaggett@6701 96 ol ol {
jdaggett@6701 97 list-style-type: lower-alpha;
jdaggett@6701 98 }
jdaggett@7060 99
jdaggett@7060 100 .idl-code {
jdaggett@7060 101 font-weight: bold;
jdaggett@7060 102 color: #c50;
jdaggett@7060 103 }
jdaggett@497 104 </style>
jdaggett@2556 105 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
jdaggett@2556 106 type="text/css">
peter@8369 107 <script defer=defer
jdaggett@8385 108 src="http://test.csswg.org/harness/annotate.js#CSS3-FONTS_DEV"
jdaggett@8385 109 type="text/javascript"></script>
jdaggett@497 110
jdaggett@484 111 <body>
jdaggett@484 112 <div class=head> <!--begin-logo-->
jdaggett@484 113 <p><a href="http://www.w3.org/"><img alt=W3C height=48
jdaggett@890 114 src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
jdaggett@890 115
jdaggett@901 116 <h1>CSS Fonts Module Level 3</h1>
jdaggett@901 117
jdaggett@8653 118 <h2 class="no-num no-toc" id=editors-draft-8-july-2013>Editor's Draft 8
jdaggett@8640 119 July 2013</h2>
jdaggett@484 120
jdaggett@516 121 <dl id=authors>
jdaggett@484 122 <dt>This version:
jdaggett@484 123
jdaggett@484 124 <dd><a
jdaggett@8031 125 href="http://dev.w3.org/csswg/css-fonts/">http://dev.w3.org/csswg/css-fonts/</a>
jdaggett@8653 126 <!-- <dd><a href="http://www.w3.org/TR/2013/ED-css-fonts-3-20130708/">http://www.w3.org/TR/2013/ED-css-fonts-3-20130708/</a> -->
jdaggett@484 127
jdaggett@484 128
jdaggett@484 129 <dt>Latest version:
jdaggett@484 130
jdaggett@484 131 <dd><a
jdaggett@8646 132 href="http://www.w3.org/TR/css3-fonts/">http://www.w3.org/TR/css-fonts-3/</a>
jdaggett@484 133
jdaggett@890 134 <dt>Latest editor's draft:
jdaggett@890 135
jdaggett@890 136 <dd><a
jdaggett@8031 137 href="http://dev.w3.org/csswg/css-fonts/">http://dev.w3.org/csswg/css-fonts/</a>
jdaggett@7488 138 (<a
jdaggett@8031 139 href="https://dvcs.w3.org/hg/csswg/log/tip/css-fonts/Fonts.html">change
jdaggett@7488 140 log</a>)
jdaggett@890 141
jdaggett@4624 142 <dt>Previous version:
jdaggett@890 143
jdaggett@890 144 <dd><a
jdaggett@7451 145 href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/">http://www.w3.org/TR/2013/WD-css3-fonts-20130212/</a>
jdaggett@4624 146
jdaggett@4624 147 <dt>Issues List:
jdaggett@4624 148
jdaggett@4624 149 <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/18">CSS3 Fonts
jdaggett@4624 150 issues in Tracker</a>
jdaggett@2556 151
jdaggett@2556 152 <dd><a
jdaggett@6648 153 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 154 Fonts issues in Bugzilla</a>
jdaggett@4624 155
jdaggett@8031 156 <dt>Discussion:
jdaggett@8031 157
jdaggett@8031 158 <dd><a
jdaggett@8031 159 href="mailto:www-style@w3.org?subject=%5Bcss-fonts%5D%20feedback">www-style@w3.org</a>
jdaggett@8031 160 with subject line “<kbd>[css-fonts] <var>… message topic
jdaggett@8031 161 …</var></kbd>” (<a
jdaggett@8031 162 href="http://lists.w3.org/Archives/Public/www-style/"
jdaggett@8031 163 rel=discussion>archives</a>)
jdaggett@890 164
jdaggett@890 165 <dt>Editor:
jdaggett@484 166
jdaggett@497 167 <dd><a href="mailto:jdaggett@mozilla.com">John Daggett (Mozilla)</a>
jdaggett@484 168 </dl>
jdaggett@484 169 <!--begin-copyright-->
jdaggett@484 170 <p class=copyright><a
jdaggett@484 171 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
jdaggett@7179 172 rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
jdaggett@5530 173 title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
jdaggett@5530 174 href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of
jdaggett@5530 175 Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr
jdaggett@1662 176 title="European Research Consortium for Informatics and
jdaggett@7244 177 Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>,
jdaggett@7244 178 <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C
jdaggett@7244 179 <a
jdaggett@484 180 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
jdaggett@484 181 <a
jdaggett@484 182 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
jdaggett@484 183 and <a
jdaggett@484 184 href="http://www.w3.org/Consortium/Legal/copyright-documents">document
jdaggett@484 185 use</a> rules apply.</p>
jdaggett@484 186 <!--end-copyright-->
jdaggett@484 187 <hr title="Separator for header">
jdaggett@484 188 </div>
jdaggett@525 189
jdaggett@484 190 <h2 class="no-num no-toc" id=abstract>Abstract</h2>
jdaggett@484 191
jdaggett@890 192 <p>This CSS3 module describes how font properties are specified and how
jdaggett@890 193 font resources are loaded dynamically. The contents of this specification
jdaggett@1244 194 are a consolidation of content previously divided into <a
jdaggett@3538 195 href="http://www.w3.org/TR/2002/WD-css3-fonts-20020802/">CSS3 Fonts</a>
jdaggett@3538 196 and <a href="http://www.w3.org/TR/2002/WD-css3-webfonts-20020802/">CSS3
jdaggett@7521 197 Web Fonts</a> modules. The description of font load events was moved into
jdaggett@8646 198 the <a href="http://dev.w3.org/csswg/css-font-load-events/">CSS3 Font Load
jdaggett@8646 199 Events</a> module.
jdaggett@484 200
jdaggett@484 201 <h2 class="no-num no-toc" id=status>Status of this document</h2>
jdaggett@484 202 <!--begin-status-->
jdaggett@484 203
jdaggett@484 204 <p>This is a public copy of the editors' draft. It is provided for
jdaggett@484 205 discussion only and may change at any moment. Its publication here does
jdaggett@484 206 not imply endorsement of its contents by W3C. Don't cite this document
jdaggett@484 207 other than as work in progress.
jdaggett@484 208
jdaggett@484 209 <p>The (<a
jdaggett@484 210 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
jdaggett@1662 211 mailing list <a
jdaggett@1662 212 href="mailto:www-style@w3.org?Subject=%5Bcss3-fonts%5D%20PUT%20SUBJECT%20HERE">
jdaggett@1662 213 www-style@w3.org</a> (see <a
jdaggett@1662 214 href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
jdaggett@1662 215 discussion of this specification. When sending e-mail, please put the text
jdaggett@1662 216 “css3-fonts” in the subject, preferably like this:
jdaggett@1148 217 “[<!---->css3-fonts<!---->] <em>…summary of comment…</em>”
jdaggett@484 218
jdaggett@8031 219 <p>This document was produced by the <a
jdaggett@8031 220 href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
jdaggett@8031 221 the <a href="http://www.w3.org/Style/">Style Activity</a>).
jdaggett@484 222
jdaggett@484 223 <p>This document was produced by a group operating under the <a
jdaggett@8031 224 href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
jdaggett@8031 225 2004 W3C Patent Policy</a>. W3C maintains a <a
jdaggett@8031 226 href="http://www.w3.org/2004/01/pp-impl/32061/status"
jdaggett@484 227 rel=disclosure>public list of any patent disclosures</a> made in
jdaggett@484 228 connection with the deliverables of the group; that page also includes
jdaggett@484 229 instructions for disclosing a patent. An individual who has actual
jdaggett@484 230 knowledge of a patent which the individual believes contains <a
jdaggett@8031 231 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
jdaggett@484 232 Claim(s)</a> must disclose the information in accordance with <a
jdaggett@8031 233 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
jdaggett@8031 234 6 of the W3C Patent Policy</a>.</p>
jdaggett@484 235 <!--end-status-->
jdaggett@8385 236
jdaggett@8385 237 <h3 class="no-num no-toc" id=atrisk>Features at risk</h3>
jdaggett@8385 238
jdaggett@8385 239 <p>The following features are at risk and may be removed when exiting CR:
jdaggett@8385 240
jdaggett@8385 241 <ul>
jdaggett@8386 242 <li>fallback handling for text decoration in superscript/subscript variant
jdaggett@8385 243 glyphs (‘<a href="#propdef-font-variant-position"><code
jdaggett@8385 244 class=property>font-variant-position</code></a>’)
jdaggett@8385 245
jdaggett@8385 246 <li>‘<a href="#propdef-font-language-override"><code
jdaggett@8385 247 class=property>font-language-override</code></a>’ property
jdaggett@8385 248 </ul>
jdaggett@8385 249
jdaggett@8385 250 <p>This draft is a <strong>Last Call Working Draft</strong>. Please send
jdaggett@8385 251 comments to the <a
jdaggett@8385 252 href="http://lists.w3.org/Archives/Public/www-style/">www-style mailing
jdaggett@8385 253 list</a> as described above. The <strong>deadline for comments</strong> is
jdaggett@8646 254 six weeks after the date of publication in the header, 22 August 2013.
jdaggett@2472 255
jdaggett@484 256 <h2 class="no-num no-toc" id=contents>Table of contents</h2>
jdaggett@484 257 <!--begin-toc-->
jdaggett@484 258
jdaggett@484 259 <ul class=toc>
jdaggett@890 260 <li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
jdaggett@890 261
jdaggett@1244 262 <li><a href="#typography-background"><span class=secno>2 </span>Typography
jdaggett@545 263 Background</a>
jdaggett@545 264
jdaggett@6699 265 <li><a href="#basic-font-props"><span class=secno>3 </span>Basic Font
jdaggett@6699 266 Properties</a>
jdaggett@484 267 <ul class=toc>
jdaggett@1662 268 <li><a href="#font-family-prop"><span class=secno>3.1 </span>Font
jdaggett@1662 269 family: the font-family property</a>
jdaggett@514 270 <ul class=toc>
jdaggett@1244 271 <li><a href="#generic-font-families"><span class=secno>3.1.1
jdaggett@1244 272 </span>Generic font families</a>
jdaggett@514 273 </ul>
jdaggett@484 274
jdaggett@1662 275 <li><a href="#font-weight-prop"><span class=secno>3.2 </span>Font
jdaggett@1662 276 weight: the font-weight property</a>
jdaggett@1662 277
jdaggett@1662 278 <li><a href="#font-stretch-prop"><span class=secno>3.3 </span>Font
jdaggett@1662 279 width: the font-stretch property</a>
jdaggett@1662 280
jdaggett@1662 281 <li><a href="#font-style-prop"><span class=secno>3.4 </span>Font style:
jdaggett@1662 282 the font-style property</a>
jdaggett@1662 283
jdaggett@1662 284 <li><a href="#font-size-prop"><span class=secno>3.5 </span>Font size:
jdaggett@1662 285 the font-size property</a>
jdaggett@1662 286
jdaggett@1662 287 <li><a href="#font-size-adjust-prop"><span class=secno>3.6
jdaggett@1662 288 </span>Relative sizing: the font-size-adjust property</a>
jdaggett@1662 289
jdaggett@1662 290 <li><a href="#font-prop"><span class=secno>3.7 </span>Shorthand font
jdaggett@1662 291 property: the font property</a>
jdaggett@2457 292
jdaggett@2487 293 <li><a href="#font-synthesis-prop"><span class=secno>3.8
jdaggett@2487 294 </span>Controlling synthetic faces: the font-synthesis property</a>
jdaggett@484 295 </ul>
jdaggett@484 296
jdaggett@890 297 <li><a href="#font-resources"><span class=secno>4 </span>Font
jdaggett@6699 298 Resources</a>
jdaggett@512 299 <ul class=toc>
jdaggett@1662 300 <li><a href="#font-face-rule"><span class=secno>4.1 </span>The
jdaggett@7096 301 <code>@font-face</code> rule</a>
jdaggett@1244 302
jdaggett@1662 303 <li><a href="#font-family-desc"><span class=secno>4.2 </span>Font
jdaggett@1662 304 family: the font-family descriptor</a>
jdaggett@1662 305
jdaggett@1662 306 <li><a href="#src-desc"><span class=secno>4.3 </span>Font reference: the
jdaggett@1662 307 src descriptor</a>
jdaggett@1662 308
jdaggett@1662 309 <li><a href="#font-prop-desc"><span class=secno>4.4 </span>Font property
jdaggett@1662 310 descriptors: the font-style, font-weight, font-stretch descriptors</a>
jdaggett@1662 311
jdaggett@1662 312 <li><a href="#unicode-range-desc"><span class=secno>4.5 </span>Character
jdaggett@1662 313 range: the unicode-range descriptor</a>
jdaggett@1662 314
jdaggett@8225 315 <li><a href="#composite-fonts"><span class=secno>4.6 </span>Using
jdaggett@8225 316 character ranges to define composite fonts</a>
jdaggett@8225 317
jdaggett@8225 318 <li><a href="#font-rend-desc"><span class=secno>4.7 </span>Font
jdaggett@1732 319 features: the font-variant and font-feature-settings descriptors</a>
jdaggett@2563 320
jdaggett@8225 321 <li><a href="#font-face-loading"><span class=secno>4.8 </span>Font
jdaggett@2563 322 loading guidelines</a>
jdaggett@2737 323
jdaggett@8225 324 <li><a href="#same-origin-restriction"><span class=secno>4.9
jdaggett@2737 325 </span>Same-origin restriction for fonts</a>
jdaggett@2740 326 <ul class=toc>
jdaggett@8225 327 <li><a href="#default-same-origin-restriction"><span class=secno>4.9.1
jdaggett@2740 328 </span>Default same-origin restriction</a>
jdaggett@2740 329
jdaggett@2740 330 <li><a href="#allowing-cross-origin-font-loading"><span
jdaggett@8225 331 class=secno>4.9.2 </span>Allowing cross-origin font loading</a>
jdaggett@2740 332 </ul>
jdaggett@512 333 </ul>
jdaggett@484 334
jdaggett@1244 335 <li><a href="#font-matching-algorithm"><span class=secno>5 </span>Font
jdaggett@6699 336 Matching Algorithm</a>
jdaggett@2457 337 <ul class=toc>
jdaggett@7309 338 <li><a href="#font-family-casing"><span class=secno>5.1 </span>Case
jdaggett@7309 339 sensitivity of font family names</a>
jdaggett@7309 340
jdaggett@7309 341 <li><a href="#font-style-matching"><span class=secno>5.2 </span>Matching
jdaggett@2457 342 font styles</a>
jdaggett@2457 343
jdaggett@7309 344 <li><a href="#cluster-matching"><span class=secno>5.3 </span>Cluster
jdaggett@6701 345 matching</a>
jdaggett@6701 346
jdaggett@7309 347 <li><a href="#char-handling-issues"><span class=secno>5.4
jdaggett@2457 348 </span>Character handling issues</a>
jdaggett@2509 349
jdaggett@7309 350 <li><a href="#font-matching-changes"><span class=secno>5.5 </span>Font
jdaggett@2509 351 matching changes since CSS 2.1</a>
jdaggett@6701 352
jdaggett@7309 353 <li><a href="#font-matching-examples"><span class=secno>5.6 </span>Font
jdaggett@6701 354 matching examples</a>
jdaggett@2457 355 </ul>
jdaggett@1244 356
jdaggett@6699 357 <li><a href="#font-rend-props"><span class=secno>6 </span>Font Feature
jdaggett@6699 358 Properties</a>
jdaggett@1662 359 <ul class=toc>
jdaggett@1856 360 <li><a href="#glyph-selection-positioning"><span class=secno>6.1
jdaggett@1856 361 </span>Glyph selection and positioning</a>
jdaggett@1856 362
jdaggett@1856 363 <li><a href="#language-specific-support"><span class=secno>6.2
jdaggett@1856 364 </span>Language-specific display</a>
jdaggett@1856 365
jdaggett@1856 366 <li><a href="#font-kerning-prop"><span class=secno>6.3 </span>Kerning:
jdaggett@1662 367 the font-kerning property</a>
jdaggett@1662 368
jdaggett@6176 369 <li><a href="#font-variant-ligatures-prop"><span class=secno>6.4
jdaggett@6176 370 </span>Ligatures: the font-variant-ligatures property</a>
jdaggett@6176 371
jdaggett@6176 372 <li><a href="#font-variant-position-prop"><span class=secno>6.5
jdaggett@3638 373 </span>Subscript and superscript forms: the font-variant-position
jdaggett@3638 374 property</a>
jdaggett@1856 375
jdaggett@2118 376 <li><a href="#font-variant-caps-prop"><span class=secno>6.6
jdaggett@2118 377 </span>Capitalization: the font-variant-caps property</a>
jdaggett@2118 378
jdaggett@2118 379 <li><a href="#font-variant-numeric-prop"><span class=secno>6.7
jdaggett@2118 380 </span>Numerical formatting: the font-variant-numeric property</a>
jdaggett@2118 381
jdaggett@2118 382 <li><a href="#font-variant-alternates-prop"><span class=secno>6.8
jdaggett@1662 383 </span>Alternates and swashes: the font-variant-alternates property</a>
jdaggett@1662 384
jdaggett@1662 385
jdaggett@2472 386 <li><a href="#font-feature-values"><span class=secno>6.9 </span>Defining
jdaggett@7096 387 font specific alternates: the <code>@font-feature-values</code>
jdaggett@7096 388 rule</a>
jdaggett@8356 389 <ul class=toc>
jdaggett@8356 390 <li><a href="#basic-syntax"><span class=secno>6.9.1 </span>Basic
jdaggett@8356 391 syntax</a>
jdaggett@8356 392
jdaggett@8356 393 <li><a href="#multi-valued-feature-value-definitions"><span
jdaggett@8356 394 class=secno>6.9.2 </span>Multi-valued feature value definitions</a>
jdaggett@8356 395 </ul>
jdaggett@2118 396
jdaggett@2118 397 <li><a href="#font-variant-east-asian-prop"><span class=secno>6.10
jdaggett@1662 398 </span>East Asian text rendering: the font-variant-east-asian
jdaggett@1662 399 property</a>
jdaggett@1662 400
jdaggett@2118 401 <li><a href="#font-variant-prop"><span class=secno>6.11 </span>Overall
jdaggett@1662 402 shorthand for font rendering: the font-variant property</a>
jdaggett@1662 403
jdaggett@2118 404 <li><a href="#font-feature-settings-prop"><span class=secno>6.12
jdaggett@2509 405 </span>Low-level font feature settings control: the
jdaggett@2509 406 font-feature-settings property</a>
jdaggett@1662 407
jdaggett@2118 408 <li><a href="#font-language-override-prop"><span class=secno>6.13
jdaggett@1732 409 </span>Font language override: the font-language-override property</a>
jdaggett@1662 410 </ul>
jdaggett@1662 411
jdaggett@6176 412 <li><a href="#font-feature-resolution"><span class=secno>7 </span>Font
jdaggett@6699 413 Feature Resolution </a>
jdaggett@6699 414 <ul class=toc>
jdaggett@6699 415 <li><a href="#default-features"><span class=secno>7.1 </span>Default
jdaggett@6699 416 features</a>
jdaggett@6699 417
jdaggett@6699 418 <li><a href="#feature-precedence"><span class=secno>7.2 </span>Feature
jdaggett@6699 419 precedence</a>
jdaggett@6699 420
jdaggett@6699 421 <li><a href="#feature-precedence-examples"><span class=secno>7.3
jdaggett@6699 422 </span>Feature precedence examples</a>
jdaggett@6699 423 </ul>
jdaggett@6699 424
jdaggett@7021 425 <li><a href="#object-model"><span class=secno>8 </span>Object Model</a>
jdaggett@7021 426 <ul class=toc>
jdaggett@7021 427 <li><a href="#om-fontface"><span class=secno>8.1 </span>The
jdaggett@7021 428 <code>CSSFontFaceRule</code> interface</a>
jdaggett@7021 429
jdaggett@7021 430 <li><a href="#om-fontfeaturevalues"><span class=secno>8.2 </span>The
jdaggett@7021 431 <code>CSSFontFeatureValuesRule</code> interface</a>
jdaggett@7021 432 </ul>
jdaggett@7021 433
jdaggett@2737 434 <li class=no-num><a href="#platform-props-to-css">Appendix A: Mapping
jdaggett@1662 435 platform font properties to CSS properties</a>
jdaggett@1662 436
jdaggett@2472 437 <li class=no-num><a href="#ch-ch-ch-changes">Changes</a>
jdaggett@2472 438 <ul class=toc>
jdaggett@7442 439 <li class=no-num><a href="#recent-changes"> Changes from the February
jdaggett@7442 440 2013 CSS3 Fonts Working Draft</a>
jdaggett@2472 441 </ul>
jdaggett@2472 442
jdaggett@529 443 <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
jdaggett@529 444
jdaggett@7242 445 <li class=no-num><a href="#conformance"> Conformance</a>
jdaggett@7242 446 <ul class=toc>
jdaggett@7242 447 <li class=no-num><a href="#conventions"> Document Conventions</a>
jdaggett@7242 448
jdaggett@7242 449 <li class=no-num><a href="#conformance-classes"> Conformance Classes</a>
jdaggett@7242 450
jdaggett@7242 451
jdaggett@7242 452 <li class=no-num><a href="#partial"> Partial Implementations</a>
jdaggett@7242 453
jdaggett@7242 454 <li class=no-num><a href="#experimental"> Experimental
jdaggett@7242 455 Implementations</a>
jdaggett@7242 456
jdaggett@7242 457 <li class=no-num><a href="#testing"> Non-Experimental
jdaggett@7242 458 Implementations</a>
jdaggett@7242 459 </ul>
jdaggett@7242 460
jdaggett@484 461 <li class=no-num><a href="#references">References</a>
jdaggett@484 462 <ul class=toc>
jdaggett@1662 463 <li class=no-num><a href="#normative-references">Normative
jdaggett@1662 464 References</a>
jdaggett@1662 465
jdaggett@1662 466 <li class=no-num><a href="#other-references">Other References</a>
jdaggett@484 467 </ul>
jdaggett@484 468
jdaggett@484 469 <li class=no-num><a href="#index">Index</a>
jdaggett@484 470
jdaggett@484 471 <li class=no-num><a href="#property-index">Property index</a>
jdaggett@484 472 </ul>
jdaggett@484 473 <!--end-toc-->
jdaggett@484 474
jdaggett@890 475 <h2 id=introduction><span class=secno>1 </span>Introduction</h2>
jdaggett@545 476
jdaggett@1148 477 <p>A font provides a resource containing the visual representation of
jdaggett@1662 478 characters. At the simplest level it contains information that maps
jdaggett@1662 479 character codes to shapes (called glyphs) that represent these characters.
jdaggett@1662 480 Fonts sharing a common design style are commonly grouped into font
jdaggett@1662 481 families classified by a set of standard font properties. Within a family,
jdaggett@1662 482 the shape displayed for a given character can vary by stroke weight, slant
jdaggett@7311 483 or relative width, among others. An individual font face is described by a
jdaggett@1662 484 unique combination of these properties. For a given range of text, CSS
jdaggett@1662 485 font properties are used to select a font family and a specific font face
jdaggett@1662 486 within that family to be used when rendering that text. As a simple
jdaggett@1662 487 example, to use the bold form of Helvetica one could use:
jdaggett@1148 488
jdaggett@8277 489 <pre>body {
jdaggett@8277 490 font-family: Helvetica;
jdaggett@8277 491 font-weight: bold;
jdaggett@1148 492 }</pre>
jdaggett@1148 493
jdaggett@7311 494 <p>Font resources may be installed locally on the system on which a user
jdaggett@7311 495 agent is running or downloadable. For local font resources descriptive
jdaggett@1148 496 information can be obtained directly from the font resource. For
jdaggett@1148 497 downloadable font resources (sometimes referred to as web fonts), the
jdaggett@1148 498 descriptive information is included with the reference to the font
jdaggett@1148 499 resource.
jdaggett@1148 500
jdaggett@1148 501 <p>Families of fonts typically don't contain a single face for each
jdaggett@1148 502 possible variation of font properties. The CSS font selection mechanism
jdaggett@7311 503 describes how to match a given set of CSS font properties to a single font
jdaggett@1148 504 face.
jdaggett@890 505
jdaggett@1244 506 <h2 id=typography-background><span class=secno>2 </span>Typography
jdaggett@1244 507 Background</h2>
jdaggett@890 508
jdaggett@7311 509 <p><em>This section is non-normative.</em>
jdaggett@7311 510
jdaggett@7311 511 <p> Typographic traditions vary across the globe, so there is no unique way
jdaggett@890 512 to classify all fonts across languages and cultures. For even common Latin
jdaggett@890 513 letters, wide variations are possible:
jdaggett@497 514
jdaggett@1150 515 <div class=figure><img alt="variations in glyphs for a single character"
jdaggett@1150 516 src=aaaaaa.png>
jdaggett@890 517 <p class=caption>One character, many glyph variations
jdaggett@498 518 </div>
jdaggett@497 519
jdaggett@497 520 <p>Differences in the anatomy of letterforms is one way to distinguish
jdaggett@497 521 fonts. For Latin fonts, flourishes at the ends of a character's main
jdaggett@497 522 strokes, or serifs, can distinguish a font from those without. Similar
jdaggett@534 523 comparisons exist in non-Latin fonts between fonts with tapered strokes
jdaggett@534 524 and those using primarily uniform strokes:
jdaggett@497 525
jdaggett@1150 526 <div class=figure><img alt="serif vs. non-serifs" src=serifvssansserif.png>
jdaggett@890 527 <p class=caption>Letterforms with and without serifs
jdaggett@534 528 </div>
jdaggett@534 529
jdaggett@1150 530 <div class=figure><img alt="serif vs. non-serifs for japanese"
jdaggett@1150 531 src=minchovsgothic.png>
jdaggett@890 532 <p class=caption>Similar groupings for Japanese typefaces
jdaggett@498 533 </div>
jdaggett@497 534
jdaggett@497 535 <p>Fonts contain letterforms and the data needed to map characters to these
jdaggett@7311 536 letterforms. Often this may be a simple one-to-one mapping, but more
jdaggett@497 537 complex mappings are also possible. The use of combining diacritic marks
jdaggett@497 538 creates many variations for an underlying letterform:
jdaggett@497 539
jdaggett@1150 540 <div class=figure><img alt="diacritic marks" src=aaaaaa-diacritics.png>
jdaggett@890 541 <p class=caption>Variations with diacritic marks
jdaggett@498 542 </div>
jdaggett@525 543
jdaggett@497 544 <p>A sequence of characters can be represented by a single glyph known as a
jdaggett@497 545 ligature:
jdaggett@497 546
jdaggett@1150 547 <div class=figure><img alt="example of a fi ligature"
jdaggett@1150 548 src=final-ligature.png>
jdaggett@890 549 <p class=caption>Ligature example
jdaggett@498 550 </div>
jdaggett@497 551
jdaggett@7311 552 <p>Visual transformations based on textual context are often stylistic
jdaggett@7311 553 option in European languages. They are required to correctly render
jdaggett@7311 554 languages like Arabic, the lam and alef characters below <em>must</em> be
jdaggett@7311 555 combined when they exist in sequence:
jdaggett@497 556
jdaggett@1150 557 <div class=figure><img alt="lam alef ligature" src=lamaleflig.png>
jdaggett@890 558 <p class=caption>Required Arabic ligature
jdaggett@498 559 </div>
jdaggett@497 560
jdaggett@498 561 <p>The relative complexity of these shaping transformations requires
jdaggett@498 562 additional data within the font.
jdaggett@497 563
jdaggett@497 564 <p>Sets of font faces with various stylistic variations are often grouped
jdaggett@512 565 together into font families. In the simplest case a regular face is
jdaggett@7311 566 supplemented with bold and italic faces, but much more extensive groupings
jdaggett@7311 567 are possible. Variations in the thickness of letterform strokes, the <dfn
jdaggett@7311 568 id=weight>weight</dfn>, and the overall proportions of the letterform, the
jdaggett@7311 569 <dfn id=width>width</dfn>, are most common. In the example below, each
jdaggett@7311 570 letter uses a different font face within the Univers font family. The
jdaggett@7311 571 width used increases from top to bottom and the weight increases from left
jdaggett@7311 572 to right:
jdaggett@497 573
jdaggett@1150 574 <div class=figure><img alt="various width and weight variations within a
jdaggett@1150 575 single family" src=weightwidthvariations.png>
jdaggett@890 576 <p class=caption>Weight and width variations within a single font family
jdaggett@498 577 </div>
jdaggett@497 578
jdaggett@545 579 <p>Creating fonts that support multiple scripts is a difficult task;
jdaggett@1148 580 designers need to understand the cultural traditions surrounding the use
jdaggett@1148 581 of type in different scripts and come up with letterforms that somehow
jdaggett@1148 582 share a common theme. Many languages often share a common script and each
jdaggett@7311 583 of these languages may have noticeable stylistic differences. For example,
jdaggett@7311 584 the Arabic script is shared by Persian and Urdu and Cyrillic is used with
jdaggett@7311 585 many languages, not just Russian.
jdaggett@518 586
jdaggett@8225 587 <p>The <a href="#character-map"><em>character map</em></a> of a font
jdaggett@8225 588 defines the mapping of characters to glyphs for that font. If a document
jdaggett@8225 589 contains characters not supported by the <a href="#character-map"><em
jdaggett@8225 590 title="character map">character maps</em></a> of the fonts contained in a
jdaggett@8363 591 font family list, a user agent may use a <a
jdaggett@8363 592 href="#system-font-fallback"><em>system font fallback</em></a> procedure
jdaggett@8363 593 to locate an appropriate font that does. If no appropriate font can be
jdaggett@8363 594 found, some form of "missing glyph" character will be rendered by the user
jdaggett@8363 595 agent. System fallback can occur when the specified list of font families
jdaggett@8363 596 does not include a font that supports a given character.
jdaggett@8225 597
jdaggett@8225 598 <p>Although the <a href="#character-map"><em>character map</em></a> of a
jdaggett@8225 599 font maps a given character to a glyph for that character, modern font
jdaggett@8225 600 technologies such as OpenType and AAT (Apple Advanced Typography) provide
jdaggett@8225 601 ways of mapping a character to different glyphs based upon feature
jdaggett@8225 602 settings. Fonts in these formats allow these features to be embedded in
jdaggett@8225 603 the font itself and controlled by applications. Common typographic
jdaggett@8225 604 features which can be specified this way include ligatures, swashes,
jdaggett@8225 605 contextual alternates, proportional and tabular figures, and automatic
jdaggett@8225 606 fractions, to list just a few. For a visual overview of OpenType features,
jdaggett@8225 607 see the <a href="#OPENTYPE-FONT-GUIDE"
jdaggett@6659 608 rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
jdaggett@1662 609
jdaggett@6699 610 <h2 id=basic-font-props><span class=secno>3 </span>Basic Font Properties</h2>
jdaggett@512 611
jdaggett@512 612 <p>The particular font face used to render a character is determined by the
jdaggett@515 613 font family and other font properties that apply to a given element. This
jdaggett@515 614 structure allows settings to be varied independent of each other.</p>
jdaggett@512 615 <!-- prop: font-family -->
jdaggett@484 616
jdaggett@1662 617 <h3 id=font-family-prop><span class=secno>3.1 </span>Font family: the <a
jdaggett@1662 618 href="#propdef-font-family">font-family</a> property</h3>
jdaggett@1662 619
jdaggett@8225 620 <table class=propdef id=namefont-familyvalue-ltfamily-namegt-ltg>
jdaggett@484 621 <tbody>
jdaggett@484 622 <tr>
jdaggett@484 623 <td>Name:
jdaggett@484 624
jdaggett@8278 625 <td><dfn id=propdef-font-family
jdaggett@8278 626 title="font-family!!property">font-family</dfn>
jdaggett@484 627
jdaggett@484 628 <tr>
jdaggett@484 629 <td>Value:
jdaggett@484 630
jdaggett@8225 631 <td>[ <a href="#family-name-value"><var>&lt;family-name&gt;</var></a> |
jdaggett@8225 632 <a href="#generic-family-value"><var>&lt;generic-family&gt;</var></a> ]
jdaggett@8225 633 #
jdaggett@484 634
jdaggett@484 635 <tr>
jdaggett@484 636 <td>Initial:
jdaggett@484 637
jdaggett@484 638 <td>depends on user agent
jdaggett@484 639
jdaggett@484 640 <tr>
jdaggett@484 641 <td>Applies to:
jdaggett@484 642
jdaggett@484 643 <td>all elements
jdaggett@484 644
jdaggett@484 645 <tr>
jdaggett@484 646 <td>Inherited:
jdaggett@484 647
jdaggett@484 648 <td>yes
jdaggett@484 649
jdaggett@484 650 <tr>
jdaggett@484 651 <td>Percentages:
jdaggett@484 652
jdaggett@484 653 <td>N/A
jdaggett@484 654
jdaggett@484 655 <tr>
jdaggett@484 656 <td>Media:
jdaggett@484 657
jdaggett@484 658 <td>visual
jdaggett@484 659
jdaggett@484 660 <tr>
jdaggett@1148 661 <td>Computed value:
jdaggett@484 662
jdaggett@484 663 <td>as specified
jdaggett@7377 664
jdaggett@7377 665 <tr>
jdaggett@7377 666 <td>Animatable:
jdaggett@7377 667
jdaggett@7377 668 <td>no
jdaggett@484 669 </table>
jdaggett@484 670
jdaggett@514 671 <p>This property specifies a prioritized list of font family names or
jdaggett@6694 672 generic family names. A font family defines a set of faces that vary in
jdaggett@6694 673 weight, width or slope. CSS uses the combination of a family name with
jdaggett@6694 674 other style attributes to select an individual face. Using this selection
jdaggett@6694 675 mechanism, rather than selecting a face via the style name as is often
jdaggett@6694 676 done in design applications, allows some degree of regularity in textual
jdaggett@6694 677 display when fallback occurs.
jdaggett@6694 678
jdaggett@6694 679 <p class=note>Designers should note that the CSS definition of font
jdaggett@6694 680 attributes used for selection are explicitly not intended to define a font
jdaggett@6694 681 taxonomy. A type designer's idea of a family may often extend to a set of
jdaggett@6694 682 faces that vary along axes other than just the standard axes of weight,
jdaggett@6694 683 width and slope. A family may extend to include both a set of serif faces
jdaggett@6694 684 and a set of sans-serif faces or vary along axes that are unique to that
jdaggett@6694 685 family. The CSS font selection mechanism merely provides a way to
jdaggett@6694 686 determine the “closest” substitute when substitution is necessary.
jdaggett@6694 687
jdaggett@6694 688 <p>Unlike other CSS properties, component values are a comma-separated list
jdaggett@6694 689 indicating alternatives. A user agent iterates through the list of family
jdaggett@6694 690 names until it matches an available font that contains a glyph for the
jdaggett@6694 691 character to be rendered. This allows for differences in available fonts
jdaggett@6694 692 across platforms and for differences in the range of characters supported
jdaggett@6694 693 by individual fonts.
jdaggett@514 694
jdaggett@514 695 <p>A font family name only specifies a name given to a set of font faces,
jdaggett@8177 696 it does not specify an individual face. For example, given the
jdaggett@8177 697 availability of the fonts below, Futura would match but Futura Medium
jdaggett@8177 698 would not:
jdaggett@514 699
jdaggett@1150 700 <div class=figure><img alt="family and face names"
jdaggett@1150 701 src=familyvsfacename.png>
jdaggett@890 702 <p class=caption>Family and individual face names
jdaggett@514 703 </div>
jdaggett@514 704
jdaggett@514 705 <p>Consider the example below:
jdaggett@512 706
jdaggett@512 707 <div class=example>
jdaggett@8277 708 <pre>body {
jdaggett@8277 709 font-family: Helvetica, Verdana, sans-serif;
jdaggett@514 710 }</pre>
jdaggett@1758 711
jdaggett@1758 712 <p>If Helvetica is available it will be used when rendering. If neither
jdaggett@1758 713 Helvetica nor Verdana is present, then the user-agent-defined sans serif
jdaggett@1758 714 font will be used.</p>
jdaggett@512 715 </div>
jdaggett@512 716
jdaggett@514 717 <p>There are two types of font family names:
jdaggett@512 718
jdaggett@512 719 <dl>
jdaggett@8225 720 <dt><dfn id=family-name-value><var>&lt;family-name&gt;</var></dfn>
jdaggett@514 721
jdaggett@514 722 <dd>The name of a font family of choice such as Helvetica or Verdana in
jdaggett@2457 723 the previous example.
jdaggett@514 724
jdaggett@8225 725 <dt><dfn id=generic-family-value><var>&lt;generic-family&gt;</var></dfn>
jdaggett@514 726
jdaggett@4624 727 <dd> The following generic family keywords are defined: ‘<a
jdaggett@4624 728 href="#serif"><code class=property>serif</code></a>’, ‘<a
jdaggett@4624 729 href="#sans-serif"><code class=property>sans-serif</code></a>’, ‘<a
jdaggett@4624 730 href="#cursive"><code class=property>cursive</code></a>’, ‘<a
jdaggett@4624 731 href="#fantasy"><code class=property>fantasy</code></a>’, and ‘<a
jdaggett@4624 732 href="#monospace"><code class=property>monospace</code></a>’. These
jdaggett@1148 733 keywords can be used as a general fallback mechanism when an author's
jdaggett@1758 734 desired font choices are not available. As keywords, they must not be
jdaggett@1148 735 quoted. Authors are encouraged to append a generic font family as a last
jdaggett@1148 736 alternative for improved robustness.
jdaggett@512 737 </dl>
jdaggett@512 738
jdaggett@8272 739 <p>Font family names other than generic families must either be given
jdaggett@8272 740 quoted as <a
jdaggett@2457 741 href="//www.w3.org/TR/CSS21/syndata.html#strings">strings,</a> or unquoted
jdaggett@2457 742 as a sequence of one or more <a
jdaggett@2457 743 href="//www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers.</a>
jdaggett@2457 744 This means most punctuation characters and digits at the start of each
jdaggett@2457 745 token must be escaped in unquoted font family names.
jdaggett@2457 746
jdaggett@7377 747 <p>To illustrate this, the following declarations are invalid:
jdaggett@2457 748
jdaggett@2457 749 <pre>
jdaggett@2457 750 font-family: Red/Black, sans-serif;
jdaggett@2457 751 font-family: "Lucida" Grande, sans-serif;
jdaggett@2457 752 font-family: Ahem!, sans-serif;
jdaggett@2457 753 font-family: test@foo, sans-serif;
jdaggett@2457 754 font-family: #POUND, sans-serif;
jdaggett@2457 755 font-family: Hawaii 5-0, sans-serif;
jdaggett@2457 756 </pre>
jdaggett@2457 757
jdaggett@2457 758 <p>If a sequence of identifiers is given as a font family name, the
jdaggett@2457 759 computed value is the name converted to a string by joining all the
jdaggett@2457 760 identifiers in the sequence by single spaces.
jdaggett@2457 761
jdaggett@2457 762 <p>To avoid mistakes in escaping, it is recommended to quote font family
jdaggett@2457 763 names that contain white space, digits, or punctuation characters other
jdaggett@2457 764 than hyphens:
jdaggett@2457 765
jdaggett@2457 766 <pre>
jdaggett@2457 767 body { font-family: "New Century Schoolbook", serif }
jdaggett@2457 768
jdaggett@2457 769 &lt;BODY STYLE="font-family: '21st Century', fantasy">
jdaggett@2457 770 </pre>
jdaggett@2457 771
jdaggett@2457 772 <p>Font family <em>names</em> that happen to be the same as a keyword value
jdaggett@4624 773 (‘<code class=property>inherit</code>’, ‘<a href="#serif"><code
jdaggett@4624 774 class=property>serif</code></a>’, ‘<a href="#sans-serif"><code
jdaggett@4624 775 class=property>sans-serif</code></a>’, ‘<a href="#monospace"><code
jdaggett@4624 776 class=property>monospace</code></a>’, ‘<a href="#fantasy"><code
jdaggett@4624 777 class=property>fantasy</code></a>’, and ‘<a href="#cursive"><code
jdaggett@4624 778 class=property>cursive</code></a>’) must be quoted to prevent confusion
jdaggett@2457 779 with the keywords with the same names. The keywords ‘<code
jdaggett@2457 780 class=property>initial</code>’ and ‘<code
jdaggett@2457 781 class=property>default</code>’ are reserved for future use and must also
jdaggett@2457 782 be quoted when used as font names. UAs must not consider these keywords as
jdaggett@8225 783 matching the <a
jdaggett@8225 784 href="#family-name-value"><var>&lt;family-name&gt;</var></a> type.
jdaggett@2457 785
jdaggett@6694 786 <p>The precise way a set of fonts are grouped into font families varies
jdaggett@6694 787 depending upon the platform font management API's. The Windows GDI API
jdaggett@6694 788 only allows four faces to be grouped into a family while the DirectWrite
jdaggett@6694 789 API and API's on OSX and other platforms support font families with a
jdaggett@6695 790 variety of weights, widths and slopes (see <a
jdaggett@6694 791 href="#platform-props-to-css">Appendix A</a> for more details).
jdaggett@6694 792
jdaggett@2457 793 <p>Some font formats allow fonts to carry multiple localizations of the
jdaggett@2457 794 family name. User agents must recognize and correctly match all of these
jdaggett@2457 795 names independent of the underlying platform localization, system API used
jdaggett@2457 796 or document encoding:
jdaggett@2457 797
jdaggett@2457 798 <div class=figure><img alt="examples of localized family names"
jdaggett@2457 799 src=localizedfamilynames.png>
jdaggett@2457 800 <p class=caption>Localized family names
jdaggett@2457 801 </div>
jdaggett@2457 802
jdaggett@1244 803 <h4 id=generic-font-families><span class=secno>3.1.1 </span>Generic font
jdaggett@1244 804 families</h4>
jdaggett@514 805
jdaggett@518 806 <p>All five generic font families are defined to exist in all CSS
jdaggett@518 807 implementations (they need not necessarily map to five distinct actual
jdaggett@518 808 fonts). User agents should provide reasonable default choices for the
jdaggett@518 809 generic font families, which express the characteristics of each family as
jdaggett@518 810 well as possible within the limits allowed by the underlying technology.
jdaggett@518 811 User agents are encouraged to allow users to select alternative choices
jdaggett@514 812 for the generic fonts.
jdaggett@514 813
jdaggett@890 814 <h5 class="no-num no-toc"> <span class=index-def id=serif0 title="serif,
jdaggett@890 815 definition of"><a name=serif-def><dfn id=serif>serif</dfn></a></span></h5>
jdaggett@514 816
jdaggett@8178 817 <p>Serif fonts represent the formal text style for a script. This often
jdaggett@8178 818 means but is not limited to glyphs that have finishing strokes, flared or
jdaggett@8178 819 tapering ends, or have actual serifed endings (including slab serifs).
jdaggett@8178 820 Serif fonts are typically proportionately-spaced. They often display a
jdaggett@8178 821 greater variation between thick and thin strokes than fonts from the ‘<a
jdaggett@8178 822 href="#sans-serif"><code class=property>sans-serif</code></a>’ generic
jdaggett@8178 823 font family. CSS uses the term ‘<a href="#serif"><code
jdaggett@8178 824 class=property>serif</code></a>’ to apply to a font for any script,
jdaggett@8178 825 although other names may be more familiar for particular scripts, such as
jdaggett@8178 826 Mincho (Japanese), Sung, Song or Kai (Chinese), Batang (Korean). For
jdaggett@8178 827 Arabic, the Naskh style would correspond to ‘<a href="#serif"><code
jdaggett@8178 828 class=property>serif</code></a>’ more due to its typographic role rather
jdaggett@8178 829 than its actual design style. Any font that is so described may be used to
jdaggett@4624 830 represent the generic ‘<a href="#serif"><code
jdaggett@4624 831 class=property>serif</code></a>’ family.
jdaggett@514 832
jdaggett@1150 833 <div class=figure><img alt="sample serif fonts" src=serifexamples.png>
jdaggett@890 834 <p class=caption>Sample serif fonts
jdaggett@514 835 </div>
jdaggett@514 836
jdaggett@890 837 <h5 class="no-num no-toc"> <span class=index-def id=sans-serif0
jdaggett@890 838 title="sans-serif, definition of"> <a name=sans-serif-def><dfn
jdaggett@890 839 id=sans-serif>sans-serif</dfn></a></span></h5>
jdaggett@514 840
jdaggett@8178 841 <p>Glyphs in sans-serif fonts, as the term is used in CSS, are generally
jdaggett@8178 842 low contrast (vertical and horizontal stems have the close to the same
jdaggett@8178 843 thickness) and have stroke endings that are plain -- without any flaring,
jdaggett@8178 844 cross stroke, or other ornamentation. Sans-serif fonts are typically
jdaggett@8178 845 proportionately-spaced. They often have little variation between thick and
jdaggett@8178 846 thin strokes, compared to fonts from the ‘<a href="#serif"><code
jdaggett@4624 847 class=property>serif</code></a>’ family. CSS uses the term ‘<a
jdaggett@4624 848 href="#sans-serif"><code class=property>sans-serif</code></a>’ to apply
jdaggett@4624 849 to a font for any script, although other names may be more familiar for
jdaggett@3041 850 particular scripts, such as Gothic (Japanese), Hei (Chinese), or Gulim
jdaggett@1148 851 (Korean). Any font that is so described may be used to represent the
jdaggett@4624 852 generic ‘<a href="#sans-serif"><code
jdaggett@4624 853 class=property>sans-serif</code></a>’ family.
jdaggett@518 854
jdaggett@1150 855 <div class=figure><img alt="sample sans-serif fonts"
jdaggett@1150 856 src=sansserifexamples.png>
jdaggett@890 857 <p class=caption>Sample sans-serif fonts
jdaggett@514 858 </div>
jdaggett@514 859
jdaggett@890 860 <h5 class="no-num no-toc"> <span class=index-def id=cursive0
jdaggett@545 861 title="cursive, definition of"> <a name=cursive-def><dfn
jdaggett@890 862 id=cursive>cursive</dfn></a></span></h5>
jdaggett@545 863
jdaggett@8178 864 <p>Glyphs in cursive fonts generally use a more informal script style, and
jdaggett@8178 865 the result looks more like handwritten pen or brush writing than printed
jdaggett@8178 866 letterwork. CSS uses the term ‘<a href="#cursive"><code
jdaggett@8178 867 class=property>cursive</code></a>’ to apply to a font for any script,
jdaggett@8178 868 although other names such as Chancery, Brush, Swing and Script are also
jdaggett@8178 869 used in font names.
jdaggett@514 870
jdaggett@1150 871 <div class=figure><img alt="sample cursive fonts" src=cursiveexamples.png>
jdaggett@890 872 <p class=caption>Sample cursive fonts
jdaggett@514 873 </div>
jdaggett@514 874
jdaggett@890 875 <h5 class="no-num no-toc"> <span class=index-def id=fantasy0
jdaggett@545 876 title="fantasy, definition of"> <a name=fantasy-def><dfn
jdaggett@890 877 id=fantasy>fantasy</dfn></a></span></h5>
jdaggett@514 878
jdaggett@8178 879 <p>Fantasy fonts are primarily decorative or expressive fonts that contain
jdaggett@8178 880 playful representations of characters. These do not include Pi or Picture
jdaggett@8178 881 fonts which do not represent actual characters.
jdaggett@514 882
jdaggett@1150 883 <div class=figure><img alt="sample fantasy fonts" src=fantasyexamples.png>
jdaggett@890 884 <p class=caption>Sample fantasy fonts
jdaggett@514 885 </div>
jdaggett@514 886
jdaggett@890 887 <h5 class="no-num no-toc"> <span class=index-def id=monospace0
jdaggett@545 888 title="monospace, definition of"> <a name=monospace-def><dfn
jdaggett@890 889 id=monospace>monospace</dfn></a></span></h5>
jdaggett@514 890
jdaggett@514 891 <p>The sole criterion of a monospace font is that all glyphs have the same
jdaggett@518 892 fixed width. This is often used to render samples of computer code.
jdaggett@514 893
jdaggett@1150 894 <div class=figure><img alt="sample monospace fonts"
jdaggett@1150 895 src=monospaceexamples.png>
jdaggett@890 896 <p class=caption>Sample monospace fonts
jdaggett@514 897 </div>
jdaggett@512 898 <!-- prop: font-weight -->
jdaggett@512 899
jdaggett@1662 900 <h3 id=font-weight-prop><span class=secno>3.2 </span>Font weight: the <a
jdaggett@1662 901 href="#propdef-font-weight">font-weight</a> property</h3>
jdaggett@1662 902
jdaggett@4624 903 <table class=propdef id=namefont-weightvaluenormal-bold-bolder-l>
jdaggett@484 904 <tbody>
jdaggett@484 905 <tr>
jdaggett@484 906 <td>Name:
jdaggett@484 907
jdaggett@8278 908 <td><dfn id=propdef-font-weight
jdaggett@8278 909 title="font-weight!!property">font-weight</dfn>
jdaggett@484 910
jdaggett@484 911 <tr>
jdaggett@484 912 <td>Value:
jdaggett@484 913
jdaggett@8278 914 <td><a href="#font-weight-normal-value"
jdaggett@8278 915 title="normal!!font-weight">normal</a> | <a href="#bold">bold</a> | <a
jdaggett@8278 916 href="#bolder">bolder</a> | <a href="#lighter">lighter</a> | <a
jdaggett@8278 917 href="#font-weight-numeric-values" title="100...900 weight
jdaggett@8278 918 values">100</a> | <a href="#font-weight-numeric-values"
jdaggett@8278 919 title="100...900 weight values">200</a> | <a
jdaggett@8278 920 href="#font-weight-numeric-values" title="100...900 weight
jdaggett@8278 921 values">300</a> | <a href="#font-weight-numeric-values"
jdaggett@8278 922 title="100...900 weight values">400</a> | <a
jdaggett@8278 923 href="#font-weight-numeric-values" title="100...900 weight
jdaggett@8278 924 values">500</a> | <a href="#font-weight-numeric-values"
jdaggett@8278 925 title="100...900 weight values">600</a> | <a
jdaggett@8278 926 href="#font-weight-numeric-values" title="100...900 weight
jdaggett@8278 927 values">700</a> | <a href="#font-weight-numeric-values"
jdaggett@8278 928 title="100...900 weight values">800</a> | <a
jdaggett@8278 929 href="#font-weight-numeric-values" title="100...900 weight
jdaggett@8278 930 values">900</a>
jdaggett@484 931
jdaggett@484 932 <tr>
jdaggett@484 933 <td>Initial:
jdaggett@484 934
jdaggett@484 935 <td>normal
jdaggett@484 936
jdaggett@484 937 <tr>
jdaggett@484 938 <td>Applies to:
jdaggett@484 939
jdaggett@484 940 <td>all elements
jdaggett@484 941
jdaggett@484 942 <tr>
jdaggett@484 943 <td>Inherited:
jdaggett@484 944
jdaggett@484 945 <td>yes
jdaggett@484 946
jdaggett@484 947 <tr>
jdaggett@484 948 <td>Percentages:
jdaggett@484 949
jdaggett@484 950 <td>N/A
jdaggett@484 951
jdaggett@484 952 <tr>
jdaggett@484 953 <td>Media:
jdaggett@484 954
jdaggett@484 955 <td>visual
jdaggett@484 956
jdaggett@484 957 <tr>
jdaggett@1148 958 <td>Computed value:
jdaggett@484 959
jdaggett@8177 960 <td>numeric weight value (see description)
jdaggett@7377 961
jdaggett@7377 962 <tr>
jdaggett@7377 963 <td>Animatable:
jdaggett@7377 964
jdaggett@7377 965 <td>as <a
jdaggett@7377 966 href="http://dev.w3.org/csswg/css3-transitions/#animtype-font-weight">font
jdaggett@7377 967 weight</a>
jdaggett@484 968 </table>
jdaggett@484 969
jdaggett@8278 970 <p>The <a href="#propdef-font-weight"
jdaggett@8278 971 title="font-weight!!property">‘<code
jdaggett@8278 972 class=property>font-weight</code>’</a> property specifies the weight of
jdaggett@8278 973 glyphs in the font, their degree of blackness or stroke thickness.
jdaggett@531 974
jdaggett@531 975 <p>Values have the following meanings:
jdaggett@512 976
jdaggett@512 977 <dl>
jdaggett@8278 978 <dt><dfn id=font-weight-numeric-values title="100...900 weight values">100
jdaggett@8278 979 to 900</dfn>
jdaggett@512 980
jdaggett@512 981 <dd>These values form an ordered sequence, where each number indicates a
jdaggett@514 982 weight that is at least as dark as its predecessor. These roughly
jdaggett@514 983 correspond to the commonly used weight names below:
jdaggett@512 984 </dl>
jdaggett@512 985
jdaggett@512 986 <ul>
jdaggett@512 987 <li>100 - Thin
jdaggett@512 988
jdaggett@518 989 <li>200 - Extra Light (Ultra Light)
jdaggett@512 990
jdaggett@512 991 <li>300 - Light
jdaggett@512 992
jdaggett@512 993 <li>400 - Normal
jdaggett@512 994
jdaggett@512 995 <li>500 - Medium
jdaggett@512 996
jdaggett@518 997 <li>600 - Semi Bold (Demi Bold)
jdaggett@512 998
jdaggett@512 999 <li>700 - Bold
jdaggett@512 1000
jdaggett@518 1001 <li>800 - Extra Bold (Ultra Bold)
jdaggett@512 1002
jdaggett@512 1003 <li>900 - Black (Heavy)
jdaggett@512 1004 </ul>
jdaggett@512 1005
jdaggett@512 1006 <dl>
jdaggett@8278 1007 <dt><dfn id=font-weight-normal-value
jdaggett@8278 1008 title="normal!!font-weight">normal</dfn>
jdaggett@512 1009
jdaggett@1148 1010 <dd>Same as ‘<code class=css>400</code>’.
jdaggett@512 1011
jdaggett@8278 1012 <dt><dfn id=bold>bold</dfn>
jdaggett@512 1013
jdaggett@1148 1014 <dd>Same as ‘<code class=css>700</code>’.
jdaggett@512 1015
jdaggett@8278 1016 <dt><dfn id=bolder>bolder</dfn>
jdaggett@512 1017
jdaggett@8177 1018 <dd>Specifies a bolder weight than the inherited value.
jdaggett@512 1019
jdaggett@8278 1020 <dt><dfn id=lighter>lighter</dfn>
jdaggett@512 1021
jdaggett@8177 1022 <dd>Specifies a lighter weight than the inherited value.
jdaggett@512 1023 </dl>
jdaggett@512 1024
jdaggett@8177 1025 <p>Font formats that use a scale other than a nine-step scale should map
jdaggett@531 1026 their scale onto the CSS scale so that 400 roughly corresponds with a face
jdaggett@531 1027 that would be labeled as Regular, Book, Roman and 700 roughly matches a
jdaggett@531 1028 face that would be labeled as Bold. Or weights may be inferred from the
jdaggett@531 1029 style names, ones that correspond roughly with the scale above. The scale
jdaggett@1662 1030 is relative, so a face with a larger weight value must never appear
jdaggett@1148 1031 lighter. If style names are used to infer weights, care should be taken to
jdaggett@1148 1032 handle variations in style names across locales.
jdaggett@531 1033
jdaggett@531 1034 <p>Quite often there are only a few weights available for a particular font
jdaggett@534 1035 family. When a weight is specified for which no face exists, a face with a
jdaggett@534 1036 nearby weight is used. In general, bold weights map to faces with heavier
jdaggett@1269 1037 weights and light weights map to faces with lighter weights (see the <a
jdaggett@1269 1038 href="#font-matching-algorithm">font matching section below</a> for a
jdaggett@1269 1039 precise definition). The examples here illustrate which face is used for
jdaggett@1269 1040 different weights, grey indicates a face for that weight does not exist so
jdaggett@1269 1041 a face with a nearby weight is used:
jdaggett@532 1042
jdaggett@1150 1043 <div class=figure><img alt="weight mappings for a family with 400, 700 and
jdaggett@1150 1044 900 weights" src=optimaweights.png>
jdaggett@532 1045 <p class=caption>Weight mappings for a font family with 400, 700 and 900
jdaggett@890 1046 weight faces
jdaggett@518 1047 </div>
jdaggett@518 1048
jdaggett@1150 1049 <div class=figure><img alt="weight mappings for a family with 300, 600
jdaggett@1150 1050 weights" src=hiraginoweights.png>
jdaggett@532 1051 <p class=caption>Weight mappings for a font family with 300 and 600 weight
jdaggett@890 1052 faces
jdaggett@531 1053 </div>
jdaggett@518 1054
jdaggett@2487 1055 <p>Although the practice is not well-loved by typographers, bold faces are
jdaggett@2487 1056 often synthesized by user agents for faces that lack actual bold faces.
jdaggett@2487 1057 For the purposes of style matching, these faces must be treated as if they
jdaggett@8177 1058 exist within the family. Authors can explicitly avoid this behavior by
jdaggett@8177 1059 using the ‘<a href="#propdef-font-synthesis"><code
jdaggett@8177 1060 class=property>font-synthesis</code></a>’ property.
jdaggett@8177 1061
jdaggett@8278 1062 <p>Specified values of ‘<a href="#bolder"><code
jdaggett@8278 1063 class=property>bolder</code></a>’ and ‘<a href="#lighter"><code
jdaggett@8278 1064 class=property>lighter</code></a>’ indicate weights relative to the
jdaggett@8177 1065 weight of the parent element. The computed weight is calculated based on
jdaggett@8278 1066 the inherited <a href="#propdef-font-weight"
jdaggett@8278 1067 title="font-weight!!property">‘<code
jdaggett@8278 1068 class=property>font-weight</code>’</a> value using the chart below.
jdaggett@1148 1069
jdaggett@6651 1070 <table class=data id=bolderlighter summary="Bolder/lighter mappings">
jdaggett@1148 1071 <thead>
jdaggett@1148 1072 <tr>
jdaggett@6651 1073 <th>Inherited value
jdaggett@6651 1074
jdaggett@6651 1075 <th>bolder
jdaggett@6651 1076
jdaggett@6651 1077 <th>lighter
jdaggett@1148 1078
jdaggett@1148 1079 <tbody>
jdaggett@1148 1080 <tr>
jdaggett@1244 1081 <th>100
jdaggett@1148 1082
jdaggett@1148 1083 <td>400
jdaggett@1148 1084
jdaggett@1148 1085 <td>100
jdaggett@1148 1086
jdaggett@1148 1087 <tr>
jdaggett@1244 1088 <th>200
jdaggett@1148 1089
jdaggett@1148 1090 <td>400
jdaggett@1148 1091
jdaggett@1148 1092 <td>100
jdaggett@1148 1093
jdaggett@1148 1094 <tr>
jdaggett@1244 1095 <th>300
jdaggett@1148 1096
jdaggett@1148 1097 <td>400
jdaggett@1148 1098
jdaggett@1148 1099 <td>100
jdaggett@1148 1100
jdaggett@1148 1101 <tr>
jdaggett@1244 1102 <th>400
jdaggett@1148 1103
jdaggett@1148 1104 <td>700
jdaggett@1148 1105
jdaggett@1148 1106 <td>100
jdaggett@1148 1107
jdaggett@1148 1108 <tr>
jdaggett@1244 1109 <th>500
jdaggett@1148 1110
jdaggett@1148 1111 <td>700
jdaggett@1148 1112
jdaggett@1148 1113 <td>100
jdaggett@1148 1114
jdaggett@1148 1115 <tr>
jdaggett@1244 1116 <th>600
jdaggett@1148 1117
jdaggett@1148 1118 <td>900
jdaggett@1148 1119
jdaggett@1148 1120 <td>400
jdaggett@1148 1121
jdaggett@1148 1122 <tr>
jdaggett@1244 1123 <th>700
jdaggett@1148 1124
jdaggett@1148 1125 <td>900
jdaggett@1148 1126
jdaggett@1148 1127 <td>400
jdaggett@1148 1128
jdaggett@1148 1129 <tr>
jdaggett@1244 1130 <th>800
jdaggett@1148 1131
jdaggett@1148 1132 <td>900
jdaggett@1148 1133
jdaggett@1148 1134 <td>700
jdaggett@1148 1135
jdaggett@1148 1136 <tr>
jdaggett@1244 1137 <th>900
jdaggett@1148 1138
jdaggett@1148 1139 <td>900
jdaggett@1148 1140
jdaggett@1148 1141 <td>700
jdaggett@1148 1142 </table>
jdaggett@1148 1143
jdaggett@1148 1144 <p>The table above is equivalent to selecting the next relative bolder or
jdaggett@1148 1145 lighter face, given a font family containing normal and bold faces along
jdaggett@1148 1146 with a thin and a heavy face. Authors who desire finer control over the
jdaggett@8177 1147 exact weight values used for a given element may use numerical values
jdaggett@1148 1148 instead of relative weights.</p>
jdaggett@512 1149 <!-- prop: font-stretch -->
jdaggett@512 1150
jdaggett@1662 1151 <h3 id=font-stretch-prop><span class=secno>3.3 </span>Font width: the <a
jdaggett@1662 1152 href="#propdef-font-stretch">font-stretch</a> property</h3>
jdaggett@1662 1153
jdaggett@8278 1154 <table class=propdef id=namefont-stretchvalue-normal-ultra-conde>
jdaggett@484 1155 <tbody>
jdaggett@484 1156 <tr>
jdaggett@484 1157 <td>Name:
jdaggett@484 1158
jdaggett@8278 1159 <td><dfn id=propdef-font-stretch
jdaggett@8278 1160 title="font-stretch!!property">font-stretch</dfn>
jdaggett@484 1161
jdaggett@484 1162 <tr>
jdaggett@484 1163 <td>Value:
jdaggett@484 1164
jdaggett@8278 1165 <td> <a href="#font-stretch-normal-value"
jdaggett@8278 1166 title="normal!!font-stretch">normal</a> | <a
jdaggett@8278 1167 href="#ultra-condensed">ultra-condensed</a> | <a
jdaggett@8278 1168 href="#extra-condensed">extra-condensed</a> | <a
jdaggett@8278 1169 href="#condensed">condensed</a> | <a
jdaggett@8278 1170 href="#semi-condensed-">semi-condensed</a> | <a
jdaggett@8278 1171 href="#semi-expanded">semi-expanded</a> | <a
jdaggett@8278 1172 href="#expanded">expanded</a> | <a
jdaggett@8278 1173 href="#extra-expanded">extra-expanded</a> | <a
jdaggett@8278 1174 href="#ultra-expanded">ultra-expanded</a>
jdaggett@484 1175
jdaggett@484 1176 <tr>
jdaggett@484 1177 <td>Initial:
jdaggett@484 1178
jdaggett@484 1179 <td>normal
jdaggett@484 1180
jdaggett@484 1181 <tr>
jdaggett@484 1182 <td>Applies to:
jdaggett@484 1183
jdaggett@484 1184 <td>all elements
jdaggett@484 1185
jdaggett@484 1186 <tr>
jdaggett@484 1187 <td>Inherited:
jdaggett@484 1188
jdaggett@484 1189 <td>yes
jdaggett@484 1190
jdaggett@484 1191 <tr>
jdaggett@484 1192 <td>Percentages:
jdaggett@484 1193
jdaggett@484 1194 <td>N/A
jdaggett@484 1195
jdaggett@484 1196 <tr>
jdaggett@484 1197 <td>Media:
jdaggett@484 1198
jdaggett@484 1199 <td>visual
jdaggett@484 1200
jdaggett@484 1201 <tr>
jdaggett@1148 1202 <td>Computed value:
jdaggett@484 1203
jdaggett@484 1204 <td>as specified
jdaggett@7377 1205
jdaggett@7377 1206 <tr>
jdaggett@7377 1207 <td>Animatable:
jdaggett@7377 1208
jdaggett@7377 1209 <td>as <a href="#font-stretch-animation">font stretch</a>
jdaggett@484 1210 </table>
jdaggett@484 1211
jdaggett@8278 1212 <p>The <a href="#propdef-font-stretch"
jdaggett@8278 1213 title="font-stretch!!property">‘<code
jdaggett@8278 1214 class=property>font-stretch</code>’</a> property selects a normal,
jdaggett@8278 1215 condensed, or expanded face from a font family. Absolute keyword values
jdaggett@8278 1216 have the following ordering, from narrowest to widest:
jdaggett@512 1217
jdaggett@512 1218 <ul>
jdaggett@8278 1219 <li><dfn id=ultra-condensed>ultra-condensed</dfn>
jdaggett@8278 1220
jdaggett@8278 1221 <li><dfn id=extra-condensed>extra-condensed</dfn>
jdaggett@8278 1222
jdaggett@8278 1223 <li><dfn id=condensed>condensed</dfn>
jdaggett@8278 1224
jdaggett@8278 1225 <li><dfn id=semi-condensed->semi-condensed </dfn>
jdaggett@8278 1226
jdaggett@8278 1227 <li><dfn id=font-stretch-normal-value
jdaggett@8278 1228 title="normal!!font-stretch">normal</dfn>
jdaggett@8278 1229
jdaggett@8278 1230 <li><dfn id=semi-expanded>semi-expanded</dfn>
jdaggett@8278 1231
jdaggett@8278 1232 <li><dfn id=expanded>expanded</dfn>
jdaggett@8278 1233
jdaggett@8278 1234 <li><dfn id=extra-expanded>extra-expanded</dfn>
jdaggett@8278 1235
jdaggett@8278 1236 <li><dfn id=ultra-expanded>ultra-expanded</dfn>
jdaggett@512 1237 </ul>
jdaggett@512 1238
jdaggett@8197 1239 <p>When a face does not exist for a given width, normal or condensed values
jdaggett@8197 1240 map to a narrower face, otherwise a wider face. Conversely, expanded
jdaggett@8197 1241 values map to a wider face, otherwise a narrower face. The figure below
jdaggett@8197 1242 shows how the nine font-stretch property settings affect font selection
jdaggett@8197 1243 for font family containing a variety of widths, grey indicates a width for
jdaggett@8197 1244 which no face exists and a different width is substituted:
jdaggett@1148 1245
jdaggett@1150 1246 <div class=figure><img alt="width mappings for a family with condensed,
jdaggett@1150 1247 normal and expanded faces" src=universwidths.png>
jdaggett@1148 1248 <p class=caption>Width mappings for a font family with condensed, normal
jdaggett@1148 1249 and expanded width faces
jdaggett@1148 1250 </div>
jdaggett@7377 1251
jdaggett@7377 1252 <p id=font-stretch-animation>Animation of font stretch: Font stretch is
jdaggett@7377 1253 interpolated in discrete steps. The interpolation happens as though the
jdaggett@7377 1254 ordered values are equally spaced real numbers. The interpolation result
jdaggett@7377 1255 is rounded to the nearest value, with values exactly halfway between two
jdaggett@7377 1256 values rounded towards the later value in the list above.</p>
jdaggett@512 1257 <!-- prop: font-style -->
jdaggett@512 1258
jdaggett@1662 1259 <h3 id=font-style-prop><span class=secno>3.4 </span>Font style: the <a
jdaggett@1662 1260 href="#propdef-font-style">font-style</a> property</h3>
jdaggett@1662 1261
jdaggett@4624 1262 <table class=propdef id=namefont-stylevaluenormal-italic-oblique>
jdaggett@484 1263 <tbody>
jdaggett@484 1264 <tr>
jdaggett@484 1265 <td>Name:
jdaggett@484 1266
jdaggett@8278 1267 <td><dfn id=propdef-font-style
jdaggett@8278 1268 title="font-style!!property">font-style</dfn>
jdaggett@484 1269
jdaggett@484 1270 <tr>
jdaggett@484 1271 <td>Value:
jdaggett@484 1272
jdaggett@8278 1273 <td><a href="#font-style-normal-value"
jdaggett@8278 1274 title="normal!!font-style">normal</a> | <a href="#italic">italic</a> |
jdaggett@8278 1275 <a href="#oblique">oblique</a>
jdaggett@484 1276
jdaggett@484 1277 <tr>
jdaggett@484 1278 <td>Initial:
jdaggett@484 1279
jdaggett@484 1280 <td>normal
jdaggett@484 1281
jdaggett@484 1282 <tr>
jdaggett@484 1283 <td>Applies to:
jdaggett@484 1284
jdaggett@484 1285 <td>all elements
jdaggett@484 1286
jdaggett@484 1287 <tr>
jdaggett@484 1288 <td>Inherited:
jdaggett@484 1289
jdaggett@484 1290 <td>yes
jdaggett@484 1291
jdaggett@484 1292 <tr>
jdaggett@484 1293 <td>Percentages:
jdaggett@484 1294
jdaggett@484 1295 <td>N/A
jdaggett@484 1296
jdaggett@484 1297 <tr>
jdaggett@484 1298 <td>Media:
jdaggett@484 1299
jdaggett@484 1300 <td>visual
jdaggett@484 1301
jdaggett@484 1302 <tr>
jdaggett@1148 1303 <td>Computed value:
jdaggett@484 1304
jdaggett@484 1305 <td>as specified
jdaggett@7377 1306
jdaggett@7377 1307 <tr>
jdaggett@7377 1308 <td>Animatable:
jdaggett@7377 1309
jdaggett@7377 1310 <td>no
jdaggett@484 1311 </table>
jdaggett@484 1312
jdaggett@8278 1313 <p>The <a href="#propdef-font-style" title="font-style!!property">‘<code
jdaggett@8278 1314 class=property>font-style</code>’</a> property allows italic or oblique
jdaggett@8278 1315 faces to be selected. Italic forms are generally cursive in nature while
jdaggett@8278 1316 oblique faces are typically sloped versions of the regular face. Oblique
jdaggett@8278 1317 faces can be simulated by artificially sloping the glyphs of the regular
jdaggett@8278 1318 face. Compare the artificially sloped renderings of Palatino ‘<code
jdaggett@2556 1319 class=property>a</code>’ and Baskerville ‘<code
jdaggett@1148 1320 class=property>N</code>’ in grey with the actual italic versions:
jdaggett@518 1321
jdaggett@1150 1322 <div class=figure><img alt="artificial sloping vs. real italics"
jdaggett@1150 1323 src=realvsfakeitalics.png>
jdaggett@890 1324 <p class=caption>Artificial sloping versus real italics
jdaggett@512 1325 </div>
jdaggett@518 1326
jdaggett@8278 1327 <p>Values have the following meanings:
jdaggett@8278 1328
jdaggett@8278 1329 <dl>
jdaggett@8278 1330 <dt><dfn id=font-style-normal-value
jdaggett@8278 1331 title="normal!!font-style">normal</dfn>
jdaggett@8278 1332
jdaggett@8278 1333 <dd>selects a face that is classified as a normal face, one that is
jdaggett@8278 1334 neither italic or obliqued
jdaggett@8278 1335
jdaggett@8278 1336 <dt><dfn id=italic>italic</dfn>
jdaggett@8278 1337
jdaggett@8278 1338 <dd>selects a font that is labeled as an italic face, or an oblique face
jdaggett@8278 1339 if one is not
jdaggett@8278 1340
jdaggett@8278 1341 <dt><dfn id=oblique>oblique</dfn>
jdaggett@8278 1342
jdaggett@8278 1343 <dd>selects a font that is labeled as an oblique face, or an italic face
jdaggett@8278 1344 if one is not
jdaggett@8278 1345 </dl>
jdaggett@8278 1346
jdaggett@8278 1347 <p>If no italic or oblique face is available, oblique faces can be
jdaggett@8363 1348 synthesized by rendering non-obliqued faces with an artificial obliquing
jdaggett@8363 1349 operation. The use of these artificially obliqued faces can be disabled
jdaggett@8363 1350 using the ‘<a href="#propdef-font-synthesis"><code
jdaggett@8363 1351 class=property>font-synthesis</code></a>’ property. The details of the
jdaggett@8363 1352 obliquing operation are not explicitly defined.</p>
jdaggett@8363 1353 <!-- resolution on the "undefined" nature of synthetics: http://www.w3.org/2013/06/06-css-minutes.html#item03 -->
jdaggett@518 1354
jdaggett@518 1355 <p>Many scripts lack the tradition of mixing a cursive form within text
jdaggett@518 1356 rendered with a normal face. Chinese, Japanese and Korean fonts almost
jdaggett@518 1357 always lack italic or oblique faces. Fonts that support a mixture of
jdaggett@518 1358 scripts will sometimes omit specific scripts such as Arabic from the set
jdaggett@518 1359 of glyphs supported in the italic face. User agents should be careful
jdaggett@8225 1360 about making <a href="#character-map"><em>character map</em></a>
jdaggett@8363 1361 assumptions across faces when implementing support for <a
jdaggett@8363 1362 href="#system-font-fallback"><em>system font fallback</em></a>.</p>
jdaggett@1662 1363 <!-- prop: font-size -->
jdaggett@1662 1364
jdaggett@1662 1365 <h3 id=font-size-prop><span class=secno>3.5 </span>Font size: the <a
jdaggett@1662 1366 href="#propdef-font-size">font-size</a> property</h3>
jdaggett@1662 1367
jdaggett@8225 1368 <table class=propdef id=namefont-sizevalueltabsolute-sizegt-ltre>
jdaggett@484 1369 <tbody>
jdaggett@484 1370 <tr>
jdaggett@484 1371 <td>Name:
jdaggett@484 1372
jdaggett@1662 1373 <td><dfn id=propdef-font-size>font-size</dfn>
jdaggett@484 1374
jdaggett@484 1375 <tr>
jdaggett@484 1376 <td>Value:
jdaggett@484 1377
jdaggett@8225 1378 <td><a href="#absolute-size-value"><var>&lt;absolute-size&gt;</var></a>
jdaggett@8225 1379 | <a href="#relative-size-value"><var>&lt;relative-size&gt;</var></a> |
jdaggett@8225 1380 <a href="#length-size-value"><var>&lt;length&gt;</var></a> | <a
jdaggett@8225 1381 href="#percentage-size-value"><var>&lt;percentage&gt;</var></a>
jdaggett@484 1382
jdaggett@484 1383 <tr>
jdaggett@484 1384 <td>Initial:
jdaggett@484 1385
jdaggett@484 1386 <td>medium
jdaggett@484 1387
jdaggett@484 1388 <tr>
jdaggett@484 1389 <td>Applies to:
jdaggett@484 1390
jdaggett@484 1391 <td>all elements
jdaggett@484 1392
jdaggett@484 1393 <tr>
jdaggett@484 1394 <td>Inherited:
jdaggett@484 1395
jdaggett@484 1396 <td>yes
jdaggett@484 1397
jdaggett@484 1398 <tr>
jdaggett@484 1399 <td>Percentages:
jdaggett@484 1400
jdaggett@484 1401 <td>refer to parent element's font size
jdaggett@484 1402
jdaggett@484 1403 <tr>
jdaggett@484 1404 <td>Media:
jdaggett@484 1405
jdaggett@484 1406 <td>visual
jdaggett@484 1407
jdaggett@484 1408 <tr>
jdaggett@1148 1409 <td>Computed value:
jdaggett@484 1410
jdaggett@484 1411 <td>absolute length
jdaggett@7377 1412
jdaggett@7377 1413 <tr>
jdaggett@7377 1414 <td>Animatable:
jdaggett@7377 1415
jdaggett@7377 1416 <td>as <a
jdaggett@7377 1417 href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a>
jdaggett@484 1418 </table>
jdaggett@484 1419
jdaggett@512 1420 <p>This property indicates the desired height of glyphs from the font. For
jdaggett@512 1421 scalable fonts, the font-size is a scale factor applied to the EM unit of
jdaggett@512 1422 the font. (Note that certain glyphs may bleed outside their EM box.) For
jdaggett@512 1423 non-scalable fonts, the font-size is converted into absolute units and
jdaggett@512 1424 matched against the declared font-size of the font, using the same
jdaggett@512 1425 absolute coordinate space for both of the matched values. Values have the
jdaggett@512 1426 following meanings:
jdaggett@512 1427
jdaggett@512 1428 <dl>
jdaggett@8225 1429 <dt><dfn id=absolute-size-value><var>&lt;absolute-size&gt;</var></dfn>
jdaggett@8225 1430
jdaggett@8225 1431 <dd> An <a
jdaggett@8225 1432 href="#absolute-size-value"><var>&lt;absolute-size&gt;</var></a> keyword
jdaggett@8225 1433 refers to an entry in a table of font sizes computed and kept by the user
jdaggett@8225 1434 agent. Possible values are:
jdaggett@512 1435 <p> [ xx-small | x-small | small | medium | large | x-large | xx-large ]</p>
jdaggett@512 1436
jdaggett@8225 1437 <dt><dfn id=relative-size-value><var>&lt;relative-size&gt;</var></dfn>
jdaggett@8225 1438
jdaggett@8225 1439 <dd> A <a href="#relative-size-value"><var>&lt;relative-size&gt;</var></a>
jdaggett@8225 1440 keyword is interpreted relative to the table of font sizes and the
jdaggett@8225 1441 computed ‘<a href="#propdef-font-size"><code
jdaggett@8225 1442 class=property>font-size</code></a>’ of the parent element. Possible
jdaggett@8225 1443 values are:
jdaggett@890 1444 <p> [ larger | smaller ]
jdaggett@890 1445
jdaggett@1148 1446 <p> For example, if the parent element has a font size of ‘<code
jdaggett@1148 1447 class=property>medium</code>’, a value of ‘<code
jdaggett@1148 1448 class=property>larger</code>’ will make the font size of the current
jdaggett@1148 1449 element be ‘<code class=property>large</code>’. If the parent
jdaggett@1148 1450 element's size is not close to a table entry, the user agent is free to
jdaggett@1148 1451 interpolate between table entries or round off to the closest one. The
jdaggett@1148 1452 user agent may have to extrapolate table values if the numerical value
jdaggett@1148 1453 goes beyond the keywords.
jdaggett@512 1454
jdaggett@8225 1455 <dt><dfn id=length-size-value><var>&lt;length&gt;</var></dfn>
jdaggett@512 1456
jdaggett@8187 1457 <dd>A length value specifies an absolute font size (independent of the
jdaggett@8187 1458 user agent's font table). Negative lengths are illegal.
jdaggett@512 1459
jdaggett@8225 1460 <dt><dfn id=percentage-size-value><var>&lt;percentage&gt;</var></dfn>
jdaggett@512 1461
jdaggett@512 1462 <dd>A percentage value specifies an absolute font size relative to the
jdaggett@512 1463 parent element's font size. Use of percentage values, or values in
jdaggett@1148 1464 ‘<code class=property>em</code>’s, leads to more robust and
jdaggett@512 1465 cascadable style sheets.
jdaggett@512 1466 </dl>
jdaggett@512 1467
jdaggett@8187 1468 <p>The following table provides user agent guidelines for the absolute-size
jdaggett@8187 1469 scaling factor and their mapping to HTML heading and absolute font-sizes.
jdaggett@8187 1470 The ‘<code class=property>medium</code>’ value is used as the
jdaggett@8187 1471 reference middle value. The user agent may fine-tune these values for
jdaggett@8187 1472 different fonts or different types of display devices.
jdaggett@1244 1473
jdaggett@1244 1474 <table class=data>
jdaggett@1152 1475 <thead>
jdaggett@1152 1476 <tr>
jdaggett@1152 1477 <th>CSS absolute-size values
jdaggett@1152 1478
jdaggett@1152 1479 <th>xx-small
jdaggett@1152 1480
jdaggett@1152 1481 <th>x-small
jdaggett@1152 1482
jdaggett@1152 1483 <th>small
jdaggett@1152 1484
jdaggett@1152 1485 <th>medium
jdaggett@1152 1486
jdaggett@1152 1487 <th>large
jdaggett@1152 1488
jdaggett@1152 1489 <th>x-large
jdaggett@1152 1490
jdaggett@1152 1491 <th>xx-large
jdaggett@1152 1492
jdaggett@1152 1493 <th> 
jdaggett@1152 1494
jdaggett@512 1495 <tbody>
jdaggett@512 1496 <tr>
jdaggett@1152 1497 <th>scaling factor
jdaggett@1152 1498
jdaggett@1152 1499 <td>3/5
jdaggett@1152 1500
jdaggett@1152 1501 <td>3/4
jdaggett@1152 1502
jdaggett@1152 1503 <td>8/9
jdaggett@1152 1504
jdaggett@1152 1505 <td>1
jdaggett@1152 1506
jdaggett@1152 1507 <td>6/5
jdaggett@1152 1508
jdaggett@1152 1509 <td>3/2
jdaggett@1152 1510
jdaggett@1152 1511 <td>2/1
jdaggett@1152 1512
jdaggett@1152 1513 <td>3/1
jdaggett@512 1514
jdaggett@512 1515 <tr>
jdaggett@8187 1516 <th>HTML headings
jdaggett@1152 1517
jdaggett@1152 1518 <td>h6
jdaggett@1152 1519
jdaggett@1152 1520 <td> 
jdaggett@1152 1521
jdaggett@1152 1522 <td>h5
jdaggett@1152 1523
jdaggett@1152 1524 <td>h4
jdaggett@1152 1525
jdaggett@1152 1526 <td>h3
jdaggett@1152 1527
jdaggett@1152 1528 <td>h2
jdaggett@1152 1529
jdaggett@1152 1530 <td>h1
jdaggett@1152 1531
jdaggett@1152 1532 <td> 
jdaggett@512 1533
jdaggett@512 1534 <tr>
jdaggett@8187 1535 <th>HTML font sizes
jdaggett@1152 1536
jdaggett@1152 1537 <td>1
jdaggett@1152 1538
jdaggett@1152 1539 <td> 
jdaggett@1152 1540
jdaggett@1152 1541 <td>2
jdaggett@1152 1542
jdaggett@1152 1543 <td>3
jdaggett@1152 1544
jdaggett@1152 1545 <td>4
jdaggett@1152 1546
jdaggett@1152 1547 <td>5
jdaggett@1152 1548
jdaggett@1152 1549 <td>6
jdaggett@1152 1550
jdaggett@1152 1551 <td>7
jdaggett@512 1552 </table>
jdaggett@512 1553
jdaggett@512 1554 <p class=note><em><strong>Note 1.</strong> To preserve readability, an UA
jdaggett@512 1555 applying these guidelines should nevertheless avoid creating font-size
jdaggett@8272 1556 resulting in less than 9 device pixels per EM unit on a computer
jdaggett@8272 1557 display.</em>
jdaggett@512 1558
jdaggett@512 1559 <p class=note><em><strong>Note 2.</strong> In CSS1, the suggested scaling
jdaggett@512 1560 factor between adjacent indexes was 1.5 which user experience proved to be
jdaggett@512 1561 too large. In CSS2, the suggested scaling factor for computer screen
jdaggett@512 1562 between adjacent indexes was 1.2 which still created issues for the small
jdaggett@512 1563 sizes. The new scaling factor varies between each index to provide a
jdaggett@512 1564 better readability.</em>
jdaggett@512 1565
jdaggett@6659 1566 <p>The actual value of this property may differ from the computed value due
jdaggett@6659 1567 a numerical value on ‘<a href="#propdef-font-size-adjust"><code
jdaggett@4624 1568 class=property>font-size-adjust</code></a>’ and the unavailability of
jdaggett@4624 1569 certain font sizes.
jdaggett@512 1570
jdaggett@512 1571 <p>Child elements inherit the computed <a class=noxref
jdaggett@6659 1572 href="#font-size-prop"> <span class=property>‘<code
jdaggett@1148 1573 class=property>font-size</code>’</span></a> value (otherwise, the effect
jdaggett@2556 1574 of <a class=noxref href="#font-size-adjust-prop"><span
jdaggett@2556 1575 class=property>‘<code
jdaggett@1148 1576 class=property>font-size-adjust</code>’</span></a> would compound).
jdaggett@512 1577
jdaggett@512 1578 <div class=example>
jdaggett@4624 1579 <p style="display:none">Example(s):
jdaggett@890 1580
jdaggett@890 1581 <p>
jdaggett@512 1582
jdaggett@512 1583 <pre>p { font-size: 12pt; }
jdaggett@512 1584 blockquote { font-size: larger }
jdaggett@512 1585 em { font-size: 150% }
jdaggett@512 1586 em { font-size: 1.5em }
jdaggett@512 1587 </pre>
jdaggett@512 1588 </div>
jdaggett@512 1589 <!-- prop: font-size-adjust -->
jdaggett@512 1590
jdaggett@1662 1591 <h3 id=font-size-adjust-prop><span class=secno>3.6 </span>Relative sizing:
jdaggett@1662 1592 the <a href="#propdef-font-size-adjust">font-size-adjust</a> property</h3>
jdaggett@1662 1593
jdaggett@6659 1594 <table class=propdef id=namefont-size-adjustvaluenone-auto-ltnum>
jdaggett@484 1595 <tbody>
jdaggett@484 1596 <tr>
jdaggett@484 1597 <td>Name:
jdaggett@484 1598
jdaggett@1662 1599 <td><dfn id=propdef-font-size-adjust>font-size-adjust</dfn>
jdaggett@484 1600
jdaggett@484 1601 <tr>
jdaggett@484 1602 <td>Value:
jdaggett@484 1603
jdaggett@8278 1604 <td><a href="#font-size-adjust-none-value"
jdaggett@8278 1605 title="none!!font-size-adjust">none</a> | <a
jdaggett@8278 1606 href="#font-size-adjust-auto-value"
jdaggett@8278 1607 title="auto!!font-size-adjust">auto</a> | <a
jdaggett@8225 1608 href="#aspect-ratio-value"><var>&lt;number&gt;</var></a>
jdaggett@484 1609
jdaggett@484 1610 <tr>
jdaggett@484 1611 <td>Initial:
jdaggett@484 1612
jdaggett@484 1613 <td>none
jdaggett@484 1614
jdaggett@484 1615 <tr>
jdaggett@484 1616 <td>Applies to:
jdaggett@484 1617
jdaggett@484 1618 <td>all elements
jdaggett@484 1619
jdaggett@484 1620 <tr>
jdaggett@484 1621 <td>Inherited:
jdaggett@484 1622
jdaggett@484 1623 <td>yes
jdaggett@484 1624
jdaggett@484 1625 <tr>
jdaggett@484 1626 <td>Percentages:
jdaggett@484 1627
jdaggett@554 1628 <td>N/A
jdaggett@484 1629
jdaggett@484 1630 <tr>
jdaggett@484 1631 <td>Media:
jdaggett@484 1632
jdaggett@484 1633 <td>visual
jdaggett@484 1634
jdaggett@484 1635 <tr>
jdaggett@1148 1636 <td>Computed value:
jdaggett@484 1637
jdaggett@554 1638 <td>as specified
jdaggett@7377 1639
jdaggett@7377 1640 <tr>
jdaggett@7377 1641 <td>Animatable:
jdaggett@7377 1642
jdaggett@7377 1643 <td>as <a
jdaggett@7377 1644 href="http://dev.w3.org/csswg/css3-transitions/#animtype-number">number</a>
jdaggett@484 1645 </table>
jdaggett@484 1646
jdaggett@555 1647 <p>For any given font size, the apparent size and legibility of text varies
jdaggett@555 1648 across fonts. For scripts such as Latin or Cyrillic that distinguish
jdaggett@555 1649 between upper and lowercase letters, the relative height of lowercase
jdaggett@555 1650 letters compared to their uppercase counterparts is a determining factor
jdaggett@555 1651 of legibility. This is commonly referred to as the <a class=index-def
jdaggett@4624 1652 href="#aspect-value" id=aspect-value0 title="aspect value"><dfn
jdaggett@4624 1653 id=aspect-value>aspect value</dfn></a>. Precisely defined, it is equal to
jdaggett@4624 1654 the x-height of a font divided by the font size.
jdaggett@555 1655
jdaggett@555 1656 <p>In situations where font fallback occurs, fallback fonts may not share
jdaggett@555 1657 the same aspect ratio as the desired font family and will thus appear less
jdaggett@555 1658 readable. The font-size-adjust property is a way to preserve the
jdaggett@547 1659 readability of text when font fallback occurs. It does this by adjusting
jdaggett@1662 1660 the font-size so that the x-height is the same regardless of the font
jdaggett@555 1661 used.
jdaggett@547 1662
jdaggett@547 1663 <div class=example>
jdaggett@547 1664 <p>The style defined below defines Verdana as the desired font family, but
jdaggett@547 1665 if Verdana is not available Futura or Times will be used.</p>
jdaggett@547 1666
jdaggett@8277 1667 <pre>p {
jdaggett@8277 1668 font-family: Verdana, Futura, Times;
jdaggett@547 1669 }
jdaggett@547 1670
jdaggett@547 1671 &lt;p>Lorem ipsum dolor sit amet, ...&lt;/p>
jdaggett@547 1672 </pre>
jdaggett@547 1673
jdaggett@547 1674 <p>Verdana has a relatively high aspect ratio, lowercase letters are
jdaggett@547 1675 relatively tall compared to uppercase letters, so at small sizes text
jdaggett@547 1676 appears legible. Times has a lower aspect ratio and so if fallback
jdaggett@547 1677 occurs, the text will be less legible at small sizes than Verdana.</p>
jdaggett@547 1678 </div>
jdaggett@547 1679
jdaggett@547 1680 <p>How text rendered in each of these fonts compares is shown below, the
jdaggett@547 1681 columns show text rendered in Verdana, Futura and Times. The same
jdaggett@547 1682 font-size value is used across cells within each row and red lines are
jdaggett@547 1683 included to show the differences in x-height. In the upper half each row
jdaggett@547 1684 is rendered in the same font-size value. The same is true for the lower
jdaggett@547 1685 half but in this half the font-size-adjust property is also set so that
jdaggett@2462 1686 the actual font size is adjusted to preserve the x-height across each row.
jdaggett@547 1687 Note how small text remains relatively legible across each row in the
jdaggett@547 1688 lower half.
jdaggett@547 1689
jdaggett@1150 1690 <div class=figure><img alt="text with and without font-size-adjust"
jdaggett@1150 1691 src=fontsizeadjust.png>
jdaggett@890 1692 <p class=caption>Text with and without the use of font-size-adjust
jdaggett@547 1693 </div>
jdaggett@512 1694
jdaggett@8640 1695 <p>This property allows authors to specify an <a
jdaggett@8640 1696 href="#aspect-value"><i>aspect value</i></a> for an element that will
jdaggett@8640 1697 effectively preserve the x-height of the first choice font, whether it is
jdaggett@8640 1698 substituted or not. Values have the following meanings:
jdaggett@512 1699
jdaggett@512 1700 <dl>
jdaggett@8278 1701 <dt><dfn id=font-size-adjust-none-value
jdaggett@8278 1702 title="none!!font-size-adjust">none</dfn>
jdaggett@512 1703
jdaggett@512 1704 <dd>Do not preserve the font's x-height.
jdaggett@512 1705
jdaggett@8278 1706 <dt><dfn id=font-size-adjust-auto-value
jdaggett@8278 1707 title="auto!!font-size-adjust">auto</dfn>
jdaggett@6659 1708
jdaggett@8640 1709 <dd>Behaves just like &lt;number>, except the number used is the <a
jdaggett@8640 1710 href="#aspect-value"><i>aspect value</i></a> calculated by user agents
jdaggett@8640 1711 for the first font in the list of fonts defined for the initial value of
jdaggett@8640 1712 the <a href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8278 1713 class=property>font-family</code>’</a> property. Effectively this is
jdaggett@8278 1714 the default font used when <a href="#propdef-font-family"
jdaggett@8278 1715 title="font-family!!property">‘<code
jdaggett@8278 1716 class=property>font-family</code>’</a> is not otherwise specified.
jdaggett@6659 1717 <p>Authors can use this value to specify that font size should be
jdaggett@6659 1718 normalized across fonts based on the x-height without the need to
jdaggett@6659 1719 specify the aspect ratio explicitly.</p>
jdaggett@6659 1720
jdaggett@8225 1721 <dt><dfn id=aspect-ratio-value><var>&lt;number&gt;</var></dfn>
jdaggett@512 1722
jdaggett@8640 1723 <dd>Specifies the <a href="#aspect-value"><i>aspect value</i></a> used in
jdaggett@8640 1724 the calculation below to calculate the adjusted font size:
jdaggett@8277 1725 <pre>c = ( a / a' ) s
jdaggett@512 1726 </pre>
jdaggett@512 1727
jdaggett@512 1728 <p>where:</p>
jdaggett@512 1729
jdaggett@554 1730 <pre>s = font-size value
jdaggett@8640 1731 a = <a href="#aspect-value"><i>aspect value</i></a> as specified by the font-size-adjust property
jdaggett@8640 1732 a' = <a href="#aspect-value"><i>aspect value</i></a> of actual font
jdaggett@554 1733 c = adjusted font-size to use
jdaggett@512 1734 </pre>
jdaggett@554 1735
jdaggett@554 1736 <p>This value applies to any font that is selected but in typical usage
jdaggett@8640 1737 it should be based on the <a href="#aspect-value"><i>aspect
jdaggett@8640 1738 value</i></a> of the first font in the font-family list. If this is
jdaggett@8640 1739 specified accurately, the <tt>(a/a')</tt> term in the formula above is
jdaggett@8640 1740 effectively 1 for the first font and no adjustment occurs. If the value
jdaggett@8640 1741 is specified inaccurately, text rendered using the first font in the
jdaggett@8640 1742 family list will display differently in older user agents that don't
jdaggett@8640 1743 support font-size-adjust.</p>
jdaggett@512 1744 </dl>
jdaggett@512 1745
jdaggett@8640 1746 <p>The value of ‘<a href="#propdef-font-size-adjust"><code
jdaggett@8640 1747 class=property>font-size-adjust</code></a>’ affects the size of relative
jdaggett@8640 1748 units that are based on font metrics of the <a
jdaggett@8640 1749 href="#first-available-font"><i>first available font</i></a> such as
jdaggett@8640 1750 <code>ex</code> and <code>ch</code> but does not affect the size of
jdaggett@8640 1751 <code>em</code> units.
jdaggett@8640 1752
jdaggett@8640 1753 <p>Authors can calculate the <a href="#aspect-value"><i>aspect
jdaggett@8640 1754 value</i></a> for a given font by comparing spans with the same content
jdaggett@8640 1755 but different font-size-adjust properties. If the same font-size is used,
jdaggett@8640 1756 the spans will match when the font-size-adjust value is accurate for the
jdaggett@8640 1757 given font.
jdaggett@554 1758
jdaggett@554 1759 <div class=example>
jdaggett@8640 1760 <p>Two spans with borders are used to determine the <a
jdaggett@8640 1761 href="#aspect-value"><i>aspect value</i></a> of a font. The font-size is
jdaggett@8640 1762 the same for both spans but the font-size-adjust property is specified
jdaggett@8640 1763 only for the right span. Starting with a value of 0.5, the aspect value
jdaggett@8640 1764 can be adjusted until the borders around the two letters line up.</p>
jdaggett@554 1765
jdaggett@554 1766 <pre>p {
jdaggett@554 1767 font-family: Futura;
jdaggett@554 1768 font-size: 500px;
jdaggett@554 1769 }
jdaggett@554 1770
jdaggett@554 1771 span {
jdaggett@554 1772 border: solid 1px red;
jdaggett@554 1773 }
jdaggett@554 1774
jdaggett@554 1775 .adjust {
jdaggett@554 1776 font-size-adjust: 0.5;
jdaggett@554 1777 }
jdaggett@554 1778
jdaggett@554 1779 &lt;p>&lt;span>b&lt;/span>&lt;span class="adjust">b&lt;/span>&lt;/p>
jdaggett@554 1780 </pre>
jdaggett@554 1781
jdaggett@8640 1782 <div class=figure><img alt="Futura with an <i>aspect value</i> of 0.5"
jdaggett@1150 1783 src=beforefontsizeadjust.png>
jdaggett@8640 1784 <p class=caption>Futura with an <a href="#aspect-value"><i>aspect
jdaggett@8640 1785 value</i></a> of 0.5
jdaggett@554 1786 </div>
jdaggett@554 1787
jdaggett@554 1788 <p>The box on the right is a bit bigger than the one on the left, so the
jdaggett@8640 1789 <a href="#aspect-value"><i>aspect value</i></a> of this font is something
jdaggett@8640 1790 less than 0.5. Adjust the value until the boxes align.</p>
jdaggett@554 1791 </div>
jdaggett@512 1792 <!-- prop: font -->
jdaggett@512 1793
jdaggett@1662 1794 <h3 id=font-prop><span class=secno>3.7 </span>Shorthand font property: the
jdaggett@1662 1795 <a href="#propdef-font">font</a> property</h3>
jdaggett@1662 1796
jdaggett@8225 1797 <table class=propdef id=namefontvalue-ltlsquofont-stylersquogt-l>
jdaggett@484 1798 <tbody>
jdaggett@484 1799 <tr>
jdaggett@484 1800 <td>Name:
jdaggett@484 1801
jdaggett@1662 1802 <td><dfn id=propdef-font>font</dfn>
jdaggett@484 1803
jdaggett@484 1804 <tr>
jdaggett@484 1805 <td>Value:
jdaggett@484 1806
jdaggett@8278 1807 <td>[ [ <var>&lt;<a href="#propdef-font-style"
jdaggett@8278 1808 title="font-style!!property">‘<code
jdaggett@8278 1809 class=property>font-style</code>’</a>&gt;</var> || <a
jdaggett@8225 1810 href="#font-variant-css21-values"><var>&lt;font-variant-css21&gt;</var></a>
jdaggett@8278 1811 || <var>&lt;<a href="#propdef-font-weight"
jdaggett@8278 1812 title="font-weight!!property">‘<code
jdaggett@8278 1813 class=property>font-weight</code>’</a>&gt;</var> || <var>&lt;<a
jdaggett@8278 1814 href="#propdef-font-stretch" title="font-stretch!!property">‘<code
jdaggett@8278 1815 class=property>font-stretch</code>’</a></var> ]? <var>&lt;‘<a
jdaggett@8225 1816 href="#propdef-font-size"><code
jdaggett@8225 1817 class=property>font-size</code></a>’&gt;</var> [ / <var>&lt;‘<code
jdaggett@8278 1818 class=property>line-height</code>’&gt;</var> ]? <var>&lt;<a
jdaggett@8278 1819 href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8278 1820 class=property>font-family</code>’</a>&gt;</var> ] | caption | icon |
jdaggett@8225 1821 menu | message-box | small-caption | status-bar
jdaggett@484 1822
jdaggett@484 1823 <tr>
jdaggett@484 1824 <td>Initial:
jdaggett@484 1825
jdaggett@484 1826 <td>see individual properties
jdaggett@484 1827
jdaggett@484 1828 <tr>
jdaggett@484 1829 <td>Applies to:
jdaggett@484 1830
jdaggett@484 1831 <td>all elements
jdaggett@484 1832
jdaggett@484 1833 <tr>
jdaggett@484 1834 <td>Inherited:
jdaggett@484 1835
jdaggett@484 1836 <td>yes
jdaggett@484 1837
jdaggett@484 1838 <tr>
jdaggett@484 1839 <td>Percentages:
jdaggett@484 1840
jdaggett@484 1841 <td>see individual properties
jdaggett@484 1842
jdaggett@484 1843 <tr>
jdaggett@484 1844 <td>Media:
jdaggett@484 1845
jdaggett@484 1846 <td>visual
jdaggett@484 1847
jdaggett@484 1848 <tr>
jdaggett@1148 1849 <td>Computed value:
jdaggett@484 1850
jdaggett@484 1851 <td>see individual properties
jdaggett@7377 1852
jdaggett@7377 1853 <tr>
jdaggett@7377 1854 <td>Animatable:
jdaggett@7377 1855
jdaggett@7377 1856 <td>see individual properties
jdaggett@484 1857 </table>
jdaggett@1732 1858
jdaggett@4624 1859 <p>The <span class=property>‘<a href="#propdef-font"><code
jdaggett@4624 1860 class=property>font</code></a>’</span> property is, except as described
jdaggett@8278 1861 below, a shorthand property for setting <a href="#propdef-font-style"
jdaggett@8278 1862 title="font-style!!property">‘<code
jdaggett@8278 1863 class=property>font-style</code>’</a>, <a href="#propdef-font-variant"
jdaggett@8278 1864 title="font-variant!!property">‘<code
jdaggett@8278 1865 class=property>font-variant</code>’</a>, <a href="#propdef-font-weight"
jdaggett@8278 1866 title="font-weight!!property">‘<code
jdaggett@8278 1867 class=property>font-weight</code>’</a>, <a href="#propdef-font-stretch"
jdaggett@8278 1868 title="font-stretch!!property">‘<code
jdaggett@8278 1869 class=property>font-stretch</code>’</a>, <span class=property>‘<a
jdaggett@8278 1870 href="#propdef-font-size"><code
jdaggett@8278 1871 class=property>font-size</code></a>’</span>, <a class=property
jdaggett@8278 1872 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
jdaggett@8278 1873 class=property>line-height</code>’</a>, <a href="#propdef-font-family"
jdaggett@8278 1874 title="font-family!!property">‘<code
jdaggett@8278 1875 class=property>font-family</code>’</a> at the same place in the
jdaggett@8278 1876 stylesheet. Values for the <a href="#propdef-font-variant"
jdaggett@8278 1877 title="font-variant!!property">‘<code
jdaggett@8278 1878 class=property>font-variant</code>’</a> property may also be included
jdaggett@8313 1879 but only those supported in CSS 2.1, none of the <a
jdaggett@8313 1880 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8313 1881 class=property>font-variant</code>’</a> values added in this
jdaggett@8313 1882 specification can be used in the <span class=property>‘<a
jdaggett@8278 1883 href="#propdef-font"><code class=property>font</code></a>’</span>
jdaggett@8278 1884 shorthand:
jdaggett@1732 1885
jdaggett@1732 1886 <pre
jdaggett@8225 1887 class=prod><dfn id=font-variant-css21-values><var>&lt;font-variant-css21&gt;</var></dfn> = [normal | small-caps]</pre>
jdaggett@1732 1888
jdaggett@1732 1889 <p>The syntax of this property is based on a traditional typographical
jdaggett@1732 1890 shorthand notation to set multiple properties related to fonts.
jdaggett@512 1891
jdaggett@8197 1892 <p>All subproperties of the ‘<a href="#propdef-font"><code
jdaggett@8197 1893 class=property>font</code></a>’ property are first reset to their
jdaggett@8197 1894 initial values, including those listed above plus <span
jdaggett@4624 1895 class=property>‘<a href="#propdef-font-size-adjust"><code
jdaggett@4624 1896 class=property>font-size-adjust</code></a>’</span>, <span
jdaggett@4624 1897 class=property>‘<a href="#propdef-font-kerning"><code
jdaggett@8278 1898 class=property>font-kerning</code></a>’</span>, subproperties of <a
jdaggett@8278 1899 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8278 1900 class=property>font-variant</code>’</a> and and <span>‘<a
jdaggett@8278 1901 href="#propdef-font-language-override"><code
jdaggett@8197 1902 class=property>font-language-override</code></a>’</span>. Then, those
jdaggett@8197 1903 properties that are given explicit values in the <span
jdaggett@8197 1904 class=property>‘<a href="#propdef-font"><code
jdaggett@4624 1905 class=property>font</code></a>’</span> shorthand are set to those
jdaggett@512 1906 values. For a definition of allowed and initial values, see the previously
jdaggett@512 1907 defined properties. For reasons of backwards compatibility, it is not
jdaggett@4624 1908 possible to set <span class=property>‘<a
jdaggett@7020 1909 href="#propdef-font-size-adjust"><code
jdaggett@7020 1910 class=property>font-size-adjust</code></a>’</span> to anything other
jdaggett@7020 1911 than its initial value using the <span class=property>‘<a
jdaggett@4624 1912 href="#propdef-font"><code class=property>font</code></a>’</span>
jdaggett@7020 1913 shorthand property; instead, use the individual property.
jdaggett@512 1914
jdaggett@512 1915 <div class=example>
jdaggett@4624 1916 <p style="display:none">Example(s):
jdaggett@890 1917
jdaggett@890 1918 <p>
jdaggett@512 1919
jdaggett@512 1920 <pre>p { font: 12pt/14pt sans-serif }
jdaggett@512 1921 p { font: 80% sans-serif }
jdaggett@512 1922 p { font: x-large/110% &quot;new century schoolbook&quot;, serif }
jdaggett@512 1923 p { font: bold italic large Palatino, serif }
jdaggett@512 1924 p { font: normal small-caps 120%/120% fantasy }
jdaggett@7020 1925 p { font: condensed oblique 12pt &quot;Helvetica Neue&quot;, serif; }
jdaggett@512 1926 </pre>
jdaggett@512 1927
jdaggett@1148 1928 <p> In the second rule, the font size percentage value (‘<code
jdaggett@8187 1929 class=css>80%</code>’) refers to the computed ‘<a
jdaggett@8187 1930 href="#propdef-font-size"><code class=property>font-size</code></a>’ of
jdaggett@8187 1931 the parent element. In the third rule, the line height percentage
jdaggett@8187 1932 (‘<code class=css>110%</code>’) refers to the font size of the
jdaggett@8187 1933 element itself.
jdaggett@512 1934
jdaggett@8278 1935 <p>The first three rules do not specify the <a
jdaggett@8278 1936 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8278 1937 class=property>font-variant</code>’</a> and <a
jdaggett@8278 1938 href="#propdef-font-weight" title="font-weight!!property">‘<code
jdaggett@8278 1939 class=property>font-weight</code>’</a> explicitly, so these properties
jdaggett@8368 1940 receive their initial values (<span title="normal value">‘<code
jdaggett@8368 1941 class=property>normal</code>’</span>). Notice that the font family name
jdaggett@8279 1942 "new century schoolbook", which contains spaces, is enclosed in quotes.
jdaggett@8279 1943 The fourth rule sets the <a href="#propdef-font-weight"
jdaggett@8279 1944 title="font-weight!!property">‘<code
jdaggett@8278 1945 class=property>font-weight</code>’</a> to ‘<a href="#bold"><code
jdaggett@8278 1946 class=property>bold</code></a>’, the <a href="#propdef-font-style"
jdaggett@8278 1947 title="font-style!!property">‘<code
jdaggett@8278 1948 class=property>font-style</code>’</a> to ‘<a href="#italic"><code
jdaggett@8278 1949 class=property>italic</code></a>’, and implicitly sets <a
jdaggett@8278 1950 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8368 1951 class=property>font-variant</code>’</a> to <a
jdaggett@8368 1952 href="#font-variant-normal-value" title="normal!!font-variant">‘<code
jdaggett@8368 1953 class=property>normal</code>’</a>.
jdaggett@8278 1954
jdaggett@8278 1955 <p> The fifth rule sets the <a href="#propdef-font-variant"
jdaggett@8278 1956 title="font-variant!!property">‘<code
jdaggett@8278 1957 class=property>font-variant</code>’</a> (‘<a href="#small-caps"><code
jdaggett@8278 1958 class=property>small-caps</code></a>’), the <span class=property>‘<a
jdaggett@8278 1959 href="#propdef-font-size"><code
jdaggett@4624 1960 class=property>font-size</code></a>’</span> (120% of the parent's font
jdaggett@8278 1961 size), the <a class=property
jdaggett@8278 1962 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
jdaggett@8278 1963 class=property>line-height</code>’</a> (120% of the font size) and the
jdaggett@8278 1964 <a href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8278 1965 class=property>font-family</code>’</a> (‘<a href="#fantasy"><code
jdaggett@8368 1966 class=property>fantasy</code></a>’). It follows that the keyword <span
jdaggett@8368 1967 title="normal value">‘<code class=property>normal</code>’</span>
jdaggett@8368 1968 applies to the two remaining properties: <a href="#propdef-font-style"
jdaggett@8278 1969 title="font-style!!property">‘<code
jdaggett@8278 1970 class=property>font-style</code>’</a> and <a
jdaggett@8278 1971 href="#propdef-font-weight" title="font-weight!!property">‘<code
jdaggett@8278 1972 class=property>font-weight</code>’</a>.
jdaggett@8278 1973
jdaggett@8278 1974 <p>The sixth rule sets the <a href="#propdef-font-style"
jdaggett@8278 1975 title="font-style!!property">‘<code
jdaggett@8278 1976 class=property>font-style</code>’</a>, <a href="#propdef-font-stretch"
jdaggett@8278 1977 title="font-stretch!!property">‘<code
jdaggett@8278 1978 class=property>font-stretch</code>’</a>, <span class=property>‘<a
jdaggett@8278 1979 href="#propdef-font-size"><code
jdaggett@8278 1980 class=property>font-size</code></a>’</span>, and <a
jdaggett@8278 1981 href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8278 1982 class=property>font-family</code>’</a>, the other font properties being
jdaggett@8278 1983 set to their initial values.
jdaggett@512 1984 </div>
jdaggett@512 1985
jdaggett@8278 1986 <p>Since the <a href="#propdef-font-stretch"
jdaggett@8278 1987 title="font-stretch!!property">‘<code
jdaggett@8278 1988 class=property>font-stretch</code>’</a> property was not defined in CSS
jdaggett@8278 1989 2.1, when using <a href="#propdef-font-stretch"
jdaggett@8278 1990 title="font-stretch!!property">‘<code
jdaggett@8278 1991 class=property>font-stretch</code>’</a> values within ‘<a
jdaggett@7020 1992 href="#propdef-font"><code class=property>font</code></a>’ rules,
jdaggett@7020 1993 authors should include a extra version compatible with older user agents:
jdaggett@7020 1994
jdaggett@7020 1995 <pre>p {
jdaggett@7020 1996 font: 80% sans-serif; /* for older user agents */
jdaggett@7020 1997 font: condensed 80% sans-serif;
jdaggett@7020 1998 }</pre>
jdaggett@7020 1999
jdaggett@1662 2000 <p>The following values refer to system fonts:
jdaggett@512 2001
jdaggett@512 2002 <dl>
jdaggett@512 2003 <dt><strong>caption</strong>
jdaggett@512 2004
jdaggett@512 2005 <dd>The font used for captioned controls (e.g., buttons, drop-downs,
jdaggett@512 2006 etc.).
jdaggett@512 2007
jdaggett@512 2008 <dt><strong>icon</strong>
jdaggett@512 2009
jdaggett@512 2010 <dd>The font used to label icons.
jdaggett@512 2011
jdaggett@512 2012 <dt><strong>menu</strong>
jdaggett@512 2013
jdaggett@512 2014 <dd>The font used in menus (e.g., dropdown menus and menu lists).
jdaggett@512 2015
jdaggett@512 2016 <dt><strong>message-box</strong>
jdaggett@512 2017
jdaggett@512 2018 <dd>The font used in dialog boxes.
jdaggett@512 2019
jdaggett@512 2020 <dt><strong>small-caption</strong>
jdaggett@512 2021
jdaggett@512 2022 <dd>The font used for labeling small controls.
jdaggett@512 2023
jdaggett@512 2024 <dt><strong>status-bar</strong>
jdaggett@512 2025
jdaggett@512 2026 <dd>The font used in window status bars.
jdaggett@512 2027 </dl>
jdaggett@512 2028
jdaggett@512 2029 <p>System fonts may only be set as a whole; that is, the font family, size,
jdaggett@1662 2030 weight, style, etc. are all set at the same time. These values may then be
jdaggett@512 2031 altered individually if desired. If no font with the indicated
jdaggett@512 2032 characteristics exists on a given platform, the user agent should either
jdaggett@1148 2033 intelligently substitute (e.g., a smaller version of the ‘<code
jdaggett@1148 2034 class=property>caption</code>’ font might be used for the ‘<code
jdaggett@7242 2035 class=property>small-caption</code>’ font), or substitute a user agent
jdaggett@1148 2036 default font. As for regular fonts, if, for a system font, any of the
jdaggett@1148 2037 individual properties are not part of the operating system's available
jdaggett@1148 2038 user preferences, those properties should be set to their initial values.
jdaggett@512 2039
jdaggett@1662 2040 <p>That is why this property is "almost" a shorthand property: system fonts
jdaggett@8278 2041 can only be specified with this property, not with <a
jdaggett@8278 2042 href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8278 2043 class=property>font-family</code>’</a> itself, so <span
jdaggett@4624 2044 class=property>‘<a href="#propdef-font"><code
jdaggett@4624 2045 class=property>font</code></a>’</span> allows authors to do more than
jdaggett@4624 2046 the sum of its subproperties. However, the individual properties such as
jdaggett@8278 2047 <a href="#propdef-font-weight" title="font-weight!!property">‘<code
jdaggett@8278 2048 class=property>font-weight</code>’</a> are still given values taken from
jdaggett@8278 2049 the system font, which can be independently varied.
jdaggett@512 2050
jdaggett@7235 2051 <p>Note that the keywords used for the system fonts listed above are only
jdaggett@7235 2052 treated as keywords when they occur in the initial position, in other
jdaggett@7235 2053 positions the same string is treated as part of the font family name:
jdaggett@7235 2054
jdaggett@7235 2055 <pre> font: menu; /* use the font settings for system menus */
jdaggett@7235 2056 font: large menu; /* use a font family named "menu" */</pre>
jdaggett@7235 2057
jdaggett@512 2058 <div class=example>
jdaggett@4624 2059 <p style="display:none">Example(s):
jdaggett@890 2060
jdaggett@890 2061 <p>
jdaggett@512 2062
jdaggett@512 2063 <pre>button { font: 300 italic 1.3em/1.7em &quot;FB Armada&quot;, sans-serif }
jdaggett@512 2064 button p { font: menu }
jdaggett@512 2065 button p em { font-weight: bolder }
jdaggett@512 2066 </pre>
jdaggett@512 2067
jdaggett@512 2068 <p>If the font used for dropdown menus on a particular system happened to
jdaggett@512 2069 be, for example, 9-point Charcoal, with a weight of 600, then P elements
jdaggett@512 2070 that were descendants of BUTTON would be displayed as if this rule were
jdaggett@890 2071 in effect:
jdaggett@512 2072
jdaggett@512 2073 <pre>button p { font: 600 9pt Charcoal }
jdaggett@512 2074 </pre>
jdaggett@512 2075
jdaggett@4624 2076 <p>Because the <span class=property>‘<a href="#propdef-font"><code
jdaggett@4624 2077 class=property>font</code></a>’</span> shorthand resets to its initial
jdaggett@4624 2078 value any property not explicitly given a value, this has the same effect
jdaggett@4624 2079 as this declaration:
jdaggett@512 2080
jdaggett@512 2081 <pre>button p {
jdaggett@512 2082 font-style: normal;
jdaggett@512 2083 font-variant: normal;
jdaggett@512 2084 font-weight: 600;
jdaggett@512 2085 font-size: 9pt;
jdaggett@512 2086 line-height: normal;
jdaggett@512 2087 font-family: Charcoal
jdaggett@8277 2088 }
jdaggett@512 2089 </pre>
jdaggett@512 2090 </div>
jdaggett@2487 2091 <!-- prop: font-synthesis -->
jdaggett@2487 2092
jdaggett@2487 2093 <h3 id=font-synthesis-prop><span class=secno>3.8 </span>Controlling
jdaggett@2487 2094 synthetic faces: the <a href="#propdef-font-synthesis">font-synthesis</a>
jdaggett@2487 2095 property</h3>
jdaggett@2487 2096
jdaggett@4624 2097 <table class=propdef id=namefont-synthesisvaluenone-weight-style>
jdaggett@2457 2098 <tbody>
jdaggett@2457 2099 <tr>
jdaggett@2457 2100 <td>Name:
jdaggett@2457 2101
jdaggett@2487 2102 <td><dfn id=propdef-font-synthesis>font-synthesis</dfn>
jdaggett@2457 2103
jdaggett@2457 2104 <tr>
jdaggett@2457 2105 <td>Value:
jdaggett@2457 2106
jdaggett@2487 2107 <td>none | [ weight || style ]
jdaggett@2457 2108
jdaggett@2457 2109 <tr>
jdaggett@2457 2110 <td>Initial:
jdaggett@2457 2111
jdaggett@2487 2112 <td>weight style
jdaggett@2457 2113
jdaggett@2457 2114 <tr>
jdaggett@2457 2115 <td>Applies to:
jdaggett@2457 2116
jdaggett@2457 2117 <td>all elements
jdaggett@2457 2118
jdaggett@2457 2119 <tr>
jdaggett@2457 2120 <td>Inherited:
jdaggett@2457 2121
jdaggett@2457 2122 <td>yes
jdaggett@2457 2123
jdaggett@2457 2124 <tr>
jdaggett@2457 2125 <td>Percentages:
jdaggett@2457 2126
jdaggett@2457 2127 <td>N/A
jdaggett@2457 2128
jdaggett@2457 2129 <tr>
jdaggett@2457 2130 <td>Media:
jdaggett@2457 2131
jdaggett@2457 2132 <td>visual
jdaggett@2457 2133
jdaggett@2457 2134 <tr>
jdaggett@2457 2135 <td>Computed value:
jdaggett@2457 2136
jdaggett@2457 2137 <td>as specified
jdaggett@7377 2138
jdaggett@7377 2139 <tr>
jdaggett@7377 2140 <td>Animatable:
jdaggett@7377 2141
jdaggett@7377 2142 <td>no
jdaggett@2457 2143 </table>
jdaggett@2457 2144
jdaggett@2487 2145 <p>This property controls whether user agents are allowed to synthesize
jdaggett@2487 2146 bold or oblique font faces when a font family lacks bold or italic faces.
jdaggett@7311 2147 If ‘<a href="#weight"><code class=property>weight</code></a>’ is not
jdaggett@7311 2148 specified, user agents must not synthesize bold faces and if ‘<code
jdaggett@2487 2149 class=property>style</code>’ is not specified user agents must not
jdaggett@8278 2150 synthesize italic faces. A value of ‘<code class=property>none</code>’
jdaggett@8278 2151 disallows all synthetic faces.
jdaggett@2457 2152
jdaggett@2457 2153 <div class=example>
jdaggett@2488 2154 <p>The style rule below disables the use of synthetically obliqued Arabic:</p>
jdaggett@2457 2155
jdaggett@2487 2156 <pre>*:lang(ar) { font-synthesis: none; }
jdaggett@2457 2157 </pre>
jdaggett@2457 2158 </div>
jdaggett@512 2159
jdaggett@6699 2160 <h2 id=font-resources><span class=secno>4 </span>Font Resources</h2>
jdaggett@545 2161
jdaggett@8311 2162 <h3 id=font-face-rule><span class=secno>4.1 </span>The <dfn
jdaggett@8311 2163 id=at-font-face-rule style="font-weight: inherit; font-style:
jdaggett@8311 2164 inherit"><code>@font-face</code></dfn> rule</h3>
jdaggett@8311 2165
jdaggett@8311 2166 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule allows
jdaggett@8311 2167 for linking to fonts that are automatically fetched and activated when
jdaggett@8311 2168 needed. This allows authors to select a font that closely matches the
jdaggett@8311 2169 design goals for a given page rather than limiting the font choice to a
jdaggett@8311 2170 set of fonts available on all platforms. A set of font descriptors define
jdaggett@8311 2171 the location of a font resource, either locally or externally, along with
jdaggett@8311 2172 the style characteristics of an individual face. Multiple <a
jdaggett@8311 2173 href="#at-font-face-rule"><code>@font-face</code></a> rules can be used to
jdaggett@8311 2174 construct font families with a variety of faces. Using CSS font matching
jdaggett@8311 2175 rules, a user agent can selectively download only those faces that are
jdaggett@8311 2176 needed for a given piece of text.
jdaggett@8311 2177
jdaggett@8311 2178 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule
jdaggett@8311 2179 consists of the <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 2180 at-keyword followed by a block of descriptor declarations. In terms of the
jdaggett@8311 2181 grammar, this specification defines the following productions:
jdaggett@8031 2182
jdaggett@8031 2183 <pre><dfn id=fontfacerule>font_face_rule</dfn>
jdaggett@8225 2184 : <a href="#fontfacesym"><i>FONT_FACE_SYM</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* '{' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#descriptordeclaration"><i>descriptor_declaration</i></a>? [ ';' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#descriptordeclaration"><i>descriptor_declaration</i></a>? ]* '}' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
jdaggett@8031 2185 ;
jdaggett@8031 2186
jdaggett@8031 2187 <dfn id=descriptordeclaration>descriptor_declaration</dfn>
jdaggett@8225 2188 : <a href="http://www.w3.org/TR/CSS21/grammar.html#grammar"><i>property</i></a> ':' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/grammar.html#grammar"><i>expr</i></a>
jdaggett@8031 2189 ;</pre>
jdaggett@8031 2190
jdaggett@8032 2191 <p>The following new definitions are introduced:
jdaggett@8032 2192
jdaggett@8032 2193 <pre>- -|\\0{0,4}2d(\r\n|[ \t\r\n\f])?
jdaggett@8032 2194 F f|\\0{0,4}(46|66)(\r\n|[ \t\r\n\f])?</pre>
jdaggett@8032 2195
jdaggett@8032 2196 <p>The following new token is introduced:
jdaggett@8032 2197
jdaggett@8225 2198 <pre>@{F}{O}{N}{T}{-}{F}{A}{C}{E} {return <dfn id=fontfacesym>FONT_FACE_SYM</dfn>;}</pre>
jdaggett@8032 2199
jdaggett@8311 2200 <p>Each <a href="#at-font-face-rule"><code>@font-face</code></a> rule
jdaggett@8311 2201 specifies a value for every font descriptor, either implicitly or
jdaggett@8311 2202 explicitly. Those not given explicit values in the rule take the initial
jdaggett@8311 2203 value listed with each descriptor in this specification. These descriptors
jdaggett@8311 2204 apply solely within the context of the <a
jdaggett@8311 2205 href="#at-font-face-rule"><code>@font-face</code></a> rule in which they
jdaggett@8311 2206 are defined, and do not apply to document language elements. There is no
jdaggett@8311 2207 notion of which elements the descriptors apply to or whether the values
jdaggett@8311 2208 are inherited by child elements. When a given descriptor occurs multiple
jdaggett@8311 2209 times in a given <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 2210 rule, only the last descriptor declaration is used and all prior
jdaggett@8311 2211 declarations for that descriptor are ignored.
jdaggett@512 2212
jdaggett@525 2213 <div class=example>
jdaggett@525 2214 <p>To use a downloadable font called Gentium:</p>
jdaggett@512 2215
jdaggett@512 2216 <pre>
jdaggett@525 2217 @font-face {
jdaggett@525 2218 font-family: Gentium;
jdaggett@2556 2219 src: url(http://example.com/fonts/Gentium.ttf);
jdaggett@525 2220 }
jdaggett@525 2221
jdaggett@525 2222 p { font-family: Gentium, serif; }
jdaggett@512 2223 </pre>
jdaggett@512 2224
jdaggett@573 2225 <p>The user agent will download Gentium and use it when rendering text
jdaggett@573 2226 within paragraph elements. If for some reason the site serving the font
jdaggett@573 2227 is unavailable, the default serif font will be used.</p>
jdaggett@512 2228 </div>
jdaggett@512 2229
jdaggett@8311 2230 <p>A given set of <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 2231 rules define a set of fonts available for use within the documents that
jdaggett@8311 2232 contain these rules. When font matching is done, fonts defined using these
jdaggett@8311 2233 rules are considered before other available fonts on a system.
jdaggett@8198 2234
jdaggett@8198 2235 <p>Downloaded fonts are only available to documents that reference them.
jdaggett@8198 2236 The process of activating these fonts must not make them available to
jdaggett@2472 2237 other applications or to documents that don't directly link to the same
jdaggett@2556 2238 font. User agent implementers might consider it convenient to use
jdaggett@2472 2239 downloaded fonts when rendering characters in other documents for which no
jdaggett@8363 2240 other available font exists as part of the <a
jdaggett@8363 2241 href="#system-font-fallback"><em>system font fallback</em></a> procedure.
jdaggett@8198 2242 However, this would cause a security leak since the contents of one page
jdaggett@8198 2243 would be able to affect other pages, something an attacker could use as an
jdaggett@8198 2244 attack vector. These restrictions do not affect caching behavior, fonts
jdaggett@8198 2245 are cached the same way other web resources are cached.
jdaggett@8198 2246
jdaggett@8198 2247 <p>This at-rule follows the forward-compatible parsing rules of CSS. Like
jdaggett@8198 2248 properties in a declaration block, declarations of any descriptors that
jdaggett@8311 2249 are not supported by the user agent must be ignored. <a
jdaggett@8311 2250 href="#at-font-face-rule"><code>@font-face</code></a> rules require a
jdaggett@8311 2251 font-family and src descriptor; if either of these are missing, the <a
jdaggett@8311 2252 href="#at-font-face-rule"><code>@font-face</code></a> rule is invalid and
jdaggett@8311 2253 must be ignored entirely.
jdaggett@1244 2254
jdaggett@1244 2255 <p>In cases where user agents have limited platform resources or implement
jdaggett@8311 2256 the ability to disable downloadable font resources, <a
jdaggett@8311 2257 href="#at-font-face-rule"><code>@font-face</code></a> rules must simply be
jdaggett@8311 2258 ignored; the behavior of individual descriptors as defined in this
jdaggett@8311 2259 specification should not be altered.
jdaggett@1662 2260
jdaggett@1662 2261 <h3 id=font-family-desc><span class=secno>4.2 </span>Font family: the <a
jdaggett@1662 2262 href="#descdef-font-family">font-family</a> descriptor</h3>
jdaggett@512 2263
jdaggett@512 2264 <table class=descdef>
jdaggett@512 2265 <tbody>
jdaggett@512 2266 <tr>
jdaggett@512 2267 <td>Name:
jdaggett@512 2268
jdaggett@8278 2269 <td><dfn id=descdef-font-family
jdaggett@8278 2270 title="font-family!!descriptor">font-family</dfn>
jdaggett@512 2271
jdaggett@512 2272 <tr>
jdaggett@512 2273 <td>Value:
jdaggett@512 2274
jdaggett@8225 2275 <td><a href="#family-name-value"><var>&lt;family-name&gt;</var></a>
jdaggett@890 2276
jdaggett@890 2277 <tr>
jdaggett@890 2278 <td><em>Initial:</em>
jdaggett@890 2279
jdaggett@890 2280 <td>N/A
jdaggett@512 2281 </table>
jdaggett@512 2282
jdaggett@525 2283 <p>This descriptor defines the font family name that will be used in all
jdaggett@8311 2284 CSS font family name matching. It is required for the <a
jdaggett@8311 2285 href="#at-font-face-rule"><code>@font-face</code></a> rule to be valid. It
jdaggett@8311 2286 overrides the font family names contained in the underlying font data. If
jdaggett@8311 2287 the font family name is the same as a font family available in a given
jdaggett@8311 2288 user's environment, it effectively hides the underlying font for documents
jdaggett@8311 2289 that use the stylesheet. This permits a web author to freely choose
jdaggett@8311 2290 font-family names without worrying about conflicts with font family names
jdaggett@8311 2291 present in a given user's environment. Likewise, platform substitutions
jdaggett@8311 2292 for a given font family name must not be used.
jdaggett@1244 2293
jdaggett@1662 2294 <h3 id=src-desc><span class=secno>4.3 </span>Font reference: the <a
jdaggett@1662 2295 href="#descdef-src">src</a> descriptor</h3>
jdaggett@512 2296
jdaggett@512 2297 <table class=descdef>
jdaggett@512 2298 <tbody>
jdaggett@512 2299 <tr>
jdaggett@512 2300 <td>Name:
jdaggett@512 2301
jdaggett@1662 2302 <td><dfn id=descdef-src>src</dfn>
jdaggett@512 2303
jdaggett@512 2304 <tr>
jdaggett@512 2305 <td>Value:
jdaggett@512 2306
jdaggett@8225 2307 <td>[ &lt;url> [format(&lt;string> #)]? | <a
jdaggett@8225 2308 href="#font-face-name-value"><var>&lt;font-face-name&gt;</var></a> ] #
jdaggett@890 2309
jdaggett@890 2310 <tr>
jdaggett@890 2311 <td><em>Initial:</em>
jdaggett@890 2312
jdaggett@890 2313 <td>N/A
jdaggett@512 2314 </table>
jdaggett@512 2315
jdaggett@899 2316 <p>This descriptor specifies the resource containing font data. It is
jdaggett@8311 2317 required for the <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 2318 rule to be valid. Its value is a prioritized, comma-separated list of
jdaggett@8311 2319 external references or locally-installed font face names. When a font is
jdaggett@8311 2320 needed the user agent iterates over the set of references listed, using
jdaggett@8311 2321 the first one it can successfully activate. Fonts containing invalid data
jdaggett@8311 2322 or local font faces that are not found are ignored and the user agent
jdaggett@8311 2323 loads the next font in the list.
jdaggett@8272 2324
jdaggett@8272 2325 <p>As with other URLs in CSS, the URL may be relative, in which case it is
jdaggett@8311 2326 resolved relative to the location of the style sheet containing the <a
jdaggett@8311 2327 href="#at-font-face-rule"><code>@font-face</code></a> rule. In the case of
jdaggett@8311 2328 SVG fonts, the URL points to an element within a document containing SVG
jdaggett@8311 2329 font definitions. If the element reference is omitted, a reference to the
jdaggett@8311 2330 first defined font is implied. Similarly, font container formats that can
jdaggett@7096 2331 contain more than one font must load one and only one of the fonts for a
jdaggett@8311 2332 given <a href="#at-font-face-rule"><code>@font-face</code></a> rule.
jdaggett@8311 2333 Fragment identifiers are used to indicate which font to load. If a
jdaggett@8311 2334 container format lacks a defined fragment identifier scheme,
jdaggett@8311 2335 implementations should use a simple 1-based indexing scheme (e.g.
jdaggett@8311 2336 "font-collection#1" for the first font, "font-collection#2" for the second
jdaggett@8311 2337 font).
jdaggett@1244 2338
jdaggett@2527 2339 <pre>
jdaggett@2527 2340 src: url(fonts/simple.ttf); /* load simple.ttf relative to stylesheet location */
jdaggett@2527 2341 src: url(/fonts/simple.ttf); /* load simple.ttf from absolute location */
jdaggett@2527 2342 src: url(fonts.svg#simple); /* load SVG font with id 'simple' */
jdaggett@2527 2343 </pre>
jdaggett@2527 2344
jdaggett@8198 2345 <p>External references consist of a URL, followed by an optional hint
jdaggett@8198 2346 describing the format of the font resource referenced by that URL. The
jdaggett@2527 2347 format hint contains a comma-separated list of format strings that denote
jdaggett@2527 2348 well-known font formats. Conformant user agents must skip downloading a
jdaggett@2527 2349 font resource if the format hints indicate only unsupported or unknown
jdaggett@2527 2350 font formats. If no format hints are supplied, the user agent should
jdaggett@2527 2351 download the font resource.
jdaggett@2527 2352
jdaggett@2527 2353 <pre>
jdaggett@2527 2354 /* load WOFF font if possible, otherwise use OpenType font */
jdaggett@2527 2355 @font-face {
jdaggett@2527 2356 font-family: bodytext;
jdaggett@2527 2357 src: url(ideal-sans-serif.woff) format("woff"),
jdaggett@2527 2358 url(basic-sans-serif.ttf) format("opentype");
jdaggett@2527 2359 }
jdaggett@2527 2360 </pre>
jdaggett@2527 2361
jdaggett@2527 2362 <p>Format strings defined by this specification:
jdaggett@2527 2363
jdaggett@2527 2364 <table class=data id=fontformats>
jdaggett@2527 2365 <thead>
jdaggett@2527 2366 <tr>
jdaggett@2527 2367 <th>String
jdaggett@2527 2368
jdaggett@2527 2369 <th>Font Format
jdaggett@2527 2370
jdaggett@2527 2371 <th>Common extensions
jdaggett@2527 2372
jdaggett@2527 2373 <tbody>
jdaggett@2527 2374 <tr>
jdaggett@2527 2375 <th>"woff"
jdaggett@2527 2376
jdaggett@4624 2377 <td><a href="http://www.w3.org/TR/WOFF/">WOFF (Web Open Font Format)</a>
jdaggett@2527 2378
jdaggett@2527 2379 <td>.woff
jdaggett@2527 2380
jdaggett@2527 2381 <tr>
jdaggett@2527 2382 <th>"truetype"
jdaggett@2527 2383
jdaggett@4624 2384 <td><a
jdaggett@4624 2385 href="http://www.microsoft.com/typography/otspec/default.htm">TrueType</a>
jdaggett@2527 2386
jdaggett@2527 2387 <td>.ttf
jdaggett@2527 2388
jdaggett@2527 2389 <tr>
jdaggett@2527 2390 <th>"opentype"
jdaggett@2527 2391
jdaggett@4624 2392 <td><a
jdaggett@4624 2393 href="http://www.microsoft.com/typography/otspec/default.htm">OpenType</a>
jdaggett@2527 2394
jdaggett@2527 2395 <td>.ttf, .otf
jdaggett@2527 2396
jdaggett@2527 2397 <tr>
jdaggett@2527 2398 <th>"embedded-opentype"
jdaggett@2527 2399
jdaggett@4624 2400 <td><a
jdaggett@4624 2401 href="http://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded
jdaggett@4624 2402 OpenType</a>
jdaggett@2527 2403
jdaggett@2527 2404 <td>.eot
jdaggett@2527 2405
jdaggett@2527 2406 <tr>
jdaggett@2527 2407 <th>"svg"
jdaggett@2527 2408
jdaggett@4624 2409 <td><a href="http://www.w3.org/TR/SVG/fonts.html">SVG Font</a>
jdaggett@2527 2410
jdaggett@2527 2411 <td>.svg, .svgz
jdaggett@2527 2412 </table>
jdaggett@2527 2413
jdaggett@2527 2414 <p>Given the overlap in common usage between TrueType and OpenType, the
jdaggett@2527 2415 format hints "truetype" and "opentype" must be considered as synonymous; a
jdaggett@2527 2416 format hint of "opentype" does not imply that the font contains Postscript
jdaggett@2527 2417 CFF style glyph data or that it contains OpenType layout information (see
jdaggett@7377 2418 <a href="#platform-props-to-css">Appendix A</a> for more background on
jdaggett@7377 2419 this).
jdaggett@2527 2420
jdaggett@2527 2421 <p>When authors would prefer to use a locally available copy of a given
jdaggett@8198 2422 font and download it if it's not, <code>local()</code> can be used. The
jdaggett@8225 2423 locally-installed <dfn
jdaggett@8225 2424 id=font-face-name-value><var>&lt;font-face-name&gt;</var></dfn> argument
jdaggett@8272 2425 to <code>local()</code> is a format-specific string that uniquely
jdaggett@8272 2426 identifies a single font face within a larger family. The syntax for a <a
jdaggett@8225 2427 href="#font-face-name-value"><var>&lt;font-face-name&gt;</var></a> is a
jdaggett@8241 2428 unique font face name enclosed by "local(" and ")". The name can
jdaggett@8241 2429 optionally be enclosed in quotes. If unquoted, the unquoted font family
jdaggett@8241 2430 name processing conventions apply; the name must be a sequence of
jdaggett@8241 2431 identifiers separated by whitespace which is converted to a string by
jdaggett@8241 2432 joining the identifiers together separated by a single space.
jdaggett@2527 2433
jdaggett@2527 2434 <pre>
jdaggett@2527 2435 /* regular face of Gentium */
jdaggett@573 2436 @font-face {
jdaggett@2527 2437 font-family: MyGentium;
jdaggett@2527 2438 src: local(Gentium), /* use locally available Gentium */
jdaggett@2527 2439 url(Gentium.ttf); /* otherwise, download it */
jdaggett@573 2440 }
jdaggett@573 2441 </pre>
jdaggett@573 2442
jdaggett@8241 2443 <p>For OpenType and TrueType fonts, this string is used to match only the
jdaggett@8241 2444 Postscript name or the full font name in the name table of locally
jdaggett@8241 2445 available fonts. Which type of name is used varies by platform and font,
jdaggett@8241 2446 so authors should include both of these names to assure proper matching
jdaggett@8241 2447 across platforms. Platform substitutions for a given font name must not be
jdaggett@8241 2448 used.
jdaggett@2527 2449
jdaggett@2527 2450 <pre>
jdaggett@2527 2451 /* bold face of Gentium */
jdaggett@2527 2452 @font-face {
jdaggett@2527 2453 font-family: MyGentium;
jdaggett@2527 2454 src: local(Gentium Bold), /* full font name */
jdaggett@2527 2455 local(Gentium-Bold), /* Postscript name */
jdaggett@2527 2456 url(GentiumBold.ttf); /* otherwise, download it */
jdaggett@2527 2457 font-weight: bold;
jdaggett@2527 2458 }
jdaggett@2527 2459 </pre>
jdaggett@2527 2460
jdaggett@8311 2461 <p>Just as a <a href="#at-font-face-rule"><code>@font-face</code></a> rule
jdaggett@8311 2462 specifies the characteristics of a single font within a family, the unique
jdaggett@8311 2463 name used with <code>local()</code> specifies a single font, not an entire
jdaggett@8311 2464 font family. Defined in terms of OpenType font data, the Postscript name
jdaggett@8311 2465 is found in the font's <a
jdaggett@2527 2466 href="http://www.microsoft.com/typography/otspec/name.htm">name table</a>,
jdaggett@2527 2467 in the name record with nameID = 6 (see <a href="#OPENTYPE"
jdaggett@2556 2468 rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> for more details). The
jdaggett@2527 2469 Postscript name is the commonly used key for all fonts on OSX and for
jdaggett@2527 2470 Postscript CFF fonts under Windows. The full font name (nameID = 4) is
jdaggett@2527 2471 used as a unique key for fonts with TrueType glyphs on Windows.
jdaggett@2527 2472
jdaggett@2527 2473 <p>For OpenType fonts with multiple localizations of the full font name,
jdaggett@2527 2474 the US English version is used (language ID = 0x409 for Windows and
jdaggett@2527 2475 language ID = 0 for Macintosh) or the first localization when a US English
jdaggett@2527 2476 full font name is not available (the OpenType specification recommends
jdaggett@2527 2477 that <a href="http://www.microsoft.com/typography/otspec/recom.htm">all
jdaggett@2527 2478 fonts minimally include US English names</a>). User agents that also match
jdaggett@2527 2479 other full font names, e.g. matching the Dutch name when the current
jdaggett@2527 2480 system locale is set to Dutch, are considered non-conformant. This is done
jdaggett@2527 2481 not to prefer English but to avoid matching inconsistencies across font
jdaggett@2527 2482 versions and OS localizations, since font style names (e.g. "Bold") are
jdaggett@2527 2483 frequently localized into many languages and the set of localizations
jdaggett@2527 2484 available varies widely across platform and font version. User agents that
jdaggett@2527 2485 match a concatenation of family name (nameID = 1) with style name (nameID
jdaggett@2527 2486 = 2) are considered non-conformant.
jdaggett@2527 2487
jdaggett@2527 2488 <p>This also allows for referencing faces that belong to larger families
jdaggett@2527 2489 that cannot otherwise be referenced.
jdaggett@2527 2490
jdaggett@2527 2491 <div class=example>
jdaggett@525 2492 <p>Use a local font or reference an SVG font in another document:</p>
jdaggett@525 2493
jdaggett@525 2494 <pre>
jdaggett@525 2495 @font-face {
jdaggett@525 2496 font-family: Headline;
jdaggett@8277 2497 src: local(Futura-Medium),
jdaggett@1148 2498 url(fonts.svg#MyGeometricModern) format("svg");
jdaggett@525 2499 }
jdaggett@525 2500 </pre>
jdaggett@525 2501
jdaggett@525 2502 <p>Create an alias for local Japanese fonts on different platforms:</p>
jdaggett@525 2503
jdaggett@525 2504 <pre>
jdaggett@525 2505 @font-face {
jdaggett@2527 2506 font-family: jpgothic;
jdaggett@525 2507 src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic);
jdaggett@525 2508 }
jdaggett@525 2509 </pre>
jdaggett@525 2510
jdaggett@525 2511 <p>Reference a font face that cannot be matched within a larger family:</p>
jdaggett@525 2512
jdaggett@525 2513 <pre>
jdaggett@525 2514 @font-face {
jdaggett@525 2515 font-family: Hoefler Text Ornaments;
jdaggett@525 2516 /* has the same font properties as Hoefler Text Regular */
jdaggett@8277 2517 src: local(HoeflerText-Ornaments);
jdaggett@525 2518 }
jdaggett@525 2519 </pre>
jdaggett@2527 2520
jdaggett@8198 2521 <p>Since localized fullnames never match, a document with the header style
jdaggett@8198 2522 rules below would always render using the default serif font, regardless
jdaggett@8198 2523 whether a particular system locale parameter is set to Finnish or not:</p>
jdaggett@1662 2524
jdaggett@1662 2525 <pre>
jdaggett@1662 2526 @font-face {
jdaggett@1662 2527 font-family: SectionHeader;
jdaggett@6653 2528 src: local("Arial Lihavoitu"); /* Finnish fullname for Arial Bold, should fail */
jdaggett@1662 2529 font-weight: bold;
jdaggett@1662 2530 }
jdaggett@1662 2531
jdaggett@1662 2532 h2 { font-family: SectionHeader, serif; }
jdaggett@1662 2533 </pre>
jdaggett@1662 2534
jdaggett@8198 2535 <p>A conformant user agent would never load the font ‘<code
jdaggett@1662 2536 class=css>gentium.eot</code>’ in the example below, since it is
jdaggett@4624 2537 included in the first definition of the ‘<a href="#descdef-src"><code
jdaggett@4624 2538 class=property>src</code></a>’ descriptor which is overridden by the
jdaggett@8311 2539 second definition in the same <a
jdaggett@8311 2540 href="#at-font-face-rule"><code>@font-face</code></a> rule:</p>
jdaggett@1662 2541
jdaggett@1662 2542 <pre>
jdaggett@1662 2543 @font-face {
jdaggett@1662 2544 font-family: MainText;
jdaggett@6653 2545 src: url(gentium.eot); /* for use with older non-conformant user agents */
jdaggett@1662 2546 src: local("Gentium"), url(gentium.ttf); /* Overrides src definition */
jdaggett@1662 2547 }
jdaggett@1662 2548 </pre>
jdaggett@1662 2549 </div>
jdaggett@1662 2550
jdaggett@1662 2551 <h3 id=font-prop-desc><span class=secno>4.4 </span>Font property
jdaggett@1662 2552 descriptors: the <a href="#descdef-font-style">font-style</a>, <a
jdaggett@1662 2553 href="#descdef-font-weight">font-weight</a>, <a
jdaggett@1662 2554 href="#descdef-font-stretch">font-stretch</a> descriptors</h3>
jdaggett@518 2555
jdaggett@518 2556 <table class=descdef>
jdaggett@518 2557 <tbody>
jdaggett@518 2558 <tr>
jdaggett@518 2559 <td>Name:
jdaggett@518 2560
jdaggett@8278 2561 <td><dfn id=descdef-font-style
jdaggett@8278 2562 title="font-style!!descriptor">font-style</dfn>
jdaggett@518 2563
jdaggett@518 2564 <tr>
jdaggett@518 2565 <td>Value:
jdaggett@518 2566
jdaggett@545 2567 <td>normal | italic | oblique
jdaggett@890 2568
jdaggett@890 2569 <tr>
jdaggett@890 2570 <td><em>Initial:</em>
jdaggett@890 2571
jdaggett@890 2572 <td>normal
jdaggett@518 2573 </table>
jdaggett@518 2574
jdaggett@518 2575 <table class=descdef>
jdaggett@518 2576 <tbody>
jdaggett@518 2577 <tr>
jdaggett@518 2578 <td>Name:
jdaggett@518 2579
jdaggett@8278 2580 <td><dfn id=descdef-font-weight
jdaggett@8278 2581 title="font-weight!!descriptor">font-weight</dfn>
jdaggett@518 2582
jdaggett@518 2583 <tr>
jdaggett@518 2584 <td>Value:
jdaggett@518 2585
jdaggett@545 2586 <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
jdaggett@890 2587
jdaggett@890 2588 <tr>
jdaggett@890 2589 <td><em>Initial:</em>
jdaggett@890 2590
jdaggett@890 2591 <td>normal
jdaggett@518 2592 </table>
jdaggett@518 2593
jdaggett@518 2594 <table class=descdef>
jdaggett@518 2595 <tbody>
jdaggett@518 2596 <tr>
jdaggett@518 2597 <td>Name:
jdaggett@518 2598
jdaggett@8278 2599 <td><dfn id=descdef-font-stretch
jdaggett@8278 2600 title="font-stretch!!descriptor">font-stretch</dfn>
jdaggett@518 2601
jdaggett@518 2602 <tr>
jdaggett@518 2603 <td>Value:
jdaggett@518 2604
jdaggett@545 2605 <td>normal | ultra-condensed | extra-condensed | condensed |
jdaggett@518 2606 semi-condensed | semi-expanded | expanded | extra-expanded |
jdaggett@525 2607 ultra-expanded
jdaggett@890 2608
jdaggett@890 2609 <tr>
jdaggett@890 2610 <td><em>Initial:</em>
jdaggett@890 2611
jdaggett@890 2612 <td>normal
jdaggett@518 2613 </table>
jdaggett@518 2614
jdaggett@573 2615 <p>These descriptors define the characteristics of a font face and are used
jdaggett@573 2616 in the process of matching styles to specific faces. For a font family
jdaggett@8311 2617 defined with several <a
jdaggett@8311 2618 href="#at-font-face-rule"><code>@font-face</code></a> rules, user agents
jdaggett@8311 2619 can either download all faces in the family or use these descriptors to
jdaggett@8311 2620 selectively download font faces that match actual styles used in document.
jdaggett@8311 2621 The values for these descriptors are the same as those for the
jdaggett@8311 2622 corresponding font properties except that relative keywords are not
jdaggett@8311 2623 allowed, ‘<a href="#bolder"><code class=property>bolder</code></a>’
jdaggett@8311 2624 and ‘<a href="#lighter"><code class=property>lighter</code></a>’. If
jdaggett@8311 2625 these descriptors are omitted, initial values are assumed.
jdaggett@890 2626
jdaggett@890 2627 <p>The value for these font face style attributes is used in place of the
jdaggett@890 2628 style implied by the underlying font data. This allows authors to combine
jdaggett@890 2629 faces in flexible combinations, even in situations where the original font
jdaggett@890 2630 data was arranged differently. User agents that implement synthetic
jdaggett@8272 2631 bolding and obliquing must only apply synthetic styling in cases where the
jdaggett@8272 2632 font descriptors imply this is needed, rather than based on the style
jdaggett@890 2633 attributes implied by the font data.
jdaggett@573 2634
jdaggett@1662 2635 <h3 id=unicode-range-desc><span class=secno>4.5 </span>Character range: the
jdaggett@1662 2636 <a href="#descdef-unicode-range">unicode-range</a> descriptor</h3>
jdaggett@518 2637
jdaggett@518 2638 <table class=descdef>
jdaggett@518 2639 <tbody>
jdaggett@518 2640 <tr>
jdaggett@518 2641 <td>Name:
jdaggett@518 2642
jdaggett@1662 2643 <td><dfn id=descdef-unicode-range>unicode-range</dfn>
jdaggett@518 2644
jdaggett@518 2645 <tr>
jdaggett@518 2646 <td>Value:
jdaggett@518 2647
jdaggett@8225 2648 <td><a href="#urange-value"><var>&lt;urange&gt;</var></a> #
jdaggett@890 2649
jdaggett@890 2650 <tr>
jdaggett@890 2651 <td><em>Initial:</em>
jdaggett@890 2652
jdaggett@1148 2653 <td>U+0-10FFFF
jdaggett@518 2654 </table>
jdaggett@518 2655
jdaggett@8213 2656 <p>This descriptor defines the set of Unicode codepoints that may be
jdaggett@8213 2657 supported by the font face for which it is declared. The descriptor value
jdaggett@8225 2658 is a comma-delimited list of Unicode range (<a
jdaggett@8225 2659 href="#urange-value"><var>&lt;urange&gt;</var></a>) values. The union of
jdaggett@8225 2660 these ranges defines the set of codepoints that serves as a hint for user
jdaggett@8225 2661 agents when deciding whether or not to download a font resource for a
jdaggett@8225 2662 given text run.
jdaggett@8225 2663
jdaggett@8225 2664 <p>Each <dfn id=urange-value><var>&lt;urange&gt;</var></dfn> value is a <a
jdaggett@8225 2665 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code
jdaggett@8225 2666 title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token made up of a
jdaggett@8225 2667 "U+" or "u+" prefix followed by a codepoint range in one of the three
jdaggett@8241 2668 forms listed below. Ranges that do not fit one of the these forms are
jdaggett@8241 2669 invalid and cause the declaration to be ignored.
jdaggett@8241 2670
jdaggett@8241 2671 <dl>
jdaggett@8241 2672 <dt>single codepoint (e.g. U+416)
jdaggett@8241 2673
jdaggett@8241 2674 <dd>a valid Unicode codepoint, represented as one to six hexadecimal
jdaggett@8241 2675 digits
jdaggett@8241 2676
jdaggett@8246 2677 <dt>interval range (e.g. U+400-4ff)
jdaggett@8241 2678
jdaggett@8241 2679 <dd>represented as two hyphen-separated valid Unicode codepoints
jdaggett@8241 2680 indicating the inclusive start and end codepoints of a range
jdaggett@8241 2681
jdaggett@8246 2682 <dt>wildcard range (e.g. U+4??)
jdaggett@8241 2683
jdaggett@8241 2684 <dd>defined by the set of codepoints implied when trailing ‘<code
jdaggett@8246 2685 class=css>?</code>’ characters signify any hexadeximal digit
jdaggett@8241 2686 </dl>
jdaggett@573 2687
jdaggett@8213 2688 <p>Individual codepoints are written using hexadecimal values that
jdaggett@8213 2689 correspond to <a href="http://www.unicode.org/charts/">Unicode character
jdaggett@8225 2690 codepoints</a>. Valid Unicode codepoint values vary between 0 and 10FFFF
jdaggett@8225 2691 inclusive. Digit values of codepoints are ASCII case-insensitive. For
jdaggett@8360 2692 interval ranges, the start and end codepoints are valid Unicode values and
jdaggett@8360 2693 the end codepoint is greater than or equal to the start codepoint.
jdaggett@8225 2694
jdaggett@8225 2695 <p>Wildcard ranges specified with ‘?’ that lack an initial digit (e.g.
jdaggett@8225 2696 "U+???") are valid and equivalent to a wildcard range with an initial zero
jdaggett@8225 2697 digit (e.g. "U+0???" = "U+0000-0FFF"). Wildcard ranges that extend beyond
jdaggett@8225 2698 the range of valid Unicode codepoints are invalid. Because of this, the
jdaggett@8225 2699 maximum number of trailing ‘<code class=css>?</code>’ wildcard
jdaggett@8272 2700 characters is five, even though the <a
jdaggett@8225 2701 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code
jdaggett@8225 2702 title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token accepts six.
jdaggett@8213 2703
jdaggett@8213 2704 <p>Within the comma-delimited list of Unicode ranges in a ‘<a
jdaggett@8213 2705 href="#descdef-unicode-range"><code
jdaggett@8213 2706 class=property>unicode-range</code></a>’ descriptor declaration, ranges
jdaggett@8241 2707 may overlap. The union of these ranges defines the set of codepoints for
jdaggett@8241 2708 which the corresponding font may be used. User agents must not download or
jdaggett@8241 2709 use the font for codepoints outside this set. User agents may normalize
jdaggett@8241 2710 the list of ranges into a list that is different but represents the same
jdaggett@8241 2711 set of codepoints.
jdaggett@8213 2712
jdaggett@8272 2713 <p>The associated font might not contain glyphs for the entire set of
jdaggett@8213 2714 codepoints defined by the ‘<a href="#descdef-unicode-range"><code
jdaggett@8213 2715 class=property>unicode-range</code></a>’ descriptor. When the font is
jdaggett@8391 2716 used, the <dfn id=effective-character-map>effective character map</dfn> is
jdaggett@8225 2717 the intersection of the codepoints defined by ‘<a
jdaggett@8225 2718 href="#descdef-unicode-range"><code
jdaggett@8225 2719 class=property>unicode-range</code></a>’ with the font's <a
jdaggett@8225 2720 href="#character-map"><em>character map</em></a>. This allows authors to
jdaggett@8225 2721 define supported ranges in terms of broad ranges without worrying about
jdaggett@8225 2722 the precise codepoint ranges supported by the underlying font.
jdaggett@8225 2723
jdaggett@8225 2724 <h3 id=composite-fonts><span class=secno>4.6 </span>Using character ranges
jdaggett@8225 2725 to define composite fonts</h3>
jdaggett@8225 2726
jdaggett@8311 2727 <p>Multiple <a href="#at-font-face-rule"><code>@font-face</code></a> rules
jdaggett@8311 2728 with different unicode ranges for the same family and style descriptor
jdaggett@8311 2729 values can be used to create composite fonts that mix the glyphs from
jdaggett@8311 2730 different fonts for different scripts. This can be used to combine fonts
jdaggett@8311 2731 that only contain glyphs for a single script (e.g. Latin, Greek, Cyrillic)
jdaggett@8311 2732 or it can be used by authors as a way of segmenting a font into fonts for
jdaggett@8311 2733 commonly used characters and less frequently used characters. Since the
jdaggett@8311 2734 user agent will only pull down the fonts it needs this helps reduce page
jdaggett@8311 2735 bandwidth.
jdaggett@8311 2736
jdaggett@8311 2737 <p>If the unicode ranges overlap for a set of <a
jdaggett@8311 2738 href="#at-font-face-rule"><code>@font-face</code></a> rules with the same
jdaggett@8311 2739 family and style descriptor values, the rules are ordered in the reverse
jdaggett@8311 2740 order they were defined; the last rule defined is the first to be checked
jdaggett@8311 2741 for a given character.
jdaggett@890 2742
jdaggett@890 2743 <p>Example ranges for specific languages or characters:
jdaggett@518 2744
jdaggett@518 2745 <dl>
jdaggett@529 2746 <dt>unicode-range: U+A5;
jdaggett@529 2747
jdaggett@1149 2748 <dd>a single code point, the yen/yuan symbol
jdaggett@529 2749
jdaggett@1148 2750 <dt>unicode-range: U+0-7F;
jdaggett@1148 2751
jdaggett@1148 2752 <dd>code range for basic ASCII characters
jdaggett@1148 2753
jdaggett@529 2754 <dt>unicode-range: U+590-5ff;
jdaggett@529 2755
jdaggett@529 2756 <dd>code range for Hebrew characters
jdaggett@529 2757
jdaggett@529 2758 <dt>unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;
jdaggett@529 2759
jdaggett@529 2760 <dd>code range for Japanese kanji, hiragana and katakana characters plus
jdaggett@529 2761 yen/yuan symbol
jdaggett@518 2762 </dl>
jdaggett@518 2763
jdaggett@529 2764 <div class=example>
jdaggett@531 2765 <p>The BBC provides news services in a wide variety of languages, many
jdaggett@8311 2766 that are not well supported across all platforms. Using an <a
jdaggett@8311 2767 href="#at-font-face-rule"><code>@font-face</code></a> rule, the BBC could
jdaggett@8311 2768 provide a font for any of these languages, as it already does via a
jdaggett@8311 2769 manual font download.</p>
jdaggett@531 2770
jdaggett@531 2771 <pre>
jdaggett@531 2772 @font-face {
jdaggett@531 2773 font-family: BBCBengali;
jdaggett@531 2774 src: url(fonts/BBCBengali.ttf) format("opentype");
jdaggett@531 2775 unicode-range: U+00-FF, U+980-9FF;
jdaggett@531 2776 }
jdaggett@531 2777 </pre>
jdaggett@529 2778 </div>
jdaggett@529 2779
jdaggett@529 2780 <div class=example>
jdaggett@531 2781 <p>Technical documents often require a wide range of symbols. The STIX
jdaggett@531 2782 Fonts project is one project aimed at providing fonts to support a wide
jdaggett@531 2783 range of technical typesetting in a standardized way. The example below
jdaggett@531 2784 shows the use of a font that provides glyphs for many of the mathematical
jdaggett@531 2785 and technical symbol ranges within Unicode:</p>
jdaggett@531 2786
jdaggett@531 2787 <pre>
jdaggett@531 2788 @font-face {
jdaggett@531 2789 font-family: STIXGeneral;
jdaggett@531 2790 src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
jdaggett@531 2791 unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
jdaggett@531 2792 }
jdaggett@531 2793 </pre>
jdaggett@529 2794 </div>
jdaggett@529 2795
jdaggett@529 2796 <div class=example>
jdaggett@529 2797 <p>This example shows how an author can override the glyphs used for Latin
jdaggett@529 2798 characters in a Japanese font with glyphs from a different font. The
jdaggett@529 2799 first rule specifies no range so it defaults to the entire range. The
jdaggett@529 2800 range specified in the second rule overlaps but takes precedence because
jdaggett@529 2801 it is defined later.</p>
jdaggett@529 2802
jdaggett@529 2803 <pre>
jdaggett@529 2804 @font-face {
jdaggett@529 2805 font-family: JapaneseWithGentium;
jdaggett@529 2806 src: local(MSMincho);
jdaggett@529 2807 /* no range specified, defaults to entire range */
jdaggett@529 2808 }
jdaggett@529 2809
jdaggett@529 2810 @font-face {
jdaggett@529 2811 font-family: JapaneseWithGentium;
jdaggett@529 2812 src: url(../fonts/Gentium.ttf);
jdaggett@529 2813 unicode-range: U+0-2FF;
jdaggett@529 2814 }
jdaggett@529 2815 </pre>
jdaggett@529 2816 </div>
jdaggett@1148 2817
jdaggett@1148 2818 <div class=example>
jdaggett@1148 2819 <p>Consider a family constructed to optimize bandwidth by separating out
jdaggett@1148 2820 Latin, Japanese and other characters into different font files:</p>
jdaggett@1148 2821
jdaggett@1148 2822 <pre>
jdaggett@1148 2823 /* fallback font - size: 4.5MB */
jdaggett@1148 2824 @font-face {
jdaggett@1148 2825 font-family: DroidSans;
jdaggett@1148 2826 src: url(DroidSansFallback.ttf);
jdaggett@1148 2827 /* no range specified, defaults to entire range */
jdaggett@1148 2828 }
jdaggett@1148 2829
jdaggett@1148 2830 /* Japanese glyphs - size: 1.2MB */
jdaggett@1148 2831 @font-face {
jdaggett@1148 2832 font-family: DroidSans;
jdaggett@1148 2833 src: url(DroidSansJapanese.ttf);
jdaggett@1148 2834 unicode-range: U+3000-9FFF, U+ff??;
jdaggett@1148 2835 }
jdaggett@1148 2836
jdaggett@8277 2837 /* Latin, Greek, Cyrillic along with some
jdaggett@1148 2838 punctuation and symbols - size: 190KB */
jdaggett@1148 2839 @font-face {
jdaggett@1148 2840 font-family: DroidSans;
jdaggett@1148 2841 src: url(DroidSans.ttf);
jdaggett@1148 2842 unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
jdaggett@1148 2843 }
jdaggett@1148 2844 </pre>
jdaggett@1148 2845
jdaggett@1148 2846 <p>For simple Latin text, only the font for Latin characters is
jdaggett@1148 2847 downloaded:</p>
jdaggett@1148 2848
jdaggett@1148 2849 <pre>
jdaggett@1148 2850 body { font-family: DroidSans; }
jdaggett@1148 2851
jdaggett@1148 2852 &lt;p>This is that&lt;/p>
jdaggett@1148 2853 </pre>
jdaggett@1148 2854
jdaggett@1148 2855 <p>In this case the user agent first checks the unicode-range for the font
jdaggett@1148 2856 containing Latin characters (DroidSans.ttf). Since all the characters
jdaggett@1148 2857 above are in the range U+0-5FF, the user agent downloads the font and
jdaggett@1148 2858 renders the text with that font.</p>
jdaggett@1148 2859
jdaggett@1148 2860 <p>Next, consider text that makes use of an arrow character (⇨):</p>
jdaggett@1148 2861
jdaggett@1148 2862 <pre>
jdaggett@1148 2863 &lt;p>This &amp;#x21e8; that&lt;p>
jdaggett@1148 2864 </pre>
jdaggett@1148 2865
jdaggett@1148 2866 <p>The user agent again first checks the unicode-range of the font
jdaggett@1149 2867 containing Latin characters. Since U+2000-2300 includes the arrow code
jdaggett@1149 2868 point (U+21E8), the user agent downloads the font. For this character
jdaggett@1148 2869 however the Latin font does not have a matching glyph, so the effective
jdaggett@1149 2870 unicode-range used for font matching excludes this code point. Next, the
jdaggett@1148 2871 user agent evaluates the Japanese font. The unicode-range for the
jdaggett@1148 2872 Japanese font, U+3000-9FFF and U+ff??, does not include U+21E8, so the
jdaggett@1662 2873 user agent does not download the Japanese font. Next the fallback font is
jdaggett@8311 2874 considered. The <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 2875 rule for the fallback font does not define unicode-range so its value
jdaggett@8311 2876 defaults to the range of all Unicode code points. The fallback font is
jdaggett@8311 2877 downloaded and used to render the arrow character.</p>
jdaggett@1148 2878 </div>
jdaggett@890 2879
jdaggett@8225 2880 <h3 id=font-rend-desc><span class=secno>4.7 </span>Font features: the <a
jdaggett@1662 2881 href="#descdef-font-variant">font-variant</a> and <a
jdaggett@1662 2882 href="#descdef-font-feature-settings">font-feature-settings</a>
jdaggett@1662 2883 descriptors</h3>
jdaggett@1662 2884
jdaggett@1662 2885 <table class=descdef>
jdaggett@1662 2886 <tbody>
jdaggett@1662 2887 <tr>
jdaggett@1662 2888 <td>Name:
jdaggett@1662 2889
jdaggett@8278 2890 <td><dfn id=descdef-font-variant
jdaggett@8278 2891 title="font-variant!!descriptor">font-variant</dfn>
jdaggett@1662 2892
jdaggett@1662 2893 <tr>
jdaggett@1662 2894 <td>Value:
jdaggett@1662 2895
jdaggett@8278 2896 <td><a href="#font-variant-normal-value"
jdaggett@8278 2897 title="normal!!font-variant">normal</a> | <a
jdaggett@8278 2898 href="#font-variant-none-value" title="none!!font-variant">none</a> | [
jdaggett@8278 2899 <a href="#common-lig-values"><var>&lt;common-lig-values&gt;</var></a>
jdaggett@8278 2900 || <a
jdaggett@8225 2901 href="#discretionary-lig-values"><var>&lt;discretionary-lig-values&gt;</var></a>
jdaggett@8225 2902 || <a
jdaggett@8225 2903 href="#historical-lig-values"><var>&lt;historical-lig-values&gt;</var></a>
jdaggett@8225 2904 || <a
jdaggett@8225 2905 href="#contextual-alt-values"><var>&lt;contextual-alt-values&gt;</var></a>
jdaggett@8225 2906 || <a href="#stylistic"><var
jdaggett@8225 2907 title=stylistic>stylistic(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 2908 href="#historical-forms"><var>historical-forms</var></a> || <a
jdaggett@8225 2909 href="#styleset"><var
jdaggett@8225 2910 title=styleset>styleset(&lt;feature-value-name&gt; #)</var></a> || <a
jdaggett@8225 2911 href="#character-variant"><var
jdaggett@8225 2912 title=character-variant>character-variant(&lt;feature-value-name&gt;
jdaggett@8225 2913 #)</var></a> || <a href="#swash"><var
jdaggett@8225 2914 title=swash>swash(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 2915 href="#ornaments"><var
jdaggett@8225 2916 title=ornaments>ornaments(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 2917 href="#annotation"><var
jdaggett@8225 2918 title=annotation>annotation(&lt;feature-value-name&gt;)</var></a> || [
jdaggett@8225 2919 <a href="#small-caps"><i>small-caps</i></a> | <a
jdaggett@8225 2920 href="#all-small-caps"><i>all-small-caps</i></a> | <a
jdaggett@8225 2921 href="#petite-caps"><i>petite-caps</i></a> | <a
jdaggett@8225 2922 href="#all-petite-caps"><i>all-petite-caps</i></a> | <a
jdaggett@8225 2923 href="#unicase"><i>unicase</i></a> | <a
jdaggett@8225 2924 href="#titling-caps"><i>titling-caps</i></a> ] || <a
jdaggett@8225 2925 href="#numeric-figure-values"><var>&lt;numeric-figure-values&gt;</var></a>
jdaggett@8225 2926 || <a
jdaggett@8225 2927 href="#numeric-spacing-values"><var>&lt;numeric-spacing-values&gt;</var></a>
jdaggett@8225 2928 || <a
jdaggett@8225 2929 href="#numeric-fraction-values"><var>&lt;numeric-fraction-values&gt;</var></a>
jdaggett@8225 2930 || <a href="#ordinal"><i>ordinal</i></a> || <a
jdaggett@8225 2931 href="#slashed-zero"><i>slashed-zero</i></a> || <a
jdaggett@8225 2932 href="#east-asian-variant-values"><var>&lt;east-asian-variant-values&gt;</var></a>
jdaggett@8225 2933 || <a
jdaggett@8225 2934 href="#east-asian-width-values"><var>&lt;east-asian-width-values&gt;</var></a>
jdaggett@8225 2935 || <a href="#ruby"><i>ruby</i></a> ]
jdaggett@1662 2936
jdaggett@1662 2937 <tr>
jdaggett@1662 2938 <td><em>Initial:</em>
jdaggett@1662 2939
jdaggett@1662 2940 <td>normal
jdaggett@1662 2941 </table>
jdaggett@1662 2942
jdaggett@1662 2943 <table class=descdef>
jdaggett@1662 2944 <tbody>
jdaggett@1662 2945 <tr>
jdaggett@1662 2946 <td>Name:
jdaggett@1662 2947
jdaggett@8278 2948 <td><dfn id=descdef-font-feature-settings
jdaggett@8278 2949 title="font-feature-settings!!descriptor">font-feature-settings</dfn>
jdaggett@1662 2950
jdaggett@1662 2951 <tr>
jdaggett@1662 2952 <td>Value:
jdaggett@1662 2953
jdaggett@8278 2954 <td><a href="#font-feature-settings-normal-value"
jdaggett@8278 2955 title="normal!!font-feature-settings">normal</a> | <a
jdaggett@8225 2956 href="#feature-tag-value"><var>&lt;feature-tag-value&gt;</var></a> #
jdaggett@1662 2957
jdaggett@1662 2958 <tr>
jdaggett@1662 2959 <td><em>Initial:</em>
jdaggett@1662 2960
jdaggett@1662 2961 <td>normal
jdaggett@1662 2962 </table>
jdaggett@1662 2963
jdaggett@8213 2964 <p>These descriptors define initial settings that apply when the font
jdaggett@8311 2965 defined by an <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 2966 rule is rendered. They do not affect font selection. Values are identical
jdaggett@8311 2967 to those defined for the corresponding <a href="#propdef-font-variant"
jdaggett@8278 2968 title="font-variant!!property">‘<code
jdaggett@8279 2969 class=property>font-variant</code>’</a> and <a
jdaggett@8279 2970 href="#propdef-font-feature-settings"
jdaggett@8279 2971 title="font-feature-settings!!property">‘<code
jdaggett@8279 2972 class=property>font-feature-settings</code>’</a> properties defined
jdaggett@8279 2973 below except that the value ‘<code class=property>inherit</code>’ is
jdaggett@8279 2974 omitted. When multiple font feature descriptors or properties are used,
jdaggett@8279 2975 the cumulative effect on text rendering is detailed in the section <a
jdaggett@8031 2976 href="#font-feature-resolution">Font Feature Resolution</a> below. In
jdaggett@8278 2977 cases where specific values define synthesized fallback for certain <a
jdaggett@8278 2978 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8278 2979 class=property>font-variant</code>’</a> subproperties, the same
jdaggett@8031 2980 synthesized fallback applies when used within those values are used with
jdaggett@8278 2981 the <a href="#descdef-font-style" title="font-style!!descriptor">‘<code
jdaggett@8031 2982 class=property>font-variant</code>’</a> descriptor.
jdaggett@1662 2983
jdaggett@8225 2984 <h3 id=font-face-loading><span class=secno>4.8 </span>Font loading
jdaggett@2563 2985 guidelines</h3>
jdaggett@2563 2986
jdaggett@8311 2987 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule is
jdaggett@8311 2988 designed to allow lazy loading of font resources that are only downloaded
jdaggett@8311 2989 when used within a document. A stylesheet can include <a
jdaggett@8311 2990 href="#at-font-face-rule"><code>@font-face</code></a> rules for a library
jdaggett@8311 2991 of fonts of which only a select set are used; user agents must only
jdaggett@8311 2992 download those fonts that are referred to within the style rules
jdaggett@8311 2993 applicable to a given page. User agents that download all fonts defined in
jdaggett@8311 2994 <a href="#at-font-face-rule"><code>@font-face</code></a> rules without
jdaggett@8311 2995 considering whether those fonts are in fact used within a page are
jdaggett@8311 2996 considered non-conformant. In cases where a font might be downloaded in
jdaggett@8360 2997 character fallback cases, user agents may download a font if it's
jdaggett@8360 2998 contained within the computed value of <a href="#propdef-font-family"
jdaggett@8360 2999 title="font-family!!property">‘<code
jdaggett@8360 3000 class=property>font-family</code>’</a> for a given text run.
jdaggett@2563 3001
jdaggett@2563 3002 <pre>
jdaggett@2563 3003 @font-face {
jdaggett@2563 3004 font-family: GeometricModern;
jdaggett@2563 3005 src: url(font.ttf);
jdaggett@2563 3006 }
jdaggett@2563 3007
jdaggett@2563 3008 p {
jdaggett@2563 3009 /* font will be downloaded for pages with p elements */
jdaggett@2563 3010 font-family: GeometricModern, sans-serif;
jdaggett@2563 3011 }
jdaggett@2563 3012
jdaggett@2563 3013 h2 {
jdaggett@2563 3014 /* font may be downloaded for pages with h2 elements, even if Futura is available locally */
jdaggett@2563 3015 font-family: Futura, GeometricModern, sans-serif;
jdaggett@2563 3016 }
jdaggett@2563 3017 </pre>
jdaggett@2563 3018
jdaggett@2563 3019 <p>In cases where textual content is loaded before downloadable fonts are
jdaggett@2563 3020 available, user agents may render text as it would be rendered if
jdaggett@2563 3021 downloadable font resources are not available or they may render text
jdaggett@2563 3022 transparently with fallback fonts to avoid a flash of text using a
jdaggett@2563 3023 fallback font. In cases where the font download fails user agents must
jdaggett@2563 3024 display text, simply leaving transparent text is considered non-conformant
jdaggett@2563 3025 behavior. Authors are advised to use fallback fonts in their font lists
jdaggett@8431 3026 that closely match the metrics of the downloadable fonts to avoid large
jdaggett@8431 3027 page reflows where possible.
jdaggett@2563 3028
jdaggett@8225 3029 <h3 id=same-origin-restriction><span class=secno>4.9 </span>Same-origin
jdaggett@2737 3030 restriction for fonts</h3>
jdaggett@2737 3031
jdaggett@8225 3032 <h4 id=default-same-origin-restriction><span class=secno>4.9.1
jdaggett@2740 3033 </span>Default same-origin restriction</h4>
jdaggett@7253 3034 <!-- TPAC 2011 Resolution to require same-origin restriction for loading fonts:
jdaggett@7253 3035 http://lists.w3.org/Archives/Public/www-style/2011Nov/0711.html
jdaggett@7253 3036 http://www.w3.org/2011/10/31-webapps-minutes.html#item02
jdaggett@7253 3037 -->
jdaggett@2740 3038
jdaggett@2737 3039 <p>User agents must implement a same-origin restriction when loading fonts
jdaggett@8311 3040 via the <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 3041 mechanism. This restriction limits the loading of fonts for a given
jdaggett@8311 3042 document to fonts loaded from the same origin. Fonts can only be loaded
jdaggett@8311 3043 via the same host, port, and method combination as the containing
jdaggett@8311 3044 document, using the <a
jdaggett@7179 3045 href="http://www.w3.org/TR/html5/browsers.html#origin">origin matching
jdaggett@2737 3046 algorithm</a> described in the <a href="#HTML5"
jdaggett@2737 3047 rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> specification. The origin of
jdaggett@8311 3048 the stylesheet containing <a
jdaggett@8311 3049 href="#at-font-face-rule"><code>@font-face</code></a> rules is not used
jdaggett@8311 3050 when deciding whether a font is same origin or not, only the origin of the
jdaggett@7096 3051 containing document is used. The restriction applies to all font types.
jdaggett@2737 3052
jdaggett@2737 3053 <p>Given a document located at http://example.com/page.html, fonts defined
jdaggett@4624 3054 with ‘<a href="#descdef-src"><code class=property>src</code></a>’
jdaggett@2737 3055 definitions considered cross origin must not be loaded:
jdaggett@2737 3056
jdaggett@2737 3057 <pre>
jdaggett@8640 3058 /* same origin (i.e. domain, scheme, port match document) */
jdaggett@8277 3059 src: url(fonts/simple.ttf);
jdaggett@8277 3060 src: url(//fonts/simple.ttf);
jdaggett@2737 3061
jdaggett@8640 3062 /* cross origin, different scheme */
jdaggett@8277 3063 src: url(https://example.com/fonts/simple.ttf);
jdaggett@2737 3064
jdaggett@2737 3065 /* cross origin, different domain */
jdaggett@8277 3066 src: url(http://another.example.com/fonts/simple.ttf);
jdaggett@2737 3067 </pre>
jdaggett@2737 3068
jdaggett@8225 3069 <h4 id=allowing-cross-origin-font-loading><span class=secno>4.9.2
jdaggett@2740 3070 </span>Allowing cross-origin font loading</h4>
jdaggett@2740 3071
jdaggett@2737 3072 <p>User agents must also implement the ability to relax this restriction
jdaggett@2737 3073 using cross-site origin controls <a href="#CORS"
jdaggett@7253 3074 rel=biblioentry>[CORS]<!--{{!CORS}}--></a> for fonts loaded via HTTP.
jdaggett@7253 3075 Sites can explicitly allow cross-site downloading of font data using the
jdaggett@8640 3076 <code>Access-Control-Allow-Origin</code> HTTP header. For other schemes,
jdaggett@7253 3077 no explicit relaxation mechanism is defined or required.
jdaggett@7253 3078
jdaggett@8640 3079 <p>For font loads, user agents must use the <a
jdaggett@8640 3080 href="http://www.w3.org/TR/html5/infrastructure.html#cors-enabled-fetch">potentially
jdaggett@8640 3081 CORS-enabled fetch</a> method defined by the <a href="#HTML5"
jdaggett@8640 3082 rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> specification for URL's
jdaggett@8640 3083 defined within @font-face rules. When fetching, user agents must use
jdaggett@8640 3084 "Anonymous" mode, set the referrer source to the stylesheet's URL and set
jdaggett@8640 3085 the origin to the URL of the containing document.
jdaggett@2737 3086
jdaggett@6699 3087 <h2 id=font-matching-algorithm><span class=secno>5 </span>Font Matching
jdaggett@6699 3088 Algorithm</h2>
jdaggett@484 3089
jdaggett@2457 3090 <p>The algorithm below describes how fonts are associated with individual
jdaggett@2457 3091 runs of text. For each character in the run a font family is chosen and a
jdaggett@2457 3092 particular font face is selected containing a glyph for that character.
jdaggett@2457 3093
jdaggett@7309 3094 <h3 id=font-family-casing><span class=secno>5.1 </span>Case sensitivity of
jdaggett@7309 3095 font family names</h3>
jdaggett@7309 3096
jdaggett@7309 3097 <p>As part of the font matching algorithm outlined below, user agents must
jdaggett@7309 3098 match font family names used in style rules with actual font family names
jdaggett@8391 3099 contained in fonts available in a given environment or with font family
jdaggett@8391 3100 names defined in <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8391 3101 rules. User agents must match these names case insensitively, using the
jdaggett@8391 3102 "Default Caseless Matching" algorithm outlined in the Unicode
jdaggett@8391 3103 specification <a href="#UNICODE6"
jdaggett@8391 3104 rel=biblioentry>[UNICODE6]<!--{{!UNICODE6}}--></a>. This algorithm is
jdaggett@8391 3105 detailed in section 3.13 entitled "Default Case Algorithms". Specifically,
jdaggett@8391 3106 the algorithm must be applied without normalizing the strings involved and
jdaggett@8391 3107 without applying any language-specific tailorings. The case folding method
jdaggett@8391 3108 specified by this algorithm uses the case mappings with status field
jdaggett@8391 3109 ‘<code class=property>C</code>’ or ‘<code class=property>F</code>’
jdaggett@8391 3110 in the CaseFolding.txt file of the Unicode Character Database.
jdaggett@7355 3111
jdaggett@7355 3112 <p class=note> For authors this means that font family names are matched
jdaggett@8272 3113 case insensitively, whether those names exist in a platform font or in the
jdaggett@8311 3114 <a href="#at-font-face-rule"><code>@font-face</code></a> rules contained
jdaggett@8311 3115 in a stylesheet. Authors should take care to ensure that names use a
jdaggett@8311 3116 character sequence consistent with the actual font family name,
jdaggett@8311 3117 particularly when using combining characters such as diacritical marks.
jdaggett@8311 3118 For example, a family name that contains an uppercase A (U+0041) followed
jdaggett@8311 3119 by a combining ring (U+030A) will <strong>not</strong> match a name that
jdaggett@8311 3120 looks identical but which uses the precomposed lowercase a-ring character
jdaggett@8311 3121 (U+00E5) instead of the combining sequence.
jdaggett@7309 3122
jdaggett@8391 3123 <p class=note> Implementors should take care to verify that a given
jdaggett@8391 3124 caseless string comparison implementation uses this precise algorithm and
jdaggett@8391 3125 not assume that a given platform string matching routine follows it, as
jdaggett@8391 3126 many of these have locale-specific behavior or use some level of string
jdaggett@8391 3127 normalization.
jdaggett@8391 3128
jdaggett@7309 3129 <h3 id=font-style-matching><span class=secno>5.2 </span>Matching font
jdaggett@2457 3130 styles</h3>
jdaggett@2457 3131
jdaggett@8391 3132 <p>The procedure for choosing a font for a given character in a run of text
jdaggett@8391 3133 consists of iterating over the font families named by the <a
jdaggett@8391 3134 href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8391 3135 class=property>font-family</code>’</a> property, selecting a font face
jdaggett@531 3136 with the appropriate style based on other font properties and then
jdaggett@8391 3137 determining whether a glyph exists for the given character. This is done
jdaggett@7311 3138 using the <dfn id=character-map>character map</dfn> of the font, data
jdaggett@8397 3139 which maps characters to the default glyph for that character. A font is
jdaggett@8397 3140 considered to <dfn id=support>support</dfn> a given character if (1) the
jdaggett@8397 3141 character is contained in the font's <a
jdaggett@8397 3142 href="#character-map"><em>character map</em></a> and (2) if required by
jdaggett@8397 3143 the containing script, shaping information is available for that
jdaggett@8397 3144 character.
jdaggett@8397 3145
jdaggett@8397 3146 <p>Some legacy fonts may include a given character in the <a
jdaggett@8397 3147 href="#character-map"><em>character map</em></a> but lack the shaping
jdaggett@8397 3148 information (e.g. <a
jdaggett@8397 3149 href="http://www.microsoft.com/typography/otspec/ttochap1.htm">OpenType
jdaggett@8397 3150 layout tables</a> or <a
jdaggett@8397 3151 href="http://scripts.sil.org/cms/scripts/page.php?site_id=projects&amp;item_id=graphite_techAbout">Graphite
jdaggett@8397 3152 tables</a>) necessary for correctly rendering text runs containing that
jdaggett@8397 3153 character.
jdaggett@8397 3154
jdaggett@8397 3155 <p>Codepoint sequences consisting of a base character followed by a
jdaggett@8397 3156 sequence of combining characters are treated slightly differently, see the
jdaggett@8397 3157 section on <a href="#cluster-matching">cluster matching</a> below.
jdaggett@531 3158
jdaggett@7232 3159 <p>For this procedure, the <dfn id=default-face>default face</dfn> for a
jdaggett@7232 3160 given font family is defined to be the face that would be selected if all
jdaggett@7232 3161 font style properties were set to their initial value.
jdaggett@7232 3162
jdaggett@531 3163 <ol id=fontmatchingalg>
jdaggett@2457 3164 <li>Using the computed font property values for a given element, the user
jdaggett@8391 3165 agent starts with the first family name specified by the <a
jdaggett@8391 3166 href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8278 3167 class=property>font-family</code>’</a> property.
jdaggett@2457 3168
jdaggett@8391 3169 <li>If the family name is a generic family keyword, the user agent looks
jdaggett@8391 3170 up the appropriate font family name to be used. User agents may choose
jdaggett@8391 3171 the generic font family to use based on the language of the containing
jdaggett@8391 3172 element or the Unicode range of the character.
jdaggett@2457 3173
jdaggett@2457 3174 <li>For other family names, the user agent attempts to find the family
jdaggett@8311 3175 name among fonts defined via <a
jdaggett@8311 3176 href="#at-font-face-rule"><code>@font-face</code></a> rules and then
jdaggett@8391 3177 among available system fonts, matching names with a <a
jdaggett@8391 3178 href="#font-family-casing">case-insensitive comparison</a> as outlined in
jdaggett@8391 3179 the section above. On systems containing fonts with multiple localized
jdaggett@8391 3180 font family names, user agents must match any of these names independent
jdaggett@8391 3181 of the underlying system locale or platform API used. If the font
jdaggett@8391 3182 resources defined for a given face in an <a
jdaggett@8311 3183 href="#at-font-face-rule"><code>@font-face</code></a> rule are either not
jdaggett@8311 3184 available or contain invalid font data, then the face should be treated
jdaggett@8311 3185 as not present in the family. If no faces are present for a family
jdaggett@8311 3186 defined via <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 3187 rules, the family should be treated as missing; matching a platform font
jdaggett@8311 3188 with the same name must not occur in this case.
jdaggett@2457 3189
jdaggett@2457 3190 <li>If a font family match occurs, the user agent assembles the set of
jdaggett@6701 3191 font faces in that family and then narrows the set to a single face using
jdaggett@8391 3192 other font properties in the order given below. A group of faces defined
jdaggett@8391 3193 via <a href="#at-font-face-rule"><code>@font-face</code></a> rules with
jdaggett@8391 3194 identical font descriptor values but differing ‘<a
jdaggett@8391 3195 href="#descdef-unicode-range"><code
jdaggett@8391 3196 class=property>unicode-range</code></a>’ values are considered to be a
jdaggett@8391 3197 single <dfn id=composite-face>composite face</dfn> for this step:
jdaggett@2457 3198 <ol id=fontstylematchingalg>
jdaggett@8278 3199 <li><a href="#propdef-font-stretch"
jdaggett@8278 3200 title="font-stretch!!property">‘<code
jdaggett@8278 3201 class=property>font-stretch</code>’</a> is tried first. If the
jdaggett@8278 3202 matching set contains faces with width values matching the <a
jdaggett@8278 3203 href="#propdef-font-stretch" title="font-stretch!!property">‘<code
jdaggett@8278 3204 class=property>font-stretch</code>’</a> value, faces with other width
jdaggett@4624 3205 values are removed from the matching set. If there is no face that
jdaggett@4624 3206 exactly matches the width value the nearest width is used instead. If
jdaggett@8278 3207 the value of <a href="#propdef-font-stretch"
jdaggett@8278 3208 title="font-stretch!!property">‘<code
jdaggett@8368 3209 class=property>font-stretch</code>’</a> is <a
jdaggett@8368 3210 href="#font-stretch-normal-value" title="normal!!font-stretch">‘<code
jdaggett@8368 3211 class=property>normal</code>’</a> or one of the condensed values,
jdaggett@8278 3212 narrower width values are checked first, then wider values. If the
jdaggett@8278 3213 value of <a href="#propdef-font-stretch"
jdaggett@8278 3214 title="font-stretch!!property">‘<code
jdaggett@8278 3215 class=property>font-stretch</code>’</a> is one of the expanded
jdaggett@4624 3216 values, wider values are checked first, followed by narrower values.
jdaggett@4624 3217 Once the closest matching width has been determined by this process,
jdaggett@4624 3218 faces with other widths are removed from the matching set.
jdaggett@4624 3219
jdaggett@8278 3220 <li><a href="#propdef-font-style" title="font-style!!property">‘<code
jdaggett@8278 3221 class=property>font-style</code>’</a> is tried next. If the value of
jdaggett@8278 3222 <a href="#propdef-font-style" title="font-style!!property">‘<code
jdaggett@8278 3223 class=property>font-style</code>’</a> is ‘<a href="#italic"><code
jdaggett@8278 3224 class=property>italic</code></a>’, italic faces are checked first,
jdaggett@8278 3225 then oblique, then normal faces. If the value is ‘<a
jdaggett@8278 3226 href="#oblique"><code class=property>oblique</code></a>’, oblique
jdaggett@8278 3227 faces are checked first, then italic faces and then normal faces. If
jdaggett@8368 3228 the value is <a href="#font-style-normal-value"
jdaggett@8368 3229 title="normal!!font-style">‘<code
jdaggett@8368 3230 class=property>normal</code>’</a>, normal faces are checked first,
jdaggett@8279 3231 then oblique faces, then italic faces. Faces with other style values
jdaggett@8279 3232 are excluded from the matching set. User agents are permitted to
jdaggett@8279 3233 distinguish between italic and oblique faces within platform font
jdaggett@8391 3234 families but this is not required, so all italic or oblique faces may
jdaggett@8391 3235 be treated as italic faces. However, within font families defined via
jdaggett@8391 3236 <a href="#at-font-face-rule"><code>@font-face</code></a> rules, italic
jdaggett@8391 3237 and oblique faces must be distinguished using the value of the <a
jdaggett@8311 3238 href="#descdef-font-style" title="font-style!!descriptor">‘<code
jdaggett@8391 3239 class=property>font-style</code>’</a> descriptor. For families that
jdaggett@8391 3240 lack any italic or oblique faces, users agents may create artificial
jdaggett@8391 3241 oblique faces, if this is permitted by the value of the ‘<a
jdaggett@8391 3242 href="#propdef-font-synthesis"><code
jdaggett@8391 3243 class=property>font-synthesis</code></a>’ property.
jdaggett@8278 3244
jdaggett@8278 3245 <li><a href="#propdef-font-weight"
jdaggett@8278 3246 title="font-weight!!property">‘<code
jdaggett@8391 3247 class=property>font-weight</code>’</a> is matched next, so it will
jdaggett@8278 3248 always reduce the matching set to a single font face. If bolder/lighter
jdaggett@8278 3249 relative weights are used, the effective weight is calculated based on
jdaggett@8278 3250 the inherited weight value, as described in the definition of the <a
jdaggett@8278 3251 href="#propdef-font-weight" title="font-weight!!property">‘<code
jdaggett@8278 3252 class=property>font-weight</code>’</a> property. Given the desired
jdaggett@4624 3253 weight and the weights of faces in the matching set after the steps
jdaggett@4624 3254 above, if the desired weight is available that face matches. Otherwise,
jdaggett@4624 3255 a weight is chosen using the rules below:
jdaggett@531 3256 <ul>
jdaggett@531 3257 <li>If the desired weight is less than 400, weights below the desired
jdaggett@531 3258 weight are checked in descending order followed by weights above the
jdaggett@531 3259 desired weight in ascending order until a match is found.
jdaggett@531 3260
jdaggett@531 3261 <li>If the desired weight is greater than 500, weights above the
jdaggett@531 3262 desired weight are checked in ascending order followed by weights
jdaggett@531 3263 below the desired weight in descending order until a match is found.
jdaggett@531 3264
jdaggett@531 3265 <li>If the desired weight is 400, 500 is checked first and then the
jdaggett@531 3266 rule for desired weights less than 400 is used.
jdaggett@531 3267
jdaggett@531 3268 <li>If the desired weight is 500, 400 is checked first and then the
jdaggett@532 3269 rule for desired weights less than 400 is used.
jdaggett@531 3270 </ul>
jdaggett@531 3271
jdaggett@4624 3272 <li><span class=property>‘<a href="#propdef-font-size"><code
jdaggett@4624 3273 class=property>font-size</code></a>’</span> must be matched within a
jdaggett@4624 3274 UA-dependent margin of tolerance. (Typically, sizes for scalable fonts
jdaggett@4624 3275 are rounded to the nearest whole pixel, while the tolerance for
jdaggett@4624 3276 bitmapped fonts could be as large as 20%.) Further computations, e.g.,
jdaggett@4624 3277 by ‘<code class=property>em</code>’ values in other properties, are
jdaggett@4624 3278 based on the <span class=property>‘<a href="#propdef-font-size"><code
jdaggett@4624 3279 class=property>font-size</code></a>’</span> value that is used, not
jdaggett@4624 3280 the one that is specified.
jdaggett@531 3281 </ol>
jdaggett@531 3282
jdaggett@7232 3283 <li>
jdaggett@8391 3284 <p>If the matched face is defined via <a
jdaggett@8391 3285 href="#at-font-face-rule"><code>@font-face</code></a> rules, user agents
jdaggett@8391 3286 must use the procedure below to select a single font:
jdaggett@8391 3287
jdaggett@8391 3288 <ol>
jdaggett@8391 3289 <li>If the font resource has not been loaded and the range of characters
jdaggett@8391 3290 defined by the ‘<a href="#descdef-unicode-range"><code
jdaggett@8391 3291 class=property>unicode-range</code></a>’ descriptor value includes
jdaggett@8391 3292 the character in question, load the font.
jdaggett@8391 3293
jdaggett@8391 3294 <li>After downloading, if the <a
jdaggett@8391 3295 href="#effective-character-map"><em>effective character map</em></a>
jdaggett@8391 3296 supports the character in question, select that font.
jdaggett@8391 3297 </ol>
jdaggett@8391 3298
jdaggett@8391 3299 <p>When the matched face is a <a href="#composite-face"><em>composite
jdaggett@8391 3300 face</em></a>, user agents must use the procedure above on each of the
jdaggett@8391 3301 faces in the <a href="#composite-face"><em>composite face</em></a> in
jdaggett@8391 3302 reverse order of <a
jdaggett@8391 3303 href="#at-font-face-rule"><code>@font-face</code></a> rule definition.</p>
jdaggett@8391 3304
jdaggett@8391 3305 <p>While the download occurs, user agents may either wait until the font
jdaggett@8391 3306 is downloaded or render once with substituted font metrics and render
jdaggett@8391 3307 again once the font is downloaded.</p>
jdaggett@8391 3308
jdaggett@8391 3309 <li>
jdaggett@7232 3310 <p>If no matching face exists or the matched face does not contain a
jdaggett@7232 3311 glyph for the character to be rendered, the next family name is selected
jdaggett@8391 3312 and the previous three steps repeated. Glyphs from other faces in the
jdaggett@7232 3313 family are not considered. The only exception is that user agents may
jdaggett@8391 3314 optionally substitute a synthetically obliqued version of the <a
jdaggett@7232 3315 href="#default-face"><em>default face</em></a> if that face supports a
jdaggett@8391 3316 given glyph and synthesis of these faces is permitted by the value of
jdaggett@8391 3317 the ‘<a href="#propdef-font-synthesis"><code
jdaggett@8391 3318 class=property>font-synthesis</code></a>’ property. For example, a
jdaggett@8391 3319 synthetic italic version of the regular face may be used if the italic
jdaggett@8391 3320 face doesn't support glyphs for Arabic.</p>
jdaggett@7242 3321 <!-- resolution on the above: http://lists.w3.org/Archives/Public/www-style/2012Nov/0292.html -->
jdaggett@7242 3322
jdaggett@531 3323
jdaggett@531 3324 <li>If there are no more font families to be evaluated and no matching
jdaggett@8363 3325 face has been found, then the user agent performs a <dfn
jdaggett@8363 3326 id=system-font-fallback>system font fallback</dfn> procedure to find the
jdaggett@8363 3327 best match for the character to be rendered. The result of this procedure
jdaggett@8363 3328 may vary across user agents.
jdaggett@531 3329
jdaggett@531 3330 <li>If a particular character cannot be displayed using any font, the user
jdaggett@531 3331 agent should indicate by some means that a character is not being
jdaggett@2457 3332 displayed, displaying either a symbolic representation of the missing
jdaggett@2457 3333 glyph (e.g. using a <a
jdaggett@2457 3334 href="http://en.wikipedia.org/wiki/Last_resort_font">Last Resort
jdaggett@2457 3335 Font</a>) or using the missing character glyph from a default font.
jdaggett@512 3336 </ol>
jdaggett@2457 3337
jdaggett@8430 3338 <p>Optimizations of this process are allowed provided that an
jdaggett@8430 3339 implementation behaves as if the algorithm had been followed exactly.
jdaggett@8430 3340 Matching occurs in a well-defined order to insure that the results are as
jdaggett@8430 3341 consistent as possible across user agents, given an identical set of
jdaggett@8430 3342 available fonts and rendering technology.
jdaggett@8430 3343
jdaggett@8431 3344 <p>The <dfn id=first-available-font>first available font</dfn>, used in the
jdaggett@8431 3345 definition of <a
jdaggett@8431 3346 href="http://www.w3.org/TR/css3-values/#font-relative-lengths"><em>font-relative
jdaggett@8431 3347 lengths</em></a> such as ‘<code class=property>ex</code>’ and ‘<code
jdaggett@8431 3348 class=property>ch</code>’, is defined to be the first available font
jdaggett@8431 3349 that would match any character given font families in the ‘<code
jdaggett@8431 3350 class=property>font-family</code>’ list (or a user agent's default font
jdaggett@8431 3351 if none are available).
jdaggett@8431 3352
jdaggett@7309 3353 <h3 id=cluster-matching><span class=secno>5.3 </span>Cluster matching</h3>
jdaggett@6701 3354
jdaggett@8397 3355 <p>When text contains characters such as combining marks, ideally the base
jdaggett@8397 3356 character should be rendered using the same font as the mark, this assures
jdaggett@8397 3357 proper placement of the mark. For this reason, the font matching algorithm
jdaggett@8397 3358 for clusters is more specialized than the general case of matching a
jdaggett@8397 3359 single character by itself. For sequences containing variation selectors,
jdaggett@8397 3360 which indicate the precise glyph to be used for a given character, user
jdaggett@8397 3361 agents always attempt <a href="#system-font-fallback"><em>system font
jdaggett@8397 3362 fallback</em></a> to find the appropriate glyph before using the default
jdaggett@8397 3363 glyph of the base character.
jdaggett@8397 3364
jdaggett@8397 3365 <p>A sequence of codepoints containing combining mark or other modifiers is
jdaggett@8397 3366 termed a grapheme cluster (see <a href="#CSS3TEXT"
jdaggett@6701 3367 rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a> for a more complete
jdaggett@6701 3368 description). For a given cluster containing a base character, <em>b</em>
jdaggett@6701 3369 and a sequence of combining characters <em>c1, c2…</em>, the entire
jdaggett@6701 3370 cluster is matched using these steps:
jdaggett@6701 3371
jdaggett@6701 3372 <ol>
jdaggett@6701 3373 <li>For each family in the font list, a face is chosen using the style
jdaggett@6701 3374 selection rules defined in the previous section.
jdaggett@6701 3375 <ol>
jdaggett@7020 3376 <li>If all characters in the sequence <em>b + c1 + c2 …</em> are
jdaggett@7021 3377 completely supported by the font, select this font for the sequence.
jdaggett@6701 3378
jdaggett@6701 3379 <li>If a sequence of multiple codepoints is canonically equivalent to a
jdaggett@8397 3380 single character and the font <a href="#support"><em
jdaggett@8397 3381 title=support>supports</em></a> that character, select this font for
jdaggett@8397 3382 the sequence.
jdaggett@6701 3383 </ol>
jdaggett@6701 3384
jdaggett@6701 3385 <li>If no font was found in the font list in step 1:
jdaggett@6701 3386 <ol>
jdaggett@6701 3387 <li>If <em>c1</em> is a variation selector, system fallback must be used
jdaggett@8397 3388 to find a font that <a href="#support"><em
jdaggett@8397 3389 title=support>supports</em></a> the full sequence of <em>b + c1</em>.
jdaggett@8397 3390 If no font on the system <a href="#support"><em
jdaggett@8397 3391 title=support>supports</em></a> the full sequence, match the single
jdaggett@6701 3392 character <em>b</em> using the normal procedure for matching single
jdaggett@6701 3393 characters and ignore the variation selector. Note: a sequence with
jdaggett@8397 3394 more than one variation selector must be treated as an encoding error
jdaggett@8397 3395 and the trailing selectors must be ignored. <a href="#UNICODE6"
jdaggett@8397 3396 rel=biblioentry>[UNICODE6]<!--{{!UNICODE6}}--></a>
jdaggett@6701 3397
jdaggett@6701 3398 <li>Otherwise, the user agent may optionally use system font fallback to
jdaggett@8397 3399 match a font that <a href="#support"><em
jdaggett@8397 3400 title=support>supports</em></a> the entire cluster.
jdaggett@6701 3401 </ol>
jdaggett@6701 3402
jdaggett@6701 3403 <li>If no font is found in step 2, use the matching sequence from step 1
jdaggett@8397 3404 to determine the longest sequence that is completely <a
jdaggett@8397 3405 href="#support"><em title=support>supported</em></a> by a font in the
jdaggett@8397 3406 font list and attempt to match the remaining combining characters
jdaggett@6701 3407 separately using the rules for single characters.
jdaggett@6701 3408 </ol>
jdaggett@6701 3409
jdaggett@7309 3410 <h3 id=char-handling-issues><span class=secno>5.4 </span>Character handling
jdaggett@2457 3411 issues</h3>
jdaggett@2457 3412
jdaggett@8430 3413 <p>CSS font matching is always performed on text runs containing Unicode
jdaggett@8430 3414 characters, so documents using legacy encodings are assumed to have been
jdaggett@7311 3415 transcoded before matching fonts. For fonts containing <a
jdaggett@7311 3416 href="#character-map"><em title="character map">character maps</em></a>
jdaggett@7311 3417 for both legacy encodings and Unicode, the contents of the legacy encoding
jdaggett@7311 3418 <a href="#character-map"><em>character map</em></a> must have no effect on
jdaggett@7311 3419 the results of the font matching process.
jdaggett@2461 3420
jdaggett@2461 3421 <p>The font matching process does not assume that text runs are in either
jdaggett@2461 3422 normalized or denormalized form (see <a href="#CHARMOD-NORM"
jdaggett@3042 3423 rel=biblioentry>[CHARMOD-NORM]<!--{{CHARMOD-NORM}}--></a> for more
jdaggett@8430 3424 details). Fonts may only support precomposed forms and not the decomposed
jdaggett@8430 3425 sequence of base character plus combining marks. Authors should always
jdaggett@6701 3426 tailor their choice of fonts to their content, including whether that
jdaggett@6701 3427 content contains normalized or denormalized character streams.
jdaggett@2457 3428
jdaggett@8430 3429 <p>If a given character is a Private-Use Area Unicode codepoint, user
jdaggett@8430 3430 agents must only match font families named in the ‘<code
jdaggett@8430 3431 class=property>font-family</code>’ list that are not generic families.
jdaggett@8430 3432 If none of the families named in the ‘<code
jdaggett@8430 3433 class=property>font-family</code>’ list contain a glyph for that
jdaggett@8430 3434 codepoint, user agents must display some form of missing glyph symbol for
jdaggett@8430 3435 that character rather than attempting <a
jdaggett@8430 3436 href="#system-font-fallback"><em>system font fallback</em></a> for that
jdaggett@8430 3437 codepoint. When matching the replacement character U+FFFD, user agents may
jdaggett@8430 3438 skip the font matching process and immediately display some form of
jdaggett@8430 3439 missing glyph symbol, they are not required to display the glyph from the
jdaggett@8430 3440 font that would be selected by the font matching process.
jdaggett@2457 3441
jdaggett@2457 3442 <p>In general, the fonts for a given family will all have the same or
jdaggett@7311 3443 similar <a href="#character-map"><em title="character map">character
jdaggett@7311 3444 maps</em></a>. The process outlined here is designed to handle even font
jdaggett@7311 3445 families containing faces with widely variant <a href="#character-map"><em
jdaggett@7311 3446 title="character map">character maps</em></a>. However, authors are
jdaggett@7311 3447 cautioned that the use of such families can lead to unexpected results.
jdaggett@2457 3448
jdaggett@7309 3449 <h3 id=font-matching-changes><span class=secno>5.5 </span>Font matching
jdaggett@2509 3450 changes since CSS 2.1</h3>
jdaggett@2509 3451
jdaggett@2509 3452 <p>The algorithm above is different from CSS 2.1 in a number of key places.
jdaggett@2509 3453 These changes were made to better reflect actual font matching behavior
jdaggett@2509 3454 across user agent implementations.
jdaggett@2509 3455
jdaggett@2509 3456 <p>Differences compared to the font matching algorithm in CSS 2.1:
jdaggett@2509 3457
jdaggett@2509 3458 <ul>
jdaggett@2509 3459 <li>The algorithm includes font-stretch matching.
jdaggett@2509 3460
jdaggett@2509 3461 <li>All possible font-style matching scenarios are delineated.
jdaggett@2509 3462
jdaggett@2509 3463 <li>Small-caps fonts are not matched as part of the font matching process,
jdaggett@2509 3464 they are now handled via font features.
jdaggett@2509 3465
jdaggett@2509 3466 <li>Unicode variation selector matching is required.
jdaggett@6701 3467
jdaggett@6701 3468 <li>Cluster sequences are matched as a unit.
jdaggett@2509 3469 </ul>
jdaggett@531 3470
jdaggett@7309 3471 <h3 id=font-matching-examples><span class=secno>5.6 </span>Font matching
jdaggett@6701 3472 examples</h3>
jdaggett@6701 3473
jdaggett@531 3474 <div class=example>
jdaggett@531 3475 <p>It's useful to note that the CSS selector syntax may be used to create
jdaggett@531 3476 language-sensitive typography. For example, some Chinese and Japanese
jdaggett@1149 3477 characters are unified to have the same Unicode code point, although the
jdaggett@890 3478 abstract glyphs are not the same in the two languages.
jdaggett@531 3479
jdaggett@531 3480 <pre>*:lang(ja-jp) { font: 900 14pt/16pt &quot;Heisei Mincho W9&quot;, serif; }
jdaggett@531 3481 *:lang(zh-tw) { font: 800 14pt/16.5pt &quot;Li Sung&quot;, serif; }
jdaggett@512 3482 </pre>
jdaggett@531 3483
jdaggett@8430 3484 <p>This selects any element that has the given language — Japanese or
jdaggett@8430 3485 Traditional Chinese — and uses the appropriate font.
jdaggett@512 3486 </div>
jdaggett@1662 3487
jdaggett@6699 3488 <h2 id=font-rend-props><span class=secno>6 </span>Font Feature Properties</h2>
jdaggett@1662 3489
jdaggett@1856 3490 <p>Modern font technologies support a variety of advanced typographic and
jdaggett@1856 3491 language-specific font features. Using these features, a single font can
jdaggett@1856 3492 provide glyphs for a wide range of ligatures, contextual and stylistic
jdaggett@1856 3493 alternates, tabular and old-style figures, small capitals, automatic
jdaggett@1856 3494 fractions, swashes, and alternates specific to a given language. To allow
jdaggett@8313 3495 authors control over these font capabilities, the ‘<code
jdaggett@8313 3496 class=property>font-variant</code>’ property has been expanded for CSS3.
jdaggett@8313 3497 It now functions as a shorthand for a set of properties that provide
jdaggett@8313 3498 control over stylistic font features.
jdaggett@1856 3499
jdaggett@1856 3500 <h3 id=glyph-selection-positioning><span class=secno>6.1 </span>Glyph
jdaggett@1856 3501 selection and positioning</h3>
jdaggett@1856 3502
jdaggett@1856 3503 <p>Simple fonts used for displaying Latin text use a very basic processing
jdaggett@8313 3504 model. Fonts contain a <a href="#character-map"><em>character map</em></a>
jdaggett@8313 3505 which maps each character to a glyph for that character. Glyphs for
jdaggett@8313 3506 subsequent characters are simply placed one after the other along a run of
jdaggett@8313 3507 text. Modern font formats such as OpenType and AAT (Apple Advanced
jdaggett@8313 3508 Typography) use a richer processing model. The glyph for a given character
jdaggett@8313 3509 can be chosen and positioned not just based on the codepoint of the
jdaggett@8313 3510 character itself, but also on adjacent characters as well as the language,
jdaggett@8313 3511 script, and features enabled for the text. Font features may be required
jdaggett@8313 3512 for specific scripts, or recommended as enabled by default or they might
jdaggett@8313 3513 be stylistic features meant to be used under author control.
jdaggett@1856 3514
jdaggett@1856 3515 <p>For a good visual overview of these features, see the <a
jdaggett@1856 3516 href="#OPENTYPE-FONT-GUIDE"
jdaggett@1856 3517 rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
jdaggett@1856 3518 For a detailed description of glyph processing for OpenType fonts, see <a
jdaggett@1856 3519 href="#WINDOWS-GLYPH-PROC"
jdaggett@1856 3520 rel=biblioentry>[WINDOWS-GLYPH-PROC]<!--{{WINDOWS-GLYPH-PROC}}--></a>.
jdaggett@1856 3521
jdaggett@8313 3522 <p>Stylistic font features can be classified into two broad categories:
jdaggett@6177 3523 ones that affect the harmonization of glyph shapes with the surrounding
jdaggett@8313 3524 context, such as kerning and ligature features, and ones such as the
jdaggett@6177 3525 small-caps, subscript/superscript and alternate features that affect shape
jdaggett@6177 3526 selection.
jdaggett@6176 3527
jdaggett@8313 3528 <p>The subproperties of <a href="#propdef-font-variant"
jdaggett@8313 3529 title="font-variant!!property">‘<code
jdaggett@8313 3530 class=property>font-variant</code>’</a> listed below are used to control
jdaggett@8313 3531 these stylistic font features. They do not control features that are
jdaggett@8313 3532 required for displaying certain scripts, such as the OpenType features
jdaggett@8313 3533 used when displaying Arabic or Indic language text. They affect glyph
jdaggett@8313 3534 selection and positioning, but do not affect font selection as described
jdaggett@8313 3535 in the font matching section (except in cases required for compatibility
jdaggett@8313 3536 with CSS 2.1).
jdaggett@1856 3537
jdaggett@1856 3538 <p>To assure consistent behavior across user agents, the equivalent
jdaggett@8313 3539 OpenType property settings are listed for individual properties and are
jdaggett@8313 3540 normative. When using other font formats these should be used as a
jdaggett@8313 3541 guideline to map CSS font feature property values to specific font
jdaggett@8313 3542 features.
jdaggett@1856 3543
jdaggett@1856 3544 <h3 id=language-specific-support><span class=secno>6.2
jdaggett@1856 3545 </span>Language-specific display</h3>
jdaggett@1856 3546
jdaggett@1856 3547 <p>OpenType also supports language-specific glyph selection and
jdaggett@1856 3548 positioning, so that text can be displayed correctly in cases where the
jdaggett@8313 3549 language dictates a specific display behavior. Many languages share a
jdaggett@8313 3550 common script, but the shape of certain letters can vary across those
jdaggett@8313 3551 languages. For example, certain Cyrillic letters have different shapes in
jdaggett@8313 3552 Russian text than in Bulgarian. In Latin text, it's common to render "fi"
jdaggett@8313 3553 with an explicit fi-ligature that lacks a dot on the "i". However, in
jdaggett@8313 3554 languages such as Turkish which uses both a dotted-i and a dotless-i, it's
jdaggett@8313 3555 important to not use this ligature or use a specialized version that
jdaggett@8313 3556 contains a dot over the "i". The example below shows language-specific
jdaggett@8313 3557 variations based on stylistic traditions found in Spanish, Italian and
jdaggett@8313 3558 French orthography:
jdaggett@2515 3559
jdaggett@2515 3560 <div class=featex><img alt="language specific forms, spanish"
jdaggett@2515 3561 src=locl-1.png></div>
jdaggett@2515 3562
jdaggett@2515 3563 <div class=featex><img alt="language specific forms, italian"
jdaggett@2515 3564 src=locl-2.png></div>
jdaggett@2515 3565
jdaggett@2515 3566 <div class=featex><img alt="language specific forms, french"
jdaggett@2515 3567 src=locl-3.png></div>
jdaggett@1856 3568
jdaggett@8313 3569 <p>If the content language of the element is known according to the rules
jdaggett@7355 3570 of the <a
jdaggett@7355 3571 href="http://www.w3.org/TR/CSS21/conform.html#doclanguage">document
jdaggett@7355 3572 language</a>, user agents are required to infer the OpenType language
jdaggett@7355 3573 system from the content language and use that when selecting and
jdaggett@7355 3574 positioning glyphs using an OpenType font.
jdaggett@7355 3575
jdaggett@7355 3576 <p>For OpenType fonts, in some cases it may be necessary to explicitly
jdaggett@7355 3577 declare the OpenType language to be used, for example when displaying text
jdaggett@7355 3578 in a given language that uses the typographic conventions of another
jdaggett@7355 3579 language or when the font does not explicitly support a given language but
jdaggett@7355 3580 supports a language that shares common typographic conventions. The ‘<a
jdaggett@4624 3581 href="#propdef-font-language-override"><code
jdaggett@4624 3582 class=property>font-language-override</code></a>’ property is used for
jdaggett@8225 3583 this purpose.</p>
jdaggett@1662 3584 <!-- prop: font-kerning -->
jdaggett@1662 3585
jdaggett@1856 3586 <h3 id=font-kerning-prop><span class=secno>6.3 </span>Kerning: the <a
jdaggett@1662 3587 href="#propdef-font-kerning">font-kerning</a> property</h3>
jdaggett@1662 3588
jdaggett@4624 3589 <table class=propdef id=namefont-kerningvalueauto-normal-noneini>
jdaggett@1662 3590 <tbody>
jdaggett@1662 3591 <tr>
jdaggett@1662 3592 <td>Name:
jdaggett@1662 3593
jdaggett@1662 3594 <td><dfn id=propdef-font-kerning>font-kerning</dfn>
jdaggett@1662 3595
jdaggett@1662 3596 <tr>
jdaggett@1662 3597 <td>Value:
jdaggett@1662 3598
jdaggett@8278 3599 <td><a href="#font-kerning-auto-value"
jdaggett@8278 3600 title="auto!!font-kerning">auto</a> | <a
jdaggett@8278 3601 href="#font-kerning-normal-value"
jdaggett@8278 3602 title="normal!!font-kerning">normal</a> | <a
jdaggett@8278 3603 href="#font-kerning-none-value" title="none!!font-kerning">none</a>
jdaggett@1662 3604
jdaggett@1662 3605 <tr>
jdaggett@1662 3606 <td>Initial:
jdaggett@1662 3607
jdaggett@1856 3608 <td>auto
jdaggett@1662 3609
jdaggett@1662 3610 <tr>
jdaggett@1662 3611 <td>Applies to:
jdaggett@1662 3612
jdaggett@1662 3613 <td>all elements
jdaggett@1662 3614
jdaggett@1662 3615 <tr>
jdaggett@1662 3616 <td>Inherited:
jdaggett@1662 3617
jdaggett@1662 3618 <td>yes
jdaggett@1662 3619
jdaggett@1662 3620 <tr>
jdaggett@1662 3621 <td>Percentages:
jdaggett@1662 3622
jdaggett@1662 3623 <td>N/A
jdaggett@1662 3624
jdaggett@1662 3625 <tr>
jdaggett@1662 3626 <td>Media:
jdaggett@1662 3627
jdaggett@1662 3628 <td>visual
jdaggett@1662 3629
jdaggett@1662 3630 <tr>
jdaggett@1662 3631 <td>Computed value:
jdaggett@1662 3632
jdaggett@1662 3633 <td>as specified
jdaggett@7377 3634
jdaggett@7377 3635 <tr>
jdaggett@7377 3636 <td>Animatable:
jdaggett@7377 3637
jdaggett@7377 3638 <td>no
jdaggett@1662 3639 </table>
jdaggett@1662 3640
jdaggett@2509 3641 <p>Kerning is the contextual adjustment of inter-glyph spacing. This
jdaggett@2509 3642 property controls metric kerning, kerning that utilizes adjustment data
jdaggett@8276 3643 contained in the font.
jdaggett@8276 3644
jdaggett@8276 3645 <dl>
jdaggett@8278 3646 <dt><dfn id=font-kerning-auto-value title="auto!!font-kerning">auto</dfn>
jdaggett@8276 3647
jdaggett@8276 3648 <dd>Specifies that kerning is applied at the discretion of the user agent
jdaggett@8276 3649
jdaggett@8278 3650 <dt><dfn id=font-kerning-normal-value
jdaggett@8278 3651 title="normal!!font-kerning">normal</dfn>
jdaggett@8276 3652
jdaggett@8276 3653 <dd>Specifies that kerning is applied
jdaggett@8276 3654
jdaggett@8278 3655 <dt><dfn id=font-kerning-none-value title="none!!font-kerning">none</dfn>
jdaggett@8276 3656
jdaggett@8276 3657 <dd>Specifies that kerning is not applied
jdaggett@8276 3658 </dl>
jdaggett@1662 3659
jdaggett@1662 3660 <p>For fonts that do not include kerning data this property will have no
jdaggett@1662 3661 visible effect. When rendering with OpenType fonts, the <a
jdaggett@1662 3662 href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>
jdaggett@2515 3663 specification suggests that kerning be enabled by default. When kerning is
jdaggett@6436 3664 enabled, the OpenType <span class=tag>kern</span> feature is enabled (for
jdaggett@8276 3665 vertical text runs the <span class=tag>vkrn</span> feature is enabled
jdaggett@8276 3666 instead). User agents must also support fonts that only support kerning
jdaggett@8276 3667 via data contained in a <span class=tag>kern</span> font table, as
jdaggett@8276 3668 detailed in the OpenType specification. If the ‘<code
jdaggett@8276 3669 class=property>letter-spacing</code>’ property is defined, kerning
jdaggett@8276 3670 adjustments are considered part of the default spacing and letter spacing
jdaggett@8276 3671 adjustments are made after kerning has been applied.
jdaggett@8276 3672
jdaggett@8276 3673 <p>When set to ‘<code class=property>auto</code>’, user agents can
jdaggett@8276 3674 determine whether to apply kerning or not based on a number of factors:
jdaggett@8276 3675 text size, script, or other factors that influence text processing speed.
jdaggett@8368 3676 Authors who want proper kerning should use <a
jdaggett@8368 3677 href="#font-kerning-normal-value" title="normal!!font-kerning">‘<code
jdaggett@8368 3678 class=property>normal</code>’</a> to explicitly enable kerning.
jdaggett@8279 3679 Likewise, some authors may prefer to disable kerning in situations where
jdaggett@8279 3680 performance is more important than precise appearance. However, in
jdaggett@8279 3681 well-designed modern implementations the use of kerning generally does not
jdaggett@8279 3682 have a large impact on text rendering speed.</p>
jdaggett@6176 3683 <!-- prop: font-variant-ligatures -->
jdaggett@6176 3684
jdaggett@6176 3685 <h3 id=font-variant-ligatures-prop><span class=secno>6.4 </span>Ligatures:
jdaggett@6176 3686 the <a href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
jdaggett@6176 3687 property</h3>
jdaggett@6176 3688
jdaggett@6436 3689 <table class=propdef id=namefont-variant-ligaturesvaluenormal-no>
jdaggett@6176 3690 <tbody>
jdaggett@6176 3691 <tr>
jdaggett@6176 3692 <td>Name:
jdaggett@6176 3693
jdaggett@6176 3694 <td><dfn id=propdef-font-variant-ligatures>font-variant-ligatures</dfn>
jdaggett@6176 3695
jdaggett@6176 3696 <tr>
jdaggett@6176 3697 <td>Value:
jdaggett@6176 3698
jdaggett@8278 3699 <td><a href="#font-variant-ligatures-normal-value"
jdaggett@8278 3700 title="normal!!font-variant-ligatures">normal</a> | <a
jdaggett@8278 3701 href="#font-variant-ligatures-none-value"
jdaggett@8278 3702 title="none!!font-variant-ligatures">none</a> | [ <a
jdaggett@8225 3703 href="#common-lig-values"><var>&lt;common-lig-values&gt;</var></a> ||
jdaggett@8225 3704 <a
jdaggett@8225 3705 href="#discretionary-lig-values"><var>&lt;discretionary-lig-values&gt;</var></a>
jdaggett@8225 3706 || <a
jdaggett@8225 3707 href="#historical-lig-values"><var>&lt;historical-lig-values&gt;</var></a>
jdaggett@8225 3708 || <a
jdaggett@8225 3709 href="#contextual-alt-values"><var>&lt;contextual-alt-values&gt;</var></a>
jdaggett@8225 3710 ]
jdaggett@6176 3711
jdaggett@6176 3712 <tr>
jdaggett@6176 3713 <td>Initial:
jdaggett@6176 3714
jdaggett@6176 3715 <td>normal
jdaggett@6176 3716
jdaggett@6176 3717 <tr>
jdaggett@6176 3718 <td>Applies to:
jdaggett@6176 3719
jdaggett@6176 3720 <td>all elements
jdaggett@6176 3721
jdaggett@6176 3722 <tr>
jdaggett@6176 3723 <td>Inherited:
jdaggett@6176 3724
jdaggett@6176 3725 <td>yes
jdaggett@6176 3726
jdaggett@6176 3727 <tr>
jdaggett@6176 3728 <td>Percentages:
jdaggett@6176 3729
jdaggett@6176 3730 <td>N/A
jdaggett@6176 3731
jdaggett@6176 3732 <tr>
jdaggett@6176 3733 <td>Media:
jdaggett@6176 3734
jdaggett@6176 3735 <td>visual
jdaggett@6176 3736
jdaggett@6176 3737 <tr>
jdaggett@6176 3738 <td>Computed value:
jdaggett@6176 3739
jdaggett@6176 3740 <td>as specified
jdaggett@7377 3741
jdaggett@7377 3742 <tr>
jdaggett@7377 3743 <td>Animatable:
jdaggett@7377 3744
jdaggett@7377 3745 <td>no
jdaggett@6176 3746 </table>
jdaggett@6176 3747
jdaggett@6436 3748 <p>Ligatures and contextual forms are ways of combining glyphs to produce
jdaggett@8276 3749 more harmonized forms.
jdaggett@6176 3750
jdaggett@6176 3751 <pre
jdaggett@8225 3752 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 3753
jdaggett@6176 3754 <pre
jdaggett@8225 3755 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 3756
jdaggett@6176 3757 <pre
jdaggett@8225 3758 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 3759
jdaggett@6176 3760 <pre
jdaggett@8225 3761 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 3762
jdaggett@6176 3763 <p>Individual values have the following meanings:
jdaggett@6176 3764
jdaggett@6176 3765 <dl>
jdaggett@8278 3766 <dt><dfn id=font-variant-ligatures-normal-value
jdaggett@8278 3767 title="normal!!font-variant-ligatures">normal</dfn>
jdaggett@8278 3768
jdaggett@8368 3769 <dd>A value of <a href="#font-variant-ligatures-normal-value"
jdaggett@8368 3770 title="normal!!font-variant-ligatures">‘<code
jdaggett@8368 3771 class=property>normal</code>’</a> specifies that common default
jdaggett@8279 3772 features are enabled, <a href="#font-feature-resolution">as described in
jdaggett@8279 3773 detail in the next section</a>. For OpenType fonts, common ligatures and
jdaggett@8279 3774 contextual forms are on by default, discretionary and historical
jdaggett@8279 3775 ligatures are not.
jdaggett@8278 3776
jdaggett@8278 3777 <dt><dfn id=font-variant-ligatures-none-value
jdaggett@8278 3778 title="none!!font-variant-ligatures">none</dfn>
jdaggett@8276 3779
jdaggett@8276 3780 <dd>Specifies that all types of ligatures and contextual forms covered by
jdaggett@8276 3781 this property are explicitly disabled. In situations where ligatures are
jdaggett@8276 3782 not considered necessary, this may improve the speed of text rendering.
jdaggett@8276 3783
jdaggett@6176 3784 <dt><dfn id=common-ligatures>common-ligatures</dfn>
jdaggett@6176 3785
jdaggett@6436 3786 <dd>Enables display of common ligatures (OpenType features: <span
jdaggett@6436 3787 class=tag>liga, clig</span>). For OpenType fonts, common ligatures are
jdaggett@6436 3788 enabled by default.
jdaggett@6176 3789 </dl>
jdaggett@6176 3790
jdaggett@6176 3791 <div class=featex><img alt="common ligature example" src=liga.png></div>
jdaggett@6176 3792
jdaggett@6176 3793 <dl>
jdaggett@6176 3794 <dt><dfn id=no-common-ligatures>no-common-ligatures</dfn>
jdaggett@6176 3795
jdaggett@6436 3796 <dd>Disables display of common ligatures (OpenType features: <span
jdaggett@6436 3797 class=tag>liga, clig</span>).
jdaggett@6176 3798
jdaggett@6176 3799 <dt><dfn id=discretionary-ligatures>discretionary-ligatures</dfn>
jdaggett@6176 3800
jdaggett@6436 3801 <dd>Enables display of discretionary ligatures (OpenType feature: <span
jdaggett@8277 3802 class=tag>dlig</span>). Which ligatures are discretionary or optional is
jdaggett@8277 3803 decided by the type designer, so authors will need to refer to the
jdaggett@6176 3804 documentation of a given font to understand which ligatures are
jdaggett@6176 3805 considered discretionary.
jdaggett@6176 3806 </dl>
jdaggett@6176 3807
jdaggett@6176 3808 <div class=featex><img alt="discretionary ligature example" src=dlig.png></div>
jdaggett@6176 3809
jdaggett@6176 3810 <dl>
jdaggett@6176 3811 <dt><dfn id=no-discretionary-ligatures>no-discretionary-ligatures</dfn>
jdaggett@6176 3812
jdaggett@6436 3813 <dd>Disables display of discretionary ligatures (OpenType feature: <span
jdaggett@6436 3814 class=tag>dlig</span>).
jdaggett@6176 3815
jdaggett@6176 3816 <dt><dfn id=historical-ligatures>historical-ligatures</dfn>
jdaggett@6176 3817
jdaggett@6436 3818 <dd>Enables display of historical ligatures (OpenType feature: <span
jdaggett@6436 3819 class=tag>hlig</span>).
jdaggett@6176 3820 </dl>
jdaggett@6176 3821
jdaggett@6176 3822 <div class=featex><img alt="historical ligature example" src=hlig.png></div>
jdaggett@6176 3823
jdaggett@6176 3824 <dl>
jdaggett@6176 3825 <dt><dfn id=no-historical-ligatures>no-historical-ligatures</dfn>
jdaggett@6176 3826
jdaggett@6436 3827 <dd>Disables display of historical ligatures (OpenType feature: <span
jdaggett@6436 3828 class=tag>hlig</span>).
jdaggett@6176 3829
jdaggett@6176 3830 <dt><dfn id=contextual>contextual</dfn>
jdaggett@6176 3831
jdaggett@6436 3832 <dd>Enables display of contextual alternates (OpenType feature: <span
jdaggett@6436 3833 class=tag>calt</span>). Although not strictly a ligature feature, like
jdaggett@6176 3834 ligatures this feature is commonly used to harmonize the shapes of glyphs
jdaggett@6436 3835 with the surrounding context. For OpenType fonts, this feature is on by
jdaggett@6436 3836 default.
jdaggett@6176 3837 </dl>
jdaggett@6176 3838
jdaggett@6176 3839 <div class=featex><img alt="contextual alternate example" src=calt.png></div>
jdaggett@6176 3840
jdaggett@6176 3841 <dl>
jdaggett@6176 3842 <dt><dfn id=no-contextual>no-contextual</dfn>
jdaggett@6176 3843
jdaggett@6436 3844 <dd>Disables display of contextual alternates (OpenType feature: <span
jdaggett@6436 3845 class=tag>calt</span>).
jdaggett@6176 3846 </dl>
jdaggett@6176 3847
jdaggett@6176 3848 <p>Required ligatures, needed for correctly rendering complex scripts, are
jdaggett@8278 3849 not affected by the settings above, including ‘<code
jdaggett@8278 3850 class=property>none</code>’ (OpenType feature: <span
jdaggett@6436 3851 class=tag>rlig</span>).</p>
jdaggett@3460 3852 <!-- prop: font-variant-position -->
jdaggett@3460 3853
jdaggett@6176 3854 <h3 id=font-variant-position-prop><span class=secno>6.5 </span>Subscript
jdaggett@3638 3855 and superscript forms: the <a
jdaggett@3460 3856 href="#propdef-font-variant-position">font-variant-position</a> property</h3>
jdaggett@3460 3857
jdaggett@4624 3858 <table class=propdef id=namefont-variant-positionvaluenormal-sub>
jdaggett@1662 3859 <tbody>
jdaggett@1662 3860 <tr>
jdaggett@1662 3861 <td>Name:
jdaggett@1662 3862
jdaggett@3460 3863 <td><dfn id=propdef-font-variant-position>font-variant-position</dfn>
jdaggett@1662 3864
jdaggett@1662 3865 <tr>
jdaggett@1662 3866 <td>Value:
jdaggett@1662 3867
jdaggett@8368 3868 <td><a href="#font-variant-position-normal-value"
jdaggett@8368 3869 title="normal!!font-variant-position">normal</a> | <a
jdaggett@8279 3870 href="#sub">sub</a> | <a href="#super">super</a>
jdaggett@1732 3871
jdaggett@1732 3872 <tr>
jdaggett@1732 3873 <td>Initial:
jdaggett@1732 3874
jdaggett@1732 3875 <td>normal
jdaggett@1732 3876
jdaggett@1732 3877 <tr>
jdaggett@1732 3878 <td>Applies to:
jdaggett@1732 3879
jdaggett@1732 3880 <td>all elements
jdaggett@1732 3881
jdaggett@1732 3882 <tr>
jdaggett@1732 3883 <td>Inherited:
jdaggett@1732 3884
jdaggett@1732 3885 <td>yes
jdaggett@1732 3886
jdaggett@1732 3887 <tr>
jdaggett@1732 3888 <td>Percentages:
jdaggett@1732 3889
jdaggett@1732 3890 <td>N/A
jdaggett@1732 3891
jdaggett@1732 3892 <tr>
jdaggett@1732 3893 <td>Media:
jdaggett@1732 3894
jdaggett@1732 3895 <td>visual
jdaggett@1732 3896
jdaggett@1732 3897 <tr>
jdaggett@1732 3898 <td>Computed value:
jdaggett@1732 3899
jdaggett@1732 3900 <td>as specified
jdaggett@7377 3901
jdaggett@7377 3902 <tr>
jdaggett@7377 3903 <td>Animatable:
jdaggett@7377 3904
jdaggett@7377 3905 <td>no
jdaggett@1732 3906 </table>
jdaggett@1732 3907
jdaggett@5890 3908 <p>This property is used to enable typographic subscript and superscript
jdaggett@5890 3909 glyphs. These are alternate glyphs designed within the same em-box as
jdaggett@5890 3910 default glyphs and are intended to be laid out on the same baseline as the
jdaggett@5890 3911 default glyphs, with no resizing or repositioning of the baseline. They
jdaggett@5890 3912 are explicitly designed to match the surrounding text and to be more
jdaggett@5890 3913 readable without affecting the line height.
jdaggett@3511 3914
jdaggett@3511 3915 <div class=figure><img alt="comparison between real subscript glyphs and
jdaggett@3511 3916 synthesized ones" src=realsubscripts.png>
jdaggett@3511 3917 <p class=caption>Subscript glyphs (top) vs. typical synthesized subscripts
jdaggett@3511 3918 (bottom)
jdaggett@3511 3919 </div>
jdaggett@3460 3920
jdaggett@8279 3921 <p>Individual values have the following meanings:
jdaggett@8279 3922
jdaggett@8279 3923 <dl>
jdaggett@8368 3924 <dt><dfn id=font-variant-position-normal-value
jdaggett@8368 3925 title="normal!!font-variant-position">normal</dfn>
jdaggett@8279 3926
jdaggett@8279 3927 <dd>None of the features listed below are enabled.
jdaggett@8279 3928
jdaggett@8279 3929 <dt><dfn id=sub>sub</dfn>
jdaggett@8279 3930
jdaggett@8279 3931 <dd>Enables display of subscript variants (OpenType feature: <span
jdaggett@8279 3932 class=tag>subs</span>).
jdaggett@8279 3933
jdaggett@8279 3934 <dt><dfn id=super>super</dfn>
jdaggett@8279 3935
jdaggett@8279 3936 <dd>Enables display of superscript variants (OpenType feature: <span
jdaggett@8279 3937 class=tag>sups</span>).
jdaggett@8279 3938 </dl>
jdaggett@5890 3939
jdaggett@5890 3940 <p>Because of the semantic nature of subscripts and superscripts, when the
jdaggett@8279 3941 value is either ‘<a href="#sub"><code class=property>sub</code></a>’
jdaggett@8279 3942 or ‘<a href="#super"><code class=property>super</code></a>’ for a
jdaggett@8279 3943 given contiguous run of text, if a variant glyph is not available for all
jdaggett@8279 3944 the characters in the run, simulated glyphs must be synthesized for all
jdaggett@8279 3945 characters using reduced forms of the glyphs that would be used without
jdaggett@8280 3946 this feature applied. This is done per run to avoid a mixture of variant
jdaggett@8280 3947 glyphs and synthesized ones that would not align correctly. In the case of
jdaggett@8280 3948 OpenType fonts that lack subscript or superscript glyphs for a given
jdaggett@8280 3949 character, user agents must use the appropriate subscript and superscript
jdaggett@8280 3950 metrics specified in the selected font's <a
jdaggett@3460 3951 href="http://www.microsoft.com/typography/otspec/os2.htm#subxs">OS/2
jdaggett@3460 3952 table</a> <a href="#OPENTYPE"
jdaggett@5891 3953 rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> to calculate the size
jdaggett@5891 3954 and offset of the synthesized substitutes.
jdaggett@2461 3955
jdaggett@8280 3956 <div class=figure><img alt="alternate superscripts vs. glyphs synthesized
jdaggett@8280 3957 using superscript metrics" src=superscript-alt-synth.png>
jdaggett@8280 3958 <p class=caption>Superscript alternate glyph (left), synthesized
jdaggett@8280 3959 superscript glyphs (middle), and incorrect mixture of the two (right)
jdaggett@8280 3960 </div>
jdaggett@8280 3961
jdaggett@8385 3962 <p>In situations where text decorations are only applied to runs of text
jdaggett@8385 3963 containing superscript or subscript glyphs, the synthesized glyphs must be
jdaggett@8385 3964 used to avoid problems with the placement of decorations.
jdaggett@8385 3965
jdaggett@2461 3966 <p>In the past, user agents have used font-size and vertical-align to
jdaggett@8368 3967 simulate subscripts and superscripts for the <code title="HTML sub
jdaggett@8368 3968 element">sub</code> and <code title="HTML sup element">sup</code>
jdaggett@8368 3969 elements. To allow a backwards compatible way of defining subscripts and
jdaggett@8368 3970 superscripts, it is recommended that authors use conditional rules <a
jdaggett@8368 3971 href="#CSS3-CONDITIONAL"
jdaggett@3460 3972 rel=biblioentry>[CSS3-CONDITIONAL]<!--{{CSS3-CONDITIONAL}}--></a> so that
jdaggett@5890 3973 older user agents will still render subscripts and superscripts via the
jdaggett@5890 3974 older mechanism.
jdaggett@5890 3975
jdaggett@5890 3976 <p>Authors should note that fonts typically only provide subscript and
jdaggett@5890 3977 superscript glyphs for a subset of all characters supported by the font.
jdaggett@8280 3978 For example, while subscript and superscript glyphs are often available
jdaggett@8280 3979 for Latin numbers, glyphs for punctuation and letter characters are less
jdaggett@8280 3980 frequently provided. The synthetic fallback rules defined for this
jdaggett@8280 3981 property assure that subscripts and superscripts will always appear but
jdaggett@8280 3982 the appearance may not match author expectations if the font used does not
jdaggett@8280 3983 provide the appropriate alternate glyph for all characters contained in a
jdaggett@8280 3984 subscript or superscript.
jdaggett@8280 3985
jdaggett@8280 3986 <p>This property is not cumulative. Applying it to elements within a
jdaggett@5890 3987 subscript or superscript won't nest the placement of a subscript or
jdaggett@5890 3988 superscript glyph. Images contained within text runs where the value of
jdaggett@8279 3989 this property is ‘<a href="#sub"><code class=property>sub</code></a>’
jdaggett@8279 3990 or ‘<a href="#super"><code class=property>super</code></a>’ will be
jdaggett@8368 3991 drawn just as they would if the value was <a
jdaggett@8368 3992 href="#font-variant-position-normal-value"
jdaggett@8368 3993 title="normal!!font-variant-position">‘<code
jdaggett@8368 3994 class=property>normal</code>’</a>.</p>
jdaggett@8364 3995 <!-- due to lack of consensus, couldn't resolve on exact positioning of text decorations:
jdaggett@8364 3996 http://www.w3.org/2013/06/06-css-minutes.html#item03 -->
jdaggett@8280 3997
jdaggett@8280 3998 <p>Because of these limitations, ‘<a
jdaggett@8280 3999 href="#propdef-font-variant-position"><code
jdaggett@8280 4000 class=property>font-variant-position</code></a>’ is not recommended for
jdaggett@8280 4001 use in user agent stylesheets. Authors should use it in cases where
jdaggett@5890 4002 subscripts or superscripts will only contain the narrow range of
jdaggett@5890 4003 characters supported by the fonts specified.
jdaggett@2509 4004
jdaggett@8368 4005 <p class=note>The variant glyphs use the same baseline as the default
jdaggett@8368 4006 glyphs would use. There is no shift in the placement along the baseline,
jdaggett@8368 4007 so the use of variant glyphs doesn't affect the height of the inline box
jdaggett@8368 4008 or alter the height of the linebox. This makes superscript and subscript
jdaggett@8368 4009 variants ideal for situations where it's important that leading remain
jdaggett@8368 4010 constant, such as in multi-column layout.
jdaggett@8368 4011
jdaggett@2461 4012 <div class=example>
jdaggett@8279 4013 <p>A typical user agent default style for the <a class=tag
jdaggett@8279 4014 href="#sub">sub</a> element:</p>
jdaggett@2461 4015
jdaggett@2461 4016 <pre>sub {
jdaggett@2461 4017 vertical-align: sub;
jdaggett@2461 4018 font-size: smaller;
jdaggett@2461 4019 line-height: normal;
jdaggett@2461 4020 }
jdaggett@2461 4021 </pre>
jdaggett@2461 4022
jdaggett@3460 4023 <p>Using font-variant-position to specify typographic subscripts in a way
jdaggett@3460 4024 that will still show subscripts in older user agents:</p>
jdaggett@3460 4025
jdaggett@3460 4026 <pre>@supports ( font-variant-position: sub ) {
jdaggett@3460 4027
jdaggett@3460 4028 sub {
jdaggett@8280 4029 vertical-align: baseline;
jdaggett@3460 4030 font-size: 100%;
jdaggett@3460 4031 line-height: inherit;
jdaggett@3460 4032 font-variant-position: sub;
jdaggett@3460 4033 }
jdaggett@3460 4034
jdaggett@2461 4035 }
jdaggett@2461 4036 </pre>
jdaggett@2461 4037
jdaggett@4624 4038 <p>User agents that support the ‘<a
jdaggett@4624 4039 href="#propdef-font-variant-position"><code
jdaggett@4624 4040 class=property>font-variant-position</code></a>’ property will select a
jdaggett@4624 4041 subscript variant glyph and render this without adjusting the baseline or
jdaggett@4624 4042 font-size. Older user agents will ignore the ‘<a
jdaggett@4624 4043 href="#propdef-font-variant-position"><code
jdaggett@4624 4044 class=property>font-variant-position</code></a>’ property definition
jdaggett@4624 4045 and use the standard defaults for subscripts.</p>
jdaggett@2461 4046 </div>
jdaggett@2118 4047 <!-- prop: font-variant-caps -->
jdaggett@2118 4048
jdaggett@2118 4049 <h3 id=font-variant-caps-prop><span class=secno>6.6 </span>Capitalization:
jdaggett@1662 4050 the <a href="#propdef-font-variant-caps">font-variant-caps</a> property</h3>
jdaggett@1662 4051
jdaggett@5809 4052 <table class=propdef id=namefont-variant-capsvaluenormal-small-c>
jdaggett@1662 4053 <tbody>
jdaggett@1662 4054 <tr>
jdaggett@1662 4055 <td>Name:
jdaggett@1662 4056
jdaggett@1662 4057 <td><dfn id=propdef-font-variant-caps>font-variant-caps</dfn>
jdaggett@1662 4058
jdaggett@1662 4059 <tr>
jdaggett@1662 4060 <td>Value:
jdaggett@1662 4061
jdaggett@8278 4062 <td><a href="#font-variant-caps-normal-value"
jdaggett@8278 4063 title="normal!!font-variant-caps">normal</a> | <a
jdaggett@8278 4064 href="#small-caps">small-caps</a> | <a
jdaggett@8278 4065 href="#all-small-caps">all-small-caps</a> | <a
jdaggett@8278 4066 href="#petite-caps">petite-caps</a> | <a
jdaggett@8278 4067 href="#all-petite-caps">all-petite-caps</a> | <a
jdaggett@8278 4068 href="#unicase">unicase</a> | <a href="#titling-caps">titling-caps</a>
jdaggett@1662 4069
jdaggett@1662 4070 <tr>
jdaggett@1662 4071 <td>Initial:
jdaggett@1662 4072
jdaggett@1662 4073 <td>normal
jdaggett@1662 4074
jdaggett@1662 4075 <tr>
jdaggett@1662 4076 <td>Applies to:
jdaggett@1662 4077
jdaggett@1662 4078 <td>all elements
jdaggett@1662 4079
jdaggett@1662 4080 <tr>
jdaggett@1662 4081 <td>Inherited:
jdaggett@1662 4082
jdaggett@1662 4083 <td>yes
jdaggett@1662 4084
jdaggett@1662 4085 <tr>
jdaggett@1662 4086 <td>Percentages:
jdaggett@1662 4087
jdaggett@1662 4088 <td>N/A
jdaggett@1662 4089
jdaggett@1662 4090 <tr>
jdaggett@1662 4091 <td>Media:
jdaggett@1662 4092
jdaggett@1662 4093 <td>visual
jdaggett@1662 4094
jdaggett@1662 4095 <tr>
jdaggett@1662 4096 <td>Computed value:
jdaggett@1662 4097
jdaggett@1662 4098 <td>as specified
jdaggett@7377 4099
jdaggett@7377 4100 <tr>
jdaggett@7377 4101 <td>Animatable:
jdaggett@7377 4102
jdaggett@7377 4103 <td>no
jdaggett@1662 4104 </table>
jdaggett@1662 4105
jdaggett@8280 4106 <p>This property allows the selection of alternate glyphs used for small or
jdaggett@8280 4107 petite capitals or for titling. These glyphs are specifically designed to
jdaggett@8280 4108 blend well with the surrounding normal glyphs, to maintain the weight and
jdaggett@8280 4109 readability which suffers when text is simply resized to fit this purpose.
jdaggett@1662 4110
jdaggett@1732 4111 <p>Individual values have the following meanings:
jdaggett@1662 4112
jdaggett@1662 4113 <dl>
jdaggett@8278 4114 <dt><dfn id=font-variant-caps-normal-value
jdaggett@8278 4115 title="normal!!font-variant-caps">normal</dfn>
jdaggett@5809 4116
jdaggett@5809 4117 <dd>None of the features listed below are enabled.
jdaggett@5809 4118
jdaggett@1662 4119 <dt><dfn id=small-caps>small-caps</dfn>
jdaggett@1662 4120
jdaggett@6436 4121 <dd>Enables display of small capitals (OpenType feature: <span
jdaggett@6436 4122 class=tag>smcp</span>). Small-caps glyphs typically use the form of
jdaggett@6436 4123 uppercase letters but are reduced to the size of lowercase letters.
jdaggett@1662 4124 </dl>
jdaggett@1662 4125
jdaggett@1662 4126 <div class=featex><img alt="small-caps example" src=smcp.png></div>
jdaggett@1662 4127
jdaggett@1662 4128 <dl>
jdaggett@1732 4129 <dt><dfn id=all-small-caps>all-small-caps</dfn>
jdaggett@1732 4130
jdaggett@1732 4131 <dd>Enables display of small capitals for both upper and lowercase letters
jdaggett@6436 4132 (OpenType features: <span class=tag>c2sc, smcp</span>).
jdaggett@1732 4133
jdaggett@1662 4134 <dt><dfn id=petite-caps>petite-caps</dfn>
jdaggett@1662 4135
jdaggett@6436 4136 <dd>Enables display of petite capitals (OpenType feature: <span
jdaggett@6436 4137 class=tag>pcap</span>).
jdaggett@1662 4138
jdaggett@1732 4139 <dt><dfn id=all-petite-caps>all-petite-caps</dfn>
jdaggett@1732 4140
jdaggett@1732 4141 <dd>Enables display of petite capitals for both upper and lowercase
jdaggett@6436 4142 letters (OpenType features: <span class=tag>c2pc, pcap</span>).
jdaggett@1732 4143
jdaggett@6648 4144 <dt><dfn id=unicase>unicase</dfn>
jdaggett@6648 4145
jdaggett@6648 4146 <dd>Enables display of mixture of small capitals for uppercase letters
jdaggett@6648 4147 with normal lowercase letters (OpenType feature: <span
jdaggett@6648 4148 class=tag>unic</span>).
jdaggett@6648 4149
jdaggett@1662 4150 <dt><dfn id=titling-caps>titling-caps</dfn>
jdaggett@1662 4151
jdaggett@6436 4152 <dd>Enables display of titling capitals (OpenType feature: <span
jdaggett@6436 4153 class=tag>titl</span>). Uppercase letter glyphs are often designed for
jdaggett@6436 4154 use with lowercase letters. When used in all uppercase titling sequences
jdaggett@6436 4155 they can appear too strong. Titling capitals are designed specifically
jdaggett@6436 4156 for this situation.
jdaggett@1662 4157 </dl>
jdaggett@1662 4158
jdaggett@6648 4159 <p>The availability of these glyphs is based on whether a given feature is
jdaggett@6648 4160 defined or not in the feature list of the font. User agents can optionally
jdaggett@6648 4161 decide this on a per-script basis but should explicitly not decide this on
jdaggett@6648 4162 a per-character basis.
jdaggett@6648 4163
jdaggett@6648 4164 <p>Some fonts may only support a subset or none of the features described
jdaggett@6648 4165 for this property. For backwards compatibility with CSS 2.1, if ‘<a
jdaggett@4624 4166 href="#small-caps"><code class=property>small-caps</code></a>’ or ‘<a
jdaggett@4624 4167 href="#all-small-caps"><code class=property>all-small-caps</code></a>’
jdaggett@4624 4168 is specified but small-caps glyphs are not available for a given font,
jdaggett@4624 4169 user agents should simulate a small-caps font, for example by taking a
jdaggett@6648 4170 normal font and replacing the glyphs for lowercase letters with scaled
jdaggett@6648 4171 versions of the glyphs for uppercase characters (replacing the glyphs for
jdaggett@6648 4172 both upper and lowercase letters in the case of ‘<a
jdaggett@4624 4173 href="#all-small-caps"><code class=property>all-small-caps</code></a>’).
jdaggett@6648 4174
jdaggett@6648 4175 <div class=figure style="padding: 0; margin: auto;"><img alt="synthetic vs.
jdaggett@6648 4176 real small-caps" class=hires src=synthetic-vs-real-small-caps.png
jdaggett@6648 4177 width=512px>
jdaggett@6648 4178 <p class=caption>Synthetic vs. real small-caps
jdaggett@6648 4179 </div>
jdaggett@6648 4180
jdaggett@6648 4181 <p>To match the surrounding text, a font may provide alternate glyphs for
jdaggett@6648 4182 caseless characters when these features are enabled but when a user agent
jdaggett@6648 4183 simulates small capitals, it must not attempt to simulate alternates for
jdaggett@6648 4184 codepoints which are considered caseless.
jdaggett@6648 4185
jdaggett@6648 4186 <div class=figure style="padding: 0; margin: auto;"><img alt="caseless
jdaggett@6648 4187 characters with small-caps, all-small-caps enabled" class=hires
jdaggett@6648 4188 src=small-capitals-variations.png width=418px>
jdaggett@6648 4189 <p class=caption>Caseless characters with small-caps, all-small-caps
jdaggett@6648 4190 enabled
jdaggett@6648 4191 </div>
jdaggett@6648 4192
jdaggett@6648 4193 <p>If either ‘<a href="#petite-caps"><code
jdaggett@4624 4194 class=property>petite-caps</code></a>’ or ‘<a
jdaggett@4624 4195 href="#all-petite-caps"><code class=property>all-petite-caps</code></a>’
jdaggett@4624 4196 is specified for a font that doesn't support these features, the property
jdaggett@4624 4197 behaves as if ‘<a href="#small-caps"><code
jdaggett@4624 4198 class=property>small-caps</code></a>’ or ‘<a
jdaggett@4624 4199 href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
jdaggett@6648 4200 respectively, had been specified. If ‘<a href="#unicase"><code
jdaggett@6648 4201 class=property>unicase</code></a>’ is specified for a font that doesn't
jdaggett@6648 4202 support that feature, the property behaves as if ‘<a
jdaggett@6648 4203 href="#small-caps"><code class=property>small-caps</code></a>’ was
jdaggett@6648 4204 applied only to lowercased uppercase letters. If ‘<a
jdaggett@6648 4205 href="#titling-caps"><code class=property>titling-caps</code></a>’ is
jdaggett@6648 4206 specified with a font that does not support this feature, this property
jdaggett@6648 4207 has no visible effect. When simulated small capital glyphs are used, for
jdaggett@4624 4208 scripts that lack uppercase and lowercase letters, ‘<a
jdaggett@4624 4209 href="#small-caps"><code class=property>small-caps</code></a>’, ‘<a
jdaggett@4624 4210 href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
jdaggett@4624 4211 ‘<a href="#petite-caps"><code class=property>petite-caps</code></a>’,
jdaggett@4624 4212 ‘<a href="#all-petite-caps"><code
jdaggett@4624 4213 class=property>all-petite-caps</code></a>’ and ‘<a
jdaggett@4624 4214 href="#unicase"><code class=property>unicase</code></a>’ have no visible
jdaggett@2462 4215 effect.
jdaggett@1662 4216
jdaggett@6648 4217 <p>When casing transforms are used to simulate small capitals, the casing
jdaggett@8280 4218 transformations must match those used for the <span
jdaggett@6648 4219 class=property>‘<code class=property>text-transform</code>’</span>
jdaggett@6648 4220 property.
jdaggett@6648 4221
jdaggett@6648 4222 <p>As a last resort, unscaled uppercase letter glyphs in a normal font may
jdaggett@6648 4223 replace glyphs in a small-caps font so that the text appears in all
jdaggett@6648 4224 uppercase letters.
jdaggett@6648 4225
jdaggett@6648 4226 <div class=figure style="padding: 0; margin: auto;"><img alt="using
jdaggett@6648 4227 all-small-caps in acronym-laden text" class=hires
jdaggett@6648 4228 src=acronym-laden-text.png width=596px>
jdaggett@6648 4229 <p class=caption>Using small capitals to improve readability in
jdaggett@6648 4230 acronym-laden text
jdaggett@6648 4231 </div>
jdaggett@6648 4232
jdaggett@1662 4233 <div class=example>
jdaggett@1662 4234 <p>Quotes rendered italicised, with small-caps on the first line:</p>
jdaggett@1662 4235
jdaggett@1662 4236 <pre>blockquote { font-style: italic; }
jdaggett@1662 4237 blockquote:first-line { font-variant: small-caps; }
jdaggett@1662 4238
jdaggett@8397 4239 &lt;blockquote><a href="http://lists.w3.org/Archives/Public/www-style/2009Dec/0036.html" style="text-decoration: none; border: none;">I'll be honor-bound to slap them like a haddock.</a>&lt;/blockquote>
jdaggett@1662 4240 </pre>
jdaggett@1662 4241 </div>
jdaggett@2118 4242 <!-- prop: font-variant-numeric -->
jdaggett@2118 4243
jdaggett@2118 4244 <h3 id=font-variant-numeric-prop><span class=secno>6.7 </span>Numerical
jdaggett@1662 4245 formatting: the <a
jdaggett@1662 4246 href="#propdef-font-variant-numeric">font-variant-numeric</a> property</h3>
jdaggett@1662 4247
jdaggett@5809 4248 <table class=propdef id=namefont-variant-numericvaluenormal-ltnu>
jdaggett@1662 4249 <tbody>
jdaggett@1662 4250 <tr>
jdaggett@1662 4251 <td>Name:
jdaggett@1662 4252
jdaggett@1662 4253 <td><dfn id=propdef-font-variant-numeric>font-variant-numeric</dfn>
jdaggett@1662 4254
jdaggett@1662 4255 <tr>
jdaggett@1662 4256 <td>Value:
jdaggett@1662 4257
jdaggett@8278 4258 <td><a href="#font-variant-numeric-normal-value"
jdaggett@8278 4259 title="normal!!font-variant-numeric">normal</a> | [ <a
jdaggett@8225 4260 href="#numeric-figure-values"><var>&lt;numeric-figure-values&gt;</var></a>
jdaggett@8225 4261 || <a
jdaggett@8225 4262 href="#numeric-spacing-values"><var>&lt;numeric-spacing-values&gt;</var></a>
jdaggett@8225 4263 || <a
jdaggett@8225 4264 href="#numeric-fraction-values"><var>&lt;numeric-fraction-values&gt;</var></a>
jdaggett@8225 4265 || <a href="#ordinal">ordinal</a> || <a
jdaggett@8225 4266 href="#slashed-zero">slashed-zero</a> ]
jdaggett@1662 4267
jdaggett@1662 4268 <tr>
jdaggett@1662 4269 <td>Initial:
jdaggett@1662 4270
jdaggett@1662 4271 <td>normal
jdaggett@1662 4272
jdaggett@1662 4273 <tr>
jdaggett@1662 4274 <td>Applies to:
jdaggett@1662 4275
jdaggett@1662 4276 <td>all elements
jdaggett@1662 4277
jdaggett@1662 4278 <tr>
jdaggett@1662 4279 <td>Inherited:
jdaggett@1662 4280
jdaggett@1662 4281 <td>yes
jdaggett@1662 4282
jdaggett@1662 4283 <tr>
jdaggett@1662 4284 <td>Percentages:
jdaggett@1662 4285
jdaggett@1662 4286 <td>N/A
jdaggett@1662 4287
jdaggett@1662 4288 <tr>
jdaggett@1662 4289 <td>Media:
jdaggett@1662 4290
jdaggett@1662 4291 <td>visual
jdaggett@1662 4292
jdaggett@1662 4293 <tr>
jdaggett@1662 4294 <td>Computed value:
jdaggett@1662 4295
jdaggett@1662 4296 <td>as specified
jdaggett@7377 4297
jdaggett@7377 4298 <tr>
jdaggett@7377 4299 <td>Animatable:
jdaggett@7377 4300
jdaggett@7377 4301 <td>no
jdaggett@1662 4302 </table>
jdaggett@1662 4303
jdaggett@8311 4304 <p>Specifies control over numerical forms. The example below shows how some
jdaggett@8311 4305 of these values can be combined to influence the rendering of tabular data
jdaggett@8311 4306 with fonts that support these features. Within normal paragraph text,
jdaggett@8311 4307 proportional numbers are used while tabular numbers are used so that
jdaggett@8311 4308 columns of numbers line up properly:
jdaggett@1662 4309
jdaggett@1662 4310 <div class=figure style="padding: 0; margin: auto;"><img alt="combining
jdaggett@1662 4311 number styles" src=numberstyles.png>
jdaggett@1662 4312 <p class=caption>Using number styles
jdaggett@1662 4313 </div>
jdaggett@1662 4314
jdaggett@8311 4315 <p>Possible combinations:
jdaggett@8311 4316
jdaggett@8311 4317 <pre
jdaggett@8311 4318 class=prod><dfn id=numeric-figure-values><var>&lt;numeric-figure-values&gt;</var></dfn> = [ <a href="#lining-nums">lining-nums</a> | <a href="#oldstyle-nums">oldstyle-nums</a> ]</pre>
jdaggett@8311 4319
jdaggett@8311 4320 <pre
jdaggett@8311 4321 class=prod><dfn id=numeric-spacing-values><var>&lt;numeric-spacing-values&gt;</var></dfn> = [ <a href="#proportional-nums">proportional-nums</a> | <a href="#tabular-nums">tabular-nums</a> ]</pre>
jdaggett@8311 4322
jdaggett@8311 4323 <pre
jdaggett@8311 4324 class=prod><dfn id=numeric-fraction-values><var>&lt;numeric-fraction-values&gt;</var></dfn> = [ <a href="#diagonal-fractions">diagonal-fractions</a> | <a href="#stacked-fractions">stacked-fractions</a> ]</pre>
jdaggett@8311 4325
jdaggett@8311 4326 <p>Individual values have the following meanings:
jdaggett@8311 4327
jdaggett@1662 4328 <dl>
jdaggett@8311 4329 <dt><dfn id=font-variant-numeric-normal-value
jdaggett@8311 4330 title="normal!!font-variant-numeric">normal</dfn>
jdaggett@8311 4331
jdaggett@8311 4332 <dd>None of the features listed below are enabled.
jdaggett@8311 4333
jdaggett@8311 4334 <dt><dfn id=lining-nums>lining-nums</dfn>
jdaggett@8311 4335
jdaggett@8311 4336 <dd>Enables display of lining numerals (OpenType feature: <span
jdaggett@8311 4337 class=tag>lnum</span>).
jdaggett@8311 4338
jdaggett@8311 4339 <dt><dfn id=oldstyle-nums>oldstyle-nums</dfn>
jdaggett@8311 4340
jdaggett@8311 4341 <dd>Enables display of old-style numerals (OpenType feature: <span
jdaggett@8311 4342 class=tag>onum</span>).
jdaggett@8311 4343
jdaggett@8311 4344 <dt><dfn id=proportional-nums>proportional-nums</dfn>
jdaggett@8311 4345
jdaggett@8311 4346 <dd>Enables display of proportional numerals (OpenType feature: <span
jdaggett@8311 4347 class=tag>pnum</span>).
jdaggett@8311 4348
jdaggett@8311 4349 <dt><dfn id=tabular-nums>tabular-nums</dfn>
jdaggett@8311 4350
jdaggett@8311 4351 <dd>Enables display of tabular numerals (OpenType feature: <span
jdaggett@8311 4352 class=tag>tnum</span>).
jdaggett@8311 4353
jdaggett@1662 4354 <dt><dfn id=diagonal-fractions>diagonal-fractions</dfn>
jdaggett@1662 4355
jdaggett@6436 4356 <dd>Enables display of lining diagonal fractions (OpenType feature: <span
jdaggett@6436 4357 class=tag>frac</span>).
jdaggett@1662 4358 </dl>
jdaggett@1662 4359
jdaggett@1662 4360 <div class=featex><img alt="diagonal fraction example" src=frac.png></div>
jdaggett@1662 4361
jdaggett@1662 4362 <dl>
jdaggett@1662 4363 <dt><dfn id=stacked-fractions>stacked-fractions</dfn>
jdaggett@1662 4364
jdaggett@6436 4365 <dd>Enables display of lining stacked fractions (OpenType feature: <span
jdaggett@6436 4366 class=tag>afrc</span>).
jdaggett@1662 4367 </dl>
jdaggett@1662 4368
jdaggett@1662 4369 <div class=featex><img alt="stacked fraction example" src=afrc.png></div>
jdaggett@1662 4370
jdaggett@1662 4371 <dl>
jdaggett@3638 4372 <dt><dfn id=ordinal>ordinal</dfn>
jdaggett@3638 4373
jdaggett@3638 4374 <dd>Enables display of forms used with ordinal numbers (OpenType feature:
jdaggett@6436 4375 <span class=tag>ordn</span>).
jdaggett@3638 4376
jdaggett@1662 4377 <dt><dfn id=slashed-zero>slashed-zero</dfn>
jdaggett@1662 4378
jdaggett@6436 4379 <dd>Enables display of slashed zeros (OpenType feature: <span
jdaggett@6436 4380 class=tag>zero</span>).
jdaggett@1662 4381 </dl>
jdaggett@1662 4382
jdaggett@1662 4383 <div class=featex><img alt="slashed zero example" src=zero.png></div>
jdaggett@1662 4384
jdaggett@1662 4385 <div class=example id=steak-marinade>
jdaggett@1662 4386 <p>A simple flank steak marinade recipe, rendered with automatic fractions
jdaggett@1662 4387 and old-style numerals:</p>
jdaggett@1662 4388
jdaggett@1662 4389 <pre>.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; }
jdaggett@1662 4390
jdaggett@1662 4391 &lt;h4>Steak marinade:&lt;/h4>
jdaggett@1662 4392 &lt;ul>
jdaggett@1662 4393 &lt;li>&lt;span class="amount">2&lt;/span> tbsp olive oil&lt;/li>
jdaggett@1662 4394 &lt;li>&lt;span class="amount">1&lt;/span> tbsp lemon juice&lt;/li>
jdaggett@1662 4395 &lt;li>&lt;span class="amount">1&lt;/span> tbsp soy sauce&lt;/li>
jdaggett@1662 4396 &lt;li>&lt;span class="amount">1 1/2&lt;/span> tbsp dry minced onion&lt;/li>
jdaggett@1662 4397 &lt;li>&lt;span class="amount">2 1/2&lt;/span> tsp italian seasoning&lt;/li>
jdaggett@1732 4398 &lt;li>Salt &amp;amp; pepper&lt;/li>
jdaggett@1662 4399 &lt;/ul>
jdaggett@1662 4400
jdaggett@5596 4401 &lt;p>Mix the meat with the marinade and let it sit covered in the refrigerator
jdaggett@5596 4402 for a few hours or overnight.&lt;/p>
jdaggett@1662 4403 </pre>
jdaggett@8311 4404
jdaggett@8311 4405 <p>Note that the fraction feature is only applied to values not the entire
jdaggett@8311 4406 paragraph. Fonts often implement this feature using contextual rules
jdaggett@8311 4407 based on the use of the slash (‘<code class=css>/</code>’) character.
jdaggett@8311 4408 As such, it's not suitable for use as a paragraph-level style.</p>
jdaggett@1662 4409 </div>
jdaggett@2118 4410 <!-- prop: font-variant-alternates -->
jdaggett@2118 4411
jdaggett@2118 4412 <h3 id=font-variant-alternates-prop><span class=secno>6.8 </span>Alternates
jdaggett@2118 4413 and swashes: the <a
jdaggett@2118 4414 href="#propdef-font-variant-alternates">font-variant-alternates</a>
jdaggett@2118 4415 property</h3>
jdaggett@2118 4416
jdaggett@6176 4417 <table class=propdef id=namefont-variant-alternatesvaluenormal-s>
jdaggett@2118 4418 <tbody>
jdaggett@2118 4419 <tr>
jdaggett@2118 4420 <td>Name:
jdaggett@2118 4421
jdaggett@2118 4422 <td><dfn
jdaggett@2118 4423 id=propdef-font-variant-alternates>font-variant-alternates</dfn>
jdaggett@2118 4424
jdaggett@2118 4425 <tr>
jdaggett@2118 4426 <td>Value:
jdaggett@2118 4427
jdaggett@8225 4428 <td>normal | [ <a href="#stylistic"
jdaggett@8225 4429 title=stylistic>stylistic(&lt;feature-value-name&gt;)</a> || <a
jdaggett@8225 4430 href="#historical-forms">historical-forms</a> || <a href="#styleset"
jdaggett@8225 4431 title=styleset>styleset(&lt;feature-value-name&gt; #)</a> || <a
jdaggett@8225 4432 href="#character-variant"
jdaggett@8225 4433 title=character-variant>character-variant(&lt;feature-value-name&gt;
jdaggett@8225 4434 #)</a> || <a href="#swash"
jdaggett@8225 4435 title=swash>swash(&lt;feature-value-name&gt;)</a> || <a
jdaggett@8225 4436 href="#ornaments"
jdaggett@8225 4437 title=ornaments>ornaments(&lt;feature-value-name&gt;)</a> || <a
jdaggett@8225 4438 href="#annotation"
jdaggett@8225 4439 title=annotation>annotation(&lt;feature-value-name&gt;)</a> ]
jdaggett@2118 4440
jdaggett@2118 4441 <tr>
jdaggett@2118 4442 <td>Initial:
jdaggett@2118 4443
jdaggett@2118 4444 <td>normal
jdaggett@2118 4445
jdaggett@2118 4446 <tr>
jdaggett@2118 4447 <td>Applies to:
jdaggett@2118 4448
jdaggett@2118 4449 <td>all elements
jdaggett@2118 4450
jdaggett@2118 4451 <tr>
jdaggett@2118 4452 <td>Inherited:
jdaggett@2118 4453
jdaggett@2118 4454 <td>yes
jdaggett@2118 4455
jdaggett@2118 4456 <tr>
jdaggett@2118 4457 <td>Percentages:
jdaggett@2118 4458
jdaggett@2118 4459 <td>N/A
jdaggett@2118 4460
jdaggett@2118 4461 <tr>
jdaggett@2118 4462 <td>Media:
jdaggett@2118 4463
jdaggett@2118 4464 <td>visual
jdaggett@2118 4465
jdaggett@2118 4466 <tr>
jdaggett@2118 4467 <td>Computed value:
jdaggett@2118 4468
jdaggett@2118 4469 <td>as specified
jdaggett@7377 4470
jdaggett@7377 4471 <tr>
jdaggett@7377 4472 <td>Animatable:
jdaggett@7377 4473
jdaggett@7377 4474 <td>no
jdaggett@2118 4475 </table>
jdaggett@2118 4476
jdaggett@2118 4477 <p>For any given character, fonts can provide a variety of alternate glyphs
jdaggett@2118 4478 in addition to the default glyph for that character. This property
jdaggett@2118 4479 provides control over the selection of these alternate glyphs.
jdaggett@2118 4480
jdaggett@8311 4481 <p>For many of the property values listed below, several different
jdaggett@8311 4482 alternate glyphs are available. How many alternates are available and what
jdaggett@8356 4483 they represent is font-specific, so these are each marked <dfn
jdaggett@8356 4484 id=font-specific>font specific</dfn> in the value definitions below.
jdaggett@8356 4485 Because the nature of these alternates is font-specific, the <a
jdaggett@8311 4486 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8311 4487 rule is used to define values for a specific font family or set of
jdaggett@8311 4488 families that associate a font-specific numeric
jdaggett@8311 4489 <code>&lt;feature-index&gt;</code> with a custom
jdaggett@8311 4490 <code>&lt;feature-value-name&gt;</code>, which is then used in this
jdaggett@8311 4491 property to select specific alternates:
jdaggett@8311 4492
jdaggett@8311 4493 <pre>@font-feature-values Noble Script { @swash { swishy: 1; flowing: 2; } }
jdaggett@8311 4494
jdaggett@8311 4495 p {
jdaggett@8311 4496 font-family: Noble Script;
jdaggett@8311 4497 font-variant-alternates: swash(flowing); /* use swash alternate #2 */
jdaggett@8311 4498 }</pre>
jdaggett@8311 4499
jdaggett@8312 4500 <p>When a particular <code>&lt;feature-value-name&gt;</code> has not been
jdaggett@8312 4501 defined for a given family or for a particular feature type, the computed
jdaggett@8312 4502 value must be the same as if it had been defined. However, property values
jdaggett@8312 4503 that contain these undefined <code>&lt;feature-value-name&gt;</code>
jdaggett@8312 4504 identifiers must be ignored when choosing glyphs.
jdaggett@8312 4505
jdaggett@8312 4506 <pre>/* these two style rules are effectively the same */
jdaggett@8312 4507 p { font-variant-alternates: swash(unknown-value); } /* not a defined value, ignored */
jdaggett@8312 4508 p { font-variant-alternates: normal; }
jdaggett@8312 4509 </pre>
jdaggett@8312 4510
jdaggett@8312 4511 <p>This allows values to be defined and used for a given set of font
jdaggett@8312 4512 families but ignored if fallback occurs, since the font family name would
jdaggett@8312 4513 be different. If a given value is outside the range supported by a given
jdaggett@8312 4514 font, the value is ignored. These values never apply to generic font
jdaggett@8312 4515 families.
jdaggett@2556 4516
jdaggett@2118 4517 <p>Individual values have the following meanings:
jdaggett@2118 4518
jdaggett@2118 4519 <dl>
jdaggett@8278 4520 <dt><dfn id=font-variant-alternates-normal-value
jdaggett@8278 4521 title="normal!!font-variant-alternates">normal</dfn>
jdaggett@5809 4522
jdaggett@5809 4523 <dd>None of the features listed below are enabled.
jdaggett@5809 4524
jdaggett@2118 4525 <dt><dfn id=historical-forms>historical-forms</dfn>
jdaggett@2118 4526
jdaggett@6436 4527 <dd>Enables display of historical forms (OpenType feature: <span
jdaggett@6436 4528 class=tag>hist</span>).
jdaggett@2118 4529 </dl>
jdaggett@2118 4530
jdaggett@2118 4531 <div class=featex><img alt="historical form example" src=hist.png></div>
jdaggett@2118 4532
jdaggett@2118 4533 <dl>
jdaggett@8311 4534 <dt><dfn id=stylistic
jdaggett@8311 4535 title=stylistic>stylistic(&lt;feature-value-name&gt;)</dfn>
jdaggett@8311 4536
jdaggett@8356 4537 <dd>Enables display of stylistic alternates (<a
jdaggett@8356 4538 href="#font-specific"><em>font specific</em></a>, OpenType feature: <span
jdaggett@8356 4539 class=tag>salt &lt;feature-index&gt;</span>).
jdaggett@8311 4540 </dl>
jdaggett@8311 4541
jdaggett@8311 4542 <div class=featex><img alt="stylistic alternate example" src=salt.png></div>
jdaggett@8311 4543
jdaggett@8311 4544 <dl>
jdaggett@8225 4545 <dt><dfn id=styleset title=styleset>styleset(&lt;feature-value-name&gt;
jdaggett@8225 4546 #)</dfn>
jdaggett@2118 4547
jdaggett@8356 4548 <dd>Enables display with stylistic sets (<a href="#font-specific"><em>font
jdaggett@8356 4549 specific</em></a>, OpenType feature: <span
jdaggett@8356 4550 class=tag>ss&lt;feature-index&gt;</span> OpenType currently defines <span
jdaggett@8356 4551 class=tag>ss01</span> through <span class=tag>ss20</span>).
jdaggett@2118 4552 </dl>
jdaggett@2118 4553
jdaggett@2118 4554 <div class=featex><img alt="styleset example" src=ssnn.png></div>
jdaggett@2118 4555
jdaggett@2118 4556 <dl>
jdaggett@8225 4557 <dt><dfn id=character-variant
jdaggett@8225 4558 title=character-variant>character-variant(&lt;feature-value-name&gt;
jdaggett@8225 4559 #)</dfn>
jdaggett@2118 4560
jdaggett@8356 4561 <dd>Enables display of specific character variants (<a
jdaggett@8356 4562 href="#font-specific"><em>font specific</em></a>, OpenType feature: <span
jdaggett@6436 4563 class=tag>cv&lt;feature-index&gt;</span> OpenType currently defines <span
jdaggett@6436 4564 class=tag>cv01</span> through <span class=tag>cv99</span>).
jdaggett@2118 4565
jdaggett@8225 4566 <dt><dfn id=swash title=swash>swash(&lt;feature-value-name&gt;)</dfn>
jdaggett@2118 4567
jdaggett@8356 4568 <dd>Enables display of swash glyphs (<a href="#font-specific"><em>font
jdaggett@8356 4569 specific</em></a>, OpenType feature: <span class=tag>swsh
jdaggett@8356 4570 &lt;feature-index&gt;, cswh &lt;feature-index&gt;</span>).
jdaggett@2118 4571 </dl>
jdaggett@2118 4572
jdaggett@2118 4573 <div class=featex><img alt="swash example" src=swsh.png></div>
jdaggett@2118 4574
jdaggett@2118 4575 <dl>
jdaggett@8225 4576 <dt><dfn id=ornaments
jdaggett@7060 4577 title=ornaments>ornaments(&lt;feature-value-name&gt;)</dfn>
jdaggett@2118 4578
jdaggett@2118 4579 <dd>Enables replacement of default glyphs with ornaments, if provided in
jdaggett@8356 4580 the font (<a href="#font-specific"><em>font specific</em></a>, OpenType
jdaggett@8356 4581 feature: <span class=tag>ornm &lt;feature-index&gt;</span>). Some fonts
jdaggett@8356 4582 may offer ornament glyphs as alternates for a wide collection of
jdaggett@8356 4583 characters; however, displaying arbitrary characters (e.g.,
jdaggett@8356 4584 alphanumerics) as ornaments is poor practice as it distorts the semantics
jdaggett@8356 4585 of the data. Font designers are encouraged to encode all ornaments
jdaggett@8356 4586 (except those explicitly encoded in the Unicode Dingbats blocks, etc.) as
jdaggett@8356 4587 alternates for the bullet character (U+2022) to allow authors to select
jdaggett@8356 4588 the desired glyph using ‘<a href="#ornaments"><code
jdaggett@8356 4589 class=property>ornaments</code></a>’.
jdaggett@2118 4590 </dl>
jdaggett@2118 4591
jdaggett@2118 4592 <div class=featex><img alt="ornaments example" src=ornm.png></div>
jdaggett@2118 4593
jdaggett@2118 4594 <dl>
jdaggett@8225 4595 <dt><dfn id=annotation
jdaggett@7060 4596 title=annotation>annotation(&lt;feature-value-name&gt;)</dfn>
jdaggett@2118 4597
jdaggett@8356 4598 <dd>Enables display of alternate annotation forms (<a
jdaggett@8356 4599 href="#font-specific"><em>font specific</em></a>, OpenType feature: <span
jdaggett@8356 4600 class=tag>nalt &lt;feature-index&gt;</span>).
jdaggett@2118 4601 </dl>
jdaggett@2118 4602
jdaggett@2118 4603 <div class=featex><img alt="alternate annotation form example"
jdaggett@2118 4604 src=nalt.png></div>
jdaggett@2118 4605
jdaggett@2472 4606 <h3 id=font-feature-values><span class=secno>6.9 </span>Defining font
jdaggett@8311 4607 specific alternates: the <dfn id=at-font-feature-values-rule
jdaggett@8311 4608 style="font-weight: inherit; font-style:
jdaggett@8311 4609 inherit"><code>@font-feature-values</code></dfn> rule</h3>
jdaggett@2472 4610
jdaggett@4624 4611 <p>Several of the possible values of ‘<a
jdaggett@4624 4612 href="#propdef-font-variant-alternates"><code
jdaggett@4624 4613 class=property>font-variant-alternates</code></a>’ listed above are
jdaggett@8356 4614 labeled as <a href="#font-specific"><em>font specific</em></a>. For these
jdaggett@8356 4615 features fonts may define not just a single glyph but a set of alternate
jdaggett@8356 4616 glyphs with an index to select a given alternate. Since these are font
jdaggett@8356 4617 family specific, the <a
jdaggett@8311 4618 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8356 4619 rule is used to define named values for these indices for a given family.
jdaggett@8356 4620
jdaggett@8356 4621 <p class=note>See the <a href="#om-fontfeaturevalues">object model
jdaggett@8356 4622 reference section</a> for a description of the interfaces used to modify
jdaggett@8356 4623 these rules via the CSS Object Model.
jdaggett@8356 4624
jdaggett@8356 4625 <div class=example>
jdaggett@8356 4626 <p>In the case of the swash Q in the example shown above, the swash could
jdaggett@8356 4627 be specified using these style rules:</p>
jdaggett@8356 4628
jdaggett@8356 4629 <pre>
jdaggett@7041 4630
jdaggett@2472 4631 @font-feature-values Jupiter Sans {
jdaggett@7041 4632 @swash {
jdaggett@7041 4633 delicate: 1;
jdaggett@7041 4634 flowing: 2;
jdaggett@7041 4635 }
jdaggett@2472 4636 }
jdaggett@2472 4637
jdaggett@2472 4638 h2 { font-family: Jupiter Sans, sans-serif; }
jdaggett@2472 4639
jdaggett@2472 4640 /* show the second swash variant in h2 headings */
jdaggett@2472 4641 h2:first-letter { font-variant-alternates: swash(flowing); }
jdaggett@2472 4642
jdaggett@2479 4643 &lt;h2>Quick&lt;/h2></pre>
jdaggett@2472 4644
jdaggett@8356 4645 <p>When Jupiter Sans is present, the second alternate swash alternate will
jdaggett@8356 4646 be displayed. When not present, no swash character will be shown, since
jdaggett@8356 4647 the specific named value "flowing" is only defined for the Jupiter Sans
jdaggett@8356 4648 family. The @-mark indicates the name of the property value for which a
jdaggett@8356 4649 named value can be used. The name "flowing" is chosen by the author. The
jdaggett@8356 4650 index that represents each alternate is defined within a given font's
jdaggett@8356 4651 data.</p>
jdaggett@8356 4652 </div>
jdaggett@8356 4653
jdaggett@8356 4654 <h4 id=basic-syntax><span class=secno>6.9.1 </span>Basic syntax</h4>
jdaggett@8356 4655
jdaggett@8356 4656 <p>An <a
jdaggett@8356 4657 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8356 4658 rule is composed of a list of font families followed by a block containing
jdaggett@8356 4659 individual <a href="#featurevalueblock"><i
jdaggett@8356 4660 title="feature_value_block">feature value blocks</i></a> that take the
jdaggett@8356 4661 form of @-rules. Each block defines a set of named values for a specific
jdaggett@8356 4662 font feature when a given set of font families is used. Effectively, they
jdaggett@8356 4663 define a mapping of ⟨family, feature, ident⟩ → ⟨values⟩ where
jdaggett@8356 4664 ⟨values⟩ are the numeric indices used for specific features defined
jdaggett@8356 4665 for a given font.
jdaggett@8031 4666
jdaggett@8031 4667 <p>In terms of the grammar, this specification defines the following
jdaggett@8312 4668 productions:
jdaggett@8225 4669
jdaggett@8225 4670 <pre><dfn id=fontfeaturevaluesrule>font_feature_values_rule</dfn>
jdaggett@8225 4671 : <a href="#fontfeaturevaluessym"><i>FONT_FEATURE_VALUES_SYM</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#fontfamilynamelist"><i>font_family_name_list</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
jdaggett@8225 4672 '{' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevalueblock"><i>feature_value_block</i></a>? [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevalueblock"><i>feature_value_block</i></a>? ]* '}' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
jdaggett@8225 4673 ;
jdaggett@8225 4674
jdaggett@8225 4675 <dfn id=fontfamilynamelist>font_family_name_list</dfn>
jdaggett@8225 4676 : <a href="#fontfamilyname"><i>font_family_name</i></a> [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* ',' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#fontfamilyname"><i>font_family_name</i></a> ]*
jdaggett@8225 4677 ;
jdaggett@8225 4678
jdaggett@8225 4679 <dfn id=fontfamilyname>font_family_name</dfn>
jdaggett@8225 4680 : <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>STRING</i></a> | [ <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>IDENT</i></a> [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>IDENT</i></a> ]* ]
jdaggett@8225 4681 ;
jdaggett@8225 4682
jdaggett@8225 4683 <dfn id=featurevalueblock>feature_value_block</dfn>
jdaggett@8225 4684 : <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 4685 '{' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevaluedefinition"><i>feature_value_definition</i></a>? [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* ';' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevaluedefinition"><i>feature_value_definition</i></a>? ]* '}' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
jdaggett@8225 4686 ;
jdaggett@8225 4687
jdaggett@8225 4688 <dfn id=featuretype>feature_type</dfn>:
jdaggett@8225 4689 <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>ATKEYWORD</i></a>
jdaggett@8225 4690 ;
jdaggett@8225 4691
jdaggett@8225 4692 <dfn id=featurevaluedefinition>feature_value_definition</dfn>
jdaggett@8225 4693 : <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>IDENT</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* ':' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>NUMBER</i></a> [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>NUMBER</i></a> ]*
jdaggett@8225 4694 ;
jdaggett@8225 4695 </pre>
jdaggett@8225 4696
jdaggett@8032 4697 <p>The following new token is introduced:
jdaggett@8032 4698
jdaggett@8225 4699 <pre>@{F}{O}{N}{T}{-}{F}{E}{A}{T}{U}{R}{E}{-}{V}{A}{L}{U}{E}{S} {return <dfn id=fontfeaturevaluessym>FONT_FEATURE_VALUES_SYM</dfn>;}
jdaggett@2118 4700 </pre>
jdaggett@2118 4701
jdaggett@8356 4702 <p><a href="#featurevalueblock"><i title="feature_value_block">Feature
jdaggett@8356 4703 value blocks</i></a> are handled as <a
jdaggett@8356 4704 href="http://www.w3.org/TR/CSS2/syndata.html#at-rules">at-rules</a>, they
jdaggett@8356 4705 consist of everything up to the next block or semi-colon, whichever comes
jdaggett@8356 4706 first.
jdaggett@8356 4707
jdaggett@8356 4708 <p>The <a href="#fontfamilynamelist"><i title="font_family_name_list">font
jdaggett@8356 4709 family list</i></a> is a comma-delimited list of <a
jdaggett@8356 4710 href="#fontfamilyname"><i title="font_family_name">font family
jdaggett@8356 4711 names</i></a> that match the definition of <a
jdaggett@8356 4712 href="#family-name-value"><var>&lt;family-name&gt;</var></a> for the <a
jdaggett@8278 4713 href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8356 4714 class=property>font-family</code>’</a> property. This means that only
jdaggett@8356 4715 named font families are allowed, rules that include generic or system
jdaggett@8356 4716 fonts in the list of font families are syntax errors. However, if a user
jdaggett@8356 4717 agent defines a generic font to be a specific named font (e.g. Helvetica),
jdaggett@8356 4718 the settings associated with that family name will be used. If syntax
jdaggett@8356 4719 errors occur within the font family list, the entire rule must be ignored.
jdaggett@8356 4720
jdaggett@8356 4721 <p>Within <a href="#featurevalueblock"><i
jdaggett@8356 4722 title="feature_value_block">feature value blocks</i></a>, the <a
jdaggett@8356 4723 href="#featuretype"><i title="feature_type">feature type</i></a> is
jdaggett@8356 4724 ‘<code class=css>@</code>’ followed by the name of one of the <a
jdaggett@8356 4725 href="#font-specific"><em>font specific</em></a> property values of ‘<a
jdaggett@8356 4726 href="#propdef-font-variant-alternates"><code
jdaggett@8356 4727 class=property>font-variant-alternates</code></a>’ (e.g. <a
jdaggett@8356 4728 href="#swash"><code>@swash</code></a>). The identifiers used within
jdaggett@8356 4729 feature value definitions follow the rules of CSS user identifiers and are
jdaggett@8356 4730 case-sensitive. They are unique only for a given set of font families and
jdaggett@8356 4731 <a href="#featuretype"><i title="feature_type">feature type</i></a>. The
jdaggett@8356 4732 same identifier used with a different <a href="#featuretype"><i
jdaggett@8356 4733 title="feature_type">feature type</i></a> is treated as a separate and
jdaggett@8356 4734 distinct value. If the same identifier is defined mulitple times for a
jdaggett@8356 4735 given <a href="#featuretype"><i title="feature_type">feature type</i></a>
jdaggett@8356 4736 and font family, the last defined value is used. Values associated with a
jdaggett@8356 4737 given identifier are limited to integer values 0 or greater.
jdaggett@8356 4738
jdaggett@8356 4739 <p>When syntax errors occur within a <a href="#featurevaluedefinition"><i
jdaggett@8356 4740 title="feature_value_definition">feature value definition</i></a>, such as
jdaggett@8356 4741 invalid identifiers or values, the entire <a
jdaggett@8356 4742 href="#featurevaluedefinition"><i title="feature_value_definition">feature
jdaggett@8356 4743 value definition</i></a> must be omitted, just as syntax errors in style
jdaggett@8356 4744 declarations are handled. When the <a href="#featuretype"><i
jdaggett@8356 4745 title="feature_type">feature type</i></a> is invalid, the entire
jdaggett@8356 4746 associated <a href="#featurevalueblock"><i
jdaggett@8356 4747 title="feature_value_block">feature value block</i></a> must be ignored.
jdaggett@8356 4748
jdaggett@8356 4749 <div class=example>
jdaggett@8356 4750 <p>Rules that are equivalent given syntax error handling:</p>
jdaggett@8356 4751
jdaggett@8356 4752 <pre>@font-feature-values Bongo {
jdaggett@7679 4753 @swash { ornate: 1; }
jdaggett@7679 4754 annotation { boxed: 4; } /* should be @annotation! */
jdaggett@8031 4755 @swash { double-loops: 1; flowing: -1; } /* negative value */
jdaggett@8031 4756 @ornaments ; /* incomplete definition */
jdaggett@8031 4757 @styleset { double-W: 14; sharp-terminals: 16 1 } /* missing ; */
jdaggett@8356 4758 <a href="http://www.angryalien.com/0504/shiningbunnies.html" style="text-decoration: none; border: none;">redrum</a> /* random editing mistake */
jdaggett@7679 4759 }</pre>
jdaggett@7679 4760
jdaggett@8356 4761 <p>The example above is equivalent to:</p>
jdaggett@8356 4762
jdaggett@8356 4763 <pre>@font-feature-values Bongo {
jdaggett@7679 4764 @swash { ornate: 1; }
jdaggett@8031 4765 @swash { double-loops: 1; }
jdaggett@8031 4766 @styleset { double-W: 14; sharp-terminals: 16 1; }
jdaggett@7679 4767 }</pre>
jdaggett@8356 4768 </div>
jdaggett@7096 4769
jdaggett@8311 4770 <p>If multiple <a
jdaggett@8311 4771 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8356 4772 rules are defined for a given family, the resulting values definitions are
jdaggett@8356 4773 the union of the definitions contained within these rules. This allows a
jdaggett@8356 4774 set of named values to be defined for a given font family globally for a
jdaggett@8356 4775 site and specific additions made per-page.
jdaggett@8356 4776
jdaggett@8356 4777 <div class=example>
jdaggett@8356 4778 <p>Using both site-wide and per-page feature values:</p>
jdaggett@8356 4779
jdaggett@8356 4780 <pre>
jdaggett@2472 4781 site.css:
jdaggett@2472 4782
jdaggett@2472 4783 @font-feature-values Mercury Serif {
jdaggett@7041 4784 @styleset {
jdaggett@7041 4785 stacked-g: 3; /* "two-storey" versions of g, a */
jdaggett@7041 4786 stacked-a: 4;
jdaggett@7041 4787 }
jdaggett@2472 4788 }
jdaggett@2472 4789
jdaggett@2472 4790 page.css:
jdaggett@8277 4791
jdaggett@2472 4792 @font-feature-values Mercury Serif {
jdaggett@7041 4793 @styleset {
jdaggett@7041 4794 geometric-m: 7; /* alternate version of m */
jdaggett@7041 4795 }
jdaggett@2472 4796 }
jdaggett@8277 4797
jdaggett@2472 4798 body {
jdaggett@2472 4799 font-family: Mercury Serif, serif;
jdaggett@2472 4800
jdaggett@2472 4801 /* enable both the use of stacked g and alternate m */
jdaggett@2472 4802 font-variant-alternates: styleset(stacked-g, geometric-m);
jdaggett@2472 4803 }</pre>
jdaggett@8356 4804 </div>
jdaggett@8356 4805
jdaggett@8356 4806 <div class=example>
jdaggett@8356 4807 <p>Using a commonly named value allows authors to use a single style rule
jdaggett@8356 4808 to cover a set of fonts for which the underlying selector is different
jdaggett@8356 4809 for each font. If either font in the example below is found, a circled
jdaggett@8356 4810 number glyph will be used:</p>
jdaggett@8356 4811
jdaggett@8356 4812 <pre>@font-feature-values Taisho Gothic {
jdaggett@7041 4813 @annotation { boxed: 1; circled: 4; }
jdaggett@2118 4814 }
jdaggett@2118 4815
jdaggett@2118 4816 @font-feature-values Otaru Kisa {
jdaggett@7041 4817 @annotation { circled: 1; black-boxed: 3; }
jdaggett@2118 4818 }
jdaggett@2118 4819
jdaggett@2118 4820 h3.title {
jdaggett@2118 4821 /* circled form defined for both fonts */
jdaggett@2118 4822 font-family: Taisho Gothic, Otaru Kisa;
jdaggett@2118 4823 font-variant: annotation(circled);
jdaggett@2118 4824 }</pre>
jdaggett@8356 4825 </div>
jdaggett@8356 4826
jdaggett@8356 4827 <h4 id=multi-valued-feature-value-definitions><span class=secno>6.9.2
jdaggett@8356 4828 </span>Multi-valued feature value definitions</h4>
jdaggett@8356 4829
jdaggett@8356 4830 <p>Most <a href="#font-specific"><em>font specific</em></a> ‘<a
jdaggett@8356 4831 href="#propdef-font-variant-alternates"><code
jdaggett@8356 4832 class=property>font-variant-alternates</code></a>’ property values take
jdaggett@8356 4833 a single value (e.g. ‘<a href="#swash"><code
jdaggett@8356 4834 class=property>swash</code></a>’). The ‘<a
jdaggett@8356 4835 href="#character-variant"><code
jdaggett@8356 4836 class=property>character-variant</code></a>’ property value allows two
jdaggett@8356 4837 values and ‘<a href="#styleset"><code
jdaggett@8356 4838 class=property>styleset</code></a>’ allows an unlimited number.
jdaggett@3571 4839
jdaggett@3571 4840 <p>For the styleset property value, multiple values indicate the style sets
jdaggett@7095 4841 to be enabled. Values between 1 and 99 enable OpenType features <span
jdaggett@7095 4842 class=tag>ss01</span> through <span class=tag>ss99</span>. However, the
jdaggett@7095 4843 OpenType standard only officially defines <span class=tag>ss01</span>
jdaggett@8356 4844 through <span class=tag>ss20</span>. For OpenType fonts, values greater
jdaggett@8356 4845 than 99 or equal to 0 do not generate a syntax error when parsed but
jdaggett@8356 4846 enable no OpenType features.
jdaggett@2472 4847
jdaggett@2472 4848 <pre>@font-feature-values Mars Serif {
jdaggett@8277 4849 @styleset {
jdaggett@7041 4850 alt-g: 1; /* implies ss01 = 1 */
jdaggett@7041 4851 curly-quotes: 3; /* implies ss03 = 1 */
jdaggett@7041 4852 code: 4 5; /* implies ss04 = 1, ss05 = 1 */
jdaggett@7041 4853 }
jdaggett@7041 4854
jdaggett@7041 4855 @styleset {
jdaggett@7095 4856 dumb: 125; /* &gt;99, ignored */
jdaggett@7041 4857 }
jdaggett@7041 4858
jdaggett@7041 4859 @swash {
jdaggett@7041 4860 swishy: 3 5; /* more than 1 value for swash, syntax error */
jdaggett@7041 4861 }
jdaggett@2472 4862 }
jdaggett@2472 4863
jdaggett@2472 4864 p.codeblock {
jdaggett@2472 4865 /* implies ss03 = 1, ss04 = 1, ss05 = 1 */
jdaggett@2472 4866 font-variant-alternates: styleset(curly-quotes, code);
jdaggett@2472 4867 }</pre>
jdaggett@2472 4868
jdaggett@2472 4869 <p>For character-variant, a single value between 1 and 99 indicates the
jdaggett@6436 4870 enabling of OpenType feature <span class=tag>cv01</span> through <span
jdaggett@7095 4871 class=tag>cv99</span>. For OpenType fonts, values greater than 99 or equal
jdaggett@8356 4872 to 0 are ignored but do not generate a syntax error when parsed but enable
jdaggett@8356 4873 no OpenType features. When two values are listed, the first value
jdaggett@8356 4874 indicates the feature used and the second the value passed for that
jdaggett@8356 4875 feature. If more than two values are assigned to a given name, a syntax
jdaggett@8356 4876 error occurs and the entire <a href="#featurevaluedefinition"><i
jdaggett@8356 4877 title="feature_value_definition">feature value definition</i></a> is
jdaggett@8356 4878 ignored.
jdaggett@2472 4879
jdaggett@2472 4880 <pre>@font-feature-values MM Greek {
jdaggett@7041 4881 @character-variant { alpha-2: 1 2; } /* implies cv01 = 2 */
jdaggett@7041 4882 @character-variant { beta-3: 2 3; } /* implies cv02 = 3 */
jdaggett@8356 4883 @character-variant { epsilon: 5 3 6; } /* more than 2 values, syntax error, definition ignored */
jdaggett@7041 4884 @character-variant { gamma: 12; } /* implies cv12 = 1 */
jdaggett@7041 4885 @character-variant { zeta: 20 3; } /* implies cv20 = 3 */
jdaggett@7041 4886 @character-variant { zeta-2: 20 2; } /* implies cv20 = 2 */
jdaggett@7041 4887 @character-variant { silly: 105; } /* &gt;99, ignored */
jdaggett@7041 4888 @character-variant { dumb: 323 3; } /* &gt;99, ignored */
jdaggett@2472 4889 }
jdaggett@2472 4890
jdaggett@2472 4891 #title {
jdaggett@2472 4892 /* use the third alternate beta, first alternate gamma */
jdaggett@2472 4893 font-variant-alternates: character-variant(beta-3, gamma);
jdaggett@3571 4894 }
jdaggett@3571 4895
jdaggett@3571 4896 p {
jdaggett@3571 4897 /* zeta-2 follows zeta, implies cv20 = 2 */
jdaggett@3571 4898 font-variant-alternates: character-variant(zeta, zeta-2);
jdaggett@3571 4899 }
jdaggett@3571 4900
jdaggett@3571 4901 .special {
jdaggett@3571 4902 /* zeta follows zeta-2, implies cv20 = 3 */
jdaggett@3571 4903 font-variant-alternates: character-variant(zeta-2, zeta);
jdaggett@2472 4904 }</pre>
jdaggett@2472 4905
jdaggett@2472 4906 <div class=figure><img alt="Matching text on Byzantine seals using
jdaggett@2472 4907 character variants" src=byzantineseal.png>
jdaggett@2472 4908 <p class=caption>Byzantine seal text displayed with character variants
jdaggett@2472 4909 </div>
jdaggett@2472 4910
jdaggett@2472 4911 <div class=example>
jdaggett@2472 4912 <p>In the figure above, the text in red is rendered using a font
jdaggett@2472 4913 containing character variants that mimic the character forms found on a
jdaggett@2472 4914 Byzantine seal from the 8th century A.D. Two lines below is the same text
jdaggett@2472 4915 displayed in a font without variants. Note the two variants for U and N
jdaggett@2509 4916 used on the seal.</p>
jdaggett@2472 4917
jdaggett@2472 4918 <pre>@font-feature-values Athena Ruby {
jdaggett@7041 4919 @character-variant {
jdaggett@7041 4920 leo-B: 2 1;
jdaggett@7041 4921 leo-M: 13 3;
jdaggett@7041 4922 leo-alt-N: 14 1;
jdaggett@7041 4923 leo-N: 14 2;
jdaggett@8277 4924 leo-T: 20 1;
jdaggett@7041 4925 leo-U: 21 2;
jdaggett@7041 4926 leo-alt-U: 21 4;
jdaggett@7041 4927 }
jdaggett@2472 4928 }
jdaggett@2472 4929
jdaggett@2472 4930 p {
jdaggett@6653 4931 font-variant: discretionary-ligatures,
jdaggett@6653 4932 character-variant(leo-B, leo-M, leo-N, leo-T, leo-U);
jdaggett@2472 4933 }
jdaggett@2472 4934
jdaggett@8277 4935 span.alt-N {
jdaggett@2472 4936 font-variant-alternates: character-variant(leo-alt-N);
jdaggett@2472 4937 }
jdaggett@2472 4938
jdaggett@2472 4939 span.alt-U {
jdaggett@2472 4940 font-variant-alternates: character-variant(leo-alt-U);
jdaggett@2472 4941 }
jdaggett@2472 4942
jdaggett@2472 4943 &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 4944
jdaggett@8277 4945 &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 4946 </pre>
jdaggett@2118 4947 </div>
jdaggett@2118 4948
jdaggett@2118 4949 <h3 id=font-variant-east-asian-prop><span class=secno>6.10 </span>East
jdaggett@2118 4950 Asian text rendering: the <a
jdaggett@1662 4951 href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
jdaggett@1662 4952 property</h3>
jdaggett@1662 4953
jdaggett@5809 4954 <table class=propdef id=namefont-variant-east-asianvaluenormal-l>
jdaggett@1662 4955 <tbody>
jdaggett@1662 4956 <tr>
jdaggett@1662 4957 <td>Name:
jdaggett@1662 4958
jdaggett@1662 4959 <td><dfn
jdaggett@1662 4960 id=propdef-font-variant-east-asian>font-variant-east-asian</dfn>
jdaggett@1662 4961
jdaggett@1662 4962 <tr>
jdaggett@1662 4963 <td>Value:
jdaggett@1662 4964
jdaggett@8278 4965 <td><a href="#font-variant-east-asian-normal-value"
jdaggett@8278 4966 title="normal!!font-variant-east-asian">normal</a> | [ <a
jdaggett@8225 4967 href="#east-asian-variant-values"><var>&lt;east-asian-variant-values&gt;</var></a>
jdaggett@8225 4968 || <a
jdaggett@8225 4969 href="#east-asian-width-values"><var>&lt;east-asian-width-values&gt;</var></a>
jdaggett@8225 4970 || <a href="#ruby">ruby</a> ]
jdaggett@1662 4971
jdaggett@1662 4972 <tr>
jdaggett@1662 4973 <td>Initial:
jdaggett@1662 4974
jdaggett@1662 4975 <td>normal
jdaggett@1662 4976
jdaggett@1662 4977 <tr>
jdaggett@1662 4978 <td>Applies to:
jdaggett@1662 4979
jdaggett@1662 4980 <td>all elements
jdaggett@1662 4981
jdaggett@1662 4982 <tr>
jdaggett@1662 4983 <td>Inherited:
jdaggett@1662 4984
jdaggett@1662 4985 <td>yes
jdaggett@1662 4986
jdaggett@1662 4987 <tr>
jdaggett@1662 4988 <td>Percentages:
jdaggett@1662 4989
jdaggett@1662 4990 <td>N/A
jdaggett@1662 4991
jdaggett@1662 4992 <tr>
jdaggett@1662 4993 <td>Media:
jdaggett@1662 4994
jdaggett@1662 4995 <td>visual
jdaggett@1662 4996
jdaggett@1662 4997 <tr>
jdaggett@1662 4998 <td>Computed value:
jdaggett@1662 4999
jdaggett@1662 5000 <td>as specified
jdaggett@7377 5001
jdaggett@7377 5002 <tr>
jdaggett@7377 5003 <td>Animatable:
jdaggett@7377 5004
jdaggett@7377 5005 <td>no
jdaggett@1662 5006 </table>
jdaggett@1662 5007
jdaggett@6693 5008 <p>Allows control of glyph substitution and sizing in East Asian text.
jdaggett@1662 5009
jdaggett@1662 5010 <pre
jdaggett@8225 5011 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 5012
jdaggett@1662 5013 <pre
jdaggett@8225 5014 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 5015
jdaggett@1732 5016 <p>Individual values have the following meanings:
jdaggett@1662 5017
jdaggett@1662 5018 <dl>
jdaggett@8278 5019 <dt><dfn id=font-variant-east-asian-normal-value
jdaggett@8278 5020 title="normal!!font-variant-east-asian">normal</dfn>
jdaggett@5809 5021
jdaggett@5809 5022 <dd>None of the features listed below are enabled.
jdaggett@5809 5023
jdaggett@1662 5024 <dt><dfn id=jis78>jis78</dfn>
jdaggett@1662 5025
jdaggett@6436 5026 <dd>Enables rendering of JIS78 forms (OpenType feature: <span
jdaggett@6436 5027 class=tag>jp78</span>).
jdaggett@1662 5028 </dl>
jdaggett@1662 5029
jdaggett@1662 5030 <div class=featex><img alt="JIS78 form example" src=jp78.png></div>
jdaggett@1662 5031
jdaggett@1662 5032 <dl>
jdaggett@1662 5033 <dt><dfn id=jis83>jis83</dfn>
jdaggett@1662 5034
jdaggett@6436 5035 <dd>Enables rendering of JIS83 forms (OpenType feature: <span
jdaggett@6436 5036 class=tag>jp83</span>).
jdaggett@1662 5037
jdaggett@1662 5038 <dt><dfn id=jis90>jis90</dfn>
jdaggett@1662 5039
jdaggett@6436 5040 <dd>Enables rendering of JIS90 forms (OpenType feature: <span
jdaggett@6436 5041 class=tag>jp90</span>).
jdaggett@1662 5042
jdaggett@1662 5043 <dt><dfn id=jis04>jis04</dfn>
jdaggett@1662 5044
jdaggett@6436 5045 <dd>Enables rendering of JIS2004 forms (OpenType feature: <span
jdaggett@6436 5046 class=tag>jp04</span>).
jdaggett@6693 5047 <p>The various JIS variants reflect the glyph forms defined in different
jdaggett@6693 5048 Japanese national standards. Fonts generally include glyphs defined by
jdaggett@6693 5049 the most recent national standard but it's sometimes necessary to use
jdaggett@6693 5050 older variants, to match signage for example.</p>
jdaggett@1662 5051
jdaggett@2504 5052 <dt><dfn id=simplified>simplified</dfn>
jdaggett@2504 5053
jdaggett@6436 5054 <dd>Enables rendering of simplified forms (OpenType feature: <span
jdaggett@6436 5055 class=tag>smpl</span>).
jdaggett@2504 5056
jdaggett@2504 5057 <dt><dfn id=traditional>traditional</dfn>
jdaggett@2504 5058
jdaggett@6436 5059 <dd>Enables rendering of traditional forms (OpenType feature: <span
jdaggett@6436 5060 class=tag>trad</span>).
jdaggett@1662 5061 </dl>
jdaggett@1662 5062
jdaggett@8312 5063 <p>The ‘<a href="#simplified"><code
jdaggett@8312 5064 class=property>simplified</code></a>’ and ‘<a
jdaggett@8312 5065 href="#traditional"><code class=property>traditional</code></a>’ values
jdaggett@8312 5066 allow control over the glyph forms for characters which have been
jdaggett@8312 5067 simplified over time but for which the older, traditional form is still
jdaggett@8312 5068 used in some contexts. The exact set of characters and glyph forms will
jdaggett@8312 5069 vary to some degree by context for which a given font was designed.
jdaggett@8312 5070
jdaggett@1662 5071 <div class=featex><img alt="tradtional form example" src=trad.png></div>
jdaggett@1662 5072
jdaggett@1662 5073 <dl>
jdaggett@1662 5074 <dt><dfn id=full-width>full-width</dfn>
jdaggett@1662 5075
jdaggett@6436 5076 <dd>Enables rendering of full-width variants (OpenType feature: <span
jdaggett@6436 5077 class=tag>fwid</span>).
jdaggett@1662 5078
jdaggett@1662 5079 <dt><dfn id=proportional-width>proportional-width</dfn>
jdaggett@1662 5080
jdaggett@1662 5081 <dd>Enables rendering of proportionally-spaced variants (OpenType feature:
jdaggett@6436 5082 <span class=tag>pwid</span>).
jdaggett@1662 5083 </dl>
jdaggett@1662 5084
jdaggett@1662 5085 <div class=featex><img alt="proportionally spaced Japanese example"
jdaggett@1662 5086 src=pwid.png></div>
jdaggett@1662 5087
jdaggett@3638 5088 <dl>
jdaggett@3638 5089 <dt><dfn id=ruby>ruby</dfn>
jdaggett@3638 5090
jdaggett@6436 5091 <dd>Enables display of ruby variant glyphs (OpenType feature: <span
jdaggett@6436 5092 class=tag>ruby</span>). Since ruby text is generally smaller than the
jdaggett@3638 5093 associated body text, font designers can design special glyphs for use
jdaggett@3638 5094 with ruby that are more readable than scaled down versions of the default
jdaggett@3638 5095 glyphs. Only glyph selection is affected, there is no associated font
jdaggett@3638 5096 scaling or other change that affects line layout. The red ruby text below
jdaggett@3638 5097 is shown with default glyphs (top) and with ruby variant glyphs (bottom).
jdaggett@3638 5098 Note the slight difference in stroke thickness.
jdaggett@3638 5099 </dl>
jdaggett@3638 5100
jdaggett@3638 5101 <div class=featex><img alt="ruby variant example" src=rubyshinkansen.png></div>
jdaggett@3638 5102
jdaggett@2118 5103 <h3 id=font-variant-prop><span class=secno>6.11 </span>Overall shorthand
jdaggett@1856 5104 for font rendering: the <a href="#propdef-font-variant">font-variant</a>
jdaggett@1662 5105 property</h3>
jdaggett@1662 5106
jdaggett@6436 5107 <table class=propdef id=namefont-variantvaluenormal-none-ltcommo>
jdaggett@1662 5108 <tbody>
jdaggett@1662 5109 <tr>
jdaggett@1662 5110 <td>Name:
jdaggett@1662 5111
jdaggett@8278 5112 <td><dfn id=propdef-font-variant
jdaggett@8278 5113 title="font-variant!!property">font-variant</dfn>
jdaggett@1662 5114
jdaggett@1662 5115 <tr>
jdaggett@1662 5116 <td>Value:
jdaggett@1662 5117
jdaggett@8278 5118 <td><a href="#font-variant-normal-value"
jdaggett@8278 5119 title="normal!!font-variant">normal</a> | <a
jdaggett@8278 5120 href="#font-variant-none-value" title="none!!font-variant">none</a> | [
jdaggett@8278 5121 <a href="#common-lig-values"><var>&lt;common-lig-values&gt;</var></a>
jdaggett@8278 5122 || <a
jdaggett@8225 5123 href="#discretionary-lig-values"><var>&lt;discretionary-lig-values&gt;</var></a>
jdaggett@8225 5124 || <a
jdaggett@8225 5125 href="#historical-lig-values"><var>&lt;historical-lig-values&gt;</var></a>
jdaggett@8225 5126 || <a
jdaggett@8225 5127 href="#contextual-alt-values"><var>&lt;contextual-alt-values&gt;</var></a>
jdaggett@8225 5128 || <a href="#stylistic"><var
jdaggett@8225 5129 title=stylistic>stylistic(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 5130 href="#historical-forms"><var>historical-forms</var></a> || <a
jdaggett@8225 5131 href="#styleset"><var
jdaggett@8225 5132 title=styleset>styleset(&lt;feature-value-name&gt; #)</var></a> || <a
jdaggett@8225 5133 href="#character-variant"><var
jdaggett@8225 5134 title=character-variant>character-variant(&lt;feature-value-name&gt;
jdaggett@8225 5135 #)</var></a> || <a href="#swash"><var
jdaggett@8225 5136 title=swash>swash(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 5137 href="#ornaments"><var
jdaggett@8225 5138 title=ornaments>ornaments(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 5139 href="#annotation"><var
jdaggett@8225 5140 title=annotation>annotation(&lt;feature-value-name&gt;)</var></a> || [
jdaggett@8225 5141 <a href="#small-caps"><i>small-caps</i></a> | <a
jdaggett@8225 5142 href="#all-small-caps"><i>all-small-caps</i></a> | <a
jdaggett@8225 5143 href="#petite-caps"><i>petite-caps</i></a> | <a
jdaggett@8225 5144 href="#all-petite-caps"><i>all-petite-caps</i></a> | <a
jdaggett@8225 5145 href="#unicase"><i>unicase</i></a> | <a
jdaggett@8225 5146 href="#titling-caps"><i>titling-caps</i></a> ] || <a
jdaggett@8225 5147 href="#numeric-figure-values"><var>&lt;numeric-figure-values&gt;</var></a>
jdaggett@8225 5148 || <a
jdaggett@8225 5149 href="#numeric-spacing-values"><var>&lt;numeric-spacing-values&gt;</var></a>
jdaggett@8225 5150 || <a
jdaggett@8225 5151 href="#numeric-fraction-values"><var>&lt;numeric-fraction-values&gt;</var></a>
jdaggett@8225 5152 || <a href="#ordinal"><i>ordinal</i></a> || <a
jdaggett@8225 5153 href="#slashed-zero"><i>slashed-zero</i></a> || <a
jdaggett@8225 5154 href="#east-asian-variant-values"><var>&lt;east-asian-variant-values&gt;</var></a>
jdaggett@8225 5155 || <a
jdaggett@8225 5156 href="#east-asian-width-values"><var>&lt;east-asian-width-values&gt;</var></a>
jdaggett@8225 5157 || <a href="#ruby"><i>ruby</i></a> ]
jdaggett@1662 5158
jdaggett@1662 5159 <tr>
jdaggett@1662 5160 <td>Initial:
jdaggett@1662 5161
jdaggett@1662 5162 <td>normal
jdaggett@1662 5163
jdaggett@1662 5164 <tr>
jdaggett@1662 5165 <td>Applies to:
jdaggett@1662 5166
jdaggett@1662 5167 <td>all elements
jdaggett@1662 5168
jdaggett@1662 5169 <tr>
jdaggett@1662 5170 <td>Inherited:
jdaggett@1662 5171
jdaggett@1662 5172 <td>yes
jdaggett@1662 5173
jdaggett@1662 5174 <tr>
jdaggett@1662 5175 <td>Percentages:
jdaggett@1662 5176
jdaggett@7377 5177 <td>see individual properties
jdaggett@1662 5178
jdaggett@1662 5179 <tr>
jdaggett@1662 5180 <td>Media:
jdaggett@1662 5181
jdaggett@1662 5182 <td>visual
jdaggett@1662 5183
jdaggett@1662 5184 <tr>
jdaggett@1662 5185 <td>Computed value:
jdaggett@1662 5186
jdaggett@7377 5187 <td>see individual properties
jdaggett@7377 5188
jdaggett@7377 5189 <tr>
jdaggett@7377 5190 <td>Animatable:
jdaggett@7377 5191
jdaggett@7377 5192 <td>see individual properties
jdaggett@1662 5193 </table>
jdaggett@1662 5194
jdaggett@8313 5195 <p>The <a href="#propdef-font-variant"
jdaggett@8313 5196 title="font-variant!!property">‘<code
jdaggett@8313 5197 class=property>font-variant</code>’</a> property is a shorthand for all
jdaggett@8313 5198 font-variant subproperties. The value <dfn id=font-variant-normal-value
jdaggett@8313 5199 title="normal!!font-variant">‘<code
jdaggett@8313 5200 class=property>normal</code>’</dfn> resets all subproperties of <a
jdaggett@8313 5201 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8313 5202 class=property>font-variant</code>’</a> to their inital value. The <dfn
jdaggett@8313 5203 id=font-variant-none-value title="none!!font-variant">‘<code
jdaggett@8313 5204 class=property>none</code>’</dfn> value sets ‘<a
jdaggett@8313 5205 href="#propdef-font-variant-ligatures"><code
jdaggett@8278 5206 class=property>font-variant-ligatures</code></a>’ to ‘<code
jdaggett@8278 5207 class=property>none</code>’ and resets all other font feature properties
jdaggett@8278 5208 to their initial value. Like other shorthands, using <a
jdaggett@8278 5209 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8313 5210 class=property>font-variant</code>’</a> resets unspecified <a
jdaggett@8313 5211 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8313 5212 class=property>font-variant</code>’</a> subproperties to their initial
jdaggett@8313 5213 values. It does not reset the values of either ‘<a
jdaggett@8313 5214 href="#propdef-font-language-override"><code
jdaggett@8279 5215 class=property>font-language-override</code></a>’ or <a
jdaggett@8279 5216 href="#propdef-font-feature-settings"
jdaggett@8279 5217 title="font-feature-settings!!property">‘<code
jdaggett@8279 5218 class=property>font-feature-settings</code>’</a>.
jdaggett@1662 5219
jdaggett@2118 5220 <h3 id=font-feature-settings-prop><span class=secno>6.12 </span>Low-level
jdaggett@2509 5221 font feature settings control: the <a
jdaggett@1662 5222 href="#propdef-font-feature-settings">font-feature-settings</a> property</h3>
jdaggett@1662 5223
jdaggett@4624 5224 <table class=propdef id=namefont-feature-settingsvaluenormal-ltf>
jdaggett@1662 5225 <tbody>
jdaggett@1662 5226 <tr>
jdaggett@1662 5227 <td>Name:
jdaggett@1662 5228
jdaggett@8279 5229 <td><dfn id=propdef-font-feature-settings
jdaggett@8279 5230 title="font-feature-settings!!property">font-feature-settings</dfn>
jdaggett@1662 5231
jdaggett@1662 5232 <tr>
jdaggett@1662 5233 <td>Value:
jdaggett@1662 5234
jdaggett@8278 5235 <td><a href="#font-feature-settings-normal-value"
jdaggett@8278 5236 title="normal!!font-feature-settings">normal</a> | <a
jdaggett@8225 5237 href="#feature-tag-value"><var>&lt;feature-tag-value&gt;</var></a> #
jdaggett@1662 5238
jdaggett@1662 5239 <tr>
jdaggett@1662 5240 <td>Initial:
jdaggett@1662 5241
jdaggett@1662 5242 <td>normal
jdaggett@1662 5243
jdaggett@1662 5244 <tr>
jdaggett@1662 5245 <td>Applies to:
jdaggett@1662 5246
jdaggett@1662 5247 <td>all elements
jdaggett@1662 5248
jdaggett@1662 5249 <tr>
jdaggett@1662 5250 <td>Inherited:
jdaggett@1662 5251
jdaggett@1662 5252 <td>yes
jdaggett@1662 5253
jdaggett@1662 5254 <tr>
jdaggett@1662 5255 <td>Percentages:
jdaggett@1662 5256
jdaggett@1662 5257 <td>N/A
jdaggett@1662 5258
jdaggett@1662 5259 <tr>
jdaggett@1662 5260 <td>Media:
jdaggett@1662 5261
jdaggett@1662 5262 <td>visual
jdaggett@1662 5263
jdaggett@1662 5264 <tr>
jdaggett@1662 5265 <td>Computed value:
jdaggett@1662 5266
jdaggett@1662 5267 <td>as specified
jdaggett@7377 5268
jdaggett@7377 5269 <tr>
jdaggett@7377 5270 <td>Animatable:
jdaggett@7377 5271
jdaggett@7377 5272 <td>no
jdaggett@1662 5273 </table>
jdaggett@2474 5274
jdaggett@2474 5275 <p>This property provides low-level control over OpenType font features. It
jdaggett@2474 5276 is intended as a way of providing access to font features that are not
jdaggett@8312 5277 widely used but are needed for a particular use case.
jdaggett@8312 5278
jdaggett@8312 5279 <p>Authors should generally use <a href="#propdef-font-variant"
jdaggett@8312 5280 title="font-variant!!property">‘<code
jdaggett@8312 5281 class=property>font-variant</code>’</a> and its related subproperties
jdaggett@8312 5282 whenever possible and only use this property for special cases where its
jdaggett@8312 5283 use is the only way of accessing a particular infrequently used font
jdaggett@8312 5284 feature.
jdaggett@8312 5285
jdaggett@8312 5286 <pre>/* enable small caps and use second swash alternate */
jdaggett@8312 5287 font-feature-settings: "smcp", "swsh" 2;</pre>
jdaggett@8312 5288
jdaggett@8312 5289 <p>A value of <dfn id=font-feature-settings-normal-value
jdaggett@8278 5290 title="normal!!font-feature-settings">‘<code
jdaggett@8278 5291 class=property>normal</code>’</dfn> means that no change in glyph
jdaggett@8278 5292 selection or positioning occurs due to this property.
jdaggett@2474 5293
jdaggett@2509 5294 <p>Feature tag values have the following syntax:
jdaggett@2474 5295
jdaggett@2474 5296 <pre
jdaggett@8225 5297 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 5298
jdaggett@5532 5299 <p>The &lt;string&gt; is a case-sensitive OpenType feature tag. As
jdaggett@5532 5300 specified in the OpenType specification, feature tags contain four ASCII
jdaggett@5532 5301 characters. Tag strings longer or shorter than four characters, or
jdaggett@5596 5302 containing characters outside the U+20–7E codepoint range are invalid.
jdaggett@8312 5303 Feature tags need only match a feature tag defined in the font, so they
jdaggett@8312 5304 are not limited to explicitly registered OpenType features. Fonts defining
jdaggett@8312 5305 custom feature tags should follow the <a
jdaggett@2474 5306 href="http://www.microsoft.com/typography/otspec/featuretags.htm">tag name
jdaggett@2474 5307 rules</a> defined in the OpenType specification <a
jdaggett@1662 5308 href="#OPENTYPE-FEATURES"
jdaggett@2474 5309 rel=biblioentry>[OPENTYPE-FEATURES]<!--{{!OPENTYPE-FEATURES}}--></a>.
jdaggett@2474 5310 Feature tags not present in the font are ignored; a user agent must not
jdaggett@2474 5311 attempt to synthesize fallback behavior based on these feature tags.
jdaggett@2474 5312
jdaggett@6436 5313 <p>This means that explicitly disabling the <span class=tag>kern</span>
jdaggett@6436 5314 feature will not affect the application of kerning data found in the
jdaggett@6436 5315 ‘<code class=property>kern</code>’ table (as opposed to kerning data
jdaggett@6436 5316 associated with the <span class=tag>kern</span> feature in the ‘<code
jdaggett@5946 5317 class=property>GPOS</code>’ table). Authors should use the ‘<a
jdaggett@5946 5318 href="#propdef-font-kerning"><code
jdaggett@5946 5319 class=property>font-kerning</code></a>’ property to explictly enable or
jdaggett@5946 5320 disable kerning since this property affects both types of kerning.
jdaggett@5946 5321
jdaggett@2509 5322 <p>If present, a value indicates an index used for glyph selection. An
jdaggett@2509 5323 &lt;integer&gt; value must be 0 or greater. A value of 0 indicates that
jdaggett@2509 5324 the feature is disabled. For boolean features, a value of 1 enables the
jdaggett@2509 5325 feature. For non-boolean features, a value of 1 or greater enables the
jdaggett@2509 5326 feature and indicates the feature selection index. A value of ‘<code
jdaggett@2509 5327 class=property>on</code>’ is synonymous with 1 and ‘<code
jdaggett@2509 5328 class=property>off</code>’ is synonymous with 0. If the value is
jdaggett@2509 5329 omitted, a value of 1 is assumed.
jdaggett@2474 5330
jdaggett@2474 5331 <pre>
jdaggett@2509 5332 font-feature-settings: "dlig" 1; /* dlig=1 enable discretionary ligatures */
jdaggett@2509 5333 font-feature-settings: "smcp" on; /* smcp=1 enable small caps */
jdaggett@2515 5334 font-feature-settings: 'c2sc'; /* c2sc=1 enable caps to small caps */
jdaggett@2509 5335 font-feature-settings: "liga" off; /* liga=0 no common ligatures */
jdaggett@2515 5336 font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms */
jdaggett@5530 5337 font-feature-settings: "tnum" "hist"; /* invalid, need a comma-delimited list */
jdaggett@5530 5338 font-feature-settings: "palin" off; /* good idea but invalid tagname */
jdaggett@2509 5339 font-feature-settings: "PKRN"; /* PKRN=1 enable custom feature */
jdaggett@5530 5340 font-feature-settings: dlig; /* invalid, tag must be a string */
jdaggett@2474 5341 </pre>
jdaggett@1662 5342
jdaggett@8272 5343 <p>When values greater than the range supported by the font are specified,
jdaggett@8272 5344 the behavior is explicitly undefined. For boolean features, in general
jdaggett@8272 5345 these will enable the feature. For non-boolean features, out of range
jdaggett@8272 5346 values will in general be equivalent to a 0 value. However, in both cases
jdaggett@8272 5347 the exact behavior will depend upon the way the font is designed
jdaggett@8272 5348 (specifically, which type of lookup is used to define the feature).
jdaggett@8272 5349
jdaggett@2474 5350 <p>Although specifically defined for OpenType feature tags, feature tags
jdaggett@2474 5351 for other modern font formats that support font features may be added in
jdaggett@5530 5352 the future. Where possible, features defined for other font formats should
jdaggett@5530 5353 attempt to follow the pattern of registered OpenType tags.
jdaggett@2509 5354
jdaggett@1662 5355 <div class=example>
jdaggett@1662 5356 <p>The Japanese text below will be rendered with half-width kana
jdaggett@1662 5357 characters:</p>
jdaggett@1662 5358
jdaggett@1662 5359 <pre lang=ja>
jdaggett@2509 5360 body { font-feature-settings: "hwid"; /* Half-width OpenType feature */ }
jdaggett@1662 5361
jdaggett@1662 5362 &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 5363 </pre>
jdaggett@1662 5364 </div>
jdaggett@1662 5365
jdaggett@2118 5366 <h3 id=font-language-override-prop><span class=secno>6.13 </span>Font
jdaggett@1732 5367 language override: the <a
jdaggett@1732 5368 href="#propdef-font-language-override">font-language-override</a> property</h3>
jdaggett@1732 5369
jdaggett@5809 5370 <table class=propdef id=namefont-language-overridevaluenormal-lt>
jdaggett@1662 5371 <tbody>
jdaggett@1662 5372 <tr>
jdaggett@1662 5373 <td>Name:
jdaggett@1662 5374
jdaggett@1732 5375 <td><dfn id=propdef-font-language-override>font-language-override</dfn>
jdaggett@1662 5376
jdaggett@1662 5377 <tr>
jdaggett@1662 5378 <td>Value:
jdaggett@1662 5379
jdaggett@8278 5380 <td><a href="#font-language-override-normal-value"
jdaggett@8278 5381 title="normal!!font-language-override">normal</a> | <a
jdaggett@8278 5382 href="#font-language-override-string-value"><var>&lt;string&gt;</var></a>
jdaggett@1662 5383
jdaggett@1662 5384 <tr>
jdaggett@1662 5385 <td>Initial:
jdaggett@1662 5386
jdaggett@8278 5387 <td><a href="#font-language-override-normal-value"
jdaggett@8278 5388 title="normal!!font-language-override">normal</a>
jdaggett@1662 5389
jdaggett@1662 5390 <tr>
jdaggett@1662 5391 <td>Applies to:
jdaggett@1662 5392
jdaggett@1662 5393 <td>all elements
jdaggett@1662 5394
jdaggett@1662 5395 <tr>
jdaggett@1662 5396 <td>Inherited:
jdaggett@1662 5397
jdaggett@1662 5398 <td>yes
jdaggett@1662 5399
jdaggett@1662 5400 <tr>
jdaggett@1662 5401 <td>Percentages:
jdaggett@1662 5402
jdaggett@1662 5403 <td>N/A
jdaggett@1662 5404
jdaggett@1662 5405 <tr>
jdaggett@1662 5406 <td>Media:
jdaggett@1662 5407
jdaggett@1662 5408 <td>visual
jdaggett@1662 5409
jdaggett@1662 5410 <tr>
jdaggett@1662 5411 <td>Computed value:
jdaggett@1662 5412
jdaggett@1662 5413 <td>as specified
jdaggett@7377 5414
jdaggett@7377 5415 <tr>
jdaggett@7377 5416 <td>Animatable:
jdaggett@7377 5417
jdaggett@7377 5418 <td>no
jdaggett@1662 5419 </table>
jdaggett@1662 5420
jdaggett@8278 5421 <p>Normally, authors can control the use of language-specific glyph
jdaggett@8278 5422 substitutions and positioning by setting the content language of an
jdaggett@8278 5423 element, as <a href="#language-specific-support">described above</a>:
jdaggett@8278 5424
jdaggett@8278 5425 <pre>&lt;!-- Display text using S'gaw Karen specific features -->
jdaggett@8387 5426 &lt;p lang="ksw">...&lt;/p></pre>
jdaggett@8278 5427
jdaggett@8278 5428 <p>In some cases, authors may need to specify a language system that
jdaggett@8278 5429 differs from the content language, for example due to the need to mimic
jdaggett@8278 5430 another language's typographic traditions. The ‘<a
jdaggett@8278 5431 href="#propdef-font-language-override"><code
jdaggett@8278 5432 class=property>font-language-override</code></a>’ property allows
jdaggett@8278 5433 authors to explicitly specify the language system of the font, overriding
jdaggett@8278 5434 the language system implied by the content language.
jdaggett@8278 5435
jdaggett@8278 5436 <p>Values have the following meanings:
jdaggett@8278 5437
jdaggett@8278 5438 <dl>
jdaggett@8278 5439 <dt><dfn id=font-language-override-normal-value
jdaggett@8278 5440 title="normal!!font-language-override">normal</dfn>
jdaggett@8278 5441
jdaggett@8278 5442 <dd>specifies that when rendering with OpenType fonts, the content
jdaggett@8278 5443 language of the element is used to infer the OpenType language system
jdaggett@8278 5444
jdaggett@8278 5445 <dt><dfn
jdaggett@8278 5446 id=font-language-override-string-value><var>&lt;string&gt;</var></dfn>
jdaggett@8278 5447
jdaggett@8368 5448 <dd>single three-letter case-sensitive OpenType <a
jdaggett@8278 5449 href="http://www.microsoft.com/typography/otspec/languagetags.htm">language
jdaggett@8278 5450 system tag</a>, specifies the OpenType language system to be used instead
jdaggett@8278 5451 of the language system implied by the language of the element
jdaggett@8278 5452 </dl>
jdaggett@8385 5453 <!-- For this level, string represents a single language code, there's no concept of "fallback"
jdaggett@8385 5454 http://www.w3.org/2013/06/07-css-minutes.html#item04 -->
jdaggett@1662 5455
jdaggett@8312 5456 <p>Use of invalid OpenType language system tags must not generate a parse
jdaggett@8312 5457 error but must be ignored when doing glyph selection and placement.
jdaggett@8312 5458
jdaggett@1662 5459 <div class=example>
jdaggett@7179 5460 <p>The <a href="http://www.un.org/en/documents/udhr/index.shtml">Universal
jdaggett@1662 5461 Declaration of Human Rights</a> has been translated into a wide variety
jdaggett@1662 5462 of languages. In Turkish, Article 9 of this document might be marked up
jdaggett@1662 5463 as below:</p>
jdaggett@1662 5464
jdaggett@1662 5465 <pre lang=tr>&lt;body lang="tr">
jdaggett@1662 5466
jdaggett@1662 5467 &lt;h4>Madde 9&lt;/h4>
jdaggett@1662 5468 &lt;p>Hiç kimse keyfi olarak tutuklanamaz, alıkonulanamaz veya sürülemez.&lt;/p>
jdaggett@1662 5469 </pre>
jdaggett@1662 5470
jdaggett@1662 5471 <p>Here the user agent uses the value of the ‘<code
jdaggett@1662 5472 class=property>lang</code>’ attribute when rendering text and
jdaggett@1662 5473 appropriately renders this text without ‘<code
jdaggett@4624 5474 class=property>fi</code>’ ligatures. There is no need to use the ‘<a
jdaggett@4624 5475 href="#propdef-font-language-override"><code
jdaggett@4624 5476 class=property>font-language-override</code></a>’ property.</p>
jdaggett@1662 5477
jdaggett@1662 5478 <p>However, a given font may lack support for a specific language. In this
jdaggett@1662 5479 situation authors may need to use the typographic conventions of a
jdaggett@1662 5480 related language that are supported by that font:</p>
jdaggett@1662 5481
jdaggett@1662 5482 <pre lang=mk>&lt;body lang="mk"> &lt;!-- Macedonian lang code --&gt;
jdaggett@1662 5483
jdaggett@1732 5484 body { font-language-override: "SRB"; /* Serbian OpenType language tag */ }
jdaggett@1662 5485
jdaggett@1662 5486 &lt;h4>Члeн 9&lt;/h4>
jdaggett@1662 5487 &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 5488
jdaggett@1662 5489 </pre>
jdaggett@1662 5490
jdaggett@1662 5491 <p>The Macedonian text here will be rendered using Serbian typographic
jdaggett@1662 5492 conventions, with the assumption that the font specified supports
jdaggett@1662 5493 Serbian.</p>
jdaggett@1662 5494 </div>
jdaggett@1662 5495
jdaggett@6176 5496 <p><a id=rendering-considerations></a>
jdaggett@6176 5497
jdaggett@6699 5498 <h2 id=font-feature-resolution><span class=secno>7 </span>Font Feature
jdaggett@6699 5499 Resolution</h2>
jdaggett@6176 5500
jdaggett@6176 5501 <p>As described in the previous section, font features can be enabled in a
jdaggett@8278 5502 variety of ways, either via the use of <a href="#propdef-font-variant"
jdaggett@8278 5503 title="font-variant!!property">‘<code
jdaggett@8279 5504 class=property>font-variant</code>’</a> or <a
jdaggett@8279 5505 href="#propdef-font-feature-settings"
jdaggett@8279 5506 title="font-feature-settings!!property">‘<code
jdaggett@8279 5507 class=property>font-feature-settings</code>’</a> in a style rule or
jdaggett@8311 5508 within an <a href="#at-font-face-rule"><code>@font-face</code></a> rule.
jdaggett@8311 5509 The resolution order for the union of these settings is defined below.
jdaggett@8311 5510 Features defined via CSS properties are applied on top of layout engine
jdaggett@8311 5511 default features.
jdaggett@6176 5512
jdaggett@6699 5513 <h3 id=default-features><span class=secno>7.1 </span>Default features</h3>
jdaggett@6699 5514
jdaggett@6176 5515 <p>For OpenType fonts, user agents must enable the default features defined
jdaggett@6436 5516 in the OpenType documentation for a given script and writing mode.
jdaggett@6436 5517 Required ligatures, common ligatures and contextual forms must be enabled
jdaggett@6436 5518 by default (OpenType features: <span class=tag>rlig, liga, clig,
jdaggett@6436 5519 calt</span>), along with localized forms (OpenType feature: <span
jdaggett@6436 5520 class=tag>locl</span>), and features required for proper display of
jdaggett@6436 5521 composed characters and marks (OpenType features: <span class=tag>ccmp,
jdaggett@6436 5522 mark, mkmk</span>). These features must always be enabled, even when the
jdaggett@8278 5523 value of the <a href="#propdef-font-variant"
jdaggett@8278 5524 title="font-variant!!property">‘<code
jdaggett@8279 5525 class=property>font-variant</code>’</a> and <a
jdaggett@8279 5526 href="#propdef-font-feature-settings"
jdaggett@8279 5527 title="font-feature-settings!!property">‘<code
jdaggett@8368 5528 class=property>font-feature-settings</code>’</a> properties is <span
jdaggett@8368 5529 title="normal value">‘<code class=property>normal</code>’</span>.
jdaggett@8368 5530 Individual features are only disabled when explicitly overridden by the
jdaggett@8368 5531 author, as when ‘<a href="#propdef-font-variant-ligatures"><code
jdaggett@6176 5532 class=property>font-variant-ligatures</code></a>’ is set to ‘<a
jdaggett@6176 5533 href="#no-common-ligatures"><code
jdaggett@7377 5534 class=property>no-common-ligatures</code></a>’. For handling complex
jdaggett@7377 5535 scripts such as <a
jdaggett@6176 5536 href="http://www.microsoft.com/typography/otfntdev/arabicot/features.aspx">Arabic</a>,
jdaggett@6176 5537 <a
jdaggett@6176 5538 href="http://www.microsoft.com/typography/otfntdev/mongolot/features.htm">Mongolian</a>
jdaggett@6176 5539 or <a
jdaggett@6176 5540 href="http://www.microsoft.com/typography/otfntdev/devanot/features.aspx">Devanagari</a>
jdaggett@6436 5541 additional features are required. For upright text within vertical text
jdaggett@6436 5542 runs, vertical alternates (OpenType feature: <span class=tag>vert</span>)
jdaggett@6436 5543 must be enabled.
jdaggett@1662 5544
jdaggett@6699 5545 <h3 id=feature-precedence><span class=secno>7.2 </span>Feature precedence</h3>
jdaggett@6699 5546
jdaggett@8356 5547 <p>General and <a href="#font-specific"><em>font specific</em></a> font
jdaggett@8356 5548 feature property settings are resolved in the order below, in ascending
jdaggett@8360 5549 order of precedence. This ordering is used to construct a combined list of
jdaggett@8356 5550 font features that affect a given text run.
jdaggett@1662 5551
jdaggett@1662 5552 <ol>
jdaggett@6436 5553 <li>Font features enabled by default, including features required for a
jdaggett@6436 5554 given script.
jdaggett@6176 5555
jdaggett@8311 5556 <li>If the font is defined via an <a
jdaggett@8311 5557 href="#at-font-face-rule"><code>@font-face</code></a> rule, the font
jdaggett@8311 5558 features implied by the font-variant descriptor in the <a
jdaggett@8311 5559 href="#at-font-face-rule"><code>@font-face</code></a> rule.
jdaggett@8311 5560
jdaggett@8311 5561 <li>If the font is defined via an <a
jdaggett@8311 5562 href="#at-font-face-rule"><code>@font-face</code></a> rule, the font
jdaggett@8311 5563 features implied by the font-feature-settings descriptor in the <a
jdaggett@8311 5564 href="#at-font-face-rule"><code>@font-face</code></a> rule.
jdaggett@1662 5565
jdaggett@8278 5566 <li>Feature settings determined by properties other than <a
jdaggett@8278 5567 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8279 5568 class=property>font-variant</code>’</a> or <a
jdaggett@8279 5569 href="#propdef-font-feature-settings"
jdaggett@8279 5570 title="font-feature-settings!!property">‘<code
jdaggett@8279 5571 class=property>font-feature-settings</code>’</a>. For example, setting
jdaggett@8279 5572 a non-default value for the ‘<code
jdaggett@8360 5573 class=property>letter-spacing</code>’ property disables common
jdaggett@8360 5574 ligatures.
jdaggett@6176 5575
jdaggett@8278 5576 <li>Font features implied by the value of the <a
jdaggett@8278 5577 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8313 5578 class=property>font-variant</code>’</a> property, the related <a
jdaggett@8313 5579 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8313 5580 class=property>font-variant</code>’</a> subproperties and any other CSS
jdaggett@8360 5581 property that uses OpenType features (e.g. the ‘<a
jdaggett@8313 5582 href="#propdef-font-kerning"><code
jdaggett@4624 5583 class=property>font-kerning</code></a>’ property).
jdaggett@4624 5584
jdaggett@8279 5585 <li>Font features implied by the value of <a
jdaggett@8279 5586 href="#propdef-font-feature-settings"
jdaggett@8279 5587 title="font-feature-settings!!property">‘<code
jdaggett@8279 5588 class=property>font-feature-settings</code>’</a> property.
jdaggett@1662 5589 </ol>
jdaggett@1662 5590
jdaggett@3511 5591 <p>This ordering allows authors to set up a general set of defaults for
jdaggett@8311 5592 fonts within their <a
jdaggett@8311 5593 href="#at-font-face-rule"><code>@font-face</code></a> rules, then override
jdaggett@8311 5594 them with property settings for specific elements. General property
jdaggett@8311 5595 settings override the settings in <a
jdaggett@8311 5596 href="#at-font-face-rule"><code>@font-face</code></a> rules and low-level
jdaggett@8311 5597 font feature settings override <a href="#propdef-font-variant"
jdaggett@8278 5598 title="font-variant!!property">‘<code
jdaggett@8278 5599 class=property>font-variant</code>’</a> property settings.
jdaggett@1732 5600
jdaggett@1732 5601 <p>For situations where the combined list of font feature settings contains
jdaggett@3511 5602 more than one value for the same feature, the last value is used. When a
jdaggett@3511 5603 font lacks support for a given underlying font feature, text is simply
jdaggett@3511 5604 rendered as if that font feature was not enabled; font fallback does not
jdaggett@3511 5605 occur and no attempt is made to synthesize the feature except where
jdaggett@8360 5606 explicitly defined for specific properties.
jdaggett@1662 5607
jdaggett@6699 5608 <h3 id=feature-precedence-examples><span class=secno>7.3 </span>Feature
jdaggett@6699 5609 precedence examples</h3>
jdaggett@6699 5610
jdaggett@1662 5611 <div class=example>
jdaggett@1662 5612 <p>With the styles below, numbers are rendered proportionally when used
jdaggett@1662 5613 within a paragraph but are shown in tabular form within tables of prices:</p>
jdaggett@1662 5614
jdaggett@8277 5615 <pre>body {
jdaggett@8277 5616 font-variant-numeric: proportional-nums;
jdaggett@1662 5617 }
jdaggett@1662 5618
jdaggett@1662 5619 table.prices td {
jdaggett@8277 5620 font-variant-numeric: tabular-nums;
jdaggett@1662 5621 }
jdaggett@1662 5622 </pre>
jdaggett@1662 5623 </div>
jdaggett@1662 5624
jdaggett@1662 5625 <div class=example>
jdaggett@8360 5626 <p>When the <a href="#descdef-font-variant"
jdaggett@8360 5627 title="font-variant!!descriptor">font-variant</a> descriptor is used
jdaggett@8360 5628 within an <a href="#at-font-face-rule"><code>@font-face</code></a> rule,
jdaggett@8360 5629 it only applies to the font defined by that rule.</p>
jdaggett@1662 5630
jdaggett@1662 5631 <pre>@font-face {
jdaggett@1662 5632 font-family: MainText;
jdaggett@2556 5633 src: url(http://example.com/font.ttf);
jdaggett@1662 5634 font-variant: oldstyle-nums proportional-nums styleset(1,3);
jdaggett@1662 5635 }
jdaggett@1662 5636
jdaggett@1662 5637 body {
jdaggett@1662 5638 font-family: MainText, Helvetica;
jdaggett@1662 5639 }
jdaggett@1662 5640
jdaggett@1662 5641 table.prices td {
jdaggett@8277 5642 font-variant-numeric: tabular-nums;
jdaggett@1662 5643 }
jdaggett@1662 5644 </pre>
jdaggett@1662 5645
jdaggett@1662 5646 <p>In this case, old-style numerals will be used throughout but only where
jdaggett@1662 5647 the font "MainText" is used. Just as in the previous example, tabular
jdaggett@4624 5648 values will be used in price tables since ‘<a
jdaggett@4624 5649 href="#tabular-nums"><code class=property>tabular-nums</code></a>’
jdaggett@4624 5650 appears in a general style rule and its use is mutually exclusive with
jdaggett@4624 5651 ‘<a href="#proportional-nums"><code
jdaggett@4624 5652 class=property>proportional-nums</code></a>’. Stylistic alternate sets
jdaggett@4624 5653 will only be used where MainText is used.</p>
jdaggett@1662 5654 </div>
jdaggett@1662 5655
jdaggett@1662 5656 <div class=example>
jdaggett@8311 5657 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule can
jdaggett@8311 5658 also be used to access font features in locally available fonts via the
jdaggett@8311 5659 use of <code>local()</code> in the ‘<a href="#descdef-src"><code
jdaggett@8311 5660 class=property>src</code></a>’ descriptor of the <a
jdaggett@8311 5661 href="#at-font-face-rule"><code>@font-face</code></a> definition:</p>
jdaggett@1662 5662
jdaggett@1662 5663 <pre>@font-face {
jdaggett@1662 5664 font-family: BodyText;
jdaggett@1662 5665 src: local("HiraMaruPro-W4");
jdaggett@1662 5666 font-variant: proportional-width;
jdaggett@2509 5667 font-feature-settings: "ital"; /* Latin italics within CJK text feature */
jdaggett@1662 5668 }
jdaggett@1662 5669
jdaggett@1662 5670 body { font-family: BodyText, serif; }
jdaggett@1662 5671 </pre>
jdaggett@1662 5672
jdaggett@1662 5673 <p>If available, a Japanese font "Hiragino Maru Gothic" will be used. When
jdaggett@1662 5674 text rendering occurs, Japanese kana will be proportionally spaced and
jdaggett@1662 5675 Latin text will be italicised. Text rendered with the fallback serif font
jdaggett@1662 5676 will use default rendering properties.</p>
jdaggett@1662 5677 </div>
jdaggett@1662 5678
jdaggett@1662 5679 <div class=example>
jdaggett@3460 5680 <p>In the example below, discretionary ligatures are enabled only for a
jdaggett@1662 5681 downloadable font but are disabled within spans of class "special":</p>
jdaggett@1662 5682
jdaggett@1662 5683 <pre>@font-face {
jdaggett@1662 5684 font-family: main;
jdaggett@1662 5685 src: url(fonts/ffmeta.woff) format("woff");
jdaggett@3460 5686 font-variant: discretionary-ligatures;
jdaggett@1662 5687 }
jdaggett@1662 5688
jdaggett@1662 5689 body { font-family: main, Helvetica; }
jdaggett@3460 5690 span.special { font-variant-ligatures: no-discretionary-ligatures; }
jdaggett@1662 5691 </pre>
jdaggett@1662 5692
jdaggett@8360 5693 <p>Suppose one adds a rule using ‘<code
jdaggett@8360 5694 class=property>font-feature-settings</code>’ to enable discretionary
jdaggett@8360 5695 ligatures:</p>
jdaggett@1662 5696
jdaggett@1662 5697 <pre>body { font-family: main, Helvetica; }
jdaggett@2509 5698 span { font-feature-settings: "dlig"; }
jdaggett@3460 5699 span.special { font-variant-ligatures: no-discretionary-ligatures; }
jdaggett@1662 5700 </pre>
jdaggett@1662 5701
jdaggett@8360 5702 <p>In this case, discretionary ligatures <em>will</em> be rendered within
jdaggett@8360 5703 spans of class "special". This is because both the <a
jdaggett@8279 5704 href="#propdef-font-feature-settings"
jdaggett@8279 5705 title="font-feature-settings!!property">‘<code
jdaggett@8279 5706 class=property>font-feature-settings</code>’</a> and ‘<a
jdaggett@4624 5707 href="#propdef-font-variant-ligatures"><code
jdaggett@4624 5708 class=property>font-variant-ligatures</code></a>’ properties apply to
jdaggett@4624 5709 these spans. Although the ‘<code class=css>no-discretionary
jdaggett@4624 5710 ligatures</code>’ setting of ‘<a
jdaggett@4624 5711 href="#propdef-font-variant-ligatures"><code
jdaggett@4624 5712 class=property>font-variant-ligatures</code></a>’ effectively disables
jdaggett@8279 5713 the OpenType <span class=tag>dlig</span> feature, because the <a
jdaggett@8279 5714 href="#propdef-font-feature-settings"
jdaggett@8279 5715 title="font-feature-settings!!property">‘<code
jdaggett@8279 5716 class=property>font-feature-settings</code>’</a> is resolved after
jdaggett@8279 5717 that, the ‘<code class=property>dlig</code>’ value reenables
jdaggett@4624 5718 discretionary ligatures.</p>
jdaggett@1662 5719 </div>
jdaggett@1244 5720
jdaggett@7021 5721 <h2 id=object-model><span class=secno>8 </span>Object Model</h2>
jdaggett@7021 5722
jdaggett@8311 5723 <p>The contents of <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 5724 and <a
jdaggett@8311 5725 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8311 5726 rules can be accessed via the following extensions to the CSS Object
jdaggett@8311 5727 Model.
jdaggett@7021 5728
jdaggett@7021 5729 <h3 id=om-fontface><span class=secno>8.1 </span>The <a
jdaggett@7021 5730 href="#cssfontfacerule"><code>CSSFontFaceRule</code></a> interface</h3>
jdaggett@7021 5731
jdaggett@7021 5732 <p>The <dfn id=cssfontfacerule>CSSFontFaceRule</dfn> interface represents a
jdaggett@8311 5733 <a href="#at-font-face-rule"><code>@font-face</code></a> rule.
jdaggett@7021 5734
jdaggett@7021 5735 <pre class=idl>
jdaggett@7021 5736 interface CSSFontFaceRule : CSSRule {
jdaggett@7041 5737 attribute DOMString family;
jdaggett@7041 5738 attribute DOMString src;
jdaggett@7041 5739 attribute DOMString style;
jdaggett@7041 5740 attribute DOMString weight;
jdaggett@7041 5741 attribute DOMString stretch;
jdaggett@7041 5742 attribute DOMString unicodeRange;
jdaggett@7041 5743 attribute DOMString variant;
jdaggett@7041 5744 attribute DOMString featureSettings;
jdaggett@7021 5745 }</pre>
jdaggett@7021 5746
jdaggett@7022 5747 <p>The DOM Level 2 Style specification <a href="#DOM-LEVEL-2-STYLE"
jdaggett@7022 5748 rel=biblioentry>[DOM-LEVEL-2-STYLE]<!--{{DOM-LEVEL-2-STYLE}}--></a>
jdaggett@7022 5749 defined a different variant of this rule. This definition supercedes that
jdaggett@7022 5750 one.
jdaggett@7021 5751
jdaggett@7021 5752 <h3 id=om-fontfeaturevalues><span class=secno>8.2 </span>The <a
jdaggett@7021 5753 href="#cssfontfeaturevaluesrule"><code>CSSFontFeatureValuesRule</code></a>
jdaggett@7021 5754 interface</h3>
jdaggett@7021 5755
jdaggett@7021 5756 <p>The <code>CSSRule</code> interface is extended as follows:
jdaggett@7021 5757
jdaggett@7021 5758 <pre class=idl>partial interface CSSRule {
jdaggett@7021 5759 const unsigned short FONT_FEATURE_VALUES_RULE = 14;
jdaggett@7021 5760 }</pre>
jdaggett@7021 5761
jdaggett@7021 5762 <p>The <dfn id=cssfontfeaturevaluesrule>CSSFontFeatureValuesRule</dfn>
jdaggett@8311 5763 interface represents a <a
jdaggett@8311 5764 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8311 5765 rule.
jdaggett@7021 5766
jdaggett@7021 5767 <pre class=idl>interface CSSFontFeatureValuesRule : CSSRule {
jdaggett@8640 5768 attribute DOMString fontFamily;
jdaggett@8640 5769 readonly attribute CSSFontFeatureValuesMap annotation;
jdaggett@8640 5770 readonly attribute CSSFontFeatureValuesMap ornaments;
jdaggett@8640 5771 readonly attribute CSSFontFeatureValuesMap stylistic;
jdaggett@8640 5772 readonly attribute CSSFontFeatureValuesMap swash;
jdaggett@8640 5773 readonly attribute CSSFontFeatureValuesMap characterVariant;
jdaggett@8640 5774 readonly attribute CSSFontFeatureValuesMap styleset;
jdaggett@8640 5775 }
jdaggett@8640 5776
jdaggett@8640 5777 [MapClass(DOMString, sequence&lt;unsigned long&gt;)]
jdaggett@8640 5778 interface CSSFontFeatureValuesMap {
jdaggett@8646 5779 void set(DOMString featureValueName,
jdaggett@8646 5780 (unsigned long or sequence&lt;unsigned long&gt;) values);
jdaggett@8640 5781 }</pre>
jdaggett@7021 5782
jdaggett@7021 5783 <dl class=idl-attributes>
jdaggett@8640 5784 <dt><var>fontFamily</var> of type <code>DOMString</code>
jdaggett@7021 5785
jdaggett@7021 5786 <dd>The list of one or more font families for which a given set of feature
jdaggett@7021 5787 values is defined.
jdaggett@7021 5788
jdaggett@8640 5789 <dt>value maps of type <code>CSSFontFeatureValuesMap</code>, readonly
jdaggett@8640 5790
jdaggett@8640 5791 <dd>Maps of feature values associated with feature value names for a given
jdaggett@8640 5792 ‘<a href="#propdef-font-variant-alternates"><code
jdaggett@8640 5793 class=property>font-variant-alternates</code></a>’ value type
jdaggett@7021 5794 </dl>
jdaggett@7021 5795
jdaggett@8640 5796 <p>Each value map attribute of <a
jdaggett@8640 5797 href="#cssfontfeaturevaluesrule"><code>CSSFontFeatureValuesRule</code></a>
jdaggett@8640 5798 reflects the values defined via a corresponding <a
jdaggett@8640 5799 href="#featurevalueblock"><i title="feature_value_block">feature value
jdaggett@8640 5800 block</i></a>. Thus, the <var title="annotation
jdaggett@8640 5801 attribute">annotation</var> attribute contains the values contained within
jdaggett@8640 5802 a <code title="@annotation">@annotation</code> <a
jdaggett@8640 5803 href="#featurevalueblock"><i title="feature_value_block">feature value
jdaggett@8640 5804 block</i></a>, the <var title="ornaments attribute">ornaments</var>
jdaggett@8640 5805 attribute contains the values contained with a <code
jdaggett@8640 5806 title="@ornaments">@ornaments</code> <a href="#featurevalueblock"><i
jdaggett@8640 5807 title="feature_value_block">feature value block</i></a> and so forth.
jdaggett@8640 5808
jdaggett@8654 5809 <p>The <code>CSSFontFeatureValuesMap</code> interface uses the <a
jdaggett@8655 5810 href="http://dev.w3.org/2006/webapi/WebIDL/#es-map-members">default map
jdaggett@8655 5811 class methods</a> but the <code>set</code> method has different behavior.
jdaggett@8655 5812 It takes a sequence of unsigned integers and associates it with a given
jdaggett@8654 5813 <code>featureValueName</code>. The method behaves the same as the default
jdaggett@8654 5814 map class method except that a single unsigned long value is treated as a
jdaggett@8654 5815 sequence of a single value. The method throws an exception if an invalid
jdaggett@8654 5816 number of values is passed in. If the associated <a
jdaggett@8654 5817 href="#featurevalueblock"><i title="feature_value_block">feature value
jdaggett@8640 5818 block</i></a> only allows a limited number of values, the <code>set</code>
jdaggett@8640 5819 method throws an <code>InvalidAccessError</code> exception when the input
jdaggett@8653 5820 sequence to <code>set</code> contains more than the limited number of
jdaggett@8653 5821 values. See the description of <a
jdaggett@8640 5822 href="#multi-valued-feature-value-definitions">multi-valued feature value
jdaggett@8640 5823 definitions</a> for details on the maximum number of values allowed for a
jdaggett@8640 5824 given type of <a href="#featurevalueblock"><i
jdaggett@8646 5825 title="feature_value_block">feature value block</i></a>. The
jdaggett@8653 5826 <code>get</code> method always returns a sequence of values, even if the
jdaggett@8653 5827 sequence only contains a single value.
jdaggett@8279 5828
jdaggett@2737 5829 <h2 class=no-num id=platform-props-to-css>Appendix A: Mapping platform font
jdaggett@1662 5830 properties to CSS properties</h2>
jdaggett@1662 5831
jdaggett@1662 5832 <p><em>This appendix is included as background for some of the problems and
jdaggett@890 5833 situations that are described in other sections. It should be viewed as
jdaggett@890 5834 informative only.</em>
jdaggett@890 5835
jdaggett@512 5836 <p>Font properties in CSS are designed to be independent of the underlying
jdaggett@512 5837 font formats used; they can be used to specify bitmap fonts, Type1 fonts,
jdaggett@890 5838 SVG fonts in addition to the common TrueType and OpenType fonts. But there
jdaggett@1244 5839 are facets of the TrueType and OpenType formats that often cause confusion
jdaggett@2556 5840 for authors and present challenges to implementers on different platforms.
jdaggett@1244 5841
jdaggett@1244 5842 <p>Originally developed at Apple, TrueType was designed as an outline font
jdaggett@1244 5843 format for both screen and print. Microsoft joined Apple in developing the
jdaggett@1244 5844 TrueType format and both platforms have supported TrueType fonts since
jdaggett@1244 5845 then. Font data in the TrueType format consists of a set of tables
jdaggett@1244 5846 distinguished with common four-letter tag names, each containing a
jdaggett@1244 5847 specific type of data. For example, naming information, including
jdaggett@1244 5848 copyright and license information, is stored in the ‘<code
jdaggett@7311 5849 class=property>name</code>’ table. The <a
jdaggett@7311 5850 href="#character-map"><em>character map</em></a> (‘<code
jdaggett@1244 5851 class=property>cmap</code>’) table contains a mapping of character
jdaggett@1244 5852 encodings to glyphs. Apple later added additional tables for supporting
jdaggett@1244 5853 enhanced typographic functionality; these are now called Apple Advanced
jdaggett@1244 5854 Typography, or AAT, fonts. Microsoft and Adobe developed a separate set of
jdaggett@1662 5855 tables for advanced typography and called their format OpenType <a
jdaggett@1662 5856 href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>.
jdaggett@890 5857
jdaggett@890 5858 <p>In many cases the font data used under Microsoft Windows or Linux is
jdaggett@890 5859 slightly different from the data used under Apple's Mac OS X because the
jdaggett@6694 5860 TrueType format allowed for explicit variation across platforms. This
jdaggett@7311 5861 includes font metrics, names and <a href="#character-map"><em>character
jdaggett@7311 5862 map</em></a> data.
jdaggett@6694 5863
jdaggett@6694 5864 <p>Specifically, font family name data is handled differently across
jdaggett@6694 5865 platforms. For TrueType and OpenType fonts these names are contained in
jdaggett@6694 5866 the ‘<code class=property>name</code>’ table, in name records with
jdaggett@8276 5867 name ID 1. Mulitple names can be stored for different locales, but
jdaggett@6694 5868 Microsoft recommends fonts always include at least a US English version of
jdaggett@6694 5869 the name. On Windows, Microsoft made the decision for backwards
jdaggett@6694 5870 compatibility to limit this family name to a maximum of four faces; for
jdaggett@6694 5871 larger groupings the "preferred family" (name ID 16) or "WWS family" (name
jdaggett@6694 5872 ID 21) can be used. Other platforms such as OSX don't have this
jdaggett@8276 5873 limitation, so the family name is used to define all possible groupings.
jdaggett@6694 5874
jdaggett@6694 5875 <p>Other name table data provides names used to uniquely identify a
jdaggett@6694 5876 specific face within a family. The full font name (name ID 4) and the
jdaggett@8276 5877 Postscript name (name ID 6) describe a single face uniquely. For example,
jdaggett@8276 5878 the bold face of the Gill Sans family has a fullname of "Gill Sans Bold"
jdaggett@8276 5879 and a Postscript name of "GillSans-Bold". There can be multiple localized
jdaggett@8276 5880 versions of the fullname for a given face, but the Postscript name is
jdaggett@1244 5881 always a unique name made from a limited set of ASCII characters.
jdaggett@1244 5882
jdaggett@1244 5883 <p>On various platforms, different names are used to search for a font. For
jdaggett@1244 5884 example, with the Windows GDI CreateIndirectFont API, either a family or
jdaggett@8276 5885 fullname can be used to lookup a face, while on Mac OS X the
jdaggett@8095 5886 CTFontCreateWithName API call is used to lookup a given face using the
jdaggett@8095 5887 fullname and Postscript name. Under Linux, the fontconfig API allows fonts
jdaggett@8095 5888 to be searched using any of these names. In situations where platform
jdaggett@8095 5889 API's automatically substitute other font choices, it may be necessary to
jdaggett@8095 5890 verify a returned font matches a given name.
jdaggett@1244 5891
jdaggett@1244 5892 <p>The weight of a given face can be determined via the usWeightClass field
jdaggett@1244 5893 of the OS/2 table or inferred from the style name (name ID 2). Likewise,
jdaggett@1244 5894 the width can be determined via the usWidthClass of the OS/2 table or
jdaggett@6694 5895 inferred from the style name. For historical reasons related to synthetic
jdaggett@6694 5896 bolding at weights 200 or lower with the Windows GDI API, font designers
jdaggett@6694 5897 have sometimes skewed values in the OS/2 table to avoid these weights.
jdaggett@1244 5898
jdaggett@1244 5899 <p>Rendering complex scripts that use contextual shaping such as Thai,
jdaggett@1244 5900 Arabic and Devanagari requires features present only in OpenType or AAT
jdaggett@1244 5901 fonts. Currently, complex script rendering is supported on Windows and
jdaggett@7521 5902 Linux using OpenType font features while both OpenType and AAT font
jdaggett@7521 5903 features are used under Mac OS X.
jdaggett@1244 5904
jdaggett@2472 5905 <h2 class=no-num id=ch-ch-ch-changes>Changes</h2>
jdaggett@2472 5906
jdaggett@2472 5907 <h3 class=no-num id=recent-changes> Changes from the <a
jdaggett@7451 5908 href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/">February 2013
jdaggett@7242 5909 CSS3 Fonts Working Draft</a></h3>
jdaggett@2472 5910
jdaggett@2472 5911 <p>Major changes include:
jdaggett@2472 5912
jdaggett@2472 5913 <ul>
jdaggett@7521 5914 <li>Moved font load events into a separate <a
jdaggett@7521 5915 href="http://dev.w3.org/csswg/css3-font-load-events/">spec</a>
jdaggett@7679 5916
jdaggett@8356 5917 <li>Tightened syntax rules for <a
jdaggett@8311 5918 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@7679 5919 rules
jdaggett@8031 5920
jdaggett@8311 5921 <li>Added grammar productions for <a
jdaggett@8311 5922 href="#at-font-face-rule"><code>@font-face</code></a> and <a
jdaggett@8311 5923 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8311 5924 rules
jdaggett@8095 5925
jdaggett@8225 5926 <li>Revised definition of ‘<a href="#descdef-unicode-range"><code
jdaggett@8225 5927 class=property>unicode-range</code></a>’ descriptor
jdaggett@8391 5928
jdaggett@8391 5929 <li>Detailed font matching of composite faces
jdaggett@8640 5930
jdaggett@8640 5931 <li>Revised object model interface of CSSFontFeatureValuesRule
jdaggett@8640 5932
jdaggett@8640 5933 <li>Detailed effect of ‘<a href="#propdef-font-size-adjust"><code
jdaggett@8640 5934 class=property>font-size-adjust</code></a>’ on relative unit sizes
jdaggett@8640 5935
jdaggett@8640 5936 <li>Reference the potentially CORS-enabled fetch method defined in HTML5
jdaggett@2472 5937 </ul>
jdaggett@2472 5938
jdaggett@529 5939 <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
jdaggett@529 5940
jdaggett@1662 5941 <p>I'd like to thank Tal Leming, Jonathan Kew and Christopher Slye for all
jdaggett@1662 5942 their help and feedback. John Hudson was kind enough to take the time to
jdaggett@2472 5943 explain the subtleties of OpenType language tags and provided the example
jdaggett@2472 5944 of character variant usage for displaying text on Byzantine seals. Ken
jdaggett@2472 5945 Lunde and Eric Muller provided valuable feedback on CJK OpenType features
jdaggett@2472 5946 and Unicode variation selectors. The idea for supporting font features by
jdaggett@8313 5947 using <a href="#propdef-font-variant"
jdaggett@8313 5948 title="font-variant!!property">‘<code
jdaggett@8313 5949 class=property>font-variant</code>’</a> subproperties originated with
jdaggett@8313 5950 Håkon Wium Lie, Adam Twardoch and Tal Leming. Elika Etemad supplied some
jdaggett@8313 5951 of the initial design ideas for the <a
jdaggett@8311 5952 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8311 5953 rule. Thanks also to House Industries for allowing the use of Ed Interlock
jdaggett@8311 5954 in the discretionary ligatures example.
jdaggett@1662 5955
jdaggett@529 5956 <p>A special thanks to Robert Bringhurst for the sublime mind expansion
jdaggett@529 5957 that is <em>The Elements of Typographic Style</em>.
jdaggett@529 5958
jdaggett@7242 5959 <h2 class=no-num id=conformance> Conformance</h2>
jdaggett@7242 5960
jdaggett@7242 5961 <h3 class=no-num id=conventions> Document Conventions</h3>
jdaggett@7242 5962
jdaggett@7242 5963 <p>Conformance requirements are expressed with a combination of descriptive
jdaggett@7242 5964 assertions and RFC 2119 terminology. The key words “MUST”, “MUST
jdaggett@7242 5965 NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
jdaggett@7242 5966 “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
jdaggett@7242 5967 normative parts of this document are to be interpreted as described in RFC
jdaggett@7242 5968 2119. However, for readability, these words do not appear in all uppercase
jdaggett@7242 5969 letters in this specification.
jdaggett@7242 5970
jdaggett@7242 5971 <p>All of the text of this specification is normative except sections
jdaggett@7242 5972 explicitly marked as non-normative, examples, and notes. <a
jdaggett@7242 5973 href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
jdaggett@7242 5974
jdaggett@7242 5975 <p>Examples in this specification are introduced with the words “for
jdaggett@7242 5976 example” or are set apart from the normative text with
jdaggett@7242 5977 <code>class="example"</code>, like this:
jdaggett@7242 5978
jdaggett@7242 5979 <div class=example>
jdaggett@7242 5980 <p>This is an example of an informative example.
jdaggett@7242 5981 </div>
jdaggett@7242 5982
jdaggett@7242 5983 <p>Informative notes begin with the word “Note” and are set apart from
jdaggett@7242 5984 the normative text with <code>class="note"</code>, like this:
jdaggett@7242 5985
jdaggett@7242 5986 <p class=note>Note, this is an informative note.
jdaggett@7242 5987
jdaggett@7242 5988 <h3 class=no-num id=conformance-classes> Conformance Classes</h3>
jdaggett@7242 5989
jdaggett@7242 5990 <p>Conformance to CSS Fonts Level 3 Module is defined for three conformance
jdaggett@7242 5991 classes:
jdaggett@7242 5992
jdaggett@7242 5993 <dl>
jdaggett@7243 5994 <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
jdaggett@7242 5995 sheet</dfn>
jdaggett@7242 5996
jdaggett@7242 5997 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
jdaggett@7242 5998 style sheet</a>.
jdaggett@7242 5999
jdaggett@7243 6000 <dt><dfn id=renderer>renderer</dfn>
jdaggett@7242 6001
jdaggett@7242 6002 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
jdaggett@7242 6003 that interprets the semantics of a style sheet and renders documents that
jdaggett@7242 6004 use them.
jdaggett@7242 6005
jdaggett@7242 6006 <dt><dfn id=authoring-tool>authoring tool</dfn>
jdaggett@7242 6007
jdaggett@7242 6008 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
jdaggett@7242 6009 that writes a style sheet.
jdaggett@7242 6010 </dl>
jdaggett@7242 6011
jdaggett@7242 6012 <p>A style sheet is conformant to CSS Fonts Level 3 Module if all of its
jdaggett@7242 6013 declarations that use properties defined in this module have values that
jdaggett@7242 6014 are valid according to the generic CSS grammar and the individual grammars
jdaggett@7242 6015 of each property as given in this module.
jdaggett@7242 6016
jdaggett@7242 6017 <p>A renderer is conformant to CSS Fonts Level 3 Module if, in addition to
jdaggett@7242 6018 interpreting the style sheet as defined by the appropriate specifications,
jdaggett@7242 6019 it supports all the features defined by CSS Fonts Level 3 Module by
jdaggett@7242 6020 parsing them correctly and rendering the document accordingly. However,
jdaggett@7242 6021 the inability of a UA to correctly render a document due to limitations of
jdaggett@7242 6022 the device does not make the UA non-conformant. (For example, a UA is not
jdaggett@7242 6023 required to render color on a monochrome monitor.)
jdaggett@7242 6024
jdaggett@7242 6025 <p>An authoring tool is conformant to CSS Fonts Level 3 Module if it writes
jdaggett@7242 6026 style sheets that are syntactically correct according to the generic CSS
jdaggett@7242 6027 grammar and the individual grammars of each feature in this module, and
jdaggett@7242 6028 meet all other conformance requirements of style sheets as described in
jdaggett@7242 6029 this module.
jdaggett@7242 6030
jdaggett@7242 6031 <h3 class=no-num id=partial> Partial Implementations</h3>
jdaggett@7242 6032
jdaggett@7242 6033 <p>So that authors can exploit the forward-compatible parsing rules to
jdaggett@7242 6034 assign fallback values, CSS renderers <strong>must</strong> treat as
jdaggett@7242 6035 invalid (and <a
jdaggett@7242 6036 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
jdaggett@7242 6037 appropriate</a>) any at-rules, properties, property values, keywords, and
jdaggett@7242 6038 other syntactic constructs for which they have no usable level of support.
jdaggett@7242 6039 In particular, user agents <strong>must not</strong> selectively ignore
jdaggett@7242 6040 unsupported component values and honor supported values in a single
jdaggett@7242 6041 multi-value property declaration: if any value is considered invalid (as
jdaggett@7242 6042 unsupported values must be), CSS requires that the entire declaration be
jdaggett@7242 6043 ignored.
jdaggett@7242 6044
jdaggett@7242 6045 <h3 class=no-num id=experimental> Experimental Implementations</h3>
jdaggett@7242 6046
jdaggett@7242 6047 <p>To avoid clashes with future CSS features, the CSS2.1 specification
jdaggett@7242 6048 reserves a <a
jdaggett@7242 6049 href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
jdaggett@7242 6050 syntax</a> for proprietary and experimental extensions to CSS.
jdaggett@7242 6051
jdaggett@7242 6052 <p>Prior to a specification reaching the Candidate Recommendation stage in
jdaggett@7242 6053 the W3C process, all implementations of a CSS feature are considered
jdaggett@7242 6054 experimental. The CSS Working Group recommends that implementations use a
jdaggett@7242 6055 vendor-prefixed syntax for such features, including those in W3C Working
jdaggett@7242 6056 Drafts. This avoids incompatibilities with future changes in the draft.
jdaggett@7242 6057
jdaggett@7242 6058 <h3 class=no-num id=testing> Non-Experimental Implementations</h3>
jdaggett@7242 6059
jdaggett@7242 6060 <p>Once a specification reaches the Candidate Recommendation stage,
jdaggett@7242 6061 non-experimental implementations are possible, and implementors should
jdaggett@7242 6062 release an unprefixed implementation of any CR-level feature they can
jdaggett@7242 6063 demonstrate to be correctly implemented according to spec.
jdaggett@7242 6064
jdaggett@7242 6065 <p>To establish and maintain the interoperability of CSS across
jdaggett@7242 6066 implementations, the CSS Working Group requests that non-experimental CSS
jdaggett@7242 6067 renderers submit an implementation report (and, if necessary, the
jdaggett@7242 6068 testcases used for that implementation report) to the W3C before releasing
jdaggett@7242 6069 an unprefixed implementation of any CSS features. Testcases submitted to
jdaggett@7242 6070 W3C are subject to review and correction by the CSS Working Group.
jdaggett@7242 6071
jdaggett@7242 6072 <p>Further information on submitting testcases and implementation reports
jdaggett@7242 6073 can be found from on the CSS Working Group's website at <a
jdaggett@7242 6074 href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
jdaggett@7242 6075 Questions should be directed to the <a
jdaggett@7242 6076 href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
jdaggett@7242 6077 mailing list.
jdaggett@7242 6078
jdaggett@484 6079 <h2 class=no-num id=references>References</h2>
jdaggett@484 6080
jdaggett@1662 6081 <h3 class=no-num id=normative-references>Normative References</h3>
jdaggett@484 6082 <!--begin-normative-->
jdaggett@484 6083 <!-- Sorted by label -->
jdaggett@484 6084
jdaggett@484 6085 <dl class=bibliography>
jdaggett@8031 6086 <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
jdaggett@484 6087 <!---->
jdaggett@531 6088
jdaggett@2461 6089 <dt id=CHARMOD>[CHARMOD]
jdaggett@2461 6090
jdaggett@2461 6091 <dd>Martin J. Dürst; et al. <a
jdaggett@2737 6092 href="http://www.w3.org/TR/2005/REC-charmod-20050215/"><cite>Character
jdaggett@2461 6093 Model for the World Wide Web 1.0: Fundamentals.</cite></a> 15 February
jdaggett@2461 6094 2005. W3C Recommendation. URL: <a
jdaggett@2737 6095 href="http://www.w3.org/TR/2005/REC-charmod-20050215/">http://www.w3.org/TR/2005/REC-charmod-20050215/</a>
jdaggett@2461 6096 </dd>
jdaggett@2461 6097 <!---->
jdaggett@2461 6098
jdaggett@2457 6099 <dt id=CORS>[CORS]
jdaggett@1662 6100
jdaggett@1662 6101 <dd>Anne van Kesteren. <a
jdaggett@7242 6102 href="http://www.w3.org/TR/2013/CR-cors-20130129/"><cite>Cross-Origin
jdaggett@7242 6103 Resource Sharing.</cite></a> 29 January 2013. W3C Candidate
jdaggett@7242 6104 Recommendation. (Work in progress.) URL: <a
jdaggett@7242 6105 href="http://www.w3.org/TR/2013/CR-cors-20130129/">http://www.w3.org/TR/2013/CR-cors-20130129/</a>
jdaggett@1662 6106 </dd>
jdaggett@1662 6107 <!---->
jdaggett@1662 6108
jdaggett@3041 6109 <dt id=CSS21>[CSS21]
jdaggett@3041 6110
jdaggett@3041 6111 <dd>Bert Bos; et al. <a
jdaggett@8031 6112 href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
jdaggett@3041 6113 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
jdaggett@3041 6114 2011. W3C Recommendation. URL: <a
jdaggett@8031 6115 href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
jdaggett@3041 6116 </dd>
jdaggett@3041 6117 <!---->
jdaggett@3041 6118
jdaggett@5833 6119 <dt id=CSS3VAL>[CSS3VAL]
jdaggett@5833 6120
jdaggett@5833 6121 <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
jdaggett@8386 6122 href="http://www.w3.org/TR/2013/CR-css3-values-20130404/"><cite>CSS
jdaggett@8386 6123 Values and Units Module Level 3.</cite></a> 4 April 2013. W3C Candidate
jdaggett@6701 6124 Recommendation. (Work in progress.) URL: <a
jdaggett@8386 6125 href="http://www.w3.org/TR/2013/CR-css3-values-20130404/">http://www.w3.org/TR/2013/CR-css3-values-20130404/</a>
jdaggett@5833 6126 </dd>
jdaggett@5833 6127 <!---->
jdaggett@5833 6128
jdaggett@1662 6129 <dt id=HTML5>[HTML5]
jdaggett@1662 6130
jdaggett@1856 6131 <dd>Ian Hickson. <a
jdaggett@7242 6132 href="http://www.w3.org/TR/2012/CR-html5-20121217/"><cite>HTML5.</cite></a>
jdaggett@7242 6133 17 December 2012. W3C Candidate Recommendation. (Work in progress.) URL:
jdaggett@7242 6134 <a
jdaggett@7242 6135 href="http://www.w3.org/TR/2012/CR-html5-20121217/">http://www.w3.org/TR/2012/CR-html5-20121217/</a>
jdaggett@1662 6136 </dd>
jdaggett@1662 6137 <!---->
jdaggett@1662 6138
jdaggett@1662 6139 <dt id=OPEN-FONT-FORMAT>[OPEN-FONT-FORMAT]
jdaggett@1662 6140
jdaggett@1662 6141 <dd><a
jdaggett@1662 6142 href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip"><cite>Information
jdaggett@1662 6143 technology — Coding of audio-visual objects — Part 22: Open Font
jdaggett@1662 6144 Format.</cite></a> International Organization for Standardization.
jdaggett@1662 6145 ISO/IEC 14496-22:2009. URL: <a
jdaggett@1662 6146 href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip">http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip</a>
jdaggett@1662 6147 </dd>
jdaggett@1662 6148 <!---->
jdaggett@1662 6149
jdaggett@1662 6150 <dt id=OPENTYPE>[OPENTYPE]
jdaggett@1662 6151
jdaggett@1662 6152 <dd><a
jdaggett@1662 6153 href="http://www.microsoft.com/typography/otspec/default.htm"><cite>OpenType
jdaggett@1662 6154 specification.</cite></a> Microsoft. URL: <a
jdaggett@1662 6155 href="http://www.microsoft.com/typography/otspec/default.htm">http://www.microsoft.com/typography/otspec/default.htm</a>
jdaggett@1662 6156 </dd>
jdaggett@1662 6157 <!---->
jdaggett@1662 6158
jdaggett@1662 6159 <dt id=OPENTYPE-FEATURES>[OPENTYPE-FEATURES]
jdaggett@1662 6160
jdaggett@1662 6161 <dd><a
jdaggett@1662 6162 href="http://www.microsoft.com/typography/otspec/featurelist.htm"><cite>OpenType
jdaggett@1662 6163 feature registry.</cite></a> Microsoft. URL: <a
jdaggett@1662 6164 href="http://www.microsoft.com/typography/otspec/featurelist.htm">http://www.microsoft.com/typography/otspec/featurelist.htm</a>
jdaggett@1662 6165 </dd>
jdaggett@1662 6166 <!---->
jdaggett@1662 6167
jdaggett@7103 6168 <dt id=RFC2119>[RFC2119]
jdaggett@7103 6169
jdaggett@7103 6170 <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
jdaggett@7103 6171 words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
jdaggett@7103 6172 RFC 2119. URL: <a
jdaggett@7103 6173 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
jdaggett@7103 6174 </dd>
jdaggett@7103 6175 <!---->
jdaggett@7103 6176
jdaggett@2457 6177 <dt id=UAX15>[UAX15]
jdaggett@2457 6178
jdaggett@7242 6179 <dd>Mark Davis; Ken Whistler. <a
jdaggett@7242 6180 href="http://www.unicode.org/reports/tr15/"><cite>Unicode Normalization
jdaggett@7242 6181 Forms.</cite></a> 31 August 2012. Unicode Standard Annex #15. URL: <a
jdaggett@7242 6182 href="http://www.unicode.org/reports/tr15/">http://www.unicode.org/reports/tr15/</a>
jdaggett@2457 6183 </dd>
jdaggett@2457 6184 <!---->
jdaggett@2457 6185
jdaggett@1856 6186 <dt id=UAX29>[UAX29]
jdaggett@1856 6187
jdaggett@1856 6188 <dd>Mark Davis. <a
jdaggett@5809 6189 href="http://www.unicode.org/reports/tr29/"><cite>Unicode Text
jdaggett@7242 6190 Segmentation.</cite></a> 12 September 2012. Unicode Standard Annex #29.
jdaggett@2461 6191 URL: <a
jdaggett@5809 6192 href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a>
jdaggett@1856 6193 </dd>
jdaggett@1856 6194 <!---->
jdaggett@1856 6195
jdaggett@3041 6196 <dt id=UNICODE6>[UNICODE6]
jdaggett@531 6197
jdaggett@531 6198 <dd>The Unicode Consortium. <a
jdaggett@7242 6199 href="http://www.unicode.org/versions/Unicode6.2.0/"><cite>The Unicode
jdaggett@7242 6200 Standard, Version 6.2.0.</cite></a> Defined by: The Unicode Standard,
jdaggett@7242 6201 Version 6.2.0 URL: <a
jdaggett@7242 6202 href="http://www.unicode.org/versions/Unicode6.2.0/">http://www.unicode.org/versions/Unicode6.2.0/</a>
jdaggett@531 6203 </dd>
jdaggett@531 6204 <!---->
jdaggett@484 6205 </dl>
jdaggett@484 6206 <!--end-normative-->
jdaggett@3041 6207 <!--{{!CSS21}}-->
jdaggett@5833 6208 <!--{{!CSS3VAL}}-->
jdaggett@1662 6209 <!--{{!OPENTYPE}}-->
jdaggett@1662 6210 <!--{{!OPENTYPE-FEATURES}}-->
jdaggett@1662 6211 <!--{{!OPEN-FONT-FORMAT}}-->
jdaggett@3041 6212 <!--{{!UNICODE6}}-->
jdaggett@2457 6213 <!--{{!UAX15}}-->
jdaggett@1856 6214 <!--{{!UAX29}}-->
jdaggett@2457 6215 <!--{{!CORS}}-->
jdaggett@1662 6216 <!--{{!HTML5}}-->
jdaggett@2461 6217 <!--{{!CHARMOD}}-->
jdaggett@1662 6218
jdaggett@1662 6219 <h3 class=no-num id=other-references>Other References</h3>
jdaggett@484 6220 <!--begin-informative-->
jdaggett@484 6221 <!-- Sorted by label -->
jdaggett@484 6222
jdaggett@484 6223 <dl class=bibliography>
jdaggett@8031 6224 <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
jdaggett@484 6225 <!---->
jdaggett@484 6226
jdaggett@3042 6227 <dt id=AAT-FEATURES>[AAT-FEATURES]
jdaggett@3042 6228
jdaggett@3042 6229 <dd><a href="http://developer.apple.com/fonts/registry/"><cite>Apple
jdaggett@3042 6230 Advanced Typography font feature registry.</cite></a> Apple. URL: <a
jdaggett@3042 6231 href="http://developer.apple.com/fonts/registry/">http://developer.apple.com/fonts/registry/</a>
jdaggett@3042 6232 </dd>
jdaggett@3042 6233 <!---->
jdaggett@3042 6234
jdaggett@512 6235 <dt id=ARABIC-TYPO>[ARABIC-TYPO]
jdaggett@512 6236
jdaggett@513 6237 <dd>Huda Smitshuijzen AbiFares. <cite>Arabic Typography: A Comprehensive
jdaggett@1148 6238 Sourcebook.</cite> Saqi Books. 2001. ISBN 0-86356-347-3.</dd>
jdaggett@512 6239 <!---->
jdaggett@512 6240
jdaggett@3042 6241 <dt id=CHARMOD-NORM>[CHARMOD-NORM]
jdaggett@3042 6242
jdaggett@3042 6243 <dd>François Yergeau; et al. <a
jdaggett@5809 6244 href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/"><cite>Character
jdaggett@5809 6245 Model for the World Wide Web 1.0: Normalization.</cite></a> 1 May 2012.
jdaggett@5809 6246 W3C Working Draft. (Work in progress.) URL: <a
jdaggett@5809 6247 href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/">http://www.w3.org/TR/2012/WD-charmod-norm-20120501/</a>
jdaggett@3042 6248 </dd>
jdaggett@3042 6249 <!---->
jdaggett@3042 6250
jdaggett@1732 6251 <dt id=CJKV-INFO-PROCESSING>[CJKV-INFO-PROCESSING]
jdaggett@1732 6252
jdaggett@1732 6253 <dd>Ken Lunde. <cite>CJKV Information Processing, Second Edition.</cite>
jdaggett@1732 6254 O'Reilly Media, Inc. 2009. ISBN 0-596-51447-1.</dd>
jdaggett@1732 6255 <!---->
jdaggett@1732 6256
jdaggett@3460 6257 <dt id=CSS3-CONDITIONAL>[CSS3-CONDITIONAL]
jdaggett@3460 6258
jdaggett@3460 6259 <dd>L. David Baron. <a
jdaggett@8386 6260 href="http://www.w3.org/TR/2013/CR-css3-conditional-20130404/"><cite>CSS
jdaggett@8386 6261 Conditional Rules Module Level 3.</cite></a> 4 April 2013. W3C Candidate
jdaggett@8386 6262 Recommendation. (Work in progress.) URL: <a
jdaggett@8386 6263 href="http://www.w3.org/TR/2013/CR-css3-conditional-20130404/">http://www.w3.org/TR/2013/CR-css3-conditional-20130404/</a>
jdaggett@3460 6264 </dd>
jdaggett@3460 6265 <!---->
jdaggett@3460 6266
jdaggett@6701 6267 <dt id=CSS3TEXT>[CSS3TEXT]
jdaggett@6701 6268
jdaggett@6701 6269 <dd>Elika J. Etemad; Koji Ishii. <a
jdaggett@7041 6270 href="http://www.w3.org/TR/2012/WD-css3-text-20121113/"><cite>CSS Text
jdaggett@7041 6271 Module Level 3.</cite></a> 13 November 2012. W3C Working Draft. (Work in
jdaggett@6701 6272 progress.) URL: <a
jdaggett@7041 6273 href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">http://www.w3.org/TR/2012/WD-css3-text-20121113/</a>
jdaggett@6701 6274 </dd>
jdaggett@6701 6275 <!---->
jdaggett@6701 6276
jdaggett@1856 6277 <dt id=DIGITAL-TYPOGRAPHY>[DIGITAL-TYPOGRAPHY]
jdaggett@1856 6278
jdaggett@1856 6279 <dd>Richard Rubinstein. <cite>Digital Typography, An Introduction to Type
jdaggett@1856 6280 and Composition for Computer System Design.</cite> Addison-Wesley. 1988.
jdaggett@1856 6281 ISBN 0-201-17633-5.</dd>
jdaggett@1856 6282 <!---->
jdaggett@1856 6283
jdaggett@7022 6284 <dt id=DOM-LEVEL-2-STYLE>[DOM-LEVEL-2-STYLE]
jdaggett@7022 6285
jdaggett@7022 6286 <dd>Chris Wilson; Philippe Le Hégaret; Vidur Apparao. <a
jdaggett@7179 6287 href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/"><cite>Document
jdaggett@7022 6288 Object Model (DOM) Level 2 Style Specification.</cite></a> 13 November
jdaggett@7022 6289 2000. W3C Recommendation. URL: <a
jdaggett@7179 6290 href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/">http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/</a>
jdaggett@7022 6291 </dd>
jdaggett@7022 6292 <!---->
jdaggett@7022 6293
jdaggett@498 6294 <dt id=ELEMTYPO>[ELEMTYPO]
jdaggett@498 6295
jdaggett@498 6296 <dd>Robert Bringhurst. <cite>The Elements of Typographic Style, Version
jdaggett@7488 6297 4.</cite> Hartley &amp; Marks. 2013. ISBN 0-88179-212-8.</dd>
jdaggett@498 6298 <!---->
jdaggett@498 6299
jdaggett@513 6300 <dt id=LANGCULTTYPE>[LANGCULTTYPE]
jdaggett@513 6301
jdaggett@1148 6302 <dd>John D. Berry, Ed. <cite>Language Culture Type.</cite> Graphis. 2001.
jdaggett@1148 6303 ISBN 1-932026-01-0.</dd>
jdaggett@512 6304 <!---->
jdaggett@1662 6305
jdaggett@1662 6306 <dt id=OPENTYPE-FONT-GUIDE>[OPENTYPE-FONT-GUIDE]
jdaggett@1662 6307
jdaggett@1662 6308 <dd><a
jdaggett@3538 6309 href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf"><cite>OpenType
jdaggett@1662 6310 User Guide.</cite></a> FontShop International. URL: <a
jdaggett@3538 6311 href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf">https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf</a>
jdaggett@1662 6312 </dd>
jdaggett@1662 6313 <!---->
jdaggett@1856 6314
jdaggett@2527 6315 <dt id=RASTER-TRAGEDY>[RASTER-TRAGEDY]
jdaggett@2527 6316
jdaggett@2527 6317 <dd>Beat Stamm. <a href="http://www.rastertragedy.com/"><cite>The Raster
jdaggett@6659 6318 Tragedy at Low-Resolution Revisited.</cite></a> 7 December 2011. URL: <a
jdaggett@2527 6319 href="http://www.rastertragedy.com/">http://www.rastertragedy.com/</a></dd>
jdaggett@2527 6320 <!---->
jdaggett@2527 6321
jdaggett@1856 6322 <dt id=WINDOWS-GLYPH-PROC>[WINDOWS-GLYPH-PROC]
jdaggett@1856 6323
jdaggett@1856 6324 <dd>John Hudson. <a
jdaggett@1856 6325 href="http://www.microsoft.com/typography/developers/opentype/default.htm"><cite>Windows
jdaggett@1856 6326 Glyph Processing.</cite></a> Microsoft Typogrraphy. URL: <a
jdaggett@1856 6327 href="http://www.microsoft.com/typography/developers/opentype/default.htm">http://www.microsoft.com/typography/developers/opentype/default.htm</a>
jdaggett@1856 6328 </dd>
jdaggett@1856 6329 <!---->
jdaggett@484 6330 </dl>
jdaggett@484 6331 <!--end-informative-->
jdaggett@518 6332 <!--{{ARABIC-TYPO}}-->
jdaggett@1732 6333 <!--{{CJKV-INFO-PROCESSING}}-->
jdaggett@1856 6334 <!--{{DIGITAL-TYPOGRAPHY}}-->
jdaggett@7022 6335 <!--{{DOM-LEVEL-2-STYLE}}-->
jdaggett@518 6336 <!--{{ELEMTYPO}}-->
jdaggett@1856 6337 <!--{{LANGCULTTYPE}}-->
jdaggett@1662 6338 <!--{{OPENTYPE-FONT-GUIDE}}-->
jdaggett@2527 6339 <!--{{RASTER-TRAGEDY}}-->
jdaggett@1856 6340 <!--{{WINDOWS-GLYPH-PROC}}-->
jdaggett@3042 6341 <!--{{CHARMOD-NORM}}-->
jdaggett@3042 6342 <!--{{AAT-FEATURES}}-->
jdaggett@3460 6343 <!--{{CSS3-CONDITIONAL}}-->
jdaggett@6701 6344 <!--{{CSS3TEXT}}-->
jdaggett@484 6345
jdaggett@484 6346 <h2 class=no-num id=index>Index</h2>
jdaggett@484 6347 <!--begin-index-->
jdaggett@484 6348
jdaggett@484 6349 <ul class=indexlist>
jdaggett@8278 6350 <li>100...900 weight values, <a href="#font-weight-numeric-values"
jdaggett@8278 6351 title="100...900 weight values"><strong>3.2</strong></a>
jdaggett@8278 6352
jdaggett@8225 6353 <li><var>&lt;absolute-size&gt;</var>, <a href="#absolute-size-value"
jdaggett@7060 6354 title="&lt;absolute-size&gt;"><strong>3.5</strong></a>
jdaggett@890 6355
jdaggett@8225 6356 <li><var>&lt;common-lig-values&gt;</var>, <a href="#common-lig-values"
jdaggett@8225 6357 title="&lt;common-lig-values&gt;"><strong>6.4</strong></a>
jdaggett@2479 6358
jdaggett@2479 6359 <li><var>&lt;contextual-alt-values&gt;</var>, <a
jdaggett@8225 6360 href="#contextual-alt-values"
jdaggett@6176 6361 title="&lt;contextual-alt-values&gt;"><strong>6.4</strong></a>
jdaggett@2479 6362
jdaggett@8225 6363 <li><var>&lt;discretionary-lig-values&gt;</var>, <a
jdaggett@8225 6364 href="#discretionary-lig-values"
jdaggett@8225 6365 title="&lt;discretionary-lig-values&gt;"><strong>6.4</strong></a>
jdaggett@3460 6366
jdaggett@2479 6367 <li><var>&lt;east-asian-variant-values&gt;</var>, <a
jdaggett@8225 6368 href="#east-asian-variant-values"
jdaggett@2479 6369 title="&lt;east-asian-variant-values&gt;"><strong>6.10</strong></a>
jdaggett@2479 6370
jdaggett@2479 6371 <li><var>&lt;east-asian-width-values&gt;</var>, <a
jdaggett@8225 6372 href="#east-asian-width-values"
jdaggett@2479 6373 title="&lt;east-asian-width-values&gt;"><strong>6.10</strong></a>
jdaggett@2479 6374
jdaggett@8225 6375 <li><var>&lt;family-name&gt;</var>, <a href="#family-name-value"
jdaggett@8225 6376 title="&lt;family-name&gt;"><strong>3.1</strong></a>
jdaggett@8225 6377
jdaggett@8225 6378 <li><var>&lt;feature-tag-value&gt;</var>, <a href="#feature-tag-value"
jdaggett@2515 6379 title="&lt;feature-tag-value&gt;"><strong>6.12</strong></a>
jdaggett@2515 6380
jdaggett@8225 6381 <li><var>&lt;font-face-name&gt;</var>, <a href="#font-face-name-value"
jdaggett@7060 6382 title="&lt;font-face-name&gt;"><strong>4.3</strong></a>
jdaggett@4624 6383
jdaggett@4624 6384 <li><var>&lt;font-variant-css21&gt;</var>, <a
jdaggett@8225 6385 href="#font-variant-css21-values"
jdaggett@4624 6386 title="&lt;font-variant-css21&gt;"><strong>3.7</strong></a>
jdaggett@4624 6387
jdaggett@8225 6388 <li><var>&lt;generic-family&gt;</var>, <a href="#generic-family-value"
jdaggett@8225 6389 title="&lt;generic-family&gt;"><strong>3.1</strong></a>
jdaggett@8225 6390
jdaggett@8225 6391 <li><var>&lt;historical-lig-values&gt;</var>, <a
jdaggett@8225 6392 href="#historical-lig-values"
jdaggett@8225 6393 title="&lt;historical-lig-values&gt;"><strong>6.4</strong></a>
jdaggett@8225 6394
jdaggett@8225 6395 <li><var>&lt;length&gt;</var>, <a href="#length-size-value"
jdaggett@8225 6396 title="&lt;length&gt;"><strong>3.5</strong></a>
jdaggett@8225 6397
jdaggett@8225 6398 <li><var>&lt;number&gt;</var>, <a href="#aspect-ratio-value"
jdaggett@8225 6399 title="&lt;number&gt;"><strong>3.6</strong></a>
jdaggett@4624 6400
jdaggett@4624 6401 <li><var>&lt;numeric-figure-values&gt;</var>, <a
jdaggett@8225 6402 href="#numeric-figure-values"
jdaggett@4624 6403 title="&lt;numeric-figure-values&gt;"><strong>6.7</strong></a>
jdaggett@4624 6404
jdaggett@4624 6405 <li><var>&lt;numeric-fraction-values&gt;</var>, <a
jdaggett@8225 6406 href="#numeric-fraction-values"
jdaggett@4624 6407 title="&lt;numeric-fraction-values&gt;"><strong>6.7</strong></a>
jdaggett@4624 6408
jdaggett@4624 6409 <li><var>&lt;numeric-spacing-values&gt;</var>, <a
jdaggett@8225 6410 href="#numeric-spacing-values"
jdaggett@4624 6411 title="&lt;numeric-spacing-values&gt;"><strong>6.7</strong></a>
jdaggett@4624 6412
jdaggett@8225 6413 <li><var>&lt;percentage&gt;</var>, <a href="#percentage-size-value"
jdaggett@8225 6414 title="&lt;percentage&gt;"><strong>3.5</strong></a>
jdaggett@8225 6415
jdaggett@8225 6416 <li><var>&lt;relative-size&gt;</var>, <a href="#relative-size-value"
jdaggett@7060 6417 title="&lt;relative-size&gt;"><strong>3.5</strong></a>
jdaggett@7060 6418
jdaggett@8278 6419 <li><var>&lt;string&gt;</var>, <a
jdaggett@8278 6420 href="#font-language-override-string-value"
jdaggett@8278 6421 title="&lt;string&gt;"><strong>6.13</strong></a>
jdaggett@8278 6422
jdaggett@8225 6423 <li><var>&lt;urange&gt;</var>, <a href="#urange-value"
jdaggett@8225 6424 title="&lt;urange&gt;"><strong>4.5</strong></a>
jdaggett@2479 6425
jdaggett@8311 6426 <li><code>@font-face</code>, <a href="#at-font-face-rule"
jdaggett@8311 6427 title="@font-face"><strong>4.1</strong></a>
jdaggett@8311 6428
jdaggett@8311 6429 <li><code>@font-feature-values</code>, <a
jdaggett@8311 6430 href="#at-font-feature-values-rule"
jdaggett@8311 6431 title="@font-feature-values"><strong>6.9</strong></a>
jdaggett@2479 6432
jdaggett@4624 6433 <li>all-petite-caps, <a href="#all-petite-caps"
jdaggett@4624 6434 title=all-petite-caps><strong>6.6</strong></a>
jdaggett@4624 6435
jdaggett@4624 6436 <li>all-small-caps, <a href="#all-small-caps"
jdaggett@4624 6437 title=all-small-caps><strong>6.6</strong></a>
jdaggett@4624 6438
jdaggett@8225 6439 <li>annotation, <a href="#annotation"
jdaggett@7060 6440 title=annotation><strong>6.8</strong></a>
jdaggett@4624 6441
jdaggett@4624 6442 <li>aspect value, <a href="#aspect-value0" title="aspect
jdaggett@4624 6443 value"><strong>3.6</strong></a>
jdaggett@4624 6444
jdaggett@7103 6445 <li>authoring tool, <a href="#authoring-tool" title="authoring
jdaggett@7243 6446 tool"><strong>#</strong></a>
jdaggett@7103 6447
jdaggett@8278 6448 <li>auto
jdaggett@8278 6449 <ul>
jdaggett@8278 6450 <li>font-kerning, <a href="#font-kerning-auto-value" title="auto,
jdaggett@8278 6451 font-kerning"><strong>6.3</strong></a>
jdaggett@8278 6452
jdaggett@8278 6453 <li>font-size-adjust, <a href="#font-size-adjust-auto-value"
jdaggett@8278 6454 title="auto, font-size-adjust"><strong>3.6</strong></a>
jdaggett@8278 6455 </ul>
jdaggett@8278 6456
jdaggett@8278 6457 <li>bold, <a href="#bold" title=bold><strong>3.2</strong></a>
jdaggett@8278 6458
jdaggett@8278 6459 <li>bolder, <a href="#bolder" title=bolder><strong>3.2</strong></a>
jdaggett@8278 6460
jdaggett@7311 6461 <li>character map, <a href="#character-map" title="character
jdaggett@7311 6462 map"><strong>5.2</strong></a>
jdaggett@7311 6463
jdaggett@8225 6464 <li>character-variant, <a href="#character-variant"
jdaggett@7060 6465 title=character-variant><strong>6.8</strong></a>
jdaggett@4624 6466
jdaggett@4624 6467 <li>common-ligatures, <a href="#common-ligatures"
jdaggett@6176 6468 title=common-ligatures><strong>6.4</strong></a>
jdaggett@4624 6469
jdaggett@8391 6470 <li>composite face, <a href="#composite-face" title="composite
jdaggett@8391 6471 face"><strong>5.2</strong></a>
jdaggett@8391 6472
jdaggett@8278 6473 <li>condensed, <a href="#condensed"
jdaggett@8278 6474 title=condensed><strong>3.3</strong></a>
jdaggett@8278 6475
jdaggett@4624 6476 <li>contextual, <a href="#contextual"
jdaggett@6176 6477 title=contextual><strong>6.4</strong></a>
jdaggett@4624 6478
jdaggett@7021 6479 <li>CSSFontFaceRule, <a href="#cssfontfacerule"
jdaggett@7021 6480 title=CSSFontFaceRule><strong>8.1</strong></a>
jdaggett@7021 6481
jdaggett@7021 6482 <li>CSSFontFeatureValuesRule, <a href="#cssfontfeaturevaluesrule"
jdaggett@7021 6483 title=CSSFontFeatureValuesRule><strong>8.2</strong></a>
jdaggett@7021 6484
jdaggett@4624 6485 <li>cursive, definition of, <a href="#cursive0" title="cursive, definition
jdaggett@4624 6486 of"><strong>#</strong></a>
jdaggett@4624 6487
jdaggett@7232 6488 <li>default face, <a href="#default-face" title="default
jdaggett@7309 6489 face"><strong>5.2</strong></a>
jdaggett@7232 6490
jdaggett@8031 6491 <li>descriptor_declaration, <a href="#descriptordeclaration"
jdaggett@8031 6492 title="descriptor_declaration"><strong>4.1</strong></a>
jdaggett@8031 6493
jdaggett@4624 6494 <li>diagonal-fractions, <a href="#diagonal-fractions"
jdaggett@4624 6495 title=diagonal-fractions><strong>6.7</strong></a>
jdaggett@4624 6496
jdaggett@4624 6497 <li>discretionary-ligatures, <a href="#discretionary-ligatures"
jdaggett@6176 6498 title=discretionary-ligatures><strong>6.4</strong></a>
jdaggett@4624 6499
jdaggett@8391 6500 <li>effective character map, <a href="#effective-character-map"
jdaggett@8391 6501 title="effective character map"><strong>4.5</strong></a>
jdaggett@8391 6502
jdaggett@8278 6503 <li>expanded, <a href="#expanded" title=expanded><strong>3.3</strong></a>
jdaggett@8278 6504
jdaggett@8278 6505 <li>extra-condensed, <a href="#extra-condensed"
jdaggett@8278 6506 title=extra-condensed><strong>3.3</strong></a>
jdaggett@8278 6507
jdaggett@8278 6508 <li>extra-expanded, <a href="#extra-expanded"
jdaggett@8278 6509 title=extra-expanded><strong>3.3</strong></a>
jdaggett@8278 6510
jdaggett@4624 6511 <li>fantasy, definition of, <a href="#fantasy0" title="fantasy, definition
jdaggett@4624 6512 of"><strong>#</strong></a>
jdaggett@4624 6513
jdaggett@8031 6514 <li>feature_type, <a href="#featuretype"
jdaggett@8356 6515 title="feature_type"><strong>6.9.1</strong></a>
jdaggett@8031 6516
jdaggett@8031 6517 <li>feature_value_block, <a href="#featurevalueblock"
jdaggett@8356 6518 title="feature_value_block"><strong>6.9.1</strong></a>
jdaggett@8031 6519
jdaggett@8031 6520 <li>feature_value_definition, <a href="#featurevaluedefinition"
jdaggett@8356 6521 title="feature_value_definition"><strong>6.9.1</strong></a>
jdaggett@7679 6522
jdaggett@8431 6523 <li>first available font, <a href="#first-available-font" title="first
jdaggett@8431 6524 available font"><strong>5.2</strong></a>
jdaggett@8431 6525
jdaggett@4624 6526 <li>font, <a href="#propdef-font" title=font><strong>3.7</strong></a>
jdaggett@2472 6527
jdaggett@8356 6528 <li>font specific, <a href="#font-specific" title="font
jdaggett@8356 6529 specific"><strong>6.8</strong></a>
jdaggett@8356 6530
jdaggett@8278 6531 <li>font-family
jdaggett@8278 6532 <ul>
jdaggett@8278 6533 <li>descriptor, <a href="#descdef-font-family" title="font-family,
jdaggett@8278 6534 descriptor"><strong>4.2</strong></a>
jdaggett@8278 6535
jdaggett@8278 6536 <li>property, <a href="#propdef-font-family" title="font-family,
jdaggett@8278 6537 property"><strong>3.1</strong></a>
jdaggett@8278 6538 </ul>
jdaggett@1662 6539
jdaggett@8279 6540 <li>font-feature-settings
jdaggett@8278 6541 <ul>
jdaggett@8278 6542 <li>descriptor, <a href="#descdef-font-feature-settings"
jdaggett@8278 6543 title="font-feature-settings, descriptor"><strong>4.7</strong></a>
jdaggett@8279 6544
jdaggett@8279 6545 <li>property, <a href="#propdef-font-feature-settings"
jdaggett@8279 6546 title="font-feature-settings, property"><strong>6.12</strong></a>
jdaggett@8278 6547 </ul>
jdaggett@7060 6548
jdaggett@1662 6549 <li>font-kerning, <a href="#propdef-font-kerning"
jdaggett@1856 6550 title=font-kerning><strong>6.3</strong></a>
jdaggett@1662 6551
jdaggett@1732 6552 <li>font-language-override, <a href="#propdef-font-language-override"
jdaggett@2118 6553 title=font-language-override><strong>6.13</strong></a>
jdaggett@1662 6554
jdaggett@1662 6555 <li>font-size, <a href="#propdef-font-size"
jdaggett@1662 6556 title=font-size><strong>3.5</strong></a>
jdaggett@1662 6557
jdaggett@1662 6558 <li>font-size-adjust, <a href="#propdef-font-size-adjust"
jdaggett@1662 6559 title=font-size-adjust><strong>3.6</strong></a>
jdaggett@1662 6560
jdaggett@8278 6561 <li>font-stretch
jdaggett@8278 6562 <ul>
jdaggett@8278 6563 <li>descriptor, <a href="#descdef-font-stretch" title="font-stretch,
jdaggett@8278 6564 descriptor"><strong>4.4</strong></a>
jdaggett@8278 6565
jdaggett@8278 6566 <li>property, <a href="#propdef-font-stretch" title="font-stretch,
jdaggett@8278 6567 property"><strong>3.3</strong></a>
jdaggett@8278 6568 </ul>
jdaggett@8278 6569
jdaggett@8278 6570 <li>font-style
jdaggett@8278 6571 <ul>
jdaggett@8278 6572 <li>descriptor, <a href="#descdef-font-style" title="font-style,
jdaggett@8278 6573 descriptor"><strong>4.4</strong></a>
jdaggett@8278 6574
jdaggett@8278 6575 <li>property, <a href="#propdef-font-style" title="font-style,
jdaggett@8278 6576 property"><strong>3.4</strong></a>
jdaggett@8278 6577 </ul>
jdaggett@7060 6578
jdaggett@2487 6579 <li>font-synthesis, <a href="#propdef-font-synthesis"
jdaggett@2487 6580 title=font-synthesis><strong>3.8</strong></a>
jdaggett@2457 6581
jdaggett@8278 6582 <li>font-variant
jdaggett@8278 6583 <ul>
jdaggett@8278 6584 <li>descriptor, <a href="#descdef-font-variant" title="font-variant,
jdaggett@8278 6585 descriptor"><strong>4.7</strong></a>
jdaggett@8278 6586
jdaggett@8278 6587 <li>property, <a href="#propdef-font-variant" title="font-variant,
jdaggett@8278 6588 property"><strong>6.11</strong></a>
jdaggett@8278 6589 </ul>
jdaggett@1662 6590
jdaggett@1662 6591 <li>font-variant-alternates, <a href="#propdef-font-variant-alternates"
jdaggett@2118 6592 title=font-variant-alternates><strong>6.8</strong></a>
jdaggett@1662 6593
jdaggett@1662 6594 <li>font-variant-caps, <a href="#propdef-font-variant-caps"
jdaggett@2118 6595 title=font-variant-caps><strong>6.6</strong></a>
jdaggett@1732 6596
jdaggett@1662 6597 <li>font-variant-east-asian, <a href="#propdef-font-variant-east-asian"
jdaggett@2118 6598 title=font-variant-east-asian><strong>6.10</strong></a>
jdaggett@1662 6599
jdaggett@1662 6600 <li>font-variant-ligatures, <a href="#propdef-font-variant-ligatures"
jdaggett@6176 6601 title=font-variant-ligatures><strong>6.4</strong></a>
jdaggett@1662 6602
jdaggett@1662 6603 <li>font-variant-numeric, <a href="#propdef-font-variant-numeric"
jdaggett@2118 6604 title=font-variant-numeric><strong>6.7</strong></a>
jdaggett@2118 6605
jdaggett@3460 6606 <li>font-variant-position, <a href="#propdef-font-variant-position"
jdaggett@6176 6607 title=font-variant-position><strong>6.5</strong></a>
jdaggett@3460 6608
jdaggett@8278 6609 <li>font-weight
jdaggett@8278 6610 <ul>
jdaggett@8278 6611 <li>descriptor, <a href="#descdef-font-weight" title="font-weight,
jdaggett@8278 6612 descriptor"><strong>4.4</strong></a>
jdaggett@8278 6613
jdaggett@8278 6614 <li>property, <a href="#propdef-font-weight" title="font-weight,
jdaggett@8278 6615 property"><strong>3.2</strong></a>
jdaggett@8278 6616 </ul>
jdaggett@1662 6617
jdaggett@8031 6618 <li>font_face_rule, <a href="#fontfacerule"
jdaggett@8031 6619 title="font_face_rule"><strong>4.1</strong></a>
jdaggett@8031 6620
jdaggett@8225 6621 <li>FONT_FACE_SYM, <a href="#fontfacesym"
jdaggett@8225 6622 title="FONT_FACE_SYM"><strong>4.1</strong></a>
jdaggett@8225 6623
jdaggett@8031 6624 <li>font_family_name, <a href="#fontfamilyname"
jdaggett@8356 6625 title="font_family_name"><strong>6.9.1</strong></a>
jdaggett@8031 6626
jdaggett@8031 6627 <li>font_family_name_list, <a href="#fontfamilynamelist"
jdaggett@8356 6628 title="font_family_name_list"><strong>6.9.1</strong></a>
jdaggett@8031 6629
jdaggett@8031 6630 <li>font_feature_values_rule, <a href="#fontfeaturevaluesrule"
jdaggett@8356 6631 title="font_feature_values_rule"><strong>6.9.1</strong></a>
jdaggett@8031 6632
jdaggett@8225 6633 <li>FONT_FEATURE_VALUES_SYM, <a href="#fontfeaturevaluessym"
jdaggett@8356 6634 title="FONT_FEATURE_VALUES_SYM"><strong>6.9.1</strong></a>
jdaggett@8225 6635
jdaggett@1662 6636 <li>full-width, <a href="#full-width"
jdaggett@2118 6637 title=full-width><strong>6.10</strong></a>
jdaggett@1662 6638
jdaggett@1662 6639 <li>historical-forms, <a href="#historical-forms"
jdaggett@2118 6640 title=historical-forms><strong>6.8</strong></a>
jdaggett@1662 6641
jdaggett@1662 6642 <li>historical-ligatures, <a href="#historical-ligatures"
jdaggett@6176 6643 title=historical-ligatures><strong>6.4</strong></a>
jdaggett@1732 6644
jdaggett@8278 6645 <li>italic, <a href="#italic" title=italic><strong>3.4</strong></a>
jdaggett@8278 6646
jdaggett@2118 6647 <li>jis04, <a href="#jis04" title=jis04><strong>6.10</strong></a>
jdaggett@2118 6648
jdaggett@2118 6649 <li>jis78, <a href="#jis78" title=jis78><strong>6.10</strong></a>
jdaggett@2118 6650
jdaggett@2118 6651 <li>jis83, <a href="#jis83" title=jis83><strong>6.10</strong></a>
jdaggett@2118 6652
jdaggett@2118 6653 <li>jis90, <a href="#jis90" title=jis90><strong>6.10</strong></a>
jdaggett@1662 6654
jdaggett@8278 6655 <li>lighter, <a href="#lighter" title=lighter><strong>3.2</strong></a>
jdaggett@8278 6656
jdaggett@1662 6657 <li>lining-nums, <a href="#lining-nums"
jdaggett@2118 6658 title=lining-nums><strong>6.7</strong></a>
jdaggett@890 6659
jdaggett@890 6660 <li>monospace, definition of, <a href="#monospace0" title="monospace,
jdaggett@890 6661 definition of"><strong>#</strong></a>
jdaggett@890 6662
jdaggett@1662 6663 <li>no-common-ligatures, <a href="#no-common-ligatures"
jdaggett@6176 6664 title=no-common-ligatures><strong>6.4</strong></a>
jdaggett@1662 6665
jdaggett@1662 6666 <li>no-contextual, <a href="#no-contextual"
jdaggett@6176 6667 title=no-contextual><strong>6.4</strong></a>
jdaggett@1662 6668
jdaggett@3460 6669 <li>no-discretionary-ligatures, <a href="#no-discretionary-ligatures"
jdaggett@6176 6670 title=no-discretionary-ligatures><strong>6.4</strong></a>
jdaggett@3460 6671
jdaggett@1662 6672 <li>no-historical-ligatures, <a href="#no-historical-ligatures"
jdaggett@6176 6673 title=no-historical-ligatures><strong>6.4</strong></a>
jdaggett@1662 6674
jdaggett@8278 6675 <li>none
jdaggett@8278 6676 <ul>
jdaggett@8278 6677 <li>font-kerning, <a href="#font-kerning-none-value" title="none,
jdaggett@8278 6678 font-kerning"><strong>6.3</strong></a>
jdaggett@8278 6679
jdaggett@8278 6680 <li>font-size-adjust, <a href="#font-size-adjust-none-value"
jdaggett@8278 6681 title="none, font-size-adjust"><strong>3.6</strong></a>
jdaggett@8278 6682
jdaggett@8278 6683 <li>font-variant, <a href="#font-variant-none-value" title="none,
jdaggett@8278 6684 font-variant"><strong>6.11</strong></a>
jdaggett@8278 6685
jdaggett@8278 6686 <li>font-variant-ligatures, <a href="#font-variant-ligatures-none-value"
jdaggett@8278 6687 title="none, font-variant-ligatures"><strong>6.4</strong></a>
jdaggett@8278 6688 </ul>
jdaggett@8278 6689
jdaggett@8368 6690 <li>normal
jdaggett@8278 6691 <ul>
jdaggett@8278 6692 <li>font-feature-settings, <a href="#font-feature-settings-normal-value"
jdaggett@8278 6693 title="normal, font-feature-settings"><strong>6.12</strong></a>
jdaggett@8278 6694
jdaggett@8278 6695 <li>font-kerning, <a href="#font-kerning-normal-value" title="normal,
jdaggett@8278 6696 font-kerning"><strong>6.3</strong></a>
jdaggett@8278 6697
jdaggett@8278 6698 <li>font-language-override, <a
jdaggett@8278 6699 href="#font-language-override-normal-value" title="normal,
jdaggett@8278 6700 font-language-override"><strong>6.13</strong></a>
jdaggett@8278 6701
jdaggett@8278 6702 <li>font-stretch, <a href="#font-stretch-normal-value" title="normal,
jdaggett@8278 6703 font-stretch"><strong>3.3</strong></a>
jdaggett@8278 6704
jdaggett@8278 6705 <li>font-style, <a href="#font-style-normal-value" title="normal,
jdaggett@8278 6706 font-style"><strong>3.4</strong></a>
jdaggett@8278 6707
jdaggett@8278 6708 <li>font-variant, <a href="#font-variant-normal-value" title="normal,
jdaggett@8278 6709 font-variant"><strong>6.11</strong></a>
jdaggett@8278 6710
jdaggett@8278 6711 <li>font-variant-alternates, <a
jdaggett@8278 6712 href="#font-variant-alternates-normal-value" title="normal,
jdaggett@8278 6713 font-variant-alternates"><strong>6.8</strong></a>
jdaggett@8278 6714
jdaggett@8278 6715 <li>font-variant-caps, <a href="#font-variant-caps-normal-value"
jdaggett@8278 6716 title="normal, font-variant-caps"><strong>6.6</strong></a>
jdaggett@8278 6717
jdaggett@8278 6718 <li>font-variant-east-asian, <a
jdaggett@8278 6719 href="#font-variant-east-asian-normal-value" title="normal,
jdaggett@8278 6720 font-variant-east-asian"><strong>6.10</strong></a>
jdaggett@8278 6721
jdaggett@8278 6722 <li>font-variant-ligatures, <a
jdaggett@8278 6723 href="#font-variant-ligatures-normal-value" title="normal,
jdaggett@8278 6724 font-variant-ligatures"><strong>6.4</strong></a>
jdaggett@8278 6725
jdaggett@8278 6726 <li>font-variant-numeric, <a href="#font-variant-numeric-normal-value"
jdaggett@8278 6727 title="normal, font-variant-numeric"><strong>6.7</strong></a>
jdaggett@8278 6728
jdaggett@8368 6729 <li>font-variant-position, <a href="#font-variant-position-normal-value"
jdaggett@8368 6730 title="normal, font-variant-position"><strong>6.5</strong></a>
jdaggett@8368 6731
jdaggett@8278 6732 <li>font-weight, <a href="#font-weight-normal-value" title="normal,
jdaggett@8278 6733 font-weight"><strong>3.2</strong></a>
jdaggett@8278 6734 </ul>
jdaggett@8278 6735
jdaggett@8278 6736 <li>oblique, <a href="#oblique" title=oblique><strong>3.4</strong></a>
jdaggett@5809 6737
jdaggett@1662 6738 <li>oldstyle-nums, <a href="#oldstyle-nums"
jdaggett@2118 6739 title=oldstyle-nums><strong>6.7</strong></a>
jdaggett@2118 6740
jdaggett@3638 6741 <li>ordinal, <a href="#ordinal" title=ordinal><strong>6.7</strong></a>
jdaggett@3638 6742
jdaggett@8225 6743 <li>ornaments, <a href="#ornaments"
jdaggett@7060 6744 title=ornaments><strong>6.8</strong></a>
jdaggett@2118 6745
jdaggett@1662 6746 <li>petite-caps, <a href="#petite-caps"
jdaggett@2118 6747 title=petite-caps><strong>6.6</strong></a>
jdaggett@1662 6748
jdaggett@1662 6749 <li>proportional-nums, <a href="#proportional-nums"
jdaggett@2118 6750 title=proportional-nums><strong>6.7</strong></a>
jdaggett@1662 6751
jdaggett@1662 6752 <li>proportional-width, <a href="#proportional-width"
jdaggett@2118 6753 title=proportional-width><strong>6.10</strong></a>
jdaggett@512 6754
jdaggett@7243 6755 <li>renderer, <a href="#renderer" title=renderer><strong>#</strong></a>
jdaggett@7103 6756
jdaggett@3638 6757 <li>ruby, <a href="#ruby" title=ruby><strong>6.10</strong></a>
jdaggett@1662 6758
jdaggett@890 6759 <li>sans-serif, definition of, <a href="#sans-serif0" title="sans-serif,
jdaggett@890 6760 definition of"><strong>#</strong></a>
jdaggett@890 6761
jdaggett@8278 6762 <li>semi-condensed, <a href="#semi-condensed-"
jdaggett@8278 6763 title=semi-condensed><strong>3.3</strong></a>
jdaggett@8278 6764
jdaggett@8278 6765 <li>semi-expanded, <a href="#semi-expanded"
jdaggett@8278 6766 title=semi-expanded><strong>3.3</strong></a>
jdaggett@8278 6767
jdaggett@890 6768 <li>serif, definition of, <a href="#serif0" title="serif, definition
jdaggett@890 6769 of"><strong>#</strong></a>
jdaggett@890 6770
jdaggett@2504 6771 <li>simplified, <a href="#simplified"
jdaggett@2504 6772 title=simplified><strong>6.10</strong></a>
jdaggett@1662 6773
jdaggett@1662 6774 <li>slashed-zero, <a href="#slashed-zero"
jdaggett@2118 6775 title=slashed-zero><strong>6.7</strong></a>
jdaggett@1662 6776
jdaggett@1662 6777 <li>small-caps, <a href="#small-caps"
jdaggett@2118 6778 title=small-caps><strong>6.6</strong></a>
jdaggett@1662 6779
jdaggett@1662 6780 <li>src, <a href="#descdef-src" title=src><strong>4.3</strong></a>
jdaggett@1662 6781
jdaggett@1662 6782 <li>stacked-fractions, <a href="#stacked-fractions"
jdaggett@2118 6783 title=stacked-fractions><strong>6.7</strong></a>
jdaggett@2118 6784
jdaggett@7103 6785 <li>style sheet
jdaggett@7103 6786 <ul>
jdaggett@7103 6787 <li>as conformance class, <a href="#style-sheet" title="style sheet, as
jdaggett@7243 6788 conformance class"><strong>#</strong></a>
jdaggett@7103 6789 </ul>
jdaggett@7103 6790
jdaggett@8225 6791 <li>styleset, <a href="#styleset" title=styleset><strong>6.8</strong></a>
jdaggett@8225 6792
jdaggett@8225 6793 <li>stylistic, <a href="#stylistic"
jdaggett@7060 6794 title=stylistic><strong>6.8</strong></a>
jdaggett@7060 6795
jdaggett@8279 6796 <li>sub, <a href="#sub" title=sub><strong>6.5</strong></a>
jdaggett@8279 6797
jdaggett@8279 6798 <li>super, <a href="#super" title=super><strong>6.5</strong></a>
jdaggett@8279 6799
jdaggett@8397 6800 <li>support, <a href="#support" title=support><strong>5.2</strong></a>
jdaggett@8397 6801
jdaggett@8225 6802 <li>swash, <a href="#swash" title=swash><strong>6.8</strong></a>
jdaggett@1662 6803
jdaggett@8363 6804 <li>system font fallback, <a href="#system-font-fallback" title="system
jdaggett@8363 6805 font fallback"><strong>5.2</strong></a>
jdaggett@8363 6806
jdaggett@1662 6807 <li>tabular-nums, <a href="#tabular-nums"
jdaggett@2118 6808 title=tabular-nums><strong>6.7</strong></a>
jdaggett@1662 6809
jdaggett@1662 6810 <li>titling-caps, <a href="#titling-caps"
jdaggett@2118 6811 title=titling-caps><strong>6.6</strong></a>
jdaggett@1856 6812
jdaggett@2504 6813 <li>traditional, <a href="#traditional"
jdaggett@2504 6814 title=traditional><strong>6.10</strong></a>
jdaggett@2118 6815
jdaggett@8278 6816 <li>ultra-condensed, <a href="#ultra-condensed"
jdaggett@8278 6817 title=ultra-condensed><strong>3.3</strong></a>
jdaggett@8278 6818
jdaggett@8278 6819 <li>ultra-expanded, <a href="#ultra-expanded"
jdaggett@8278 6820 title=ultra-expanded><strong>3.3</strong></a>
jdaggett@8278 6821
jdaggett@2118 6822 <li>unicase, <a href="#unicase" title=unicase><strong>6.6</strong></a>
jdaggett@1662 6823
jdaggett@1662 6824 <li>unicode-range, <a href="#descdef-unicode-range"
jdaggett@890 6825 title=unicode-range><strong>4.5</strong></a>
jdaggett@7311 6826
jdaggett@7311 6827 <li>weight, <a href="#weight" title=weight><strong>2</strong></a>
jdaggett@7311 6828
jdaggett@7311 6829 <li>width, <a href="#width" title=width><strong>2</strong></a>
jdaggett@484 6830 </ul>
jdaggett@484 6831 <!--end-index-->
jdaggett@484 6832
jdaggett@484 6833 <h2 class=no-num id=property-index>Property index</h2>
jdaggett@890 6834 <!--begin-properties-->
jdaggett@484 6835
jdaggett@484 6836 <table class=proptable>
jdaggett@484 6837 <thead>
jdaggett@484 6838 <tr>
jdaggett@484 6839 <th>Property
jdaggett@484 6840
jdaggett@484 6841 <th>Values
jdaggett@484 6842
jdaggett@484 6843 <th>Initial
jdaggett@484 6844
jdaggett@1148 6845 <th>Applies to
jdaggett@484 6846
jdaggett@484 6847 <th>Inh.
jdaggett@484 6848
jdaggett@484 6849 <th>Percentages
jdaggett@484 6850
jdaggett@484 6851 <th>Media
jdaggett@484 6852
jdaggett@484 6853 <tbody>
jdaggett@3460 6854 <tr>
jdaggett@3460 6855 <th><a class=property href="#propdef-font">font</a>
jdaggett@484 6856
jdaggett@8225 6857 <td>[ [ &lt;‘font-style’&gt; || &lt;font-variant-css21&gt; ||
jdaggett@8225 6858 &lt;‘font-weight’&gt; || &lt;‘font-stretch’ ]?
jdaggett@8225 6859 &lt;‘font-size’&gt; [ / &lt;‘line-height’&gt; ]?
jdaggett@8225 6860 &lt;‘font-family’&gt; ] | caption | icon | menu | message-box |
jdaggett@7020 6861 small-caption | status-bar
jdaggett@484 6862
jdaggett@484 6863 <td>see individual properties
jdaggett@484 6864
jdaggett@484 6865 <td>all elements
jdaggett@484 6866
jdaggett@484 6867 <td>yes
jdaggett@484 6868
jdaggett@484 6869 <td>see individual properties
jdaggett@484 6870
jdaggett@484 6871 <td>visual
jdaggett@484 6872
jdaggett@3460 6873 <tr>
jdaggett@8278 6874 <th><span class=property>font-family</span>
jdaggett@484 6875
jdaggett@8225 6876 <td>[ &lt;family-name&gt; | &lt;generic-family&gt; ] #
jdaggett@484 6877
jdaggett@484 6878 <td>depends on user agent
jdaggett@484 6879
jdaggett@484 6880 <td>all elements
jdaggett@484 6881
jdaggett@484 6882 <td>yes
jdaggett@484 6883
jdaggett@484 6884 <td>N/A
jdaggett@484 6885
jdaggett@484 6886 <td>visual
jdaggett@484 6887
jdaggett@3460 6888 <tr>
jdaggett@8279 6889 <th><span class=property>font-feature-settings</span>
jdaggett@1662 6890
jdaggett@8225 6891 <td>normal | &lt;feature-tag-value&gt; #
jdaggett@1662 6892
jdaggett@1662 6893 <td>normal
jdaggett@1662 6894
jdaggett@1662 6895 <td>all elements
jdaggett@1662 6896
jdaggett@1662 6897 <td>yes
jdaggett@1662 6898
jdaggett@1662 6899 <td>N/A
jdaggett@1662 6900
jdaggett@1662 6901 <td>visual
jdaggett@1662 6902
jdaggett@3460 6903 <tr>
jdaggett@3460 6904 <th><a class=property href="#propdef-font-kerning">font-kerning</a>
jdaggett@1662 6905
jdaggett@1856 6906 <td>auto | normal | none
jdaggett@1856 6907
jdaggett@1856 6908 <td>auto
jdaggett@1662 6909
jdaggett@1662 6910 <td>all elements
jdaggett@1662 6911
jdaggett@1662 6912 <td>yes
jdaggett@1662 6913
jdaggett@1662 6914 <td>N/A
jdaggett@1662 6915
jdaggett@1662 6916 <td>visual
jdaggett@1662 6917
jdaggett@3460 6918 <tr>
jdaggett@3460 6919 <th><a class=property
jdaggett@1732 6920 href="#propdef-font-language-override">font-language-override</a>
jdaggett@1662 6921
jdaggett@5809 6922 <td>normal | &lt;string&gt;
jdaggett@1662 6923
jdaggett@1662 6924 <td>normal
jdaggett@1662 6925
jdaggett@1662 6926 <td>all elements
jdaggett@1662 6927
jdaggett@1662 6928 <td>yes
jdaggett@1662 6929
jdaggett@1662 6930 <td>N/A
jdaggett@1662 6931
jdaggett@1662 6932 <td>visual
jdaggett@1662 6933
jdaggett@3460 6934 <tr>
jdaggett@3460 6935 <th><a class=property href="#propdef-font-size">font-size</a>
jdaggett@484 6936
jdaggett@8225 6937 <td>&lt;absolute-size&gt; | &lt;relative-size&gt; | &lt;length&gt; |
jdaggett@8225 6938 &lt;percentage&gt;
jdaggett@484 6939
jdaggett@484 6940 <td>medium
jdaggett@484 6941
jdaggett@484 6942 <td>all elements
jdaggett@484 6943
jdaggett@484 6944 <td>yes
jdaggett@484 6945
jdaggett@484 6946 <td>refer to parent element's font size
jdaggett@484 6947
jdaggett@484 6948 <td>visual
jdaggett@484 6949
jdaggett@3460 6950 <tr>
jdaggett@3460 6951 <th><a class=property
jdaggett@1662 6952 href="#propdef-font-size-adjust">font-size-adjust</a>
jdaggett@484 6953
jdaggett@8225 6954 <td>none | auto | &lt;number&gt;
jdaggett@484 6955
jdaggett@484 6956 <td>none
jdaggett@484 6957
jdaggett@484 6958 <td>all elements
jdaggett@484 6959
jdaggett@484 6960 <td>yes
jdaggett@484 6961
jdaggett@554 6962 <td>N/A
jdaggett@484 6963
jdaggett@484 6964 <td>visual
jdaggett@484 6965
jdaggett@3460 6966 <tr>
jdaggett@8278 6967 <th><span class=property>font-stretch</span>
jdaggett@1662 6968
jdaggett@1662 6969 <td>normal | ultra-condensed | extra-condensed | condensed |
jdaggett@1662 6970 semi-condensed | semi-expanded | expanded | extra-expanded |
jdaggett@5809 6971 ultra-expanded
jdaggett@484 6972
jdaggett@484 6973 <td>normal
jdaggett@484 6974
jdaggett@484 6975 <td>all elements
jdaggett@484 6976
jdaggett@484 6977 <td>yes
jdaggett@484 6978
jdaggett@484 6979 <td>N/A
jdaggett@484 6980
jdaggett@484 6981 <td>visual
jdaggett@484 6982
jdaggett@3460 6983 <tr>
jdaggett@8278 6984 <th><span class=property>font-style</span>
jdaggett@484 6985
jdaggett@5809 6986 <td>normal | italic | oblique
jdaggett@484 6987
jdaggett@484 6988 <td>normal
jdaggett@484 6989
jdaggett@484 6990 <td>all elements
jdaggett@484 6991
jdaggett@484 6992 <td>yes
jdaggett@484 6993
jdaggett@484 6994 <td>N/A
jdaggett@484 6995
jdaggett@484 6996 <td>visual
jdaggett@484 6997
jdaggett@3460 6998 <tr>
jdaggett@3460 6999 <th><a class=property href="#propdef-font-synthesis">font-synthesis</a>
jdaggett@2487 7000
jdaggett@2487 7001 <td>none | [ weight || style ]
jdaggett@2487 7002
jdaggett@2487 7003 <td>weight style
jdaggett@2457 7004
jdaggett@2457 7005 <td>all elements
jdaggett@2457 7006
jdaggett@2457 7007 <td>yes
jdaggett@2457 7008
jdaggett@2457 7009 <td>N/A
jdaggett@2457 7010
jdaggett@2457 7011 <td>visual
jdaggett@2457 7012
jdaggett@3460 7013 <tr>
jdaggett@8278 7014 <th><span class=property>font-variant</span>
jdaggett@1662 7015
jdaggett@6436 7016 <td>normal | none | [ &lt;common-lig-values&gt; ||
jdaggett@3460 7017 &lt;discretionary-lig-values&gt; || &lt;historical-lig-values&gt; ||
jdaggett@3041 7018 &lt;contextual-alt-values&gt; || stylistic(&lt;feature-value-name&gt;)
jdaggett@8225 7019 || historical-forms || styleset(&lt;feature-value-name&gt; #) ||
jdaggett@8225 7020 character-variant(&lt;feature-value-name&gt; #) ||
jdaggett@5833 7021 swash(&lt;feature-value-name&gt;) ||
jdaggett@3041 7022 ornaments(&lt;feature-value-name&gt;) ||
jdaggett@4545 7023 annotation(&lt;feature-value-name&gt;) || [ small-caps | all-small-caps
jdaggett@6648 7024 | petite-caps | all-petite-caps | unicase | titling-caps ] ||
jdaggett@2509 7025 &lt;numeric-figure-values&gt; || &lt;numeric-spacing-values&gt; ||
jdaggett@3638 7026 &lt;numeric-fraction-values&gt; || ordinal || slashed-zero ||
jdaggett@3638 7027 &lt;east-asian-variant-values&gt; || &lt;east-asian-width-values&gt; ||
jdaggett@3638 7028 ruby ]
jdaggett@484 7029
jdaggett@484 7030 <td>normal
jdaggett@484 7031
jdaggett@484 7032 <td>all elements
jdaggett@484 7033
jdaggett@484 7034 <td>yes
jdaggett@484 7035
jdaggett@7377 7036 <td>see individual properties
jdaggett@484 7037
jdaggett@484 7038 <td>visual
jdaggett@484 7039
jdaggett@3460 7040 <tr>
jdaggett@3460 7041 <th><a class=property
jdaggett@1662 7042 href="#propdef-font-variant-alternates">font-variant-alternates</a>
jdaggett@1662 7043
jdaggett@6176 7044 <td>normal | [ stylistic(&lt;feature-value-name&gt;) || historical-forms
jdaggett@8225 7045 || styleset(&lt;feature-value-name&gt; #) ||
jdaggett@8225 7046 character-variant(&lt;feature-value-name&gt; #) ||
jdaggett@5833 7047 swash(&lt;feature-value-name&gt;) ||
jdaggett@3638 7048 ornaments(&lt;feature-value-name&gt;) ||
jdaggett@3638 7049 annotation(&lt;feature-value-name&gt;) ]
jdaggett@1662 7050
jdaggett@1662 7051 <td>normal
jdaggett@1662 7052
jdaggett@1662 7053 <td>all elements
jdaggett@1662 7054
jdaggett@1662 7055 <td>yes
jdaggett@1662 7056
jdaggett@1662 7057 <td>N/A
jdaggett@1662 7058
jdaggett@1662 7059 <td>visual
jdaggett@1662 7060
jdaggett@3460 7061 <tr>
jdaggett@3460 7062 <th><a class=property
jdaggett@1662 7063 href="#propdef-font-variant-caps">font-variant-caps</a>
jdaggett@1662 7064
jdaggett@5809 7065 <td>normal | small-caps | all-small-caps | petite-caps | all-petite-caps
jdaggett@6648 7066 | unicase | titling-caps
jdaggett@1662 7067
jdaggett@1662 7068 <td>normal
jdaggett@1662 7069
jdaggett@1662 7070 <td>all elements
jdaggett@1662 7071
jdaggett@1662 7072 <td>yes
jdaggett@1662 7073
jdaggett@1662 7074 <td>N/A
jdaggett@1662 7075
jdaggett@1662 7076 <td>visual
jdaggett@1662 7077
jdaggett@3460 7078 <tr>
jdaggett@3460 7079 <th><a class=property
jdaggett@1662 7080 href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
jdaggett@1662 7081
jdaggett@5809 7082 <td>normal | [ &lt;east-asian-variant-values&gt; ||
jdaggett@3638 7083 &lt;east-asian-width-values&gt; || ruby ]
jdaggett@1662 7084
jdaggett@1662 7085 <td>normal
jdaggett@1662 7086
jdaggett@1662 7087 <td>all elements
jdaggett@1662 7088
jdaggett@1662 7089 <td>yes
jdaggett@1662 7090
jdaggett@1662 7091 <td>N/A
jdaggett@1662 7092
jdaggett@1662 7093 <td>visual
jdaggett@1662 7094
jdaggett@3460 7095 <tr>
jdaggett@3460 7096 <th><a class=property
jdaggett@1662 7097 href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
jdaggett@1662 7098
jdaggett@8225 7099 <td>normal | none | [ &lt;common-lig-values&gt; ||
jdaggett@8225 7100 &lt;discretionary-lig-values&gt; || &lt;historical-lig-values&gt; ||
jdaggett@8225 7101 &lt;contextual-alt-values&gt; ]
jdaggett@1662 7102
jdaggett@1662 7103 <td>normal
jdaggett@1662 7104
jdaggett@1662 7105 <td>all elements
jdaggett@1662 7106
jdaggett@1662 7107 <td>yes
jdaggett@1662 7108
jdaggett@1662 7109 <td>N/A
jdaggett@1662 7110
jdaggett@1662 7111 <td>visual
jdaggett@1662 7112
jdaggett@3460 7113 <tr>
jdaggett@3460 7114 <th><a class=property
jdaggett@1662 7115 href="#propdef-font-variant-numeric">font-variant-numeric</a>
jdaggett@1662 7116
jdaggett@5809 7117 <td>normal | [ &lt;numeric-figure-values&gt; ||
jdaggett@1732 7118 &lt;numeric-spacing-values&gt; || &lt;numeric-fraction-values&gt; ||
jdaggett@3638 7119 ordinal || slashed-zero ]
jdaggett@1662 7120
jdaggett@1662 7121 <td>normal
jdaggett@1662 7122
jdaggett@1662 7123 <td>all elements
jdaggett@1662 7124
jdaggett@1662 7125 <td>yes
jdaggett@1662 7126
jdaggett@1662 7127 <td>N/A
jdaggett@1662 7128
jdaggett@1662 7129 <td>visual
jdaggett@1662 7130
jdaggett@3460 7131 <tr>
jdaggett@3460 7132 <th><a class=property
jdaggett@3460 7133 href="#propdef-font-variant-position">font-variant-position</a>
jdaggett@3460 7134
jdaggett@3638 7135 <td>normal | sub | super
jdaggett@3460 7136
jdaggett@3460 7137 <td>normal
jdaggett@3460 7138
jdaggett@3460 7139 <td>all elements
jdaggett@3460 7140
jdaggett@3460 7141 <td>yes
jdaggett@3460 7142
jdaggett@3460 7143 <td>N/A
jdaggett@3460 7144
jdaggett@3460 7145 <td>visual
jdaggett@3460 7146
jdaggett@3460 7147 <tr>
jdaggett@8278 7148 <th><span class=property>font-weight</span>
jdaggett@484 7149
jdaggett@484 7150 <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600
jdaggett@5809 7151 | 700 | 800 | 900
jdaggett@484 7152
jdaggett@484 7153 <td>normal
jdaggett@484 7154
jdaggett@484 7155 <td>all elements
jdaggett@484 7156
jdaggett@484 7157 <td>yes
jdaggett@484 7158
jdaggett@484 7159 <td>N/A
jdaggett@484 7160
jdaggett@484 7161 <td>visual
jdaggett@484 7162 </table>
jdaggett@890 7163 <!--end-properties-->
jdaggett@5596 7164 <!--begin-descriptors-->
jdaggett@5596 7165
jdaggett@5596 7166 <table class=proptable>
jdaggett@5596 7167 <thead>
jdaggett@5596 7168 <tr>
jdaggett@5596 7169 <th>Descriptor
jdaggett@5596 7170
jdaggett@5596 7171 <th>Value
jdaggett@5596 7172
jdaggett@5596 7173 <th>Initial
jdaggett@5596 7174
jdaggett@5596 7175 <th>Percentages
jdaggett@5596 7176
jdaggett@5596 7177 <th>Media
jdaggett@5596 7178
jdaggett@5596 7179 <tbody>
jdaggett@5596 7180 <tr>
jdaggett@8278 7181 <th><span class=property>font-family</span>
jdaggett@5596 7182
jdaggett@8225 7183 <td>&lt;family-name&gt;
jdaggett@5596 7184
jdaggett@5596 7185 <td>N/A
jdaggett@5596 7186
jdaggett@5596 7187 <tr>
jdaggett@8279 7188 <th><span class=property>font-feature-settings</span>
jdaggett@5596 7189
jdaggett@8225 7190 <td>normal | &lt;feature-tag-value&gt; #
jdaggett@5596 7191
jdaggett@5596 7192 <td>normal
jdaggett@5596 7193
jdaggett@5596 7194 <tr>
jdaggett@8278 7195 <th><span class=property>font-stretch</span>
jdaggett@5596 7196
jdaggett@5596 7197 <td>normal | ultra-condensed | extra-condensed | condensed |
jdaggett@5596 7198 semi-condensed | semi-expanded | expanded | extra-expanded |
jdaggett@5596 7199 ultra-expanded
jdaggett@5596 7200
jdaggett@5596 7201 <td>normal
jdaggett@5596 7202
jdaggett@5596 7203 <tr>
jdaggett@8278 7204 <th><span class=property>font-style</span>
jdaggett@5596 7205
jdaggett@5596 7206 <td>normal | italic | oblique
jdaggett@5596 7207
jdaggett@5596 7208 <td>normal
jdaggett@5596 7209
jdaggett@5596 7210 <tr>
jdaggett@8278 7211 <th><span class=property>font-variant</span>
jdaggett@5596 7212
jdaggett@8225 7213 <td>normal | none | [ &lt;common-lig-values&gt; ||
jdaggett@5596 7214 &lt;discretionary-lig-values&gt; || &lt;historical-lig-values&gt; ||
jdaggett@5596 7215 &lt;contextual-alt-values&gt; || stylistic(&lt;feature-value-name&gt;)
jdaggett@8225 7216 || historical-forms || styleset(&lt;feature-value-name&gt; #) ||
jdaggett@8225 7217 character-variant(&lt;feature-value-name&gt; #) ||
jdaggett@5833 7218 swash(&lt;feature-value-name&gt;) ||
jdaggett@5596 7219 ornaments(&lt;feature-value-name&gt;) ||
jdaggett@5596 7220 annotation(&lt;feature-value-name&gt;) || [ small-caps | all-small-caps
jdaggett@6648 7221 | petite-caps | all-petite-caps | unicase | titling-caps ] ||
jdaggett@5596 7222 &lt;numeric-figure-values&gt; || &lt;numeric-spacing-values&gt; ||
jdaggett@5596 7223 &lt;numeric-fraction-values&gt; || ordinal || slashed-zero ||
jdaggett@5596 7224 &lt;east-asian-variant-values&gt; || &lt;east-asian-width-values&gt; ||
jdaggett@5596 7225 ruby ]
jdaggett@5596 7226
jdaggett@5596 7227 <td>normal
jdaggett@5596 7228
jdaggett@5596 7229 <tr>
jdaggett@8278 7230 <th><span class=property>font-weight</span>
jdaggett@5596 7231
jdaggett@5596 7232 <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
jdaggett@5596 7233
jdaggett@5596 7234 <td>normal
jdaggett@5596 7235
jdaggett@5596 7236 <tr>
jdaggett@5596 7237 <th><a class=property href="#descdef-src">src</a>
jdaggett@5596 7238
jdaggett@8225 7239 <td>[ &lt;url> [format(&lt;string> #)]? | &lt;font-face-name&gt; ] #
jdaggett@5596 7240
jdaggett@5596 7241 <td>N/A
jdaggett@5596 7242
jdaggett@5596 7243 <tr>
jdaggett@5596 7244 <th><a class=property href="#descdef-unicode-range">unicode-range</a>
jdaggett@5596 7245
jdaggett@8225 7246 <td>&lt;urange&gt; #
jdaggett@5596 7247
jdaggett@5596 7248 <td>U+0-10FFFF
jdaggett@5596 7249 </table>
jdaggett@5596 7250 <!--end-descriptors-->
jdaggett@6648 7251 <script type="text/javascript">
jdaggett@6648 7252 window.onload = function () {
jdaggett@6648 7253 if (!("devicePixelRatio" in window && window.devicePixelRatio > 1)) return;
jdaggett@6648 7254 var i, hiresElements = document.getElementsByClassName("hires");
jdaggett@6648 7255 for (i = 0; i < hiresElements.length; i++) {
jdaggett@6648 7256 var h = hiresElements[i];
jdaggett@6648 7257 if (h.tagName != "IMG") continue;
jdaggett@6648 7258 var src = h.getAttribute("src");
jdaggett@6648 7259 var src2x = src.replace(/\.\w+$/, function(m) { return "@2x" + m; });
jdaggett@6648 7260 h.src = src2x;
jdaggett@6648 7261 }
jdaggett@6648 7262 }
jdaggett@6648 7263 </script>
jdaggett@484 7264 </html>
jdaggett@484 7265 <!-- Keep this comment at the end of the file
jdaggett@484 7266 Local variables:
jdaggett@484 7267 mode: sgml
jdaggett@484 7268 sgml-declaration:"~/SGML/HTML4.decl"
jdaggett@484 7269 sgml-default-doctype-name:"html"
jdaggett@484 7270 sgml-minimize-attributes:t
jdaggett@484 7271 sgml-nofill-elements:("pre" "style" "br")
jdaggett@484 7272 sgml-live-element-indicator:t
jdaggett@484 7273 sgml-omittag:nil
jdaggett@484 7274 sgml-shorttag:nil
jdaggett@484 7275 sgml-namecase-general:t
jdaggett@484 7276 sgml-general-insert-case:lower
jdaggett@484 7277 sgml-always-quote-attributes:t
jdaggett@484 7278 sgml-indent-step:nil
jdaggett@484 7279 sgml-indent-data:t
jdaggett@484 7280 sgml-parent-document:nil
jdaggett@484 7281 sgml-exposed-tags:nil
jdaggett@484 7282 sgml-local-catalogs:nil
jdaggett@484 7283 sgml-local-ecat-files:nil
jdaggett@484 7284 End:
jdaggett@484 7285 -->
jdaggett@8277 7286 <!--
jdaggett@1856 7287
jdaggett@1856 7288 to do:
jdaggett@1856 7289
jdaggett@1856 7290 - wording of OpenType family name handling
jdaggett@1856 7291 - handling combining sequences in the font matching algorithm
jdaggett@1856 7292 - fix-up fi ligature example
jdaggett@1856 7293
jdaggett@1856 7294 -->

mercurial