css-fonts/Fonts.html

Tue, 17 Sep 2013 14:54:40 +0900

author
John Daggett <jdaggett@mozilla.com>
date
Tue, 17 Sep 2013 14:54:40 +0900
changeset 9208
7d9c2fad8498
parent 9207
b94272546db6
child 9209
0fd8e74f0ab3
permissions
-rw-r--r--

[css3-fonts] revert the change to the ISO OFF spec URL

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@8699 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@9207 118 <h2 class="no-num no-toc" id=editors-draft-17-september-2013>Editor's
jdaggett@9207 119 Draft 17 September 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@8699 125 href="http://dev.w3.org/csswg/css-fonts/">http://dev.w3.org/csswg/css-fonts/</a>
jdaggett@9207 126 <!-- <dd><a href="http://www.w3.org/TR/2013/ED-css-fonts-3-20130917/">http://www.w3.org/TR/2013/ED-css-fonts-3-20130917/</a> -->
jdaggett@8699 127
jdaggett@484 128
jdaggett@484 129 <dt>Latest version:
jdaggett@484 130
jdaggett@484 131 <dd><a
jdaggett@8699 132 href="http://www.w3.org/TR/css-fonts-3/">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@8699 145 href="http://www.w3.org/TR/2013/WD-css-fonts-3-20130711/">http://www.w3.org/TR/2013/WD-css-fonts-3-20130711/</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@8969 165 <dt>Test Suite:
jdaggett@8969 166
jdaggett@8969 167 <dd><a
jdaggett@8969 168 href="http://test.csswg.org/suites/css3-fonts/nightly-unstable/">http://test.csswg.org/suites/css3-fonts/nightly-unstable/</a>
jdaggett@8969 169
jdaggett@8969 170
jdaggett@890 171 <dt>Editor:
jdaggett@484 172
jdaggett@497 173 <dd><a href="mailto:jdaggett@mozilla.com">John Daggett (Mozilla)</a>
jdaggett@484 174 </dl>
jdaggett@484 175 <!--begin-copyright-->
jdaggett@484 176 <p class=copyright><a
jdaggett@484 177 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
jdaggett@7179 178 rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
jdaggett@5530 179 title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
jdaggett@5530 180 href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of
jdaggett@5530 181 Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr
jdaggett@1662 182 title="European Research Consortium for Informatics and
jdaggett@7244 183 Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>,
jdaggett@7244 184 <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C
jdaggett@7244 185 <a
jdaggett@484 186 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
jdaggett@484 187 <a
jdaggett@484 188 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
jdaggett@484 189 and <a
jdaggett@484 190 href="http://www.w3.org/Consortium/Legal/copyright-documents">document
jdaggett@484 191 use</a> rules apply.</p>
jdaggett@484 192 <!--end-copyright-->
jdaggett@484 193 <hr title="Separator for header">
jdaggett@484 194 </div>
jdaggett@525 195
jdaggett@484 196 <h2 class="no-num no-toc" id=abstract>Abstract</h2>
jdaggett@484 197
jdaggett@890 198 <p>This CSS3 module describes how font properties are specified and how
jdaggett@890 199 font resources are loaded dynamically. The contents of this specification
jdaggett@1244 200 are a consolidation of content previously divided into <a
jdaggett@3538 201 href="http://www.w3.org/TR/2002/WD-css3-fonts-20020802/">CSS3 Fonts</a>
jdaggett@3538 202 and <a href="http://www.w3.org/TR/2002/WD-css3-webfonts-20020802/">CSS3
jdaggett@7521 203 Web Fonts</a> modules. The description of font load events was moved into
jdaggett@8646 204 the <a href="http://dev.w3.org/csswg/css-font-load-events/">CSS3 Font Load
jdaggett@8646 205 Events</a> module.
jdaggett@484 206
jdaggett@484 207 <h2 class="no-num no-toc" id=status>Status of this document</h2>
jdaggett@484 208 <!--begin-status-->
jdaggett@484 209
jdaggett@484 210 <p>This is a public copy of the editors' draft. It is provided for
jdaggett@484 211 discussion only and may change at any moment. Its publication here does
jdaggett@484 212 not imply endorsement of its contents by W3C. Don't cite this document
jdaggett@484 213 other than as work in progress.
jdaggett@484 214
jdaggett@484 215 <p>The (<a
jdaggett@484 216 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
jdaggett@1662 217 mailing list <a
jdaggett@1662 218 href="mailto:www-style@w3.org?Subject=%5Bcss3-fonts%5D%20PUT%20SUBJECT%20HERE">
jdaggett@1662 219 www-style@w3.org</a> (see <a
jdaggett@1662 220 href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
jdaggett@1662 221 discussion of this specification. When sending e-mail, please put the text
jdaggett@1662 222 “css3-fonts” in the subject, preferably like this:
jdaggett@1148 223 “[<!---->css3-fonts<!---->] <em>…summary of comment…</em>”
jdaggett@484 224
jdaggett@8031 225 <p>This document was produced by the <a
jdaggett@8031 226 href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
jdaggett@8031 227 the <a href="http://www.w3.org/Style/">Style Activity</a>).
jdaggett@484 228
jdaggett@484 229 <p>This document was produced by a group operating under the <a
jdaggett@8031 230 href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
jdaggett@8031 231 2004 W3C Patent Policy</a>. W3C maintains a <a
jdaggett@8031 232 href="http://www.w3.org/2004/01/pp-impl/32061/status"
jdaggett@484 233 rel=disclosure>public list of any patent disclosures</a> made in
jdaggett@484 234 connection with the deliverables of the group; that page also includes
jdaggett@484 235 instructions for disclosing a patent. An individual who has actual
jdaggett@484 236 knowledge of a patent which the individual believes contains <a
jdaggett@8031 237 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
jdaggett@484 238 Claim(s)</a> must disclose the information in accordance with <a
jdaggett@8031 239 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
jdaggett@8031 240 6 of the W3C Patent Policy</a>.</p>
jdaggett@484 241 <!--end-status-->
jdaggett@8385 242
jdaggett@8385 243 <h3 class="no-num no-toc" id=atrisk>Features at risk</h3>
jdaggett@8385 244
jdaggett@8385 245 <p>The following features are at risk and may be removed when exiting CR:
jdaggett@8385 246
jdaggett@8385 247 <ul>
jdaggett@8386 248 <li>fallback handling for text decoration in superscript/subscript variant
jdaggett@8385 249 glyphs (‘<a href="#propdef-font-variant-position"><code
jdaggett@8385 250 class=property>font-variant-position</code></a>’)
jdaggett@8385 251
jdaggett@8385 252 <li>‘<a href="#propdef-font-language-override"><code
jdaggett@8385 253 class=property>font-language-override</code></a>’ property
jdaggett@8385 254 </ul>
jdaggett@8699 255 <!--
jdaggett@8699 256 <p>This draft is a <strong>Last Call Working Draft</strong>.
jdaggett@8699 257 Please send comments to the
jdaggett@8699 258 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style mailing list</a>
jdaggett@8699 259 as described above. The <strong>deadline for comments</strong>
jdaggett@8699 260 is six weeks after the date of publication in the header, 22 August 2013.</p>
jdaggett@8699 261 -->
jdaggett@2472 262
jdaggett@484 263 <h2 class="no-num no-toc" id=contents>Table of contents</h2>
jdaggett@484 264 <!--begin-toc-->
jdaggett@484 265
jdaggett@484 266 <ul class=toc>
jdaggett@890 267 <li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
jdaggett@890 268
jdaggett@1244 269 <li><a href="#typography-background"><span class=secno>2 </span>Typography
jdaggett@545 270 Background</a>
jdaggett@545 271
jdaggett@6699 272 <li><a href="#basic-font-props"><span class=secno>3 </span>Basic Font
jdaggett@6699 273 Properties</a>
jdaggett@484 274 <ul class=toc>
jdaggett@1662 275 <li><a href="#font-family-prop"><span class=secno>3.1 </span>Font
jdaggett@1662 276 family: the font-family property</a>
jdaggett@514 277 <ul class=toc>
jdaggett@1244 278 <li><a href="#generic-font-families"><span class=secno>3.1.1
jdaggett@1244 279 </span>Generic font families</a>
jdaggett@514 280 </ul>
jdaggett@484 281
jdaggett@1662 282 <li><a href="#font-weight-prop"><span class=secno>3.2 </span>Font
jdaggett@1662 283 weight: the font-weight property</a>
jdaggett@1662 284
jdaggett@1662 285 <li><a href="#font-stretch-prop"><span class=secno>3.3 </span>Font
jdaggett@1662 286 width: the font-stretch property</a>
jdaggett@1662 287
jdaggett@1662 288 <li><a href="#font-style-prop"><span class=secno>3.4 </span>Font style:
jdaggett@1662 289 the font-style property</a>
jdaggett@1662 290
jdaggett@1662 291 <li><a href="#font-size-prop"><span class=secno>3.5 </span>Font size:
jdaggett@1662 292 the font-size property</a>
jdaggett@1662 293
jdaggett@1662 294 <li><a href="#font-size-adjust-prop"><span class=secno>3.6
jdaggett@1662 295 </span>Relative sizing: the font-size-adjust property</a>
jdaggett@1662 296
jdaggett@1662 297 <li><a href="#font-prop"><span class=secno>3.7 </span>Shorthand font
jdaggett@1662 298 property: the font property</a>
jdaggett@2457 299
jdaggett@2487 300 <li><a href="#font-synthesis-prop"><span class=secno>3.8
jdaggett@2487 301 </span>Controlling synthetic faces: the font-synthesis property</a>
jdaggett@484 302 </ul>
jdaggett@484 303
jdaggett@890 304 <li><a href="#font-resources"><span class=secno>4 </span>Font
jdaggett@6699 305 Resources</a>
jdaggett@512 306 <ul class=toc>
jdaggett@1662 307 <li><a href="#font-face-rule"><span class=secno>4.1 </span>The
jdaggett@7096 308 <code>@font-face</code> rule</a>
jdaggett@1244 309
jdaggett@1662 310 <li><a href="#font-family-desc"><span class=secno>4.2 </span>Font
jdaggett@1662 311 family: the font-family descriptor</a>
jdaggett@1662 312
jdaggett@1662 313 <li><a href="#src-desc"><span class=secno>4.3 </span>Font reference: the
jdaggett@1662 314 src descriptor</a>
jdaggett@1662 315
jdaggett@1662 316 <li><a href="#font-prop-desc"><span class=secno>4.4 </span>Font property
jdaggett@1662 317 descriptors: the font-style, font-weight, font-stretch descriptors</a>
jdaggett@1662 318
jdaggett@1662 319 <li><a href="#unicode-range-desc"><span class=secno>4.5 </span>Character
jdaggett@1662 320 range: the unicode-range descriptor</a>
jdaggett@1662 321
jdaggett@8225 322 <li><a href="#composite-fonts"><span class=secno>4.6 </span>Using
jdaggett@8225 323 character ranges to define composite fonts</a>
jdaggett@8225 324
jdaggett@8225 325 <li><a href="#font-rend-desc"><span class=secno>4.7 </span>Font
jdaggett@1732 326 features: the font-variant and font-feature-settings descriptors</a>
jdaggett@2563 327
jdaggett@8225 328 <li><a href="#font-face-loading"><span class=secno>4.8 </span>Font
jdaggett@2563 329 loading guidelines</a>
jdaggett@2737 330
jdaggett@8863 331 <li><a href="#font-fetching-requirements"><span class=secno>4.9
jdaggett@8863 332 </span>Font fetching requirements</a>
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@8699 439 <li class=no-num><a href="#recent-changes"> Changes from the July 2013
jdaggett@8699 440 CSS3 Fonts Last Call 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@9154 584 the Arabic script, when used for Persian and Urdu, exhibits significant
jdaggett@9154 585 and systematic differences in letterforms, as does Cyrillic when used with
jdaggett@9154 586 languages such as Serbian and Russian.
jdaggett@518 587
jdaggett@8225 588 <p>The <a href="#character-map"><em>character map</em></a> of a font
jdaggett@8225 589 defines the mapping of characters to glyphs for that font. If a document
jdaggett@8225 590 contains characters not supported by the <a href="#character-map"><em
jdaggett@8225 591 title="character map">character maps</em></a> of the fonts contained in a
jdaggett@8363 592 font family list, a user agent may use a <a
jdaggett@8363 593 href="#system-font-fallback"><em>system font fallback</em></a> procedure
jdaggett@8363 594 to locate an appropriate font that does. If no appropriate font can be
jdaggett@8363 595 found, some form of "missing glyph" character will be rendered by the user
jdaggett@8363 596 agent. System fallback can occur when the specified list of font families
jdaggett@8363 597 does not include a font that supports a given character.
jdaggett@8225 598
jdaggett@8225 599 <p>Although the <a href="#character-map"><em>character map</em></a> of a
jdaggett@8225 600 font maps a given character to a glyph for that character, modern font
jdaggett@8225 601 technologies such as OpenType and AAT (Apple Advanced Typography) provide
jdaggett@8225 602 ways of mapping a character to different glyphs based upon feature
jdaggett@8225 603 settings. Fonts in these formats allow these features to be embedded in
jdaggett@8225 604 the font itself and controlled by applications. Common typographic
jdaggett@8225 605 features which can be specified this way include ligatures, swashes,
jdaggett@8225 606 contextual alternates, proportional and tabular figures, and automatic
jdaggett@8225 607 fractions, to list just a few. For a visual overview of OpenType features,
jdaggett@8225 608 see the <a href="#OPENTYPE-FONT-GUIDE"
jdaggett@6659 609 rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
jdaggett@1662 610
jdaggett@6699 611 <h2 id=basic-font-props><span class=secno>3 </span>Basic Font Properties</h2>
jdaggett@512 612
jdaggett@512 613 <p>The particular font face used to render a character is determined by the
jdaggett@515 614 font family and other font properties that apply to a given element. This
jdaggett@515 615 structure allows settings to be varied independent of each other.</p>
jdaggett@512 616 <!-- prop: font-family -->
jdaggett@484 617
jdaggett@1662 618 <h3 id=font-family-prop><span class=secno>3.1 </span>Font family: the <a
jdaggett@1662 619 href="#propdef-font-family">font-family</a> property</h3>
jdaggett@1662 620
jdaggett@8225 621 <table class=propdef id=namefont-familyvalue-ltfamily-namegt-ltg>
jdaggett@484 622 <tbody>
jdaggett@484 623 <tr>
jdaggett@484 624 <td>Name:
jdaggett@484 625
jdaggett@8278 626 <td><dfn id=propdef-font-family
jdaggett@8278 627 title="font-family!!property">font-family</dfn>
jdaggett@484 628
jdaggett@484 629 <tr>
jdaggett@484 630 <td>Value:
jdaggett@484 631
jdaggett@8225 632 <td>[ <a href="#family-name-value"><var>&lt;family-name&gt;</var></a> |
jdaggett@8225 633 <a href="#generic-family-value"><var>&lt;generic-family&gt;</var></a> ]
jdaggett@8225 634 #
jdaggett@484 635
jdaggett@484 636 <tr>
jdaggett@484 637 <td>Initial:
jdaggett@484 638
jdaggett@484 639 <td>depends on user agent
jdaggett@484 640
jdaggett@484 641 <tr>
jdaggett@484 642 <td>Applies to:
jdaggett@484 643
jdaggett@484 644 <td>all elements
jdaggett@484 645
jdaggett@484 646 <tr>
jdaggett@484 647 <td>Inherited:
jdaggett@484 648
jdaggett@484 649 <td>yes
jdaggett@484 650
jdaggett@484 651 <tr>
jdaggett@484 652 <td>Percentages:
jdaggett@484 653
jdaggett@484 654 <td>N/A
jdaggett@484 655
jdaggett@484 656 <tr>
jdaggett@484 657 <td>Media:
jdaggett@484 658
jdaggett@484 659 <td>visual
jdaggett@484 660
jdaggett@484 661 <tr>
jdaggett@1148 662 <td>Computed value:
jdaggett@484 663
jdaggett@484 664 <td>as specified
jdaggett@7377 665
jdaggett@7377 666 <tr>
jdaggett@7377 667 <td>Animatable:
jdaggett@7377 668
jdaggett@7377 669 <td>no
jdaggett@484 670 </table>
jdaggett@484 671
jdaggett@514 672 <p>This property specifies a prioritized list of font family names or
jdaggett@6694 673 generic family names. A font family defines a set of faces that vary in
jdaggett@6694 674 weight, width or slope. CSS uses the combination of a family name with
jdaggett@6694 675 other style attributes to select an individual face. Using this selection
jdaggett@6694 676 mechanism, rather than selecting a face via the style name as is often
jdaggett@6694 677 done in design applications, allows some degree of regularity in textual
jdaggett@6694 678 display when fallback occurs.
jdaggett@6694 679
jdaggett@6694 680 <p class=note>Designers should note that the CSS definition of font
jdaggett@6694 681 attributes used for selection are explicitly not intended to define a font
jdaggett@6694 682 taxonomy. A type designer's idea of a family may often extend to a set of
jdaggett@6694 683 faces that vary along axes other than just the standard axes of weight,
jdaggett@6694 684 width and slope. A family may extend to include both a set of serif faces
jdaggett@6694 685 and a set of sans-serif faces or vary along axes that are unique to that
jdaggett@6694 686 family. The CSS font selection mechanism merely provides a way to
jdaggett@6694 687 determine the “closest” substitute when substitution is necessary.
jdaggett@6694 688
jdaggett@6694 689 <p>Unlike other CSS properties, component values are a comma-separated list
jdaggett@6694 690 indicating alternatives. A user agent iterates through the list of family
jdaggett@6694 691 names until it matches an available font that contains a glyph for the
jdaggett@6694 692 character to be rendered. This allows for differences in available fonts
jdaggett@6694 693 across platforms and for differences in the range of characters supported
jdaggett@6694 694 by individual fonts.
jdaggett@514 695
jdaggett@514 696 <p>A font family name only specifies a name given to a set of font faces,
jdaggett@8177 697 it does not specify an individual face. For example, given the
jdaggett@8177 698 availability of the fonts below, Futura would match but Futura Medium
jdaggett@8177 699 would not:
jdaggett@514 700
jdaggett@1150 701 <div class=figure><img alt="family and face names"
jdaggett@1150 702 src=familyvsfacename.png>
jdaggett@890 703 <p class=caption>Family and individual face names
jdaggett@514 704 </div>
jdaggett@514 705
jdaggett@514 706 <p>Consider the example below:
jdaggett@512 707
jdaggett@512 708 <div class=example>
jdaggett@8277 709 <pre>body {
jdaggett@8277 710 font-family: Helvetica, Verdana, sans-serif;
jdaggett@514 711 }</pre>
jdaggett@1758 712
jdaggett@1758 713 <p>If Helvetica is available it will be used when rendering. If neither
jdaggett@1758 714 Helvetica nor Verdana is present, then the user-agent-defined sans serif
jdaggett@1758 715 font will be used.</p>
jdaggett@512 716 </div>
jdaggett@512 717
jdaggett@514 718 <p>There are two types of font family names:
jdaggett@512 719
jdaggett@512 720 <dl>
jdaggett@8225 721 <dt><dfn id=family-name-value><var>&lt;family-name&gt;</var></dfn>
jdaggett@514 722
jdaggett@514 723 <dd>The name of a font family of choice such as Helvetica or Verdana in
jdaggett@2457 724 the previous example.
jdaggett@514 725
jdaggett@8225 726 <dt><dfn id=generic-family-value><var>&lt;generic-family&gt;</var></dfn>
jdaggett@514 727
jdaggett@4624 728 <dd> The following generic family keywords are defined: ‘<a
jdaggett@4624 729 href="#serif"><code class=property>serif</code></a>’, ‘<a
jdaggett@4624 730 href="#sans-serif"><code class=property>sans-serif</code></a>’, ‘<a
jdaggett@4624 731 href="#cursive"><code class=property>cursive</code></a>’, ‘<a
jdaggett@4624 732 href="#fantasy"><code class=property>fantasy</code></a>’, and ‘<a
jdaggett@4624 733 href="#monospace"><code class=property>monospace</code></a>’. These
jdaggett@1148 734 keywords can be used as a general fallback mechanism when an author's
jdaggett@1758 735 desired font choices are not available. As keywords, they must not be
jdaggett@1148 736 quoted. Authors are encouraged to append a generic font family as a last
jdaggett@1148 737 alternative for improved robustness.
jdaggett@512 738 </dl>
jdaggett@512 739
jdaggett@8272 740 <p>Font family names other than generic families must either be given
jdaggett@8272 741 quoted as <a
jdaggett@8699 742 href="http://www.w3.org/TR/CSS21/syndata.html#strings">strings,</a> or
jdaggett@8699 743 unquoted as a sequence of one or more <a
bert@8683 744 href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers.</a>
jdaggett@2457 745 This means most punctuation characters and digits at the start of each
jdaggett@2457 746 token must be escaped in unquoted font family names.
jdaggett@2457 747
jdaggett@7377 748 <p>To illustrate this, the following declarations are invalid:
jdaggett@2457 749
jdaggett@2457 750 <pre>
jdaggett@2457 751 font-family: Red/Black, sans-serif;
jdaggett@2457 752 font-family: "Lucida" Grande, sans-serif;
jdaggett@2457 753 font-family: Ahem!, sans-serif;
jdaggett@2457 754 font-family: test@foo, sans-serif;
jdaggett@2457 755 font-family: #POUND, sans-serif;
jdaggett@2457 756 font-family: Hawaii 5-0, sans-serif;
jdaggett@2457 757 </pre>
jdaggett@2457 758
jdaggett@2457 759 <p>If a sequence of identifiers is given as a font family name, the
jdaggett@2457 760 computed value is the name converted to a string by joining all the
jdaggett@2457 761 identifiers in the sequence by single spaces.
jdaggett@2457 762
jdaggett@2457 763 <p>To avoid mistakes in escaping, it is recommended to quote font family
jdaggett@2457 764 names that contain white space, digits, or punctuation characters other
jdaggett@2457 765 than hyphens:
jdaggett@2457 766
jdaggett@2457 767 <pre>
jdaggett@2457 768 body { font-family: "New Century Schoolbook", serif }
jdaggett@2457 769
jdaggett@2457 770 &lt;BODY STYLE="font-family: '21st Century', fantasy">
jdaggett@2457 771 </pre>
jdaggett@2457 772
jdaggett@2457 773 <p>Font family <em>names</em> that happen to be the same as a keyword value
jdaggett@4624 774 (‘<code class=property>inherit</code>’, ‘<a href="#serif"><code
jdaggett@4624 775 class=property>serif</code></a>’, ‘<a href="#sans-serif"><code
jdaggett@4624 776 class=property>sans-serif</code></a>’, ‘<a href="#monospace"><code
jdaggett@4624 777 class=property>monospace</code></a>’, ‘<a href="#fantasy"><code
jdaggett@4624 778 class=property>fantasy</code></a>’, and ‘<a href="#cursive"><code
jdaggett@4624 779 class=property>cursive</code></a>’) must be quoted to prevent confusion
jdaggett@2457 780 with the keywords with the same names. The keywords ‘<code
jdaggett@2457 781 class=property>initial</code>’ and ‘<code
jdaggett@2457 782 class=property>default</code>’ are reserved for future use and must also
jdaggett@2457 783 be quoted when used as font names. UAs must not consider these keywords as
jdaggett@8225 784 matching the <a
jdaggett@8225 785 href="#family-name-value"><var>&lt;family-name&gt;</var></a> type.
jdaggett@2457 786
jdaggett@6694 787 <p>The precise way a set of fonts are grouped into font families varies
jdaggett@6694 788 depending upon the platform font management API's. The Windows GDI API
jdaggett@6694 789 only allows four faces to be grouped into a family while the DirectWrite
jdaggett@6694 790 API and API's on OSX and other platforms support font families with a
jdaggett@6695 791 variety of weights, widths and slopes (see <a
jdaggett@6694 792 href="#platform-props-to-css">Appendix A</a> for more details).
jdaggett@6694 793
jdaggett@2457 794 <p>Some font formats allow fonts to carry multiple localizations of the
jdaggett@2457 795 family name. User agents must recognize and correctly match all of these
jdaggett@2457 796 names independent of the underlying platform localization, system API used
jdaggett@2457 797 or document encoding:
jdaggett@2457 798
jdaggett@2457 799 <div class=figure><img alt="examples of localized family names"
jdaggett@2457 800 src=localizedfamilynames.png>
jdaggett@2457 801 <p class=caption>Localized family names
jdaggett@2457 802 </div>
jdaggett@2457 803
jdaggett@9154 804 <p>The details of localized font family name matching and the corresponding
jdaggett@9154 805 issues of case sensitivity are described below in the <a
jdaggett@9154 806 href="#font-family-casing">font matching</a> section.
jdaggett@9154 807
jdaggett@1244 808 <h4 id=generic-font-families><span class=secno>3.1.1 </span>Generic font
jdaggett@1244 809 families</h4>
jdaggett@514 810
jdaggett@518 811 <p>All five generic font families are defined to exist in all CSS
jdaggett@518 812 implementations (they need not necessarily map to five distinct actual
jdaggett@518 813 fonts). User agents should provide reasonable default choices for the
jdaggett@518 814 generic font families, which express the characteristics of each family as
jdaggett@518 815 well as possible within the limits allowed by the underlying technology.
jdaggett@518 816 User agents are encouraged to allow users to select alternative choices
jdaggett@514 817 for the generic fonts.
jdaggett@514 818
jdaggett@890 819 <h5 class="no-num no-toc"> <span class=index-def id=serif0 title="serif,
jdaggett@890 820 definition of"><a name=serif-def><dfn id=serif>serif</dfn></a></span></h5>
jdaggett@514 821
jdaggett@8178 822 <p>Serif fonts represent the formal text style for a script. This often
jdaggett@8178 823 means but is not limited to glyphs that have finishing strokes, flared or
jdaggett@8178 824 tapering ends, or have actual serifed endings (including slab serifs).
jdaggett@8178 825 Serif fonts are typically proportionately-spaced. They often display a
jdaggett@8178 826 greater variation between thick and thin strokes than fonts from the ‘<a
jdaggett@8178 827 href="#sans-serif"><code class=property>sans-serif</code></a>’ generic
jdaggett@8178 828 font family. CSS uses the term ‘<a href="#serif"><code
jdaggett@8178 829 class=property>serif</code></a>’ to apply to a font for any script,
jdaggett@8178 830 although other names may be more familiar for particular scripts, such as
jdaggett@8178 831 Mincho (Japanese), Sung, Song or Kai (Chinese), Batang (Korean). For
jdaggett@8178 832 Arabic, the Naskh style would correspond to ‘<a href="#serif"><code
jdaggett@8178 833 class=property>serif</code></a>’ more due to its typographic role rather
jdaggett@8178 834 than its actual design style. Any font that is so described may be used to
jdaggett@4624 835 represent the generic ‘<a href="#serif"><code
jdaggett@4624 836 class=property>serif</code></a>’ family.
jdaggett@514 837
jdaggett@1150 838 <div class=figure><img alt="sample serif fonts" src=serifexamples.png>
jdaggett@890 839 <p class=caption>Sample serif fonts
jdaggett@514 840 </div>
jdaggett@514 841
jdaggett@890 842 <h5 class="no-num no-toc"> <span class=index-def id=sans-serif0
jdaggett@890 843 title="sans-serif, definition of"> <a name=sans-serif-def><dfn
jdaggett@890 844 id=sans-serif>sans-serif</dfn></a></span></h5>
jdaggett@514 845
jdaggett@8178 846 <p>Glyphs in sans-serif fonts, as the term is used in CSS, are generally
jdaggett@8178 847 low contrast (vertical and horizontal stems have the close to the same
jdaggett@8178 848 thickness) and have stroke endings that are plain -- without any flaring,
jdaggett@8178 849 cross stroke, or other ornamentation. Sans-serif fonts are typically
jdaggett@8178 850 proportionately-spaced. They often have little variation between thick and
jdaggett@8178 851 thin strokes, compared to fonts from the ‘<a href="#serif"><code
jdaggett@4624 852 class=property>serif</code></a>’ family. CSS uses the term ‘<a
jdaggett@4624 853 href="#sans-serif"><code class=property>sans-serif</code></a>’ to apply
jdaggett@4624 854 to a font for any script, although other names may be more familiar for
jdaggett@3041 855 particular scripts, such as Gothic (Japanese), Hei (Chinese), or Gulim
jdaggett@1148 856 (Korean). Any font that is so described may be used to represent the
jdaggett@4624 857 generic ‘<a href="#sans-serif"><code
jdaggett@4624 858 class=property>sans-serif</code></a>’ family.
jdaggett@518 859
jdaggett@1150 860 <div class=figure><img alt="sample sans-serif fonts"
jdaggett@1150 861 src=sansserifexamples.png>
jdaggett@890 862 <p class=caption>Sample sans-serif fonts
jdaggett@514 863 </div>
jdaggett@514 864
jdaggett@890 865 <h5 class="no-num no-toc"> <span class=index-def id=cursive0
jdaggett@545 866 title="cursive, definition of"> <a name=cursive-def><dfn
jdaggett@890 867 id=cursive>cursive</dfn></a></span></h5>
jdaggett@545 868
jdaggett@8178 869 <p>Glyphs in cursive fonts generally use a more informal script style, and
jdaggett@8178 870 the result looks more like handwritten pen or brush writing than printed
jdaggett@8178 871 letterwork. CSS uses the term ‘<a href="#cursive"><code
jdaggett@8178 872 class=property>cursive</code></a>’ to apply to a font for any script,
jdaggett@8178 873 although other names such as Chancery, Brush, Swing and Script are also
jdaggett@8178 874 used in font names.
jdaggett@514 875
jdaggett@1150 876 <div class=figure><img alt="sample cursive fonts" src=cursiveexamples.png>
jdaggett@890 877 <p class=caption>Sample cursive fonts
jdaggett@514 878 </div>
jdaggett@514 879
jdaggett@890 880 <h5 class="no-num no-toc"> <span class=index-def id=fantasy0
jdaggett@545 881 title="fantasy, definition of"> <a name=fantasy-def><dfn
jdaggett@890 882 id=fantasy>fantasy</dfn></a></span></h5>
jdaggett@514 883
jdaggett@8178 884 <p>Fantasy fonts are primarily decorative or expressive fonts that contain
jdaggett@9154 885 decorative or expressive representations of characters. These do not
jdaggett@9154 886 include Pi or Picture fonts which do not represent actual characters.
jdaggett@514 887
jdaggett@1150 888 <div class=figure><img alt="sample fantasy fonts" src=fantasyexamples.png>
jdaggett@890 889 <p class=caption>Sample fantasy fonts
jdaggett@514 890 </div>
jdaggett@514 891
jdaggett@890 892 <h5 class="no-num no-toc"> <span class=index-def id=monospace0
jdaggett@545 893 title="monospace, definition of"> <a name=monospace-def><dfn
jdaggett@890 894 id=monospace>monospace</dfn></a></span></h5>
jdaggett@514 895
jdaggett@514 896 <p>The sole criterion of a monospace font is that all glyphs have the same
jdaggett@518 897 fixed width. This is often used to render samples of computer code.
jdaggett@514 898
jdaggett@1150 899 <div class=figure><img alt="sample monospace fonts"
jdaggett@1150 900 src=monospaceexamples.png>
jdaggett@890 901 <p class=caption>Sample monospace fonts
jdaggett@514 902 </div>
jdaggett@512 903 <!-- prop: font-weight -->
jdaggett@512 904
jdaggett@1662 905 <h3 id=font-weight-prop><span class=secno>3.2 </span>Font weight: the <a
jdaggett@1662 906 href="#propdef-font-weight">font-weight</a> property</h3>
jdaggett@1662 907
jdaggett@4624 908 <table class=propdef id=namefont-weightvaluenormal-bold-bolder-l>
jdaggett@484 909 <tbody>
jdaggett@484 910 <tr>
jdaggett@484 911 <td>Name:
jdaggett@484 912
jdaggett@8278 913 <td><dfn id=propdef-font-weight
jdaggett@8278 914 title="font-weight!!property">font-weight</dfn>
jdaggett@484 915
jdaggett@484 916 <tr>
jdaggett@484 917 <td>Value:
jdaggett@484 918
jdaggett@8278 919 <td><a href="#font-weight-normal-value"
jdaggett@8278 920 title="normal!!font-weight">normal</a> | <a href="#bold">bold</a> | <a
jdaggett@8278 921 href="#bolder">bolder</a> | <a href="#lighter">lighter</a> | <a
jdaggett@8278 922 href="#font-weight-numeric-values" title="100...900 weight
jdaggett@8278 923 values">100</a> | <a href="#font-weight-numeric-values"
jdaggett@8278 924 title="100...900 weight values">200</a> | <a
jdaggett@8278 925 href="#font-weight-numeric-values" title="100...900 weight
jdaggett@8278 926 values">300</a> | <a href="#font-weight-numeric-values"
jdaggett@8278 927 title="100...900 weight values">400</a> | <a
jdaggett@8278 928 href="#font-weight-numeric-values" title="100...900 weight
jdaggett@8278 929 values">500</a> | <a href="#font-weight-numeric-values"
jdaggett@8278 930 title="100...900 weight values">600</a> | <a
jdaggett@8278 931 href="#font-weight-numeric-values" title="100...900 weight
jdaggett@8278 932 values">700</a> | <a href="#font-weight-numeric-values"
jdaggett@8278 933 title="100...900 weight values">800</a> | <a
jdaggett@8278 934 href="#font-weight-numeric-values" title="100...900 weight
jdaggett@8278 935 values">900</a>
jdaggett@484 936
jdaggett@484 937 <tr>
jdaggett@484 938 <td>Initial:
jdaggett@484 939
jdaggett@484 940 <td>normal
jdaggett@484 941
jdaggett@484 942 <tr>
jdaggett@484 943 <td>Applies to:
jdaggett@484 944
jdaggett@484 945 <td>all elements
jdaggett@484 946
jdaggett@484 947 <tr>
jdaggett@484 948 <td>Inherited:
jdaggett@484 949
jdaggett@484 950 <td>yes
jdaggett@484 951
jdaggett@484 952 <tr>
jdaggett@484 953 <td>Percentages:
jdaggett@484 954
jdaggett@484 955 <td>N/A
jdaggett@484 956
jdaggett@484 957 <tr>
jdaggett@484 958 <td>Media:
jdaggett@484 959
jdaggett@484 960 <td>visual
jdaggett@484 961
jdaggett@484 962 <tr>
jdaggett@1148 963 <td>Computed value:
jdaggett@484 964
jdaggett@8177 965 <td>numeric weight value (see description)
jdaggett@7377 966
jdaggett@7377 967 <tr>
jdaggett@7377 968 <td>Animatable:
jdaggett@7377 969
jdaggett@7377 970 <td>as <a
jdaggett@7377 971 href="http://dev.w3.org/csswg/css3-transitions/#animtype-font-weight">font
jdaggett@7377 972 weight</a>
jdaggett@484 973 </table>
jdaggett@484 974
jdaggett@8278 975 <p>The <a href="#propdef-font-weight"
jdaggett@8278 976 title="font-weight!!property">‘<code
jdaggett@8278 977 class=property>font-weight</code>’</a> property specifies the weight of
jdaggett@8278 978 glyphs in the font, their degree of blackness or stroke thickness.
jdaggett@531 979
jdaggett@531 980 <p>Values have the following meanings:
jdaggett@512 981
jdaggett@512 982 <dl>
jdaggett@8278 983 <dt><dfn id=font-weight-numeric-values title="100...900 weight values">100
jdaggett@8278 984 to 900</dfn>
jdaggett@512 985
jdaggett@512 986 <dd>These values form an ordered sequence, where each number indicates a
jdaggett@514 987 weight that is at least as dark as its predecessor. These roughly
jdaggett@514 988 correspond to the commonly used weight names below:
jdaggett@512 989 </dl>
jdaggett@512 990
jdaggett@512 991 <ul>
jdaggett@512 992 <li>100 - Thin
jdaggett@512 993
jdaggett@518 994 <li>200 - Extra Light (Ultra Light)
jdaggett@512 995
jdaggett@512 996 <li>300 - Light
jdaggett@512 997
jdaggett@512 998 <li>400 - Normal
jdaggett@512 999
jdaggett@512 1000 <li>500 - Medium
jdaggett@512 1001
jdaggett@518 1002 <li>600 - Semi Bold (Demi Bold)
jdaggett@512 1003
jdaggett@512 1004 <li>700 - Bold
jdaggett@512 1005
jdaggett@518 1006 <li>800 - Extra Bold (Ultra Bold)
jdaggett@512 1007
jdaggett@512 1008 <li>900 - Black (Heavy)
jdaggett@512 1009 </ul>
jdaggett@512 1010
jdaggett@512 1011 <dl>
jdaggett@8278 1012 <dt><dfn id=font-weight-normal-value
jdaggett@8278 1013 title="normal!!font-weight">normal</dfn>
jdaggett@512 1014
jdaggett@1148 1015 <dd>Same as ‘<code class=css>400</code>’.
jdaggett@512 1016
jdaggett@8278 1017 <dt><dfn id=bold>bold</dfn>
jdaggett@512 1018
jdaggett@1148 1019 <dd>Same as ‘<code class=css>700</code>’.
jdaggett@512 1020
jdaggett@8278 1021 <dt><dfn id=bolder>bolder</dfn>
jdaggett@512 1022
jdaggett@8177 1023 <dd>Specifies a bolder weight than the inherited value.
jdaggett@512 1024
jdaggett@8278 1025 <dt><dfn id=lighter>lighter</dfn>
jdaggett@512 1026
jdaggett@8177 1027 <dd>Specifies a lighter weight than the inherited value.
jdaggett@512 1028 </dl>
jdaggett@512 1029
jdaggett@8177 1030 <p>Font formats that use a scale other than a nine-step scale should map
jdaggett@531 1031 their scale onto the CSS scale so that 400 roughly corresponds with a face
jdaggett@531 1032 that would be labeled as Regular, Book, Roman and 700 roughly matches a
jdaggett@531 1033 face that would be labeled as Bold. Or weights may be inferred from the
jdaggett@531 1034 style names, ones that correspond roughly with the scale above. The scale
jdaggett@1662 1035 is relative, so a face with a larger weight value must never appear
jdaggett@1148 1036 lighter. If style names are used to infer weights, care should be taken to
jdaggett@1148 1037 handle variations in style names across locales.
jdaggett@531 1038
jdaggett@531 1039 <p>Quite often there are only a few weights available for a particular font
jdaggett@534 1040 family. When a weight is specified for which no face exists, a face with a
jdaggett@534 1041 nearby weight is used. In general, bold weights map to faces with heavier
jdaggett@1269 1042 weights and light weights map to faces with lighter weights (see the <a
jdaggett@1269 1043 href="#font-matching-algorithm">font matching section below</a> for a
jdaggett@1269 1044 precise definition). The examples here illustrate which face is used for
jdaggett@1269 1045 different weights, grey indicates a face for that weight does not exist so
jdaggett@1269 1046 a face with a nearby weight is used:
jdaggett@532 1047
jdaggett@1150 1048 <div class=figure><img alt="weight mappings for a family with 400, 700 and
jdaggett@1150 1049 900 weights" src=optimaweights.png>
jdaggett@532 1050 <p class=caption>Weight mappings for a font family with 400, 700 and 900
jdaggett@890 1051 weight faces
jdaggett@518 1052 </div>
jdaggett@518 1053
jdaggett@1150 1054 <div class=figure><img alt="weight mappings for a family with 300, 600
jdaggett@1150 1055 weights" src=hiraginoweights.png>
jdaggett@532 1056 <p class=caption>Weight mappings for a font family with 300 and 600 weight
jdaggett@890 1057 faces
jdaggett@531 1058 </div>
jdaggett@518 1059
jdaggett@2487 1060 <p>Although the practice is not well-loved by typographers, bold faces are
jdaggett@2487 1061 often synthesized by user agents for faces that lack actual bold faces.
jdaggett@2487 1062 For the purposes of style matching, these faces must be treated as if they
jdaggett@8177 1063 exist within the family. Authors can explicitly avoid this behavior by
jdaggett@8177 1064 using the ‘<a href="#propdef-font-synthesis"><code
jdaggett@8177 1065 class=property>font-synthesis</code></a>’ property.
jdaggett@8177 1066
jdaggett@8278 1067 <p>Specified values of ‘<a href="#bolder"><code
jdaggett@8278 1068 class=property>bolder</code></a>’ and ‘<a href="#lighter"><code
jdaggett@8278 1069 class=property>lighter</code></a>’ indicate weights relative to the
jdaggett@8177 1070 weight of the parent element. The computed weight is calculated based on
jdaggett@8278 1071 the inherited <a href="#propdef-font-weight"
jdaggett@8278 1072 title="font-weight!!property">‘<code
jdaggett@8278 1073 class=property>font-weight</code>’</a> value using the chart below.
jdaggett@1148 1074
jdaggett@6651 1075 <table class=data id=bolderlighter summary="Bolder/lighter mappings">
jdaggett@1148 1076 <thead>
jdaggett@1148 1077 <tr>
jdaggett@6651 1078 <th>Inherited value
jdaggett@6651 1079
jdaggett@6651 1080 <th>bolder
jdaggett@6651 1081
jdaggett@6651 1082 <th>lighter
jdaggett@1148 1083
jdaggett@1148 1084 <tbody>
jdaggett@1148 1085 <tr>
jdaggett@1244 1086 <th>100
jdaggett@1148 1087
jdaggett@1148 1088 <td>400
jdaggett@1148 1089
jdaggett@1148 1090 <td>100
jdaggett@1148 1091
jdaggett@1148 1092 <tr>
jdaggett@1244 1093 <th>200
jdaggett@1148 1094
jdaggett@1148 1095 <td>400
jdaggett@1148 1096
jdaggett@1148 1097 <td>100
jdaggett@1148 1098
jdaggett@1148 1099 <tr>
jdaggett@1244 1100 <th>300
jdaggett@1148 1101
jdaggett@1148 1102 <td>400
jdaggett@1148 1103
jdaggett@1148 1104 <td>100
jdaggett@1148 1105
jdaggett@1148 1106 <tr>
jdaggett@1244 1107 <th>400
jdaggett@1148 1108
jdaggett@1148 1109 <td>700
jdaggett@1148 1110
jdaggett@1148 1111 <td>100
jdaggett@1148 1112
jdaggett@1148 1113 <tr>
jdaggett@1244 1114 <th>500
jdaggett@1148 1115
jdaggett@1148 1116 <td>700
jdaggett@1148 1117
jdaggett@1148 1118 <td>100
jdaggett@1148 1119
jdaggett@1148 1120 <tr>
jdaggett@1244 1121 <th>600
jdaggett@1148 1122
jdaggett@1148 1123 <td>900
jdaggett@1148 1124
jdaggett@1148 1125 <td>400
jdaggett@1148 1126
jdaggett@1148 1127 <tr>
jdaggett@1244 1128 <th>700
jdaggett@1148 1129
jdaggett@1148 1130 <td>900
jdaggett@1148 1131
jdaggett@1148 1132 <td>400
jdaggett@1148 1133
jdaggett@1148 1134 <tr>
jdaggett@1244 1135 <th>800
jdaggett@1148 1136
jdaggett@1148 1137 <td>900
jdaggett@1148 1138
jdaggett@1148 1139 <td>700
jdaggett@1148 1140
jdaggett@1148 1141 <tr>
jdaggett@1244 1142 <th>900
jdaggett@1148 1143
jdaggett@1148 1144 <td>900
jdaggett@1148 1145
jdaggett@1148 1146 <td>700
jdaggett@1148 1147 </table>
jdaggett@1148 1148
jdaggett@1148 1149 <p>The table above is equivalent to selecting the next relative bolder or
jdaggett@1148 1150 lighter face, given a font family containing normal and bold faces along
jdaggett@1148 1151 with a thin and a heavy face. Authors who desire finer control over the
jdaggett@8177 1152 exact weight values used for a given element may use numerical values
jdaggett@1148 1153 instead of relative weights.</p>
jdaggett@512 1154 <!-- prop: font-stretch -->
jdaggett@512 1155
jdaggett@1662 1156 <h3 id=font-stretch-prop><span class=secno>3.3 </span>Font width: the <a
jdaggett@1662 1157 href="#propdef-font-stretch">font-stretch</a> property</h3>
jdaggett@1662 1158
jdaggett@8278 1159 <table class=propdef id=namefont-stretchvalue-normal-ultra-conde>
jdaggett@484 1160 <tbody>
jdaggett@484 1161 <tr>
jdaggett@484 1162 <td>Name:
jdaggett@484 1163
jdaggett@8278 1164 <td><dfn id=propdef-font-stretch
jdaggett@8278 1165 title="font-stretch!!property">font-stretch</dfn>
jdaggett@484 1166
jdaggett@484 1167 <tr>
jdaggett@484 1168 <td>Value:
jdaggett@484 1169
jdaggett@8278 1170 <td> <a href="#font-stretch-normal-value"
jdaggett@8278 1171 title="normal!!font-stretch">normal</a> | <a
jdaggett@8278 1172 href="#ultra-condensed">ultra-condensed</a> | <a
jdaggett@8278 1173 href="#extra-condensed">extra-condensed</a> | <a
jdaggett@8278 1174 href="#condensed">condensed</a> | <a
jdaggett@8278 1175 href="#semi-condensed-">semi-condensed</a> | <a
jdaggett@8278 1176 href="#semi-expanded">semi-expanded</a> | <a
jdaggett@8278 1177 href="#expanded">expanded</a> | <a
jdaggett@8278 1178 href="#extra-expanded">extra-expanded</a> | <a
jdaggett@8278 1179 href="#ultra-expanded">ultra-expanded</a>
jdaggett@484 1180
jdaggett@484 1181 <tr>
jdaggett@484 1182 <td>Initial:
jdaggett@484 1183
jdaggett@484 1184 <td>normal
jdaggett@484 1185
jdaggett@484 1186 <tr>
jdaggett@484 1187 <td>Applies to:
jdaggett@484 1188
jdaggett@484 1189 <td>all elements
jdaggett@484 1190
jdaggett@484 1191 <tr>
jdaggett@484 1192 <td>Inherited:
jdaggett@484 1193
jdaggett@484 1194 <td>yes
jdaggett@484 1195
jdaggett@484 1196 <tr>
jdaggett@484 1197 <td>Percentages:
jdaggett@484 1198
jdaggett@484 1199 <td>N/A
jdaggett@484 1200
jdaggett@484 1201 <tr>
jdaggett@484 1202 <td>Media:
jdaggett@484 1203
jdaggett@484 1204 <td>visual
jdaggett@484 1205
jdaggett@484 1206 <tr>
jdaggett@1148 1207 <td>Computed value:
jdaggett@484 1208
jdaggett@484 1209 <td>as specified
jdaggett@7377 1210
jdaggett@7377 1211 <tr>
jdaggett@7377 1212 <td>Animatable:
jdaggett@7377 1213
jdaggett@7377 1214 <td>as <a href="#font-stretch-animation">font stretch</a>
jdaggett@484 1215 </table>
jdaggett@484 1216
jdaggett@8278 1217 <p>The <a href="#propdef-font-stretch"
jdaggett@8278 1218 title="font-stretch!!property">‘<code
jdaggett@8278 1219 class=property>font-stretch</code>’</a> property selects a normal,
jdaggett@8278 1220 condensed, or expanded face from a font family. Absolute keyword values
jdaggett@8278 1221 have the following ordering, from narrowest to widest:
jdaggett@512 1222
jdaggett@512 1223 <ul>
jdaggett@8278 1224 <li><dfn id=ultra-condensed>ultra-condensed</dfn>
jdaggett@8278 1225
jdaggett@8278 1226 <li><dfn id=extra-condensed>extra-condensed</dfn>
jdaggett@8278 1227
jdaggett@8278 1228 <li><dfn id=condensed>condensed</dfn>
jdaggett@8278 1229
jdaggett@8278 1230 <li><dfn id=semi-condensed->semi-condensed </dfn>
jdaggett@8278 1231
jdaggett@8278 1232 <li><dfn id=font-stretch-normal-value
jdaggett@8278 1233 title="normal!!font-stretch">normal</dfn>
jdaggett@8278 1234
jdaggett@8278 1235 <li><dfn id=semi-expanded>semi-expanded</dfn>
jdaggett@8278 1236
jdaggett@8278 1237 <li><dfn id=expanded>expanded</dfn>
jdaggett@8278 1238
jdaggett@8278 1239 <li><dfn id=extra-expanded>extra-expanded</dfn>
jdaggett@8278 1240
jdaggett@8278 1241 <li><dfn id=ultra-expanded>ultra-expanded</dfn>
jdaggett@512 1242 </ul>
jdaggett@512 1243
jdaggett@8197 1244 <p>When a face does not exist for a given width, normal or condensed values
jdaggett@8197 1245 map to a narrower face, otherwise a wider face. Conversely, expanded
jdaggett@8197 1246 values map to a wider face, otherwise a narrower face. The figure below
jdaggett@8197 1247 shows how the nine font-stretch property settings affect font selection
jdaggett@8197 1248 for font family containing a variety of widths, grey indicates a width for
jdaggett@8197 1249 which no face exists and a different width is substituted:
jdaggett@1148 1250
jdaggett@1150 1251 <div class=figure><img alt="width mappings for a family with condensed,
jdaggett@1150 1252 normal and expanded faces" src=universwidths.png>
jdaggett@1148 1253 <p class=caption>Width mappings for a font family with condensed, normal
jdaggett@1148 1254 and expanded width faces
jdaggett@1148 1255 </div>
jdaggett@7377 1256
jdaggett@7377 1257 <p id=font-stretch-animation>Animation of font stretch: Font stretch is
jdaggett@7377 1258 interpolated in discrete steps. The interpolation happens as though the
jdaggett@7377 1259 ordered values are equally spaced real numbers. The interpolation result
jdaggett@7377 1260 is rounded to the nearest value, with values exactly halfway between two
jdaggett@7377 1261 values rounded towards the later value in the list above.</p>
jdaggett@512 1262 <!-- prop: font-style -->
jdaggett@512 1263
jdaggett@1662 1264 <h3 id=font-style-prop><span class=secno>3.4 </span>Font style: the <a
jdaggett@1662 1265 href="#propdef-font-style">font-style</a> property</h3>
jdaggett@1662 1266
jdaggett@4624 1267 <table class=propdef id=namefont-stylevaluenormal-italic-oblique>
jdaggett@484 1268 <tbody>
jdaggett@484 1269 <tr>
jdaggett@484 1270 <td>Name:
jdaggett@484 1271
jdaggett@8278 1272 <td><dfn id=propdef-font-style
jdaggett@8278 1273 title="font-style!!property">font-style</dfn>
jdaggett@484 1274
jdaggett@484 1275 <tr>
jdaggett@484 1276 <td>Value:
jdaggett@484 1277
jdaggett@8278 1278 <td><a href="#font-style-normal-value"
jdaggett@8278 1279 title="normal!!font-style">normal</a> | <a href="#italic">italic</a> |
jdaggett@8278 1280 <a href="#oblique">oblique</a>
jdaggett@484 1281
jdaggett@484 1282 <tr>
jdaggett@484 1283 <td>Initial:
jdaggett@484 1284
jdaggett@484 1285 <td>normal
jdaggett@484 1286
jdaggett@484 1287 <tr>
jdaggett@484 1288 <td>Applies to:
jdaggett@484 1289
jdaggett@484 1290 <td>all elements
jdaggett@484 1291
jdaggett@484 1292 <tr>
jdaggett@484 1293 <td>Inherited:
jdaggett@484 1294
jdaggett@484 1295 <td>yes
jdaggett@484 1296
jdaggett@484 1297 <tr>
jdaggett@484 1298 <td>Percentages:
jdaggett@484 1299
jdaggett@484 1300 <td>N/A
jdaggett@484 1301
jdaggett@484 1302 <tr>
jdaggett@484 1303 <td>Media:
jdaggett@484 1304
jdaggett@484 1305 <td>visual
jdaggett@484 1306
jdaggett@484 1307 <tr>
jdaggett@1148 1308 <td>Computed value:
jdaggett@484 1309
jdaggett@484 1310 <td>as specified
jdaggett@7377 1311
jdaggett@7377 1312 <tr>
jdaggett@7377 1313 <td>Animatable:
jdaggett@7377 1314
jdaggett@7377 1315 <td>no
jdaggett@484 1316 </table>
jdaggett@484 1317
jdaggett@8278 1318 <p>The <a href="#propdef-font-style" title="font-style!!property">‘<code
jdaggett@8278 1319 class=property>font-style</code>’</a> property allows italic or oblique
jdaggett@8278 1320 faces to be selected. Italic forms are generally cursive in nature while
jdaggett@8278 1321 oblique faces are typically sloped versions of the regular face. Oblique
jdaggett@8278 1322 faces can be simulated by artificially sloping the glyphs of the regular
jdaggett@8278 1323 face. Compare the artificially sloped renderings of Palatino ‘<code
jdaggett@2556 1324 class=property>a</code>’ and Baskerville ‘<code
jdaggett@1148 1325 class=property>N</code>’ in grey with the actual italic versions:
jdaggett@518 1326
jdaggett@1150 1327 <div class=figure><img alt="artificial sloping vs. real italics"
jdaggett@1150 1328 src=realvsfakeitalics.png>
jdaggett@890 1329 <p class=caption>Artificial sloping versus real italics
jdaggett@512 1330 </div>
jdaggett@518 1331
jdaggett@8278 1332 <p>Values have the following meanings:
jdaggett@8278 1333
jdaggett@8278 1334 <dl>
jdaggett@8278 1335 <dt><dfn id=font-style-normal-value
jdaggett@8278 1336 title="normal!!font-style">normal</dfn>
jdaggett@8278 1337
jdaggett@8278 1338 <dd>selects a face that is classified as a normal face, one that is
jdaggett@8278 1339 neither italic or obliqued
jdaggett@8278 1340
jdaggett@8278 1341 <dt><dfn id=italic>italic</dfn>
jdaggett@8278 1342
jdaggett@8278 1343 <dd>selects a font that is labeled as an italic face, or an oblique face
jdaggett@8278 1344 if one is not
jdaggett@8278 1345
jdaggett@8278 1346 <dt><dfn id=oblique>oblique</dfn>
jdaggett@8278 1347
jdaggett@8278 1348 <dd>selects a font that is labeled as an oblique face, or an italic face
jdaggett@8278 1349 if one is not
jdaggett@8278 1350 </dl>
jdaggett@8278 1351
jdaggett@8278 1352 <p>If no italic or oblique face is available, oblique faces can be
jdaggett@8363 1353 synthesized by rendering non-obliqued faces with an artificial obliquing
jdaggett@8363 1354 operation. The use of these artificially obliqued faces can be disabled
jdaggett@8363 1355 using the ‘<a href="#propdef-font-synthesis"><code
jdaggett@8363 1356 class=property>font-synthesis</code></a>’ property. The details of the
jdaggett@9154 1357 obliquing operation are not explicitly defined.
jdaggett@9154 1358
jdaggett@9154 1359 <p class=note>Authors should also be aware that synthesized approaches may
jdaggett@9154 1360 not be suitable for scripts like Cyrillic, where italic forms are very
jdaggett@9154 1361 different in shape. It is always better to use an actual italic font
jdaggett@9154 1362 rather than rely on a synthetic version.</p>
jdaggett@8363 1363 <!-- resolution on the "undefined" nature of synthetics: http://www.w3.org/2013/06/06-css-minutes.html#item03 -->
jdaggett@518 1364
jdaggett@518 1365 <p>Many scripts lack the tradition of mixing a cursive form within text
jdaggett@518 1366 rendered with a normal face. Chinese, Japanese and Korean fonts almost
jdaggett@518 1367 always lack italic or oblique faces. Fonts that support a mixture of
jdaggett@518 1368 scripts will sometimes omit specific scripts such as Arabic from the set
jdaggett@518 1369 of glyphs supported in the italic face. User agents should be careful
jdaggett@8225 1370 about making <a href="#character-map"><em>character map</em></a>
jdaggett@8363 1371 assumptions across faces when implementing support for <a
jdaggett@8363 1372 href="#system-font-fallback"><em>system font fallback</em></a>.</p>
jdaggett@1662 1373 <!-- prop: font-size -->
jdaggett@1662 1374
jdaggett@1662 1375 <h3 id=font-size-prop><span class=secno>3.5 </span>Font size: the <a
jdaggett@1662 1376 href="#propdef-font-size">font-size</a> property</h3>
jdaggett@1662 1377
jdaggett@8225 1378 <table class=propdef id=namefont-sizevalueltabsolute-sizegt-ltre>
jdaggett@484 1379 <tbody>
jdaggett@484 1380 <tr>
jdaggett@484 1381 <td>Name:
jdaggett@484 1382
jdaggett@1662 1383 <td><dfn id=propdef-font-size>font-size</dfn>
jdaggett@484 1384
jdaggett@484 1385 <tr>
jdaggett@484 1386 <td>Value:
jdaggett@484 1387
jdaggett@8225 1388 <td><a href="#absolute-size-value"><var>&lt;absolute-size&gt;</var></a>
jdaggett@8225 1389 | <a href="#relative-size-value"><var>&lt;relative-size&gt;</var></a> |
jdaggett@8225 1390 <a href="#length-size-value"><var>&lt;length&gt;</var></a> | <a
jdaggett@8225 1391 href="#percentage-size-value"><var>&lt;percentage&gt;</var></a>
jdaggett@484 1392
jdaggett@484 1393 <tr>
jdaggett@484 1394 <td>Initial:
jdaggett@484 1395
jdaggett@484 1396 <td>medium
jdaggett@484 1397
jdaggett@484 1398 <tr>
jdaggett@484 1399 <td>Applies to:
jdaggett@484 1400
jdaggett@484 1401 <td>all elements
jdaggett@484 1402
jdaggett@484 1403 <tr>
jdaggett@484 1404 <td>Inherited:
jdaggett@484 1405
jdaggett@484 1406 <td>yes
jdaggett@484 1407
jdaggett@484 1408 <tr>
jdaggett@484 1409 <td>Percentages:
jdaggett@484 1410
jdaggett@484 1411 <td>refer to parent element's font size
jdaggett@484 1412
jdaggett@484 1413 <tr>
jdaggett@484 1414 <td>Media:
jdaggett@484 1415
jdaggett@484 1416 <td>visual
jdaggett@484 1417
jdaggett@484 1418 <tr>
jdaggett@1148 1419 <td>Computed value:
jdaggett@484 1420
jdaggett@484 1421 <td>absolute length
jdaggett@7377 1422
jdaggett@7377 1423 <tr>
jdaggett@7377 1424 <td>Animatable:
jdaggett@7377 1425
jdaggett@7377 1426 <td>as <a
jdaggett@7377 1427 href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a>
jdaggett@484 1428 </table>
jdaggett@484 1429
jdaggett@512 1430 <p>This property indicates the desired height of glyphs from the font. For
jdaggett@512 1431 scalable fonts, the font-size is a scale factor applied to the EM unit of
jdaggett@512 1432 the font. (Note that certain glyphs may bleed outside their EM box.) For
jdaggett@512 1433 non-scalable fonts, the font-size is converted into absolute units and
jdaggett@512 1434 matched against the declared font-size of the font, using the same
jdaggett@512 1435 absolute coordinate space for both of the matched values. Values have the
jdaggett@512 1436 following meanings:
jdaggett@512 1437
jdaggett@512 1438 <dl>
jdaggett@8225 1439 <dt><dfn id=absolute-size-value><var>&lt;absolute-size&gt;</var></dfn>
jdaggett@8225 1440
jdaggett@8225 1441 <dd> An <a
jdaggett@8225 1442 href="#absolute-size-value"><var>&lt;absolute-size&gt;</var></a> keyword
jdaggett@8225 1443 refers to an entry in a table of font sizes computed and kept by the user
jdaggett@8225 1444 agent. Possible values are:
jdaggett@512 1445 <p> [ xx-small | x-small | small | medium | large | x-large | xx-large ]</p>
jdaggett@512 1446
jdaggett@8225 1447 <dt><dfn id=relative-size-value><var>&lt;relative-size&gt;</var></dfn>
jdaggett@8225 1448
jdaggett@8225 1449 <dd> A <a href="#relative-size-value"><var>&lt;relative-size&gt;</var></a>
jdaggett@8225 1450 keyword is interpreted relative to the table of font sizes and the
jdaggett@8225 1451 computed ‘<a href="#propdef-font-size"><code
jdaggett@8225 1452 class=property>font-size</code></a>’ of the parent element. Possible
jdaggett@8225 1453 values are:
jdaggett@890 1454 <p> [ larger | smaller ]
jdaggett@890 1455
jdaggett@1148 1456 <p> For example, if the parent element has a font size of ‘<code
jdaggett@1148 1457 class=property>medium</code>’, a value of ‘<code
jdaggett@1148 1458 class=property>larger</code>’ will make the font size of the current
jdaggett@1148 1459 element be ‘<code class=property>large</code>’. If the parent
jdaggett@1148 1460 element's size is not close to a table entry, the user agent is free to
jdaggett@1148 1461 interpolate between table entries or round off to the closest one. The
jdaggett@1148 1462 user agent may have to extrapolate table values if the numerical value
jdaggett@1148 1463 goes beyond the keywords.
jdaggett@512 1464
jdaggett@8225 1465 <dt><dfn id=length-size-value><var>&lt;length&gt;</var></dfn>
jdaggett@512 1466
jdaggett@8187 1467 <dd>A length value specifies an absolute font size (independent of the
jdaggett@8187 1468 user agent's font table). Negative lengths are illegal.
jdaggett@512 1469
jdaggett@8225 1470 <dt><dfn id=percentage-size-value><var>&lt;percentage&gt;</var></dfn>
jdaggett@512 1471
jdaggett@512 1472 <dd>A percentage value specifies an absolute font size relative to the
jdaggett@512 1473 parent element's font size. Use of percentage values, or values in
jdaggett@1148 1474 ‘<code class=property>em</code>’s, leads to more robust and
jdaggett@512 1475 cascadable style sheets.
jdaggett@512 1476 </dl>
jdaggett@512 1477
jdaggett@8187 1478 <p>The following table provides user agent guidelines for the absolute-size
jdaggett@8187 1479 scaling factor and their mapping to HTML heading and absolute font-sizes.
jdaggett@8187 1480 The ‘<code class=property>medium</code>’ value is used as the
jdaggett@8187 1481 reference middle value. The user agent may fine-tune these values for
jdaggett@8187 1482 different fonts or different types of display devices.
jdaggett@1244 1483
jdaggett@1244 1484 <table class=data>
jdaggett@1152 1485 <thead>
jdaggett@1152 1486 <tr>
jdaggett@1152 1487 <th>CSS absolute-size values
jdaggett@1152 1488
jdaggett@1152 1489 <th>xx-small
jdaggett@1152 1490
jdaggett@1152 1491 <th>x-small
jdaggett@1152 1492
jdaggett@1152 1493 <th>small
jdaggett@1152 1494
jdaggett@1152 1495 <th>medium
jdaggett@1152 1496
jdaggett@1152 1497 <th>large
jdaggett@1152 1498
jdaggett@1152 1499 <th>x-large
jdaggett@1152 1500
jdaggett@1152 1501 <th>xx-large
jdaggett@1152 1502
jdaggett@1152 1503 <th> 
jdaggett@1152 1504
jdaggett@512 1505 <tbody>
jdaggett@512 1506 <tr>
jdaggett@1152 1507 <th>scaling factor
jdaggett@1152 1508
jdaggett@1152 1509 <td>3/5
jdaggett@1152 1510
jdaggett@1152 1511 <td>3/4
jdaggett@1152 1512
jdaggett@1152 1513 <td>8/9
jdaggett@1152 1514
jdaggett@1152 1515 <td>1
jdaggett@1152 1516
jdaggett@1152 1517 <td>6/5
jdaggett@1152 1518
jdaggett@1152 1519 <td>3/2
jdaggett@1152 1520
jdaggett@1152 1521 <td>2/1
jdaggett@1152 1522
jdaggett@1152 1523 <td>3/1
jdaggett@512 1524
jdaggett@512 1525 <tr>
jdaggett@8187 1526 <th>HTML headings
jdaggett@1152 1527
jdaggett@1152 1528 <td>h6
jdaggett@1152 1529
jdaggett@1152 1530 <td> 
jdaggett@1152 1531
jdaggett@1152 1532 <td>h5
jdaggett@1152 1533
jdaggett@1152 1534 <td>h4
jdaggett@1152 1535
jdaggett@1152 1536 <td>h3
jdaggett@1152 1537
jdaggett@1152 1538 <td>h2
jdaggett@1152 1539
jdaggett@1152 1540 <td>h1
jdaggett@1152 1541
jdaggett@1152 1542 <td> 
jdaggett@512 1543
jdaggett@512 1544 <tr>
jdaggett@8187 1545 <th>HTML font sizes
jdaggett@1152 1546
jdaggett@1152 1547 <td>1
jdaggett@1152 1548
jdaggett@1152 1549 <td> 
jdaggett@1152 1550
jdaggett@1152 1551 <td>2
jdaggett@1152 1552
jdaggett@1152 1553 <td>3
jdaggett@1152 1554
jdaggett@1152 1555 <td>4
jdaggett@1152 1556
jdaggett@1152 1557 <td>5
jdaggett@1152 1558
jdaggett@1152 1559 <td>6
jdaggett@1152 1560
jdaggett@1152 1561 <td>7
jdaggett@512 1562 </table>
jdaggett@512 1563
jdaggett@512 1564 <p class=note><em><strong>Note 1.</strong> To preserve readability, an UA
jdaggett@512 1565 applying these guidelines should nevertheless avoid creating font-size
jdaggett@8272 1566 resulting in less than 9 device pixels per EM unit on a computer
jdaggett@8272 1567 display.</em>
jdaggett@512 1568
jdaggett@512 1569 <p class=note><em><strong>Note 2.</strong> In CSS1, the suggested scaling
jdaggett@512 1570 factor between adjacent indexes was 1.5 which user experience proved to be
jdaggett@512 1571 too large. In CSS2, the suggested scaling factor for computer screen
jdaggett@512 1572 between adjacent indexes was 1.2 which still created issues for the small
jdaggett@512 1573 sizes. The new scaling factor varies between each index to provide a
jdaggett@512 1574 better readability.</em>
jdaggett@512 1575
jdaggett@6659 1576 <p>The actual value of this property may differ from the computed value due
jdaggett@6659 1577 a numerical value on ‘<a href="#propdef-font-size-adjust"><code
jdaggett@4624 1578 class=property>font-size-adjust</code></a>’ and the unavailability of
jdaggett@4624 1579 certain font sizes.
jdaggett@512 1580
jdaggett@512 1581 <p>Child elements inherit the computed <a class=noxref
jdaggett@6659 1582 href="#font-size-prop"> <span class=property>‘<code
jdaggett@1148 1583 class=property>font-size</code>’</span></a> value (otherwise, the effect
jdaggett@2556 1584 of <a class=noxref href="#font-size-adjust-prop"><span
jdaggett@2556 1585 class=property>‘<code
jdaggett@1148 1586 class=property>font-size-adjust</code>’</span></a> would compound).
jdaggett@512 1587
jdaggett@512 1588 <div class=example>
jdaggett@8699 1589 <p style="display:none">Example(s):</p>
jdaggett@890 1590
jdaggett@512 1591 <pre>p { font-size: 12pt; }
jdaggett@512 1592 blockquote { font-size: larger }
jdaggett@512 1593 em { font-size: 150% }
jdaggett@512 1594 em { font-size: 1.5em }
jdaggett@512 1595 </pre>
jdaggett@512 1596 </div>
jdaggett@512 1597 <!-- prop: font-size-adjust -->
jdaggett@512 1598
jdaggett@1662 1599 <h3 id=font-size-adjust-prop><span class=secno>3.6 </span>Relative sizing:
jdaggett@1662 1600 the <a href="#propdef-font-size-adjust">font-size-adjust</a> property</h3>
jdaggett@1662 1601
jdaggett@8968 1602 <table class=propdef id=namefont-size-adjustvaluenone-ltnumbergt>
jdaggett@484 1603 <tbody>
jdaggett@484 1604 <tr>
jdaggett@484 1605 <td>Name:
jdaggett@484 1606
jdaggett@1662 1607 <td><dfn id=propdef-font-size-adjust>font-size-adjust</dfn>
jdaggett@484 1608
jdaggett@484 1609 <tr>
jdaggett@484 1610 <td>Value:
jdaggett@484 1611
jdaggett@8278 1612 <td><a href="#font-size-adjust-none-value"
jdaggett@8278 1613 title="none!!font-size-adjust">none</a> | <a
jdaggett@8225 1614 href="#aspect-ratio-value"><var>&lt;number&gt;</var></a>
jdaggett@484 1615
jdaggett@484 1616 <tr>
jdaggett@484 1617 <td>Initial:
jdaggett@484 1618
jdaggett@484 1619 <td>none
jdaggett@484 1620
jdaggett@484 1621 <tr>
jdaggett@484 1622 <td>Applies to:
jdaggett@484 1623
jdaggett@484 1624 <td>all elements
jdaggett@484 1625
jdaggett@484 1626 <tr>
jdaggett@484 1627 <td>Inherited:
jdaggett@484 1628
jdaggett@484 1629 <td>yes
jdaggett@484 1630
jdaggett@484 1631 <tr>
jdaggett@484 1632 <td>Percentages:
jdaggett@484 1633
jdaggett@554 1634 <td>N/A
jdaggett@484 1635
jdaggett@484 1636 <tr>
jdaggett@484 1637 <td>Media:
jdaggett@484 1638
jdaggett@484 1639 <td>visual
jdaggett@484 1640
jdaggett@484 1641 <tr>
jdaggett@1148 1642 <td>Computed value:
jdaggett@484 1643
jdaggett@554 1644 <td>as specified
jdaggett@7377 1645
jdaggett@7377 1646 <tr>
jdaggett@7377 1647 <td>Animatable:
jdaggett@7377 1648
jdaggett@7377 1649 <td>as <a
jdaggett@7377 1650 href="http://dev.w3.org/csswg/css3-transitions/#animtype-number">number</a>
jdaggett@484 1651 </table>
jdaggett@484 1652
jdaggett@555 1653 <p>For any given font size, the apparent size and legibility of text varies
jdaggett@555 1654 across fonts. For scripts such as Latin or Cyrillic that distinguish
jdaggett@555 1655 between upper and lowercase letters, the relative height of lowercase
jdaggett@555 1656 letters compared to their uppercase counterparts is a determining factor
jdaggett@555 1657 of legibility. This is commonly referred to as the <a class=index-def
jdaggett@4624 1658 href="#aspect-value" id=aspect-value0 title="aspect value"><dfn
jdaggett@4624 1659 id=aspect-value>aspect value</dfn></a>. Precisely defined, it is equal to
jdaggett@4624 1660 the x-height of a font divided by the font size.
jdaggett@555 1661
jdaggett@555 1662 <p>In situations where font fallback occurs, fallback fonts may not share
jdaggett@9154 1663 the same aspect value as the desired font family and will thus appear less
jdaggett@8968 1664 readable. The ‘<a href="#propdef-font-size-adjust"><code
jdaggett@8968 1665 class=property>font-size-adjust</code></a>’ property is a way to
jdaggett@8968 1666 preserve the readability of text when font fallback occurs. It does this
jdaggett@8968 1667 by adjusting the font-size so that the x-height is the same regardless of
jdaggett@8968 1668 the font used.
jdaggett@547 1669
jdaggett@547 1670 <div class=example>
jdaggett@547 1671 <p>The style defined below defines Verdana as the desired font family, but
jdaggett@547 1672 if Verdana is not available Futura or Times will be used.</p>
jdaggett@547 1673
jdaggett@8277 1674 <pre>p {
jdaggett@8277 1675 font-family: Verdana, Futura, Times;
jdaggett@547 1676 }
jdaggett@547 1677
jdaggett@547 1678 &lt;p>Lorem ipsum dolor sit amet, ...&lt;/p>
jdaggett@547 1679 </pre>
jdaggett@547 1680
jdaggett@9154 1681 <p>Verdana has a relatively high aspect value, lowercase letters are
jdaggett@547 1682 relatively tall compared to uppercase letters, so at small sizes text
jdaggett@9154 1683 appears legible. Times has a lower aspect value and so if fallback
jdaggett@547 1684 occurs, the text will be less legible at small sizes than Verdana.</p>
jdaggett@547 1685 </div>
jdaggett@547 1686
jdaggett@547 1687 <p>How text rendered in each of these fonts compares is shown below, the
jdaggett@547 1688 columns show text rendered in Verdana, Futura and Times. The same
jdaggett@547 1689 font-size value is used across cells within each row and red lines are
jdaggett@547 1690 included to show the differences in x-height. In the upper half each row
jdaggett@547 1691 is rendered in the same font-size value. The same is true for the lower
jdaggett@8968 1692 half but in this half the ‘<a href="#propdef-font-size-adjust"><code
jdaggett@8968 1693 class=property>font-size-adjust</code></a>’ property is also set so that
jdaggett@2462 1694 the actual font size is adjusted to preserve the x-height across each row.
jdaggett@547 1695 Note how small text remains relatively legible across each row in the
jdaggett@547 1696 lower half.
jdaggett@547 1697
jdaggett@8968 1698 <div class=figure><img alt="text with and without 'font-size-adjust'"
jdaggett@1150 1699 src=fontsizeadjust.png>
jdaggett@8968 1700 <p class=caption>Text with and without the use of ‘<a
jdaggett@8968 1701 href="#propdef-font-size-adjust"><code
jdaggett@8968 1702 class=property>font-size-adjust</code></a>’
jdaggett@547 1703 </div>
jdaggett@512 1704
jdaggett@8640 1705 <p>This property allows authors to specify an <a
jdaggett@8640 1706 href="#aspect-value"><i>aspect value</i></a> for an element that will
jdaggett@8640 1707 effectively preserve the x-height of the first choice font, whether it is
jdaggett@8640 1708 substituted or not. Values have the following meanings:
jdaggett@512 1709
jdaggett@512 1710 <dl>
jdaggett@8278 1711 <dt><dfn id=font-size-adjust-none-value
jdaggett@8278 1712 title="none!!font-size-adjust">none</dfn>
jdaggett@512 1713
jdaggett@512 1714 <dd>Do not preserve the font's x-height.
jdaggett@512 1715
jdaggett@8225 1716 <dt><dfn id=aspect-ratio-value><var>&lt;number&gt;</var></dfn>
jdaggett@512 1717
jdaggett@8640 1718 <dd>Specifies the <a href="#aspect-value"><i>aspect value</i></a> used in
jdaggett@8640 1719 the calculation below to calculate the adjusted font size:
jdaggett@8277 1720 <pre>c = ( a / a' ) s
jdaggett@512 1721 </pre>
jdaggett@512 1722
jdaggett@512 1723 <p>where:</p>
jdaggett@512 1724
jdaggett@554 1725 <pre>s = font-size value
jdaggett@8968 1726 a = <a href="#aspect-value"><i>aspect value</i></a> as specified by the 'font-size-adjust' property
jdaggett@8640 1727 a' = <a href="#aspect-value"><i>aspect value</i></a> of actual font
jdaggett@554 1728 c = adjusted font-size to use
jdaggett@512 1729 </pre>
jdaggett@554 1730
jdaggett@554 1731 <p>This value applies to any font that is selected but in typical usage
jdaggett@8640 1732 it should be based on the <a href="#aspect-value"><i>aspect
jdaggett@8640 1733 value</i></a> of the first font in the font-family list. If this is
jdaggett@8640 1734 specified accurately, the <tt>(a/a')</tt> term in the formula above is
jdaggett@8640 1735 effectively 1 for the first font and no adjustment occurs. If the value
jdaggett@8640 1736 is specified inaccurately, text rendered using the first font in the
jdaggett@8640 1737 family list will display differently in older user agents that don't
jdaggett@8968 1738 support ‘<a href="#propdef-font-size-adjust"><code
jdaggett@8968 1739 class=property>font-size-adjust</code></a>’.</p>
jdaggett@512 1740 </dl>
jdaggett@512 1741
jdaggett@8640 1742 <p>The value of ‘<a href="#propdef-font-size-adjust"><code
jdaggett@8968 1743 class=property>font-size-adjust</code></a>’ affects the used value of
jdaggett@8968 1744 ‘<a href="#propdef-font-size"><code
jdaggett@8968 1745 class=property>font-size</code></a>’ but does not affect the computed
jdaggett@8968 1746 value. It affects the size of relative units that are based on font
jdaggett@8968 1747 metrics of the <a href="#first-available-font"><i>first available
jdaggett@8968 1748 font</i></a> such as <code>ex</code> and <code>ch</code> but does not
jdaggett@8968 1749 affect the size of <code>em</code> units. Since numeric values of <a
jdaggett@8957 1750 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
jdaggett@8968 1751 class=property>line-height</code>’</a> refer to the computed size of
jdaggett@8968 1752 ‘<a href="#propdef-font-size"><code
jdaggett@8968 1753 class=property>font-size</code></a>’, ‘<a
jdaggett@8968 1754 href="#propdef-font-size-adjust"><code
jdaggett@8968 1755 class=property>font-size-adjust</code></a>’ does not affect the used
jdaggett@8968 1756 value of <a
jdaggett@8957 1757 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
jdaggett@8968 1758 class=property>line-height</code>’</a>.
jdaggett@8968 1759
jdaggett@8968 1760 <p class=note>In CSS, authors often specify <a
jdaggett@8968 1761 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
jdaggett@8968 1762 class=property>line-height</code>’</a> as a multiple of the ‘<a
jdaggett@8968 1763 href="#propdef-font-size"><code class=property>font-size</code></a>’.
jdaggett@8968 1764 Since the ‘<a href="#propdef-font-size-adjust"><code
jdaggett@8968 1765 class=property>font-size-adjust</code></a>’ property affects the used
jdaggett@8968 1766 value of ‘<a href="#propdef-font-size"><code
jdaggett@8968 1767 class=property>font-size</code></a>’, authors should take care setting
jdaggett@8968 1768 the line height when ‘<a href="#propdef-font-size-adjust"><code
jdaggett@8957 1769 class=property>font-size-adjust</code></a>’ is used. Setting the line
jdaggett@8968 1770 height too tightly can result in overlapping lines of text in this
jdaggett@8957 1771 situation.
jdaggett@8957 1772
jdaggett@8640 1773 <p>Authors can calculate the <a href="#aspect-value"><i>aspect
jdaggett@8640 1774 value</i></a> for a given font by comparing spans with the same content
jdaggett@8968 1775 but different ‘<a href="#propdef-font-size-adjust"><code
jdaggett@8968 1776 class=property>font-size-adjust</code></a>’ properties. If the same
jdaggett@8968 1777 font-size is used, the spans will match when the ‘<a
jdaggett@8968 1778 href="#propdef-font-size-adjust"><code
jdaggett@8968 1779 class=property>font-size-adjust</code></a>’ value is accurate for the
jdaggett@8640 1780 given font.
jdaggett@554 1781
jdaggett@554 1782 <div class=example>
jdaggett@8640 1783 <p>Two spans with borders are used to determine the <a
jdaggett@8968 1784 href="#aspect-value"><i>aspect value</i></a> of a font. The ‘<a
jdaggett@8968 1785 href="#propdef-font-size"><code class=property>font-size</code></a>’ is
jdaggett@8968 1786 the same for both spans but the ‘<a
jdaggett@8968 1787 href="#propdef-font-size-adjust"><code
jdaggett@8968 1788 class=property>font-size-adjust</code></a>’ property is specified only
jdaggett@8968 1789 for the right span. Starting with a value of 0.5, the aspect value can be
jdaggett@8968 1790 adjusted until the borders around the two letters line up.</p>
jdaggett@554 1791
jdaggett@554 1792 <pre>p {
jdaggett@554 1793 font-family: Futura;
jdaggett@554 1794 font-size: 500px;
jdaggett@554 1795 }
jdaggett@554 1796
jdaggett@554 1797 span {
jdaggett@554 1798 border: solid 1px red;
jdaggett@554 1799 }
jdaggett@554 1800
jdaggett@554 1801 .adjust {
jdaggett@554 1802 font-size-adjust: 0.5;
jdaggett@554 1803 }
jdaggett@554 1804
jdaggett@554 1805 &lt;p>&lt;span>b&lt;/span>&lt;span class="adjust">b&lt;/span>&lt;/p>
jdaggett@554 1806 </pre>
jdaggett@554 1807
jdaggett@8640 1808 <div class=figure><img alt="Futura with an <i>aspect value</i> of 0.5"
jdaggett@1150 1809 src=beforefontsizeadjust.png>
jdaggett@8640 1810 <p class=caption>Futura with an <a href="#aspect-value"><i>aspect
jdaggett@8640 1811 value</i></a> of 0.5
jdaggett@554 1812 </div>
jdaggett@554 1813
jdaggett@554 1814 <p>The box on the right is a bit bigger than the one on the left, so the
jdaggett@8640 1815 <a href="#aspect-value"><i>aspect value</i></a> of this font is something
jdaggett@8640 1816 less than 0.5. Adjust the value until the boxes align.</p>
jdaggett@554 1817 </div>
jdaggett@512 1818 <!-- prop: font -->
jdaggett@512 1819
jdaggett@1662 1820 <h3 id=font-prop><span class=secno>3.7 </span>Shorthand font property: the
jdaggett@1662 1821 <a href="#propdef-font">font</a> property</h3>
jdaggett@1662 1822
jdaggett@8225 1823 <table class=propdef id=namefontvalue-ltlsquofont-stylersquogt-l>
jdaggett@484 1824 <tbody>
jdaggett@484 1825 <tr>
jdaggett@484 1826 <td>Name:
jdaggett@484 1827
jdaggett@1662 1828 <td><dfn id=propdef-font>font</dfn>
jdaggett@484 1829
jdaggett@484 1830 <tr>
jdaggett@484 1831 <td>Value:
jdaggett@484 1832
jdaggett@8278 1833 <td>[ [ <var>&lt;<a href="#propdef-font-style"
jdaggett@8278 1834 title="font-style!!property">‘<code
jdaggett@8278 1835 class=property>font-style</code>’</a>&gt;</var> || <a
jdaggett@8225 1836 href="#font-variant-css21-values"><var>&lt;font-variant-css21&gt;</var></a>
jdaggett@8278 1837 || <var>&lt;<a href="#propdef-font-weight"
jdaggett@8278 1838 title="font-weight!!property">‘<code
jdaggett@8278 1839 class=property>font-weight</code>’</a>&gt;</var> || <var>&lt;<a
jdaggett@8278 1840 href="#propdef-font-stretch" title="font-stretch!!property">‘<code
jdaggett@8278 1841 class=property>font-stretch</code>’</a></var> ]? <var>&lt;‘<a
jdaggett@8225 1842 href="#propdef-font-size"><code
jdaggett@8225 1843 class=property>font-size</code></a>’&gt;</var> [ / <var>&lt;‘<code
jdaggett@8278 1844 class=property>line-height</code>’&gt;</var> ]? <var>&lt;<a
jdaggett@8278 1845 href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8278 1846 class=property>font-family</code>’</a>&gt;</var> ] | caption | icon |
jdaggett@8225 1847 menu | message-box | small-caption | status-bar
jdaggett@484 1848
jdaggett@484 1849 <tr>
jdaggett@484 1850 <td>Initial:
jdaggett@484 1851
jdaggett@484 1852 <td>see individual properties
jdaggett@484 1853
jdaggett@484 1854 <tr>
jdaggett@484 1855 <td>Applies to:
jdaggett@484 1856
jdaggett@484 1857 <td>all elements
jdaggett@484 1858
jdaggett@484 1859 <tr>
jdaggett@484 1860 <td>Inherited:
jdaggett@484 1861
jdaggett@484 1862 <td>yes
jdaggett@484 1863
jdaggett@484 1864 <tr>
jdaggett@484 1865 <td>Percentages:
jdaggett@484 1866
jdaggett@484 1867 <td>see individual properties
jdaggett@484 1868
jdaggett@484 1869 <tr>
jdaggett@484 1870 <td>Media:
jdaggett@484 1871
jdaggett@484 1872 <td>visual
jdaggett@484 1873
jdaggett@484 1874 <tr>
jdaggett@1148 1875 <td>Computed value:
jdaggett@484 1876
jdaggett@484 1877 <td>see individual properties
jdaggett@7377 1878
jdaggett@7377 1879 <tr>
jdaggett@7377 1880 <td>Animatable:
jdaggett@7377 1881
jdaggett@7377 1882 <td>see individual properties
jdaggett@484 1883 </table>
jdaggett@1732 1884
jdaggett@4624 1885 <p>The <span class=property>‘<a href="#propdef-font"><code
jdaggett@4624 1886 class=property>font</code></a>’</span> property is, except as described
jdaggett@8278 1887 below, a shorthand property for setting <a href="#propdef-font-style"
jdaggett@8278 1888 title="font-style!!property">‘<code
jdaggett@8278 1889 class=property>font-style</code>’</a>, <a href="#propdef-font-variant"
jdaggett@8278 1890 title="font-variant!!property">‘<code
jdaggett@8278 1891 class=property>font-variant</code>’</a>, <a href="#propdef-font-weight"
jdaggett@8278 1892 title="font-weight!!property">‘<code
jdaggett@8278 1893 class=property>font-weight</code>’</a>, <a href="#propdef-font-stretch"
jdaggett@8278 1894 title="font-stretch!!property">‘<code
jdaggett@8278 1895 class=property>font-stretch</code>’</a>, <span class=property>‘<a
jdaggett@8278 1896 href="#propdef-font-size"><code
jdaggett@8278 1897 class=property>font-size</code></a>’</span>, <a class=property
jdaggett@8278 1898 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
jdaggett@8278 1899 class=property>line-height</code>’</a>, <a href="#propdef-font-family"
jdaggett@8278 1900 title="font-family!!property">‘<code
jdaggett@8278 1901 class=property>font-family</code>’</a> at the same place in the
jdaggett@8278 1902 stylesheet. Values for the <a href="#propdef-font-variant"
jdaggett@8278 1903 title="font-variant!!property">‘<code
jdaggett@8278 1904 class=property>font-variant</code>’</a> property may also be included
jdaggett@8313 1905 but only those supported in CSS 2.1, none of the <a
jdaggett@8313 1906 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8313 1907 class=property>font-variant</code>’</a> values added in this
jdaggett@8313 1908 specification can be used in the <span class=property>‘<a
jdaggett@8278 1909 href="#propdef-font"><code class=property>font</code></a>’</span>
jdaggett@8278 1910 shorthand:
jdaggett@1732 1911
jdaggett@1732 1912 <pre
jdaggett@8225 1913 class=prod><dfn id=font-variant-css21-values><var>&lt;font-variant-css21&gt;</var></dfn> = [normal | small-caps]</pre>
jdaggett@1732 1914
jdaggett@1732 1915 <p>The syntax of this property is based on a traditional typographical
jdaggett@1732 1916 shorthand notation to set multiple properties related to fonts.
jdaggett@512 1917
jdaggett@8197 1918 <p>All subproperties of the ‘<a href="#propdef-font"><code
jdaggett@8197 1919 class=property>font</code></a>’ property are first reset to their
jdaggett@8197 1920 initial values, including those listed above plus <span
jdaggett@4624 1921 class=property>‘<a href="#propdef-font-size-adjust"><code
jdaggett@4624 1922 class=property>font-size-adjust</code></a>’</span>, <span
jdaggett@4624 1923 class=property>‘<a href="#propdef-font-kerning"><code
jdaggett@8278 1924 class=property>font-kerning</code></a>’</span>, subproperties of <a
jdaggett@8278 1925 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8278 1926 class=property>font-variant</code>’</a> and and <span>‘<a
jdaggett@8278 1927 href="#propdef-font-language-override"><code
jdaggett@8197 1928 class=property>font-language-override</code></a>’</span>. Then, those
jdaggett@8197 1929 properties that are given explicit values in the <span
jdaggett@8197 1930 class=property>‘<a href="#propdef-font"><code
jdaggett@4624 1931 class=property>font</code></a>’</span> shorthand are set to those
jdaggett@512 1932 values. For a definition of allowed and initial values, see the previously
jdaggett@512 1933 defined properties. For reasons of backwards compatibility, it is not
jdaggett@4624 1934 possible to set <span class=property>‘<a
jdaggett@7020 1935 href="#propdef-font-size-adjust"><code
jdaggett@7020 1936 class=property>font-size-adjust</code></a>’</span> to anything other
jdaggett@7020 1937 than its initial value using the <span class=property>‘<a
jdaggett@4624 1938 href="#propdef-font"><code class=property>font</code></a>’</span>
jdaggett@7020 1939 shorthand property; instead, use the individual property.
jdaggett@512 1940
jdaggett@512 1941 <div class=example>
jdaggett@8699 1942 <p style="display:none">Example(s):</p>
jdaggett@890 1943
jdaggett@512 1944 <pre>p { font: 12pt/14pt sans-serif }
jdaggett@512 1945 p { font: 80% sans-serif }
jdaggett@512 1946 p { font: x-large/110% &quot;new century schoolbook&quot;, serif }
jdaggett@512 1947 p { font: bold italic large Palatino, serif }
jdaggett@512 1948 p { font: normal small-caps 120%/120% fantasy }
jdaggett@7020 1949 p { font: condensed oblique 12pt &quot;Helvetica Neue&quot;, serif; }
jdaggett@512 1950 </pre>
jdaggett@512 1951
jdaggett@1148 1952 <p> In the second rule, the font size percentage value (‘<code
jdaggett@8187 1953 class=css>80%</code>’) refers to the computed ‘<a
jdaggett@8187 1954 href="#propdef-font-size"><code class=property>font-size</code></a>’ of
jdaggett@8187 1955 the parent element. In the third rule, the line height percentage
jdaggett@8187 1956 (‘<code class=css>110%</code>’) refers to the font size of the
jdaggett@8187 1957 element itself.
jdaggett@512 1958
jdaggett@8278 1959 <p>The first three rules do not specify the <a
jdaggett@8278 1960 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8278 1961 class=property>font-variant</code>’</a> and <a
jdaggett@8278 1962 href="#propdef-font-weight" title="font-weight!!property">‘<code
jdaggett@8278 1963 class=property>font-weight</code>’</a> explicitly, so these properties
jdaggett@8368 1964 receive their initial values (<span title="normal value">‘<code
jdaggett@8368 1965 class=property>normal</code>’</span>). Notice that the font family name
jdaggett@8279 1966 "new century schoolbook", which contains spaces, is enclosed in quotes.
jdaggett@8279 1967 The fourth rule sets the <a href="#propdef-font-weight"
jdaggett@8279 1968 title="font-weight!!property">‘<code
jdaggett@8278 1969 class=property>font-weight</code>’</a> to ‘<a href="#bold"><code
jdaggett@8278 1970 class=property>bold</code></a>’, the <a href="#propdef-font-style"
jdaggett@8278 1971 title="font-style!!property">‘<code
jdaggett@8278 1972 class=property>font-style</code>’</a> to ‘<a href="#italic"><code
jdaggett@8278 1973 class=property>italic</code></a>’, and implicitly sets <a
jdaggett@8278 1974 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8368 1975 class=property>font-variant</code>’</a> to <a
jdaggett@8368 1976 href="#font-variant-normal-value" title="normal!!font-variant">‘<code
jdaggett@8368 1977 class=property>normal</code>’</a>.
jdaggett@8278 1978
jdaggett@8278 1979 <p> The fifth rule sets the <a href="#propdef-font-variant"
jdaggett@8278 1980 title="font-variant!!property">‘<code
jdaggett@8278 1981 class=property>font-variant</code>’</a> (‘<a href="#small-caps"><code
jdaggett@8278 1982 class=property>small-caps</code></a>’), the <span class=property>‘<a
jdaggett@8278 1983 href="#propdef-font-size"><code
jdaggett@4624 1984 class=property>font-size</code></a>’</span> (120% of the parent's font
jdaggett@8278 1985 size), the <a class=property
jdaggett@8278 1986 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
jdaggett@8278 1987 class=property>line-height</code>’</a> (120% of the font size) and the
jdaggett@8278 1988 <a href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8278 1989 class=property>font-family</code>’</a> (‘<a href="#fantasy"><code
jdaggett@8368 1990 class=property>fantasy</code></a>’). It follows that the keyword <span
jdaggett@8368 1991 title="normal value">‘<code class=property>normal</code>’</span>
jdaggett@8368 1992 applies to the two remaining properties: <a href="#propdef-font-style"
jdaggett@8278 1993 title="font-style!!property">‘<code
jdaggett@8278 1994 class=property>font-style</code>’</a> and <a
jdaggett@8278 1995 href="#propdef-font-weight" title="font-weight!!property">‘<code
jdaggett@8278 1996 class=property>font-weight</code>’</a>.
jdaggett@8278 1997
jdaggett@8278 1998 <p>The sixth rule sets the <a href="#propdef-font-style"
jdaggett@8278 1999 title="font-style!!property">‘<code
jdaggett@8278 2000 class=property>font-style</code>’</a>, <a href="#propdef-font-stretch"
jdaggett@8278 2001 title="font-stretch!!property">‘<code
jdaggett@8278 2002 class=property>font-stretch</code>’</a>, <span class=property>‘<a
jdaggett@8278 2003 href="#propdef-font-size"><code
jdaggett@8278 2004 class=property>font-size</code></a>’</span>, and <a
jdaggett@8278 2005 href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8278 2006 class=property>font-family</code>’</a>, the other font properties being
jdaggett@8278 2007 set to their initial values.
jdaggett@512 2008 </div>
jdaggett@512 2009
jdaggett@8278 2010 <p>Since the <a href="#propdef-font-stretch"
jdaggett@8278 2011 title="font-stretch!!property">‘<code
jdaggett@8278 2012 class=property>font-stretch</code>’</a> property was not defined in CSS
jdaggett@8278 2013 2.1, when using <a href="#propdef-font-stretch"
jdaggett@8278 2014 title="font-stretch!!property">‘<code
jdaggett@8278 2015 class=property>font-stretch</code>’</a> values within ‘<a
jdaggett@7020 2016 href="#propdef-font"><code class=property>font</code></a>’ rules,
jdaggett@7020 2017 authors should include a extra version compatible with older user agents:
jdaggett@7020 2018
jdaggett@7020 2019 <pre>p {
jdaggett@7020 2020 font: 80% sans-serif; /* for older user agents */
jdaggett@7020 2021 font: condensed 80% sans-serif;
jdaggett@7020 2022 }</pre>
jdaggett@7020 2023
jdaggett@1662 2024 <p>The following values refer to system fonts:
jdaggett@512 2025
jdaggett@512 2026 <dl>
jdaggett@512 2027 <dt><strong>caption</strong>
jdaggett@512 2028
jdaggett@512 2029 <dd>The font used for captioned controls (e.g., buttons, drop-downs,
jdaggett@512 2030 etc.).
jdaggett@512 2031
jdaggett@512 2032 <dt><strong>icon</strong>
jdaggett@512 2033
jdaggett@512 2034 <dd>The font used to label icons.
jdaggett@512 2035
jdaggett@512 2036 <dt><strong>menu</strong>
jdaggett@512 2037
jdaggett@512 2038 <dd>The font used in menus (e.g., dropdown menus and menu lists).
jdaggett@512 2039
jdaggett@512 2040 <dt><strong>message-box</strong>
jdaggett@512 2041
jdaggett@512 2042 <dd>The font used in dialog boxes.
jdaggett@512 2043
jdaggett@512 2044 <dt><strong>small-caption</strong>
jdaggett@512 2045
jdaggett@512 2046 <dd>The font used for labeling small controls.
jdaggett@512 2047
jdaggett@512 2048 <dt><strong>status-bar</strong>
jdaggett@512 2049
jdaggett@512 2050 <dd>The font used in window status bars.
jdaggett@512 2051 </dl>
jdaggett@512 2052
jdaggett@512 2053 <p>System fonts may only be set as a whole; that is, the font family, size,
jdaggett@1662 2054 weight, style, etc. are all set at the same time. These values may then be
jdaggett@512 2055 altered individually if desired. If no font with the indicated
jdaggett@512 2056 characteristics exists on a given platform, the user agent should either
jdaggett@1148 2057 intelligently substitute (e.g., a smaller version of the ‘<code
jdaggett@1148 2058 class=property>caption</code>’ font might be used for the ‘<code
jdaggett@7242 2059 class=property>small-caption</code>’ font), or substitute a user agent
jdaggett@1148 2060 default font. As for regular fonts, if, for a system font, any of the
jdaggett@1148 2061 individual properties are not part of the operating system's available
jdaggett@1148 2062 user preferences, those properties should be set to their initial values.
jdaggett@512 2063
jdaggett@1662 2064 <p>That is why this property is "almost" a shorthand property: system fonts
jdaggett@8278 2065 can only be specified with this property, not with <a
jdaggett@8278 2066 href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8278 2067 class=property>font-family</code>’</a> itself, so <span
jdaggett@4624 2068 class=property>‘<a href="#propdef-font"><code
jdaggett@4624 2069 class=property>font</code></a>’</span> allows authors to do more than
jdaggett@4624 2070 the sum of its subproperties. However, the individual properties such as
jdaggett@8278 2071 <a href="#propdef-font-weight" title="font-weight!!property">‘<code
jdaggett@8278 2072 class=property>font-weight</code>’</a> are still given values taken from
jdaggett@8278 2073 the system font, which can be independently varied.
jdaggett@512 2074
jdaggett@7235 2075 <p>Note that the keywords used for the system fonts listed above are only
jdaggett@7235 2076 treated as keywords when they occur in the initial position, in other
jdaggett@7235 2077 positions the same string is treated as part of the font family name:
jdaggett@7235 2078
jdaggett@7235 2079 <pre> font: menu; /* use the font settings for system menus */
jdaggett@7235 2080 font: large menu; /* use a font family named "menu" */</pre>
jdaggett@7235 2081
jdaggett@512 2082 <div class=example>
jdaggett@8699 2083 <p style="display:none">Example(s):</p>
jdaggett@890 2084
jdaggett@512 2085 <pre>button { font: 300 italic 1.3em/1.7em &quot;FB Armada&quot;, sans-serif }
jdaggett@512 2086 button p { font: menu }
jdaggett@512 2087 button p em { font-weight: bolder }
jdaggett@512 2088 </pre>
jdaggett@512 2089
jdaggett@512 2090 <p>If the font used for dropdown menus on a particular system happened to
jdaggett@512 2091 be, for example, 9-point Charcoal, with a weight of 600, then P elements
jdaggett@512 2092 that were descendants of BUTTON would be displayed as if this rule were
jdaggett@890 2093 in effect:
jdaggett@512 2094
jdaggett@512 2095 <pre>button p { font: 600 9pt Charcoal }
jdaggett@512 2096 </pre>
jdaggett@512 2097
jdaggett@4624 2098 <p>Because the <span class=property>‘<a href="#propdef-font"><code
jdaggett@4624 2099 class=property>font</code></a>’</span> shorthand resets to its initial
jdaggett@4624 2100 value any property not explicitly given a value, this has the same effect
jdaggett@4624 2101 as this declaration:
jdaggett@512 2102
jdaggett@512 2103 <pre>button p {
jdaggett@512 2104 font-style: normal;
jdaggett@512 2105 font-variant: normal;
jdaggett@512 2106 font-weight: 600;
jdaggett@512 2107 font-size: 9pt;
jdaggett@512 2108 line-height: normal;
jdaggett@512 2109 font-family: Charcoal
jdaggett@8277 2110 }
jdaggett@512 2111 </pre>
jdaggett@512 2112 </div>
jdaggett@2487 2113 <!-- prop: font-synthesis -->
jdaggett@2487 2114
jdaggett@2487 2115 <h3 id=font-synthesis-prop><span class=secno>3.8 </span>Controlling
jdaggett@2487 2116 synthetic faces: the <a href="#propdef-font-synthesis">font-synthesis</a>
jdaggett@2487 2117 property</h3>
jdaggett@2487 2118
jdaggett@4624 2119 <table class=propdef id=namefont-synthesisvaluenone-weight-style>
jdaggett@2457 2120 <tbody>
jdaggett@2457 2121 <tr>
jdaggett@2457 2122 <td>Name:
jdaggett@2457 2123
jdaggett@2487 2124 <td><dfn id=propdef-font-synthesis>font-synthesis</dfn>
jdaggett@2457 2125
jdaggett@2457 2126 <tr>
jdaggett@2457 2127 <td>Value:
jdaggett@2457 2128
jdaggett@2487 2129 <td>none | [ weight || style ]
jdaggett@2457 2130
jdaggett@2457 2131 <tr>
jdaggett@2457 2132 <td>Initial:
jdaggett@2457 2133
jdaggett@2487 2134 <td>weight style
jdaggett@2457 2135
jdaggett@2457 2136 <tr>
jdaggett@2457 2137 <td>Applies to:
jdaggett@2457 2138
jdaggett@2457 2139 <td>all elements
jdaggett@2457 2140
jdaggett@2457 2141 <tr>
jdaggett@2457 2142 <td>Inherited:
jdaggett@2457 2143
jdaggett@2457 2144 <td>yes
jdaggett@2457 2145
jdaggett@2457 2146 <tr>
jdaggett@2457 2147 <td>Percentages:
jdaggett@2457 2148
jdaggett@2457 2149 <td>N/A
jdaggett@2457 2150
jdaggett@2457 2151 <tr>
jdaggett@2457 2152 <td>Media:
jdaggett@2457 2153
jdaggett@2457 2154 <td>visual
jdaggett@2457 2155
jdaggett@2457 2156 <tr>
jdaggett@2457 2157 <td>Computed value:
jdaggett@2457 2158
jdaggett@2457 2159 <td>as specified
jdaggett@7377 2160
jdaggett@7377 2161 <tr>
jdaggett@7377 2162 <td>Animatable:
jdaggett@7377 2163
jdaggett@7377 2164 <td>no
jdaggett@2457 2165 </table>
jdaggett@2457 2166
jdaggett@2487 2167 <p>This property controls whether user agents are allowed to synthesize
jdaggett@2487 2168 bold or oblique font faces when a font family lacks bold or italic faces.
jdaggett@7311 2169 If ‘<a href="#weight"><code class=property>weight</code></a>’ is not
jdaggett@7311 2170 specified, user agents must not synthesize bold faces and if ‘<code
jdaggett@2487 2171 class=property>style</code>’ is not specified user agents must not
jdaggett@8278 2172 synthesize italic faces. A value of ‘<code class=property>none</code>’
jdaggett@8278 2173 disallows all synthetic faces.
jdaggett@2457 2174
jdaggett@2457 2175 <div class=example>
jdaggett@2488 2176 <p>The style rule below disables the use of synthetically obliqued Arabic:</p>
jdaggett@2457 2177
jdaggett@2487 2178 <pre>*:lang(ar) { font-synthesis: none; }
jdaggett@2457 2179 </pre>
jdaggett@2457 2180 </div>
jdaggett@512 2181
jdaggett@6699 2182 <h2 id=font-resources><span class=secno>4 </span>Font Resources</h2>
jdaggett@545 2183
jdaggett@8311 2184 <h3 id=font-face-rule><span class=secno>4.1 </span>The <dfn
jdaggett@8311 2185 id=at-font-face-rule style="font-weight: inherit; font-style:
jdaggett@8311 2186 inherit"><code>@font-face</code></dfn> rule</h3>
jdaggett@8311 2187
jdaggett@8311 2188 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule allows
jdaggett@8311 2189 for linking to fonts that are automatically fetched and activated when
jdaggett@8311 2190 needed. This allows authors to select a font that closely matches the
jdaggett@8311 2191 design goals for a given page rather than limiting the font choice to a
jdaggett@9154 2192 set of fonts available on a given platform. A set of font descriptors
jdaggett@9154 2193 define the location of a font resource, either locally or externally,
jdaggett@9154 2194 along with the style characteristics of an individual face. Multiple <a
jdaggett@8311 2195 href="#at-font-face-rule"><code>@font-face</code></a> rules can be used to
jdaggett@8311 2196 construct font families with a variety of faces. Using CSS font matching
jdaggett@8311 2197 rules, a user agent can selectively download only those faces that are
jdaggett@8311 2198 needed for a given piece of text.
jdaggett@8311 2199
jdaggett@8311 2200 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule
jdaggett@8311 2201 consists of the <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 2202 at-keyword followed by a block of descriptor declarations. In terms of the
jdaggett@8311 2203 grammar, this specification defines the following productions:
jdaggett@8031 2204
jdaggett@8031 2205 <pre><dfn id=fontfacerule>font_face_rule</dfn>
jdaggett@8225 2206 : <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 2207 ;
jdaggett@8031 2208
jdaggett@8031 2209 <dfn id=descriptordeclaration>descriptor_declaration</dfn>
jdaggett@8225 2210 : <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 2211 ;</pre>
jdaggett@8031 2212
jdaggett@8032 2213 <p>The following new definitions are introduced:
jdaggett@8032 2214
jdaggett@8032 2215 <pre>- -|\\0{0,4}2d(\r\n|[ \t\r\n\f])?
jdaggett@8032 2216 F f|\\0{0,4}(46|66)(\r\n|[ \t\r\n\f])?</pre>
jdaggett@8032 2217
jdaggett@8032 2218 <p>The following new token is introduced:
jdaggett@8032 2219
jdaggett@8225 2220 <pre>@{F}{O}{N}{T}{-}{F}{A}{C}{E} {return <dfn id=fontfacesym>FONT_FACE_SYM</dfn>;}</pre>
jdaggett@8032 2221
jdaggett@8311 2222 <p>Each <a href="#at-font-face-rule"><code>@font-face</code></a> rule
jdaggett@8311 2223 specifies a value for every font descriptor, either implicitly or
jdaggett@8311 2224 explicitly. Those not given explicit values in the rule take the initial
jdaggett@8311 2225 value listed with each descriptor in this specification. These descriptors
jdaggett@8311 2226 apply solely within the context of the <a
jdaggett@8311 2227 href="#at-font-face-rule"><code>@font-face</code></a> rule in which they
jdaggett@8311 2228 are defined, and do not apply to document language elements. There is no
jdaggett@8311 2229 notion of which elements the descriptors apply to or whether the values
jdaggett@8311 2230 are inherited by child elements. When a given descriptor occurs multiple
jdaggett@8311 2231 times in a given <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 2232 rule, only the last descriptor declaration is used and all prior
jdaggett@8311 2233 declarations for that descriptor are ignored.
jdaggett@512 2234
jdaggett@525 2235 <div class=example>
jdaggett@525 2236 <p>To use a downloadable font called Gentium:</p>
jdaggett@512 2237
jdaggett@512 2238 <pre>
jdaggett@525 2239 @font-face {
jdaggett@525 2240 font-family: Gentium;
jdaggett@8860 2241 src: url(http://example.com/fonts/Gentium.woff);
jdaggett@525 2242 }
jdaggett@525 2243
jdaggett@525 2244 p { font-family: Gentium, serif; }
jdaggett@512 2245 </pre>
jdaggett@512 2246
jdaggett@573 2247 <p>The user agent will download Gentium and use it when rendering text
jdaggett@573 2248 within paragraph elements. If for some reason the site serving the font
jdaggett@573 2249 is unavailable, the default serif font will be used.</p>
jdaggett@512 2250 </div>
jdaggett@512 2251
jdaggett@8311 2252 <p>A given set of <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 2253 rules define a set of fonts available for use within the documents that
jdaggett@8311 2254 contain these rules. When font matching is done, fonts defined using these
jdaggett@8311 2255 rules are considered before other available fonts on a system.
jdaggett@8198 2256
jdaggett@8198 2257 <p>Downloaded fonts are only available to documents that reference them.
jdaggett@8198 2258 The process of activating these fonts must not make them available to
jdaggett@2472 2259 other applications or to documents that don't directly link to the same
jdaggett@2556 2260 font. User agent implementers might consider it convenient to use
jdaggett@2472 2261 downloaded fonts when rendering characters in other documents for which no
jdaggett@8363 2262 other available font exists as part of the <a
jdaggett@8363 2263 href="#system-font-fallback"><em>system font fallback</em></a> procedure.
jdaggett@8198 2264 However, this would cause a security leak since the contents of one page
jdaggett@8198 2265 would be able to affect other pages, something an attacker could use as an
jdaggett@8198 2266 attack vector. These restrictions do not affect caching behavior, fonts
jdaggett@8198 2267 are cached the same way other web resources are cached.
jdaggett@8198 2268
jdaggett@8198 2269 <p>This at-rule follows the forward-compatible parsing rules of CSS. Like
jdaggett@8198 2270 properties in a declaration block, declarations of any descriptors that
jdaggett@8311 2271 are not supported by the user agent must be ignored. <a
jdaggett@8311 2272 href="#at-font-face-rule"><code>@font-face</code></a> rules require a
jdaggett@8311 2273 font-family and src descriptor; if either of these are missing, the <a
jdaggett@8311 2274 href="#at-font-face-rule"><code>@font-face</code></a> rule is invalid and
jdaggett@8311 2275 must be ignored entirely.
jdaggett@1244 2276
jdaggett@1244 2277 <p>In cases where user agents have limited platform resources or implement
jdaggett@8311 2278 the ability to disable downloadable font resources, <a
jdaggett@8311 2279 href="#at-font-face-rule"><code>@font-face</code></a> rules must simply be
jdaggett@8311 2280 ignored; the behavior of individual descriptors as defined in this
jdaggett@8311 2281 specification should not be altered.
jdaggett@1662 2282
jdaggett@1662 2283 <h3 id=font-family-desc><span class=secno>4.2 </span>Font family: the <a
jdaggett@1662 2284 href="#descdef-font-family">font-family</a> descriptor</h3>
jdaggett@512 2285
jdaggett@512 2286 <table class=descdef>
jdaggett@512 2287 <tbody>
jdaggett@512 2288 <tr>
jdaggett@512 2289 <td>Name:
jdaggett@512 2290
jdaggett@8278 2291 <td><dfn id=descdef-font-family
jdaggett@8278 2292 title="font-family!!descriptor">font-family</dfn>
jdaggett@512 2293
jdaggett@512 2294 <tr>
jdaggett@512 2295 <td>Value:
jdaggett@512 2296
jdaggett@8225 2297 <td><a href="#family-name-value"><var>&lt;family-name&gt;</var></a>
jdaggett@890 2298
jdaggett@890 2299 <tr>
jdaggett@890 2300 <td><em>Initial:</em>
jdaggett@890 2301
jdaggett@890 2302 <td>N/A
jdaggett@512 2303 </table>
jdaggett@512 2304
jdaggett@525 2305 <p>This descriptor defines the font family name that will be used in all
jdaggett@8311 2306 CSS font family name matching. It is required for the <a
jdaggett@8311 2307 href="#at-font-face-rule"><code>@font-face</code></a> rule to be valid. It
jdaggett@8311 2308 overrides the font family names contained in the underlying font data. If
jdaggett@8311 2309 the font family name is the same as a font family available in a given
jdaggett@8311 2310 user's environment, it effectively hides the underlying font for documents
jdaggett@8311 2311 that use the stylesheet. This permits a web author to freely choose
jdaggett@8311 2312 font-family names without worrying about conflicts with font family names
jdaggett@8311 2313 present in a given user's environment. Likewise, platform substitutions
jdaggett@8311 2314 for a given font family name must not be used.
jdaggett@1244 2315
jdaggett@1662 2316 <h3 id=src-desc><span class=secno>4.3 </span>Font reference: the <a
jdaggett@1662 2317 href="#descdef-src">src</a> descriptor</h3>
jdaggett@512 2318
jdaggett@512 2319 <table class=descdef>
jdaggett@512 2320 <tbody>
jdaggett@512 2321 <tr>
jdaggett@512 2322 <td>Name:
jdaggett@512 2323
jdaggett@1662 2324 <td><dfn id=descdef-src>src</dfn>
jdaggett@512 2325
jdaggett@512 2326 <tr>
jdaggett@512 2327 <td>Value:
jdaggett@512 2328
jdaggett@8225 2329 <td>[ &lt;url> [format(&lt;string> #)]? | <a
jdaggett@8225 2330 href="#font-face-name-value"><var>&lt;font-face-name&gt;</var></a> ] #
jdaggett@890 2331
jdaggett@890 2332 <tr>
jdaggett@890 2333 <td><em>Initial:</em>
jdaggett@890 2334
jdaggett@890 2335 <td>N/A
jdaggett@512 2336 </table>
jdaggett@512 2337
jdaggett@899 2338 <p>This descriptor specifies the resource containing font data. It is
jdaggett@8311 2339 required for the <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 2340 rule to be valid. Its value is a prioritized, comma-separated list of
jdaggett@8311 2341 external references or locally-installed font face names. When a font is
jdaggett@8311 2342 needed the user agent iterates over the set of references listed, using
jdaggett@8311 2343 the first one it can successfully activate. Fonts containing invalid data
jdaggett@8311 2344 or local font faces that are not found are ignored and the user agent
jdaggett@8311 2345 loads the next font in the list.
jdaggett@8272 2346
jdaggett@8272 2347 <p>As with other URLs in CSS, the URL may be relative, in which case it is
jdaggett@8311 2348 resolved relative to the location of the style sheet containing the <a
jdaggett@8311 2349 href="#at-font-face-rule"><code>@font-face</code></a> rule. In the case of
jdaggett@8311 2350 SVG fonts, the URL points to an element within a document containing SVG
jdaggett@8311 2351 font definitions. If the element reference is omitted, a reference to the
jdaggett@8311 2352 first defined font is implied. Similarly, font container formats that can
jdaggett@7096 2353 contain more than one font must load one and only one of the fonts for a
jdaggett@8311 2354 given <a href="#at-font-face-rule"><code>@font-face</code></a> rule.
jdaggett@8311 2355 Fragment identifiers are used to indicate which font to load. If a
jdaggett@8311 2356 container format lacks a defined fragment identifier scheme,
jdaggett@8311 2357 implementations should use a simple 1-based indexing scheme (e.g.
jdaggett@8311 2358 "font-collection#1" for the first font, "font-collection#2" for the second
jdaggett@8311 2359 font).
jdaggett@1244 2360
jdaggett@2527 2361 <pre>
jdaggett@8860 2362 src: url(fonts/simple.woff); /* load simple.woff relative to stylesheet location */
jdaggett@8860 2363 src: url(/fonts/simple.woff); /* load simple.woff from absolute location */
jdaggett@8860 2364 src: url(fonts.svg#simple); /* load SVG font with id 'simple' */
jdaggett@2527 2365 </pre>
jdaggett@2527 2366
jdaggett@8198 2367 <p>External references consist of a URL, followed by an optional hint
jdaggett@8198 2368 describing the format of the font resource referenced by that URL. The
jdaggett@2527 2369 format hint contains a comma-separated list of format strings that denote
jdaggett@2527 2370 well-known font formats. Conformant user agents must skip downloading a
jdaggett@2527 2371 font resource if the format hints indicate only unsupported or unknown
jdaggett@2527 2372 font formats. If no format hints are supplied, the user agent should
jdaggett@2527 2373 download the font resource.
jdaggett@2527 2374
jdaggett@2527 2375 <pre>
jdaggett@2527 2376 /* load WOFF font if possible, otherwise use OpenType font */
jdaggett@2527 2377 @font-face {
jdaggett@2527 2378 font-family: bodytext;
jdaggett@2527 2379 src: url(ideal-sans-serif.woff) format("woff"),
jdaggett@2527 2380 url(basic-sans-serif.ttf) format("opentype");
jdaggett@2527 2381 }
jdaggett@2527 2382 </pre>
jdaggett@2527 2383
jdaggett@2527 2384 <p>Format strings defined by this specification:
jdaggett@2527 2385
jdaggett@2527 2386 <table class=data id=fontformats>
jdaggett@2527 2387 <thead>
jdaggett@2527 2388 <tr>
jdaggett@2527 2389 <th>String
jdaggett@2527 2390
jdaggett@2527 2391 <th>Font Format
jdaggett@2527 2392
jdaggett@2527 2393 <th>Common extensions
jdaggett@2527 2394
jdaggett@2527 2395 <tbody>
jdaggett@2527 2396 <tr>
jdaggett@2527 2397 <th>"woff"
jdaggett@2527 2398
jdaggett@4624 2399 <td><a href="http://www.w3.org/TR/WOFF/">WOFF (Web Open Font Format)</a>
jdaggett@2527 2400
jdaggett@2527 2401 <td>.woff
jdaggett@2527 2402
jdaggett@2527 2403 <tr>
jdaggett@2527 2404 <th>"truetype"
jdaggett@2527 2405
jdaggett@4624 2406 <td><a
jdaggett@4624 2407 href="http://www.microsoft.com/typography/otspec/default.htm">TrueType</a>
jdaggett@2527 2408
jdaggett@2527 2409 <td>.ttf
jdaggett@2527 2410
jdaggett@2527 2411 <tr>
jdaggett@2527 2412 <th>"opentype"
jdaggett@2527 2413
jdaggett@4624 2414 <td><a
jdaggett@4624 2415 href="http://www.microsoft.com/typography/otspec/default.htm">OpenType</a>
jdaggett@2527 2416
jdaggett@2527 2417 <td>.ttf, .otf
jdaggett@2527 2418
jdaggett@2527 2419 <tr>
jdaggett@2527 2420 <th>"embedded-opentype"
jdaggett@2527 2421
jdaggett@4624 2422 <td><a
jdaggett@4624 2423 href="http://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded
jdaggett@4624 2424 OpenType</a>
jdaggett@2527 2425
jdaggett@2527 2426 <td>.eot
jdaggett@2527 2427
jdaggett@2527 2428 <tr>
jdaggett@2527 2429 <th>"svg"
jdaggett@2527 2430
jdaggett@4624 2431 <td><a href="http://www.w3.org/TR/SVG/fonts.html">SVG Font</a>
jdaggett@2527 2432
jdaggett@2527 2433 <td>.svg, .svgz
jdaggett@2527 2434 </table>
jdaggett@2527 2435
jdaggett@2527 2436 <p>Given the overlap in common usage between TrueType and OpenType, the
jdaggett@2527 2437 format hints "truetype" and "opentype" must be considered as synonymous; a
jdaggett@2527 2438 format hint of "opentype" does not imply that the font contains Postscript
jdaggett@2527 2439 CFF style glyph data or that it contains OpenType layout information (see
jdaggett@7377 2440 <a href="#platform-props-to-css">Appendix A</a> for more background on
jdaggett@7377 2441 this).
jdaggett@2527 2442
jdaggett@2527 2443 <p>When authors would prefer to use a locally available copy of a given
jdaggett@8198 2444 font and download it if it's not, <code>local()</code> can be used. The
jdaggett@8225 2445 locally-installed <dfn
jdaggett@8225 2446 id=font-face-name-value><var>&lt;font-face-name&gt;</var></dfn> argument
jdaggett@8272 2447 to <code>local()</code> is a format-specific string that uniquely
jdaggett@8272 2448 identifies a single font face within a larger family. The syntax for a <a
jdaggett@8225 2449 href="#font-face-name-value"><var>&lt;font-face-name&gt;</var></a> is a
jdaggett@8241 2450 unique font face name enclosed by "local(" and ")". The name can
jdaggett@8241 2451 optionally be enclosed in quotes. If unquoted, the unquoted font family
jdaggett@8241 2452 name processing conventions apply; the name must be a sequence of
jdaggett@8241 2453 identifiers separated by whitespace which is converted to a string by
jdaggett@8241 2454 joining the identifiers together separated by a single space.
jdaggett@2527 2455
jdaggett@2527 2456 <pre>
jdaggett@2527 2457 /* regular face of Gentium */
jdaggett@573 2458 @font-face {
jdaggett@2527 2459 font-family: MyGentium;
jdaggett@8860 2460 src: local(Gentium), /* use locally available Gentium */
jdaggett@8860 2461 url(Gentium.woff); /* otherwise, download it */
jdaggett@573 2462 }
jdaggett@573 2463 </pre>
jdaggett@573 2464
jdaggett@8241 2465 <p>For OpenType and TrueType fonts, this string is used to match only the
jdaggett@8241 2466 Postscript name or the full font name in the name table of locally
jdaggett@8241 2467 available fonts. Which type of name is used varies by platform and font,
jdaggett@8241 2468 so authors should include both of these names to assure proper matching
jdaggett@8241 2469 across platforms. Platform substitutions for a given font name must not be
jdaggett@8241 2470 used.
jdaggett@2527 2471
jdaggett@2527 2472 <pre>
jdaggett@2527 2473 /* bold face of Gentium */
jdaggett@2527 2474 @font-face {
jdaggett@2527 2475 font-family: MyGentium;
jdaggett@8860 2476 src: local(Gentium Bold), /* full font name */
jdaggett@8860 2477 local(Gentium-Bold), /* Postscript name */
jdaggett@8860 2478 url(GentiumBold.woff); /* otherwise, download it */
jdaggett@2527 2479 font-weight: bold;
jdaggett@2527 2480 }
jdaggett@2527 2481 </pre>
jdaggett@2527 2482
jdaggett@8311 2483 <p>Just as a <a href="#at-font-face-rule"><code>@font-face</code></a> rule
jdaggett@8311 2484 specifies the characteristics of a single font within a family, the unique
jdaggett@8311 2485 name used with <code>local()</code> specifies a single font, not an entire
jdaggett@8311 2486 font family. Defined in terms of OpenType font data, the Postscript name
jdaggett@8311 2487 is found in the font's <a
jdaggett@2527 2488 href="http://www.microsoft.com/typography/otspec/name.htm">name table</a>,
jdaggett@2527 2489 in the name record with nameID = 6 (see <a href="#OPENTYPE"
jdaggett@2556 2490 rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> for more details). The
jdaggett@2527 2491 Postscript name is the commonly used key for all fonts on OSX and for
jdaggett@2527 2492 Postscript CFF fonts under Windows. The full font name (nameID = 4) is
jdaggett@2527 2493 used as a unique key for fonts with TrueType glyphs on Windows.
jdaggett@2527 2494
jdaggett@2527 2495 <p>For OpenType fonts with multiple localizations of the full font name,
jdaggett@2527 2496 the US English version is used (language ID = 0x409 for Windows and
jdaggett@2527 2497 language ID = 0 for Macintosh) or the first localization when a US English
jdaggett@2527 2498 full font name is not available (the OpenType specification recommends
jdaggett@2527 2499 that <a href="http://www.microsoft.com/typography/otspec/recom.htm">all
jdaggett@2527 2500 fonts minimally include US English names</a>). User agents that also match
jdaggett@2527 2501 other full font names, e.g. matching the Dutch name when the current
jdaggett@2527 2502 system locale is set to Dutch, are considered non-conformant. This is done
jdaggett@2527 2503 not to prefer English but to avoid matching inconsistencies across font
jdaggett@2527 2504 versions and OS localizations, since font style names (e.g. "Bold") are
jdaggett@2527 2505 frequently localized into many languages and the set of localizations
jdaggett@2527 2506 available varies widely across platform and font version. User agents that
jdaggett@2527 2507 match a concatenation of family name (nameID = 1) with style name (nameID
jdaggett@2527 2508 = 2) are considered non-conformant.
jdaggett@2527 2509
jdaggett@2527 2510 <p>This also allows for referencing faces that belong to larger families
jdaggett@2527 2511 that cannot otherwise be referenced.
jdaggett@2527 2512
jdaggett@2527 2513 <div class=example>
jdaggett@525 2514 <p>Use a local font or reference an SVG font in another document:</p>
jdaggett@525 2515
jdaggett@525 2516 <pre>
jdaggett@525 2517 @font-face {
jdaggett@525 2518 font-family: Headline;
jdaggett@8277 2519 src: local(Futura-Medium),
jdaggett@1148 2520 url(fonts.svg#MyGeometricModern) format("svg");
jdaggett@525 2521 }
jdaggett@525 2522 </pre>
jdaggett@525 2523
jdaggett@525 2524 <p>Create an alias for local Japanese fonts on different platforms:</p>
jdaggett@525 2525
jdaggett@525 2526 <pre>
jdaggett@525 2527 @font-face {
jdaggett@2527 2528 font-family: jpgothic;
jdaggett@525 2529 src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic);
jdaggett@525 2530 }
jdaggett@525 2531 </pre>
jdaggett@525 2532
jdaggett@525 2533 <p>Reference a font face that cannot be matched within a larger family:</p>
jdaggett@525 2534
jdaggett@525 2535 <pre>
jdaggett@525 2536 @font-face {
jdaggett@525 2537 font-family: Hoefler Text Ornaments;
jdaggett@525 2538 /* has the same font properties as Hoefler Text Regular */
jdaggett@8277 2539 src: local(HoeflerText-Ornaments);
jdaggett@525 2540 }
jdaggett@525 2541 </pre>
jdaggett@2527 2542
jdaggett@8198 2543 <p>Since localized fullnames never match, a document with the header style
jdaggett@8198 2544 rules below would always render using the default serif font, regardless
jdaggett@8198 2545 whether a particular system locale parameter is set to Finnish or not:</p>
jdaggett@1662 2546
jdaggett@1662 2547 <pre>
jdaggett@1662 2548 @font-face {
jdaggett@1662 2549 font-family: SectionHeader;
jdaggett@6653 2550 src: local("Arial Lihavoitu"); /* Finnish fullname for Arial Bold, should fail */
jdaggett@1662 2551 font-weight: bold;
jdaggett@1662 2552 }
jdaggett@1662 2553
jdaggett@1662 2554 h2 { font-family: SectionHeader, serif; }
jdaggett@1662 2555 </pre>
jdaggett@1662 2556
jdaggett@8198 2557 <p>A conformant user agent would never load the font ‘<code
jdaggett@1662 2558 class=css>gentium.eot</code>’ in the example below, since it is
jdaggett@4624 2559 included in the first definition of the ‘<a href="#descdef-src"><code
jdaggett@4624 2560 class=property>src</code></a>’ descriptor which is overridden by the
jdaggett@8311 2561 second definition in the same <a
jdaggett@8311 2562 href="#at-font-face-rule"><code>@font-face</code></a> rule:</p>
jdaggett@1662 2563
jdaggett@1662 2564 <pre>
jdaggett@1662 2565 @font-face {
jdaggett@1662 2566 font-family: MainText;
jdaggett@8860 2567 src: url(gentium.eot); /* for use with older user agents */
jdaggett@8860 2568 src: local("Gentium"), url(gentium.woff); /* Overrides src definition */
jdaggett@1662 2569 }
jdaggett@1662 2570 </pre>
jdaggett@1662 2571 </div>
jdaggett@1662 2572
jdaggett@1662 2573 <h3 id=font-prop-desc><span class=secno>4.4 </span>Font property
jdaggett@1662 2574 descriptors: the <a href="#descdef-font-style">font-style</a>, <a
jdaggett@1662 2575 href="#descdef-font-weight">font-weight</a>, <a
jdaggett@1662 2576 href="#descdef-font-stretch">font-stretch</a> descriptors</h3>
jdaggett@518 2577
jdaggett@518 2578 <table class=descdef>
jdaggett@518 2579 <tbody>
jdaggett@518 2580 <tr>
jdaggett@518 2581 <td>Name:
jdaggett@518 2582
jdaggett@8278 2583 <td><dfn id=descdef-font-style
jdaggett@8278 2584 title="font-style!!descriptor">font-style</dfn>
jdaggett@518 2585
jdaggett@518 2586 <tr>
jdaggett@518 2587 <td>Value:
jdaggett@518 2588
jdaggett@545 2589 <td>normal | italic | oblique
jdaggett@890 2590
jdaggett@890 2591 <tr>
jdaggett@890 2592 <td><em>Initial:</em>
jdaggett@890 2593
jdaggett@890 2594 <td>normal
jdaggett@518 2595 </table>
jdaggett@518 2596
jdaggett@518 2597 <table class=descdef>
jdaggett@518 2598 <tbody>
jdaggett@518 2599 <tr>
jdaggett@518 2600 <td>Name:
jdaggett@518 2601
jdaggett@8278 2602 <td><dfn id=descdef-font-weight
jdaggett@8278 2603 title="font-weight!!descriptor">font-weight</dfn>
jdaggett@518 2604
jdaggett@518 2605 <tr>
jdaggett@518 2606 <td>Value:
jdaggett@518 2607
jdaggett@545 2608 <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
jdaggett@890 2609
jdaggett@890 2610 <tr>
jdaggett@890 2611 <td><em>Initial:</em>
jdaggett@890 2612
jdaggett@890 2613 <td>normal
jdaggett@518 2614 </table>
jdaggett@518 2615
jdaggett@518 2616 <table class=descdef>
jdaggett@518 2617 <tbody>
jdaggett@518 2618 <tr>
jdaggett@518 2619 <td>Name:
jdaggett@518 2620
jdaggett@8278 2621 <td><dfn id=descdef-font-stretch
jdaggett@8278 2622 title="font-stretch!!descriptor">font-stretch</dfn>
jdaggett@518 2623
jdaggett@518 2624 <tr>
jdaggett@518 2625 <td>Value:
jdaggett@518 2626
jdaggett@545 2627 <td>normal | ultra-condensed | extra-condensed | condensed |
jdaggett@518 2628 semi-condensed | semi-expanded | expanded | extra-expanded |
jdaggett@525 2629 ultra-expanded
jdaggett@890 2630
jdaggett@890 2631 <tr>
jdaggett@890 2632 <td><em>Initial:</em>
jdaggett@890 2633
jdaggett@890 2634 <td>normal
jdaggett@518 2635 </table>
jdaggett@518 2636
jdaggett@573 2637 <p>These descriptors define the characteristics of a font face and are used
jdaggett@573 2638 in the process of matching styles to specific faces. For a font family
jdaggett@8311 2639 defined with several <a
jdaggett@8311 2640 href="#at-font-face-rule"><code>@font-face</code></a> rules, user agents
jdaggett@8311 2641 can either download all faces in the family or use these descriptors to
jdaggett@8311 2642 selectively download font faces that match actual styles used in document.
jdaggett@8311 2643 The values for these descriptors are the same as those for the
jdaggett@8311 2644 corresponding font properties except that relative keywords are not
jdaggett@8311 2645 allowed, ‘<a href="#bolder"><code class=property>bolder</code></a>’
jdaggett@8311 2646 and ‘<a href="#lighter"><code class=property>lighter</code></a>’. If
jdaggett@8311 2647 these descriptors are omitted, initial values are assumed.
jdaggett@890 2648
jdaggett@890 2649 <p>The value for these font face style attributes is used in place of the
jdaggett@890 2650 style implied by the underlying font data. This allows authors to combine
jdaggett@890 2651 faces in flexible combinations, even in situations where the original font
jdaggett@890 2652 data was arranged differently. User agents that implement synthetic
jdaggett@8272 2653 bolding and obliquing must only apply synthetic styling in cases where the
jdaggett@8272 2654 font descriptors imply this is needed, rather than based on the style
jdaggett@890 2655 attributes implied by the font data.
jdaggett@573 2656
jdaggett@1662 2657 <h3 id=unicode-range-desc><span class=secno>4.5 </span>Character range: the
jdaggett@1662 2658 <a href="#descdef-unicode-range">unicode-range</a> descriptor</h3>
jdaggett@518 2659
jdaggett@518 2660 <table class=descdef>
jdaggett@518 2661 <tbody>
jdaggett@518 2662 <tr>
jdaggett@518 2663 <td>Name:
jdaggett@518 2664
jdaggett@1662 2665 <td><dfn id=descdef-unicode-range>unicode-range</dfn>
jdaggett@518 2666
jdaggett@518 2667 <tr>
jdaggett@518 2668 <td>Value:
jdaggett@518 2669
jdaggett@8225 2670 <td><a href="#urange-value"><var>&lt;urange&gt;</var></a> #
jdaggett@890 2671
jdaggett@890 2672 <tr>
jdaggett@890 2673 <td><em>Initial:</em>
jdaggett@890 2674
jdaggett@1148 2675 <td>U+0-10FFFF
jdaggett@518 2676 </table>
jdaggett@518 2677
jdaggett@8213 2678 <p>This descriptor defines the set of Unicode codepoints that may be
jdaggett@8213 2679 supported by the font face for which it is declared. The descriptor value
jdaggett@8225 2680 is a comma-delimited list of Unicode range (<a
jdaggett@8225 2681 href="#urange-value"><var>&lt;urange&gt;</var></a>) values. The union of
jdaggett@8225 2682 these ranges defines the set of codepoints that serves as a hint for user
jdaggett@8225 2683 agents when deciding whether or not to download a font resource for a
jdaggett@8225 2684 given text run.
jdaggett@8225 2685
jdaggett@8225 2686 <p>Each <dfn id=urange-value><var>&lt;urange&gt;</var></dfn> value is a <a
jdaggett@8225 2687 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code
jdaggett@8225 2688 title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token made up of a
jdaggett@8225 2689 "U+" or "u+" prefix followed by a codepoint range in one of the three
jdaggett@8241 2690 forms listed below. Ranges that do not fit one of the these forms are
jdaggett@8241 2691 invalid and cause the declaration to be ignored.
jdaggett@8241 2692
jdaggett@8241 2693 <dl>
jdaggett@8241 2694 <dt>single codepoint (e.g. U+416)
jdaggett@8241 2695
jdaggett@9156 2696 <dd>a Unicode codepoint, represented as one to six hexadecimal digits
jdaggett@8241 2697
jdaggett@8246 2698 <dt>interval range (e.g. U+400-4ff)
jdaggett@8241 2699
jdaggett@9156 2700 <dd>represented as two hyphen-separated Unicode codepoints indicating the
jdaggett@9156 2701 inclusive start and end codepoints of a range
jdaggett@8241 2702
jdaggett@8246 2703 <dt>wildcard range (e.g. U+4??)
jdaggett@8241 2704
jdaggett@8241 2705 <dd>defined by the set of codepoints implied when trailing ‘<code
jdaggett@8246 2706 class=css>?</code>’ characters signify any hexadeximal digit
jdaggett@8241 2707 </dl>
jdaggett@573 2708
jdaggett@8213 2709 <p>Individual codepoints are written using hexadecimal values that
jdaggett@8213 2710 correspond to <a href="http://www.unicode.org/charts/">Unicode character
jdaggett@9156 2711 codepoints</a>. Unicode codepoint values must be between 0 and 10FFFF
jdaggett@8225 2712 inclusive. Digit values of codepoints are ASCII case-insensitive. For
jdaggett@9156 2713 interval ranges, the start and end codepoints must be within the range
jdaggett@9156 2714 noted above and the end codepoint must be greater than or equal to the
jdaggett@9156 2715 start codepoint.
jdaggett@8225 2716
jdaggett@8225 2717 <p>Wildcard ranges specified with ‘?’ that lack an initial digit (e.g.
jdaggett@8225 2718 "U+???") are valid and equivalent to a wildcard range with an initial zero
jdaggett@8225 2719 digit (e.g. "U+0???" = "U+0000-0FFF"). Wildcard ranges that extend beyond
jdaggett@9156 2720 the range of Unicode codepoints are invalid. Because of this, the maximum
jdaggett@9156 2721 number of trailing ‘<code class=css>?</code>’ wildcard characters is
jdaggett@9156 2722 five, even though the <a
jdaggett@8225 2723 href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code
jdaggett@8225 2724 title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token accepts six.
jdaggett@8213 2725
jdaggett@8213 2726 <p>Within the comma-delimited list of Unicode ranges in a ‘<a
jdaggett@8213 2727 href="#descdef-unicode-range"><code
jdaggett@8213 2728 class=property>unicode-range</code></a>’ descriptor declaration, ranges
jdaggett@8241 2729 may overlap. The union of these ranges defines the set of codepoints for
jdaggett@8241 2730 which the corresponding font may be used. User agents must not download or
jdaggett@8241 2731 use the font for codepoints outside this set. User agents may normalize
jdaggett@8241 2732 the list of ranges into a list that is different but represents the same
jdaggett@8241 2733 set of codepoints.
jdaggett@8213 2734
jdaggett@8272 2735 <p>The associated font might not contain glyphs for the entire set of
jdaggett@8213 2736 codepoints defined by the ‘<a href="#descdef-unicode-range"><code
jdaggett@8213 2737 class=property>unicode-range</code></a>’ descriptor. When the font is
jdaggett@8391 2738 used, the <dfn id=effective-character-map>effective character map</dfn> is
jdaggett@8225 2739 the intersection of the codepoints defined by ‘<a
jdaggett@8225 2740 href="#descdef-unicode-range"><code
jdaggett@8225 2741 class=property>unicode-range</code></a>’ with the font's <a
jdaggett@8225 2742 href="#character-map"><em>character map</em></a>. This allows authors to
jdaggett@8225 2743 define supported ranges in terms of broad ranges without worrying about
jdaggett@8225 2744 the precise codepoint ranges supported by the underlying font.
jdaggett@8225 2745
jdaggett@8225 2746 <h3 id=composite-fonts><span class=secno>4.6 </span>Using character ranges
jdaggett@8225 2747 to define composite fonts</h3>
jdaggett@8225 2748
jdaggett@8311 2749 <p>Multiple <a href="#at-font-face-rule"><code>@font-face</code></a> rules
jdaggett@8311 2750 with different unicode ranges for the same family and style descriptor
jdaggett@8311 2751 values can be used to create composite fonts that mix the glyphs from
jdaggett@8311 2752 different fonts for different scripts. This can be used to combine fonts
jdaggett@8311 2753 that only contain glyphs for a single script (e.g. Latin, Greek, Cyrillic)
jdaggett@8311 2754 or it can be used by authors as a way of segmenting a font into fonts for
jdaggett@8311 2755 commonly used characters and less frequently used characters. Since the
jdaggett@8311 2756 user agent will only pull down the fonts it needs this helps reduce page
jdaggett@8311 2757 bandwidth.
jdaggett@8311 2758
jdaggett@8311 2759 <p>If the unicode ranges overlap for a set of <a
jdaggett@8311 2760 href="#at-font-face-rule"><code>@font-face</code></a> rules with the same
jdaggett@8311 2761 family and style descriptor values, the rules are ordered in the reverse
jdaggett@8311 2762 order they were defined; the last rule defined is the first to be checked
jdaggett@8311 2763 for a given character.
jdaggett@890 2764
jdaggett@890 2765 <p>Example ranges for specific languages or characters:
jdaggett@518 2766
jdaggett@518 2767 <dl>
jdaggett@529 2768 <dt>unicode-range: U+A5;
jdaggett@529 2769
jdaggett@1149 2770 <dd>a single code point, the yen/yuan symbol
jdaggett@529 2771
jdaggett@1148 2772 <dt>unicode-range: U+0-7F;
jdaggett@1148 2773
jdaggett@1148 2774 <dd>code range for basic ASCII characters
jdaggett@1148 2775
jdaggett@529 2776 <dt>unicode-range: U+590-5ff;
jdaggett@529 2777
jdaggett@529 2778 <dd>code range for Hebrew characters
jdaggett@529 2779
jdaggett@529 2780 <dt>unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;
jdaggett@529 2781
jdaggett@529 2782 <dd>code range for Japanese kanji, hiragana and katakana characters plus
jdaggett@529 2783 yen/yuan symbol
jdaggett@518 2784 </dl>
jdaggett@518 2785
jdaggett@529 2786 <div class=example>
jdaggett@531 2787 <p>The BBC provides news services in a wide variety of languages, many
jdaggett@8311 2788 that are not well supported across all platforms. Using an <a
jdaggett@8311 2789 href="#at-font-face-rule"><code>@font-face</code></a> rule, the BBC could
jdaggett@8311 2790 provide a font for any of these languages, as it already does via a
jdaggett@8311 2791 manual font download.</p>
jdaggett@531 2792
jdaggett@531 2793 <pre>
jdaggett@531 2794 @font-face {
jdaggett@531 2795 font-family: BBCBengali;
jdaggett@8860 2796 src: url(fonts/BBCBengali.woff) format("woff");
jdaggett@531 2797 unicode-range: U+00-FF, U+980-9FF;
jdaggett@531 2798 }
jdaggett@531 2799 </pre>
jdaggett@529 2800 </div>
jdaggett@529 2801
jdaggett@529 2802 <div class=example>
jdaggett@531 2803 <p>Technical documents often require a wide range of symbols. The STIX
jdaggett@531 2804 Fonts project is one project aimed at providing fonts to support a wide
jdaggett@531 2805 range of technical typesetting in a standardized way. The example below
jdaggett@531 2806 shows the use of a font that provides glyphs for many of the mathematical
jdaggett@531 2807 and technical symbol ranges within Unicode:</p>
jdaggett@531 2808
jdaggett@531 2809 <pre>
jdaggett@531 2810 @font-face {
jdaggett@531 2811 font-family: STIXGeneral;
jdaggett@531 2812 src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
jdaggett@531 2813 unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
jdaggett@531 2814 }
jdaggett@531 2815 </pre>
jdaggett@529 2816 </div>
jdaggett@529 2817
jdaggett@529 2818 <div class=example>
jdaggett@529 2819 <p>This example shows how an author can override the glyphs used for Latin
jdaggett@529 2820 characters in a Japanese font with glyphs from a different font. The
jdaggett@529 2821 first rule specifies no range so it defaults to the entire range. The
jdaggett@529 2822 range specified in the second rule overlaps but takes precedence because
jdaggett@529 2823 it is defined later.</p>
jdaggett@529 2824
jdaggett@529 2825 <pre>
jdaggett@529 2826 @font-face {
jdaggett@529 2827 font-family: JapaneseWithGentium;
jdaggett@529 2828 src: local(MSMincho);
jdaggett@529 2829 /* no range specified, defaults to entire range */
jdaggett@529 2830 }
jdaggett@529 2831
jdaggett@529 2832 @font-face {
jdaggett@529 2833 font-family: JapaneseWithGentium;
jdaggett@8860 2834 src: url(../fonts/Gentium.woff);
jdaggett@529 2835 unicode-range: U+0-2FF;
jdaggett@529 2836 }
jdaggett@529 2837 </pre>
jdaggett@529 2838 </div>
jdaggett@1148 2839
jdaggett@1148 2840 <div class=example>
jdaggett@1148 2841 <p>Consider a family constructed to optimize bandwidth by separating out
jdaggett@1148 2842 Latin, Japanese and other characters into different font files:</p>
jdaggett@1148 2843
jdaggett@1148 2844 <pre>
jdaggett@1148 2845 /* fallback font - size: 4.5MB */
jdaggett@1148 2846 @font-face {
jdaggett@1148 2847 font-family: DroidSans;
jdaggett@8860 2848 src: url(DroidSansFallback.woff);
jdaggett@1148 2849 /* no range specified, defaults to entire range */
jdaggett@1148 2850 }
jdaggett@1148 2851
jdaggett@1148 2852 /* Japanese glyphs - size: 1.2MB */
jdaggett@1148 2853 @font-face {
jdaggett@1148 2854 font-family: DroidSans;
jdaggett@8860 2855 src: url(DroidSansJapanese.woff);
jdaggett@1148 2856 unicode-range: U+3000-9FFF, U+ff??;
jdaggett@1148 2857 }
jdaggett@1148 2858
jdaggett@8277 2859 /* Latin, Greek, Cyrillic along with some
jdaggett@1148 2860 punctuation and symbols - size: 190KB */
jdaggett@1148 2861 @font-face {
jdaggett@1148 2862 font-family: DroidSans;
jdaggett@8860 2863 src: url(DroidSans.woff);
jdaggett@1148 2864 unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
jdaggett@1148 2865 }
jdaggett@1148 2866 </pre>
jdaggett@1148 2867
jdaggett@1148 2868 <p>For simple Latin text, only the font for Latin characters is
jdaggett@1148 2869 downloaded:</p>
jdaggett@1148 2870
jdaggett@1148 2871 <pre>
jdaggett@1148 2872 body { font-family: DroidSans; }
jdaggett@1148 2873
jdaggett@1148 2874 &lt;p>This is that&lt;/p>
jdaggett@1148 2875 </pre>
jdaggett@1148 2876
jdaggett@1148 2877 <p>In this case the user agent first checks the unicode-range for the font
jdaggett@8860 2878 containing Latin characters (DroidSans.woff). Since all the characters
jdaggett@1148 2879 above are in the range U+0-5FF, the user agent downloads the font and
jdaggett@1148 2880 renders the text with that font.</p>
jdaggett@1148 2881
jdaggett@1148 2882 <p>Next, consider text that makes use of an arrow character (⇨):</p>
jdaggett@1148 2883
jdaggett@1148 2884 <pre>
jdaggett@1148 2885 &lt;p>This &amp;#x21e8; that&lt;p>
jdaggett@1148 2886 </pre>
jdaggett@1148 2887
jdaggett@1148 2888 <p>The user agent again first checks the unicode-range of the font
jdaggett@1149 2889 containing Latin characters. Since U+2000-2300 includes the arrow code
jdaggett@1149 2890 point (U+21E8), the user agent downloads the font. For this character
jdaggett@1148 2891 however the Latin font does not have a matching glyph, so the effective
jdaggett@1149 2892 unicode-range used for font matching excludes this code point. Next, the
jdaggett@1148 2893 user agent evaluates the Japanese font. The unicode-range for the
jdaggett@1148 2894 Japanese font, U+3000-9FFF and U+ff??, does not include U+21E8, so the
jdaggett@1662 2895 user agent does not download the Japanese font. Next the fallback font is
jdaggett@8311 2896 considered. The <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 2897 rule for the fallback font does not define unicode-range so its value
jdaggett@8311 2898 defaults to the range of all Unicode code points. The fallback font is
jdaggett@8311 2899 downloaded and used to render the arrow character.</p>
jdaggett@1148 2900 </div>
jdaggett@890 2901
jdaggett@8225 2902 <h3 id=font-rend-desc><span class=secno>4.7 </span>Font features: the <a
jdaggett@1662 2903 href="#descdef-font-variant">font-variant</a> and <a
jdaggett@1662 2904 href="#descdef-font-feature-settings">font-feature-settings</a>
jdaggett@1662 2905 descriptors</h3>
jdaggett@1662 2906
jdaggett@1662 2907 <table class=descdef>
jdaggett@1662 2908 <tbody>
jdaggett@1662 2909 <tr>
jdaggett@1662 2910 <td>Name:
jdaggett@1662 2911
jdaggett@8278 2912 <td><dfn id=descdef-font-variant
jdaggett@8278 2913 title="font-variant!!descriptor">font-variant</dfn>
jdaggett@1662 2914
jdaggett@1662 2915 <tr>
jdaggett@1662 2916 <td>Value:
jdaggett@1662 2917
jdaggett@8278 2918 <td><a href="#font-variant-normal-value"
jdaggett@8278 2919 title="normal!!font-variant">normal</a> | <a
jdaggett@8278 2920 href="#font-variant-none-value" title="none!!font-variant">none</a> | [
jdaggett@8278 2921 <a href="#common-lig-values"><var>&lt;common-lig-values&gt;</var></a>
jdaggett@8278 2922 || <a
jdaggett@8225 2923 href="#discretionary-lig-values"><var>&lt;discretionary-lig-values&gt;</var></a>
jdaggett@8225 2924 || <a
jdaggett@8225 2925 href="#historical-lig-values"><var>&lt;historical-lig-values&gt;</var></a>
jdaggett@8225 2926 || <a
jdaggett@8225 2927 href="#contextual-alt-values"><var>&lt;contextual-alt-values&gt;</var></a>
jdaggett@8225 2928 || <a href="#stylistic"><var
jdaggett@8225 2929 title=stylistic>stylistic(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 2930 href="#historical-forms"><var>historical-forms</var></a> || <a
jdaggett@8225 2931 href="#styleset"><var
jdaggett@8225 2932 title=styleset>styleset(&lt;feature-value-name&gt; #)</var></a> || <a
jdaggett@8225 2933 href="#character-variant"><var
jdaggett@8225 2934 title=character-variant>character-variant(&lt;feature-value-name&gt;
jdaggett@8225 2935 #)</var></a> || <a href="#swash"><var
jdaggett@8225 2936 title=swash>swash(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 2937 href="#ornaments"><var
jdaggett@8225 2938 title=ornaments>ornaments(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 2939 href="#annotation"><var
jdaggett@8225 2940 title=annotation>annotation(&lt;feature-value-name&gt;)</var></a> || [
jdaggett@8225 2941 <a href="#small-caps"><i>small-caps</i></a> | <a
jdaggett@8225 2942 href="#all-small-caps"><i>all-small-caps</i></a> | <a
jdaggett@8225 2943 href="#petite-caps"><i>petite-caps</i></a> | <a
jdaggett@8225 2944 href="#all-petite-caps"><i>all-petite-caps</i></a> | <a
jdaggett@8225 2945 href="#unicase"><i>unicase</i></a> | <a
jdaggett@8225 2946 href="#titling-caps"><i>titling-caps</i></a> ] || <a
jdaggett@8225 2947 href="#numeric-figure-values"><var>&lt;numeric-figure-values&gt;</var></a>
jdaggett@8225 2948 || <a
jdaggett@8225 2949 href="#numeric-spacing-values"><var>&lt;numeric-spacing-values&gt;</var></a>
jdaggett@8225 2950 || <a
jdaggett@8225 2951 href="#numeric-fraction-values"><var>&lt;numeric-fraction-values&gt;</var></a>
jdaggett@8225 2952 || <a href="#ordinal"><i>ordinal</i></a> || <a
jdaggett@8225 2953 href="#slashed-zero"><i>slashed-zero</i></a> || <a
jdaggett@8225 2954 href="#east-asian-variant-values"><var>&lt;east-asian-variant-values&gt;</var></a>
jdaggett@8225 2955 || <a
jdaggett@8225 2956 href="#east-asian-width-values"><var>&lt;east-asian-width-values&gt;</var></a>
jdaggett@8225 2957 || <a href="#ruby"><i>ruby</i></a> ]
jdaggett@1662 2958
jdaggett@1662 2959 <tr>
jdaggett@1662 2960 <td><em>Initial:</em>
jdaggett@1662 2961
jdaggett@1662 2962 <td>normal
jdaggett@1662 2963 </table>
jdaggett@1662 2964
jdaggett@1662 2965 <table class=descdef>
jdaggett@1662 2966 <tbody>
jdaggett@1662 2967 <tr>
jdaggett@1662 2968 <td>Name:
jdaggett@1662 2969
jdaggett@8278 2970 <td><dfn id=descdef-font-feature-settings
jdaggett@8278 2971 title="font-feature-settings!!descriptor">font-feature-settings</dfn>
jdaggett@1662 2972
jdaggett@1662 2973 <tr>
jdaggett@1662 2974 <td>Value:
jdaggett@1662 2975
jdaggett@8278 2976 <td><a href="#font-feature-settings-normal-value"
jdaggett@8278 2977 title="normal!!font-feature-settings">normal</a> | <a
jdaggett@8225 2978 href="#feature-tag-value"><var>&lt;feature-tag-value&gt;</var></a> #
jdaggett@1662 2979
jdaggett@1662 2980 <tr>
jdaggett@1662 2981 <td><em>Initial:</em>
jdaggett@1662 2982
jdaggett@1662 2983 <td>normal
jdaggett@1662 2984 </table>
jdaggett@1662 2985
jdaggett@8213 2986 <p>These descriptors define initial settings that apply when the font
jdaggett@8311 2987 defined by an <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 2988 rule is rendered. They do not affect font selection. Values are identical
jdaggett@8311 2989 to those defined for the corresponding <a href="#propdef-font-variant"
jdaggett@8278 2990 title="font-variant!!property">‘<code
jdaggett@8279 2991 class=property>font-variant</code>’</a> and <a
jdaggett@8279 2992 href="#propdef-font-feature-settings"
jdaggett@8279 2993 title="font-feature-settings!!property">‘<code
jdaggett@8279 2994 class=property>font-feature-settings</code>’</a> properties defined
jdaggett@8279 2995 below except that the value ‘<code class=property>inherit</code>’ is
jdaggett@8279 2996 omitted. When multiple font feature descriptors or properties are used,
jdaggett@8279 2997 the cumulative effect on text rendering is detailed in the section <a
jdaggett@8031 2998 href="#font-feature-resolution">Font Feature Resolution</a> below. In
jdaggett@8278 2999 cases where specific values define synthesized fallback for certain <a
jdaggett@8278 3000 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8278 3001 class=property>font-variant</code>’</a> subproperties, the same
jdaggett@8031 3002 synthesized fallback applies when used within those values are used with
jdaggett@8278 3003 the <a href="#descdef-font-style" title="font-style!!descriptor">‘<code
jdaggett@8031 3004 class=property>font-variant</code>’</a> descriptor.
jdaggett@1662 3005
jdaggett@8225 3006 <h3 id=font-face-loading><span class=secno>4.8 </span>Font loading
jdaggett@2563 3007 guidelines</h3>
jdaggett@2563 3008
jdaggett@8311 3009 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule is
jdaggett@8311 3010 designed to allow lazy loading of font resources that are only downloaded
jdaggett@8311 3011 when used within a document. A stylesheet can include <a
jdaggett@8311 3012 href="#at-font-face-rule"><code>@font-face</code></a> rules for a library
jdaggett@8311 3013 of fonts of which only a select set are used; user agents must only
jdaggett@8311 3014 download those fonts that are referred to within the style rules
jdaggett@8311 3015 applicable to a given page. User agents that download all fonts defined in
jdaggett@8311 3016 <a href="#at-font-face-rule"><code>@font-face</code></a> rules without
jdaggett@8311 3017 considering whether those fonts are in fact used within a page are
jdaggett@8311 3018 considered non-conformant. In cases where a font might be downloaded in
jdaggett@8360 3019 character fallback cases, user agents may download a font if it's
jdaggett@8360 3020 contained within the computed value of <a href="#propdef-font-family"
jdaggett@8360 3021 title="font-family!!property">‘<code
jdaggett@8360 3022 class=property>font-family</code>’</a> for a given text run.
jdaggett@2563 3023
jdaggett@2563 3024 <pre>
jdaggett@2563 3025 @font-face {
jdaggett@2563 3026 font-family: GeometricModern;
jdaggett@8860 3027 src: url(font.woff);
jdaggett@2563 3028 }
jdaggett@2563 3029
jdaggett@2563 3030 p {
jdaggett@2563 3031 /* font will be downloaded for pages with p elements */
jdaggett@2563 3032 font-family: GeometricModern, sans-serif;
jdaggett@2563 3033 }
jdaggett@2563 3034
jdaggett@2563 3035 h2 {
jdaggett@2563 3036 /* font may be downloaded for pages with h2 elements, even if Futura is available locally */
jdaggett@2563 3037 font-family: Futura, GeometricModern, sans-serif;
jdaggett@2563 3038 }
jdaggett@2563 3039 </pre>
jdaggett@2563 3040
jdaggett@2563 3041 <p>In cases where textual content is loaded before downloadable fonts are
jdaggett@2563 3042 available, user agents may render text as it would be rendered if
jdaggett@2563 3043 downloadable font resources are not available or they may render text
jdaggett@2563 3044 transparently with fallback fonts to avoid a flash of text using a
jdaggett@2563 3045 fallback font. In cases where the font download fails user agents must
jdaggett@2563 3046 display text, simply leaving transparent text is considered non-conformant
jdaggett@2563 3047 behavior. Authors are advised to use fallback fonts in their font lists
jdaggett@8431 3048 that closely match the metrics of the downloadable fonts to avoid large
jdaggett@8431 3049 page reflows where possible.
jdaggett@2563 3050
jdaggett@8863 3051 <p><a id=same-origin-restriction> </a><a
jdaggett@8863 3052 id=allowing-cross-origin-font-loading> </a>
jdaggett@8863 3053
jdaggett@8863 3054 <h3 id=font-fetching-requirements><span class=secno>4.9 </span>Font
jdaggett@8863 3055 fetching requirements</h3>
jdaggett@7253 3056 <!-- TPAC 2011 Resolution to require same-origin restriction for loading fonts:
jdaggett@7253 3057 http://lists.w3.org/Archives/Public/www-style/2011Nov/0711.html
jdaggett@7253 3058 http://www.w3.org/2011/10/31-webapps-minutes.html#item02
jdaggett@7253 3059 -->
jdaggett@2740 3060
jdaggett@8640 3061 <p>For font loads, user agents must use the <a
jdaggett@8640 3062 href="http://www.w3.org/TR/html5/infrastructure.html#cors-enabled-fetch">potentially
jdaggett@8640 3063 CORS-enabled fetch</a> method defined by the <a href="#HTML5"
jdaggett@8640 3064 rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> specification for URL's
jdaggett@8640 3065 defined within @font-face rules. When fetching, user agents must use
jdaggett@8640 3066 "Anonymous" mode, set the referrer source to the stylesheet's URL and set
jdaggett@8640 3067 the origin to the URL of the containing document.
jdaggett@2737 3068
jdaggett@8863 3069 <p class=note>The implications of this for authors are that fonts will
jdaggett@8863 3070 typically not be loaded cross-origin unless authors specifically takes
jdaggett@8863 3071 steps to permit cross-origin loads. Sites can explicitly allow cross-site
jdaggett@8863 3072 loading of font data using the <code>Access-Control-Allow-Origin</code>
jdaggett@8863 3073 HTTP header. For other schemes, no explicit mechanism to allow
jdaggett@8864 3074 cross-origin loading, beyond what is permitted by the <a
jdaggett@8863 3075 href="http://www.w3.org/TR/html5/infrastructure.html#cors-enabled-fetch">potentially
jdaggett@8864 3076 CORS-enabled fetch</a> method, is defined or required.
jdaggett@8863 3077
jdaggett@8872 3078 <div class=example> For the examples given below, assume that a document is
jdaggett@8872 3079 located at <code>http://example.com/page.html</code> and all URL's link to
jdaggett@8872 3080 valid font resources supported by the user agent. Fonts defined with the
jdaggett@8872 3081 ‘<a href="#descdef-src"><code class=property>src</code></a>’
jdaggett@8872 3082 descriptor values below will be loaded:
jdaggett@8872 3083 <pre>/* same origin (i.e. domain, scheme, port match document) */
jdaggett@8872 3084 src: url(fonts/simple.woff);
jdaggett@8872 3085
jdaggett@8872 3086 /* data url's with no redirects are treated as same origin */
jdaggett@8872 3087 src: url("data:application/font-woff;base64,...");
jdaggett@8872 3088
jdaggett@8872 3089 /* cross origin, different domain */
jdaggett@8872 3090 /* Access-Control-Allow-Origin response header set to '*' */
jdaggett@8872 3091 src: url(http://another.example.com/fonts/simple.woff);
jdaggett@8872 3092 </pre>
jdaggett@8872 3093 Fonts defined with the ‘<a href="#descdef-src"><code
jdaggett@8872 3094 class=property>src</code></a>’ descriptor values below will fail to
jdaggett@8872 3095 load:
jdaggett@8872 3096 <pre>/* cross origin, different scheme */
jdaggett@8872 3097 /* no Access-Control-xxx headers in response */
jdaggett@8872 3098 src: url(https://example.com/fonts/simple.woff);
jdaggett@8872 3099
jdaggett@8872 3100 /* cross origin, different domain */
jdaggett@8872 3101 /* no Access-Control-xxx headers in response */
jdaggett@8872 3102 src: url(http://another.example.com/fonts/simple.woff);
jdaggett@8872 3103 </pre>
jdaggett@8872 3104 </div>
jdaggett@8872 3105
jdaggett@6699 3106 <h2 id=font-matching-algorithm><span class=secno>5 </span>Font Matching
jdaggett@6699 3107 Algorithm</h2>
jdaggett@484 3108
jdaggett@2457 3109 <p>The algorithm below describes how fonts are associated with individual
jdaggett@2457 3110 runs of text. For each character in the run a font family is chosen and a
jdaggett@2457 3111 particular font face is selected containing a glyph for that character.
jdaggett@2457 3112
jdaggett@7309 3113 <h3 id=font-family-casing><span class=secno>5.1 </span>Case sensitivity of
jdaggett@7309 3114 font family names</h3>
jdaggett@7309 3115
jdaggett@7309 3116 <p>As part of the font matching algorithm outlined below, user agents must
jdaggett@7309 3117 match font family names used in style rules with actual font family names
jdaggett@8391 3118 contained in fonts available in a given environment or with font family
jdaggett@8391 3119 names defined in <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8391 3120 rules. User agents must match these names case insensitively, using the
jdaggett@8391 3121 "Default Caseless Matching" algorithm outlined in the Unicode
jdaggett@9154 3122 specification <a href="#UNICODE"
jdaggett@9154 3123 rel=biblioentry>[UNICODE]<!--{{!UNICODE}}--></a>. This algorithm is
jdaggett@8391 3124 detailed in section 3.13 entitled "Default Case Algorithms". Specifically,
jdaggett@8391 3125 the algorithm must be applied without normalizing the strings involved and
jdaggett@8391 3126 without applying any language-specific tailorings. The case folding method
jdaggett@8391 3127 specified by this algorithm uses the case mappings with status field
jdaggett@8391 3128 ‘<code class=property>C</code>’ or ‘<code class=property>F</code>’
jdaggett@8391 3129 in the CaseFolding.txt file of the Unicode Character Database.
jdaggett@7355 3130
jdaggett@7355 3131 <p class=note> For authors this means that font family names are matched
jdaggett@8272 3132 case insensitively, whether those names exist in a platform font or in the
jdaggett@8311 3133 <a href="#at-font-face-rule"><code>@font-face</code></a> rules contained
jdaggett@8311 3134 in a stylesheet. Authors should take care to ensure that names use a
jdaggett@8311 3135 character sequence consistent with the actual font family name,
jdaggett@8311 3136 particularly when using combining characters such as diacritical marks.
jdaggett@8311 3137 For example, a family name that contains an uppercase A (U+0041) followed
jdaggett@8311 3138 by a combining ring (U+030A) will <strong>not</strong> match a name that
jdaggett@8311 3139 looks identical but which uses the precomposed lowercase a-ring character
jdaggett@8311 3140 (U+00E5) instead of the combining sequence.
jdaggett@7309 3141
jdaggett@8391 3142 <p class=note> Implementors should take care to verify that a given
jdaggett@8391 3143 caseless string comparison implementation uses this precise algorithm and
jdaggett@8391 3144 not assume that a given platform string matching routine follows it, as
jdaggett@8391 3145 many of these have locale-specific behavior or use some level of string
jdaggett@8391 3146 normalization.
jdaggett@8391 3147
jdaggett@7309 3148 <h3 id=font-style-matching><span class=secno>5.2 </span>Matching font
jdaggett@2457 3149 styles</h3>
jdaggett@2457 3150
jdaggett@8391 3151 <p>The procedure for choosing a font for a given character in a run of text
jdaggett@8391 3152 consists of iterating over the font families named by the <a
jdaggett@8391 3153 href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8391 3154 class=property>font-family</code>’</a> property, selecting a font face
jdaggett@531 3155 with the appropriate style based on other font properties and then
jdaggett@8391 3156 determining whether a glyph exists for the given character. This is done
jdaggett@7311 3157 using the <dfn id=character-map>character map</dfn> of the font, data
jdaggett@8397 3158 which maps characters to the default glyph for that character. A font is
jdaggett@8397 3159 considered to <dfn id=support>support</dfn> a given character if (1) the
jdaggett@8397 3160 character is contained in the font's <a
jdaggett@8397 3161 href="#character-map"><em>character map</em></a> and (2) if required by
jdaggett@8397 3162 the containing script, shaping information is available for that
jdaggett@8397 3163 character.
jdaggett@8397 3164
jdaggett@8397 3165 <p>Some legacy fonts may include a given character in the <a
jdaggett@8397 3166 href="#character-map"><em>character map</em></a> but lack the shaping
jdaggett@8397 3167 information (e.g. <a
jdaggett@8397 3168 href="http://www.microsoft.com/typography/otspec/ttochap1.htm">OpenType
jdaggett@8397 3169 layout tables</a> or <a
jdaggett@8397 3170 href="http://scripts.sil.org/cms/scripts/page.php?site_id=projects&amp;item_id=graphite_techAbout">Graphite
jdaggett@8397 3171 tables</a>) necessary for correctly rendering text runs containing that
jdaggett@8397 3172 character.
jdaggett@8397 3173
jdaggett@8397 3174 <p>Codepoint sequences consisting of a base character followed by a
jdaggett@8397 3175 sequence of combining characters are treated slightly differently, see the
jdaggett@8397 3176 section on <a href="#cluster-matching">cluster matching</a> below.
jdaggett@531 3177
jdaggett@7232 3178 <p>For this procedure, the <dfn id=default-face>default face</dfn> for a
jdaggett@7232 3179 given font family is defined to be the face that would be selected if all
jdaggett@7232 3180 font style properties were set to their initial value.
jdaggett@7232 3181
jdaggett@531 3182 <ol id=fontmatchingalg>
jdaggett@2457 3183 <li>Using the computed font property values for a given element, the user
jdaggett@8391 3184 agent starts with the first family name specified by the <a
jdaggett@8391 3185 href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8278 3186 class=property>font-family</code>’</a> property.
jdaggett@2457 3187
jdaggett@8391 3188 <li>If the family name is a generic family keyword, the user agent looks
jdaggett@8391 3189 up the appropriate font family name to be used. User agents may choose
jdaggett@8391 3190 the generic font family to use based on the language of the containing
jdaggett@8391 3191 element or the Unicode range of the character.
jdaggett@2457 3192
jdaggett@2457 3193 <li>For other family names, the user agent attempts to find the family
jdaggett@8311 3194 name among fonts defined via <a
jdaggett@8311 3195 href="#at-font-face-rule"><code>@font-face</code></a> rules and then
jdaggett@8391 3196 among available system fonts, matching names with a <a
jdaggett@8391 3197 href="#font-family-casing">case-insensitive comparison</a> as outlined in
jdaggett@8391 3198 the section above. On systems containing fonts with multiple localized
jdaggett@8391 3199 font family names, user agents must match any of these names independent
jdaggett@8391 3200 of the underlying system locale or platform API used. If the font
jdaggett@8391 3201 resources defined for a given face in an <a
jdaggett@8311 3202 href="#at-font-face-rule"><code>@font-face</code></a> rule are either not
jdaggett@8311 3203 available or contain invalid font data, then the face should be treated
jdaggett@8311 3204 as not present in the family. If no faces are present for a family
jdaggett@8311 3205 defined via <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 3206 rules, the family should be treated as missing; matching a platform font
jdaggett@8311 3207 with the same name must not occur in this case.
jdaggett@2457 3208
jdaggett@2457 3209 <li>If a font family match occurs, the user agent assembles the set of
jdaggett@6701 3210 font faces in that family and then narrows the set to a single face using
jdaggett@8391 3211 other font properties in the order given below. A group of faces defined
jdaggett@8391 3212 via <a href="#at-font-face-rule"><code>@font-face</code></a> rules with
jdaggett@8391 3213 identical font descriptor values but differing ‘<a
jdaggett@8391 3214 href="#descdef-unicode-range"><code
jdaggett@8391 3215 class=property>unicode-range</code></a>’ values are considered to be a
jdaggett@8391 3216 single <dfn id=composite-face>composite face</dfn> for this step:
jdaggett@2457 3217 <ol id=fontstylematchingalg>
jdaggett@8278 3218 <li><a href="#propdef-font-stretch"
jdaggett@8278 3219 title="font-stretch!!property">‘<code
jdaggett@8278 3220 class=property>font-stretch</code>’</a> is tried first. If the
jdaggett@8278 3221 matching set contains faces with width values matching the <a
jdaggett@8278 3222 href="#propdef-font-stretch" title="font-stretch!!property">‘<code
jdaggett@8278 3223 class=property>font-stretch</code>’</a> value, faces with other width
jdaggett@4624 3224 values are removed from the matching set. If there is no face that
jdaggett@4624 3225 exactly matches the width value the nearest width is used instead. If
jdaggett@8278 3226 the value of <a href="#propdef-font-stretch"
jdaggett@8278 3227 title="font-stretch!!property">‘<code
jdaggett@8368 3228 class=property>font-stretch</code>’</a> is <a
jdaggett@8368 3229 href="#font-stretch-normal-value" title="normal!!font-stretch">‘<code
jdaggett@8368 3230 class=property>normal</code>’</a> or one of the condensed values,
jdaggett@8278 3231 narrower width values are checked first, then wider values. If the
jdaggett@8278 3232 value of <a href="#propdef-font-stretch"
jdaggett@8278 3233 title="font-stretch!!property">‘<code
jdaggett@8278 3234 class=property>font-stretch</code>’</a> is one of the expanded
jdaggett@4624 3235 values, wider values are checked first, followed by narrower values.
jdaggett@4624 3236 Once the closest matching width has been determined by this process,
jdaggett@4624 3237 faces with other widths are removed from the matching set.
jdaggett@4624 3238
jdaggett@8278 3239 <li><a href="#propdef-font-style" title="font-style!!property">‘<code
jdaggett@8278 3240 class=property>font-style</code>’</a> is tried next. If the value of
jdaggett@8278 3241 <a href="#propdef-font-style" title="font-style!!property">‘<code
jdaggett@8278 3242 class=property>font-style</code>’</a> is ‘<a href="#italic"><code
jdaggett@8278 3243 class=property>italic</code></a>’, italic faces are checked first,
jdaggett@8278 3244 then oblique, then normal faces. If the value is ‘<a
jdaggett@8278 3245 href="#oblique"><code class=property>oblique</code></a>’, oblique
jdaggett@8278 3246 faces are checked first, then italic faces and then normal faces. If
jdaggett@8368 3247 the value is <a href="#font-style-normal-value"
jdaggett@8368 3248 title="normal!!font-style">‘<code
jdaggett@8368 3249 class=property>normal</code>’</a>, normal faces are checked first,
jdaggett@8279 3250 then oblique faces, then italic faces. Faces with other style values
jdaggett@8279 3251 are excluded from the matching set. User agents are permitted to
jdaggett@8279 3252 distinguish between italic and oblique faces within platform font
jdaggett@8391 3253 families but this is not required, so all italic or oblique faces may
jdaggett@8391 3254 be treated as italic faces. However, within font families defined via
jdaggett@8391 3255 <a href="#at-font-face-rule"><code>@font-face</code></a> rules, italic
jdaggett@8391 3256 and oblique faces must be distinguished using the value of the <a
jdaggett@8311 3257 href="#descdef-font-style" title="font-style!!descriptor">‘<code
jdaggett@8391 3258 class=property>font-style</code>’</a> descriptor. For families that
jdaggett@8391 3259 lack any italic or oblique faces, users agents may create artificial
jdaggett@8391 3260 oblique faces, if this is permitted by the value of the ‘<a
jdaggett@8391 3261 href="#propdef-font-synthesis"><code
jdaggett@8391 3262 class=property>font-synthesis</code></a>’ property.
jdaggett@8278 3263
jdaggett@8278 3264 <li><a href="#propdef-font-weight"
jdaggett@8278 3265 title="font-weight!!property">‘<code
jdaggett@8391 3266 class=property>font-weight</code>’</a> is matched next, so it will
jdaggett@8278 3267 always reduce the matching set to a single font face. If bolder/lighter
jdaggett@8278 3268 relative weights are used, the effective weight is calculated based on
jdaggett@8278 3269 the inherited weight value, as described in the definition of the <a
jdaggett@8278 3270 href="#propdef-font-weight" title="font-weight!!property">‘<code
jdaggett@8278 3271 class=property>font-weight</code>’</a> property. Given the desired
jdaggett@4624 3272 weight and the weights of faces in the matching set after the steps
jdaggett@4624 3273 above, if the desired weight is available that face matches. Otherwise,
jdaggett@4624 3274 a weight is chosen using the rules below:
jdaggett@531 3275 <ul>
jdaggett@531 3276 <li>If the desired weight is less than 400, weights below the desired
jdaggett@531 3277 weight are checked in descending order followed by weights above the
jdaggett@531 3278 desired weight in ascending order until a match is found.
jdaggett@531 3279
jdaggett@531 3280 <li>If the desired weight is greater than 500, weights above the
jdaggett@531 3281 desired weight are checked in ascending order followed by weights
jdaggett@531 3282 below the desired weight in descending order until a match is found.
jdaggett@531 3283
jdaggett@531 3284 <li>If the desired weight is 400, 500 is checked first and then the
jdaggett@531 3285 rule for desired weights less than 400 is used.
jdaggett@531 3286
jdaggett@531 3287 <li>If the desired weight is 500, 400 is checked first and then the
jdaggett@532 3288 rule for desired weights less than 400 is used.
jdaggett@531 3289 </ul>
jdaggett@531 3290
jdaggett@4624 3291 <li><span class=property>‘<a href="#propdef-font-size"><code
jdaggett@4624 3292 class=property>font-size</code></a>’</span> must be matched within a
jdaggett@4624 3293 UA-dependent margin of tolerance. (Typically, sizes for scalable fonts
jdaggett@4624 3294 are rounded to the nearest whole pixel, while the tolerance for
jdaggett@4624 3295 bitmapped fonts could be as large as 20%.) Further computations, e.g.,
jdaggett@4624 3296 by ‘<code class=property>em</code>’ values in other properties, are
jdaggett@4624 3297 based on the <span class=property>‘<a href="#propdef-font-size"><code
jdaggett@4624 3298 class=property>font-size</code></a>’</span> value that is used, not
jdaggett@4624 3299 the one that is specified.
jdaggett@531 3300 </ol>
jdaggett@531 3301
jdaggett@7232 3302 <li>
jdaggett@8391 3303 <p>If the matched face is defined via <a
jdaggett@8391 3304 href="#at-font-face-rule"><code>@font-face</code></a> rules, user agents
jdaggett@8391 3305 must use the procedure below to select a single font:
jdaggett@8391 3306
jdaggett@8391 3307 <ol>
jdaggett@8391 3308 <li>If the font resource has not been loaded and the range of characters
jdaggett@8391 3309 defined by the ‘<a href="#descdef-unicode-range"><code
jdaggett@8391 3310 class=property>unicode-range</code></a>’ descriptor value includes
jdaggett@8391 3311 the character in question, load the font.
jdaggett@8391 3312
jdaggett@8391 3313 <li>After downloading, if the <a
jdaggett@8391 3314 href="#effective-character-map"><em>effective character map</em></a>
jdaggett@8391 3315 supports the character in question, select that font.
jdaggett@8391 3316 </ol>
jdaggett@8391 3317
jdaggett@8391 3318 <p>When the matched face is a <a href="#composite-face"><em>composite
jdaggett@8391 3319 face</em></a>, user agents must use the procedure above on each of the
jdaggett@8391 3320 faces in the <a href="#composite-face"><em>composite face</em></a> in
jdaggett@8391 3321 reverse order of <a
jdaggett@8391 3322 href="#at-font-face-rule"><code>@font-face</code></a> rule definition.</p>
jdaggett@8391 3323
jdaggett@8391 3324 <p>While the download occurs, user agents may either wait until the font
jdaggett@8391 3325 is downloaded or render once with substituted font metrics and render
jdaggett@8391 3326 again once the font is downloaded.</p>
jdaggett@8391 3327
jdaggett@8391 3328 <li>
jdaggett@7232 3329 <p>If no matching face exists or the matched face does not contain a
jdaggett@7232 3330 glyph for the character to be rendered, the next family name is selected
jdaggett@8391 3331 and the previous three steps repeated. Glyphs from other faces in the
jdaggett@7232 3332 family are not considered. The only exception is that user agents may
jdaggett@8391 3333 optionally substitute a synthetically obliqued version of the <a
jdaggett@7232 3334 href="#default-face"><em>default face</em></a> if that face supports a
jdaggett@8391 3335 given glyph and synthesis of these faces is permitted by the value of
jdaggett@8391 3336 the ‘<a href="#propdef-font-synthesis"><code
jdaggett@8391 3337 class=property>font-synthesis</code></a>’ property. For example, a
jdaggett@8391 3338 synthetic italic version of the regular face may be used if the italic
jdaggett@8391 3339 face doesn't support glyphs for Arabic.</p>
jdaggett@7242 3340 <!-- resolution on the above: http://lists.w3.org/Archives/Public/www-style/2012Nov/0292.html -->
jdaggett@7242 3341
jdaggett@531 3342
jdaggett@531 3343 <li>If there are no more font families to be evaluated and no matching
jdaggett@8363 3344 face has been found, then the user agent performs a <dfn
jdaggett@8363 3345 id=system-font-fallback>system font fallback</dfn> procedure to find the
jdaggett@8363 3346 best match for the character to be rendered. The result of this procedure
jdaggett@8363 3347 may vary across user agents.
jdaggett@531 3348
jdaggett@531 3349 <li>If a particular character cannot be displayed using any font, the user
jdaggett@531 3350 agent should indicate by some means that a character is not being
jdaggett@2457 3351 displayed, displaying either a symbolic representation of the missing
jdaggett@2457 3352 glyph (e.g. using a <a
jdaggett@2457 3353 href="http://en.wikipedia.org/wiki/Last_resort_font">Last Resort
jdaggett@2457 3354 Font</a>) or using the missing character glyph from a default font.
jdaggett@512 3355 </ol>
jdaggett@2457 3356
jdaggett@8430 3357 <p>Optimizations of this process are allowed provided that an
jdaggett@8430 3358 implementation behaves as if the algorithm had been followed exactly.
jdaggett@9154 3359 Matching occurs in a well-defined order to ensure that the results are as
jdaggett@8430 3360 consistent as possible across user agents, given an identical set of
jdaggett@8430 3361 available fonts and rendering technology.
jdaggett@8430 3362
jdaggett@8431 3363 <p>The <dfn id=first-available-font>first available font</dfn>, used in the
jdaggett@8431 3364 definition of <a
jdaggett@8431 3365 href="http://www.w3.org/TR/css3-values/#font-relative-lengths"><em>font-relative
jdaggett@8431 3366 lengths</em></a> such as ‘<code class=property>ex</code>’ and ‘<code
jdaggett@8431 3367 class=property>ch</code>’, is defined to be the first available font
jdaggett@8431 3368 that would match any character given font families in the ‘<code
jdaggett@8431 3369 class=property>font-family</code>’ list (or a user agent's default font
jdaggett@8431 3370 if none are available).
jdaggett@8431 3371
jdaggett@7309 3372 <h3 id=cluster-matching><span class=secno>5.3 </span>Cluster matching</h3>
jdaggett@6701 3373
jdaggett@8397 3374 <p>When text contains characters such as combining marks, ideally the base
jdaggett@8397 3375 character should be rendered using the same font as the mark, this assures
jdaggett@8397 3376 proper placement of the mark. For this reason, the font matching algorithm
jdaggett@8397 3377 for clusters is more specialized than the general case of matching a
jdaggett@8397 3378 single character by itself. For sequences containing variation selectors,
jdaggett@8397 3379 which indicate the precise glyph to be used for a given character, user
jdaggett@8397 3380 agents always attempt <a href="#system-font-fallback"><em>system font
jdaggett@8397 3381 fallback</em></a> to find the appropriate glyph before using the default
jdaggett@8397 3382 glyph of the base character.
jdaggett@8397 3383
jdaggett@8397 3384 <p>A sequence of codepoints containing combining mark or other modifiers is
jdaggett@8397 3385 termed a grapheme cluster (see <a href="#CSS3TEXT"
jdaggett@6701 3386 rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a> for a more complete
jdaggett@6701 3387 description). For a given cluster containing a base character, <em>b</em>
jdaggett@6701 3388 and a sequence of combining characters <em>c1, c2…</em>, the entire
jdaggett@6701 3389 cluster is matched using these steps:
jdaggett@6701 3390
jdaggett@6701 3391 <ol>
jdaggett@6701 3392 <li>For each family in the font list, a face is chosen using the style
jdaggett@6701 3393 selection rules defined in the previous section.
jdaggett@6701 3394 <ol>
jdaggett@7020 3395 <li>If all characters in the sequence <em>b + c1 + c2 …</em> are
jdaggett@7021 3396 completely supported by the font, select this font for the sequence.
jdaggett@6701 3397
jdaggett@6701 3398 <li>If a sequence of multiple codepoints is canonically equivalent to a
jdaggett@8397 3399 single character and the font <a href="#support"><em
jdaggett@8397 3400 title=support>supports</em></a> that character, select this font for
jdaggett@9156 3401 the sequence and use the glyph associated with the canonically
jdaggett@9156 3402 equiavlent character for the entire cluster.
jdaggett@6701 3403 </ol>
jdaggett@6701 3404
jdaggett@6701 3405 <li>If no font was found in the font list in step 1:
jdaggett@6701 3406 <ol>
jdaggett@6701 3407 <li>If <em>c1</em> is a variation selector, system fallback must be used
jdaggett@8397 3408 to find a font that <a href="#support"><em
jdaggett@8397 3409 title=support>supports</em></a> the full sequence of <em>b + c1</em>.
jdaggett@8397 3410 If no font on the system <a href="#support"><em
jdaggett@8397 3411 title=support>supports</em></a> the full sequence, match the single
jdaggett@6701 3412 character <em>b</em> using the normal procedure for matching single
jdaggett@6701 3413 characters and ignore the variation selector. Note: a sequence with
jdaggett@8397 3414 more than one variation selector must be treated as an encoding error
jdaggett@9154 3415 and the trailing selectors must be ignored. <a href="#UNICODE"
jdaggett@9154 3416 rel=biblioentry>[UNICODE]<!--{{!UNICODE}}--></a>
jdaggett@6701 3417
jdaggett@6701 3418 <li>Otherwise, the user agent may optionally use system font fallback to
jdaggett@8397 3419 match a font that <a href="#support"><em
jdaggett@8397 3420 title=support>supports</em></a> the entire cluster.
jdaggett@6701 3421 </ol>
jdaggett@6701 3422
jdaggett@6701 3423 <li>If no font is found in step 2, use the matching sequence from step 1
jdaggett@8397 3424 to determine the longest sequence that is completely <a
jdaggett@8397 3425 href="#support"><em title=support>supported</em></a> by a font in the
jdaggett@8397 3426 font list and attempt to match the remaining combining characters
jdaggett@6701 3427 separately using the rules for single characters.
jdaggett@6701 3428 </ol>
jdaggett@6701 3429
jdaggett@7309 3430 <h3 id=char-handling-issues><span class=secno>5.4 </span>Character handling
jdaggett@2457 3431 issues</h3>
jdaggett@2457 3432
jdaggett@8430 3433 <p>CSS font matching is always performed on text runs containing Unicode
jdaggett@8430 3434 characters, so documents using legacy encodings are assumed to have been
jdaggett@7311 3435 transcoded before matching fonts. For fonts containing <a
jdaggett@7311 3436 href="#character-map"><em title="character map">character maps</em></a>
jdaggett@7311 3437 for both legacy encodings and Unicode, the contents of the legacy encoding
jdaggett@7311 3438 <a href="#character-map"><em>character map</em></a> must have no effect on
jdaggett@7311 3439 the results of the font matching process.
jdaggett@2461 3440
jdaggett@2461 3441 <p>The font matching process does not assume that text runs are in either
jdaggett@2461 3442 normalized or denormalized form (see <a href="#CHARMOD-NORM"
jdaggett@3042 3443 rel=biblioentry>[CHARMOD-NORM]<!--{{CHARMOD-NORM}}--></a> for more
jdaggett@8430 3444 details). Fonts may only support precomposed forms and not the decomposed
jdaggett@8430 3445 sequence of base character plus combining marks. Authors should always
jdaggett@6701 3446 tailor their choice of fonts to their content, including whether that
jdaggett@6701 3447 content contains normalized or denormalized character streams.
jdaggett@2457 3448
jdaggett@8430 3449 <p>If a given character is a Private-Use Area Unicode codepoint, user
jdaggett@8430 3450 agents must only match font families named in the ‘<code
jdaggett@8430 3451 class=property>font-family</code>’ list that are not generic families.
jdaggett@8430 3452 If none of the families named in the ‘<code
jdaggett@8430 3453 class=property>font-family</code>’ list contain a glyph for that
jdaggett@8430 3454 codepoint, user agents must display some form of missing glyph symbol for
jdaggett@8430 3455 that character rather than attempting <a
jdaggett@8430 3456 href="#system-font-fallback"><em>system font fallback</em></a> for that
jdaggett@8430 3457 codepoint. When matching the replacement character U+FFFD, user agents may
jdaggett@8430 3458 skip the font matching process and immediately display some form of
jdaggett@8430 3459 missing glyph symbol, they are not required to display the glyph from the
jdaggett@8430 3460 font that would be selected by the font matching process.
jdaggett@2457 3461
jdaggett@2457 3462 <p>In general, the fonts for a given family will all have the same or
jdaggett@7311 3463 similar <a href="#character-map"><em title="character map">character
jdaggett@7311 3464 maps</em></a>. The process outlined here is designed to handle even font
jdaggett@7311 3465 families containing faces with widely variant <a href="#character-map"><em
jdaggett@7311 3466 title="character map">character maps</em></a>. However, authors are
jdaggett@7311 3467 cautioned that the use of such families can lead to unexpected results.
jdaggett@2457 3468
jdaggett@7309 3469 <h3 id=font-matching-changes><span class=secno>5.5 </span>Font matching
jdaggett@2509 3470 changes since CSS 2.1</h3>
jdaggett@2509 3471
jdaggett@2509 3472 <p>The algorithm above is different from CSS 2.1 in a number of key places.
jdaggett@2509 3473 These changes were made to better reflect actual font matching behavior
jdaggett@2509 3474 across user agent implementations.
jdaggett@2509 3475
jdaggett@2509 3476 <p>Differences compared to the font matching algorithm in CSS 2.1:
jdaggett@2509 3477
jdaggett@2509 3478 <ul>
jdaggett@2509 3479 <li>The algorithm includes font-stretch matching.
jdaggett@2509 3480
jdaggett@2509 3481 <li>All possible font-style matching scenarios are delineated.
jdaggett@2509 3482
jdaggett@2509 3483 <li>Small-caps fonts are not matched as part of the font matching process,
jdaggett@2509 3484 they are now handled via font features.
jdaggett@2509 3485
jdaggett@2509 3486 <li>Unicode variation selector matching is required.
jdaggett@6701 3487
jdaggett@6701 3488 <li>Cluster sequences are matched as a unit.
jdaggett@2509 3489 </ul>
jdaggett@531 3490
jdaggett@7309 3491 <h3 id=font-matching-examples><span class=secno>5.6 </span>Font matching
jdaggett@6701 3492 examples</h3>
jdaggett@6701 3493
jdaggett@531 3494 <div class=example>
jdaggett@531 3495 <p>It's useful to note that the CSS selector syntax may be used to create
jdaggett@531 3496 language-sensitive typography. For example, some Chinese and Japanese
jdaggett@1149 3497 characters are unified to have the same Unicode code point, although the
jdaggett@890 3498 abstract glyphs are not the same in the two languages.
jdaggett@531 3499
jdaggett@9154 3500 <pre>*:lang(ja) { font: 900 14pt/16pt &quot;Heisei Mincho W9&quot;, serif; }
jdaggett@9207 3501 *:lang(zh-Hant-TW) { font: 800 14pt/16.5pt &quot;Li Sung&quot;, serif; }
jdaggett@512 3502 </pre>
jdaggett@531 3503
jdaggett@8430 3504 <p>This selects any element that has the given language — Japanese or
jdaggett@9207 3505 Traditional Chinese as used in Taiwan — and uses the appropriate font.
jdaggett@9207 3506
jdaggett@512 3507 </div>
jdaggett@1662 3508
jdaggett@6699 3509 <h2 id=font-rend-props><span class=secno>6 </span>Font Feature Properties</h2>
jdaggett@1662 3510
jdaggett@1856 3511 <p>Modern font technologies support a variety of advanced typographic and
jdaggett@1856 3512 language-specific font features. Using these features, a single font can
jdaggett@1856 3513 provide glyphs for a wide range of ligatures, contextual and stylistic
jdaggett@1856 3514 alternates, tabular and old-style figures, small capitals, automatic
jdaggett@1856 3515 fractions, swashes, and alternates specific to a given language. To allow
jdaggett@8313 3516 authors control over these font capabilities, the ‘<code
jdaggett@8313 3517 class=property>font-variant</code>’ property has been expanded for CSS3.
jdaggett@8313 3518 It now functions as a shorthand for a set of properties that provide
jdaggett@8313 3519 control over stylistic font features.
jdaggett@1856 3520
jdaggett@1856 3521 <h3 id=glyph-selection-positioning><span class=secno>6.1 </span>Glyph
jdaggett@1856 3522 selection and positioning</h3>
jdaggett@1856 3523
jdaggett@1856 3524 <p>Simple fonts used for displaying Latin text use a very basic processing
jdaggett@8313 3525 model. Fonts contain a <a href="#character-map"><em>character map</em></a>
jdaggett@8313 3526 which maps each character to a glyph for that character. Glyphs for
jdaggett@8313 3527 subsequent characters are simply placed one after the other along a run of
jdaggett@8313 3528 text. Modern font formats such as OpenType and AAT (Apple Advanced
jdaggett@8313 3529 Typography) use a richer processing model. The glyph for a given character
jdaggett@8313 3530 can be chosen and positioned not just based on the codepoint of the
jdaggett@8313 3531 character itself, but also on adjacent characters as well as the language,
jdaggett@8313 3532 script, and features enabled for the text. Font features may be required
jdaggett@8313 3533 for specific scripts, or recommended as enabled by default or they might
jdaggett@8313 3534 be stylistic features meant to be used under author control.
jdaggett@1856 3535
jdaggett@1856 3536 <p>For a good visual overview of these features, see the <a
jdaggett@1856 3537 href="#OPENTYPE-FONT-GUIDE"
jdaggett@1856 3538 rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
jdaggett@1856 3539 For a detailed description of glyph processing for OpenType fonts, see <a
jdaggett@1856 3540 href="#WINDOWS-GLYPH-PROC"
jdaggett@1856 3541 rel=biblioentry>[WINDOWS-GLYPH-PROC]<!--{{WINDOWS-GLYPH-PROC}}--></a>.
jdaggett@1856 3542
jdaggett@8313 3543 <p>Stylistic font features can be classified into two broad categories:
jdaggett@6177 3544 ones that affect the harmonization of glyph shapes with the surrounding
jdaggett@8313 3545 context, such as kerning and ligature features, and ones such as the
jdaggett@6177 3546 small-caps, subscript/superscript and alternate features that affect shape
jdaggett@6177 3547 selection.
jdaggett@6176 3548
jdaggett@8313 3549 <p>The subproperties of <a href="#propdef-font-variant"
jdaggett@8313 3550 title="font-variant!!property">‘<code
jdaggett@8313 3551 class=property>font-variant</code>’</a> listed below are used to control
jdaggett@8313 3552 these stylistic font features. They do not control features that are
jdaggett@8313 3553 required for displaying certain scripts, such as the OpenType features
jdaggett@8313 3554 used when displaying Arabic or Indic language text. They affect glyph
jdaggett@8313 3555 selection and positioning, but do not affect font selection as described
jdaggett@8313 3556 in the font matching section (except in cases required for compatibility
jdaggett@8313 3557 with CSS 2.1).
jdaggett@1856 3558
jdaggett@1856 3559 <p>To assure consistent behavior across user agents, the equivalent
jdaggett@8313 3560 OpenType property settings are listed for individual properties and are
jdaggett@8313 3561 normative. When using other font formats these should be used as a
jdaggett@8313 3562 guideline to map CSS font feature property values to specific font
jdaggett@8313 3563 features.
jdaggett@1856 3564
jdaggett@1856 3565 <h3 id=language-specific-support><span class=secno>6.2
jdaggett@1856 3566 </span>Language-specific display</h3>
jdaggett@1856 3567
jdaggett@1856 3568 <p>OpenType also supports language-specific glyph selection and
jdaggett@1856 3569 positioning, so that text can be displayed correctly in cases where the
jdaggett@8313 3570 language dictates a specific display behavior. Many languages share a
jdaggett@8313 3571 common script, but the shape of certain letters can vary across those
jdaggett@8313 3572 languages. For example, certain Cyrillic letters have different shapes in
jdaggett@8313 3573 Russian text than in Bulgarian. In Latin text, it's common to render "fi"
jdaggett@8313 3574 with an explicit fi-ligature that lacks a dot on the "i". However, in
jdaggett@8313 3575 languages such as Turkish which uses both a dotted-i and a dotless-i, it's
jdaggett@8313 3576 important to not use this ligature or use a specialized version that
jdaggett@8313 3577 contains a dot over the "i". The example below shows language-specific
jdaggett@8313 3578 variations based on stylistic traditions found in Spanish, Italian and
jdaggett@8313 3579 French orthography:
jdaggett@2515 3580
jdaggett@2515 3581 <div class=featex><img alt="language specific forms, spanish"
jdaggett@2515 3582 src=locl-1.png></div>
jdaggett@2515 3583
jdaggett@2515 3584 <div class=featex><img alt="language specific forms, italian"
jdaggett@2515 3585 src=locl-2.png></div>
jdaggett@2515 3586
jdaggett@2515 3587 <div class=featex><img alt="language specific forms, french"
jdaggett@2515 3588 src=locl-3.png></div>
jdaggett@1856 3589
jdaggett@8313 3590 <p>If the content language of the element is known according to the rules
jdaggett@7355 3591 of the <a
jdaggett@7355 3592 href="http://www.w3.org/TR/CSS21/conform.html#doclanguage">document
jdaggett@7355 3593 language</a>, user agents are required to infer the OpenType language
jdaggett@7355 3594 system from the content language and use that when selecting and
jdaggett@7355 3595 positioning glyphs using an OpenType font.
jdaggett@7355 3596
jdaggett@7355 3597 <p>For OpenType fonts, in some cases it may be necessary to explicitly
jdaggett@7355 3598 declare the OpenType language to be used, for example when displaying text
jdaggett@7355 3599 in a given language that uses the typographic conventions of another
jdaggett@7355 3600 language or when the font does not explicitly support a given language but
jdaggett@7355 3601 supports a language that shares common typographic conventions. The ‘<a
jdaggett@4624 3602 href="#propdef-font-language-override"><code
jdaggett@4624 3603 class=property>font-language-override</code></a>’ property is used for
jdaggett@8225 3604 this purpose.</p>
jdaggett@1662 3605 <!-- prop: font-kerning -->
jdaggett@1662 3606
jdaggett@1856 3607 <h3 id=font-kerning-prop><span class=secno>6.3 </span>Kerning: the <a
jdaggett@1662 3608 href="#propdef-font-kerning">font-kerning</a> property</h3>
jdaggett@1662 3609
jdaggett@4624 3610 <table class=propdef id=namefont-kerningvalueauto-normal-noneini>
jdaggett@1662 3611 <tbody>
jdaggett@1662 3612 <tr>
jdaggett@1662 3613 <td>Name:
jdaggett@1662 3614
jdaggett@1662 3615 <td><dfn id=propdef-font-kerning>font-kerning</dfn>
jdaggett@1662 3616
jdaggett@1662 3617 <tr>
jdaggett@1662 3618 <td>Value:
jdaggett@1662 3619
jdaggett@8278 3620 <td><a href="#font-kerning-auto-value"
jdaggett@8278 3621 title="auto!!font-kerning">auto</a> | <a
jdaggett@8278 3622 href="#font-kerning-normal-value"
jdaggett@8278 3623 title="normal!!font-kerning">normal</a> | <a
jdaggett@8278 3624 href="#font-kerning-none-value" title="none!!font-kerning">none</a>
jdaggett@1662 3625
jdaggett@1662 3626 <tr>
jdaggett@1662 3627 <td>Initial:
jdaggett@1662 3628
jdaggett@1856 3629 <td>auto
jdaggett@1662 3630
jdaggett@1662 3631 <tr>
jdaggett@1662 3632 <td>Applies to:
jdaggett@1662 3633
jdaggett@1662 3634 <td>all elements
jdaggett@1662 3635
jdaggett@1662 3636 <tr>
jdaggett@1662 3637 <td>Inherited:
jdaggett@1662 3638
jdaggett@1662 3639 <td>yes
jdaggett@1662 3640
jdaggett@1662 3641 <tr>
jdaggett@1662 3642 <td>Percentages:
jdaggett@1662 3643
jdaggett@1662 3644 <td>N/A
jdaggett@1662 3645
jdaggett@1662 3646 <tr>
jdaggett@1662 3647 <td>Media:
jdaggett@1662 3648
jdaggett@1662 3649 <td>visual
jdaggett@1662 3650
jdaggett@1662 3651 <tr>
jdaggett@1662 3652 <td>Computed value:
jdaggett@1662 3653
jdaggett@1662 3654 <td>as specified
jdaggett@7377 3655
jdaggett@7377 3656 <tr>
jdaggett@7377 3657 <td>Animatable:
jdaggett@7377 3658
jdaggett@7377 3659 <td>no
jdaggett@1662 3660 </table>
jdaggett@1662 3661
jdaggett@2509 3662 <p>Kerning is the contextual adjustment of inter-glyph spacing. This
jdaggett@2509 3663 property controls metric kerning, kerning that utilizes adjustment data
jdaggett@8276 3664 contained in the font.
jdaggett@8276 3665
jdaggett@8276 3666 <dl>
jdaggett@8278 3667 <dt><dfn id=font-kerning-auto-value title="auto!!font-kerning">auto</dfn>
jdaggett@8276 3668
jdaggett@8276 3669 <dd>Specifies that kerning is applied at the discretion of the user agent
jdaggett@8276 3670
jdaggett@8278 3671 <dt><dfn id=font-kerning-normal-value
jdaggett@8278 3672 title="normal!!font-kerning">normal</dfn>
jdaggett@8276 3673
jdaggett@8276 3674 <dd>Specifies that kerning is applied
jdaggett@8276 3675
jdaggett@8278 3676 <dt><dfn id=font-kerning-none-value title="none!!font-kerning">none</dfn>
jdaggett@8276 3677
jdaggett@8276 3678 <dd>Specifies that kerning is not applied
jdaggett@8276 3679 </dl>
jdaggett@1662 3680
jdaggett@1662 3681 <p>For fonts that do not include kerning data this property will have no
jdaggett@1662 3682 visible effect. When rendering with OpenType fonts, the <a
jdaggett@1662 3683 href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>
jdaggett@2515 3684 specification suggests that kerning be enabled by default. When kerning is
jdaggett@6436 3685 enabled, the OpenType <span class=tag>kern</span> feature is enabled (for
jdaggett@8276 3686 vertical text runs the <span class=tag>vkrn</span> feature is enabled
jdaggett@8276 3687 instead). User agents must also support fonts that only support kerning
jdaggett@8276 3688 via data contained in a <span class=tag>kern</span> font table, as
jdaggett@8276 3689 detailed in the OpenType specification. If the ‘<code
jdaggett@8276 3690 class=property>letter-spacing</code>’ property is defined, kerning
jdaggett@8276 3691 adjustments are considered part of the default spacing and letter spacing
jdaggett@8276 3692 adjustments are made after kerning has been applied.
jdaggett@8276 3693
jdaggett@8276 3694 <p>When set to ‘<code class=property>auto</code>’, user agents can
jdaggett@8276 3695 determine whether to apply kerning or not based on a number of factors:
jdaggett@8276 3696 text size, script, or other factors that influence text processing speed.
jdaggett@8368 3697 Authors who want proper kerning should use <a
jdaggett@8368 3698 href="#font-kerning-normal-value" title="normal!!font-kerning">‘<code
jdaggett@8368 3699 class=property>normal</code>’</a> to explicitly enable kerning.
jdaggett@8279 3700 Likewise, some authors may prefer to disable kerning in situations where
jdaggett@8279 3701 performance is more important than precise appearance. However, in
jdaggett@8279 3702 well-designed modern implementations the use of kerning generally does not
jdaggett@8279 3703 have a large impact on text rendering speed.</p>
jdaggett@6176 3704 <!-- prop: font-variant-ligatures -->
jdaggett@6176 3705
jdaggett@6176 3706 <h3 id=font-variant-ligatures-prop><span class=secno>6.4 </span>Ligatures:
jdaggett@6176 3707 the <a href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
jdaggett@6176 3708 property</h3>
jdaggett@6176 3709
jdaggett@6436 3710 <table class=propdef id=namefont-variant-ligaturesvaluenormal-no>
jdaggett@6176 3711 <tbody>
jdaggett@6176 3712 <tr>
jdaggett@6176 3713 <td>Name:
jdaggett@6176 3714
jdaggett@6176 3715 <td><dfn id=propdef-font-variant-ligatures>font-variant-ligatures</dfn>
jdaggett@6176 3716
jdaggett@6176 3717 <tr>
jdaggett@6176 3718 <td>Value:
jdaggett@6176 3719
jdaggett@8278 3720 <td><a href="#font-variant-ligatures-normal-value"
jdaggett@8278 3721 title="normal!!font-variant-ligatures">normal</a> | <a
jdaggett@8278 3722 href="#font-variant-ligatures-none-value"
jdaggett@8278 3723 title="none!!font-variant-ligatures">none</a> | [ <a
jdaggett@8225 3724 href="#common-lig-values"><var>&lt;common-lig-values&gt;</var></a> ||
jdaggett@8225 3725 <a
jdaggett@8225 3726 href="#discretionary-lig-values"><var>&lt;discretionary-lig-values&gt;</var></a>
jdaggett@8225 3727 || <a
jdaggett@8225 3728 href="#historical-lig-values"><var>&lt;historical-lig-values&gt;</var></a>
jdaggett@8225 3729 || <a
jdaggett@8225 3730 href="#contextual-alt-values"><var>&lt;contextual-alt-values&gt;</var></a>
jdaggett@8225 3731 ]
jdaggett@6176 3732
jdaggett@6176 3733 <tr>
jdaggett@6176 3734 <td>Initial:
jdaggett@6176 3735
jdaggett@6176 3736 <td>normal
jdaggett@6176 3737
jdaggett@6176 3738 <tr>
jdaggett@6176 3739 <td>Applies to:
jdaggett@6176 3740
jdaggett@6176 3741 <td>all elements
jdaggett@6176 3742
jdaggett@6176 3743 <tr>
jdaggett@6176 3744 <td>Inherited:
jdaggett@6176 3745
jdaggett@6176 3746 <td>yes
jdaggett@6176 3747
jdaggett@6176 3748 <tr>
jdaggett@6176 3749 <td>Percentages:
jdaggett@6176 3750
jdaggett@6176 3751 <td>N/A
jdaggett@6176 3752
jdaggett@6176 3753 <tr>
jdaggett@6176 3754 <td>Media:
jdaggett@6176 3755
jdaggett@6176 3756 <td>visual
jdaggett@6176 3757
jdaggett@6176 3758 <tr>
jdaggett@6176 3759 <td>Computed value:
jdaggett@6176 3760
jdaggett@6176 3761 <td>as specified
jdaggett@7377 3762
jdaggett@7377 3763 <tr>
jdaggett@7377 3764 <td>Animatable:
jdaggett@7377 3765
jdaggett@7377 3766 <td>no
jdaggett@6176 3767 </table>
jdaggett@6176 3768
jdaggett@6436 3769 <p>Ligatures and contextual forms are ways of combining glyphs to produce
jdaggett@8276 3770 more harmonized forms.
jdaggett@6176 3771
jdaggett@6176 3772 <pre
jdaggett@8225 3773 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 3774
jdaggett@6176 3775 <pre
jdaggett@8225 3776 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 3777
jdaggett@6176 3778 <pre
jdaggett@8225 3779 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 3780
jdaggett@6176 3781 <pre
jdaggett@8225 3782 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 3783
jdaggett@6176 3784 <p>Individual values have the following meanings:
jdaggett@6176 3785
jdaggett@6176 3786 <dl>
jdaggett@8278 3787 <dt><dfn id=font-variant-ligatures-normal-value
jdaggett@8278 3788 title="normal!!font-variant-ligatures">normal</dfn>
jdaggett@8278 3789
jdaggett@8368 3790 <dd>A value of <a href="#font-variant-ligatures-normal-value"
jdaggett@8368 3791 title="normal!!font-variant-ligatures">‘<code
jdaggett@8368 3792 class=property>normal</code>’</a> specifies that common default
jdaggett@8279 3793 features are enabled, <a href="#font-feature-resolution">as described in
jdaggett@8279 3794 detail in the next section</a>. For OpenType fonts, common ligatures and
jdaggett@8279 3795 contextual forms are on by default, discretionary and historical
jdaggett@8279 3796 ligatures are not.
jdaggett@8278 3797
jdaggett@8278 3798 <dt><dfn id=font-variant-ligatures-none-value
jdaggett@8278 3799 title="none!!font-variant-ligatures">none</dfn>
jdaggett@8276 3800
jdaggett@8276 3801 <dd>Specifies that all types of ligatures and contextual forms covered by
jdaggett@8276 3802 this property are explicitly disabled. In situations where ligatures are
jdaggett@8276 3803 not considered necessary, this may improve the speed of text rendering.
jdaggett@8276 3804
jdaggett@6176 3805 <dt><dfn id=common-ligatures>common-ligatures</dfn>
jdaggett@6176 3806
jdaggett@6436 3807 <dd>Enables display of common ligatures (OpenType features: <span
jdaggett@6436 3808 class=tag>liga, clig</span>). For OpenType fonts, common ligatures are
jdaggett@6436 3809 enabled by default.
jdaggett@6176 3810 </dl>
jdaggett@6176 3811
jdaggett@6176 3812 <div class=featex><img alt="common ligature example" src=liga.png></div>
jdaggett@6176 3813
jdaggett@6176 3814 <dl>
jdaggett@6176 3815 <dt><dfn id=no-common-ligatures>no-common-ligatures</dfn>
jdaggett@6176 3816
jdaggett@6436 3817 <dd>Disables display of common ligatures (OpenType features: <span
jdaggett@6436 3818 class=tag>liga, clig</span>).
jdaggett@6176 3819
jdaggett@6176 3820 <dt><dfn id=discretionary-ligatures>discretionary-ligatures</dfn>
jdaggett@6176 3821
jdaggett@6436 3822 <dd>Enables display of discretionary ligatures (OpenType feature: <span
jdaggett@8277 3823 class=tag>dlig</span>). Which ligatures are discretionary or optional is
jdaggett@8277 3824 decided by the type designer, so authors will need to refer to the
jdaggett@6176 3825 documentation of a given font to understand which ligatures are
jdaggett@6176 3826 considered discretionary.
jdaggett@6176 3827 </dl>
jdaggett@6176 3828
jdaggett@6176 3829 <div class=featex><img alt="discretionary ligature example" src=dlig.png></div>
jdaggett@6176 3830
jdaggett@6176 3831 <dl>
jdaggett@6176 3832 <dt><dfn id=no-discretionary-ligatures>no-discretionary-ligatures</dfn>
jdaggett@6176 3833
jdaggett@6436 3834 <dd>Disables display of discretionary ligatures (OpenType feature: <span
jdaggett@6436 3835 class=tag>dlig</span>).
jdaggett@6176 3836
jdaggett@6176 3837 <dt><dfn id=historical-ligatures>historical-ligatures</dfn>
jdaggett@6176 3838
jdaggett@6436 3839 <dd>Enables display of historical ligatures (OpenType feature: <span
jdaggett@6436 3840 class=tag>hlig</span>).
jdaggett@6176 3841 </dl>
jdaggett@6176 3842
jdaggett@6176 3843 <div class=featex><img alt="historical ligature example" src=hlig.png></div>
jdaggett@6176 3844
jdaggett@6176 3845 <dl>
jdaggett@6176 3846 <dt><dfn id=no-historical-ligatures>no-historical-ligatures</dfn>
jdaggett@6176 3847
jdaggett@6436 3848 <dd>Disables display of historical ligatures (OpenType feature: <span
jdaggett@6436 3849 class=tag>hlig</span>).
jdaggett@6176 3850
jdaggett@6176 3851 <dt><dfn id=contextual>contextual</dfn>
jdaggett@6176 3852
jdaggett@6436 3853 <dd>Enables display of contextual alternates (OpenType feature: <span
jdaggett@6436 3854 class=tag>calt</span>). Although not strictly a ligature feature, like
jdaggett@6176 3855 ligatures this feature is commonly used to harmonize the shapes of glyphs
jdaggett@6436 3856 with the surrounding context. For OpenType fonts, this feature is on by
jdaggett@6436 3857 default.
jdaggett@6176 3858 </dl>
jdaggett@6176 3859
jdaggett@6176 3860 <div class=featex><img alt="contextual alternate example" src=calt.png></div>
jdaggett@6176 3861
jdaggett@6176 3862 <dl>
jdaggett@6176 3863 <dt><dfn id=no-contextual>no-contextual</dfn>
jdaggett@6176 3864
jdaggett@6436 3865 <dd>Disables display of contextual alternates (OpenType feature: <span
jdaggett@6436 3866 class=tag>calt</span>).
jdaggett@6176 3867 </dl>
jdaggett@6176 3868
jdaggett@6176 3869 <p>Required ligatures, needed for correctly rendering complex scripts, are
jdaggett@8278 3870 not affected by the settings above, including ‘<code
jdaggett@8278 3871 class=property>none</code>’ (OpenType feature: <span
jdaggett@6436 3872 class=tag>rlig</span>).</p>
jdaggett@3460 3873 <!-- prop: font-variant-position -->
jdaggett@3460 3874
jdaggett@6176 3875 <h3 id=font-variant-position-prop><span class=secno>6.5 </span>Subscript
jdaggett@3638 3876 and superscript forms: the <a
jdaggett@3460 3877 href="#propdef-font-variant-position">font-variant-position</a> property</h3>
jdaggett@3460 3878
jdaggett@4624 3879 <table class=propdef id=namefont-variant-positionvaluenormal-sub>
jdaggett@1662 3880 <tbody>
jdaggett@1662 3881 <tr>
jdaggett@1662 3882 <td>Name:
jdaggett@1662 3883
jdaggett@3460 3884 <td><dfn id=propdef-font-variant-position>font-variant-position</dfn>
jdaggett@1662 3885
jdaggett@1662 3886 <tr>
jdaggett@1662 3887 <td>Value:
jdaggett@1662 3888
jdaggett@8368 3889 <td><a href="#font-variant-position-normal-value"
jdaggett@8368 3890 title="normal!!font-variant-position">normal</a> | <a
jdaggett@8279 3891 href="#sub">sub</a> | <a href="#super">super</a>
jdaggett@1732 3892
jdaggett@1732 3893 <tr>
jdaggett@1732 3894 <td>Initial:
jdaggett@1732 3895
jdaggett@1732 3896 <td>normal
jdaggett@1732 3897
jdaggett@1732 3898 <tr>
jdaggett@1732 3899 <td>Applies to:
jdaggett@1732 3900
jdaggett@1732 3901 <td>all elements
jdaggett@1732 3902
jdaggett@1732 3903 <tr>
jdaggett@1732 3904 <td>Inherited:
jdaggett@1732 3905
jdaggett@1732 3906 <td>yes
jdaggett@1732 3907
jdaggett@1732 3908 <tr>
jdaggett@1732 3909 <td>Percentages:
jdaggett@1732 3910
jdaggett@1732 3911 <td>N/A
jdaggett@1732 3912
jdaggett@1732 3913 <tr>
jdaggett@1732 3914 <td>Media:
jdaggett@1732 3915
jdaggett@1732 3916 <td>visual
jdaggett@1732 3917
jdaggett@1732 3918 <tr>
jdaggett@1732 3919 <td>Computed value:
jdaggett@1732 3920
jdaggett@1732 3921 <td>as specified
jdaggett@7377 3922
jdaggett@7377 3923 <tr>
jdaggett@7377 3924 <td>Animatable:
jdaggett@7377 3925
jdaggett@7377 3926 <td>no
jdaggett@1732 3927 </table>
jdaggett@1732 3928
jdaggett@5890 3929 <p>This property is used to enable typographic subscript and superscript
jdaggett@5890 3930 glyphs. These are alternate glyphs designed within the same em-box as
jdaggett@5890 3931 default glyphs and are intended to be laid out on the same baseline as the
jdaggett@5890 3932 default glyphs, with no resizing or repositioning of the baseline. They
jdaggett@5890 3933 are explicitly designed to match the surrounding text and to be more
jdaggett@5890 3934 readable without affecting the line height.
jdaggett@3511 3935
jdaggett@3511 3936 <div class=figure><img alt="comparison between real subscript glyphs and
jdaggett@3511 3937 synthesized ones" src=realsubscripts.png>
jdaggett@3511 3938 <p class=caption>Subscript glyphs (top) vs. typical synthesized subscripts
jdaggett@3511 3939 (bottom)
jdaggett@3511 3940 </div>
jdaggett@3460 3941
jdaggett@8279 3942 <p>Individual values have the following meanings:
jdaggett@8279 3943
jdaggett@8279 3944 <dl>
jdaggett@8368 3945 <dt><dfn id=font-variant-position-normal-value
jdaggett@8368 3946 title="normal!!font-variant-position">normal</dfn>
jdaggett@8279 3947
jdaggett@8279 3948 <dd>None of the features listed below are enabled.
jdaggett@8279 3949
jdaggett@8279 3950 <dt><dfn id=sub>sub</dfn>
jdaggett@8279 3951
jdaggett@8279 3952 <dd>Enables display of subscript variants (OpenType feature: <span
jdaggett@8279 3953 class=tag>subs</span>).
jdaggett@8279 3954
jdaggett@8279 3955 <dt><dfn id=super>super</dfn>
jdaggett@8279 3956
jdaggett@8279 3957 <dd>Enables display of superscript variants (OpenType feature: <span
jdaggett@8279 3958 class=tag>sups</span>).
jdaggett@8279 3959 </dl>
jdaggett@5890 3960
jdaggett@5890 3961 <p>Because of the semantic nature of subscripts and superscripts, when the
jdaggett@8279 3962 value is either ‘<a href="#sub"><code class=property>sub</code></a>’
jdaggett@8279 3963 or ‘<a href="#super"><code class=property>super</code></a>’ for a
jdaggett@8279 3964 given contiguous run of text, if a variant glyph is not available for all
jdaggett@8279 3965 the characters in the run, simulated glyphs must be synthesized for all
jdaggett@8279 3966 characters using reduced forms of the glyphs that would be used without
jdaggett@8280 3967 this feature applied. This is done per run to avoid a mixture of variant
jdaggett@8280 3968 glyphs and synthesized ones that would not align correctly. In the case of
jdaggett@8280 3969 OpenType fonts that lack subscript or superscript glyphs for a given
jdaggett@8280 3970 character, user agents must use the appropriate subscript and superscript
jdaggett@8280 3971 metrics specified in the selected font's <a
jdaggett@3460 3972 href="http://www.microsoft.com/typography/otspec/os2.htm#subxs">OS/2
jdaggett@3460 3973 table</a> <a href="#OPENTYPE"
jdaggett@5891 3974 rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> to calculate the size
jdaggett@5891 3975 and offset of the synthesized substitutes.
jdaggett@2461 3976
jdaggett@8280 3977 <div class=figure><img alt="alternate superscripts vs. glyphs synthesized
jdaggett@8280 3978 using superscript metrics" src=superscript-alt-synth.png>
jdaggett@8280 3979 <p class=caption>Superscript alternate glyph (left), synthesized
jdaggett@8280 3980 superscript glyphs (middle), and incorrect mixture of the two (right)
jdaggett@8280 3981 </div>
jdaggett@8280 3982
jdaggett@8385 3983 <p>In situations where text decorations are only applied to runs of text
jdaggett@8385 3984 containing superscript or subscript glyphs, the synthesized glyphs must be
jdaggett@8385 3985 used to avoid problems with the placement of decorations.
jdaggett@8385 3986
jdaggett@2461 3987 <p>In the past, user agents have used font-size and vertical-align to
jdaggett@8368 3988 simulate subscripts and superscripts for the <code title="HTML sub
jdaggett@8368 3989 element">sub</code> and <code title="HTML sup element">sup</code>
jdaggett@8368 3990 elements. To allow a backwards compatible way of defining subscripts and
jdaggett@8368 3991 superscripts, it is recommended that authors use conditional rules <a
jdaggett@8368 3992 href="#CSS3-CONDITIONAL"
jdaggett@3460 3993 rel=biblioentry>[CSS3-CONDITIONAL]<!--{{CSS3-CONDITIONAL}}--></a> so that
jdaggett@5890 3994 older user agents will still render subscripts and superscripts via the
jdaggett@5890 3995 older mechanism.
jdaggett@5890 3996
jdaggett@5890 3997 <p>Authors should note that fonts typically only provide subscript and
jdaggett@5890 3998 superscript glyphs for a subset of all characters supported by the font.
jdaggett@8280 3999 For example, while subscript and superscript glyphs are often available
jdaggett@8280 4000 for Latin numbers, glyphs for punctuation and letter characters are less
jdaggett@8280 4001 frequently provided. The synthetic fallback rules defined for this
jdaggett@8280 4002 property assure that subscripts and superscripts will always appear but
jdaggett@8280 4003 the appearance may not match author expectations if the font used does not
jdaggett@8280 4004 provide the appropriate alternate glyph for all characters contained in a
jdaggett@8280 4005 subscript or superscript.
jdaggett@8280 4006
jdaggett@8280 4007 <p>This property is not cumulative. Applying it to elements within a
jdaggett@5890 4008 subscript or superscript won't nest the placement of a subscript or
jdaggett@5890 4009 superscript glyph. Images contained within text runs where the value of
jdaggett@8279 4010 this property is ‘<a href="#sub"><code class=property>sub</code></a>’
jdaggett@8279 4011 or ‘<a href="#super"><code class=property>super</code></a>’ will be
jdaggett@8368 4012 drawn just as they would if the value was <a
jdaggett@8368 4013 href="#font-variant-position-normal-value"
jdaggett@8368 4014 title="normal!!font-variant-position">‘<code
jdaggett@8368 4015 class=property>normal</code>’</a>.</p>
jdaggett@8364 4016 <!-- due to lack of consensus, couldn't resolve on exact positioning of text decorations:
jdaggett@8364 4017 http://www.w3.org/2013/06/06-css-minutes.html#item03 -->
jdaggett@8280 4018
jdaggett@8280 4019 <p>Because of these limitations, ‘<a
jdaggett@8280 4020 href="#propdef-font-variant-position"><code
jdaggett@8280 4021 class=property>font-variant-position</code></a>’ is not recommended for
jdaggett@8280 4022 use in user agent stylesheets. Authors should use it in cases where
jdaggett@5890 4023 subscripts or superscripts will only contain the narrow range of
jdaggett@5890 4024 characters supported by the fonts specified.
jdaggett@2509 4025
jdaggett@8368 4026 <p class=note>The variant glyphs use the same baseline as the default
jdaggett@8368 4027 glyphs would use. There is no shift in the placement along the baseline,
jdaggett@8368 4028 so the use of variant glyphs doesn't affect the height of the inline box
jdaggett@8368 4029 or alter the height of the linebox. This makes superscript and subscript
jdaggett@8368 4030 variants ideal for situations where it's important that leading remain
jdaggett@8368 4031 constant, such as in multi-column layout.
jdaggett@8368 4032
jdaggett@2461 4033 <div class=example>
jdaggett@8279 4034 <p>A typical user agent default style for the <a class=tag
jdaggett@8279 4035 href="#sub">sub</a> element:</p>
jdaggett@2461 4036
jdaggett@2461 4037 <pre>sub {
jdaggett@2461 4038 vertical-align: sub;
jdaggett@2461 4039 font-size: smaller;
jdaggett@2461 4040 line-height: normal;
jdaggett@2461 4041 }
jdaggett@2461 4042 </pre>
jdaggett@2461 4043
jdaggett@3460 4044 <p>Using font-variant-position to specify typographic subscripts in a way
jdaggett@3460 4045 that will still show subscripts in older user agents:</p>
jdaggett@3460 4046
jdaggett@3460 4047 <pre>@supports ( font-variant-position: sub ) {
jdaggett@3460 4048
jdaggett@3460 4049 sub {
jdaggett@8280 4050 vertical-align: baseline;
jdaggett@3460 4051 font-size: 100%;
jdaggett@3460 4052 line-height: inherit;
jdaggett@3460 4053 font-variant-position: sub;
jdaggett@3460 4054 }
jdaggett@3460 4055
jdaggett@2461 4056 }
jdaggett@2461 4057 </pre>
jdaggett@2461 4058
jdaggett@4624 4059 <p>User agents that support the ‘<a
jdaggett@4624 4060 href="#propdef-font-variant-position"><code
jdaggett@4624 4061 class=property>font-variant-position</code></a>’ property will select a
jdaggett@4624 4062 subscript variant glyph and render this without adjusting the baseline or
jdaggett@4624 4063 font-size. Older user agents will ignore the ‘<a
jdaggett@4624 4064 href="#propdef-font-variant-position"><code
jdaggett@4624 4065 class=property>font-variant-position</code></a>’ property definition
jdaggett@4624 4066 and use the standard defaults for subscripts.</p>
jdaggett@2461 4067 </div>
jdaggett@2118 4068 <!-- prop: font-variant-caps -->
jdaggett@2118 4069
jdaggett@2118 4070 <h3 id=font-variant-caps-prop><span class=secno>6.6 </span>Capitalization:
jdaggett@1662 4071 the <a href="#propdef-font-variant-caps">font-variant-caps</a> property</h3>
jdaggett@1662 4072
jdaggett@5809 4073 <table class=propdef id=namefont-variant-capsvaluenormal-small-c>
jdaggett@1662 4074 <tbody>
jdaggett@1662 4075 <tr>
jdaggett@1662 4076 <td>Name:
jdaggett@1662 4077
jdaggett@1662 4078 <td><dfn id=propdef-font-variant-caps>font-variant-caps</dfn>
jdaggett@1662 4079
jdaggett@1662 4080 <tr>
jdaggett@1662 4081 <td>Value:
jdaggett@1662 4082
jdaggett@8278 4083 <td><a href="#font-variant-caps-normal-value"
jdaggett@8278 4084 title="normal!!font-variant-caps">normal</a> | <a
jdaggett@8278 4085 href="#small-caps">small-caps</a> | <a
jdaggett@8278 4086 href="#all-small-caps">all-small-caps</a> | <a
jdaggett@8278 4087 href="#petite-caps">petite-caps</a> | <a
jdaggett@8278 4088 href="#all-petite-caps">all-petite-caps</a> | <a
jdaggett@8278 4089 href="#unicase">unicase</a> | <a href="#titling-caps">titling-caps</a>
jdaggett@1662 4090
jdaggett@1662 4091 <tr>
jdaggett@1662 4092 <td>Initial:
jdaggett@1662 4093
jdaggett@1662 4094 <td>normal
jdaggett@1662 4095
jdaggett@1662 4096 <tr>
jdaggett@1662 4097 <td>Applies to:
jdaggett@1662 4098
jdaggett@1662 4099 <td>all elements
jdaggett@1662 4100
jdaggett@1662 4101 <tr>
jdaggett@1662 4102 <td>Inherited:
jdaggett@1662 4103
jdaggett@1662 4104 <td>yes
jdaggett@1662 4105
jdaggett@1662 4106 <tr>
jdaggett@1662 4107 <td>Percentages:
jdaggett@1662 4108
jdaggett@1662 4109 <td>N/A
jdaggett@1662 4110
jdaggett@1662 4111 <tr>
jdaggett@1662 4112 <td>Media:
jdaggett@1662 4113
jdaggett@1662 4114 <td>visual
jdaggett@1662 4115
jdaggett@1662 4116 <tr>
jdaggett@1662 4117 <td>Computed value:
jdaggett@1662 4118
jdaggett@1662 4119 <td>as specified
jdaggett@7377 4120
jdaggett@7377 4121 <tr>
jdaggett@7377 4122 <td>Animatable:
jdaggett@7377 4123
jdaggett@7377 4124 <td>no
jdaggett@1662 4125 </table>
jdaggett@1662 4126
jdaggett@8280 4127 <p>This property allows the selection of alternate glyphs used for small or
jdaggett@8280 4128 petite capitals or for titling. These glyphs are specifically designed to
jdaggett@8280 4129 blend well with the surrounding normal glyphs, to maintain the weight and
jdaggett@8280 4130 readability which suffers when text is simply resized to fit this purpose.
jdaggett@1662 4131
jdaggett@1732 4132 <p>Individual values have the following meanings:
jdaggett@1662 4133
jdaggett@1662 4134 <dl>
jdaggett@8278 4135 <dt><dfn id=font-variant-caps-normal-value
jdaggett@8278 4136 title="normal!!font-variant-caps">normal</dfn>
jdaggett@5809 4137
jdaggett@5809 4138 <dd>None of the features listed below are enabled.
jdaggett@5809 4139
jdaggett@1662 4140 <dt><dfn id=small-caps>small-caps</dfn>
jdaggett@1662 4141
jdaggett@6436 4142 <dd>Enables display of small capitals (OpenType feature: <span
jdaggett@6436 4143 class=tag>smcp</span>). Small-caps glyphs typically use the form of
jdaggett@6436 4144 uppercase letters but are reduced to the size of lowercase letters.
jdaggett@1662 4145 </dl>
jdaggett@1662 4146
jdaggett@1662 4147 <div class=featex><img alt="small-caps example" src=smcp.png></div>
jdaggett@1662 4148
jdaggett@1662 4149 <dl>
jdaggett@1732 4150 <dt><dfn id=all-small-caps>all-small-caps</dfn>
jdaggett@1732 4151
jdaggett@1732 4152 <dd>Enables display of small capitals for both upper and lowercase letters
jdaggett@6436 4153 (OpenType features: <span class=tag>c2sc, smcp</span>).
jdaggett@1732 4154
jdaggett@1662 4155 <dt><dfn id=petite-caps>petite-caps</dfn>
jdaggett@1662 4156
jdaggett@6436 4157 <dd>Enables display of petite capitals (OpenType feature: <span
jdaggett@6436 4158 class=tag>pcap</span>).
jdaggett@1662 4159
jdaggett@1732 4160 <dt><dfn id=all-petite-caps>all-petite-caps</dfn>
jdaggett@1732 4161
jdaggett@1732 4162 <dd>Enables display of petite capitals for both upper and lowercase
jdaggett@6436 4163 letters (OpenType features: <span class=tag>c2pc, pcap</span>).
jdaggett@1732 4164
jdaggett@6648 4165 <dt><dfn id=unicase>unicase</dfn>
jdaggett@6648 4166
jdaggett@6648 4167 <dd>Enables display of mixture of small capitals for uppercase letters
jdaggett@6648 4168 with normal lowercase letters (OpenType feature: <span
jdaggett@6648 4169 class=tag>unic</span>).
jdaggett@6648 4170
jdaggett@1662 4171 <dt><dfn id=titling-caps>titling-caps</dfn>
jdaggett@1662 4172
jdaggett@6436 4173 <dd>Enables display of titling capitals (OpenType feature: <span
jdaggett@6436 4174 class=tag>titl</span>). Uppercase letter glyphs are often designed for
jdaggett@6436 4175 use with lowercase letters. When used in all uppercase titling sequences
jdaggett@6436 4176 they can appear too strong. Titling capitals are designed specifically
jdaggett@6436 4177 for this situation.
jdaggett@1662 4178 </dl>
jdaggett@1662 4179
jdaggett@6648 4180 <p>The availability of these glyphs is based on whether a given feature is
jdaggett@6648 4181 defined or not in the feature list of the font. User agents can optionally
jdaggett@6648 4182 decide this on a per-script basis but should explicitly not decide this on
jdaggett@6648 4183 a per-character basis.
jdaggett@6648 4184
jdaggett@6648 4185 <p>Some fonts may only support a subset or none of the features described
jdaggett@6648 4186 for this property. For backwards compatibility with CSS 2.1, if ‘<a
jdaggett@4624 4187 href="#small-caps"><code class=property>small-caps</code></a>’ or ‘<a
jdaggett@4624 4188 href="#all-small-caps"><code class=property>all-small-caps</code></a>’
jdaggett@4624 4189 is specified but small-caps glyphs are not available for a given font,
jdaggett@4624 4190 user agents should simulate a small-caps font, for example by taking a
jdaggett@6648 4191 normal font and replacing the glyphs for lowercase letters with scaled
jdaggett@6648 4192 versions of the glyphs for uppercase characters (replacing the glyphs for
jdaggett@6648 4193 both upper and lowercase letters in the case of ‘<a
jdaggett@4624 4194 href="#all-small-caps"><code class=property>all-small-caps</code></a>’).
jdaggett@6648 4195
jdaggett@6648 4196 <div class=figure style="padding: 0; margin: auto;"><img alt="synthetic vs.
jdaggett@6648 4197 real small-caps" class=hires src=synthetic-vs-real-small-caps.png
bert@8683 4198 width=512>
jdaggett@6648 4199 <p class=caption>Synthetic vs. real small-caps
jdaggett@6648 4200 </div>
jdaggett@6648 4201
jdaggett@6648 4202 <p>To match the surrounding text, a font may provide alternate glyphs for
jdaggett@6648 4203 caseless characters when these features are enabled but when a user agent
jdaggett@6648 4204 simulates small capitals, it must not attempt to simulate alternates for
jdaggett@6648 4205 codepoints which are considered caseless.
jdaggett@6648 4206
jdaggett@6648 4207 <div class=figure style="padding: 0; margin: auto;"><img alt="caseless
jdaggett@6648 4208 characters with small-caps, all-small-caps enabled" class=hires
bert@8683 4209 src=small-capitals-variations.png width=418>
jdaggett@6648 4210 <p class=caption>Caseless characters with small-caps, all-small-caps
jdaggett@6648 4211 enabled
jdaggett@6648 4212 </div>
jdaggett@6648 4213
jdaggett@6648 4214 <p>If either ‘<a href="#petite-caps"><code
jdaggett@4624 4215 class=property>petite-caps</code></a>’ or ‘<a
jdaggett@4624 4216 href="#all-petite-caps"><code class=property>all-petite-caps</code></a>’
jdaggett@4624 4217 is specified for a font that doesn't support these features, the property
jdaggett@4624 4218 behaves as if ‘<a href="#small-caps"><code
jdaggett@4624 4219 class=property>small-caps</code></a>’ or ‘<a
jdaggett@4624 4220 href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
jdaggett@6648 4221 respectively, had been specified. If ‘<a href="#unicase"><code
jdaggett@6648 4222 class=property>unicase</code></a>’ is specified for a font that doesn't
jdaggett@6648 4223 support that feature, the property behaves as if ‘<a
jdaggett@6648 4224 href="#small-caps"><code class=property>small-caps</code></a>’ was
jdaggett@6648 4225 applied only to lowercased uppercase letters. If ‘<a
jdaggett@6648 4226 href="#titling-caps"><code class=property>titling-caps</code></a>’ is
jdaggett@6648 4227 specified with a font that does not support this feature, this property
jdaggett@6648 4228 has no visible effect. When simulated small capital glyphs are used, for
jdaggett@4624 4229 scripts that lack uppercase and lowercase letters, ‘<a
jdaggett@4624 4230 href="#small-caps"><code class=property>small-caps</code></a>’, ‘<a
jdaggett@4624 4231 href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
jdaggett@4624 4232 ‘<a href="#petite-caps"><code class=property>petite-caps</code></a>’,
jdaggett@4624 4233 ‘<a href="#all-petite-caps"><code
jdaggett@4624 4234 class=property>all-petite-caps</code></a>’ and ‘<a
jdaggett@4624 4235 href="#unicase"><code class=property>unicase</code></a>’ have no visible
jdaggett@2462 4236 effect.
jdaggett@1662 4237
jdaggett@6648 4238 <p>When casing transforms are used to simulate small capitals, the casing
jdaggett@8280 4239 transformations must match those used for the <span
jdaggett@6648 4240 class=property>‘<code class=property>text-transform</code>’</span>
jdaggett@6648 4241 property.
jdaggett@6648 4242
jdaggett@6648 4243 <p>As a last resort, unscaled uppercase letter glyphs in a normal font may
jdaggett@6648 4244 replace glyphs in a small-caps font so that the text appears in all
jdaggett@6648 4245 uppercase letters.
jdaggett@6648 4246
jdaggett@6648 4247 <div class=figure style="padding: 0; margin: auto;"><img alt="using
jdaggett@6648 4248 all-small-caps in acronym-laden text" class=hires
bert@8683 4249 src=acronym-laden-text.png width=596>
jdaggett@6648 4250 <p class=caption>Using small capitals to improve readability in
jdaggett@6648 4251 acronym-laden text
jdaggett@6648 4252 </div>
jdaggett@6648 4253
jdaggett@1662 4254 <div class=example>
jdaggett@1662 4255 <p>Quotes rendered italicised, with small-caps on the first line:</p>
jdaggett@1662 4256
jdaggett@1662 4257 <pre>blockquote { font-style: italic; }
jdaggett@1662 4258 blockquote:first-line { font-variant: small-caps; }
jdaggett@1662 4259
jdaggett@8397 4260 &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 4261 </pre>
jdaggett@1662 4262 </div>
jdaggett@2118 4263 <!-- prop: font-variant-numeric -->
jdaggett@2118 4264
jdaggett@2118 4265 <h3 id=font-variant-numeric-prop><span class=secno>6.7 </span>Numerical
jdaggett@1662 4266 formatting: the <a
jdaggett@1662 4267 href="#propdef-font-variant-numeric">font-variant-numeric</a> property</h3>
jdaggett@1662 4268
jdaggett@5809 4269 <table class=propdef id=namefont-variant-numericvaluenormal-ltnu>
jdaggett@1662 4270 <tbody>
jdaggett@1662 4271 <tr>
jdaggett@1662 4272 <td>Name:
jdaggett@1662 4273
jdaggett@1662 4274 <td><dfn id=propdef-font-variant-numeric>font-variant-numeric</dfn>
jdaggett@1662 4275
jdaggett@1662 4276 <tr>
jdaggett@1662 4277 <td>Value:
jdaggett@1662 4278
jdaggett@8278 4279 <td><a href="#font-variant-numeric-normal-value"
jdaggett@8278 4280 title="normal!!font-variant-numeric">normal</a> | [ <a
jdaggett@8225 4281 href="#numeric-figure-values"><var>&lt;numeric-figure-values&gt;</var></a>
jdaggett@8225 4282 || <a
jdaggett@8225 4283 href="#numeric-spacing-values"><var>&lt;numeric-spacing-values&gt;</var></a>
jdaggett@8225 4284 || <a
jdaggett@8225 4285 href="#numeric-fraction-values"><var>&lt;numeric-fraction-values&gt;</var></a>
jdaggett@8225 4286 || <a href="#ordinal">ordinal</a> || <a
jdaggett@8225 4287 href="#slashed-zero">slashed-zero</a> ]
jdaggett@1662 4288
jdaggett@1662 4289 <tr>
jdaggett@1662 4290 <td>Initial:
jdaggett@1662 4291
jdaggett@1662 4292 <td>normal
jdaggett@1662 4293
jdaggett@1662 4294 <tr>
jdaggett@1662 4295 <td>Applies to:
jdaggett@1662 4296
jdaggett@1662 4297 <td>all elements
jdaggett@1662 4298
jdaggett@1662 4299 <tr>
jdaggett@1662 4300 <td>Inherited:
jdaggett@1662 4301
jdaggett@1662 4302 <td>yes
jdaggett@1662 4303
jdaggett@1662 4304 <tr>
jdaggett@1662 4305 <td>Percentages:
jdaggett@1662 4306
jdaggett@1662 4307 <td>N/A
jdaggett@1662 4308
jdaggett@1662 4309 <tr>
jdaggett@1662 4310 <td>Media:
jdaggett@1662 4311
jdaggett@1662 4312 <td>visual
jdaggett@1662 4313
jdaggett@1662 4314 <tr>
jdaggett@1662 4315 <td>Computed value:
jdaggett@1662 4316
jdaggett@1662 4317 <td>as specified
jdaggett@7377 4318
jdaggett@7377 4319 <tr>
jdaggett@7377 4320 <td>Animatable:
jdaggett@7377 4321
jdaggett@7377 4322 <td>no
jdaggett@1662 4323 </table>
jdaggett@1662 4324
jdaggett@8311 4325 <p>Specifies control over numerical forms. The example below shows how some
jdaggett@8311 4326 of these values can be combined to influence the rendering of tabular data
jdaggett@8311 4327 with fonts that support these features. Within normal paragraph text,
jdaggett@8311 4328 proportional numbers are used while tabular numbers are used so that
jdaggett@8311 4329 columns of numbers line up properly:
jdaggett@1662 4330
jdaggett@1662 4331 <div class=figure style="padding: 0; margin: auto;"><img alt="combining
jdaggett@1662 4332 number styles" src=numberstyles.png>
jdaggett@1662 4333 <p class=caption>Using number styles
jdaggett@1662 4334 </div>
jdaggett@1662 4335
jdaggett@8311 4336 <p>Possible combinations:
jdaggett@8311 4337
jdaggett@8311 4338 <pre
jdaggett@8311 4339 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 4340
jdaggett@8311 4341 <pre
jdaggett@8311 4342 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 4343
jdaggett@8311 4344 <pre
jdaggett@8311 4345 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 4346
jdaggett@8311 4347 <p>Individual values have the following meanings:
jdaggett@8311 4348
jdaggett@1662 4349 <dl>
jdaggett@8311 4350 <dt><dfn id=font-variant-numeric-normal-value
jdaggett@8311 4351 title="normal!!font-variant-numeric">normal</dfn>
jdaggett@8311 4352
jdaggett@8311 4353 <dd>None of the features listed below are enabled.
jdaggett@8311 4354
jdaggett@8311 4355 <dt><dfn id=lining-nums>lining-nums</dfn>
jdaggett@8311 4356
jdaggett@8311 4357 <dd>Enables display of lining numerals (OpenType feature: <span
jdaggett@8311 4358 class=tag>lnum</span>).
jdaggett@8311 4359
jdaggett@8311 4360 <dt><dfn id=oldstyle-nums>oldstyle-nums</dfn>
jdaggett@8311 4361
jdaggett@8311 4362 <dd>Enables display of old-style numerals (OpenType feature: <span
jdaggett@8311 4363 class=tag>onum</span>).
jdaggett@8311 4364
jdaggett@8311 4365 <dt><dfn id=proportional-nums>proportional-nums</dfn>
jdaggett@8311 4366
jdaggett@8311 4367 <dd>Enables display of proportional numerals (OpenType feature: <span
jdaggett@8311 4368 class=tag>pnum</span>).
jdaggett@8311 4369
jdaggett@8311 4370 <dt><dfn id=tabular-nums>tabular-nums</dfn>
jdaggett@8311 4371
jdaggett@8311 4372 <dd>Enables display of tabular numerals (OpenType feature: <span
jdaggett@8311 4373 class=tag>tnum</span>).
jdaggett@8311 4374
jdaggett@1662 4375 <dt><dfn id=diagonal-fractions>diagonal-fractions</dfn>
jdaggett@1662 4376
jdaggett@6436 4377 <dd>Enables display of lining diagonal fractions (OpenType feature: <span
jdaggett@6436 4378 class=tag>frac</span>).
jdaggett@1662 4379 </dl>
jdaggett@1662 4380
jdaggett@1662 4381 <div class=featex><img alt="diagonal fraction example" src=frac.png></div>
jdaggett@1662 4382
jdaggett@1662 4383 <dl>
jdaggett@1662 4384 <dt><dfn id=stacked-fractions>stacked-fractions</dfn>
jdaggett@1662 4385
jdaggett@6436 4386 <dd>Enables display of lining stacked fractions (OpenType feature: <span
jdaggett@6436 4387 class=tag>afrc</span>).
jdaggett@1662 4388 </dl>
jdaggett@1662 4389
jdaggett@1662 4390 <div class=featex><img alt="stacked fraction example" src=afrc.png></div>
jdaggett@1662 4391
jdaggett@1662 4392 <dl>
jdaggett@3638 4393 <dt><dfn id=ordinal>ordinal</dfn>
jdaggett@3638 4394
jdaggett@9001 4395 <dd>Enables display of letter forms used with ordinal numbers (OpenType
jdaggett@9001 4396 feature: <span class=tag>ordn</span>).
jdaggett@8983 4397 </dl>
jdaggett@8983 4398
jdaggett@8983 4399 <div class=featex><img alt="ordinals example" src=ordinals.png></div>
jdaggett@8983 4400
jdaggett@8983 4401 <dl>
jdaggett@1662 4402 <dt><dfn id=slashed-zero>slashed-zero</dfn>
jdaggett@1662 4403
jdaggett@6436 4404 <dd>Enables display of slashed zeros (OpenType feature: <span
jdaggett@6436 4405 class=tag>zero</span>).
jdaggett@1662 4406 </dl>
jdaggett@1662 4407
jdaggett@1662 4408 <div class=featex><img alt="slashed zero example" src=zero.png></div>
jdaggett@1662 4409
jdaggett@8986 4410 <div class=example id=ordinal-example>
jdaggett@8984 4411 <p>In the case of ‘<a href="#ordinal"><code
jdaggett@8984 4412 class=property>ordinal</code></a>’, although ordinal forms are often
jdaggett@8984 4413 the same as superscript forms, they are marked up differently.</p>
jdaggett@8984 4414
jdaggett@8984 4415 <p>For superscripts, the variant property is only applied to the
jdaggett@8984 4416 sub-element containing the superscript:</p>
jdaggett@8984 4417
jdaggett@8984 4418 <pre>
jdaggett@8984 4419 sup { font-variant-position: super; }
jdaggett@8984 4420 x&lt;sup&gt;2&lt;/sup&gt;
jdaggett@8984 4421 </pre>
jdaggett@8984 4422
jdaggett@8984 4423 <p>For ordinals, the variant property is applied to the entire ordinal
jdaggett@9023 4424 number rather than just to the suffix (or to the containing paragraph):</p>
jdaggett@8984 4425
jdaggett@8984 4426 <pre>
jdaggett@8984 4427 .ordinal { font-variant-numeric: ordinal; }
jdaggett@8984 4428 &lt;span class="ordinal"&gt;17th&lt;/span&gt;
jdaggett@8984 4429 </pre>
jdaggett@8984 4430
jdaggett@8984 4431 <p>In this case only the "th" will appear in ordinal form, the digits will
jdaggett@8984 4432 remain unchanged. Depending upon the typographic traditions used in a
jdaggett@8984 4433 given language, ordinal forms may differ from superscript forms. In
jdaggett@8984 4434 Italian, for example, ordinal forms sometimes include an underline in the
jdaggett@8985 4435 ordinal design.</p>
jdaggett@8984 4436 </div>
jdaggett@8984 4437
jdaggett@1662 4438 <div class=example id=steak-marinade>
jdaggett@1662 4439 <p>A simple flank steak marinade recipe, rendered with automatic fractions
jdaggett@1662 4440 and old-style numerals:</p>
jdaggett@1662 4441
jdaggett@1662 4442 <pre>.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; }
jdaggett@1662 4443
jdaggett@1662 4444 &lt;h4>Steak marinade:&lt;/h4>
jdaggett@1662 4445 &lt;ul>
jdaggett@1662 4446 &lt;li>&lt;span class="amount">2&lt;/span> tbsp olive oil&lt;/li>
jdaggett@1662 4447 &lt;li>&lt;span class="amount">1&lt;/span> tbsp lemon juice&lt;/li>
jdaggett@1662 4448 &lt;li>&lt;span class="amount">1&lt;/span> tbsp soy sauce&lt;/li>
jdaggett@1662 4449 &lt;li>&lt;span class="amount">1 1/2&lt;/span> tbsp dry minced onion&lt;/li>
jdaggett@1662 4450 &lt;li>&lt;span class="amount">2 1/2&lt;/span> tsp italian seasoning&lt;/li>
jdaggett@1732 4451 &lt;li>Salt &amp;amp; pepper&lt;/li>
jdaggett@1662 4452 &lt;/ul>
jdaggett@1662 4453
jdaggett@5596 4454 &lt;p>Mix the meat with the marinade and let it sit covered in the refrigerator
jdaggett@5596 4455 for a few hours or overnight.&lt;/p>
jdaggett@1662 4456 </pre>
jdaggett@8311 4457
jdaggett@8311 4458 <p>Note that the fraction feature is only applied to values not the entire
jdaggett@8311 4459 paragraph. Fonts often implement this feature using contextual rules
jdaggett@8311 4460 based on the use of the slash (‘<code class=css>/</code>’) character.
jdaggett@8311 4461 As such, it's not suitable for use as a paragraph-level style.</p>
jdaggett@1662 4462 </div>
jdaggett@2118 4463 <!-- prop: font-variant-alternates -->
jdaggett@2118 4464
jdaggett@2118 4465 <h3 id=font-variant-alternates-prop><span class=secno>6.8 </span>Alternates
jdaggett@2118 4466 and swashes: the <a
jdaggett@2118 4467 href="#propdef-font-variant-alternates">font-variant-alternates</a>
jdaggett@2118 4468 property</h3>
jdaggett@2118 4469
jdaggett@6176 4470 <table class=propdef id=namefont-variant-alternatesvaluenormal-s>
jdaggett@2118 4471 <tbody>
jdaggett@2118 4472 <tr>
jdaggett@2118 4473 <td>Name:
jdaggett@2118 4474
jdaggett@2118 4475 <td><dfn
jdaggett@2118 4476 id=propdef-font-variant-alternates>font-variant-alternates</dfn>
jdaggett@2118 4477
jdaggett@2118 4478 <tr>
jdaggett@2118 4479 <td>Value:
jdaggett@2118 4480
jdaggett@8225 4481 <td>normal | [ <a href="#stylistic"
jdaggett@8225 4482 title=stylistic>stylistic(&lt;feature-value-name&gt;)</a> || <a
jdaggett@8225 4483 href="#historical-forms">historical-forms</a> || <a href="#styleset"
jdaggett@8225 4484 title=styleset>styleset(&lt;feature-value-name&gt; #)</a> || <a
jdaggett@8225 4485 href="#character-variant"
jdaggett@8225 4486 title=character-variant>character-variant(&lt;feature-value-name&gt;
jdaggett@8225 4487 #)</a> || <a href="#swash"
jdaggett@8225 4488 title=swash>swash(&lt;feature-value-name&gt;)</a> || <a
jdaggett@8225 4489 href="#ornaments"
jdaggett@8225 4490 title=ornaments>ornaments(&lt;feature-value-name&gt;)</a> || <a
jdaggett@8225 4491 href="#annotation"
jdaggett@8225 4492 title=annotation>annotation(&lt;feature-value-name&gt;)</a> ]
jdaggett@2118 4493
jdaggett@2118 4494 <tr>
jdaggett@2118 4495 <td>Initial:
jdaggett@2118 4496
jdaggett@2118 4497 <td>normal
jdaggett@2118 4498
jdaggett@2118 4499 <tr>
jdaggett@2118 4500 <td>Applies to:
jdaggett@2118 4501
jdaggett@2118 4502 <td>all elements
jdaggett@2118 4503
jdaggett@2118 4504 <tr>
jdaggett@2118 4505 <td>Inherited:
jdaggett@2118 4506
jdaggett@2118 4507 <td>yes
jdaggett@2118 4508
jdaggett@2118 4509 <tr>
jdaggett@2118 4510 <td>Percentages:
jdaggett@2118 4511
jdaggett@2118 4512 <td>N/A
jdaggett@2118 4513
jdaggett@2118 4514 <tr>
jdaggett@2118 4515 <td>Media:
jdaggett@2118 4516
jdaggett@2118 4517 <td>visual
jdaggett@2118 4518
jdaggett@2118 4519 <tr>
jdaggett@2118 4520 <td>Computed value:
jdaggett@2118 4521
jdaggett@2118 4522 <td>as specified
jdaggett@7377 4523
jdaggett@7377 4524 <tr>
jdaggett@7377 4525 <td>Animatable:
jdaggett@7377 4526
jdaggett@7377 4527 <td>no
jdaggett@2118 4528 </table>
jdaggett@2118 4529
jdaggett@2118 4530 <p>For any given character, fonts can provide a variety of alternate glyphs
jdaggett@2118 4531 in addition to the default glyph for that character. This property
jdaggett@2118 4532 provides control over the selection of these alternate glyphs.
jdaggett@2118 4533
jdaggett@8311 4534 <p>For many of the property values listed below, several different
jdaggett@8311 4535 alternate glyphs are available. How many alternates are available and what
jdaggett@8356 4536 they represent is font-specific, so these are each marked <dfn
jdaggett@8356 4537 id=font-specific>font specific</dfn> in the value definitions below.
jdaggett@8356 4538 Because the nature of these alternates is font-specific, the <a
jdaggett@8311 4539 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8311 4540 rule is used to define values for a specific font family or set of
jdaggett@8311 4541 families that associate a font-specific numeric
jdaggett@8311 4542 <code>&lt;feature-index&gt;</code> with a custom
jdaggett@8311 4543 <code>&lt;feature-value-name&gt;</code>, which is then used in this
jdaggett@8311 4544 property to select specific alternates:
jdaggett@8311 4545
jdaggett@8311 4546 <pre>@font-feature-values Noble Script { @swash { swishy: 1; flowing: 2; } }
jdaggett@8311 4547
jdaggett@8311 4548 p {
jdaggett@8311 4549 font-family: Noble Script;
jdaggett@8311 4550 font-variant-alternates: swash(flowing); /* use swash alternate #2 */
jdaggett@8311 4551 }</pre>
jdaggett@8311 4552
jdaggett@8312 4553 <p>When a particular <code>&lt;feature-value-name&gt;</code> has not been
jdaggett@8312 4554 defined for a given family or for a particular feature type, the computed
jdaggett@8312 4555 value must be the same as if it had been defined. However, property values
jdaggett@8312 4556 that contain these undefined <code>&lt;feature-value-name&gt;</code>
jdaggett@8312 4557 identifiers must be ignored when choosing glyphs.
jdaggett@8312 4558
jdaggett@8312 4559 <pre>/* these two style rules are effectively the same */
jdaggett@8312 4560 p { font-variant-alternates: swash(unknown-value); } /* not a defined value, ignored */
jdaggett@8312 4561 p { font-variant-alternates: normal; }
jdaggett@8312 4562 </pre>
jdaggett@8312 4563
jdaggett@8312 4564 <p>This allows values to be defined and used for a given set of font
jdaggett@8312 4565 families but ignored if fallback occurs, since the font family name would
jdaggett@8312 4566 be different. If a given value is outside the range supported by a given
jdaggett@8312 4567 font, the value is ignored. These values never apply to generic font
jdaggett@8312 4568 families.
jdaggett@2556 4569
jdaggett@2118 4570 <p>Individual values have the following meanings:
jdaggett@2118 4571
jdaggett@2118 4572 <dl>
jdaggett@8278 4573 <dt><dfn id=font-variant-alternates-normal-value
jdaggett@8278 4574 title="normal!!font-variant-alternates">normal</dfn>
jdaggett@5809 4575
jdaggett@5809 4576 <dd>None of the features listed below are enabled.
jdaggett@5809 4577
jdaggett@2118 4578 <dt><dfn id=historical-forms>historical-forms</dfn>
jdaggett@2118 4579
jdaggett@6436 4580 <dd>Enables display of historical forms (OpenType feature: <span
jdaggett@6436 4581 class=tag>hist</span>).
jdaggett@2118 4582 </dl>
jdaggett@2118 4583
jdaggett@2118 4584 <div class=featex><img alt="historical form example" src=hist.png></div>
jdaggett@2118 4585
jdaggett@2118 4586 <dl>
jdaggett@8311 4587 <dt><dfn id=stylistic
jdaggett@8311 4588 title=stylistic>stylistic(&lt;feature-value-name&gt;)</dfn>
jdaggett@8311 4589
jdaggett@8356 4590 <dd>Enables display of stylistic alternates (<a
jdaggett@8356 4591 href="#font-specific"><em>font specific</em></a>, OpenType feature: <span
jdaggett@8356 4592 class=tag>salt &lt;feature-index&gt;</span>).
jdaggett@8311 4593 </dl>
jdaggett@8311 4594
jdaggett@8311 4595 <div class=featex><img alt="stylistic alternate example" src=salt.png></div>
jdaggett@8311 4596
jdaggett@8311 4597 <dl>
jdaggett@8225 4598 <dt><dfn id=styleset title=styleset>styleset(&lt;feature-value-name&gt;
jdaggett@8225 4599 #)</dfn>
jdaggett@2118 4600
jdaggett@8356 4601 <dd>Enables display with stylistic sets (<a href="#font-specific"><em>font
jdaggett@8356 4602 specific</em></a>, OpenType feature: <span
jdaggett@8356 4603 class=tag>ss&lt;feature-index&gt;</span> OpenType currently defines <span
jdaggett@8356 4604 class=tag>ss01</span> through <span class=tag>ss20</span>).
jdaggett@2118 4605 </dl>
jdaggett@2118 4606
jdaggett@2118 4607 <div class=featex><img alt="styleset example" src=ssnn.png></div>
jdaggett@2118 4608
jdaggett@2118 4609 <dl>
jdaggett@8225 4610 <dt><dfn id=character-variant
jdaggett@8225 4611 title=character-variant>character-variant(&lt;feature-value-name&gt;
jdaggett@8225 4612 #)</dfn>
jdaggett@2118 4613
jdaggett@8356 4614 <dd>Enables display of specific character variants (<a
jdaggett@8356 4615 href="#font-specific"><em>font specific</em></a>, OpenType feature: <span
jdaggett@6436 4616 class=tag>cv&lt;feature-index&gt;</span> OpenType currently defines <span
jdaggett@6436 4617 class=tag>cv01</span> through <span class=tag>cv99</span>).
jdaggett@2118 4618
jdaggett@8225 4619 <dt><dfn id=swash title=swash>swash(&lt;feature-value-name&gt;)</dfn>
jdaggett@2118 4620
jdaggett@8356 4621 <dd>Enables display of swash glyphs (<a href="#font-specific"><em>font
jdaggett@8356 4622 specific</em></a>, OpenType feature: <span class=tag>swsh
jdaggett@8356 4623 &lt;feature-index&gt;, cswh &lt;feature-index&gt;</span>).
jdaggett@2118 4624 </dl>
jdaggett@2118 4625
jdaggett@2118 4626 <div class=featex><img alt="swash example" src=swsh.png></div>
jdaggett@2118 4627
jdaggett@2118 4628 <dl>
jdaggett@8225 4629 <dt><dfn id=ornaments
jdaggett@7060 4630 title=ornaments>ornaments(&lt;feature-value-name&gt;)</dfn>
jdaggett@2118 4631
jdaggett@2118 4632 <dd>Enables replacement of default glyphs with ornaments, if provided in
jdaggett@8356 4633 the font (<a href="#font-specific"><em>font specific</em></a>, OpenType
jdaggett@8356 4634 feature: <span class=tag>ornm &lt;feature-index&gt;</span>). Some fonts
jdaggett@8356 4635 may offer ornament glyphs as alternates for a wide collection of
jdaggett@8356 4636 characters; however, displaying arbitrary characters (e.g.,
jdaggett@8356 4637 alphanumerics) as ornaments is poor practice as it distorts the semantics
jdaggett@8356 4638 of the data. Font designers are encouraged to encode all ornaments
jdaggett@8356 4639 (except those explicitly encoded in the Unicode Dingbats blocks, etc.) as
jdaggett@8356 4640 alternates for the bullet character (U+2022) to allow authors to select
jdaggett@8356 4641 the desired glyph using ‘<a href="#ornaments"><code
jdaggett@8356 4642 class=property>ornaments</code></a>’.
jdaggett@2118 4643 </dl>
jdaggett@2118 4644
jdaggett@2118 4645 <div class=featex><img alt="ornaments example" src=ornm.png></div>
jdaggett@2118 4646
jdaggett@2118 4647 <dl>
jdaggett@8225 4648 <dt><dfn id=annotation
jdaggett@7060 4649 title=annotation>annotation(&lt;feature-value-name&gt;)</dfn>
jdaggett@2118 4650
jdaggett@8356 4651 <dd>Enables display of alternate annotation forms (<a
jdaggett@8356 4652 href="#font-specific"><em>font specific</em></a>, OpenType feature: <span
jdaggett@8356 4653 class=tag>nalt &lt;feature-index&gt;</span>).
jdaggett@2118 4654 </dl>
jdaggett@2118 4655
jdaggett@2118 4656 <div class=featex><img alt="alternate annotation form example"
jdaggett@2118 4657 src=nalt.png></div>
jdaggett@2118 4658
jdaggett@2472 4659 <h3 id=font-feature-values><span class=secno>6.9 </span>Defining font
jdaggett@8311 4660 specific alternates: the <dfn id=at-font-feature-values-rule
jdaggett@8311 4661 style="font-weight: inherit; font-style:
jdaggett@8311 4662 inherit"><code>@font-feature-values</code></dfn> rule</h3>
jdaggett@2472 4663
jdaggett@4624 4664 <p>Several of the possible values of ‘<a
jdaggett@4624 4665 href="#propdef-font-variant-alternates"><code
jdaggett@4624 4666 class=property>font-variant-alternates</code></a>’ listed above are
jdaggett@8356 4667 labeled as <a href="#font-specific"><em>font specific</em></a>. For these
jdaggett@8356 4668 features fonts may define not just a single glyph but a set of alternate
jdaggett@8356 4669 glyphs with an index to select a given alternate. Since these are font
jdaggett@8356 4670 family specific, the <a
jdaggett@8311 4671 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8356 4672 rule is used to define named values for these indices for a given family.
jdaggett@8356 4673
jdaggett@8356 4674 <p class=note>See the <a href="#om-fontfeaturevalues">object model
jdaggett@8356 4675 reference section</a> for a description of the interfaces used to modify
jdaggett@8356 4676 these rules via the CSS Object Model.
jdaggett@8356 4677
jdaggett@8356 4678 <div class=example>
jdaggett@8356 4679 <p>In the case of the swash Q in the example shown above, the swash could
jdaggett@8356 4680 be specified using these style rules:</p>
jdaggett@8356 4681
jdaggett@8356 4682 <pre>
jdaggett@7041 4683
jdaggett@2472 4684 @font-feature-values Jupiter Sans {
jdaggett@7041 4685 @swash {
jdaggett@7041 4686 delicate: 1;
jdaggett@7041 4687 flowing: 2;
jdaggett@7041 4688 }
jdaggett@2472 4689 }
jdaggett@2472 4690
jdaggett@2472 4691 h2 { font-family: Jupiter Sans, sans-serif; }
jdaggett@2472 4692
jdaggett@2472 4693 /* show the second swash variant in h2 headings */
jdaggett@2472 4694 h2:first-letter { font-variant-alternates: swash(flowing); }
jdaggett@2472 4695
jdaggett@2479 4696 &lt;h2>Quick&lt;/h2></pre>
jdaggett@2472 4697
jdaggett@8356 4698 <p>When Jupiter Sans is present, the second alternate swash alternate will
jdaggett@8356 4699 be displayed. When not present, no swash character will be shown, since
jdaggett@8356 4700 the specific named value "flowing" is only defined for the Jupiter Sans
jdaggett@8356 4701 family. The @-mark indicates the name of the property value for which a
jdaggett@8356 4702 named value can be used. The name "flowing" is chosen by the author. The
jdaggett@8356 4703 index that represents each alternate is defined within a given font's
jdaggett@8356 4704 data.</p>
jdaggett@8356 4705 </div>
jdaggett@8356 4706
jdaggett@8356 4707 <h4 id=basic-syntax><span class=secno>6.9.1 </span>Basic syntax</h4>
jdaggett@8356 4708
jdaggett@8356 4709 <p>An <a
jdaggett@8356 4710 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8356 4711 rule is composed of a list of font families followed by a block containing
jdaggett@8356 4712 individual <a href="#featurevalueblock"><i
jdaggett@8356 4713 title="feature_value_block">feature value blocks</i></a> that take the
jdaggett@8356 4714 form of @-rules. Each block defines a set of named values for a specific
jdaggett@8356 4715 font feature when a given set of font families is used. Effectively, they
jdaggett@8356 4716 define a mapping of ⟨family, feature, ident⟩ → ⟨values⟩ where
jdaggett@8356 4717 ⟨values⟩ are the numeric indices used for specific features defined
jdaggett@8356 4718 for a given font.
jdaggett@8031 4719
jdaggett@8031 4720 <p>In terms of the grammar, this specification defines the following
jdaggett@8312 4721 productions:
jdaggett@8225 4722
jdaggett@8225 4723 <pre><dfn id=fontfeaturevaluesrule>font_feature_values_rule</dfn>
jdaggett@8225 4724 : <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 4725 '{' <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 4726 ;
jdaggett@8225 4727
jdaggett@8225 4728 <dfn id=fontfamilynamelist>font_family_name_list</dfn>
jdaggett@8225 4729 : <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 4730 ;
jdaggett@8225 4731
jdaggett@8225 4732 <dfn id=fontfamilyname>font_family_name</dfn>
jdaggett@8225 4733 : <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 4734 ;
jdaggett@8225 4735
jdaggett@8225 4736 <dfn id=featurevalueblock>feature_value_block</dfn>
jdaggett@8225 4737 : <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 4738 '{' <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 4739 ;
jdaggett@8225 4740
jdaggett@8225 4741 <dfn id=featuretype>feature_type</dfn>:
jdaggett@8225 4742 <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>ATKEYWORD</i></a>
jdaggett@8225 4743 ;
jdaggett@8225 4744
jdaggett@8225 4745 <dfn id=featurevaluedefinition>feature_value_definition</dfn>
jdaggett@8225 4746 : <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 4747 ;
jdaggett@8225 4748 </pre>
jdaggett@8225 4749
jdaggett@8032 4750 <p>The following new token is introduced:
jdaggett@8032 4751
jdaggett@8225 4752 <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 4753 </pre>
jdaggett@2118 4754
jdaggett@8356 4755 <p><a href="#featurevalueblock"><i title="feature_value_block">Feature
jdaggett@8356 4756 value blocks</i></a> are handled as <a
jdaggett@8356 4757 href="http://www.w3.org/TR/CSS2/syndata.html#at-rules">at-rules</a>, they
jdaggett@8356 4758 consist of everything up to the next block or semi-colon, whichever comes
jdaggett@8356 4759 first.
jdaggett@8356 4760
jdaggett@8356 4761 <p>The <a href="#fontfamilynamelist"><i title="font_family_name_list">font
jdaggett@8356 4762 family list</i></a> is a comma-delimited list of <a
jdaggett@8356 4763 href="#fontfamilyname"><i title="font_family_name">font family
jdaggett@8356 4764 names</i></a> that match the definition of <a
jdaggett@8356 4765 href="#family-name-value"><var>&lt;family-name&gt;</var></a> for the <a
jdaggett@8278 4766 href="#propdef-font-family" title="font-family!!property">‘<code
jdaggett@8356 4767 class=property>font-family</code>’</a> property. This means that only
jdaggett@8356 4768 named font families are allowed, rules that include generic or system
jdaggett@8356 4769 fonts in the list of font families are syntax errors. However, if a user
jdaggett@8356 4770 agent defines a generic font to be a specific named font (e.g. Helvetica),
jdaggett@8356 4771 the settings associated with that family name will be used. If syntax
jdaggett@8356 4772 errors occur within the font family list, the entire rule must be ignored.
jdaggett@8356 4773
jdaggett@8356 4774 <p>Within <a href="#featurevalueblock"><i
jdaggett@8356 4775 title="feature_value_block">feature value blocks</i></a>, the <a
jdaggett@8356 4776 href="#featuretype"><i title="feature_type">feature type</i></a> is
jdaggett@8356 4777 ‘<code class=css>@</code>’ followed by the name of one of the <a
jdaggett@8356 4778 href="#font-specific"><em>font specific</em></a> property values of ‘<a
jdaggett@8356 4779 href="#propdef-font-variant-alternates"><code
jdaggett@8356 4780 class=property>font-variant-alternates</code></a>’ (e.g. <a
jdaggett@8356 4781 href="#swash"><code>@swash</code></a>). The identifiers used within
jdaggett@8356 4782 feature value definitions follow the rules of CSS user identifiers and are
jdaggett@8356 4783 case-sensitive. They are unique only for a given set of font families and
jdaggett@8356 4784 <a href="#featuretype"><i title="feature_type">feature type</i></a>. The
jdaggett@8356 4785 same identifier used with a different <a href="#featuretype"><i
jdaggett@8356 4786 title="feature_type">feature type</i></a> is treated as a separate and
jdaggett@8356 4787 distinct value. If the same identifier is defined mulitple times for a
jdaggett@8356 4788 given <a href="#featuretype"><i title="feature_type">feature type</i></a>
jdaggett@8356 4789 and font family, the last defined value is used. Values associated with a
jdaggett@8356 4790 given identifier are limited to integer values 0 or greater.
jdaggett@8356 4791
jdaggett@8356 4792 <p>When syntax errors occur within a <a href="#featurevaluedefinition"><i
jdaggett@8356 4793 title="feature_value_definition">feature value definition</i></a>, such as
jdaggett@8356 4794 invalid identifiers or values, the entire <a
jdaggett@8356 4795 href="#featurevaluedefinition"><i title="feature_value_definition">feature
jdaggett@8356 4796 value definition</i></a> must be omitted, just as syntax errors in style
jdaggett@8356 4797 declarations are handled. When the <a href="#featuretype"><i
jdaggett@8356 4798 title="feature_type">feature type</i></a> is invalid, the entire
jdaggett@8356 4799 associated <a href="#featurevalueblock"><i
jdaggett@8356 4800 title="feature_value_block">feature value block</i></a> must be ignored.
jdaggett@8356 4801
jdaggett@8356 4802 <div class=example>
jdaggett@8356 4803 <p>Rules that are equivalent given syntax error handling:</p>
jdaggett@8356 4804
jdaggett@8356 4805 <pre>@font-feature-values Bongo {
jdaggett@7679 4806 @swash { ornate: 1; }
jdaggett@7679 4807 annotation { boxed: 4; } /* should be @annotation! */
jdaggett@8031 4808 @swash { double-loops: 1; flowing: -1; } /* negative value */
jdaggett@8031 4809 @ornaments ; /* incomplete definition */
jdaggett@8031 4810 @styleset { double-W: 14; sharp-terminals: 16 1 } /* missing ; */
jdaggett@8356 4811 <a href="http://www.angryalien.com/0504/shiningbunnies.html" style="text-decoration: none; border: none;">redrum</a> /* random editing mistake */
jdaggett@7679 4812 }</pre>
jdaggett@7679 4813
jdaggett@8356 4814 <p>The example above is equivalent to:</p>
jdaggett@8356 4815
jdaggett@8356 4816 <pre>@font-feature-values Bongo {
jdaggett@7679 4817 @swash { ornate: 1; }
jdaggett@8031 4818 @swash { double-loops: 1; }
jdaggett@8031 4819 @styleset { double-W: 14; sharp-terminals: 16 1; }
jdaggett@7679 4820 }</pre>
jdaggett@8356 4821 </div>
jdaggett@7096 4822
jdaggett@8311 4823 <p>If multiple <a
jdaggett@8311 4824 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8356 4825 rules are defined for a given family, the resulting values definitions are
jdaggett@8356 4826 the union of the definitions contained within these rules. This allows a
jdaggett@8356 4827 set of named values to be defined for a given font family globally for a
jdaggett@8356 4828 site and specific additions made per-page.
jdaggett@8356 4829
jdaggett@8356 4830 <div class=example>
jdaggett@8356 4831 <p>Using both site-wide and per-page feature values:</p>
jdaggett@8356 4832
jdaggett@8356 4833 <pre>
jdaggett@2472 4834 site.css:
jdaggett@2472 4835
jdaggett@2472 4836 @font-feature-values Mercury Serif {
jdaggett@7041 4837 @styleset {
jdaggett@7041 4838 stacked-g: 3; /* "two-storey" versions of g, a */
jdaggett@7041 4839 stacked-a: 4;
jdaggett@7041 4840 }
jdaggett@2472 4841 }
jdaggett@2472 4842
jdaggett@2472 4843 page.css:
jdaggett@8277 4844
jdaggett@2472 4845 @font-feature-values Mercury Serif {
jdaggett@7041 4846 @styleset {
jdaggett@7041 4847 geometric-m: 7; /* alternate version of m */
jdaggett@7041 4848 }
jdaggett@2472 4849 }
jdaggett@8277 4850
jdaggett@2472 4851 body {
jdaggett@2472 4852 font-family: Mercury Serif, serif;
jdaggett@2472 4853
jdaggett@2472 4854 /* enable both the use of stacked g and alternate m */
jdaggett@2472 4855 font-variant-alternates: styleset(stacked-g, geometric-m);
jdaggett@2472 4856 }</pre>
jdaggett@8356 4857 </div>
jdaggett@8356 4858
jdaggett@8356 4859 <div class=example>
jdaggett@8356 4860 <p>Using a commonly named value allows authors to use a single style rule
jdaggett@8356 4861 to cover a set of fonts for which the underlying selector is different
jdaggett@8356 4862 for each font. If either font in the example below is found, a circled
jdaggett@8356 4863 number glyph will be used:</p>
jdaggett@8356 4864
jdaggett@8356 4865 <pre>@font-feature-values Taisho Gothic {
jdaggett@7041 4866 @annotation { boxed: 1; circled: 4; }
jdaggett@2118 4867 }
jdaggett@2118 4868
jdaggett@2118 4869 @font-feature-values Otaru Kisa {
jdaggett@7041 4870 @annotation { circled: 1; black-boxed: 3; }
jdaggett@2118 4871 }
jdaggett@2118 4872
jdaggett@2118 4873 h3.title {
jdaggett@2118 4874 /* circled form defined for both fonts */
jdaggett@2118 4875 font-family: Taisho Gothic, Otaru Kisa;
jdaggett@2118 4876 font-variant: annotation(circled);
jdaggett@2118 4877 }</pre>
jdaggett@8356 4878 </div>
jdaggett@8356 4879
jdaggett@8356 4880 <h4 id=multi-valued-feature-value-definitions><span class=secno>6.9.2
jdaggett@8356 4881 </span>Multi-valued feature value definitions</h4>
jdaggett@8356 4882
jdaggett@8356 4883 <p>Most <a href="#font-specific"><em>font specific</em></a> ‘<a
jdaggett@8356 4884 href="#propdef-font-variant-alternates"><code
jdaggett@8356 4885 class=property>font-variant-alternates</code></a>’ property values take
jdaggett@8356 4886 a single value (e.g. ‘<a href="#swash"><code
jdaggett@8356 4887 class=property>swash</code></a>’). The ‘<a
jdaggett@8356 4888 href="#character-variant"><code
jdaggett@8356 4889 class=property>character-variant</code></a>’ property value allows two
jdaggett@8356 4890 values and ‘<a href="#styleset"><code
jdaggett@8356 4891 class=property>styleset</code></a>’ allows an unlimited number.
jdaggett@3571 4892
jdaggett@3571 4893 <p>For the styleset property value, multiple values indicate the style sets
jdaggett@7095 4894 to be enabled. Values between 1 and 99 enable OpenType features <span
jdaggett@7095 4895 class=tag>ss01</span> through <span class=tag>ss99</span>. However, the
jdaggett@7095 4896 OpenType standard only officially defines <span class=tag>ss01</span>
jdaggett@8356 4897 through <span class=tag>ss20</span>. For OpenType fonts, values greater
jdaggett@8356 4898 than 99 or equal to 0 do not generate a syntax error when parsed but
jdaggett@8356 4899 enable no OpenType features.
jdaggett@2472 4900
jdaggett@2472 4901 <pre>@font-feature-values Mars Serif {
jdaggett@8277 4902 @styleset {
jdaggett@7041 4903 alt-g: 1; /* implies ss01 = 1 */
jdaggett@7041 4904 curly-quotes: 3; /* implies ss03 = 1 */
jdaggett@7041 4905 code: 4 5; /* implies ss04 = 1, ss05 = 1 */
jdaggett@7041 4906 }
jdaggett@7041 4907
jdaggett@7041 4908 @styleset {
jdaggett@7095 4909 dumb: 125; /* &gt;99, ignored */
jdaggett@7041 4910 }
jdaggett@7041 4911
jdaggett@7041 4912 @swash {
jdaggett@7041 4913 swishy: 3 5; /* more than 1 value for swash, syntax error */
jdaggett@7041 4914 }
jdaggett@2472 4915 }
jdaggett@2472 4916
jdaggett@2472 4917 p.codeblock {
jdaggett@2472 4918 /* implies ss03 = 1, ss04 = 1, ss05 = 1 */
jdaggett@2472 4919 font-variant-alternates: styleset(curly-quotes, code);
jdaggett@2472 4920 }</pre>
jdaggett@2472 4921
jdaggett@2472 4922 <p>For character-variant, a single value between 1 and 99 indicates the
jdaggett@6436 4923 enabling of OpenType feature <span class=tag>cv01</span> through <span
jdaggett@7095 4924 class=tag>cv99</span>. For OpenType fonts, values greater than 99 or equal
jdaggett@8356 4925 to 0 are ignored but do not generate a syntax error when parsed but enable
jdaggett@8356 4926 no OpenType features. When two values are listed, the first value
jdaggett@8356 4927 indicates the feature used and the second the value passed for that
jdaggett@8356 4928 feature. If more than two values are assigned to a given name, a syntax
jdaggett@8356 4929 error occurs and the entire <a href="#featurevaluedefinition"><i
jdaggett@8356 4930 title="feature_value_definition">feature value definition</i></a> is
jdaggett@8356 4931 ignored.
jdaggett@2472 4932
jdaggett@2472 4933 <pre>@font-feature-values MM Greek {
jdaggett@7041 4934 @character-variant { alpha-2: 1 2; } /* implies cv01 = 2 */
jdaggett@7041 4935 @character-variant { beta-3: 2 3; } /* implies cv02 = 3 */
jdaggett@8356 4936 @character-variant { epsilon: 5 3 6; } /* more than 2 values, syntax error, definition ignored */
jdaggett@7041 4937 @character-variant { gamma: 12; } /* implies cv12 = 1 */
jdaggett@7041 4938 @character-variant { zeta: 20 3; } /* implies cv20 = 3 */
jdaggett@7041 4939 @character-variant { zeta-2: 20 2; } /* implies cv20 = 2 */
jdaggett@7041 4940 @character-variant { silly: 105; } /* &gt;99, ignored */
jdaggett@7041 4941 @character-variant { dumb: 323 3; } /* &gt;99, ignored */
jdaggett@2472 4942 }
jdaggett@2472 4943
jdaggett@2472 4944 #title {
jdaggett@2472 4945 /* use the third alternate beta, first alternate gamma */
jdaggett@2472 4946 font-variant-alternates: character-variant(beta-3, gamma);
jdaggett@3571 4947 }
jdaggett@3571 4948
jdaggett@3571 4949 p {
jdaggett@3571 4950 /* zeta-2 follows zeta, implies cv20 = 2 */
jdaggett@3571 4951 font-variant-alternates: character-variant(zeta, zeta-2);
jdaggett@3571 4952 }
jdaggett@3571 4953
jdaggett@3571 4954 .special {
jdaggett@3571 4955 /* zeta follows zeta-2, implies cv20 = 3 */
jdaggett@3571 4956 font-variant-alternates: character-variant(zeta-2, zeta);
jdaggett@2472 4957 }</pre>
jdaggett@2472 4958
jdaggett@2472 4959 <div class=figure><img alt="Matching text on Byzantine seals using
jdaggett@2472 4960 character variants" src=byzantineseal.png>
jdaggett@2472 4961 <p class=caption>Byzantine seal text displayed with character variants
jdaggett@2472 4962 </div>
jdaggett@2472 4963
jdaggett@2472 4964 <div class=example>
jdaggett@2472 4965 <p>In the figure above, the text in red is rendered using a font
jdaggett@2472 4966 containing character variants that mimic the character forms found on a
jdaggett@2472 4967 Byzantine seal from the 8th century A.D. Two lines below is the same text
jdaggett@2472 4968 displayed in a font without variants. Note the two variants for U and N
jdaggett@2509 4969 used on the seal.</p>
jdaggett@2472 4970
jdaggett@2472 4971 <pre>@font-feature-values Athena Ruby {
jdaggett@7041 4972 @character-variant {
jdaggett@7041 4973 leo-B: 2 1;
jdaggett@7041 4974 leo-M: 13 3;
jdaggett@7041 4975 leo-alt-N: 14 1;
jdaggett@7041 4976 leo-N: 14 2;
jdaggett@8277 4977 leo-T: 20 1;
jdaggett@7041 4978 leo-U: 21 2;
jdaggett@7041 4979 leo-alt-U: 21 4;
jdaggett@7041 4980 }
jdaggett@2472 4981 }
jdaggett@2472 4982
jdaggett@2472 4983 p {
jdaggett@6653 4984 font-variant: discretionary-ligatures,
jdaggett@6653 4985 character-variant(leo-B, leo-M, leo-N, leo-T, leo-U);
jdaggett@2472 4986 }
jdaggett@2472 4987
jdaggett@8277 4988 span.alt-N {
jdaggett@2472 4989 font-variant-alternates: character-variant(leo-alt-N);
jdaggett@2472 4990 }
jdaggett@2472 4991
jdaggett@2472 4992 span.alt-U {
jdaggett@2472 4993 font-variant-alternates: character-variant(leo-alt-U);
jdaggett@2472 4994 }
jdaggett@2472 4995
jdaggett@2472 4996 &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 4997
jdaggett@8277 4998 &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 4999 </pre>
jdaggett@2118 5000 </div>
jdaggett@2118 5001
jdaggett@2118 5002 <h3 id=font-variant-east-asian-prop><span class=secno>6.10 </span>East
jdaggett@2118 5003 Asian text rendering: the <a
jdaggett@1662 5004 href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
jdaggett@1662 5005 property</h3>
jdaggett@1662 5006
jdaggett@5809 5007 <table class=propdef id=namefont-variant-east-asianvaluenormal-l>
jdaggett@1662 5008 <tbody>
jdaggett@1662 5009 <tr>
jdaggett@1662 5010 <td>Name:
jdaggett@1662 5011
jdaggett@1662 5012 <td><dfn
jdaggett@1662 5013 id=propdef-font-variant-east-asian>font-variant-east-asian</dfn>
jdaggett@1662 5014
jdaggett@1662 5015 <tr>
jdaggett@1662 5016 <td>Value:
jdaggett@1662 5017
jdaggett@8278 5018 <td><a href="#font-variant-east-asian-normal-value"
jdaggett@8278 5019 title="normal!!font-variant-east-asian">normal</a> | [ <a
jdaggett@8225 5020 href="#east-asian-variant-values"><var>&lt;east-asian-variant-values&gt;</var></a>
jdaggett@8225 5021 || <a
jdaggett@8225 5022 href="#east-asian-width-values"><var>&lt;east-asian-width-values&gt;</var></a>
jdaggett@8225 5023 || <a href="#ruby">ruby</a> ]
jdaggett@1662 5024
jdaggett@1662 5025 <tr>
jdaggett@1662 5026 <td>Initial:
jdaggett@1662 5027
jdaggett@1662 5028 <td>normal
jdaggett@1662 5029
jdaggett@1662 5030 <tr>
jdaggett@1662 5031 <td>Applies to:
jdaggett@1662 5032
jdaggett@1662 5033 <td>all elements
jdaggett@1662 5034
jdaggett@1662 5035 <tr>
jdaggett@1662 5036 <td>Inherited:
jdaggett@1662 5037
jdaggett@1662 5038 <td>yes
jdaggett@1662 5039
jdaggett@1662 5040 <tr>
jdaggett@1662 5041 <td>Percentages:
jdaggett@1662 5042
jdaggett@1662 5043 <td>N/A
jdaggett@1662 5044
jdaggett@1662 5045 <tr>
jdaggett@1662 5046 <td>Media:
jdaggett@1662 5047
jdaggett@1662 5048 <td>visual
jdaggett@1662 5049
jdaggett@1662 5050 <tr>
jdaggett@1662 5051 <td>Computed value:
jdaggett@1662 5052
jdaggett@1662 5053 <td>as specified
jdaggett@7377 5054
jdaggett@7377 5055 <tr>
jdaggett@7377 5056 <td>Animatable:
jdaggett@7377 5057
jdaggett@7377 5058 <td>no
jdaggett@1662 5059 </table>
jdaggett@1662 5060
jdaggett@6693 5061 <p>Allows control of glyph substitution and sizing in East Asian text.
jdaggett@1662 5062
jdaggett@1662 5063 <pre
jdaggett@8225 5064 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 5065
jdaggett@1662 5066 <pre
jdaggett@8225 5067 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 5068
jdaggett@1732 5069 <p>Individual values have the following meanings:
jdaggett@1662 5070
jdaggett@1662 5071 <dl>
jdaggett@8278 5072 <dt><dfn id=font-variant-east-asian-normal-value
jdaggett@8278 5073 title="normal!!font-variant-east-asian">normal</dfn>
jdaggett@5809 5074
jdaggett@5809 5075 <dd>None of the features listed below are enabled.
jdaggett@5809 5076
jdaggett@1662 5077 <dt><dfn id=jis78>jis78</dfn>
jdaggett@1662 5078
jdaggett@6436 5079 <dd>Enables rendering of JIS78 forms (OpenType feature: <span
jdaggett@6436 5080 class=tag>jp78</span>).
jdaggett@1662 5081 </dl>
jdaggett@1662 5082
jdaggett@1662 5083 <div class=featex><img alt="JIS78 form example" src=jp78.png></div>
jdaggett@1662 5084
jdaggett@1662 5085 <dl>
jdaggett@1662 5086 <dt><dfn id=jis83>jis83</dfn>
jdaggett@1662 5087
jdaggett@6436 5088 <dd>Enables rendering of JIS83 forms (OpenType feature: <span
jdaggett@6436 5089 class=tag>jp83</span>).
jdaggett@1662 5090
jdaggett@1662 5091 <dt><dfn id=jis90>jis90</dfn>
jdaggett@1662 5092
jdaggett@6436 5093 <dd>Enables rendering of JIS90 forms (OpenType feature: <span
jdaggett@6436 5094 class=tag>jp90</span>).
jdaggett@1662 5095
jdaggett@1662 5096 <dt><dfn id=jis04>jis04</dfn>
jdaggett@1662 5097
jdaggett@6436 5098 <dd>Enables rendering of JIS2004 forms (OpenType feature: <span
jdaggett@6436 5099 class=tag>jp04</span>).
jdaggett@6693 5100 <p>The various JIS variants reflect the glyph forms defined in different
jdaggett@6693 5101 Japanese national standards. Fonts generally include glyphs defined by
jdaggett@6693 5102 the most recent national standard but it's sometimes necessary to use
jdaggett@6693 5103 older variants, to match signage for example.</p>
jdaggett@1662 5104
jdaggett@2504 5105 <dt><dfn id=simplified>simplified</dfn>
jdaggett@2504 5106
jdaggett@6436 5107 <dd>Enables rendering of simplified forms (OpenType feature: <span
jdaggett@6436 5108 class=tag>smpl</span>).
jdaggett@2504 5109
jdaggett@2504 5110 <dt><dfn id=traditional>traditional</dfn>
jdaggett@2504 5111
jdaggett@6436 5112 <dd>Enables rendering of traditional forms (OpenType feature: <span
jdaggett@6436 5113 class=tag>trad</span>).
jdaggett@1662 5114 </dl>
jdaggett@1662 5115
jdaggett@8312 5116 <p>The ‘<a href="#simplified"><code
jdaggett@8312 5117 class=property>simplified</code></a>’ and ‘<a
jdaggett@8312 5118 href="#traditional"><code class=property>traditional</code></a>’ values
jdaggett@8312 5119 allow control over the glyph forms for characters which have been
jdaggett@8312 5120 simplified over time but for which the older, traditional form is still
jdaggett@8312 5121 used in some contexts. The exact set of characters and glyph forms will
jdaggett@8312 5122 vary to some degree by context for which a given font was designed.
jdaggett@8312 5123
jdaggett@1662 5124 <div class=featex><img alt="tradtional form example" src=trad.png></div>
jdaggett@1662 5125
jdaggett@1662 5126 <dl>
jdaggett@1662 5127 <dt><dfn id=full-width>full-width</dfn>
jdaggett@1662 5128
jdaggett@6436 5129 <dd>Enables rendering of full-width variants (OpenType feature: <span
jdaggett@6436 5130 class=tag>fwid</span>).
jdaggett@1662 5131
jdaggett@1662 5132 <dt><dfn id=proportional-width>proportional-width</dfn>
jdaggett@1662 5133
jdaggett@1662 5134 <dd>Enables rendering of proportionally-spaced variants (OpenType feature:
jdaggett@6436 5135 <span class=tag>pwid</span>).
jdaggett@1662 5136 </dl>
jdaggett@1662 5137
jdaggett@1662 5138 <div class=featex><img alt="proportionally spaced Japanese example"
jdaggett@1662 5139 src=pwid.png></div>
jdaggett@1662 5140
jdaggett@3638 5141 <dl>
jdaggett@3638 5142 <dt><dfn id=ruby>ruby</dfn>
jdaggett@3638 5143
jdaggett@6436 5144 <dd>Enables display of ruby variant glyphs (OpenType feature: <span
jdaggett@6436 5145 class=tag>ruby</span>). Since ruby text is generally smaller than the
jdaggett@3638 5146 associated body text, font designers can design special glyphs for use
jdaggett@3638 5147 with ruby that are more readable than scaled down versions of the default
jdaggett@3638 5148 glyphs. Only glyph selection is affected, there is no associated font
jdaggett@3638 5149 scaling or other change that affects line layout. The red ruby text below
jdaggett@3638 5150 is shown with default glyphs (top) and with ruby variant glyphs (bottom).
jdaggett@3638 5151 Note the slight difference in stroke thickness.
jdaggett@3638 5152 </dl>
jdaggett@3638 5153
jdaggett@3638 5154 <div class=featex><img alt="ruby variant example" src=rubyshinkansen.png></div>
jdaggett@3638 5155
jdaggett@2118 5156 <h3 id=font-variant-prop><span class=secno>6.11 </span>Overall shorthand
jdaggett@1856 5157 for font rendering: the <a href="#propdef-font-variant">font-variant</a>
jdaggett@1662 5158 property</h3>
jdaggett@1662 5159
jdaggett@6436 5160 <table class=propdef id=namefont-variantvaluenormal-none-ltcommo>
jdaggett@1662 5161 <tbody>
jdaggett@1662 5162 <tr>
jdaggett@1662 5163 <td>Name:
jdaggett@1662 5164
jdaggett@8278 5165 <td><dfn id=propdef-font-variant
jdaggett@8278 5166 title="font-variant!!property">font-variant</dfn>
jdaggett@1662 5167
jdaggett@1662 5168 <tr>
jdaggett@1662 5169 <td>Value:
jdaggett@1662 5170
jdaggett@8278 5171 <td><a href="#font-variant-normal-value"
jdaggett@8278 5172 title="normal!!font-variant">normal</a> | <a
jdaggett@8278 5173 href="#font-variant-none-value" title="none!!font-variant">none</a> | [
jdaggett@8278 5174 <a href="#common-lig-values"><var>&lt;common-lig-values&gt;</var></a>
jdaggett@8278 5175 || <a
jdaggett@8225 5176 href="#discretionary-lig-values"><var>&lt;discretionary-lig-values&gt;</var></a>
jdaggett@8225 5177 || <a
jdaggett@8225 5178 href="#historical-lig-values"><var>&lt;historical-lig-values&gt;</var></a>
jdaggett@8225 5179 || <a
jdaggett@8225 5180 href="#contextual-alt-values"><var>&lt;contextual-alt-values&gt;</var></a>
jdaggett@8225 5181 || <a href="#stylistic"><var
jdaggett@8225 5182 title=stylistic>stylistic(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 5183 href="#historical-forms"><var>historical-forms</var></a> || <a
jdaggett@8225 5184 href="#styleset"><var
jdaggett@8225 5185 title=styleset>styleset(&lt;feature-value-name&gt; #)</var></a> || <a
jdaggett@8225 5186 href="#character-variant"><var
jdaggett@8225 5187 title=character-variant>character-variant(&lt;feature-value-name&gt;
jdaggett@8225 5188 #)</var></a> || <a href="#swash"><var
jdaggett@8225 5189 title=swash>swash(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 5190 href="#ornaments"><var
jdaggett@8225 5191 title=ornaments>ornaments(&lt;feature-value-name&gt;)</var></a> || <a
jdaggett@8225 5192 href="#annotation"><var
jdaggett@8225 5193 title=annotation>annotation(&lt;feature-value-name&gt;)</var></a> || [
jdaggett@8225 5194 <a href="#small-caps"><i>small-caps</i></a> | <a
jdaggett@8225 5195 href="#all-small-caps"><i>all-small-caps</i></a> | <a
jdaggett@8225 5196 href="#petite-caps"><i>petite-caps</i></a> | <a
jdaggett@8225 5197 href="#all-petite-caps"><i>all-petite-caps</i></a> | <a
jdaggett@8225 5198 href="#unicase"><i>unicase</i></a> | <a
jdaggett@8225 5199 href="#titling-caps"><i>titling-caps</i></a> ] || <a
jdaggett@8225 5200 href="#numeric-figure-values"><var>&lt;numeric-figure-values&gt;</var></a>
jdaggett@8225 5201 || <a
jdaggett@8225 5202 href="#numeric-spacing-values"><var>&lt;numeric-spacing-values&gt;</var></a>
jdaggett@8225 5203 || <a
jdaggett@8225 5204 href="#numeric-fraction-values"><var>&lt;numeric-fraction-values&gt;</var></a>
jdaggett@8225 5205 || <a href="#ordinal"><i>ordinal</i></a> || <a
jdaggett@8225 5206 href="#slashed-zero"><i>slashed-zero</i></a> || <a
jdaggett@8225 5207 href="#east-asian-variant-values"><var>&lt;east-asian-variant-values&gt;</var></a>
jdaggett@8225 5208 || <a
jdaggett@8225 5209 href="#east-asian-width-values"><var>&lt;east-asian-width-values&gt;</var></a>
jdaggett@8225 5210 || <a href="#ruby"><i>ruby</i></a> ]
jdaggett@1662 5211
jdaggett@1662 5212 <tr>
jdaggett@1662 5213 <td>Initial:
jdaggett@1662 5214
jdaggett@1662 5215 <td>normal
jdaggett@1662 5216
jdaggett@1662 5217 <tr>
jdaggett@1662 5218 <td>Applies to:
jdaggett@1662 5219
jdaggett@1662 5220 <td>all elements
jdaggett@1662 5221
jdaggett@1662 5222 <tr>
jdaggett@1662 5223 <td>Inherited:
jdaggett@1662 5224
jdaggett@1662 5225 <td>yes
jdaggett@1662 5226
jdaggett@1662 5227 <tr>
jdaggett@1662 5228 <td>Percentages:
jdaggett@1662 5229
jdaggett@7377 5230 <td>see individual properties
jdaggett@1662 5231
jdaggett@1662 5232 <tr>
jdaggett@1662 5233 <td>Media:
jdaggett@1662 5234
jdaggett@1662 5235 <td>visual
jdaggett@1662 5236
jdaggett@1662 5237 <tr>
jdaggett@1662 5238 <td>Computed value:
jdaggett@1662 5239
jdaggett@7377 5240 <td>see individual properties
jdaggett@7377 5241
jdaggett@7377 5242 <tr>
jdaggett@7377 5243 <td>Animatable:
jdaggett@7377 5244
jdaggett@7377 5245 <td>see individual properties
jdaggett@1662 5246 </table>
jdaggett@1662 5247
jdaggett@8313 5248 <p>The <a href="#propdef-font-variant"
jdaggett@8313 5249 title="font-variant!!property">‘<code
jdaggett@8313 5250 class=property>font-variant</code>’</a> property is a shorthand for all
jdaggett@8313 5251 font-variant subproperties. The value <dfn id=font-variant-normal-value
jdaggett@8313 5252 title="normal!!font-variant">‘<code
jdaggett@8313 5253 class=property>normal</code>’</dfn> resets all subproperties of <a
jdaggett@8313 5254 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8313 5255 class=property>font-variant</code>’</a> to their inital value. The <dfn
jdaggett@8313 5256 id=font-variant-none-value title="none!!font-variant">‘<code
jdaggett@8313 5257 class=property>none</code>’</dfn> value sets ‘<a
jdaggett@8313 5258 href="#propdef-font-variant-ligatures"><code
jdaggett@8278 5259 class=property>font-variant-ligatures</code></a>’ to ‘<code
jdaggett@8278 5260 class=property>none</code>’ and resets all other font feature properties
jdaggett@8278 5261 to their initial value. Like other shorthands, using <a
jdaggett@8278 5262 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8313 5263 class=property>font-variant</code>’</a> resets unspecified <a
jdaggett@8313 5264 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8313 5265 class=property>font-variant</code>’</a> subproperties to their initial
jdaggett@8313 5266 values. It does not reset the values of either ‘<a
jdaggett@8313 5267 href="#propdef-font-language-override"><code
jdaggett@8279 5268 class=property>font-language-override</code></a>’ or <a
jdaggett@8279 5269 href="#propdef-font-feature-settings"
jdaggett@8279 5270 title="font-feature-settings!!property">‘<code
jdaggett@8279 5271 class=property>font-feature-settings</code>’</a>.
jdaggett@1662 5272
jdaggett@2118 5273 <h3 id=font-feature-settings-prop><span class=secno>6.12 </span>Low-level
jdaggett@2509 5274 font feature settings control: the <a
jdaggett@1662 5275 href="#propdef-font-feature-settings">font-feature-settings</a> property</h3>
jdaggett@1662 5276
jdaggett@4624 5277 <table class=propdef id=namefont-feature-settingsvaluenormal-ltf>
jdaggett@1662 5278 <tbody>
jdaggett@1662 5279 <tr>
jdaggett@1662 5280 <td>Name:
jdaggett@1662 5281
jdaggett@8279 5282 <td><dfn id=propdef-font-feature-settings
jdaggett@8279 5283 title="font-feature-settings!!property">font-feature-settings</dfn>
jdaggett@1662 5284
jdaggett@1662 5285 <tr>
jdaggett@1662 5286 <td>Value:
jdaggett@1662 5287
jdaggett@8278 5288 <td><a href="#font-feature-settings-normal-value"
jdaggett@8278 5289 title="normal!!font-feature-settings">normal</a> | <a
jdaggett@8225 5290 href="#feature-tag-value"><var>&lt;feature-tag-value&gt;</var></a> #
jdaggett@1662 5291
jdaggett@1662 5292 <tr>
jdaggett@1662 5293 <td>Initial:
jdaggett@1662 5294
jdaggett@1662 5295 <td>normal
jdaggett@1662 5296
jdaggett@1662 5297 <tr>
jdaggett@1662 5298 <td>Applies to:
jdaggett@1662 5299
jdaggett@1662 5300 <td>all elements
jdaggett@1662 5301
jdaggett@1662 5302 <tr>
jdaggett@1662 5303 <td>Inherited:
jdaggett@1662 5304
jdaggett@1662 5305 <td>yes
jdaggett@1662 5306
jdaggett@1662 5307 <tr>
jdaggett@1662 5308 <td>Percentages:
jdaggett@1662 5309
jdaggett@1662 5310 <td>N/A
jdaggett@1662 5311
jdaggett@1662 5312 <tr>
jdaggett@1662 5313 <td>Media:
jdaggett@1662 5314
jdaggett@1662 5315 <td>visual
jdaggett@1662 5316
jdaggett@1662 5317 <tr>
jdaggett@1662 5318 <td>Computed value:
jdaggett@1662 5319
jdaggett@1662 5320 <td>as specified
jdaggett@7377 5321
jdaggett@7377 5322 <tr>
jdaggett@7377 5323 <td>Animatable:
jdaggett@7377 5324
jdaggett@7377 5325 <td>no
jdaggett@1662 5326 </table>
jdaggett@2474 5327
jdaggett@2474 5328 <p>This property provides low-level control over OpenType font features. It
jdaggett@2474 5329 is intended as a way of providing access to font features that are not
jdaggett@8312 5330 widely used but are needed for a particular use case.
jdaggett@8312 5331
jdaggett@8312 5332 <p>Authors should generally use <a href="#propdef-font-variant"
jdaggett@8312 5333 title="font-variant!!property">‘<code
jdaggett@8312 5334 class=property>font-variant</code>’</a> and its related subproperties
jdaggett@8312 5335 whenever possible and only use this property for special cases where its
jdaggett@8312 5336 use is the only way of accessing a particular infrequently used font
jdaggett@8312 5337 feature.
jdaggett@8312 5338
jdaggett@8312 5339 <pre>/* enable small caps and use second swash alternate */
jdaggett@8312 5340 font-feature-settings: "smcp", "swsh" 2;</pre>
jdaggett@8312 5341
jdaggett@8312 5342 <p>A value of <dfn id=font-feature-settings-normal-value
jdaggett@8278 5343 title="normal!!font-feature-settings">‘<code
jdaggett@8278 5344 class=property>normal</code>’</dfn> means that no change in glyph
jdaggett@8278 5345 selection or positioning occurs due to this property.
jdaggett@2474 5346
jdaggett@2509 5347 <p>Feature tag values have the following syntax:
jdaggett@2474 5348
jdaggett@2474 5349 <pre
jdaggett@8225 5350 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 5351
jdaggett@5532 5352 <p>The &lt;string&gt; is a case-sensitive OpenType feature tag. As
jdaggett@5532 5353 specified in the OpenType specification, feature tags contain four ASCII
jdaggett@5532 5354 characters. Tag strings longer or shorter than four characters, or
jdaggett@5596 5355 containing characters outside the U+20–7E codepoint range are invalid.
jdaggett@8312 5356 Feature tags need only match a feature tag defined in the font, so they
jdaggett@8312 5357 are not limited to explicitly registered OpenType features. Fonts defining
jdaggett@8312 5358 custom feature tags should follow the <a
jdaggett@2474 5359 href="http://www.microsoft.com/typography/otspec/featuretags.htm">tag name
jdaggett@2474 5360 rules</a> defined in the OpenType specification <a
jdaggett@1662 5361 href="#OPENTYPE-FEATURES"
jdaggett@2474 5362 rel=biblioentry>[OPENTYPE-FEATURES]<!--{{!OPENTYPE-FEATURES}}--></a>.
jdaggett@8927 5363
jdaggett@8927 5364 <p>Feature tags not present in the font are ignored; a user agent must not
jdaggett@8927 5365 attempt to synthesize fallback behavior based on these feature tags. The
jdaggett@8927 5366 one exception is that user agents may synthetically support the <span
jdaggett@8927 5367 class=tag>kern</span> feature with fonts that contain kerning data in the
jdaggett@8927 5368 form of a ‘<code class=property>kern</code>’ table but lack <span
jdaggett@8927 5369 class=tag>kern</span> feature support in the ‘<code
jdaggett@8927 5370 class=property>GPOS</code>’ table.
jdaggett@8927 5371
jdaggett@8927 5372 <p class=note>In general, authors should use the ‘<a
jdaggett@5946 5373 href="#propdef-font-kerning"><code
jdaggett@8927 5374 class=property>font-kerning</code></a>’ property to explicitly enable or
jdaggett@8927 5375 disable kerning since this property always affects fonts with either type
jdaggett@8927 5376 of kerning data.
jdaggett@5946 5377
jdaggett@2509 5378 <p>If present, a value indicates an index used for glyph selection. An
jdaggett@2509 5379 &lt;integer&gt; value must be 0 or greater. A value of 0 indicates that
jdaggett@2509 5380 the feature is disabled. For boolean features, a value of 1 enables the
jdaggett@2509 5381 feature. For non-boolean features, a value of 1 or greater enables the
jdaggett@2509 5382 feature and indicates the feature selection index. A value of ‘<code
jdaggett@2509 5383 class=property>on</code>’ is synonymous with 1 and ‘<code
jdaggett@2509 5384 class=property>off</code>’ is synonymous with 0. If the value is
jdaggett@2509 5385 omitted, a value of 1 is assumed.
jdaggett@2474 5386
jdaggett@2474 5387 <pre>
jdaggett@2509 5388 font-feature-settings: "dlig" 1; /* dlig=1 enable discretionary ligatures */
jdaggett@2509 5389 font-feature-settings: "smcp" on; /* smcp=1 enable small caps */
jdaggett@2515 5390 font-feature-settings: 'c2sc'; /* c2sc=1 enable caps to small caps */
jdaggett@2509 5391 font-feature-settings: "liga" off; /* liga=0 no common ligatures */
jdaggett@2515 5392 font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms */
jdaggett@5530 5393 font-feature-settings: "tnum" "hist"; /* invalid, need a comma-delimited list */
jdaggett@8859 5394 font-feature-settings: "silly" off; /* invalid, tag too long */
jdaggett@2509 5395 font-feature-settings: "PKRN"; /* PKRN=1 enable custom feature */
jdaggett@5530 5396 font-feature-settings: dlig; /* invalid, tag must be a string */
jdaggett@2474 5397 </pre>
jdaggett@1662 5398
jdaggett@8272 5399 <p>When values greater than the range supported by the font are specified,
jdaggett@8272 5400 the behavior is explicitly undefined. For boolean features, in general
jdaggett@8272 5401 these will enable the feature. For non-boolean features, out of range
jdaggett@8272 5402 values will in general be equivalent to a 0 value. However, in both cases
jdaggett@8272 5403 the exact behavior will depend upon the way the font is designed
jdaggett@8272 5404 (specifically, which type of lookup is used to define the feature).
jdaggett@8272 5405
jdaggett@2474 5406 <p>Although specifically defined for OpenType feature tags, feature tags
jdaggett@2474 5407 for other modern font formats that support font features may be added in
jdaggett@5530 5408 the future. Where possible, features defined for other font formats should
jdaggett@5530 5409 attempt to follow the pattern of registered OpenType tags.
jdaggett@2509 5410
jdaggett@1662 5411 <div class=example>
jdaggett@1662 5412 <p>The Japanese text below will be rendered with half-width kana
jdaggett@1662 5413 characters:</p>
jdaggett@1662 5414
jdaggett@1662 5415 <pre lang=ja>
jdaggett@2509 5416 body { font-feature-settings: "hwid"; /* Half-width OpenType feature */ }
jdaggett@1662 5417
jdaggett@1662 5418 &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 5419 </pre>
jdaggett@1662 5420 </div>
jdaggett@1662 5421
jdaggett@2118 5422 <h3 id=font-language-override-prop><span class=secno>6.13 </span>Font
jdaggett@1732 5423 language override: the <a
jdaggett@1732 5424 href="#propdef-font-language-override">font-language-override</a> property</h3>
jdaggett@1732 5425
jdaggett@5809 5426 <table class=propdef id=namefont-language-overridevaluenormal-lt>
jdaggett@1662 5427 <tbody>
jdaggett@1662 5428 <tr>
jdaggett@1662 5429 <td>Name:
jdaggett@1662 5430
jdaggett@1732 5431 <td><dfn id=propdef-font-language-override>font-language-override</dfn>
jdaggett@1662 5432
jdaggett@1662 5433 <tr>
jdaggett@1662 5434 <td>Value:
jdaggett@1662 5435
jdaggett@8278 5436 <td><a href="#font-language-override-normal-value"
jdaggett@8278 5437 title="normal!!font-language-override">normal</a> | <a
jdaggett@8278 5438 href="#font-language-override-string-value"><var>&lt;string&gt;</var></a>
jdaggett@1662 5439
jdaggett@1662 5440 <tr>
jdaggett@1662 5441 <td>Initial:
jdaggett@1662 5442
jdaggett@8278 5443 <td><a href="#font-language-override-normal-value"
jdaggett@8278 5444 title="normal!!font-language-override">normal</a>
jdaggett@1662 5445
jdaggett@1662 5446 <tr>
jdaggett@1662 5447 <td>Applies to:
jdaggett@1662 5448
jdaggett@1662 5449 <td>all elements
jdaggett@1662 5450
jdaggett@1662 5451 <tr>
jdaggett@1662 5452 <td>Inherited:
jdaggett@1662 5453
jdaggett@1662 5454 <td>yes
jdaggett@1662 5455
jdaggett@1662 5456 <tr>
jdaggett@1662 5457 <td>Percentages:
jdaggett@1662 5458
jdaggett@1662 5459 <td>N/A
jdaggett@1662 5460
jdaggett@1662 5461 <tr>
jdaggett@1662 5462 <td>Media:
jdaggett@1662 5463
jdaggett@1662 5464 <td>visual
jdaggett@1662 5465
jdaggett@1662 5466 <tr>
jdaggett@1662 5467 <td>Computed value:
jdaggett@1662 5468
jdaggett@1662 5469 <td>as specified
jdaggett@7377 5470
jdaggett@7377 5471 <tr>
jdaggett@7377 5472 <td>Animatable:
jdaggett@7377 5473
jdaggett@7377 5474 <td>no
jdaggett@1662 5475 </table>
jdaggett@1662 5476
jdaggett@8278 5477 <p>Normally, authors can control the use of language-specific glyph
jdaggett@8278 5478 substitutions and positioning by setting the content language of an
jdaggett@8278 5479 element, as <a href="#language-specific-support">described above</a>:
jdaggett@8278 5480
jdaggett@8278 5481 <pre>&lt;!-- Display text using S'gaw Karen specific features -->
jdaggett@8387 5482 &lt;p lang="ksw">...&lt;/p></pre>
jdaggett@8278 5483
jdaggett@8278 5484 <p>In some cases, authors may need to specify a language system that
jdaggett@8278 5485 differs from the content language, for example due to the need to mimic
jdaggett@8278 5486 another language's typographic traditions. The ‘<a
jdaggett@8278 5487 href="#propdef-font-language-override"><code
jdaggett@8278 5488 class=property>font-language-override</code></a>’ property allows
jdaggett@8278 5489 authors to explicitly specify the language system of the font, overriding
jdaggett@8278 5490 the language system implied by the content language.
jdaggett@8278 5491
jdaggett@8278 5492 <p>Values have the following meanings:
jdaggett@8278 5493
jdaggett@8278 5494 <dl>
jdaggett@8278 5495 <dt><dfn id=font-language-override-normal-value
jdaggett@8278 5496 title="normal!!font-language-override">normal</dfn>
jdaggett@8278 5497
jdaggett@8278 5498 <dd>specifies that when rendering with OpenType fonts, the content
jdaggett@8278 5499 language of the element is used to infer the OpenType language system
jdaggett@8278 5500
jdaggett@8278 5501 <dt><dfn
jdaggett@8278 5502 id=font-language-override-string-value><var>&lt;string&gt;</var></dfn>
jdaggett@8278 5503
jdaggett@8368 5504 <dd>single three-letter case-sensitive OpenType <a
jdaggett@8278 5505 href="http://www.microsoft.com/typography/otspec/languagetags.htm">language
jdaggett@8278 5506 system tag</a>, specifies the OpenType language system to be used instead
jdaggett@8278 5507 of the language system implied by the language of the element
jdaggett@8278 5508 </dl>
jdaggett@8385 5509 <!-- For this level, string represents a single language code, there's no concept of "fallback"
jdaggett@8385 5510 http://www.w3.org/2013/06/07-css-minutes.html#item04 -->
jdaggett@1662 5511
jdaggett@8312 5512 <p>Use of invalid OpenType language system tags must not generate a parse
jdaggett@8312 5513 error but must be ignored when doing glyph selection and placement.
jdaggett@8312 5514
jdaggett@1662 5515 <div class=example>
jdaggett@7179 5516 <p>The <a href="http://www.un.org/en/documents/udhr/index.shtml">Universal
jdaggett@1662 5517 Declaration of Human Rights</a> has been translated into a wide variety
jdaggett@1662 5518 of languages. In Turkish, Article 9 of this document might be marked up
jdaggett@1662 5519 as below:</p>
jdaggett@1662 5520
jdaggett@1662 5521 <pre lang=tr>&lt;body lang="tr">
jdaggett@1662 5522
jdaggett@1662 5523 &lt;h4>Madde 9&lt;/h4>
jdaggett@1662 5524 &lt;p>Hiç kimse keyfi olarak tutuklanamaz, alıkonulanamaz veya sürülemez.&lt;/p>
jdaggett@1662 5525 </pre>
jdaggett@1662 5526
jdaggett@1662 5527 <p>Here the user agent uses the value of the ‘<code
jdaggett@1662 5528 class=property>lang</code>’ attribute when rendering text and
jdaggett@1662 5529 appropriately renders this text without ‘<code
jdaggett@4624 5530 class=property>fi</code>’ ligatures. There is no need to use the ‘<a
jdaggett@4624 5531 href="#propdef-font-language-override"><code
jdaggett@4624 5532 class=property>font-language-override</code></a>’ property.</p>
jdaggett@1662 5533
jdaggett@1662 5534 <p>However, a given font may lack support for a specific language. In this
jdaggett@1662 5535 situation authors may need to use the typographic conventions of a
jdaggett@1662 5536 related language that are supported by that font:</p>
jdaggett@1662 5537
jdaggett@1662 5538 <pre lang=mk>&lt;body lang="mk"> &lt;!-- Macedonian lang code --&gt;
jdaggett@1662 5539
jdaggett@1732 5540 body { font-language-override: "SRB"; /* Serbian OpenType language tag */ }
jdaggett@1662 5541
jdaggett@1662 5542 &lt;h4>Члeн 9&lt;/h4>
jdaggett@1662 5543 &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 5544
jdaggett@1662 5545 </pre>
jdaggett@1662 5546
jdaggett@1662 5547 <p>The Macedonian text here will be rendered using Serbian typographic
jdaggett@1662 5548 conventions, with the assumption that the font specified supports
jdaggett@1662 5549 Serbian.</p>
jdaggett@1662 5550 </div>
jdaggett@1662 5551
jdaggett@6176 5552 <p><a id=rendering-considerations></a>
jdaggett@6176 5553
jdaggett@6699 5554 <h2 id=font-feature-resolution><span class=secno>7 </span>Font Feature
jdaggett@6699 5555 Resolution</h2>
jdaggett@6176 5556
jdaggett@6176 5557 <p>As described in the previous section, font features can be enabled in a
jdaggett@8278 5558 variety of ways, either via the use of <a href="#propdef-font-variant"
jdaggett@8278 5559 title="font-variant!!property">‘<code
jdaggett@8279 5560 class=property>font-variant</code>’</a> or <a
jdaggett@8279 5561 href="#propdef-font-feature-settings"
jdaggett@8279 5562 title="font-feature-settings!!property">‘<code
jdaggett@8279 5563 class=property>font-feature-settings</code>’</a> in a style rule or
jdaggett@8311 5564 within an <a href="#at-font-face-rule"><code>@font-face</code></a> rule.
jdaggett@8311 5565 The resolution order for the union of these settings is defined below.
jdaggett@8311 5566 Features defined via CSS properties are applied on top of layout engine
jdaggett@8311 5567 default features.
jdaggett@6176 5568
jdaggett@6699 5569 <h3 id=default-features><span class=secno>7.1 </span>Default features</h3>
jdaggett@6699 5570
jdaggett@6176 5571 <p>For OpenType fonts, user agents must enable the default features defined
jdaggett@6436 5572 in the OpenType documentation for a given script and writing mode.
jdaggett@6436 5573 Required ligatures, common ligatures and contextual forms must be enabled
jdaggett@6436 5574 by default (OpenType features: <span class=tag>rlig, liga, clig,
jdaggett@6436 5575 calt</span>), along with localized forms (OpenType feature: <span
jdaggett@6436 5576 class=tag>locl</span>), and features required for proper display of
jdaggett@6436 5577 composed characters and marks (OpenType features: <span class=tag>ccmp,
jdaggett@6436 5578 mark, mkmk</span>). These features must always be enabled, even when the
jdaggett@8278 5579 value of the <a href="#propdef-font-variant"
jdaggett@8278 5580 title="font-variant!!property">‘<code
jdaggett@8279 5581 class=property>font-variant</code>’</a> and <a
jdaggett@8279 5582 href="#propdef-font-feature-settings"
jdaggett@8279 5583 title="font-feature-settings!!property">‘<code
jdaggett@8368 5584 class=property>font-feature-settings</code>’</a> properties is <span
jdaggett@8368 5585 title="normal value">‘<code class=property>normal</code>’</span>.
jdaggett@8368 5586 Individual features are only disabled when explicitly overridden by the
jdaggett@8368 5587 author, as when ‘<a href="#propdef-font-variant-ligatures"><code
jdaggett@6176 5588 class=property>font-variant-ligatures</code></a>’ is set to ‘<a
jdaggett@6176 5589 href="#no-common-ligatures"><code
jdaggett@7377 5590 class=property>no-common-ligatures</code></a>’. For handling complex
jdaggett@7377 5591 scripts such as <a
jdaggett@6176 5592 href="http://www.microsoft.com/typography/otfntdev/arabicot/features.aspx">Arabic</a>,
jdaggett@6176 5593 <a
jdaggett@6176 5594 href="http://www.microsoft.com/typography/otfntdev/mongolot/features.htm">Mongolian</a>
jdaggett@6176 5595 or <a
jdaggett@6176 5596 href="http://www.microsoft.com/typography/otfntdev/devanot/features.aspx">Devanagari</a>
jdaggett@6436 5597 additional features are required. For upright text within vertical text
jdaggett@6436 5598 runs, vertical alternates (OpenType feature: <span class=tag>vert</span>)
jdaggett@6436 5599 must be enabled.
jdaggett@1662 5600
jdaggett@6699 5601 <h3 id=feature-precedence><span class=secno>7.2 </span>Feature precedence</h3>
jdaggett@6699 5602
jdaggett@8356 5603 <p>General and <a href="#font-specific"><em>font specific</em></a> font
jdaggett@8356 5604 feature property settings are resolved in the order below, in ascending
jdaggett@8360 5605 order of precedence. This ordering is used to construct a combined list of
jdaggett@8356 5606 font features that affect a given text run.
jdaggett@1662 5607
jdaggett@1662 5608 <ol>
jdaggett@6436 5609 <li>Font features enabled by default, including features required for a
jdaggett@6436 5610 given script.
jdaggett@6176 5611
jdaggett@8311 5612 <li>If the font is defined via an <a
jdaggett@8311 5613 href="#at-font-face-rule"><code>@font-face</code></a> rule, the font
jdaggett@8311 5614 features implied by the font-variant descriptor in the <a
jdaggett@8311 5615 href="#at-font-face-rule"><code>@font-face</code></a> rule.
jdaggett@8311 5616
jdaggett@8311 5617 <li>If the font is defined via an <a
jdaggett@8311 5618 href="#at-font-face-rule"><code>@font-face</code></a> rule, the font
jdaggett@8311 5619 features implied by the font-feature-settings descriptor in the <a
jdaggett@8311 5620 href="#at-font-face-rule"><code>@font-face</code></a> rule.
jdaggett@1662 5621
jdaggett@8804 5622 <li>Font features implied by the value of the <a
jdaggett@8804 5623 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8804 5624 class=property>font-variant</code>’</a> property, the related <a
jdaggett@8804 5625 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8804 5626 class=property>font-variant</code>’</a> subproperties and any other CSS
jdaggett@8804 5627 property that uses OpenType features (e.g. the ‘<a
jdaggett@8804 5628 href="#propdef-font-kerning"><code
jdaggett@8804 5629 class=property>font-kerning</code></a>’ property).</li>
jdaggett@8804 5630 <!-- other CSS props override 'font-variant' but not 'font-feature-settings' -->
jdaggett@8804 5631 <!-- http://lists.w3.org/Archives/Public/www-style/2013Aug/0110.html -->
jdaggett@8804 5632
jdaggett@8278 5633 <li>Feature settings determined by properties other than <a
jdaggett@8278 5634 href="#propdef-font-variant" title="font-variant!!property">‘<code
jdaggett@8279 5635 class=property>font-variant</code>’</a> or <a
jdaggett@8279 5636 href="#propdef-font-feature-settings"
jdaggett@8279 5637 title="font-feature-settings!!property">‘<code
jdaggett@8279 5638 class=property>font-feature-settings</code>’</a>. For example, setting
jdaggett@8279 5639 a non-default value for the ‘<code
jdaggett@8360 5640 class=property>letter-spacing</code>’ property disables common
jdaggett@8360 5641 ligatures.
jdaggett@6176 5642
jdaggett@8279 5643 <li>Font features implied by the value of <a
jdaggett@8279 5644 href="#propdef-font-feature-settings"
jdaggett@8279 5645 title="font-feature-settings!!property">‘<code
jdaggett@8279 5646 class=property>font-feature-settings</code>’</a> property.
jdaggett@1662 5647 </ol>
jdaggett@1662 5648
jdaggett@3511 5649 <p>This ordering allows authors to set up a general set of defaults for
jdaggett@8311 5650 fonts within their <a
jdaggett@8311 5651 href="#at-font-face-rule"><code>@font-face</code></a> rules, then override
jdaggett@8311 5652 them with property settings for specific elements. General property
jdaggett@8311 5653 settings override the settings in <a
jdaggett@8311 5654 href="#at-font-face-rule"><code>@font-face</code></a> rules and low-level
jdaggett@8311 5655 font feature settings override <a href="#propdef-font-variant"
jdaggett@8278 5656 title="font-variant!!property">‘<code
jdaggett@8278 5657 class=property>font-variant</code>’</a> property settings.
jdaggett@1732 5658
jdaggett@1732 5659 <p>For situations where the combined list of font feature settings contains
jdaggett@3511 5660 more than one value for the same feature, the last value is used. When a
jdaggett@3511 5661 font lacks support for a given underlying font feature, text is simply
jdaggett@3511 5662 rendered as if that font feature was not enabled; font fallback does not
jdaggett@3511 5663 occur and no attempt is made to synthesize the feature except where
jdaggett@8360 5664 explicitly defined for specific properties.
jdaggett@1662 5665
jdaggett@6699 5666 <h3 id=feature-precedence-examples><span class=secno>7.3 </span>Feature
jdaggett@6699 5667 precedence examples</h3>
jdaggett@6699 5668
jdaggett@1662 5669 <div class=example>
jdaggett@1662 5670 <p>With the styles below, numbers are rendered proportionally when used
jdaggett@1662 5671 within a paragraph but are shown in tabular form within tables of prices:</p>
jdaggett@1662 5672
jdaggett@8277 5673 <pre>body {
jdaggett@8277 5674 font-variant-numeric: proportional-nums;
jdaggett@1662 5675 }
jdaggett@1662 5676
jdaggett@1662 5677 table.prices td {
jdaggett@8277 5678 font-variant-numeric: tabular-nums;
jdaggett@1662 5679 }
jdaggett@1662 5680 </pre>
jdaggett@1662 5681 </div>
jdaggett@1662 5682
jdaggett@1662 5683 <div class=example>
jdaggett@8360 5684 <p>When the <a href="#descdef-font-variant"
jdaggett@8360 5685 title="font-variant!!descriptor">font-variant</a> descriptor is used
jdaggett@8360 5686 within an <a href="#at-font-face-rule"><code>@font-face</code></a> rule,
jdaggett@8360 5687 it only applies to the font defined by that rule.</p>
jdaggett@1662 5688
jdaggett@1662 5689 <pre>@font-face {
jdaggett@1662 5690 font-family: MainText;
jdaggett@8860 5691 src: url(http://example.com/font.woff);
jdaggett@1662 5692 font-variant: oldstyle-nums proportional-nums styleset(1,3);
jdaggett@1662 5693 }
jdaggett@1662 5694
jdaggett@1662 5695 body {
jdaggett@1662 5696 font-family: MainText, Helvetica;
jdaggett@1662 5697 }
jdaggett@1662 5698
jdaggett@1662 5699 table.prices td {
jdaggett@8277 5700 font-variant-numeric: tabular-nums;
jdaggett@1662 5701 }
jdaggett@1662 5702 </pre>
jdaggett@1662 5703
jdaggett@1662 5704 <p>In this case, old-style numerals will be used throughout but only where
jdaggett@1662 5705 the font "MainText" is used. Just as in the previous example, tabular
jdaggett@4624 5706 values will be used in price tables since ‘<a
jdaggett@4624 5707 href="#tabular-nums"><code class=property>tabular-nums</code></a>’
jdaggett@4624 5708 appears in a general style rule and its use is mutually exclusive with
jdaggett@4624 5709 ‘<a href="#proportional-nums"><code
jdaggett@4624 5710 class=property>proportional-nums</code></a>’. Stylistic alternate sets
jdaggett@4624 5711 will only be used where MainText is used.</p>
jdaggett@1662 5712 </div>
jdaggett@1662 5713
jdaggett@1662 5714 <div class=example>
jdaggett@8311 5715 <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule can
jdaggett@8311 5716 also be used to access font features in locally available fonts via the
jdaggett@8311 5717 use of <code>local()</code> in the ‘<a href="#descdef-src"><code
jdaggett@8311 5718 class=property>src</code></a>’ descriptor of the <a
jdaggett@8311 5719 href="#at-font-face-rule"><code>@font-face</code></a> definition:</p>
jdaggett@1662 5720
jdaggett@1662 5721 <pre>@font-face {
jdaggett@1662 5722 font-family: BodyText;
jdaggett@1662 5723 src: local("HiraMaruPro-W4");
jdaggett@1662 5724 font-variant: proportional-width;
jdaggett@2509 5725 font-feature-settings: "ital"; /* Latin italics within CJK text feature */
jdaggett@1662 5726 }
jdaggett@1662 5727
jdaggett@1662 5728 body { font-family: BodyText, serif; }
jdaggett@1662 5729 </pre>
jdaggett@1662 5730
jdaggett@1662 5731 <p>If available, a Japanese font "Hiragino Maru Gothic" will be used. When
jdaggett@1662 5732 text rendering occurs, Japanese kana will be proportionally spaced and
jdaggett@1662 5733 Latin text will be italicised. Text rendered with the fallback serif font
jdaggett@1662 5734 will use default rendering properties.</p>
jdaggett@1662 5735 </div>
jdaggett@1662 5736
jdaggett@1662 5737 <div class=example>
jdaggett@3460 5738 <p>In the example below, discretionary ligatures are enabled only for a
jdaggett@1662 5739 downloadable font but are disabled within spans of class "special":</p>
jdaggett@1662 5740
jdaggett@1662 5741 <pre>@font-face {
jdaggett@1662 5742 font-family: main;
jdaggett@1662 5743 src: url(fonts/ffmeta.woff) format("woff");
jdaggett@3460 5744 font-variant: discretionary-ligatures;
jdaggett@1662 5745 }
jdaggett@1662 5746
jdaggett@1662 5747 body { font-family: main, Helvetica; }
jdaggett@3460 5748 span.special { font-variant-ligatures: no-discretionary-ligatures; }
jdaggett@1662 5749 </pre>
jdaggett@1662 5750
jdaggett@8360 5751 <p>Suppose one adds a rule using ‘<code
jdaggett@8360 5752 class=property>font-feature-settings</code>’ to enable discretionary
jdaggett@8360 5753 ligatures:</p>
jdaggett@1662 5754
jdaggett@1662 5755 <pre>body { font-family: main, Helvetica; }
jdaggett@2509 5756 span { font-feature-settings: "dlig"; }
jdaggett@3460 5757 span.special { font-variant-ligatures: no-discretionary-ligatures; }
jdaggett@1662 5758 </pre>
jdaggett@1662 5759
jdaggett@8360 5760 <p>In this case, discretionary ligatures <em>will</em> be rendered within
jdaggett@8360 5761 spans of class "special". This is because both the <a
jdaggett@8279 5762 href="#propdef-font-feature-settings"
jdaggett@8279 5763 title="font-feature-settings!!property">‘<code
jdaggett@8279 5764 class=property>font-feature-settings</code>’</a> and ‘<a
jdaggett@4624 5765 href="#propdef-font-variant-ligatures"><code
jdaggett@4624 5766 class=property>font-variant-ligatures</code></a>’ properties apply to
jdaggett@4624 5767 these spans. Although the ‘<code class=css>no-discretionary
jdaggett@4624 5768 ligatures</code>’ setting of ‘<a
jdaggett@4624 5769 href="#propdef-font-variant-ligatures"><code
jdaggett@4624 5770 class=property>font-variant-ligatures</code></a>’ effectively disables
jdaggett@8279 5771 the OpenType <span class=tag>dlig</span> feature, because the <a
jdaggett@8279 5772 href="#propdef-font-feature-settings"
jdaggett@8279 5773 title="font-feature-settings!!property">‘<code
jdaggett@8279 5774 class=property>font-feature-settings</code>’</a> is resolved after
jdaggett@8279 5775 that, the ‘<code class=property>dlig</code>’ value reenables
jdaggett@4624 5776 discretionary ligatures.</p>
jdaggett@1662 5777 </div>
jdaggett@1244 5778
jdaggett@7021 5779 <h2 id=object-model><span class=secno>8 </span>Object Model</h2>
jdaggett@7021 5780
jdaggett@8311 5781 <p>The contents of <a href="#at-font-face-rule"><code>@font-face</code></a>
jdaggett@8311 5782 and <a
jdaggett@8311 5783 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8311 5784 rules can be accessed via the following extensions to the CSS Object
jdaggett@8311 5785 Model.
jdaggett@7021 5786
jdaggett@7021 5787 <h3 id=om-fontface><span class=secno>8.1 </span>The <a
jdaggett@7021 5788 href="#cssfontfacerule"><code>CSSFontFaceRule</code></a> interface</h3>
jdaggett@7021 5789
jdaggett@7021 5790 <p>The <dfn id=cssfontfacerule>CSSFontFaceRule</dfn> interface represents a
jdaggett@8311 5791 <a href="#at-font-face-rule"><code>@font-face</code></a> rule.
jdaggett@7021 5792
jdaggett@7021 5793 <pre class=idl>
jdaggett@7021 5794 interface CSSFontFaceRule : CSSRule {
jdaggett@7041 5795 attribute DOMString family;
jdaggett@7041 5796 attribute DOMString src;
jdaggett@7041 5797 attribute DOMString style;
jdaggett@7041 5798 attribute DOMString weight;
jdaggett@7041 5799 attribute DOMString stretch;
jdaggett@7041 5800 attribute DOMString unicodeRange;
jdaggett@7041 5801 attribute DOMString variant;
jdaggett@7041 5802 attribute DOMString featureSettings;
jdaggett@7021 5803 }</pre>
jdaggett@7021 5804
jdaggett@7022 5805 <p>The DOM Level 2 Style specification <a href="#DOM-LEVEL-2-STYLE"
jdaggett@7022 5806 rel=biblioentry>[DOM-LEVEL-2-STYLE]<!--{{DOM-LEVEL-2-STYLE}}--></a>
jdaggett@7022 5807 defined a different variant of this rule. This definition supercedes that
jdaggett@7022 5808 one.
jdaggett@7021 5809
jdaggett@7021 5810 <h3 id=om-fontfeaturevalues><span class=secno>8.2 </span>The <a
jdaggett@7021 5811 href="#cssfontfeaturevaluesrule"><code>CSSFontFeatureValuesRule</code></a>
jdaggett@7021 5812 interface</h3>
jdaggett@7021 5813
jdaggett@7021 5814 <p>The <code>CSSRule</code> interface is extended as follows:
jdaggett@7021 5815
jdaggett@7021 5816 <pre class=idl>partial interface CSSRule {
jdaggett@7021 5817 const unsigned short FONT_FEATURE_VALUES_RULE = 14;
jdaggett@7021 5818 }</pre>
jdaggett@7021 5819
jdaggett@7021 5820 <p>The <dfn id=cssfontfeaturevaluesrule>CSSFontFeatureValuesRule</dfn>
jdaggett@8311 5821 interface represents a <a
jdaggett@8311 5822 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8311 5823 rule.
jdaggett@7021 5824
jdaggett@7021 5825 <pre class=idl>interface CSSFontFeatureValuesRule : CSSRule {
jdaggett@8640 5826 attribute DOMString fontFamily;
jdaggett@8640 5827 readonly attribute CSSFontFeatureValuesMap annotation;
jdaggett@8640 5828 readonly attribute CSSFontFeatureValuesMap ornaments;
jdaggett@8640 5829 readonly attribute CSSFontFeatureValuesMap stylistic;
jdaggett@8640 5830 readonly attribute CSSFontFeatureValuesMap swash;
jdaggett@8640 5831 readonly attribute CSSFontFeatureValuesMap characterVariant;
jdaggett@8640 5832 readonly attribute CSSFontFeatureValuesMap styleset;
jdaggett@8640 5833 }
jdaggett@8640 5834
jdaggett@8640 5835 [MapClass(DOMString, sequence&lt;unsigned long&gt;)]
jdaggett@8640 5836 interface CSSFontFeatureValuesMap {
jdaggett@8646 5837 void set(DOMString featureValueName,
jdaggett@8646 5838 (unsigned long or sequence&lt;unsigned long&gt;) values);
jdaggett@8640 5839 }</pre>
jdaggett@7021 5840
jdaggett@7021 5841 <dl class=idl-attributes>
jdaggett@8640 5842 <dt><var>fontFamily</var> of type <code>DOMString</code>
jdaggett@7021 5843
jdaggett@7021 5844 <dd>The list of one or more font families for which a given set of feature
jdaggett@7021 5845 values is defined.
jdaggett@7021 5846
jdaggett@8640 5847 <dt>value maps of type <code>CSSFontFeatureValuesMap</code>, readonly
jdaggett@8640 5848
jdaggett@8640 5849 <dd>Maps of feature values associated with feature value names for a given
jdaggett@8640 5850 ‘<a href="#propdef-font-variant-alternates"><code
jdaggett@8640 5851 class=property>font-variant-alternates</code></a>’ value type
jdaggett@7021 5852 </dl>
jdaggett@7021 5853
jdaggett@8640 5854 <p>Each value map attribute of <a
jdaggett@8640 5855 href="#cssfontfeaturevaluesrule"><code>CSSFontFeatureValuesRule</code></a>
jdaggett@8640 5856 reflects the values defined via a corresponding <a
jdaggett@8640 5857 href="#featurevalueblock"><i title="feature_value_block">feature value
jdaggett@8640 5858 block</i></a>. Thus, the <var title="annotation
jdaggett@8640 5859 attribute">annotation</var> attribute contains the values contained within
jdaggett@8640 5860 a <code title="@annotation">@annotation</code> <a
jdaggett@8640 5861 href="#featurevalueblock"><i title="feature_value_block">feature value
jdaggett@8640 5862 block</i></a>, the <var title="ornaments attribute">ornaments</var>
jdaggett@8640 5863 attribute contains the values contained with a <code
jdaggett@8640 5864 title="@ornaments">@ornaments</code> <a href="#featurevalueblock"><i
jdaggett@8640 5865 title="feature_value_block">feature value block</i></a> and so forth.
jdaggett@8640 5866
jdaggett@8654 5867 <p>The <code>CSSFontFeatureValuesMap</code> interface uses the <a
jdaggett@8655 5868 href="http://dev.w3.org/2006/webapi/WebIDL/#es-map-members">default map
jdaggett@8655 5869 class methods</a> but the <code>set</code> method has different behavior.
jdaggett@8655 5870 It takes a sequence of unsigned integers and associates it with a given
jdaggett@8654 5871 <code>featureValueName</code>. The method behaves the same as the default
jdaggett@8654 5872 map class method except that a single unsigned long value is treated as a
jdaggett@8654 5873 sequence of a single value. The method throws an exception if an invalid
jdaggett@8654 5874 number of values is passed in. If the associated <a
jdaggett@8654 5875 href="#featurevalueblock"><i title="feature_value_block">feature value
jdaggett@8640 5876 block</i></a> only allows a limited number of values, the <code>set</code>
jdaggett@8640 5877 method throws an <code>InvalidAccessError</code> exception when the input
jdaggett@8653 5878 sequence to <code>set</code> contains more than the limited number of
jdaggett@8653 5879 values. See the description of <a
jdaggett@8640 5880 href="#multi-valued-feature-value-definitions">multi-valued feature value
jdaggett@8640 5881 definitions</a> for details on the maximum number of values allowed for a
jdaggett@8640 5882 given type of <a href="#featurevalueblock"><i
jdaggett@8646 5883 title="feature_value_block">feature value block</i></a>. The
jdaggett@8653 5884 <code>get</code> method always returns a sequence of values, even if the
jdaggett@8653 5885 sequence only contains a single value.
jdaggett@8279 5886
jdaggett@2737 5887 <h2 class=no-num id=platform-props-to-css>Appendix A: Mapping platform font
jdaggett@1662 5888 properties to CSS properties</h2>
jdaggett@1662 5889
jdaggett@1662 5890 <p><em>This appendix is included as background for some of the problems and
jdaggett@890 5891 situations that are described in other sections. It should be viewed as
jdaggett@890 5892 informative only.</em>
jdaggett@890 5893
jdaggett@512 5894 <p>Font properties in CSS are designed to be independent of the underlying
jdaggett@512 5895 font formats used; they can be used to specify bitmap fonts, Type1 fonts,
jdaggett@890 5896 SVG fonts in addition to the common TrueType and OpenType fonts. But there
jdaggett@1244 5897 are facets of the TrueType and OpenType formats that often cause confusion
jdaggett@2556 5898 for authors and present challenges to implementers on different platforms.
jdaggett@1244 5899
jdaggett@1244 5900 <p>Originally developed at Apple, TrueType was designed as an outline font
jdaggett@1244 5901 format for both screen and print. Microsoft joined Apple in developing the
jdaggett@1244 5902 TrueType format and both platforms have supported TrueType fonts since
jdaggett@1244 5903 then. Font data in the TrueType format consists of a set of tables
jdaggett@1244 5904 distinguished with common four-letter tag names, each containing a
jdaggett@1244 5905 specific type of data. For example, naming information, including
jdaggett@1244 5906 copyright and license information, is stored in the ‘<code
jdaggett@7311 5907 class=property>name</code>’ table. The <a
jdaggett@7311 5908 href="#character-map"><em>character map</em></a> (‘<code
jdaggett@1244 5909 class=property>cmap</code>’) table contains a mapping of character
jdaggett@1244 5910 encodings to glyphs. Apple later added additional tables for supporting
jdaggett@1244 5911 enhanced typographic functionality; these are now called Apple Advanced
jdaggett@1244 5912 Typography, or AAT, fonts. Microsoft and Adobe developed a separate set of
jdaggett@1662 5913 tables for advanced typography and called their format OpenType <a
jdaggett@1662 5914 href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>.
jdaggett@890 5915
jdaggett@890 5916 <p>In many cases the font data used under Microsoft Windows or Linux is
jdaggett@890 5917 slightly different from the data used under Apple's Mac OS X because the
jdaggett@6694 5918 TrueType format allowed for explicit variation across platforms. This
jdaggett@7311 5919 includes font metrics, names and <a href="#character-map"><em>character
jdaggett@7311 5920 map</em></a> data.
jdaggett@6694 5921
jdaggett@6694 5922 <p>Specifically, font family name data is handled differently across
jdaggett@6694 5923 platforms. For TrueType and OpenType fonts these names are contained in
jdaggett@6694 5924 the ‘<code class=property>name</code>’ table, in name records with
jdaggett@8276 5925 name ID 1. Mulitple names can be stored for different locales, but
jdaggett@6694 5926 Microsoft recommends fonts always include at least a US English version of
jdaggett@6694 5927 the name. On Windows, Microsoft made the decision for backwards
jdaggett@6694 5928 compatibility to limit this family name to a maximum of four faces; for
jdaggett@6694 5929 larger groupings the "preferred family" (name ID 16) or "WWS family" (name
jdaggett@6694 5930 ID 21) can be used. Other platforms such as OSX don't have this
jdaggett@8276 5931 limitation, so the family name is used to define all possible groupings.
jdaggett@6694 5932
jdaggett@6694 5933 <p>Other name table data provides names used to uniquely identify a
jdaggett@6694 5934 specific face within a family. The full font name (name ID 4) and the
jdaggett@8276 5935 Postscript name (name ID 6) describe a single face uniquely. For example,
jdaggett@8276 5936 the bold face of the Gill Sans family has a fullname of "Gill Sans Bold"
jdaggett@8276 5937 and a Postscript name of "GillSans-Bold". There can be multiple localized
jdaggett@8276 5938 versions of the fullname for a given face, but the Postscript name is
jdaggett@1244 5939 always a unique name made from a limited set of ASCII characters.
jdaggett@1244 5940
jdaggett@1244 5941 <p>On various platforms, different names are used to search for a font. For
jdaggett@1244 5942 example, with the Windows GDI CreateIndirectFont API, either a family or
jdaggett@8276 5943 fullname can be used to lookup a face, while on Mac OS X the
jdaggett@8095 5944 CTFontCreateWithName API call is used to lookup a given face using the
jdaggett@8095 5945 fullname and Postscript name. Under Linux, the fontconfig API allows fonts
jdaggett@8095 5946 to be searched using any of these names. In situations where platform
jdaggett@8095 5947 API's automatically substitute other font choices, it may be necessary to
jdaggett@8095 5948 verify a returned font matches a given name.
jdaggett@1244 5949
jdaggett@1244 5950 <p>The weight of a given face can be determined via the usWeightClass field
jdaggett@1244 5951 of the OS/2 table or inferred from the style name (name ID 2). Likewise,
jdaggett@1244 5952 the width can be determined via the usWidthClass of the OS/2 table or
jdaggett@6694 5953 inferred from the style name. For historical reasons related to synthetic
jdaggett@6694 5954 bolding at weights 200 or lower with the Windows GDI API, font designers
jdaggett@6694 5955 have sometimes skewed values in the OS/2 table to avoid these weights.
jdaggett@1244 5956
jdaggett@1244 5957 <p>Rendering complex scripts that use contextual shaping such as Thai,
jdaggett@1244 5958 Arabic and Devanagari requires features present only in OpenType or AAT
jdaggett@1244 5959 fonts. Currently, complex script rendering is supported on Windows and
jdaggett@7521 5960 Linux using OpenType font features while both OpenType and AAT font
jdaggett@7521 5961 features are used under Mac OS X.
jdaggett@1244 5962
jdaggett@2472 5963 <h2 class=no-num id=ch-ch-ch-changes>Changes</h2>
jdaggett@2472 5964
jdaggett@2472 5965 <h3 class=no-num id=recent-changes> Changes from the <a
jdaggett@8699 5966 href="http://www.w3.org/TR/2013/WD-css-fonts-3-20130711/">July 2013 CSS3
jdaggett@8699 5967 Fonts Last Call Working Draft</a></h3>
jdaggett@2472 5968
jdaggett@2472 5969 <ul>
jdaggett@8804 5970 <li>reorder feature precedence such that features implied by other CSS
jdaggett@8804 5971 properties override ‘<code class=property>font-variant</code>’
jdaggett@8804 5972 settings
jdaggett@8860 5973
jdaggett@8860 5974 <li>switched examples to use .woff files
jdaggett@8860 5975
jdaggett@8872 5976 <li>revised wording of font fetching algorithm
jdaggett@8872 5977
jdaggett@8968 5978 <li>drop ‘<code class=property>auto</code>’ value for ‘<a
jdaggett@8968 5979 href="#propdef-font-size-adjust"><code
jdaggett@8930 5980 class=property>font-size-adjust</code></a>’
jdaggett@8930 5981
jdaggett@8968 5982 <li>clarify effect of ‘<a href="#propdef-font-size-adjust"><code
jdaggett@8968 5983 class=property>font-size-adjust</code></a>’ on <a class=property
jdaggett@8968 5984 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
jdaggett@8968 5985 class=property>line-height</code>’</a>
jdaggett@8968 5986
jdaggett@8930 5987 <li>allow user agents to synthesize OpenType <span class=tag>kern</span>
jdaggett@8930 5988 feature
jdaggett@8930 5989
jdaggett@8984 5990 <li>add example of ordinals and associated markup
jdaggett@8984 5991
jdaggett@8860 5992 <li>minor editorial cleanups
jdaggett@2472 5993 </ul>
jdaggett@2472 5994
jdaggett@529 5995 <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
jdaggett@529 5996
jdaggett@1662 5997 <p>I'd like to thank Tal Leming, Jonathan Kew and Christopher Slye for all
jdaggett@1662 5998 their help and feedback. John Hudson was kind enough to take the time to
jdaggett@2472 5999 explain the subtleties of OpenType language tags and provided the example
jdaggett@2472 6000 of character variant usage for displaying text on Byzantine seals. Ken
jdaggett@2472 6001 Lunde and Eric Muller provided valuable feedback on CJK OpenType features
jdaggett@2472 6002 and Unicode variation selectors. The idea for supporting font features by
jdaggett@8313 6003 using <a href="#propdef-font-variant"
jdaggett@8313 6004 title="font-variant!!property">‘<code
jdaggett@8313 6005 class=property>font-variant</code>’</a> subproperties originated with
jdaggett@8313 6006 Håkon Wium Lie, Adam Twardoch and Tal Leming. Elika Etemad supplied some
jdaggett@8313 6007 of the initial design ideas for the <a
jdaggett@8311 6008 href="#at-font-feature-values-rule"><code>@font-feature-values</code></a>
jdaggett@8311 6009 rule. Thanks also to House Industries for allowing the use of Ed Interlock
jdaggett@8311 6010 in the discretionary ligatures example.
jdaggett@1662 6011
jdaggett@529 6012 <p>A special thanks to Robert Bringhurst for the sublime mind expansion
jdaggett@529 6013 that is <em>The Elements of Typographic Style</em>.
jdaggett@529 6014
jdaggett@7242 6015 <h2 class=no-num id=conformance> Conformance</h2>
jdaggett@7242 6016
jdaggett@7242 6017 <h3 class=no-num id=conventions> Document Conventions</h3>
jdaggett@7242 6018
jdaggett@7242 6019 <p>Conformance requirements are expressed with a combination of descriptive
jdaggett@7242 6020 assertions and RFC 2119 terminology. The key words “MUST”, “MUST
jdaggett@7242 6021 NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
jdaggett@7242 6022 “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
jdaggett@7242 6023 normative parts of this document are to be interpreted as described in RFC
jdaggett@7242 6024 2119. However, for readability, these words do not appear in all uppercase
jdaggett@7242 6025 letters in this specification.
jdaggett@7242 6026
jdaggett@7242 6027 <p>All of the text of this specification is normative except sections
jdaggett@7242 6028 explicitly marked as non-normative, examples, and notes. <a
jdaggett@7242 6029 href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
jdaggett@7242 6030
jdaggett@7242 6031 <p>Examples in this specification are introduced with the words “for
jdaggett@7242 6032 example” or are set apart from the normative text with
jdaggett@7242 6033 <code>class="example"</code>, like this:
jdaggett@7242 6034
jdaggett@7242 6035 <div class=example>
jdaggett@7242 6036 <p>This is an example of an informative example.
jdaggett@7242 6037 </div>
jdaggett@7242 6038
jdaggett@7242 6039 <p>Informative notes begin with the word “Note” and are set apart from
jdaggett@7242 6040 the normative text with <code>class="note"</code>, like this:
jdaggett@7242 6041
jdaggett@7242 6042 <p class=note>Note, this is an informative note.
jdaggett@7242 6043
jdaggett@7242 6044 <h3 class=no-num id=conformance-classes> Conformance Classes</h3>
jdaggett@7242 6045
jdaggett@7242 6046 <p>Conformance to CSS Fonts Level 3 Module is defined for three conformance
jdaggett@7242 6047 classes:
jdaggett@7242 6048
jdaggett@7242 6049 <dl>
jdaggett@7243 6050 <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
jdaggett@7242 6051 sheet</dfn>
jdaggett@7242 6052
jdaggett@7242 6053 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
jdaggett@7242 6054 style sheet</a>.
jdaggett@7242 6055
jdaggett@7243 6056 <dt><dfn id=renderer>renderer</dfn>
jdaggett@7242 6057
jdaggett@7242 6058 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
jdaggett@7242 6059 that interprets the semantics of a style sheet and renders documents that
jdaggett@7242 6060 use them.
jdaggett@7242 6061
jdaggett@7242 6062 <dt><dfn id=authoring-tool>authoring tool</dfn>
jdaggett@7242 6063
jdaggett@7242 6064 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
jdaggett@7242 6065 that writes a style sheet.
jdaggett@7242 6066 </dl>
jdaggett@7242 6067
jdaggett@7242 6068 <p>A style sheet is conformant to CSS Fonts Level 3 Module if all of its
jdaggett@7242 6069 declarations that use properties defined in this module have values that
jdaggett@7242 6070 are valid according to the generic CSS grammar and the individual grammars
jdaggett@7242 6071 of each property as given in this module.
jdaggett@7242 6072
jdaggett@7242 6073 <p>A renderer is conformant to CSS Fonts Level 3 Module if, in addition to
jdaggett@7242 6074 interpreting the style sheet as defined by the appropriate specifications,
jdaggett@7242 6075 it supports all the features defined by CSS Fonts Level 3 Module by
jdaggett@7242 6076 parsing them correctly and rendering the document accordingly. However,
jdaggett@7242 6077 the inability of a UA to correctly render a document due to limitations of
jdaggett@7242 6078 the device does not make the UA non-conformant. (For example, a UA is not
jdaggett@7242 6079 required to render color on a monochrome monitor.)
jdaggett@7242 6080
jdaggett@7242 6081 <p>An authoring tool is conformant to CSS Fonts Level 3 Module if it writes
jdaggett@7242 6082 style sheets that are syntactically correct according to the generic CSS
jdaggett@7242 6083 grammar and the individual grammars of each feature in this module, and
jdaggett@7242 6084 meet all other conformance requirements of style sheets as described in
jdaggett@7242 6085 this module.
jdaggett@7242 6086
jdaggett@7242 6087 <h3 class=no-num id=partial> Partial Implementations</h3>
jdaggett@7242 6088
jdaggett@7242 6089 <p>So that authors can exploit the forward-compatible parsing rules to
jdaggett@7242 6090 assign fallback values, CSS renderers <strong>must</strong> treat as
jdaggett@7242 6091 invalid (and <a
jdaggett@7242 6092 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
jdaggett@7242 6093 appropriate</a>) any at-rules, properties, property values, keywords, and
jdaggett@7242 6094 other syntactic constructs for which they have no usable level of support.
jdaggett@7242 6095 In particular, user agents <strong>must not</strong> selectively ignore
jdaggett@7242 6096 unsupported component values and honor supported values in a single
jdaggett@7242 6097 multi-value property declaration: if any value is considered invalid (as
jdaggett@7242 6098 unsupported values must be), CSS requires that the entire declaration be
jdaggett@7242 6099 ignored.
jdaggett@7242 6100
jdaggett@7242 6101 <h3 class=no-num id=experimental> Experimental Implementations</h3>
jdaggett@7242 6102
jdaggett@7242 6103 <p>To avoid clashes with future CSS features, the CSS2.1 specification
jdaggett@7242 6104 reserves a <a
jdaggett@7242 6105 href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
jdaggett@7242 6106 syntax</a> for proprietary and experimental extensions to CSS.
jdaggett@7242 6107
jdaggett@7242 6108 <p>Prior to a specification reaching the Candidate Recommendation stage in
jdaggett@7242 6109 the W3C process, all implementations of a CSS feature are considered
jdaggett@7242 6110 experimental. The CSS Working Group recommends that implementations use a
jdaggett@7242 6111 vendor-prefixed syntax for such features, including those in W3C Working
jdaggett@7242 6112 Drafts. This avoids incompatibilities with future changes in the draft.
jdaggett@7242 6113
jdaggett@7242 6114 <h3 class=no-num id=testing> Non-Experimental Implementations</h3>
jdaggett@7242 6115
jdaggett@7242 6116 <p>Once a specification reaches the Candidate Recommendation stage,
jdaggett@7242 6117 non-experimental implementations are possible, and implementors should
jdaggett@7242 6118 release an unprefixed implementation of any CR-level feature they can
jdaggett@7242 6119 demonstrate to be correctly implemented according to spec.
jdaggett@7242 6120
jdaggett@7242 6121 <p>To establish and maintain the interoperability of CSS across
jdaggett@7242 6122 implementations, the CSS Working Group requests that non-experimental CSS
jdaggett@7242 6123 renderers submit an implementation report (and, if necessary, the
jdaggett@7242 6124 testcases used for that implementation report) to the W3C before releasing
jdaggett@7242 6125 an unprefixed implementation of any CSS features. Testcases submitted to
jdaggett@7242 6126 W3C are subject to review and correction by the CSS Working Group.
jdaggett@7242 6127
jdaggett@7242 6128 <p>Further information on submitting testcases and implementation reports
jdaggett@7242 6129 can be found from on the CSS Working Group's website at <a
jdaggett@7242 6130 href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
jdaggett@7242 6131 Questions should be directed to the <a
jdaggett@7242 6132 href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
jdaggett@7242 6133 mailing list.
jdaggett@7242 6134
jdaggett@484 6135 <h2 class=no-num id=references>References</h2>
jdaggett@484 6136
jdaggett@1662 6137 <h3 class=no-num id=normative-references>Normative References</h3>
jdaggett@484 6138 <!--begin-normative-->
jdaggett@484 6139 <!-- Sorted by label -->
jdaggett@484 6140
jdaggett@484 6141 <dl class=bibliography>
jdaggett@8031 6142 <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
jdaggett@484 6143 <!---->
jdaggett@531 6144
jdaggett@2461 6145 <dt id=CHARMOD>[CHARMOD]
jdaggett@2461 6146
jdaggett@2461 6147 <dd>Martin J. Dürst; et al. <a
jdaggett@2737 6148 href="http://www.w3.org/TR/2005/REC-charmod-20050215/"><cite>Character
jdaggett@2461 6149 Model for the World Wide Web 1.0: Fundamentals.</cite></a> 15 February
jdaggett@2461 6150 2005. W3C Recommendation. URL: <a
jdaggett@2737 6151 href="http://www.w3.org/TR/2005/REC-charmod-20050215/">http://www.w3.org/TR/2005/REC-charmod-20050215/</a>
jdaggett@2461 6152 </dd>
jdaggett@2461 6153 <!---->
jdaggett@2461 6154
jdaggett@2457 6155 <dt id=CORS>[CORS]
jdaggett@1662 6156
jdaggett@1662 6157 <dd>Anne van Kesteren. <a
jdaggett@7242 6158 href="http://www.w3.org/TR/2013/CR-cors-20130129/"><cite>Cross-Origin
jdaggett@7242 6159 Resource Sharing.</cite></a> 29 January 2013. W3C Candidate
jdaggett@7242 6160 Recommendation. (Work in progress.) URL: <a
jdaggett@7242 6161 href="http://www.w3.org/TR/2013/CR-cors-20130129/">http://www.w3.org/TR/2013/CR-cors-20130129/</a>
jdaggett@1662 6162 </dd>
jdaggett@1662 6163 <!---->
jdaggett@1662 6164
jdaggett@3041 6165 <dt id=CSS21>[CSS21]
jdaggett@3041 6166
jdaggett@3041 6167 <dd>Bert Bos; et al. <a
jdaggett@8031 6168 href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
jdaggett@3041 6169 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
jdaggett@3041 6170 2011. W3C Recommendation. URL: <a
jdaggett@8031 6171 href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
jdaggett@3041 6172 </dd>
jdaggett@3041 6173 <!---->
jdaggett@3041 6174
jdaggett@5833 6175 <dt id=CSS3VAL>[CSS3VAL]
jdaggett@5833 6176
jdaggett@5833 6177 <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
jdaggett@8957 6178 href="http://www.w3.org/TR/2013/CR-css3-values-20130730/"><cite>CSS
jdaggett@8957 6179 Values and Units Module Level 3.</cite></a> 30 July 2013. W3C Candidate
jdaggett@6701 6180 Recommendation. (Work in progress.) URL: <a
jdaggett@8957 6181 href="http://www.w3.org/TR/2013/CR-css3-values-20130730/">http://www.w3.org/TR/2013/CR-css3-values-20130730/</a>
jdaggett@5833 6182 </dd>
jdaggett@5833 6183 <!---->
jdaggett@5833 6184
jdaggett@1662 6185 <dt id=HTML5>[HTML5]
jdaggett@1662 6186
jdaggett@8957 6187 <dd>Robin Berjon; et al. <a
jdaggett@8957 6188 href="http://www.w3.org/TR/2013/CR-html5-20130806/"><cite>HTML5.</cite></a>
jdaggett@8957 6189 6 August 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a
jdaggett@8957 6190 href="http://www.w3.org/TR/2013/CR-html5-20130806/">http://www.w3.org/TR/2013/CR-html5-20130806/</a>
jdaggett@1662 6191 </dd>
jdaggett@1662 6192 <!---->
jdaggett@1662 6193
jdaggett@1662 6194 <dt id=OPEN-FONT-FORMAT>[OPEN-FONT-FORMAT]
jdaggett@1662 6195
jdaggett@1662 6196 <dd><a
jdaggett@9208 6197 href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009%28E%29.zip"><cite>Information
jdaggett@1662 6198 technology — Coding of audio-visual objects — Part 22: Open Font
jdaggett@1662 6199 Format.</cite></a> International Organization for Standardization.
jdaggett@1662 6200 ISO/IEC 14496-22:2009. URL: <a
jdaggett@9208 6201 href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009%28E%29.zip">http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009%28E%29.zip</a>
jdaggett@1662 6202 </dd>
jdaggett@1662 6203 <!---->
jdaggett@1662 6204
jdaggett@1662 6205 <dt id=OPENTYPE>[OPENTYPE]
jdaggett@1662 6206
jdaggett@1662 6207 <dd><a
jdaggett@1662 6208 href="http://www.microsoft.com/typography/otspec/default.htm"><cite>OpenType
jdaggett@1662 6209 specification.</cite></a> Microsoft. URL: <a
jdaggett@1662 6210 href="http://www.microsoft.com/typography/otspec/default.htm">http://www.microsoft.com/typography/otspec/default.htm</a>
jdaggett@1662 6211 </dd>
jdaggett@1662 6212 <!---->
jdaggett@1662 6213
jdaggett@1662 6214 <dt id=OPENTYPE-FEATURES>[OPENTYPE-FEATURES]
jdaggett@1662 6215
jdaggett@1662 6216 <dd><a
jdaggett@1662 6217 href="http://www.microsoft.com/typography/otspec/featurelist.htm"><cite>OpenType
jdaggett@1662 6218 feature registry.</cite></a> Microsoft. URL: <a
jdaggett@1662 6219 href="http://www.microsoft.com/typography/otspec/featurelist.htm">http://www.microsoft.com/typography/otspec/featurelist.htm</a>
jdaggett@1662 6220 </dd>
jdaggett@1662 6221 <!---->
jdaggett@1662 6222
jdaggett@7103 6223 <dt id=RFC2119>[RFC2119]
jdaggett@7103 6224
jdaggett@7103 6225 <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
jdaggett@7103 6226 words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
jdaggett@7103 6227 RFC 2119. URL: <a
jdaggett@7103 6228 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
jdaggett@7103 6229 </dd>
jdaggett@7103 6230 <!---->
jdaggett@7103 6231
jdaggett@2457 6232 <dt id=UAX15>[UAX15]
jdaggett@2457 6233
jdaggett@7242 6234 <dd>Mark Davis; Ken Whistler. <a
jdaggett@7242 6235 href="http://www.unicode.org/reports/tr15/"><cite>Unicode Normalization
jdaggett@7242 6236 Forms.</cite></a> 31 August 2012. Unicode Standard Annex #15. URL: <a
jdaggett@7242 6237 href="http://www.unicode.org/reports/tr15/">http://www.unicode.org/reports/tr15/</a>
jdaggett@2457 6238 </dd>
jdaggett@2457 6239 <!---->
jdaggett@2457 6240
jdaggett@1856 6241 <dt id=UAX29>[UAX29]
jdaggett@1856 6242
jdaggett@1856 6243 <dd>Mark Davis. <a
jdaggett@5809 6244 href="http://www.unicode.org/reports/tr29/"><cite>Unicode Text
jdaggett@7242 6245 Segmentation.</cite></a> 12 September 2012. Unicode Standard Annex #29.
jdaggett@2461 6246 URL: <a
jdaggett@5809 6247 href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a>
jdaggett@1856 6248 </dd>
jdaggett@1856 6249 <!---->
jdaggett@1856 6250
jdaggett@9154 6251 <dt id=UNICODE>[UNICODE]
jdaggett@531 6252
jdaggett@531 6253 <dd>The Unicode Consortium. <a
jdaggett@9154 6254 href="http://www.unicode.org/standard/versions/enumeratedversions.html"><cite>The
jdaggett@9154 6255 Unicode Standard.</cite></a> 2012. Defined by: The Unicode Standard,
jdaggett@9154 6256 Version 6.2.0 (Mountain View, CA: The Unicode Consortium, 2012. ISBN
jdaggett@9154 6257 978-1-936213-07-8), as updated from time to time by the publication of
jdaggett@9154 6258 new versions URL: <a
jdaggett@9154 6259 href="http://www.unicode.org/standard/versions/enumeratedversions.html">http://www.unicode.org/standard/versions/enumeratedversions.html</a>
jdaggett@531 6260 </dd>
jdaggett@531 6261 <!---->
jdaggett@484 6262 </dl>
jdaggett@484 6263 <!--end-normative-->
jdaggett@3041 6264 <!--{{!CSS21}}-->
jdaggett@5833 6265 <!--{{!CSS3VAL}}-->
jdaggett@1662 6266 <!--{{!OPENTYPE}}-->
jdaggett@1662 6267 <!--{{!OPENTYPE-FEATURES}}-->
jdaggett@1662 6268 <!--{{!OPEN-FONT-FORMAT}}-->
jdaggett@9154 6269 <!--{{!UNICODE}}-->
jdaggett@2457 6270 <!--{{!UAX15}}-->
jdaggett@1856 6271 <!--{{!UAX29}}-->
jdaggett@2457 6272 <!--{{!CORS}}-->
jdaggett@1662 6273 <!--{{!HTML5}}-->
jdaggett@2461 6274 <!--{{!CHARMOD}}-->
jdaggett@1662 6275
jdaggett@1662 6276 <h3 class=no-num id=other-references>Other References</h3>
jdaggett@484 6277 <!--begin-informative-->
jdaggett@484 6278 <!-- Sorted by label -->
jdaggett@484 6279
jdaggett@484 6280 <dl class=bibliography>
jdaggett@8031 6281 <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
jdaggett@484 6282 <!---->
jdaggett@484 6283
jdaggett@3042 6284 <dt id=AAT-FEATURES>[AAT-FEATURES]
jdaggett@3042 6285
jdaggett@3042 6286 <dd><a href="http://developer.apple.com/fonts/registry/"><cite>Apple
jdaggett@3042 6287 Advanced Typography font feature registry.</cite></a> Apple. URL: <a
jdaggett@3042 6288 href="http://developer.apple.com/fonts/registry/">http://developer.apple.com/fonts/registry/</a>
jdaggett@3042 6289 </dd>
jdaggett@3042 6290 <!---->
jdaggett@3042 6291
jdaggett@512 6292 <dt id=ARABIC-TYPO>[ARABIC-TYPO]
jdaggett@512 6293
jdaggett@513 6294 <dd>Huda Smitshuijzen AbiFares. <cite>Arabic Typography: A Comprehensive
jdaggett@1148 6295 Sourcebook.</cite> Saqi Books. 2001. ISBN 0-86356-347-3.</dd>
jdaggett@512 6296 <!---->
jdaggett@512 6297
jdaggett@3042 6298 <dt id=CHARMOD-NORM>[CHARMOD-NORM]
jdaggett@3042 6299
jdaggett@3042 6300 <dd>François Yergeau; et al. <a
jdaggett@5809 6301 href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/"><cite>Character
jdaggett@5809 6302 Model for the World Wide Web 1.0: Normalization.</cite></a> 1 May 2012.
jdaggett@5809 6303 W3C Working Draft. (Work in progress.) URL: <a
jdaggett@5809 6304 href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/">http://www.w3.org/TR/2012/WD-charmod-norm-20120501/</a>
jdaggett@3042 6305 </dd>
jdaggett@3042 6306 <!---->
jdaggett@3042 6307
jdaggett@1732 6308 <dt id=CJKV-INFO-PROCESSING>[CJKV-INFO-PROCESSING]
jdaggett@1732 6309
jdaggett@1732 6310 <dd>Ken Lunde. <cite>CJKV Information Processing, Second Edition.</cite>
jdaggett@1732 6311 O'Reilly Media, Inc. 2009. ISBN 0-596-51447-1.</dd>
jdaggett@1732 6312 <!---->
jdaggett@1732 6313
jdaggett@3460 6314 <dt id=CSS3-CONDITIONAL>[CSS3-CONDITIONAL]
jdaggett@3460 6315
jdaggett@3460 6316 <dd>L. David Baron. <a
jdaggett@8386 6317 href="http://www.w3.org/TR/2013/CR-css3-conditional-20130404/"><cite>CSS
jdaggett@8386 6318 Conditional Rules Module Level 3.</cite></a> 4 April 2013. W3C Candidate
jdaggett@8386 6319 Recommendation. (Work in progress.) URL: <a
jdaggett@8386 6320 href="http://www.w3.org/TR/2013/CR-css3-conditional-20130404/">http://www.w3.org/TR/2013/CR-css3-conditional-20130404/</a>
jdaggett@3460 6321 </dd>
jdaggett@3460 6322 <!---->
jdaggett@3460 6323
jdaggett@6701 6324 <dt id=CSS3TEXT>[CSS3TEXT]
jdaggett@6701 6325
jdaggett@6701 6326 <dd>Elika J. Etemad; Koji Ishii. <a
jdaggett@7041 6327 href="http://www.w3.org/TR/2012/WD-css3-text-20121113/"><cite>CSS Text
jdaggett@7041 6328 Module Level 3.</cite></a> 13 November 2012. W3C Working Draft. (Work in
jdaggett@6701 6329 progress.) URL: <a
jdaggett@7041 6330 href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">http://www.w3.org/TR/2012/WD-css3-text-20121113/</a>
jdaggett@6701 6331 </dd>
jdaggett@6701 6332 <!---->
jdaggett@6701 6333
jdaggett@1856 6334 <dt id=DIGITAL-TYPOGRAPHY>[DIGITAL-TYPOGRAPHY]
jdaggett@1856 6335
jdaggett@1856 6336 <dd>Richard Rubinstein. <cite>Digital Typography, An Introduction to Type
jdaggett@1856 6337 and Composition for Computer System Design.</cite> Addison-Wesley. 1988.
jdaggett@1856 6338 ISBN 0-201-17633-5.</dd>
jdaggett@1856 6339 <!---->
jdaggett@1856 6340
jdaggett@7022 6341 <dt id=DOM-LEVEL-2-STYLE>[DOM-LEVEL-2-STYLE]
jdaggett@7022 6342
jdaggett@7022 6343 <dd>Chris Wilson; Philippe Le Hégaret; Vidur Apparao. <a
jdaggett@7179 6344 href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/"><cite>Document
jdaggett@7022 6345 Object Model (DOM) Level 2 Style Specification.</cite></a> 13 November
jdaggett@7022 6346 2000. W3C Recommendation. URL: <a
jdaggett@7179 6347 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 6348 </dd>
jdaggett@7022 6349 <!---->
jdaggett@7022 6350
jdaggett@498 6351 <dt id=ELEMTYPO>[ELEMTYPO]
jdaggett@498 6352
jdaggett@498 6353 <dd>Robert Bringhurst. <cite>The Elements of Typographic Style, Version
jdaggett@7488 6354 4.</cite> Hartley &amp; Marks. 2013. ISBN 0-88179-212-8.</dd>
jdaggett@498 6355 <!---->
jdaggett@498 6356
jdaggett@513 6357 <dt id=LANGCULTTYPE>[LANGCULTTYPE]
jdaggett@513 6358
jdaggett@1148 6359 <dd>John D. Berry, Ed. <cite>Language Culture Type.</cite> Graphis. 2001.
jdaggett@1148 6360 ISBN 1-932026-01-0.</dd>
jdaggett@512 6361 <!---->
jdaggett@1662 6362
jdaggett@1662 6363 <dt id=OPENTYPE-FONT-GUIDE>[OPENTYPE-FONT-GUIDE]
jdaggett@1662 6364
jdaggett@1662 6365 <dd><a
jdaggett@3538 6366 href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf"><cite>OpenType
jdaggett@1662 6367 User Guide.</cite></a> FontShop International. URL: <a
jdaggett@3538 6368 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 6369 </dd>
jdaggett@1662 6370 <!---->
jdaggett@1856 6371
jdaggett@2527 6372 <dt id=RASTER-TRAGEDY>[RASTER-TRAGEDY]
jdaggett@2527 6373
jdaggett@2527 6374 <dd>Beat Stamm. <a href="http://www.rastertragedy.com/"><cite>The Raster
jdaggett@6659 6375 Tragedy at Low-Resolution Revisited.</cite></a> 7 December 2011. URL: <a
jdaggett@2527 6376 href="http://www.rastertragedy.com/">http://www.rastertragedy.com/</a></dd>
jdaggett@2527 6377 <!---->
jdaggett@2527 6378
jdaggett@1856 6379 <dt id=WINDOWS-GLYPH-PROC>[WINDOWS-GLYPH-PROC]
jdaggett@1856 6380
jdaggett@1856 6381 <dd>John Hudson. <a
jdaggett@1856 6382 href="http://www.microsoft.com/typography/developers/opentype/default.htm"><cite>Windows
jdaggett@1856 6383 Glyph Processing.</cite></a> Microsoft Typogrraphy. URL: <a
jdaggett@1856 6384 href="http://www.microsoft.com/typography/developers/opentype/default.htm">http://www.microsoft.com/typography/developers/opentype/default.htm</a>
jdaggett@1856 6385 </dd>
jdaggett@1856 6386 <!---->
jdaggett@484 6387 </dl>
jdaggett@484 6388 <!--end-informative-->
jdaggett@518 6389 <!--{{ARABIC-TYPO}}-->
jdaggett@1732 6390 <!--{{CJKV-INFO-PROCESSING}}-->
jdaggett@1856 6391 <!--{{DIGITAL-TYPOGRAPHY}}-->
jdaggett@7022 6392 <!--{{DOM-LEVEL-2-STYLE}}-->
jdaggett@518 6393 <!--{{ELEMTYPO}}-->
jdaggett@1856 6394 <!--{{LANGCULTTYPE}}-->
jdaggett@1662 6395 <!--{{OPENTYPE-FONT-GUIDE}}-->
jdaggett@2527 6396 <!--{{RASTER-TRAGEDY}}-->
jdaggett@1856 6397 <!--{{WINDOWS-GLYPH-PROC}}-->
jdaggett@3042 6398 <!--{{CHARMOD-NORM}}-->
jdaggett@3042 6399 <!--{{AAT-FEATURES}}-->
jdaggett@3460 6400 <!--{{CSS3-CONDITIONAL}}-->
jdaggett@6701 6401 <!--{{CSS3TEXT}}-->
jdaggett@484 6402
jdaggett@484 6403 <h2 class=no-num id=index>Index</h2>
jdaggett@484 6404 <!--begin-index-->
jdaggett@484 6405
jdaggett@484 6406 <ul class=indexlist>
jdaggett@8278 6407 <li>100...900 weight values, <a href="#font-weight-numeric-values"
jdaggett@8278 6408 title="100...900 weight values"><strong>3.2</strong></a>
jdaggett@8278 6409
jdaggett@8225 6410 <li><var>&lt;absolute-size&gt;</var>, <a href="#absolute-size-value"
jdaggett@7060 6411 title="&lt;absolute-size&gt;"><strong>3.5</strong></a>
jdaggett@890 6412
jdaggett@8225 6413 <li><var>&lt;common-lig-values&gt;</var>, <a href="#common-lig-values"
jdaggett@8225 6414 title="&lt;common-lig-values&gt;"><strong>6.4</strong></a>
jdaggett@2479 6415
jdaggett@2479 6416 <li><var>&lt;contextual-alt-values&gt;</var>, <a
jdaggett@8225 6417 href="#contextual-alt-values"
jdaggett@6176 6418 title="&lt;contextual-alt-values&gt;"><strong>6.4</strong></a>
jdaggett@2479 6419
jdaggett@8225 6420 <li><var>&lt;discretionary-lig-values&gt;</var>, <a
jdaggett@8225 6421 href="#discretionary-lig-values"
jdaggett@8225 6422 title="&lt;discretionary-lig-values&gt;"><strong>6.4</strong></a>
jdaggett@3460 6423
jdaggett@2479 6424 <li><var>&lt;east-asian-variant-values&gt;</var>, <a
jdaggett@8225 6425 href="#east-asian-variant-values"
jdaggett@2479 6426 title="&lt;east-asian-variant-values&gt;"><strong>6.10</strong></a>
jdaggett@2479 6427
jdaggett@2479 6428 <li><var>&lt;east-asian-width-values&gt;</var>, <a
jdaggett@8225 6429 href="#east-asian-width-values"
jdaggett@2479 6430 title="&lt;east-asian-width-values&gt;"><strong>6.10</strong></a>
jdaggett@2479 6431
jdaggett@8225 6432 <li><var>&lt;family-name&gt;</var>, <a href="#family-name-value"
jdaggett@8225 6433 title="&lt;family-name&gt;"><strong>3.1</strong></a>
jdaggett@8225 6434
jdaggett@8225 6435 <li><var>&lt;feature-tag-value&gt;</var>, <a href="#feature-tag-value"
jdaggett@2515 6436 title="&lt;feature-tag-value&gt;"><strong>6.12</strong></a>
jdaggett@2515 6437
jdaggett@8225 6438 <li><var>&lt;font-face-name&gt;</var>, <a href="#font-face-name-value"
jdaggett@7060 6439 title="&lt;font-face-name&gt;"><strong>4.3</strong></a>
jdaggett@4624 6440
jdaggett@4624 6441 <li><var>&lt;font-variant-css21&gt;</var>, <a
jdaggett@8225 6442 href="#font-variant-css21-values"
jdaggett@4624 6443 title="&lt;font-variant-css21&gt;"><strong>3.7</strong></a>
jdaggett@4624 6444
jdaggett@8225 6445 <li><var>&lt;generic-family&gt;</var>, <a href="#generic-family-value"
jdaggett@8225 6446 title="&lt;generic-family&gt;"><strong>3.1</strong></a>
jdaggett@8225 6447
jdaggett@8225 6448 <li><var>&lt;historical-lig-values&gt;</var>, <a
jdaggett@8225 6449 href="#historical-lig-values"
jdaggett@8225 6450 title="&lt;historical-lig-values&gt;"><strong>6.4</strong></a>
jdaggett@8225 6451
jdaggett@8225 6452 <li><var>&lt;length&gt;</var>, <a href="#length-size-value"
jdaggett@8225 6453 title="&lt;length&gt;"><strong>3.5</strong></a>
jdaggett@8225 6454
jdaggett@8225 6455 <li><var>&lt;number&gt;</var>, <a href="#aspect-ratio-value"
jdaggett@8225 6456 title="&lt;number&gt;"><strong>3.6</strong></a>
jdaggett@4624 6457
jdaggett@4624 6458 <li><var>&lt;numeric-figure-values&gt;</var>, <a
jdaggett@8225 6459 href="#numeric-figure-values"
jdaggett@4624 6460 title="&lt;numeric-figure-values&gt;"><strong>6.7</strong></a>
jdaggett@4624 6461
jdaggett@4624 6462 <li><var>&lt;numeric-fraction-values&gt;</var>, <a
jdaggett@8225 6463 href="#numeric-fraction-values"
jdaggett@4624 6464 title="&lt;numeric-fraction-values&gt;"><strong>6.7</strong></a>
jdaggett@4624 6465
jdaggett@4624 6466 <li><var>&lt;numeric-spacing-values&gt;</var>, <a
jdaggett@8225 6467 href="#numeric-spacing-values"
jdaggett@4624 6468 title="&lt;numeric-spacing-values&gt;"><strong>6.7</strong></a>
jdaggett@4624 6469
jdaggett@8225 6470 <li><var>&lt;percentage&gt;</var>, <a href="#percentage-size-value"
jdaggett@8225 6471 title="&lt;percentage&gt;"><strong>3.5</strong></a>
jdaggett@8225 6472
jdaggett@8225 6473 <li><var>&lt;relative-size&gt;</var>, <a href="#relative-size-value"
jdaggett@7060 6474 title="&lt;relative-size&gt;"><strong>3.5</strong></a>
jdaggett@7060 6475
jdaggett@8278 6476 <li><var>&lt;string&gt;</var>, <a
jdaggett@8278 6477 href="#font-language-override-string-value"
jdaggett@8278 6478 title="&lt;string&gt;"><strong>6.13</strong></a>
jdaggett@8278 6479
jdaggett@8225 6480 <li><var>&lt;urange&gt;</var>, <a href="#urange-value"
jdaggett@8225 6481 title="&lt;urange&gt;"><strong>4.5</strong></a>
jdaggett@2479 6482
jdaggett@8311 6483 <li><code>@font-face</code>, <a href="#at-font-face-rule"
jdaggett@8311 6484 title="@font-face"><strong>4.1</strong></a>
jdaggett@8311 6485
jdaggett@8311 6486 <li><code>@font-feature-values</code>, <a
jdaggett@8311 6487 href="#at-font-feature-values-rule"
jdaggett@8311 6488 title="@font-feature-values"><strong>6.9</strong></a>
jdaggett@2479 6489
jdaggett@4624 6490 <li>all-petite-caps, <a href="#all-petite-caps"
jdaggett@4624 6491 title=all-petite-caps><strong>6.6</strong></a>
jdaggett@4624 6492
jdaggett@4624 6493 <li>all-small-caps, <a href="#all-small-caps"
jdaggett@4624 6494 title=all-small-caps><strong>6.6</strong></a>
jdaggett@4624 6495
jdaggett@8225 6496 <li>annotation, <a href="#annotation"
jdaggett@7060 6497 title=annotation><strong>6.8</strong></a>
jdaggett@4624 6498
jdaggett@4624 6499 <li>aspect value, <a href="#aspect-value0" title="aspect
jdaggett@4624 6500 value"><strong>3.6</strong></a>
jdaggett@4624 6501
jdaggett@7103 6502 <li>authoring tool, <a href="#authoring-tool" title="authoring
jdaggett@7243 6503 tool"><strong>#</strong></a>
jdaggett@7103 6504
jdaggett@8278 6505 <li>auto
jdaggett@8278 6506 <ul>
jdaggett@8278 6507 <li>font-kerning, <a href="#font-kerning-auto-value" title="auto,
jdaggett@8278 6508 font-kerning"><strong>6.3</strong></a>
jdaggett@8278 6509 </ul>
jdaggett@8278 6510
jdaggett@8278 6511 <li>bold, <a href="#bold" title=bold><strong>3.2</strong></a>
jdaggett@8278 6512
jdaggett@8278 6513 <li>bolder, <a href="#bolder" title=bolder><strong>3.2</strong></a>
jdaggett@8278 6514
jdaggett@7311 6515 <li>character map, <a href="#character-map" title="character
jdaggett@7311 6516 map"><strong>5.2</strong></a>
jdaggett@7311 6517
jdaggett@8225 6518 <li>character-variant, <a href="#character-variant"
jdaggett@7060 6519 title=character-variant><strong>6.8</strong></a>
jdaggett@4624 6520
jdaggett@4624 6521 <li>common-ligatures, <a href="#common-ligatures"
jdaggett@6176 6522 title=common-ligatures><strong>6.4</strong></a>
jdaggett@4624 6523
jdaggett@8391 6524 <li>composite face, <a href="#composite-face" title="composite
jdaggett@8391 6525 face"><strong>5.2</strong></a>
jdaggett@8391 6526
jdaggett@8278 6527 <li>condensed, <a href="#condensed"
jdaggett@8278 6528 title=condensed><strong>3.3</strong></a>
jdaggett@8278 6529
jdaggett@4624 6530 <li>contextual, <a href="#contextual"
jdaggett@6176 6531 title=contextual><strong>6.4</strong></a>
jdaggett@4624 6532
jdaggett@7021 6533 <li>CSSFontFaceRule, <a href="#cssfontfacerule"
jdaggett@7021 6534 title=CSSFontFaceRule><strong>8.1</strong></a>
jdaggett@7021 6535
jdaggett@7021 6536 <li>CSSFontFeatureValuesRule, <a href="#cssfontfeaturevaluesrule"
jdaggett@7021 6537 title=CSSFontFeatureValuesRule><strong>8.2</strong></a>
jdaggett@7021 6538
jdaggett@4624 6539 <li>cursive, definition of, <a href="#cursive0" title="cursive, definition
jdaggett@4624 6540 of"><strong>#</strong></a>
jdaggett@4624 6541
jdaggett@7232 6542 <li>default face, <a href="#default-face" title="default
jdaggett@7309 6543 face"><strong>5.2</strong></a>
jdaggett@7232 6544
jdaggett@8031 6545 <li>descriptor_declaration, <a href="#descriptordeclaration"
jdaggett@8031 6546 title="descriptor_declaration"><strong>4.1</strong></a>
jdaggett@8031 6547
jdaggett@4624 6548 <li>diagonal-fractions, <a href="#diagonal-fractions"
jdaggett@4624 6549 title=diagonal-fractions><strong>6.7</strong></a>
jdaggett@4624 6550
jdaggett@4624 6551 <li>discretionary-ligatures, <a href="#discretionary-ligatures"
jdaggett@6176 6552 title=discretionary-ligatures><strong>6.4</strong></a>
jdaggett@4624 6553
jdaggett@8391 6554 <li>effective character map, <a href="#effective-character-map"
jdaggett@8391 6555 title="effective character map"><strong>4.5</strong></a>
jdaggett@8391 6556
jdaggett@8278 6557 <li>expanded, <a href="#expanded" title=expanded><strong>3.3</strong></a>
jdaggett@8278 6558
jdaggett@8278 6559 <li>extra-condensed, <a href="#extra-condensed"
jdaggett@8278 6560 title=extra-condensed><strong>3.3</strong></a>
jdaggett@8278 6561
jdaggett@8278 6562 <li>extra-expanded, <a href="#extra-expanded"
jdaggett@8278 6563 title=extra-expanded><strong>3.3</strong></a>
jdaggett@8278 6564
jdaggett@4624 6565 <li>fantasy, definition of, <a href="#fantasy0" title="fantasy, definition
jdaggett@4624 6566 of"><strong>#</strong></a>
jdaggett@4624 6567
jdaggett@8031 6568 <li>feature_type, <a href="#featuretype"
jdaggett@8356 6569 title="feature_type"><strong>6.9.1</strong></a>
jdaggett@8031 6570
jdaggett@8031 6571 <li>feature_value_block, <a href="#featurevalueblock"
jdaggett@8356 6572 title="feature_value_block"><strong>6.9.1</strong></a>
jdaggett@8031 6573
jdaggett@8031 6574 <li>feature_value_definition, <a href="#featurevaluedefinition"
jdaggett@8356 6575 title="feature_value_definition"><strong>6.9.1</strong></a>
jdaggett@7679 6576
jdaggett@8431 6577 <li>first available font, <a href="#first-available-font" title="first
jdaggett@8431 6578 available font"><strong>5.2</strong></a>
jdaggett@8431 6579
jdaggett@4624 6580 <li>font, <a href="#propdef-font" title=font><strong>3.7</strong></a>
jdaggett@2472 6581
jdaggett@8356 6582 <li>font specific, <a href="#font-specific" title="font
jdaggett@8356 6583 specific"><strong>6.8</strong></a>
jdaggett@8356 6584
jdaggett@8278 6585 <li>font-family
jdaggett@8278 6586 <ul>
jdaggett@8278 6587 <li>descriptor, <a href="#descdef-font-family" title="font-family,
jdaggett@8278 6588 descriptor"><strong>4.2</strong></a>
jdaggett@8278 6589
jdaggett@8278 6590 <li>property, <a href="#propdef-font-family" title="font-family,
jdaggett@8278 6591 property"><strong>3.1</strong></a>
jdaggett@8278 6592 </ul>
jdaggett@1662 6593
jdaggett@8279 6594 <li>font-feature-settings
jdaggett@8278 6595 <ul>
jdaggett@8278 6596 <li>descriptor, <a href="#descdef-font-feature-settings"
jdaggett@8278 6597 title="font-feature-settings, descriptor"><strong>4.7</strong></a>
jdaggett@8279 6598
jdaggett@8279 6599 <li>property, <a href="#propdef-font-feature-settings"
jdaggett@8279 6600 title="font-feature-settings, property"><strong>6.12</strong></a>
jdaggett@8278 6601 </ul>
jdaggett@7060 6602
jdaggett@1662 6603 <li>font-kerning, <a href="#propdef-font-kerning"
jdaggett@1856 6604 title=font-kerning><strong>6.3</strong></a>
jdaggett@1662 6605
jdaggett@1732 6606 <li>font-language-override, <a href="#propdef-font-language-override"
jdaggett@2118 6607 title=font-language-override><strong>6.13</strong></a>
jdaggett@1662 6608
jdaggett@1662 6609 <li>font-size, <a href="#propdef-font-size"
jdaggett@1662 6610 title=font-size><strong>3.5</strong></a>
jdaggett@1662 6611
jdaggett@1662 6612 <li>font-size-adjust, <a href="#propdef-font-size-adjust"
jdaggett@1662 6613 title=font-size-adjust><strong>3.6</strong></a>
jdaggett@1662 6614
jdaggett@8278 6615 <li>font-stretch
jdaggett@8278 6616 <ul>
jdaggett@8278 6617 <li>descriptor, <a href="#descdef-font-stretch" title="font-stretch,
jdaggett@8278 6618 descriptor"><strong>4.4</strong></a>
jdaggett@8278 6619
jdaggett@8278 6620 <li>property, <a href="#propdef-font-stretch" title="font-stretch,
jdaggett@8278 6621 property"><strong>3.3</strong></a>
jdaggett@8278 6622 </ul>
jdaggett@8278 6623
jdaggett@8278 6624 <li>font-style
jdaggett@8278 6625 <ul>
jdaggett@8278 6626 <li>descriptor, <a href="#descdef-font-style" title="font-style,
jdaggett@8278 6627 descriptor"><strong>4.4</strong></a>
jdaggett@8278 6628
jdaggett@8278 6629 <li>property, <a href="#propdef-font-style" title="font-style,
jdaggett@8278 6630 property"><strong>3.4</strong></a>
jdaggett@8278 6631 </ul>
jdaggett@7060 6632
jdaggett@2487 6633 <li>font-synthesis, <a href="#propdef-font-synthesis"
jdaggett@2487 6634 title=font-synthesis><strong>3.8</strong></a>
jdaggett@2457 6635
jdaggett@8278 6636 <li>font-variant
jdaggett@8278 6637 <ul>
jdaggett@8278 6638 <li>descriptor, <a href="#descdef-font-variant" title="font-variant,
jdaggett@8278 6639 descriptor"><strong>4.7</strong></a>
jdaggett@8278 6640
jdaggett@8278 6641 <li>property, <a href="#propdef-font-variant" title="font-variant,
jdaggett@8278 6642 property"><strong>6.11</strong></a>
jdaggett@8278 6643 </ul>
jdaggett@1662 6644
jdaggett@1662 6645 <li>font-variant-alternates, <a href="#propdef-font-variant-alternates"
jdaggett@2118 6646 title=font-variant-alternates><strong>6.8</strong></a>
jdaggett@1662 6647
jdaggett@1662 6648 <li>font-variant-caps, <a href="#propdef-font-variant-caps"
jdaggett@2118 6649 title=font-variant-caps><strong>6.6</strong></a>
jdaggett@1732 6650
jdaggett@1662 6651 <li>font-variant-east-asian, <a href="#propdef-font-variant-east-asian"
jdaggett@2118 6652 title=font-variant-east-asian><strong>6.10</strong></a>
jdaggett@1662 6653
jdaggett@1662 6654 <li>font-variant-ligatures, <a href="#propdef-font-variant-ligatures"
jdaggett@6176 6655 title=font-variant-ligatures><strong>6.4</strong></a>
jdaggett@1662 6656
jdaggett@1662 6657 <li>font-variant-numeric, <a href="#propdef-font-variant-numeric"
jdaggett@2118 6658 title=font-variant-numeric><strong>6.7</strong></a>
jdaggett@2118 6659
jdaggett@3460 6660 <li>font-variant-position, <a href="#propdef-font-variant-position"
jdaggett@6176 6661 title=font-variant-position><strong>6.5</strong></a>
jdaggett@3460 6662
jdaggett@8278 6663 <li>font-weight
jdaggett@8278 6664 <ul>
jdaggett@8278 6665 <li>descriptor, <a href="#descdef-font-weight" title="font-weight,
jdaggett@8278 6666 descriptor"><strong>4.4</strong></a>
jdaggett@8278 6667
jdaggett@8278 6668 <li>property, <a href="#propdef-font-weight" title="font-weight,
jdaggett@8278 6669 property"><strong>3.2</strong></a>
jdaggett@8278 6670 </ul>
jdaggett@1662 6671
jdaggett@8031 6672 <li>font_face_rule, <a href="#fontfacerule"
jdaggett@8031 6673 title="font_face_rule"><strong>4.1</strong></a>
jdaggett@8031 6674
jdaggett@8225 6675 <li>FONT_FACE_SYM, <a href="#fontfacesym"
jdaggett@8225 6676 title="FONT_FACE_SYM"><strong>4.1</strong></a>
jdaggett@8225 6677
jdaggett@8031 6678 <li>font_family_name, <a href="#fontfamilyname"
jdaggett@8356 6679 title="font_family_name"><strong>6.9.1</strong></a>
jdaggett@8031 6680
jdaggett@8031 6681 <li>font_family_name_list, <a href="#fontfamilynamelist"
jdaggett@8356 6682 title="font_family_name_list"><strong>6.9.1</strong></a>
jdaggett@8031 6683
jdaggett@8031 6684 <li>font_feature_values_rule, <a href="#fontfeaturevaluesrule"
jdaggett@8356 6685 title="font_feature_values_rule"><strong>6.9.1</strong></a>
jdaggett@8031 6686
jdaggett@8225 6687 <li>FONT_FEATURE_VALUES_SYM, <a href="#fontfeaturevaluessym"
jdaggett@8356 6688 title="FONT_FEATURE_VALUES_SYM"><strong>6.9.1</strong></a>
jdaggett@8225 6689
jdaggett@1662 6690 <li>full-width, <a href="#full-width"
jdaggett@2118 6691 title=full-width><strong>6.10</strong></a>
jdaggett@1662 6692
jdaggett@1662 6693 <li>historical-forms, <a href="#historical-forms"
jdaggett@2118 6694 title=historical-forms><strong>6.8</strong></a>
jdaggett@1662 6695
jdaggett@1662 6696 <li>historical-ligatures, <a href="#historical-ligatures"
jdaggett@6176 6697 title=historical-ligatures><strong>6.4</strong></a>
jdaggett@1732 6698
jdaggett@8278 6699 <li>italic, <a href="#italic" title=italic><strong>3.4</strong></a>
jdaggett@8278 6700
jdaggett@2118 6701 <li>jis04, <a href="#jis04" title=jis04><strong>6.10</strong></a>
jdaggett@2118 6702
jdaggett@2118 6703 <li>jis78, <a href="#jis78" title=jis78><strong>6.10</strong></a>
jdaggett@2118 6704
jdaggett@2118 6705 <li>jis83, <a href="#jis83" title=jis83><strong>6.10</strong></a>
jdaggett@2118 6706
jdaggett@2118 6707 <li>jis90, <a href="#jis90" title=jis90><strong>6.10</strong></a>
jdaggett@1662 6708
jdaggett@8278 6709 <li>lighter, <a href="#lighter" title=lighter><strong>3.2</strong></a>
jdaggett@8278 6710
jdaggett@1662 6711 <li>lining-nums, <a href="#lining-nums"
jdaggett@2118 6712 title=lining-nums><strong>6.7</strong></a>
jdaggett@890 6713
jdaggett@890 6714 <li>monospace, definition of, <a href="#monospace0" title="monospace,
jdaggett@890 6715 definition of"><strong>#</strong></a>
jdaggett@890 6716
jdaggett@1662 6717 <li>no-common-ligatures, <a href="#no-common-ligatures"
jdaggett@6176 6718 title=no-common-ligatures><strong>6.4</strong></a>
jdaggett@1662 6719
jdaggett@1662 6720 <li>no-contextual, <a href="#no-contextual"
jdaggett@6176 6721 title=no-contextual><strong>6.4</strong></a>
jdaggett@1662 6722
jdaggett@3460 6723 <li>no-discretionary-ligatures, <a href="#no-discretionary-ligatures"
jdaggett@6176 6724 title=no-discretionary-ligatures><strong>6.4</strong></a>
jdaggett@3460 6725
jdaggett@1662 6726 <li>no-historical-ligatures, <a href="#no-historical-ligatures"
jdaggett@6176 6727 title=no-historical-ligatures><strong>6.4</strong></a>
jdaggett@1662 6728
jdaggett@8278 6729 <li>none
jdaggett@8278 6730 <ul>
jdaggett@8278 6731 <li>font-kerning, <a href="#font-kerning-none-value" title="none,
jdaggett@8278 6732 font-kerning"><strong>6.3</strong></a>
jdaggett@8278 6733
jdaggett@8278 6734 <li>font-size-adjust, <a href="#font-size-adjust-none-value"
jdaggett@8278 6735 title="none, font-size-adjust"><strong>3.6</strong></a>
jdaggett@8278 6736
jdaggett@8278 6737 <li>font-variant, <a href="#font-variant-none-value" title="none,
jdaggett@8278 6738 font-variant"><strong>6.11</strong></a>
jdaggett@8278 6739
jdaggett@8278 6740 <li>font-variant-ligatures, <a href="#font-variant-ligatures-none-value"
jdaggett@8278 6741 title="none, font-variant-ligatures"><strong>6.4</strong></a>
jdaggett@8278 6742 </ul>
jdaggett@8278 6743
jdaggett@8368 6744 <li>normal
jdaggett@8278 6745 <ul>
jdaggett@8278 6746 <li>font-feature-settings, <a href="#font-feature-settings-normal-value"
jdaggett@8278 6747 title="normal, font-feature-settings"><strong>6.12</strong></a>
jdaggett@8278 6748
jdaggett@8278 6749 <li>font-kerning, <a href="#font-kerning-normal-value" title="normal,
jdaggett@8278 6750 font-kerning"><strong>6.3</strong></a>
jdaggett@8278 6751
jdaggett@8278 6752 <li>font-language-override, <a
jdaggett@8278 6753 href="#font-language-override-normal-value" title="normal,
jdaggett@8278 6754 font-language-override"><strong>6.13</strong></a>
jdaggett@8278 6755
jdaggett@8278 6756 <li>font-stretch, <a href="#font-stretch-normal-value" title="normal,
jdaggett@8278 6757 font-stretch"><strong>3.3</strong></a>
jdaggett@8278 6758
jdaggett@8278 6759 <li>font-style, <a href="#font-style-normal-value" title="normal,
jdaggett@8278 6760 font-style"><strong>3.4</strong></a>
jdaggett@8278 6761
jdaggett@8278 6762 <li>font-variant, <a href="#font-variant-normal-value" title="normal,
jdaggett@8278 6763 font-variant"><strong>6.11</strong></a>
jdaggett@8278 6764
jdaggett@8278 6765 <li>font-variant-alternates, <a
jdaggett@8278 6766 href="#font-variant-alternates-normal-value" title="normal,
jdaggett@8278 6767 font-variant-alternates"><strong>6.8</strong></a>
jdaggett@8278 6768
jdaggett@8278 6769 <li>font-variant-caps, <a href="#font-variant-caps-normal-value"
jdaggett@8278 6770 title="normal, font-variant-caps"><strong>6.6</strong></a>
jdaggett@8278 6771
jdaggett@8278 6772 <li>font-variant-east-asian, <a
jdaggett@8278 6773 href="#font-variant-east-asian-normal-value" title="normal,
jdaggett@8278 6774 font-variant-east-asian"><strong>6.10</strong></a>
jdaggett@8278 6775
jdaggett@8278 6776 <li>font-variant-ligatures, <a
jdaggett@8278 6777 href="#font-variant-ligatures-normal-value" title="normal,
jdaggett@8278 6778 font-variant-ligatures"><strong>6.4</strong></a>
jdaggett@8278 6779
jdaggett@8278 6780 <li>font-variant-numeric, <a href="#font-variant-numeric-normal-value"
jdaggett@8278 6781 title="normal, font-variant-numeric"><strong>6.7</strong></a>
jdaggett@8278 6782
jdaggett@8368 6783 <li>font-variant-position, <a href="#font-variant-position-normal-value"
jdaggett@8368 6784 title="normal, font-variant-position"><strong>6.5</strong></a>
jdaggett@8368 6785
jdaggett@8278 6786 <li>font-weight, <a href="#font-weight-normal-value" title="normal,
jdaggett@8278 6787 font-weight"><strong>3.2</strong></a>
jdaggett@8278 6788 </ul>
jdaggett@8278 6789
jdaggett@8278 6790 <li>oblique, <a href="#oblique" title=oblique><strong>3.4</strong></a>
jdaggett@5809 6791
jdaggett@1662 6792 <li>oldstyle-nums, <a href="#oldstyle-nums"
jdaggett@2118 6793 title=oldstyle-nums><strong>6.7</strong></a>
jdaggett@2118 6794
jdaggett@3638 6795 <li>ordinal, <a href="#ordinal" title=ordinal><strong>6.7</strong></a>
jdaggett@3638 6796
jdaggett@8225 6797 <li>ornaments, <a href="#ornaments"
jdaggett@7060 6798 title=ornaments><strong>6.8</strong></a>
jdaggett@2118 6799
jdaggett@1662 6800 <li>petite-caps, <a href="#petite-caps"
jdaggett@2118 6801 title=petite-caps><strong>6.6</strong></a>
jdaggett@1662 6802
jdaggett@1662 6803 <li>proportional-nums, <a href="#proportional-nums"
jdaggett@2118 6804 title=proportional-nums><strong>6.7</strong></a>
jdaggett@1662 6805
jdaggett@1662 6806 <li>proportional-width, <a href="#proportional-width"
jdaggett@2118 6807 title=proportional-width><strong>6.10</strong></a>
jdaggett@512 6808
jdaggett@7243 6809 <li>renderer, <a href="#renderer" title=renderer><strong>#</strong></a>
jdaggett@7103 6810
jdaggett@3638 6811 <li>ruby, <a href="#ruby" title=ruby><strong>6.10</strong></a>
jdaggett@1662 6812
jdaggett@890 6813 <li>sans-serif, definition of, <a href="#sans-serif0" title="sans-serif,
jdaggett@890 6814 definition of"><strong>#</strong></a>
jdaggett@890 6815
jdaggett@8278 6816 <li>semi-condensed, <a href="#semi-condensed-"
jdaggett@8278 6817 title=semi-condensed><strong>3.3</strong></a>
jdaggett@8278 6818
jdaggett@8278 6819 <li>semi-expanded, <a href="#semi-expanded"
jdaggett@8278 6820 title=semi-expanded><strong>3.3</strong></a>
jdaggett@8278 6821
jdaggett@890 6822 <li>serif, definition of, <a href="#serif0" title="serif, definition
jdaggett@890 6823 of"><strong>#</strong></a>
jdaggett@890 6824
jdaggett@2504 6825 <li>simplified, <a href="#simplified"
jdaggett@2504 6826 title=simplified><strong>6.10</strong></a>
jdaggett@1662 6827
jdaggett@1662 6828 <li>slashed-zero, <a href="#slashed-zero"
jdaggett@2118 6829 title=slashed-zero><strong>6.7</strong></a>
jdaggett@1662 6830
jdaggett@1662 6831 <li>small-caps, <a href="#small-caps"
jdaggett@2118 6832 title=small-caps><strong>6.6</strong></a>
jdaggett@1662 6833
jdaggett@1662 6834 <li>src, <a href="#descdef-src" title=src><strong>4.3</strong></a>
jdaggett@1662 6835
jdaggett@1662 6836 <li>stacked-fractions, <a href="#stacked-fractions"
jdaggett@2118 6837 title=stacked-fractions><strong>6.7</strong></a>
jdaggett@2118 6838
jdaggett@7103 6839 <li>style sheet
jdaggett@7103 6840 <ul>
jdaggett@7103 6841 <li>as conformance class, <a href="#style-sheet" title="style sheet, as
jdaggett@7243 6842 conformance class"><strong>#</strong></a>
jdaggett@7103 6843 </ul>
jdaggett@7103 6844
jdaggett@8225 6845 <li>styleset, <a href="#styleset" title=styleset><strong>6.8</strong></a>
jdaggett@8225 6846
jdaggett@8225 6847 <li>stylistic, <a href="#stylistic"
jdaggett@7060 6848 title=stylistic><strong>6.8</strong></a>
jdaggett@7060 6849
jdaggett@8279 6850 <li>sub, <a href="#sub" title=sub><strong>6.5</strong></a>
jdaggett@8279 6851
jdaggett@8279 6852 <li>super, <a href="#super" title=super><strong>6.5</strong></a>
jdaggett@8279 6853
jdaggett@8397 6854 <li>support, <a href="#support" title=support><strong>5.2</strong></a>
jdaggett@8397 6855
jdaggett@8225 6856 <li>swash, <a href="#swash" title=swash><strong>6.8</strong></a>
jdaggett@1662 6857
jdaggett@8363 6858 <li>system font fallback, <a href="#system-font-fallback" title="system
jdaggett@8363 6859 font fallback"><strong>5.2</strong></a>
jdaggett@8363 6860
jdaggett@1662 6861 <li>tabular-nums, <a href="#tabular-nums"
jdaggett@2118 6862 title=tabular-nums><strong>6.7</strong></a>
jdaggett@1662 6863
jdaggett@1662 6864 <li>titling-caps, <a href="#titling-caps"
jdaggett@2118 6865 title=titling-caps><strong>6.6</strong></a>
jdaggett@1856 6866
jdaggett@2504 6867 <li>traditional, <a href="#traditional"
jdaggett@2504 6868 title=traditional><strong>6.10</strong></a>
jdaggett@2118 6869
jdaggett@8278 6870 <li>ultra-condensed, <a href="#ultra-condensed"
jdaggett@8278 6871 title=ultra-condensed><strong>3.3</strong></a>
jdaggett@8278 6872
jdaggett@8278 6873 <li>ultra-expanded, <a href="#ultra-expanded"
jdaggett@8278 6874 title=ultra-expanded><strong>3.3</strong></a>
jdaggett@8278 6875
jdaggett@2118 6876 <li>unicase, <a href="#unicase" title=unicase><strong>6.6</strong></a>
jdaggett@1662 6877
jdaggett@1662 6878 <li>unicode-range, <a href="#descdef-unicode-range"
jdaggett@890 6879 title=unicode-range><strong>4.5</strong></a>
jdaggett@7311 6880
jdaggett@7311 6881 <li>weight, <a href="#weight" title=weight><strong>2</strong></a>
jdaggett@7311 6882
jdaggett@7311 6883 <li>width, <a href="#width" title=width><strong>2</strong></a>
jdaggett@484 6884 </ul>
jdaggett@484 6885 <!--end-index-->
jdaggett@484 6886
jdaggett@484 6887 <h2 class=no-num id=property-index>Property index</h2>
jdaggett@890 6888 <!--begin-properties-->
jdaggett@484 6889
jdaggett@484 6890 <table class=proptable>
jdaggett@484 6891 <thead>
jdaggett@484 6892 <tr>
jdaggett@484 6893 <th>Property
jdaggett@484 6894
jdaggett@484 6895 <th>Values
jdaggett@484 6896
jdaggett@484 6897 <th>Initial
jdaggett@484 6898
jdaggett@1148 6899 <th>Applies to
jdaggett@484 6900
jdaggett@484 6901 <th>Inh.
jdaggett@484 6902
jdaggett@484 6903 <th>Percentages
jdaggett@484 6904
jdaggett@484 6905 <th>Media
jdaggett@484 6906
jdaggett@484 6907 <tbody>
jdaggett@3460 6908 <tr>
jdaggett@3460 6909 <th><a class=property href="#propdef-font">font</a>
jdaggett@484 6910
jdaggett@8225 6911 <td>[ [ &lt;‘font-style’&gt; || &lt;font-variant-css21&gt; ||
jdaggett@8225 6912 &lt;‘font-weight’&gt; || &lt;‘font-stretch’ ]?
jdaggett@8225 6913 &lt;‘font-size’&gt; [ / &lt;‘line-height’&gt; ]?
jdaggett@8225 6914 &lt;‘font-family’&gt; ] | caption | icon | menu | message-box |
jdaggett@7020 6915 small-caption | status-bar
jdaggett@484 6916
jdaggett@484 6917 <td>see individual properties
jdaggett@484 6918
jdaggett@484 6919 <td>all elements
jdaggett@484 6920
jdaggett@484 6921 <td>yes
jdaggett@484 6922
jdaggett@484 6923 <td>see individual properties
jdaggett@484 6924
jdaggett@484 6925 <td>visual
jdaggett@484 6926
jdaggett@3460 6927 <tr>
jdaggett@8278 6928 <th><span class=property>font-family</span>
jdaggett@484 6929
jdaggett@8225 6930 <td>[ &lt;family-name&gt; | &lt;generic-family&gt; ] #
jdaggett@484 6931
jdaggett@484 6932 <td>depends on user agent
jdaggett@484 6933
jdaggett@484 6934 <td>all elements
jdaggett@484 6935
jdaggett@484 6936 <td>yes
jdaggett@484 6937
jdaggett@484 6938 <td>N/A
jdaggett@484 6939
jdaggett@484 6940 <td>visual
jdaggett@484 6941
jdaggett@3460 6942 <tr>
jdaggett@8279 6943 <th><span class=property>font-feature-settings</span>
jdaggett@1662 6944
jdaggett@8225 6945 <td>normal | &lt;feature-tag-value&gt; #
jdaggett@1662 6946
jdaggett@1662 6947 <td>normal
jdaggett@1662 6948
jdaggett@1662 6949 <td>all elements
jdaggett@1662 6950
jdaggett@1662 6951 <td>yes
jdaggett@1662 6952
jdaggett@1662 6953 <td>N/A
jdaggett@1662 6954
jdaggett@1662 6955 <td>visual
jdaggett@1662 6956
jdaggett@3460 6957 <tr>
jdaggett@3460 6958 <th><a class=property href="#propdef-font-kerning">font-kerning</a>
jdaggett@1662 6959
jdaggett@1856 6960 <td>auto | normal | none
jdaggett@1856 6961
jdaggett@1856 6962 <td>auto
jdaggett@1662 6963
jdaggett@1662 6964 <td>all elements
jdaggett@1662 6965
jdaggett@1662 6966 <td>yes
jdaggett@1662 6967
jdaggett@1662 6968 <td>N/A
jdaggett@1662 6969
jdaggett@1662 6970 <td>visual
jdaggett@1662 6971
jdaggett@3460 6972 <tr>
jdaggett@3460 6973 <th><a class=property
jdaggett@1732 6974 href="#propdef-font-language-override">font-language-override</a>
jdaggett@1662 6975
jdaggett@5809 6976 <td>normal | &lt;string&gt;
jdaggett@1662 6977
jdaggett@1662 6978 <td>normal
jdaggett@1662 6979
jdaggett@1662 6980 <td>all elements
jdaggett@1662 6981
jdaggett@1662 6982 <td>yes
jdaggett@1662 6983
jdaggett@1662 6984 <td>N/A
jdaggett@1662 6985
jdaggett@1662 6986 <td>visual
jdaggett@1662 6987
jdaggett@3460 6988 <tr>
jdaggett@3460 6989 <th><a class=property href="#propdef-font-size">font-size</a>
jdaggett@484 6990
jdaggett@8225 6991 <td>&lt;absolute-size&gt; | &lt;relative-size&gt; | &lt;length&gt; |
jdaggett@8225 6992 &lt;percentage&gt;
jdaggett@484 6993
jdaggett@484 6994 <td>medium
jdaggett@484 6995
jdaggett@484 6996 <td>all elements
jdaggett@484 6997
jdaggett@484 6998 <td>yes
jdaggett@484 6999
jdaggett@484 7000 <td>refer to parent element's font size
jdaggett@484 7001
jdaggett@484 7002 <td>visual
jdaggett@484 7003
jdaggett@3460 7004 <tr>
jdaggett@3460 7005 <th><a class=property
jdaggett@1662 7006 href="#propdef-font-size-adjust">font-size-adjust</a>
jdaggett@484 7007
jdaggett@8968 7008 <td>none | &lt;number&gt;
jdaggett@484 7009
jdaggett@484 7010 <td>none
jdaggett@484 7011
jdaggett@484 7012 <td>all elements
jdaggett@484 7013
jdaggett@484 7014 <td>yes
jdaggett@484 7015
jdaggett@554 7016 <td>N/A
jdaggett@484 7017
jdaggett@484 7018 <td>visual
jdaggett@484 7019
jdaggett@3460 7020 <tr>
jdaggett@8278 7021 <th><span class=property>font-stretch</span>
jdaggett@1662 7022
jdaggett@1662 7023 <td>normal | ultra-condensed | extra-condensed | condensed |
jdaggett@1662 7024 semi-condensed | semi-expanded | expanded | extra-expanded |
jdaggett@5809 7025 ultra-expanded
jdaggett@484 7026
jdaggett@484 7027 <td>normal
jdaggett@484 7028
jdaggett@484 7029 <td>all elements
jdaggett@484 7030
jdaggett@484 7031 <td>yes
jdaggett@484 7032
jdaggett@484 7033 <td>N/A
jdaggett@484 7034
jdaggett@484 7035 <td>visual
jdaggett@484 7036
jdaggett@3460 7037 <tr>
jdaggett@8278 7038 <th><span class=property>font-style</span>
jdaggett@484 7039
jdaggett@5809 7040 <td>normal | italic | oblique
jdaggett@484 7041
jdaggett@484 7042 <td>normal
jdaggett@484 7043
jdaggett@484 7044 <td>all elements
jdaggett@484 7045
jdaggett@484 7046 <td>yes
jdaggett@484 7047
jdaggett@484 7048 <td>N/A
jdaggett@484 7049
jdaggett@484 7050 <td>visual
jdaggett@484 7051
jdaggett@3460 7052 <tr>
jdaggett@3460 7053 <th><a class=property href="#propdef-font-synthesis">font-synthesis</a>
jdaggett@2487 7054
jdaggett@2487 7055 <td>none | [ weight || style ]
jdaggett@2487 7056
jdaggett@2487 7057 <td>weight style
jdaggett@2457 7058
jdaggett@2457 7059 <td>all elements
jdaggett@2457 7060
jdaggett@2457 7061 <td>yes
jdaggett@2457 7062
jdaggett@2457 7063 <td>N/A
jdaggett@2457 7064
jdaggett@2457 7065 <td>visual
jdaggett@2457 7066
jdaggett@3460 7067 <tr>
jdaggett@8278 7068 <th><span class=property>font-variant</span>
jdaggett@1662 7069
jdaggett@6436 7070 <td>normal | none | [ &lt;common-lig-values&gt; ||
jdaggett@3460 7071 &lt;discretionary-lig-values&gt; || &lt;historical-lig-values&gt; ||
jdaggett@3041 7072 &lt;contextual-alt-values&gt; || stylistic(&lt;feature-value-name&gt;)
jdaggett@8225 7073 || historical-forms || styleset(&lt;feature-value-name&gt; #) ||
jdaggett@8225 7074 character-variant(&lt;feature-value-name&gt; #) ||
jdaggett@5833 7075 swash(&lt;feature-value-name&gt;) ||
jdaggett@3041 7076 ornaments(&lt;feature-value-name&gt;) ||
jdaggett@4545 7077 annotation(&lt;feature-value-name&gt;) || [ small-caps | all-small-caps
jdaggett@6648 7078 | petite-caps | all-petite-caps | unicase | titling-caps ] ||
jdaggett@2509 7079 &lt;numeric-figure-values&gt; || &lt;numeric-spacing-values&gt; ||
jdaggett@3638 7080 &lt;numeric-fraction-values&gt; || ordinal || slashed-zero ||
jdaggett@3638 7081 &lt;east-asian-variant-values&gt; || &lt;east-asian-width-values&gt; ||
jdaggett@3638 7082 ruby ]
jdaggett@484 7083
jdaggett@484 7084 <td>normal
jdaggett@484 7085
jdaggett@484 7086 <td>all elements
jdaggett@484 7087
jdaggett@484 7088 <td>yes
jdaggett@484 7089
jdaggett@7377 7090 <td>see individual properties
jdaggett@484 7091
jdaggett@484 7092 <td>visual
jdaggett@484 7093
jdaggett@3460 7094 <tr>
jdaggett@3460 7095 <th><a class=property
jdaggett@1662 7096 href="#propdef-font-variant-alternates">font-variant-alternates</a>
jdaggett@1662 7097
jdaggett@6176 7098 <td>normal | [ stylistic(&lt;feature-value-name&gt;) || historical-forms
jdaggett@8225 7099 || styleset(&lt;feature-value-name&gt; #) ||
jdaggett@8225 7100 character-variant(&lt;feature-value-name&gt; #) ||
jdaggett@5833 7101 swash(&lt;feature-value-name&gt;) ||
jdaggett@3638 7102 ornaments(&lt;feature-value-name&gt;) ||
jdaggett@3638 7103 annotation(&lt;feature-value-name&gt;) ]
jdaggett@1662 7104
jdaggett@1662 7105 <td>normal
jdaggett@1662 7106
jdaggett@1662 7107 <td>all elements
jdaggett@1662 7108
jdaggett@1662 7109 <td>yes
jdaggett@1662 7110
jdaggett@1662 7111 <td>N/A
jdaggett@1662 7112
jdaggett@1662 7113 <td>visual
jdaggett@1662 7114
jdaggett@3460 7115 <tr>
jdaggett@3460 7116 <th><a class=property
jdaggett@1662 7117 href="#propdef-font-variant-caps">font-variant-caps</a>
jdaggett@1662 7118
jdaggett@5809 7119 <td>normal | small-caps | all-small-caps | petite-caps | all-petite-caps
jdaggett@6648 7120 | unicase | titling-caps
jdaggett@1662 7121
jdaggett@1662 7122 <td>normal
jdaggett@1662 7123
jdaggett@1662 7124 <td>all elements
jdaggett@1662 7125
jdaggett@1662 7126 <td>yes
jdaggett@1662 7127
jdaggett@1662 7128 <td>N/A
jdaggett@1662 7129
jdaggett@1662 7130 <td>visual
jdaggett@1662 7131
jdaggett@3460 7132 <tr>
jdaggett@3460 7133 <th><a class=property
jdaggett@1662 7134 href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
jdaggett@1662 7135
jdaggett@5809 7136 <td>normal | [ &lt;east-asian-variant-values&gt; ||
jdaggett@3638 7137 &lt;east-asian-width-values&gt; || ruby ]
jdaggett@1662 7138
jdaggett@1662 7139 <td>normal
jdaggett@1662 7140
jdaggett@1662 7141 <td>all elements
jdaggett@1662 7142
jdaggett@1662 7143 <td>yes
jdaggett@1662 7144
jdaggett@1662 7145 <td>N/A
jdaggett@1662 7146
jdaggett@1662 7147 <td>visual
jdaggett@1662 7148
jdaggett@3460 7149 <tr>
jdaggett@3460 7150 <th><a class=property
jdaggett@1662 7151 href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
jdaggett@1662 7152
jdaggett@8225 7153 <td>normal | none | [ &lt;common-lig-values&gt; ||
jdaggett@8225 7154 &lt;discretionary-lig-values&gt; || &lt;historical-lig-values&gt; ||
jdaggett@8225 7155 &lt;contextual-alt-values&gt; ]
jdaggett@1662 7156
jdaggett@1662 7157 <td>normal
jdaggett@1662 7158
jdaggett@1662 7159 <td>all elements
jdaggett@1662 7160
jdaggett@1662 7161 <td>yes
jdaggett@1662 7162
jdaggett@1662 7163 <td>N/A
jdaggett@1662 7164
jdaggett@1662 7165 <td>visual
jdaggett@1662 7166
jdaggett@3460 7167 <tr>
jdaggett@3460 7168 <th><a class=property
jdaggett@1662 7169 href="#propdef-font-variant-numeric">font-variant-numeric</a>
jdaggett@1662 7170
jdaggett@5809 7171 <td>normal | [ &lt;numeric-figure-values&gt; ||
jdaggett@1732 7172 &lt;numeric-spacing-values&gt; || &lt;numeric-fraction-values&gt; ||
jdaggett@3638 7173 ordinal || slashed-zero ]
jdaggett@1662 7174
jdaggett@1662 7175 <td>normal
jdaggett@1662 7176
jdaggett@1662 7177 <td>all elements
jdaggett@1662 7178
jdaggett@1662 7179 <td>yes
jdaggett@1662 7180
jdaggett@1662 7181 <td>N/A
jdaggett@1662 7182
jdaggett@1662 7183 <td>visual
jdaggett@1662 7184
jdaggett@3460 7185 <tr>
jdaggett@3460 7186 <th><a class=property
jdaggett@3460 7187 href="#propdef-font-variant-position">font-variant-position</a>
jdaggett@3460 7188
jdaggett@3638 7189 <td>normal | sub | super
jdaggett@3460 7190
jdaggett@3460 7191 <td>normal
jdaggett@3460 7192
jdaggett@3460 7193 <td>all elements
jdaggett@3460 7194
jdaggett@3460 7195 <td>yes
jdaggett@3460 7196
jdaggett@3460 7197 <td>N/A
jdaggett@3460 7198
jdaggett@3460 7199 <td>visual
jdaggett@3460 7200
jdaggett@3460 7201 <tr>
jdaggett@8278 7202 <th><span class=property>font-weight</span>
jdaggett@484 7203
jdaggett@484 7204 <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600
jdaggett@5809 7205 | 700 | 800 | 900
jdaggett@484 7206
jdaggett@484 7207 <td>normal
jdaggett@484 7208
jdaggett@484 7209 <td>all elements
jdaggett@484 7210
jdaggett@484 7211 <td>yes
jdaggett@484 7212
jdaggett@484 7213 <td>N/A
jdaggett@484 7214
jdaggett@484 7215 <td>visual
jdaggett@484 7216 </table>
jdaggett@890 7217 <!--end-properties-->
jdaggett@5596 7218 <!--begin-descriptors-->
jdaggett@5596 7219
jdaggett@5596 7220 <table class=proptable>
jdaggett@5596 7221 <thead>
jdaggett@5596 7222 <tr>
jdaggett@5596 7223 <th>Descriptor
jdaggett@5596 7224
jdaggett@5596 7225 <th>Value
jdaggett@5596 7226
jdaggett@5596 7227 <th>Initial
jdaggett@5596 7228
jdaggett@5596 7229 <th>Percentages
jdaggett@5596 7230
jdaggett@5596 7231 <th>Media
jdaggett@5596 7232
jdaggett@5596 7233 <tbody>
jdaggett@5596 7234 <tr>
jdaggett@8278 7235 <th><span class=property>font-family</span>
jdaggett@5596 7236
jdaggett@8225 7237 <td>&lt;family-name&gt;
jdaggett@5596 7238
jdaggett@5596 7239 <td>N/A
jdaggett@5596 7240
jdaggett@5596 7241 <tr>
jdaggett@8279 7242 <th><span class=property>font-feature-settings</span>
jdaggett@5596 7243
jdaggett@8225 7244 <td>normal | &lt;feature-tag-value&gt; #
jdaggett@5596 7245
jdaggett@5596 7246 <td>normal
jdaggett@5596 7247
jdaggett@5596 7248 <tr>
jdaggett@8278 7249 <th><span class=property>font-stretch</span>
jdaggett@5596 7250
jdaggett@5596 7251 <td>normal | ultra-condensed | extra-condensed | condensed |
jdaggett@5596 7252 semi-condensed | semi-expanded | expanded | extra-expanded |
jdaggett@5596 7253 ultra-expanded
jdaggett@5596 7254
jdaggett@5596 7255 <td>normal
jdaggett@5596 7256
jdaggett@5596 7257 <tr>
jdaggett@8278 7258 <th><span class=property>font-style</span>
jdaggett@5596 7259
jdaggett@5596 7260 <td>normal | italic | oblique
jdaggett@5596 7261
jdaggett@5596 7262 <td>normal
jdaggett@5596 7263
jdaggett@5596 7264 <tr>
jdaggett@8278 7265 <th><span class=property>font-variant</span>
jdaggett@5596 7266
jdaggett@8225 7267 <td>normal | none | [ &lt;common-lig-values&gt; ||
jdaggett@5596 7268 &lt;discretionary-lig-values&gt; || &lt;historical-lig-values&gt; ||
jdaggett@5596 7269 &lt;contextual-alt-values&gt; || stylistic(&lt;feature-value-name&gt;)
jdaggett@8225 7270 || historical-forms || styleset(&lt;feature-value-name&gt; #) ||
jdaggett@8225 7271 character-variant(&lt;feature-value-name&gt; #) ||
jdaggett@5833 7272 swash(&lt;feature-value-name&gt;) ||
jdaggett@5596 7273 ornaments(&lt;feature-value-name&gt;) ||
jdaggett@5596 7274 annotation(&lt;feature-value-name&gt;) || [ small-caps | all-small-caps
jdaggett@6648 7275 | petite-caps | all-petite-caps | unicase | titling-caps ] ||
jdaggett@5596 7276 &lt;numeric-figure-values&gt; || &lt;numeric-spacing-values&gt; ||
jdaggett@5596 7277 &lt;numeric-fraction-values&gt; || ordinal || slashed-zero ||
jdaggett@5596 7278 &lt;east-asian-variant-values&gt; || &lt;east-asian-width-values&gt; ||
jdaggett@5596 7279 ruby ]
jdaggett@5596 7280
jdaggett@5596 7281 <td>normal
jdaggett@5596 7282
jdaggett@5596 7283 <tr>
jdaggett@8278 7284 <th><span class=property>font-weight</span>
jdaggett@5596 7285
jdaggett@5596 7286 <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
jdaggett@5596 7287
jdaggett@5596 7288 <td>normal
jdaggett@5596 7289
jdaggett@5596 7290 <tr>
jdaggett@5596 7291 <th><a class=property href="#descdef-src">src</a>
jdaggett@5596 7292
jdaggett@8225 7293 <td>[ &lt;url> [format(&lt;string> #)]? | &lt;font-face-name&gt; ] #
jdaggett@5596 7294
jdaggett@5596 7295 <td>N/A
jdaggett@5596 7296
jdaggett@5596 7297 <tr>
jdaggett@5596 7298 <th><a class=property href="#descdef-unicode-range">unicode-range</a>
jdaggett@5596 7299
jdaggett@8225 7300 <td>&lt;urange&gt; #
jdaggett@5596 7301
jdaggett@5596 7302 <td>U+0-10FFFF
jdaggett@5596 7303 </table>
jdaggett@5596 7304 <!--end-descriptors-->
jdaggett@6648 7305 <script type="text/javascript">
jdaggett@6648 7306 window.onload = function () {
jdaggett@6648 7307 if (!("devicePixelRatio" in window && window.devicePixelRatio > 1)) return;
jdaggett@6648 7308 var i, hiresElements = document.getElementsByClassName("hires");
jdaggett@6648 7309 for (i = 0; i < hiresElements.length; i++) {
jdaggett@6648 7310 var h = hiresElements[i];
jdaggett@6648 7311 if (h.tagName != "IMG") continue;
jdaggett@6648 7312 var src = h.getAttribute("src");
jdaggett@6648 7313 var src2x = src.replace(/\.\w+$/, function(m) { return "@2x" + m; });
jdaggett@6648 7314 h.src = src2x;
jdaggett@6648 7315 }
jdaggett@6648 7316 }
jdaggett@6648 7317 </script>
jdaggett@484 7318 </html>
jdaggett@484 7319 <!-- Keep this comment at the end of the file
jdaggett@484 7320 Local variables:
jdaggett@484 7321 mode: sgml
jdaggett@484 7322 sgml-declaration:"~/SGML/HTML4.decl"
jdaggett@484 7323 sgml-default-doctype-name:"html"
jdaggett@484 7324 sgml-minimize-attributes:t
jdaggett@484 7325 sgml-nofill-elements:("pre" "style" "br")
jdaggett@484 7326 sgml-live-element-indicator:t
jdaggett@484 7327 sgml-omittag:nil
jdaggett@484 7328 sgml-shorttag:nil
jdaggett@484 7329 sgml-namecase-general:t
jdaggett@484 7330 sgml-general-insert-case:lower
jdaggett@484 7331 sgml-always-quote-attributes:t
jdaggett@484 7332 sgml-indent-step:nil
jdaggett@484 7333 sgml-indent-data:t
jdaggett@484 7334 sgml-parent-document:nil
jdaggett@484 7335 sgml-exposed-tags:nil
jdaggett@484 7336 sgml-local-catalogs:nil
jdaggett@484 7337 sgml-local-ecat-files:nil
jdaggett@484 7338 End:
jdaggett@484 7339 -->
jdaggett@8277 7340 <!--
jdaggett@1856 7341
jdaggett@1856 7342 to do:
jdaggett@1856 7343
jdaggett@1856 7344 - wording of OpenType family name handling
jdaggett@1856 7345 - handling combining sequences in the font matching algorithm
jdaggett@1856 7346 - fix-up fi ligature example
jdaggett@1856 7347
jdaggett@1856 7348 -->

mercurial