Fri, 07 Jun 2013 08:10:47 +0900
[css3-fonts] remove specifics about decorations on font-variant-position
jdaggett@484 | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" |
jdaggett@484 | 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
jdaggett@484 | 3 | |
jdaggett@484 | 4 | <html lang=en> |
jdaggett@484 | 5 | <head><meta content="text/html;charset=utf-8" http-equiv=Content-Type> |
jdaggett@484 | 6 | |
jdaggett@1244 | 7 | <title>CSS Fonts Module Level 3</title> |
jdaggett@484 | 8 | <!-- |
jdaggett@484 | 9 | FIXME when publishing: copy the current default.css and link to |
jdaggett@484 | 10 | "default.css" rather than "../default.css" |
jdaggett@484 | 11 | --> |
jdaggett@484 | 12 | <link href="../default.css" rel=stylesheet type="text/css"> |
jdaggett@4545 | 13 | <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon"> |
jdaggett@4546 | 14 | <!-- I'm just experimenting here, don't get your bee in a bonnet --> |
jdaggett@4546 | 15 | <script src="http://use.typekit.com/xon2bky.js" |
jdaggett@4546 | 16 | type="text/javascript"></script> |
jdaggett@4546 | 17 | <script type="text/javascript">try{Typekit.load();}catch(e){}</script> |
jdaggett@484 | 18 | |
jdaggett@497 | 19 | <style type="text/css"> |
jdaggett@4546 | 20 | |
jdaggett@4547 | 21 | body, th, td, h1, h2, h3, h4, h5, h6 { |
jdaggett@4547 | 22 | font-family: "myriad-pro", sans-serif !important; |
jdaggett@4547 | 23 | } |
jdaggett@8277 | 24 | |
jdaggett@524 | 25 | body { |
jdaggett@524 | 26 | padding: 2em 70px 2em 70px; |
jdaggett@524 | 27 | } |
jdaggett@4546 | 28 | |
jdaggett@497 | 29 | p + p, p.mtb { |
jdaggett@497 | 30 | margin-top: 0.8em; |
jdaggett@497 | 31 | text-indent: 0px; |
jdaggett@497 | 32 | } |
jdaggett@6651 | 33 | |
jdaggett@6651 | 34 | #bolderlighter { |
jdaggett@6651 | 35 | width: 40%; |
jdaggett@6651 | 36 | } |
jdaggett@6651 | 37 | |
jdaggett@6651 | 38 | #bolderlighter th { |
jdaggett@6651 | 39 | text-align: center; |
jdaggett@6651 | 40 | } |
jdaggett@8277 | 41 | |
jdaggett@7103 | 42 | #fontformats td, #eventhandlers td, #fontformats th, #eventhandlers th { |
jdaggett@1244 | 43 | padding-right: 2em; |
jdaggett@512 | 44 | text-align: left; |
jdaggett@512 | 45 | } |
jdaggett@8277 | 46 | |
jdaggett@518 | 47 | dd { |
jdaggett@518 | 48 | margin-bottom: 1em; |
jdaggett@514 | 49 | } |
jdaggett@8277 | 50 | |
jdaggett@516 | 51 | #authors dd { |
jdaggett@516 | 52 | margin-bottom: 0; |
jdaggett@516 | 53 | } |
jdaggett@8277 | 54 | |
jdaggett@531 | 55 | #fontstylematchingalg { |
jdaggett@531 | 56 | list-style-type: lower-alpha; |
jdaggett@531 | 57 | } |
jdaggett@8277 | 58 | |
jdaggett@531 | 59 | #fontmatchingalg ul, #fontmatchingalg ol { |
jdaggett@531 | 60 | margin-top: 0.8em; |
jdaggett@531 | 61 | } |
jdaggett@8277 | 62 | |
jdaggett@531 | 63 | #fontmatchingalg li + li { |
jdaggett@531 | 64 | margin-top: 0.8em; |
jdaggett@531 | 65 | } |
jdaggett@8277 | 66 | |
jdaggett@531 | 67 | div.example { |
jdaggett@531 | 68 | padding: 1em; |
jdaggett@531 | 69 | margin-top: 1em; |
jdaggett@531 | 70 | } |
jdaggett@531 | 71 | |
jdaggett@531 | 72 | div.example + div.example { |
jdaggett@531 | 73 | margin-top: 2em; |
jdaggett@531 | 74 | } |
jdaggett@8277 | 75 | |
jdaggett@531 | 76 | div.figure { |
jdaggett@531 | 77 | page-break-inside: avoid; |
jdaggett@531 | 78 | } |
jdaggett@1244 | 79 | |
jdaggett@1662 | 80 | pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em } |
jdaggett@8277 | 81 | |
jdaggett@8277 | 82 | div.featex { |
jdaggett@1662 | 83 | width: 700px; |
jdaggett@1662 | 84 | } |
jdaggett@8277 | 85 | |
jdaggett@1662 | 86 | div.featex img { |
jdaggett@1662 | 87 | margin: auto; |
jdaggett@1662 | 88 | display: block; |
jdaggett@1662 | 89 | } |
jdaggett@6436 | 90 | |
jdaggett@6436 | 91 | span.tag { |
jdaggett@6436 | 92 | font-family: monospace; |
jdaggett@6436 | 93 | font-size: 120%; |
jdaggett@6436 | 94 | } |
jdaggett@6648 | 95 | |
jdaggett@6701 | 96 | ol ol { |
jdaggett@6701 | 97 | list-style-type: lower-alpha; |
jdaggett@6701 | 98 | } |
jdaggett@7060 | 99 | |
jdaggett@7060 | 100 | .idl-code { |
jdaggett@7060 | 101 | font-weight: bold; |
jdaggett@7060 | 102 | color: #c50; |
jdaggett@7060 | 103 | } |
jdaggett@497 | 104 | </style> |
jdaggett@2556 | 105 | <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet |
jdaggett@2556 | 106 | type="text/css"> |
jdaggett@497 | 107 | |
jdaggett@484 | 108 | <body> |
jdaggett@484 | 109 | <div class=head> <!--begin-logo--> |
jdaggett@484 | 110 | <p><a href="http://www.w3.org/"><img alt=W3C height=48 |
jdaggett@890 | 111 | src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> |
jdaggett@890 | 112 | |
jdaggett@901 | 113 | <h1>CSS Fonts Module Level 3</h1> |
jdaggett@901 | 114 | |
jdaggett@8363 | 115 | <h2 class="no-num no-toc" id=editors-draft-7-june-2013>Editor's Draft 7 |
jdaggett@8356 | 116 | June 2013</h2> |
jdaggett@484 | 117 | |
jdaggett@516 | 118 | <dl id=authors> |
jdaggett@484 | 119 | <dt>This version: |
jdaggett@484 | 120 | |
jdaggett@484 | 121 | <dd><a |
jdaggett@8031 | 122 | href="http://dev.w3.org/csswg/css-fonts/">http://dev.w3.org/csswg/css-fonts/</a> |
jdaggett@8363 | 123 | <!-- <dd><a href="http://www.w3.org/TR/2013/ED-css3-fonts-20130607/">http://www.w3.org/TR/2013/ED-css3-fonts-20130607/</a> --> |
jdaggett@484 | 124 | |
jdaggett@484 | 125 | |
jdaggett@484 | 126 | <dt>Latest version: |
jdaggett@484 | 127 | |
jdaggett@484 | 128 | <dd><a |
jdaggett@484 | 129 | href="http://www.w3.org/TR/css3-fonts/">http://www.w3.org/TR/css3-fonts/</a> |
jdaggett@484 | 130 | |
jdaggett@890 | 131 | <dt>Latest editor's draft: |
jdaggett@890 | 132 | |
jdaggett@890 | 133 | <dd><a |
jdaggett@8031 | 134 | href="http://dev.w3.org/csswg/css-fonts/">http://dev.w3.org/csswg/css-fonts/</a> |
jdaggett@7488 | 135 | (<a |
jdaggett@8031 | 136 | href="https://dvcs.w3.org/hg/csswg/log/tip/css-fonts/Fonts.html">change |
jdaggett@7488 | 137 | log</a>) |
jdaggett@890 | 138 | |
jdaggett@4624 | 139 | <dt>Previous version: |
jdaggett@890 | 140 | |
jdaggett@890 | 141 | <dd><a |
jdaggett@7451 | 142 | href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/">http://www.w3.org/TR/2013/WD-css3-fonts-20130212/</a> |
jdaggett@4624 | 143 | |
jdaggett@4624 | 144 | <dt>Issues List: |
jdaggett@4624 | 145 | |
jdaggett@4624 | 146 | <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/18">CSS3 Fonts |
jdaggett@4624 | 147 | issues in Tracker</a> |
jdaggett@2556 | 148 | |
jdaggett@2556 | 149 | <dd><a |
jdaggett@6648 | 150 | href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&product=CSS&component=Fonts&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED">CSS3 |
jdaggett@4624 | 151 | Fonts issues in Bugzilla</a> |
jdaggett@4624 | 152 | |
jdaggett@8031 | 153 | <dt>Discussion: |
jdaggett@8031 | 154 | |
jdaggett@8031 | 155 | <dd><a |
jdaggett@8031 | 156 | href="mailto:www-style@w3.org?subject=%5Bcss-fonts%5D%20feedback">www-style@w3.org</a> |
jdaggett@8031 | 157 | with subject line “<kbd>[css-fonts] <var>… message topic |
jdaggett@8031 | 158 | …</var></kbd>” (<a |
jdaggett@8031 | 159 | href="http://lists.w3.org/Archives/Public/www-style/" |
jdaggett@8031 | 160 | rel=discussion>archives</a>) |
jdaggett@890 | 161 | |
jdaggett@890 | 162 | <dt>Editor: |
jdaggett@484 | 163 | |
jdaggett@497 | 164 | <dd><a href="mailto:jdaggett@mozilla.com">John Daggett (Mozilla)</a> |
jdaggett@484 | 165 | </dl> |
jdaggett@484 | 166 | <!--begin-copyright--> |
jdaggett@484 | 167 | <p class=copyright><a |
jdaggett@484 | 168 | href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" |
jdaggett@7179 | 169 | rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr |
jdaggett@5530 | 170 | title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a |
jdaggett@5530 | 171 | href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of |
jdaggett@5530 | 172 | Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr |
jdaggett@1662 | 173 | title="European Research Consortium for Informatics and |
jdaggett@7244 | 174 | Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, |
jdaggett@7244 | 175 | <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C |
jdaggett@7244 | 176 | <a |
jdaggett@484 | 177 | href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, |
jdaggett@484 | 178 | <a |
jdaggett@484 | 179 | href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> |
jdaggett@484 | 180 | and <a |
jdaggett@484 | 181 | href="http://www.w3.org/Consortium/Legal/copyright-documents">document |
jdaggett@484 | 182 | use</a> rules apply.</p> |
jdaggett@484 | 183 | <!--end-copyright--> |
jdaggett@484 | 184 | <hr title="Separator for header"> |
jdaggett@484 | 185 | </div> |
jdaggett@525 | 186 | |
jdaggett@484 | 187 | <h2 class="no-num no-toc" id=abstract>Abstract</h2> |
jdaggett@484 | 188 | |
jdaggett@890 | 189 | <p>This CSS3 module describes how font properties are specified and how |
jdaggett@890 | 190 | font resources are loaded dynamically. The contents of this specification |
jdaggett@1244 | 191 | are a consolidation of content previously divided into <a |
jdaggett@3538 | 192 | href="http://www.w3.org/TR/2002/WD-css3-fonts-20020802/">CSS3 Fonts</a> |
jdaggett@3538 | 193 | and <a href="http://www.w3.org/TR/2002/WD-css3-webfonts-20020802/">CSS3 |
jdaggett@7521 | 194 | Web Fonts</a> modules. The description of font load events was moved into |
jdaggett@7521 | 195 | the <a href="http://dev.w3.org/csswg/css3-font-load-events/">CSS3 Font |
jdaggett@7521 | 196 | Load Events</a> module. |
jdaggett@484 | 197 | |
jdaggett@484 | 198 | <h2 class="no-num no-toc" id=status>Status of this document</h2> |
jdaggett@484 | 199 | <!--begin-status--> |
jdaggett@484 | 200 | |
jdaggett@484 | 201 | <p>This is a public copy of the editors' draft. It is provided for |
jdaggett@484 | 202 | discussion only and may change at any moment. Its publication here does |
jdaggett@484 | 203 | not imply endorsement of its contents by W3C. Don't cite this document |
jdaggett@484 | 204 | other than as work in progress. |
jdaggett@484 | 205 | |
jdaggett@484 | 206 | <p>The (<a |
jdaggett@484 | 207 | href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public |
jdaggett@1662 | 208 | mailing list <a |
jdaggett@1662 | 209 | href="mailto:www-style@w3.org?Subject=%5Bcss3-fonts%5D%20PUT%20SUBJECT%20HERE"> |
jdaggett@1662 | 210 | www-style@w3.org</a> (see <a |
jdaggett@1662 | 211 | href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for |
jdaggett@1662 | 212 | discussion of this specification. When sending e-mail, please put the text |
jdaggett@1662 | 213 | “css3-fonts” in the subject, preferably like this: |
jdaggett@1148 | 214 | “[<!---->css3-fonts<!---->] <em>…summary of comment…</em>” |
jdaggett@484 | 215 | |
jdaggett@8031 | 216 | <p>This document was produced by the <a |
jdaggett@8031 | 217 | href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of |
jdaggett@8031 | 218 | the <a href="http://www.w3.org/Style/">Style Activity</a>). |
jdaggett@484 | 219 | |
jdaggett@484 | 220 | <p>This document was produced by a group operating under the <a |
jdaggett@8031 | 221 | href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February |
jdaggett@8031 | 222 | 2004 W3C Patent Policy</a>. W3C maintains a <a |
jdaggett@8031 | 223 | href="http://www.w3.org/2004/01/pp-impl/32061/status" |
jdaggett@484 | 224 | rel=disclosure>public list of any patent disclosures</a> made in |
jdaggett@484 | 225 | connection with the deliverables of the group; that page also includes |
jdaggett@484 | 226 | instructions for disclosing a patent. An individual who has actual |
jdaggett@484 | 227 | knowledge of a patent which the individual believes contains <a |
jdaggett@8031 | 228 | href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential |
jdaggett@484 | 229 | Claim(s)</a> must disclose the information in accordance with <a |
jdaggett@8031 | 230 | href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section |
jdaggett@8031 | 231 | 6 of the W3C Patent Policy</a>.</p> |
jdaggett@484 | 232 | <!--end-status--> |
jdaggett@4624 | 233 | <!-- |
jdaggett@4624 | 234 | <h3 class="no-num no-toc" id="atrisk">Features at risk</h3> |
jdaggett@4624 | 235 | |
jdaggett@4624 | 236 | <p>The following features are at risk and may be removed when exiting CR:</p> |
jdaggett@4624 | 237 | |
jdaggett@4624 | 238 | <ul> |
jdaggett@4624 | 239 | </ul> |
jdaggett@4624 | 240 | --> |
jdaggett@2472 | 241 | |
jdaggett@484 | 242 | <h2 class="no-num no-toc" id=contents>Table of contents</h2> |
jdaggett@484 | 243 | <!--begin-toc--> |
jdaggett@484 | 244 | |
jdaggett@484 | 245 | <ul class=toc> |
jdaggett@890 | 246 | <li><a href="#introduction"><span class=secno>1 </span>Introduction</a> |
jdaggett@890 | 247 | |
jdaggett@1244 | 248 | <li><a href="#typography-background"><span class=secno>2 </span>Typography |
jdaggett@545 | 249 | Background</a> |
jdaggett@545 | 250 | |
jdaggett@6699 | 251 | <li><a href="#basic-font-props"><span class=secno>3 </span>Basic Font |
jdaggett@6699 | 252 | Properties</a> |
jdaggett@484 | 253 | <ul class=toc> |
jdaggett@1662 | 254 | <li><a href="#font-family-prop"><span class=secno>3.1 </span>Font |
jdaggett@1662 | 255 | family: the font-family property</a> |
jdaggett@514 | 256 | <ul class=toc> |
jdaggett@1244 | 257 | <li><a href="#generic-font-families"><span class=secno>3.1.1 |
jdaggett@1244 | 258 | </span>Generic font families</a> |
jdaggett@514 | 259 | </ul> |
jdaggett@484 | 260 | |
jdaggett@1662 | 261 | <li><a href="#font-weight-prop"><span class=secno>3.2 </span>Font |
jdaggett@1662 | 262 | weight: the font-weight property</a> |
jdaggett@1662 | 263 | |
jdaggett@1662 | 264 | <li><a href="#font-stretch-prop"><span class=secno>3.3 </span>Font |
jdaggett@1662 | 265 | width: the font-stretch property</a> |
jdaggett@1662 | 266 | |
jdaggett@1662 | 267 | <li><a href="#font-style-prop"><span class=secno>3.4 </span>Font style: |
jdaggett@1662 | 268 | the font-style property</a> |
jdaggett@1662 | 269 | |
jdaggett@1662 | 270 | <li><a href="#font-size-prop"><span class=secno>3.5 </span>Font size: |
jdaggett@1662 | 271 | the font-size property</a> |
jdaggett@1662 | 272 | |
jdaggett@1662 | 273 | <li><a href="#font-size-adjust-prop"><span class=secno>3.6 |
jdaggett@1662 | 274 | </span>Relative sizing: the font-size-adjust property</a> |
jdaggett@1662 | 275 | |
jdaggett@1662 | 276 | <li><a href="#font-prop"><span class=secno>3.7 </span>Shorthand font |
jdaggett@1662 | 277 | property: the font property</a> |
jdaggett@2457 | 278 | |
jdaggett@2487 | 279 | <li><a href="#font-synthesis-prop"><span class=secno>3.8 |
jdaggett@2487 | 280 | </span>Controlling synthetic faces: the font-synthesis property</a> |
jdaggett@484 | 281 | </ul> |
jdaggett@484 | 282 | |
jdaggett@890 | 283 | <li><a href="#font-resources"><span class=secno>4 </span>Font |
jdaggett@6699 | 284 | Resources</a> |
jdaggett@512 | 285 | <ul class=toc> |
jdaggett@1662 | 286 | <li><a href="#font-face-rule"><span class=secno>4.1 </span>The |
jdaggett@7096 | 287 | <code>@font-face</code> rule</a> |
jdaggett@1244 | 288 | |
jdaggett@1662 | 289 | <li><a href="#font-family-desc"><span class=secno>4.2 </span>Font |
jdaggett@1662 | 290 | family: the font-family descriptor</a> |
jdaggett@1662 | 291 | |
jdaggett@1662 | 292 | <li><a href="#src-desc"><span class=secno>4.3 </span>Font reference: the |
jdaggett@1662 | 293 | src descriptor</a> |
jdaggett@1662 | 294 | |
jdaggett@1662 | 295 | <li><a href="#font-prop-desc"><span class=secno>4.4 </span>Font property |
jdaggett@1662 | 296 | descriptors: the font-style, font-weight, font-stretch descriptors</a> |
jdaggett@1662 | 297 | |
jdaggett@1662 | 298 | <li><a href="#unicode-range-desc"><span class=secno>4.5 </span>Character |
jdaggett@1662 | 299 | range: the unicode-range descriptor</a> |
jdaggett@1662 | 300 | |
jdaggett@8225 | 301 | <li><a href="#composite-fonts"><span class=secno>4.6 </span>Using |
jdaggett@8225 | 302 | character ranges to define composite fonts</a> |
jdaggett@8225 | 303 | |
jdaggett@8225 | 304 | <li><a href="#font-rend-desc"><span class=secno>4.7 </span>Font |
jdaggett@1732 | 305 | features: the font-variant and font-feature-settings descriptors</a> |
jdaggett@2563 | 306 | |
jdaggett@8225 | 307 | <li><a href="#font-face-loading"><span class=secno>4.8 </span>Font |
jdaggett@2563 | 308 | loading guidelines</a> |
jdaggett@2737 | 309 | |
jdaggett@8225 | 310 | <li><a href="#same-origin-restriction"><span class=secno>4.9 |
jdaggett@2737 | 311 | </span>Same-origin restriction for fonts</a> |
jdaggett@2740 | 312 | <ul class=toc> |
jdaggett@8225 | 313 | <li><a href="#default-same-origin-restriction"><span class=secno>4.9.1 |
jdaggett@2740 | 314 | </span>Default same-origin restriction</a> |
jdaggett@2740 | 315 | |
jdaggett@2740 | 316 | <li><a href="#allowing-cross-origin-font-loading"><span |
jdaggett@8225 | 317 | class=secno>4.9.2 </span>Allowing cross-origin font loading</a> |
jdaggett@2740 | 318 | </ul> |
jdaggett@512 | 319 | </ul> |
jdaggett@484 | 320 | |
jdaggett@1244 | 321 | <li><a href="#font-matching-algorithm"><span class=secno>5 </span>Font |
jdaggett@6699 | 322 | Matching Algorithm</a> |
jdaggett@2457 | 323 | <ul class=toc> |
jdaggett@7309 | 324 | <li><a href="#font-family-casing"><span class=secno>5.1 </span>Case |
jdaggett@7309 | 325 | sensitivity of font family names</a> |
jdaggett@7309 | 326 | |
jdaggett@7309 | 327 | <li><a href="#font-style-matching"><span class=secno>5.2 </span>Matching |
jdaggett@2457 | 328 | font styles</a> |
jdaggett@2457 | 329 | |
jdaggett@7309 | 330 | <li><a href="#cluster-matching"><span class=secno>5.3 </span>Cluster |
jdaggett@6701 | 331 | matching</a> |
jdaggett@6701 | 332 | |
jdaggett@7309 | 333 | <li><a href="#char-handling-issues"><span class=secno>5.4 |
jdaggett@2457 | 334 | </span>Character handling issues</a> |
jdaggett@2509 | 335 | |
jdaggett@7309 | 336 | <li><a href="#font-matching-changes"><span class=secno>5.5 </span>Font |
jdaggett@2509 | 337 | matching changes since CSS 2.1</a> |
jdaggett@6701 | 338 | |
jdaggett@7309 | 339 | <li><a href="#font-matching-examples"><span class=secno>5.6 </span>Font |
jdaggett@6701 | 340 | matching examples</a> |
jdaggett@2457 | 341 | </ul> |
jdaggett@1244 | 342 | |
jdaggett@6699 | 343 | <li><a href="#font-rend-props"><span class=secno>6 </span>Font Feature |
jdaggett@6699 | 344 | Properties</a> |
jdaggett@1662 | 345 | <ul class=toc> |
jdaggett@1856 | 346 | <li><a href="#glyph-selection-positioning"><span class=secno>6.1 |
jdaggett@1856 | 347 | </span>Glyph selection and positioning</a> |
jdaggett@1856 | 348 | |
jdaggett@1856 | 349 | <li><a href="#language-specific-support"><span class=secno>6.2 |
jdaggett@1856 | 350 | </span>Language-specific display</a> |
jdaggett@1856 | 351 | |
jdaggett@1856 | 352 | <li><a href="#font-kerning-prop"><span class=secno>6.3 </span>Kerning: |
jdaggett@1662 | 353 | the font-kerning property</a> |
jdaggett@1662 | 354 | |
jdaggett@6176 | 355 | <li><a href="#font-variant-ligatures-prop"><span class=secno>6.4 |
jdaggett@6176 | 356 | </span>Ligatures: the font-variant-ligatures property</a> |
jdaggett@6176 | 357 | |
jdaggett@6176 | 358 | <li><a href="#font-variant-position-prop"><span class=secno>6.5 |
jdaggett@3638 | 359 | </span>Subscript and superscript forms: the font-variant-position |
jdaggett@3638 | 360 | property</a> |
jdaggett@1856 | 361 | |
jdaggett@2118 | 362 | <li><a href="#font-variant-caps-prop"><span class=secno>6.6 |
jdaggett@2118 | 363 | </span>Capitalization: the font-variant-caps property</a> |
jdaggett@2118 | 364 | |
jdaggett@2118 | 365 | <li><a href="#font-variant-numeric-prop"><span class=secno>6.7 |
jdaggett@2118 | 366 | </span>Numerical formatting: the font-variant-numeric property</a> |
jdaggett@2118 | 367 | |
jdaggett@2118 | 368 | <li><a href="#font-variant-alternates-prop"><span class=secno>6.8 |
jdaggett@1662 | 369 | </span>Alternates and swashes: the font-variant-alternates property</a> |
jdaggett@1662 | 370 | |
jdaggett@1662 | 371 | |
jdaggett@2472 | 372 | <li><a href="#font-feature-values"><span class=secno>6.9 </span>Defining |
jdaggett@7096 | 373 | font specific alternates: the <code>@font-feature-values</code> |
jdaggett@7096 | 374 | rule</a> |
jdaggett@8356 | 375 | <ul class=toc> |
jdaggett@8356 | 376 | <li><a href="#basic-syntax"><span class=secno>6.9.1 </span>Basic |
jdaggett@8356 | 377 | syntax</a> |
jdaggett@8356 | 378 | |
jdaggett@8356 | 379 | <li><a href="#multi-valued-feature-value-definitions"><span |
jdaggett@8356 | 380 | class=secno>6.9.2 </span>Multi-valued feature value definitions</a> |
jdaggett@8356 | 381 | </ul> |
jdaggett@2118 | 382 | |
jdaggett@2118 | 383 | <li><a href="#font-variant-east-asian-prop"><span class=secno>6.10 |
jdaggett@1662 | 384 | </span>East Asian text rendering: the font-variant-east-asian |
jdaggett@1662 | 385 | property</a> |
jdaggett@1662 | 386 | |
jdaggett@2118 | 387 | <li><a href="#font-variant-prop"><span class=secno>6.11 </span>Overall |
jdaggett@1662 | 388 | shorthand for font rendering: the font-variant property</a> |
jdaggett@1662 | 389 | |
jdaggett@2118 | 390 | <li><a href="#font-feature-settings-prop"><span class=secno>6.12 |
jdaggett@2509 | 391 | </span>Low-level font feature settings control: the |
jdaggett@2509 | 392 | font-feature-settings property</a> |
jdaggett@1662 | 393 | |
jdaggett@2118 | 394 | <li><a href="#font-language-override-prop"><span class=secno>6.13 |
jdaggett@1732 | 395 | </span>Font language override: the font-language-override property</a> |
jdaggett@1662 | 396 | </ul> |
jdaggett@1662 | 397 | |
jdaggett@6176 | 398 | <li><a href="#font-feature-resolution"><span class=secno>7 </span>Font |
jdaggett@6699 | 399 | Feature Resolution </a> |
jdaggett@6699 | 400 | <ul class=toc> |
jdaggett@6699 | 401 | <li><a href="#default-features"><span class=secno>7.1 </span>Default |
jdaggett@6699 | 402 | features</a> |
jdaggett@6699 | 403 | |
jdaggett@6699 | 404 | <li><a href="#feature-precedence"><span class=secno>7.2 </span>Feature |
jdaggett@6699 | 405 | precedence</a> |
jdaggett@6699 | 406 | |
jdaggett@6699 | 407 | <li><a href="#feature-precedence-examples"><span class=secno>7.3 |
jdaggett@6699 | 408 | </span>Feature precedence examples</a> |
jdaggett@6699 | 409 | </ul> |
jdaggett@6699 | 410 | |
jdaggett@7021 | 411 | <li><a href="#object-model"><span class=secno>8 </span>Object Model</a> |
jdaggett@7021 | 412 | <ul class=toc> |
jdaggett@7021 | 413 | <li><a href="#om-fontface"><span class=secno>8.1 </span>The |
jdaggett@7021 | 414 | <code>CSSFontFaceRule</code> interface</a> |
jdaggett@7021 | 415 | |
jdaggett@7021 | 416 | <li><a href="#om-fontfeaturevalues"><span class=secno>8.2 </span>The |
jdaggett@7021 | 417 | <code>CSSFontFeatureValuesRule</code> interface</a> |
jdaggett@7021 | 418 | </ul> |
jdaggett@7021 | 419 | |
jdaggett@2737 | 420 | <li class=no-num><a href="#platform-props-to-css">Appendix A: Mapping |
jdaggett@1662 | 421 | platform font properties to CSS properties</a> |
jdaggett@1662 | 422 | |
jdaggett@2472 | 423 | <li class=no-num><a href="#ch-ch-ch-changes">Changes</a> |
jdaggett@2472 | 424 | <ul class=toc> |
jdaggett@7442 | 425 | <li class=no-num><a href="#recent-changes"> Changes from the February |
jdaggett@7442 | 426 | 2013 CSS3 Fonts Working Draft</a> |
jdaggett@2472 | 427 | </ul> |
jdaggett@2472 | 428 | |
jdaggett@529 | 429 | <li class=no-num><a href="#acknowledgments">Acknowledgments</a> |
jdaggett@529 | 430 | |
jdaggett@7242 | 431 | <li class=no-num><a href="#conformance"> Conformance</a> |
jdaggett@7242 | 432 | <ul class=toc> |
jdaggett@7242 | 433 | <li class=no-num><a href="#conventions"> Document Conventions</a> |
jdaggett@7242 | 434 | |
jdaggett@7242 | 435 | <li class=no-num><a href="#conformance-classes"> Conformance Classes</a> |
jdaggett@7242 | 436 | |
jdaggett@7242 | 437 | |
jdaggett@7242 | 438 | <li class=no-num><a href="#partial"> Partial Implementations</a> |
jdaggett@7242 | 439 | |
jdaggett@7242 | 440 | <li class=no-num><a href="#experimental"> Experimental |
jdaggett@7242 | 441 | Implementations</a> |
jdaggett@7242 | 442 | |
jdaggett@7242 | 443 | <li class=no-num><a href="#testing"> Non-Experimental |
jdaggett@7242 | 444 | Implementations</a> |
jdaggett@7242 | 445 | </ul> |
jdaggett@7242 | 446 | |
jdaggett@484 | 447 | <li class=no-num><a href="#references">References</a> |
jdaggett@484 | 448 | <ul class=toc> |
jdaggett@1662 | 449 | <li class=no-num><a href="#normative-references">Normative |
jdaggett@1662 | 450 | References</a> |
jdaggett@1662 | 451 | |
jdaggett@1662 | 452 | <li class=no-num><a href="#other-references">Other References</a> |
jdaggett@484 | 453 | </ul> |
jdaggett@484 | 454 | |
jdaggett@484 | 455 | <li class=no-num><a href="#index">Index</a> |
jdaggett@484 | 456 | |
jdaggett@484 | 457 | <li class=no-num><a href="#property-index">Property index</a> |
jdaggett@484 | 458 | </ul> |
jdaggett@484 | 459 | <!--end-toc--> |
jdaggett@484 | 460 | |
jdaggett@890 | 461 | <h2 id=introduction><span class=secno>1 </span>Introduction</h2> |
jdaggett@545 | 462 | |
jdaggett@1148 | 463 | <p>A font provides a resource containing the visual representation of |
jdaggett@1662 | 464 | characters. At the simplest level it contains information that maps |
jdaggett@1662 | 465 | character codes to shapes (called glyphs) that represent these characters. |
jdaggett@1662 | 466 | Fonts sharing a common design style are commonly grouped into font |
jdaggett@1662 | 467 | families classified by a set of standard font properties. Within a family, |
jdaggett@1662 | 468 | the shape displayed for a given character can vary by stroke weight, slant |
jdaggett@7311 | 469 | or relative width, among others. An individual font face is described by a |
jdaggett@1662 | 470 | unique combination of these properties. For a given range of text, CSS |
jdaggett@1662 | 471 | font properties are used to select a font family and a specific font face |
jdaggett@1662 | 472 | within that family to be used when rendering that text. As a simple |
jdaggett@1662 | 473 | example, to use the bold form of Helvetica one could use: |
jdaggett@1148 | 474 | |
jdaggett@8277 | 475 | <pre>body { |
jdaggett@8277 | 476 | font-family: Helvetica; |
jdaggett@8277 | 477 | font-weight: bold; |
jdaggett@1148 | 478 | }</pre> |
jdaggett@1148 | 479 | |
jdaggett@7311 | 480 | <p>Font resources may be installed locally on the system on which a user |
jdaggett@7311 | 481 | agent is running or downloadable. For local font resources descriptive |
jdaggett@1148 | 482 | information can be obtained directly from the font resource. For |
jdaggett@1148 | 483 | downloadable font resources (sometimes referred to as web fonts), the |
jdaggett@1148 | 484 | descriptive information is included with the reference to the font |
jdaggett@1148 | 485 | resource. |
jdaggett@1148 | 486 | |
jdaggett@1148 | 487 | <p>Families of fonts typically don't contain a single face for each |
jdaggett@1148 | 488 | possible variation of font properties. The CSS font selection mechanism |
jdaggett@7311 | 489 | describes how to match a given set of CSS font properties to a single font |
jdaggett@1148 | 490 | face. |
jdaggett@890 | 491 | |
jdaggett@1244 | 492 | <h2 id=typography-background><span class=secno>2 </span>Typography |
jdaggett@1244 | 493 | Background</h2> |
jdaggett@890 | 494 | |
jdaggett@7311 | 495 | <p><em>This section is non-normative.</em> |
jdaggett@7311 | 496 | |
jdaggett@7311 | 497 | <p> Typographic traditions vary across the globe, so there is no unique way |
jdaggett@890 | 498 | to classify all fonts across languages and cultures. For even common Latin |
jdaggett@890 | 499 | letters, wide variations are possible: |
jdaggett@497 | 500 | |
jdaggett@1150 | 501 | <div class=figure><img alt="variations in glyphs for a single character" |
jdaggett@1150 | 502 | src=aaaaaa.png> |
jdaggett@890 | 503 | <p class=caption>One character, many glyph variations |
jdaggett@498 | 504 | </div> |
jdaggett@497 | 505 | |
jdaggett@497 | 506 | <p>Differences in the anatomy of letterforms is one way to distinguish |
jdaggett@497 | 507 | fonts. For Latin fonts, flourishes at the ends of a character's main |
jdaggett@497 | 508 | strokes, or serifs, can distinguish a font from those without. Similar |
jdaggett@534 | 509 | comparisons exist in non-Latin fonts between fonts with tapered strokes |
jdaggett@534 | 510 | and those using primarily uniform strokes: |
jdaggett@497 | 511 | |
jdaggett@1150 | 512 | <div class=figure><img alt="serif vs. non-serifs" src=serifvssansserif.png> |
jdaggett@890 | 513 | <p class=caption>Letterforms with and without serifs |
jdaggett@534 | 514 | </div> |
jdaggett@534 | 515 | |
jdaggett@1150 | 516 | <div class=figure><img alt="serif vs. non-serifs for japanese" |
jdaggett@1150 | 517 | src=minchovsgothic.png> |
jdaggett@890 | 518 | <p class=caption>Similar groupings for Japanese typefaces |
jdaggett@498 | 519 | </div> |
jdaggett@497 | 520 | |
jdaggett@497 | 521 | <p>Fonts contain letterforms and the data needed to map characters to these |
jdaggett@7311 | 522 | letterforms. Often this may be a simple one-to-one mapping, but more |
jdaggett@497 | 523 | complex mappings are also possible. The use of combining diacritic marks |
jdaggett@497 | 524 | creates many variations for an underlying letterform: |
jdaggett@497 | 525 | |
jdaggett@1150 | 526 | <div class=figure><img alt="diacritic marks" src=aaaaaa-diacritics.png> |
jdaggett@890 | 527 | <p class=caption>Variations with diacritic marks |
jdaggett@498 | 528 | </div> |
jdaggett@525 | 529 | |
jdaggett@497 | 530 | <p>A sequence of characters can be represented by a single glyph known as a |
jdaggett@497 | 531 | ligature: |
jdaggett@497 | 532 | |
jdaggett@1150 | 533 | <div class=figure><img alt="example of a fi ligature" |
jdaggett@1150 | 534 | src=final-ligature.png> |
jdaggett@890 | 535 | <p class=caption>Ligature example |
jdaggett@498 | 536 | </div> |
jdaggett@497 | 537 | |
jdaggett@7311 | 538 | <p>Visual transformations based on textual context are often stylistic |
jdaggett@7311 | 539 | option in European languages. They are required to correctly render |
jdaggett@7311 | 540 | languages like Arabic, the lam and alef characters below <em>must</em> be |
jdaggett@7311 | 541 | combined when they exist in sequence: |
jdaggett@497 | 542 | |
jdaggett@1150 | 543 | <div class=figure><img alt="lam alef ligature" src=lamaleflig.png> |
jdaggett@890 | 544 | <p class=caption>Required Arabic ligature |
jdaggett@498 | 545 | </div> |
jdaggett@497 | 546 | |
jdaggett@498 | 547 | <p>The relative complexity of these shaping transformations requires |
jdaggett@498 | 548 | additional data within the font. |
jdaggett@497 | 549 | |
jdaggett@497 | 550 | <p>Sets of font faces with various stylistic variations are often grouped |
jdaggett@512 | 551 | together into font families. In the simplest case a regular face is |
jdaggett@7311 | 552 | supplemented with bold and italic faces, but much more extensive groupings |
jdaggett@7311 | 553 | are possible. Variations in the thickness of letterform strokes, the <dfn |
jdaggett@7311 | 554 | id=weight>weight</dfn>, and the overall proportions of the letterform, the |
jdaggett@7311 | 555 | <dfn id=width>width</dfn>, are most common. In the example below, each |
jdaggett@7311 | 556 | letter uses a different font face within the Univers font family. The |
jdaggett@7311 | 557 | width used increases from top to bottom and the weight increases from left |
jdaggett@7311 | 558 | to right: |
jdaggett@497 | 559 | |
jdaggett@1150 | 560 | <div class=figure><img alt="various width and weight variations within a |
jdaggett@1150 | 561 | single family" src=weightwidthvariations.png> |
jdaggett@890 | 562 | <p class=caption>Weight and width variations within a single font family |
jdaggett@498 | 563 | </div> |
jdaggett@497 | 564 | |
jdaggett@545 | 565 | <p>Creating fonts that support multiple scripts is a difficult task; |
jdaggett@1148 | 566 | designers need to understand the cultural traditions surrounding the use |
jdaggett@1148 | 567 | of type in different scripts and come up with letterforms that somehow |
jdaggett@1148 | 568 | share a common theme. Many languages often share a common script and each |
jdaggett@7311 | 569 | of these languages may have noticeable stylistic differences. For example, |
jdaggett@7311 | 570 | the Arabic script is shared by Persian and Urdu and Cyrillic is used with |
jdaggett@7311 | 571 | many languages, not just Russian. |
jdaggett@518 | 572 | |
jdaggett@8225 | 573 | <p>The <a href="#character-map"><em>character map</em></a> of a font |
jdaggett@8225 | 574 | defines the mapping of characters to glyphs for that font. If a document |
jdaggett@8225 | 575 | contains characters not supported by the <a href="#character-map"><em |
jdaggett@8225 | 576 | title="character map">character maps</em></a> of the fonts contained in a |
jdaggett@8363 | 577 | font family list, a user agent may use a <a |
jdaggett@8363 | 578 | href="#system-font-fallback"><em>system font fallback</em></a> procedure |
jdaggett@8363 | 579 | to locate an appropriate font that does. If no appropriate font can be |
jdaggett@8363 | 580 | found, some form of "missing glyph" character will be rendered by the user |
jdaggett@8363 | 581 | agent. System fallback can occur when the specified list of font families |
jdaggett@8363 | 582 | does not include a font that supports a given character. |
jdaggett@8225 | 583 | |
jdaggett@8225 | 584 | <p>Although the <a href="#character-map"><em>character map</em></a> of a |
jdaggett@8225 | 585 | font maps a given character to a glyph for that character, modern font |
jdaggett@8225 | 586 | technologies such as OpenType and AAT (Apple Advanced Typography) provide |
jdaggett@8225 | 587 | ways of mapping a character to different glyphs based upon feature |
jdaggett@8225 | 588 | settings. Fonts in these formats allow these features to be embedded in |
jdaggett@8225 | 589 | the font itself and controlled by applications. Common typographic |
jdaggett@8225 | 590 | features which can be specified this way include ligatures, swashes, |
jdaggett@8225 | 591 | contextual alternates, proportional and tabular figures, and automatic |
jdaggett@8225 | 592 | fractions, to list just a few. For a visual overview of OpenType features, |
jdaggett@8225 | 593 | see the <a href="#OPENTYPE-FONT-GUIDE" |
jdaggett@6659 | 594 | rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>. |
jdaggett@1662 | 595 | |
jdaggett@6699 | 596 | <h2 id=basic-font-props><span class=secno>3 </span>Basic Font Properties</h2> |
jdaggett@512 | 597 | |
jdaggett@512 | 598 | <p>The particular font face used to render a character is determined by the |
jdaggett@515 | 599 | font family and other font properties that apply to a given element. This |
jdaggett@515 | 600 | structure allows settings to be varied independent of each other.</p> |
jdaggett@512 | 601 | <!-- prop: font-family --> |
jdaggett@484 | 602 | |
jdaggett@1662 | 603 | <h3 id=font-family-prop><span class=secno>3.1 </span>Font family: the <a |
jdaggett@1662 | 604 | href="#propdef-font-family">font-family</a> property</h3> |
jdaggett@1662 | 605 | |
jdaggett@8225 | 606 | <table class=propdef id=namefont-familyvalue-ltfamily-namegt-ltg> |
jdaggett@484 | 607 | <tbody> |
jdaggett@484 | 608 | <tr> |
jdaggett@484 | 609 | <td>Name: |
jdaggett@484 | 610 | |
jdaggett@8278 | 611 | <td><dfn id=propdef-font-family |
jdaggett@8278 | 612 | title="font-family!!property">font-family</dfn> |
jdaggett@484 | 613 | |
jdaggett@484 | 614 | <tr> |
jdaggett@484 | 615 | <td>Value: |
jdaggett@484 | 616 | |
jdaggett@8225 | 617 | <td>[ <a href="#family-name-value"><var><family-name></var></a> | |
jdaggett@8225 | 618 | <a href="#generic-family-value"><var><generic-family></var></a> ] |
jdaggett@8225 | 619 | # |
jdaggett@484 | 620 | |
jdaggett@484 | 621 | <tr> |
jdaggett@484 | 622 | <td>Initial: |
jdaggett@484 | 623 | |
jdaggett@484 | 624 | <td>depends on user agent |
jdaggett@484 | 625 | |
jdaggett@484 | 626 | <tr> |
jdaggett@484 | 627 | <td>Applies to: |
jdaggett@484 | 628 | |
jdaggett@484 | 629 | <td>all elements |
jdaggett@484 | 630 | |
jdaggett@484 | 631 | <tr> |
jdaggett@484 | 632 | <td>Inherited: |
jdaggett@484 | 633 | |
jdaggett@484 | 634 | <td>yes |
jdaggett@484 | 635 | |
jdaggett@484 | 636 | <tr> |
jdaggett@484 | 637 | <td>Percentages: |
jdaggett@484 | 638 | |
jdaggett@484 | 639 | <td>N/A |
jdaggett@484 | 640 | |
jdaggett@484 | 641 | <tr> |
jdaggett@484 | 642 | <td>Media: |
jdaggett@484 | 643 | |
jdaggett@484 | 644 | <td>visual |
jdaggett@484 | 645 | |
jdaggett@484 | 646 | <tr> |
jdaggett@1148 | 647 | <td>Computed value: |
jdaggett@484 | 648 | |
jdaggett@484 | 649 | <td>as specified |
jdaggett@7377 | 650 | |
jdaggett@7377 | 651 | <tr> |
jdaggett@7377 | 652 | <td>Animatable: |
jdaggett@7377 | 653 | |
jdaggett@7377 | 654 | <td>no |
jdaggett@484 | 655 | </table> |
jdaggett@484 | 656 | |
jdaggett@514 | 657 | <p>This property specifies a prioritized list of font family names or |
jdaggett@6694 | 658 | generic family names. A font family defines a set of faces that vary in |
jdaggett@6694 | 659 | weight, width or slope. CSS uses the combination of a family name with |
jdaggett@6694 | 660 | other style attributes to select an individual face. Using this selection |
jdaggett@6694 | 661 | mechanism, rather than selecting a face via the style name as is often |
jdaggett@6694 | 662 | done in design applications, allows some degree of regularity in textual |
jdaggett@6694 | 663 | display when fallback occurs. |
jdaggett@6694 | 664 | |
jdaggett@6694 | 665 | <p class=note>Designers should note that the CSS definition of font |
jdaggett@6694 | 666 | attributes used for selection are explicitly not intended to define a font |
jdaggett@6694 | 667 | taxonomy. A type designer's idea of a family may often extend to a set of |
jdaggett@6694 | 668 | faces that vary along axes other than just the standard axes of weight, |
jdaggett@6694 | 669 | width and slope. A family may extend to include both a set of serif faces |
jdaggett@6694 | 670 | and a set of sans-serif faces or vary along axes that are unique to that |
jdaggett@6694 | 671 | family. The CSS font selection mechanism merely provides a way to |
jdaggett@6694 | 672 | determine the “closest” substitute when substitution is necessary. |
jdaggett@6694 | 673 | |
jdaggett@6694 | 674 | <p>Unlike other CSS properties, component values are a comma-separated list |
jdaggett@6694 | 675 | indicating alternatives. A user agent iterates through the list of family |
jdaggett@6694 | 676 | names until it matches an available font that contains a glyph for the |
jdaggett@6694 | 677 | character to be rendered. This allows for differences in available fonts |
jdaggett@6694 | 678 | across platforms and for differences in the range of characters supported |
jdaggett@6694 | 679 | by individual fonts. |
jdaggett@514 | 680 | |
jdaggett@514 | 681 | <p>A font family name only specifies a name given to a set of font faces, |
jdaggett@8177 | 682 | it does not specify an individual face. For example, given the |
jdaggett@8177 | 683 | availability of the fonts below, Futura would match but Futura Medium |
jdaggett@8177 | 684 | would not: |
jdaggett@514 | 685 | |
jdaggett@1150 | 686 | <div class=figure><img alt="family and face names" |
jdaggett@1150 | 687 | src=familyvsfacename.png> |
jdaggett@890 | 688 | <p class=caption>Family and individual face names |
jdaggett@514 | 689 | </div> |
jdaggett@514 | 690 | |
jdaggett@514 | 691 | <p>Consider the example below: |
jdaggett@512 | 692 | |
jdaggett@512 | 693 | <div class=example> |
jdaggett@8277 | 694 | <pre>body { |
jdaggett@8277 | 695 | font-family: Helvetica, Verdana, sans-serif; |
jdaggett@514 | 696 | }</pre> |
jdaggett@1758 | 697 | |
jdaggett@1758 | 698 | <p>If Helvetica is available it will be used when rendering. If neither |
jdaggett@1758 | 699 | Helvetica nor Verdana is present, then the user-agent-defined sans serif |
jdaggett@1758 | 700 | font will be used.</p> |
jdaggett@512 | 701 | </div> |
jdaggett@512 | 702 | |
jdaggett@514 | 703 | <p>There are two types of font family names: |
jdaggett@512 | 704 | |
jdaggett@512 | 705 | <dl> |
jdaggett@8225 | 706 | <dt><dfn id=family-name-value><var><family-name></var></dfn> |
jdaggett@514 | 707 | |
jdaggett@514 | 708 | <dd>The name of a font family of choice such as Helvetica or Verdana in |
jdaggett@2457 | 709 | the previous example. |
jdaggett@514 | 710 | |
jdaggett@8225 | 711 | <dt><dfn id=generic-family-value><var><generic-family></var></dfn> |
jdaggett@514 | 712 | |
jdaggett@4624 | 713 | <dd> The following generic family keywords are defined: ‘<a |
jdaggett@4624 | 714 | href="#serif"><code class=property>serif</code></a>’, ‘<a |
jdaggett@4624 | 715 | href="#sans-serif"><code class=property>sans-serif</code></a>’, ‘<a |
jdaggett@4624 | 716 | href="#cursive"><code class=property>cursive</code></a>’, ‘<a |
jdaggett@4624 | 717 | href="#fantasy"><code class=property>fantasy</code></a>’, and ‘<a |
jdaggett@4624 | 718 | href="#monospace"><code class=property>monospace</code></a>’. These |
jdaggett@1148 | 719 | keywords can be used as a general fallback mechanism when an author's |
jdaggett@1758 | 720 | desired font choices are not available. As keywords, they must not be |
jdaggett@1148 | 721 | quoted. Authors are encouraged to append a generic font family as a last |
jdaggett@1148 | 722 | alternative for improved robustness. |
jdaggett@512 | 723 | </dl> |
jdaggett@512 | 724 | |
jdaggett@8272 | 725 | <p>Font family names other than generic families must either be given |
jdaggett@8272 | 726 | quoted as <a |
jdaggett@2457 | 727 | href="//www.w3.org/TR/CSS21/syndata.html#strings">strings,</a> or unquoted |
jdaggett@2457 | 728 | as a sequence of one or more <a |
jdaggett@2457 | 729 | href="//www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers.</a> |
jdaggett@2457 | 730 | This means most punctuation characters and digits at the start of each |
jdaggett@2457 | 731 | token must be escaped in unquoted font family names. |
jdaggett@2457 | 732 | |
jdaggett@7377 | 733 | <p>To illustrate this, the following declarations are invalid: |
jdaggett@2457 | 734 | |
jdaggett@2457 | 735 | <pre> |
jdaggett@2457 | 736 | font-family: Red/Black, sans-serif; |
jdaggett@2457 | 737 | font-family: "Lucida" Grande, sans-serif; |
jdaggett@2457 | 738 | font-family: Ahem!, sans-serif; |
jdaggett@2457 | 739 | font-family: test@foo, sans-serif; |
jdaggett@2457 | 740 | font-family: #POUND, sans-serif; |
jdaggett@2457 | 741 | font-family: Hawaii 5-0, sans-serif; |
jdaggett@2457 | 742 | </pre> |
jdaggett@2457 | 743 | |
jdaggett@2457 | 744 | <p>If a sequence of identifiers is given as a font family name, the |
jdaggett@2457 | 745 | computed value is the name converted to a string by joining all the |
jdaggett@2457 | 746 | identifiers in the sequence by single spaces. |
jdaggett@2457 | 747 | |
jdaggett@2457 | 748 | <p>To avoid mistakes in escaping, it is recommended to quote font family |
jdaggett@2457 | 749 | names that contain white space, digits, or punctuation characters other |
jdaggett@2457 | 750 | than hyphens: |
jdaggett@2457 | 751 | |
jdaggett@2457 | 752 | <pre> |
jdaggett@2457 | 753 | body { font-family: "New Century Schoolbook", serif } |
jdaggett@2457 | 754 | |
jdaggett@2457 | 755 | <BODY STYLE="font-family: '21st Century', fantasy"> |
jdaggett@2457 | 756 | </pre> |
jdaggett@2457 | 757 | |
jdaggett@2457 | 758 | <p>Font family <em>names</em> that happen to be the same as a keyword value |
jdaggett@4624 | 759 | (‘<code class=property>inherit</code>’, ‘<a href="#serif"><code |
jdaggett@4624 | 760 | class=property>serif</code></a>’, ‘<a href="#sans-serif"><code |
jdaggett@4624 | 761 | class=property>sans-serif</code></a>’, ‘<a href="#monospace"><code |
jdaggett@4624 | 762 | class=property>monospace</code></a>’, ‘<a href="#fantasy"><code |
jdaggett@4624 | 763 | class=property>fantasy</code></a>’, and ‘<a href="#cursive"><code |
jdaggett@4624 | 764 | class=property>cursive</code></a>’) must be quoted to prevent confusion |
jdaggett@2457 | 765 | with the keywords with the same names. The keywords ‘<code |
jdaggett@2457 | 766 | class=property>initial</code>’ and ‘<code |
jdaggett@2457 | 767 | class=property>default</code>’ are reserved for future use and must also |
jdaggett@2457 | 768 | be quoted when used as font names. UAs must not consider these keywords as |
jdaggett@8225 | 769 | matching the <a |
jdaggett@8225 | 770 | href="#family-name-value"><var><family-name></var></a> type. |
jdaggett@2457 | 771 | |
jdaggett@6694 | 772 | <p>The precise way a set of fonts are grouped into font families varies |
jdaggett@6694 | 773 | depending upon the platform font management API's. The Windows GDI API |
jdaggett@6694 | 774 | only allows four faces to be grouped into a family while the DirectWrite |
jdaggett@6694 | 775 | API and API's on OSX and other platforms support font families with a |
jdaggett@6695 | 776 | variety of weights, widths and slopes (see <a |
jdaggett@6694 | 777 | href="#platform-props-to-css">Appendix A</a> for more details). |
jdaggett@6694 | 778 | |
jdaggett@2457 | 779 | <p>Some font formats allow fonts to carry multiple localizations of the |
jdaggett@2457 | 780 | family name. User agents must recognize and correctly match all of these |
jdaggett@2457 | 781 | names independent of the underlying platform localization, system API used |
jdaggett@2457 | 782 | or document encoding: |
jdaggett@2457 | 783 | |
jdaggett@2457 | 784 | <div class=figure><img alt="examples of localized family names" |
jdaggett@2457 | 785 | src=localizedfamilynames.png> |
jdaggett@2457 | 786 | <p class=caption>Localized family names |
jdaggett@2457 | 787 | </div> |
jdaggett@2457 | 788 | |
jdaggett@1244 | 789 | <h4 id=generic-font-families><span class=secno>3.1.1 </span>Generic font |
jdaggett@1244 | 790 | families</h4> |
jdaggett@514 | 791 | |
jdaggett@518 | 792 | <p>All five generic font families are defined to exist in all CSS |
jdaggett@518 | 793 | implementations (they need not necessarily map to five distinct actual |
jdaggett@518 | 794 | fonts). User agents should provide reasonable default choices for the |
jdaggett@518 | 795 | generic font families, which express the characteristics of each family as |
jdaggett@518 | 796 | well as possible within the limits allowed by the underlying technology. |
jdaggett@518 | 797 | User agents are encouraged to allow users to select alternative choices |
jdaggett@514 | 798 | for the generic fonts. |
jdaggett@514 | 799 | |
jdaggett@890 | 800 | <h5 class="no-num no-toc"> <span class=index-def id=serif0 title="serif, |
jdaggett@890 | 801 | definition of"><a name=serif-def><dfn id=serif>serif</dfn></a></span></h5> |
jdaggett@514 | 802 | |
jdaggett@8178 | 803 | <p>Serif fonts represent the formal text style for a script. This often |
jdaggett@8178 | 804 | means but is not limited to glyphs that have finishing strokes, flared or |
jdaggett@8178 | 805 | tapering ends, or have actual serifed endings (including slab serifs). |
jdaggett@8178 | 806 | Serif fonts are typically proportionately-spaced. They often display a |
jdaggett@8178 | 807 | greater variation between thick and thin strokes than fonts from the ‘<a |
jdaggett@8178 | 808 | href="#sans-serif"><code class=property>sans-serif</code></a>’ generic |
jdaggett@8178 | 809 | font family. CSS uses the term ‘<a href="#serif"><code |
jdaggett@8178 | 810 | class=property>serif</code></a>’ to apply to a font for any script, |
jdaggett@8178 | 811 | although other names may be more familiar for particular scripts, such as |
jdaggett@8178 | 812 | Mincho (Japanese), Sung, Song or Kai (Chinese), Batang (Korean). For |
jdaggett@8178 | 813 | Arabic, the Naskh style would correspond to ‘<a href="#serif"><code |
jdaggett@8178 | 814 | class=property>serif</code></a>’ more due to its typographic role rather |
jdaggett@8178 | 815 | than its actual design style. Any font that is so described may be used to |
jdaggett@4624 | 816 | represent the generic ‘<a href="#serif"><code |
jdaggett@4624 | 817 | class=property>serif</code></a>’ family. |
jdaggett@514 | 818 | |
jdaggett@1150 | 819 | <div class=figure><img alt="sample serif fonts" src=serifexamples.png> |
jdaggett@890 | 820 | <p class=caption>Sample serif fonts |
jdaggett@514 | 821 | </div> |
jdaggett@514 | 822 | |
jdaggett@890 | 823 | <h5 class="no-num no-toc"> <span class=index-def id=sans-serif0 |
jdaggett@890 | 824 | title="sans-serif, definition of"> <a name=sans-serif-def><dfn |
jdaggett@890 | 825 | id=sans-serif>sans-serif</dfn></a></span></h5> |
jdaggett@514 | 826 | |
jdaggett@8178 | 827 | <p>Glyphs in sans-serif fonts, as the term is used in CSS, are generally |
jdaggett@8178 | 828 | low contrast (vertical and horizontal stems have the close to the same |
jdaggett@8178 | 829 | thickness) and have stroke endings that are plain -- without any flaring, |
jdaggett@8178 | 830 | cross stroke, or other ornamentation. Sans-serif fonts are typically |
jdaggett@8178 | 831 | proportionately-spaced. They often have little variation between thick and |
jdaggett@8178 | 832 | thin strokes, compared to fonts from the ‘<a href="#serif"><code |
jdaggett@4624 | 833 | class=property>serif</code></a>’ family. CSS uses the term ‘<a |
jdaggett@4624 | 834 | href="#sans-serif"><code class=property>sans-serif</code></a>’ to apply |
jdaggett@4624 | 835 | to a font for any script, although other names may be more familiar for |
jdaggett@3041 | 836 | particular scripts, such as Gothic (Japanese), Hei (Chinese), or Gulim |
jdaggett@1148 | 837 | (Korean). Any font that is so described may be used to represent the |
jdaggett@4624 | 838 | generic ‘<a href="#sans-serif"><code |
jdaggett@4624 | 839 | class=property>sans-serif</code></a>’ family. |
jdaggett@518 | 840 | |
jdaggett@1150 | 841 | <div class=figure><img alt="sample sans-serif fonts" |
jdaggett@1150 | 842 | src=sansserifexamples.png> |
jdaggett@890 | 843 | <p class=caption>Sample sans-serif fonts |
jdaggett@514 | 844 | </div> |
jdaggett@514 | 845 | |
jdaggett@890 | 846 | <h5 class="no-num no-toc"> <span class=index-def id=cursive0 |
jdaggett@545 | 847 | title="cursive, definition of"> <a name=cursive-def><dfn |
jdaggett@890 | 848 | id=cursive>cursive</dfn></a></span></h5> |
jdaggett@545 | 849 | |
jdaggett@8178 | 850 | <p>Glyphs in cursive fonts generally use a more informal script style, and |
jdaggett@8178 | 851 | the result looks more like handwritten pen or brush writing than printed |
jdaggett@8178 | 852 | letterwork. CSS uses the term ‘<a href="#cursive"><code |
jdaggett@8178 | 853 | class=property>cursive</code></a>’ to apply to a font for any script, |
jdaggett@8178 | 854 | although other names such as Chancery, Brush, Swing and Script are also |
jdaggett@8178 | 855 | used in font names. |
jdaggett@514 | 856 | |
jdaggett@1150 | 857 | <div class=figure><img alt="sample cursive fonts" src=cursiveexamples.png> |
jdaggett@890 | 858 | <p class=caption>Sample cursive fonts |
jdaggett@514 | 859 | </div> |
jdaggett@514 | 860 | |
jdaggett@890 | 861 | <h5 class="no-num no-toc"> <span class=index-def id=fantasy0 |
jdaggett@545 | 862 | title="fantasy, definition of"> <a name=fantasy-def><dfn |
jdaggett@890 | 863 | id=fantasy>fantasy</dfn></a></span></h5> |
jdaggett@514 | 864 | |
jdaggett@8178 | 865 | <p>Fantasy fonts are primarily decorative or expressive fonts that contain |
jdaggett@8178 | 866 | playful representations of characters. These do not include Pi or Picture |
jdaggett@8178 | 867 | fonts which do not represent actual characters. |
jdaggett@514 | 868 | |
jdaggett@1150 | 869 | <div class=figure><img alt="sample fantasy fonts" src=fantasyexamples.png> |
jdaggett@890 | 870 | <p class=caption>Sample fantasy fonts |
jdaggett@514 | 871 | </div> |
jdaggett@514 | 872 | |
jdaggett@890 | 873 | <h5 class="no-num no-toc"> <span class=index-def id=monospace0 |
jdaggett@545 | 874 | title="monospace, definition of"> <a name=monospace-def><dfn |
jdaggett@890 | 875 | id=monospace>monospace</dfn></a></span></h5> |
jdaggett@514 | 876 | |
jdaggett@514 | 877 | <p>The sole criterion of a monospace font is that all glyphs have the same |
jdaggett@518 | 878 | fixed width. This is often used to render samples of computer code. |
jdaggett@514 | 879 | |
jdaggett@1150 | 880 | <div class=figure><img alt="sample monospace fonts" |
jdaggett@1150 | 881 | src=monospaceexamples.png> |
jdaggett@890 | 882 | <p class=caption>Sample monospace fonts |
jdaggett@514 | 883 | </div> |
jdaggett@512 | 884 | <!-- prop: font-weight --> |
jdaggett@512 | 885 | |
jdaggett@1662 | 886 | <h3 id=font-weight-prop><span class=secno>3.2 </span>Font weight: the <a |
jdaggett@1662 | 887 | href="#propdef-font-weight">font-weight</a> property</h3> |
jdaggett@1662 | 888 | |
jdaggett@4624 | 889 | <table class=propdef id=namefont-weightvaluenormal-bold-bolder-l> |
jdaggett@484 | 890 | <tbody> |
jdaggett@484 | 891 | <tr> |
jdaggett@484 | 892 | <td>Name: |
jdaggett@484 | 893 | |
jdaggett@8278 | 894 | <td><dfn id=propdef-font-weight |
jdaggett@8278 | 895 | title="font-weight!!property">font-weight</dfn> |
jdaggett@484 | 896 | |
jdaggett@484 | 897 | <tr> |
jdaggett@484 | 898 | <td>Value: |
jdaggett@484 | 899 | |
jdaggett@8278 | 900 | <td><a href="#font-weight-normal-value" |
jdaggett@8278 | 901 | title="normal!!font-weight">normal</a> | <a href="#bold">bold</a> | <a |
jdaggett@8278 | 902 | href="#bolder">bolder</a> | <a href="#lighter">lighter</a> | <a |
jdaggett@8278 | 903 | href="#font-weight-numeric-values" title="100...900 weight |
jdaggett@8278 | 904 | values">100</a> | <a href="#font-weight-numeric-values" |
jdaggett@8278 | 905 | title="100...900 weight values">200</a> | <a |
jdaggett@8278 | 906 | href="#font-weight-numeric-values" title="100...900 weight |
jdaggett@8278 | 907 | values">300</a> | <a href="#font-weight-numeric-values" |
jdaggett@8278 | 908 | title="100...900 weight values">400</a> | <a |
jdaggett@8278 | 909 | href="#font-weight-numeric-values" title="100...900 weight |
jdaggett@8278 | 910 | values">500</a> | <a href="#font-weight-numeric-values" |
jdaggett@8278 | 911 | title="100...900 weight values">600</a> | <a |
jdaggett@8278 | 912 | href="#font-weight-numeric-values" title="100...900 weight |
jdaggett@8278 | 913 | values">700</a> | <a href="#font-weight-numeric-values" |
jdaggett@8278 | 914 | title="100...900 weight values">800</a> | <a |
jdaggett@8278 | 915 | href="#font-weight-numeric-values" title="100...900 weight |
jdaggett@8278 | 916 | values">900</a> |
jdaggett@484 | 917 | |
jdaggett@484 | 918 | <tr> |
jdaggett@484 | 919 | <td>Initial: |
jdaggett@484 | 920 | |
jdaggett@484 | 921 | <td>normal |
jdaggett@484 | 922 | |
jdaggett@484 | 923 | <tr> |
jdaggett@484 | 924 | <td>Applies to: |
jdaggett@484 | 925 | |
jdaggett@484 | 926 | <td>all elements |
jdaggett@484 | 927 | |
jdaggett@484 | 928 | <tr> |
jdaggett@484 | 929 | <td>Inherited: |
jdaggett@484 | 930 | |
jdaggett@484 | 931 | <td>yes |
jdaggett@484 | 932 | |
jdaggett@484 | 933 | <tr> |
jdaggett@484 | 934 | <td>Percentages: |
jdaggett@484 | 935 | |
jdaggett@484 | 936 | <td>N/A |
jdaggett@484 | 937 | |
jdaggett@484 | 938 | <tr> |
jdaggett@484 | 939 | <td>Media: |
jdaggett@484 | 940 | |
jdaggett@484 | 941 | <td>visual |
jdaggett@484 | 942 | |
jdaggett@484 | 943 | <tr> |
jdaggett@1148 | 944 | <td>Computed value: |
jdaggett@484 | 945 | |
jdaggett@8177 | 946 | <td>numeric weight value (see description) |
jdaggett@7377 | 947 | |
jdaggett@7377 | 948 | <tr> |
jdaggett@7377 | 949 | <td>Animatable: |
jdaggett@7377 | 950 | |
jdaggett@7377 | 951 | <td>as <a |
jdaggett@7377 | 952 | href="http://dev.w3.org/csswg/css3-transitions/#animtype-font-weight">font |
jdaggett@7377 | 953 | weight</a> |
jdaggett@484 | 954 | </table> |
jdaggett@484 | 955 | |
jdaggett@8278 | 956 | <p>The <a href="#propdef-font-weight" |
jdaggett@8278 | 957 | title="font-weight!!property">‘<code |
jdaggett@8278 | 958 | class=property>font-weight</code>’</a> property specifies the weight of |
jdaggett@8278 | 959 | glyphs in the font, their degree of blackness or stroke thickness. |
jdaggett@531 | 960 | |
jdaggett@531 | 961 | <p>Values have the following meanings: |
jdaggett@512 | 962 | |
jdaggett@512 | 963 | <dl> |
jdaggett@8278 | 964 | <dt><dfn id=font-weight-numeric-values title="100...900 weight values">100 |
jdaggett@8278 | 965 | to 900</dfn> |
jdaggett@512 | 966 | |
jdaggett@512 | 967 | <dd>These values form an ordered sequence, where each number indicates a |
jdaggett@514 | 968 | weight that is at least as dark as its predecessor. These roughly |
jdaggett@514 | 969 | correspond to the commonly used weight names below: |
jdaggett@512 | 970 | </dl> |
jdaggett@512 | 971 | |
jdaggett@512 | 972 | <ul> |
jdaggett@512 | 973 | <li>100 - Thin |
jdaggett@512 | 974 | |
jdaggett@518 | 975 | <li>200 - Extra Light (Ultra Light) |
jdaggett@512 | 976 | |
jdaggett@512 | 977 | <li>300 - Light |
jdaggett@512 | 978 | |
jdaggett@512 | 979 | <li>400 - Normal |
jdaggett@512 | 980 | |
jdaggett@512 | 981 | <li>500 - Medium |
jdaggett@512 | 982 | |
jdaggett@518 | 983 | <li>600 - Semi Bold (Demi Bold) |
jdaggett@512 | 984 | |
jdaggett@512 | 985 | <li>700 - Bold |
jdaggett@512 | 986 | |
jdaggett@518 | 987 | <li>800 - Extra Bold (Ultra Bold) |
jdaggett@512 | 988 | |
jdaggett@512 | 989 | <li>900 - Black (Heavy) |
jdaggett@512 | 990 | </ul> |
jdaggett@512 | 991 | |
jdaggett@512 | 992 | <dl> |
jdaggett@8278 | 993 | <dt><dfn id=font-weight-normal-value |
jdaggett@8278 | 994 | title="normal!!font-weight">normal</dfn> |
jdaggett@512 | 995 | |
jdaggett@1148 | 996 | <dd>Same as ‘<code class=css>400</code>’. |
jdaggett@512 | 997 | |
jdaggett@8278 | 998 | <dt><dfn id=bold>bold</dfn> |
jdaggett@512 | 999 | |
jdaggett@1148 | 1000 | <dd>Same as ‘<code class=css>700</code>’. |
jdaggett@512 | 1001 | |
jdaggett@8278 | 1002 | <dt><dfn id=bolder>bolder</dfn> |
jdaggett@512 | 1003 | |
jdaggett@8177 | 1004 | <dd>Specifies a bolder weight than the inherited value. |
jdaggett@512 | 1005 | |
jdaggett@8278 | 1006 | <dt><dfn id=lighter>lighter</dfn> |
jdaggett@512 | 1007 | |
jdaggett@8177 | 1008 | <dd>Specifies a lighter weight than the inherited value. |
jdaggett@512 | 1009 | </dl> |
jdaggett@512 | 1010 | |
jdaggett@8177 | 1011 | <p>Font formats that use a scale other than a nine-step scale should map |
jdaggett@531 | 1012 | their scale onto the CSS scale so that 400 roughly corresponds with a face |
jdaggett@531 | 1013 | that would be labeled as Regular, Book, Roman and 700 roughly matches a |
jdaggett@531 | 1014 | face that would be labeled as Bold. Or weights may be inferred from the |
jdaggett@531 | 1015 | style names, ones that correspond roughly with the scale above. The scale |
jdaggett@1662 | 1016 | is relative, so a face with a larger weight value must never appear |
jdaggett@1148 | 1017 | lighter. If style names are used to infer weights, care should be taken to |
jdaggett@1148 | 1018 | handle variations in style names across locales. |
jdaggett@531 | 1019 | |
jdaggett@531 | 1020 | <p>Quite often there are only a few weights available for a particular font |
jdaggett@534 | 1021 | family. When a weight is specified for which no face exists, a face with a |
jdaggett@534 | 1022 | nearby weight is used. In general, bold weights map to faces with heavier |
jdaggett@1269 | 1023 | weights and light weights map to faces with lighter weights (see the <a |
jdaggett@1269 | 1024 | href="#font-matching-algorithm">font matching section below</a> for a |
jdaggett@1269 | 1025 | precise definition). The examples here illustrate which face is used for |
jdaggett@1269 | 1026 | different weights, grey indicates a face for that weight does not exist so |
jdaggett@1269 | 1027 | a face with a nearby weight is used: |
jdaggett@532 | 1028 | |
jdaggett@1150 | 1029 | <div class=figure><img alt="weight mappings for a family with 400, 700 and |
jdaggett@1150 | 1030 | 900 weights" src=optimaweights.png> |
jdaggett@532 | 1031 | <p class=caption>Weight mappings for a font family with 400, 700 and 900 |
jdaggett@890 | 1032 | weight faces |
jdaggett@518 | 1033 | </div> |
jdaggett@518 | 1034 | |
jdaggett@1150 | 1035 | <div class=figure><img alt="weight mappings for a family with 300, 600 |
jdaggett@1150 | 1036 | weights" src=hiraginoweights.png> |
jdaggett@532 | 1037 | <p class=caption>Weight mappings for a font family with 300 and 600 weight |
jdaggett@890 | 1038 | faces |
jdaggett@531 | 1039 | </div> |
jdaggett@518 | 1040 | |
jdaggett@2487 | 1041 | <p>Although the practice is not well-loved by typographers, bold faces are |
jdaggett@2487 | 1042 | often synthesized by user agents for faces that lack actual bold faces. |
jdaggett@2487 | 1043 | For the purposes of style matching, these faces must be treated as if they |
jdaggett@8177 | 1044 | exist within the family. Authors can explicitly avoid this behavior by |
jdaggett@8177 | 1045 | using the ‘<a href="#propdef-font-synthesis"><code |
jdaggett@8177 | 1046 | class=property>font-synthesis</code></a>’ property. |
jdaggett@8177 | 1047 | |
jdaggett@8278 | 1048 | <p>Specified values of ‘<a href="#bolder"><code |
jdaggett@8278 | 1049 | class=property>bolder</code></a>’ and ‘<a href="#lighter"><code |
jdaggett@8278 | 1050 | class=property>lighter</code></a>’ indicate weights relative to the |
jdaggett@8177 | 1051 | weight of the parent element. The computed weight is calculated based on |
jdaggett@8278 | 1052 | the inherited <a href="#propdef-font-weight" |
jdaggett@8278 | 1053 | title="font-weight!!property">‘<code |
jdaggett@8278 | 1054 | class=property>font-weight</code>’</a> value using the chart below. |
jdaggett@1148 | 1055 | |
jdaggett@6651 | 1056 | <table class=data id=bolderlighter summary="Bolder/lighter mappings"> |
jdaggett@1148 | 1057 | <thead> |
jdaggett@1148 | 1058 | <tr> |
jdaggett@6651 | 1059 | <th>Inherited value |
jdaggett@6651 | 1060 | |
jdaggett@6651 | 1061 | <th>bolder |
jdaggett@6651 | 1062 | |
jdaggett@6651 | 1063 | <th>lighter |
jdaggett@1148 | 1064 | |
jdaggett@1148 | 1065 | <tbody> |
jdaggett@1148 | 1066 | <tr> |
jdaggett@1244 | 1067 | <th>100 |
jdaggett@1148 | 1068 | |
jdaggett@1148 | 1069 | <td>400 |
jdaggett@1148 | 1070 | |
jdaggett@1148 | 1071 | <td>100 |
jdaggett@1148 | 1072 | |
jdaggett@1148 | 1073 | <tr> |
jdaggett@1244 | 1074 | <th>200 |
jdaggett@1148 | 1075 | |
jdaggett@1148 | 1076 | <td>400 |
jdaggett@1148 | 1077 | |
jdaggett@1148 | 1078 | <td>100 |
jdaggett@1148 | 1079 | |
jdaggett@1148 | 1080 | <tr> |
jdaggett@1244 | 1081 | <th>300 |
jdaggett@1148 | 1082 | |
jdaggett@1148 | 1083 | <td>400 |
jdaggett@1148 | 1084 | |
jdaggett@1148 | 1085 | <td>100 |
jdaggett@1148 | 1086 | |
jdaggett@1148 | 1087 | <tr> |
jdaggett@1244 | 1088 | <th>400 |
jdaggett@1148 | 1089 | |
jdaggett@1148 | 1090 | <td>700 |
jdaggett@1148 | 1091 | |
jdaggett@1148 | 1092 | <td>100 |
jdaggett@1148 | 1093 | |
jdaggett@1148 | 1094 | <tr> |
jdaggett@1244 | 1095 | <th>500 |
jdaggett@1148 | 1096 | |
jdaggett@1148 | 1097 | <td>700 |
jdaggett@1148 | 1098 | |
jdaggett@1148 | 1099 | <td>100 |
jdaggett@1148 | 1100 | |
jdaggett@1148 | 1101 | <tr> |
jdaggett@1244 | 1102 | <th>600 |
jdaggett@1148 | 1103 | |
jdaggett@1148 | 1104 | <td>900 |
jdaggett@1148 | 1105 | |
jdaggett@1148 | 1106 | <td>400 |
jdaggett@1148 | 1107 | |
jdaggett@1148 | 1108 | <tr> |
jdaggett@1244 | 1109 | <th>700 |
jdaggett@1148 | 1110 | |
jdaggett@1148 | 1111 | <td>900 |
jdaggett@1148 | 1112 | |
jdaggett@1148 | 1113 | <td>400 |
jdaggett@1148 | 1114 | |
jdaggett@1148 | 1115 | <tr> |
jdaggett@1244 | 1116 | <th>800 |
jdaggett@1148 | 1117 | |
jdaggett@1148 | 1118 | <td>900 |
jdaggett@1148 | 1119 | |
jdaggett@1148 | 1120 | <td>700 |
jdaggett@1148 | 1121 | |
jdaggett@1148 | 1122 | <tr> |
jdaggett@1244 | 1123 | <th>900 |
jdaggett@1148 | 1124 | |
jdaggett@1148 | 1125 | <td>900 |
jdaggett@1148 | 1126 | |
jdaggett@1148 | 1127 | <td>700 |
jdaggett@1148 | 1128 | </table> |
jdaggett@1148 | 1129 | |
jdaggett@1148 | 1130 | <p>The table above is equivalent to selecting the next relative bolder or |
jdaggett@1148 | 1131 | lighter face, given a font family containing normal and bold faces along |
jdaggett@1148 | 1132 | with a thin and a heavy face. Authors who desire finer control over the |
jdaggett@8177 | 1133 | exact weight values used for a given element may use numerical values |
jdaggett@1148 | 1134 | instead of relative weights.</p> |
jdaggett@512 | 1135 | <!-- prop: font-stretch --> |
jdaggett@512 | 1136 | |
jdaggett@1662 | 1137 | <h3 id=font-stretch-prop><span class=secno>3.3 </span>Font width: the <a |
jdaggett@1662 | 1138 | href="#propdef-font-stretch">font-stretch</a> property</h3> |
jdaggett@1662 | 1139 | |
jdaggett@8278 | 1140 | <table class=propdef id=namefont-stretchvalue-normal-ultra-conde> |
jdaggett@484 | 1141 | <tbody> |
jdaggett@484 | 1142 | <tr> |
jdaggett@484 | 1143 | <td>Name: |
jdaggett@484 | 1144 | |
jdaggett@8278 | 1145 | <td><dfn id=propdef-font-stretch |
jdaggett@8278 | 1146 | title="font-stretch!!property">font-stretch</dfn> |
jdaggett@484 | 1147 | |
jdaggett@484 | 1148 | <tr> |
jdaggett@484 | 1149 | <td>Value: |
jdaggett@484 | 1150 | |
jdaggett@8278 | 1151 | <td> <a href="#font-stretch-normal-value" |
jdaggett@8278 | 1152 | title="normal!!font-stretch">normal</a> | <a |
jdaggett@8278 | 1153 | href="#ultra-condensed">ultra-condensed</a> | <a |
jdaggett@8278 | 1154 | href="#extra-condensed">extra-condensed</a> | <a |
jdaggett@8278 | 1155 | href="#condensed">condensed</a> | <a |
jdaggett@8278 | 1156 | href="#semi-condensed-">semi-condensed</a> | <a |
jdaggett@8278 | 1157 | href="#semi-expanded">semi-expanded</a> | <a |
jdaggett@8278 | 1158 | href="#expanded">expanded</a> | <a |
jdaggett@8278 | 1159 | href="#extra-expanded">extra-expanded</a> | <a |
jdaggett@8278 | 1160 | href="#ultra-expanded">ultra-expanded</a> |
jdaggett@484 | 1161 | |
jdaggett@484 | 1162 | <tr> |
jdaggett@484 | 1163 | <td>Initial: |
jdaggett@484 | 1164 | |
jdaggett@484 | 1165 | <td>normal |
jdaggett@484 | 1166 | |
jdaggett@484 | 1167 | <tr> |
jdaggett@484 | 1168 | <td>Applies to: |
jdaggett@484 | 1169 | |
jdaggett@484 | 1170 | <td>all elements |
jdaggett@484 | 1171 | |
jdaggett@484 | 1172 | <tr> |
jdaggett@484 | 1173 | <td>Inherited: |
jdaggett@484 | 1174 | |
jdaggett@484 | 1175 | <td>yes |
jdaggett@484 | 1176 | |
jdaggett@484 | 1177 | <tr> |
jdaggett@484 | 1178 | <td>Percentages: |
jdaggett@484 | 1179 | |
jdaggett@484 | 1180 | <td>N/A |
jdaggett@484 | 1181 | |
jdaggett@484 | 1182 | <tr> |
jdaggett@484 | 1183 | <td>Media: |
jdaggett@484 | 1184 | |
jdaggett@484 | 1185 | <td>visual |
jdaggett@484 | 1186 | |
jdaggett@484 | 1187 | <tr> |
jdaggett@1148 | 1188 | <td>Computed value: |
jdaggett@484 | 1189 | |
jdaggett@484 | 1190 | <td>as specified |
jdaggett@7377 | 1191 | |
jdaggett@7377 | 1192 | <tr> |
jdaggett@7377 | 1193 | <td>Animatable: |
jdaggett@7377 | 1194 | |
jdaggett@7377 | 1195 | <td>as <a href="#font-stretch-animation">font stretch</a> |
jdaggett@484 | 1196 | </table> |
jdaggett@484 | 1197 | |
jdaggett@8278 | 1198 | <p>The <a href="#propdef-font-stretch" |
jdaggett@8278 | 1199 | title="font-stretch!!property">‘<code |
jdaggett@8278 | 1200 | class=property>font-stretch</code>’</a> property selects a normal, |
jdaggett@8278 | 1201 | condensed, or expanded face from a font family. Absolute keyword values |
jdaggett@8278 | 1202 | have the following ordering, from narrowest to widest: |
jdaggett@512 | 1203 | |
jdaggett@512 | 1204 | <ul> |
jdaggett@8278 | 1205 | <li><dfn id=ultra-condensed>ultra-condensed</dfn> |
jdaggett@8278 | 1206 | |
jdaggett@8278 | 1207 | <li><dfn id=extra-condensed>extra-condensed</dfn> |
jdaggett@8278 | 1208 | |
jdaggett@8278 | 1209 | <li><dfn id=condensed>condensed</dfn> |
jdaggett@8278 | 1210 | |
jdaggett@8278 | 1211 | <li><dfn id=semi-condensed->semi-condensed </dfn> |
jdaggett@8278 | 1212 | |
jdaggett@8278 | 1213 | <li><dfn id=font-stretch-normal-value |
jdaggett@8278 | 1214 | title="normal!!font-stretch">normal</dfn> |
jdaggett@8278 | 1215 | |
jdaggett@8278 | 1216 | <li><dfn id=semi-expanded>semi-expanded</dfn> |
jdaggett@8278 | 1217 | |
jdaggett@8278 | 1218 | <li><dfn id=expanded>expanded</dfn> |
jdaggett@8278 | 1219 | |
jdaggett@8278 | 1220 | <li><dfn id=extra-expanded>extra-expanded</dfn> |
jdaggett@8278 | 1221 | |
jdaggett@8278 | 1222 | <li><dfn id=ultra-expanded>ultra-expanded</dfn> |
jdaggett@512 | 1223 | </ul> |
jdaggett@512 | 1224 | |
jdaggett@8197 | 1225 | <p>When a face does not exist for a given width, normal or condensed values |
jdaggett@8197 | 1226 | map to a narrower face, otherwise a wider face. Conversely, expanded |
jdaggett@8197 | 1227 | values map to a wider face, otherwise a narrower face. The figure below |
jdaggett@8197 | 1228 | shows how the nine font-stretch property settings affect font selection |
jdaggett@8197 | 1229 | for font family containing a variety of widths, grey indicates a width for |
jdaggett@8197 | 1230 | which no face exists and a different width is substituted: |
jdaggett@1148 | 1231 | |
jdaggett@1150 | 1232 | <div class=figure><img alt="width mappings for a family with condensed, |
jdaggett@1150 | 1233 | normal and expanded faces" src=universwidths.png> |
jdaggett@1148 | 1234 | <p class=caption>Width mappings for a font family with condensed, normal |
jdaggett@1148 | 1235 | and expanded width faces |
jdaggett@1148 | 1236 | </div> |
jdaggett@7377 | 1237 | |
jdaggett@7377 | 1238 | <p id=font-stretch-animation>Animation of font stretch: Font stretch is |
jdaggett@7377 | 1239 | interpolated in discrete steps. The interpolation happens as though the |
jdaggett@7377 | 1240 | ordered values are equally spaced real numbers. The interpolation result |
jdaggett@7377 | 1241 | is rounded to the nearest value, with values exactly halfway between two |
jdaggett@7377 | 1242 | values rounded towards the later value in the list above.</p> |
jdaggett@512 | 1243 | <!-- prop: font-style --> |
jdaggett@512 | 1244 | |
jdaggett@1662 | 1245 | <h3 id=font-style-prop><span class=secno>3.4 </span>Font style: the <a |
jdaggett@1662 | 1246 | href="#propdef-font-style">font-style</a> property</h3> |
jdaggett@1662 | 1247 | |
jdaggett@4624 | 1248 | <table class=propdef id=namefont-stylevaluenormal-italic-oblique> |
jdaggett@484 | 1249 | <tbody> |
jdaggett@484 | 1250 | <tr> |
jdaggett@484 | 1251 | <td>Name: |
jdaggett@484 | 1252 | |
jdaggett@8278 | 1253 | <td><dfn id=propdef-font-style |
jdaggett@8278 | 1254 | title="font-style!!property">font-style</dfn> |
jdaggett@484 | 1255 | |
jdaggett@484 | 1256 | <tr> |
jdaggett@484 | 1257 | <td>Value: |
jdaggett@484 | 1258 | |
jdaggett@8278 | 1259 | <td><a href="#font-style-normal-value" |
jdaggett@8278 | 1260 | title="normal!!font-style">normal</a> | <a href="#italic">italic</a> | |
jdaggett@8278 | 1261 | <a href="#oblique">oblique</a> |
jdaggett@484 | 1262 | |
jdaggett@484 | 1263 | <tr> |
jdaggett@484 | 1264 | <td>Initial: |
jdaggett@484 | 1265 | |
jdaggett@484 | 1266 | <td>normal |
jdaggett@484 | 1267 | |
jdaggett@484 | 1268 | <tr> |
jdaggett@484 | 1269 | <td>Applies to: |
jdaggett@484 | 1270 | |
jdaggett@484 | 1271 | <td>all elements |
jdaggett@484 | 1272 | |
jdaggett@484 | 1273 | <tr> |
jdaggett@484 | 1274 | <td>Inherited: |
jdaggett@484 | 1275 | |
jdaggett@484 | 1276 | <td>yes |
jdaggett@484 | 1277 | |
jdaggett@484 | 1278 | <tr> |
jdaggett@484 | 1279 | <td>Percentages: |
jdaggett@484 | 1280 | |
jdaggett@484 | 1281 | <td>N/A |
jdaggett@484 | 1282 | |
jdaggett@484 | 1283 | <tr> |
jdaggett@484 | 1284 | <td>Media: |
jdaggett@484 | 1285 | |
jdaggett@484 | 1286 | <td>visual |
jdaggett@484 | 1287 | |
jdaggett@484 | 1288 | <tr> |
jdaggett@1148 | 1289 | <td>Computed value: |
jdaggett@484 | 1290 | |
jdaggett@484 | 1291 | <td>as specified |
jdaggett@7377 | 1292 | |
jdaggett@7377 | 1293 | <tr> |
jdaggett@7377 | 1294 | <td>Animatable: |
jdaggett@7377 | 1295 | |
jdaggett@7377 | 1296 | <td>no |
jdaggett@484 | 1297 | </table> |
jdaggett@484 | 1298 | |
jdaggett@8278 | 1299 | <p>The <a href="#propdef-font-style" title="font-style!!property">‘<code |
jdaggett@8278 | 1300 | class=property>font-style</code>’</a> property allows italic or oblique |
jdaggett@8278 | 1301 | faces to be selected. Italic forms are generally cursive in nature while |
jdaggett@8278 | 1302 | oblique faces are typically sloped versions of the regular face. Oblique |
jdaggett@8278 | 1303 | faces can be simulated by artificially sloping the glyphs of the regular |
jdaggett@8278 | 1304 | face. Compare the artificially sloped renderings of Palatino ‘<code |
jdaggett@2556 | 1305 | class=property>a</code>’ and Baskerville ‘<code |
jdaggett@1148 | 1306 | class=property>N</code>’ in grey with the actual italic versions: |
jdaggett@518 | 1307 | |
jdaggett@1150 | 1308 | <div class=figure><img alt="artificial sloping vs. real italics" |
jdaggett@1150 | 1309 | src=realvsfakeitalics.png> |
jdaggett@890 | 1310 | <p class=caption>Artificial sloping versus real italics |
jdaggett@512 | 1311 | </div> |
jdaggett@518 | 1312 | |
jdaggett@8278 | 1313 | <p>Values have the following meanings: |
jdaggett@8278 | 1314 | |
jdaggett@8278 | 1315 | <dl> |
jdaggett@8278 | 1316 | <dt><dfn id=font-style-normal-value |
jdaggett@8278 | 1317 | title="normal!!font-style">normal</dfn> |
jdaggett@8278 | 1318 | |
jdaggett@8278 | 1319 | <dd>selects a face that is classified as a normal face, one that is |
jdaggett@8278 | 1320 | neither italic or obliqued |
jdaggett@8278 | 1321 | |
jdaggett@8278 | 1322 | <dt><dfn id=italic>italic</dfn> |
jdaggett@8278 | 1323 | |
jdaggett@8278 | 1324 | <dd>selects a font that is labeled as an italic face, or an oblique face |
jdaggett@8278 | 1325 | if one is not |
jdaggett@8278 | 1326 | |
jdaggett@8278 | 1327 | <dt><dfn id=oblique>oblique</dfn> |
jdaggett@8278 | 1328 | |
jdaggett@8278 | 1329 | <dd>selects a font that is labeled as an oblique face, or an italic face |
jdaggett@8278 | 1330 | if one is not |
jdaggett@8278 | 1331 | </dl> |
jdaggett@8278 | 1332 | |
jdaggett@8278 | 1333 | <p>If no italic or oblique face is available, oblique faces can be |
jdaggett@8363 | 1334 | synthesized by rendering non-obliqued faces with an artificial obliquing |
jdaggett@8363 | 1335 | operation. The use of these artificially obliqued faces can be disabled |
jdaggett@8363 | 1336 | using the ‘<a href="#propdef-font-synthesis"><code |
jdaggett@8363 | 1337 | class=property>font-synthesis</code></a>’ property. The details of the |
jdaggett@8363 | 1338 | obliquing operation are not explicitly defined.</p> |
jdaggett@8363 | 1339 | <!-- resolution on the "undefined" nature of synthetics: http://www.w3.org/2013/06/06-css-minutes.html#item03 --> |
jdaggett@518 | 1340 | |
jdaggett@518 | 1341 | <p>Many scripts lack the tradition of mixing a cursive form within text |
jdaggett@518 | 1342 | rendered with a normal face. Chinese, Japanese and Korean fonts almost |
jdaggett@518 | 1343 | always lack italic or oblique faces. Fonts that support a mixture of |
jdaggett@518 | 1344 | scripts will sometimes omit specific scripts such as Arabic from the set |
jdaggett@518 | 1345 | of glyphs supported in the italic face. User agents should be careful |
jdaggett@8225 | 1346 | about making <a href="#character-map"><em>character map</em></a> |
jdaggett@8363 | 1347 | assumptions across faces when implementing support for <a |
jdaggett@8363 | 1348 | href="#system-font-fallback"><em>system font fallback</em></a>.</p> |
jdaggett@1662 | 1349 | <!-- prop: font-size --> |
jdaggett@1662 | 1350 | |
jdaggett@1662 | 1351 | <h3 id=font-size-prop><span class=secno>3.5 </span>Font size: the <a |
jdaggett@1662 | 1352 | href="#propdef-font-size">font-size</a> property</h3> |
jdaggett@1662 | 1353 | |
jdaggett@8225 | 1354 | <table class=propdef id=namefont-sizevalueltabsolute-sizegt-ltre> |
jdaggett@484 | 1355 | <tbody> |
jdaggett@484 | 1356 | <tr> |
jdaggett@484 | 1357 | <td>Name: |
jdaggett@484 | 1358 | |
jdaggett@1662 | 1359 | <td><dfn id=propdef-font-size>font-size</dfn> |
jdaggett@484 | 1360 | |
jdaggett@484 | 1361 | <tr> |
jdaggett@484 | 1362 | <td>Value: |
jdaggett@484 | 1363 | |
jdaggett@8225 | 1364 | <td><a href="#absolute-size-value"><var><absolute-size></var></a> |
jdaggett@8225 | 1365 | | <a href="#relative-size-value"><var><relative-size></var></a> | |
jdaggett@8225 | 1366 | <a href="#length-size-value"><var><length></var></a> | <a |
jdaggett@8225 | 1367 | href="#percentage-size-value"><var><percentage></var></a> |
jdaggett@484 | 1368 | |
jdaggett@484 | 1369 | <tr> |
jdaggett@484 | 1370 | <td>Initial: |
jdaggett@484 | 1371 | |
jdaggett@484 | 1372 | <td>medium |
jdaggett@484 | 1373 | |
jdaggett@484 | 1374 | <tr> |
jdaggett@484 | 1375 | <td>Applies to: |
jdaggett@484 | 1376 | |
jdaggett@484 | 1377 | <td>all elements |
jdaggett@484 | 1378 | |
jdaggett@484 | 1379 | <tr> |
jdaggett@484 | 1380 | <td>Inherited: |
jdaggett@484 | 1381 | |
jdaggett@484 | 1382 | <td>yes |
jdaggett@484 | 1383 | |
jdaggett@484 | 1384 | <tr> |
jdaggett@484 | 1385 | <td>Percentages: |
jdaggett@484 | 1386 | |
jdaggett@484 | 1387 | <td>refer to parent element's font size |
jdaggett@484 | 1388 | |
jdaggett@484 | 1389 | <tr> |
jdaggett@484 | 1390 | <td>Media: |
jdaggett@484 | 1391 | |
jdaggett@484 | 1392 | <td>visual |
jdaggett@484 | 1393 | |
jdaggett@484 | 1394 | <tr> |
jdaggett@1148 | 1395 | <td>Computed value: |
jdaggett@484 | 1396 | |
jdaggett@484 | 1397 | <td>absolute length |
jdaggett@7377 | 1398 | |
jdaggett@7377 | 1399 | <tr> |
jdaggett@7377 | 1400 | <td>Animatable: |
jdaggett@7377 | 1401 | |
jdaggett@7377 | 1402 | <td>as <a |
jdaggett@7377 | 1403 | href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a> |
jdaggett@484 | 1404 | </table> |
jdaggett@484 | 1405 | |
jdaggett@512 | 1406 | <p>This property indicates the desired height of glyphs from the font. For |
jdaggett@512 | 1407 | scalable fonts, the font-size is a scale factor applied to the EM unit of |
jdaggett@512 | 1408 | the font. (Note that certain glyphs may bleed outside their EM box.) For |
jdaggett@512 | 1409 | non-scalable fonts, the font-size is converted into absolute units and |
jdaggett@512 | 1410 | matched against the declared font-size of the font, using the same |
jdaggett@512 | 1411 | absolute coordinate space for both of the matched values. Values have the |
jdaggett@512 | 1412 | following meanings: |
jdaggett@512 | 1413 | |
jdaggett@512 | 1414 | <dl> |
jdaggett@8225 | 1415 | <dt><dfn id=absolute-size-value><var><absolute-size></var></dfn> |
jdaggett@8225 | 1416 | |
jdaggett@8225 | 1417 | <dd> An <a |
jdaggett@8225 | 1418 | href="#absolute-size-value"><var><absolute-size></var></a> keyword |
jdaggett@8225 | 1419 | refers to an entry in a table of font sizes computed and kept by the user |
jdaggett@8225 | 1420 | agent. Possible values are: |
jdaggett@512 | 1421 | <p> [ xx-small | x-small | small | medium | large | x-large | xx-large ]</p> |
jdaggett@512 | 1422 | |
jdaggett@8225 | 1423 | <dt><dfn id=relative-size-value><var><relative-size></var></dfn> |
jdaggett@8225 | 1424 | |
jdaggett@8225 | 1425 | <dd> A <a href="#relative-size-value"><var><relative-size></var></a> |
jdaggett@8225 | 1426 | keyword is interpreted relative to the table of font sizes and the |
jdaggett@8225 | 1427 | computed ‘<a href="#propdef-font-size"><code |
jdaggett@8225 | 1428 | class=property>font-size</code></a>’ of the parent element. Possible |
jdaggett@8225 | 1429 | values are: |
jdaggett@890 | 1430 | <p> [ larger | smaller ] |
jdaggett@890 | 1431 | |
jdaggett@1148 | 1432 | <p> For example, if the parent element has a font size of ‘<code |
jdaggett@1148 | 1433 | class=property>medium</code>’, a value of ‘<code |
jdaggett@1148 | 1434 | class=property>larger</code>’ will make the font size of the current |
jdaggett@1148 | 1435 | element be ‘<code class=property>large</code>’. If the parent |
jdaggett@1148 | 1436 | element's size is not close to a table entry, the user agent is free to |
jdaggett@1148 | 1437 | interpolate between table entries or round off to the closest one. The |
jdaggett@1148 | 1438 | user agent may have to extrapolate table values if the numerical value |
jdaggett@1148 | 1439 | goes beyond the keywords. |
jdaggett@512 | 1440 | |
jdaggett@8225 | 1441 | <dt><dfn id=length-size-value><var><length></var></dfn> |
jdaggett@512 | 1442 | |
jdaggett@8187 | 1443 | <dd>A length value specifies an absolute font size (independent of the |
jdaggett@8187 | 1444 | user agent's font table). Negative lengths are illegal. |
jdaggett@512 | 1445 | |
jdaggett@8225 | 1446 | <dt><dfn id=percentage-size-value><var><percentage></var></dfn> |
jdaggett@512 | 1447 | |
jdaggett@512 | 1448 | <dd>A percentage value specifies an absolute font size relative to the |
jdaggett@512 | 1449 | parent element's font size. Use of percentage values, or values in |
jdaggett@1148 | 1450 | ‘<code class=property>em</code>’s, leads to more robust and |
jdaggett@512 | 1451 | cascadable style sheets. |
jdaggett@512 | 1452 | </dl> |
jdaggett@512 | 1453 | |
jdaggett@8187 | 1454 | <p>The following table provides user agent guidelines for the absolute-size |
jdaggett@8187 | 1455 | scaling factor and their mapping to HTML heading and absolute font-sizes. |
jdaggett@8187 | 1456 | The ‘<code class=property>medium</code>’ value is used as the |
jdaggett@8187 | 1457 | reference middle value. The user agent may fine-tune these values for |
jdaggett@8187 | 1458 | different fonts or different types of display devices. |
jdaggett@1244 | 1459 | |
jdaggett@1244 | 1460 | <table class=data> |
jdaggett@1152 | 1461 | <thead> |
jdaggett@1152 | 1462 | <tr> |
jdaggett@1152 | 1463 | <th>CSS absolute-size values |
jdaggett@1152 | 1464 | |
jdaggett@1152 | 1465 | <th>xx-small |
jdaggett@1152 | 1466 | |
jdaggett@1152 | 1467 | <th>x-small |
jdaggett@1152 | 1468 | |
jdaggett@1152 | 1469 | <th>small |
jdaggett@1152 | 1470 | |
jdaggett@1152 | 1471 | <th>medium |
jdaggett@1152 | 1472 | |
jdaggett@1152 | 1473 | <th>large |
jdaggett@1152 | 1474 | |
jdaggett@1152 | 1475 | <th>x-large |
jdaggett@1152 | 1476 | |
jdaggett@1152 | 1477 | <th>xx-large |
jdaggett@1152 | 1478 | |
jdaggett@1152 | 1479 | <th> |
jdaggett@1152 | 1480 | |
jdaggett@512 | 1481 | <tbody> |
jdaggett@512 | 1482 | <tr> |
jdaggett@1152 | 1483 | <th>scaling factor |
jdaggett@1152 | 1484 | |
jdaggett@1152 | 1485 | <td>3/5 |
jdaggett@1152 | 1486 | |
jdaggett@1152 | 1487 | <td>3/4 |
jdaggett@1152 | 1488 | |
jdaggett@1152 | 1489 | <td>8/9 |
jdaggett@1152 | 1490 | |
jdaggett@1152 | 1491 | <td>1 |
jdaggett@1152 | 1492 | |
jdaggett@1152 | 1493 | <td>6/5 |
jdaggett@1152 | 1494 | |
jdaggett@1152 | 1495 | <td>3/2 |
jdaggett@1152 | 1496 | |
jdaggett@1152 | 1497 | <td>2/1 |
jdaggett@1152 | 1498 | |
jdaggett@1152 | 1499 | <td>3/1 |
jdaggett@512 | 1500 | |
jdaggett@512 | 1501 | <tr> |
jdaggett@8187 | 1502 | <th>HTML headings |
jdaggett@1152 | 1503 | |
jdaggett@1152 | 1504 | <td>h6 |
jdaggett@1152 | 1505 | |
jdaggett@1152 | 1506 | <td> |
jdaggett@1152 | 1507 | |
jdaggett@1152 | 1508 | <td>h5 |
jdaggett@1152 | 1509 | |
jdaggett@1152 | 1510 | <td>h4 |
jdaggett@1152 | 1511 | |
jdaggett@1152 | 1512 | <td>h3 |
jdaggett@1152 | 1513 | |
jdaggett@1152 | 1514 | <td>h2 |
jdaggett@1152 | 1515 | |
jdaggett@1152 | 1516 | <td>h1 |
jdaggett@1152 | 1517 | |
jdaggett@1152 | 1518 | <td> |
jdaggett@512 | 1519 | |
jdaggett@512 | 1520 | <tr> |
jdaggett@8187 | 1521 | <th>HTML font sizes |
jdaggett@1152 | 1522 | |
jdaggett@1152 | 1523 | <td>1 |
jdaggett@1152 | 1524 | |
jdaggett@1152 | 1525 | <td> |
jdaggett@1152 | 1526 | |
jdaggett@1152 | 1527 | <td>2 |
jdaggett@1152 | 1528 | |
jdaggett@1152 | 1529 | <td>3 |
jdaggett@1152 | 1530 | |
jdaggett@1152 | 1531 | <td>4 |
jdaggett@1152 | 1532 | |
jdaggett@1152 | 1533 | <td>5 |
jdaggett@1152 | 1534 | |
jdaggett@1152 | 1535 | <td>6 |
jdaggett@1152 | 1536 | |
jdaggett@1152 | 1537 | <td>7 |
jdaggett@512 | 1538 | </table> |
jdaggett@512 | 1539 | |
jdaggett@512 | 1540 | <p class=note><em><strong>Note 1.</strong> To preserve readability, an UA |
jdaggett@512 | 1541 | applying these guidelines should nevertheless avoid creating font-size |
jdaggett@8272 | 1542 | resulting in less than 9 device pixels per EM unit on a computer |
jdaggett@8272 | 1543 | display.</em> |
jdaggett@512 | 1544 | |
jdaggett@512 | 1545 | <p class=note><em><strong>Note 2.</strong> In CSS1, the suggested scaling |
jdaggett@512 | 1546 | factor between adjacent indexes was 1.5 which user experience proved to be |
jdaggett@512 | 1547 | too large. In CSS2, the suggested scaling factor for computer screen |
jdaggett@512 | 1548 | between adjacent indexes was 1.2 which still created issues for the small |
jdaggett@512 | 1549 | sizes. The new scaling factor varies between each index to provide a |
jdaggett@512 | 1550 | better readability.</em> |
jdaggett@512 | 1551 | |
jdaggett@6659 | 1552 | <p>The actual value of this property may differ from the computed value due |
jdaggett@6659 | 1553 | a numerical value on ‘<a href="#propdef-font-size-adjust"><code |
jdaggett@4624 | 1554 | class=property>font-size-adjust</code></a>’ and the unavailability of |
jdaggett@4624 | 1555 | certain font sizes. |
jdaggett@512 | 1556 | |
jdaggett@512 | 1557 | <p>Child elements inherit the computed <a class=noxref |
jdaggett@6659 | 1558 | href="#font-size-prop"> <span class=property>‘<code |
jdaggett@1148 | 1559 | class=property>font-size</code>’</span></a> value (otherwise, the effect |
jdaggett@2556 | 1560 | of <a class=noxref href="#font-size-adjust-prop"><span |
jdaggett@2556 | 1561 | class=property>‘<code |
jdaggett@1148 | 1562 | class=property>font-size-adjust</code>’</span></a> would compound). |
jdaggett@512 | 1563 | |
jdaggett@512 | 1564 | <div class=example> |
jdaggett@4624 | 1565 | <p style="display:none">Example(s): |
jdaggett@890 | 1566 | |
jdaggett@890 | 1567 | <p> |
jdaggett@512 | 1568 | |
jdaggett@512 | 1569 | <pre>p { font-size: 12pt; } |
jdaggett@512 | 1570 | blockquote { font-size: larger } |
jdaggett@512 | 1571 | em { font-size: 150% } |
jdaggett@512 | 1572 | em { font-size: 1.5em } |
jdaggett@512 | 1573 | </pre> |
jdaggett@512 | 1574 | </div> |
jdaggett@512 | 1575 | <!-- prop: font-size-adjust --> |
jdaggett@512 | 1576 | |
jdaggett@1662 | 1577 | <h3 id=font-size-adjust-prop><span class=secno>3.6 </span>Relative sizing: |
jdaggett@1662 | 1578 | the <a href="#propdef-font-size-adjust">font-size-adjust</a> property</h3> |
jdaggett@1662 | 1579 | |
jdaggett@6659 | 1580 | <table class=propdef id=namefont-size-adjustvaluenone-auto-ltnum> |
jdaggett@484 | 1581 | <tbody> |
jdaggett@484 | 1582 | <tr> |
jdaggett@484 | 1583 | <td>Name: |
jdaggett@484 | 1584 | |
jdaggett@1662 | 1585 | <td><dfn id=propdef-font-size-adjust>font-size-adjust</dfn> |
jdaggett@484 | 1586 | |
jdaggett@484 | 1587 | <tr> |
jdaggett@484 | 1588 | <td>Value: |
jdaggett@484 | 1589 | |
jdaggett@8278 | 1590 | <td><a href="#font-size-adjust-none-value" |
jdaggett@8278 | 1591 | title="none!!font-size-adjust">none</a> | <a |
jdaggett@8278 | 1592 | href="#font-size-adjust-auto-value" |
jdaggett@8278 | 1593 | title="auto!!font-size-adjust">auto</a> | <a |
jdaggett@8225 | 1594 | href="#aspect-ratio-value"><var><number></var></a> |
jdaggett@484 | 1595 | |
jdaggett@484 | 1596 | <tr> |
jdaggett@484 | 1597 | <td>Initial: |
jdaggett@484 | 1598 | |
jdaggett@484 | 1599 | <td>none |
jdaggett@484 | 1600 | |
jdaggett@484 | 1601 | <tr> |
jdaggett@484 | 1602 | <td>Applies to: |
jdaggett@484 | 1603 | |
jdaggett@484 | 1604 | <td>all elements |
jdaggett@484 | 1605 | |
jdaggett@484 | 1606 | <tr> |
jdaggett@484 | 1607 | <td>Inherited: |
jdaggett@484 | 1608 | |
jdaggett@484 | 1609 | <td>yes |
jdaggett@484 | 1610 | |
jdaggett@484 | 1611 | <tr> |
jdaggett@484 | 1612 | <td>Percentages: |
jdaggett@484 | 1613 | |
jdaggett@554 | 1614 | <td>N/A |
jdaggett@484 | 1615 | |
jdaggett@484 | 1616 | <tr> |
jdaggett@484 | 1617 | <td>Media: |
jdaggett@484 | 1618 | |
jdaggett@484 | 1619 | <td>visual |
jdaggett@484 | 1620 | |
jdaggett@484 | 1621 | <tr> |
jdaggett@1148 | 1622 | <td>Computed value: |
jdaggett@484 | 1623 | |
jdaggett@554 | 1624 | <td>as specified |
jdaggett@7377 | 1625 | |
jdaggett@7377 | 1626 | <tr> |
jdaggett@7377 | 1627 | <td>Animatable: |
jdaggett@7377 | 1628 | |
jdaggett@7377 | 1629 | <td>as <a |
jdaggett@7377 | 1630 | href="http://dev.w3.org/csswg/css3-transitions/#animtype-number">number</a> |
jdaggett@484 | 1631 | </table> |
jdaggett@484 | 1632 | |
jdaggett@555 | 1633 | <p>For any given font size, the apparent size and legibility of text varies |
jdaggett@555 | 1634 | across fonts. For scripts such as Latin or Cyrillic that distinguish |
jdaggett@555 | 1635 | between upper and lowercase letters, the relative height of lowercase |
jdaggett@555 | 1636 | letters compared to their uppercase counterparts is a determining factor |
jdaggett@555 | 1637 | of legibility. This is commonly referred to as the <a class=index-def |
jdaggett@4624 | 1638 | href="#aspect-value" id=aspect-value0 title="aspect value"><dfn |
jdaggett@4624 | 1639 | id=aspect-value>aspect value</dfn></a>. Precisely defined, it is equal to |
jdaggett@4624 | 1640 | the x-height of a font divided by the font size. |
jdaggett@555 | 1641 | |
jdaggett@555 | 1642 | <p>In situations where font fallback occurs, fallback fonts may not share |
jdaggett@555 | 1643 | the same aspect ratio as the desired font family and will thus appear less |
jdaggett@555 | 1644 | readable. The font-size-adjust property is a way to preserve the |
jdaggett@547 | 1645 | readability of text when font fallback occurs. It does this by adjusting |
jdaggett@1662 | 1646 | the font-size so that the x-height is the same regardless of the font |
jdaggett@555 | 1647 | used. |
jdaggett@547 | 1648 | |
jdaggett@547 | 1649 | <div class=example> |
jdaggett@547 | 1650 | <p>The style defined below defines Verdana as the desired font family, but |
jdaggett@547 | 1651 | if Verdana is not available Futura or Times will be used.</p> |
jdaggett@547 | 1652 | |
jdaggett@8277 | 1653 | <pre>p { |
jdaggett@8277 | 1654 | font-family: Verdana, Futura, Times; |
jdaggett@547 | 1655 | } |
jdaggett@547 | 1656 | |
jdaggett@547 | 1657 | <p>Lorem ipsum dolor sit amet, ...</p> |
jdaggett@547 | 1658 | </pre> |
jdaggett@547 | 1659 | |
jdaggett@547 | 1660 | <p>Verdana has a relatively high aspect ratio, lowercase letters are |
jdaggett@547 | 1661 | relatively tall compared to uppercase letters, so at small sizes text |
jdaggett@547 | 1662 | appears legible. Times has a lower aspect ratio and so if fallback |
jdaggett@547 | 1663 | occurs, the text will be less legible at small sizes than Verdana.</p> |
jdaggett@547 | 1664 | </div> |
jdaggett@547 | 1665 | |
jdaggett@547 | 1666 | <p>How text rendered in each of these fonts compares is shown below, the |
jdaggett@547 | 1667 | columns show text rendered in Verdana, Futura and Times. The same |
jdaggett@547 | 1668 | font-size value is used across cells within each row and red lines are |
jdaggett@547 | 1669 | included to show the differences in x-height. In the upper half each row |
jdaggett@547 | 1670 | is rendered in the same font-size value. The same is true for the lower |
jdaggett@547 | 1671 | half but in this half the font-size-adjust property is also set so that |
jdaggett@2462 | 1672 | the actual font size is adjusted to preserve the x-height across each row. |
jdaggett@547 | 1673 | Note how small text remains relatively legible across each row in the |
jdaggett@547 | 1674 | lower half. |
jdaggett@547 | 1675 | |
jdaggett@1150 | 1676 | <div class=figure><img alt="text with and without font-size-adjust" |
jdaggett@1150 | 1677 | src=fontsizeadjust.png> |
jdaggett@890 | 1678 | <p class=caption>Text with and without the use of font-size-adjust |
jdaggett@547 | 1679 | </div> |
jdaggett@512 | 1680 | |
jdaggett@512 | 1681 | <p>This property allows authors to specify an aspect value for an element |
jdaggett@554 | 1682 | that will effectively preserve the x-height of the first choice font, |
jdaggett@554 | 1683 | whether it is substituted or not. Values have the following meanings: |
jdaggett@512 | 1684 | |
jdaggett@512 | 1685 | <dl> |
jdaggett@8278 | 1686 | <dt><dfn id=font-size-adjust-none-value |
jdaggett@8278 | 1687 | title="none!!font-size-adjust">none</dfn> |
jdaggett@512 | 1688 | |
jdaggett@512 | 1689 | <dd>Do not preserve the font's x-height. |
jdaggett@512 | 1690 | |
jdaggett@8278 | 1691 | <dt><dfn id=font-size-adjust-auto-value |
jdaggett@8278 | 1692 | title="auto!!font-size-adjust">auto</dfn> |
jdaggett@6659 | 1693 | |
jdaggett@6659 | 1694 | <dd>Behaves just like <number>, except the number used is the aspect |
jdaggett@6659 | 1695 | value calculated by user agents for the first font in the list of fonts |
jdaggett@8278 | 1696 | defined for the initial value of the <a href="#propdef-font-family" |
jdaggett@8278 | 1697 | title="font-family!!property">‘<code |
jdaggett@8278 | 1698 | class=property>font-family</code>’</a> property. Effectively this is |
jdaggett@8278 | 1699 | the default font used when <a href="#propdef-font-family" |
jdaggett@8278 | 1700 | title="font-family!!property">‘<code |
jdaggett@8278 | 1701 | class=property>font-family</code>’</a> is not otherwise specified. |
jdaggett@6659 | 1702 | <p>Authors can use this value to specify that font size should be |
jdaggett@6659 | 1703 | normalized across fonts based on the x-height without the need to |
jdaggett@6659 | 1704 | specify the aspect ratio explicitly.</p> |
jdaggett@6659 | 1705 | |
jdaggett@8225 | 1706 | <dt><dfn id=aspect-ratio-value><var><number></var></dfn> |
jdaggett@512 | 1707 | |
jdaggett@554 | 1708 | <dd>Specifies the aspect value used in the calculation below to calculate |
jdaggett@554 | 1709 | the adjusted font size: |
jdaggett@8277 | 1710 | <pre>c = ( a / a' ) s |
jdaggett@512 | 1711 | </pre> |
jdaggett@512 | 1712 | |
jdaggett@512 | 1713 | <p>where:</p> |
jdaggett@512 | 1714 | |
jdaggett@554 | 1715 | <pre>s = font-size value |
jdaggett@554 | 1716 | a = aspect value as specified by the font-size-adjust property |
jdaggett@554 | 1717 | a' = aspect value of actual font |
jdaggett@554 | 1718 | c = adjusted font-size to use |
jdaggett@512 | 1719 | </pre> |
jdaggett@554 | 1720 | |
jdaggett@554 | 1721 | <p>This value applies to any font that is selected but in typical usage |
jdaggett@554 | 1722 | it should be based on the aspect value of the first font in the |
jdaggett@555 | 1723 | font-family list. If this is specified accurately, the <tt>(a/a')</tt> |
jdaggett@555 | 1724 | term in the formula above is effectively 1 for the first font and no |
jdaggett@555 | 1725 | adjustment occurs. If the value is specified inaccurately, text rendered |
jdaggett@555 | 1726 | using the first font in the family list will display differently in |
jdaggett@555 | 1727 | older user agents that don't support font-size-adjust.</p> |
jdaggett@512 | 1728 | </dl> |
jdaggett@512 | 1729 | |
jdaggett@554 | 1730 | <p>Authors can calculate the aspect value for a given font by comparing |
jdaggett@554 | 1731 | spans with the same content but different font-size-adjust properties. If |
jdaggett@554 | 1732 | the same font-size is used, the spans will match when the font-size-adjust |
jdaggett@554 | 1733 | value is accurate for the given font. |
jdaggett@554 | 1734 | |
jdaggett@554 | 1735 | <div class=example> |
jdaggett@554 | 1736 | <p>Two spans with borders are used to determine the aspect value of a |
jdaggett@554 | 1737 | font. The font-size is the same for both spans but the font-size-adjust |
jdaggett@554 | 1738 | property is specified only for the right span. Starting with a value of |
jdaggett@554 | 1739 | 0.5, the aspect value can be adjusted until the borders around the two |
jdaggett@554 | 1740 | letters line up.</p> |
jdaggett@554 | 1741 | |
jdaggett@554 | 1742 | <pre>p { |
jdaggett@554 | 1743 | font-family: Futura; |
jdaggett@554 | 1744 | font-size: 500px; |
jdaggett@554 | 1745 | } |
jdaggett@554 | 1746 | |
jdaggett@554 | 1747 | span { |
jdaggett@554 | 1748 | border: solid 1px red; |
jdaggett@554 | 1749 | } |
jdaggett@554 | 1750 | |
jdaggett@554 | 1751 | .adjust { |
jdaggett@554 | 1752 | font-size-adjust: 0.5; |
jdaggett@554 | 1753 | } |
jdaggett@554 | 1754 | |
jdaggett@554 | 1755 | <p><span>b</span><span class="adjust">b</span></p> |
jdaggett@554 | 1756 | </pre> |
jdaggett@554 | 1757 | |
jdaggett@1150 | 1758 | <div class=figure><img alt="Futura with an aspect value of 0.5" |
jdaggett@1150 | 1759 | src=beforefontsizeadjust.png> |
jdaggett@890 | 1760 | <p class=caption>Futura with an aspect value of 0.5 |
jdaggett@554 | 1761 | </div> |
jdaggett@554 | 1762 | |
jdaggett@554 | 1763 | <p>The box on the right is a bit bigger than the one on the left, so the |
jdaggett@554 | 1764 | aspect value of this font is something less than 0.5. Adjust the value |
jdaggett@554 | 1765 | until the boxes align.</p> |
jdaggett@554 | 1766 | </div> |
jdaggett@512 | 1767 | <!-- prop: font --> |
jdaggett@512 | 1768 | |
jdaggett@1662 | 1769 | <h3 id=font-prop><span class=secno>3.7 </span>Shorthand font property: the |
jdaggett@1662 | 1770 | <a href="#propdef-font">font</a> property</h3> |
jdaggett@1662 | 1771 | |
jdaggett@8225 | 1772 | <table class=propdef id=namefontvalue-ltlsquofont-stylersquogt-l> |
jdaggett@484 | 1773 | <tbody> |
jdaggett@484 | 1774 | <tr> |
jdaggett@484 | 1775 | <td>Name: |
jdaggett@484 | 1776 | |
jdaggett@1662 | 1777 | <td><dfn id=propdef-font>font</dfn> |
jdaggett@484 | 1778 | |
jdaggett@484 | 1779 | <tr> |
jdaggett@484 | 1780 | <td>Value: |
jdaggett@484 | 1781 | |
jdaggett@8278 | 1782 | <td>[ [ <var><<a href="#propdef-font-style" |
jdaggett@8278 | 1783 | title="font-style!!property">‘<code |
jdaggett@8278 | 1784 | class=property>font-style</code>’</a>></var> || <a |
jdaggett@8225 | 1785 | href="#font-variant-css21-values"><var><font-variant-css21></var></a> |
jdaggett@8278 | 1786 | || <var><<a href="#propdef-font-weight" |
jdaggett@8278 | 1787 | title="font-weight!!property">‘<code |
jdaggett@8278 | 1788 | class=property>font-weight</code>’</a>></var> || <var><<a |
jdaggett@8278 | 1789 | href="#propdef-font-stretch" title="font-stretch!!property">‘<code |
jdaggett@8278 | 1790 | class=property>font-stretch</code>’</a></var> ]? <var><‘<a |
jdaggett@8225 | 1791 | href="#propdef-font-size"><code |
jdaggett@8225 | 1792 | class=property>font-size</code></a>’></var> [ / <var><‘<code |
jdaggett@8278 | 1793 | class=property>line-height</code>’></var> ]? <var><<a |
jdaggett@8278 | 1794 | href="#propdef-font-family" title="font-family!!property">‘<code |
jdaggett@8278 | 1795 | class=property>font-family</code>’</a>></var> ] | caption | icon | |
jdaggett@8225 | 1796 | menu | message-box | small-caption | status-bar |
jdaggett@484 | 1797 | |
jdaggett@484 | 1798 | <tr> |
jdaggett@484 | 1799 | <td>Initial: |
jdaggett@484 | 1800 | |
jdaggett@484 | 1801 | <td>see individual properties |
jdaggett@484 | 1802 | |
jdaggett@484 | 1803 | <tr> |
jdaggett@484 | 1804 | <td>Applies to: |
jdaggett@484 | 1805 | |
jdaggett@484 | 1806 | <td>all elements |
jdaggett@484 | 1807 | |
jdaggett@484 | 1808 | <tr> |
jdaggett@484 | 1809 | <td>Inherited: |
jdaggett@484 | 1810 | |
jdaggett@484 | 1811 | <td>yes |
jdaggett@484 | 1812 | |
jdaggett@484 | 1813 | <tr> |
jdaggett@484 | 1814 | <td>Percentages: |
jdaggett@484 | 1815 | |
jdaggett@484 | 1816 | <td>see individual properties |
jdaggett@484 | 1817 | |
jdaggett@484 | 1818 | <tr> |
jdaggett@484 | 1819 | <td>Media: |
jdaggett@484 | 1820 | |
jdaggett@484 | 1821 | <td>visual |
jdaggett@484 | 1822 | |
jdaggett@484 | 1823 | <tr> |
jdaggett@1148 | 1824 | <td>Computed value: |
jdaggett@484 | 1825 | |
jdaggett@484 | 1826 | <td>see individual properties |
jdaggett@7377 | 1827 | |
jdaggett@7377 | 1828 | <tr> |
jdaggett@7377 | 1829 | <td>Animatable: |
jdaggett@7377 | 1830 | |
jdaggett@7377 | 1831 | <td>see individual properties |
jdaggett@484 | 1832 | </table> |
jdaggett@1732 | 1833 | |
jdaggett@4624 | 1834 | <p>The <span class=property>‘<a href="#propdef-font"><code |
jdaggett@4624 | 1835 | class=property>font</code></a>’</span> property is, except as described |
jdaggett@8278 | 1836 | below, a shorthand property for setting <a href="#propdef-font-style" |
jdaggett@8278 | 1837 | title="font-style!!property">‘<code |
jdaggett@8278 | 1838 | class=property>font-style</code>’</a>, <a href="#propdef-font-variant" |
jdaggett@8278 | 1839 | title="font-variant!!property">‘<code |
jdaggett@8278 | 1840 | class=property>font-variant</code>’</a>, <a href="#propdef-font-weight" |
jdaggett@8278 | 1841 | title="font-weight!!property">‘<code |
jdaggett@8278 | 1842 | class=property>font-weight</code>’</a>, <a href="#propdef-font-stretch" |
jdaggett@8278 | 1843 | title="font-stretch!!property">‘<code |
jdaggett@8278 | 1844 | class=property>font-stretch</code>’</a>, <span class=property>‘<a |
jdaggett@8278 | 1845 | href="#propdef-font-size"><code |
jdaggett@8278 | 1846 | class=property>font-size</code></a>’</span>, <a class=property |
jdaggett@8278 | 1847 | href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code |
jdaggett@8278 | 1848 | class=property>line-height</code>’</a>, <a href="#propdef-font-family" |
jdaggett@8278 | 1849 | title="font-family!!property">‘<code |
jdaggett@8278 | 1850 | class=property>font-family</code>’</a> at the same place in the |
jdaggett@8278 | 1851 | stylesheet. Values for the <a href="#propdef-font-variant" |
jdaggett@8278 | 1852 | title="font-variant!!property">‘<code |
jdaggett@8278 | 1853 | class=property>font-variant</code>’</a> property may also be included |
jdaggett@8313 | 1854 | but only those supported in CSS 2.1, none of the <a |
jdaggett@8313 | 1855 | href="#propdef-font-variant" title="font-variant!!property">‘<code |
jdaggett@8313 | 1856 | class=property>font-variant</code>’</a> values added in this |
jdaggett@8313 | 1857 | specification can be used in the <span class=property>‘<a |
jdaggett@8278 | 1858 | href="#propdef-font"><code class=property>font</code></a>’</span> |
jdaggett@8278 | 1859 | shorthand: |
jdaggett@1732 | 1860 | |
jdaggett@1732 | 1861 | <pre |
jdaggett@8225 | 1862 | class=prod><dfn id=font-variant-css21-values><var><font-variant-css21></var></dfn> = [normal | small-caps]</pre> |
jdaggett@1732 | 1863 | |
jdaggett@1732 | 1864 | <p>The syntax of this property is based on a traditional typographical |
jdaggett@1732 | 1865 | shorthand notation to set multiple properties related to fonts. |
jdaggett@512 | 1866 | |
jdaggett@8197 | 1867 | <p>All subproperties of the ‘<a href="#propdef-font"><code |
jdaggett@8197 | 1868 | class=property>font</code></a>’ property are first reset to their |
jdaggett@8197 | 1869 | initial values, including those listed above plus <span |
jdaggett@4624 | 1870 | class=property>‘<a href="#propdef-font-size-adjust"><code |
jdaggett@4624 | 1871 | class=property>font-size-adjust</code></a>’</span>, <span |
jdaggett@4624 | 1872 | class=property>‘<a href="#propdef-font-kerning"><code |
jdaggett@8278 | 1873 | class=property>font-kerning</code></a>’</span>, subproperties of <a |
jdaggett@8278 | 1874 | href="#propdef-font-variant" title="font-variant!!property">‘<code |
jdaggett@8278 | 1875 | class=property>font-variant</code>’</a> and and <span>‘<a |
jdaggett@8278 | 1876 | href="#propdef-font-language-override"><code |
jdaggett@8197 | 1877 | class=property>font-language-override</code></a>’</span>. Then, those |
jdaggett@8197 | 1878 | properties that are given explicit values in the <span |
jdaggett@8197 | 1879 | class=property>‘<a href="#propdef-font"><code |
jdaggett@4624 | 1880 | class=property>font</code></a>’</span> shorthand are set to those |
jdaggett@512 | 1881 | values. For a definition of allowed and initial values, see the previously |
jdaggett@512 | 1882 | defined properties. For reasons of backwards compatibility, it is not |
jdaggett@4624 | 1883 | possible to set <span class=property>‘<a |
jdaggett@7020 | 1884 | href="#propdef-font-size-adjust"><code |
jdaggett@7020 | 1885 | class=property>font-size-adjust</code></a>’</span> to anything other |
jdaggett@7020 | 1886 | than its initial value using the <span class=property>‘<a |
jdaggett@4624 | 1887 | href="#propdef-font"><code class=property>font</code></a>’</span> |
jdaggett@7020 | 1888 | shorthand property; instead, use the individual property. |
jdaggett@512 | 1889 | |
jdaggett@512 | 1890 | <div class=example> |
jdaggett@4624 | 1891 | <p style="display:none">Example(s): |
jdaggett@890 | 1892 | |
jdaggett@890 | 1893 | <p> |
jdaggett@512 | 1894 | |
jdaggett@512 | 1895 | <pre>p { font: 12pt/14pt sans-serif } |
jdaggett@512 | 1896 | p { font: 80% sans-serif } |
jdaggett@512 | 1897 | p { font: x-large/110% "new century schoolbook", serif } |
jdaggett@512 | 1898 | p { font: bold italic large Palatino, serif } |
jdaggett@512 | 1899 | p { font: normal small-caps 120%/120% fantasy } |
jdaggett@7020 | 1900 | p { font: condensed oblique 12pt "Helvetica Neue", serif; } |
jdaggett@512 | 1901 | </pre> |
jdaggett@512 | 1902 | |
jdaggett@1148 | 1903 | <p> In the second rule, the font size percentage value (‘<code |
jdaggett@8187 | 1904 | class=css>80%</code>’) refers to the computed ‘<a |
jdaggett@8187 | 1905 | href="#propdef-font-size"><code class=property>font-size</code></a>’ of |
jdaggett@8187 | 1906 | the parent element. In the third rule, the line height percentage |
jdaggett@8187 | 1907 | (‘<code class=css>110%</code>’) refers to the font size of the |
jdaggett@8187 | 1908 | element itself. |
jdaggett@512 | 1909 | |
jdaggett@8278 | 1910 | <p>The first three rules do not specify the <a |
jdaggett@8278 | 1911 | href="#propdef-font-variant" title="font-variant!!property">‘<code |
jdaggett@8278 | 1912 | class=property>font-variant</code>’</a> and <a |
jdaggett@8278 | 1913 | href="#propdef-font-weight" title="font-weight!!property">‘<code |
jdaggett@8278 | 1914 | class=property>font-weight</code>’</a> explicitly, so these properties |
jdaggett@8279 | 1915 | receive their initial values (‘<a href="#normal"><code |
jdaggett@8279 | 1916 | class=property>normal</code></a>’). Notice that the font family name |
jdaggett@8279 | 1917 | "new century schoolbook", which contains spaces, is enclosed in quotes. |
jdaggett@8279 | 1918 | The fourth rule sets the <a href="#propdef-font-weight" |
jdaggett@8279 | 1919 | title="font-weight!!property">‘<code |
jdaggett@8278 | 1920 | class=property>font-weight</code>’</a> to ‘<a href="#bold"><code |
jdaggett@8278 | 1921 | class=property>bold</code></a>’, the <a href="#propdef-font-style" |
jdaggett@8278 | 1922 | title="font-style!!property">‘<code |
jdaggett@8278 | 1923 | class=property>font-style</code>’</a> to ‘<a href="#italic"><code |
jdaggett@8278 | 1924 | class=property>italic</code></a>’, and implicitly sets <a |
jdaggett@8278 | 1925 | href="#propdef-font-variant" title="font-variant!!property">‘<code |
jdaggett@8279 | 1926 | class=property>font-variant</code>’</a> to ‘<a href="#normal"><code |
jdaggett@8279 | 1927 | class=property>normal</code></a>’. |
jdaggett@8278 | 1928 | |
jdaggett@8278 | 1929 | <p> The fifth rule sets the <a href="#propdef-font-variant" |
jdaggett@8278 | 1930 | title="font-variant!!property">‘<code |
jdaggett@8278 | 1931 | class=property>font-variant</code>’</a> (‘<a href="#small-caps"><code |
jdaggett@8278 | 1932 | class=property>small-caps</code></a>’), the <span class=property>‘<a |
jdaggett@8278 | 1933 | href="#propdef-font-size"><code |
jdaggett@4624 | 1934 | class=property>font-size</code></a>’</span> (120% of the parent's font |
jdaggett@8278 | 1935 | size), the <a class=property |
jdaggett@8278 | 1936 | href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code |
jdaggett@8278 | 1937 | class=property>line-height</code>’</a> (120% of the font size) and the |
jdaggett@8278 | 1938 | <a href="#propdef-font-family" title="font-family!!property">‘<code |
jdaggett@8278 | 1939 | class=property>font-family</code>’</a> (‘<a href="#fantasy"><code |
jdaggett@8279 | 1940 | class=property>fantasy</code></a>’). It follows that the keyword ‘<a |
jdaggett@8279 | 1941 | href="#normal"><code class=property>normal</code></a>’ applies to the |
jdaggett@8279 | 1942 | two remaining properties: <a href="#propdef-font-style" |
jdaggett@8278 | 1943 | title="font-style!!property">‘<code |
jdaggett@8278 | 1944 | class=property>font-style</code>’</a> and <a |
jdaggett@8278 | 1945 | href="#propdef-font-weight" title="font-weight!!property">‘<code |
jdaggett@8278 | 1946 | class=property>font-weight</code>’</a>. |
jdaggett@8278 | 1947 | |
jdaggett@8278 | 1948 | <p>The sixth rule sets the <a href="#propdef-font-style" |
jdaggett@8278 | 1949 | title="font-style!!property">‘<code |
jdaggett@8278 | 1950 | class=property>font-style</code>’</a>, <a href="#propdef-font-stretch" |
jdaggett@8278 | 1951 | title="font-stretch!!property">‘<code |
jdaggett@8278 | 1952 | class=property>font-stretch</code>’</a>, <span class=property>‘<a |
jdaggett@8278 | 1953 | href="#propdef-font-size"><code |
jdaggett@8278 | 1954 | class=property>font-size</code></a>’</span>, and <a |
jdaggett@8278 | 1955 | href="#propdef-font-family" title="font-family!!property">‘<code |
jdaggett@8278 | 1956 | class=property>font-family</code>’</a>, the other font properties being |
jdaggett@8278 | 1957 | set to their initial values. |
jdaggett@512 | 1958 | </div> |
jdaggett@512 | 1959 | |
jdaggett@8278 | 1960 | <p>Since the <a href="#propdef-font-stretch" |
jdaggett@8278 | 1961 | title="font-stretch!!property">‘<code |
jdaggett@8278 | 1962 | class=property>font-stretch</code>’</a> property was not defined in CSS |
jdaggett@8278 | 1963 | 2.1, when using <a href="#propdef-font-stretch" |
jdaggett@8278 | 1964 | title="font-stretch!!property">‘<code |
jdaggett@8278 | 1965 | class=property>font-stretch</code>’</a> values within ‘<a |
jdaggett@7020 | 1966 | href="#propdef-font"><code class=property>font</code></a>’ rules, |
jdaggett@7020 | 1967 | authors should include a extra version compatible with older user agents: |
jdaggett@7020 | 1968 | |
jdaggett@7020 | 1969 | <pre>p { |
jdaggett@7020 | 1970 | font: 80% sans-serif; /* for older user agents */ |
jdaggett@7020 | 1971 | font: condensed 80% sans-serif; |
jdaggett@7020 | 1972 | }</pre> |
jdaggett@7020 | 1973 | |
jdaggett@1662 | 1974 | <p>The following values refer to system fonts: |
jdaggett@512 | 1975 | |
jdaggett@512 | 1976 | <dl> |
jdaggett@512 | 1977 | <dt><strong>caption</strong> |
jdaggett@512 | 1978 | |
jdaggett@512 | 1979 | <dd>The font used for captioned controls (e.g., buttons, drop-downs, |
jdaggett@512 | 1980 | etc.). |
jdaggett@512 | 1981 | |
jdaggett@512 | 1982 | <dt><strong>icon</strong> |
jdaggett@512 | 1983 | |
jdaggett@512 | 1984 | <dd>The font used to label icons. |
jdaggett@512 | 1985 | |
jdaggett@512 | 1986 | <dt><strong>menu</strong> |
jdaggett@512 | 1987 | |
jdaggett@512 | 1988 | <dd>The font used in menus (e.g., dropdown menus and menu lists). |
jdaggett@512 | 1989 | |
jdaggett@512 | 1990 | <dt><strong>message-box</strong> |
jdaggett@512 | 1991 | |
jdaggett@512 | 1992 | <dd>The font used in dialog boxes. |
jdaggett@512 | 1993 | |
jdaggett@512 | 1994 | <dt><strong>small-caption</strong> |
jdaggett@512 | 1995 | |
jdaggett@512 | 1996 | <dd>The font used for labeling small controls. |
jdaggett@512 | 1997 | |
jdaggett@512 | 1998 | <dt><strong>status-bar</strong> |
jdaggett@512 | 1999 | |
jdaggett@512 | 2000 | <dd>The font used in window status bars. |
jdaggett@512 | 2001 | </dl> |
jdaggett@512 | 2002 | |
jdaggett@512 | 2003 | <p>System fonts may only be set as a whole; that is, the font family, size, |
jdaggett@1662 | 2004 | weight, style, etc. are all set at the same time. These values may then be |
jdaggett@512 | 2005 | altered individually if desired. If no font with the indicated |
jdaggett@512 | 2006 | characteristics exists on a given platform, the user agent should either |
jdaggett@1148 | 2007 | intelligently substitute (e.g., a smaller version of the ‘<code |
jdaggett@1148 | 2008 | class=property>caption</code>’ font might be used for the ‘<code |
jdaggett@7242 | 2009 | class=property>small-caption</code>’ font), or substitute a user agent |
jdaggett@1148 | 2010 | default font. As for regular fonts, if, for a system font, any of the |
jdaggett@1148 | 2011 | individual properties are not part of the operating system's available |
jdaggett@1148 | 2012 | user preferences, those properties should be set to their initial values. |
jdaggett@512 | 2013 | |
jdaggett@1662 | 2014 | <p>That is why this property is "almost" a shorthand property: system fonts |
jdaggett@8278 | 2015 | can only be specified with this property, not with <a |
jdaggett@8278 | 2016 | href="#propdef-font-family" title="font-family!!property">‘<code |
jdaggett@8278 | 2017 | class=property>font-family</code>’</a> itself, so <span |
jdaggett@4624 | 2018 | class=property>‘<a href="#propdef-font"><code |
jdaggett@4624 | 2019 | class=property>font</code></a>’</span> allows authors to do more than |
jdaggett@4624 | 2020 | the sum of its subproperties. However, the individual properties such as |
jdaggett@8278 | 2021 | <a href="#propdef-font-weight" title="font-weight!!property">‘<code |
jdaggett@8278 | 2022 | class=property>font-weight</code>’</a> are still given values taken from |
jdaggett@8278 | 2023 | the system font, which can be independently varied. |
jdaggett@512 | 2024 | |
jdaggett@7235 | 2025 | <p>Note that the keywords used for the system fonts listed above are only |
jdaggett@7235 | 2026 | treated as keywords when they occur in the initial position, in other |
jdaggett@7235 | 2027 | positions the same string is treated as part of the font family name: |
jdaggett@7235 | 2028 | |
jdaggett@7235 | 2029 | <pre> font: menu; /* use the font settings for system menus */ |
jdaggett@7235 | 2030 | font: large menu; /* use a font family named "menu" */</pre> |
jdaggett@7235 | 2031 | |
jdaggett@512 | 2032 | <div class=example> |
jdaggett@4624 | 2033 | <p style="display:none">Example(s): |
jdaggett@890 | 2034 | |
jdaggett@890 | 2035 | <p> |
jdaggett@512 | 2036 | |
jdaggett@512 | 2037 | <pre>button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif } |
jdaggett@512 | 2038 | button p { font: menu } |
jdaggett@512 | 2039 | button p em { font-weight: bolder } |
jdaggett@512 | 2040 | </pre> |
jdaggett@512 | 2041 | |
jdaggett@512 | 2042 | <p>If the font used for dropdown menus on a particular system happened to |
jdaggett@512 | 2043 | be, for example, 9-point Charcoal, with a weight of 600, then P elements |
jdaggett@512 | 2044 | that were descendants of BUTTON would be displayed as if this rule were |
jdaggett@890 | 2045 | in effect: |
jdaggett@512 | 2046 | |
jdaggett@512 | 2047 | <pre>button p { font: 600 9pt Charcoal } |
jdaggett@512 | 2048 | </pre> |
jdaggett@512 | 2049 | |
jdaggett@4624 | 2050 | <p>Because the <span class=property>‘<a href="#propdef-font"><code |
jdaggett@4624 | 2051 | class=property>font</code></a>’</span> shorthand resets to its initial |
jdaggett@4624 | 2052 | value any property not explicitly given a value, this has the same effect |
jdaggett@4624 | 2053 | as this declaration: |
jdaggett@512 | 2054 | |
jdaggett@512 | 2055 | <pre>button p { |
jdaggett@512 | 2056 | font-style: normal; |
jdaggett@512 | 2057 | font-variant: normal; |
jdaggett@512 | 2058 | font-weight: 600; |
jdaggett@512 | 2059 | font-size: 9pt; |
jdaggett@512 | 2060 | line-height: normal; |
jdaggett@512 | 2061 | font-family: Charcoal |
jdaggett@8277 | 2062 | } |
jdaggett@512 | 2063 | </pre> |
jdaggett@512 | 2064 | </div> |
jdaggett@2487 | 2065 | <!-- prop: font-synthesis --> |
jdaggett@2487 | 2066 | |
jdaggett@2487 | 2067 | <h3 id=font-synthesis-prop><span class=secno>3.8 </span>Controlling |
jdaggett@2487 | 2068 | synthetic faces: the <a href="#propdef-font-synthesis">font-synthesis</a> |
jdaggett@2487 | 2069 | property</h3> |
jdaggett@2487 | 2070 | |
jdaggett@4624 | 2071 | <table class=propdef id=namefont-synthesisvaluenone-weight-style> |
jdaggett@2457 | 2072 | <tbody> |
jdaggett@2457 | 2073 | <tr> |
jdaggett@2457 | 2074 | <td>Name: |
jdaggett@2457 | 2075 | |
jdaggett@2487 | 2076 | <td><dfn id=propdef-font-synthesis>font-synthesis</dfn> |
jdaggett@2457 | 2077 | |
jdaggett@2457 | 2078 | <tr> |
jdaggett@2457 | 2079 | <td>Value: |
jdaggett@2457 | 2080 | |
jdaggett@2487 | 2081 | <td>none | [ weight || style ] |
jdaggett@2457 | 2082 | |
jdaggett@2457 | 2083 | <tr> |
jdaggett@2457 | 2084 | <td>Initial: |
jdaggett@2457 | 2085 | |
jdaggett@2487 | 2086 | <td>weight style |
jdaggett@2457 | 2087 | |
jdaggett@2457 | 2088 | <tr> |
jdaggett@2457 | 2089 | <td>Applies to: |
jdaggett@2457 | 2090 | |
jdaggett@2457 | 2091 | <td>all elements |
jdaggett@2457 | 2092 | |
jdaggett@2457 | 2093 | <tr> |
jdaggett@2457 | 2094 | <td>Inherited: |
jdaggett@2457 | 2095 | |
jdaggett@2457 | 2096 | <td>yes |
jdaggett@2457 | 2097 | |
jdaggett@2457 | 2098 | <tr> |
jdaggett@2457 | 2099 | <td>Percentages: |
jdaggett@2457 | 2100 | |
jdaggett@2457 | 2101 | <td>N/A |
jdaggett@2457 | 2102 | |
jdaggett@2457 | 2103 | <tr> |
jdaggett@2457 | 2104 | <td>Media: |
jdaggett@2457 | 2105 | |
jdaggett@2457 | 2106 | <td>visual |
jdaggett@2457 | 2107 | |
jdaggett@2457 | 2108 | <tr> |
jdaggett@2457 | 2109 | <td>Computed value: |
jdaggett@2457 | 2110 | |
jdaggett@2457 | 2111 | <td>as specified |
jdaggett@7377 | 2112 | |
jdaggett@7377 | 2113 | <tr> |
jdaggett@7377 | 2114 | <td>Animatable: |
jdaggett@7377 | 2115 | |
jdaggett@7377 | 2116 | <td>no |
jdaggett@2457 | 2117 | </table> |
jdaggett@2457 | 2118 | |
jdaggett@2487 | 2119 | <p>This property controls whether user agents are allowed to synthesize |
jdaggett@2487 | 2120 | bold or oblique font faces when a font family lacks bold or italic faces. |
jdaggett@7311 | 2121 | If ‘<a href="#weight"><code class=property>weight</code></a>’ is not |
jdaggett@7311 | 2122 | specified, user agents must not synthesize bold faces and if ‘<code |
jdaggett@2487 | 2123 | class=property>style</code>’ is not specified user agents must not |
jdaggett@8278 | 2124 | synthesize italic faces. A value of ‘<code class=property>none</code>’ |
jdaggett@8278 | 2125 | disallows all synthetic faces. |
jdaggett@2457 | 2126 | |
jdaggett@2457 | 2127 | <div class=example> |
jdaggett@2488 | 2128 | <p>The style rule below disables the use of synthetically obliqued Arabic:</p> |
jdaggett@2457 | 2129 | |
jdaggett@2487 | 2130 | <pre>*:lang(ar) { font-synthesis: none; } |
jdaggett@2457 | 2131 | </pre> |
jdaggett@2457 | 2132 | </div> |
jdaggett@512 | 2133 | |
jdaggett@6699 | 2134 | <h2 id=font-resources><span class=secno>4 </span>Font Resources</h2> |
jdaggett@545 | 2135 | |
jdaggett@8311 | 2136 | <h3 id=font-face-rule><span class=secno>4.1 </span>The <dfn |
jdaggett@8311 | 2137 | id=at-font-face-rule style="font-weight: inherit; font-style: |
jdaggett@8311 | 2138 | inherit"><code>@font-face</code></dfn> rule</h3> |
jdaggett@8311 | 2139 | |
jdaggett@8311 | 2140 | <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule allows |
jdaggett@8311 | 2141 | for linking to fonts that are automatically fetched and activated when |
jdaggett@8311 | 2142 | needed. This allows authors to select a font that closely matches the |
jdaggett@8311 | 2143 | design goals for a given page rather than limiting the font choice to a |
jdaggett@8311 | 2144 | set of fonts available on all platforms. A set of font descriptors define |
jdaggett@8311 | 2145 | the location of a font resource, either locally or externally, along with |
jdaggett@8311 | 2146 | the style characteristics of an individual face. Multiple <a |
jdaggett@8311 | 2147 | href="#at-font-face-rule"><code>@font-face</code></a> rules can be used to |
jdaggett@8311 | 2148 | construct font families with a variety of faces. Using CSS font matching |
jdaggett@8311 | 2149 | rules, a user agent can selectively download only those faces that are |
jdaggett@8311 | 2150 | needed for a given piece of text. |
jdaggett@8311 | 2151 | |
jdaggett@8311 | 2152 | <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule |
jdaggett@8311 | 2153 | consists of the <a href="#at-font-face-rule"><code>@font-face</code></a> |
jdaggett@8311 | 2154 | at-keyword followed by a block of descriptor declarations. In terms of the |
jdaggett@8311 | 2155 | grammar, this specification defines the following productions: |
jdaggett@8031 | 2156 | |
jdaggett@8031 | 2157 | <pre><dfn id=fontfacerule>font_face_rule</dfn> |
jdaggett@8225 | 2158 | : <a href="#fontfacesym"><i>FONT_FACE_SYM</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* '{' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#descriptordeclaration"><i>descriptor_declaration</i></a>? [ ';' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#descriptordeclaration"><i>descriptor_declaration</i></a>? ]* '}' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* |
jdaggett@8031 | 2159 | ; |
jdaggett@8031 | 2160 | |
jdaggett@8031 | 2161 | <dfn id=descriptordeclaration>descriptor_declaration</dfn> |
jdaggett@8225 | 2162 | : <a href="http://www.w3.org/TR/CSS21/grammar.html#grammar"><i>property</i></a> ':' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/grammar.html#grammar"><i>expr</i></a> |
jdaggett@8031 | 2163 | ;</pre> |
jdaggett@8031 | 2164 | |
jdaggett@8032 | 2165 | <p>The following new definitions are introduced: |
jdaggett@8032 | 2166 | |
jdaggett@8032 | 2167 | <pre>- -|\\0{0,4}2d(\r\n|[ \t\r\n\f])? |
jdaggett@8032 | 2168 | F f|\\0{0,4}(46|66)(\r\n|[ \t\r\n\f])?</pre> |
jdaggett@8032 | 2169 | |
jdaggett@8032 | 2170 | <p>The following new token is introduced: |
jdaggett@8032 | 2171 | |
jdaggett@8225 | 2172 | <pre>@{F}{O}{N}{T}{-}{F}{A}{C}{E} {return <dfn id=fontfacesym>FONT_FACE_SYM</dfn>;}</pre> |
jdaggett@8032 | 2173 | |
jdaggett@8311 | 2174 | <p>Each <a href="#at-font-face-rule"><code>@font-face</code></a> rule |
jdaggett@8311 | 2175 | specifies a value for every font descriptor, either implicitly or |
jdaggett@8311 | 2176 | explicitly. Those not given explicit values in the rule take the initial |
jdaggett@8311 | 2177 | value listed with each descriptor in this specification. These descriptors |
jdaggett@8311 | 2178 | apply solely within the context of the <a |
jdaggett@8311 | 2179 | href="#at-font-face-rule"><code>@font-face</code></a> rule in which they |
jdaggett@8311 | 2180 | are defined, and do not apply to document language elements. There is no |
jdaggett@8311 | 2181 | notion of which elements the descriptors apply to or whether the values |
jdaggett@8311 | 2182 | are inherited by child elements. When a given descriptor occurs multiple |
jdaggett@8311 | 2183 | times in a given <a href="#at-font-face-rule"><code>@font-face</code></a> |
jdaggett@8311 | 2184 | rule, only the last descriptor declaration is used and all prior |
jdaggett@8311 | 2185 | declarations for that descriptor are ignored. |
jdaggett@512 | 2186 | |
jdaggett@525 | 2187 | <div class=example> |
jdaggett@525 | 2188 | <p>To use a downloadable font called Gentium:</p> |
jdaggett@512 | 2189 | |
jdaggett@512 | 2190 | <pre> |
jdaggett@525 | 2191 | @font-face { |
jdaggett@525 | 2192 | font-family: Gentium; |
jdaggett@2556 | 2193 | src: url(http://example.com/fonts/Gentium.ttf); |
jdaggett@525 | 2194 | } |
jdaggett@525 | 2195 | |
jdaggett@525 | 2196 | p { font-family: Gentium, serif; } |
jdaggett@512 | 2197 | </pre> |
jdaggett@512 | 2198 | |
jdaggett@573 | 2199 | <p>The user agent will download Gentium and use it when rendering text |
jdaggett@573 | 2200 | within paragraph elements. If for some reason the site serving the font |
jdaggett@573 | 2201 | is unavailable, the default serif font will be used.</p> |
jdaggett@512 | 2202 | </div> |
jdaggett@512 | 2203 | |
jdaggett@8311 | 2204 | <p>A given set of <a href="#at-font-face-rule"><code>@font-face</code></a> |
jdaggett@8311 | 2205 | rules define a set of fonts available for use within the documents that |
jdaggett@8311 | 2206 | contain these rules. When font matching is done, fonts defined using these |
jdaggett@8311 | 2207 | rules are considered before other available fonts on a system. |
jdaggett@8198 | 2208 | |
jdaggett@8198 | 2209 | <p>Downloaded fonts are only available to documents that reference them. |
jdaggett@8198 | 2210 | The process of activating these fonts must not make them available to |
jdaggett@2472 | 2211 | other applications or to documents that don't directly link to the same |
jdaggett@2556 | 2212 | font. User agent implementers might consider it convenient to use |
jdaggett@2472 | 2213 | downloaded fonts when rendering characters in other documents for which no |
jdaggett@8363 | 2214 | other available font exists as part of the <a |
jdaggett@8363 | 2215 | href="#system-font-fallback"><em>system font fallback</em></a> procedure. |
jdaggett@8198 | 2216 | However, this would cause a security leak since the contents of one page |
jdaggett@8198 | 2217 | would be able to affect other pages, something an attacker could use as an |
jdaggett@8198 | 2218 | attack vector. These restrictions do not affect caching behavior, fonts |
jdaggett@8198 | 2219 | are cached the same way other web resources are cached. |
jdaggett@8198 | 2220 | |
jdaggett@8198 | 2221 | <p>This at-rule follows the forward-compatible parsing rules of CSS. Like |
jdaggett@8198 | 2222 | properties in a declaration block, declarations of any descriptors that |
jdaggett@8311 | 2223 | are not supported by the user agent must be ignored. <a |
jdaggett@8311 | 2224 | href="#at-font-face-rule"><code>@font-face</code></a> rules require a |
jdaggett@8311 | 2225 | font-family and src descriptor; if either of these are missing, the <a |
jdaggett@8311 | 2226 | href="#at-font-face-rule"><code>@font-face</code></a> rule is invalid and |
jdaggett@8311 | 2227 | must be ignored entirely. |
jdaggett@1244 | 2228 | |
jdaggett@1244 | 2229 | <p>In cases where user agents have limited platform resources or implement |
jdaggett@8311 | 2230 | the ability to disable downloadable font resources, <a |
jdaggett@8311 | 2231 | href="#at-font-face-rule"><code>@font-face</code></a> rules must simply be |
jdaggett@8311 | 2232 | ignored; the behavior of individual descriptors as defined in this |
jdaggett@8311 | 2233 | specification should not be altered. |
jdaggett@1662 | 2234 | |
jdaggett@1662 | 2235 | <h3 id=font-family-desc><span class=secno>4.2 </span>Font family: the <a |
jdaggett@1662 | 2236 | href="#descdef-font-family">font-family</a> descriptor</h3> |
jdaggett@512 | 2237 | |
jdaggett@512 | 2238 | <table class=descdef> |
jdaggett@512 | 2239 | <tbody> |
jdaggett@512 | 2240 | <tr> |
jdaggett@512 | 2241 | <td>Name: |
jdaggett@512 | 2242 | |
jdaggett@8278 | 2243 | <td><dfn id=descdef-font-family |
jdaggett@8278 | 2244 | title="font-family!!descriptor">font-family</dfn> |
jdaggett@512 | 2245 | |
jdaggett@512 | 2246 | <tr> |
jdaggett@512 | 2247 | <td>Value: |
jdaggett@512 | 2248 | |
jdaggett@8225 | 2249 | <td><a href="#family-name-value"><var><family-name></var></a> |
jdaggett@890 | 2250 | |
jdaggett@890 | 2251 | <tr> |
jdaggett@890 | 2252 | <td><em>Initial:</em> |
jdaggett@890 | 2253 | |
jdaggett@890 | 2254 | <td>N/A |
jdaggett@512 | 2255 | </table> |
jdaggett@512 | 2256 | |
jdaggett@525 | 2257 | <p>This descriptor defines the font family name that will be used in all |
jdaggett@8311 | 2258 | CSS font family name matching. It is required for the <a |
jdaggett@8311 | 2259 | href="#at-font-face-rule"><code>@font-face</code></a> rule to be valid. It |
jdaggett@8311 | 2260 | overrides the font family names contained in the underlying font data. If |
jdaggett@8311 | 2261 | the font family name is the same as a font family available in a given |
jdaggett@8311 | 2262 | user's environment, it effectively hides the underlying font for documents |
jdaggett@8311 | 2263 | that use the stylesheet. This permits a web author to freely choose |
jdaggett@8311 | 2264 | font-family names without worrying about conflicts with font family names |
jdaggett@8311 | 2265 | present in a given user's environment. Likewise, platform substitutions |
jdaggett@8311 | 2266 | for a given font family name must not be used. |
jdaggett@1244 | 2267 | |
jdaggett@1662 | 2268 | <h3 id=src-desc><span class=secno>4.3 </span>Font reference: the <a |
jdaggett@1662 | 2269 | href="#descdef-src">src</a> descriptor</h3> |
jdaggett@512 | 2270 | |
jdaggett@512 | 2271 | <table class=descdef> |
jdaggett@512 | 2272 | <tbody> |
jdaggett@512 | 2273 | <tr> |
jdaggett@512 | 2274 | <td>Name: |
jdaggett@512 | 2275 | |
jdaggett@1662 | 2276 | <td><dfn id=descdef-src>src</dfn> |
jdaggett@512 | 2277 | |
jdaggett@512 | 2278 | <tr> |
jdaggett@512 | 2279 | <td>Value: |
jdaggett@512 | 2280 | |
jdaggett@8225 | 2281 | <td>[ <url> [format(<string> #)]? | <a |
jdaggett@8225 | 2282 | href="#font-face-name-value"><var><font-face-name></var></a> ] # |
jdaggett@890 | 2283 | |
jdaggett@890 | 2284 | <tr> |
jdaggett@890 | 2285 | <td><em>Initial:</em> |
jdaggett@890 | 2286 | |
jdaggett@890 | 2287 | <td>N/A |
jdaggett@512 | 2288 | </table> |
jdaggett@512 | 2289 | |
jdaggett@899 | 2290 | <p>This descriptor specifies the resource containing font data. It is |
jdaggett@8311 | 2291 | required for the <a href="#at-font-face-rule"><code>@font-face</code></a> |
jdaggett@8311 | 2292 | rule to be valid. Its value is a prioritized, comma-separated list of |
jdaggett@8311 | 2293 | external references or locally-installed font face names. When a font is |
jdaggett@8311 | 2294 | needed the user agent iterates over the set of references listed, using |
jdaggett@8311 | 2295 | the first one it can successfully activate. Fonts containing invalid data |
jdaggett@8311 | 2296 | or local font faces that are not found are ignored and the user agent |
jdaggett@8311 | 2297 | loads the next font in the list. |
jdaggett@8272 | 2298 | |
jdaggett@8272 | 2299 | <p>As with other URLs in CSS, the URL may be relative, in which case it is |
jdaggett@8311 | 2300 | resolved relative to the location of the style sheet containing the <a |
jdaggett@8311 | 2301 | href="#at-font-face-rule"><code>@font-face</code></a> rule. In the case of |
jdaggett@8311 | 2302 | SVG fonts, the URL points to an element within a document containing SVG |
jdaggett@8311 | 2303 | font definitions. If the element reference is omitted, a reference to the |
jdaggett@8311 | 2304 | first defined font is implied. Similarly, font container formats that can |
jdaggett@7096 | 2305 | contain more than one font must load one and only one of the fonts for a |
jdaggett@8311 | 2306 | given <a href="#at-font-face-rule"><code>@font-face</code></a> rule. |
jdaggett@8311 | 2307 | Fragment identifiers are used to indicate which font to load. If a |
jdaggett@8311 | 2308 | container format lacks a defined fragment identifier scheme, |
jdaggett@8311 | 2309 | implementations should use a simple 1-based indexing scheme (e.g. |
jdaggett@8311 | 2310 | "font-collection#1" for the first font, "font-collection#2" for the second |
jdaggett@8311 | 2311 | font). |
jdaggett@1244 | 2312 | |
jdaggett@2527 | 2313 | <pre> |
jdaggett@2527 | 2314 | src: url(fonts/simple.ttf); /* load simple.ttf relative to stylesheet location */ |
jdaggett@2527 | 2315 | src: url(/fonts/simple.ttf); /* load simple.ttf from absolute location */ |
jdaggett@2527 | 2316 | src: url(fonts.svg#simple); /* load SVG font with id 'simple' */ |
jdaggett@2527 | 2317 | </pre> |
jdaggett@2527 | 2318 | |
jdaggett@8198 | 2319 | <p>External references consist of a URL, followed by an optional hint |
jdaggett@8198 | 2320 | describing the format of the font resource referenced by that URL. The |
jdaggett@2527 | 2321 | format hint contains a comma-separated list of format strings that denote |
jdaggett@2527 | 2322 | well-known font formats. Conformant user agents must skip downloading a |
jdaggett@2527 | 2323 | font resource if the format hints indicate only unsupported or unknown |
jdaggett@2527 | 2324 | font formats. If no format hints are supplied, the user agent should |
jdaggett@2527 | 2325 | download the font resource. |
jdaggett@2527 | 2326 | |
jdaggett@2527 | 2327 | <pre> |
jdaggett@2527 | 2328 | /* load WOFF font if possible, otherwise use OpenType font */ |
jdaggett@2527 | 2329 | @font-face { |
jdaggett@2527 | 2330 | font-family: bodytext; |
jdaggett@2527 | 2331 | src: url(ideal-sans-serif.woff) format("woff"), |
jdaggett@2527 | 2332 | url(basic-sans-serif.ttf) format("opentype"); |
jdaggett@2527 | 2333 | } |
jdaggett@2527 | 2334 | </pre> |
jdaggett@2527 | 2335 | |
jdaggett@2527 | 2336 | <p>Format strings defined by this specification: |
jdaggett@2527 | 2337 | |
jdaggett@2527 | 2338 | <table class=data id=fontformats> |
jdaggett@2527 | 2339 | <thead> |
jdaggett@2527 | 2340 | <tr> |
jdaggett@2527 | 2341 | <th>String |
jdaggett@2527 | 2342 | |
jdaggett@2527 | 2343 | <th>Font Format |
jdaggett@2527 | 2344 | |
jdaggett@2527 | 2345 | <th>Common extensions |
jdaggett@2527 | 2346 | |
jdaggett@2527 | 2347 | <tbody> |
jdaggett@2527 | 2348 | <tr> |
jdaggett@2527 | 2349 | <th>"woff" |
jdaggett@2527 | 2350 | |
jdaggett@4624 | 2351 | <td><a href="http://www.w3.org/TR/WOFF/">WOFF (Web Open Font Format)</a> |
jdaggett@2527 | 2352 | |
jdaggett@2527 | 2353 | <td>.woff |
jdaggett@2527 | 2354 | |
jdaggett@2527 | 2355 | <tr> |
jdaggett@2527 | 2356 | <th>"truetype" |
jdaggett@2527 | 2357 | |
jdaggett@4624 | 2358 | <td><a |
jdaggett@4624 | 2359 | href="http://www.microsoft.com/typography/otspec/default.htm">TrueType</a> |
jdaggett@2527 | 2360 | |
jdaggett@2527 | 2361 | <td>.ttf |
jdaggett@2527 | 2362 | |
jdaggett@2527 | 2363 | <tr> |
jdaggett@2527 | 2364 | <th>"opentype" |
jdaggett@2527 | 2365 | |
jdaggett@4624 | 2366 | <td><a |
jdaggett@4624 | 2367 | href="http://www.microsoft.com/typography/otspec/default.htm">OpenType</a> |
jdaggett@2527 | 2368 | |
jdaggett@2527 | 2369 | <td>.ttf, .otf |
jdaggett@2527 | 2370 | |
jdaggett@2527 | 2371 | <tr> |
jdaggett@2527 | 2372 | <th>"embedded-opentype" |
jdaggett@2527 | 2373 | |
jdaggett@4624 | 2374 | <td><a |
jdaggett@4624 | 2375 | href="http://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded |
jdaggett@4624 | 2376 | OpenType</a> |
jdaggett@2527 | 2377 | |
jdaggett@2527 | 2378 | <td>.eot |
jdaggett@2527 | 2379 | |
jdaggett@2527 | 2380 | <tr> |
jdaggett@2527 | 2381 | <th>"svg" |
jdaggett@2527 | 2382 | |
jdaggett@4624 | 2383 | <td><a href="http://www.w3.org/TR/SVG/fonts.html">SVG Font</a> |
jdaggett@2527 | 2384 | |
jdaggett@2527 | 2385 | <td>.svg, .svgz |
jdaggett@2527 | 2386 | </table> |
jdaggett@2527 | 2387 | |
jdaggett@2527 | 2388 | <p>Given the overlap in common usage between TrueType and OpenType, the |
jdaggett@2527 | 2389 | format hints "truetype" and "opentype" must be considered as synonymous; a |
jdaggett@2527 | 2390 | format hint of "opentype" does not imply that the font contains Postscript |
jdaggett@2527 | 2391 | CFF style glyph data or that it contains OpenType layout information (see |
jdaggett@7377 | 2392 | <a href="#platform-props-to-css">Appendix A</a> for more background on |
jdaggett@7377 | 2393 | this). |
jdaggett@2527 | 2394 | |
jdaggett@2527 | 2395 | <p>When authors would prefer to use a locally available copy of a given |
jdaggett@8198 | 2396 | font and download it if it's not, <code>local()</code> can be used. The |
jdaggett@8225 | 2397 | locally-installed <dfn |
jdaggett@8225 | 2398 | id=font-face-name-value><var><font-face-name></var></dfn> argument |
jdaggett@8272 | 2399 | to <code>local()</code> is a format-specific string that uniquely |
jdaggett@8272 | 2400 | identifies a single font face within a larger family. The syntax for a <a |
jdaggett@8225 | 2401 | href="#font-face-name-value"><var><font-face-name></var></a> is a |
jdaggett@8241 | 2402 | unique font face name enclosed by "local(" and ")". The name can |
jdaggett@8241 | 2403 | optionally be enclosed in quotes. If unquoted, the unquoted font family |
jdaggett@8241 | 2404 | name processing conventions apply; the name must be a sequence of |
jdaggett@8241 | 2405 | identifiers separated by whitespace which is converted to a string by |
jdaggett@8241 | 2406 | joining the identifiers together separated by a single space. |
jdaggett@2527 | 2407 | |
jdaggett@2527 | 2408 | <pre> |
jdaggett@2527 | 2409 | /* regular face of Gentium */ |
jdaggett@573 | 2410 | @font-face { |
jdaggett@2527 | 2411 | font-family: MyGentium; |
jdaggett@2527 | 2412 | src: local(Gentium), /* use locally available Gentium */ |
jdaggett@2527 | 2413 | url(Gentium.ttf); /* otherwise, download it */ |
jdaggett@573 | 2414 | } |
jdaggett@573 | 2415 | </pre> |
jdaggett@573 | 2416 | |
jdaggett@8241 | 2417 | <p>For OpenType and TrueType fonts, this string is used to match only the |
jdaggett@8241 | 2418 | Postscript name or the full font name in the name table of locally |
jdaggett@8241 | 2419 | available fonts. Which type of name is used varies by platform and font, |
jdaggett@8241 | 2420 | so authors should include both of these names to assure proper matching |
jdaggett@8241 | 2421 | across platforms. Platform substitutions for a given font name must not be |
jdaggett@8241 | 2422 | used. |
jdaggett@2527 | 2423 | |
jdaggett@2527 | 2424 | <pre> |
jdaggett@2527 | 2425 | /* bold face of Gentium */ |
jdaggett@2527 | 2426 | @font-face { |
jdaggett@2527 | 2427 | font-family: MyGentium; |
jdaggett@2527 | 2428 | src: local(Gentium Bold), /* full font name */ |
jdaggett@2527 | 2429 | local(Gentium-Bold), /* Postscript name */ |
jdaggett@2527 | 2430 | url(GentiumBold.ttf); /* otherwise, download it */ |
jdaggett@2527 | 2431 | font-weight: bold; |
jdaggett@2527 | 2432 | } |
jdaggett@2527 | 2433 | </pre> |
jdaggett@2527 | 2434 | |
jdaggett@8311 | 2435 | <p>Just as a <a href="#at-font-face-rule"><code>@font-face</code></a> rule |
jdaggett@8311 | 2436 | specifies the characteristics of a single font within a family, the unique |
jdaggett@8311 | 2437 | name used with <code>local()</code> specifies a single font, not an entire |
jdaggett@8311 | 2438 | font family. Defined in terms of OpenType font data, the Postscript name |
jdaggett@8311 | 2439 | is found in the font's <a |
jdaggett@2527 | 2440 | href="http://www.microsoft.com/typography/otspec/name.htm">name table</a>, |
jdaggett@2527 | 2441 | in the name record with nameID = 6 (see <a href="#OPENTYPE" |
jdaggett@2556 | 2442 | rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> for more details). The |
jdaggett@2527 | 2443 | Postscript name is the commonly used key for all fonts on OSX and for |
jdaggett@2527 | 2444 | Postscript CFF fonts under Windows. The full font name (nameID = 4) is |
jdaggett@2527 | 2445 | used as a unique key for fonts with TrueType glyphs on Windows. |
jdaggett@2527 | 2446 | |
jdaggett@2527 | 2447 | <p>For OpenType fonts with multiple localizations of the full font name, |
jdaggett@2527 | 2448 | the US English version is used (language ID = 0x409 for Windows and |
jdaggett@2527 | 2449 | language ID = 0 for Macintosh) or the first localization when a US English |
jdaggett@2527 | 2450 | full font name is not available (the OpenType specification recommends |
jdaggett@2527 | 2451 | that <a href="http://www.microsoft.com/typography/otspec/recom.htm">all |
jdaggett@2527 | 2452 | fonts minimally include US English names</a>). User agents that also match |
jdaggett@2527 | 2453 | other full font names, e.g. matching the Dutch name when the current |
jdaggett@2527 | 2454 | system locale is set to Dutch, are considered non-conformant. This is done |
jdaggett@2527 | 2455 | not to prefer English but to avoid matching inconsistencies across font |
jdaggett@2527 | 2456 | versions and OS localizations, since font style names (e.g. "Bold") are |
jdaggett@2527 | 2457 | frequently localized into many languages and the set of localizations |
jdaggett@2527 | 2458 | available varies widely across platform and font version. User agents that |
jdaggett@2527 | 2459 | match a concatenation of family name (nameID = 1) with style name (nameID |
jdaggett@2527 | 2460 | = 2) are considered non-conformant. |
jdaggett@2527 | 2461 | |
jdaggett@2527 | 2462 | <p>This also allows for referencing faces that belong to larger families |
jdaggett@2527 | 2463 | that cannot otherwise be referenced. |
jdaggett@2527 | 2464 | |
jdaggett@2527 | 2465 | <div class=example> |
jdaggett@525 | 2466 | <p>Use a local font or reference an SVG font in another document:</p> |
jdaggett@525 | 2467 | |
jdaggett@525 | 2468 | <pre> |
jdaggett@525 | 2469 | @font-face { |
jdaggett@525 | 2470 | font-family: Headline; |
jdaggett@8277 | 2471 | src: local(Futura-Medium), |
jdaggett@1148 | 2472 | url(fonts.svg#MyGeometricModern) format("svg"); |
jdaggett@525 | 2473 | } |
jdaggett@525 | 2474 | </pre> |
jdaggett@525 | 2475 | |
jdaggett@525 | 2476 | <p>Create an alias for local Japanese fonts on different platforms:</p> |
jdaggett@525 | 2477 | |
jdaggett@525 | 2478 | <pre> |
jdaggett@525 | 2479 | @font-face { |
jdaggett@2527 | 2480 | font-family: jpgothic; |
jdaggett@525 | 2481 | src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic); |
jdaggett@525 | 2482 | } |
jdaggett@525 | 2483 | </pre> |
jdaggett@525 | 2484 | |
jdaggett@525 | 2485 | <p>Reference a font face that cannot be matched within a larger family:</p> |
jdaggett@525 | 2486 | |
jdaggett@525 | 2487 | <pre> |
jdaggett@525 | 2488 | @font-face { |
jdaggett@525 | 2489 | font-family: Hoefler Text Ornaments; |
jdaggett@525 | 2490 | /* has the same font properties as Hoefler Text Regular */ |
jdaggett@8277 | 2491 | src: local(HoeflerText-Ornaments); |
jdaggett@525 | 2492 | } |
jdaggett@525 | 2493 | </pre> |
jdaggett@2527 | 2494 | |
jdaggett@8198 | 2495 | <p>Since localized fullnames never match, a document with the header style |
jdaggett@8198 | 2496 | rules below would always render using the default serif font, regardless |
jdaggett@8198 | 2497 | whether a particular system locale parameter is set to Finnish or not:</p> |
jdaggett@1662 | 2498 | |
jdaggett@1662 | 2499 | <pre> |
jdaggett@1662 | 2500 | @font-face { |
jdaggett@1662 | 2501 | font-family: SectionHeader; |
jdaggett@6653 | 2502 | src: local("Arial Lihavoitu"); /* Finnish fullname for Arial Bold, should fail */ |
jdaggett@1662 | 2503 | font-weight: bold; |
jdaggett@1662 | 2504 | } |
jdaggett@1662 | 2505 | |
jdaggett@1662 | 2506 | h2 { font-family: SectionHeader, serif; } |
jdaggett@1662 | 2507 | </pre> |
jdaggett@1662 | 2508 | |
jdaggett@8198 | 2509 | <p>A conformant user agent would never load the font ‘<code |
jdaggett@1662 | 2510 | class=css>gentium.eot</code>’ in the example below, since it is |
jdaggett@4624 | 2511 | included in the first definition of the ‘<a href="#descdef-src"><code |
jdaggett@4624 | 2512 | class=property>src</code></a>’ descriptor which is overridden by the |
jdaggett@8311 | 2513 | second definition in the same <a |
jdaggett@8311 | 2514 | href="#at-font-face-rule"><code>@font-face</code></a> rule:</p> |
jdaggett@1662 | 2515 | |
jdaggett@1662 | 2516 | <pre> |
jdaggett@1662 | 2517 | @font-face { |
jdaggett@1662 | 2518 | font-family: MainText; |
jdaggett@6653 | 2519 | src: url(gentium.eot); /* for use with older non-conformant user agents */ |
jdaggett@1662 | 2520 | src: local("Gentium"), url(gentium.ttf); /* Overrides src definition */ |
jdaggett@1662 | 2521 | } |
jdaggett@1662 | 2522 | </pre> |
jdaggett@1662 | 2523 | </div> |
jdaggett@1662 | 2524 | |
jdaggett@1662 | 2525 | <h3 id=font-prop-desc><span class=secno>4.4 </span>Font property |
jdaggett@1662 | 2526 | descriptors: the <a href="#descdef-font-style">font-style</a>, <a |
jdaggett@1662 | 2527 | href="#descdef-font-weight">font-weight</a>, <a |
jdaggett@1662 | 2528 | href="#descdef-font-stretch">font-stretch</a> descriptors</h3> |
jdaggett@518 | 2529 | |
jdaggett@518 | 2530 | <table class=descdef> |
jdaggett@518 | 2531 | <tbody> |
jdaggett@518 | 2532 | <tr> |
jdaggett@518 | 2533 | <td>Name: |
jdaggett@518 | 2534 | |
jdaggett@8278 | 2535 | <td><dfn id=descdef-font-style |
jdaggett@8278 | 2536 | title="font-style!!descriptor">font-style</dfn> |
jdaggett@518 | 2537 | |
jdaggett@518 | 2538 | <tr> |
jdaggett@518 | 2539 | <td>Value: |
jdaggett@518 | 2540 | |
jdaggett@545 | 2541 | <td>normal | italic | oblique |
jdaggett@890 | 2542 | |
jdaggett@890 | 2543 | <tr> |
jdaggett@890 | 2544 | <td><em>Initial:</em> |
jdaggett@890 | 2545 | |
jdaggett@890 | 2546 | <td>normal |
jdaggett@518 | 2547 | </table> |
jdaggett@518 | 2548 | |
jdaggett@518 | 2549 | <table class=descdef> |
jdaggett@518 | 2550 | <tbody> |
jdaggett@518 | 2551 | <tr> |
jdaggett@518 | 2552 | <td>Name: |
jdaggett@518 | 2553 | |
jdaggett@8278 | 2554 | <td><dfn id=descdef-font-weight |
jdaggett@8278 | 2555 | title="font-weight!!descriptor">font-weight</dfn> |
jdaggett@518 | 2556 | |
jdaggett@518 | 2557 | <tr> |
jdaggett@518 | 2558 | <td>Value: |
jdaggett@518 | 2559 | |
jdaggett@545 | 2560 | <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
jdaggett@890 | 2561 | |
jdaggett@890 | 2562 | <tr> |
jdaggett@890 | 2563 | <td><em>Initial:</em> |
jdaggett@890 | 2564 | |
jdaggett@890 | 2565 | <td>normal |
jdaggett@518 | 2566 | </table> |
jdaggett@518 | 2567 | |
jdaggett@518 | 2568 | <table class=descdef> |
jdaggett@518 | 2569 | <tbody> |
jdaggett@518 | 2570 | <tr> |
jdaggett@518 | 2571 | <td>Name: |
jdaggett@518 | 2572 | |
jdaggett@8278 | 2573 | <td><dfn id=descdef-font-stretch |
jdaggett@8278 | 2574 | title="font-stretch!!descriptor">font-stretch</dfn> |
jdaggett@518 | 2575 | |
jdaggett@518 | 2576 | <tr> |
jdaggett@518 | 2577 | <td>Value: |
jdaggett@518 | 2578 | |
jdaggett@545 | 2579 | <td>normal | ultra-condensed | extra-condensed | condensed | |
jdaggett@518 | 2580 | semi-condensed | semi-expanded | expanded | extra-expanded | |
jdaggett@525 | 2581 | ultra-expanded |
jdaggett@890 | 2582 | |
jdaggett@890 | 2583 | <tr> |
jdaggett@890 | 2584 | <td><em>Initial:</em> |
jdaggett@890 | 2585 | |
jdaggett@890 | 2586 | <td>normal |
jdaggett@518 | 2587 | </table> |
jdaggett@518 | 2588 | |
jdaggett@573 | 2589 | <p>These descriptors define the characteristics of a font face and are used |
jdaggett@573 | 2590 | in the process of matching styles to specific faces. For a font family |
jdaggett@8311 | 2591 | defined with several <a |
jdaggett@8311 | 2592 | href="#at-font-face-rule"><code>@font-face</code></a> rules, user agents |
jdaggett@8311 | 2593 | can either download all faces in the family or use these descriptors to |
jdaggett@8311 | 2594 | selectively download font faces that match actual styles used in document. |
jdaggett@8311 | 2595 | The values for these descriptors are the same as those for the |
jdaggett@8311 | 2596 | corresponding font properties except that relative keywords are not |
jdaggett@8311 | 2597 | allowed, ‘<a href="#bolder"><code class=property>bolder</code></a>’ |
jdaggett@8311 | 2598 | and ‘<a href="#lighter"><code class=property>lighter</code></a>’. If |
jdaggett@8311 | 2599 | these descriptors are omitted, initial values are assumed. |
jdaggett@890 | 2600 | |
jdaggett@890 | 2601 | <p>The value for these font face style attributes is used in place of the |
jdaggett@890 | 2602 | style implied by the underlying font data. This allows authors to combine |
jdaggett@890 | 2603 | faces in flexible combinations, even in situations where the original font |
jdaggett@890 | 2604 | data was arranged differently. User agents that implement synthetic |
jdaggett@8272 | 2605 | bolding and obliquing must only apply synthetic styling in cases where the |
jdaggett@8272 | 2606 | font descriptors imply this is needed, rather than based on the style |
jdaggett@890 | 2607 | attributes implied by the font data. |
jdaggett@573 | 2608 | |
jdaggett@1662 | 2609 | <h3 id=unicode-range-desc><span class=secno>4.5 </span>Character range: the |
jdaggett@1662 | 2610 | <a href="#descdef-unicode-range">unicode-range</a> descriptor</h3> |
jdaggett@518 | 2611 | |
jdaggett@518 | 2612 | <table class=descdef> |
jdaggett@518 | 2613 | <tbody> |
jdaggett@518 | 2614 | <tr> |
jdaggett@518 | 2615 | <td>Name: |
jdaggett@518 | 2616 | |
jdaggett@1662 | 2617 | <td><dfn id=descdef-unicode-range>unicode-range</dfn> |
jdaggett@518 | 2618 | |
jdaggett@518 | 2619 | <tr> |
jdaggett@518 | 2620 | <td>Value: |
jdaggett@518 | 2621 | |
jdaggett@8225 | 2622 | <td><a href="#urange-value"><var><urange></var></a> # |
jdaggett@890 | 2623 | |
jdaggett@890 | 2624 | <tr> |
jdaggett@890 | 2625 | <td><em>Initial:</em> |
jdaggett@890 | 2626 | |
jdaggett@1148 | 2627 | <td>U+0-10FFFF |
jdaggett@518 | 2628 | </table> |
jdaggett@518 | 2629 | |
jdaggett@8213 | 2630 | <p>This descriptor defines the set of Unicode codepoints that may be |
jdaggett@8213 | 2631 | supported by the font face for which it is declared. The descriptor value |
jdaggett@8225 | 2632 | is a comma-delimited list of Unicode range (<a |
jdaggett@8225 | 2633 | href="#urange-value"><var><urange></var></a>) values. The union of |
jdaggett@8225 | 2634 | these ranges defines the set of codepoints that serves as a hint for user |
jdaggett@8225 | 2635 | agents when deciding whether or not to download a font resource for a |
jdaggett@8225 | 2636 | given text run. |
jdaggett@8225 | 2637 | |
jdaggett@8225 | 2638 | <p>Each <dfn id=urange-value><var><urange></var></dfn> value is a <a |
jdaggett@8225 | 2639 | href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code |
jdaggett@8225 | 2640 | title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token made up of a |
jdaggett@8225 | 2641 | "U+" or "u+" prefix followed by a codepoint range in one of the three |
jdaggett@8241 | 2642 | forms listed below. Ranges that do not fit one of the these forms are |
jdaggett@8241 | 2643 | invalid and cause the declaration to be ignored. |
jdaggett@8241 | 2644 | |
jdaggett@8241 | 2645 | <dl> |
jdaggett@8241 | 2646 | <dt>single codepoint (e.g. U+416) |
jdaggett@8241 | 2647 | |
jdaggett@8241 | 2648 | <dd>a valid Unicode codepoint, represented as one to six hexadecimal |
jdaggett@8241 | 2649 | digits |
jdaggett@8241 | 2650 | |
jdaggett@8246 | 2651 | <dt>interval range (e.g. U+400-4ff) |
jdaggett@8241 | 2652 | |
jdaggett@8241 | 2653 | <dd>represented as two hyphen-separated valid Unicode codepoints |
jdaggett@8241 | 2654 | indicating the inclusive start and end codepoints of a range |
jdaggett@8241 | 2655 | |
jdaggett@8246 | 2656 | <dt>wildcard range (e.g. U+4??) |
jdaggett@8241 | 2657 | |
jdaggett@8241 | 2658 | <dd>defined by the set of codepoints implied when trailing ‘<code |
jdaggett@8246 | 2659 | class=css>?</code>’ characters signify any hexadeximal digit |
jdaggett@8241 | 2660 | </dl> |
jdaggett@573 | 2661 | |
jdaggett@8213 | 2662 | <p>Individual codepoints are written using hexadecimal values that |
jdaggett@8213 | 2663 | correspond to <a href="http://www.unicode.org/charts/">Unicode character |
jdaggett@8225 | 2664 | codepoints</a>. Valid Unicode codepoint values vary between 0 and 10FFFF |
jdaggett@8225 | 2665 | inclusive. Digit values of codepoints are ASCII case-insensitive. For |
jdaggett@8360 | 2666 | interval ranges, the start and end codepoints are valid Unicode values and |
jdaggett@8360 | 2667 | the end codepoint is greater than or equal to the start codepoint. |
jdaggett@8225 | 2668 | |
jdaggett@8225 | 2669 | <p>Wildcard ranges specified with ‘?’ that lack an initial digit (e.g. |
jdaggett@8225 | 2670 | "U+???") are valid and equivalent to a wildcard range with an initial zero |
jdaggett@8225 | 2671 | digit (e.g. "U+0???" = "U+0000-0FFF"). Wildcard ranges that extend beyond |
jdaggett@8225 | 2672 | the range of valid Unicode codepoints are invalid. Because of this, the |
jdaggett@8225 | 2673 | maximum number of trailing ‘<code class=css>?</code>’ wildcard |
jdaggett@8272 | 2674 | characters is five, even though the <a |
jdaggett@8225 | 2675 | href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code |
jdaggett@8225 | 2676 | title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token accepts six. |
jdaggett@8213 | 2677 | |
jdaggett@8213 | 2678 | <p>Within the comma-delimited list of Unicode ranges in a ‘<a |
jdaggett@8213 | 2679 | href="#descdef-unicode-range"><code |
jdaggett@8213 | 2680 | class=property>unicode-range</code></a>’ descriptor declaration, ranges |
jdaggett@8241 | 2681 | may overlap. The union of these ranges defines the set of codepoints for |
jdaggett@8241 | 2682 | which the corresponding font may be used. User agents must not download or |
jdaggett@8241 | 2683 | use the font for codepoints outside this set. User agents may normalize |
jdaggett@8241 | 2684 | the list of ranges into a list that is different but represents the same |
jdaggett@8241 | 2685 | set of codepoints. |
jdaggett@8213 | 2686 | |
jdaggett@8272 | 2687 | <p>The associated font might not contain glyphs for the entire set of |
jdaggett@8213 | 2688 | codepoints defined by the ‘<a href="#descdef-unicode-range"><code |
jdaggett@8213 | 2689 | class=property>unicode-range</code></a>’ descriptor. When the font is |
jdaggett@8225 | 2690 | used the effective <a href="#character-map"><em>character map</em></a> is |
jdaggett@8225 | 2691 | the intersection of the codepoints defined by ‘<a |
jdaggett@8225 | 2692 | href="#descdef-unicode-range"><code |
jdaggett@8225 | 2693 | class=property>unicode-range</code></a>’ with the font's <a |
jdaggett@8225 | 2694 | href="#character-map"><em>character map</em></a>. This allows authors to |
jdaggett@8225 | 2695 | define supported ranges in terms of broad ranges without worrying about |
jdaggett@8225 | 2696 | the precise codepoint ranges supported by the underlying font. |
jdaggett@8225 | 2697 | |
jdaggett@8225 | 2698 | <h3 id=composite-fonts><span class=secno>4.6 </span>Using character ranges |
jdaggett@8225 | 2699 | to define composite fonts</h3> |
jdaggett@8225 | 2700 | |
jdaggett@8311 | 2701 | <p>Multiple <a href="#at-font-face-rule"><code>@font-face</code></a> rules |
jdaggett@8311 | 2702 | with different unicode ranges for the same family and style descriptor |
jdaggett@8311 | 2703 | values can be used to create composite fonts that mix the glyphs from |
jdaggett@8311 | 2704 | different fonts for different scripts. This can be used to combine fonts |
jdaggett@8311 | 2705 | that only contain glyphs for a single script (e.g. Latin, Greek, Cyrillic) |
jdaggett@8311 | 2706 | or it can be used by authors as a way of segmenting a font into fonts for |
jdaggett@8311 | 2707 | commonly used characters and less frequently used characters. Since the |
jdaggett@8311 | 2708 | user agent will only pull down the fonts it needs this helps reduce page |
jdaggett@8311 | 2709 | bandwidth. |
jdaggett@8311 | 2710 | |
jdaggett@8311 | 2711 | <p>If the unicode ranges overlap for a set of <a |
jdaggett@8311 | 2712 | href="#at-font-face-rule"><code>@font-face</code></a> rules with the same |
jdaggett@8311 | 2713 | family and style descriptor values, the rules are ordered in the reverse |
jdaggett@8311 | 2714 | order they were defined; the last rule defined is the first to be checked |
jdaggett@8311 | 2715 | for a given character. |
jdaggett@890 | 2716 | |
jdaggett@890 | 2717 | <p>Example ranges for specific languages or characters: |
jdaggett@518 | 2718 | |
jdaggett@518 | 2719 | <dl> |
jdaggett@529 | 2720 | <dt>unicode-range: U+A5; |
jdaggett@529 | 2721 | |
jdaggett@1149 | 2722 | <dd>a single code point, the yen/yuan symbol |
jdaggett@529 | 2723 | |
jdaggett@1148 | 2724 | <dt>unicode-range: U+0-7F; |
jdaggett@1148 | 2725 | |
jdaggett@1148 | 2726 | <dd>code range for basic ASCII characters |
jdaggett@1148 | 2727 | |
jdaggett@529 | 2728 | <dt>unicode-range: U+590-5ff; |
jdaggett@529 | 2729 | |
jdaggett@529 | 2730 | <dd>code range for Hebrew characters |
jdaggett@529 | 2731 | |
jdaggett@529 | 2732 | <dt>unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F; |
jdaggett@529 | 2733 | |
jdaggett@529 | 2734 | <dd>code range for Japanese kanji, hiragana and katakana characters plus |
jdaggett@529 | 2735 | yen/yuan symbol |
jdaggett@518 | 2736 | </dl> |
jdaggett@518 | 2737 | |
jdaggett@529 | 2738 | <div class=example> |
jdaggett@531 | 2739 | <p>The BBC provides news services in a wide variety of languages, many |
jdaggett@8311 | 2740 | that are not well supported across all platforms. Using an <a |
jdaggett@8311 | 2741 | href="#at-font-face-rule"><code>@font-face</code></a> rule, the BBC could |
jdaggett@8311 | 2742 | provide a font for any of these languages, as it already does via a |
jdaggett@8311 | 2743 | manual font download.</p> |
jdaggett@531 | 2744 | |
jdaggett@531 | 2745 | <pre> |
jdaggett@531 | 2746 | @font-face { |
jdaggett@531 | 2747 | font-family: BBCBengali; |
jdaggett@531 | 2748 | src: url(fonts/BBCBengali.ttf) format("opentype"); |
jdaggett@531 | 2749 | unicode-range: U+00-FF, U+980-9FF; |
jdaggett@531 | 2750 | } |
jdaggett@531 | 2751 | </pre> |
jdaggett@529 | 2752 | </div> |
jdaggett@529 | 2753 | |
jdaggett@529 | 2754 | <div class=example> |
jdaggett@531 | 2755 | <p>Technical documents often require a wide range of symbols. The STIX |
jdaggett@531 | 2756 | Fonts project is one project aimed at providing fonts to support a wide |
jdaggett@531 | 2757 | range of technical typesetting in a standardized way. The example below |
jdaggett@531 | 2758 | shows the use of a font that provides glyphs for many of the mathematical |
jdaggett@531 | 2759 | and technical symbol ranges within Unicode:</p> |
jdaggett@531 | 2760 | |
jdaggett@531 | 2761 | <pre> |
jdaggett@531 | 2762 | @font-face { |
jdaggett@531 | 2763 | font-family: STIXGeneral; |
jdaggett@531 | 2764 | src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf); |
jdaggett@531 | 2765 | unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF; |
jdaggett@531 | 2766 | } |
jdaggett@531 | 2767 | </pre> |
jdaggett@529 | 2768 | </div> |
jdaggett@529 | 2769 | |
jdaggett@529 | 2770 | <div class=example> |
jdaggett@529 | 2771 | <p>This example shows how an author can override the glyphs used for Latin |
jdaggett@529 | 2772 | characters in a Japanese font with glyphs from a different font. The |
jdaggett@529 | 2773 | first rule specifies no range so it defaults to the entire range. The |
jdaggett@529 | 2774 | range specified in the second rule overlaps but takes precedence because |
jdaggett@529 | 2775 | it is defined later.</p> |
jdaggett@529 | 2776 | |
jdaggett@529 | 2777 | <pre> |
jdaggett@529 | 2778 | @font-face { |
jdaggett@529 | 2779 | font-family: JapaneseWithGentium; |
jdaggett@529 | 2780 | src: local(MSMincho); |
jdaggett@529 | 2781 | /* no range specified, defaults to entire range */ |
jdaggett@529 | 2782 | } |
jdaggett@529 | 2783 | |
jdaggett@529 | 2784 | @font-face { |
jdaggett@529 | 2785 | font-family: JapaneseWithGentium; |
jdaggett@529 | 2786 | src: url(../fonts/Gentium.ttf); |
jdaggett@529 | 2787 | unicode-range: U+0-2FF; |
jdaggett@529 | 2788 | } |
jdaggett@529 | 2789 | </pre> |
jdaggett@529 | 2790 | </div> |
jdaggett@1148 | 2791 | |
jdaggett@1148 | 2792 | <div class=example> |
jdaggett@1148 | 2793 | <p>Consider a family constructed to optimize bandwidth by separating out |
jdaggett@1148 | 2794 | Latin, Japanese and other characters into different font files:</p> |
jdaggett@1148 | 2795 | |
jdaggett@1148 | 2796 | <pre> |
jdaggett@1148 | 2797 | /* fallback font - size: 4.5MB */ |
jdaggett@1148 | 2798 | @font-face { |
jdaggett@1148 | 2799 | font-family: DroidSans; |
jdaggett@1148 | 2800 | src: url(DroidSansFallback.ttf); |
jdaggett@1148 | 2801 | /* no range specified, defaults to entire range */ |
jdaggett@1148 | 2802 | } |
jdaggett@1148 | 2803 | |
jdaggett@1148 | 2804 | /* Japanese glyphs - size: 1.2MB */ |
jdaggett@1148 | 2805 | @font-face { |
jdaggett@1148 | 2806 | font-family: DroidSans; |
jdaggett@1148 | 2807 | src: url(DroidSansJapanese.ttf); |
jdaggett@1148 | 2808 | unicode-range: U+3000-9FFF, U+ff??; |
jdaggett@1148 | 2809 | } |
jdaggett@1148 | 2810 | |
jdaggett@8277 | 2811 | /* Latin, Greek, Cyrillic along with some |
jdaggett@1148 | 2812 | punctuation and symbols - size: 190KB */ |
jdaggett@1148 | 2813 | @font-face { |
jdaggett@1148 | 2814 | font-family: DroidSans; |
jdaggett@1148 | 2815 | src: url(DroidSans.ttf); |
jdaggett@1148 | 2816 | unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300; |
jdaggett@1148 | 2817 | } |
jdaggett@1148 | 2818 | </pre> |
jdaggett@1148 | 2819 | |
jdaggett@1148 | 2820 | <p>For simple Latin text, only the font for Latin characters is |
jdaggett@1148 | 2821 | downloaded:</p> |
jdaggett@1148 | 2822 | |
jdaggett@1148 | 2823 | <pre> |
jdaggett@1148 | 2824 | body { font-family: DroidSans; } |
jdaggett@1148 | 2825 | |
jdaggett@1148 | 2826 | <p>This is that</p> |
jdaggett@1148 | 2827 | </pre> |
jdaggett@1148 | 2828 | |
jdaggett@1148 | 2829 | <p>In this case the user agent first checks the unicode-range for the font |
jdaggett@1148 | 2830 | containing Latin characters (DroidSans.ttf). Since all the characters |
jdaggett@1148 | 2831 | above are in the range U+0-5FF, the user agent downloads the font and |
jdaggett@1148 | 2832 | renders the text with that font.</p> |
jdaggett@1148 | 2833 | |
jdaggett@1148 | 2834 | <p>Next, consider text that makes use of an arrow character (⇨):</p> |
jdaggett@1148 | 2835 | |
jdaggett@1148 | 2836 | <pre> |
jdaggett@1148 | 2837 | <p>This &#x21e8; that<p> |
jdaggett@1148 | 2838 | </pre> |
jdaggett@1148 | 2839 | |
jdaggett@1148 | 2840 | <p>The user agent again first checks the unicode-range of the font |
jdaggett@1149 | 2841 | containing Latin characters. Since U+2000-2300 includes the arrow code |
jdaggett@1149 | 2842 | point (U+21E8), the user agent downloads the font. For this character |
jdaggett@1148 | 2843 | however the Latin font does not have a matching glyph, so the effective |
jdaggett@1149 | 2844 | unicode-range used for font matching excludes this code point. Next, the |
jdaggett@1148 | 2845 | user agent evaluates the Japanese font. The unicode-range for the |
jdaggett@1148 | 2846 | Japanese font, U+3000-9FFF and U+ff??, does not include U+21E8, so the |
jdaggett@1662 | 2847 | user agent does not download the Japanese font. Next the fallback font is |
jdaggett@8311 | 2848 | considered. The <a href="#at-font-face-rule"><code>@font-face</code></a> |
jdaggett@8311 | 2849 | rule for the fallback font does not define unicode-range so its value |
jdaggett@8311 | 2850 | defaults to the range of all Unicode code points. The fallback font is |
jdaggett@8311 | 2851 | downloaded and used to render the arrow character.</p> |
jdaggett@1148 | 2852 | </div> |
jdaggett@890 | 2853 | |
jdaggett@8225 | 2854 | <h3 id=font-rend-desc><span class=secno>4.7 </span>Font features: the <a |
jdaggett@1662 | 2855 | href="#descdef-font-variant">font-variant</a> and <a |
jdaggett@1662 | 2856 | href="#descdef-font-feature-settings">font-feature-settings</a> |
jdaggett@1662 | 2857 | descriptors</h3> |
jdaggett@1662 | 2858 | |
jdaggett@1662 | 2859 | <table class=descdef> |
jdaggett@1662 | 2860 | <tbody> |
jdaggett@1662 | 2861 | <tr> |
jdaggett@1662 | 2862 | <td>Name: |
jdaggett@1662 | 2863 | |
jdaggett@8278 | 2864 | <td><dfn id=descdef-font-variant |
jdaggett@8278 | 2865 | title="font-variant!!descriptor">font-variant</dfn> |
jdaggett@1662 | 2866 | |
jdaggett@1662 | 2867 | <tr> |
jdaggett@1662 | 2868 | <td>Value: |
jdaggett@1662 | 2869 | |
jdaggett@8278 | 2870 | <td><a href="#font-variant-normal-value" |
jdaggett@8278 | 2871 | title="normal!!font-variant">normal</a> | <a |
jdaggett@8278 | 2872 | href="#font-variant-none-value" title="none!!font-variant">none</a> | [ |
jdaggett@8278 | 2873 | <a href="#common-lig-values"><var><common-lig-values></var></a> |
jdaggett@8278 | 2874 | || <a |
jdaggett@8225 | 2875 | href="#discretionary-lig-values"><var><discretionary-lig-values></var></a> |
jdaggett@8225 | 2876 | || <a |
jdaggett@8225 | 2877 | href="#historical-lig-values"><var><historical-lig-values></var></a> |
jdaggett@8225 | 2878 | || <a |
jdaggett@8225 | 2879 | href="#contextual-alt-values"><var><contextual-alt-values></var></a> |
jdaggett@8225 | 2880 | || <a href="#stylistic"><var |
jdaggett@8225 | 2881 | title=stylistic>stylistic(<feature-value-name>)</var></a> || <a |
jdaggett@8225 | 2882 | href="#historical-forms"><var>historical-forms</var></a> || <a |
jdaggett@8225 | 2883 | href="#styleset"><var |
jdaggett@8225 | 2884 | title=styleset>styleset(<feature-value-name> #)</var></a> || <a |
jdaggett@8225 | 2885 | href="#character-variant"><var |
jdaggett@8225 | 2886 | title=character-variant>character-variant(<feature-value-name> |
jdaggett@8225 | 2887 | #)</var></a> || <a href="#swash"><var |
jdaggett@8225 | 2888 | title=swash>swash(<feature-value-name>)</var></a> || <a |
jdaggett@8225 | 2889 | href="#ornaments"><var |
jdaggett@8225 | 2890 | title=ornaments>ornaments(<feature-value-name>)</var></a> || <a |
jdaggett@8225 | 2891 | href="#annotation"><var |
jdaggett@8225 | 2892 | title=annotation>annotation(<feature-value-name>)</var></a> || [ |
jdaggett@8225 | 2893 | <a href="#small-caps"><i>small-caps</i></a> | <a |
jdaggett@8225 | 2894 | href="#all-small-caps"><i>all-small-caps</i></a> | <a |
jdaggett@8225 | 2895 | href="#petite-caps"><i>petite-caps</i></a> | <a |
jdaggett@8225 | 2896 | href="#all-petite-caps"><i>all-petite-caps</i></a> | <a |
jdaggett@8225 | 2897 | href="#unicase"><i>unicase</i></a> | <a |
jdaggett@8225 | 2898 | href="#titling-caps"><i>titling-caps</i></a> ] || <a |
jdaggett@8225 | 2899 | href="#numeric-figure-values"><var><numeric-figure-values></var></a> |
jdaggett@8225 | 2900 | || <a |
jdaggett@8225 | 2901 | href="#numeric-spacing-values"><var><numeric-spacing-values></var></a> |
jdaggett@8225 | 2902 | || <a |
jdaggett@8225 | 2903 | href="#numeric-fraction-values"><var><numeric-fraction-values></var></a> |
jdaggett@8225 | 2904 | || <a href="#ordinal"><i>ordinal</i></a> || <a |
jdaggett@8225 | 2905 | href="#slashed-zero"><i>slashed-zero</i></a> || <a |
jdaggett@8225 | 2906 | href="#east-asian-variant-values"><var><east-asian-variant-values></var></a> |
jdaggett@8225 | 2907 | || <a |
jdaggett@8225 | 2908 | href="#east-asian-width-values"><var><east-asian-width-values></var></a> |
jdaggett@8225 | 2909 | || <a href="#ruby"><i>ruby</i></a> ] |
jdaggett@1662 | 2910 | |
jdaggett@1662 | 2911 | <tr> |
jdaggett@1662 | 2912 | <td><em>Initial:</em> |
jdaggett@1662 | 2913 | |
jdaggett@1662 | 2914 | <td>normal |
jdaggett@1662 | 2915 | </table> |
jdaggett@1662 | 2916 | |
jdaggett@1662 | 2917 | <table class=descdef> |
jdaggett@1662 | 2918 | <tbody> |
jdaggett@1662 | 2919 | <tr> |
jdaggett@1662 | 2920 | <td>Name: |
jdaggett@1662 | 2921 | |
jdaggett@8278 | 2922 | <td><dfn id=descdef-font-feature-settings |
jdaggett@8278 | 2923 | title="font-feature-settings!!descriptor">font-feature-settings</dfn> |
jdaggett@1662 | 2924 | |
jdaggett@1662 | 2925 | <tr> |
jdaggett@1662 | 2926 | <td>Value: |
jdaggett@1662 | 2927 | |
jdaggett@8278 | 2928 | <td><a href="#font-feature-settings-normal-value" |
jdaggett@8278 | 2929 | title="normal!!font-feature-settings">normal</a> | <a |
jdaggett@8225 | 2930 | href="#feature-tag-value"><var><feature-tag-value></var></a> # |
jdaggett@1662 | 2931 | |
jdaggett@1662 | 2932 | <tr> |
jdaggett@1662 | 2933 | <td><em>Initial:</em> |
jdaggett@1662 | 2934 | |
jdaggett@1662 | 2935 | <td>normal |
jdaggett@1662 | 2936 | </table> |
jdaggett@1662 | 2937 | |
jdaggett@8213 | 2938 | <p>These descriptors define initial settings that apply when the font |
jdaggett@8311 | 2939 | defined by an <a href="#at-font-face-rule"><code>@font-face</code></a> |
jdaggett@8311 | 2940 | rule is rendered. They do not affect font selection. Values are identical |
jdaggett@8311 | 2941 | to those defined for the corresponding <a href="#propdef-font-variant" |
jdaggett@8278 | 2942 | title="font-variant!!property">‘<code |
jdaggett@8279 | 2943 | class=property>font-variant</code>’</a> and <a |
jdaggett@8279 | 2944 | href="#propdef-font-feature-settings" |
jdaggett@8279 | 2945 | title="font-feature-settings!!property">‘<code |
jdaggett@8279 | 2946 | class=property>font-feature-settings</code>’</a> properties defined |
jdaggett@8279 | 2947 | below except that the value ‘<code class=property>inherit</code>’ is |
jdaggett@8279 | 2948 | omitted. When multiple font feature descriptors or properties are used, |
jdaggett@8279 | 2949 | the cumulative effect on text rendering is detailed in the section <a |
jdaggett@8031 | 2950 | href="#font-feature-resolution">Font Feature Resolution</a> below. In |
jdaggett@8278 | 2951 | cases where specific values define synthesized fallback for certain <a |
jdaggett@8278 | 2952 | href="#propdef-font-variant" title="font-variant!!property">‘<code |
jdaggett@8278 | 2953 | class=property>font-variant</code>’</a> subproperties, the same |
jdaggett@8031 | 2954 | synthesized fallback applies when used within those values are used with |
jdaggett@8278 | 2955 | the <a href="#descdef-font-style" title="font-style!!descriptor">‘<code |
jdaggett@8031 | 2956 | class=property>font-variant</code>’</a> descriptor. |
jdaggett@1662 | 2957 | |
jdaggett@8225 | 2958 | <h3 id=font-face-loading><span class=secno>4.8 </span>Font loading |
jdaggett@2563 | 2959 | guidelines</h3> |
jdaggett@2563 | 2960 | |
jdaggett@8311 | 2961 | <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule is |
jdaggett@8311 | 2962 | designed to allow lazy loading of font resources that are only downloaded |
jdaggett@8311 | 2963 | when used within a document. A stylesheet can include <a |
jdaggett@8311 | 2964 | href="#at-font-face-rule"><code>@font-face</code></a> rules for a library |
jdaggett@8311 | 2965 | of fonts of which only a select set are used; user agents must only |
jdaggett@8311 | 2966 | download those fonts that are referred to within the style rules |
jdaggett@8311 | 2967 | applicable to a given page. User agents that download all fonts defined in |
jdaggett@8311 | 2968 | <a href="#at-font-face-rule"><code>@font-face</code></a> rules without |
jdaggett@8311 | 2969 | considering whether those fonts are in fact used within a page are |
jdaggett@8311 | 2970 | considered non-conformant. In cases where a font might be downloaded in |
jdaggett@8360 | 2971 | character fallback cases, user agents may download a font if it's |
jdaggett@8360 | 2972 | contained within the computed value of <a href="#propdef-font-family" |
jdaggett@8360 | 2973 | title="font-family!!property">‘<code |
jdaggett@8360 | 2974 | class=property>font-family</code>’</a> for a given text run. |
jdaggett@2563 | 2975 | |
jdaggett@2563 | 2976 | <pre> |
jdaggett@2563 | 2977 | @font-face { |
jdaggett@2563 | 2978 | font-family: GeometricModern; |
jdaggett@2563 | 2979 | src: url(font.ttf); |
jdaggett@2563 | 2980 | } |
jdaggett@2563 | 2981 | |
jdaggett@2563 | 2982 | p { |
jdaggett@2563 | 2983 | /* font will be downloaded for pages with p elements */ |
jdaggett@2563 | 2984 | font-family: GeometricModern, sans-serif; |
jdaggett@2563 | 2985 | } |
jdaggett@2563 | 2986 | |
jdaggett@2563 | 2987 | h2 { |
jdaggett@2563 | 2988 | /* font may be downloaded for pages with h2 elements, even if Futura is available locally */ |
jdaggett@2563 | 2989 | font-family: Futura, GeometricModern, sans-serif; |
jdaggett@2563 | 2990 | } |
jdaggett@2563 | 2991 | </pre> |
jdaggett@2563 | 2992 | |
jdaggett@2563 | 2993 | <p>In cases where textual content is loaded before downloadable fonts are |
jdaggett@2563 | 2994 | available, user agents may render text as it would be rendered if |
jdaggett@2563 | 2995 | downloadable font resources are not available or they may render text |
jdaggett@2563 | 2996 | transparently with fallback fonts to avoid a flash of text using a |
jdaggett@2563 | 2997 | fallback font. In cases where the font download fails user agents must |
jdaggett@2563 | 2998 | display text, simply leaving transparent text is considered non-conformant |
jdaggett@2563 | 2999 | behavior. Authors are advised to use fallback fonts in their font lists |
jdaggett@2563 | 3000 | that closely match the vertical metrics of the downloadable fonts to avoid |
jdaggett@2563 | 3001 | large page reflows where possible. |
jdaggett@2563 | 3002 | |
jdaggett@8225 | 3003 | <h3 id=same-origin-restriction><span class=secno>4.9 </span>Same-origin |
jdaggett@2737 | 3004 | restriction for fonts</h3> |
jdaggett@2737 | 3005 | |
jdaggett@8225 | 3006 | <h4 id=default-same-origin-restriction><span class=secno>4.9.1 |
jdaggett@2740 | 3007 | </span>Default same-origin restriction</h4> |
jdaggett@7253 | 3008 | <!-- TPAC 2011 Resolution to require same-origin restriction for loading fonts: |
jdaggett@7253 | 3009 | http://lists.w3.org/Archives/Public/www-style/2011Nov/0711.html |
jdaggett@7253 | 3010 | http://www.w3.org/2011/10/31-webapps-minutes.html#item02 |
jdaggett@7253 | 3011 | --> |
jdaggett@2740 | 3012 | |
jdaggett@2737 | 3013 | <p>User agents must implement a same-origin restriction when loading fonts |
jdaggett@8311 | 3014 | via the <a href="#at-font-face-rule"><code>@font-face</code></a> |
jdaggett@8311 | 3015 | mechanism. This restriction limits the loading of fonts for a given |
jdaggett@8311 | 3016 | document to fonts loaded from the same origin. Fonts can only be loaded |
jdaggett@8311 | 3017 | via the same host, port, and method combination as the containing |
jdaggett@8311 | 3018 | document, using the <a |
jdaggett@7179 | 3019 | href="http://www.w3.org/TR/html5/browsers.html#origin">origin matching |
jdaggett@2737 | 3020 | algorithm</a> described in the <a href="#HTML5" |
jdaggett@2737 | 3021 | rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> specification. The origin of |
jdaggett@8311 | 3022 | the stylesheet containing <a |
jdaggett@8311 | 3023 | href="#at-font-face-rule"><code>@font-face</code></a> rules is not used |
jdaggett@8311 | 3024 | when deciding whether a font is same origin or not, only the origin of the |
jdaggett@7096 | 3025 | containing document is used. The restriction applies to all font types. |
jdaggett@2737 | 3026 | |
jdaggett@2737 | 3027 | <p>Given a document located at http://example.com/page.html, fonts defined |
jdaggett@4624 | 3028 | with ‘<a href="#descdef-src"><code class=property>src</code></a>’ |
jdaggett@2737 | 3029 | definitions considered cross origin must not be loaded: |
jdaggett@2737 | 3030 | |
jdaggett@2737 | 3031 | <pre> |
jdaggett@2737 | 3032 | /* same origin (i.e. domain, protocol, port match document) */ |
jdaggett@8277 | 3033 | src: url(fonts/simple.ttf); |
jdaggett@8277 | 3034 | src: url(//fonts/simple.ttf); |
jdaggett@2737 | 3035 | |
jdaggett@2737 | 3036 | /* cross origin, different protocol */ |
jdaggett@8277 | 3037 | src: url(https://example.com/fonts/simple.ttf); |
jdaggett@2737 | 3038 | |
jdaggett@2737 | 3039 | /* cross origin, different domain */ |
jdaggett@8277 | 3040 | src: url(http://another.example.com/fonts/simple.ttf); |
jdaggett@2737 | 3041 | </pre> |
jdaggett@2737 | 3042 | |
jdaggett@8225 | 3043 | <h4 id=allowing-cross-origin-font-loading><span class=secno>4.9.2 |
jdaggett@2740 | 3044 | </span>Allowing cross-origin font loading</h4> |
jdaggett@2740 | 3045 | |
jdaggett@2737 | 3046 | <p>User agents must also implement the ability to relax this restriction |
jdaggett@2737 | 3047 | using cross-site origin controls <a href="#CORS" |
jdaggett@7253 | 3048 | rel=biblioentry>[CORS]<!--{{!CORS}}--></a> for fonts loaded via HTTP. |
jdaggett@7253 | 3049 | Sites can explicitly allow cross-site downloading of font data using the |
jdaggett@7253 | 3050 | <code>Access-Control-Allow-Origin</code> HTTP header. For other protocols, |
jdaggett@7253 | 3051 | no explicit relaxation mechanism is defined or required. |
jdaggett@7253 | 3052 | |
jdaggett@7253 | 3053 | <p>For font loads over HTTP, cross-origin requests must be made with the |
jdaggett@7253 | 3054 | following parameter settings which are used in conjunction with the <a |
jdaggett@7254 | 3055 | href="http://www.w3.org/TR/cors/#cross-origin-request-0"> <em>cross-origin |
jdaggett@7254 | 3056 | request algorithm</em></a> <a href="#CORS" |
jdaggett@7254 | 3057 | rel=biblioentry>[CORS]<!--{{!CORS}}--></a>: |
jdaggett@7253 | 3058 | |
jdaggett@7253 | 3059 | <ul> |
jdaggett@7253 | 3060 | <li><em>request URL</em> — the URL of the font resource in the <a |
jdaggett@7253 | 3061 | href="#descdef-src"><code>src</code></a> descriptor |
jdaggett@7253 | 3062 | |
jdaggett@7253 | 3063 | <li><em>request method</em> — GET |
jdaggett@7253 | 3064 | |
jdaggett@7253 | 3065 | <li><em>author request headers</em> — none |
jdaggett@7253 | 3066 | |
jdaggett@7253 | 3067 | <li><em>request entity body</em> — empty |
jdaggett@7253 | 3068 | |
jdaggett@7253 | 3069 | <li><em>source origin</em> — the origin of the page which linked to the |
jdaggett@7253 | 3070 | stylesheet |
jdaggett@7253 | 3071 | |
jdaggett@7253 | 3072 | <li><em>manual redirect flag</em> — false |
jdaggett@7253 | 3073 | |
jdaggett@7253 | 3074 | <li><em>omit credentials flag</em> — true |
jdaggett@7253 | 3075 | |
jdaggett@7253 | 3076 | <li><em>force preflight flag</em> — false |
jdaggett@7253 | 3077 | </ul> |
jdaggett@2737 | 3078 | |
jdaggett@6699 | 3079 | <h2 id=font-matching-algorithm><span class=secno>5 </span>Font Matching |
jdaggett@6699 | 3080 | Algorithm</h2> |
jdaggett@484 | 3081 | |
jdaggett@2457 | 3082 | <p>The algorithm below describes how fonts are associated with individual |
jdaggett@2457 | 3083 | runs of text. For each character in the run a font family is chosen and a |
jdaggett@2457 | 3084 | particular font face is selected containing a glyph for that character. |
jdaggett@2457 | 3085 | |
jdaggett@7309 | 3086 | <h3 id=font-family-casing><span class=secno>5.1 </span>Case sensitivity of |
jdaggett@7309 | 3087 | font family names</h3> |
jdaggett@7309 | 3088 | |
jdaggett@7309 | 3089 | <p>As part of the font matching algorithm outlined below, user agents must |
jdaggett@7309 | 3090 | match font family names used in style rules with actual font family names |
jdaggett@8311 | 3091 | contained in fonts available in a given environment or defined via <a |
jdaggett@8311 | 3092 | href="#at-font-face-rule"><code>@font-face</code></a> rules. User agents |
jdaggett@8311 | 3093 | must match these names case insensitively, using the "Default Caseless |
jdaggett@8311 | 3094 | Matching" algorithm outlined in the Unicode specification <a |
jdaggett@8311 | 3095 | href="#UNICODE6" rel=biblioentry>[UNICODE6]<!--{{!UNICODE6}}--></a>. This |
jdaggett@8311 | 3096 | algorithm is detailed in section 3.13 entitled "Default Case Algorithms". |
jdaggett@8311 | 3097 | Specifically, the algorithm must be applied without normalizing the |
jdaggett@8311 | 3098 | strings involved and without applying any language-specific tailorings. |
jdaggett@8311 | 3099 | The case folding method specified by this algorithm uses the case mappings |
jdaggett@8311 | 3100 | with status field ‘<code class=property>C</code>’ or ‘<code |
jdaggett@8311 | 3101 | class=property>F</code>’ in the CaseFolding.txt file of the Unicode |
jdaggett@8311 | 3102 | Character Database. |
jdaggett@7355 | 3103 | |
jdaggett@7355 | 3104 | <p class=note> Implementors should take care to verify that a given |
jdaggett@7355 | 3105 | caseless string comparison implementation uses this precise algorithm and |
jdaggett@7355 | 3106 | not assume that a given platform string matching routine follows it, as |
jdaggett@7355 | 3107 | many of these have locale-specific behavior or use some level of string |
jdaggett@7355 | 3108 | normalization. |
jdaggett@7355 | 3109 | |
jdaggett@7355 | 3110 | <p class=note> For authors this means that font family names are matched |
jdaggett@8272 | 3111 | case insensitively, whether those names exist in a platform font or in the |
jdaggett@8311 | 3112 | <a href="#at-font-face-rule"><code>@font-face</code></a> rules contained |
jdaggett@8311 | 3113 | in a stylesheet. Authors should take care to ensure that names use a |
jdaggett@8311 | 3114 | character sequence consistent with the actual font family name, |
jdaggett@8311 | 3115 | particularly when using combining characters such as diacritical marks. |
jdaggett@8311 | 3116 | For example, a family name that contains an uppercase A (U+0041) followed |
jdaggett@8311 | 3117 | by a combining ring (U+030A) will <strong>not</strong> match a name that |
jdaggett@8311 | 3118 | looks identical but which uses the precomposed lowercase a-ring character |
jdaggett@8311 | 3119 | (U+00E5) instead of the combining sequence. |
jdaggett@7309 | 3120 | |
jdaggett@7309 | 3121 | <h3 id=font-style-matching><span class=secno>5.2 </span>Matching font |
jdaggett@2457 | 3122 | styles</h3> |
jdaggett@2457 | 3123 | |
jdaggett@6701 | 3124 | <p>The procedure for choosing fonts consists of iterating over the font |
jdaggett@531 | 3125 | families determined by the font-family property, selecting a font face |
jdaggett@531 | 3126 | with the appropriate style based on other font properties and then |
jdaggett@7311 | 3127 | determining whether a glyph exists for a given character. This is done |
jdaggett@7311 | 3128 | using the <dfn id=character-map>character map</dfn> of the font, data |
jdaggett@7311 | 3129 | which maps characters to the default glyph for that character. Codepoint |
jdaggett@6701 | 3130 | sequences consisting of a base character followed by a sequence of |
jdaggett@6701 | 3131 | combining characters are treated slightly differently, see the section on |
jdaggett@6701 | 3132 | <a href="#cluster-matching">cluster matching</a> below. |
jdaggett@531 | 3133 | |
jdaggett@7232 | 3134 | <p>For this procedure, the <dfn id=default-face>default face</dfn> for a |
jdaggett@7232 | 3135 | given font family is defined to be the face that would be selected if all |
jdaggett@7232 | 3136 | font style properties were set to their initial value. |
jdaggett@7232 | 3137 | |
jdaggett@531 | 3138 | <ol id=fontmatchingalg> |
jdaggett@2457 | 3139 | <li>Using the computed font property values for a given element, the user |
jdaggett@2457 | 3140 | agent starts with the first family name in the fontlist specified by the |
jdaggett@8278 | 3141 | <a href="#propdef-font-family" title="font-family!!property">‘<code |
jdaggett@8278 | 3142 | class=property>font-family</code>’</a> property. |
jdaggett@2457 | 3143 | |
jdaggett@2457 | 3144 | <li>If the family name is unquoted and is a generic family name, the user |
jdaggett@2457 | 3145 | agent looks up the appropriate font family name to be used. User agents |
jdaggett@2457 | 3146 | may choose the generic font family to use based on the language of the |
jdaggett@2457 | 3147 | containing element or the Unicode range of the character. |
jdaggett@2457 | 3148 | |
jdaggett@2457 | 3149 | <li>For other family names, the user agent attempts to find the family |
jdaggett@8311 | 3150 | name among fonts defined via <a |
jdaggett@8311 | 3151 | href="#at-font-face-rule"><code>@font-face</code></a> rules and then |
jdaggett@8311 | 3152 | among available system fonts, matching names with a case-insensitive |
jdaggett@8311 | 3153 | comparison as outlined <a href="#font-family-casing">in the section |
jdaggett@8311 | 3154 | above</a>. On systems containing fonts with multiple localized font |
jdaggett@8311 | 3155 | family names, user agents must match any of these names independent of |
jdaggett@8311 | 3156 | the underlying system locale or platform API used. If the font resources |
jdaggett@8311 | 3157 | defined for a given face in an <a |
jdaggett@8311 | 3158 | href="#at-font-face-rule"><code>@font-face</code></a> rule are either not |
jdaggett@8311 | 3159 | available or contain invalid font data, then the face should be treated |
jdaggett@8311 | 3160 | as not present in the family. If no faces are present for a family |
jdaggett@8311 | 3161 | defined via <a href="#at-font-face-rule"><code>@font-face</code></a> |
jdaggett@8311 | 3162 | rules, the family should be treated as missing; matching a platform font |
jdaggett@8311 | 3163 | with the same name must not occur in this case. |
jdaggett@2457 | 3164 | |
jdaggett@2457 | 3165 | <li>If a font family match occurs, the user agent assembles the set of |
jdaggett@6701 | 3166 | font faces in that family and then narrows the set to a single face using |
jdaggett@6701 | 3167 | other font properties in the order given below: |
jdaggett@2457 | 3168 | <ol id=fontstylematchingalg> |
jdaggett@8278 | 3169 | <li><a href="#propdef-font-stretch" |
jdaggett@8278 | 3170 | title="font-stretch!!property">‘<code |
jdaggett@8278 | 3171 | class=property>font-stretch</code>’</a> is tried first. If the |
jdaggett@8278 | 3172 | matching set contains faces with width values matching the <a |
jdaggett@8278 | 3173 | href="#propdef-font-stretch" title="font-stretch!!property">‘<code |
jdaggett@8278 | 3174 | class=property>font-stretch</code>’</a> value, faces with other width |
jdaggett@4624 | 3175 | values are removed from the matching set. If there is no face that |
jdaggett@4624 | 3176 | exactly matches the width value the nearest width is used instead. If |
jdaggett@8278 | 3177 | the value of <a href="#propdef-font-stretch" |
jdaggett@8278 | 3178 | title="font-stretch!!property">‘<code |
jdaggett@8279 | 3179 | class=property>font-stretch</code>’</a> is ‘<a href="#normal"><code |
jdaggett@8279 | 3180 | class=property>normal</code></a>’ or one of the condensed values, |
jdaggett@8278 | 3181 | narrower width values are checked first, then wider values. If the |
jdaggett@8278 | 3182 | value of <a href="#propdef-font-stretch" |
jdaggett@8278 | 3183 | title="font-stretch!!property">‘<code |
jdaggett@8278 | 3184 | class=property>font-stretch</code>’</a> is one of the expanded |
jdaggett@4624 | 3185 | values, wider values are checked first, followed by narrower values. |
jdaggett@4624 | 3186 | Once the closest matching width has been determined by this process, |
jdaggett@4624 | 3187 | faces with other widths are removed from the matching set. |
jdaggett@4624 | 3188 | |
jdaggett@8278 | 3189 | <li><a href="#propdef-font-style" title="font-style!!property">‘<code |
jdaggett@8278 | 3190 | class=property>font-style</code>’</a> is tried next. If the value of |
jdaggett@8278 | 3191 | <a href="#propdef-font-style" title="font-style!!property">‘<code |
jdaggett@8278 | 3192 | class=property>font-style</code>’</a> is ‘<a href="#italic"><code |
jdaggett@8278 | 3193 | class=property>italic</code></a>’, italic faces are checked first, |
jdaggett@8278 | 3194 | then oblique, then normal faces. If the value is ‘<a |
jdaggett@8278 | 3195 | href="#oblique"><code class=property>oblique</code></a>’, oblique |
jdaggett@8278 | 3196 | faces are checked first, then italic faces and then normal faces. If |
jdaggett@8279 | 3197 | the value is ‘<a href="#normal"><code |
jdaggett@8279 | 3198 | class=property>normal</code></a>’, normal faces are checked first, |
jdaggett@8279 | 3199 | then oblique faces, then italic faces. Faces with other style values |
jdaggett@8279 | 3200 | are excluded from the matching set. User agents are permitted to |
jdaggett@8279 | 3201 | distinguish between italic and oblique faces within platform font |
jdaggett@8279 | 3202 | families but this is not required, they may treat all italic or oblique |
jdaggett@8311 | 3203 | faces as italic faces. However, within font families defined via <a |
jdaggett@8311 | 3204 | href="#at-font-face-rule"><code>@font-face</code></a> rules, italic and |
jdaggett@8311 | 3205 | oblique faces must be distinguished using the value of the <a |
jdaggett@8311 | 3206 | href="#descdef-font-style" title="font-style!!descriptor">‘<code |
jdaggett@8278 | 3207 | class=property>font-style</code>’</a> descriptor. |
jdaggett@8278 | 3208 | |
jdaggett@8278 | 3209 | <li><a href="#propdef-font-weight" |
jdaggett@8278 | 3210 | title="font-weight!!property">‘<code |
jdaggett@8278 | 3211 | class=property>font-weight</code>’</a> is matched next, it will |
jdaggett@8278 | 3212 | always reduce the matching set to a single font face. If bolder/lighter |
jdaggett@8278 | 3213 | relative weights are used, the effective weight is calculated based on |
jdaggett@8278 | 3214 | the inherited weight value, as described in the definition of the <a |
jdaggett@8278 | 3215 | href="#propdef-font-weight" title="font-weight!!property">‘<code |
jdaggett@8278 | 3216 | class=property>font-weight</code>’</a> property. Given the desired |
jdaggett@4624 | 3217 | weight and the weights of faces in the matching set after the steps |
jdaggett@4624 | 3218 | above, if the desired weight is available that face matches. Otherwise, |
jdaggett@4624 | 3219 | a weight is chosen using the rules below: |
jdaggett@531 | 3220 | <ul> |
jdaggett@531 | 3221 | <li>If the desired weight is less than 400, weights below the desired |
jdaggett@531 | 3222 | weight are checked in descending order followed by weights above the |
jdaggett@531 | 3223 | desired weight in ascending order until a match is found. |
jdaggett@531 | 3224 | |
jdaggett@531 | 3225 | <li>If the desired weight is greater than 500, weights above the |
jdaggett@531 | 3226 | desired weight are checked in ascending order followed by weights |
jdaggett@531 | 3227 | below the desired weight in descending order until a match is found. |
jdaggett@531 | 3228 | |
jdaggett@531 | 3229 | <li>If the desired weight is 400, 500 is checked first and then the |
jdaggett@531 | 3230 | rule for desired weights less than 400 is used. |
jdaggett@531 | 3231 | |
jdaggett@531 | 3232 | <li>If the desired weight is 500, 400 is checked first and then the |
jdaggett@532 | 3233 | rule for desired weights less than 400 is used. |
jdaggett@531 | 3234 | </ul> |
jdaggett@531 | 3235 | |
jdaggett@4624 | 3236 | <li><span class=property>‘<a href="#propdef-font-size"><code |
jdaggett@4624 | 3237 | class=property>font-size</code></a>’</span> must be matched within a |
jdaggett@4624 | 3238 | UA-dependent margin of tolerance. (Typically, sizes for scalable fonts |
jdaggett@4624 | 3239 | are rounded to the nearest whole pixel, while the tolerance for |
jdaggett@4624 | 3240 | bitmapped fonts could be as large as 20%.) Further computations, e.g., |
jdaggett@4624 | 3241 | by ‘<code class=property>em</code>’ values in other properties, are |
jdaggett@4624 | 3242 | based on the <span class=property>‘<a href="#propdef-font-size"><code |
jdaggett@4624 | 3243 | class=property>font-size</code></a>’</span> value that is used, not |
jdaggett@4624 | 3244 | the one that is specified. |
jdaggett@531 | 3245 | </ol> |
jdaggett@531 | 3246 | |
jdaggett@7232 | 3247 | <li> |
jdaggett@7232 | 3248 | <p>If no matching face exists or the matched face does not contain a |
jdaggett@7232 | 3249 | glyph for the character to be rendered, the next family name is selected |
jdaggett@7232 | 3250 | and the previous two steps repeated. Glyphs from other faces in the |
jdaggett@7232 | 3251 | family are not considered. The only exception is that user agents may |
jdaggett@7232 | 3252 | optionally substitute a synthetic version of the <a |
jdaggett@7232 | 3253 | href="#default-face"><em>default face</em></a> if that face supports a |
jdaggett@7232 | 3254 | given glyph (e.g. a synthetic italic version of the regular face may be |
jdaggett@7232 | 3255 | used if the italic face doesn't support glyphs for Arabic).</p> |
jdaggett@7242 | 3256 | <!-- resolution on the above: http://lists.w3.org/Archives/Public/www-style/2012Nov/0292.html --> |
jdaggett@7242 | 3257 | |
jdaggett@8311 | 3258 | <p>If the matched font is defined via an <a |
jdaggett@8311 | 3259 | href="#at-font-face-rule"><code>@font-face</code></a> rule and needs to |
jdaggett@8311 | 3260 | be downloaded, the font resource is downloaded. While the download |
jdaggett@8311 | 3261 | occurs, the user agent can either wait until the font is downloaded or |
jdaggett@8311 | 3262 | render once with substituted font metrics and render again once the font |
jdaggett@8311 | 3263 | is downloaded.</p> |
jdaggett@531 | 3264 | |
jdaggett@531 | 3265 | <li>If there are no more font families to be evaluated and no matching |
jdaggett@8363 | 3266 | face has been found, then the user agent performs a <dfn |
jdaggett@8363 | 3267 | id=system-font-fallback>system font fallback</dfn> procedure to find the |
jdaggett@8363 | 3268 | best match for the character to be rendered. The result of this procedure |
jdaggett@8363 | 3269 | may vary across user agents. |
jdaggett@531 | 3270 | |
jdaggett@531 | 3271 | <li>If a particular character cannot be displayed using any font, the user |
jdaggett@531 | 3272 | agent should indicate by some means that a character is not being |
jdaggett@2457 | 3273 | displayed, displaying either a symbolic representation of the missing |
jdaggett@2457 | 3274 | glyph (e.g. using a <a |
jdaggett@2457 | 3275 | href="http://en.wikipedia.org/wiki/Last_resort_font">Last Resort |
jdaggett@2457 | 3276 | Font</a>) or using the missing character glyph from a default font. |
jdaggett@512 | 3277 | </ol> |
jdaggett@2457 | 3278 | |
jdaggett@7309 | 3279 | <h3 id=cluster-matching><span class=secno>5.3 </span>Cluster matching</h3> |
jdaggett@6701 | 3280 | |
jdaggett@6701 | 3281 | <p>When text contains characters such as combining diacritics, ideally the |
jdaggett@6701 | 3282 | base character should be rendered using the same font as the diacritic, |
jdaggett@6701 | 3283 | this assures proper placement of the diacritic. For this reason, the font |
jdaggett@6701 | 3284 | matching algorithm for clusters is more specialized than the general case |
jdaggett@6701 | 3285 | of matching a single character by itself. For sequences containing |
jdaggett@6701 | 3286 | variation selectors, which indicate the precise glyph to be used for a |
jdaggett@8363 | 3287 | given character, user agents always attempt <a |
jdaggett@8363 | 3288 | href="#system-font-fallback"><em>system font fallback</em></a> to find the |
jdaggett@8363 | 3289 | appropriate glyph before using the default glyph of the base character. |
jdaggett@6701 | 3290 | |
jdaggett@7020 | 3291 | <p>A font is considered to <em>support</em> a given character if (1) the |
jdaggett@7311 | 3292 | character is contained in the font's <a |
jdaggett@7311 | 3293 | href="#character-map"><em>character map</em></a> and (2) if required by |
jdaggett@7020 | 3294 | the containing script, shaping information is available for that |
jdaggett@7311 | 3295 | character. Some legacy fonts may include a given character in the <a |
jdaggett@7311 | 3296 | href="#character-map"><em>character map</em></a> but lack the shaping |
jdaggett@7311 | 3297 | information (e.g. <a |
jdaggett@7020 | 3298 | href="http://www.microsoft.com/typography/otspec/ttochap1.htm">OpenType |
jdaggett@7020 | 3299 | layout tables</a> or <a |
jdaggett@7103 | 3300 | href="http://scripts.sil.org/cms/scripts/page.php?site_id=projects&item_id=graphite_techAbout">Graphite |
jdaggett@7020 | 3301 | tables</a>) necessary for correctly rendering text runs containing that |
jdaggett@7020 | 3302 | character. |
jdaggett@7020 | 3303 | |
jdaggett@6701 | 3304 | <p>A sequence of codepoints containing combining diacritics or other |
jdaggett@6701 | 3305 | modifiers is termed a grapheme cluster (see <a href="#CSS3TEXT" |
jdaggett@6701 | 3306 | rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a> for a more complete |
jdaggett@6701 | 3307 | description). For a given cluster containing a base character, <em>b</em> |
jdaggett@6701 | 3308 | and a sequence of combining characters <em>c1, c2…</em>, the entire |
jdaggett@6701 | 3309 | cluster is matched using these steps: |
jdaggett@6701 | 3310 | |
jdaggett@6701 | 3311 | <ol> |
jdaggett@6701 | 3312 | <li>For each family in the font list, a face is chosen using the style |
jdaggett@6701 | 3313 | selection rules defined in the previous section. |
jdaggett@6701 | 3314 | <ol> |
jdaggett@7020 | 3315 | <li>If all characters in the sequence <em>b + c1 + c2 …</em> are |
jdaggett@7021 | 3316 | completely supported by the font, select this font for the sequence. |
jdaggett@6701 | 3317 | |
jdaggett@6701 | 3318 | <li>If a sequence of multiple codepoints is canonically equivalent to a |
jdaggett@7021 | 3319 | single character and the font supports that character, select this font |
jdaggett@7021 | 3320 | for the sequence. |
jdaggett@6701 | 3321 | </ol> |
jdaggett@6701 | 3322 | |
jdaggett@6701 | 3323 | <li>If no font was found in the font list in step 1: |
jdaggett@6701 | 3324 | <ol> |
jdaggett@6701 | 3325 | <li>If <em>c1</em> is a variation selector, system fallback must be used |
jdaggett@6701 | 3326 | to find a font that supports the full sequence of <em>b + c1</em>. If |
jdaggett@6701 | 3327 | no font on the system supports the full sequence, match the single |
jdaggett@6701 | 3328 | character <em>b</em> using the normal procedure for matching single |
jdaggett@6701 | 3329 | characters and ignore the variation selector. Note: a sequence with |
jdaggett@6701 | 3330 | more than one variation selector is treated as an encoding error and |
jdaggett@6701 | 3331 | the trailing selectors are ignored. |
jdaggett@6701 | 3332 | |
jdaggett@6701 | 3333 | <li>Otherwise, the user agent may optionally use system font fallback to |
jdaggett@6701 | 3334 | match a font that supports the entire cluster. |
jdaggett@6701 | 3335 | </ol> |
jdaggett@6701 | 3336 | |
jdaggett@6701 | 3337 | <li>If no font is found in step 2, use the matching sequence from step 1 |
jdaggett@6701 | 3338 | to determine the longest sequence that is completely matched by a font in |
jdaggett@6701 | 3339 | the font list and attempt to match the remaining combining characters |
jdaggett@6701 | 3340 | separately using the rules for single characters. |
jdaggett@6701 | 3341 | </ol> |
jdaggett@6701 | 3342 | |
jdaggett@7309 | 3343 | <h3 id=char-handling-issues><span class=secno>5.4 </span>Character handling |
jdaggett@2457 | 3344 | issues</h3> |
jdaggett@2457 | 3345 | |
jdaggett@2461 | 3346 | <p>The procedure above is always performed on text runs containing Unicode |
jdaggett@2461 | 3347 | characters, documents using legacy encodings are assumed to have been |
jdaggett@7311 | 3348 | transcoded before matching fonts. For fonts containing <a |
jdaggett@7311 | 3349 | href="#character-map"><em title="character map">character maps</em></a> |
jdaggett@7311 | 3350 | for both legacy encodings and Unicode, the contents of the legacy encoding |
jdaggett@7311 | 3351 | <a href="#character-map"><em>character map</em></a> must have no effect on |
jdaggett@7311 | 3352 | the results of the font matching process. |
jdaggett@2461 | 3353 | |
jdaggett@2461 | 3354 | <p>The font matching process does not assume that text runs are in either |
jdaggett@2461 | 3355 | normalized or denormalized form (see <a href="#CHARMOD-NORM" |
jdaggett@3042 | 3356 | rel=biblioentry>[CHARMOD-NORM]<!--{{CHARMOD-NORM}}--></a> for more |
jdaggett@2461 | 3357 | details). Layout engines often convert base character plus combining |
jdaggett@6701 | 3358 | character sequences into precomposed characters if they exist. The font |
jdaggett@6701 | 3359 | matching algorithm outlined here supports both ways and fonts can |
jdaggett@6701 | 3360 | generally support either but variations can occur. Authors should always |
jdaggett@6701 | 3361 | tailor their choice of fonts to their content, including whether that |
jdaggett@6701 | 3362 | content contains normalized or denormalized character streams. |
jdaggett@2457 | 3363 | |
jdaggett@2457 | 3364 | <p>If a given character is a Private-Use Area Unicode codepoint and none of |
jdaggett@2457 | 3365 | the fonts in the fontlist contain a glyph for that codepoint, user agents |
jdaggett@2457 | 3366 | must display some form of missing glyph symbol for that character rather |
jdaggett@8363 | 3367 | than attempting <a href="#system-font-fallback"><em>system font |
jdaggett@8363 | 3368 | fallback</em></a> for that codepoint. When matching the replacement |
jdaggett@8363 | 3369 | character U+FFFD, user agents may skip the font matching process and |
jdaggett@8363 | 3370 | immediately display some form of missing glyph symbol, they are not |
jdaggett@8363 | 3371 | required to display the glyph from the font that would be selected by the |
jdaggett@8363 | 3372 | font matching process. |
jdaggett@2457 | 3373 | |
jdaggett@2457 | 3374 | <p>In general, the fonts for a given family will all have the same or |
jdaggett@7311 | 3375 | similar <a href="#character-map"><em title="character map">character |
jdaggett@7311 | 3376 | maps</em></a>. The process outlined here is designed to handle even font |
jdaggett@7311 | 3377 | families containing faces with widely variant <a href="#character-map"><em |
jdaggett@7311 | 3378 | title="character map">character maps</em></a>. However, authors are |
jdaggett@7311 | 3379 | cautioned that the use of such families can lead to unexpected results. |
jdaggett@2457 | 3380 | |
jdaggett@2457 | 3381 | <p>Optimizations of this process are allowed provided that an |
jdaggett@2457 | 3382 | implementation behaves as if the algorithm had been followed exactly. |
jdaggett@2457 | 3383 | Matching occurs in a well-defined order to insure that the results are as |
jdaggett@2457 | 3384 | consistent as possible across user agents, given an identical set of |
jdaggett@2509 | 3385 | available fonts and rendering technology. |
jdaggett@2509 | 3386 | |
jdaggett@7309 | 3387 | <h3 id=font-matching-changes><span class=secno>5.5 </span>Font matching |
jdaggett@2509 | 3388 | changes since CSS 2.1</h3> |
jdaggett@2509 | 3389 | |
jdaggett@2509 | 3390 | <p>The algorithm above is different from CSS 2.1 in a number of key places. |
jdaggett@2509 | 3391 | These changes were made to better reflect actual font matching behavior |
jdaggett@2509 | 3392 | across user agent implementations. |
jdaggett@2509 | 3393 | |
jdaggett@2509 | 3394 | <p>Differences compared to the font matching algorithm in CSS 2.1: |
jdaggett@2509 | 3395 | |
jdaggett@2509 | 3396 | <ul> |
jdaggett@2509 | 3397 | <li>The algorithm includes font-stretch matching. |
jdaggett@2509 | 3398 | |
jdaggett@2509 | 3399 | <li>All possible font-style matching scenarios are delineated. |
jdaggett@2509 | 3400 | |
jdaggett@2509 | 3401 | <li>Small-caps fonts are not matched as part of the font matching process, |
jdaggett@2509 | 3402 | they are now handled via font features. |
jdaggett@2509 | 3403 | |
jdaggett@2509 | 3404 | <li>Unicode variation selector matching is required. |
jdaggett@6701 | 3405 | |
jdaggett@6701 | 3406 | <li>Cluster sequences are matched as a unit. |
jdaggett@2509 | 3407 | </ul> |
jdaggett@531 | 3408 | |
jdaggett@7309 | 3409 | <h3 id=font-matching-examples><span class=secno>5.6 </span>Font matching |
jdaggett@6701 | 3410 | examples</h3> |
jdaggett@6701 | 3411 | |
jdaggett@531 | 3412 | <div class=example> |
jdaggett@531 | 3413 | <p>It's useful to note that the CSS selector syntax may be used to create |
jdaggett@531 | 3414 | language-sensitive typography. For example, some Chinese and Japanese |
jdaggett@1149 | 3415 | characters are unified to have the same Unicode code point, although the |
jdaggett@890 | 3416 | abstract glyphs are not the same in the two languages. |
jdaggett@531 | 3417 | |
jdaggett@531 | 3418 | <pre>*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif; } |
jdaggett@531 | 3419 | *:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif; } |
jdaggett@512 | 3420 | </pre> |
jdaggett@531 | 3421 | |
jdaggett@531 | 3422 | <p>This selects any element that has the given language - Japanese or |
jdaggett@890 | 3423 | Traditional Chinese - and uses the appropriate font. |
jdaggett@512 | 3424 | </div> |
jdaggett@1662 | 3425 | |
jdaggett@6699 | 3426 | <h2 id=font-rend-props><span class=secno>6 </span>Font Feature Properties</h2> |
jdaggett@1662 | 3427 | |
jdaggett@1856 | 3428 | <p>Modern font technologies support a variety of advanced typographic and |
jdaggett@1856 | 3429 | language-specific font features. Using these features, a single font can |
jdaggett@1856 | 3430 | provide glyphs for a wide range of ligatures, contextual and stylistic |
jdaggett@1856 | 3431 | alternates, tabular and old-style figures, small capitals, automatic |
jdaggett@1856 | 3432 | fractions, swashes, and alternates specific to a given language. To allow |
jdaggett@8313 | 3433 | authors control over these font capabilities, the ‘<code |
jdaggett@8313 | 3434 | class=property>font-variant</code>’ property has been expanded for CSS3. |
jdaggett@8313 | 3435 | It now functions as a shorthand for a set of properties that provide |
jdaggett@8313 | 3436 | control over stylistic font features. |
jdaggett@1856 | 3437 | |
jdaggett@1856 | 3438 | <h3 id=glyph-selection-positioning><span class=secno>6.1 </span>Glyph |
jdaggett@1856 | 3439 | selection and positioning</h3> |
jdaggett@1856 | 3440 | |
jdaggett@1856 | 3441 | <p>Simple fonts used for displaying Latin text use a very basic processing |
jdaggett@8313 | 3442 | model. Fonts contain a <a href="#character-map"><em>character map</em></a> |
jdaggett@8313 | 3443 | which maps each character to a glyph for that character. Glyphs for |
jdaggett@8313 | 3444 | subsequent characters are simply placed one after the other along a run of |
jdaggett@8313 | 3445 | text. Modern font formats such as OpenType and AAT (Apple Advanced |
jdaggett@8313 | 3446 | Typography) use a richer processing model. The glyph for a given character |
jdaggett@8313 | 3447 | can be chosen and positioned not just based on the codepoint of the |
jdaggett@8313 | 3448 | character itself, but also on adjacent characters as well as the language, |
jdaggett@8313 | 3449 | script, and features enabled for the text. Font features may be required |
jdaggett@8313 | 3450 | for specific scripts, or recommended as enabled by default or they might |
jdaggett@8313 | 3451 | be stylistic features meant to be used under author control. |
jdaggett@1856 | 3452 | |
jdaggett@1856 | 3453 | <p>For a good visual overview of these features, see the <a |
jdaggett@1856 | 3454 | href="#OPENTYPE-FONT-GUIDE" |
jdaggett@1856 | 3455 | rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>. |
jdaggett@1856 | 3456 | For a detailed description of glyph processing for OpenType fonts, see <a |
jdaggett@1856 | 3457 | href="#WINDOWS-GLYPH-PROC" |
jdaggett@1856 | 3458 | rel=biblioentry>[WINDOWS-GLYPH-PROC]<!--{{WINDOWS-GLYPH-PROC}}--></a>. |
jdaggett@1856 | 3459 | |
jdaggett@8313 | 3460 | <p>Stylistic font features can be classified into two broad categories: |
jdaggett@6177 | 3461 | ones that affect the harmonization of glyph shapes with the surrounding |
jdaggett@8313 | 3462 | context, such as kerning and ligature features, and ones such as the |
jdaggett@6177 | 3463 | small-caps, subscript/superscript and alternate features that affect shape |
jdaggett@6177 | 3464 | selection. |
jdaggett@6176 | 3465 | |
jdaggett@8313 | 3466 | <p>The subproperties of <a href="#propdef-font-variant" |
jdaggett@8313 | 3467 | title="font-variant!!property">‘<code |
jdaggett@8313 | 3468 | class=property>font-variant</code>’</a> listed below are used to control |
jdaggett@8313 | 3469 | these stylistic font features. They do not control features that are |
jdaggett@8313 | 3470 | required for displaying certain scripts, such as the OpenType features |
jdaggett@8313 | 3471 | used when displaying Arabic or Indic language text. They affect glyph |
jdaggett@8313 | 3472 | selection and positioning, but do not affect font selection as described |
jdaggett@8313 | 3473 | in the font matching section (except in cases required for compatibility |
jdaggett@8313 | 3474 | with CSS 2.1). |
jdaggett@1856 | 3475 | |
jdaggett@1856 | 3476 | <p>To assure consistent behavior across user agents, the equivalent |
jdaggett@8313 | 3477 | OpenType property settings are listed for individual properties and are |
jdaggett@8313 | 3478 | normative. When using other font formats these should be used as a |
jdaggett@8313 | 3479 | guideline to map CSS font feature property values to specific font |
jdaggett@8313 | 3480 | features. |
jdaggett@1856 | 3481 | |
jdaggett@1856 | 3482 | <h3 id=language-specific-support><span class=secno>6.2 |
jdaggett@1856 | 3483 | </span>Language-specific display</h3> |
jdaggett@1856 | 3484 | |
jdaggett@1856 | 3485 | <p>OpenType also supports language-specific glyph selection and |
jdaggett@1856 | 3486 | positioning, so that text can be displayed correctly in cases where the |
jdaggett@8313 | 3487 | language dictates a specific display behavior. Many languages share a |
jdaggett@8313 | 3488 | common script, but the shape of certain letters can vary across those |
jdaggett@8313 | 3489 | languages. For example, certain Cyrillic letters have different shapes in |
jdaggett@8313 | 3490 | Russian text than in Bulgarian. In Latin text, it's common to render "fi" |
jdaggett@8313 | 3491 | with an explicit fi-ligature that lacks a dot on the "i". However, in |
jdaggett@8313 | 3492 | languages such as Turkish which uses both a dotted-i and a dotless-i, it's |
jdaggett@8313 | 3493 | important to not use this ligature or use a specialized version that |
jdaggett@8313 | 3494 | contains a dot over the "i". The example below shows language-specific |
jdaggett@8313 | 3495 | variations based on stylistic traditions found in Spanish, Italian and |
jdaggett@8313 | 3496 | French orthography: |
jdaggett@2515 | 3497 | |
jdaggett@2515 | 3498 | <div class=featex><img alt="language specific forms, spanish" |
jdaggett@2515 | 3499 | src=locl-1.png></div> |
jdaggett@2515 | 3500 | |
jdaggett@2515 | 3501 | <div class=featex><img alt="language specific forms, italian" |
jdaggett@2515 | 3502 | src=locl-2.png></div> |
jdaggett@2515 | 3503 | |
jdaggett@2515 | 3504 | <div class=featex><img alt="language specific forms, french" |
jdaggett@2515 | 3505 | src=locl-3.png></div> |
jdaggett@1856 | 3506 | |
jdaggett@8313 | 3507 | <p>If the content language of the element is known according to the rules |
jdaggett@7355 | 3508 | of the <a |
jdaggett@7355 | 3509 | href="http://www.w3.org/TR/CSS21/conform.html#doclanguage">document |
jdaggett@7355 | 3510 | language</a>, user agents are required to infer the OpenType language |
jdaggett@7355 | 3511 | system from the content language and use that when selecting and |
jdaggett@7355 | 3512 | positioning glyphs using an OpenType font. |
jdaggett@7355 | 3513 | |
jdaggett@7355 | 3514 | <p>For OpenType fonts, in some cases it may be necessary to explicitly |
jdaggett@7355 | 3515 | declare the OpenType language to be used, for example when displaying text |
jdaggett@7355 | 3516 | in a given language that uses the typographic conventions of another |
jdaggett@7355 | 3517 | language or when the font does not explicitly support a given language but |
jdaggett@7355 | 3518 | supports a language that shares common typographic conventions. The ‘<a |
jdaggett@4624 | 3519 | href="#propdef-font-language-override"><code |
jdaggett@4624 | 3520 | class=property>font-language-override</code></a>’ property is used for |
jdaggett@8225 | 3521 | this purpose.</p> |
jdaggett@1662 | 3522 | <!-- prop: font-kerning --> |
jdaggett@1662 | 3523 | |
jdaggett@1856 | 3524 | <h3 id=font-kerning-prop><span class=secno>6.3 </span>Kerning: the <a |
jdaggett@1662 | 3525 | href="#propdef-font-kerning">font-kerning</a> property</h3> |
jdaggett@1662 | 3526 | |
jdaggett@4624 | 3527 | <table class=propdef id=namefont-kerningvalueauto-normal-noneini> |
jdaggett@1662 | 3528 | <tbody> |
jdaggett@1662 | 3529 | <tr> |
jdaggett@1662 | 3530 | <td>Name: |
jdaggett@1662 | 3531 | |
jdaggett@1662 | 3532 | <td><dfn id=propdef-font-kerning>font-kerning</dfn> |
jdaggett@1662 | 3533 | |
jdaggett@1662 | 3534 | <tr> |
jdaggett@1662 | 3535 | <td>Value: |
jdaggett@1662 | 3536 | |
jdaggett@8278 | 3537 | <td><a href="#font-kerning-auto-value" |
jdaggett@8278 | 3538 | title="auto!!font-kerning">auto</a> | <a |
jdaggett@8278 | 3539 | href="#font-kerning-normal-value" |
jdaggett@8278 | 3540 | title="normal!!font-kerning">normal</a> | <a |
jdaggett@8278 | 3541 | href="#font-kerning-none-value" title="none!!font-kerning">none</a> |
jdaggett@1662 | 3542 | |
jdaggett@1662 | 3543 | <tr> |
jdaggett@1662 | 3544 | <td>Initial: |
jdaggett@1662 | 3545 | |
jdaggett@1856 | 3546 | <td>auto |
jdaggett@1662 | 3547 | |
jdaggett@1662 | 3548 | <tr> |
jdaggett@1662 | 3549 | <td>Applies to: |
jdaggett@1662 | 3550 | |
jdaggett@1662 | 3551 | <td>all elements |
jdaggett@1662 | 3552 | |
jdaggett@1662 | 3553 | <tr> |
jdaggett@1662 | 3554 | <td>Inherited: |
jdaggett@1662 | 3555 | |
jdaggett@1662 | 3556 | <td>yes |
jdaggett@1662 | 3557 | |
jdaggett@1662 | 3558 | <tr> |
jdaggett@1662 | 3559 | <td>Percentages: |
jdaggett@1662 | 3560 | |
jdaggett@1662 | 3561 | <td>N/A |
jdaggett@1662 | 3562 | |
jdaggett@1662 | 3563 | <tr> |
jdaggett@1662 | 3564 | <td>Media: |
jdaggett@1662 | 3565 | |
jdaggett@1662 | 3566 | <td>visual |
jdaggett@1662 | 3567 | |
jdaggett@1662 | 3568 | <tr> |
jdaggett@1662 | 3569 | <td>Computed value: |
jdaggett@1662 | 3570 | |
jdaggett@1662 | 3571 | <td>as specified |
jdaggett@7377 | 3572 | |
jdaggett@7377 | 3573 | <tr> |
jdaggett@7377 | 3574 | <td>Animatable: |
jdaggett@7377 | 3575 | |
jdaggett@7377 | 3576 | <td>no |
jdaggett@1662 | 3577 | </table> |
jdaggett@1662 | 3578 | |
jdaggett@2509 | 3579 | <p>Kerning is the contextual adjustment of inter-glyph spacing. This |
jdaggett@2509 | 3580 | property controls metric kerning, kerning that utilizes adjustment data |
jdaggett@8276 | 3581 | contained in the font. |
jdaggett@8276 | 3582 | |
jdaggett@8276 | 3583 | <dl> |
jdaggett@8278 | 3584 | <dt><dfn id=font-kerning-auto-value title="auto!!font-kerning">auto</dfn> |
jdaggett@8276 | 3585 | |
jdaggett@8276 | 3586 | <dd>Specifies that kerning is applied at the discretion of the user agent |
jdaggett@8276 | 3587 | |
jdaggett@8278 | 3588 | <dt><dfn id=font-kerning-normal-value |
jdaggett@8278 | 3589 | title="normal!!font-kerning">normal</dfn> |
jdaggett@8276 | 3590 | |
jdaggett@8276 | 3591 | <dd>Specifies that kerning is applied |
jdaggett@8276 | 3592 | |
jdaggett@8278 | 3593 | <dt><dfn id=font-kerning-none-value title="none!!font-kerning">none</dfn> |
jdaggett@8276 | 3594 | |
jdaggett@8276 | 3595 | <dd>Specifies that kerning is not applied |
jdaggett@8276 | 3596 | </dl> |
jdaggett@1662 | 3597 | |
jdaggett@1662 | 3598 | <p>For fonts that do not include kerning data this property will have no |
jdaggett@1662 | 3599 | visible effect. When rendering with OpenType fonts, the <a |
jdaggett@1662 | 3600 | href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> |
jdaggett@2515 | 3601 | specification suggests that kerning be enabled by default. When kerning is |
jdaggett@6436 | 3602 | enabled, the OpenType <span class=tag>kern</span> feature is enabled (for |
jdaggett@8276 | 3603 | vertical text runs the <span class=tag>vkrn</span> feature is enabled |
jdaggett@8276 | 3604 | instead). User agents must also support fonts that only support kerning |
jdaggett@8276 | 3605 | via data contained in a <span class=tag>kern</span> font table, as |
jdaggett@8276 | 3606 | detailed in the OpenType specification. If the ‘<code |
jdaggett@8276 | 3607 | class=property>letter-spacing</code>’ property is defined, kerning |
jdaggett@8276 | 3608 | adjustments are considered part of the default spacing and letter spacing |
jdaggett@8276 | 3609 | adjustments are made after kerning has been applied. |
jdaggett@8276 | 3610 | |
jdaggett@8276 | 3611 | <p>When set to ‘<code class=property>auto</code>’, user agents can |
jdaggett@8276 | 3612 | determine whether to apply kerning or not based on a number of factors: |
jdaggett@8276 | 3613 | text size, script, or other factors that influence text processing speed. |
jdaggett@8279 | 3614 | Authors who want proper kerning should use ‘<a href="#normal"><code |
jdaggett@8279 | 3615 | class=property>normal</code></a>’ to explicitly enable kerning. |
jdaggett@8279 | 3616 | Likewise, some authors may prefer to disable kerning in situations where |
jdaggett@8279 | 3617 | performance is more important than precise appearance. However, in |
jdaggett@8279 | 3618 | well-designed modern implementations the use of kerning generally does not |
jdaggett@8279 | 3619 | have a large impact on text rendering speed.</p> |
jdaggett@6176 | 3620 | <!-- prop: font-variant-ligatures --> |
jdaggett@6176 | 3621 | |
jdaggett@6176 | 3622 | <h3 id=font-variant-ligatures-prop><span class=secno>6.4 </span>Ligatures: |
jdaggett@6176 | 3623 | the <a href="#propdef-font-variant-ligatures">font-variant-ligatures</a> |
jdaggett@6176 | 3624 | property</h3> |
jdaggett@6176 | 3625 | |
jdaggett@6436 | 3626 | <table class=propdef id=namefont-variant-ligaturesvaluenormal-no> |
jdaggett@6176 | 3627 | <tbody> |
jdaggett@6176 | 3628 | <tr> |
jdaggett@6176 | 3629 | <td>Name: |
jdaggett@6176 | 3630 | |
jdaggett@6176 | 3631 | <td><dfn id=propdef-font-variant-ligatures>font-variant-ligatures</dfn> |
jdaggett@6176 | 3632 | |
jdaggett@6176 | 3633 | <tr> |
jdaggett@6176 | 3634 | <td>Value: |
jdaggett@6176 | 3635 | |
jdaggett@8278 | 3636 | <td><a href="#font-variant-ligatures-normal-value" |
jdaggett@8278 | 3637 | title="normal!!font-variant-ligatures">normal</a> | <a |
jdaggett@8278 | 3638 | href="#font-variant-ligatures-none-value" |
jdaggett@8278 | 3639 | title="none!!font-variant-ligatures">none</a> | [ <a |
jdaggett@8225 | 3640 | href="#common-lig-values"><var><common-lig-values></var></a> || |
jdaggett@8225 | 3641 | <a |
jdaggett@8225 | 3642 | href="#discretionary-lig-values"><var><discretionary-lig-values></var></a> |
jdaggett@8225 | 3643 | || <a |
jdaggett@8225 | 3644 | href="#historical-lig-values"><var><historical-lig-values></var></a> |
jdaggett@8225 | 3645 | || <a |
jdaggett@8225 | 3646 | href="#contextual-alt-values"><var><contextual-alt-values></var></a> |
jdaggett@8225 | 3647 | ] |
jdaggett@6176 | 3648 | |
jdaggett@6176 | 3649 | <tr> |
jdaggett@6176 | 3650 | <td>Initial: |
jdaggett@6176 | 3651 | |
jdaggett@6176 | 3652 | <td>normal |
jdaggett@6176 | 3653 | |
jdaggett@6176 | 3654 | <tr> |
jdaggett@6176 | 3655 | <td>Applies to: |
jdaggett@6176 | 3656 | |
jdaggett@6176 | 3657 | <td>all elements |
jdaggett@6176 | 3658 | |
jdaggett@6176 | 3659 | <tr> |
jdaggett@6176 | 3660 | <td>Inherited: |
jdaggett@6176 | 3661 | |
jdaggett@6176 | 3662 | <td>yes |
jdaggett@6176 | 3663 | |
jdaggett@6176 | 3664 | <tr> |
jdaggett@6176 | 3665 | <td>Percentages: |
jdaggett@6176 | 3666 | |
jdaggett@6176 | 3667 | <td>N/A |
jdaggett@6176 | 3668 | |
jdaggett@6176 | 3669 | <tr> |
jdaggett@6176 | 3670 | <td>Media: |
jdaggett@6176 | 3671 | |
jdaggett@6176 | 3672 | <td>visual |
jdaggett@6176 | 3673 | |
jdaggett@6176 | 3674 | <tr> |
jdaggett@6176 | 3675 | <td>Computed value: |
jdaggett@6176 | 3676 | |
jdaggett@6176 | 3677 | <td>as specified |
jdaggett@7377 | 3678 | |
jdaggett@7377 | 3679 | <tr> |
jdaggett@7377 | 3680 | <td>Animatable: |
jdaggett@7377 | 3681 | |
jdaggett@7377 | 3682 | <td>no |
jdaggett@6176 | 3683 | </table> |
jdaggett@6176 | 3684 | |
jdaggett@6436 | 3685 | <p>Ligatures and contextual forms are ways of combining glyphs to produce |
jdaggett@8276 | 3686 | more harmonized forms. |
jdaggett@6176 | 3687 | |
jdaggett@6176 | 3688 | <pre |
jdaggett@8225 | 3689 | class=prod><dfn id=common-lig-values><var><common-lig-values></var></dfn> = [ <a href="#common-ligatures">common-ligatures</a> | <a href="#no-common-ligatures">no-common-ligatures</a> ]</pre> |
jdaggett@6176 | 3690 | |
jdaggett@6176 | 3691 | <pre |
jdaggett@8225 | 3692 | class=prod><dfn id=discretionary-lig-values><var><discretionary-lig-values></var></dfn> = [ <a href="#discretionary-ligatures">discretionary-ligatures</a> | <a href="#no-discretionary-ligatures">no-discretionary-ligatures</a> ]</pre> |
jdaggett@6176 | 3693 | |
jdaggett@6176 | 3694 | <pre |
jdaggett@8225 | 3695 | class=prod><dfn id=historical-lig-values><var><historical-lig-values></var></dfn> = [ <a href="#historical-ligatures">historical-ligatures</a> | <a href="#no-historical-ligatures">no-historical-ligatures</a> ]</pre> |
jdaggett@6176 | 3696 | |
jdaggett@6176 | 3697 | <pre |
jdaggett@8225 | 3698 | class=prod><dfn id=contextual-alt-values><var><contextual-alt-values></var></dfn> = [ <a href="#contextual">contextual</a> | <a href="#no-contextual">no-contextual</a> ]</pre> |
jdaggett@6176 | 3699 | |
jdaggett@6176 | 3700 | <p>Individual values have the following meanings: |
jdaggett@6176 | 3701 | |
jdaggett@6176 | 3702 | <dl> |
jdaggett@8278 | 3703 | <dt><dfn id=font-variant-ligatures-normal-value |
jdaggett@8278 | 3704 | title="normal!!font-variant-ligatures">normal</dfn> |
jdaggett@8278 | 3705 | |
jdaggett@8279 | 3706 | <dd>A value of ‘<a href="#normal"><code |
jdaggett@8279 | 3707 | class=property>normal</code></a>’ specifies that common default |
jdaggett@8279 | 3708 | features are enabled, <a href="#font-feature-resolution">as described in |
jdaggett@8279 | 3709 | detail in the next section</a>. For OpenType fonts, common ligatures and |
jdaggett@8279 | 3710 | contextual forms are on by default, discretionary and historical |
jdaggett@8279 | 3711 | ligatures are not. |
jdaggett@8278 | 3712 | |
jdaggett@8278 | 3713 | <dt><dfn id=font-variant-ligatures-none-value |
jdaggett@8278 | 3714 | title="none!!font-variant-ligatures">none</dfn> |
jdaggett@8276 | 3715 | |
jdaggett@8276 | 3716 | <dd>Specifies that all types of ligatures and contextual forms covered by |
jdaggett@8276 | 3717 | this property are explicitly disabled. In situations where ligatures are |
jdaggett@8276 | 3718 | not considered necessary, this may improve the speed of text rendering. |
jdaggett@8276 | 3719 | |
jdaggett@6176 | 3720 | <dt><dfn id=common-ligatures>common-ligatures</dfn> |
jdaggett@6176 | 3721 | |
jdaggett@6436 | 3722 | <dd>Enables display of common ligatures (OpenType features: <span |
jdaggett@6436 | 3723 | class=tag>liga, clig</span>). For OpenType fonts, common ligatures are |
jdaggett@6436 | 3724 | enabled by default. |
jdaggett@6176 | 3725 | </dl> |
jdaggett@6176 | 3726 | |
jdaggett@6176 | 3727 | <div class=featex><img alt="common ligature example" src=liga.png></div> |
jdaggett@6176 | 3728 | |
jdaggett@6176 | 3729 | <dl> |
jdaggett@6176 | 3730 | <dt><dfn id=no-common-ligatures>no-common-ligatures</dfn> |
jdaggett@6176 | 3731 | |
jdaggett@6436 | 3732 | <dd>Disables display of common ligatures (OpenType features: <span |
jdaggett@6436 | 3733 | class=tag>liga, clig</span>). |
jdaggett@6176 | 3734 | |
jdaggett@6176 | 3735 | <dt><dfn id=discretionary-ligatures>discretionary-ligatures</dfn> |
jdaggett@6176 | 3736 | |
jdaggett@6436 | 3737 | <dd>Enables display of discretionary ligatures (OpenType feature: <span |
jdaggett@8277 | 3738 | class=tag>dlig</span>). Which ligatures are discretionary or optional is |
jdaggett@8277 | 3739 | decided by the type designer, so authors will need to refer to the |
jdaggett@6176 | 3740 | documentation of a given font to understand which ligatures are |
jdaggett@6176 | 3741 | considered discretionary. |
jdaggett@6176 | 3742 | </dl> |
jdaggett@6176 | 3743 | |
jdaggett@6176 | 3744 | <div class=featex><img alt="discretionary ligature example" src=dlig.png></div> |
jdaggett@6176 | 3745 | |
jdaggett@6176 | 3746 | <dl> |
jdaggett@6176 | 3747 | <dt><dfn id=no-discretionary-ligatures>no-discretionary-ligatures</dfn> |
jdaggett@6176 | 3748 | |
jdaggett@6436 | 3749 | <dd>Disables display of discretionary ligatures (OpenType feature: <span |
jdaggett@6436 | 3750 | class=tag>dlig</span>). |
jdaggett@6176 | 3751 | |
jdaggett@6176 | 3752 | <dt><dfn id=historical-ligatures>historical-ligatures</dfn> |
jdaggett@6176 | 3753 | |
jdaggett@6436 | 3754 | <dd>Enables display of historical ligatures (OpenType feature: <span |
jdaggett@6436 | 3755 | class=tag>hlig</span>). |
jdaggett@6176 | 3756 | </dl> |
jdaggett@6176 | 3757 | |
jdaggett@6176 | 3758 | <div class=featex><img alt="historical ligature example" src=hlig.png></div> |
jdaggett@6176 | 3759 | |
jdaggett@6176 | 3760 | <dl> |
jdaggett@6176 | 3761 | <dt><dfn id=no-historical-ligatures>no-historical-ligatures</dfn> |
jdaggett@6176 | 3762 | |
jdaggett@6436 | 3763 | <dd>Disables display of historical ligatures (OpenType feature: <span |
jdaggett@6436 | 3764 | class=tag>hlig</span>). |
jdaggett@6176 | 3765 | |
jdaggett@6176 | 3766 | <dt><dfn id=contextual>contextual</dfn> |
jdaggett@6176 | 3767 | |
jdaggett@6436 | 3768 | <dd>Enables display of contextual alternates (OpenType feature: <span |
jdaggett@6436 | 3769 | class=tag>calt</span>). Although not strictly a ligature feature, like |
jdaggett@6176 | 3770 | ligatures this feature is commonly used to harmonize the shapes of glyphs |
jdaggett@6436 | 3771 | with the surrounding context. For OpenType fonts, this feature is on by |
jdaggett@6436 | 3772 | default. |
jdaggett@6176 | 3773 | </dl> |
jdaggett@6176 | 3774 | |
jdaggett@6176 | 3775 | <div class=featex><img alt="contextual alternate example" src=calt.png></div> |
jdaggett@6176 | 3776 | |
jdaggett@6176 | 3777 | <dl> |
jdaggett@6176 | 3778 | <dt><dfn id=no-contextual>no-contextual</dfn> |
jdaggett@6176 | 3779 | |
jdaggett@6436 | 3780 | <dd>Disables display of contextual alternates (OpenType feature: <span |
jdaggett@6436 | 3781 | class=tag>calt</span>). |
jdaggett@6176 | 3782 | </dl> |
jdaggett@6176 | 3783 | |
jdaggett@6176 | 3784 | <p>Required ligatures, needed for correctly rendering complex scripts, are |
jdaggett@8278 | 3785 | not affected by the settings above, including ‘<code |
jdaggett@8278 | 3786 | class=property>none</code>’ (OpenType feature: <span |
jdaggett@6436 | 3787 | class=tag>rlig</span>).</p> |
jdaggett@3460 | 3788 | <!-- prop: font-variant-position --> |
jdaggett@3460 | 3789 | |
jdaggett@6176 | 3790 | <h3 id=font-variant-position-prop><span class=secno>6.5 </span>Subscript |
jdaggett@3638 | 3791 | and superscript forms: the <a |
jdaggett@3460 | 3792 | href="#propdef-font-variant-position">font-variant-position</a> property</h3> |
jdaggett@3460 | 3793 | |
jdaggett@4624 | 3794 | <table class=propdef id=namefont-variant-positionvaluenormal-sub> |
jdaggett@1662 | 3795 | <tbody> |
jdaggett@1662 | 3796 | <tr> |
jdaggett@1662 | 3797 | <td>Name: |
jdaggett@1662 | 3798 | |
jdaggett@3460 | 3799 | <td><dfn id=propdef-font-variant-position>font-variant-position</dfn> |
jdaggett@1662 | 3800 | |
jdaggett@1662 | 3801 | <tr> |
jdaggett@1662 | 3802 | <td>Value: |
jdaggett@1662 | 3803 | |
jdaggett@8279 | 3804 | <td><span title="normal!!font-variant-position">normal</span> | <a |
jdaggett@8279 | 3805 | href="#sub">sub</a> | <a href="#super">super</a> |
jdaggett@1732 | 3806 | |
jdaggett@1732 | 3807 | <tr> |
jdaggett@1732 | 3808 | <td>Initial: |
jdaggett@1732 | 3809 | |
jdaggett@1732 | 3810 | <td>normal |
jdaggett@1732 | 3811 | |
jdaggett@1732 | 3812 | <tr> |
jdaggett@1732 | 3813 | <td>Applies to: |
jdaggett@1732 | 3814 | |
jdaggett@1732 | 3815 | <td>all elements |
jdaggett@1732 | 3816 | |
jdaggett@1732 | 3817 | <tr> |
jdaggett@1732 | 3818 | <td>Inherited: |
jdaggett@1732 | 3819 | |
jdaggett@1732 | 3820 | <td>yes |
jdaggett@1732 | 3821 | |
jdaggett@1732 | 3822 | <tr> |
jdaggett@1732 | 3823 | <td>Percentages: |
jdaggett@1732 | 3824 | |
jdaggett@1732 | 3825 | <td>N/A |
jdaggett@1732 | 3826 | |
jdaggett@1732 | 3827 | <tr> |
jdaggett@1732 | 3828 | <td>Media: |
jdaggett@1732 | 3829 | |
jdaggett@1732 | 3830 | <td>visual |
jdaggett@1732 | 3831 | |
jdaggett@1732 | 3832 | <tr> |
jdaggett@1732 | 3833 | <td>Computed value: |
jdaggett@1732 | 3834 | |
jdaggett@1732 | 3835 | <td>as specified |
jdaggett@7377 | 3836 | |
jdaggett@7377 | 3837 | <tr> |
jdaggett@7377 | 3838 | <td>Animatable: |
jdaggett@7377 | 3839 | |
jdaggett@7377 | 3840 | <td>no |
jdaggett@1732 | 3841 | </table> |
jdaggett@1732 | 3842 | |
jdaggett@5890 | 3843 | <p>This property is used to enable typographic subscript and superscript |
jdaggett@5890 | 3844 | glyphs. These are alternate glyphs designed within the same em-box as |
jdaggett@5890 | 3845 | default glyphs and are intended to be laid out on the same baseline as the |
jdaggett@5890 | 3846 | default glyphs, with no resizing or repositioning of the baseline. They |
jdaggett@5890 | 3847 | are explicitly designed to match the surrounding text and to be more |
jdaggett@5890 | 3848 | readable without affecting the line height. |
jdaggett@3511 | 3849 | |
jdaggett@3511 | 3850 | <div class=figure><img alt="comparison between real subscript glyphs and |
jdaggett@3511 | 3851 | synthesized ones" src=realsubscripts.png> |
jdaggett@3511 | 3852 | <p class=caption>Subscript glyphs (top) vs. typical synthesized subscripts |
jdaggett@3511 | 3853 | (bottom) |
jdaggett@3511 | 3854 | </div> |
jdaggett@3460 | 3855 | |
jdaggett@8279 | 3856 | <p>Individual values have the following meanings: |
jdaggett@8279 | 3857 | |
jdaggett@8279 | 3858 | <dl> |
jdaggett@8279 | 3859 | <dt><dfn id=normal>normal</dfn> |
jdaggett@8279 | 3860 | |
jdaggett@8279 | 3861 | <dd>None of the features listed below are enabled. |
jdaggett@8279 | 3862 | |
jdaggett@8279 | 3863 | <dt><dfn id=sub>sub</dfn> |
jdaggett@8279 | 3864 | |
jdaggett@8279 | 3865 | <dd>Enables display of subscript variants (OpenType feature: <span |
jdaggett@8279 | 3866 | class=tag>subs</span>). |
jdaggett@8279 | 3867 | |
jdaggett@8279 | 3868 | <dt><dfn id=super>super</dfn> |
jdaggett@8279 | 3869 | |
jdaggett@8279 | 3870 | <dd>Enables display of superscript variants (OpenType feature: <span |
jdaggett@8279 | 3871 | class=tag>sups</span>). |
jdaggett@8279 | 3872 | </dl> |
jdaggett@5890 | 3873 | |
jdaggett@5890 | 3874 | <p>Because of the semantic nature of subscripts and superscripts, when the |
jdaggett@8279 | 3875 | value is either ‘<a href="#sub"><code class=property>sub</code></a>’ |
jdaggett@8279 | 3876 | or ‘<a href="#super"><code class=property>super</code></a>’ for a |
jdaggett@8279 | 3877 | given contiguous run of text, if a variant glyph is not available for all |
jdaggett@8279 | 3878 | the characters in the run, simulated glyphs must be synthesized for all |
jdaggett@8279 | 3879 | characters using reduced forms of the glyphs that would be used without |
jdaggett@8280 | 3880 | this feature applied. This is done per run to avoid a mixture of variant |
jdaggett@8280 | 3881 | glyphs and synthesized ones that would not align correctly. In the case of |
jdaggett@8280 | 3882 | OpenType fonts that lack subscript or superscript glyphs for a given |
jdaggett@8280 | 3883 | character, user agents must use the appropriate subscript and superscript |
jdaggett@8280 | 3884 | metrics specified in the selected font's <a |
jdaggett@3460 | 3885 | href="http://www.microsoft.com/typography/otspec/os2.htm#subxs">OS/2 |
jdaggett@3460 | 3886 | table</a> <a href="#OPENTYPE" |
jdaggett@5891 | 3887 | rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> to calculate the size |
jdaggett@5891 | 3888 | and offset of the synthesized substitutes. |
jdaggett@2461 | 3889 | |
jdaggett@8280 | 3890 | <div class=figure><img alt="alternate superscripts vs. glyphs synthesized |
jdaggett@8280 | 3891 | using superscript metrics" src=superscript-alt-synth.png> |
jdaggett@8280 | 3892 | <p class=caption>Superscript alternate glyph (left), synthesized |
jdaggett@8280 | 3893 | superscript glyphs (middle), and incorrect mixture of the two (right) |
jdaggett@8280 | 3894 | </div> |
jdaggett@8280 | 3895 | |
jdaggett@2461 | 3896 | <p>In the past, user agents have used font-size and vertical-align to |
jdaggett@8279 | 3897 | simulate subscripts and superscripts for the <a class=tag |
jdaggett@8279 | 3898 | href="#sub">sub</a> and <span class=tag>sup</span> elements. To allow a |
jdaggett@8279 | 3899 | backwards compatible way of defining subscripts and superscripts, it is |
jdaggett@8279 | 3900 | recommended that authors use conditional rules <a href="#CSS3-CONDITIONAL" |
jdaggett@3460 | 3901 | rel=biblioentry>[CSS3-CONDITIONAL]<!--{{CSS3-CONDITIONAL}}--></a> so that |
jdaggett@5890 | 3902 | older user agents will still render subscripts and superscripts via the |
jdaggett@5890 | 3903 | older mechanism. |
jdaggett@5890 | 3904 | |
jdaggett@5890 | 3905 | <p>Authors should note that fonts typically only provide subscript and |
jdaggett@5890 | 3906 | superscript glyphs for a subset of all characters supported by the font. |
jdaggett@8280 | 3907 | For example, while subscript and superscript glyphs are often available |
jdaggett@8280 | 3908 | for Latin numbers, glyphs for punctuation and letter characters are less |
jdaggett@8280 | 3909 | frequently provided. The synthetic fallback rules defined for this |
jdaggett@8280 | 3910 | property assure that subscripts and superscripts will always appear but |
jdaggett@8280 | 3911 | the appearance may not match author expectations if the font used does not |
jdaggett@8280 | 3912 | provide the appropriate alternate glyph for all characters contained in a |
jdaggett@8280 | 3913 | subscript or superscript. |
jdaggett@8280 | 3914 | |
jdaggett@8280 | 3915 | <p>This property is not cumulative. Applying it to elements within a |
jdaggett@5890 | 3916 | subscript or superscript won't nest the placement of a subscript or |
jdaggett@5890 | 3917 | superscript glyph. Images contained within text runs where the value of |
jdaggett@8279 | 3918 | this property is ‘<a href="#sub"><code class=property>sub</code></a>’ |
jdaggett@8279 | 3919 | or ‘<a href="#super"><code class=property>super</code></a>’ will be |
jdaggett@8279 | 3920 | drawn just as they would if the value was ‘<a href="#normal"><code |
jdaggett@8364 | 3921 | class=property>normal</code></a>’. The variant glyphs are laid out just |
jdaggett@8364 | 3922 | as default glyphs are. There is no shift in the placement along the |
jdaggett@8364 | 3923 | baseline, so the use of these glyphs doesn't affect the linebox height.</p> |
jdaggett@8364 | 3924 | <!-- due to lack of consensus, couldn't resolve on exact positioning of text decorations: |
jdaggett@8364 | 3925 | http://www.w3.org/2013/06/06-css-minutes.html#item03 --> |
jdaggett@8280 | 3926 | |
jdaggett@8280 | 3927 | <p>Because of these limitations, ‘<a |
jdaggett@8280 | 3928 | href="#propdef-font-variant-position"><code |
jdaggett@8280 | 3929 | class=property>font-variant-position</code></a>’ is not recommended for |
jdaggett@8280 | 3930 | use in user agent stylesheets. Authors should use it in cases where |
jdaggett@5890 | 3931 | subscripts or superscripts will only contain the narrow range of |
jdaggett@5890 | 3932 | characters supported by the fonts specified. |
jdaggett@2509 | 3933 | |
jdaggett@2461 | 3934 | <div class=example> |
jdaggett@8279 | 3935 | <p>A typical user agent default style for the <a class=tag |
jdaggett@8279 | 3936 | href="#sub">sub</a> element:</p> |
jdaggett@2461 | 3937 | |
jdaggett@2461 | 3938 | <pre>sub { |
jdaggett@2461 | 3939 | vertical-align: sub; |
jdaggett@2461 | 3940 | font-size: smaller; |
jdaggett@2461 | 3941 | line-height: normal; |
jdaggett@2461 | 3942 | } |
jdaggett@2461 | 3943 | </pre> |
jdaggett@2461 | 3944 | |
jdaggett@3460 | 3945 | <p>Using font-variant-position to specify typographic subscripts in a way |
jdaggett@3460 | 3946 | that will still show subscripts in older user agents:</p> |
jdaggett@3460 | 3947 | |
jdaggett@3460 | 3948 | <pre>@supports ( font-variant-position: sub ) { |
jdaggett@3460 | 3949 | |
jdaggett@3460 | 3950 | sub { |
jdaggett@8280 | 3951 | vertical-align: baseline; |
jdaggett@3460 | 3952 | font-size: 100%; |
jdaggett@3460 | 3953 | line-height: inherit; |
jdaggett@3460 | 3954 | font-variant-position: sub; |
jdaggett@3460 | 3955 | } |
jdaggett@3460 | 3956 | |
jdaggett@2461 | 3957 | } |
jdaggett@2461 | 3958 | </pre> |
jdaggett@2461 | 3959 | |
jdaggett@4624 | 3960 | <p>User agents that support the ‘<a |
jdaggett@4624 | 3961 | href="#propdef-font-variant-position"><code |
jdaggett@4624 | 3962 | class=property>font-variant-position</code></a>’ property will select a |
jdaggett@4624 | 3963 | subscript variant glyph and render this without adjusting the baseline or |
jdaggett@4624 | 3964 | font-size. Older user agents will ignore the ‘<a |
jdaggett@4624 | 3965 | href="#propdef-font-variant-position"><code |
jdaggett@4624 | 3966 | class=property>font-variant-position</code></a>’ property definition |
jdaggett@4624 | 3967 | and use the standard defaults for subscripts.</p> |
jdaggett@2461 | 3968 | </div> |
jdaggett@2118 | 3969 | <!-- prop: font-variant-caps --> |
jdaggett@2118 | 3970 | |
jdaggett@2118 | 3971 | <h3 id=font-variant-caps-prop><span class=secno>6.6 </span>Capitalization: |
jdaggett@1662 | 3972 | the <a href="#propdef-font-variant-caps">font-variant-caps</a> property</h3> |
jdaggett@1662 | 3973 | |
jdaggett@5809 | 3974 | <table class=propdef id=namefont-variant-capsvaluenormal-small-c> |
jdaggett@1662 | 3975 | <tbody> |
jdaggett@1662 | 3976 | <tr> |
jdaggett@1662 | 3977 | <td>Name: |
jdaggett@1662 | 3978 | |
jdaggett@1662 | 3979 | <td><dfn id=propdef-font-variant-caps>font-variant-caps</dfn> |
jdaggett@1662 | 3980 | |
jdaggett@1662 | 3981 | <tr> |
jdaggett@1662 | 3982 | <td>Value: |
jdaggett@1662 | 3983 | |
jdaggett@8278 | 3984 | <td><a href="#font-variant-caps-normal-value" |
jdaggett@8278 | 3985 | title="normal!!font-variant-caps">normal</a> | <a |
jdaggett@8278 | 3986 | href="#small-caps">small-caps</a> | <a |
jdaggett@8278 | 3987 | href="#all-small-caps">all-small-caps</a> | <a |
jdaggett@8278 | 3988 | href="#petite-caps">petite-caps</a> | <a |
jdaggett@8278 | 3989 | href="#all-petite-caps">all-petite-caps</a> | <a |
jdaggett@8278 | 3990 | href="#unicase">unicase</a> | <a href="#titling-caps">titling-caps</a> |
jdaggett@1662 | 3991 | |
jdaggett@1662 | 3992 | <tr> |
jdaggett@1662 | 3993 | <td>Initial: |
jdaggett@1662 | 3994 | |
jdaggett@1662 | 3995 | <td>normal |
jdaggett@1662 | 3996 | |
jdaggett@1662 | 3997 | <tr> |
jdaggett@1662 | 3998 | <td>Applies to: |
jdaggett@1662 | 3999 | |
jdaggett@1662 | 4000 | <td>all elements |
jdaggett@1662 | 4001 | |
jdaggett@1662 | 4002 | <tr> |
jdaggett@1662 | 4003 | <td>Inherited: |
jdaggett@1662 | 4004 | |
jdaggett@1662 | 4005 | <td>yes |
jdaggett@1662 | 4006 | |
jdaggett@1662 | 4007 | <tr> |
jdaggett@1662 | 4008 | <td>Percentages: |
jdaggett@1662 | 4009 | |
jdaggett@1662 | 4010 | <td>N/A |
jdaggett@1662 | 4011 | |
jdaggett@1662 | 4012 | <tr> |
jdaggett@1662 | 4013 | <td>Media: |
jdaggett@1662 | 4014 | |
jdaggett@1662 | 4015 | <td>visual |
jdaggett@1662 | 4016 | |
jdaggett@1662 | 4017 | <tr> |
jdaggett@1662 | 4018 | <td>Computed value: |
jdaggett@1662 | 4019 | |
jdaggett@1662 | 4020 | <td>as specified |
jdaggett@7377 | 4021 | |
jdaggett@7377 | 4022 | <tr> |
jdaggett@7377 | 4023 | <td>Animatable: |
jdaggett@7377 | 4024 | |
jdaggett@7377 | 4025 | <td>no |
jdaggett@1662 | 4026 | </table> |
jdaggett@1662 | 4027 | |
jdaggett@8280 | 4028 | <p>This property allows the selection of alternate glyphs used for small or |
jdaggett@8280 | 4029 | petite capitals or for titling. These glyphs are specifically designed to |
jdaggett@8280 | 4030 | blend well with the surrounding normal glyphs, to maintain the weight and |
jdaggett@8280 | 4031 | readability which suffers when text is simply resized to fit this purpose. |
jdaggett@1662 | 4032 | |
jdaggett@1732 | 4033 | <p>Individual values have the following meanings: |
jdaggett@1662 | 4034 | |
jdaggett@1662 | 4035 | <dl> |
jdaggett@8278 | 4036 | <dt><dfn id=font-variant-caps-normal-value |
jdaggett@8278 | 4037 | title="normal!!font-variant-caps">normal</dfn> |
jdaggett@5809 | 4038 | |
jdaggett@5809 | 4039 | <dd>None of the features listed below are enabled. |
jdaggett@5809 | 4040 | |
jdaggett@1662 | 4041 | <dt><dfn id=small-caps>small-caps</dfn> |
jdaggett@1662 | 4042 | |
jdaggett@6436 | 4043 | <dd>Enables display of small capitals (OpenType feature: <span |
jdaggett@6436 | 4044 | class=tag>smcp</span>). Small-caps glyphs typically use the form of |
jdaggett@6436 | 4045 | uppercase letters but are reduced to the size of lowercase letters. |
jdaggett@1662 | 4046 | </dl> |
jdaggett@1662 | 4047 | |
jdaggett@1662 | 4048 | <div class=featex><img alt="small-caps example" src=smcp.png></div> |
jdaggett@1662 | 4049 | |
jdaggett@1662 | 4050 | <dl> |
jdaggett@1732 | 4051 | <dt><dfn id=all-small-caps>all-small-caps</dfn> |
jdaggett@1732 | 4052 | |
jdaggett@1732 | 4053 | <dd>Enables display of small capitals for both upper and lowercase letters |
jdaggett@6436 | 4054 | (OpenType features: <span class=tag>c2sc, smcp</span>). |
jdaggett@1732 | 4055 | |
jdaggett@1662 | 4056 | <dt><dfn id=petite-caps>petite-caps</dfn> |
jdaggett@1662 | 4057 | |
jdaggett@6436 | 4058 | <dd>Enables display of petite capitals (OpenType feature: <span |
jdaggett@6436 | 4059 | class=tag>pcap</span>). |
jdaggett@1662 | 4060 | |
jdaggett@1732 | 4061 | <dt><dfn id=all-petite-caps>all-petite-caps</dfn> |
jdaggett@1732 | 4062 | |
jdaggett@1732 | 4063 | <dd>Enables display of petite capitals for both upper and lowercase |
jdaggett@6436 | 4064 | letters (OpenType features: <span class=tag>c2pc, pcap</span>). |
jdaggett@1732 | 4065 | |
jdaggett@6648 | 4066 | <dt><dfn id=unicase>unicase</dfn> |
jdaggett@6648 | 4067 | |
jdaggett@6648 | 4068 | <dd>Enables display of mixture of small capitals for uppercase letters |
jdaggett@6648 | 4069 | with normal lowercase letters (OpenType feature: <span |
jdaggett@6648 | 4070 | class=tag>unic</span>). |
jdaggett@6648 | 4071 | |
jdaggett@1662 | 4072 | <dt><dfn id=titling-caps>titling-caps</dfn> |
jdaggett@1662 | 4073 | |
jdaggett@6436 | 4074 | <dd>Enables display of titling capitals (OpenType feature: <span |
jdaggett@6436 | 4075 | class=tag>titl</span>). Uppercase letter glyphs are often designed for |
jdaggett@6436 | 4076 | use with lowercase letters. When used in all uppercase titling sequences |
jdaggett@6436 | 4077 | they can appear too strong. Titling capitals are designed specifically |
jdaggett@6436 | 4078 | for this situation. |
jdaggett@1662 | 4079 | </dl> |
jdaggett@1662 | 4080 | |
jdaggett@6648 | 4081 | <p>The availability of these glyphs is based on whether a given feature is |
jdaggett@6648 | 4082 | defined or not in the feature list of the font. User agents can optionally |
jdaggett@6648 | 4083 | decide this on a per-script basis but should explicitly not decide this on |
jdaggett@6648 | 4084 | a per-character basis. |
jdaggett@6648 | 4085 | |
jdaggett@6648 | 4086 | <p>Some fonts may only support a subset or none of the features described |
jdaggett@6648 | 4087 | for this property. For backwards compatibility with CSS 2.1, if ‘<a |
jdaggett@4624 | 4088 | href="#small-caps"><code class=property>small-caps</code></a>’ or ‘<a |
jdaggett@4624 | 4089 | href="#all-small-caps"><code class=property>all-small-caps</code></a>’ |
jdaggett@4624 | 4090 | is specified but small-caps glyphs are not available for a given font, |
jdaggett@4624 | 4091 | user agents should simulate a small-caps font, for example by taking a |
jdaggett@6648 | 4092 | normal font and replacing the glyphs for lowercase letters with scaled |
jdaggett@6648 | 4093 | versions of the glyphs for uppercase characters (replacing the glyphs for |
jdaggett@6648 | 4094 | both upper and lowercase letters in the case of ‘<a |
jdaggett@4624 | 4095 | href="#all-small-caps"><code class=property>all-small-caps</code></a>’). |
jdaggett@6648 | 4096 | |
jdaggett@6648 | 4097 | <div class=figure style="padding: 0; margin: auto;"><img alt="synthetic vs. |
jdaggett@6648 | 4098 | real small-caps" class=hires src=synthetic-vs-real-small-caps.png |
jdaggett@6648 | 4099 | width=512px> |
jdaggett@6648 | 4100 | <p class=caption>Synthetic vs. real small-caps |
jdaggett@6648 | 4101 | </div> |
jdaggett@6648 | 4102 | |
jdaggett@6648 | 4103 | <p>To match the surrounding text, a font may provide alternate glyphs for |
jdaggett@6648 | 4104 | caseless characters when these features are enabled but when a user agent |
jdaggett@6648 | 4105 | simulates small capitals, it must not attempt to simulate alternates for |
jdaggett@6648 | 4106 | codepoints which are considered caseless. |
jdaggett@6648 | 4107 | |
jdaggett@6648 | 4108 | <div class=figure style="padding: 0; margin: auto;"><img alt="caseless |
jdaggett@6648 | 4109 | characters with small-caps, all-small-caps enabled" class=hires |
jdaggett@6648 | 4110 | src=small-capitals-variations.png width=418px> |
jdaggett@6648 | 4111 | <p class=caption>Caseless characters with small-caps, all-small-caps |
jdaggett@6648 | 4112 | enabled |
jdaggett@6648 | 4113 | </div> |
jdaggett@6648 | 4114 | |
jdaggett@6648 | 4115 | <p>If either ‘<a href="#petite-caps"><code |
jdaggett@4624 | 4116 | class=property>petite-caps</code></a>’ or ‘<a |
jdaggett@4624 | 4117 | href="#all-petite-caps"><code class=property>all-petite-caps</code></a>’ |
jdaggett@4624 | 4118 | is specified for a font that doesn't support these features, the property |
jdaggett@4624 | 4119 | behaves as if ‘<a href="#small-caps"><code |
jdaggett@4624 | 4120 | class=property>small-caps</code></a>’ or ‘<a |
jdaggett@4624 | 4121 | href="#all-small-caps"><code class=property>all-small-caps</code></a>’, |
jdaggett@6648 | 4122 | respectively, had been specified. If ‘<a href="#unicase"><code |
jdaggett@6648 | 4123 | class=property>unicase</code></a>’ is specified for a font that doesn't |
jdaggett@6648 | 4124 | support that feature, the property behaves as if ‘<a |
jdaggett@6648 | 4125 | href="#small-caps"><code class=property>small-caps</code></a>’ was |
jdaggett@6648 | 4126 | applied only to lowercased uppercase letters. If ‘<a |
jdaggett@6648 | 4127 | href="#titling-caps"><code class=property>titling-caps</code></a>’ is |
jdaggett@6648 | 4128 | specified with a font that does not support this feature, this property |
jdaggett@6648 | 4129 | has no visible effect. When simulated small capital glyphs are used, for |
jdaggett@4624 | 4130 | scripts that lack uppercase and lowercase letters, ‘<a |
jdaggett@4624 | 4131 | href="#small-caps"><code class=property>small-caps</code></a>’, ‘<a |
jdaggett@4624 | 4132 | href="#all-small-caps"><code class=property>all-small-caps</code></a>’, |
jdaggett@4624 | 4133 | ‘<a href="#petite-caps"><code class=property>petite-caps</code></a>’, |
jdaggett@4624 | 4134 | ‘<a href="#all-petite-caps"><code |
jdaggett@4624 | 4135 | class=property>all-petite-caps</code></a>’ and ‘<a |
jdaggett@4624 | 4136 | href="#unicase"><code class=property>unicase</code></a>’ have no visible |
jdaggett@2462 | 4137 | effect. |
jdaggett@1662 | 4138 | |
jdaggett@6648 | 4139 | <p>When casing transforms are used to simulate small capitals, the casing |
jdaggett@8280 | 4140 | transformations must match those used for the <span |
jdaggett@6648 | 4141 | class=property>‘<code class=property>text-transform</code>’</span> |
jdaggett@6648 | 4142 | property. |
jdaggett@6648 | 4143 | |
jdaggett@6648 | 4144 | <p>As a last resort, unscaled uppercase letter glyphs in a normal font may |
jdaggett@6648 | 4145 | replace glyphs in a small-caps font so that the text appears in all |
jdaggett@6648 | 4146 | uppercase letters. |
jdaggett@6648 | 4147 | |
jdaggett@6648 | 4148 | <div class=figure style="padding: 0; margin: auto;"><img alt="using |
jdaggett@6648 | 4149 | all-small-caps in acronym-laden text" class=hires |
jdaggett@6648 | 4150 | src=acronym-laden-text.png width=596px> |
jdaggett@6648 | 4151 | <p class=caption>Using small capitals to improve readability in |
jdaggett@6648 | 4152 | acronym-laden text |
jdaggett@6648 | 4153 | </div> |
jdaggett@6648 | 4154 | |
jdaggett@1662 | 4155 | <div class=example> |
jdaggett@1662 | 4156 | <p>Quotes rendered italicised, with small-caps on the first line:</p> |
jdaggett@1662 | 4157 | |
jdaggett@1662 | 4158 | <pre>blockquote { font-style: italic; } |
jdaggett@1662 | 4159 | blockquote:first-line { font-variant: small-caps; } |
jdaggett@1662 | 4160 | |
jdaggett@1662 | 4161 | <blockquote><a href="http://lists.w3.org/Archives/Public/www-style/2009Dec/0036.html" style="text-decoration: none">I'll be honor-bound to slap them like a haddock.</a></blockquote> |
jdaggett@1662 | 4162 | </pre> |
jdaggett@1662 | 4163 | </div> |
jdaggett@2118 | 4164 | <!-- prop: font-variant-numeric --> |
jdaggett@2118 | 4165 | |
jdaggett@2118 | 4166 | <h3 id=font-variant-numeric-prop><span class=secno>6.7 </span>Numerical |
jdaggett@1662 | 4167 | formatting: the <a |
jdaggett@1662 | 4168 | href="#propdef-font-variant-numeric">font-variant-numeric</a> property</h3> |
jdaggett@1662 | 4169 | |
jdaggett@5809 | 4170 | <table class=propdef id=namefont-variant-numericvaluenormal-ltnu> |
jdaggett@1662 | 4171 | <tbody> |
jdaggett@1662 | 4172 | <tr> |
jdaggett@1662 | 4173 | <td>Name: |
jdaggett@1662 | 4174 | |
jdaggett@1662 | 4175 | <td><dfn id=propdef-font-variant-numeric>font-variant-numeric</dfn> |
jdaggett@1662 | 4176 | |
jdaggett@1662 | 4177 | <tr> |
jdaggett@1662 | 4178 | <td>Value: |
jdaggett@1662 | 4179 | |
jdaggett@8278 | 4180 | <td><a href="#font-variant-numeric-normal-value" |
jdaggett@8278 | 4181 | title="normal!!font-variant-numeric">normal</a> | [ <a |
jdaggett@8225 | 4182 | href="#numeric-figure-values"><var><numeric-figure-values></var></a> |
jdaggett@8225 | 4183 | || <a |
jdaggett@8225 | 4184 | href="#numeric-spacing-values"><var><numeric-spacing-values></var></a> |
jdaggett@8225 | 4185 | || <a |
jdaggett@8225 | 4186 | href="#numeric-fraction-values"><var><numeric-fraction-values></var></a> |
jdaggett@8225 | 4187 | || <a href="#ordinal">ordinal</a> || <a |
jdaggett@8225 | 4188 | href="#slashed-zero">slashed-zero</a> ] |
jdaggett@1662 | 4189 | |
jdaggett@1662 | 4190 | <tr> |
jdaggett@1662 | 4191 | <td>Initial: |
jdaggett@1662 | 4192 | |
jdaggett@1662 | 4193 | <td>normal |
jdaggett@1662 | 4194 | |
jdaggett@1662 | 4195 | <tr> |
jdaggett@1662 | 4196 | <td>Applies to: |
jdaggett@1662 | 4197 | |
jdaggett@1662 | 4198 | <td>all elements |
jdaggett@1662 | 4199 | |
jdaggett@1662 | 4200 | <tr> |
jdaggett@1662 | 4201 | <td>Inherited: |
jdaggett@1662 | 4202 | |
jdaggett@1662 | 4203 | <td>yes |
jdaggett@1662 | 4204 | |
jdaggett@1662 | 4205 | <tr> |
jdaggett@1662 | 4206 | <td>Percentages: |
jdaggett@1662 | 4207 | |
jdaggett@1662 | 4208 | <td>N/A |
jdaggett@1662 | 4209 | |
jdaggett@1662 | 4210 | <tr> |
jdaggett@1662 | 4211 | <td>Media: |
jdaggett@1662 | 4212 | |
jdaggett@1662 | 4213 | <td>visual |
jdaggett@1662 | 4214 | |
jdaggett@1662 | 4215 | <tr> |
jdaggett@1662 | 4216 | <td>Computed value: |
jdaggett@1662 | 4217 | |
jdaggett@1662 | 4218 | <td>as specified |
jdaggett@7377 | 4219 | |
jdaggett@7377 | 4220 | <tr> |
jdaggett@7377 | 4221 | <td>Animatable: |
jdaggett@7377 | 4222 | |
jdaggett@7377 | 4223 | <td>no |
jdaggett@1662 | 4224 | </table> |
jdaggett@1662 | 4225 | |
jdaggett@8311 | 4226 | <p>Specifies control over numerical forms. The example below shows how some |
jdaggett@8311 | 4227 | of these values can be combined to influence the rendering of tabular data |
jdaggett@8311 | 4228 | with fonts that support these features. Within normal paragraph text, |
jdaggett@8311 | 4229 | proportional numbers are used while tabular numbers are used so that |
jdaggett@8311 | 4230 | columns of numbers line up properly: |
jdaggett@1662 | 4231 | |
jdaggett@1662 | 4232 | <div class=figure style="padding: 0; margin: auto;"><img alt="combining |
jdaggett@1662 | 4233 | number styles" src=numberstyles.png> |
jdaggett@1662 | 4234 | <p class=caption>Using number styles |
jdaggett@1662 | 4235 | </div> |
jdaggett@1662 | 4236 | |
jdaggett@8311 | 4237 | <p>Possible combinations: |
jdaggett@8311 | 4238 | |
jdaggett@8311 | 4239 | <pre |
jdaggett@8311 | 4240 | class=prod><dfn id=numeric-figure-values><var><numeric-figure-values></var></dfn> = [ <a href="#lining-nums">lining-nums</a> | <a href="#oldstyle-nums">oldstyle-nums</a> ]</pre> |
jdaggett@8311 | 4241 | |
jdaggett@8311 | 4242 | <pre |
jdaggett@8311 | 4243 | class=prod><dfn id=numeric-spacing-values><var><numeric-spacing-values></var></dfn> = [ <a href="#proportional-nums">proportional-nums</a> | <a href="#tabular-nums">tabular-nums</a> ]</pre> |
jdaggett@8311 | 4244 | |
jdaggett@8311 | 4245 | <pre |
jdaggett@8311 | 4246 | class=prod><dfn id=numeric-fraction-values><var><numeric-fraction-values></var></dfn> = [ <a href="#diagonal-fractions">diagonal-fractions</a> | <a href="#stacked-fractions">stacked-fractions</a> ]</pre> |
jdaggett@8311 | 4247 | |
jdaggett@8311 | 4248 | <p>Individual values have the following meanings: |
jdaggett@8311 | 4249 | |
jdaggett@1662 | 4250 | <dl> |
jdaggett@8311 | 4251 | <dt><dfn id=font-variant-numeric-normal-value |
jdaggett@8311 | 4252 | title="normal!!font-variant-numeric">normal</dfn> |
jdaggett@8311 | 4253 | |
jdaggett@8311 | 4254 | <dd>None of the features listed below are enabled. |
jdaggett@8311 | 4255 | |
jdaggett@8311 | 4256 | <dt><dfn id=lining-nums>lining-nums</dfn> |
jdaggett@8311 | 4257 | |
jdaggett@8311 | 4258 | <dd>Enables display of lining numerals (OpenType feature: <span |
jdaggett@8311 | 4259 | class=tag>lnum</span>). |
jdaggett@8311 | 4260 | |
jdaggett@8311 | 4261 | <dt><dfn id=oldstyle-nums>oldstyle-nums</dfn> |
jdaggett@8311 | 4262 | |
jdaggett@8311 | 4263 | <dd>Enables display of old-style numerals (OpenType feature: <span |
jdaggett@8311 | 4264 | class=tag>onum</span>). |
jdaggett@8311 | 4265 | |
jdaggett@8311 | 4266 | <dt><dfn id=proportional-nums>proportional-nums</dfn> |
jdaggett@8311 | 4267 | |
jdaggett@8311 | 4268 | <dd>Enables display of proportional numerals (OpenType feature: <span |
jdaggett@8311 | 4269 | class=tag>pnum</span>). |
jdaggett@8311 | 4270 | |
jdaggett@8311 | 4271 | <dt><dfn id=tabular-nums>tabular-nums</dfn> |
jdaggett@8311 | 4272 | |
jdaggett@8311 | 4273 | <dd>Enables display of tabular numerals (OpenType feature: <span |
jdaggett@8311 | 4274 | class=tag>tnum</span>). |
jdaggett@8311 | 4275 | |
jdaggett@1662 | 4276 | <dt><dfn id=diagonal-fractions>diagonal-fractions</dfn> |
jdaggett@1662 | 4277 | |
jdaggett@6436 | 4278 | <dd>Enables display of lining diagonal fractions (OpenType feature: <span |
jdaggett@6436 | 4279 | class=tag>frac</span>). |
jdaggett@1662 | 4280 | </dl> |
jdaggett@1662 | 4281 | |
jdaggett@1662 | 4282 | <div class=featex><img alt="diagonal fraction example" src=frac.png></div> |
jdaggett@1662 | 4283 | |
jdaggett@1662 | 4284 | <dl> |
jdaggett@1662 | 4285 | <dt><dfn id=stacked-fractions>stacked-fractions</dfn> |
jdaggett@1662 | 4286 | |
jdaggett@6436 | 4287 | <dd>Enables display of lining stacked fractions (OpenType feature: <span |
jdaggett@6436 | 4288 | class=tag>afrc</span>). |
jdaggett@1662 | 4289 | </dl> |
jdaggett@1662 | 4290 | |
jdaggett@1662 | 4291 | <div class=featex><img alt="stacked fraction example" src=afrc.png></div> |
jdaggett@1662 | 4292 | |
jdaggett@1662 | 4293 | <dl> |
jdaggett@3638 | 4294 | <dt><dfn id=ordinal>ordinal</dfn> |
jdaggett@3638 | 4295 | |
jdaggett@3638 | 4296 | <dd>Enables display of forms used with ordinal numbers (OpenType feature: |
jdaggett@6436 | 4297 | <span class=tag>ordn</span>). |
jdaggett@3638 | 4298 | |
jdaggett@1662 | 4299 | <dt><dfn id=slashed-zero>slashed-zero</dfn> |
jdaggett@1662 | 4300 | |
jdaggett@6436 | 4301 | <dd>Enables display of slashed zeros (OpenType feature: <span |
jdaggett@6436 | 4302 | class=tag>zero</span>). |
jdaggett@1662 | 4303 | </dl> |
jdaggett@1662 | 4304 | |
jdaggett@1662 | 4305 | <div class=featex><img alt="slashed zero example" src=zero.png></div> |
jdaggett@1662 | 4306 | |
jdaggett@1662 | 4307 | <div class=example id=steak-marinade> |
jdaggett@1662 | 4308 | <p>A simple flank steak marinade recipe, rendered with automatic fractions |
jdaggett@1662 | 4309 | and old-style numerals:</p> |
jdaggett@1662 | 4310 | |
jdaggett@1662 | 4311 | <pre>.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; } |
jdaggett@1662 | 4312 | |
jdaggett@1662 | 4313 | <h4>Steak marinade:</h4> |
jdaggett@1662 | 4314 | <ul> |
jdaggett@1662 | 4315 | <li><span class="amount">2</span> tbsp olive oil</li> |
jdaggett@1662 | 4316 | <li><span class="amount">1</span> tbsp lemon juice</li> |
jdaggett@1662 | 4317 | <li><span class="amount">1</span> tbsp soy sauce</li> |
jdaggett@1662 | 4318 | <li><span class="amount">1 1/2</span> tbsp dry minced onion</li> |
jdaggett@1662 | 4319 | <li><span class="amount">2 1/2</span> tsp italian seasoning</li> |
jdaggett@1732 | 4320 | <li>Salt &amp; pepper</li> |
jdaggett@1662 | 4321 | </ul> |
jdaggett@1662 | 4322 | |
jdaggett@5596 | 4323 | <p>Mix the meat with the marinade and let it sit covered in the refrigerator |
jdaggett@5596 | 4324 | for a few hours or overnight.</p> |
jdaggett@1662 | 4325 | </pre> |
jdaggett@8311 | 4326 | |
jdaggett@8311 | 4327 | <p>Note that the fraction feature is only applied to values not the entire |
jdaggett@8311 | 4328 | paragraph. Fonts often implement this feature using contextual rules |
jdaggett@8311 | 4329 | based on the use of the slash (‘<code class=css>/</code>’) character. |
jdaggett@8311 | 4330 | As such, it's not suitable for use as a paragraph-level style.</p> |
jdaggett@1662 | 4331 | </div> |
jdaggett@2118 | 4332 | <!-- prop: font-variant-alternates --> |
jdaggett@2118 | 4333 | |
jdaggett@2118 | 4334 | <h3 id=font-variant-alternates-prop><span class=secno>6.8 </span>Alternates |
jdaggett@2118 | 4335 | and swashes: the <a |
jdaggett@2118 | 4336 | href="#propdef-font-variant-alternates">font-variant-alternates</a> |
jdaggett@2118 | 4337 | property</h3> |
jdaggett@2118 | 4338 | |
jdaggett@6176 | 4339 | <table class=propdef id=namefont-variant-alternatesvaluenormal-s> |
jdaggett@2118 | 4340 | <tbody> |
jdaggett@2118 | 4341 | <tr> |
jdaggett@2118 | 4342 | <td>Name: |
jdaggett@2118 | 4343 | |
jdaggett@2118 | 4344 | <td><dfn |
jdaggett@2118 | 4345 | id=propdef-font-variant-alternates>font-variant-alternates</dfn> |
jdaggett@2118 | 4346 | |
jdaggett@2118 | 4347 | <tr> |
jdaggett@2118 | 4348 | <td>Value: |
jdaggett@2118 | 4349 | |
jdaggett@8225 | 4350 | <td>normal | [ <a href="#stylistic" |
jdaggett@8225 | 4351 | title=stylistic>stylistic(<feature-value-name>)</a> || <a |
jdaggett@8225 | 4352 | href="#historical-forms">historical-forms</a> || <a href="#styleset" |
jdaggett@8225 | 4353 | title=styleset>styleset(<feature-value-name> #)</a> || <a |
jdaggett@8225 | 4354 | href="#character-variant" |
jdaggett@8225 | 4355 | title=character-variant>character-variant(<feature-value-name> |
jdaggett@8225 | 4356 | #)</a> || <a href="#swash" |
jdaggett@8225 | 4357 | title=swash>swash(<feature-value-name>)</a> || <a |
jdaggett@8225 | 4358 | href="#ornaments" |
jdaggett@8225 | 4359 | title=ornaments>ornaments(<feature-value-name>)</a> || <a |
jdaggett@8225 | 4360 | href="#annotation" |
jdaggett@8225 | 4361 | title=annotation>annotation(<feature-value-name>)</a> ] |
jdaggett@2118 | 4362 | |
jdaggett@2118 | 4363 | <tr> |
jdaggett@2118 | 4364 | <td>Initial: |
jdaggett@2118 | 4365 | |
jdaggett@2118 | 4366 | <td>normal |
jdaggett@2118 | 4367 | |
jdaggett@2118 | 4368 | <tr> |
jdaggett@2118 | 4369 | <td>Applies to: |
jdaggett@2118 | 4370 | |
jdaggett@2118 | 4371 | <td>all elements |
jdaggett@2118 | 4372 | |
jdaggett@2118 | 4373 | <tr> |
jdaggett@2118 | 4374 | <td>Inherited: |
jdaggett@2118 | 4375 | |
jdaggett@2118 | 4376 | <td>yes |
jdaggett@2118 | 4377 | |
jdaggett@2118 | 4378 | <tr> |
jdaggett@2118 | 4379 | <td>Percentages: |
jdaggett@2118 | 4380 | |
jdaggett@2118 | 4381 | <td>N/A |
jdaggett@2118 | 4382 | |
jdaggett@2118 | 4383 | <tr> |
jdaggett@2118 | 4384 | <td>Media: |
jdaggett@2118 | 4385 | |
jdaggett@2118 | 4386 | <td>visual |
jdaggett@2118 | 4387 | |
jdaggett@2118 | 4388 | <tr> |
jdaggett@2118 | 4389 | <td>Computed value: |
jdaggett@2118 | 4390 | |
jdaggett@2118 | 4391 | <td>as specified |
jdaggett@7377 | 4392 | |
jdaggett@7377 | 4393 | <tr> |
jdaggett@7377 | 4394 | <td>Animatable: |
jdaggett@7377 | 4395 | |
jdaggett@7377 | 4396 | <td>no |
jdaggett@2118 | 4397 | </table> |
jdaggett@2118 | 4398 | |
jdaggett@2118 | 4399 | <p>For any given character, fonts can provide a variety of alternate glyphs |
jdaggett@2118 | 4400 | in addition to the default glyph for that character. This property |
jdaggett@2118 | 4401 | provides control over the selection of these alternate glyphs. |
jdaggett@2118 | 4402 | |
jdaggett@8311 | 4403 | <p>For many of the property values listed below, several different |
jdaggett@8311 | 4404 | alternate glyphs are available. How many alternates are available and what |
jdaggett@8356 | 4405 | they represent is font-specific, so these are each marked <dfn |
jdaggett@8356 | 4406 | id=font-specific>font specific</dfn> in the value definitions below. |
jdaggett@8356 | 4407 | Because the nature of these alternates is font-specific, the <a |
jdaggett@8311 | 4408 | href="#at-font-feature-values-rule"><code>@font-feature-values</code></a> |
jdaggett@8311 | 4409 | rule is used to define values for a specific font family or set of |
jdaggett@8311 | 4410 | families that associate a font-specific numeric |
jdaggett@8311 | 4411 | <code><feature-index></code> with a custom |
jdaggett@8311 | 4412 | <code><feature-value-name></code>, which is then used in this |
jdaggett@8311 | 4413 | property to select specific alternates: |
jdaggett@8311 | 4414 | |
jdaggett@8311 | 4415 | <pre>@font-feature-values Noble Script { @swash { swishy: 1; flowing: 2; } } |
jdaggett@8311 | 4416 | |
jdaggett@8311 | 4417 | p { |
jdaggett@8311 | 4418 | font-family: Noble Script; |
jdaggett@8311 | 4419 | font-variant-alternates: swash(flowing); /* use swash alternate #2 */ |
jdaggett@8311 | 4420 | }</pre> |
jdaggett@8311 | 4421 | |
jdaggett@8312 | 4422 | <p>When a particular <code><feature-value-name></code> has not been |
jdaggett@8312 | 4423 | defined for a given family or for a particular feature type, the computed |
jdaggett@8312 | 4424 | value must be the same as if it had been defined. However, property values |
jdaggett@8312 | 4425 | that contain these undefined <code><feature-value-name></code> |
jdaggett@8312 | 4426 | identifiers must be ignored when choosing glyphs. |
jdaggett@8312 | 4427 | |
jdaggett@8312 | 4428 | <pre>/* these two style rules are effectively the same */ |
jdaggett@8312 | 4429 | p { font-variant-alternates: swash(unknown-value); } /* not a defined value, ignored */ |
jdaggett@8312 | 4430 | p { font-variant-alternates: normal; } |
jdaggett@8312 | 4431 | </pre> |
jdaggett@8312 | 4432 | |
jdaggett@8312 | 4433 | <p>This allows values to be defined and used for a given set of font |
jdaggett@8312 | 4434 | families but ignored if fallback occurs, since the font family name would |
jdaggett@8312 | 4435 | be different. If a given value is outside the range supported by a given |
jdaggett@8312 | 4436 | font, the value is ignored. These values never apply to generic font |
jdaggett@8312 | 4437 | families. |
jdaggett@2556 | 4438 | |
jdaggett@2118 | 4439 | <p>Individual values have the following meanings: |
jdaggett@2118 | 4440 | |
jdaggett@2118 | 4441 | <dl> |
jdaggett@8278 | 4442 | <dt><dfn id=font-variant-alternates-normal-value |
jdaggett@8278 | 4443 | title="normal!!font-variant-alternates">normal</dfn> |
jdaggett@5809 | 4444 | |
jdaggett@5809 | 4445 | <dd>None of the features listed below are enabled. |
jdaggett@5809 | 4446 | |
jdaggett@2118 | 4447 | <dt><dfn id=historical-forms>historical-forms</dfn> |
jdaggett@2118 | 4448 | |
jdaggett@6436 | 4449 | <dd>Enables display of historical forms (OpenType feature: <span |
jdaggett@6436 | 4450 | class=tag>hist</span>). |
jdaggett@2118 | 4451 | </dl> |
jdaggett@2118 | 4452 | |
jdaggett@2118 | 4453 | <div class=featex><img alt="historical form example" src=hist.png></div> |
jdaggett@2118 | 4454 | |
jdaggett@2118 | 4455 | <dl> |
jdaggett@8311 | 4456 | <dt><dfn id=stylistic |
jdaggett@8311 | 4457 | title=stylistic>stylistic(<feature-value-name>)</dfn> |
jdaggett@8311 | 4458 | |
jdaggett@8356 | 4459 | <dd>Enables display of stylistic alternates (<a |
jdaggett@8356 | 4460 | href="#font-specific"><em>font specific</em></a>, OpenType feature: <span |
jdaggett@8356 | 4461 | class=tag>salt <feature-index></span>). |
jdaggett@8311 | 4462 | </dl> |
jdaggett@8311 | 4463 | |
jdaggett@8311 | 4464 | <div class=featex><img alt="stylistic alternate example" src=salt.png></div> |
jdaggett@8311 | 4465 | |
jdaggett@8311 | 4466 | <dl> |
jdaggett@8225 | 4467 | <dt><dfn id=styleset title=styleset>styleset(<feature-value-name> |
jdaggett@8225 | 4468 | #)</dfn> |
jdaggett@2118 | 4469 | |
jdaggett@8356 | 4470 | <dd>Enables display with stylistic sets (<a href="#font-specific"><em>font |
jdaggett@8356 | 4471 | specific</em></a>, OpenType feature: <span |
jdaggett@8356 | 4472 | class=tag>ss<feature-index></span> OpenType currently defines <span |
jdaggett@8356 | 4473 | class=tag>ss01</span> through <span class=tag>ss20</span>). |
jdaggett@2118 | 4474 | </dl> |
jdaggett@2118 | 4475 | |
jdaggett@2118 | 4476 | <div class=featex><img alt="styleset example" src=ssnn.png></div> |
jdaggett@2118 | 4477 | |
jdaggett@2118 | 4478 | <dl> |
jdaggett@8225 | 4479 | <dt><dfn id=character-variant |
jdaggett@8225 | 4480 | title=character-variant>character-variant(<feature-value-name> |
jdaggett@8225 | 4481 | #)</dfn> |
jdaggett@2118 | 4482 | |
jdaggett@8356 | 4483 | <dd>Enables display of specific character variants (<a |
jdaggett@8356 | 4484 | href="#font-specific"><em>font specific</em></a>, OpenType feature: <span |
jdaggett@6436 | 4485 | class=tag>cv<feature-index></span> OpenType currently defines <span |
jdaggett@6436 | 4486 | class=tag>cv01</span> through <span class=tag>cv99</span>). |
jdaggett@2118 | 4487 | |
jdaggett@8225 | 4488 | <dt><dfn id=swash title=swash>swash(<feature-value-name>)</dfn> |
jdaggett@2118 | 4489 | |
jdaggett@8356 | 4490 | <dd>Enables display of swash glyphs (<a href="#font-specific"><em>font |
jdaggett@8356 | 4491 | specific</em></a>, OpenType feature: <span class=tag>swsh |
jdaggett@8356 | 4492 | <feature-index>, cswh <feature-index></span>). |
jdaggett@2118 | 4493 | </dl> |
jdaggett@2118 | 4494 | |
jdaggett@2118 | 4495 | <div class=featex><img alt="swash example" src=swsh.png></div> |
jdaggett@2118 | 4496 | |
jdaggett@2118 | 4497 | <dl> |
jdaggett@8225 | 4498 | <dt><dfn id=ornaments |
jdaggett@7060 | 4499 | title=ornaments>ornaments(<feature-value-name>)</dfn> |
jdaggett@2118 | 4500 | |
jdaggett@2118 | 4501 | <dd>Enables replacement of default glyphs with ornaments, if provided in |
jdaggett@8356 | 4502 | the font (<a href="#font-specific"><em>font specific</em></a>, OpenType |
jdaggett@8356 | 4503 | feature: <span class=tag>ornm <feature-index></span>). Some fonts |
jdaggett@8356 | 4504 | may offer ornament glyphs as alternates for a wide collection of |
jdaggett@8356 | 4505 | characters; however, displaying arbitrary characters (e.g., |
jdaggett@8356 | 4506 | alphanumerics) as ornaments is poor practice as it distorts the semantics |
jdaggett@8356 | 4507 | of the data. Font designers are encouraged to encode all ornaments |
jdaggett@8356 | 4508 | (except those explicitly encoded in the Unicode Dingbats blocks, etc.) as |
jdaggett@8356 | 4509 | alternates for the bullet character (U+2022) to allow authors to select |
jdaggett@8356 | 4510 | the desired glyph using ‘<a href="#ornaments"><code |
jdaggett@8356 | 4511 | class=property>ornaments</code></a>’. |
jdaggett@2118 | 4512 | </dl> |
jdaggett@2118 | 4513 | |
jdaggett@2118 | 4514 | <div class=featex><img alt="ornaments example" src=ornm.png></div> |
jdaggett@2118 | 4515 | |
jdaggett@2118 | 4516 | <dl> |
jdaggett@8225 | 4517 | <dt><dfn id=annotation |
jdaggett@7060 | 4518 | title=annotation>annotation(<feature-value-name>)</dfn> |
jdaggett@2118 | 4519 | |
jdaggett@8356 | 4520 | <dd>Enables display of alternate annotation forms (<a |
jdaggett@8356 | 4521 | href="#font-specific"><em>font specific</em></a>, OpenType feature: <span |
jdaggett@8356 | 4522 | class=tag>nalt <feature-index></span>). |
jdaggett@2118 | 4523 | </dl> |
jdaggett@2118 | 4524 | |
jdaggett@2118 | 4525 | <div class=featex><img alt="alternate annotation form example" |
jdaggett@2118 | 4526 | src=nalt.png></div> |
jdaggett@2118 | 4527 | |
jdaggett@2472 | 4528 | <h3 id=font-feature-values><span class=secno>6.9 </span>Defining font |
jdaggett@8311 | 4529 | specific alternates: the <dfn id=at-font-feature-values-rule |
jdaggett@8311 | 4530 | style="font-weight: inherit; font-style: |
jdaggett@8311 | 4531 | inherit"><code>@font-feature-values</code></dfn> rule</h3> |
jdaggett@2472 | 4532 | |
jdaggett@4624 | 4533 | <p>Several of the possible values of ‘<a |
jdaggett@4624 | 4534 | href="#propdef-font-variant-alternates"><code |
jdaggett@4624 | 4535 | class=property>font-variant-alternates</code></a>’ listed above are |
jdaggett@8356 | 4536 | labeled as <a href="#font-specific"><em>font specific</em></a>. For these |
jdaggett@8356 | 4537 | features fonts may define not just a single glyph but a set of alternate |
jdaggett@8356 | 4538 | glyphs with an index to select a given alternate. Since these are font |
jdaggett@8356 | 4539 | family specific, the <a |
jdaggett@8311 | 4540 | href="#at-font-feature-values-rule"><code>@font-feature-values</code></a> |
jdaggett@8356 | 4541 | rule is used to define named values for these indices for a given family. |
jdaggett@8356 | 4542 | |
jdaggett@8356 | 4543 | <p class=note>See the <a href="#om-fontfeaturevalues">object model |
jdaggett@8356 | 4544 | reference section</a> for a description of the interfaces used to modify |
jdaggett@8356 | 4545 | these rules via the CSS Object Model. |
jdaggett@8356 | 4546 | |
jdaggett@8356 | 4547 | <div class=example> |
jdaggett@8356 | 4548 | <p>In the case of the swash Q in the example shown above, the swash could |
jdaggett@8356 | 4549 | be specified using these style rules:</p> |
jdaggett@8356 | 4550 | |
jdaggett@8356 | 4551 | <pre> |
jdaggett@7041 | 4552 | |
jdaggett@2472 | 4553 | @font-feature-values Jupiter Sans { |
jdaggett@7041 | 4554 | @swash { |
jdaggett@7041 | 4555 | delicate: 1; |
jdaggett@7041 | 4556 | flowing: 2; |
jdaggett@7041 | 4557 | } |
jdaggett@2472 | 4558 | } |
jdaggett@2472 | 4559 | |
jdaggett@2472 | 4560 | h2 { font-family: Jupiter Sans, sans-serif; } |
jdaggett@2472 | 4561 | |
jdaggett@2472 | 4562 | /* show the second swash variant in h2 headings */ |
jdaggett@2472 | 4563 | h2:first-letter { font-variant-alternates: swash(flowing); } |
jdaggett@2472 | 4564 | |
jdaggett@2479 | 4565 | <h2>Quick</h2></pre> |
jdaggett@2472 | 4566 | |
jdaggett@8356 | 4567 | <p>When Jupiter Sans is present, the second alternate swash alternate will |
jdaggett@8356 | 4568 | be displayed. When not present, no swash character will be shown, since |
jdaggett@8356 | 4569 | the specific named value "flowing" is only defined for the Jupiter Sans |
jdaggett@8356 | 4570 | family. The @-mark indicates the name of the property value for which a |
jdaggett@8356 | 4571 | named value can be used. The name "flowing" is chosen by the author. The |
jdaggett@8356 | 4572 | index that represents each alternate is defined within a given font's |
jdaggett@8356 | 4573 | data.</p> |
jdaggett@8356 | 4574 | </div> |
jdaggett@8356 | 4575 | |
jdaggett@8356 | 4576 | <h4 id=basic-syntax><span class=secno>6.9.1 </span>Basic syntax</h4> |
jdaggett@8356 | 4577 | |
jdaggett@8356 | 4578 | <p>An <a |
jdaggett@8356 | 4579 | href="#at-font-feature-values-rule"><code>@font-feature-values</code></a> |
jdaggett@8356 | 4580 | rule is composed of a list of font families followed by a block containing |
jdaggett@8356 | 4581 | individual <a href="#featurevalueblock"><i |
jdaggett@8356 | 4582 | title="feature_value_block">feature value blocks</i></a> that take the |
jdaggett@8356 | 4583 | form of @-rules. Each block defines a set of named values for a specific |
jdaggett@8356 | 4584 | font feature when a given set of font families is used. Effectively, they |
jdaggett@8356 | 4585 | define a mapping of ⟨family, feature, ident⟩ → ⟨values⟩ where |
jdaggett@8356 | 4586 | ⟨values⟩ are the numeric indices used for specific features defined |
jdaggett@8356 | 4587 | for a given font. |
jdaggett@8031 | 4588 | |
jdaggett@8031 | 4589 | <p>In terms of the grammar, this specification defines the following |
jdaggett@8312 | 4590 | productions: |
jdaggett@8225 | 4591 | |
jdaggett@8225 | 4592 | <pre><dfn id=fontfeaturevaluesrule>font_feature_values_rule</dfn> |
jdaggett@8225 | 4593 | : <a href="#fontfeaturevaluessym"><i>FONT_FEATURE_VALUES_SYM</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#fontfamilynamelist"><i>font_family_name_list</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* |
jdaggett@8225 | 4594 | '{' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevalueblock"><i>feature_value_block</i></a>? [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevalueblock"><i>feature_value_block</i></a>? ]* '}' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* |
jdaggett@8225 | 4595 | ; |
jdaggett@8225 | 4596 | |
jdaggett@8225 | 4597 | <dfn id=fontfamilynamelist>font_family_name_list</dfn> |
jdaggett@8225 | 4598 | : <a href="#fontfamilyname"><i>font_family_name</i></a> [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* ',' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#fontfamilyname"><i>font_family_name</i></a> ]* |
jdaggett@8225 | 4599 | ; |
jdaggett@8225 | 4600 | |
jdaggett@8225 | 4601 | <dfn id=fontfamilyname>font_family_name</dfn> |
jdaggett@8225 | 4602 | : <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>STRING</i></a> | [ <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>IDENT</i></a> [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>IDENT</i></a> ]* ] |
jdaggett@8225 | 4603 | ; |
jdaggett@8225 | 4604 | |
jdaggett@8225 | 4605 | <dfn id=featurevalueblock>feature_value_block</dfn> |
jdaggett@8225 | 4606 | : <a href="#featuretype"><i>feature_type</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* |
jdaggett@8225 | 4607 | '{' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevaluedefinition"><i>feature_value_definition</i></a>? [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* ';' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevaluedefinition"><i>feature_value_definition</i></a>? ]* '}' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* |
jdaggett@8225 | 4608 | ; |
jdaggett@8225 | 4609 | |
jdaggett@8225 | 4610 | <dfn id=featuretype>feature_type</dfn>: |
jdaggett@8225 | 4611 | <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>ATKEYWORD</i></a> |
jdaggett@8225 | 4612 | ; |
jdaggett@8225 | 4613 | |
jdaggett@8225 | 4614 | <dfn id=featurevaluedefinition>feature_value_definition</dfn> |
jdaggett@8225 | 4615 | : <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>IDENT</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* ':' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>NUMBER</i></a> [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>NUMBER</i></a> ]* |
jdaggett@8225 | 4616 | ; |
jdaggett@8225 | 4617 | </pre> |
jdaggett@8225 | 4618 | |
jdaggett@8032 | 4619 | <p>The following new token is introduced: |
jdaggett@8032 | 4620 | |
jdaggett@8225 | 4621 | <pre>@{F}{O}{N}{T}{-}{F}{E}{A}{T}{U}{R}{E}{-}{V}{A}{L}{U}{E}{S} {return <dfn id=fontfeaturevaluessym>FONT_FEATURE_VALUES_SYM</dfn>;} |
jdaggett@2118 | 4622 | </pre> |
jdaggett@2118 | 4623 | |
jdaggett@8356 | 4624 | <p><a href="#featurevalueblock"><i title="feature_value_block">Feature |
jdaggett@8356 | 4625 | value blocks</i></a> are handled as <a |
jdaggett@8356 | 4626 | href="http://www.w3.org/TR/CSS2/syndata.html#at-rules">at-rules</a>, they |
jdaggett@8356 | 4627 | consist of everything up to the next block or semi-colon, whichever comes |
jdaggett@8356 | 4628 | first. |
jdaggett@8356 | 4629 | |
jdaggett@8356 | 4630 | <p>The <a href="#fontfamilynamelist"><i title="font_family_name_list">font |
jdaggett@8356 | 4631 | family list</i></a> is a comma-delimited list of <a |
jdaggett@8356 | 4632 | href="#fontfamilyname"><i title="font_family_name">font family |
jdaggett@8356 | 4633 | names</i></a> that match the definition of <a |
jdaggett@8356 | 4634 | href="#family-name-value"><var><family-name></var></a> for the <a |
jdaggett@8278 | 4635 | href="#propdef-font-family" title="font-family!!property">‘<code |
jdaggett@8356 | 4636 | class=property>font-family</code>’</a> property. This means that only |
jdaggett@8356 | 4637 | named font families are allowed, rules that include generic or system |
jdaggett@8356 | 4638 | fonts in the list of font families are syntax errors. However, if a user |
jdaggett@8356 | 4639 | agent defines a generic font to be a specific named font (e.g. Helvetica), |
jdaggett@8356 | 4640 | the settings associated with that family name will be used. If syntax |
jdaggett@8356 | 4641 | errors occur within the font family list, the entire rule must be ignored. |
jdaggett@8356 | 4642 | |
jdaggett@8356 | 4643 | <p>Within <a href="#featurevalueblock"><i |
jdaggett@8356 | 4644 | title="feature_value_block">feature value blocks</i></a>, the <a |
jdaggett@8356 | 4645 | href="#featuretype"><i title="feature_type">feature type</i></a> is |
jdaggett@8356 | 4646 | ‘<code class=css>@</code>’ followed by the name of one of the <a |
jdaggett@8356 | 4647 | href="#font-specific"><em>font specific</em></a> property values of ‘<a |
jdaggett@8356 | 4648 | href="#propdef-font-variant-alternates"><code |
jdaggett@8356 | 4649 | class=property>font-variant-alternates</code></a>’ (e.g. <a |
jdaggett@8356 | 4650 | href="#swash"><code>@swash</code></a>). The identifiers used within |
jdaggett@8356 | 4651 | feature value definitions follow the rules of CSS user identifiers and are |
jdaggett@8356 | 4652 | case-sensitive. They are unique only for a given set of font families and |
jdaggett@8356 | 4653 | <a href="#featuretype"><i title="feature_type">feature type</i></a>. The |
jdaggett@8356 | 4654 | same identifier used with a different <a href="#featuretype"><i |
jdaggett@8356 | 4655 | title="feature_type">feature type</i></a> is treated as a separate and |
jdaggett@8356 | 4656 | distinct value. If the same identifier is defined mulitple times for a |
jdaggett@8356 | 4657 | given <a href="#featuretype"><i title="feature_type">feature type</i></a> |
jdaggett@8356 | 4658 | and font family, the last defined value is used. Values associated with a |
jdaggett@8356 | 4659 | given identifier are limited to integer values 0 or greater. |
jdaggett@8356 | 4660 | |
jdaggett@8356 | 4661 | <p>When syntax errors occur within a <a href="#featurevaluedefinition"><i |
jdaggett@8356 | 4662 | title="feature_value_definition">feature value definition</i></a>, such as |
jdaggett@8356 | 4663 | invalid identifiers or values, the entire <a |
jdaggett@8356 | 4664 | href="#featurevaluedefinition"><i title="feature_value_definition">feature |
jdaggett@8356 | 4665 | value definition</i></a> must be omitted, just as syntax errors in style |
jdaggett@8356 | 4666 | declarations are handled. When the <a href="#featuretype"><i |
jdaggett@8356 | 4667 | title="feature_type">feature type</i></a> is invalid, the entire |
jdaggett@8356 | 4668 | associated <a href="#featurevalueblock"><i |
jdaggett@8356 | 4669 | title="feature_value_block">feature value block</i></a> must be ignored. |
jdaggett@8356 | 4670 | |
jdaggett@8356 | 4671 | <div class=example> |
jdaggett@8356 | 4672 | <p>Rules that are equivalent given syntax error handling:</p> |
jdaggett@8356 | 4673 | |
jdaggett@8356 | 4674 | <pre>@font-feature-values Bongo { |
jdaggett@7679 | 4675 | @swash { ornate: 1; } |
jdaggett@7679 | 4676 | annotation { boxed: 4; } /* should be @annotation! */ |
jdaggett@8031 | 4677 | @swash { double-loops: 1; flowing: -1; } /* negative value */ |
jdaggett@8031 | 4678 | @ornaments ; /* incomplete definition */ |
jdaggett@8031 | 4679 | @styleset { double-W: 14; sharp-terminals: 16 1 } /* missing ; */ |
jdaggett@8356 | 4680 | <a href="http://www.angryalien.com/0504/shiningbunnies.html" style="text-decoration: none; border: none;">redrum</a> /* random editing mistake */ |
jdaggett@7679 | 4681 | }</pre> |
jdaggett@7679 | 4682 | |
jdaggett@8356 | 4683 | <p>The example above is equivalent to:</p> |
jdaggett@8356 | 4684 | |
jdaggett@8356 | 4685 | <pre>@font-feature-values Bongo { |
jdaggett@7679 | 4686 | @swash { ornate: 1; } |
jdaggett@8031 | 4687 | @swash { double-loops: 1; } |
jdaggett@8031 | 4688 | @styleset { double-W: 14; sharp-terminals: 16 1; } |
jdaggett@7679 | 4689 | }</pre> |
jdaggett@8356 | 4690 | </div> |
jdaggett@7096 | 4691 | |
jdaggett@8311 | 4692 | <p>If multiple <a |
jdaggett@8311 | 4693 | href="#at-font-feature-values-rule"><code>@font-feature-values</code></a> |
jdaggett@8356 | 4694 | rules are defined for a given family, the resulting values definitions are |
jdaggett@8356 | 4695 | the union of the definitions contained within these rules. This allows a |
jdaggett@8356 | 4696 | set of named values to be defined for a given font family globally for a |
jdaggett@8356 | 4697 | site and specific additions made per-page. |
jdaggett@8356 | 4698 | |
jdaggett@8356 | 4699 | <div class=example> |
jdaggett@8356 | 4700 | <p>Using both site-wide and per-page feature values:</p> |
jdaggett@8356 | 4701 | |
jdaggett@8356 | 4702 | <pre> |
jdaggett@2472 | 4703 | site.css: |
jdaggett@2472 | 4704 | |
jdaggett@2472 | 4705 | @font-feature-values Mercury Serif { |
jdaggett@7041 | 4706 | @styleset { |
jdaggett@7041 | 4707 | stacked-g: 3; /* "two-storey" versions of g, a */ |
jdaggett@7041 | 4708 | stacked-a: 4; |
jdaggett@7041 | 4709 | } |
jdaggett@2472 | 4710 | } |
jdaggett@2472 | 4711 | |
jdaggett@2472 | 4712 | page.css: |
jdaggett@8277 | 4713 | |
jdaggett@2472 | 4714 | @font-feature-values Mercury Serif { |
jdaggett@7041 | 4715 | @styleset { |
jdaggett@7041 | 4716 | geometric-m: 7; /* alternate version of m */ |
jdaggett@7041 | 4717 | } |
jdaggett@2472 | 4718 | } |
jdaggett@8277 | 4719 | |
jdaggett@2472 | 4720 | body { |
jdaggett@2472 | 4721 | font-family: Mercury Serif, serif; |
jdaggett@2472 | 4722 | |
jdaggett@2472 | 4723 | /* enable both the use of stacked g and alternate m */ |
jdaggett@2472 | 4724 | font-variant-alternates: styleset(stacked-g, geometric-m); |
jdaggett@2472 | 4725 | }</pre> |
jdaggett@8356 | 4726 | </div> |
jdaggett@8356 | 4727 | |
jdaggett@8356 | 4728 | <div class=example> |
jdaggett@8356 | 4729 | <p>Using a commonly named value allows authors to use a single style rule |
jdaggett@8356 | 4730 | to cover a set of fonts for which the underlying selector is different |
jdaggett@8356 | 4731 | for each font. If either font in the example below is found, a circled |
jdaggett@8356 | 4732 | number glyph will be used:</p> |
jdaggett@8356 | 4733 | |
jdaggett@8356 | 4734 | <pre>@font-feature-values Taisho Gothic { |
jdaggett@7041 | 4735 | @annotation { boxed: 1; circled: 4; } |
jdaggett@2118 | 4736 | } |
jdaggett@2118 | 4737 | |
jdaggett@2118 | 4738 | @font-feature-values Otaru Kisa { |
jdaggett@7041 | 4739 | @annotation { circled: 1; black-boxed: 3; } |
jdaggett@2118 | 4740 | } |
jdaggett@2118 | 4741 | |
jdaggett@2118 | 4742 | h3.title { |
jdaggett@2118 | 4743 | /* circled form defined for both fonts */ |
jdaggett@2118 | 4744 | font-family: Taisho Gothic, Otaru Kisa; |
jdaggett@2118 | 4745 | font-variant: annotation(circled); |
jdaggett@2118 | 4746 | }</pre> |
jdaggett@8356 | 4747 | </div> |
jdaggett@8356 | 4748 | |
jdaggett@8356 | 4749 | <h4 id=multi-valued-feature-value-definitions><span class=secno>6.9.2 |
jdaggett@8356 | 4750 | </span>Multi-valued feature value definitions</h4> |
jdaggett@8356 | 4751 | |
jdaggett@8356 | 4752 | <p>Most <a href="#font-specific"><em>font specific</em></a> ‘<a |
jdaggett@8356 | 4753 | href="#propdef-font-variant-alternates"><code |
jdaggett@8356 | 4754 | class=property>font-variant-alternates</code></a>’ property values take |
jdaggett@8356 | 4755 | a single value (e.g. ‘<a href="#swash"><code |
jdaggett@8356 | 4756 | class=property>swash</code></a>’). The ‘<a |
jdaggett@8356 | 4757 | href="#character-variant"><code |
jdaggett@8356 | 4758 | class=property>character-variant</code></a>’ property value allows two |
jdaggett@8356 | 4759 | values and ‘<a href="#styleset"><code |
jdaggett@8356 | 4760 | class=property>styleset</code></a>’ allows an unlimited number. |
jdaggett@3571 | 4761 | |
jdaggett@3571 | 4762 | <p>For the styleset property value, multiple values indicate the style sets |
jdaggett@7095 | 4763 | to be enabled. Values between 1 and 99 enable OpenType features <span |
jdaggett@7095 | 4764 | class=tag>ss01</span> through <span class=tag>ss99</span>. However, the |
jdaggett@7095 | 4765 | OpenType standard only officially defines <span class=tag>ss01</span> |
jdaggett@8356 | 4766 | through <span class=tag>ss20</span>. For OpenType fonts, values greater |
jdaggett@8356 | 4767 | than 99 or equal to 0 do not generate a syntax error when parsed but |
jdaggett@8356 | 4768 | enable no OpenType features. |
jdaggett@2472 | 4769 | |
jdaggett@2472 | 4770 | <pre>@font-feature-values Mars Serif { |
jdaggett@8277 | 4771 | @styleset { |
jdaggett@7041 | 4772 | alt-g: 1; /* implies ss01 = 1 */ |
jdaggett@7041 | 4773 | curly-quotes: 3; /* implies ss03 = 1 */ |
jdaggett@7041 | 4774 | code: 4 5; /* implies ss04 = 1, ss05 = 1 */ |
jdaggett@7041 | 4775 | } |
jdaggett@7041 | 4776 | |
jdaggett@7041 | 4777 | @styleset { |
jdaggett@7095 | 4778 | dumb: 125; /* >99, ignored */ |
jdaggett@7041 | 4779 | } |
jdaggett@7041 | 4780 | |
jdaggett@7041 | 4781 | @swash { |
jdaggett@7041 | 4782 | swishy: 3 5; /* more than 1 value for swash, syntax error */ |
jdaggett@7041 | 4783 | } |
jdaggett@2472 | 4784 | } |
jdaggett@2472 | 4785 | |
jdaggett@2472 | 4786 | p.codeblock { |
jdaggett@2472 | 4787 | /* implies ss03 = 1, ss04 = 1, ss05 = 1 */ |
jdaggett@2472 | 4788 | font-variant-alternates: styleset(curly-quotes, code); |
jdaggett@2472 | 4789 | }</pre> |
jdaggett@2472 | 4790 | |
jdaggett@2472 | 4791 | <p>For character-variant, a single value between 1 and 99 indicates the |
jdaggett@6436 | 4792 | enabling of OpenType feature <span class=tag>cv01</span> through <span |
jdaggett@7095 | 4793 | class=tag>cv99</span>. For OpenType fonts, values greater than 99 or equal |
jdaggett@8356 | 4794 | to 0 are ignored but do not generate a syntax error when parsed but enable |
jdaggett@8356 | 4795 | no OpenType features. When two values are listed, the first value |
jdaggett@8356 | 4796 | indicates the feature used and the second the value passed for that |
jdaggett@8356 | 4797 | feature. If more than two values are assigned to a given name, a syntax |
jdaggett@8356 | 4798 | error occurs and the entire <a href="#featurevaluedefinition"><i |
jdaggett@8356 | 4799 | title="feature_value_definition">feature value definition</i></a> is |
jdaggett@8356 | 4800 | ignored. |
jdaggett@2472 | 4801 | |
jdaggett@2472 | 4802 | <pre>@font-feature-values MM Greek { |
jdaggett@7041 | 4803 | @character-variant { alpha-2: 1 2; } /* implies cv01 = 2 */ |
jdaggett@7041 | 4804 | @character-variant { beta-3: 2 3; } /* implies cv02 = 3 */ |
jdaggett@8356 | 4805 | @character-variant { epsilon: 5 3 6; } /* more than 2 values, syntax error, definition ignored */ |
jdaggett@7041 | 4806 | @character-variant { gamma: 12; } /* implies cv12 = 1 */ |
jdaggett@7041 | 4807 | @character-variant { zeta: 20 3; } /* implies cv20 = 3 */ |
jdaggett@7041 | 4808 | @character-variant { zeta-2: 20 2; } /* implies cv20 = 2 */ |
jdaggett@7041 | 4809 | @character-variant { silly: 105; } /* >99, ignored */ |
jdaggett@7041 | 4810 | @character-variant { dumb: 323 3; } /* >99, ignored */ |
jdaggett@2472 | 4811 | } |
jdaggett@2472 | 4812 | |
jdaggett@2472 | 4813 | #title { |
jdaggett@2472 | 4814 | /* use the third alternate beta, first alternate gamma */ |
jdaggett@2472 | 4815 | font-variant-alternates: character-variant(beta-3, gamma); |
jdaggett@3571 | 4816 | } |
jdaggett@3571 | 4817 | |
jdaggett@3571 | 4818 | p { |
jdaggett@3571 | 4819 | /* zeta-2 follows zeta, implies cv20 = 2 */ |
jdaggett@3571 | 4820 | font-variant-alternates: character-variant(zeta, zeta-2); |
jdaggett@3571 | 4821 | } |
jdaggett@3571 | 4822 | |
jdaggett@3571 | 4823 | .special { |
jdaggett@3571 | 4824 | /* zeta follows zeta-2, implies cv20 = 3 */ |
jdaggett@3571 | 4825 | font-variant-alternates: character-variant(zeta-2, zeta); |
jdaggett@2472 | 4826 | }</pre> |
jdaggett@2472 | 4827 | |
jdaggett@2472 | 4828 | <div class=figure><img alt="Matching text on Byzantine seals using |
jdaggett@2472 | 4829 | character variants" src=byzantineseal.png> |
jdaggett@2472 | 4830 | <p class=caption>Byzantine seal text displayed with character variants |
jdaggett@2472 | 4831 | </div> |
jdaggett@2472 | 4832 | |
jdaggett@2472 | 4833 | <div class=example> |
jdaggett@2472 | 4834 | <p>In the figure above, the text in red is rendered using a font |
jdaggett@2472 | 4835 | containing character variants that mimic the character forms found on a |
jdaggett@2472 | 4836 | Byzantine seal from the 8th century A.D. Two lines below is the same text |
jdaggett@2472 | 4837 | displayed in a font without variants. Note the two variants for U and N |
jdaggett@2509 | 4838 | used on the seal.</p> |
jdaggett@2472 | 4839 | |
jdaggett@2472 | 4840 | <pre>@font-feature-values Athena Ruby { |
jdaggett@7041 | 4841 | @character-variant { |
jdaggett@7041 | 4842 | leo-B: 2 1; |
jdaggett@7041 | 4843 | leo-M: 13 3; |
jdaggett@7041 | 4844 | leo-alt-N: 14 1; |
jdaggett@7041 | 4845 | leo-N: 14 2; |
jdaggett@8277 | 4846 | leo-T: 20 1; |
jdaggett@7041 | 4847 | leo-U: 21 2; |
jdaggett@7041 | 4848 | leo-alt-U: 21 4; |
jdaggett@7041 | 4849 | } |
jdaggett@2472 | 4850 | } |
jdaggett@2472 | 4851 | |
jdaggett@2472 | 4852 | p { |
jdaggett@6653 | 4853 | font-variant: discretionary-ligatures, |
jdaggett@6653 | 4854 | character-variant(leo-B, leo-M, leo-N, leo-T, leo-U); |
jdaggett@2472 | 4855 | } |
jdaggett@2472 | 4856 | |
jdaggett@8277 | 4857 | span.alt-N { |
jdaggett@2472 | 4858 | font-variant-alternates: character-variant(leo-alt-N); |
jdaggett@2472 | 4859 | } |
jdaggett@2472 | 4860 | |
jdaggett@2472 | 4861 | span.alt-U { |
jdaggett@2472 | 4862 | font-variant-alternates: character-variant(leo-alt-U); |
jdaggett@2472 | 4863 | } |
jdaggett@2472 | 4864 | |
jdaggett@2472 | 4865 | <p>ENO....UP͞RSTU<span class="alt-U">U</span>͞<span class="alt-U">U</span>ΚΑΙTỤẠG̣IUPNS</p> |
jdaggett@2472 | 4866 | |
jdaggett@8277 | 4867 | <p>LEON|ΚΑΙCONSTA|NTI<span class="alt-N">N</span>OS..|STOIBAṢ.|LIṢROM|AIO<span class="alt-N">N</span></p> |
jdaggett@2472 | 4868 | </pre> |
jdaggett@2118 | 4869 | </div> |
jdaggett@2118 | 4870 | |
jdaggett@2118 | 4871 | <h3 id=font-variant-east-asian-prop><span class=secno>6.10 </span>East |
jdaggett@2118 | 4872 | Asian text rendering: the <a |
jdaggett@1662 | 4873 | href="#propdef-font-variant-east-asian">font-variant-east-asian</a> |
jdaggett@1662 | 4874 | property</h3> |
jdaggett@1662 | 4875 | |
jdaggett@5809 | 4876 | <table class=propdef id=namefont-variant-east-asianvaluenormal-l> |
jdaggett@1662 | 4877 | <tbody> |
jdaggett@1662 | 4878 | <tr> |
jdaggett@1662 | 4879 | <td>Name: |
jdaggett@1662 | 4880 | |
jdaggett@1662 | 4881 | <td><dfn |
jdaggett@1662 | 4882 | id=propdef-font-variant-east-asian>font-variant-east-asian</dfn> |
jdaggett@1662 | 4883 | |
jdaggett@1662 | 4884 | <tr> |
jdaggett@1662 | 4885 | <td>Value: |
jdaggett@1662 | 4886 | |
jdaggett@8278 | 4887 | <td><a href="#font-variant-east-asian-normal-value" |
jdaggett@8278 | 4888 | title="normal!!font-variant-east-asian">normal</a> | [ <a |
jdaggett@8225 | 4889 | href="#east-asian-variant-values"><var><east-asian-variant-values></var></a> |
jdaggett@8225 | 4890 | || <a |
jdaggett@8225 | 4891 | href="#east-asian-width-values"><var><east-asian-width-values></var></a> |
jdaggett@8225 | 4892 | || <a href="#ruby">ruby</a> ] |
jdaggett@1662 | 4893 | |
jdaggett@1662 | 4894 | <tr> |
jdaggett@1662 | 4895 | <td>Initial: |
jdaggett@1662 | 4896 | |
jdaggett@1662 | 4897 | <td>normal |
jdaggett@1662 | 4898 | |
jdaggett@1662 | 4899 | <tr> |
jdaggett@1662 | 4900 | <td>Applies to: |
jdaggett@1662 | 4901 | |
jdaggett@1662 | 4902 | <td>all elements |
jdaggett@1662 | 4903 | |
jdaggett@1662 | 4904 | <tr> |
jdaggett@1662 | 4905 | <td>Inherited: |
jdaggett@1662 | 4906 | |
jdaggett@1662 | 4907 | <td>yes |
jdaggett@1662 | 4908 | |
jdaggett@1662 | 4909 | <tr> |
jdaggett@1662 | 4910 | <td>Percentages: |
jdaggett@1662 | 4911 | |
jdaggett@1662 | 4912 | <td>N/A |
jdaggett@1662 | 4913 | |
jdaggett@1662 | 4914 | <tr> |
jdaggett@1662 | 4915 | <td>Media: |
jdaggett@1662 | 4916 | |
jdaggett@1662 | 4917 | <td>visual |
jdaggett@1662 | 4918 | |
jdaggett@1662 | 4919 | <tr> |
jdaggett@1662 | 4920 | <td>Computed value: |
jdaggett@1662 | 4921 | |
jdaggett@1662 | 4922 | <td>as specified |
jdaggett@7377 | 4923 | |
jdaggett@7377 | 4924 | <tr> |
jdaggett@7377 | 4925 | <td>Animatable: |
jdaggett@7377 | 4926 | |
jdaggett@7377 | 4927 | <td>no |
jdaggett@1662 | 4928 | </table> |
jdaggett@1662 | 4929 | |
jdaggett@6693 | 4930 | <p>Allows control of glyph substitution and sizing in East Asian text. |
jdaggett@1662 | 4931 | |
jdaggett@1662 | 4932 | <pre |
jdaggett@8225 | 4933 | class=prod><dfn id=east-asian-variant-values><var><east-asian-variant-values></var></dfn> = [ <a href="#jis78">jis78</a> | <a href="#jis83">jis83</a> | <a href="#jis90">jis90</a> | <a href="#jis04">jis04</a> | <a href="#simplified">simplified</a> | <a href="#traditional">traditional</a> ]</pre> |
jdaggett@1662 | 4934 | |
jdaggett@1662 | 4935 | <pre |
jdaggett@8225 | 4936 | class=prod><dfn id=east-asian-width-values><var><east-asian-width-values></var></dfn> = [ <a href="#full-width">full-width</a> | <a href="#proportional-width">proportional-width</a> ]</pre> |
jdaggett@1732 | 4937 | |
jdaggett@1732 | 4938 | <p>Individual values have the following meanings: |
jdaggett@1662 | 4939 | |
jdaggett@1662 | 4940 | <dl> |
jdaggett@8278 | 4941 | <dt><dfn id=font-variant-east-asian-normal-value |
jdaggett@8278 | 4942 | title="normal!!font-variant-east-asian">normal</dfn> |
jdaggett@5809 | 4943 | |
jdaggett@5809 | 4944 | <dd>None of the features listed below are enabled. |
jdaggett@5809 | 4945 | |
jdaggett@1662 | 4946 | <dt><dfn id=jis78>jis78</dfn> |
jdaggett@1662 | 4947 | |
jdaggett@6436 | 4948 | <dd>Enables rendering of JIS78 forms (OpenType feature: <span |
jdaggett@6436 | 4949 | class=tag>jp78</span>). |
jdaggett@1662 | 4950 | </dl> |
jdaggett@1662 | 4951 | |
jdaggett@1662 | 4952 | <div class=featex><img alt="JIS78 form example" src=jp78.png></div> |
jdaggett@1662 | 4953 | |
jdaggett@1662 | 4954 | <dl> |
jdaggett@1662 | 4955 | <dt><dfn id=jis83>jis83</dfn> |
jdaggett@1662 | 4956 | |
jdaggett@6436 | 4957 | <dd>Enables rendering of JIS83 forms (OpenType feature: <span |
jdaggett@6436 | 4958 | class=tag>jp83</span>). |
jdaggett@1662 | 4959 | |
jdaggett@1662 | 4960 | <dt><dfn id=jis90>jis90</dfn> |
jdaggett@1662 | 4961 | |
jdaggett@6436 | 4962 | <dd>Enables rendering of JIS90 forms (OpenType feature: <span |
jdaggett@6436 | 4963 | class=tag>jp90</span>). |
jdaggett@1662 | 4964 | |
jdaggett@1662 | 4965 | <dt><dfn id=jis04>jis04</dfn> |
jdaggett@1662 | 4966 | |
jdaggett@6436 | 4967 | <dd>Enables rendering of JIS2004 forms (OpenType feature: <span |
jdaggett@6436 | 4968 | class=tag>jp04</span>). |
jdaggett@6693 | 4969 | <p>The various JIS variants reflect the glyph forms defined in different |
jdaggett@6693 | 4970 | Japanese national standards. Fonts generally include glyphs defined by |
jdaggett@6693 | 4971 | the most recent national standard but it's sometimes necessary to use |
jdaggett@6693 | 4972 | older variants, to match signage for example.</p> |
jdaggett@1662 | 4973 | |
jdaggett@2504 | 4974 | <dt><dfn id=simplified>simplified</dfn> |
jdaggett@2504 | 4975 | |
jdaggett@6436 | 4976 | <dd>Enables rendering of simplified forms (OpenType feature: <span |
jdaggett@6436 | 4977 | class=tag>smpl</span>). |
jdaggett@2504 | 4978 | |
jdaggett@2504 | 4979 | <dt><dfn id=traditional>traditional</dfn> |
jdaggett@2504 | 4980 | |
jdaggett@6436 | 4981 | <dd>Enables rendering of traditional forms (OpenType feature: <span |
jdaggett@6436 | 4982 | class=tag>trad</span>). |
jdaggett@1662 | 4983 | </dl> |
jdaggett@1662 | 4984 | |
jdaggett@8312 | 4985 | <p>The ‘<a href="#simplified"><code |
jdaggett@8312 | 4986 | class=property>simplified</code></a>’ and ‘<a |
jdaggett@8312 | 4987 | href="#traditional"><code class=property>traditional</code></a>’ values |
jdaggett@8312 | 4988 | allow control over the glyph forms for characters which have been |
jdaggett@8312 | 4989 | simplified over time but for which the older, traditional form is still |
jdaggett@8312 | 4990 | used in some contexts. The exact set of characters and glyph forms will |
jdaggett@8312 | 4991 | vary to some degree by context for which a given font was designed. |
jdaggett@8312 | 4992 | |
jdaggett@1662 | 4993 | <div class=featex><img alt="tradtional form example" src=trad.png></div> |
jdaggett@1662 | 4994 | |
jdaggett@1662 | 4995 | <dl> |
jdaggett@1662 | 4996 | <dt><dfn id=full-width>full-width</dfn> |
jdaggett@1662 | 4997 | |
jdaggett@6436 | 4998 | <dd>Enables rendering of full-width variants (OpenType feature: <span |
jdaggett@6436 | 4999 | class=tag>fwid</span>). |
jdaggett@1662 | 5000 | |
jdaggett@1662 | 5001 | <dt><dfn id=proportional-width>proportional-width</dfn> |
jdaggett@1662 | 5002 | |
jdaggett@1662 | 5003 | <dd>Enables rendering of proportionally-spaced variants (OpenType feature: |
jdaggett@6436 | 5004 | <span class=tag>pwid</span>). |
jdaggett@1662 | 5005 | </dl> |
jdaggett@1662 | 5006 | |
jdaggett@1662 | 5007 | <div class=featex><img alt="proportionally spaced Japanese example" |
jdaggett@1662 | 5008 | src=pwid.png></div> |
jdaggett@1662 | 5009 | |
jdaggett@3638 | 5010 | <dl> |
jdaggett@3638 | 5011 | <dt><dfn id=ruby>ruby</dfn> |
jdaggett@3638 | 5012 | |
jdaggett@6436 | 5013 | <dd>Enables display of ruby variant glyphs (OpenType feature: <span |
jdaggett@6436 | 5014 | class=tag>ruby</span>). Since ruby text is generally smaller than the |
jdaggett@3638 | 5015 | associated body text, font designers can design special glyphs for use |
jdaggett@3638 | 5016 | with ruby that are more readable than scaled down versions of the default |
jdaggett@3638 | 5017 | glyphs. Only glyph selection is affected, there is no associated font |
jdaggett@3638 | 5018 | scaling or other change that affects line layout. The red ruby text below |
jdaggett@3638 | 5019 | is shown with default glyphs (top) and with ruby variant glyphs (bottom). |
jdaggett@3638 | 5020 | Note the slight difference in stroke thickness. |
jdaggett@3638 | 5021 | </dl> |
jdaggett@3638 | 5022 | |
jdaggett@3638 | 5023 | <div class=featex><img alt="ruby variant example" src=rubyshinkansen.png></div> |
jdaggett@3638 | 5024 | |
jdaggett@2118 | 5025 | <h3 id=font-variant-prop><span class=secno>6.11 </span>Overall shorthand |
jdaggett@1856 | 5026 | for font rendering: the <a href="#propdef-font-variant">font-variant</a> |
jdaggett@1662 | 5027 | property</h3> |
jdaggett@1662 | 5028 | |
jdaggett@6436 | 5029 | <table class=propdef id=namefont-variantvaluenormal-none-ltcommo> |
jdaggett@1662 | 5030 | <tbody> |
jdaggett@1662 | 5031 | <tr> |
jdaggett@1662 | 5032 | <td>Name: |
jdaggett@1662 | 5033 | |
jdaggett@8278 | 5034 | <td><dfn id=propdef-font-variant |
jdaggett@8278 | 5035 | title="font-variant!!property">font-variant</dfn> |
jdaggett@1662 | 5036 | |
jdaggett@1662 | 5037 | <tr> |
jdaggett@1662 | 5038 | <td>Value: |
jdaggett@1662 | 5039 | |
jdaggett@8278 | 5040 | <td><a href="#font-variant-normal-value" |
jdaggett@8278 | 5041 | title="normal!!font-variant">normal</a> | <a |
jdaggett@8278 | 5042 | href="#font-variant-none-value" title="none!!font-variant">none</a> | [ |
jdaggett@8278 | 5043 | <a href="#common-lig-values"><var><common-lig-values></var></a> |
jdaggett@8278 | 5044 | || <a |
jdaggett@8225 | 5045 | href="#discretionary-lig-values"><var><discretionary-lig-values></var></a> |
jdaggett@8225 | 5046 | || <a |
jdaggett@8225 | 5047 | href="#historical-lig-values"><var><historical-lig-values></var></a> |
jdaggett@8225 | 5048 | || <a |
jdaggett@8225 | 5049 | href="#contextual-alt-values"><var><contextual-alt-values></var></a> |
jdaggett@8225 | 5050 | || <a href="#stylistic"><var |
jdaggett@8225 | 5051 | title=stylistic>stylistic(<feature-value-name>)</var></a> || <a |
jdaggett@8225 | 5052 | href="#historical-forms"><var>historical-forms</var></a> || <a |
jdaggett@8225 | 5053 | href="#styleset"><var |
jdaggett@8225 | 5054 | title=styleset>styleset(<feature-value-name> #)</var></a> || <a |
jdaggett@8225 | 5055 | href="#character-variant"><var |
jdaggett@8225 | 5056 | title=character-variant>character-variant(<feature-value-name> |
jdaggett@8225 | 5057 | #)</var></a> || <a href="#swash"><var |
jdaggett@8225 | 5058 | title=swash>swash(<feature-value-name>)</var></a> || <a |
jdaggett@8225 | 5059 | href="#ornaments"><var |
jdaggett@8225 | 5060 | title=ornaments>ornaments(<feature-value-name>)</var></a> || <a |
jdaggett@8225 | 5061 | href="#annotation"><var |
jdaggett@8225 | 5062 | title=annotation>annotation(<feature-value-name>)</var></a> || [ |
jdaggett@8225 | 5063 | <a href="#small-caps"><i>small-caps</i></a> | <a |
jdaggett@8225 | 5064 | href="#all-small-caps"><i>all-small-caps</i></a> | <a |
jdaggett@8225 | 5065 | href="#petite-caps"><i>petite-caps</i></a> | <a |
jdaggett@8225 | 5066 | href="#all-petite-caps"><i>all-petite-caps</i></a> | <a |
jdaggett@8225 | 5067 | href="#unicase"><i>unicase</i></a> | <a |
jdaggett@8225 | 5068 | href="#titling-caps"><i>titling-caps</i></a> ] || <a |
jdaggett@8225 | 5069 | href="#numeric-figure-values"><var><numeric-figure-values></var></a> |
jdaggett@8225 | 5070 | || <a |
jdaggett@8225 | 5071 | href="#numeric-spacing-values"><var><numeric-spacing-values></var></a> |
jdaggett@8225 | 5072 | || <a |
jdaggett@8225 | 5073 | href="#numeric-fraction-values"><var><numeric-fraction-values></var></a> |
jdaggett@8225 | 5074 | || <a href="#ordinal"><i>ordinal</i></a> || <a |
jdaggett@8225 | 5075 | href="#slashed-zero"><i>slashed-zero</i></a> || <a |
jdaggett@8225 | 5076 | href="#east-asian-variant-values"><var><east-asian-variant-values></var></a> |
jdaggett@8225 | 5077 | || <a |
jdaggett@8225 | 5078 | href="#east-asian-width-values"><var><east-asian-width-values></var></a> |
jdaggett@8225 | 5079 | || <a href="#ruby"><i>ruby</i></a> ] |
jdaggett@1662 | 5080 | |
jdaggett@1662 | 5081 | <tr> |
jdaggett@1662 | 5082 | <td>Initial: |
jdaggett@1662 | 5083 | |
jdaggett@1662 | 5084 | <td>normal |
jdaggett@1662 | 5085 | |
jdaggett@1662 | 5086 | <tr> |
jdaggett@1662 | 5087 | <td>Applies to: |
jdaggett@1662 | 5088 | |
jdaggett@1662 | 5089 | <td>all elements |
jdaggett@1662 | 5090 | |
jdaggett@1662 | 5091 | <tr> |
jdaggett@1662 | 5092 | <td>Inherited: |
jdaggett@1662 | 5093 | |
jdaggett@1662 | 5094 | <td>yes |
jdaggett@1662 | 5095 | |
jdaggett@1662 | 5096 | <tr> |
jdaggett@1662 | 5097 | <td>Percentages: |
jdaggett@1662 | 5098 | |
jdaggett@7377 | 5099 | <td>see individual properties |
jdaggett@1662 | 5100 | |
jdaggett@1662 | 5101 | <tr> |
jdaggett@1662 | 5102 | <td>Media: |
jdaggett@1662 | 5103 | |
jdaggett@1662 | 5104 | <td>visual |
jdaggett@1662 | 5105 | |
jdaggett@1662 | 5106 | <tr> |
jdaggett@1662 | 5107 | <td>Computed value: |
jdaggett@1662 | 5108 | |
jdaggett@7377 | 5109 | <td>see individual properties |
jdaggett@7377 | 5110 | |
jdaggett@7377 | 5111 | <tr> |
jdaggett@7377 | 5112 | <td>Animatable: |
jdaggett@7377 | 5113 | |
jdaggett@7377 | 5114 | <td>see individual properties |
jdaggett@1662 | 5115 | </table> |
jdaggett@1662 | 5116 | |
jdaggett@8313 | 5117 | <p>The <a href="#propdef-font-variant" |
jdaggett@8313 | 5118 | title="font-variant!!property">‘<code |
jdaggett@8313 | 5119 | class=property>font-variant</code>’</a> property is a shorthand for all |
jdaggett@8313 | 5120 | font-variant subproperties. The value <dfn id=font-variant-normal-value |
jdaggett@8313 | 5121 | title="normal!!font-variant">‘<code |
jdaggett@8313 | 5122 | class=property>normal</code>’</dfn> resets all subproperties of <a |
jdaggett@8313 | 5123 | href="#propdef-font-variant" title="font-variant!!property">‘<code |
jdaggett@8313 | 5124 | class=property>font-variant</code>’</a> to their inital value. The <dfn |
jdaggett@8313 | 5125 | id=font-variant-none-value title="none!!font-variant">‘<code |
jdaggett@8313 | 5126 | class=property>none</code>’</dfn> value sets ‘<a |
jdaggett@8313 | 5127 | href="#propdef-font-variant-ligatures"><code |
jdaggett@8278 | 5128 | class=property>font-variant-ligatures</code></a>’ to ‘<code |
jdaggett@8278 | 5129 | class=property>none</code>’ and resets all other font feature properties |
jdaggett@8278 | 5130 | to their initial value. Like other shorthands, using <a |
jdaggett@8278 | 5131 | href="#propdef-font-variant" title="font-variant!!property">‘<code |
jdaggett@8313 | 5132 | class=property>font-variant</code>’</a> resets unspecified <a |
jdaggett@8313 | 5133 | href="#propdef-font-variant" title="font-variant!!property">‘<code |
jdaggett@8313 | 5134 | class=property>font-variant</code>’</a> subproperties to their initial |
jdaggett@8313 | 5135 | values. It does not reset the values of either ‘<a |
jdaggett@8313 | 5136 | href="#propdef-font-language-override"><code |
jdaggett@8279 | 5137 | class=property>font-language-override</code></a>’ or <a |
jdaggett@8279 | 5138 | href="#propdef-font-feature-settings" |
jdaggett@8279 | 5139 | title="font-feature-settings!!property">‘<code |
jdaggett@8279 | 5140 | class=property>font-feature-settings</code>’</a>. |
jdaggett@1662 | 5141 | |
jdaggett@2118 | 5142 | <h3 id=font-feature-settings-prop><span class=secno>6.12 </span>Low-level |
jdaggett@2509 | 5143 | font feature settings control: the <a |
jdaggett@1662 | 5144 | href="#propdef-font-feature-settings">font-feature-settings</a> property</h3> |
jdaggett@1662 | 5145 | |
jdaggett@4624 | 5146 | <table class=propdef id=namefont-feature-settingsvaluenormal-ltf> |
jdaggett@1662 | 5147 | <tbody> |
jdaggett@1662 | 5148 | <tr> |
jdaggett@1662 | 5149 | <td>Name: |
jdaggett@1662 | 5150 | |
jdaggett@8279 | 5151 | <td><dfn id=propdef-font-feature-settings |
jdaggett@8279 | 5152 | title="font-feature-settings!!property">font-feature-settings</dfn> |
jdaggett@1662 | 5153 | |
jdaggett@1662 | 5154 | <tr> |
jdaggett@1662 | 5155 | <td>Value: |
jdaggett@1662 | 5156 | |
jdaggett@8278 | 5157 | <td><a href="#font-feature-settings-normal-value" |
jdaggett@8278 | 5158 | title="normal!!font-feature-settings">normal</a> | <a |
jdaggett@8225 | 5159 | href="#feature-tag-value"><var><feature-tag-value></var></a> # |
jdaggett@1662 | 5160 | |
jdaggett@1662 | 5161 | <tr> |
jdaggett@1662 | 5162 | <td>Initial: |
jdaggett@1662 | 5163 | |
jdaggett@1662 | 5164 | <td>normal |
jdaggett@1662 | 5165 | |
jdaggett@1662 | 5166 | <tr> |
jdaggett@1662 | 5167 | <td>Applies to: |
jdaggett@1662 | 5168 | |
jdaggett@1662 | 5169 | <td>all elements |
jdaggett@1662 | 5170 | |
jdaggett@1662 | 5171 | <tr> |
jdaggett@1662 | 5172 | <td>Inherited: |
jdaggett@1662 | 5173 | |
jdaggett@1662 | 5174 | <td>yes |
jdaggett@1662 | 5175 | |
jdaggett@1662 | 5176 | <tr> |
jdaggett@1662 | 5177 | <td>Percentages: |
jdaggett@1662 | 5178 | |
jdaggett@1662 | 5179 | <td>N/A |
jdaggett@1662 | 5180 | |
jdaggett@1662 | 5181 | <tr> |
jdaggett@1662 | 5182 | <td>Media: |
jdaggett@1662 | 5183 | |
jdaggett@1662 | 5184 | <td>visual |
jdaggett@1662 | 5185 | |
jdaggett@1662 | 5186 | <tr> |
jdaggett@1662 | 5187 | <td>Computed value: |
jdaggett@1662 | 5188 | |
jdaggett@1662 | 5189 | <td>as specified |
jdaggett@7377 | 5190 | |
jdaggett@7377 | 5191 | <tr> |
jdaggett@7377 | 5192 | <td>Animatable: |
jdaggett@7377 | 5193 | |
jdaggett@7377 | 5194 | <td>no |
jdaggett@1662 | 5195 | </table> |
jdaggett@2474 | 5196 | |
jdaggett@2474 | 5197 | <p>This property provides low-level control over OpenType font features. It |
jdaggett@2474 | 5198 | is intended as a way of providing access to font features that are not |
jdaggett@8312 | 5199 | widely used but are needed for a particular use case. |
jdaggett@8312 | 5200 | |
jdaggett@8312 | 5201 | <p>Authors should generally use <a href="#propdef-font-variant" |
jdaggett@8312 | 5202 | title="font-variant!!property">‘<code |
jdaggett@8312 | 5203 | class=property>font-variant</code>’</a> and its related subproperties |
jdaggett@8312 | 5204 | whenever possible and only use this property for special cases where its |
jdaggett@8312 | 5205 | use is the only way of accessing a particular infrequently used font |
jdaggett@8312 | 5206 | feature. |
jdaggett@8312 | 5207 | |
jdaggett@8312 | 5208 | <pre>/* enable small caps and use second swash alternate */ |
jdaggett@8312 | 5209 | font-feature-settings: "smcp", "swsh" 2;</pre> |
jdaggett@8312 | 5210 | |
jdaggett@8312 | 5211 | <p>A value of <dfn id=font-feature-settings-normal-value |
jdaggett@8278 | 5212 | title="normal!!font-feature-settings">‘<code |
jdaggett@8278 | 5213 | class=property>normal</code>’</dfn> means that no change in glyph |
jdaggett@8278 | 5214 | selection or positioning occurs due to this property. |
jdaggett@2474 | 5215 | |
jdaggett@2509 | 5216 | <p>Feature tag values have the following syntax: |
jdaggett@2474 | 5217 | |
jdaggett@2474 | 5218 | <pre |
jdaggett@8225 | 5219 | class=prod><dfn id=feature-tag-value><var><feature-tag-value></var></dfn> = <string> [ <integer> | on | off ]?</pre> |
jdaggett@2509 | 5220 | |
jdaggett@5532 | 5221 | <p>The <string> is a case-sensitive OpenType feature tag. As |
jdaggett@5532 | 5222 | specified in the OpenType specification, feature tags contain four ASCII |
jdaggett@5532 | 5223 | characters. Tag strings longer or shorter than four characters, or |
jdaggett@5596 | 5224 | containing characters outside the U+20–7E codepoint range are invalid. |
jdaggett@8312 | 5225 | Feature tags need only match a feature tag defined in the font, so they |
jdaggett@8312 | 5226 | are not limited to explicitly registered OpenType features. Fonts defining |
jdaggett@8312 | 5227 | custom feature tags should follow the <a |
jdaggett@2474 | 5228 | href="http://www.microsoft.com/typography/otspec/featuretags.htm">tag name |
jdaggett@2474 | 5229 | rules</a> defined in the OpenType specification <a |
jdaggett@1662 | 5230 | href="#OPENTYPE-FEATURES" |
jdaggett@2474 | 5231 | rel=biblioentry>[OPENTYPE-FEATURES]<!--{{!OPENTYPE-FEATURES}}--></a>. |
jdaggett@2474 | 5232 | Feature tags not present in the font are ignored; a user agent must not |
jdaggett@2474 | 5233 | attempt to synthesize fallback behavior based on these feature tags. |
jdaggett@2474 | 5234 | |
jdaggett@6436 | 5235 | <p>This means that explicitly disabling the <span class=tag>kern</span> |
jdaggett@6436 | 5236 | feature will not affect the application of kerning data found in the |
jdaggett@6436 | 5237 | ‘<code class=property>kern</code>’ table (as opposed to kerning data |
jdaggett@6436 | 5238 | associated with the <span class=tag>kern</span> feature in the ‘<code |
jdaggett@5946 | 5239 | class=property>GPOS</code>’ table). Authors should use the ‘<a |
jdaggett@5946 | 5240 | href="#propdef-font-kerning"><code |
jdaggett@5946 | 5241 | class=property>font-kerning</code></a>’ property to explictly enable or |
jdaggett@5946 | 5242 | disable kerning since this property affects both types of kerning. |
jdaggett@5946 | 5243 | |
jdaggett@2509 | 5244 | <p>If present, a value indicates an index used for glyph selection. An |
jdaggett@2509 | 5245 | <integer> value must be 0 or greater. A value of 0 indicates that |
jdaggett@2509 | 5246 | the feature is disabled. For boolean features, a value of 1 enables the |
jdaggett@2509 | 5247 | feature. For non-boolean features, a value of 1 or greater enables the |
jdaggett@2509 | 5248 | feature and indicates the feature selection index. A value of ‘<code |
jdaggett@2509 | 5249 | class=property>on</code>’ is synonymous with 1 and ‘<code |
jdaggett@2509 | 5250 | class=property>off</code>’ is synonymous with 0. If the value is |
jdaggett@2509 | 5251 | omitted, a value of 1 is assumed. |
jdaggett@2474 | 5252 | |
jdaggett@2474 | 5253 | <pre> |
jdaggett@2509 | 5254 | font-feature-settings: "dlig" 1; /* dlig=1 enable discretionary ligatures */ |
jdaggett@2509 | 5255 | font-feature-settings: "smcp" on; /* smcp=1 enable small caps */ |
jdaggett@2515 | 5256 | font-feature-settings: 'c2sc'; /* c2sc=1 enable caps to small caps */ |
jdaggett@2509 | 5257 | font-feature-settings: "liga" off; /* liga=0 no common ligatures */ |
jdaggett@2515 | 5258 | font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms */ |
jdaggett@5530 | 5259 | font-feature-settings: "tnum" "hist"; /* invalid, need a comma-delimited list */ |
jdaggett@5530 | 5260 | font-feature-settings: "palin" off; /* good idea but invalid tagname */ |
jdaggett@2509 | 5261 | font-feature-settings: "PKRN"; /* PKRN=1 enable custom feature */ |
jdaggett@5530 | 5262 | font-feature-settings: dlig; /* invalid, tag must be a string */ |
jdaggett@2474 | 5263 | </pre> |
jdaggett@1662 | 5264 | |
jdaggett@8272 | 5265 | <p>When values greater than the range supported by the font are specified, |
jdaggett@8272 | 5266 | the behavior is explicitly undefined. For boolean features, in general |
jdaggett@8272 | 5267 | these will enable the feature. For non-boolean features, out of range |
jdaggett@8272 | 5268 | values will in general be equivalent to a 0 value. However, in both cases |
jdaggett@8272 | 5269 | the exact behavior will depend upon the way the font is designed |
jdaggett@8272 | 5270 | (specifically, which type of lookup is used to define the feature). |
jdaggett@8272 | 5271 | |
jdaggett@2474 | 5272 | <p>Although specifically defined for OpenType feature tags, feature tags |
jdaggett@2474 | 5273 | for other modern font formats that support font features may be added in |
jdaggett@5530 | 5274 | the future. Where possible, features defined for other font formats should |
jdaggett@5530 | 5275 | attempt to follow the pattern of registered OpenType tags. |
jdaggett@2509 | 5276 | |
jdaggett@1662 | 5277 | <div class=example> |
jdaggett@1662 | 5278 | <p>The Japanese text below will be rendered with half-width kana |
jdaggett@1662 | 5279 | characters:</p> |
jdaggett@1662 | 5280 | |
jdaggett@1662 | 5281 | <pre lang=ja> |
jdaggett@2509 | 5282 | body { font-feature-settings: "hwid"; /* Half-width OpenType feature */ } |
jdaggett@1662 | 5283 | |
jdaggett@1662 | 5284 | <p>毎日<a href="http://images.google.com/images?q=%E3%82%AB%E3%83%AC%E3%83%BC" style="text-decoration: none;">カレー</a>食べてるのに、飽きない</p> |
jdaggett@1662 | 5285 | </pre> |
jdaggett@1662 | 5286 | </div> |
jdaggett@1662 | 5287 | |
jdaggett@2118 | 5288 | <h3 id=font-language-override-prop><span class=secno>6.13 </span>Font |
jdaggett@1732 | 5289 | language override: the <a |
jdaggett@1732 | 5290 | href="#propdef-font-language-override">font-language-override</a> property</h3> |
jdaggett@1732 | 5291 | |
jdaggett@5809 | 5292 | <table class=propdef id=namefont-language-overridevaluenormal-lt> |
jdaggett@1662 | 5293 | <tbody> |
jdaggett@1662 | 5294 | <tr> |
jdaggett@1662 | 5295 | <td>Name: |
jdaggett@1662 | 5296 | |
jdaggett@1732 | 5297 | <td><dfn id=propdef-font-language-override>font-language-override</dfn> |
jdaggett@1662 | 5298 | |
jdaggett@1662 | 5299 | <tr> |
jdaggett@1662 | 5300 | <td>Value: |
jdaggett@1662 | 5301 | |
jdaggett@8278 | 5302 | <td><a href="#font-language-override-normal-value" |
jdaggett@8278 | 5303 | title="normal!!font-language-override">normal</a> | <a |
jdaggett@8278 | 5304 | href="#font-language-override-string-value"><var><string></var></a> |
jdaggett@1662 | 5305 | |
jdaggett@1662 | 5306 | <tr> |
jdaggett@1662 | 5307 | <td>Initial: |
jdaggett@1662 | 5308 | |
jdaggett@8278 | 5309 | <td><a href="#font-language-override-normal-value" |
jdaggett@8278 | 5310 | title="normal!!font-language-override">normal</a> |
jdaggett@1662 | 5311 | |
jdaggett@1662 | 5312 | <tr> |
jdaggett@1662 | 5313 | <td>Applies to: |
jdaggett@1662 | 5314 | |
jdaggett@1662 | 5315 | <td>all elements |
jdaggett@1662 | 5316 | |
jdaggett@1662 | 5317 | <tr> |
jdaggett@1662 | 5318 | <td>Inherited: |
jdaggett@1662 | 5319 | |
jdaggett@1662 | 5320 | <td>yes |
jdaggett@1662 | 5321 | |
jdaggett@1662 | 5322 | <tr> |
jdaggett@1662 | 5323 | <td>Percentages: |
jdaggett@1662 | 5324 | |
jdaggett@1662 | 5325 | <td>N/A |
jdaggett@1662 | 5326 | |
jdaggett@1662 | 5327 | <tr> |
jdaggett@1662 | 5328 | <td>Media: |
jdaggett@1662 | 5329 | |
jdaggett@1662 | 5330 | <td>visual |
jdaggett@1662 | 5331 | |
jdaggett@1662 | 5332 | <tr> |
jdaggett@1662 | 5333 | <td>Computed value: |
jdaggett@1662 | 5334 | |
jdaggett@1662 | 5335 | <td>as specified |
jdaggett@7377 | 5336 | |
jdaggett@7377 | 5337 | <tr> |
jdaggett@7377 | 5338 | <td>Animatable: |
jdaggett@7377 | 5339 | |
jdaggett@7377 | 5340 | <td>no |
jdaggett@1662 | 5341 | </table> |
jdaggett@1662 | 5342 | |
jdaggett@8278 | 5343 | <p>Normally, authors can control the use of language-specific glyph |
jdaggett@8278 | 5344 | substitutions and positioning by setting the content language of an |
jdaggett@8278 | 5345 | element, as <a href="#language-specific-support">described above</a>: |
jdaggett@8278 | 5346 | |
jdaggett@8278 | 5347 | <pre><!-- Display text using S'gaw Karen specific features --> |
jdaggett@8278 | 5348 | <p lang="ksw">...</p></pre> |
jdaggett@8278 | 5349 | |
jdaggett@8278 | 5350 | <p>In some cases, authors may need to specify a language system that |
jdaggett@8278 | 5351 | differs from the content language, for example due to the need to mimic |
jdaggett@8278 | 5352 | another language's typographic traditions. The ‘<a |
jdaggett@8278 | 5353 | href="#propdef-font-language-override"><code |
jdaggett@8278 | 5354 | class=property>font-language-override</code></a>’ property allows |
jdaggett@8278 | 5355 | authors to explicitly specify the language system of the font, overriding |
jdaggett@8278 | 5356 | the language system implied by the content language. |
jdaggett@8278 | 5357 | |
jdaggett@8278 | 5358 | <p>Values have the following meanings: |
jdaggett@8278 | 5359 | |
jdaggett@8278 | 5360 | <dl> |
jdaggett@8278 | 5361 | <dt><dfn id=font-language-override-normal-value |
jdaggett@8278 | 5362 | title="normal!!font-language-override">normal</dfn> |
jdaggett@8278 | 5363 | |
jdaggett@8278 | 5364 | <dd>specifies that when rendering with OpenType fonts, the content |
jdaggett@8278 | 5365 | language of the element is used to infer the OpenType language system |
jdaggett@8278 | 5366 | |
jdaggett@8278 | 5367 | <dt><dfn |
jdaggett@8278 | 5368 | id=font-language-override-string-value><var><string></var></dfn> |
jdaggett@8278 | 5369 | |
jdaggett@8278 | 5370 | <dd>single three-letter OpenType <a |
jdaggett@8278 | 5371 | href="http://www.microsoft.com/typography/otspec/languagetags.htm">language |
jdaggett@8278 | 5372 | system tag</a>, specifies the OpenType language system to be used instead |
jdaggett@8278 | 5373 | of the language system implied by the language of the element |
jdaggett@8278 | 5374 | </dl> |
jdaggett@1662 | 5375 | |
jdaggett@8312 | 5376 | <p>Use of invalid OpenType language system tags must not generate a parse |
jdaggett@8312 | 5377 | error but must be ignored when doing glyph selection and placement. |
jdaggett@8312 | 5378 | |
jdaggett@1662 | 5379 | <div class=example> |
jdaggett@7179 | 5380 | <p>The <a href="http://www.un.org/en/documents/udhr/index.shtml">Universal |
jdaggett@1662 | 5381 | Declaration of Human Rights</a> has been translated into a wide variety |
jdaggett@1662 | 5382 | of languages. In Turkish, Article 9 of this document might be marked up |
jdaggett@1662 | 5383 | as below:</p> |
jdaggett@1662 | 5384 | |
jdaggett@1662 | 5385 | <pre lang=tr><body lang="tr"> |
jdaggett@1662 | 5386 | |
jdaggett@1662 | 5387 | <h4>Madde 9</h4> |
jdaggett@1662 | 5388 | <p>Hiç kimse keyfi olarak tutuklanamaz, alıkonulanamaz veya sürülemez.</p> |
jdaggett@1662 | 5389 | </pre> |
jdaggett@1662 | 5390 | |
jdaggett@1662 | 5391 | <p>Here the user agent uses the value of the ‘<code |
jdaggett@1662 | 5392 | class=property>lang</code>’ attribute when rendering text and |
jdaggett@1662 | 5393 | appropriately renders this text without ‘<code |
jdaggett@4624 | 5394 | class=property>fi</code>’ ligatures. There is no need to use the ‘<a |
jdaggett@4624 | 5395 | href="#propdef-font-language-override"><code |
jdaggett@4624 | 5396 | class=property>font-language-override</code></a>’ property.</p> |
jdaggett@1662 | 5397 | |
jdaggett@1662 | 5398 | <p>However, a given font may lack support for a specific language. In this |
jdaggett@1662 | 5399 | situation authors may need to use the typographic conventions of a |
jdaggett@1662 | 5400 | related language that are supported by that font:</p> |
jdaggett@1662 | 5401 | |
jdaggett@1662 | 5402 | <pre lang=mk><body lang="mk"> <!-- Macedonian lang code --> |
jdaggett@1662 | 5403 | |
jdaggett@1732 | 5404 | body { font-language-override: "SRB"; /* Serbian OpenType language tag */ } |
jdaggett@1662 | 5405 | |
jdaggett@1662 | 5406 | <h4>Члeн 9</h4> |
jdaggett@1662 | 5407 | <p>Никoj чoвeк нeмa дa бидe пoдлoжeн нa прoизвoлнo aпсeњe, притвoр или прoгoнувaњe.</p> |
jdaggett@1662 | 5408 | |
jdaggett@1662 | 5409 | </pre> |
jdaggett@1662 | 5410 | |
jdaggett@1662 | 5411 | <p>The Macedonian text here will be rendered using Serbian typographic |
jdaggett@1662 | 5412 | conventions, with the assumption that the font specified supports |
jdaggett@1662 | 5413 | Serbian.</p> |
jdaggett@1662 | 5414 | </div> |
jdaggett@1662 | 5415 | |
jdaggett@6176 | 5416 | <p><a id=rendering-considerations></a> |
jdaggett@6176 | 5417 | |
jdaggett@6699 | 5418 | <h2 id=font-feature-resolution><span class=secno>7 </span>Font Feature |
jdaggett@6699 | 5419 | Resolution</h2> |
jdaggett@6176 | 5420 | |
jdaggett@6176 | 5421 | <p>As described in the previous section, font features can be enabled in a |
jdaggett@8278 | 5422 | variety of ways, either via the use of <a href="#propdef-font-variant" |
jdaggett@8278 | 5423 | title="font-variant!!property">‘<code |
jdaggett@8279 | 5424 | class=property>font-variant</code>’</a> or <a |
jdaggett@8279 | 5425 | href="#propdef-font-feature-settings" |
jdaggett@8279 | 5426 | title="font-feature-settings!!property">‘<code |
jdaggett@8279 | 5427 | class=property>font-feature-settings</code>’</a> in a style rule or |
jdaggett@8311 | 5428 | within an <a href="#at-font-face-rule"><code>@font-face</code></a> rule. |
jdaggett@8311 | 5429 | The resolution order for the union of these settings is defined below. |
jdaggett@8311 | 5430 | Features defined via CSS properties are applied on top of layout engine |
jdaggett@8311 | 5431 | default features. |
jdaggett@6176 | 5432 | |
jdaggett@6699 | 5433 | <h3 id=default-features><span class=secno>7.1 </span>Default features</h3> |
jdaggett@6699 | 5434 | |
jdaggett@6176 | 5435 | <p>For OpenType fonts, user agents must enable the default features defined |
jdaggett@6436 | 5436 | in the OpenType documentation for a given script and writing mode. |
jdaggett@6436 | 5437 | Required ligatures, common ligatures and contextual forms must be enabled |
jdaggett@6436 | 5438 | by default (OpenType features: <span class=tag>rlig, liga, clig, |
jdaggett@6436 | 5439 | calt</span>), along with localized forms (OpenType feature: <span |
jdaggett@6436 | 5440 | class=tag>locl</span>), and features required for proper display of |
jdaggett@6436 | 5441 | composed characters and marks (OpenType features: <span class=tag>ccmp, |
jdaggett@6436 | 5442 | mark, mkmk</span>). These features must always be enabled, even when the |
jdaggett@8278 | 5443 | value of the <a href="#propdef-font-variant" |
jdaggett@8278 | 5444 | title="font-variant!!property">‘<code |
jdaggett@8279 | 5445 | class=property>font-variant</code>’</a> and <a |
jdaggett@8279 | 5446 | href="#propdef-font-feature-settings" |
jdaggett@8279 | 5447 | title="font-feature-settings!!property">‘<code |
jdaggett@8279 | 5448 | class=property>font-feature-settings</code>’</a> properties is ‘<a |
jdaggett@8279 | 5449 | href="#normal"><code class=property>normal</code></a>’. Individual |
jdaggett@8279 | 5450 | features are only disabled when explicitly overridden by the author, as |
jdaggett@8279 | 5451 | when ‘<a href="#propdef-font-variant-ligatures"><code |
jdaggett@6176 | 5452 | class=property>font-variant-ligatures</code></a>’ is set to ‘<a |
jdaggett@6176 | 5453 | href="#no-common-ligatures"><code |
jdaggett@7377 | 5454 | class=property>no-common-ligatures</code></a>’. For handling complex |
jdaggett@7377 | 5455 | scripts such as <a |
jdaggett@6176 | 5456 | href="http://www.microsoft.com/typography/otfntdev/arabicot/features.aspx">Arabic</a>, |
jdaggett@6176 | 5457 | <a |
jdaggett@6176 | 5458 | href="http://www.microsoft.com/typography/otfntdev/mongolot/features.htm">Mongolian</a> |
jdaggett@6176 | 5459 | or <a |
jdaggett@6176 | 5460 | href="http://www.microsoft.com/typography/otfntdev/devanot/features.aspx">Devanagari</a> |
jdaggett@6436 | 5461 | additional features are required. For upright text within vertical text |
jdaggett@6436 | 5462 | runs, vertical alternates (OpenType feature: <span class=tag>vert</span>) |
jdaggett@6436 | 5463 | must be enabled. |
jdaggett@1662 | 5464 | |
jdaggett@6699 | 5465 | <h3 id=feature-precedence><span class=secno>7.2 </span>Feature precedence</h3> |
jdaggett@6699 | 5466 | |
jdaggett@8356 | 5467 | <p>General and <a href="#font-specific"><em>font specific</em></a> font |
jdaggett@8356 | 5468 | feature property settings are resolved in the order below, in ascending |
jdaggett@8360 | 5469 | order of precedence. This ordering is used to construct a combined list of |
jdaggett@8356 | 5470 | font features that affect a given text run. |
jdaggett@1662 | 5471 | |
jdaggett@1662 | 5472 | <ol> |
jdaggett@6436 | 5473 | <li>Font features enabled by default, including features required for a |
jdaggett@6436 | 5474 | given script. |
jdaggett@6176 | 5475 | |
jdaggett@8311 | 5476 | <li>If the font is defined via an <a |
jdaggett@8311 | 5477 | href="#at-font-face-rule"><code>@font-face</code></a> rule, the font |
jdaggett@8311 | 5478 | features implied by the font-variant descriptor in the <a |
jdaggett@8311 | 5479 | href="#at-font-face-rule"><code>@font-face</code></a> rule. |
jdaggett@8311 | 5480 | |
jdaggett@8311 | 5481 | <li>If the font is defined via an <a |
jdaggett@8311 | 5482 | href="#at-font-face-rule"><code>@font-face</code></a> rule, the font |
jdaggett@8311 | 5483 | features implied by the font-feature-settings descriptor in the <a |
jdaggett@8311 | 5484 | href="#at-font-face-rule"><code>@font-face</code></a> rule. |
jdaggett@1662 | 5485 | |
jdaggett@8278 | 5486 | <li>Feature settings determined by properties other than <a |
jdaggett@8278 | 5487 | href="#propdef-font-variant" title="font-variant!!property">‘<code |
jdaggett@8279 | 5488 | class=property>font-variant</code>’</a> or <a |
jdaggett@8279 | 5489 | href="#propdef-font-feature-settings" |
jdaggett@8279 | 5490 | title="font-feature-settings!!property">‘<code |
jdaggett@8279 | 5491 | class=property>font-feature-settings</code>’</a>. For example, setting |
jdaggett@8279 | 5492 | a non-default value for the ‘<code |
jdaggett@8360 | 5493 | class=property>letter-spacing</code>’ property disables common |
jdaggett@8360 | 5494 | ligatures. |
jdaggett@6176 | 5495 | |
jdaggett@8278 | 5496 | <li>Font features implied by the value of the <a |
jdaggett@8278 | 5497 | href="#propdef-font-variant" title="font-variant!!property">‘<code |
jdaggett@8313 | 5498 | class=property>font-variant</code>’</a> property, the related <a |
jdaggett@8313 | 5499 | href="#propdef-font-variant" title="font-variant!!property">‘<code |
jdaggett@8313 | 5500 | class=property>font-variant</code>’</a> subproperties and any other CSS |
jdaggett@8360 | 5501 | property that uses OpenType features (e.g. the ‘<a |
jdaggett@8313 | 5502 | href="#propdef-font-kerning"><code |
jdaggett@4624 | 5503 | class=property>font-kerning</code></a>’ property). |
jdaggett@4624 | 5504 | |
jdaggett@8279 | 5505 | <li>Font features implied by the value of <a |
jdaggett@8279 | 5506 | href="#propdef-font-feature-settings" |
jdaggett@8279 | 5507 | title="font-feature-settings!!property">‘<code |
jdaggett@8279 | 5508 | class=property>font-feature-settings</code>’</a> property. |
jdaggett@1662 | 5509 | </ol> |
jdaggett@1662 | 5510 | |
jdaggett@3511 | 5511 | <p>This ordering allows authors to set up a general set of defaults for |
jdaggett@8311 | 5512 | fonts within their <a |
jdaggett@8311 | 5513 | href="#at-font-face-rule"><code>@font-face</code></a> rules, then override |
jdaggett@8311 | 5514 | them with property settings for specific elements. General property |
jdaggett@8311 | 5515 | settings override the settings in <a |
jdaggett@8311 | 5516 | href="#at-font-face-rule"><code>@font-face</code></a> rules and low-level |
jdaggett@8311 | 5517 | font feature settings override <a href="#propdef-font-variant" |
jdaggett@8278 | 5518 | title="font-variant!!property">‘<code |
jdaggett@8278 | 5519 | class=property>font-variant</code>’</a> property settings. |
jdaggett@1732 | 5520 | |
jdaggett@1732 | 5521 | <p>For situations where the combined list of font feature settings contains |
jdaggett@3511 | 5522 | more than one value for the same feature, the last value is used. When a |
jdaggett@3511 | 5523 | font lacks support for a given underlying font feature, text is simply |
jdaggett@3511 | 5524 | rendered as if that font feature was not enabled; font fallback does not |
jdaggett@3511 | 5525 | occur and no attempt is made to synthesize the feature except where |
jdaggett@8360 | 5526 | explicitly defined for specific properties. |
jdaggett@1662 | 5527 | |
jdaggett@6699 | 5528 | <h3 id=feature-precedence-examples><span class=secno>7.3 </span>Feature |
jdaggett@6699 | 5529 | precedence examples</h3> |
jdaggett@6699 | 5530 | |
jdaggett@1662 | 5531 | <div class=example> |
jdaggett@1662 | 5532 | <p>With the styles below, numbers are rendered proportionally when used |
jdaggett@1662 | 5533 | within a paragraph but are shown in tabular form within tables of prices:</p> |
jdaggett@1662 | 5534 | |
jdaggett@8277 | 5535 | <pre>body { |
jdaggett@8277 | 5536 | font-variant-numeric: proportional-nums; |
jdaggett@1662 | 5537 | } |
jdaggett@1662 | 5538 | |
jdaggett@1662 | 5539 | table.prices td { |
jdaggett@8277 | 5540 | font-variant-numeric: tabular-nums; |
jdaggett@1662 | 5541 | } |
jdaggett@1662 | 5542 | </pre> |
jdaggett@1662 | 5543 | </div> |
jdaggett@1662 | 5544 | |
jdaggett@1662 | 5545 | <div class=example> |
jdaggett@8360 | 5546 | <p>When the <a href="#descdef-font-variant" |
jdaggett@8360 | 5547 | title="font-variant!!descriptor">font-variant</a> descriptor is used |
jdaggett@8360 | 5548 | within an <a href="#at-font-face-rule"><code>@font-face</code></a> rule, |
jdaggett@8360 | 5549 | it only applies to the font defined by that rule.</p> |
jdaggett@1662 | 5550 | |
jdaggett@1662 | 5551 | <pre>@font-face { |
jdaggett@1662 | 5552 | font-family: MainText; |
jdaggett@2556 | 5553 | src: url(http://example.com/font.ttf); |
jdaggett@1662 | 5554 | font-variant: oldstyle-nums proportional-nums styleset(1,3); |
jdaggett@1662 | 5555 | } |
jdaggett@1662 | 5556 | |
jdaggett@1662 | 5557 | body { |
jdaggett@1662 | 5558 | font-family: MainText, Helvetica; |
jdaggett@1662 | 5559 | } |
jdaggett@1662 | 5560 | |
jdaggett@1662 | 5561 | table.prices td { |
jdaggett@8277 | 5562 | font-variant-numeric: tabular-nums; |
jdaggett@1662 | 5563 | } |
jdaggett@1662 | 5564 | </pre> |
jdaggett@1662 | 5565 | |
jdaggett@1662 | 5566 | <p>In this case, old-style numerals will be used throughout but only where |
jdaggett@1662 | 5567 | the font "MainText" is used. Just as in the previous example, tabular |
jdaggett@4624 | 5568 | values will be used in price tables since ‘<a |
jdaggett@4624 | 5569 | href="#tabular-nums"><code class=property>tabular-nums</code></a>’ |
jdaggett@4624 | 5570 | appears in a general style rule and its use is mutually exclusive with |
jdaggett@4624 | 5571 | ‘<a href="#proportional-nums"><code |
jdaggett@4624 | 5572 | class=property>proportional-nums</code></a>’. Stylistic alternate sets |
jdaggett@4624 | 5573 | will only be used where MainText is used.</p> |
jdaggett@1662 | 5574 | </div> |
jdaggett@1662 | 5575 | |
jdaggett@1662 | 5576 | <div class=example> |
jdaggett@8311 | 5577 | <p>The <a href="#at-font-face-rule"><code>@font-face</code></a> rule can |
jdaggett@8311 | 5578 | also be used to access font features in locally available fonts via the |
jdaggett@8311 | 5579 | use of <code>local()</code> in the ‘<a href="#descdef-src"><code |
jdaggett@8311 | 5580 | class=property>src</code></a>’ descriptor of the <a |
jdaggett@8311 | 5581 | href="#at-font-face-rule"><code>@font-face</code></a> definition:</p> |
jdaggett@1662 | 5582 | |
jdaggett@1662 | 5583 | <pre>@font-face { |
jdaggett@1662 | 5584 | font-family: BodyText; |
jdaggett@1662 | 5585 | src: local("HiraMaruPro-W4"); |
jdaggett@1662 | 5586 | font-variant: proportional-width; |
jdaggett@2509 | 5587 | font-feature-settings: "ital"; /* Latin italics within CJK text feature */ |
jdaggett@1662 | 5588 | } |
jdaggett@1662 | 5589 | |
jdaggett@1662 | 5590 | body { font-family: BodyText, serif; } |
jdaggett@1662 | 5591 | </pre> |
jdaggett@1662 | 5592 | |
jdaggett@1662 | 5593 | <p>If available, a Japanese font "Hiragino Maru Gothic" will be used. When |
jdaggett@1662 | 5594 | text rendering occurs, Japanese kana will be proportionally spaced and |
jdaggett@1662 | 5595 | Latin text will be italicised. Text rendered with the fallback serif font |
jdaggett@1662 | 5596 | will use default rendering properties.</p> |
jdaggett@1662 | 5597 | </div> |
jdaggett@1662 | 5598 | |
jdaggett@1662 | 5599 | <div class=example> |
jdaggett@3460 | 5600 | <p>In the example below, discretionary ligatures are enabled only for a |
jdaggett@1662 | 5601 | downloadable font but are disabled within spans of class "special":</p> |
jdaggett@1662 | 5602 | |
jdaggett@1662 | 5603 | <pre>@font-face { |
jdaggett@1662 | 5604 | font-family: main; |
jdaggett@1662 | 5605 | src: url(fonts/ffmeta.woff) format("woff"); |
jdaggett@3460 | 5606 | font-variant: discretionary-ligatures; |
jdaggett@1662 | 5607 | } |
jdaggett@1662 | 5608 | |
jdaggett@1662 | 5609 | body { font-family: main, Helvetica; } |
jdaggett@3460 | 5610 | span.special { font-variant-ligatures: no-discretionary-ligatures; } |
jdaggett@1662 | 5611 | </pre> |
jdaggett@1662 | 5612 | |
jdaggett@8360 | 5613 | <p>Suppose one adds a rule using ‘<code |
jdaggett@8360 | 5614 | class=property>font-feature-settings</code>’ to enable discretionary |
jdaggett@8360 | 5615 | ligatures:</p> |
jdaggett@1662 | 5616 | |
jdaggett@1662 | 5617 | <pre>body { font-family: main, Helvetica; } |
jdaggett@2509 | 5618 | span { font-feature-settings: "dlig"; } |
jdaggett@3460 | 5619 | span.special { font-variant-ligatures: no-discretionary-ligatures; } |
jdaggett@1662 | 5620 | </pre> |
jdaggett@1662 | 5621 | |
jdaggett@8360 | 5622 | <p>In this case, discretionary ligatures <em>will</em> be rendered within |
jdaggett@8360 | 5623 | spans of class "special". This is because both the <a |
jdaggett@8279 | 5624 | href="#propdef-font-feature-settings" |
jdaggett@8279 | 5625 | title="font-feature-settings!!property">‘<code |
jdaggett@8279 | 5626 | class=property>font-feature-settings</code>’</a> and ‘<a |
jdaggett@4624 | 5627 | href="#propdef-font-variant-ligatures"><code |
jdaggett@4624 | 5628 | class=property>font-variant-ligatures</code></a>’ properties apply to |
jdaggett@4624 | 5629 | these spans. Although the ‘<code class=css>no-discretionary |
jdaggett@4624 | 5630 | ligatures</code>’ setting of ‘<a |
jdaggett@4624 | 5631 | href="#propdef-font-variant-ligatures"><code |
jdaggett@4624 | 5632 | class=property>font-variant-ligatures</code></a>’ effectively disables |
jdaggett@8279 | 5633 | the OpenType <span class=tag>dlig</span> feature, because the <a |
jdaggett@8279 | 5634 | href="#propdef-font-feature-settings" |
jdaggett@8279 | 5635 | title="font-feature-settings!!property">‘<code |
jdaggett@8279 | 5636 | class=property>font-feature-settings</code>’</a> is resolved after |
jdaggett@8279 | 5637 | that, the ‘<code class=property>dlig</code>’ value reenables |
jdaggett@4624 | 5638 | discretionary ligatures.</p> |
jdaggett@1662 | 5639 | </div> |
jdaggett@1244 | 5640 | |
jdaggett@7021 | 5641 | <h2 id=object-model><span class=secno>8 </span>Object Model</h2> |
jdaggett@7021 | 5642 | |
jdaggett@8311 | 5643 | <p>The contents of <a href="#at-font-face-rule"><code>@font-face</code></a> |
jdaggett@8311 | 5644 | and <a |
jdaggett@8311 | 5645 | href="#at-font-feature-values-rule"><code>@font-feature-values</code></a> |
jdaggett@8311 | 5646 | rules can be accessed via the following extensions to the CSS Object |
jdaggett@8311 | 5647 | Model. |
jdaggett@7021 | 5648 | |
jdaggett@7021 | 5649 | <h3 id=om-fontface><span class=secno>8.1 </span>The <a |
jdaggett@7021 | 5650 | href="#cssfontfacerule"><code>CSSFontFaceRule</code></a> interface</h3> |
jdaggett@7021 | 5651 | |
jdaggett@7021 | 5652 | <p>The <dfn id=cssfontfacerule>CSSFontFaceRule</dfn> interface represents a |
jdaggett@8311 | 5653 | <a href="#at-font-face-rule"><code>@font-face</code></a> rule. |
jdaggett@7021 | 5654 | |
jdaggett@7021 | 5655 | <pre class=idl> |
jdaggett@7021 | 5656 | interface CSSFontFaceRule : CSSRule { |
jdaggett@7041 | 5657 | attribute DOMString family; |
jdaggett@7041 | 5658 | attribute DOMString src; |
jdaggett@7041 | 5659 | attribute DOMString style; |
jdaggett@7041 | 5660 | attribute DOMString weight; |
jdaggett@7041 | 5661 | attribute DOMString stretch; |
jdaggett@7041 | 5662 | attribute DOMString unicodeRange; |
jdaggett@7041 | 5663 | attribute DOMString variant; |
jdaggett@7041 | 5664 | attribute DOMString featureSettings; |
jdaggett@7021 | 5665 | }</pre> |
jdaggett@7021 | 5666 | |
jdaggett@7022 | 5667 | <p>The DOM Level 2 Style specification <a href="#DOM-LEVEL-2-STYLE" |
jdaggett@7022 | 5668 | rel=biblioentry>[DOM-LEVEL-2-STYLE]<!--{{DOM-LEVEL-2-STYLE}}--></a> |
jdaggett@7022 | 5669 | defined a different variant of this rule. This definition supercedes that |
jdaggett@7022 | 5670 | one. |
jdaggett@7021 | 5671 | |
jdaggett@7021 | 5672 | <h3 id=om-fontfeaturevalues><span class=secno>8.2 </span>The <a |
jdaggett@7021 | 5673 | href="#cssfontfeaturevaluesrule"><code>CSSFontFeatureValuesRule</code></a> |
jdaggett@7021 | 5674 | interface</h3> |
jdaggett@7021 | 5675 | |
jdaggett@7021 | 5676 | <p>The <code>CSSRule</code> interface is extended as follows: |
jdaggett@7021 | 5677 | |
jdaggett@7021 | 5678 | <pre class=idl>partial interface CSSRule { |
jdaggett@7021 | 5679 | const unsigned short FONT_FEATURE_VALUES_RULE = 14; |
jdaggett@7021 | 5680 | }</pre> |
jdaggett@7021 | 5681 | |
jdaggett@7021 | 5682 | <p>The <dfn id=cssfontfeaturevaluesrule>CSSFontFeatureValuesRule</dfn> |
jdaggett@8311 | 5683 | interface represents a <a |
jdaggett@8311 | 5684 | href="#at-font-feature-values-rule"><code>@font-feature-values</code></a> |
jdaggett@8311 | 5685 | rule. |
jdaggett@7021 | 5686 | |
jdaggett@7021 | 5687 | <pre class=idl>interface CSSFontFeatureValuesRule : CSSRule { |
jdaggett@7021 | 5688 | readonly attribute DOMString familyList; |
jdaggett@7021 | 5689 | readonly attribute DOMString valueText; |
jdaggett@7021 | 5690 | };</pre> |
jdaggett@7021 | 5691 | |
jdaggett@7021 | 5692 | <dl class=idl-attributes> |
jdaggett@7021 | 5693 | <dt><var>familyList</var> of type <code>DOMString</code>, readonly |
jdaggett@7021 | 5694 | |
jdaggett@7021 | 5695 | <dd>The list of one or more font families for which a given set of feature |
jdaggett@7021 | 5696 | values is defined. |
jdaggett@7021 | 5697 | |
jdaggett@7021 | 5698 | <dt><var>valueText</var> of type <code>DOMString</code>, readonly |
jdaggett@7021 | 5699 | |
jdaggett@7021 | 5700 | <dd>Serialized set of feature values. |
jdaggett@7021 | 5701 | </dl> |
jdaggett@7021 | 5702 | |
jdaggett@8279 | 5703 | <p class=issue>Should this be extended to make <a |
jdaggett@8279 | 5704 | href="#cssfontfeaturevaluesrule"><code>CSSFontFeatureValuesRule</code></a> |
jdaggett@8279 | 5705 | be a subclass of <code>CSSGroupingRule</code> with other CSSRule |
jdaggett@8279 | 5706 | subclasses for each value definition block? |
jdaggett@8279 | 5707 | |
jdaggett@2737 | 5708 | <h2 class=no-num id=platform-props-to-css>Appendix A: Mapping platform font |
jdaggett@1662 | 5709 | properties to CSS properties</h2> |
jdaggett@1662 | 5710 | |
jdaggett@1662 | 5711 | <p><em>This appendix is included as background for some of the problems and |
jdaggett@890 | 5712 | situations that are described in other sections. It should be viewed as |
jdaggett@890 | 5713 | informative only.</em> |
jdaggett@890 | 5714 | |
jdaggett@512 | 5715 | <p>Font properties in CSS are designed to be independent of the underlying |
jdaggett@512 | 5716 | font formats used; they can be used to specify bitmap fonts, Type1 fonts, |
jdaggett@890 | 5717 | SVG fonts in addition to the common TrueType and OpenType fonts. But there |
jdaggett@1244 | 5718 | are facets of the TrueType and OpenType formats that often cause confusion |
jdaggett@2556 | 5719 | for authors and present challenges to implementers on different platforms. |
jdaggett@1244 | 5720 | |
jdaggett@1244 | 5721 | <p>Originally developed at Apple, TrueType was designed as an outline font |
jdaggett@1244 | 5722 | format for both screen and print. Microsoft joined Apple in developing the |
jdaggett@1244 | 5723 | TrueType format and both platforms have supported TrueType fonts since |
jdaggett@1244 | 5724 | then. Font data in the TrueType format consists of a set of tables |
jdaggett@1244 | 5725 | distinguished with common four-letter tag names, each containing a |
jdaggett@1244 | 5726 | specific type of data. For example, naming information, including |
jdaggett@1244 | 5727 | copyright and license information, is stored in the ‘<code |
jdaggett@7311 | 5728 | class=property>name</code>’ table. The <a |
jdaggett@7311 | 5729 | href="#character-map"><em>character map</em></a> (‘<code |
jdaggett@1244 | 5730 | class=property>cmap</code>’) table contains a mapping of character |
jdaggett@1244 | 5731 | encodings to glyphs. Apple later added additional tables for supporting |
jdaggett@1244 | 5732 | enhanced typographic functionality; these are now called Apple Advanced |
jdaggett@1244 | 5733 | Typography, or AAT, fonts. Microsoft and Adobe developed a separate set of |
jdaggett@1662 | 5734 | tables for advanced typography and called their format OpenType <a |
jdaggett@1662 | 5735 | href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>. |
jdaggett@890 | 5736 | |
jdaggett@890 | 5737 | <p>In many cases the font data used under Microsoft Windows or Linux is |
jdaggett@890 | 5738 | slightly different from the data used under Apple's Mac OS X because the |
jdaggett@6694 | 5739 | TrueType format allowed for explicit variation across platforms. This |
jdaggett@7311 | 5740 | includes font metrics, names and <a href="#character-map"><em>character |
jdaggett@7311 | 5741 | map</em></a> data. |
jdaggett@6694 | 5742 | |
jdaggett@6694 | 5743 | <p>Specifically, font family name data is handled differently across |
jdaggett@6694 | 5744 | platforms. For TrueType and OpenType fonts these names are contained in |
jdaggett@6694 | 5745 | the ‘<code class=property>name</code>’ table, in name records with |
jdaggett@8276 | 5746 | name ID 1. Mulitple names can be stored for different locales, but |
jdaggett@6694 | 5747 | Microsoft recommends fonts always include at least a US English version of |
jdaggett@6694 | 5748 | the name. On Windows, Microsoft made the decision for backwards |
jdaggett@6694 | 5749 | compatibility to limit this family name to a maximum of four faces; for |
jdaggett@6694 | 5750 | larger groupings the "preferred family" (name ID 16) or "WWS family" (name |
jdaggett@6694 | 5751 | ID 21) can be used. Other platforms such as OSX don't have this |
jdaggett@8276 | 5752 | limitation, so the family name is used to define all possible groupings. |
jdaggett@6694 | 5753 | |
jdaggett@6694 | 5754 | <p>Other name table data provides names used to uniquely identify a |
jdaggett@6694 | 5755 | specific face within a family. The full font name (name ID 4) and the |
jdaggett@8276 | 5756 | Postscript name (name ID 6) describe a single face uniquely. For example, |
jdaggett@8276 | 5757 | the bold face of the Gill Sans family has a fullname of "Gill Sans Bold" |
jdaggett@8276 | 5758 | and a Postscript name of "GillSans-Bold". There can be multiple localized |
jdaggett@8276 | 5759 | versions of the fullname for a given face, but the Postscript name is |
jdaggett@1244 | 5760 | always a unique name made from a limited set of ASCII characters. |
jdaggett@1244 | 5761 | |
jdaggett@1244 | 5762 | <p>On various platforms, different names are used to search for a font. For |
jdaggett@1244 | 5763 | example, with the Windows GDI CreateIndirectFont API, either a family or |
jdaggett@8276 | 5764 | fullname can be used to lookup a face, while on Mac OS X the |
jdaggett@8095 | 5765 | CTFontCreateWithName API call is used to lookup a given face using the |
jdaggett@8095 | 5766 | fullname and Postscript name. Under Linux, the fontconfig API allows fonts |
jdaggett@8095 | 5767 | to be searched using any of these names. In situations where platform |
jdaggett@8095 | 5768 | API's automatically substitute other font choices, it may be necessary to |
jdaggett@8095 | 5769 | verify a returned font matches a given name. |
jdaggett@1244 | 5770 | |
jdaggett@1244 | 5771 | <p>The weight of a given face can be determined via the usWeightClass field |
jdaggett@1244 | 5772 | of the OS/2 table or inferred from the style name (name ID 2). Likewise, |
jdaggett@1244 | 5773 | the width can be determined via the usWidthClass of the OS/2 table or |
jdaggett@6694 | 5774 | inferred from the style name. For historical reasons related to synthetic |
jdaggett@6694 | 5775 | bolding at weights 200 or lower with the Windows GDI API, font designers |
jdaggett@6694 | 5776 | have sometimes skewed values in the OS/2 table to avoid these weights. |
jdaggett@1244 | 5777 | |
jdaggett@1244 | 5778 | <p>Rendering complex scripts that use contextual shaping such as Thai, |
jdaggett@1244 | 5779 | Arabic and Devanagari requires features present only in OpenType or AAT |
jdaggett@1244 | 5780 | fonts. Currently, complex script rendering is supported on Windows and |
jdaggett@7521 | 5781 | Linux using OpenType font features while both OpenType and AAT font |
jdaggett@7521 | 5782 | features are used under Mac OS X. |
jdaggett@1244 | 5783 | |
jdaggett@2472 | 5784 | <h2 class=no-num id=ch-ch-ch-changes>Changes</h2> |
jdaggett@2472 | 5785 | |
jdaggett@2472 | 5786 | <h3 class=no-num id=recent-changes> Changes from the <a |
jdaggett@7451 | 5787 | href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/">February 2013 |
jdaggett@7242 | 5788 | CSS3 Fonts Working Draft</a></h3> |
jdaggett@2472 | 5789 | |
jdaggett@2472 | 5790 | <p>Major changes include: |
jdaggett@2472 | 5791 | |
jdaggett@2472 | 5792 | <ul> |
jdaggett@7521 | 5793 | <li>Moved font load events into a separate <a |
jdaggett@7521 | 5794 | href="http://dev.w3.org/csswg/css3-font-load-events/">spec</a> |
jdaggett@7679 | 5795 | |
jdaggett@8356 | 5796 | <li>Tightened syntax rules for <a |
jdaggett@8311 | 5797 | href="#at-font-feature-values-rule"><code>@font-feature-values</code></a> |
jdaggett@7679 | 5798 | rules |
jdaggett@8031 | 5799 | |
jdaggett@8311 | 5800 | <li>Added grammar productions for <a |
jdaggett@8311 | 5801 | href="#at-font-face-rule"><code>@font-face</code></a> and <a |
jdaggett@8311 | 5802 | href="#at-font-feature-values-rule"><code>@font-feature-values</code></a> |
jdaggett@8311 | 5803 | rules |
jdaggett@8095 | 5804 | |
jdaggett@8095 | 5805 | <li>Tightened definition of synthetic oblique |
jdaggett@8225 | 5806 | |
jdaggett@8225 | 5807 | <li>Revised definition of ‘<a href="#descdef-unicode-range"><code |
jdaggett@8225 | 5808 | class=property>unicode-range</code></a>’ descriptor |
jdaggett@2472 | 5809 | </ul> |
jdaggett@2472 | 5810 | |
jdaggett@529 | 5811 | <h2 class=no-num id=acknowledgments>Acknowledgments</h2> |
jdaggett@529 | 5812 | |
jdaggett@1662 | 5813 | <p>I'd like to thank Tal Leming, Jonathan Kew and Christopher Slye for all |
jdaggett@1662 | 5814 | their help and feedback. John Hudson was kind enough to take the time to |
jdaggett@2472 | 5815 | explain the subtleties of OpenType language tags and provided the example |
jdaggett@2472 | 5816 | of character variant usage for displaying text on Byzantine seals. Ken |
jdaggett@2472 | 5817 | Lunde and Eric Muller provided valuable feedback on CJK OpenType features |
jdaggett@2472 | 5818 | and Unicode variation selectors. The idea for supporting font features by |
jdaggett@8313 | 5819 | using <a href="#propdef-font-variant" |
jdaggett@8313 | 5820 | title="font-variant!!property">‘<code |
jdaggett@8313 | 5821 | class=property>font-variant</code>’</a> subproperties originated with |
jdaggett@8313 | 5822 | Håkon Wium Lie, Adam Twardoch and Tal Leming. Elika Etemad supplied some |
jdaggett@8313 | 5823 | of the initial design ideas for the <a |
jdaggett@8311 | 5824 | href="#at-font-feature-values-rule"><code>@font-feature-values</code></a> |
jdaggett@8311 | 5825 | rule. Thanks also to House Industries for allowing the use of Ed Interlock |
jdaggett@8311 | 5826 | in the discretionary ligatures example. |
jdaggett@1662 | 5827 | |
jdaggett@529 | 5828 | <p>A special thanks to Robert Bringhurst for the sublime mind expansion |
jdaggett@529 | 5829 | that is <em>The Elements of Typographic Style</em>. |
jdaggett@529 | 5830 | |
jdaggett@7242 | 5831 | <h2 class=no-num id=conformance> Conformance</h2> |
jdaggett@7242 | 5832 | |
jdaggett@7242 | 5833 | <h3 class=no-num id=conventions> Document Conventions</h3> |
jdaggett@7242 | 5834 | |
jdaggett@7242 | 5835 | <p>Conformance requirements are expressed with a combination of descriptive |
jdaggett@7242 | 5836 | assertions and RFC 2119 terminology. The key words “MUST”, “MUST |
jdaggett@7242 | 5837 | NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, |
jdaggett@7242 | 5838 | “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the |
jdaggett@7242 | 5839 | normative parts of this document are to be interpreted as described in RFC |
jdaggett@7242 | 5840 | 2119. However, for readability, these words do not appear in all uppercase |
jdaggett@7242 | 5841 | letters in this specification. |
jdaggett@7242 | 5842 | |
jdaggett@7242 | 5843 | <p>All of the text of this specification is normative except sections |
jdaggett@7242 | 5844 | explicitly marked as non-normative, examples, and notes. <a |
jdaggett@7242 | 5845 | href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a> |
jdaggett@7242 | 5846 | |
jdaggett@7242 | 5847 | <p>Examples in this specification are introduced with the words “for |
jdaggett@7242 | 5848 | example” or are set apart from the normative text with |
jdaggett@7242 | 5849 | <code>class="example"</code>, like this: |
jdaggett@7242 | 5850 | |
jdaggett@7242 | 5851 | <div class=example> |
jdaggett@7242 | 5852 | <p>This is an example of an informative example. |
jdaggett@7242 | 5853 | </div> |
jdaggett@7242 | 5854 | |
jdaggett@7242 | 5855 | <p>Informative notes begin with the word “Note” and are set apart from |
jdaggett@7242 | 5856 | the normative text with <code>class="note"</code>, like this: |
jdaggett@7242 | 5857 | |
jdaggett@7242 | 5858 | <p class=note>Note, this is an informative note. |
jdaggett@7242 | 5859 | |
jdaggett@7242 | 5860 | <h3 class=no-num id=conformance-classes> Conformance Classes</h3> |
jdaggett@7242 | 5861 | |
jdaggett@7242 | 5862 | <p>Conformance to CSS Fonts Level 3 Module is defined for three conformance |
jdaggett@7242 | 5863 | classes: |
jdaggett@7242 | 5864 | |
jdaggett@7242 | 5865 | <dl> |
jdaggett@7243 | 5866 | <dt><dfn id=style-sheet title="style sheet!!as conformance class">style |
jdaggett@7242 | 5867 | sheet</dfn> |
jdaggett@7242 | 5868 | |
jdaggett@7242 | 5869 | <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS |
jdaggett@7242 | 5870 | style sheet</a>. |
jdaggett@7242 | 5871 | |
jdaggett@7243 | 5872 | <dt><dfn id=renderer>renderer</dfn> |
jdaggett@7242 | 5873 | |
jdaggett@7242 | 5874 | <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> |
jdaggett@7242 | 5875 | that interprets the semantics of a style sheet and renders documents that |
jdaggett@7242 | 5876 | use them. |
jdaggett@7242 | 5877 | |
jdaggett@7242 | 5878 | <dt><dfn id=authoring-tool>authoring tool</dfn> |
jdaggett@7242 | 5879 | |
jdaggett@7242 | 5880 | <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> |
jdaggett@7242 | 5881 | that writes a style sheet. |
jdaggett@7242 | 5882 | </dl> |
jdaggett@7242 | 5883 | |
jdaggett@7242 | 5884 | <p>A style sheet is conformant to CSS Fonts Level 3 Module if all of its |
jdaggett@7242 | 5885 | declarations that use properties defined in this module have values that |
jdaggett@7242 | 5886 | are valid according to the generic CSS grammar and the individual grammars |
jdaggett@7242 | 5887 | of each property as given in this module. |
jdaggett@7242 | 5888 | |
jdaggett@7242 | 5889 | <p>A renderer is conformant to CSS Fonts Level 3 Module if, in addition to |
jdaggett@7242 | 5890 | interpreting the style sheet as defined by the appropriate specifications, |
jdaggett@7242 | 5891 | it supports all the features defined by CSS Fonts Level 3 Module by |
jdaggett@7242 | 5892 | parsing them correctly and rendering the document accordingly. However, |
jdaggett@7242 | 5893 | the inability of a UA to correctly render a document due to limitations of |
jdaggett@7242 | 5894 | the device does not make the UA non-conformant. (For example, a UA is not |
jdaggett@7242 | 5895 | required to render color on a monochrome monitor.) |
jdaggett@7242 | 5896 | |
jdaggett@7242 | 5897 | <p>An authoring tool is conformant to CSS Fonts Level 3 Module if it writes |
jdaggett@7242 | 5898 | style sheets that are syntactically correct according to the generic CSS |
jdaggett@7242 | 5899 | grammar and the individual grammars of each feature in this module, and |
jdaggett@7242 | 5900 | meet all other conformance requirements of style sheets as described in |
jdaggett@7242 | 5901 | this module. |
jdaggett@7242 | 5902 | |
jdaggett@7242 | 5903 | <h3 class=no-num id=partial> Partial Implementations</h3> |
jdaggett@7242 | 5904 | |
jdaggett@7242 | 5905 | <p>So that authors can exploit the forward-compatible parsing rules to |
jdaggett@7242 | 5906 | assign fallback values, CSS renderers <strong>must</strong> treat as |
jdaggett@7242 | 5907 | invalid (and <a |
jdaggett@7242 | 5908 | href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as |
jdaggett@7242 | 5909 | appropriate</a>) any at-rules, properties, property values, keywords, and |
jdaggett@7242 | 5910 | other syntactic constructs for which they have no usable level of support. |
jdaggett@7242 | 5911 | In particular, user agents <strong>must not</strong> selectively ignore |
jdaggett@7242 | 5912 | unsupported component values and honor supported values in a single |
jdaggett@7242 | 5913 | multi-value property declaration: if any value is considered invalid (as |
jdaggett@7242 | 5914 | unsupported values must be), CSS requires that the entire declaration be |
jdaggett@7242 | 5915 | ignored. |
jdaggett@7242 | 5916 | |
jdaggett@7242 | 5917 | <h3 class=no-num id=experimental> Experimental Implementations</h3> |
jdaggett@7242 | 5918 | |
jdaggett@7242 | 5919 | <p>To avoid clashes with future CSS features, the CSS2.1 specification |
jdaggett@7242 | 5920 | reserves a <a |
jdaggett@7242 | 5921 | href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed |
jdaggett@7242 | 5922 | syntax</a> for proprietary and experimental extensions to CSS. |
jdaggett@7242 | 5923 | |
jdaggett@7242 | 5924 | <p>Prior to a specification reaching the Candidate Recommendation stage in |
jdaggett@7242 | 5925 | the W3C process, all implementations of a CSS feature are considered |
jdaggett@7242 | 5926 | experimental. The CSS Working Group recommends that implementations use a |
jdaggett@7242 | 5927 | vendor-prefixed syntax for such features, including those in W3C Working |
jdaggett@7242 | 5928 | Drafts. This avoids incompatibilities with future changes in the draft. |
jdaggett@7242 | 5929 | |
jdaggett@7242 | 5930 | <h3 class=no-num id=testing> Non-Experimental Implementations</h3> |
jdaggett@7242 | 5931 | |
jdaggett@7242 | 5932 | <p>Once a specification reaches the Candidate Recommendation stage, |
jdaggett@7242 | 5933 | non-experimental implementations are possible, and implementors should |
jdaggett@7242 | 5934 | release an unprefixed implementation of any CR-level feature they can |
jdaggett@7242 | 5935 | demonstrate to be correctly implemented according to spec. |
jdaggett@7242 | 5936 | |
jdaggett@7242 | 5937 | <p>To establish and maintain the interoperability of CSS across |
jdaggett@7242 | 5938 | implementations, the CSS Working Group requests that non-experimental CSS |
jdaggett@7242 | 5939 | renderers submit an implementation report (and, if necessary, the |
jdaggett@7242 | 5940 | testcases used for that implementation report) to the W3C before releasing |
jdaggett@7242 | 5941 | an unprefixed implementation of any CSS features. Testcases submitted to |
jdaggett@7242 | 5942 | W3C are subject to review and correction by the CSS Working Group. |
jdaggett@7242 | 5943 | |
jdaggett@7242 | 5944 | <p>Further information on submitting testcases and implementation reports |
jdaggett@7242 | 5945 | can be found from on the CSS Working Group's website at <a |
jdaggett@7242 | 5946 | href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. |
jdaggett@7242 | 5947 | Questions should be directed to the <a |
jdaggett@7242 | 5948 | href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> |
jdaggett@7242 | 5949 | mailing list. |
jdaggett@7242 | 5950 | |
jdaggett@484 | 5951 | <h2 class=no-num id=references>References</h2> |
jdaggett@484 | 5952 | |
jdaggett@1662 | 5953 | <h3 class=no-num id=normative-references>Normative References</h3> |
jdaggett@484 | 5954 | <!--begin-normative--> |
jdaggett@484 | 5955 | <!-- Sorted by label --> |
jdaggett@484 | 5956 | |
jdaggett@484 | 5957 | <dl class=bibliography> |
jdaggett@8031 | 5958 | <dd style="display: none"><!-- keeps the doc valid if the DL is empty --> |
jdaggett@484 | 5959 | <!----> |
jdaggett@531 | 5960 | |
jdaggett@2461 | 5961 | <dt id=CHARMOD>[CHARMOD] |
jdaggett@2461 | 5962 | |
jdaggett@2461 | 5963 | <dd>Martin J. Dürst; et al. <a |
jdaggett@2737 | 5964 | href="http://www.w3.org/TR/2005/REC-charmod-20050215/"><cite>Character |
jdaggett@2461 | 5965 | Model for the World Wide Web 1.0: Fundamentals.</cite></a> 15 February |
jdaggett@2461 | 5966 | 2005. W3C Recommendation. URL: <a |
jdaggett@2737 | 5967 | href="http://www.w3.org/TR/2005/REC-charmod-20050215/">http://www.w3.org/TR/2005/REC-charmod-20050215/</a> |
jdaggett@2461 | 5968 | </dd> |
jdaggett@2461 | 5969 | <!----> |
jdaggett@2461 | 5970 | |
jdaggett@2457 | 5971 | <dt id=CORS>[CORS] |
jdaggett@1662 | 5972 | |
jdaggett@1662 | 5973 | <dd>Anne van Kesteren. <a |
jdaggett@7242 | 5974 | href="http://www.w3.org/TR/2013/CR-cors-20130129/"><cite>Cross-Origin |
jdaggett@7242 | 5975 | Resource Sharing.</cite></a> 29 January 2013. W3C Candidate |
jdaggett@7242 | 5976 | Recommendation. (Work in progress.) URL: <a |
jdaggett@7242 | 5977 | href="http://www.w3.org/TR/2013/CR-cors-20130129/">http://www.w3.org/TR/2013/CR-cors-20130129/</a> |
jdaggett@1662 | 5978 | </dd> |
jdaggett@1662 | 5979 | <!----> |
jdaggett@1662 | 5980 | |
jdaggett@3041 | 5981 | <dt id=CSS21>[CSS21] |
jdaggett@3041 | 5982 | |
jdaggett@3041 | 5983 | <dd>Bert Bos; et al. <a |
jdaggett@8031 | 5984 | href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style |
jdaggett@3041 | 5985 | Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June |
jdaggett@3041 | 5986 | 2011. W3C Recommendation. URL: <a |
jdaggett@8031 | 5987 | href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> |
jdaggett@3041 | 5988 | </dd> |
jdaggett@3041 | 5989 | <!----> |
jdaggett@3041 | 5990 | |
jdaggett@5833 | 5991 | <dt id=CSS3VAL>[CSS3VAL] |
jdaggett@5833 | 5992 | |
jdaggett@5833 | 5993 | <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a |
jdaggett@6701 | 5994 | href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS |
jdaggett@6701 | 5995 | Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate |
jdaggett@6701 | 5996 | Recommendation. (Work in progress.) URL: <a |
jdaggett@6701 | 5997 | href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a> |
jdaggett@5833 | 5998 | </dd> |
jdaggett@5833 | 5999 | <!----> |
jdaggett@5833 | 6000 | |
jdaggett@1662 | 6001 | <dt id=HTML5>[HTML5] |
jdaggett@1662 | 6002 | |
jdaggett@1856 | 6003 | <dd>Ian Hickson. <a |
jdaggett@7242 | 6004 | href="http://www.w3.org/TR/2012/CR-html5-20121217/"><cite>HTML5.</cite></a> |
jdaggett@7242 | 6005 | 17 December 2012. W3C Candidate Recommendation. (Work in progress.) URL: |
jdaggett@7242 | 6006 | <a |
jdaggett@7242 | 6007 | href="http://www.w3.org/TR/2012/CR-html5-20121217/">http://www.w3.org/TR/2012/CR-html5-20121217/</a> |
jdaggett@1662 | 6008 | </dd> |
jdaggett@1662 | 6009 | <!----> |
jdaggett@1662 | 6010 | |
jdaggett@1662 | 6011 | <dt id=OPEN-FONT-FORMAT>[OPEN-FONT-FORMAT] |
jdaggett@1662 | 6012 | |
jdaggett@1662 | 6013 | <dd><a |
jdaggett@1662 | 6014 | href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip"><cite>Information |
jdaggett@1662 | 6015 | technology — Coding of audio-visual objects — Part 22: Open Font |
jdaggett@1662 | 6016 | Format.</cite></a> International Organization for Standardization. |
jdaggett@1662 | 6017 | ISO/IEC 14496-22:2009. URL: <a |
jdaggett@1662 | 6018 | href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip">http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip</a> |
jdaggett@1662 | 6019 | </dd> |
jdaggett@1662 | 6020 | <!----> |
jdaggett@1662 | 6021 | |
jdaggett@1662 | 6022 | <dt id=OPENTYPE>[OPENTYPE] |
jdaggett@1662 | 6023 | |
jdaggett@1662 | 6024 | <dd><a |
jdaggett@1662 | 6025 | href="http://www.microsoft.com/typography/otspec/default.htm"><cite>OpenType |
jdaggett@1662 | 6026 | specification.</cite></a> Microsoft. URL: <a |
jdaggett@1662 | 6027 | href="http://www.microsoft.com/typography/otspec/default.htm">http://www.microsoft.com/typography/otspec/default.htm</a> |
jdaggett@1662 | 6028 | </dd> |
jdaggett@1662 | 6029 | <!----> |
jdaggett@1662 | 6030 | |
jdaggett@1662 | 6031 | <dt id=OPENTYPE-FEATURES>[OPENTYPE-FEATURES] |
jdaggett@1662 | 6032 | |
jdaggett@1662 | 6033 | <dd><a |
jdaggett@1662 | 6034 | href="http://www.microsoft.com/typography/otspec/featurelist.htm"><cite>OpenType |
jdaggett@1662 | 6035 | feature registry.</cite></a> Microsoft. URL: <a |
jdaggett@1662 | 6036 | href="http://www.microsoft.com/typography/otspec/featurelist.htm">http://www.microsoft.com/typography/otspec/featurelist.htm</a> |
jdaggett@1662 | 6037 | </dd> |
jdaggett@1662 | 6038 | <!----> |
jdaggett@1662 | 6039 | |
jdaggett@7103 | 6040 | <dt id=RFC2119>[RFC2119] |
jdaggett@7103 | 6041 | |
jdaggett@7103 | 6042 | <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key |
jdaggett@7103 | 6043 | words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet |
jdaggett@7103 | 6044 | RFC 2119. URL: <a |
jdaggett@7103 | 6045 | href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> |
jdaggett@7103 | 6046 | </dd> |
jdaggett@7103 | 6047 | <!----> |
jdaggett@7103 | 6048 | |
jdaggett@2457 | 6049 | <dt id=UAX15>[UAX15] |
jdaggett@2457 | 6050 | |
jdaggett@7242 | 6051 | <dd>Mark Davis; Ken Whistler. <a |
jdaggett@7242 | 6052 | href="http://www.unicode.org/reports/tr15/"><cite>Unicode Normalization |
jdaggett@7242 | 6053 | Forms.</cite></a> 31 August 2012. Unicode Standard Annex #15. URL: <a |
jdaggett@7242 | 6054 | href="http://www.unicode.org/reports/tr15/">http://www.unicode.org/reports/tr15/</a> |
jdaggett@2457 | 6055 | </dd> |
jdaggett@2457 | 6056 | <!----> |
jdaggett@2457 | 6057 | |
jdaggett@1856 | 6058 | <dt id=UAX29>[UAX29] |
jdaggett@1856 | 6059 | |
jdaggett@1856 | 6060 | <dd>Mark Davis. <a |
jdaggett@5809 | 6061 | href="http://www.unicode.org/reports/tr29/"><cite>Unicode Text |
jdaggett@7242 | 6062 | Segmentation.</cite></a> 12 September 2012. Unicode Standard Annex #29. |
jdaggett@2461 | 6063 | URL: <a |
jdaggett@5809 | 6064 | href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a> |
jdaggett@1856 | 6065 | </dd> |
jdaggett@1856 | 6066 | <!----> |
jdaggett@1856 | 6067 | |
jdaggett@3041 | 6068 | <dt id=UNICODE6>[UNICODE6] |
jdaggett@531 | 6069 | |
jdaggett@531 | 6070 | <dd>The Unicode Consortium. <a |
jdaggett@7242 | 6071 | href="http://www.unicode.org/versions/Unicode6.2.0/"><cite>The Unicode |
jdaggett@7242 | 6072 | Standard, Version 6.2.0.</cite></a> Defined by: The Unicode Standard, |
jdaggett@7242 | 6073 | Version 6.2.0 URL: <a |
jdaggett@7242 | 6074 | href="http://www.unicode.org/versions/Unicode6.2.0/">http://www.unicode.org/versions/Unicode6.2.0/</a> |
jdaggett@531 | 6075 | </dd> |
jdaggett@531 | 6076 | <!----> |
jdaggett@484 | 6077 | </dl> |
jdaggett@484 | 6078 | <!--end-normative--> |
jdaggett@3041 | 6079 | <!--{{!CSS21}}--> |
jdaggett@5833 | 6080 | <!--{{!CSS3VAL}}--> |
jdaggett@1662 | 6081 | <!--{{!OPENTYPE}}--> |
jdaggett@1662 | 6082 | <!--{{!OPENTYPE-FEATURES}}--> |
jdaggett@1662 | 6083 | <!--{{!OPEN-FONT-FORMAT}}--> |
jdaggett@3041 | 6084 | <!--{{!UNICODE6}}--> |
jdaggett@2457 | 6085 | <!--{{!UAX15}}--> |
jdaggett@1856 | 6086 | <!--{{!UAX29}}--> |
jdaggett@2457 | 6087 | <!--{{!CORS}}--> |
jdaggett@1662 | 6088 | <!--{{!HTML5}}--> |
jdaggett@2461 | 6089 | <!--{{!CHARMOD}}--> |
jdaggett@1662 | 6090 | |
jdaggett@1662 | 6091 | <h3 class=no-num id=other-references>Other References</h3> |
jdaggett@484 | 6092 | <!--begin-informative--> |
jdaggett@484 | 6093 | <!-- Sorted by label --> |
jdaggett@484 | 6094 | |
jdaggett@484 | 6095 | <dl class=bibliography> |
jdaggett@8031 | 6096 | <dd style="display: none"><!-- keeps the doc valid if the DL is empty --> |
jdaggett@484 | 6097 | <!----> |
jdaggett@484 | 6098 | |
jdaggett@3042 | 6099 | <dt id=AAT-FEATURES>[AAT-FEATURES] |
jdaggett@3042 | 6100 | |
jdaggett@3042 | 6101 | <dd><a href="http://developer.apple.com/fonts/registry/"><cite>Apple |
jdaggett@3042 | 6102 | Advanced Typography font feature registry.</cite></a> Apple. URL: <a |
jdaggett@3042 | 6103 | href="http://developer.apple.com/fonts/registry/">http://developer.apple.com/fonts/registry/</a> |
jdaggett@3042 | 6104 | </dd> |
jdaggett@3042 | 6105 | <!----> |
jdaggett@3042 | 6106 | |
jdaggett@512 | 6107 | <dt id=ARABIC-TYPO>[ARABIC-TYPO] |
jdaggett@512 | 6108 | |
jdaggett@513 | 6109 | <dd>Huda Smitshuijzen AbiFares. <cite>Arabic Typography: A Comprehensive |
jdaggett@1148 | 6110 | Sourcebook.</cite> Saqi Books. 2001. ISBN 0-86356-347-3.</dd> |
jdaggett@512 | 6111 | <!----> |
jdaggett@512 | 6112 | |
jdaggett@3042 | 6113 | <dt id=CHARMOD-NORM>[CHARMOD-NORM] |
jdaggett@3042 | 6114 | |
jdaggett@3042 | 6115 | <dd>François Yergeau; et al. <a |
jdaggett@5809 | 6116 | href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/"><cite>Character |
jdaggett@5809 | 6117 | Model for the World Wide Web 1.0: Normalization.</cite></a> 1 May 2012. |
jdaggett@5809 | 6118 | W3C Working Draft. (Work in progress.) URL: <a |
jdaggett@5809 | 6119 | href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/">http://www.w3.org/TR/2012/WD-charmod-norm-20120501/</a> |
jdaggett@3042 | 6120 | </dd> |
jdaggett@3042 | 6121 | <!----> |
jdaggett@3042 | 6122 | |
jdaggett@1732 | 6123 | <dt id=CJKV-INFO-PROCESSING>[CJKV-INFO-PROCESSING] |
jdaggett@1732 | 6124 | |
jdaggett@1732 | 6125 | <dd>Ken Lunde. <cite>CJKV Information Processing, Second Edition.</cite> |
jdaggett@1732 | 6126 | O'Reilly Media, Inc. 2009. ISBN 0-596-51447-1.</dd> |
jdaggett@1732 | 6127 | <!----> |
jdaggett@1732 | 6128 | |
jdaggett@3460 | 6129 | <dt id=CSS3-CONDITIONAL>[CSS3-CONDITIONAL] |
jdaggett@3460 | 6130 | |
jdaggett@3460 | 6131 | <dd>L. David Baron. <a |
jdaggett@7242 | 6132 | href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/"><cite>CSS |
jdaggett@7242 | 6133 | Conditional Rules Module Level 3.</cite></a> 13 December 2012. W3C |
jdaggett@3460 | 6134 | Working Draft. (Work in progress.) URL: <a |
jdaggett@7242 | 6135 | href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/">http://www.w3.org/TR/2012/WD-css3-conditional-20121213/</a> |
jdaggett@3460 | 6136 | </dd> |
jdaggett@3460 | 6137 | <!----> |
jdaggett@3460 | 6138 | |
jdaggett@6701 | 6139 | <dt id=CSS3TEXT>[CSS3TEXT] |
jdaggett@6701 | 6140 | |
jdaggett@6701 | 6141 | <dd>Elika J. Etemad; Koji Ishii. <a |
jdaggett@7041 | 6142 | href="http://www.w3.org/TR/2012/WD-css3-text-20121113/"><cite>CSS Text |
jdaggett@7041 | 6143 | Module Level 3.</cite></a> 13 November 2012. W3C Working Draft. (Work in |
jdaggett@6701 | 6144 | progress.) URL: <a |
jdaggett@7041 | 6145 | href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">http://www.w3.org/TR/2012/WD-css3-text-20121113/</a> |
jdaggett@6701 | 6146 | </dd> |
jdaggett@6701 | 6147 | <!----> |
jdaggett@6701 | 6148 | |
jdaggett@1856 | 6149 | <dt id=DIGITAL-TYPOGRAPHY>[DIGITAL-TYPOGRAPHY] |
jdaggett@1856 | 6150 | |
jdaggett@1856 | 6151 | <dd>Richard Rubinstein. <cite>Digital Typography, An Introduction to Type |
jdaggett@1856 | 6152 | and Composition for Computer System Design.</cite> Addison-Wesley. 1988. |
jdaggett@1856 | 6153 | ISBN 0-201-17633-5.</dd> |
jdaggett@1856 | 6154 | <!----> |
jdaggett@1856 | 6155 | |
jdaggett@7022 | 6156 | <dt id=DOM-LEVEL-2-STYLE>[DOM-LEVEL-2-STYLE] |
jdaggett@7022 | 6157 | |
jdaggett@7022 | 6158 | <dd>Chris Wilson; Philippe Le Hégaret; Vidur Apparao. <a |
jdaggett@7179 | 6159 | href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/"><cite>Document |
jdaggett@7022 | 6160 | Object Model (DOM) Level 2 Style Specification.</cite></a> 13 November |
jdaggett@7022 | 6161 | 2000. W3C Recommendation. URL: <a |
jdaggett@7179 | 6162 | href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/">http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/</a> |
jdaggett@7022 | 6163 | </dd> |
jdaggett@7022 | 6164 | <!----> |
jdaggett@7022 | 6165 | |
jdaggett@498 | 6166 | <dt id=ELEMTYPO>[ELEMTYPO] |
jdaggett@498 | 6167 | |
jdaggett@498 | 6168 | <dd>Robert Bringhurst. <cite>The Elements of Typographic Style, Version |
jdaggett@7488 | 6169 | 4.</cite> Hartley & Marks. 2013. ISBN 0-88179-212-8.</dd> |
jdaggett@498 | 6170 | <!----> |
jdaggett@498 | 6171 | |
jdaggett@513 | 6172 | <dt id=LANGCULTTYPE>[LANGCULTTYPE] |
jdaggett@513 | 6173 | |
jdaggett@1148 | 6174 | <dd>John D. Berry, Ed. <cite>Language Culture Type.</cite> Graphis. 2001. |
jdaggett@1148 | 6175 | ISBN 1-932026-01-0.</dd> |
jdaggett@512 | 6176 | <!----> |
jdaggett@1662 | 6177 | |
jdaggett@1662 | 6178 | <dt id=OPENTYPE-FONT-GUIDE>[OPENTYPE-FONT-GUIDE] |
jdaggett@1662 | 6179 | |
jdaggett@1662 | 6180 | <dd><a |
jdaggett@3538 | 6181 | href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf"><cite>OpenType |
jdaggett@1662 | 6182 | User Guide.</cite></a> FontShop International. URL: <a |
jdaggett@3538 | 6183 | href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf">https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf</a> |
jdaggett@1662 | 6184 | </dd> |
jdaggett@1662 | 6185 | <!----> |
jdaggett@1856 | 6186 | |
jdaggett@2527 | 6187 | <dt id=RASTER-TRAGEDY>[RASTER-TRAGEDY] |
jdaggett@2527 | 6188 | |
jdaggett@2527 | 6189 | <dd>Beat Stamm. <a href="http://www.rastertragedy.com/"><cite>The Raster |
jdaggett@6659 | 6190 | Tragedy at Low-Resolution Revisited.</cite></a> 7 December 2011. URL: <a |
jdaggett@2527 | 6191 | href="http://www.rastertragedy.com/">http://www.rastertragedy.com/</a></dd> |
jdaggett@2527 | 6192 | <!----> |
jdaggett@2527 | 6193 | |
jdaggett@1856 | 6194 | <dt id=WINDOWS-GLYPH-PROC>[WINDOWS-GLYPH-PROC] |
jdaggett@1856 | 6195 | |
jdaggett@1856 | 6196 | <dd>John Hudson. <a |
jdaggett@1856 | 6197 | href="http://www.microsoft.com/typography/developers/opentype/default.htm"><cite>Windows |
jdaggett@1856 | 6198 | Glyph Processing.</cite></a> Microsoft Typogrraphy. URL: <a |
jdaggett@1856 | 6199 | href="http://www.microsoft.com/typography/developers/opentype/default.htm">http://www.microsoft.com/typography/developers/opentype/default.htm</a> |
jdaggett@1856 | 6200 | </dd> |
jdaggett@1856 | 6201 | <!----> |
jdaggett@484 | 6202 | </dl> |
jdaggett@484 | 6203 | <!--end-informative--> |
jdaggett@518 | 6204 | <!--{{ARABIC-TYPO}}--> |
jdaggett@1732 | 6205 | <!--{{CJKV-INFO-PROCESSING}}--> |
jdaggett@1856 | 6206 | <!--{{DIGITAL-TYPOGRAPHY}}--> |
jdaggett@7022 | 6207 | <!--{{DOM-LEVEL-2-STYLE}}--> |
jdaggett@518 | 6208 | <!--{{ELEMTYPO}}--> |
jdaggett@1856 | 6209 | <!--{{LANGCULTTYPE}}--> |
jdaggett@1662 | 6210 | <!--{{OPENTYPE-FONT-GUIDE}}--> |
jdaggett@2527 | 6211 | <!--{{RASTER-TRAGEDY}}--> |
jdaggett@1856 | 6212 | <!--{{WINDOWS-GLYPH-PROC}}--> |
jdaggett@3042 | 6213 | <!--{{CHARMOD-NORM}}--> |
jdaggett@3042 | 6214 | <!--{{AAT-FEATURES}}--> |
jdaggett@3460 | 6215 | <!--{{CSS3-CONDITIONAL}}--> |
jdaggett@6701 | 6216 | <!--{{CSS3TEXT}}--> |
jdaggett@484 | 6217 | |
jdaggett@484 | 6218 | <h2 class=no-num id=index>Index</h2> |
jdaggett@484 | 6219 | <!--begin-index--> |
jdaggett@484 | 6220 | |
jdaggett@484 | 6221 | <ul class=indexlist> |
jdaggett@8278 | 6222 | <li>100...900 weight values, <a href="#font-weight-numeric-values" |
jdaggett@8278 | 6223 | title="100...900 weight values"><strong>3.2</strong></a> |
jdaggett@8278 | 6224 | |
jdaggett@8225 | 6225 | <li><var><absolute-size></var>, <a href="#absolute-size-value" |
jdaggett@7060 | 6226 | title="<absolute-size>"><strong>3.5</strong></a> |
jdaggett@890 | 6227 | |
jdaggett@8225 | 6228 | <li><var><common-lig-values></var>, <a href="#common-lig-values" |
jdaggett@8225 | 6229 | title="<common-lig-values>"><strong>6.4</strong></a> |
jdaggett@2479 | 6230 | |
jdaggett@2479 | 6231 | <li><var><contextual-alt-values></var>, <a |
jdaggett@8225 | 6232 | href="#contextual-alt-values" |
jdaggett@6176 | 6233 | title="<contextual-alt-values>"><strong>6.4</strong></a> |
jdaggett@2479 | 6234 | |
jdaggett@8225 | 6235 | <li><var><discretionary-lig-values></var>, <a |
jdaggett@8225 | 6236 | href="#discretionary-lig-values" |
jdaggett@8225 | 6237 | title="<discretionary-lig-values>"><strong>6.4</strong></a> |
jdaggett@3460 | 6238 | |
jdaggett@2479 | 6239 | <li><var><east-asian-variant-values></var>, <a |
jdaggett@8225 | 6240 | href="#east-asian-variant-values" |
jdaggett@2479 | 6241 | title="<east-asian-variant-values>"><strong>6.10</strong></a> |
jdaggett@2479 | 6242 | |
jdaggett@2479 | 6243 | <li><var><east-asian-width-values></var>, <a |
jdaggett@8225 | 6244 | href="#east-asian-width-values" |
jdaggett@2479 | 6245 | title="<east-asian-width-values>"><strong>6.10</strong></a> |
jdaggett@2479 | 6246 | |
jdaggett@8225 | 6247 | <li><var><family-name></var>, <a href="#family-name-value" |
jdaggett@8225 | 6248 | title="<family-name>"><strong>3.1</strong></a> |
jdaggett@8225 | 6249 | |
jdaggett@8225 | 6250 | <li><var><feature-tag-value></var>, <a href="#feature-tag-value" |
jdaggett@2515 | 6251 | title="<feature-tag-value>"><strong>6.12</strong></a> |
jdaggett@2515 | 6252 | |
jdaggett@8225 | 6253 | <li><var><font-face-name></var>, <a href="#font-face-name-value" |
jdaggett@7060 | 6254 | title="<font-face-name>"><strong>4.3</strong></a> |
jdaggett@4624 | 6255 | |
jdaggett@4624 | 6256 | <li><var><font-variant-css21></var>, <a |
jdaggett@8225 | 6257 | href="#font-variant-css21-values" |
jdaggett@4624 | 6258 | title="<font-variant-css21>"><strong>3.7</strong></a> |
jdaggett@4624 | 6259 | |
jdaggett@8225 | 6260 | <li><var><generic-family></var>, <a href="#generic-family-value" |
jdaggett@8225 | 6261 | title="<generic-family>"><strong>3.1</strong></a> |
jdaggett@8225 | 6262 | |
jdaggett@8225 | 6263 | <li><var><historical-lig-values></var>, <a |
jdaggett@8225 | 6264 | href="#historical-lig-values" |
jdaggett@8225 | 6265 | title="<historical-lig-values>"><strong>6.4</strong></a> |
jdaggett@8225 | 6266 | |
jdaggett@8225 | 6267 | <li><var><length></var>, <a href="#length-size-value" |
jdaggett@8225 | 6268 | title="<length>"><strong>3.5</strong></a> |
jdaggett@8225 | 6269 | |
jdaggett@8225 | 6270 | <li><var><number></var>, <a href="#aspect-ratio-value" |
jdaggett@8225 | 6271 | title="<number>"><strong>3.6</strong></a> |
jdaggett@4624 | 6272 | |
jdaggett@4624 | 6273 | <li><var><numeric-figure-values></var>, <a |
jdaggett@8225 | 6274 | href="#numeric-figure-values" |
jdaggett@4624 | 6275 | title="<numeric-figure-values>"><strong>6.7</strong></a> |
jdaggett@4624 | 6276 | |
jdaggett@4624 | 6277 | <li><var><numeric-fraction-values></var>, <a |
jdaggett@8225 | 6278 | href="#numeric-fraction-values" |
jdaggett@4624 | 6279 | title="<numeric-fraction-values>"><strong>6.7</strong></a> |
jdaggett@4624 | 6280 | |
jdaggett@4624 | 6281 | <li><var><numeric-spacing-values></var>, <a |
jdaggett@8225 | 6282 | href="#numeric-spacing-values" |
jdaggett@4624 | 6283 | title="<numeric-spacing-values>"><strong>6.7</strong></a> |
jdaggett@4624 | 6284 | |
jdaggett@8225 | 6285 | <li><var><percentage></var>, <a href="#percentage-size-value" |
jdaggett@8225 | 6286 | title="<percentage>"><strong>3.5</strong></a> |
jdaggett@8225 | 6287 | |
jdaggett@8225 | 6288 | <li><var><relative-size></var>, <a href="#relative-size-value" |
jdaggett@7060 | 6289 | title="<relative-size>"><strong>3.5</strong></a> |
jdaggett@7060 | 6290 | |
jdaggett@8278 | 6291 | <li><var><string></var>, <a |
jdaggett@8278 | 6292 | href="#font-language-override-string-value" |
jdaggett@8278 | 6293 | title="<string>"><strong>6.13</strong></a> |
jdaggett@8278 | 6294 | |
jdaggett@8225 | 6295 | <li><var><urange></var>, <a href="#urange-value" |
jdaggett@8225 | 6296 | title="<urange>"><strong>4.5</strong></a> |
jdaggett@2479 | 6297 | |
jdaggett@8311 | 6298 | <li><code>@font-face</code>, <a href="#at-font-face-rule" |
jdaggett@8311 | 6299 | title="@font-face"><strong>4.1</strong></a> |
jdaggett@8311 | 6300 | |
jdaggett@8311 | 6301 | <li><code>@font-feature-values</code>, <a |
jdaggett@8311 | 6302 | href="#at-font-feature-values-rule" |
jdaggett@8311 | 6303 | title="@font-feature-values"><strong>6.9</strong></a> |
jdaggett@2479 | 6304 | |
jdaggett@4624 | 6305 | <li>all-petite-caps, <a href="#all-petite-caps" |
jdaggett@4624 | 6306 | title=all-petite-caps><strong>6.6</strong></a> |
jdaggett@4624 | 6307 | |
jdaggett@4624 | 6308 | <li>all-small-caps, <a href="#all-small-caps" |
jdaggett@4624 | 6309 | title=all-small-caps><strong>6.6</strong></a> |
jdaggett@4624 | 6310 | |
jdaggett@8225 | 6311 | <li>annotation, <a href="#annotation" |
jdaggett@7060 | 6312 | title=annotation><strong>6.8</strong></a> |
jdaggett@4624 | 6313 | |
jdaggett@4624 | 6314 | <li>aspect value, <a href="#aspect-value0" title="aspect |
jdaggett@4624 | 6315 | value"><strong>3.6</strong></a> |
jdaggett@4624 | 6316 | |
jdaggett@7103 | 6317 | <li>authoring tool, <a href="#authoring-tool" title="authoring |
jdaggett@7243 | 6318 | tool"><strong>#</strong></a> |
jdaggett@7103 | 6319 | |
jdaggett@8278 | 6320 | <li>auto |
jdaggett@8278 | 6321 | <ul> |
jdaggett@8278 | 6322 | <li>font-kerning, <a href="#font-kerning-auto-value" title="auto, |
jdaggett@8278 | 6323 | font-kerning"><strong>6.3</strong></a> |
jdaggett@8278 | 6324 | |
jdaggett@8278 | 6325 | <li>font-size-adjust, <a href="#font-size-adjust-auto-value" |
jdaggett@8278 | 6326 | title="auto, font-size-adjust"><strong>3.6</strong></a> |
jdaggett@8278 | 6327 | </ul> |
jdaggett@8278 | 6328 | |
jdaggett@8278 | 6329 | <li>bold, <a href="#bold" title=bold><strong>3.2</strong></a> |
jdaggett@8278 | 6330 | |
jdaggett@8278 | 6331 | <li>bolder, <a href="#bolder" title=bolder><strong>3.2</strong></a> |
jdaggett@8278 | 6332 | |
jdaggett@7311 | 6333 | <li>character map, <a href="#character-map" title="character |
jdaggett@7311 | 6334 | map"><strong>5.2</strong></a> |
jdaggett@7311 | 6335 | |
jdaggett@8225 | 6336 | <li>character-variant, <a href="#character-variant" |
jdaggett@7060 | 6337 | title=character-variant><strong>6.8</strong></a> |
jdaggett@4624 | 6338 | |
jdaggett@4624 | 6339 | <li>common-ligatures, <a href="#common-ligatures" |
jdaggett@6176 | 6340 | title=common-ligatures><strong>6.4</strong></a> |
jdaggett@4624 | 6341 | |
jdaggett@8278 | 6342 | <li>condensed, <a href="#condensed" |
jdaggett@8278 | 6343 | title=condensed><strong>3.3</strong></a> |
jdaggett@8278 | 6344 | |
jdaggett@4624 | 6345 | <li>contextual, <a href="#contextual" |
jdaggett@6176 | 6346 | title=contextual><strong>6.4</strong></a> |
jdaggett@4624 | 6347 | |
jdaggett@7021 | 6348 | <li>CSSFontFaceRule, <a href="#cssfontfacerule" |
jdaggett@7021 | 6349 | title=CSSFontFaceRule><strong>8.1</strong></a> |
jdaggett@7021 | 6350 | |
jdaggett@7021 | 6351 | <li>CSSFontFeatureValuesRule, <a href="#cssfontfeaturevaluesrule" |
jdaggett@7021 | 6352 | title=CSSFontFeatureValuesRule><strong>8.2</strong></a> |
jdaggett@7021 | 6353 | |
jdaggett@4624 | 6354 | <li>cursive, definition of, <a href="#cursive0" title="cursive, definition |
jdaggett@4624 | 6355 | of"><strong>#</strong></a> |
jdaggett@4624 | 6356 | |
jdaggett@7232 | 6357 | <li>default face, <a href="#default-face" title="default |
jdaggett@7309 | 6358 | face"><strong>5.2</strong></a> |
jdaggett@7232 | 6359 | |
jdaggett@8031 | 6360 | <li>descriptor_declaration, <a href="#descriptordeclaration" |
jdaggett@8031 | 6361 | title="descriptor_declaration"><strong>4.1</strong></a> |
jdaggett@8031 | 6362 | |
jdaggett@4624 | 6363 | <li>diagonal-fractions, <a href="#diagonal-fractions" |
jdaggett@4624 | 6364 | title=diagonal-fractions><strong>6.7</strong></a> |
jdaggett@4624 | 6365 | |
jdaggett@4624 | 6366 | <li>discretionary-ligatures, <a href="#discretionary-ligatures" |
jdaggett@6176 | 6367 | title=discretionary-ligatures><strong>6.4</strong></a> |
jdaggett@4624 | 6368 | |
jdaggett@8278 | 6369 | <li>expanded, <a href="#expanded" title=expanded><strong>3.3</strong></a> |
jdaggett@8278 | 6370 | |
jdaggett@8278 | 6371 | <li>extra-condensed, <a href="#extra-condensed" |
jdaggett@8278 | 6372 | title=extra-condensed><strong>3.3</strong></a> |
jdaggett@8278 | 6373 | |
jdaggett@8278 | 6374 | <li>extra-expanded, <a href="#extra-expanded" |
jdaggett@8278 | 6375 | title=extra-expanded><strong>3.3</strong></a> |
jdaggett@8278 | 6376 | |
jdaggett@4624 | 6377 | <li>fantasy, definition of, <a href="#fantasy0" title="fantasy, definition |
jdaggett@4624 | 6378 | of"><strong>#</strong></a> |
jdaggett@4624 | 6379 | |
jdaggett@8031 | 6380 | <li>feature_type, <a href="#featuretype" |
jdaggett@8356 | 6381 | title="feature_type"><strong>6.9.1</strong></a> |
jdaggett@8031 | 6382 | |
jdaggett@8031 | 6383 | <li>feature_value_block, <a href="#featurevalueblock" |
jdaggett@8356 | 6384 | title="feature_value_block"><strong>6.9.1</strong></a> |
jdaggett@8031 | 6385 | |
jdaggett@8031 | 6386 | <li>feature_value_definition, <a href="#featurevaluedefinition" |
jdaggett@8356 | 6387 | title="feature_value_definition"><strong>6.9.1</strong></a> |
jdaggett@7679 | 6388 | |
jdaggett@4624 | 6389 | <li>font, <a href="#propdef-font" title=font><strong>3.7</strong></a> |
jdaggett@2472 | 6390 | |
jdaggett@8356 | 6391 | <li>font specific, <a href="#font-specific" title="font |
jdaggett@8356 | 6392 | specific"><strong>6.8</strong></a> |
jdaggett@8356 | 6393 | |
jdaggett@8278 | 6394 | <li>font-family |
jdaggett@8278 | 6395 | <ul> |
jdaggett@8278 | 6396 | <li>descriptor, <a href="#descdef-font-family" title="font-family, |
jdaggett@8278 | 6397 | descriptor"><strong>4.2</strong></a> |
jdaggett@8278 | 6398 | |
jdaggett@8278 | 6399 | <li>property, <a href="#propdef-font-family" title="font-family, |
jdaggett@8278 | 6400 | property"><strong>3.1</strong></a> |
jdaggett@8278 | 6401 | </ul> |
jdaggett@1662 | 6402 | |
jdaggett@8279 | 6403 | <li>font-feature-settings |
jdaggett@8278 | 6404 | <ul> |
jdaggett@8278 | 6405 | <li>descriptor, <a href="#descdef-font-feature-settings" |
jdaggett@8278 | 6406 | title="font-feature-settings, descriptor"><strong>4.7</strong></a> |
jdaggett@8279 | 6407 | |
jdaggett@8279 | 6408 | <li>property, <a href="#propdef-font-feature-settings" |
jdaggett@8279 | 6409 | title="font-feature-settings, property"><strong>6.12</strong></a> |
jdaggett@8278 | 6410 | </ul> |
jdaggett@7060 | 6411 | |
jdaggett@1662 | 6412 | <li>font-kerning, <a href="#propdef-font-kerning" |
jdaggett@1856 | 6413 | title=font-kerning><strong>6.3</strong></a> |
jdaggett@1662 | 6414 | |
jdaggett@1732 | 6415 | <li>font-language-override, <a href="#propdef-font-language-override" |
jdaggett@2118 | 6416 | title=font-language-override><strong>6.13</strong></a> |
jdaggett@1662 | 6417 | |
jdaggett@1662 | 6418 | <li>font-size, <a href="#propdef-font-size" |
jdaggett@1662 | 6419 | title=font-size><strong>3.5</strong></a> |
jdaggett@1662 | 6420 | |
jdaggett@1662 | 6421 | <li>font-size-adjust, <a href="#propdef-font-size-adjust" |
jdaggett@1662 | 6422 | title=font-size-adjust><strong>3.6</strong></a> |
jdaggett@1662 | 6423 | |
jdaggett@8278 | 6424 | <li>font-stretch |
jdaggett@8278 | 6425 | <ul> |
jdaggett@8278 | 6426 | <li>descriptor, <a href="#descdef-font-stretch" title="font-stretch, |
jdaggett@8278 | 6427 | descriptor"><strong>4.4</strong></a> |
jdaggett@8278 | 6428 | |
jdaggett@8278 | 6429 | <li>property, <a href="#propdef-font-stretch" title="font-stretch, |
jdaggett@8278 | 6430 | property"><strong>3.3</strong></a> |
jdaggett@8278 | 6431 | </ul> |
jdaggett@8278 | 6432 | |
jdaggett@8278 | 6433 | <li>font-style |
jdaggett@8278 | 6434 | <ul> |
jdaggett@8278 | 6435 | <li>descriptor, <a href="#descdef-font-style" title="font-style, |
jdaggett@8278 | 6436 | descriptor"><strong>4.4</strong></a> |
jdaggett@8278 | 6437 | |
jdaggett@8278 | 6438 | <li>property, <a href="#propdef-font-style" title="font-style, |
jdaggett@8278 | 6439 | property"><strong>3.4</strong></a> |
jdaggett@8278 | 6440 | </ul> |
jdaggett@7060 | 6441 | |
jdaggett@2487 | 6442 | <li>font-synthesis, <a href="#propdef-font-synthesis" |
jdaggett@2487 | 6443 | title=font-synthesis><strong>3.8</strong></a> |
jdaggett@2457 | 6444 | |
jdaggett@8278 | 6445 | <li>font-variant |
jdaggett@8278 | 6446 | <ul> |
jdaggett@8278 | 6447 | <li>descriptor, <a href="#descdef-font-variant" title="font-variant, |
jdaggett@8278 | 6448 | descriptor"><strong>4.7</strong></a> |
jdaggett@8278 | 6449 | |
jdaggett@8278 | 6450 | <li>property, <a href="#propdef-font-variant" title="font-variant, |
jdaggett@8278 | 6451 | property"><strong>6.11</strong></a> |
jdaggett@8278 | 6452 | </ul> |
jdaggett@1662 | 6453 | |
jdaggett@1662 | 6454 | <li>font-variant-alternates, <a href="#propdef-font-variant-alternates" |
jdaggett@2118 | 6455 | title=font-variant-alternates><strong>6.8</strong></a> |
jdaggett@1662 | 6456 | |
jdaggett@1662 | 6457 | <li>font-variant-caps, <a href="#propdef-font-variant-caps" |
jdaggett@2118 | 6458 | title=font-variant-caps><strong>6.6</strong></a> |
jdaggett@1732 | 6459 | |
jdaggett@1662 | 6460 | <li>font-variant-east-asian, <a href="#propdef-font-variant-east-asian" |
jdaggett@2118 | 6461 | title=font-variant-east-asian><strong>6.10</strong></a> |
jdaggett@1662 | 6462 | |
jdaggett@1662 | 6463 | <li>font-variant-ligatures, <a href="#propdef-font-variant-ligatures" |
jdaggett@6176 | 6464 | title=font-variant-ligatures><strong>6.4</strong></a> |
jdaggett@1662 | 6465 | |
jdaggett@1662 | 6466 | <li>font-variant-numeric, <a href="#propdef-font-variant-numeric" |
jdaggett@2118 | 6467 | title=font-variant-numeric><strong>6.7</strong></a> |
jdaggett@2118 | 6468 | |
jdaggett@3460 | 6469 | <li>font-variant-position, <a href="#propdef-font-variant-position" |
jdaggett@6176 | 6470 | title=font-variant-position><strong>6.5</strong></a> |
jdaggett@3460 | 6471 | |
jdaggett@8278 | 6472 | <li>font-weight |
jdaggett@8278 | 6473 | <ul> |
jdaggett@8278 | 6474 | <li>descriptor, <a href="#descdef-font-weight" title="font-weight, |
jdaggett@8278 | 6475 | descriptor"><strong>4.4</strong></a> |
jdaggett@8278 | 6476 | |
jdaggett@8278 | 6477 | <li>property, <a href="#propdef-font-weight" title="font-weight, |
jdaggett@8278 | 6478 | property"><strong>3.2</strong></a> |
jdaggett@8278 | 6479 | </ul> |
jdaggett@1662 | 6480 | |
jdaggett@8031 | 6481 | <li>font_face_rule, <a href="#fontfacerule" |
jdaggett@8031 | 6482 | title="font_face_rule"><strong>4.1</strong></a> |
jdaggett@8031 | 6483 | |
jdaggett@8225 | 6484 | <li>FONT_FACE_SYM, <a href="#fontfacesym" |
jdaggett@8225 | 6485 | title="FONT_FACE_SYM"><strong>4.1</strong></a> |
jdaggett@8225 | 6486 | |
jdaggett@8031 | 6487 | <li>font_family_name, <a href="#fontfamilyname" |
jdaggett@8356 | 6488 | title="font_family_name"><strong>6.9.1</strong></a> |
jdaggett@8031 | 6489 | |
jdaggett@8031 | 6490 | <li>font_family_name_list, <a href="#fontfamilynamelist" |
jdaggett@8356 | 6491 | title="font_family_name_list"><strong>6.9.1</strong></a> |
jdaggett@8031 | 6492 | |
jdaggett@8031 | 6493 | <li>font_feature_values_rule, <a href="#fontfeaturevaluesrule" |
jdaggett@8356 | 6494 | title="font_feature_values_rule"><strong>6.9.1</strong></a> |
jdaggett@8031 | 6495 | |
jdaggett@8225 | 6496 | <li>FONT_FEATURE_VALUES_SYM, <a href="#fontfeaturevaluessym" |
jdaggett@8356 | 6497 | title="FONT_FEATURE_VALUES_SYM"><strong>6.9.1</strong></a> |
jdaggett@8225 | 6498 | |
jdaggett@1662 | 6499 | <li>full-width, <a href="#full-width" |
jdaggett@2118 | 6500 | title=full-width><strong>6.10</strong></a> |
jdaggett@1662 | 6501 | |
jdaggett@1662 | 6502 | <li>historical-forms, <a href="#historical-forms" |
jdaggett@2118 | 6503 | title=historical-forms><strong>6.8</strong></a> |
jdaggett@1662 | 6504 | |
jdaggett@1662 | 6505 | <li>historical-ligatures, <a href="#historical-ligatures" |
jdaggett@6176 | 6506 | title=historical-ligatures><strong>6.4</strong></a> |
jdaggett@1732 | 6507 | |
jdaggett@8278 | 6508 | <li>italic, <a href="#italic" title=italic><strong>3.4</strong></a> |
jdaggett@8278 | 6509 | |
jdaggett@2118 | 6510 | <li>jis04, <a href="#jis04" title=jis04><strong>6.10</strong></a> |
jdaggett@2118 | 6511 | |
jdaggett@2118 | 6512 | <li>jis78, <a href="#jis78" title=jis78><strong>6.10</strong></a> |
jdaggett@2118 | 6513 | |
jdaggett@2118 | 6514 | <li>jis83, <a href="#jis83" title=jis83><strong>6.10</strong></a> |
jdaggett@2118 | 6515 | |
jdaggett@2118 | 6516 | <li>jis90, <a href="#jis90" title=jis90><strong>6.10</strong></a> |
jdaggett@1662 | 6517 | |
jdaggett@8278 | 6518 | <li>lighter, <a href="#lighter" title=lighter><strong>3.2</strong></a> |
jdaggett@8278 | 6519 | |
jdaggett@1662 | 6520 | <li>lining-nums, <a href="#lining-nums" |
jdaggett@2118 | 6521 | title=lining-nums><strong>6.7</strong></a> |
jdaggett@890 | 6522 | |
jdaggett@890 | 6523 | <li>monospace, definition of, <a href="#monospace0" title="monospace, |
jdaggett@890 | 6524 | definition of"><strong>#</strong></a> |
jdaggett@890 | 6525 | |
jdaggett@1662 | 6526 | <li>no-common-ligatures, <a href="#no-common-ligatures" |
jdaggett@6176 | 6527 | title=no-common-ligatures><strong>6.4</strong></a> |
jdaggett@1662 | 6528 | |
jdaggett@1662 | 6529 | <li>no-contextual, <a href="#no-contextual" |
jdaggett@6176 | 6530 | title=no-contextual><strong>6.4</strong></a> |
jdaggett@1662 | 6531 | |
jdaggett@3460 | 6532 | <li>no-discretionary-ligatures, <a href="#no-discretionary-ligatures" |
jdaggett@6176 | 6533 | title=no-discretionary-ligatures><strong>6.4</strong></a> |
jdaggett@3460 | 6534 | |
jdaggett@1662 | 6535 | <li>no-historical-ligatures, <a href="#no-historical-ligatures" |
jdaggett@6176 | 6536 | title=no-historical-ligatures><strong>6.4</strong></a> |
jdaggett@1662 | 6537 | |
jdaggett@8278 | 6538 | <li>none |
jdaggett@8278 | 6539 | <ul> |
jdaggett@8278 | 6540 | <li>font-kerning, <a href="#font-kerning-none-value" title="none, |
jdaggett@8278 | 6541 | font-kerning"><strong>6.3</strong></a> |
jdaggett@8278 | 6542 | |
jdaggett@8278 | 6543 | <li>font-size-adjust, <a href="#font-size-adjust-none-value" |
jdaggett@8278 | 6544 | title="none, font-size-adjust"><strong>3.6</strong></a> |
jdaggett@8278 | 6545 | |
jdaggett@8278 | 6546 | <li>font-variant, <a href="#font-variant-none-value" title="none, |
jdaggett@8278 | 6547 | font-variant"><strong>6.11</strong></a> |
jdaggett@8278 | 6548 | |
jdaggett@8278 | 6549 | <li>font-variant-ligatures, <a href="#font-variant-ligatures-none-value" |
jdaggett@8278 | 6550 | title="none, font-variant-ligatures"><strong>6.4</strong></a> |
jdaggett@8278 | 6551 | </ul> |
jdaggett@8278 | 6552 | |
jdaggett@8279 | 6553 | <li>normal, <a href="#normal" title=normal><strong>6.5</strong></a> |
jdaggett@8278 | 6554 | <ul> |
jdaggett@8278 | 6555 | <li>font-feature-settings, <a href="#font-feature-settings-normal-value" |
jdaggett@8278 | 6556 | title="normal, font-feature-settings"><strong>6.12</strong></a> |
jdaggett@8278 | 6557 | |
jdaggett@8278 | 6558 | <li>font-kerning, <a href="#font-kerning-normal-value" title="normal, |
jdaggett@8278 | 6559 | font-kerning"><strong>6.3</strong></a> |
jdaggett@8278 | 6560 | |
jdaggett@8278 | 6561 | <li>font-language-override, <a |
jdaggett@8278 | 6562 | href="#font-language-override-normal-value" title="normal, |
jdaggett@8278 | 6563 | font-language-override"><strong>6.13</strong></a> |
jdaggett@8278 | 6564 | |
jdaggett@8278 | 6565 | <li>font-stretch, <a href="#font-stretch-normal-value" title="normal, |
jdaggett@8278 | 6566 | font-stretch"><strong>3.3</strong></a> |
jdaggett@8278 | 6567 | |
jdaggett@8278 | 6568 | <li>font-style, <a href="#font-style-normal-value" title="normal, |
jdaggett@8278 | 6569 | font-style"><strong>3.4</strong></a> |
jdaggett@8278 | 6570 | |
jdaggett@8278 | 6571 | <li>font-variant, <a href="#font-variant-normal-value" title="normal, |
jdaggett@8278 | 6572 | font-variant"><strong>6.11</strong></a> |
jdaggett@8278 | 6573 | |
jdaggett@8278 | 6574 | <li>font-variant-alternates, <a |
jdaggett@8278 | 6575 | href="#font-variant-alternates-normal-value" title="normal, |
jdaggett@8278 | 6576 | font-variant-alternates"><strong>6.8</strong></a> |
jdaggett@8278 | 6577 | |
jdaggett@8278 | 6578 | <li>font-variant-caps, <a href="#font-variant-caps-normal-value" |
jdaggett@8278 | 6579 | title="normal, font-variant-caps"><strong>6.6</strong></a> |
jdaggett@8278 | 6580 | |
jdaggett@8278 | 6581 | <li>font-variant-east-asian, <a |
jdaggett@8278 | 6582 | href="#font-variant-east-asian-normal-value" title="normal, |
jdaggett@8278 | 6583 | font-variant-east-asian"><strong>6.10</strong></a> |
jdaggett@8278 | 6584 | |
jdaggett@8278 | 6585 | <li>font-variant-ligatures, <a |
jdaggett@8278 | 6586 | href="#font-variant-ligatures-normal-value" title="normal, |
jdaggett@8278 | 6587 | font-variant-ligatures"><strong>6.4</strong></a> |
jdaggett@8278 | 6588 | |
jdaggett@8278 | 6589 | <li>font-variant-numeric, <a href="#font-variant-numeric-normal-value" |
jdaggett@8278 | 6590 | title="normal, font-variant-numeric"><strong>6.7</strong></a> |
jdaggett@8278 | 6591 | |
jdaggett@8278 | 6592 | <li>font-weight, <a href="#font-weight-normal-value" title="normal, |
jdaggett@8278 | 6593 | font-weight"><strong>3.2</strong></a> |
jdaggett@8278 | 6594 | </ul> |
jdaggett@8278 | 6595 | |
jdaggett@8278 | 6596 | <li>oblique, <a href="#oblique" title=oblique><strong>3.4</strong></a> |
jdaggett@5809 | 6597 | |
jdaggett@1662 | 6598 | <li>oldstyle-nums, <a href="#oldstyle-nums" |
jdaggett@2118 | 6599 | title=oldstyle-nums><strong>6.7</strong></a> |
jdaggett@2118 | 6600 | |
jdaggett@3638 | 6601 | <li>ordinal, <a href="#ordinal" title=ordinal><strong>6.7</strong></a> |
jdaggett@3638 | 6602 | |
jdaggett@8225 | 6603 | <li>ornaments, <a href="#ornaments" |
jdaggett@7060 | 6604 | title=ornaments><strong>6.8</strong></a> |
jdaggett@2118 | 6605 | |
jdaggett@1662 | 6606 | <li>petite-caps, <a href="#petite-caps" |
jdaggett@2118 | 6607 | title=petite-caps><strong>6.6</strong></a> |
jdaggett@1662 | 6608 | |
jdaggett@1662 | 6609 | <li>proportional-nums, <a href="#proportional-nums" |
jdaggett@2118 | 6610 | title=proportional-nums><strong>6.7</strong></a> |
jdaggett@1662 | 6611 | |
jdaggett@1662 | 6612 | <li>proportional-width, <a href="#proportional-width" |
jdaggett@2118 | 6613 | title=proportional-width><strong>6.10</strong></a> |
jdaggett@512 | 6614 | |
jdaggett@7243 | 6615 | <li>renderer, <a href="#renderer" title=renderer><strong>#</strong></a> |
jdaggett@7103 | 6616 | |
jdaggett@3638 | 6617 | <li>ruby, <a href="#ruby" title=ruby><strong>6.10</strong></a> |
jdaggett@1662 | 6618 | |
jdaggett@890 | 6619 | <li>sans-serif, definition of, <a href="#sans-serif0" title="sans-serif, |
jdaggett@890 | 6620 | definition of"><strong>#</strong></a> |
jdaggett@890 | 6621 | |
jdaggett@8278 | 6622 | <li>semi-condensed, <a href="#semi-condensed-" |
jdaggett@8278 | 6623 | title=semi-condensed><strong>3.3</strong></a> |
jdaggett@8278 | 6624 | |
jdaggett@8278 | 6625 | <li>semi-expanded, <a href="#semi-expanded" |
jdaggett@8278 | 6626 | title=semi-expanded><strong>3.3</strong></a> |
jdaggett@8278 | 6627 | |
jdaggett@890 | 6628 | <li>serif, definition of, <a href="#serif0" title="serif, definition |
jdaggett@890 | 6629 | of"><strong>#</strong></a> |
jdaggett@890 | 6630 | |
jdaggett@2504 | 6631 | <li>simplified, <a href="#simplified" |
jdaggett@2504 | 6632 | title=simplified><strong>6.10</strong></a> |
jdaggett@1662 | 6633 | |
jdaggett@1662 | 6634 | <li>slashed-zero, <a href="#slashed-zero" |
jdaggett@2118 | 6635 | title=slashed-zero><strong>6.7</strong></a> |
jdaggett@1662 | 6636 | |
jdaggett@1662 | 6637 | <li>small-caps, <a href="#small-caps" |
jdaggett@2118 | 6638 | title=small-caps><strong>6.6</strong></a> |
jdaggett@1662 | 6639 | |
jdaggett@1662 | 6640 | <li>src, <a href="#descdef-src" title=src><strong>4.3</strong></a> |
jdaggett@1662 | 6641 | |
jdaggett@1662 | 6642 | <li>stacked-fractions, <a href="#stacked-fractions" |
jdaggett@2118 | 6643 | title=stacked-fractions><strong>6.7</strong></a> |
jdaggett@2118 | 6644 | |
jdaggett@7103 | 6645 | <li>style sheet |
jdaggett@7103 | 6646 | <ul> |
jdaggett@7103 | 6647 | <li>as conformance class, <a href="#style-sheet" title="style sheet, as |
jdaggett@7243 | 6648 | conformance class"><strong>#</strong></a> |
jdaggett@7103 | 6649 | </ul> |
jdaggett@7103 | 6650 | |
jdaggett@8225 | 6651 | <li>styleset, <a href="#styleset" title=styleset><strong>6.8</strong></a> |
jdaggett@8225 | 6652 | |
jdaggett@8225 | 6653 | <li>stylistic, <a href="#stylistic" |
jdaggett@7060 | 6654 | title=stylistic><strong>6.8</strong></a> |
jdaggett@7060 | 6655 | |
jdaggett@8279 | 6656 | <li>sub, <a href="#sub" title=sub><strong>6.5</strong></a> |
jdaggett@8279 | 6657 | |
jdaggett@8279 | 6658 | <li>super, <a href="#super" title=super><strong>6.5</strong></a> |
jdaggett@8279 | 6659 | |
jdaggett@8225 | 6660 | <li>swash, <a href="#swash" title=swash><strong>6.8</strong></a> |
jdaggett@1662 | 6661 | |
jdaggett@8363 | 6662 | <li>system font fallback, <a href="#system-font-fallback" title="system |
jdaggett@8363 | 6663 | font fallback"><strong>5.2</strong></a> |
jdaggett@8363 | 6664 | |
jdaggett@1662 | 6665 | <li>tabular-nums, <a href="#tabular-nums" |
jdaggett@2118 | 6666 | title=tabular-nums><strong>6.7</strong></a> |
jdaggett@1662 | 6667 | |
jdaggett@1662 | 6668 | <li>titling-caps, <a href="#titling-caps" |
jdaggett@2118 | 6669 | title=titling-caps><strong>6.6</strong></a> |
jdaggett@1856 | 6670 | |
jdaggett@2504 | 6671 | <li>traditional, <a href="#traditional" |
jdaggett@2504 | 6672 | title=traditional><strong>6.10</strong></a> |
jdaggett@2118 | 6673 | |
jdaggett@8278 | 6674 | <li>ultra-condensed, <a href="#ultra-condensed" |
jdaggett@8278 | 6675 | title=ultra-condensed><strong>3.3</strong></a> |
jdaggett@8278 | 6676 | |
jdaggett@8278 | 6677 | <li>ultra-expanded, <a href="#ultra-expanded" |
jdaggett@8278 | 6678 | title=ultra-expanded><strong>3.3</strong></a> |
jdaggett@8278 | 6679 | |
jdaggett@2118 | 6680 | <li>unicase, <a href="#unicase" title=unicase><strong>6.6</strong></a> |
jdaggett@1662 | 6681 | |
jdaggett@1662 | 6682 | <li>unicode-range, <a href="#descdef-unicode-range" |
jdaggett@890 | 6683 | title=unicode-range><strong>4.5</strong></a> |
jdaggett@7311 | 6684 | |
jdaggett@7311 | 6685 | <li>weight, <a href="#weight" title=weight><strong>2</strong></a> |
jdaggett@7311 | 6686 | |
jdaggett@7311 | 6687 | <li>width, <a href="#width" title=width><strong>2</strong></a> |
jdaggett@484 | 6688 | </ul> |
jdaggett@484 | 6689 | <!--end-index--> |
jdaggett@484 | 6690 | |
jdaggett@484 | 6691 | <h2 class=no-num id=property-index>Property index</h2> |
jdaggett@890 | 6692 | <!--begin-properties--> |
jdaggett@484 | 6693 | |
jdaggett@484 | 6694 | <table class=proptable> |
jdaggett@484 | 6695 | <thead> |
jdaggett@484 | 6696 | <tr> |
jdaggett@484 | 6697 | <th>Property |
jdaggett@484 | 6698 | |
jdaggett@484 | 6699 | <th>Values |
jdaggett@484 | 6700 | |
jdaggett@484 | 6701 | <th>Initial |
jdaggett@484 | 6702 | |
jdaggett@1148 | 6703 | <th>Applies to |
jdaggett@484 | 6704 | |
jdaggett@484 | 6705 | <th>Inh. |
jdaggett@484 | 6706 | |
jdaggett@484 | 6707 | <th>Percentages |
jdaggett@484 | 6708 | |
jdaggett@484 | 6709 | <th>Media |
jdaggett@484 | 6710 | |
jdaggett@484 | 6711 | <tbody> |
jdaggett@3460 | 6712 | <tr> |
jdaggett@3460 | 6713 | <th><a class=property href="#propdef-font">font</a> |
jdaggett@484 | 6714 | |
jdaggett@8225 | 6715 | <td>[ [ <‘font-style’> || <font-variant-css21> || |
jdaggett@8225 | 6716 | <‘font-weight’> || <‘font-stretch’ ]? |
jdaggett@8225 | 6717 | <‘font-size’> [ / <‘line-height’> ]? |
jdaggett@8225 | 6718 | <‘font-family’> ] | caption | icon | menu | message-box | |
jdaggett@7020 | 6719 | small-caption | status-bar |
jdaggett@484 | 6720 | |
jdaggett@484 | 6721 | <td>see individual properties |
jdaggett@484 | 6722 | |
jdaggett@484 | 6723 | <td>all elements |
jdaggett@484 | 6724 | |
jdaggett@484 | 6725 | <td>yes |
jdaggett@484 | 6726 | |
jdaggett@484 | 6727 | <td>see individual properties |
jdaggett@484 | 6728 | |
jdaggett@484 | 6729 | <td>visual |
jdaggett@484 | 6730 | |
jdaggett@3460 | 6731 | <tr> |
jdaggett@8278 | 6732 | <th><span class=property>font-family</span> |
jdaggett@484 | 6733 | |
jdaggett@8225 | 6734 | <td>[ <family-name> | <generic-family> ] # |
jdaggett@484 | 6735 | |
jdaggett@484 | 6736 | <td>depends on user agent |
jdaggett@484 | 6737 | |
jdaggett@484 | 6738 | <td>all elements |
jdaggett@484 | 6739 | |
jdaggett@484 | 6740 | <td>yes |
jdaggett@484 | 6741 | |
jdaggett@484 | 6742 | <td>N/A |
jdaggett@484 | 6743 | |
jdaggett@484 | 6744 | <td>visual |
jdaggett@484 | 6745 | |
jdaggett@3460 | 6746 | <tr> |
jdaggett@8279 | 6747 | <th><span class=property>font-feature-settings</span> |
jdaggett@1662 | 6748 | |
jdaggett@8225 | 6749 | <td>normal | <feature-tag-value> # |
jdaggett@1662 | 6750 | |
jdaggett@1662 | 6751 | <td>normal |
jdaggett@1662 | 6752 | |
jdaggett@1662 | 6753 | <td>all elements |
jdaggett@1662 | 6754 | |
jdaggett@1662 | 6755 | <td>yes |
jdaggett@1662 | 6756 | |
jdaggett@1662 | 6757 | <td>N/A |
jdaggett@1662 | 6758 | |
jdaggett@1662 | 6759 | <td>visual |
jdaggett@1662 | 6760 | |
jdaggett@3460 | 6761 | <tr> |
jdaggett@3460 | 6762 | <th><a class=property href="#propdef-font-kerning">font-kerning</a> |
jdaggett@1662 | 6763 | |
jdaggett@1856 | 6764 | <td>auto | normal | none |
jdaggett@1856 | 6765 | |
jdaggett@1856 | 6766 | <td>auto |
jdaggett@1662 | 6767 | |
jdaggett@1662 | 6768 | <td>all elements |
jdaggett@1662 | 6769 | |
jdaggett@1662 | 6770 | <td>yes |
jdaggett@1662 | 6771 | |
jdaggett@1662 | 6772 | <td>N/A |
jdaggett@1662 | 6773 | |
jdaggett@1662 | 6774 | <td>visual |
jdaggett@1662 | 6775 | |
jdaggett@3460 | 6776 | <tr> |
jdaggett@3460 | 6777 | <th><a class=property |
jdaggett@1732 | 6778 | href="#propdef-font-language-override">font-language-override</a> |
jdaggett@1662 | 6779 | |
jdaggett@5809 | 6780 | <td>normal | <string> |
jdaggett@1662 | 6781 | |
jdaggett@1662 | 6782 | <td>normal |
jdaggett@1662 | 6783 | |
jdaggett@1662 | 6784 | <td>all elements |
jdaggett@1662 | 6785 | |
jdaggett@1662 | 6786 | <td>yes |
jdaggett@1662 | 6787 | |
jdaggett@1662 | 6788 | <td>N/A |
jdaggett@1662 | 6789 | |
jdaggett@1662 | 6790 | <td>visual |
jdaggett@1662 | 6791 | |
jdaggett@3460 | 6792 | <tr> |
jdaggett@3460 | 6793 | <th><a class=property href="#propdef-font-size">font-size</a> |
jdaggett@484 | 6794 | |
jdaggett@8225 | 6795 | <td><absolute-size> | <relative-size> | <length> | |
jdaggett@8225 | 6796 | <percentage> |
jdaggett@484 | 6797 | |
jdaggett@484 | 6798 | <td>medium |
jdaggett@484 | 6799 | |
jdaggett@484 | 6800 | <td>all elements |
jdaggett@484 | 6801 | |
jdaggett@484 | 6802 | <td>yes |
jdaggett@484 | 6803 | |
jdaggett@484 | 6804 | <td>refer to parent element's font size |
jdaggett@484 | 6805 | |
jdaggett@484 | 6806 | <td>visual |
jdaggett@484 | 6807 | |
jdaggett@3460 | 6808 | <tr> |
jdaggett@3460 | 6809 | <th><a class=property |
jdaggett@1662 | 6810 | href="#propdef-font-size-adjust">font-size-adjust</a> |
jdaggett@484 | 6811 | |
jdaggett@8225 | 6812 | <td>none | auto | <number> |
jdaggett@484 | 6813 | |
jdaggett@484 | 6814 | <td>none |
jdaggett@484 | 6815 | |
jdaggett@484 | 6816 | <td>all elements |
jdaggett@484 | 6817 | |
jdaggett@484 | 6818 | <td>yes |
jdaggett@484 | 6819 | |
jdaggett@554 | 6820 | <td>N/A |
jdaggett@484 | 6821 | |
jdaggett@484 | 6822 | <td>visual |
jdaggett@484 | 6823 | |
jdaggett@3460 | 6824 | <tr> |
jdaggett@8278 | 6825 | <th><span class=property>font-stretch</span> |
jdaggett@1662 | 6826 | |
jdaggett@1662 | 6827 | <td>normal | ultra-condensed | extra-condensed | condensed | |
jdaggett@1662 | 6828 | semi-condensed | semi-expanded | expanded | extra-expanded | |
jdaggett@5809 | 6829 | ultra-expanded |
jdaggett@484 | 6830 | |
jdaggett@484 | 6831 | <td>normal |
jdaggett@484 | 6832 | |
jdaggett@484 | 6833 | <td>all elements |
jdaggett@484 | 6834 | |
jdaggett@484 | 6835 | <td>yes |
jdaggett@484 | 6836 | |
jdaggett@484 | 6837 | <td>N/A |
jdaggett@484 | 6838 | |
jdaggett@484 | 6839 | <td>visual |
jdaggett@484 | 6840 | |
jdaggett@3460 | 6841 | <tr> |
jdaggett@8278 | 6842 | <th><span class=property>font-style</span> |
jdaggett@484 | 6843 | |
jdaggett@5809 | 6844 | <td>normal | italic | oblique |
jdaggett@484 | 6845 | |
jdaggett@484 | 6846 | <td>normal |
jdaggett@484 | 6847 | |
jdaggett@484 | 6848 | <td>all elements |
jdaggett@484 | 6849 | |
jdaggett@484 | 6850 | <td>yes |
jdaggett@484 | 6851 | |
jdaggett@484 | 6852 | <td>N/A |
jdaggett@484 | 6853 | |
jdaggett@484 | 6854 | <td>visual |
jdaggett@484 | 6855 | |
jdaggett@3460 | 6856 | <tr> |
jdaggett@3460 | 6857 | <th><a class=property href="#propdef-font-synthesis">font-synthesis</a> |
jdaggett@2487 | 6858 | |
jdaggett@2487 | 6859 | <td>none | [ weight || style ] |
jdaggett@2487 | 6860 | |
jdaggett@2487 | 6861 | <td>weight style |
jdaggett@2457 | 6862 | |
jdaggett@2457 | 6863 | <td>all elements |
jdaggett@2457 | 6864 | |
jdaggett@2457 | 6865 | <td>yes |
jdaggett@2457 | 6866 | |
jdaggett@2457 | 6867 | <td>N/A |
jdaggett@2457 | 6868 | |
jdaggett@2457 | 6869 | <td>visual |
jdaggett@2457 | 6870 | |
jdaggett@3460 | 6871 | <tr> |
jdaggett@8278 | 6872 | <th><span class=property>font-variant</span> |
jdaggett@1662 | 6873 | |
jdaggett@6436 | 6874 | <td>normal | none | [ <common-lig-values> || |
jdaggett@3460 | 6875 | <discretionary-lig-values> || <historical-lig-values> || |
jdaggett@3041 | 6876 | <contextual-alt-values> || stylistic(<feature-value-name>) |
jdaggett@8225 | 6877 | || historical-forms || styleset(<feature-value-name> #) || |
jdaggett@8225 | 6878 | character-variant(<feature-value-name> #) || |
jdaggett@5833 | 6879 | swash(<feature-value-name>) || |
jdaggett@3041 | 6880 | ornaments(<feature-value-name>) || |
jdaggett@4545 | 6881 | annotation(<feature-value-name>) || [ small-caps | all-small-caps |
jdaggett@6648 | 6882 | | petite-caps | all-petite-caps | unicase | titling-caps ] || |
jdaggett@2509 | 6883 | <numeric-figure-values> || <numeric-spacing-values> || |
jdaggett@3638 | 6884 | <numeric-fraction-values> || ordinal || slashed-zero || |
jdaggett@3638 | 6885 | <east-asian-variant-values> || <east-asian-width-values> || |
jdaggett@3638 | 6886 | ruby ] |
jdaggett@484 | 6887 | |
jdaggett@484 | 6888 | <td>normal |
jdaggett@484 | 6889 | |
jdaggett@484 | 6890 | <td>all elements |
jdaggett@484 | 6891 | |
jdaggett@484 | 6892 | <td>yes |
jdaggett@484 | 6893 | |
jdaggett@7377 | 6894 | <td>see individual properties |
jdaggett@484 | 6895 | |
jdaggett@484 | 6896 | <td>visual |
jdaggett@484 | 6897 | |
jdaggett@3460 | 6898 | <tr> |
jdaggett@3460 | 6899 | <th><a class=property |
jdaggett@1662 | 6900 | href="#propdef-font-variant-alternates">font-variant-alternates</a> |
jdaggett@1662 | 6901 | |
jdaggett@6176 | 6902 | <td>normal | [ stylistic(<feature-value-name>) || historical-forms |
jdaggett@8225 | 6903 | || styleset(<feature-value-name> #) || |
jdaggett@8225 | 6904 | character-variant(<feature-value-name> #) || |
jdaggett@5833 | 6905 | swash(<feature-value-name>) || |
jdaggett@3638 | 6906 | ornaments(<feature-value-name>) || |
jdaggett@3638 | 6907 | annotation(<feature-value-name>) ] |
jdaggett@1662 | 6908 | |
jdaggett@1662 | 6909 | <td>normal |
jdaggett@1662 | 6910 | |
jdaggett@1662 | 6911 | <td>all elements |
jdaggett@1662 | 6912 | |
jdaggett@1662 | 6913 | <td>yes |
jdaggett@1662 | 6914 | |
jdaggett@1662 | 6915 | <td>N/A |
jdaggett@1662 | 6916 | |
jdaggett@1662 | 6917 | <td>visual |
jdaggett@1662 | 6918 | |
jdaggett@3460 | 6919 | <tr> |
jdaggett@3460 | 6920 | <th><a class=property |
jdaggett@1662 | 6921 | href="#propdef-font-variant-caps">font-variant-caps</a> |
jdaggett@1662 | 6922 | |
jdaggett@5809 | 6923 | <td>normal | small-caps | all-small-caps | petite-caps | all-petite-caps |
jdaggett@6648 | 6924 | | unicase | titling-caps |
jdaggett@1662 | 6925 | |
jdaggett@1662 | 6926 | <td>normal |
jdaggett@1662 | 6927 | |
jdaggett@1662 | 6928 | <td>all elements |
jdaggett@1662 | 6929 | |
jdaggett@1662 | 6930 | <td>yes |
jdaggett@1662 | 6931 | |
jdaggett@1662 | 6932 | <td>N/A |
jdaggett@1662 | 6933 | |
jdaggett@1662 | 6934 | <td>visual |
jdaggett@1662 | 6935 | |
jdaggett@3460 | 6936 | <tr> |
jdaggett@3460 | 6937 | <th><a class=property |
jdaggett@1662 | 6938 | href="#propdef-font-variant-east-asian">font-variant-east-asian</a> |
jdaggett@1662 | 6939 | |
jdaggett@5809 | 6940 | <td>normal | [ <east-asian-variant-values> || |
jdaggett@3638 | 6941 | <east-asian-width-values> || ruby ] |
jdaggett@1662 | 6942 | |
jdaggett@1662 | 6943 | <td>normal |
jdaggett@1662 | 6944 | |
jdaggett@1662 | 6945 | <td>all elements |
jdaggett@1662 | 6946 | |
jdaggett@1662 | 6947 | <td>yes |
jdaggett@1662 | 6948 | |
jdaggett@1662 | 6949 | <td>N/A |
jdaggett@1662 | 6950 | |
jdaggett@1662 | 6951 | <td>visual |
jdaggett@1662 | 6952 | |
jdaggett@3460 | 6953 | <tr> |
jdaggett@3460 | 6954 | <th><a class=property |
jdaggett@1662 | 6955 | href="#propdef-font-variant-ligatures">font-variant-ligatures</a> |
jdaggett@1662 | 6956 | |
jdaggett@8225 | 6957 | <td>normal | none | [ <common-lig-values> || |
jdaggett@8225 | 6958 | <discretionary-lig-values> || <historical-lig-values> || |
jdaggett@8225 | 6959 | <contextual-alt-values> ] |
jdaggett@1662 | 6960 | |
jdaggett@1662 | 6961 | <td>normal |
jdaggett@1662 | 6962 | |
jdaggett@1662 | 6963 | <td>all elements |
jdaggett@1662 | 6964 | |
jdaggett@1662 | 6965 | <td>yes |
jdaggett@1662 | 6966 | |
jdaggett@1662 | 6967 | <td>N/A |
jdaggett@1662 | 6968 | |
jdaggett@1662 | 6969 | <td>visual |
jdaggett@1662 | 6970 | |
jdaggett@3460 | 6971 | <tr> |
jdaggett@3460 | 6972 | <th><a class=property |
jdaggett@1662 | 6973 | href="#propdef-font-variant-numeric">font-variant-numeric</a> |
jdaggett@1662 | 6974 | |
jdaggett@5809 | 6975 | <td>normal | [ <numeric-figure-values> || |
jdaggett@1732 | 6976 | <numeric-spacing-values> || <numeric-fraction-values> || |
jdaggett@3638 | 6977 | ordinal || slashed-zero ] |
jdaggett@1662 | 6978 | |
jdaggett@1662 | 6979 | <td>normal |
jdaggett@1662 | 6980 | |
jdaggett@1662 | 6981 | <td>all elements |
jdaggett@1662 | 6982 | |
jdaggett@1662 | 6983 | <td>yes |
jdaggett@1662 | 6984 | |
jdaggett@1662 | 6985 | <td>N/A |
jdaggett@1662 | 6986 | |
jdaggett@1662 | 6987 | <td>visual |
jdaggett@1662 | 6988 | |
jdaggett@3460 | 6989 | <tr> |
jdaggett@3460 | 6990 | <th><a class=property |
jdaggett@3460 | 6991 | href="#propdef-font-variant-position">font-variant-position</a> |
jdaggett@3460 | 6992 | |
jdaggett@3638 | 6993 | <td>normal | sub | super |
jdaggett@3460 | 6994 | |
jdaggett@3460 | 6995 | <td>normal |
jdaggett@3460 | 6996 | |
jdaggett@3460 | 6997 | <td>all elements |
jdaggett@3460 | 6998 | |
jdaggett@3460 | 6999 | <td>yes |
jdaggett@3460 | 7000 | |
jdaggett@3460 | 7001 | <td>N/A |
jdaggett@3460 | 7002 | |
jdaggett@3460 | 7003 | <td>visual |
jdaggett@3460 | 7004 | |
jdaggett@3460 | 7005 | <tr> |
jdaggett@8278 | 7006 | <th><span class=property>font-weight</span> |
jdaggett@484 | 7007 | |
jdaggett@484 | 7008 | <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |
jdaggett@5809 | 7009 | | 700 | 800 | 900 |
jdaggett@484 | 7010 | |
jdaggett@484 | 7011 | <td>normal |
jdaggett@484 | 7012 | |
jdaggett@484 | 7013 | <td>all elements |
jdaggett@484 | 7014 | |
jdaggett@484 | 7015 | <td>yes |
jdaggett@484 | 7016 | |
jdaggett@484 | 7017 | <td>N/A |
jdaggett@484 | 7018 | |
jdaggett@484 | 7019 | <td>visual |
jdaggett@484 | 7020 | </table> |
jdaggett@890 | 7021 | <!--end-properties--> |
jdaggett@5596 | 7022 | <!--begin-descriptors--> |
jdaggett@5596 | 7023 | |
jdaggett@5596 | 7024 | <table class=proptable> |
jdaggett@5596 | 7025 | <thead> |
jdaggett@5596 | 7026 | <tr> |
jdaggett@5596 | 7027 | <th>Descriptor |
jdaggett@5596 | 7028 | |
jdaggett@5596 | 7029 | <th>Value |
jdaggett@5596 | 7030 | |
jdaggett@5596 | 7031 | <th>Initial |
jdaggett@5596 | 7032 | |
jdaggett@5596 | 7033 | <th>Percentages |
jdaggett@5596 | 7034 | |
jdaggett@5596 | 7035 | <th>Media |
jdaggett@5596 | 7036 | |
jdaggett@5596 | 7037 | <tbody> |
jdaggett@5596 | 7038 | <tr> |
jdaggett@8278 | 7039 | <th><span class=property>font-family</span> |
jdaggett@5596 | 7040 | |
jdaggett@8225 | 7041 | <td><family-name> |
jdaggett@5596 | 7042 | |
jdaggett@5596 | 7043 | <td>N/A |
jdaggett@5596 | 7044 | |
jdaggett@5596 | 7045 | <tr> |
jdaggett@8279 | 7046 | <th><span class=property>font-feature-settings</span> |
jdaggett@5596 | 7047 | |
jdaggett@8225 | 7048 | <td>normal | <feature-tag-value> # |
jdaggett@5596 | 7049 | |
jdaggett@5596 | 7050 | <td>normal |
jdaggett@5596 | 7051 | |
jdaggett@5596 | 7052 | <tr> |
jdaggett@8278 | 7053 | <th><span class=property>font-stretch</span> |
jdaggett@5596 | 7054 | |
jdaggett@5596 | 7055 | <td>normal | ultra-condensed | extra-condensed | condensed | |
jdaggett@5596 | 7056 | semi-condensed | semi-expanded | expanded | extra-expanded | |
jdaggett@5596 | 7057 | ultra-expanded |
jdaggett@5596 | 7058 | |
jdaggett@5596 | 7059 | <td>normal |
jdaggett@5596 | 7060 | |
jdaggett@5596 | 7061 | <tr> |
jdaggett@8278 | 7062 | <th><span class=property>font-style</span> |
jdaggett@5596 | 7063 | |
jdaggett@5596 | 7064 | <td>normal | italic | oblique |
jdaggett@5596 | 7065 | |
jdaggett@5596 | 7066 | <td>normal |
jdaggett@5596 | 7067 | |
jdaggett@5596 | 7068 | <tr> |
jdaggett@8278 | 7069 | <th><span class=property>font-variant</span> |
jdaggett@5596 | 7070 | |
jdaggett@8225 | 7071 | <td>normal | none | [ <common-lig-values> || |
jdaggett@5596 | 7072 | <discretionary-lig-values> || <historical-lig-values> || |
jdaggett@5596 | 7073 | <contextual-alt-values> || stylistic(<feature-value-name>) |
jdaggett@8225 | 7074 | || historical-forms || styleset(<feature-value-name> #) || |
jdaggett@8225 | 7075 | character-variant(<feature-value-name> #) || |
jdaggett@5833 | 7076 | swash(<feature-value-name>) || |
jdaggett@5596 | 7077 | ornaments(<feature-value-name>) || |
jdaggett@5596 | 7078 | annotation(<feature-value-name>) || [ small-caps | all-small-caps |
jdaggett@6648 | 7079 | | petite-caps | all-petite-caps | unicase | titling-caps ] || |
jdaggett@5596 | 7080 | <numeric-figure-values> || <numeric-spacing-values> || |
jdaggett@5596 | 7081 | <numeric-fraction-values> || ordinal || slashed-zero || |
jdaggett@5596 | 7082 | <east-asian-variant-values> || <east-asian-width-values> || |
jdaggett@5596 | 7083 | ruby ] |
jdaggett@5596 | 7084 | |
jdaggett@5596 | 7085 | <td>normal |
jdaggett@5596 | 7086 | |
jdaggett@5596 | 7087 | <tr> |
jdaggett@8278 | 7088 | <th><span class=property>font-weight</span> |
jdaggett@5596 | 7089 | |
jdaggett@5596 | 7090 | <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
jdaggett@5596 | 7091 | |
jdaggett@5596 | 7092 | <td>normal |
jdaggett@5596 | 7093 | |
jdaggett@5596 | 7094 | <tr> |
jdaggett@5596 | 7095 | <th><a class=property href="#descdef-src">src</a> |
jdaggett@5596 | 7096 | |
jdaggett@8225 | 7097 | <td>[ <url> [format(<string> #)]? | <font-face-name> ] # |
jdaggett@5596 | 7098 | |
jdaggett@5596 | 7099 | <td>N/A |
jdaggett@5596 | 7100 | |
jdaggett@5596 | 7101 | <tr> |
jdaggett@5596 | 7102 | <th><a class=property href="#descdef-unicode-range">unicode-range</a> |
jdaggett@5596 | 7103 | |
jdaggett@8225 | 7104 | <td><urange> # |
jdaggett@5596 | 7105 | |
jdaggett@5596 | 7106 | <td>U+0-10FFFF |
jdaggett@5596 | 7107 | </table> |
jdaggett@5596 | 7108 | <!--end-descriptors--> |
jdaggett@6648 | 7109 | <script type="text/javascript"> |
jdaggett@6648 | 7110 | window.onload = function () { |
jdaggett@6648 | 7111 | if (!("devicePixelRatio" in window && window.devicePixelRatio > 1)) return; |
jdaggett@6648 | 7112 | var i, hiresElements = document.getElementsByClassName("hires"); |
jdaggett@6648 | 7113 | for (i = 0; i < hiresElements.length; i++) { |
jdaggett@6648 | 7114 | var h = hiresElements[i]; |
jdaggett@6648 | 7115 | if (h.tagName != "IMG") continue; |
jdaggett@6648 | 7116 | var src = h.getAttribute("src"); |
jdaggett@6648 | 7117 | var src2x = src.replace(/\.\w+$/, function(m) { return "@2x" + m; }); |
jdaggett@6648 | 7118 | h.src = src2x; |
jdaggett@6648 | 7119 | } |
jdaggett@6648 | 7120 | } |
jdaggett@6648 | 7121 | </script> |
jdaggett@484 | 7122 | </html> |
jdaggett@484 | 7123 | <!-- Keep this comment at the end of the file |
jdaggett@484 | 7124 | Local variables: |
jdaggett@484 | 7125 | mode: sgml |
jdaggett@484 | 7126 | sgml-declaration:"~/SGML/HTML4.decl" |
jdaggett@484 | 7127 | sgml-default-doctype-name:"html" |
jdaggett@484 | 7128 | sgml-minimize-attributes:t |
jdaggett@484 | 7129 | sgml-nofill-elements:("pre" "style" "br") |
jdaggett@484 | 7130 | sgml-live-element-indicator:t |
jdaggett@484 | 7131 | sgml-omittag:nil |
jdaggett@484 | 7132 | sgml-shorttag:nil |
jdaggett@484 | 7133 | sgml-namecase-general:t |
jdaggett@484 | 7134 | sgml-general-insert-case:lower |
jdaggett@484 | 7135 | sgml-always-quote-attributes:t |
jdaggett@484 | 7136 | sgml-indent-step:nil |
jdaggett@484 | 7137 | sgml-indent-data:t |
jdaggett@484 | 7138 | sgml-parent-document:nil |
jdaggett@484 | 7139 | sgml-exposed-tags:nil |
jdaggett@484 | 7140 | sgml-local-catalogs:nil |
jdaggett@484 | 7141 | sgml-local-ecat-files:nil |
jdaggett@484 | 7142 | End: |
jdaggett@484 | 7143 | --> |
jdaggett@8277 | 7144 | <!-- |
jdaggett@1856 | 7145 | |
jdaggett@1856 | 7146 | to do: |
jdaggett@1856 | 7147 | |
jdaggett@1856 | 7148 | - wording of OpenType family name handling |
jdaggett@1856 | 7149 | - handling combining sequences in the font matching algorithm |
jdaggett@1856 | 7150 | - fix-up fi ligature example |
jdaggett@1856 | 7151 | |
jdaggett@1856 | 7152 | --> |