Thu, 30 May 2013 11:41:35 +0900
[css-fonts] whitespace cleanup
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@8277 | 115 | <h2 class="no-num no-toc" id=editors-draft-30-may-2013>Editor's Draft 30 |
jdaggett@8177 | 116 | May 2013</h2> |
jdaggett@484 | 117 | |
jdaggett@516 | 118 | <dl id=authors> |
jdaggett@484 | 119 | <dt>This version: |
jdaggett@484 | 120 | |
jdaggett@484 | 121 | <dd><a |
jdaggett@8031 | 122 | href="http://dev.w3.org/csswg/css-fonts/">http://dev.w3.org/csswg/css-fonts/</a> |
jdaggett@8277 | 123 | <!-- <dd><a href="http://www.w3.org/TR/2013/ED-css3-fonts-20130530/">http://www.w3.org/TR/2013/ED-css3-fonts-20130530/</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@2118 | 375 | |
jdaggett@2118 | 376 | <li><a href="#font-variant-east-asian-prop"><span class=secno>6.10 |
jdaggett@1662 | 377 | </span>East Asian text rendering: the font-variant-east-asian |
jdaggett@1662 | 378 | property</a> |
jdaggett@1662 | 379 | |
jdaggett@2118 | 380 | <li><a href="#font-variant-prop"><span class=secno>6.11 </span>Overall |
jdaggett@1662 | 381 | shorthand for font rendering: the font-variant property</a> |
jdaggett@1662 | 382 | |
jdaggett@2118 | 383 | <li><a href="#font-feature-settings-prop"><span class=secno>6.12 |
jdaggett@2509 | 384 | </span>Low-level font feature settings control: the |
jdaggett@2509 | 385 | font-feature-settings property</a> |
jdaggett@1662 | 386 | |
jdaggett@2118 | 387 | <li><a href="#font-language-override-prop"><span class=secno>6.13 |
jdaggett@1732 | 388 | </span>Font language override: the font-language-override property</a> |
jdaggett@1662 | 389 | </ul> |
jdaggett@1662 | 390 | |
jdaggett@6176 | 391 | <li><a href="#font-feature-resolution"><span class=secno>7 </span>Font |
jdaggett@6699 | 392 | Feature Resolution </a> |
jdaggett@6699 | 393 | <ul class=toc> |
jdaggett@6699 | 394 | <li><a href="#default-features"><span class=secno>7.1 </span>Default |
jdaggett@6699 | 395 | features</a> |
jdaggett@6699 | 396 | |
jdaggett@6699 | 397 | <li><a href="#feature-precedence"><span class=secno>7.2 </span>Feature |
jdaggett@6699 | 398 | precedence</a> |
jdaggett@6699 | 399 | |
jdaggett@6699 | 400 | <li><a href="#feature-precedence-examples"><span class=secno>7.3 |
jdaggett@6699 | 401 | </span>Feature precedence examples</a> |
jdaggett@6699 | 402 | </ul> |
jdaggett@6699 | 403 | |
jdaggett@7021 | 404 | <li><a href="#object-model"><span class=secno>8 </span>Object Model</a> |
jdaggett@7021 | 405 | <ul class=toc> |
jdaggett@7021 | 406 | <li><a href="#om-fontface"><span class=secno>8.1 </span>The |
jdaggett@7021 | 407 | <code>CSSFontFaceRule</code> interface</a> |
jdaggett@7021 | 408 | |
jdaggett@7021 | 409 | <li><a href="#om-fontfeaturevalues"><span class=secno>8.2 </span>The |
jdaggett@7021 | 410 | <code>CSSFontFeatureValuesRule</code> interface</a> |
jdaggett@7021 | 411 | </ul> |
jdaggett@7021 | 412 | |
jdaggett@2737 | 413 | <li class=no-num><a href="#platform-props-to-css">Appendix A: Mapping |
jdaggett@1662 | 414 | platform font properties to CSS properties</a> |
jdaggett@1662 | 415 | |
jdaggett@2472 | 416 | <li class=no-num><a href="#ch-ch-ch-changes">Changes</a> |
jdaggett@2472 | 417 | <ul class=toc> |
jdaggett@7442 | 418 | <li class=no-num><a href="#recent-changes"> Changes from the February |
jdaggett@7442 | 419 | 2013 CSS3 Fonts Working Draft</a> |
jdaggett@2472 | 420 | </ul> |
jdaggett@2472 | 421 | |
jdaggett@529 | 422 | <li class=no-num><a href="#acknowledgments">Acknowledgments</a> |
jdaggett@529 | 423 | |
jdaggett@7242 | 424 | <li class=no-num><a href="#conformance"> Conformance</a> |
jdaggett@7242 | 425 | <ul class=toc> |
jdaggett@7242 | 426 | <li class=no-num><a href="#conventions"> Document Conventions</a> |
jdaggett@7242 | 427 | |
jdaggett@7242 | 428 | <li class=no-num><a href="#conformance-classes"> Conformance Classes</a> |
jdaggett@7242 | 429 | |
jdaggett@7242 | 430 | |
jdaggett@7242 | 431 | <li class=no-num><a href="#partial"> Partial Implementations</a> |
jdaggett@7242 | 432 | |
jdaggett@7242 | 433 | <li class=no-num><a href="#experimental"> Experimental |
jdaggett@7242 | 434 | Implementations</a> |
jdaggett@7242 | 435 | |
jdaggett@7242 | 436 | <li class=no-num><a href="#testing"> Non-Experimental |
jdaggett@7242 | 437 | Implementations</a> |
jdaggett@7242 | 438 | </ul> |
jdaggett@7242 | 439 | |
jdaggett@484 | 440 | <li class=no-num><a href="#references">References</a> |
jdaggett@484 | 441 | <ul class=toc> |
jdaggett@1662 | 442 | <li class=no-num><a href="#normative-references">Normative |
jdaggett@1662 | 443 | References</a> |
jdaggett@1662 | 444 | |
jdaggett@1662 | 445 | <li class=no-num><a href="#other-references">Other References</a> |
jdaggett@484 | 446 | </ul> |
jdaggett@484 | 447 | |
jdaggett@484 | 448 | <li class=no-num><a href="#index">Index</a> |
jdaggett@484 | 449 | |
jdaggett@484 | 450 | <li class=no-num><a href="#property-index">Property index</a> |
jdaggett@484 | 451 | </ul> |
jdaggett@484 | 452 | <!--end-toc--> |
jdaggett@484 | 453 | |
jdaggett@890 | 454 | <h2 id=introduction><span class=secno>1 </span>Introduction</h2> |
jdaggett@545 | 455 | |
jdaggett@1148 | 456 | <p>A font provides a resource containing the visual representation of |
jdaggett@1662 | 457 | characters. At the simplest level it contains information that maps |
jdaggett@1662 | 458 | character codes to shapes (called glyphs) that represent these characters. |
jdaggett@1662 | 459 | Fonts sharing a common design style are commonly grouped into font |
jdaggett@1662 | 460 | families classified by a set of standard font properties. Within a family, |
jdaggett@1662 | 461 | the shape displayed for a given character can vary by stroke weight, slant |
jdaggett@7311 | 462 | or relative width, among others. An individual font face is described by a |
jdaggett@1662 | 463 | unique combination of these properties. For a given range of text, CSS |
jdaggett@1662 | 464 | font properties are used to select a font family and a specific font face |
jdaggett@1662 | 465 | within that family to be used when rendering that text. As a simple |
jdaggett@1662 | 466 | example, to use the bold form of Helvetica one could use: |
jdaggett@1148 | 467 | |
jdaggett@8277 | 468 | <pre>body { |
jdaggett@8277 | 469 | font-family: Helvetica; |
jdaggett@8277 | 470 | font-weight: bold; |
jdaggett@1148 | 471 | }</pre> |
jdaggett@1148 | 472 | |
jdaggett@7311 | 473 | <p>Font resources may be installed locally on the system on which a user |
jdaggett@7311 | 474 | agent is running or downloadable. For local font resources descriptive |
jdaggett@1148 | 475 | information can be obtained directly from the font resource. For |
jdaggett@1148 | 476 | downloadable font resources (sometimes referred to as web fonts), the |
jdaggett@1148 | 477 | descriptive information is included with the reference to the font |
jdaggett@1148 | 478 | resource. |
jdaggett@1148 | 479 | |
jdaggett@1148 | 480 | <p>Families of fonts typically don't contain a single face for each |
jdaggett@1148 | 481 | possible variation of font properties. The CSS font selection mechanism |
jdaggett@7311 | 482 | describes how to match a given set of CSS font properties to a single font |
jdaggett@1148 | 483 | face. |
jdaggett@890 | 484 | |
jdaggett@1244 | 485 | <h2 id=typography-background><span class=secno>2 </span>Typography |
jdaggett@1244 | 486 | Background</h2> |
jdaggett@890 | 487 | |
jdaggett@7311 | 488 | <p><em>This section is non-normative.</em> |
jdaggett@7311 | 489 | |
jdaggett@7311 | 490 | <p> Typographic traditions vary across the globe, so there is no unique way |
jdaggett@890 | 491 | to classify all fonts across languages and cultures. For even common Latin |
jdaggett@890 | 492 | letters, wide variations are possible: |
jdaggett@497 | 493 | |
jdaggett@1150 | 494 | <div class=figure><img alt="variations in glyphs for a single character" |
jdaggett@1150 | 495 | src=aaaaaa.png> |
jdaggett@890 | 496 | <p class=caption>One character, many glyph variations |
jdaggett@498 | 497 | </div> |
jdaggett@497 | 498 | |
jdaggett@497 | 499 | <p>Differences in the anatomy of letterforms is one way to distinguish |
jdaggett@497 | 500 | fonts. For Latin fonts, flourishes at the ends of a character's main |
jdaggett@497 | 501 | strokes, or serifs, can distinguish a font from those without. Similar |
jdaggett@534 | 502 | comparisons exist in non-Latin fonts between fonts with tapered strokes |
jdaggett@534 | 503 | and those using primarily uniform strokes: |
jdaggett@497 | 504 | |
jdaggett@1150 | 505 | <div class=figure><img alt="serif vs. non-serifs" src=serifvssansserif.png> |
jdaggett@890 | 506 | <p class=caption>Letterforms with and without serifs |
jdaggett@534 | 507 | </div> |
jdaggett@534 | 508 | |
jdaggett@1150 | 509 | <div class=figure><img alt="serif vs. non-serifs for japanese" |
jdaggett@1150 | 510 | src=minchovsgothic.png> |
jdaggett@890 | 511 | <p class=caption>Similar groupings for Japanese typefaces |
jdaggett@498 | 512 | </div> |
jdaggett@497 | 513 | |
jdaggett@497 | 514 | <p>Fonts contain letterforms and the data needed to map characters to these |
jdaggett@7311 | 515 | letterforms. Often this may be a simple one-to-one mapping, but more |
jdaggett@497 | 516 | complex mappings are also possible. The use of combining diacritic marks |
jdaggett@497 | 517 | creates many variations for an underlying letterform: |
jdaggett@497 | 518 | |
jdaggett@1150 | 519 | <div class=figure><img alt="diacritic marks" src=aaaaaa-diacritics.png> |
jdaggett@890 | 520 | <p class=caption>Variations with diacritic marks |
jdaggett@498 | 521 | </div> |
jdaggett@525 | 522 | |
jdaggett@497 | 523 | <p>A sequence of characters can be represented by a single glyph known as a |
jdaggett@497 | 524 | ligature: |
jdaggett@497 | 525 | |
jdaggett@1150 | 526 | <div class=figure><img alt="example of a fi ligature" |
jdaggett@1150 | 527 | src=final-ligature.png> |
jdaggett@890 | 528 | <p class=caption>Ligature example |
jdaggett@498 | 529 | </div> |
jdaggett@497 | 530 | |
jdaggett@7311 | 531 | <p>Visual transformations based on textual context are often stylistic |
jdaggett@7311 | 532 | option in European languages. They are required to correctly render |
jdaggett@7311 | 533 | languages like Arabic, the lam and alef characters below <em>must</em> be |
jdaggett@7311 | 534 | combined when they exist in sequence: |
jdaggett@497 | 535 | |
jdaggett@1150 | 536 | <div class=figure><img alt="lam alef ligature" src=lamaleflig.png> |
jdaggett@890 | 537 | <p class=caption>Required Arabic ligature |
jdaggett@498 | 538 | </div> |
jdaggett@497 | 539 | |
jdaggett@498 | 540 | <p>The relative complexity of these shaping transformations requires |
jdaggett@498 | 541 | additional data within the font. |
jdaggett@497 | 542 | |
jdaggett@497 | 543 | <p>Sets of font faces with various stylistic variations are often grouped |
jdaggett@512 | 544 | together into font families. In the simplest case a regular face is |
jdaggett@7311 | 545 | supplemented with bold and italic faces, but much more extensive groupings |
jdaggett@7311 | 546 | are possible. Variations in the thickness of letterform strokes, the <dfn |
jdaggett@7311 | 547 | id=weight>weight</dfn>, and the overall proportions of the letterform, the |
jdaggett@7311 | 548 | <dfn id=width>width</dfn>, are most common. In the example below, each |
jdaggett@7311 | 549 | letter uses a different font face within the Univers font family. The |
jdaggett@7311 | 550 | width used increases from top to bottom and the weight increases from left |
jdaggett@7311 | 551 | to right: |
jdaggett@497 | 552 | |
jdaggett@1150 | 553 | <div class=figure><img alt="various width and weight variations within a |
jdaggett@1150 | 554 | single family" src=weightwidthvariations.png> |
jdaggett@890 | 555 | <p class=caption>Weight and width variations within a single font family |
jdaggett@498 | 556 | </div> |
jdaggett@497 | 557 | |
jdaggett@545 | 558 | <p>Creating fonts that support multiple scripts is a difficult task; |
jdaggett@1148 | 559 | designers need to understand the cultural traditions surrounding the use |
jdaggett@1148 | 560 | of type in different scripts and come up with letterforms that somehow |
jdaggett@1148 | 561 | share a common theme. Many languages often share a common script and each |
jdaggett@7311 | 562 | of these languages may have noticeable stylistic differences. For example, |
jdaggett@7311 | 563 | the Arabic script is shared by Persian and Urdu and Cyrillic is used with |
jdaggett@7311 | 564 | many languages, not just Russian. |
jdaggett@518 | 565 | |
jdaggett@8225 | 566 | <p>The <a href="#character-map"><em>character map</em></a> of a font |
jdaggett@8225 | 567 | defines the mapping of characters to glyphs for that font. If a document |
jdaggett@8225 | 568 | contains characters not supported by the <a href="#character-map"><em |
jdaggett@8225 | 569 | title="character map">character maps</em></a> of the fonts contained in a |
jdaggett@8225 | 570 | font family list, a user agent may use a system font fallback procedure to |
jdaggett@8225 | 571 | locate an appropriate font that does. If no appropriate font can be found, |
jdaggett@8225 | 572 | some form of "missing glyph" character will be rendered by the user agent. |
jdaggett@8225 | 573 | System fallback can occur when the specified list of font families does |
jdaggett@8225 | 574 | not include a font that supports a given character. |
jdaggett@8225 | 575 | |
jdaggett@8225 | 576 | <p>Although the <a href="#character-map"><em>character map</em></a> of a |
jdaggett@8225 | 577 | font maps a given character to a glyph for that character, modern font |
jdaggett@8225 | 578 | technologies such as OpenType and AAT (Apple Advanced Typography) provide |
jdaggett@8225 | 579 | ways of mapping a character to different glyphs based upon feature |
jdaggett@8225 | 580 | settings. Fonts in these formats allow these features to be embedded in |
jdaggett@8225 | 581 | the font itself and controlled by applications. Common typographic |
jdaggett@8225 | 582 | features which can be specified this way include ligatures, swashes, |
jdaggett@8225 | 583 | contextual alternates, proportional and tabular figures, and automatic |
jdaggett@8225 | 584 | fractions, to list just a few. For a visual overview of OpenType features, |
jdaggett@8225 | 585 | see the <a href="#OPENTYPE-FONT-GUIDE" |
jdaggett@6659 | 586 | rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>. |
jdaggett@1662 | 587 | |
jdaggett@6699 | 588 | <h2 id=basic-font-props><span class=secno>3 </span>Basic Font Properties</h2> |
jdaggett@512 | 589 | |
jdaggett@512 | 590 | <p>The particular font face used to render a character is determined by the |
jdaggett@515 | 591 | font family and other font properties that apply to a given element. This |
jdaggett@515 | 592 | structure allows settings to be varied independent of each other.</p> |
jdaggett@512 | 593 | <!-- prop: font-family --> |
jdaggett@484 | 594 | |
jdaggett@1662 | 595 | <h3 id=font-family-prop><span class=secno>3.1 </span>Font family: the <a |
jdaggett@1662 | 596 | href="#propdef-font-family">font-family</a> property</h3> |
jdaggett@1662 | 597 | |
jdaggett@8225 | 598 | <table class=propdef id=namefont-familyvalue-ltfamily-namegt-ltg> |
jdaggett@484 | 599 | <tbody> |
jdaggett@484 | 600 | <tr> |
jdaggett@484 | 601 | <td>Name: |
jdaggett@484 | 602 | |
jdaggett@1662 | 603 | <td><dfn id=propdef-font-family>font-family</dfn> |
jdaggett@484 | 604 | |
jdaggett@484 | 605 | <tr> |
jdaggett@484 | 606 | <td>Value: |
jdaggett@484 | 607 | |
jdaggett@8225 | 608 | <td>[ <a href="#family-name-value"><var><family-name></var></a> | |
jdaggett@8225 | 609 | <a href="#generic-family-value"><var><generic-family></var></a> ] |
jdaggett@8225 | 610 | # |
jdaggett@484 | 611 | |
jdaggett@484 | 612 | <tr> |
jdaggett@484 | 613 | <td>Initial: |
jdaggett@484 | 614 | |
jdaggett@484 | 615 | <td>depends on user agent |
jdaggett@484 | 616 | |
jdaggett@484 | 617 | <tr> |
jdaggett@484 | 618 | <td>Applies to: |
jdaggett@484 | 619 | |
jdaggett@484 | 620 | <td>all elements |
jdaggett@484 | 621 | |
jdaggett@484 | 622 | <tr> |
jdaggett@484 | 623 | <td>Inherited: |
jdaggett@484 | 624 | |
jdaggett@484 | 625 | <td>yes |
jdaggett@484 | 626 | |
jdaggett@484 | 627 | <tr> |
jdaggett@484 | 628 | <td>Percentages: |
jdaggett@484 | 629 | |
jdaggett@484 | 630 | <td>N/A |
jdaggett@484 | 631 | |
jdaggett@484 | 632 | <tr> |
jdaggett@484 | 633 | <td>Media: |
jdaggett@484 | 634 | |
jdaggett@484 | 635 | <td>visual |
jdaggett@484 | 636 | |
jdaggett@484 | 637 | <tr> |
jdaggett@1148 | 638 | <td>Computed value: |
jdaggett@484 | 639 | |
jdaggett@484 | 640 | <td>as specified |
jdaggett@7377 | 641 | |
jdaggett@7377 | 642 | <tr> |
jdaggett@7377 | 643 | <td>Animatable: |
jdaggett@7377 | 644 | |
jdaggett@7377 | 645 | <td>no |
jdaggett@484 | 646 | </table> |
jdaggett@484 | 647 | |
jdaggett@514 | 648 | <p>This property specifies a prioritized list of font family names or |
jdaggett@6694 | 649 | generic family names. A font family defines a set of faces that vary in |
jdaggett@6694 | 650 | weight, width or slope. CSS uses the combination of a family name with |
jdaggett@6694 | 651 | other style attributes to select an individual face. Using this selection |
jdaggett@6694 | 652 | mechanism, rather than selecting a face via the style name as is often |
jdaggett@6694 | 653 | done in design applications, allows some degree of regularity in textual |
jdaggett@6694 | 654 | display when fallback occurs. |
jdaggett@6694 | 655 | |
jdaggett@6694 | 656 | <p class=note>Designers should note that the CSS definition of font |
jdaggett@6694 | 657 | attributes used for selection are explicitly not intended to define a font |
jdaggett@6694 | 658 | taxonomy. A type designer's idea of a family may often extend to a set of |
jdaggett@6694 | 659 | faces that vary along axes other than just the standard axes of weight, |
jdaggett@6694 | 660 | width and slope. A family may extend to include both a set of serif faces |
jdaggett@6694 | 661 | and a set of sans-serif faces or vary along axes that are unique to that |
jdaggett@6694 | 662 | family. The CSS font selection mechanism merely provides a way to |
jdaggett@6694 | 663 | determine the “closest” substitute when substitution is necessary. |
jdaggett@6694 | 664 | |
jdaggett@6694 | 665 | <p>Unlike other CSS properties, component values are a comma-separated list |
jdaggett@6694 | 666 | indicating alternatives. A user agent iterates through the list of family |
jdaggett@6694 | 667 | names until it matches an available font that contains a glyph for the |
jdaggett@6694 | 668 | character to be rendered. This allows for differences in available fonts |
jdaggett@6694 | 669 | across platforms and for differences in the range of characters supported |
jdaggett@6694 | 670 | by individual fonts. |
jdaggett@514 | 671 | |
jdaggett@514 | 672 | <p>A font family name only specifies a name given to a set of font faces, |
jdaggett@8177 | 673 | it does not specify an individual face. For example, given the |
jdaggett@8177 | 674 | availability of the fonts below, Futura would match but Futura Medium |
jdaggett@8177 | 675 | would not: |
jdaggett@514 | 676 | |
jdaggett@1150 | 677 | <div class=figure><img alt="family and face names" |
jdaggett@1150 | 678 | src=familyvsfacename.png> |
jdaggett@890 | 679 | <p class=caption>Family and individual face names |
jdaggett@514 | 680 | </div> |
jdaggett@514 | 681 | |
jdaggett@514 | 682 | <p>Consider the example below: |
jdaggett@512 | 683 | |
jdaggett@512 | 684 | <div class=example> |
jdaggett@8277 | 685 | <pre>body { |
jdaggett@8277 | 686 | font-family: Helvetica, Verdana, sans-serif; |
jdaggett@514 | 687 | }</pre> |
jdaggett@1758 | 688 | |
jdaggett@1758 | 689 | <p>If Helvetica is available it will be used when rendering. If neither |
jdaggett@1758 | 690 | Helvetica nor Verdana is present, then the user-agent-defined sans serif |
jdaggett@1758 | 691 | font will be used.</p> |
jdaggett@512 | 692 | </div> |
jdaggett@512 | 693 | |
jdaggett@514 | 694 | <p>There are two types of font family names: |
jdaggett@512 | 695 | |
jdaggett@512 | 696 | <dl> |
jdaggett@8225 | 697 | <dt><dfn id=family-name-value><var><family-name></var></dfn> |
jdaggett@514 | 698 | |
jdaggett@514 | 699 | <dd>The name of a font family of choice such as Helvetica or Verdana in |
jdaggett@2457 | 700 | the previous example. |
jdaggett@514 | 701 | |
jdaggett@8225 | 702 | <dt><dfn id=generic-family-value><var><generic-family></var></dfn> |
jdaggett@514 | 703 | |
jdaggett@4624 | 704 | <dd> The following generic family keywords are defined: ‘<a |
jdaggett@4624 | 705 | href="#serif"><code class=property>serif</code></a>’, ‘<a |
jdaggett@4624 | 706 | href="#sans-serif"><code class=property>sans-serif</code></a>’, ‘<a |
jdaggett@4624 | 707 | href="#cursive"><code class=property>cursive</code></a>’, ‘<a |
jdaggett@4624 | 708 | href="#fantasy"><code class=property>fantasy</code></a>’, and ‘<a |
jdaggett@4624 | 709 | href="#monospace"><code class=property>monospace</code></a>’. These |
jdaggett@1148 | 710 | keywords can be used as a general fallback mechanism when an author's |
jdaggett@1758 | 711 | desired font choices are not available. As keywords, they must not be |
jdaggett@1148 | 712 | quoted. Authors are encouraged to append a generic font family as a last |
jdaggett@1148 | 713 | alternative for improved robustness. |
jdaggett@512 | 714 | </dl> |
jdaggett@512 | 715 | |
jdaggett@8272 | 716 | <p>Font family names other than generic families must either be given |
jdaggett@8272 | 717 | quoted as <a |
jdaggett@2457 | 718 | href="//www.w3.org/TR/CSS21/syndata.html#strings">strings,</a> or unquoted |
jdaggett@2457 | 719 | as a sequence of one or more <a |
jdaggett@2457 | 720 | href="//www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers.</a> |
jdaggett@2457 | 721 | This means most punctuation characters and digits at the start of each |
jdaggett@2457 | 722 | token must be escaped in unquoted font family names. |
jdaggett@2457 | 723 | |
jdaggett@7377 | 724 | <p>To illustrate this, the following declarations are invalid: |
jdaggett@2457 | 725 | |
jdaggett@2457 | 726 | <pre> |
jdaggett@2457 | 727 | font-family: Red/Black, sans-serif; |
jdaggett@2457 | 728 | font-family: "Lucida" Grande, sans-serif; |
jdaggett@2457 | 729 | font-family: Ahem!, sans-serif; |
jdaggett@2457 | 730 | font-family: test@foo, sans-serif; |
jdaggett@2457 | 731 | font-family: #POUND, sans-serif; |
jdaggett@2457 | 732 | font-family: Hawaii 5-0, sans-serif; |
jdaggett@2457 | 733 | </pre> |
jdaggett@2457 | 734 | |
jdaggett@2457 | 735 | <p>If a sequence of identifiers is given as a font family name, the |
jdaggett@2457 | 736 | computed value is the name converted to a string by joining all the |
jdaggett@2457 | 737 | identifiers in the sequence by single spaces. |
jdaggett@2457 | 738 | |
jdaggett@2457 | 739 | <p>To avoid mistakes in escaping, it is recommended to quote font family |
jdaggett@2457 | 740 | names that contain white space, digits, or punctuation characters other |
jdaggett@2457 | 741 | than hyphens: |
jdaggett@2457 | 742 | |
jdaggett@2457 | 743 | <pre> |
jdaggett@2457 | 744 | body { font-family: "New Century Schoolbook", serif } |
jdaggett@2457 | 745 | |
jdaggett@2457 | 746 | <BODY STYLE="font-family: '21st Century', fantasy"> |
jdaggett@2457 | 747 | </pre> |
jdaggett@2457 | 748 | |
jdaggett@2457 | 749 | <p>Font family <em>names</em> that happen to be the same as a keyword value |
jdaggett@4624 | 750 | (‘<code class=property>inherit</code>’, ‘<a href="#serif"><code |
jdaggett@4624 | 751 | class=property>serif</code></a>’, ‘<a href="#sans-serif"><code |
jdaggett@4624 | 752 | class=property>sans-serif</code></a>’, ‘<a href="#monospace"><code |
jdaggett@4624 | 753 | class=property>monospace</code></a>’, ‘<a href="#fantasy"><code |
jdaggett@4624 | 754 | class=property>fantasy</code></a>’, and ‘<a href="#cursive"><code |
jdaggett@4624 | 755 | class=property>cursive</code></a>’) must be quoted to prevent confusion |
jdaggett@2457 | 756 | with the keywords with the same names. The keywords ‘<code |
jdaggett@2457 | 757 | class=property>initial</code>’ and ‘<code |
jdaggett@2457 | 758 | class=property>default</code>’ are reserved for future use and must also |
jdaggett@2457 | 759 | be quoted when used as font names. UAs must not consider these keywords as |
jdaggett@8225 | 760 | matching the <a |
jdaggett@8225 | 761 | href="#family-name-value"><var><family-name></var></a> type. |
jdaggett@2457 | 762 | |
jdaggett@6694 | 763 | <p>The precise way a set of fonts are grouped into font families varies |
jdaggett@6694 | 764 | depending upon the platform font management API's. The Windows GDI API |
jdaggett@6694 | 765 | only allows four faces to be grouped into a family while the DirectWrite |
jdaggett@6694 | 766 | API and API's on OSX and other platforms support font families with a |
jdaggett@6695 | 767 | variety of weights, widths and slopes (see <a |
jdaggett@6694 | 768 | href="#platform-props-to-css">Appendix A</a> for more details). |
jdaggett@6694 | 769 | |
jdaggett@2457 | 770 | <p>Some font formats allow fonts to carry multiple localizations of the |
jdaggett@2457 | 771 | family name. User agents must recognize and correctly match all of these |
jdaggett@2457 | 772 | names independent of the underlying platform localization, system API used |
jdaggett@2457 | 773 | or document encoding: |
jdaggett@2457 | 774 | |
jdaggett@2457 | 775 | <div class=figure><img alt="examples of localized family names" |
jdaggett@2457 | 776 | src=localizedfamilynames.png> |
jdaggett@2457 | 777 | <p class=caption>Localized family names |
jdaggett@2457 | 778 | </div> |
jdaggett@2457 | 779 | |
jdaggett@1244 | 780 | <h4 id=generic-font-families><span class=secno>3.1.1 </span>Generic font |
jdaggett@1244 | 781 | families</h4> |
jdaggett@514 | 782 | |
jdaggett@518 | 783 | <p>All five generic font families are defined to exist in all CSS |
jdaggett@518 | 784 | implementations (they need not necessarily map to five distinct actual |
jdaggett@518 | 785 | fonts). User agents should provide reasonable default choices for the |
jdaggett@518 | 786 | generic font families, which express the characteristics of each family as |
jdaggett@518 | 787 | well as possible within the limits allowed by the underlying technology. |
jdaggett@518 | 788 | User agents are encouraged to allow users to select alternative choices |
jdaggett@514 | 789 | for the generic fonts. |
jdaggett@514 | 790 | |
jdaggett@890 | 791 | <h5 class="no-num no-toc"> <span class=index-def id=serif0 title="serif, |
jdaggett@890 | 792 | definition of"><a name=serif-def><dfn id=serif>serif</dfn></a></span></h5> |
jdaggett@514 | 793 | |
jdaggett@8178 | 794 | <p>Serif fonts represent the formal text style for a script. This often |
jdaggett@8178 | 795 | means but is not limited to glyphs that have finishing strokes, flared or |
jdaggett@8178 | 796 | tapering ends, or have actual serifed endings (including slab serifs). |
jdaggett@8178 | 797 | Serif fonts are typically proportionately-spaced. They often display a |
jdaggett@8178 | 798 | greater variation between thick and thin strokes than fonts from the ‘<a |
jdaggett@8178 | 799 | href="#sans-serif"><code class=property>sans-serif</code></a>’ generic |
jdaggett@8178 | 800 | font family. CSS uses the term ‘<a href="#serif"><code |
jdaggett@8178 | 801 | class=property>serif</code></a>’ to apply to a font for any script, |
jdaggett@8178 | 802 | although other names may be more familiar for particular scripts, such as |
jdaggett@8178 | 803 | Mincho (Japanese), Sung, Song or Kai (Chinese), Batang (Korean). For |
jdaggett@8178 | 804 | Arabic, the Naskh style would correspond to ‘<a href="#serif"><code |
jdaggett@8178 | 805 | class=property>serif</code></a>’ more due to its typographic role rather |
jdaggett@8178 | 806 | than its actual design style. Any font that is so described may be used to |
jdaggett@4624 | 807 | represent the generic ‘<a href="#serif"><code |
jdaggett@4624 | 808 | class=property>serif</code></a>’ family. |
jdaggett@514 | 809 | |
jdaggett@1150 | 810 | <div class=figure><img alt="sample serif fonts" src=serifexamples.png> |
jdaggett@890 | 811 | <p class=caption>Sample serif fonts |
jdaggett@514 | 812 | </div> |
jdaggett@514 | 813 | |
jdaggett@890 | 814 | <h5 class="no-num no-toc"> <span class=index-def id=sans-serif0 |
jdaggett@890 | 815 | title="sans-serif, definition of"> <a name=sans-serif-def><dfn |
jdaggett@890 | 816 | id=sans-serif>sans-serif</dfn></a></span></h5> |
jdaggett@514 | 817 | |
jdaggett@8178 | 818 | <p>Glyphs in sans-serif fonts, as the term is used in CSS, are generally |
jdaggett@8178 | 819 | low contrast (vertical and horizontal stems have the close to the same |
jdaggett@8178 | 820 | thickness) and have stroke endings that are plain -- without any flaring, |
jdaggett@8178 | 821 | cross stroke, or other ornamentation. Sans-serif fonts are typically |
jdaggett@8178 | 822 | proportionately-spaced. They often have little variation between thick and |
jdaggett@8178 | 823 | thin strokes, compared to fonts from the ‘<a href="#serif"><code |
jdaggett@4624 | 824 | class=property>serif</code></a>’ family. CSS uses the term ‘<a |
jdaggett@4624 | 825 | href="#sans-serif"><code class=property>sans-serif</code></a>’ to apply |
jdaggett@4624 | 826 | to a font for any script, although other names may be more familiar for |
jdaggett@3041 | 827 | particular scripts, such as Gothic (Japanese), Hei (Chinese), or Gulim |
jdaggett@1148 | 828 | (Korean). Any font that is so described may be used to represent the |
jdaggett@4624 | 829 | generic ‘<a href="#sans-serif"><code |
jdaggett@4624 | 830 | class=property>sans-serif</code></a>’ family. |
jdaggett@518 | 831 | |
jdaggett@1150 | 832 | <div class=figure><img alt="sample sans-serif fonts" |
jdaggett@1150 | 833 | src=sansserifexamples.png> |
jdaggett@890 | 834 | <p class=caption>Sample sans-serif fonts |
jdaggett@514 | 835 | </div> |
jdaggett@514 | 836 | |
jdaggett@890 | 837 | <h5 class="no-num no-toc"> <span class=index-def id=cursive0 |
jdaggett@545 | 838 | title="cursive, definition of"> <a name=cursive-def><dfn |
jdaggett@890 | 839 | id=cursive>cursive</dfn></a></span></h5> |
jdaggett@545 | 840 | |
jdaggett@8178 | 841 | <p>Glyphs in cursive fonts generally use a more informal script style, and |
jdaggett@8178 | 842 | the result looks more like handwritten pen or brush writing than printed |
jdaggett@8178 | 843 | letterwork. CSS uses the term ‘<a href="#cursive"><code |
jdaggett@8178 | 844 | class=property>cursive</code></a>’ to apply to a font for any script, |
jdaggett@8178 | 845 | although other names such as Chancery, Brush, Swing and Script are also |
jdaggett@8178 | 846 | used in font names. |
jdaggett@514 | 847 | |
jdaggett@1150 | 848 | <div class=figure><img alt="sample cursive fonts" src=cursiveexamples.png> |
jdaggett@890 | 849 | <p class=caption>Sample cursive fonts |
jdaggett@514 | 850 | </div> |
jdaggett@514 | 851 | |
jdaggett@890 | 852 | <h5 class="no-num no-toc"> <span class=index-def id=fantasy0 |
jdaggett@545 | 853 | title="fantasy, definition of"> <a name=fantasy-def><dfn |
jdaggett@890 | 854 | id=fantasy>fantasy</dfn></a></span></h5> |
jdaggett@514 | 855 | |
jdaggett@8178 | 856 | <p>Fantasy fonts are primarily decorative or expressive fonts that contain |
jdaggett@8178 | 857 | playful representations of characters. These do not include Pi or Picture |
jdaggett@8178 | 858 | fonts which do not represent actual characters. |
jdaggett@514 | 859 | |
jdaggett@1150 | 860 | <div class=figure><img alt="sample fantasy fonts" src=fantasyexamples.png> |
jdaggett@890 | 861 | <p class=caption>Sample fantasy fonts |
jdaggett@514 | 862 | </div> |
jdaggett@514 | 863 | |
jdaggett@890 | 864 | <h5 class="no-num no-toc"> <span class=index-def id=monospace0 |
jdaggett@545 | 865 | title="monospace, definition of"> <a name=monospace-def><dfn |
jdaggett@890 | 866 | id=monospace>monospace</dfn></a></span></h5> |
jdaggett@514 | 867 | |
jdaggett@514 | 868 | <p>The sole criterion of a monospace font is that all glyphs have the same |
jdaggett@518 | 869 | fixed width. This is often used to render samples of computer code. |
jdaggett@514 | 870 | |
jdaggett@1150 | 871 | <div class=figure><img alt="sample monospace fonts" |
jdaggett@1150 | 872 | src=monospaceexamples.png> |
jdaggett@890 | 873 | <p class=caption>Sample monospace fonts |
jdaggett@514 | 874 | </div> |
jdaggett@512 | 875 | <!-- prop: font-weight --> |
jdaggett@512 | 876 | |
jdaggett@1662 | 877 | <h3 id=font-weight-prop><span class=secno>3.2 </span>Font weight: the <a |
jdaggett@1662 | 878 | href="#propdef-font-weight">font-weight</a> property</h3> |
jdaggett@1662 | 879 | |
jdaggett@4624 | 880 | <table class=propdef id=namefont-weightvaluenormal-bold-bolder-l> |
jdaggett@484 | 881 | <tbody> |
jdaggett@484 | 882 | <tr> |
jdaggett@484 | 883 | <td>Name: |
jdaggett@484 | 884 | |
jdaggett@1662 | 885 | <td><dfn id=propdef-font-weight>font-weight</dfn> |
jdaggett@484 | 886 | |
jdaggett@484 | 887 | <tr> |
jdaggett@484 | 888 | <td>Value: |
jdaggett@484 | 889 | |
jdaggett@484 | 890 | <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |
jdaggett@5809 | 891 | | 700 | 800 | 900 |
jdaggett@484 | 892 | |
jdaggett@484 | 893 | <tr> |
jdaggett@484 | 894 | <td>Initial: |
jdaggett@484 | 895 | |
jdaggett@484 | 896 | <td>normal |
jdaggett@484 | 897 | |
jdaggett@484 | 898 | <tr> |
jdaggett@484 | 899 | <td>Applies to: |
jdaggett@484 | 900 | |
jdaggett@484 | 901 | <td>all elements |
jdaggett@484 | 902 | |
jdaggett@484 | 903 | <tr> |
jdaggett@484 | 904 | <td>Inherited: |
jdaggett@484 | 905 | |
jdaggett@484 | 906 | <td>yes |
jdaggett@484 | 907 | |
jdaggett@484 | 908 | <tr> |
jdaggett@484 | 909 | <td>Percentages: |
jdaggett@484 | 910 | |
jdaggett@484 | 911 | <td>N/A |
jdaggett@484 | 912 | |
jdaggett@484 | 913 | <tr> |
jdaggett@484 | 914 | <td>Media: |
jdaggett@484 | 915 | |
jdaggett@484 | 916 | <td>visual |
jdaggett@484 | 917 | |
jdaggett@484 | 918 | <tr> |
jdaggett@1148 | 919 | <td>Computed value: |
jdaggett@484 | 920 | |
jdaggett@8177 | 921 | <td>numeric weight value (see description) |
jdaggett@7377 | 922 | |
jdaggett@7377 | 923 | <tr> |
jdaggett@7377 | 924 | <td>Animatable: |
jdaggett@7377 | 925 | |
jdaggett@7377 | 926 | <td>as <a |
jdaggett@7377 | 927 | href="http://dev.w3.org/csswg/css3-transitions/#animtype-font-weight">font |
jdaggett@7377 | 928 | weight</a> |
jdaggett@484 | 929 | </table> |
jdaggett@484 | 930 | |
jdaggett@2556 | 931 | <p>The <a class=noxref href="#font-weight-prop"><span |
jdaggett@2556 | 932 | class=property>‘<code class=property>font-weight</code>’</span></a> |
jdaggett@8177 | 933 | property specifies the weight of glyphs in the font, their degree of |
jdaggett@8177 | 934 | blackness or stroke thickness. |
jdaggett@531 | 935 | |
jdaggett@531 | 936 | <p>Values have the following meanings: |
jdaggett@512 | 937 | |
jdaggett@512 | 938 | <dl> |
jdaggett@514 | 939 | <dt>100 to 900 |
jdaggett@512 | 940 | |
jdaggett@512 | 941 | <dd>These values form an ordered sequence, where each number indicates a |
jdaggett@514 | 942 | weight that is at least as dark as its predecessor. These roughly |
jdaggett@514 | 943 | correspond to the commonly used weight names below: |
jdaggett@512 | 944 | </dl> |
jdaggett@512 | 945 | |
jdaggett@512 | 946 | <ul> |
jdaggett@512 | 947 | <li>100 - Thin |
jdaggett@512 | 948 | |
jdaggett@518 | 949 | <li>200 - Extra Light (Ultra Light) |
jdaggett@512 | 950 | |
jdaggett@512 | 951 | <li>300 - Light |
jdaggett@512 | 952 | |
jdaggett@512 | 953 | <li>400 - Normal |
jdaggett@512 | 954 | |
jdaggett@512 | 955 | <li>500 - Medium |
jdaggett@512 | 956 | |
jdaggett@518 | 957 | <li>600 - Semi Bold (Demi Bold) |
jdaggett@512 | 958 | |
jdaggett@512 | 959 | <li>700 - Bold |
jdaggett@512 | 960 | |
jdaggett@518 | 961 | <li>800 - Extra Bold (Ultra Bold) |
jdaggett@512 | 962 | |
jdaggett@512 | 963 | <li>900 - Black (Heavy) |
jdaggett@512 | 964 | </ul> |
jdaggett@512 | 965 | |
jdaggett@512 | 966 | <dl> |
jdaggett@8277 | 967 | <dt><a href="#normal3"><strong>normal</strong></a> |
jdaggett@512 | 968 | |
jdaggett@1148 | 969 | <dd>Same as ‘<code class=css>400</code>’. |
jdaggett@512 | 970 | |
jdaggett@512 | 971 | <dt><strong>bold</strong> |
jdaggett@512 | 972 | |
jdaggett@1148 | 973 | <dd>Same as ‘<code class=css>700</code>’. |
jdaggett@512 | 974 | |
jdaggett@512 | 975 | <dt><strong>bolder</strong> |
jdaggett@512 | 976 | |
jdaggett@8177 | 977 | <dd>Specifies a bolder weight than the inherited value. |
jdaggett@512 | 978 | |
jdaggett@512 | 979 | <dt><strong>lighter</strong> |
jdaggett@512 | 980 | |
jdaggett@8177 | 981 | <dd>Specifies a lighter weight than the inherited value. |
jdaggett@512 | 982 | </dl> |
jdaggett@512 | 983 | |
jdaggett@8177 | 984 | <p>Font formats that use a scale other than a nine-step scale should map |
jdaggett@531 | 985 | their scale onto the CSS scale so that 400 roughly corresponds with a face |
jdaggett@531 | 986 | that would be labeled as Regular, Book, Roman and 700 roughly matches a |
jdaggett@531 | 987 | face that would be labeled as Bold. Or weights may be inferred from the |
jdaggett@531 | 988 | style names, ones that correspond roughly with the scale above. The scale |
jdaggett@1662 | 989 | is relative, so a face with a larger weight value must never appear |
jdaggett@1148 | 990 | lighter. If style names are used to infer weights, care should be taken to |
jdaggett@1148 | 991 | handle variations in style names across locales. |
jdaggett@531 | 992 | |
jdaggett@531 | 993 | <p>Quite often there are only a few weights available for a particular font |
jdaggett@534 | 994 | family. When a weight is specified for which no face exists, a face with a |
jdaggett@534 | 995 | nearby weight is used. In general, bold weights map to faces with heavier |
jdaggett@1269 | 996 | weights and light weights map to faces with lighter weights (see the <a |
jdaggett@1269 | 997 | href="#font-matching-algorithm">font matching section below</a> for a |
jdaggett@1269 | 998 | precise definition). The examples here illustrate which face is used for |
jdaggett@1269 | 999 | different weights, grey indicates a face for that weight does not exist so |
jdaggett@1269 | 1000 | a face with a nearby weight is used: |
jdaggett@532 | 1001 | |
jdaggett@1150 | 1002 | <div class=figure><img alt="weight mappings for a family with 400, 700 and |
jdaggett@1150 | 1003 | 900 weights" src=optimaweights.png> |
jdaggett@532 | 1004 | <p class=caption>Weight mappings for a font family with 400, 700 and 900 |
jdaggett@890 | 1005 | weight faces |
jdaggett@518 | 1006 | </div> |
jdaggett@518 | 1007 | |
jdaggett@1150 | 1008 | <div class=figure><img alt="weight mappings for a family with 300, 600 |
jdaggett@1150 | 1009 | weights" src=hiraginoweights.png> |
jdaggett@532 | 1010 | <p class=caption>Weight mappings for a font family with 300 and 600 weight |
jdaggett@890 | 1011 | faces |
jdaggett@531 | 1012 | </div> |
jdaggett@518 | 1013 | |
jdaggett@2487 | 1014 | <p>Although the practice is not well-loved by typographers, bold faces are |
jdaggett@2487 | 1015 | often synthesized by user agents for faces that lack actual bold faces. |
jdaggett@2487 | 1016 | For the purposes of style matching, these faces must be treated as if they |
jdaggett@8177 | 1017 | exist within the family. Authors can explicitly avoid this behavior by |
jdaggett@8177 | 1018 | using the ‘<a href="#propdef-font-synthesis"><code |
jdaggett@8177 | 1019 | class=property>font-synthesis</code></a>’ property. |
jdaggett@8177 | 1020 | |
jdaggett@8177 | 1021 | <p>Specified values of ‘<code class=property>bolder</code>’ and |
jdaggett@8177 | 1022 | ‘<code class=property>lighter</code>’ indicate weights relative to the |
jdaggett@8177 | 1023 | weight of the parent element. The computed weight is calculated based on |
jdaggett@8177 | 1024 | the inherited ‘<a href="#propdef-font-weight"><code |
jdaggett@8177 | 1025 | class=property>font-weight</code></a>’ value using the chart below. |
jdaggett@1148 | 1026 | |
jdaggett@6651 | 1027 | <table class=data id=bolderlighter summary="Bolder/lighter mappings"> |
jdaggett@1148 | 1028 | <thead> |
jdaggett@1148 | 1029 | <tr> |
jdaggett@6651 | 1030 | <th>Inherited value |
jdaggett@6651 | 1031 | |
jdaggett@6651 | 1032 | <th>bolder |
jdaggett@6651 | 1033 | |
jdaggett@6651 | 1034 | <th>lighter |
jdaggett@1148 | 1035 | |
jdaggett@1148 | 1036 | <tbody> |
jdaggett@1148 | 1037 | <tr> |
jdaggett@1244 | 1038 | <th>100 |
jdaggett@1148 | 1039 | |
jdaggett@1148 | 1040 | <td>400 |
jdaggett@1148 | 1041 | |
jdaggett@1148 | 1042 | <td>100 |
jdaggett@1148 | 1043 | |
jdaggett@1148 | 1044 | <tr> |
jdaggett@1244 | 1045 | <th>200 |
jdaggett@1148 | 1046 | |
jdaggett@1148 | 1047 | <td>400 |
jdaggett@1148 | 1048 | |
jdaggett@1148 | 1049 | <td>100 |
jdaggett@1148 | 1050 | |
jdaggett@1148 | 1051 | <tr> |
jdaggett@1244 | 1052 | <th>300 |
jdaggett@1148 | 1053 | |
jdaggett@1148 | 1054 | <td>400 |
jdaggett@1148 | 1055 | |
jdaggett@1148 | 1056 | <td>100 |
jdaggett@1148 | 1057 | |
jdaggett@1148 | 1058 | <tr> |
jdaggett@1244 | 1059 | <th>400 |
jdaggett@1148 | 1060 | |
jdaggett@1148 | 1061 | <td>700 |
jdaggett@1148 | 1062 | |
jdaggett@1148 | 1063 | <td>100 |
jdaggett@1148 | 1064 | |
jdaggett@1148 | 1065 | <tr> |
jdaggett@1244 | 1066 | <th>500 |
jdaggett@1148 | 1067 | |
jdaggett@1148 | 1068 | <td>700 |
jdaggett@1148 | 1069 | |
jdaggett@1148 | 1070 | <td>100 |
jdaggett@1148 | 1071 | |
jdaggett@1148 | 1072 | <tr> |
jdaggett@1244 | 1073 | <th>600 |
jdaggett@1148 | 1074 | |
jdaggett@1148 | 1075 | <td>900 |
jdaggett@1148 | 1076 | |
jdaggett@1148 | 1077 | <td>400 |
jdaggett@1148 | 1078 | |
jdaggett@1148 | 1079 | <tr> |
jdaggett@1244 | 1080 | <th>700 |
jdaggett@1148 | 1081 | |
jdaggett@1148 | 1082 | <td>900 |
jdaggett@1148 | 1083 | |
jdaggett@1148 | 1084 | <td>400 |
jdaggett@1148 | 1085 | |
jdaggett@1148 | 1086 | <tr> |
jdaggett@1244 | 1087 | <th>800 |
jdaggett@1148 | 1088 | |
jdaggett@1148 | 1089 | <td>900 |
jdaggett@1148 | 1090 | |
jdaggett@1148 | 1091 | <td>700 |
jdaggett@1148 | 1092 | |
jdaggett@1148 | 1093 | <tr> |
jdaggett@1244 | 1094 | <th>900 |
jdaggett@1148 | 1095 | |
jdaggett@1148 | 1096 | <td>900 |
jdaggett@1148 | 1097 | |
jdaggett@1148 | 1098 | <td>700 |
jdaggett@1148 | 1099 | </table> |
jdaggett@1148 | 1100 | |
jdaggett@1148 | 1101 | <p>The table above is equivalent to selecting the next relative bolder or |
jdaggett@1148 | 1102 | lighter face, given a font family containing normal and bold faces along |
jdaggett@1148 | 1103 | with a thin and a heavy face. Authors who desire finer control over the |
jdaggett@8177 | 1104 | exact weight values used for a given element may use numerical values |
jdaggett@1148 | 1105 | instead of relative weights.</p> |
jdaggett@512 | 1106 | <!-- prop: font-stretch --> |
jdaggett@512 | 1107 | |
jdaggett@1662 | 1108 | <h3 id=font-stretch-prop><span class=secno>3.3 </span>Font width: the <a |
jdaggett@1662 | 1109 | href="#propdef-font-stretch">font-stretch</a> property</h3> |
jdaggett@1662 | 1110 | |
jdaggett@4624 | 1111 | <table class=propdef id=namefont-stretchvaluenormal-ultra-conden> |
jdaggett@484 | 1112 | <tbody> |
jdaggett@484 | 1113 | <tr> |
jdaggett@484 | 1114 | <td>Name: |
jdaggett@484 | 1115 | |
jdaggett@1662 | 1116 | <td><dfn id=propdef-font-stretch>font-stretch</dfn> |
jdaggett@484 | 1117 | |
jdaggett@484 | 1118 | <tr> |
jdaggett@484 | 1119 | <td>Value: |
jdaggett@484 | 1120 | |
jdaggett@1662 | 1121 | <td>normal | ultra-condensed | extra-condensed | condensed | |
jdaggett@1662 | 1122 | semi-condensed | semi-expanded | expanded | extra-expanded | |
jdaggett@5809 | 1123 | ultra-expanded |
jdaggett@484 | 1124 | |
jdaggett@484 | 1125 | <tr> |
jdaggett@484 | 1126 | <td>Initial: |
jdaggett@484 | 1127 | |
jdaggett@484 | 1128 | <td>normal |
jdaggett@484 | 1129 | |
jdaggett@484 | 1130 | <tr> |
jdaggett@484 | 1131 | <td>Applies to: |
jdaggett@484 | 1132 | |
jdaggett@484 | 1133 | <td>all elements |
jdaggett@484 | 1134 | |
jdaggett@484 | 1135 | <tr> |
jdaggett@484 | 1136 | <td>Inherited: |
jdaggett@484 | 1137 | |
jdaggett@484 | 1138 | <td>yes |
jdaggett@484 | 1139 | |
jdaggett@484 | 1140 | <tr> |
jdaggett@484 | 1141 | <td>Percentages: |
jdaggett@484 | 1142 | |
jdaggett@484 | 1143 | <td>N/A |
jdaggett@484 | 1144 | |
jdaggett@484 | 1145 | <tr> |
jdaggett@484 | 1146 | <td>Media: |
jdaggett@484 | 1147 | |
jdaggett@484 | 1148 | <td>visual |
jdaggett@484 | 1149 | |
jdaggett@484 | 1150 | <tr> |
jdaggett@1148 | 1151 | <td>Computed value: |
jdaggett@484 | 1152 | |
jdaggett@484 | 1153 | <td>as specified |
jdaggett@7377 | 1154 | |
jdaggett@7377 | 1155 | <tr> |
jdaggett@7377 | 1156 | <td>Animatable: |
jdaggett@7377 | 1157 | |
jdaggett@7377 | 1158 | <td>as <a href="#font-stretch-animation">font stretch</a> |
jdaggett@484 | 1159 | </table> |
jdaggett@484 | 1160 | |
jdaggett@2556 | 1161 | <p>The <a class=noxref href="#font-stretch-prop"><span |
jdaggett@2556 | 1162 | class=property>‘<code class=property>font-stretch</code>’</span></a> |
jdaggett@2556 | 1163 | property selects a normal, condensed, or expanded face from a font family. |
jdaggett@2556 | 1164 | Absolute keyword values have the following ordering, from narrowest to |
jdaggett@2556 | 1165 | widest: |
jdaggett@512 | 1166 | |
jdaggett@512 | 1167 | <ul> |
jdaggett@8177 | 1168 | <li><code>ultra-condensed</code> |
jdaggett@8177 | 1169 | |
jdaggett@8177 | 1170 | <li><code>extra-condensed</code> |
jdaggett@8177 | 1171 | |
jdaggett@8177 | 1172 | <li><code>condensed</code> |
jdaggett@8177 | 1173 | |
jdaggett@8177 | 1174 | <li><code>semi-condensed </code> |
jdaggett@8177 | 1175 | |
jdaggett@8177 | 1176 | <li><code>normal</code> |
jdaggett@8177 | 1177 | |
jdaggett@8177 | 1178 | <li><code>semi-expanded</code> |
jdaggett@8177 | 1179 | |
jdaggett@8177 | 1180 | <li><code>expanded</code> |
jdaggett@8177 | 1181 | |
jdaggett@8177 | 1182 | <li><code>extra-expanded</code> |
jdaggett@8177 | 1183 | |
jdaggett@8177 | 1184 | <li><code>ultra-expanded</code> |
jdaggett@512 | 1185 | </ul> |
jdaggett@512 | 1186 | |
jdaggett@8197 | 1187 | <p>When a face does not exist for a given width, normal or condensed values |
jdaggett@8197 | 1188 | map to a narrower face, otherwise a wider face. Conversely, expanded |
jdaggett@8197 | 1189 | values map to a wider face, otherwise a narrower face. The figure below |
jdaggett@8197 | 1190 | shows how the nine font-stretch property settings affect font selection |
jdaggett@8197 | 1191 | for font family containing a variety of widths, grey indicates a width for |
jdaggett@8197 | 1192 | which no face exists and a different width is substituted: |
jdaggett@1148 | 1193 | |
jdaggett@1150 | 1194 | <div class=figure><img alt="width mappings for a family with condensed, |
jdaggett@1150 | 1195 | normal and expanded faces" src=universwidths.png> |
jdaggett@1148 | 1196 | <p class=caption>Width mappings for a font family with condensed, normal |
jdaggett@1148 | 1197 | and expanded width faces |
jdaggett@1148 | 1198 | </div> |
jdaggett@7377 | 1199 | |
jdaggett@7377 | 1200 | <p id=font-stretch-animation>Animation of font stretch: Font stretch is |
jdaggett@7377 | 1201 | interpolated in discrete steps. The interpolation happens as though the |
jdaggett@7377 | 1202 | ordered values are equally spaced real numbers. The interpolation result |
jdaggett@7377 | 1203 | is rounded to the nearest value, with values exactly halfway between two |
jdaggett@7377 | 1204 | values rounded towards the later value in the list above.</p> |
jdaggett@512 | 1205 | <!-- prop: font-style --> |
jdaggett@512 | 1206 | |
jdaggett@1662 | 1207 | <h3 id=font-style-prop><span class=secno>3.4 </span>Font style: the <a |
jdaggett@1662 | 1208 | href="#propdef-font-style">font-style</a> property</h3> |
jdaggett@1662 | 1209 | |
jdaggett@4624 | 1210 | <table class=propdef id=namefont-stylevaluenormal-italic-oblique> |
jdaggett@484 | 1211 | <tbody> |
jdaggett@484 | 1212 | <tr> |
jdaggett@484 | 1213 | <td>Name: |
jdaggett@484 | 1214 | |
jdaggett@1662 | 1215 | <td><dfn id=propdef-font-style>font-style</dfn> |
jdaggett@484 | 1216 | |
jdaggett@484 | 1217 | <tr> |
jdaggett@484 | 1218 | <td>Value: |
jdaggett@484 | 1219 | |
jdaggett@5809 | 1220 | <td>normal | italic | oblique |
jdaggett@484 | 1221 | |
jdaggett@484 | 1222 | <tr> |
jdaggett@484 | 1223 | <td>Initial: |
jdaggett@484 | 1224 | |
jdaggett@484 | 1225 | <td>normal |
jdaggett@484 | 1226 | |
jdaggett@484 | 1227 | <tr> |
jdaggett@484 | 1228 | <td>Applies to: |
jdaggett@484 | 1229 | |
jdaggett@484 | 1230 | <td>all elements |
jdaggett@484 | 1231 | |
jdaggett@484 | 1232 | <tr> |
jdaggett@484 | 1233 | <td>Inherited: |
jdaggett@484 | 1234 | |
jdaggett@484 | 1235 | <td>yes |
jdaggett@484 | 1236 | |
jdaggett@484 | 1237 | <tr> |
jdaggett@484 | 1238 | <td>Percentages: |
jdaggett@484 | 1239 | |
jdaggett@484 | 1240 | <td>N/A |
jdaggett@484 | 1241 | |
jdaggett@484 | 1242 | <tr> |
jdaggett@484 | 1243 | <td>Media: |
jdaggett@484 | 1244 | |
jdaggett@484 | 1245 | <td>visual |
jdaggett@484 | 1246 | |
jdaggett@484 | 1247 | <tr> |
jdaggett@1148 | 1248 | <td>Computed value: |
jdaggett@484 | 1249 | |
jdaggett@484 | 1250 | <td>as specified |
jdaggett@7377 | 1251 | |
jdaggett@7377 | 1252 | <tr> |
jdaggett@7377 | 1253 | <td>Animatable: |
jdaggett@7377 | 1254 | |
jdaggett@7377 | 1255 | <td>no |
jdaggett@484 | 1256 | </table> |
jdaggett@484 | 1257 | |
jdaggett@2556 | 1258 | <p>The <a class=noxref href="#font-style-prop"><span |
jdaggett@2556 | 1259 | class=property>‘<code class=property>font-style</code>’</span></a> |
jdaggett@2556 | 1260 | property allows italic or oblique faces to be selected. Italic forms are |
jdaggett@2556 | 1261 | generally cursive in nature while oblique faces are typically sloped |
jdaggett@2556 | 1262 | versions of the regular face. Oblique faces can be simulated by |
jdaggett@2556 | 1263 | artificially sloping the glyphs of the regular face. Compare the |
jdaggett@2556 | 1264 | artificially sloped renderings of Palatino ‘<code |
jdaggett@2556 | 1265 | class=property>a</code>’ and Baskerville ‘<code |
jdaggett@1148 | 1266 | class=property>N</code>’ in grey with the actual italic versions: |
jdaggett@518 | 1267 | |
jdaggett@1150 | 1268 | <div class=figure><img alt="artificial sloping vs. real italics" |
jdaggett@1150 | 1269 | src=realvsfakeitalics.png> |
jdaggett@890 | 1270 | <p class=caption>Artificial sloping versus real italics |
jdaggett@512 | 1271 | </div> |
jdaggett@518 | 1272 | |
jdaggett@8277 | 1273 | <p>A value of ‘<a href="#normal3"><code |
jdaggett@5809 | 1274 | class=property>normal</code></a>’ selects a face that is classified as |
jdaggett@8277 | 1275 | ‘<a href="#normal3"><code class=property>normal</code></a>’, while |
jdaggett@5809 | 1276 | ‘<code class=property>oblique</code>’ selects a font that is labeled |
jdaggett@5809 | 1277 | ‘<code class=property>oblique</code>’. A value of ‘<code |
jdaggett@1148 | 1278 | class=property>italic</code>’ selects a font that is labeled ‘<code |
jdaggett@1148 | 1279 | class=property>italic</code>’, or, if that is not available, one labeled |
jdaggett@8093 | 1280 | ‘<code class=property>oblique</code>’. If no italic or oblique face is |
jdaggett@8096 | 1281 | available, oblique faces can be synthesized by rendering non-obliqued |
jdaggett@8093 | 1282 | faces with a right sloping transformation applied. When synthesizing these |
jdaggett@8093 | 1283 | faces, the transformation should apply to all glyphs in the same way and |
jdaggett@8093 | 1284 | not vary based on codepoint or due to horizontal or vertical line |
jdaggett@8093 | 1285 | orientation. |
jdaggett@518 | 1286 | |
jdaggett@518 | 1287 | <p>Many scripts lack the tradition of mixing a cursive form within text |
jdaggett@518 | 1288 | rendered with a normal face. Chinese, Japanese and Korean fonts almost |
jdaggett@518 | 1289 | always lack italic or oblique faces. Fonts that support a mixture of |
jdaggett@518 | 1290 | scripts will sometimes omit specific scripts such as Arabic from the set |
jdaggett@518 | 1291 | of glyphs supported in the italic face. User agents should be careful |
jdaggett@8225 | 1292 | about making <a href="#character-map"><em>character map</em></a> |
jdaggett@8225 | 1293 | assumptions across faces. |
jdaggett@7355 | 1294 | |
jdaggett@7355 | 1295 | <p class=issue>For synthetic italics in vertical runs of Chinese, Japanese, |
jdaggett@7355 | 1296 | or Korean text, is there a need to define explicitly the direction of the |
jdaggett@7355 | 1297 | faux oblique for runs that include a mixture of ideographic and Latin |
jdaggett@7355 | 1298 | text?</p> |
jdaggett@1662 | 1299 | <!-- prop: font-size --> |
jdaggett@1662 | 1300 | |
jdaggett@1662 | 1301 | <h3 id=font-size-prop><span class=secno>3.5 </span>Font size: the <a |
jdaggett@1662 | 1302 | href="#propdef-font-size">font-size</a> property</h3> |
jdaggett@1662 | 1303 | |
jdaggett@8225 | 1304 | <table class=propdef id=namefont-sizevalueltabsolute-sizegt-ltre> |
jdaggett@484 | 1305 | <tbody> |
jdaggett@484 | 1306 | <tr> |
jdaggett@484 | 1307 | <td>Name: |
jdaggett@484 | 1308 | |
jdaggett@1662 | 1309 | <td><dfn id=propdef-font-size>font-size</dfn> |
jdaggett@484 | 1310 | |
jdaggett@484 | 1311 | <tr> |
jdaggett@484 | 1312 | <td>Value: |
jdaggett@484 | 1313 | |
jdaggett@8225 | 1314 | <td><a href="#absolute-size-value"><var><absolute-size></var></a> |
jdaggett@8225 | 1315 | | <a href="#relative-size-value"><var><relative-size></var></a> | |
jdaggett@8225 | 1316 | <a href="#length-size-value"><var><length></var></a> | <a |
jdaggett@8225 | 1317 | href="#percentage-size-value"><var><percentage></var></a> |
jdaggett@484 | 1318 | |
jdaggett@484 | 1319 | <tr> |
jdaggett@484 | 1320 | <td>Initial: |
jdaggett@484 | 1321 | |
jdaggett@484 | 1322 | <td>medium |
jdaggett@484 | 1323 | |
jdaggett@484 | 1324 | <tr> |
jdaggett@484 | 1325 | <td>Applies to: |
jdaggett@484 | 1326 | |
jdaggett@484 | 1327 | <td>all elements |
jdaggett@484 | 1328 | |
jdaggett@484 | 1329 | <tr> |
jdaggett@484 | 1330 | <td>Inherited: |
jdaggett@484 | 1331 | |
jdaggett@484 | 1332 | <td>yes |
jdaggett@484 | 1333 | |
jdaggett@484 | 1334 | <tr> |
jdaggett@484 | 1335 | <td>Percentages: |
jdaggett@484 | 1336 | |
jdaggett@484 | 1337 | <td>refer to parent element's font size |
jdaggett@484 | 1338 | |
jdaggett@484 | 1339 | <tr> |
jdaggett@484 | 1340 | <td>Media: |
jdaggett@484 | 1341 | |
jdaggett@484 | 1342 | <td>visual |
jdaggett@484 | 1343 | |
jdaggett@484 | 1344 | <tr> |
jdaggett@1148 | 1345 | <td>Computed value: |
jdaggett@484 | 1346 | |
jdaggett@484 | 1347 | <td>absolute length |
jdaggett@7377 | 1348 | |
jdaggett@7377 | 1349 | <tr> |
jdaggett@7377 | 1350 | <td>Animatable: |
jdaggett@7377 | 1351 | |
jdaggett@7377 | 1352 | <td>as <a |
jdaggett@7377 | 1353 | href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a> |
jdaggett@484 | 1354 | </table> |
jdaggett@484 | 1355 | |
jdaggett@512 | 1356 | <p>This property indicates the desired height of glyphs from the font. For |
jdaggett@512 | 1357 | scalable fonts, the font-size is a scale factor applied to the EM unit of |
jdaggett@512 | 1358 | the font. (Note that certain glyphs may bleed outside their EM box.) For |
jdaggett@512 | 1359 | non-scalable fonts, the font-size is converted into absolute units and |
jdaggett@512 | 1360 | matched against the declared font-size of the font, using the same |
jdaggett@512 | 1361 | absolute coordinate space for both of the matched values. Values have the |
jdaggett@512 | 1362 | following meanings: |
jdaggett@512 | 1363 | |
jdaggett@512 | 1364 | <dl> |
jdaggett@8225 | 1365 | <dt><dfn id=absolute-size-value><var><absolute-size></var></dfn> |
jdaggett@8225 | 1366 | |
jdaggett@8225 | 1367 | <dd> An <a |
jdaggett@8225 | 1368 | href="#absolute-size-value"><var><absolute-size></var></a> keyword |
jdaggett@8225 | 1369 | refers to an entry in a table of font sizes computed and kept by the user |
jdaggett@8225 | 1370 | agent. Possible values are: |
jdaggett@512 | 1371 | <p> [ xx-small | x-small | small | medium | large | x-large | xx-large ]</p> |
jdaggett@512 | 1372 | |
jdaggett@8225 | 1373 | <dt><dfn id=relative-size-value><var><relative-size></var></dfn> |
jdaggett@8225 | 1374 | |
jdaggett@8225 | 1375 | <dd> A <a href="#relative-size-value"><var><relative-size></var></a> |
jdaggett@8225 | 1376 | keyword is interpreted relative to the table of font sizes and the |
jdaggett@8225 | 1377 | computed ‘<a href="#propdef-font-size"><code |
jdaggett@8225 | 1378 | class=property>font-size</code></a>’ of the parent element. Possible |
jdaggett@8225 | 1379 | values are: |
jdaggett@890 | 1380 | <p> [ larger | smaller ] |
jdaggett@890 | 1381 | |
jdaggett@1148 | 1382 | <p> For example, if the parent element has a font size of ‘<code |
jdaggett@1148 | 1383 | class=property>medium</code>’, a value of ‘<code |
jdaggett@1148 | 1384 | class=property>larger</code>’ will make the font size of the current |
jdaggett@1148 | 1385 | element be ‘<code class=property>large</code>’. If the parent |
jdaggett@1148 | 1386 | element's size is not close to a table entry, the user agent is free to |
jdaggett@1148 | 1387 | interpolate between table entries or round off to the closest one. The |
jdaggett@1148 | 1388 | user agent may have to extrapolate table values if the numerical value |
jdaggett@1148 | 1389 | goes beyond the keywords. |
jdaggett@512 | 1390 | |
jdaggett@8225 | 1391 | <dt><dfn id=length-size-value><var><length></var></dfn> |
jdaggett@512 | 1392 | |
jdaggett@8187 | 1393 | <dd>A length value specifies an absolute font size (independent of the |
jdaggett@8187 | 1394 | user agent's font table). Negative lengths are illegal. |
jdaggett@512 | 1395 | |
jdaggett@8225 | 1396 | <dt><dfn id=percentage-size-value><var><percentage></var></dfn> |
jdaggett@512 | 1397 | |
jdaggett@512 | 1398 | <dd>A percentage value specifies an absolute font size relative to the |
jdaggett@512 | 1399 | parent element's font size. Use of percentage values, or values in |
jdaggett@1148 | 1400 | ‘<code class=property>em</code>’s, leads to more robust and |
jdaggett@512 | 1401 | cascadable style sheets. |
jdaggett@512 | 1402 | </dl> |
jdaggett@512 | 1403 | |
jdaggett@8187 | 1404 | <p>The following table provides user agent guidelines for the absolute-size |
jdaggett@8187 | 1405 | scaling factor and their mapping to HTML heading and absolute font-sizes. |
jdaggett@8187 | 1406 | The ‘<code class=property>medium</code>’ value is used as the |
jdaggett@8187 | 1407 | reference middle value. The user agent may fine-tune these values for |
jdaggett@8187 | 1408 | different fonts or different types of display devices. |
jdaggett@1244 | 1409 | |
jdaggett@1244 | 1410 | <table class=data> |
jdaggett@1152 | 1411 | <thead> |
jdaggett@1152 | 1412 | <tr> |
jdaggett@1152 | 1413 | <th>CSS absolute-size values |
jdaggett@1152 | 1414 | |
jdaggett@1152 | 1415 | <th>xx-small |
jdaggett@1152 | 1416 | |
jdaggett@1152 | 1417 | <th>x-small |
jdaggett@1152 | 1418 | |
jdaggett@1152 | 1419 | <th>small |
jdaggett@1152 | 1420 | |
jdaggett@1152 | 1421 | <th>medium |
jdaggett@1152 | 1422 | |
jdaggett@1152 | 1423 | <th>large |
jdaggett@1152 | 1424 | |
jdaggett@1152 | 1425 | <th>x-large |
jdaggett@1152 | 1426 | |
jdaggett@1152 | 1427 | <th>xx-large |
jdaggett@1152 | 1428 | |
jdaggett@1152 | 1429 | <th> |
jdaggett@1152 | 1430 | |
jdaggett@512 | 1431 | <tbody> |
jdaggett@512 | 1432 | <tr> |
jdaggett@1152 | 1433 | <th>scaling factor |
jdaggett@1152 | 1434 | |
jdaggett@1152 | 1435 | <td>3/5 |
jdaggett@1152 | 1436 | |
jdaggett@1152 | 1437 | <td>3/4 |
jdaggett@1152 | 1438 | |
jdaggett@1152 | 1439 | <td>8/9 |
jdaggett@1152 | 1440 | |
jdaggett@1152 | 1441 | <td>1 |
jdaggett@1152 | 1442 | |
jdaggett@1152 | 1443 | <td>6/5 |
jdaggett@1152 | 1444 | |
jdaggett@1152 | 1445 | <td>3/2 |
jdaggett@1152 | 1446 | |
jdaggett@1152 | 1447 | <td>2/1 |
jdaggett@1152 | 1448 | |
jdaggett@1152 | 1449 | <td>3/1 |
jdaggett@512 | 1450 | |
jdaggett@512 | 1451 | <tr> |
jdaggett@8187 | 1452 | <th>HTML headings |
jdaggett@1152 | 1453 | |
jdaggett@1152 | 1454 | <td>h6 |
jdaggett@1152 | 1455 | |
jdaggett@1152 | 1456 | <td> |
jdaggett@1152 | 1457 | |
jdaggett@1152 | 1458 | <td>h5 |
jdaggett@1152 | 1459 | |
jdaggett@1152 | 1460 | <td>h4 |
jdaggett@1152 | 1461 | |
jdaggett@1152 | 1462 | <td>h3 |
jdaggett@1152 | 1463 | |
jdaggett@1152 | 1464 | <td>h2 |
jdaggett@1152 | 1465 | |
jdaggett@1152 | 1466 | <td>h1 |
jdaggett@1152 | 1467 | |
jdaggett@1152 | 1468 | <td> |
jdaggett@512 | 1469 | |
jdaggett@512 | 1470 | <tr> |
jdaggett@8187 | 1471 | <th>HTML font sizes |
jdaggett@1152 | 1472 | |
jdaggett@1152 | 1473 | <td>1 |
jdaggett@1152 | 1474 | |
jdaggett@1152 | 1475 | <td> |
jdaggett@1152 | 1476 | |
jdaggett@1152 | 1477 | <td>2 |
jdaggett@1152 | 1478 | |
jdaggett@1152 | 1479 | <td>3 |
jdaggett@1152 | 1480 | |
jdaggett@1152 | 1481 | <td>4 |
jdaggett@1152 | 1482 | |
jdaggett@1152 | 1483 | <td>5 |
jdaggett@1152 | 1484 | |
jdaggett@1152 | 1485 | <td>6 |
jdaggett@1152 | 1486 | |
jdaggett@1152 | 1487 | <td>7 |
jdaggett@512 | 1488 | </table> |
jdaggett@512 | 1489 | |
jdaggett@512 | 1490 | <p class=note><em><strong>Note 1.</strong> To preserve readability, an UA |
jdaggett@512 | 1491 | applying these guidelines should nevertheless avoid creating font-size |
jdaggett@8272 | 1492 | resulting in less than 9 device pixels per EM unit on a computer |
jdaggett@8272 | 1493 | display.</em> |
jdaggett@512 | 1494 | |
jdaggett@512 | 1495 | <p class=note><em><strong>Note 2.</strong> In CSS1, the suggested scaling |
jdaggett@512 | 1496 | factor between adjacent indexes was 1.5 which user experience proved to be |
jdaggett@512 | 1497 | too large. In CSS2, the suggested scaling factor for computer screen |
jdaggett@512 | 1498 | between adjacent indexes was 1.2 which still created issues for the small |
jdaggett@512 | 1499 | sizes. The new scaling factor varies between each index to provide a |
jdaggett@512 | 1500 | better readability.</em> |
jdaggett@512 | 1501 | |
jdaggett@6659 | 1502 | <p>The actual value of this property may differ from the computed value due |
jdaggett@6659 | 1503 | a numerical value on ‘<a href="#propdef-font-size-adjust"><code |
jdaggett@4624 | 1504 | class=property>font-size-adjust</code></a>’ and the unavailability of |
jdaggett@4624 | 1505 | certain font sizes. |
jdaggett@512 | 1506 | |
jdaggett@512 | 1507 | <p>Child elements inherit the computed <a class=noxref |
jdaggett@6659 | 1508 | href="#font-size-prop"> <span class=property>‘<code |
jdaggett@1148 | 1509 | class=property>font-size</code>’</span></a> value (otherwise, the effect |
jdaggett@2556 | 1510 | of <a class=noxref href="#font-size-adjust-prop"><span |
jdaggett@2556 | 1511 | class=property>‘<code |
jdaggett@1148 | 1512 | class=property>font-size-adjust</code>’</span></a> would compound). |
jdaggett@512 | 1513 | |
jdaggett@512 | 1514 | <div class=example> |
jdaggett@4624 | 1515 | <p style="display:none">Example(s): |
jdaggett@890 | 1516 | |
jdaggett@890 | 1517 | <p> |
jdaggett@512 | 1518 | |
jdaggett@512 | 1519 | <pre>p { font-size: 12pt; } |
jdaggett@512 | 1520 | blockquote { font-size: larger } |
jdaggett@512 | 1521 | em { font-size: 150% } |
jdaggett@512 | 1522 | em { font-size: 1.5em } |
jdaggett@512 | 1523 | </pre> |
jdaggett@512 | 1524 | </div> |
jdaggett@512 | 1525 | <!-- prop: font-size-adjust --> |
jdaggett@512 | 1526 | |
jdaggett@1662 | 1527 | <h3 id=font-size-adjust-prop><span class=secno>3.6 </span>Relative sizing: |
jdaggett@1662 | 1528 | the <a href="#propdef-font-size-adjust">font-size-adjust</a> property</h3> |
jdaggett@1662 | 1529 | |
jdaggett@6659 | 1530 | <table class=propdef id=namefont-size-adjustvaluenone-auto-ltnum> |
jdaggett@484 | 1531 | <tbody> |
jdaggett@484 | 1532 | <tr> |
jdaggett@484 | 1533 | <td>Name: |
jdaggett@484 | 1534 | |
jdaggett@1662 | 1535 | <td><dfn id=propdef-font-size-adjust>font-size-adjust</dfn> |
jdaggett@484 | 1536 | |
jdaggett@484 | 1537 | <tr> |
jdaggett@484 | 1538 | <td>Value: |
jdaggett@484 | 1539 | |
jdaggett@8225 | 1540 | <td>none | auto | <a |
jdaggett@8225 | 1541 | href="#aspect-ratio-value"><var><number></var></a> |
jdaggett@484 | 1542 | |
jdaggett@484 | 1543 | <tr> |
jdaggett@484 | 1544 | <td>Initial: |
jdaggett@484 | 1545 | |
jdaggett@484 | 1546 | <td>none |
jdaggett@484 | 1547 | |
jdaggett@484 | 1548 | <tr> |
jdaggett@484 | 1549 | <td>Applies to: |
jdaggett@484 | 1550 | |
jdaggett@484 | 1551 | <td>all elements |
jdaggett@484 | 1552 | |
jdaggett@484 | 1553 | <tr> |
jdaggett@484 | 1554 | <td>Inherited: |
jdaggett@484 | 1555 | |
jdaggett@484 | 1556 | <td>yes |
jdaggett@484 | 1557 | |
jdaggett@484 | 1558 | <tr> |
jdaggett@484 | 1559 | <td>Percentages: |
jdaggett@484 | 1560 | |
jdaggett@554 | 1561 | <td>N/A |
jdaggett@484 | 1562 | |
jdaggett@484 | 1563 | <tr> |
jdaggett@484 | 1564 | <td>Media: |
jdaggett@484 | 1565 | |
jdaggett@484 | 1566 | <td>visual |
jdaggett@484 | 1567 | |
jdaggett@484 | 1568 | <tr> |
jdaggett@1148 | 1569 | <td>Computed value: |
jdaggett@484 | 1570 | |
jdaggett@554 | 1571 | <td>as specified |
jdaggett@7377 | 1572 | |
jdaggett@7377 | 1573 | <tr> |
jdaggett@7377 | 1574 | <td>Animatable: |
jdaggett@7377 | 1575 | |
jdaggett@7377 | 1576 | <td>as <a |
jdaggett@7377 | 1577 | href="http://dev.w3.org/csswg/css3-transitions/#animtype-number">number</a> |
jdaggett@484 | 1578 | </table> |
jdaggett@484 | 1579 | |
jdaggett@555 | 1580 | <p>For any given font size, the apparent size and legibility of text varies |
jdaggett@555 | 1581 | across fonts. For scripts such as Latin or Cyrillic that distinguish |
jdaggett@555 | 1582 | between upper and lowercase letters, the relative height of lowercase |
jdaggett@555 | 1583 | letters compared to their uppercase counterparts is a determining factor |
jdaggett@555 | 1584 | of legibility. This is commonly referred to as the <a class=index-def |
jdaggett@4624 | 1585 | href="#aspect-value" id=aspect-value0 title="aspect value"><dfn |
jdaggett@4624 | 1586 | id=aspect-value>aspect value</dfn></a>. Precisely defined, it is equal to |
jdaggett@4624 | 1587 | the x-height of a font divided by the font size. |
jdaggett@555 | 1588 | |
jdaggett@555 | 1589 | <p>In situations where font fallback occurs, fallback fonts may not share |
jdaggett@555 | 1590 | the same aspect ratio as the desired font family and will thus appear less |
jdaggett@555 | 1591 | readable. The font-size-adjust property is a way to preserve the |
jdaggett@547 | 1592 | readability of text when font fallback occurs. It does this by adjusting |
jdaggett@1662 | 1593 | the font-size so that the x-height is the same regardless of the font |
jdaggett@555 | 1594 | used. |
jdaggett@547 | 1595 | |
jdaggett@547 | 1596 | <div class=example> |
jdaggett@547 | 1597 | <p>The style defined below defines Verdana as the desired font family, but |
jdaggett@547 | 1598 | if Verdana is not available Futura or Times will be used.</p> |
jdaggett@547 | 1599 | |
jdaggett@8277 | 1600 | <pre>p { |
jdaggett@8277 | 1601 | font-family: Verdana, Futura, Times; |
jdaggett@547 | 1602 | } |
jdaggett@547 | 1603 | |
jdaggett@547 | 1604 | <p>Lorem ipsum dolor sit amet, ...</p> |
jdaggett@547 | 1605 | </pre> |
jdaggett@547 | 1606 | |
jdaggett@547 | 1607 | <p>Verdana has a relatively high aspect ratio, lowercase letters are |
jdaggett@547 | 1608 | relatively tall compared to uppercase letters, so at small sizes text |
jdaggett@547 | 1609 | appears legible. Times has a lower aspect ratio and so if fallback |
jdaggett@547 | 1610 | occurs, the text will be less legible at small sizes than Verdana.</p> |
jdaggett@547 | 1611 | </div> |
jdaggett@547 | 1612 | |
jdaggett@547 | 1613 | <p>How text rendered in each of these fonts compares is shown below, the |
jdaggett@547 | 1614 | columns show text rendered in Verdana, Futura and Times. The same |
jdaggett@547 | 1615 | font-size value is used across cells within each row and red lines are |
jdaggett@547 | 1616 | included to show the differences in x-height. In the upper half each row |
jdaggett@547 | 1617 | is rendered in the same font-size value. The same is true for the lower |
jdaggett@547 | 1618 | half but in this half the font-size-adjust property is also set so that |
jdaggett@2462 | 1619 | the actual font size is adjusted to preserve the x-height across each row. |
jdaggett@547 | 1620 | Note how small text remains relatively legible across each row in the |
jdaggett@547 | 1621 | lower half. |
jdaggett@547 | 1622 | |
jdaggett@1150 | 1623 | <div class=figure><img alt="text with and without font-size-adjust" |
jdaggett@1150 | 1624 | src=fontsizeadjust.png> |
jdaggett@890 | 1625 | <p class=caption>Text with and without the use of font-size-adjust |
jdaggett@547 | 1626 | </div> |
jdaggett@512 | 1627 | |
jdaggett@512 | 1628 | <p>This property allows authors to specify an aspect value for an element |
jdaggett@554 | 1629 | that will effectively preserve the x-height of the first choice font, |
jdaggett@554 | 1630 | whether it is substituted or not. Values have the following meanings: |
jdaggett@512 | 1631 | |
jdaggett@512 | 1632 | <dl> |
jdaggett@8277 | 1633 | <dt><a href="#none"><strong>none</strong></a> |
jdaggett@512 | 1634 | |
jdaggett@512 | 1635 | <dd>Do not preserve the font's x-height. |
jdaggett@512 | 1636 | |
jdaggett@6659 | 1637 | <dt><strong>auto</strong> |
jdaggett@6659 | 1638 | |
jdaggett@6659 | 1639 | <dd>Behaves just like <number>, except the number used is the aspect |
jdaggett@6659 | 1640 | value calculated by user agents for the first font in the list of fonts |
jdaggett@6659 | 1641 | defined for the initial value of the ‘<a |
jdaggett@6659 | 1642 | href="#descdef-font-family"><code |
jdaggett@6659 | 1643 | class=property>font-family</code></a>’ property. Effectively this is |
jdaggett@6659 | 1644 | the default font used when ‘<a href="#descdef-font-family"><code |
jdaggett@6659 | 1645 | class=property>font-family</code></a>’ is not otherwise specified. |
jdaggett@6659 | 1646 | <p>Authors can use this value to specify that font size should be |
jdaggett@6659 | 1647 | normalized across fonts based on the x-height without the need to |
jdaggett@6659 | 1648 | specify the aspect ratio explicitly.</p> |
jdaggett@6659 | 1649 | |
jdaggett@8225 | 1650 | <dt><dfn id=aspect-ratio-value><var><number></var></dfn> |
jdaggett@512 | 1651 | |
jdaggett@554 | 1652 | <dd>Specifies the aspect value used in the calculation below to calculate |
jdaggett@554 | 1653 | the adjusted font size: |
jdaggett@8277 | 1654 | <pre>c = ( a / a' ) s |
jdaggett@512 | 1655 | </pre> |
jdaggett@512 | 1656 | |
jdaggett@512 | 1657 | <p>where:</p> |
jdaggett@512 | 1658 | |
jdaggett@554 | 1659 | <pre>s = font-size value |
jdaggett@554 | 1660 | a = aspect value as specified by the font-size-adjust property |
jdaggett@554 | 1661 | a' = aspect value of actual font |
jdaggett@554 | 1662 | c = adjusted font-size to use |
jdaggett@512 | 1663 | </pre> |
jdaggett@554 | 1664 | |
jdaggett@554 | 1665 | <p>This value applies to any font that is selected but in typical usage |
jdaggett@554 | 1666 | it should be based on the aspect value of the first font in the |
jdaggett@555 | 1667 | font-family list. If this is specified accurately, the <tt>(a/a')</tt> |
jdaggett@555 | 1668 | term in the formula above is effectively 1 for the first font and no |
jdaggett@555 | 1669 | adjustment occurs. If the value is specified inaccurately, text rendered |
jdaggett@555 | 1670 | using the first font in the family list will display differently in |
jdaggett@555 | 1671 | older user agents that don't support font-size-adjust.</p> |
jdaggett@512 | 1672 | </dl> |
jdaggett@512 | 1673 | |
jdaggett@554 | 1674 | <p>Authors can calculate the aspect value for a given font by comparing |
jdaggett@554 | 1675 | spans with the same content but different font-size-adjust properties. If |
jdaggett@554 | 1676 | the same font-size is used, the spans will match when the font-size-adjust |
jdaggett@554 | 1677 | value is accurate for the given font. |
jdaggett@554 | 1678 | |
jdaggett@554 | 1679 | <div class=example> |
jdaggett@554 | 1680 | <p>Two spans with borders are used to determine the aspect value of a |
jdaggett@554 | 1681 | font. The font-size is the same for both spans but the font-size-adjust |
jdaggett@554 | 1682 | property is specified only for the right span. Starting with a value of |
jdaggett@554 | 1683 | 0.5, the aspect value can be adjusted until the borders around the two |
jdaggett@554 | 1684 | letters line up.</p> |
jdaggett@554 | 1685 | |
jdaggett@554 | 1686 | <pre>p { |
jdaggett@554 | 1687 | font-family: Futura; |
jdaggett@554 | 1688 | font-size: 500px; |
jdaggett@554 | 1689 | } |
jdaggett@554 | 1690 | |
jdaggett@554 | 1691 | span { |
jdaggett@554 | 1692 | border: solid 1px red; |
jdaggett@554 | 1693 | } |
jdaggett@554 | 1694 | |
jdaggett@554 | 1695 | .adjust { |
jdaggett@554 | 1696 | font-size-adjust: 0.5; |
jdaggett@554 | 1697 | } |
jdaggett@554 | 1698 | |
jdaggett@554 | 1699 | <p><span>b</span><span class="adjust">b</span></p> |
jdaggett@554 | 1700 | </pre> |
jdaggett@554 | 1701 | |
jdaggett@1150 | 1702 | <div class=figure><img alt="Futura with an aspect value of 0.5" |
jdaggett@1150 | 1703 | src=beforefontsizeadjust.png> |
jdaggett@890 | 1704 | <p class=caption>Futura with an aspect value of 0.5 |
jdaggett@554 | 1705 | </div> |
jdaggett@554 | 1706 | |
jdaggett@554 | 1707 | <p>The box on the right is a bit bigger than the one on the left, so the |
jdaggett@554 | 1708 | aspect value of this font is something less than 0.5. Adjust the value |
jdaggett@554 | 1709 | until the boxes align.</p> |
jdaggett@554 | 1710 | </div> |
jdaggett@512 | 1711 | <!-- prop: font --> |
jdaggett@3460 | 1712 | <!-- jtdfix, crap, preprocessor is inserting links to descriptors rather than properties. bert, make it stop... --> |
jdaggett@7020 | 1713 | <!-- <a href="#font-stretch-prop" class="noxref"><span class="property">'font-stretch'</span></a> --> |
jdaggett@512 | 1714 | |
jdaggett@1662 | 1715 | <h3 id=font-prop><span class=secno>3.7 </span>Shorthand font property: the |
jdaggett@1662 | 1716 | <a href="#propdef-font">font</a> property</h3> |
jdaggett@1662 | 1717 | |
jdaggett@8225 | 1718 | <table class=propdef id=namefontvalue-ltlsquofont-stylersquogt-l> |
jdaggett@484 | 1719 | <tbody> |
jdaggett@484 | 1720 | <tr> |
jdaggett@484 | 1721 | <td>Name: |
jdaggett@484 | 1722 | |
jdaggett@1662 | 1723 | <td><dfn id=propdef-font>font</dfn> |
jdaggett@484 | 1724 | |
jdaggett@484 | 1725 | <tr> |
jdaggett@484 | 1726 | <td>Value: |
jdaggett@484 | 1727 | |
jdaggett@8225 | 1728 | <td>[ [ <var><‘<a href="#propdef-font-style"><code |
jdaggett@8225 | 1729 | class=property>font-style</code></a>’></var> || <a |
jdaggett@8225 | 1730 | href="#font-variant-css21-values"><var><font-variant-css21></var></a> |
jdaggett@8225 | 1731 | || <var><‘<a href="#propdef-font-weight"><code |
jdaggett@8225 | 1732 | class=property>font-weight</code></a>’></var> || <var><‘<a |
jdaggett@7060 | 1733 | href="#propdef-font-stretch"><code |
jdaggett@8225 | 1734 | class=property>font-stretch</code></a>’</var> ]? <var><‘<a |
jdaggett@8225 | 1735 | href="#propdef-font-size"><code |
jdaggett@8225 | 1736 | class=property>font-size</code></a>’></var> [ / <var><‘<code |
jdaggett@8225 | 1737 | class=property>line-height</code>’></var> ]? <var><‘<a |
jdaggett@4624 | 1738 | href="#descdef-font-family"><code |
jdaggett@8225 | 1739 | class=property>font-family</code></a>’></var> ] | caption | icon | |
jdaggett@8225 | 1740 | menu | message-box | small-caption | status-bar |
jdaggett@484 | 1741 | |
jdaggett@484 | 1742 | <tr> |
jdaggett@484 | 1743 | <td>Initial: |
jdaggett@484 | 1744 | |
jdaggett@484 | 1745 | <td>see individual properties |
jdaggett@484 | 1746 | |
jdaggett@484 | 1747 | <tr> |
jdaggett@484 | 1748 | <td>Applies to: |
jdaggett@484 | 1749 | |
jdaggett@484 | 1750 | <td>all elements |
jdaggett@484 | 1751 | |
jdaggett@484 | 1752 | <tr> |
jdaggett@484 | 1753 | <td>Inherited: |
jdaggett@484 | 1754 | |
jdaggett@484 | 1755 | <td>yes |
jdaggett@484 | 1756 | |
jdaggett@484 | 1757 | <tr> |
jdaggett@484 | 1758 | <td>Percentages: |
jdaggett@484 | 1759 | |
jdaggett@484 | 1760 | <td>see individual properties |
jdaggett@484 | 1761 | |
jdaggett@484 | 1762 | <tr> |
jdaggett@484 | 1763 | <td>Media: |
jdaggett@484 | 1764 | |
jdaggett@484 | 1765 | <td>visual |
jdaggett@484 | 1766 | |
jdaggett@484 | 1767 | <tr> |
jdaggett@1148 | 1768 | <td>Computed value: |
jdaggett@484 | 1769 | |
jdaggett@484 | 1770 | <td>see individual properties |
jdaggett@7377 | 1771 | |
jdaggett@7377 | 1772 | <tr> |
jdaggett@7377 | 1773 | <td>Animatable: |
jdaggett@7377 | 1774 | |
jdaggett@7377 | 1775 | <td>see individual properties |
jdaggett@484 | 1776 | </table> |
jdaggett@1732 | 1777 | |
jdaggett@4624 | 1778 | <p>The <span class=property>‘<a href="#propdef-font"><code |
jdaggett@4624 | 1779 | class=property>font</code></a>’</span> property is, except as described |
jdaggett@4624 | 1780 | below, a shorthand property for setting ‘<a |
jdaggett@7060 | 1781 | href="#propdef-font-style"><code class=property>font-style</code></a>’, |
jdaggett@4624 | 1782 | <span class=property>‘<a href="#propdef-font-variant"><code |
jdaggett@4624 | 1783 | class=property>font-variant</code></a>’</span>, <span |
jdaggett@7060 | 1784 | class=property>‘<a href="#propdef-font-weight"><code |
jdaggett@4624 | 1785 | class=property>font-weight</code></a>’</span>, <span |
jdaggett@7060 | 1786 | class=property>‘<a href="#propdef-font-stretch"><code |
jdaggett@7020 | 1787 | class=property>font-stretch</code></a>’</span>, <span |
jdaggett@4624 | 1788 | class=property>‘<a href="#propdef-font-size"><code |
jdaggett@4624 | 1789 | class=property>font-size</code></a>’</span>, ‘<code |
jdaggett@4624 | 1790 | class=property>line-height</code>’, <span class=property>‘<a |
jdaggett@4624 | 1791 | href="#descdef-font-family"><code |
jdaggett@4624 | 1792 | class=property>font-family</code></a>’</span> at the same place in the |
jdaggett@4624 | 1793 | stylesheet. Values for the <span class=property>‘<a |
jdaggett@4624 | 1794 | href="#propdef-font-variant"><code |
jdaggett@4624 | 1795 | class=property>font-variant</code></a>’</span> property may also be |
jdaggett@4624 | 1796 | included but only those supported in CSS 2.1, none of the font-variant |
jdaggett@4624 | 1797 | values added in this specification can be used in the <span |
jdaggett@4624 | 1798 | class=property>‘<a href="#propdef-font"><code |
jdaggett@4624 | 1799 | class=property>font</code></a>’</span> shorthand: |
jdaggett@1732 | 1800 | |
jdaggett@1732 | 1801 | <pre |
jdaggett@8225 | 1802 | class=prod><dfn id=font-variant-css21-values><var><font-variant-css21></var></dfn> = [normal | small-caps]</pre> |
jdaggett@1732 | 1803 | |
jdaggett@1732 | 1804 | <p>The syntax of this property is based on a traditional typographical |
jdaggett@1732 | 1805 | shorthand notation to set multiple properties related to fonts. |
jdaggett@512 | 1806 | |
jdaggett@8197 | 1807 | <p>All subproperties of the ‘<a href="#propdef-font"><code |
jdaggett@8197 | 1808 | class=property>font</code></a>’ property are first reset to their |
jdaggett@8197 | 1809 | initial values, including those listed above plus <span |
jdaggett@4624 | 1810 | class=property>‘<a href="#propdef-font-size-adjust"><code |
jdaggett@4624 | 1811 | class=property>font-size-adjust</code></a>’</span>, <span |
jdaggett@4624 | 1812 | class=property>‘<a href="#propdef-font-kerning"><code |
jdaggett@8197 | 1813 | class=property>font-kerning</code></a>’</span>, subproperties of <span |
jdaggett@8197 | 1814 | class=property>‘<a href="#propdef-font-variant"><code |
jdaggett@8197 | 1815 | class=property>font-variant</code></a>’</span> and and <span |
jdaggett@8197 | 1816 | class=property>‘<a href="#propdef-font-language-override"><code |
jdaggett@8197 | 1817 | class=property>font-language-override</code></a>’</span>. Then, those |
jdaggett@8197 | 1818 | properties that are given explicit values in the <span |
jdaggett@8197 | 1819 | class=property>‘<a href="#propdef-font"><code |
jdaggett@4624 | 1820 | class=property>font</code></a>’</span> shorthand are set to those |
jdaggett@512 | 1821 | values. For a definition of allowed and initial values, see the previously |
jdaggett@512 | 1822 | defined properties. For reasons of backwards compatibility, it is not |
jdaggett@4624 | 1823 | possible to set <span class=property>‘<a |
jdaggett@7020 | 1824 | href="#propdef-font-size-adjust"><code |
jdaggett@7020 | 1825 | class=property>font-size-adjust</code></a>’</span> to anything other |
jdaggett@7020 | 1826 | than its initial value using the <span class=property>‘<a |
jdaggett@4624 | 1827 | href="#propdef-font"><code class=property>font</code></a>’</span> |
jdaggett@7020 | 1828 | shorthand property; instead, use the individual property. |
jdaggett@512 | 1829 | |
jdaggett@512 | 1830 | <div class=example> |
jdaggett@4624 | 1831 | <p style="display:none">Example(s): |
jdaggett@890 | 1832 | |
jdaggett@890 | 1833 | <p> |
jdaggett@512 | 1834 | |
jdaggett@512 | 1835 | <pre>p { font: 12pt/14pt sans-serif } |
jdaggett@512 | 1836 | p { font: 80% sans-serif } |
jdaggett@512 | 1837 | p { font: x-large/110% "new century schoolbook", serif } |
jdaggett@512 | 1838 | p { font: bold italic large Palatino, serif } |
jdaggett@512 | 1839 | p { font: normal small-caps 120%/120% fantasy } |
jdaggett@7020 | 1840 | p { font: condensed oblique 12pt "Helvetica Neue", serif; } |
jdaggett@512 | 1841 | </pre> |
jdaggett@512 | 1842 | |
jdaggett@1148 | 1843 | <p> In the second rule, the font size percentage value (‘<code |
jdaggett@8187 | 1844 | class=css>80%</code>’) refers to the computed ‘<a |
jdaggett@8187 | 1845 | href="#propdef-font-size"><code class=property>font-size</code></a>’ of |
jdaggett@8187 | 1846 | the parent element. In the third rule, the line height percentage |
jdaggett@8187 | 1847 | (‘<code class=css>110%</code>’) refers to the font size of the |
jdaggett@8187 | 1848 | element itself. |
jdaggett@512 | 1849 | |
jdaggett@4624 | 1850 | <p>The first three rules do not specify the <span class=property>‘<a |
jdaggett@4624 | 1851 | href="#propdef-font-variant"><code |
jdaggett@4624 | 1852 | class=property>font-variant</code></a>’</span> and <span |
jdaggett@7060 | 1853 | class=property>‘<a href="#propdef-font-weight"><code |
jdaggett@4624 | 1854 | class=property>font-weight</code></a>’</span> explicitly, so these |
jdaggett@8277 | 1855 | properties receive their initial values (‘<a href="#normal3"><code |
jdaggett@5809 | 1856 | class=property>normal</code></a>’). Notice that the font family name |
jdaggett@5809 | 1857 | "new century schoolbook", which contains spaces, is enclosed in quotes. |
jdaggett@5809 | 1858 | The fourth rule sets the <span class=property>‘<a |
jdaggett@7060 | 1859 | href="#propdef-font-weight"><code |
jdaggett@4624 | 1860 | class=property>font-weight</code></a>’</span> to ‘<code |
jdaggett@4624 | 1861 | class=property>bold</code>’, the <span class=property>‘<a |
jdaggett@7060 | 1862 | href="#propdef-font-style"><code |
jdaggett@4624 | 1863 | class=property>font-style</code></a>’</span> to ‘<code |
jdaggett@1662 | 1864 | class=property>italic</code>’, and implicitly sets <span |
jdaggett@4624 | 1865 | class=property>‘<a href="#propdef-font-variant"><code |
jdaggett@5809 | 1866 | class=property>font-variant</code></a>’</span> to ‘<a |
jdaggett@8277 | 1867 | href="#normal3"><code class=property>normal</code></a>’. |
jdaggett@4624 | 1868 | |
jdaggett@4624 | 1869 | <p> The fifth rule sets the <span class=property>‘<a |
jdaggett@4624 | 1870 | href="#propdef-font-variant"><code |
jdaggett@4624 | 1871 | class=property>font-variant</code></a>’</span> (‘<a |
jdaggett@4624 | 1872 | href="#small-caps"><code class=property>small-caps</code></a>’), the |
jdaggett@4624 | 1873 | <span class=property>‘<a href="#propdef-font-size"><code |
jdaggett@4624 | 1874 | class=property>font-size</code></a>’</span> (120% of the parent's font |
jdaggett@4624 | 1875 | size), the <span class=property>‘<code |
jdaggett@1148 | 1876 | class=property>line-height</code>’</span> (120% of the font size) and |
jdaggett@4624 | 1877 | the <span class=property>‘<a href="#descdef-font-family"><code |
jdaggett@4624 | 1878 | class=property>font-family</code></a>’</span> (‘<a |
jdaggett@4624 | 1879 | href="#fantasy"><code class=property>fantasy</code></a>’). It follows |
jdaggett@8277 | 1880 | that the keyword ‘<a href="#normal3"><code |
jdaggett@5809 | 1881 | class=property>normal</code></a>’ applies to the two remaining |
jdaggett@7060 | 1882 | properties: <span class=property>‘<a href="#propdef-font-style"><code |
jdaggett@4624 | 1883 | class=property>font-style</code></a>’</span> and <span |
jdaggett@7060 | 1884 | class=property>‘<a href="#propdef-font-weight"><code |
jdaggett@4624 | 1885 | class=property>font-weight</code></a>’</span>. |
jdaggett@4624 | 1886 | |
jdaggett@7179 | 1887 | <p>The sixth rule sets the <span class=property>‘<a |
jdaggett@7060 | 1888 | href="#propdef-font-style"><code |
jdaggett@4624 | 1889 | class=property>font-style</code></a>’</span>, <span |
jdaggett@7060 | 1890 | class=property>‘<a href="#propdef-font-stretch"><code |
jdaggett@7020 | 1891 | class=property>font-stretch</code></a>’</span>, <span |
jdaggett@4624 | 1892 | class=property>‘<a href="#propdef-font-size"><code |
jdaggett@4624 | 1893 | class=property>font-size</code></a>’</span>, and <span |
jdaggett@4624 | 1894 | class=property>‘<a href="#descdef-font-family"><code |
jdaggett@4624 | 1895 | class=property>font-family</code></a>’</span>, the other font |
jdaggett@7020 | 1896 | properties being set to their initial values. |
jdaggett@512 | 1897 | </div> |
jdaggett@512 | 1898 | |
jdaggett@7060 | 1899 | <p>Since the ‘<a href="#propdef-font-stretch"><code |
jdaggett@7020 | 1900 | class=property>font-stretch</code></a>’ property was not defined in CSS |
jdaggett@7060 | 1901 | 2.1, when using ‘<a href="#propdef-font-stretch"><code |
jdaggett@7020 | 1902 | class=property>font-stretch</code></a>’ values within ‘<a |
jdaggett@7020 | 1903 | href="#propdef-font"><code class=property>font</code></a>’ rules, |
jdaggett@7020 | 1904 | authors should include a extra version compatible with older user agents: |
jdaggett@7020 | 1905 | |
jdaggett@7020 | 1906 | <pre>p { |
jdaggett@7020 | 1907 | font: 80% sans-serif; /* for older user agents */ |
jdaggett@7020 | 1908 | font: condensed 80% sans-serif; |
jdaggett@7020 | 1909 | }</pre> |
jdaggett@7020 | 1910 | |
jdaggett@1662 | 1911 | <p>The following values refer to system fonts: |
jdaggett@512 | 1912 | |
jdaggett@512 | 1913 | <dl> |
jdaggett@512 | 1914 | <dt><strong>caption</strong> |
jdaggett@512 | 1915 | |
jdaggett@512 | 1916 | <dd>The font used for captioned controls (e.g., buttons, drop-downs, |
jdaggett@512 | 1917 | etc.). |
jdaggett@512 | 1918 | |
jdaggett@512 | 1919 | <dt><strong>icon</strong> |
jdaggett@512 | 1920 | |
jdaggett@512 | 1921 | <dd>The font used to label icons. |
jdaggett@512 | 1922 | |
jdaggett@512 | 1923 | <dt><strong>menu</strong> |
jdaggett@512 | 1924 | |
jdaggett@512 | 1925 | <dd>The font used in menus (e.g., dropdown menus and menu lists). |
jdaggett@512 | 1926 | |
jdaggett@512 | 1927 | <dt><strong>message-box</strong> |
jdaggett@512 | 1928 | |
jdaggett@512 | 1929 | <dd>The font used in dialog boxes. |
jdaggett@512 | 1930 | |
jdaggett@512 | 1931 | <dt><strong>small-caption</strong> |
jdaggett@512 | 1932 | |
jdaggett@512 | 1933 | <dd>The font used for labeling small controls. |
jdaggett@512 | 1934 | |
jdaggett@512 | 1935 | <dt><strong>status-bar</strong> |
jdaggett@512 | 1936 | |
jdaggett@512 | 1937 | <dd>The font used in window status bars. |
jdaggett@512 | 1938 | </dl> |
jdaggett@512 | 1939 | |
jdaggett@512 | 1940 | <p>System fonts may only be set as a whole; that is, the font family, size, |
jdaggett@1662 | 1941 | weight, style, etc. are all set at the same time. These values may then be |
jdaggett@512 | 1942 | altered individually if desired. If no font with the indicated |
jdaggett@512 | 1943 | characteristics exists on a given platform, the user agent should either |
jdaggett@1148 | 1944 | intelligently substitute (e.g., a smaller version of the ‘<code |
jdaggett@1148 | 1945 | class=property>caption</code>’ font might be used for the ‘<code |
jdaggett@7242 | 1946 | class=property>small-caption</code>’ font), or substitute a user agent |
jdaggett@1148 | 1947 | default font. As for regular fonts, if, for a system font, any of the |
jdaggett@1148 | 1948 | individual properties are not part of the operating system's available |
jdaggett@1148 | 1949 | user preferences, those properties should be set to their initial values. |
jdaggett@512 | 1950 | |
jdaggett@1662 | 1951 | <p>That is why this property is "almost" a shorthand property: system fonts |
jdaggett@1662 | 1952 | can only be specified with this property, not with <span |
jdaggett@4624 | 1953 | class=property>‘<a href="#descdef-font-family"><code |
jdaggett@4624 | 1954 | class=property>font-family</code></a>’</span> itself, so <span |
jdaggett@4624 | 1955 | class=property>‘<a href="#propdef-font"><code |
jdaggett@4624 | 1956 | class=property>font</code></a>’</span> allows authors to do more than |
jdaggett@4624 | 1957 | the sum of its subproperties. However, the individual properties such as |
jdaggett@7060 | 1958 | <span class=property>‘<a href="#propdef-font-weight"><code |
jdaggett@4624 | 1959 | class=property>font-weight</code></a>’</span> are still given values |
jdaggett@4624 | 1960 | taken from the system font, which can be independently varied. |
jdaggett@512 | 1961 | |
jdaggett@7235 | 1962 | <p>Note that the keywords used for the system fonts listed above are only |
jdaggett@7235 | 1963 | treated as keywords when they occur in the initial position, in other |
jdaggett@7235 | 1964 | positions the same string is treated as part of the font family name: |
jdaggett@7235 | 1965 | |
jdaggett@7235 | 1966 | <pre> font: menu; /* use the font settings for system menus */ |
jdaggett@7235 | 1967 | font: large menu; /* use a font family named "menu" */</pre> |
jdaggett@7235 | 1968 | |
jdaggett@512 | 1969 | <div class=example> |
jdaggett@4624 | 1970 | <p style="display:none">Example(s): |
jdaggett@890 | 1971 | |
jdaggett@890 | 1972 | <p> |
jdaggett@512 | 1973 | |
jdaggett@512 | 1974 | <pre>button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif } |
jdaggett@512 | 1975 | button p { font: menu } |
jdaggett@512 | 1976 | button p em { font-weight: bolder } |
jdaggett@512 | 1977 | </pre> |
jdaggett@512 | 1978 | |
jdaggett@512 | 1979 | <p>If the font used for dropdown menus on a particular system happened to |
jdaggett@512 | 1980 | be, for example, 9-point Charcoal, with a weight of 600, then P elements |
jdaggett@512 | 1981 | that were descendants of BUTTON would be displayed as if this rule were |
jdaggett@890 | 1982 | in effect: |
jdaggett@512 | 1983 | |
jdaggett@512 | 1984 | <pre>button p { font: 600 9pt Charcoal } |
jdaggett@512 | 1985 | </pre> |
jdaggett@512 | 1986 | |
jdaggett@4624 | 1987 | <p>Because the <span class=property>‘<a href="#propdef-font"><code |
jdaggett@4624 | 1988 | class=property>font</code></a>’</span> shorthand resets to its initial |
jdaggett@4624 | 1989 | value any property not explicitly given a value, this has the same effect |
jdaggett@4624 | 1990 | as this declaration: |
jdaggett@512 | 1991 | |
jdaggett@512 | 1992 | <pre>button p { |
jdaggett@512 | 1993 | font-style: normal; |
jdaggett@512 | 1994 | font-variant: normal; |
jdaggett@512 | 1995 | font-weight: 600; |
jdaggett@512 | 1996 | font-size: 9pt; |
jdaggett@512 | 1997 | line-height: normal; |
jdaggett@512 | 1998 | font-family: Charcoal |
jdaggett@8277 | 1999 | } |
jdaggett@512 | 2000 | </pre> |
jdaggett@512 | 2001 | </div> |
jdaggett@2487 | 2002 | <!-- prop: font-synthesis --> |
jdaggett@2487 | 2003 | |
jdaggett@2487 | 2004 | <h3 id=font-synthesis-prop><span class=secno>3.8 </span>Controlling |
jdaggett@2487 | 2005 | synthetic faces: the <a href="#propdef-font-synthesis">font-synthesis</a> |
jdaggett@2487 | 2006 | property</h3> |
jdaggett@2487 | 2007 | |
jdaggett@4624 | 2008 | <table class=propdef id=namefont-synthesisvaluenone-weight-style> |
jdaggett@2457 | 2009 | <tbody> |
jdaggett@2457 | 2010 | <tr> |
jdaggett@2457 | 2011 | <td>Name: |
jdaggett@2457 | 2012 | |
jdaggett@2487 | 2013 | <td><dfn id=propdef-font-synthesis>font-synthesis</dfn> |
jdaggett@2457 | 2014 | |
jdaggett@2457 | 2015 | <tr> |
jdaggett@2457 | 2016 | <td>Value: |
jdaggett@2457 | 2017 | |
jdaggett@2487 | 2018 | <td>none | [ weight || style ] |
jdaggett@2457 | 2019 | |
jdaggett@2457 | 2020 | <tr> |
jdaggett@2457 | 2021 | <td>Initial: |
jdaggett@2457 | 2022 | |
jdaggett@2487 | 2023 | <td>weight style |
jdaggett@2457 | 2024 | |
jdaggett@2457 | 2025 | <tr> |
jdaggett@2457 | 2026 | <td>Applies to: |
jdaggett@2457 | 2027 | |
jdaggett@2457 | 2028 | <td>all elements |
jdaggett@2457 | 2029 | |
jdaggett@2457 | 2030 | <tr> |
jdaggett@2457 | 2031 | <td>Inherited: |
jdaggett@2457 | 2032 | |
jdaggett@2457 | 2033 | <td>yes |
jdaggett@2457 | 2034 | |
jdaggett@2457 | 2035 | <tr> |
jdaggett@2457 | 2036 | <td>Percentages: |
jdaggett@2457 | 2037 | |
jdaggett@2457 | 2038 | <td>N/A |
jdaggett@2457 | 2039 | |
jdaggett@2457 | 2040 | <tr> |
jdaggett@2457 | 2041 | <td>Media: |
jdaggett@2457 | 2042 | |
jdaggett@2457 | 2043 | <td>visual |
jdaggett@2457 | 2044 | |
jdaggett@2457 | 2045 | <tr> |
jdaggett@2457 | 2046 | <td>Computed value: |
jdaggett@2457 | 2047 | |
jdaggett@2457 | 2048 | <td>as specified |
jdaggett@7377 | 2049 | |
jdaggett@7377 | 2050 | <tr> |
jdaggett@7377 | 2051 | <td>Animatable: |
jdaggett@7377 | 2052 | |
jdaggett@7377 | 2053 | <td>no |
jdaggett@2457 | 2054 | </table> |
jdaggett@2457 | 2055 | |
jdaggett@2487 | 2056 | <p>This property controls whether user agents are allowed to synthesize |
jdaggett@2487 | 2057 | bold or oblique font faces when a font family lacks bold or italic faces. |
jdaggett@7311 | 2058 | If ‘<a href="#weight"><code class=property>weight</code></a>’ is not |
jdaggett@7311 | 2059 | specified, user agents must not synthesize bold faces and if ‘<code |
jdaggett@2487 | 2060 | class=property>style</code>’ is not specified user agents must not |
jdaggett@8277 | 2061 | synthesize italic faces. A value of ‘<a href="#none"><code |
jdaggett@8276 | 2062 | class=property>none</code></a>’ disallows all synthetic faces. |
jdaggett@2457 | 2063 | |
jdaggett@2457 | 2064 | <div class=example> |
jdaggett@2488 | 2065 | <p>The style rule below disables the use of synthetically obliqued Arabic:</p> |
jdaggett@2457 | 2066 | |
jdaggett@2487 | 2067 | <pre>*:lang(ar) { font-synthesis: none; } |
jdaggett@2457 | 2068 | </pre> |
jdaggett@2457 | 2069 | </div> |
jdaggett@512 | 2070 | |
jdaggett@6699 | 2071 | <h2 id=font-resources><span class=secno>4 </span>Font Resources</h2> |
jdaggett@545 | 2072 | |
jdaggett@7096 | 2073 | <h3 id=font-face-rule><span class=secno>4.1 </span>The |
jdaggett@7096 | 2074 | <code>@font-face</code> rule</h3> |
jdaggett@7096 | 2075 | |
jdaggett@7096 | 2076 | <p>The <code>@font-face</code> rule allows for linking to fonts that are |
jdaggett@8198 | 2077 | automatically fetched and activated when needed. This allows authors to |
jdaggett@8198 | 2078 | select a font that closely matches the design goals for a given page |
jdaggett@8198 | 2079 | rather than limiting the font choice to a set of fonts available on all |
jdaggett@8198 | 2080 | platforms. A set of font descriptors define the location of a font |
jdaggett@8198 | 2081 | resource, either locally or externally, along with the style |
jdaggett@8198 | 2082 | characteristics of an individual face. Multiple <code>@font-face</code> |
jdaggett@8198 | 2083 | rules can be used to construct font families with a variety of faces. |
jdaggett@8198 | 2084 | Using CSS font matching rules, a user agent can selectively download only |
jdaggett@8198 | 2085 | those faces that are needed for a given piece of text. |
jdaggett@8198 | 2086 | |
jdaggett@8198 | 2087 | <p>The @font-face rule consists of the @font-face at-keyword followed by a |
jdaggett@8198 | 2088 | block of descriptor declarations. In terms of the grammar, this |
jdaggett@8198 | 2089 | specification defines the following productions: |
jdaggett@8031 | 2090 | |
jdaggett@8031 | 2091 | <pre><dfn id=fontfacerule>font_face_rule</dfn> |
jdaggett@8225 | 2092 | : <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 | 2093 | ; |
jdaggett@8031 | 2094 | |
jdaggett@8031 | 2095 | <dfn id=descriptordeclaration>descriptor_declaration</dfn> |
jdaggett@8225 | 2096 | : <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 | 2097 | ;</pre> |
jdaggett@8031 | 2098 | |
jdaggett@8032 | 2099 | <p>The following new definitions are introduced: |
jdaggett@8032 | 2100 | |
jdaggett@8032 | 2101 | <pre>- -|\\0{0,4}2d(\r\n|[ \t\r\n\f])? |
jdaggett@8032 | 2102 | F f|\\0{0,4}(46|66)(\r\n|[ \t\r\n\f])?</pre> |
jdaggett@8032 | 2103 | |
jdaggett@8032 | 2104 | <p>The following new token is introduced: |
jdaggett@8032 | 2105 | |
jdaggett@8225 | 2106 | <pre>@{F}{O}{N}{T}{-}{F}{A}{C}{E} {return <dfn id=fontfacesym>FONT_FACE_SYM</dfn>;}</pre> |
jdaggett@8032 | 2107 | |
jdaggett@8031 | 2108 | <p>Each <span class=index-inst id=font-face |
jdaggett@7096 | 2109 | title="@font-face"><code>@font-face</code></span> rule specifies a value |
jdaggett@7096 | 2110 | for every font descriptor, either implicitly or explicitly. Those not |
jdaggett@7096 | 2111 | given explicit values in the rule take the initial value listed with each |
jdaggett@7096 | 2112 | descriptor in this specification. These descriptors apply solely within |
jdaggett@7096 | 2113 | the context of the <code>@font-face</code> rule in which they are defined, |
jdaggett@7096 | 2114 | and do not apply to document language elements. There is no notion of |
jdaggett@7096 | 2115 | which elements the descriptors apply to or whether the values are |
jdaggett@7096 | 2116 | inherited by child elements. When a given descriptor occurs multiple times |
jdaggett@8198 | 2117 | in a given <code>@font-face</code> rule, only the last descriptor |
jdaggett@8198 | 2118 | declaration is used and all prior declarations for that descriptor are |
jdaggett@8198 | 2119 | ignored. |
jdaggett@512 | 2120 | |
jdaggett@525 | 2121 | <div class=example> |
jdaggett@525 | 2122 | <p>To use a downloadable font called Gentium:</p> |
jdaggett@512 | 2123 | |
jdaggett@512 | 2124 | <pre> |
jdaggett@525 | 2125 | @font-face { |
jdaggett@525 | 2126 | font-family: Gentium; |
jdaggett@2556 | 2127 | src: url(http://example.com/fonts/Gentium.ttf); |
jdaggett@525 | 2128 | } |
jdaggett@525 | 2129 | |
jdaggett@525 | 2130 | p { font-family: Gentium, serif; } |
jdaggett@512 | 2131 | </pre> |
jdaggett@512 | 2132 | |
jdaggett@573 | 2133 | <p>The user agent will download Gentium and use it when rendering text |
jdaggett@573 | 2134 | within paragraph elements. If for some reason the site serving the font |
jdaggett@573 | 2135 | is unavailable, the default serif font will be used.</p> |
jdaggett@512 | 2136 | </div> |
jdaggett@512 | 2137 | |
jdaggett@7096 | 2138 | <p>A given set of <code>@font-face</code> rules define a set of fonts |
jdaggett@8198 | 2139 | available for use within the documents that contain these rules. When font |
jdaggett@8198 | 2140 | matching is done, fonts defined using these rules are considered before |
jdaggett@8198 | 2141 | other available fonts on a system. |
jdaggett@8198 | 2142 | |
jdaggett@8198 | 2143 | <p>Downloaded fonts are only available to documents that reference them. |
jdaggett@8198 | 2144 | The process of activating these fonts must not make them available to |
jdaggett@2472 | 2145 | other applications or to documents that don't directly link to the same |
jdaggett@2556 | 2146 | font. User agent implementers might consider it convenient to use |
jdaggett@2472 | 2147 | downloaded fonts when rendering characters in other documents for which no |
jdaggett@2472 | 2148 | other available font exists as part of the system font fallback procedure. |
jdaggett@8198 | 2149 | However, this would cause a security leak since the contents of one page |
jdaggett@8198 | 2150 | would be able to affect other pages, something an attacker could use as an |
jdaggett@8198 | 2151 | attack vector. These restrictions do not affect caching behavior, fonts |
jdaggett@8198 | 2152 | are cached the same way other web resources are cached. |
jdaggett@8198 | 2153 | |
jdaggett@8198 | 2154 | <p>This at-rule follows the forward-compatible parsing rules of CSS. Like |
jdaggett@8198 | 2155 | properties in a declaration block, declarations of any descriptors that |
jdaggett@8198 | 2156 | are not supported by the user agent must be ignored. |
jdaggett@8198 | 2157 | <code>@font-face</code> rules require a font-family and src descriptor; if |
jdaggett@8198 | 2158 | either of these are missing, the <code>@font-face</code> rule is invalid |
jdaggett@8198 | 2159 | and must be ignored entirely. |
jdaggett@1244 | 2160 | |
jdaggett@1244 | 2161 | <p>In cases where user agents have limited platform resources or implement |
jdaggett@7096 | 2162 | the ability to disable downloadable font resources, |
jdaggett@7096 | 2163 | <code>@font-face</code> rules must simply be ignored; the behavior of |
jdaggett@7096 | 2164 | individual descriptors as defined in this specification should not be |
jdaggett@7096 | 2165 | altered. |
jdaggett@1662 | 2166 | |
jdaggett@1662 | 2167 | <h3 id=font-family-desc><span class=secno>4.2 </span>Font family: the <a |
jdaggett@1662 | 2168 | href="#descdef-font-family">font-family</a> descriptor</h3> |
jdaggett@512 | 2169 | |
jdaggett@512 | 2170 | <table class=descdef> |
jdaggett@512 | 2171 | <tbody> |
jdaggett@512 | 2172 | <tr> |
jdaggett@512 | 2173 | <td>Name: |
jdaggett@512 | 2174 | |
jdaggett@1662 | 2175 | <td><dfn id=descdef-font-family>font-family</dfn> |
jdaggett@512 | 2176 | |
jdaggett@512 | 2177 | <tr> |
jdaggett@512 | 2178 | <td>Value: |
jdaggett@512 | 2179 | |
jdaggett@8225 | 2180 | <td><a href="#family-name-value"><var><family-name></var></a> |
jdaggett@890 | 2181 | |
jdaggett@890 | 2182 | <tr> |
jdaggett@890 | 2183 | <td><em>Initial:</em> |
jdaggett@890 | 2184 | |
jdaggett@890 | 2185 | <td>N/A |
jdaggett@512 | 2186 | </table> |
jdaggett@512 | 2187 | |
jdaggett@525 | 2188 | <p>This descriptor defines the font family name that will be used in all |
jdaggett@8198 | 2189 | CSS font family name matching. It is required for the @font-face rule to |
jdaggett@8198 | 2190 | be valid. It overrides the font family names contained in the underlying |
jdaggett@8198 | 2191 | font data. If the font family name is the same as a font family available |
jdaggett@8198 | 2192 | in a given user's environment, it effectively hides the underlying font |
jdaggett@8198 | 2193 | for documents that use the stylesheet. This permits a web author to freely |
jdaggett@8198 | 2194 | choose font-family names without worrying about conflicts with font family |
jdaggett@8198 | 2195 | names present in a given user's environment. Likewise, platform |
jdaggett@8198 | 2196 | substitutions for a given font family name must not be used. |
jdaggett@1244 | 2197 | |
jdaggett@1662 | 2198 | <h3 id=src-desc><span class=secno>4.3 </span>Font reference: the <a |
jdaggett@1662 | 2199 | href="#descdef-src">src</a> descriptor</h3> |
jdaggett@512 | 2200 | |
jdaggett@512 | 2201 | <table class=descdef> |
jdaggett@512 | 2202 | <tbody> |
jdaggett@512 | 2203 | <tr> |
jdaggett@512 | 2204 | <td>Name: |
jdaggett@512 | 2205 | |
jdaggett@1662 | 2206 | <td><dfn id=descdef-src>src</dfn> |
jdaggett@512 | 2207 | |
jdaggett@512 | 2208 | <tr> |
jdaggett@512 | 2209 | <td>Value: |
jdaggett@512 | 2210 | |
jdaggett@8225 | 2211 | <td>[ <url> [format(<string> #)]? | <a |
jdaggett@8225 | 2212 | href="#font-face-name-value"><var><font-face-name></var></a> ] # |
jdaggett@890 | 2213 | |
jdaggett@890 | 2214 | <tr> |
jdaggett@890 | 2215 | <td><em>Initial:</em> |
jdaggett@890 | 2216 | |
jdaggett@890 | 2217 | <td>N/A |
jdaggett@512 | 2218 | </table> |
jdaggett@512 | 2219 | |
jdaggett@899 | 2220 | <p>This descriptor specifies the resource containing font data. It is |
jdaggett@8198 | 2221 | required for the <code>@font-face</code> rule to be valid. Its value is a |
jdaggett@8272 | 2222 | prioritized, comma-separated list of external references or |
jdaggett@8272 | 2223 | locally-installed font face names. When a font is needed the user agent |
jdaggett@8272 | 2224 | iterates over the set of references listed, using the first one it can |
jdaggett@8272 | 2225 | successfully activate. Fonts containing invalid data or local font faces |
jdaggett@8272 | 2226 | that are not found are ignored and the user agent loads the next font in |
jdaggett@8272 | 2227 | the list. |
jdaggett@8272 | 2228 | |
jdaggett@8272 | 2229 | <p>As with other URLs in CSS, the URL may be relative, in which case it is |
jdaggett@1244 | 2230 | resolved relative to the location of the style sheet containing the <span |
jdaggett@8031 | 2231 | class=index-inst id=font-face0 |
jdaggett@7096 | 2232 | title="@font-face"><code>@font-face</code></span> rule. In the case of SVG |
jdaggett@7096 | 2233 | fonts, the URL points to an element within a document containing SVG font |
jdaggett@7096 | 2234 | definitions. If the element reference is omitted, a reference to the first |
jdaggett@7096 | 2235 | defined font is implied. Similarly, font container formats that can |
jdaggett@7096 | 2236 | contain more than one font must load one and only one of the fonts for a |
jdaggett@7096 | 2237 | given <code>@font-face</code> rule. Fragment identifiers are used to |
jdaggett@5928 | 2238 | indicate which font to load. If a container format lacks a defined |
jdaggett@5928 | 2239 | fragment identifier scheme, implementations should use a simple 1-based |
jdaggett@5928 | 2240 | indexing scheme (e.g. "font-collection#1" for the first font, |
jdaggett@5928 | 2241 | "font-collection#2" for the second font). |
jdaggett@1244 | 2242 | |
jdaggett@2527 | 2243 | <pre> |
jdaggett@2527 | 2244 | src: url(fonts/simple.ttf); /* load simple.ttf relative to stylesheet location */ |
jdaggett@2527 | 2245 | src: url(/fonts/simple.ttf); /* load simple.ttf from absolute location */ |
jdaggett@2527 | 2246 | src: url(fonts.svg#simple); /* load SVG font with id 'simple' */ |
jdaggett@2527 | 2247 | </pre> |
jdaggett@2527 | 2248 | |
jdaggett@8198 | 2249 | <p>External references consist of a URL, followed by an optional hint |
jdaggett@8198 | 2250 | describing the format of the font resource referenced by that URL. The |
jdaggett@2527 | 2251 | format hint contains a comma-separated list of format strings that denote |
jdaggett@2527 | 2252 | well-known font formats. Conformant user agents must skip downloading a |
jdaggett@2527 | 2253 | font resource if the format hints indicate only unsupported or unknown |
jdaggett@2527 | 2254 | font formats. If no format hints are supplied, the user agent should |
jdaggett@2527 | 2255 | download the font resource. |
jdaggett@2527 | 2256 | |
jdaggett@2527 | 2257 | <pre> |
jdaggett@2527 | 2258 | /* load WOFF font if possible, otherwise use OpenType font */ |
jdaggett@2527 | 2259 | @font-face { |
jdaggett@2527 | 2260 | font-family: bodytext; |
jdaggett@2527 | 2261 | src: url(ideal-sans-serif.woff) format("woff"), |
jdaggett@2527 | 2262 | url(basic-sans-serif.ttf) format("opentype"); |
jdaggett@2527 | 2263 | } |
jdaggett@2527 | 2264 | </pre> |
jdaggett@2527 | 2265 | |
jdaggett@2527 | 2266 | <p>Format strings defined by this specification: |
jdaggett@2527 | 2267 | |
jdaggett@2527 | 2268 | <table class=data id=fontformats> |
jdaggett@2527 | 2269 | <thead> |
jdaggett@2527 | 2270 | <tr> |
jdaggett@2527 | 2271 | <th>String |
jdaggett@2527 | 2272 | |
jdaggett@2527 | 2273 | <th>Font Format |
jdaggett@2527 | 2274 | |
jdaggett@2527 | 2275 | <th>Common extensions |
jdaggett@2527 | 2276 | |
jdaggett@2527 | 2277 | <tbody> |
jdaggett@2527 | 2278 | <tr> |
jdaggett@2527 | 2279 | <th>"woff" |
jdaggett@2527 | 2280 | |
jdaggett@4624 | 2281 | <td><a href="http://www.w3.org/TR/WOFF/">WOFF (Web Open Font Format)</a> |
jdaggett@2527 | 2282 | |
jdaggett@2527 | 2283 | <td>.woff |
jdaggett@2527 | 2284 | |
jdaggett@2527 | 2285 | <tr> |
jdaggett@2527 | 2286 | <th>"truetype" |
jdaggett@2527 | 2287 | |
jdaggett@4624 | 2288 | <td><a |
jdaggett@4624 | 2289 | href="http://www.microsoft.com/typography/otspec/default.htm">TrueType</a> |
jdaggett@2527 | 2290 | |
jdaggett@2527 | 2291 | <td>.ttf |
jdaggett@2527 | 2292 | |
jdaggett@2527 | 2293 | <tr> |
jdaggett@2527 | 2294 | <th>"opentype" |
jdaggett@2527 | 2295 | |
jdaggett@4624 | 2296 | <td><a |
jdaggett@4624 | 2297 | href="http://www.microsoft.com/typography/otspec/default.htm">OpenType</a> |
jdaggett@2527 | 2298 | |
jdaggett@2527 | 2299 | <td>.ttf, .otf |
jdaggett@2527 | 2300 | |
jdaggett@2527 | 2301 | <tr> |
jdaggett@2527 | 2302 | <th>"embedded-opentype" |
jdaggett@2527 | 2303 | |
jdaggett@4624 | 2304 | <td><a |
jdaggett@4624 | 2305 | href="http://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded |
jdaggett@4624 | 2306 | OpenType</a> |
jdaggett@2527 | 2307 | |
jdaggett@2527 | 2308 | <td>.eot |
jdaggett@2527 | 2309 | |
jdaggett@2527 | 2310 | <tr> |
jdaggett@2527 | 2311 | <th>"svg" |
jdaggett@2527 | 2312 | |
jdaggett@4624 | 2313 | <td><a href="http://www.w3.org/TR/SVG/fonts.html">SVG Font</a> |
jdaggett@2527 | 2314 | |
jdaggett@2527 | 2315 | <td>.svg, .svgz |
jdaggett@2527 | 2316 | </table> |
jdaggett@2527 | 2317 | |
jdaggett@2527 | 2318 | <p>Given the overlap in common usage between TrueType and OpenType, the |
jdaggett@2527 | 2319 | format hints "truetype" and "opentype" must be considered as synonymous; a |
jdaggett@2527 | 2320 | format hint of "opentype" does not imply that the font contains Postscript |
jdaggett@2527 | 2321 | CFF style glyph data or that it contains OpenType layout information (see |
jdaggett@7377 | 2322 | <a href="#platform-props-to-css">Appendix A</a> for more background on |
jdaggett@7377 | 2323 | this). |
jdaggett@2527 | 2324 | |
jdaggett@2527 | 2325 | <p>When authors would prefer to use a locally available copy of a given |
jdaggett@8198 | 2326 | font and download it if it's not, <code>local()</code> can be used. The |
jdaggett@8225 | 2327 | locally-installed <dfn |
jdaggett@8225 | 2328 | id=font-face-name-value><var><font-face-name></var></dfn> argument |
jdaggett@8272 | 2329 | to <code>local()</code> is a format-specific string that uniquely |
jdaggett@8272 | 2330 | identifies a single font face within a larger family. The syntax for a <a |
jdaggett@8225 | 2331 | href="#font-face-name-value"><var><font-face-name></var></a> is a |
jdaggett@8241 | 2332 | unique font face name enclosed by "local(" and ")". The name can |
jdaggett@8241 | 2333 | optionally be enclosed in quotes. If unquoted, the unquoted font family |
jdaggett@8241 | 2334 | name processing conventions apply; the name must be a sequence of |
jdaggett@8241 | 2335 | identifiers separated by whitespace which is converted to a string by |
jdaggett@8241 | 2336 | joining the identifiers together separated by a single space. |
jdaggett@2527 | 2337 | |
jdaggett@2527 | 2338 | <pre> |
jdaggett@2527 | 2339 | /* regular face of Gentium */ |
jdaggett@573 | 2340 | @font-face { |
jdaggett@2527 | 2341 | font-family: MyGentium; |
jdaggett@2527 | 2342 | src: local(Gentium), /* use locally available Gentium */ |
jdaggett@2527 | 2343 | url(Gentium.ttf); /* otherwise, download it */ |
jdaggett@573 | 2344 | } |
jdaggett@573 | 2345 | </pre> |
jdaggett@573 | 2346 | |
jdaggett@8241 | 2347 | <p>For OpenType and TrueType fonts, this string is used to match only the |
jdaggett@8241 | 2348 | Postscript name or the full font name in the name table of locally |
jdaggett@8241 | 2349 | available fonts. Which type of name is used varies by platform and font, |
jdaggett@8241 | 2350 | so authors should include both of these names to assure proper matching |
jdaggett@8241 | 2351 | across platforms. Platform substitutions for a given font name must not be |
jdaggett@8241 | 2352 | used. |
jdaggett@2527 | 2353 | |
jdaggett@2527 | 2354 | <pre> |
jdaggett@2527 | 2355 | /* bold face of Gentium */ |
jdaggett@2527 | 2356 | @font-face { |
jdaggett@2527 | 2357 | font-family: MyGentium; |
jdaggett@2527 | 2358 | src: local(Gentium Bold), /* full font name */ |
jdaggett@2527 | 2359 | local(Gentium-Bold), /* Postscript name */ |
jdaggett@2527 | 2360 | url(GentiumBold.ttf); /* otherwise, download it */ |
jdaggett@2527 | 2361 | font-weight: bold; |
jdaggett@2527 | 2362 | } |
jdaggett@2527 | 2363 | </pre> |
jdaggett@2527 | 2364 | |
jdaggett@7096 | 2365 | <p>Just as a <code>@font-face</code> rule specifies the characteristics of |
jdaggett@8198 | 2366 | a single font within a family, the unique name used with |
jdaggett@8198 | 2367 | <code>local()</code> specifies a single font, not an entire font family. |
jdaggett@8198 | 2368 | Defined in terms of OpenType font data, the Postscript name is found in |
jdaggett@8198 | 2369 | the font's <a |
jdaggett@2527 | 2370 | href="http://www.microsoft.com/typography/otspec/name.htm">name table</a>, |
jdaggett@2527 | 2371 | in the name record with nameID = 6 (see <a href="#OPENTYPE" |
jdaggett@2556 | 2372 | rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> for more details). The |
jdaggett@2527 | 2373 | Postscript name is the commonly used key for all fonts on OSX and for |
jdaggett@2527 | 2374 | Postscript CFF fonts under Windows. The full font name (nameID = 4) is |
jdaggett@2527 | 2375 | used as a unique key for fonts with TrueType glyphs on Windows. |
jdaggett@2527 | 2376 | |
jdaggett@2527 | 2377 | <p>For OpenType fonts with multiple localizations of the full font name, |
jdaggett@2527 | 2378 | the US English version is used (language ID = 0x409 for Windows and |
jdaggett@2527 | 2379 | language ID = 0 for Macintosh) or the first localization when a US English |
jdaggett@2527 | 2380 | full font name is not available (the OpenType specification recommends |
jdaggett@2527 | 2381 | that <a href="http://www.microsoft.com/typography/otspec/recom.htm">all |
jdaggett@2527 | 2382 | fonts minimally include US English names</a>). User agents that also match |
jdaggett@2527 | 2383 | other full font names, e.g. matching the Dutch name when the current |
jdaggett@2527 | 2384 | system locale is set to Dutch, are considered non-conformant. This is done |
jdaggett@2527 | 2385 | not to prefer English but to avoid matching inconsistencies across font |
jdaggett@2527 | 2386 | versions and OS localizations, since font style names (e.g. "Bold") are |
jdaggett@2527 | 2387 | frequently localized into many languages and the set of localizations |
jdaggett@2527 | 2388 | available varies widely across platform and font version. User agents that |
jdaggett@2527 | 2389 | match a concatenation of family name (nameID = 1) with style name (nameID |
jdaggett@2527 | 2390 | = 2) are considered non-conformant. |
jdaggett@2527 | 2391 | |
jdaggett@2527 | 2392 | <p>This also allows for referencing faces that belong to larger families |
jdaggett@2527 | 2393 | that cannot otherwise be referenced. |
jdaggett@2527 | 2394 | |
jdaggett@2527 | 2395 | <div class=example> |
jdaggett@525 | 2396 | <p>Use a local font or reference an SVG font in another document:</p> |
jdaggett@525 | 2397 | |
jdaggett@525 | 2398 | <pre> |
jdaggett@525 | 2399 | @font-face { |
jdaggett@525 | 2400 | font-family: Headline; |
jdaggett@8277 | 2401 | src: local(Futura-Medium), |
jdaggett@1148 | 2402 | url(fonts.svg#MyGeometricModern) format("svg"); |
jdaggett@525 | 2403 | } |
jdaggett@525 | 2404 | </pre> |
jdaggett@525 | 2405 | |
jdaggett@525 | 2406 | <p>Create an alias for local Japanese fonts on different platforms:</p> |
jdaggett@525 | 2407 | |
jdaggett@525 | 2408 | <pre> |
jdaggett@525 | 2409 | @font-face { |
jdaggett@2527 | 2410 | font-family: jpgothic; |
jdaggett@525 | 2411 | src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic); |
jdaggett@525 | 2412 | } |
jdaggett@525 | 2413 | </pre> |
jdaggett@525 | 2414 | |
jdaggett@525 | 2415 | <p>Reference a font face that cannot be matched within a larger family:</p> |
jdaggett@525 | 2416 | |
jdaggett@525 | 2417 | <pre> |
jdaggett@525 | 2418 | @font-face { |
jdaggett@525 | 2419 | font-family: Hoefler Text Ornaments; |
jdaggett@525 | 2420 | /* has the same font properties as Hoefler Text Regular */ |
jdaggett@8277 | 2421 | src: local(HoeflerText-Ornaments); |
jdaggett@525 | 2422 | } |
jdaggett@525 | 2423 | </pre> |
jdaggett@2527 | 2424 | |
jdaggett@8198 | 2425 | <p>Since localized fullnames never match, a document with the header style |
jdaggett@8198 | 2426 | rules below would always render using the default serif font, regardless |
jdaggett@8198 | 2427 | whether a particular system locale parameter is set to Finnish or not:</p> |
jdaggett@1662 | 2428 | |
jdaggett@1662 | 2429 | <pre> |
jdaggett@1662 | 2430 | @font-face { |
jdaggett@1662 | 2431 | font-family: SectionHeader; |
jdaggett@6653 | 2432 | src: local("Arial Lihavoitu"); /* Finnish fullname for Arial Bold, should fail */ |
jdaggett@1662 | 2433 | font-weight: bold; |
jdaggett@1662 | 2434 | } |
jdaggett@1662 | 2435 | |
jdaggett@1662 | 2436 | h2 { font-family: SectionHeader, serif; } |
jdaggett@1662 | 2437 | </pre> |
jdaggett@1662 | 2438 | |
jdaggett@8198 | 2439 | <p>A conformant user agent would never load the font ‘<code |
jdaggett@1662 | 2440 | class=css>gentium.eot</code>’ in the example below, since it is |
jdaggett@4624 | 2441 | included in the first definition of the ‘<a href="#descdef-src"><code |
jdaggett@4624 | 2442 | class=property>src</code></a>’ descriptor which is overridden by the |
jdaggett@7096 | 2443 | second definition in the same <code>@font-face</code> rule:</p> |
jdaggett@1662 | 2444 | |
jdaggett@1662 | 2445 | <pre> |
jdaggett@1662 | 2446 | @font-face { |
jdaggett@1662 | 2447 | font-family: MainText; |
jdaggett@6653 | 2448 | src: url(gentium.eot); /* for use with older non-conformant user agents */ |
jdaggett@1662 | 2449 | src: local("Gentium"), url(gentium.ttf); /* Overrides src definition */ |
jdaggett@1662 | 2450 | } |
jdaggett@1662 | 2451 | </pre> |
jdaggett@1662 | 2452 | </div> |
jdaggett@1662 | 2453 | |
jdaggett@1662 | 2454 | <h3 id=font-prop-desc><span class=secno>4.4 </span>Font property |
jdaggett@1662 | 2455 | descriptors: the <a href="#descdef-font-style">font-style</a>, <a |
jdaggett@1662 | 2456 | href="#descdef-font-weight">font-weight</a>, <a |
jdaggett@1662 | 2457 | href="#descdef-font-stretch">font-stretch</a> descriptors</h3> |
jdaggett@518 | 2458 | |
jdaggett@518 | 2459 | <table class=descdef> |
jdaggett@518 | 2460 | <tbody> |
jdaggett@518 | 2461 | <tr> |
jdaggett@518 | 2462 | <td>Name: |
jdaggett@518 | 2463 | |
jdaggett@7060 | 2464 | <td><dfn id=descdef-font-style title="font-style |
jdaggett@7060 | 2465 | (descriptor)">font-style</dfn> |
jdaggett@518 | 2466 | |
jdaggett@518 | 2467 | <tr> |
jdaggett@518 | 2468 | <td>Value: |
jdaggett@518 | 2469 | |
jdaggett@545 | 2470 | <td>normal | italic | oblique |
jdaggett@890 | 2471 | |
jdaggett@890 | 2472 | <tr> |
jdaggett@890 | 2473 | <td><em>Initial:</em> |
jdaggett@890 | 2474 | |
jdaggett@890 | 2475 | <td>normal |
jdaggett@518 | 2476 | </table> |
jdaggett@518 | 2477 | |
jdaggett@518 | 2478 | <table class=descdef> |
jdaggett@518 | 2479 | <tbody> |
jdaggett@518 | 2480 | <tr> |
jdaggett@518 | 2481 | <td>Name: |
jdaggett@518 | 2482 | |
jdaggett@7060 | 2483 | <td><dfn id=descdef-font-weight title="font-weight |
jdaggett@7060 | 2484 | (descriptor)">font-weight</dfn> |
jdaggett@518 | 2485 | |
jdaggett@518 | 2486 | <tr> |
jdaggett@518 | 2487 | <td>Value: |
jdaggett@518 | 2488 | |
jdaggett@545 | 2489 | <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
jdaggett@890 | 2490 | |
jdaggett@890 | 2491 | <tr> |
jdaggett@890 | 2492 | <td><em>Initial:</em> |
jdaggett@890 | 2493 | |
jdaggett@890 | 2494 | <td>normal |
jdaggett@518 | 2495 | </table> |
jdaggett@518 | 2496 | |
jdaggett@518 | 2497 | <table class=descdef> |
jdaggett@518 | 2498 | <tbody> |
jdaggett@518 | 2499 | <tr> |
jdaggett@518 | 2500 | <td>Name: |
jdaggett@518 | 2501 | |
jdaggett@7060 | 2502 | <td><dfn id=descdef-font-stretch title="font-stretch |
jdaggett@7060 | 2503 | (descriptor)">font-stretch</dfn> |
jdaggett@518 | 2504 | |
jdaggett@518 | 2505 | <tr> |
jdaggett@518 | 2506 | <td>Value: |
jdaggett@518 | 2507 | |
jdaggett@545 | 2508 | <td>normal | ultra-condensed | extra-condensed | condensed | |
jdaggett@518 | 2509 | semi-condensed | semi-expanded | expanded | extra-expanded | |
jdaggett@525 | 2510 | ultra-expanded |
jdaggett@890 | 2511 | |
jdaggett@890 | 2512 | <tr> |
jdaggett@890 | 2513 | <td><em>Initial:</em> |
jdaggett@890 | 2514 | |
jdaggett@890 | 2515 | <td>normal |
jdaggett@518 | 2516 | </table> |
jdaggett@518 | 2517 | |
jdaggett@573 | 2518 | <p>These descriptors define the characteristics of a font face and are used |
jdaggett@573 | 2519 | in the process of matching styles to specific faces. For a font family |
jdaggett@7096 | 2520 | defined with several <code>@font-face</code> rules, user agents can either |
jdaggett@7096 | 2521 | download all faces in the family or use these descriptors to selectively |
jdaggett@7096 | 2522 | download font faces that match actual styles used in document. The values |
jdaggett@7096 | 2523 | for these descriptors are the same as those for the corresponding font |
jdaggett@7096 | 2524 | properties except that relative keywords are not allowed, ‘<code |
jdaggett@2527 | 2525 | class=property>bolder</code>’ and ‘<code |
jdaggett@2527 | 2526 | class=property>lighter</code>’. If these descriptors are omitted, |
jdaggett@8213 | 2527 | initial values are assumed. |
jdaggett@890 | 2528 | |
jdaggett@890 | 2529 | <p>The value for these font face style attributes is used in place of the |
jdaggett@890 | 2530 | style implied by the underlying font data. This allows authors to combine |
jdaggett@890 | 2531 | faces in flexible combinations, even in situations where the original font |
jdaggett@890 | 2532 | data was arranged differently. User agents that implement synthetic |
jdaggett@8272 | 2533 | bolding and obliquing must only apply synthetic styling in cases where the |
jdaggett@8272 | 2534 | font descriptors imply this is needed, rather than based on the style |
jdaggett@890 | 2535 | attributes implied by the font data. |
jdaggett@573 | 2536 | |
jdaggett@1662 | 2537 | <h3 id=unicode-range-desc><span class=secno>4.5 </span>Character range: the |
jdaggett@1662 | 2538 | <a href="#descdef-unicode-range">unicode-range</a> descriptor</h3> |
jdaggett@518 | 2539 | |
jdaggett@518 | 2540 | <table class=descdef> |
jdaggett@518 | 2541 | <tbody> |
jdaggett@518 | 2542 | <tr> |
jdaggett@518 | 2543 | <td>Name: |
jdaggett@518 | 2544 | |
jdaggett@1662 | 2545 | <td><dfn id=descdef-unicode-range>unicode-range</dfn> |
jdaggett@518 | 2546 | |
jdaggett@518 | 2547 | <tr> |
jdaggett@518 | 2548 | <td>Value: |
jdaggett@518 | 2549 | |
jdaggett@8225 | 2550 | <td><a href="#urange-value"><var><urange></var></a> # |
jdaggett@890 | 2551 | |
jdaggett@890 | 2552 | <tr> |
jdaggett@890 | 2553 | <td><em>Initial:</em> |
jdaggett@890 | 2554 | |
jdaggett@1148 | 2555 | <td>U+0-10FFFF |
jdaggett@518 | 2556 | </table> |
jdaggett@518 | 2557 | |
jdaggett@8213 | 2558 | <p>This descriptor defines the set of Unicode codepoints that may be |
jdaggett@8213 | 2559 | supported by the font face for which it is declared. The descriptor value |
jdaggett@8225 | 2560 | is a comma-delimited list of Unicode range (<a |
jdaggett@8225 | 2561 | href="#urange-value"><var><urange></var></a>) values. The union of |
jdaggett@8225 | 2562 | these ranges defines the set of codepoints that serves as a hint for user |
jdaggett@8225 | 2563 | agents when deciding whether or not to download a font resource for a |
jdaggett@8225 | 2564 | given text run. |
jdaggett@8225 | 2565 | |
jdaggett@8225 | 2566 | <p>Each <dfn id=urange-value><var><urange></var></dfn> value is a <a |
jdaggett@8225 | 2567 | href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code |
jdaggett@8225 | 2568 | title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token made up of a |
jdaggett@8225 | 2569 | "U+" or "u+" prefix followed by a codepoint range in one of the three |
jdaggett@8241 | 2570 | forms listed below. Ranges that do not fit one of the these forms are |
jdaggett@8241 | 2571 | invalid and cause the declaration to be ignored. |
jdaggett@8241 | 2572 | |
jdaggett@8241 | 2573 | <dl> |
jdaggett@8241 | 2574 | <dt>single codepoint (e.g. U+416) |
jdaggett@8241 | 2575 | |
jdaggett@8241 | 2576 | <dd>a valid Unicode codepoint, represented as one to six hexadecimal |
jdaggett@8241 | 2577 | digits |
jdaggett@8241 | 2578 | |
jdaggett@8246 | 2579 | <dt>interval range (e.g. U+400-4ff) |
jdaggett@8241 | 2580 | |
jdaggett@8241 | 2581 | <dd>represented as two hyphen-separated valid Unicode codepoints |
jdaggett@8241 | 2582 | indicating the inclusive start and end codepoints of a range |
jdaggett@8241 | 2583 | |
jdaggett@8246 | 2584 | <dt>wildcard range (e.g. U+4??) |
jdaggett@8241 | 2585 | |
jdaggett@8241 | 2586 | <dd>defined by the set of codepoints implied when trailing ‘<code |
jdaggett@8246 | 2587 | class=css>?</code>’ characters signify any hexadeximal digit |
jdaggett@8241 | 2588 | </dl> |
jdaggett@573 | 2589 | |
jdaggett@8213 | 2590 | <p>Individual codepoints are written using hexadecimal values that |
jdaggett@8213 | 2591 | correspond to <a href="http://www.unicode.org/charts/">Unicode character |
jdaggett@8225 | 2592 | codepoints</a>. Valid Unicode codepoint values vary between 0 and 10FFFF |
jdaggett@8225 | 2593 | inclusive. Digit values of codepoints are ASCII case-insensitive. For |
jdaggett@8225 | 2594 | interval ranges, the start and end codepoints must be valid Unicode values |
jdaggett@8225 | 2595 | and the end codepoint must be greater than or equal to the start |
jdaggett@8225 | 2596 | codepoint. |
jdaggett@8225 | 2597 | |
jdaggett@8225 | 2598 | <p>Wildcard ranges specified with ‘?’ that lack an initial digit (e.g. |
jdaggett@8225 | 2599 | "U+???") are valid and equivalent to a wildcard range with an initial zero |
jdaggett@8225 | 2600 | digit (e.g. "U+0???" = "U+0000-0FFF"). Wildcard ranges that extend beyond |
jdaggett@8225 | 2601 | the range of valid Unicode codepoints are invalid. Because of this, the |
jdaggett@8225 | 2602 | maximum number of trailing ‘<code class=css>?</code>’ wildcard |
jdaggett@8272 | 2603 | characters is five, even though the <a |
jdaggett@8225 | 2604 | href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code |
jdaggett@8225 | 2605 | title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token accepts six. |
jdaggett@8213 | 2606 | |
jdaggett@8213 | 2607 | <p>Within the comma-delimited list of Unicode ranges in a ‘<a |
jdaggett@8213 | 2608 | href="#descdef-unicode-range"><code |
jdaggett@8213 | 2609 | class=property>unicode-range</code></a>’ descriptor declaration, ranges |
jdaggett@8241 | 2610 | may overlap. The union of these ranges defines the set of codepoints for |
jdaggett@8241 | 2611 | which the corresponding font may be used. User agents must not download or |
jdaggett@8241 | 2612 | use the font for codepoints outside this set. User agents may normalize |
jdaggett@8241 | 2613 | the list of ranges into a list that is different but represents the same |
jdaggett@8241 | 2614 | set of codepoints. |
jdaggett@8213 | 2615 | |
jdaggett@8272 | 2616 | <p>The associated font might not contain glyphs for the entire set of |
jdaggett@8213 | 2617 | codepoints defined by the ‘<a href="#descdef-unicode-range"><code |
jdaggett@8213 | 2618 | class=property>unicode-range</code></a>’ descriptor. When the font is |
jdaggett@8225 | 2619 | used the effective <a href="#character-map"><em>character map</em></a> is |
jdaggett@8225 | 2620 | the intersection of the codepoints defined by ‘<a |
jdaggett@8225 | 2621 | href="#descdef-unicode-range"><code |
jdaggett@8225 | 2622 | class=property>unicode-range</code></a>’ with the font's <a |
jdaggett@8225 | 2623 | href="#character-map"><em>character map</em></a>. This allows authors to |
jdaggett@8225 | 2624 | define supported ranges in terms of broad ranges without worrying about |
jdaggett@8225 | 2625 | the precise codepoint ranges supported by the underlying font. |
jdaggett@8225 | 2626 | |
jdaggett@8225 | 2627 | <h3 id=composite-fonts><span class=secno>4.6 </span>Using character ranges |
jdaggett@8225 | 2628 | to define composite fonts</h3> |
jdaggett@8225 | 2629 | |
jdaggett@8225 | 2630 | <p>Multiple <code>@font-face</code> rules with different unicode ranges for |
jdaggett@8225 | 2631 | the same family and style descriptor values can be used to create |
jdaggett@8225 | 2632 | composite fonts that mix the glyphs from different fonts for different |
jdaggett@8225 | 2633 | scripts. This can be used to combine fonts that only contain glyphs for a |
jdaggett@8225 | 2634 | single script (e.g. Latin, Greek, Cyrillic) or it can be used by authors |
jdaggett@8225 | 2635 | as a way of segmenting a font into fonts for commonly used characters and |
jdaggett@8225 | 2636 | less frequently used characters. Since the user agent will only pull down |
jdaggett@8225 | 2637 | the fonts it needs this helps reduce page bandwidth. |
jdaggett@8225 | 2638 | |
jdaggett@8225 | 2639 | <p>If the unicode ranges overlap for a set of <code>@font-face</code> rules |
jdaggett@8225 | 2640 | with the same family and style descriptor values, the rules are ordered in |
jdaggett@8225 | 2641 | the reverse order they were defined; the last rule defined is the first to |
jdaggett@8225 | 2642 | be checked for a given character. |
jdaggett@890 | 2643 | |
jdaggett@890 | 2644 | <p>Example ranges for specific languages or characters: |
jdaggett@518 | 2645 | |
jdaggett@518 | 2646 | <dl> |
jdaggett@529 | 2647 | <dt>unicode-range: U+A5; |
jdaggett@529 | 2648 | |
jdaggett@1149 | 2649 | <dd>a single code point, the yen/yuan symbol |
jdaggett@529 | 2650 | |
jdaggett@1148 | 2651 | <dt>unicode-range: U+0-7F; |
jdaggett@1148 | 2652 | |
jdaggett@1148 | 2653 | <dd>code range for basic ASCII characters |
jdaggett@1148 | 2654 | |
jdaggett@529 | 2655 | <dt>unicode-range: U+590-5ff; |
jdaggett@529 | 2656 | |
jdaggett@529 | 2657 | <dd>code range for Hebrew characters |
jdaggett@529 | 2658 | |
jdaggett@529 | 2659 | <dt>unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F; |
jdaggett@529 | 2660 | |
jdaggett@529 | 2661 | <dd>code range for Japanese kanji, hiragana and katakana characters plus |
jdaggett@529 | 2662 | yen/yuan symbol |
jdaggett@518 | 2663 | </dl> |
jdaggett@518 | 2664 | |
jdaggett@529 | 2665 | <div class=example> |
jdaggett@531 | 2666 | <p>The BBC provides news services in a wide variety of languages, many |
jdaggett@7096 | 2667 | that are not well supported across all platforms. Using an |
jdaggett@7096 | 2668 | <code>@font-face</code> rule, the BBC could provide a font for any of |
jdaggett@7096 | 2669 | these languages, as it already does via a manual font download.</p> |
jdaggett@531 | 2670 | |
jdaggett@531 | 2671 | <pre> |
jdaggett@531 | 2672 | @font-face { |
jdaggett@531 | 2673 | font-family: BBCBengali; |
jdaggett@531 | 2674 | src: url(fonts/BBCBengali.ttf) format("opentype"); |
jdaggett@531 | 2675 | unicode-range: U+00-FF, U+980-9FF; |
jdaggett@531 | 2676 | } |
jdaggett@531 | 2677 | </pre> |
jdaggett@529 | 2678 | </div> |
jdaggett@529 | 2679 | |
jdaggett@529 | 2680 | <div class=example> |
jdaggett@531 | 2681 | <p>Technical documents often require a wide range of symbols. The STIX |
jdaggett@531 | 2682 | Fonts project is one project aimed at providing fonts to support a wide |
jdaggett@531 | 2683 | range of technical typesetting in a standardized way. The example below |
jdaggett@531 | 2684 | shows the use of a font that provides glyphs for many of the mathematical |
jdaggett@531 | 2685 | and technical symbol ranges within Unicode:</p> |
jdaggett@531 | 2686 | |
jdaggett@531 | 2687 | <pre> |
jdaggett@531 | 2688 | @font-face { |
jdaggett@531 | 2689 | font-family: STIXGeneral; |
jdaggett@531 | 2690 | src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf); |
jdaggett@531 | 2691 | unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF; |
jdaggett@531 | 2692 | } |
jdaggett@531 | 2693 | </pre> |
jdaggett@529 | 2694 | </div> |
jdaggett@529 | 2695 | |
jdaggett@529 | 2696 | <div class=example> |
jdaggett@529 | 2697 | <p>This example shows how an author can override the glyphs used for Latin |
jdaggett@529 | 2698 | characters in a Japanese font with glyphs from a different font. The |
jdaggett@529 | 2699 | first rule specifies no range so it defaults to the entire range. The |
jdaggett@529 | 2700 | range specified in the second rule overlaps but takes precedence because |
jdaggett@529 | 2701 | it is defined later.</p> |
jdaggett@529 | 2702 | |
jdaggett@529 | 2703 | <pre> |
jdaggett@529 | 2704 | @font-face { |
jdaggett@529 | 2705 | font-family: JapaneseWithGentium; |
jdaggett@529 | 2706 | src: local(MSMincho); |
jdaggett@529 | 2707 | /* no range specified, defaults to entire range */ |
jdaggett@529 | 2708 | } |
jdaggett@529 | 2709 | |
jdaggett@529 | 2710 | @font-face { |
jdaggett@529 | 2711 | font-family: JapaneseWithGentium; |
jdaggett@529 | 2712 | src: url(../fonts/Gentium.ttf); |
jdaggett@529 | 2713 | unicode-range: U+0-2FF; |
jdaggett@529 | 2714 | } |
jdaggett@529 | 2715 | </pre> |
jdaggett@529 | 2716 | </div> |
jdaggett@1148 | 2717 | |
jdaggett@1148 | 2718 | <div class=example> |
jdaggett@1148 | 2719 | <p>Consider a family constructed to optimize bandwidth by separating out |
jdaggett@1148 | 2720 | Latin, Japanese and other characters into different font files:</p> |
jdaggett@1148 | 2721 | |
jdaggett@1148 | 2722 | <pre> |
jdaggett@1148 | 2723 | /* fallback font - size: 4.5MB */ |
jdaggett@1148 | 2724 | @font-face { |
jdaggett@1148 | 2725 | font-family: DroidSans; |
jdaggett@1148 | 2726 | src: url(DroidSansFallback.ttf); |
jdaggett@1148 | 2727 | /* no range specified, defaults to entire range */ |
jdaggett@1148 | 2728 | } |
jdaggett@1148 | 2729 | |
jdaggett@1148 | 2730 | /* Japanese glyphs - size: 1.2MB */ |
jdaggett@1148 | 2731 | @font-face { |
jdaggett@1148 | 2732 | font-family: DroidSans; |
jdaggett@1148 | 2733 | src: url(DroidSansJapanese.ttf); |
jdaggett@1148 | 2734 | unicode-range: U+3000-9FFF, U+ff??; |
jdaggett@1148 | 2735 | } |
jdaggett@1148 | 2736 | |
jdaggett@8277 | 2737 | /* Latin, Greek, Cyrillic along with some |
jdaggett@1148 | 2738 | punctuation and symbols - size: 190KB */ |
jdaggett@1148 | 2739 | @font-face { |
jdaggett@1148 | 2740 | font-family: DroidSans; |
jdaggett@1148 | 2741 | src: url(DroidSans.ttf); |
jdaggett@1148 | 2742 | unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300; |
jdaggett@1148 | 2743 | } |
jdaggett@1148 | 2744 | </pre> |
jdaggett@1148 | 2745 | |
jdaggett@1148 | 2746 | <p>For simple Latin text, only the font for Latin characters is |
jdaggett@1148 | 2747 | downloaded:</p> |
jdaggett@1148 | 2748 | |
jdaggett@1148 | 2749 | <pre> |
jdaggett@1148 | 2750 | body { font-family: DroidSans; } |
jdaggett@1148 | 2751 | |
jdaggett@1148 | 2752 | <p>This is that</p> |
jdaggett@1148 | 2753 | </pre> |
jdaggett@1148 | 2754 | |
jdaggett@1148 | 2755 | <p>In this case the user agent first checks the unicode-range for the font |
jdaggett@1148 | 2756 | containing Latin characters (DroidSans.ttf). Since all the characters |
jdaggett@1148 | 2757 | above are in the range U+0-5FF, the user agent downloads the font and |
jdaggett@1148 | 2758 | renders the text with that font.</p> |
jdaggett@1148 | 2759 | |
jdaggett@1148 | 2760 | <p>Next, consider text that makes use of an arrow character (⇨):</p> |
jdaggett@1148 | 2761 | |
jdaggett@1148 | 2762 | <pre> |
jdaggett@1148 | 2763 | <p>This &#x21e8; that<p> |
jdaggett@1148 | 2764 | </pre> |
jdaggett@1148 | 2765 | |
jdaggett@1148 | 2766 | <p>The user agent again first checks the unicode-range of the font |
jdaggett@1149 | 2767 | containing Latin characters. Since U+2000-2300 includes the arrow code |
jdaggett@1149 | 2768 | point (U+21E8), the user agent downloads the font. For this character |
jdaggett@1148 | 2769 | however the Latin font does not have a matching glyph, so the effective |
jdaggett@1149 | 2770 | unicode-range used for font matching excludes this code point. Next, the |
jdaggett@1148 | 2771 | user agent evaluates the Japanese font. The unicode-range for the |
jdaggett@1148 | 2772 | Japanese font, U+3000-9FFF and U+ff??, does not include U+21E8, so the |
jdaggett@1662 | 2773 | user agent does not download the Japanese font. Next the fallback font is |
jdaggett@7096 | 2774 | considered. The <code>@font-face</code> rule for the fallback font does |
jdaggett@7096 | 2775 | not define unicode-range so its value defaults to the range of all |
jdaggett@7096 | 2776 | Unicode code points. The fallback font is downloaded and used to render |
jdaggett@7096 | 2777 | the arrow character.</p> |
jdaggett@1148 | 2778 | </div> |
jdaggett@890 | 2779 | |
jdaggett@8225 | 2780 | <h3 id=font-rend-desc><span class=secno>4.7 </span>Font features: the <a |
jdaggett@1662 | 2781 | href="#descdef-font-variant">font-variant</a> and <a |
jdaggett@1662 | 2782 | href="#descdef-font-feature-settings">font-feature-settings</a> |
jdaggett@1662 | 2783 | descriptors</h3> |
jdaggett@1662 | 2784 | |
jdaggett@1662 | 2785 | <table class=descdef> |
jdaggett@1662 | 2786 | <tbody> |
jdaggett@1662 | 2787 | <tr> |
jdaggett@1662 | 2788 | <td>Name: |
jdaggett@1662 | 2789 | |
jdaggett@7060 | 2790 | <td><dfn id=descdef-font-variant title="font-variant |
jdaggett@7060 | 2791 | (descriptor)">font-variant</dfn> |
jdaggett@1662 | 2792 | |
jdaggett@1662 | 2793 | <tr> |
jdaggett@1662 | 2794 | <td>Value: |
jdaggett@1662 | 2795 | |
jdaggett@8225 | 2796 | <td>normal | none | [ <a |
jdaggett@8225 | 2797 | href="#common-lig-values"><var><common-lig-values></var></a> || |
jdaggett@8225 | 2798 | <a |
jdaggett@8225 | 2799 | href="#discretionary-lig-values"><var><discretionary-lig-values></var></a> |
jdaggett@8225 | 2800 | || <a |
jdaggett@8225 | 2801 | href="#historical-lig-values"><var><historical-lig-values></var></a> |
jdaggett@8225 | 2802 | || <a |
jdaggett@8225 | 2803 | href="#contextual-alt-values"><var><contextual-alt-values></var></a> |
jdaggett@8225 | 2804 | || <a href="#stylistic"><var |
jdaggett@8225 | 2805 | title=stylistic>stylistic(<feature-value-name>)</var></a> || <a |
jdaggett@8225 | 2806 | href="#historical-forms"><var>historical-forms</var></a> || <a |
jdaggett@8225 | 2807 | href="#styleset"><var |
jdaggett@8225 | 2808 | title=styleset>styleset(<feature-value-name> #)</var></a> || <a |
jdaggett@8225 | 2809 | href="#character-variant"><var |
jdaggett@8225 | 2810 | title=character-variant>character-variant(<feature-value-name> |
jdaggett@8225 | 2811 | #)</var></a> || <a href="#swash"><var |
jdaggett@8225 | 2812 | title=swash>swash(<feature-value-name>)</var></a> || <a |
jdaggett@8225 | 2813 | href="#ornaments"><var |
jdaggett@8225 | 2814 | title=ornaments>ornaments(<feature-value-name>)</var></a> || <a |
jdaggett@8225 | 2815 | href="#annotation"><var |
jdaggett@8225 | 2816 | title=annotation>annotation(<feature-value-name>)</var></a> || [ |
jdaggett@8225 | 2817 | <a href="#small-caps"><i>small-caps</i></a> | <a |
jdaggett@8225 | 2818 | href="#all-small-caps"><i>all-small-caps</i></a> | <a |
jdaggett@8225 | 2819 | href="#petite-caps"><i>petite-caps</i></a> | <a |
jdaggett@8225 | 2820 | href="#all-petite-caps"><i>all-petite-caps</i></a> | <a |
jdaggett@8225 | 2821 | href="#unicase"><i>unicase</i></a> | <a |
jdaggett@8225 | 2822 | href="#titling-caps"><i>titling-caps</i></a> ] || <a |
jdaggett@8225 | 2823 | href="#numeric-figure-values"><var><numeric-figure-values></var></a> |
jdaggett@8225 | 2824 | || <a |
jdaggett@8225 | 2825 | href="#numeric-spacing-values"><var><numeric-spacing-values></var></a> |
jdaggett@8225 | 2826 | || <a |
jdaggett@8225 | 2827 | href="#numeric-fraction-values"><var><numeric-fraction-values></var></a> |
jdaggett@8225 | 2828 | || <a href="#ordinal"><i>ordinal</i></a> || <a |
jdaggett@8225 | 2829 | href="#slashed-zero"><i>slashed-zero</i></a> || <a |
jdaggett@8225 | 2830 | href="#east-asian-variant-values"><var><east-asian-variant-values></var></a> |
jdaggett@8225 | 2831 | || <a |
jdaggett@8225 | 2832 | href="#east-asian-width-values"><var><east-asian-width-values></var></a> |
jdaggett@8225 | 2833 | || <a href="#ruby"><i>ruby</i></a> ] |
jdaggett@1662 | 2834 | |
jdaggett@1662 | 2835 | <tr> |
jdaggett@1662 | 2836 | <td><em>Initial:</em> |
jdaggett@1662 | 2837 | |
jdaggett@1662 | 2838 | <td>normal |
jdaggett@1662 | 2839 | </table> |
jdaggett@1662 | 2840 | |
jdaggett@1662 | 2841 | <table class=descdef> |
jdaggett@1662 | 2842 | <tbody> |
jdaggett@1662 | 2843 | <tr> |
jdaggett@1662 | 2844 | <td>Name: |
jdaggett@1662 | 2845 | |
jdaggett@7060 | 2846 | <td><dfn id=descdef-font-feature-settings title="font-feature-settings |
jdaggett@7060 | 2847 | (descriptor)">font-feature-settings</dfn> |
jdaggett@1662 | 2848 | |
jdaggett@1662 | 2849 | <tr> |
jdaggett@1662 | 2850 | <td>Value: |
jdaggett@1662 | 2851 | |
jdaggett@8225 | 2852 | <td>normal | <a |
jdaggett@8225 | 2853 | href="#feature-tag-value"><var><feature-tag-value></var></a> # |
jdaggett@1662 | 2854 | |
jdaggett@1662 | 2855 | <tr> |
jdaggett@1662 | 2856 | <td><em>Initial:</em> |
jdaggett@1662 | 2857 | |
jdaggett@1662 | 2858 | <td>normal |
jdaggett@1662 | 2859 | </table> |
jdaggett@1662 | 2860 | |
jdaggett@8213 | 2861 | <p>These descriptors define initial settings that apply when the font |
jdaggett@8197 | 2862 | defined by an <code>@font-face</code> rule is rendered. They do not affect |
jdaggett@8197 | 2863 | font selection. Values are identical to those defined for the |
jdaggett@8197 | 2864 | corresponding ‘<a href="#propdef-font-variant"><code |
jdaggett@4624 | 2865 | class=property>font-variant</code></a>’ and ‘<a |
jdaggett@4624 | 2866 | href="#propdef-font-feature-settings"><code |
jdaggett@4624 | 2867 | class=property>font-feature-settings</code></a>’ properties defined |
jdaggett@4624 | 2868 | below except that the value ‘<code class=property>inherit</code>’ is |
jdaggett@4624 | 2869 | omitted. When multiple font feature descriptors or properties are used, |
jdaggett@8031 | 2870 | the cumulative effect on text rendering is detailed in the section <a |
jdaggett@8031 | 2871 | href="#font-feature-resolution">Font Feature Resolution</a> below. In |
jdaggett@8031 | 2872 | cases where specific values define synthesized fallback for certain ‘<a |
jdaggett@8031 | 2873 | href="#propdef-font-variant"><code |
jdaggett@8031 | 2874 | class=property>font-variant</code></a>’ subproperties, the same |
jdaggett@8031 | 2875 | synthesized fallback applies when used within those values are used with |
jdaggett@8031 | 2876 | the <a href="#descdef-font-variant">‘<code |
jdaggett@8031 | 2877 | class=property>font-variant</code>’</a> descriptor. |
jdaggett@1662 | 2878 | |
jdaggett@8225 | 2879 | <h3 id=font-face-loading><span class=secno>4.8 </span>Font loading |
jdaggett@2563 | 2880 | guidelines</h3> |
jdaggett@2563 | 2881 | |
jdaggett@7096 | 2882 | <p>The <code>@font-face</code> rule is designed to allow lazy loading of |
jdaggett@8272 | 2883 | font resources that are only downloaded when used within a document. A |
jdaggett@7096 | 2884 | stylesheet can include <code>@font-face</code> rules for a library of |
jdaggett@7096 | 2885 | fonts of which only a select set are used; user agents must only download |
jdaggett@7096 | 2886 | those fonts that are referred to within the style rules applicable to a |
jdaggett@7096 | 2887 | given page. User agents that download all fonts defined in |
jdaggett@7096 | 2888 | <code>@font-face</code> rules without considering whether those fonts are |
jdaggett@7096 | 2889 | in fact used within a page are considered non-conformant. In cases where a |
jdaggett@7096 | 2890 | font might be downloaded in character fallback cases, user agents may |
jdaggett@7096 | 2891 | download a font if it's listed in a font list but is not actually used for |
jdaggett@7096 | 2892 | a given text run. |
jdaggett@2563 | 2893 | |
jdaggett@2563 | 2894 | <pre> |
jdaggett@2563 | 2895 | @font-face { |
jdaggett@2563 | 2896 | font-family: GeometricModern; |
jdaggett@2563 | 2897 | src: url(font.ttf); |
jdaggett@2563 | 2898 | } |
jdaggett@2563 | 2899 | |
jdaggett@2563 | 2900 | p { |
jdaggett@2563 | 2901 | /* font will be downloaded for pages with p elements */ |
jdaggett@2563 | 2902 | font-family: GeometricModern, sans-serif; |
jdaggett@2563 | 2903 | } |
jdaggett@2563 | 2904 | |
jdaggett@2563 | 2905 | h2 { |
jdaggett@2563 | 2906 | /* font may be downloaded for pages with h2 elements, even if Futura is available locally */ |
jdaggett@2563 | 2907 | font-family: Futura, GeometricModern, sans-serif; |
jdaggett@2563 | 2908 | } |
jdaggett@2563 | 2909 | </pre> |
jdaggett@2563 | 2910 | |
jdaggett@2563 | 2911 | <p>In cases where textual content is loaded before downloadable fonts are |
jdaggett@2563 | 2912 | available, user agents may render text as it would be rendered if |
jdaggett@2563 | 2913 | downloadable font resources are not available or they may render text |
jdaggett@2563 | 2914 | transparently with fallback fonts to avoid a flash of text using a |
jdaggett@2563 | 2915 | fallback font. In cases where the font download fails user agents must |
jdaggett@2563 | 2916 | display text, simply leaving transparent text is considered non-conformant |
jdaggett@2563 | 2917 | behavior. Authors are advised to use fallback fonts in their font lists |
jdaggett@2563 | 2918 | that closely match the vertical metrics of the downloadable fonts to avoid |
jdaggett@2563 | 2919 | large page reflows where possible. |
jdaggett@2563 | 2920 | |
jdaggett@8225 | 2921 | <h3 id=same-origin-restriction><span class=secno>4.9 </span>Same-origin |
jdaggett@2737 | 2922 | restriction for fonts</h3> |
jdaggett@2737 | 2923 | |
jdaggett@8225 | 2924 | <h4 id=default-same-origin-restriction><span class=secno>4.9.1 |
jdaggett@2740 | 2925 | </span>Default same-origin restriction</h4> |
jdaggett@7253 | 2926 | <!-- TPAC 2011 Resolution to require same-origin restriction for loading fonts: |
jdaggett@7253 | 2927 | http://lists.w3.org/Archives/Public/www-style/2011Nov/0711.html |
jdaggett@7253 | 2928 | http://www.w3.org/2011/10/31-webapps-minutes.html#item02 |
jdaggett@7253 | 2929 | --> |
jdaggett@2740 | 2930 | |
jdaggett@2737 | 2931 | <p>User agents must implement a same-origin restriction when loading fonts |
jdaggett@7096 | 2932 | via the <code>@font-face</code> mechanism. This restriction limits the |
jdaggett@7096 | 2933 | loading of fonts for a given document to fonts loaded from the same |
jdaggett@7096 | 2934 | origin. Fonts can only be loaded via the same host, port, and method |
jdaggett@7096 | 2935 | combination as the containing document, using the <a |
jdaggett@7179 | 2936 | href="http://www.w3.org/TR/html5/browsers.html#origin">origin matching |
jdaggett@2737 | 2937 | algorithm</a> described in the <a href="#HTML5" |
jdaggett@2737 | 2938 | rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> specification. The origin of |
jdaggett@7096 | 2939 | the stylesheet containing <code>@font-face</code> rules is not used when |
jdaggett@7096 | 2940 | deciding whether a font is same origin or not, only the origin of the |
jdaggett@7096 | 2941 | containing document is used. The restriction applies to all font types. |
jdaggett@2737 | 2942 | |
jdaggett@2737 | 2943 | <p>Given a document located at http://example.com/page.html, fonts defined |
jdaggett@4624 | 2944 | with ‘<a href="#descdef-src"><code class=property>src</code></a>’ |
jdaggett@2737 | 2945 | definitions considered cross origin must not be loaded: |
jdaggett@2737 | 2946 | |
jdaggett@2737 | 2947 | <pre> |
jdaggett@2737 | 2948 | /* same origin (i.e. domain, protocol, port match document) */ |
jdaggett@8277 | 2949 | src: url(fonts/simple.ttf); |
jdaggett@8277 | 2950 | src: url(//fonts/simple.ttf); |
jdaggett@2737 | 2951 | |
jdaggett@2737 | 2952 | /* cross origin, different protocol */ |
jdaggett@8277 | 2953 | src: url(https://example.com/fonts/simple.ttf); |
jdaggett@2737 | 2954 | |
jdaggett@2737 | 2955 | /* cross origin, different domain */ |
jdaggett@8277 | 2956 | src: url(http://another.example.com/fonts/simple.ttf); |
jdaggett@2737 | 2957 | </pre> |
jdaggett@2737 | 2958 | |
jdaggett@8225 | 2959 | <h4 id=allowing-cross-origin-font-loading><span class=secno>4.9.2 |
jdaggett@2740 | 2960 | </span>Allowing cross-origin font loading</h4> |
jdaggett@2740 | 2961 | |
jdaggett@2737 | 2962 | <p>User agents must also implement the ability to relax this restriction |
jdaggett@2737 | 2963 | using cross-site origin controls <a href="#CORS" |
jdaggett@7253 | 2964 | rel=biblioentry>[CORS]<!--{{!CORS}}--></a> for fonts loaded via HTTP. |
jdaggett@7253 | 2965 | Sites can explicitly allow cross-site downloading of font data using the |
jdaggett@7253 | 2966 | <code>Access-Control-Allow-Origin</code> HTTP header. For other protocols, |
jdaggett@7253 | 2967 | no explicit relaxation mechanism is defined or required. |
jdaggett@7253 | 2968 | |
jdaggett@7253 | 2969 | <p>For font loads over HTTP, cross-origin requests must be made with the |
jdaggett@7253 | 2970 | following parameter settings which are used in conjunction with the <a |
jdaggett@7254 | 2971 | href="http://www.w3.org/TR/cors/#cross-origin-request-0"> <em>cross-origin |
jdaggett@7254 | 2972 | request algorithm</em></a> <a href="#CORS" |
jdaggett@7254 | 2973 | rel=biblioentry>[CORS]<!--{{!CORS}}--></a>: |
jdaggett@7253 | 2974 | |
jdaggett@7253 | 2975 | <ul> |
jdaggett@7253 | 2976 | <li><em>request URL</em> — the URL of the font resource in the <a |
jdaggett@7253 | 2977 | href="#descdef-src"><code>src</code></a> descriptor |
jdaggett@7253 | 2978 | |
jdaggett@7253 | 2979 | <li><em>request method</em> — GET |
jdaggett@7253 | 2980 | |
jdaggett@7253 | 2981 | <li><em>author request headers</em> — none |
jdaggett@7253 | 2982 | |
jdaggett@7253 | 2983 | <li><em>request entity body</em> — empty |
jdaggett@7253 | 2984 | |
jdaggett@7253 | 2985 | <li><em>source origin</em> — the origin of the page which linked to the |
jdaggett@7253 | 2986 | stylesheet |
jdaggett@7253 | 2987 | |
jdaggett@7253 | 2988 | <li><em>manual redirect flag</em> — false |
jdaggett@7253 | 2989 | |
jdaggett@7253 | 2990 | <li><em>omit credentials flag</em> — true |
jdaggett@7253 | 2991 | |
jdaggett@7253 | 2992 | <li><em>force preflight flag</em> — false |
jdaggett@7253 | 2993 | </ul> |
jdaggett@2737 | 2994 | |
jdaggett@6699 | 2995 | <h2 id=font-matching-algorithm><span class=secno>5 </span>Font Matching |
jdaggett@6699 | 2996 | Algorithm</h2> |
jdaggett@484 | 2997 | |
jdaggett@2457 | 2998 | <p>The algorithm below describes how fonts are associated with individual |
jdaggett@2457 | 2999 | runs of text. For each character in the run a font family is chosen and a |
jdaggett@2457 | 3000 | particular font face is selected containing a glyph for that character. |
jdaggett@2457 | 3001 | |
jdaggett@7309 | 3002 | <h3 id=font-family-casing><span class=secno>5.1 </span>Case sensitivity of |
jdaggett@7309 | 3003 | font family names</h3> |
jdaggett@7309 | 3004 | |
jdaggett@7309 | 3005 | <p>As part of the font matching algorithm outlined below, user agents must |
jdaggett@7309 | 3006 | match font family names used in style rules with actual font family names |
jdaggett@7309 | 3007 | contained in fonts available in a given environment or defined via |
jdaggett@7309 | 3008 | <code>@font-face</code> rules. User agents must match these names case |
jdaggett@7309 | 3009 | insensitively, using the "Default Caseless Matching" algorithm outlined in |
jdaggett@7309 | 3010 | the Unicode specification <a href="#UNICODE6" |
jdaggett@7309 | 3011 | rel=biblioentry>[UNICODE6]<!--{{!UNICODE6}}--></a>. This algorithm is |
jdaggett@7309 | 3012 | detailed in section 3.13 entitled "Default Case Algorithms". Specifically, |
jdaggett@7309 | 3013 | the algorithm must be applied without normalizing the strings involved and |
jdaggett@7309 | 3014 | without applying any language-specific tailorings. The case folding method |
jdaggett@7309 | 3015 | specified by this algorithm uses the case mappings with status field |
jdaggett@7309 | 3016 | ‘<code class=property>C</code>’ or ‘<code class=property>F</code>’ |
jdaggett@7309 | 3017 | in the CaseFolding.txt file of the Unicode Character Database. |
jdaggett@7355 | 3018 | |
jdaggett@7355 | 3019 | <p class=note> Implementors should take care to verify that a given |
jdaggett@7355 | 3020 | caseless string comparison implementation uses this precise algorithm and |
jdaggett@7355 | 3021 | not assume that a given platform string matching routine follows it, as |
jdaggett@7355 | 3022 | many of these have locale-specific behavior or use some level of string |
jdaggett@7355 | 3023 | normalization. |
jdaggett@7355 | 3024 | |
jdaggett@7355 | 3025 | <p class=note> For authors this means that font family names are matched |
jdaggett@8272 | 3026 | case insensitively, whether those names exist in a platform font or in the |
jdaggett@8272 | 3027 | <code>@font-face</code> rules contained in a stylesheet. Authors should |
jdaggett@8272 | 3028 | take care to ensure that names use a character sequence consistent with |
jdaggett@8272 | 3029 | the actual font family name, particularly when using combining characters |
jdaggett@8272 | 3030 | such as diacritical marks. For example, a family name that contains an |
jdaggett@8272 | 3031 | uppercase A (U+0041) followed by a combining ring (U+030A) will |
jdaggett@8272 | 3032 | <strong>not</strong> match a name that looks identical but which uses the |
jdaggett@8272 | 3033 | precomposed lowercase a-ring character (U+00E5) instead of the combining |
jdaggett@8272 | 3034 | sequence. |
jdaggett@7309 | 3035 | |
jdaggett@7309 | 3036 | <h3 id=font-style-matching><span class=secno>5.2 </span>Matching font |
jdaggett@2457 | 3037 | styles</h3> |
jdaggett@2457 | 3038 | |
jdaggett@6701 | 3039 | <p>The procedure for choosing fonts consists of iterating over the font |
jdaggett@531 | 3040 | families determined by the font-family property, selecting a font face |
jdaggett@531 | 3041 | with the appropriate style based on other font properties and then |
jdaggett@7311 | 3042 | determining whether a glyph exists for a given character. This is done |
jdaggett@7311 | 3043 | using the <dfn id=character-map>character map</dfn> of the font, data |
jdaggett@7311 | 3044 | which maps characters to the default glyph for that character. Codepoint |
jdaggett@6701 | 3045 | sequences consisting of a base character followed by a sequence of |
jdaggett@6701 | 3046 | combining characters are treated slightly differently, see the section on |
jdaggett@6701 | 3047 | <a href="#cluster-matching">cluster matching</a> below. |
jdaggett@531 | 3048 | |
jdaggett@7232 | 3049 | <p>For this procedure, the <dfn id=default-face>default face</dfn> for a |
jdaggett@7232 | 3050 | given font family is defined to be the face that would be selected if all |
jdaggett@7232 | 3051 | font style properties were set to their initial value. |
jdaggett@7232 | 3052 | |
jdaggett@531 | 3053 | <ol id=fontmatchingalg> |
jdaggett@2457 | 3054 | <li>Using the computed font property values for a given element, the user |
jdaggett@2457 | 3055 | agent starts with the first family name in the fontlist specified by the |
jdaggett@4624 | 3056 | <span class=property>‘<a href="#descdef-font-family"><code |
jdaggett@4624 | 3057 | class=property>font-family</code></a>’</span> property. |
jdaggett@2457 | 3058 | |
jdaggett@2457 | 3059 | <li>If the family name is unquoted and is a generic family name, the user |
jdaggett@2457 | 3060 | agent looks up the appropriate font family name to be used. User agents |
jdaggett@2457 | 3061 | may choose the generic font family to use based on the language of the |
jdaggett@2457 | 3062 | containing element or the Unicode range of the character. |
jdaggett@2457 | 3063 | |
jdaggett@2457 | 3064 | <li>For other family names, the user agent attempts to find the family |
jdaggett@7096 | 3065 | name among fonts defined via <code>@font-face</code> rules and then among |
jdaggett@7309 | 3066 | available system fonts, matching names with a case-insensitive comparison |
jdaggett@7309 | 3067 | as outlined <a href="#font-family-casing">in the section above</a>. On |
jdaggett@7309 | 3068 | systems containing fonts with multiple localized font family names, user |
jdaggett@7309 | 3069 | agents must match any of these names independent of the underlying system |
jdaggett@7674 | 3070 | locale or platform API used. If the font resources defined for a given |
jdaggett@7674 | 3071 | face in an @font-face rule are either not available or contain invalid |
jdaggett@7674 | 3072 | font data, then the face should be treated as not present in the family. |
jdaggett@7674 | 3073 | If no faces are present for a family defined via @font-face rules, the |
jdaggett@7674 | 3074 | family should be treated as missing; matching a platform font with the |
jdaggett@7674 | 3075 | same name must not occur in this case. |
jdaggett@2457 | 3076 | |
jdaggett@2457 | 3077 | <li>If a font family match occurs, the user agent assembles the set of |
jdaggett@6701 | 3078 | font faces in that family and then narrows the set to a single face using |
jdaggett@6701 | 3079 | other font properties in the order given below: |
jdaggett@2457 | 3080 | <ol id=fontstylematchingalg> |
jdaggett@7060 | 3081 | <li><span class=property>‘<a href="#propdef-font-stretch"><code |
jdaggett@4624 | 3082 | class=property>font-stretch</code></a>’</span> is tried first. If the |
jdaggett@4624 | 3083 | matching set contains faces with width values matching the ‘<a |
jdaggett@7060 | 3084 | href="#propdef-font-stretch"><code |
jdaggett@4624 | 3085 | class=property>font-stretch</code></a>’ value, faces with other width |
jdaggett@4624 | 3086 | values are removed from the matching set. If there is no face that |
jdaggett@4624 | 3087 | exactly matches the width value the nearest width is used instead. If |
jdaggett@7060 | 3088 | the value of ‘<a href="#propdef-font-stretch"><code |
jdaggett@5809 | 3089 | class=property>font-stretch</code></a>’ is ‘<a |
jdaggett@8277 | 3090 | href="#normal3"><code class=property>normal</code></a>’ or one of the |
jdaggett@5809 | 3091 | condensed values, narrower width values are checked first, then wider |
jdaggett@7060 | 3092 | values. If the value of ‘<a href="#propdef-font-stretch"><code |
jdaggett@4624 | 3093 | class=property>font-stretch</code></a>’ is one of the expanded |
jdaggett@4624 | 3094 | values, wider values are checked first, followed by narrower values. |
jdaggett@4624 | 3095 | Once the closest matching width has been determined by this process, |
jdaggett@4624 | 3096 | faces with other widths are removed from the matching set. |
jdaggett@4624 | 3097 | |
jdaggett@7060 | 3098 | <li><span class=property>‘<a href="#propdef-font-style"><code |
jdaggett@4624 | 3099 | class=property>font-style</code></a>’</span> is tried next. If the |
jdaggett@7060 | 3100 | value of ‘<a href="#propdef-font-style"><code |
jdaggett@4624 | 3101 | class=property>font-style</code></a>’ is ‘<code |
jdaggett@2457 | 3102 | class=property>italic</code>’, italic faces are checked first, then |
jdaggett@2457 | 3103 | oblique, then normal faces. If the value is ‘<code |
jdaggett@2457 | 3104 | class=property>oblique</code>’, oblique faces are checked first, then |
jdaggett@5809 | 3105 | italic faces and then normal faces. If the value is ‘<a |
jdaggett@8277 | 3106 | href="#normal3"><code class=property>normal</code></a>’, normal faces |
jdaggett@5809 | 3107 | are checked first, then oblique faces, then italic faces. Faces with |
jdaggett@5809 | 3108 | other style values are excluded from the matching set. User agents are |
jdaggett@5809 | 3109 | permitted to distinguish between italic and oblique faces within |
jdaggett@5809 | 3110 | platform font families but this is not required, they may treat all |
jdaggett@5809 | 3111 | italic or oblique faces as italic faces. However, within font families |
jdaggett@7096 | 3112 | defined via <code>@font-face</code> rules, italic and oblique faces |
jdaggett@7096 | 3113 | must be distinguished using the value of the ‘<a |
jdaggett@7060 | 3114 | href="#propdef-font-style"><code |
jdaggett@4624 | 3115 | class=property>font-style</code></a>’ descriptor. |
jdaggett@4624 | 3116 | |
jdaggett@7060 | 3117 | <li><span class=property>‘<a href="#propdef-font-weight"><code |
jdaggett@4624 | 3118 | class=property>font-weight</code></a>’</span> is matched next, it |
jdaggett@4624 | 3119 | will always reduce the matching set to a single font face. If |
jdaggett@2457 | 3120 | bolder/lighter relative weights are used, the effective weight is |
jdaggett@2457 | 3121 | calculated based on the inherited weight value, as described in the |
jdaggett@7060 | 3122 | definition of the ‘<a href="#propdef-font-weight"><code |
jdaggett@4624 | 3123 | class=property>font-weight</code></a>’ property. Given the desired |
jdaggett@4624 | 3124 | weight and the weights of faces in the matching set after the steps |
jdaggett@4624 | 3125 | above, if the desired weight is available that face matches. Otherwise, |
jdaggett@4624 | 3126 | a weight is chosen using the rules below: |
jdaggett@531 | 3127 | <ul> |
jdaggett@531 | 3128 | <li>If the desired weight is less than 400, weights below the desired |
jdaggett@531 | 3129 | weight are checked in descending order followed by weights above the |
jdaggett@531 | 3130 | desired weight in ascending order until a match is found. |
jdaggett@531 | 3131 | |
jdaggett@531 | 3132 | <li>If the desired weight is greater than 500, weights above the |
jdaggett@531 | 3133 | desired weight are checked in ascending order followed by weights |
jdaggett@531 | 3134 | below the desired weight in descending order until a match is found. |
jdaggett@531 | 3135 | |
jdaggett@531 | 3136 | <li>If the desired weight is 400, 500 is checked first and then the |
jdaggett@531 | 3137 | rule for desired weights less than 400 is used. |
jdaggett@531 | 3138 | |
jdaggett@531 | 3139 | <li>If the desired weight is 500, 400 is checked first and then the |
jdaggett@532 | 3140 | rule for desired weights less than 400 is used. |
jdaggett@531 | 3141 | </ul> |
jdaggett@531 | 3142 | |
jdaggett@4624 | 3143 | <li><span class=property>‘<a href="#propdef-font-size"><code |
jdaggett@4624 | 3144 | class=property>font-size</code></a>’</span> must be matched within a |
jdaggett@4624 | 3145 | UA-dependent margin of tolerance. (Typically, sizes for scalable fonts |
jdaggett@4624 | 3146 | are rounded to the nearest whole pixel, while the tolerance for |
jdaggett@4624 | 3147 | bitmapped fonts could be as large as 20%.) Further computations, e.g., |
jdaggett@4624 | 3148 | by ‘<code class=property>em</code>’ values in other properties, are |
jdaggett@4624 | 3149 | based on the <span class=property>‘<a href="#propdef-font-size"><code |
jdaggett@4624 | 3150 | class=property>font-size</code></a>’</span> value that is used, not |
jdaggett@4624 | 3151 | the one that is specified. |
jdaggett@531 | 3152 | </ol> |
jdaggett@531 | 3153 | |
jdaggett@7232 | 3154 | <li> |
jdaggett@7232 | 3155 | <p>If no matching face exists or the matched face does not contain a |
jdaggett@7232 | 3156 | glyph for the character to be rendered, the next family name is selected |
jdaggett@7232 | 3157 | and the previous two steps repeated. Glyphs from other faces in the |
jdaggett@7232 | 3158 | family are not considered. The only exception is that user agents may |
jdaggett@7232 | 3159 | optionally substitute a synthetic version of the <a |
jdaggett@7232 | 3160 | href="#default-face"><em>default face</em></a> if that face supports a |
jdaggett@7232 | 3161 | given glyph (e.g. a synthetic italic version of the regular face may be |
jdaggett@7232 | 3162 | used if the italic face doesn't support glyphs for Arabic).</p> |
jdaggett@7242 | 3163 | <!-- resolution on the above: http://lists.w3.org/Archives/Public/www-style/2012Nov/0292.html --> |
jdaggett@7242 | 3164 | |
jdaggett@7232 | 3165 | <p>If the matched font is defined via an <code>@font-face</code> rule and |
jdaggett@7232 | 3166 | needs to be downloaded, the font resource is downloaded. While the |
jdaggett@7232 | 3167 | download occurs, the user agent can either wait until the font is |
jdaggett@7232 | 3168 | downloaded or render once with substituted font metrics and render again |
jdaggett@7232 | 3169 | once the font is downloaded.</p> |
jdaggett@531 | 3170 | |
jdaggett@531 | 3171 | <li>If there are no more font families to be evaluated and no matching |
jdaggett@2457 | 3172 | face has been found, then the user agent performs a <em>system font |
jdaggett@2457 | 3173 | fallback</em> procedure to find the best match for the character to be |
jdaggett@2457 | 3174 | rendered. The result of this procedure may vary across user agents. |
jdaggett@531 | 3175 | |
jdaggett@531 | 3176 | <li>If a particular character cannot be displayed using any font, the user |
jdaggett@531 | 3177 | agent should indicate by some means that a character is not being |
jdaggett@2457 | 3178 | displayed, displaying either a symbolic representation of the missing |
jdaggett@2457 | 3179 | glyph (e.g. using a <a |
jdaggett@2457 | 3180 | href="http://en.wikipedia.org/wiki/Last_resort_font">Last Resort |
jdaggett@2457 | 3181 | Font</a>) or using the missing character glyph from a default font. |
jdaggett@512 | 3182 | </ol> |
jdaggett@2457 | 3183 | |
jdaggett@7309 | 3184 | <h3 id=cluster-matching><span class=secno>5.3 </span>Cluster matching</h3> |
jdaggett@6701 | 3185 | |
jdaggett@6701 | 3186 | <p>When text contains characters such as combining diacritics, ideally the |
jdaggett@6701 | 3187 | base character should be rendered using the same font as the diacritic, |
jdaggett@6701 | 3188 | this assures proper placement of the diacritic. For this reason, the font |
jdaggett@6701 | 3189 | matching algorithm for clusters is more specialized than the general case |
jdaggett@6701 | 3190 | of matching a single character by itself. For sequences containing |
jdaggett@6701 | 3191 | variation selectors, which indicate the precise glyph to be used for a |
jdaggett@6701 | 3192 | given character, user agents always attempt system font fallback to find |
jdaggett@6701 | 3193 | the appropriate glyph before using the default glyph of the base |
jdaggett@6701 | 3194 | character. |
jdaggett@6701 | 3195 | |
jdaggett@7020 | 3196 | <p>A font is considered to <em>support</em> a given character if (1) the |
jdaggett@7311 | 3197 | character is contained in the font's <a |
jdaggett@7311 | 3198 | href="#character-map"><em>character map</em></a> and (2) if required by |
jdaggett@7020 | 3199 | the containing script, shaping information is available for that |
jdaggett@7311 | 3200 | character. Some legacy fonts may include a given character in the <a |
jdaggett@7311 | 3201 | href="#character-map"><em>character map</em></a> but lack the shaping |
jdaggett@7311 | 3202 | information (e.g. <a |
jdaggett@7020 | 3203 | href="http://www.microsoft.com/typography/otspec/ttochap1.htm">OpenType |
jdaggett@7020 | 3204 | layout tables</a> or <a |
jdaggett@7103 | 3205 | href="http://scripts.sil.org/cms/scripts/page.php?site_id=projects&item_id=graphite_techAbout">Graphite |
jdaggett@7020 | 3206 | tables</a>) necessary for correctly rendering text runs containing that |
jdaggett@7020 | 3207 | character. |
jdaggett@7020 | 3208 | |
jdaggett@6701 | 3209 | <p>A sequence of codepoints containing combining diacritics or other |
jdaggett@6701 | 3210 | modifiers is termed a grapheme cluster (see <a href="#CSS3TEXT" |
jdaggett@6701 | 3211 | rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a> for a more complete |
jdaggett@6701 | 3212 | description). For a given cluster containing a base character, <em>b</em> |
jdaggett@6701 | 3213 | and a sequence of combining characters <em>c1, c2…</em>, the entire |
jdaggett@6701 | 3214 | cluster is matched using these steps: |
jdaggett@6701 | 3215 | |
jdaggett@6701 | 3216 | <ol> |
jdaggett@6701 | 3217 | <li>For each family in the font list, a face is chosen using the style |
jdaggett@6701 | 3218 | selection rules defined in the previous section. |
jdaggett@6701 | 3219 | <ol> |
jdaggett@7020 | 3220 | <li>If all characters in the sequence <em>b + c1 + c2 …</em> are |
jdaggett@7021 | 3221 | completely supported by the font, select this font for the sequence. |
jdaggett@6701 | 3222 | |
jdaggett@6701 | 3223 | <li>If a sequence of multiple codepoints is canonically equivalent to a |
jdaggett@7021 | 3224 | single character and the font supports that character, select this font |
jdaggett@7021 | 3225 | for the sequence. |
jdaggett@6701 | 3226 | </ol> |
jdaggett@6701 | 3227 | |
jdaggett@6701 | 3228 | <li>If no font was found in the font list in step 1: |
jdaggett@6701 | 3229 | <ol> |
jdaggett@6701 | 3230 | <li>If <em>c1</em> is a variation selector, system fallback must be used |
jdaggett@6701 | 3231 | to find a font that supports the full sequence of <em>b + c1</em>. If |
jdaggett@6701 | 3232 | no font on the system supports the full sequence, match the single |
jdaggett@6701 | 3233 | character <em>b</em> using the normal procedure for matching single |
jdaggett@6701 | 3234 | characters and ignore the variation selector. Note: a sequence with |
jdaggett@6701 | 3235 | more than one variation selector is treated as an encoding error and |
jdaggett@6701 | 3236 | the trailing selectors are ignored. |
jdaggett@6701 | 3237 | |
jdaggett@6701 | 3238 | <li>Otherwise, the user agent may optionally use system font fallback to |
jdaggett@6701 | 3239 | match a font that supports the entire cluster. |
jdaggett@6701 | 3240 | </ol> |
jdaggett@6701 | 3241 | |
jdaggett@6701 | 3242 | <li>If no font is found in step 2, use the matching sequence from step 1 |
jdaggett@6701 | 3243 | to determine the longest sequence that is completely matched by a font in |
jdaggett@6701 | 3244 | the font list and attempt to match the remaining combining characters |
jdaggett@6701 | 3245 | separately using the rules for single characters. |
jdaggett@6701 | 3246 | </ol> |
jdaggett@6701 | 3247 | |
jdaggett@7309 | 3248 | <h3 id=char-handling-issues><span class=secno>5.4 </span>Character handling |
jdaggett@2457 | 3249 | issues</h3> |
jdaggett@2457 | 3250 | |
jdaggett@2461 | 3251 | <p>The procedure above is always performed on text runs containing Unicode |
jdaggett@2461 | 3252 | characters, documents using legacy encodings are assumed to have been |
jdaggett@7311 | 3253 | transcoded before matching fonts. For fonts containing <a |
jdaggett@7311 | 3254 | href="#character-map"><em title="character map">character maps</em></a> |
jdaggett@7311 | 3255 | for both legacy encodings and Unicode, the contents of the legacy encoding |
jdaggett@7311 | 3256 | <a href="#character-map"><em>character map</em></a> must have no effect on |
jdaggett@7311 | 3257 | the results of the font matching process. |
jdaggett@2461 | 3258 | |
jdaggett@2461 | 3259 | <p>The font matching process does not assume that text runs are in either |
jdaggett@2461 | 3260 | normalized or denormalized form (see <a href="#CHARMOD-NORM" |
jdaggett@3042 | 3261 | rel=biblioentry>[CHARMOD-NORM]<!--{{CHARMOD-NORM}}--></a> for more |
jdaggett@2461 | 3262 | details). Layout engines often convert base character plus combining |
jdaggett@6701 | 3263 | character sequences into precomposed characters if they exist. The font |
jdaggett@6701 | 3264 | matching algorithm outlined here supports both ways and fonts can |
jdaggett@6701 | 3265 | generally support either but variations can occur. Authors should always |
jdaggett@6701 | 3266 | tailor their choice of fonts to their content, including whether that |
jdaggett@6701 | 3267 | content contains normalized or denormalized character streams. |
jdaggett@2457 | 3268 | |
jdaggett@2457 | 3269 | <p>If a given character is a Private-Use Area Unicode codepoint and none of |
jdaggett@2457 | 3270 | the fonts in the fontlist contain a glyph for that codepoint, user agents |
jdaggett@2457 | 3271 | must display some form of missing glyph symbol for that character rather |
jdaggett@2457 | 3272 | than attempting system font fallback for that codepoint. When matching the |
jdaggett@2457 | 3273 | replacement character U+FFFD, user agents may skip the font matching |
jdaggett@2457 | 3274 | process and immediately display some form of missing glyph symbol, they |
jdaggett@2457 | 3275 | are not required to display the glyph from the font that would be selected |
jdaggett@2457 | 3276 | by the font matching process. |
jdaggett@2457 | 3277 | |
jdaggett@2457 | 3278 | <p>In general, the fonts for a given family will all have the same or |
jdaggett@7311 | 3279 | similar <a href="#character-map"><em title="character map">character |
jdaggett@7311 | 3280 | maps</em></a>. The process outlined here is designed to handle even font |
jdaggett@7311 | 3281 | families containing faces with widely variant <a href="#character-map"><em |
jdaggett@7311 | 3282 | title="character map">character maps</em></a>. However, authors are |
jdaggett@7311 | 3283 | cautioned that the use of such families can lead to unexpected results. |
jdaggett@2457 | 3284 | |
jdaggett@2457 | 3285 | <p>Optimizations of this process are allowed provided that an |
jdaggett@2457 | 3286 | implementation behaves as if the algorithm had been followed exactly. |
jdaggett@2457 | 3287 | Matching occurs in a well-defined order to insure that the results are as |
jdaggett@2457 | 3288 | consistent as possible across user agents, given an identical set of |
jdaggett@2509 | 3289 | available fonts and rendering technology. |
jdaggett@2509 | 3290 | |
jdaggett@7309 | 3291 | <h3 id=font-matching-changes><span class=secno>5.5 </span>Font matching |
jdaggett@2509 | 3292 | changes since CSS 2.1</h3> |
jdaggett@2509 | 3293 | |
jdaggett@2509 | 3294 | <p>The algorithm above is different from CSS 2.1 in a number of key places. |
jdaggett@2509 | 3295 | These changes were made to better reflect actual font matching behavior |
jdaggett@2509 | 3296 | across user agent implementations. |
jdaggett@2509 | 3297 | |
jdaggett@2509 | 3298 | <p>Differences compared to the font matching algorithm in CSS 2.1: |
jdaggett@2509 | 3299 | |
jdaggett@2509 | 3300 | <ul> |
jdaggett@2509 | 3301 | <li>The algorithm includes font-stretch matching. |
jdaggett@2509 | 3302 | |
jdaggett@2509 | 3303 | <li>All possible font-style matching scenarios are delineated. |
jdaggett@2509 | 3304 | |
jdaggett@2509 | 3305 | <li>Small-caps fonts are not matched as part of the font matching process, |
jdaggett@2509 | 3306 | they are now handled via font features. |
jdaggett@2509 | 3307 | |
jdaggett@2509 | 3308 | <li>Unicode variation selector matching is required. |
jdaggett@6701 | 3309 | |
jdaggett@6701 | 3310 | <li>Cluster sequences are matched as a unit. |
jdaggett@2509 | 3311 | </ul> |
jdaggett@531 | 3312 | |
jdaggett@7309 | 3313 | <h3 id=font-matching-examples><span class=secno>5.6 </span>Font matching |
jdaggett@6701 | 3314 | examples</h3> |
jdaggett@6701 | 3315 | |
jdaggett@531 | 3316 | <div class=example> |
jdaggett@531 | 3317 | <p>It's useful to note that the CSS selector syntax may be used to create |
jdaggett@531 | 3318 | language-sensitive typography. For example, some Chinese and Japanese |
jdaggett@1149 | 3319 | characters are unified to have the same Unicode code point, although the |
jdaggett@890 | 3320 | abstract glyphs are not the same in the two languages. |
jdaggett@531 | 3321 | |
jdaggett@531 | 3322 | <pre>*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif; } |
jdaggett@531 | 3323 | *:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif; } |
jdaggett@512 | 3324 | </pre> |
jdaggett@531 | 3325 | |
jdaggett@531 | 3326 | <p>This selects any element that has the given language - Japanese or |
jdaggett@890 | 3327 | Traditional Chinese - and uses the appropriate font. |
jdaggett@512 | 3328 | </div> |
jdaggett@1662 | 3329 | |
jdaggett@6699 | 3330 | <h2 id=font-rend-props><span class=secno>6 </span>Font Feature Properties</h2> |
jdaggett@1662 | 3331 | |
jdaggett@1856 | 3332 | <p>Modern font technologies support a variety of advanced typographic and |
jdaggett@1856 | 3333 | language-specific font features. Using these features, a single font can |
jdaggett@1856 | 3334 | provide glyphs for a wide range of ligatures, contextual and stylistic |
jdaggett@1856 | 3335 | alternates, tabular and old-style figures, small capitals, automatic |
jdaggett@1856 | 3336 | fractions, swashes, and alternates specific to a given language. To allow |
jdaggett@1856 | 3337 | authors control over these font capabilities, the font-variant property |
jdaggett@1856 | 3338 | has been expanded for CSS3, it now functions as a shorthand for a set of |
jdaggett@1856 | 3339 | properties that provide control over stylistic font features. |
jdaggett@1856 | 3340 | |
jdaggett@1856 | 3341 | <h3 id=glyph-selection-positioning><span class=secno>6.1 </span>Glyph |
jdaggett@1856 | 3342 | selection and positioning</h3> |
jdaggett@1856 | 3343 | |
jdaggett@1856 | 3344 | <p>Simple fonts used for displaying Latin text use a very basic processing |
jdaggett@7311 | 3345 | model, fonts contain a <a href="#character-map"><em>character map</em></a> |
jdaggett@7311 | 3346 | which maps a given character to a glyph for that character. Glyphs for |
jdaggett@7311 | 3347 | subsequent characters are simply placed next in line along a run of text. |
jdaggett@7311 | 3348 | Font formats such as OpenType and AAT (Apple Advanced Typography) use a |
jdaggett@7311 | 3349 | richer processing model, the glyph for a given character can be chosen and |
jdaggett@7311 | 3350 | positioned not just based on a single character, but also based on |
jdaggett@7311 | 3351 | surrounding characters along with the language, script, and features |
jdaggett@7311 | 3352 | enabled for the text. Font features may be required for specific scripts, |
jdaggett@7311 | 3353 | or recommended as enabled by default or they may be stylistic features |
jdaggett@7311 | 3354 | meant to be used under author control. |
jdaggett@1856 | 3355 | |
jdaggett@1856 | 3356 | <p>For a good visual overview of these features, see the <a |
jdaggett@1856 | 3357 | href="#OPENTYPE-FONT-GUIDE" |
jdaggett@1856 | 3358 | rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>. |
jdaggett@1856 | 3359 | For a detailed description of glyph processing for OpenType fonts, see <a |
jdaggett@1856 | 3360 | href="#WINDOWS-GLYPH-PROC" |
jdaggett@1856 | 3361 | rel=biblioentry>[WINDOWS-GLYPH-PROC]<!--{{WINDOWS-GLYPH-PROC}}--></a>. |
jdaggett@1856 | 3362 | |
jdaggett@6176 | 3363 | <p>Stylistic font features can be classified into two broad categories, |
jdaggett@6177 | 3364 | ones that affect the harmonization of glyph shapes with the surrounding |
jdaggett@6177 | 3365 | context, such as kerning and ligature features, and those such as the |
jdaggett@6177 | 3366 | small-caps, subscript/superscript and alternate features that affect shape |
jdaggett@6177 | 3367 | selection. |
jdaggett@6176 | 3368 | |
jdaggett@1856 | 3369 | <p>The subproperties of font-variant listed below are used to control these |
jdaggett@1856 | 3370 | stylistic font features; they do not control features that are required |
jdaggett@1856 | 3371 | for displaying certain scripts, such as the OpenType features used when |
jdaggett@1856 | 3372 | displaying Arabic or Indic language text. They affect glyph selection and |
jdaggett@1856 | 3373 | positioning, they do not affect font selection as described in the font |
jdaggett@1856 | 3374 | matching section (except in cases required for compatibility with CSS |
jdaggett@1856 | 3375 | 2.1). |
jdaggett@1856 | 3376 | |
jdaggett@1856 | 3377 | <p>To assure consistent behavior across user agents, the equivalent |
jdaggett@1662 | 3378 | OpenType property settings are listed for individual properties and must |
jdaggett@1856 | 3379 | be considered normative. When using other font formats these should be |
jdaggett@1856 | 3380 | used as a guideline to map CSS font feature property values to specific |
jdaggett@1856 | 3381 | font features. |
jdaggett@1856 | 3382 | |
jdaggett@1856 | 3383 | <h3 id=language-specific-support><span class=secno>6.2 |
jdaggett@1856 | 3384 | </span>Language-specific display</h3> |
jdaggett@1856 | 3385 | |
jdaggett@1856 | 3386 | <p>OpenType also supports language-specific glyph selection and |
jdaggett@1856 | 3387 | positioning, so that text can be displayed correctly in cases where the |
jdaggett@1856 | 3388 | language dictates a specific display behavior. Languages often share a |
jdaggett@1856 | 3389 | common script but the shape of certain letters may vary across those |
jdaggett@1856 | 3390 | languages, such as the variations in certain Cyrillic letters used in |
jdaggett@1856 | 3391 | Russian and Bulgarian text. In Latin text, it's common to render "fi" with |
jdaggett@1856 | 3392 | an explicit fi-ligature that lacks a dot on the "i". However, in languages |
jdaggett@1856 | 3393 | such as Turkish which uses both a dotted-i and a dotless-i, it's important |
jdaggett@1856 | 3394 | to not use this ligature or use a specialized version that contains a dot |
jdaggett@2515 | 3395 | over the "i". The example below shows language-specific variations based |
jdaggett@2515 | 3396 | on stylistic traditions found in Spanish, Italian and French orthography: |
jdaggett@2515 | 3397 | |
jdaggett@2515 | 3398 | <div class=featex><img alt="language specific forms, spanish" |
jdaggett@2515 | 3399 | src=locl-1.png></div> |
jdaggett@2515 | 3400 | |
jdaggett@2515 | 3401 | <div class=featex><img alt="language specific forms, italian" |
jdaggett@2515 | 3402 | src=locl-2.png></div> |
jdaggett@2515 | 3403 | |
jdaggett@2515 | 3404 | <div class=featex><img alt="language specific forms, french" |
jdaggett@2515 | 3405 | src=locl-3.png></div> |
jdaggett@1856 | 3406 | |
jdaggett@7355 | 3407 | <p>If the content language of the element is known, according to the rules |
jdaggett@7355 | 3408 | of the <a |
jdaggett@7355 | 3409 | href="http://www.w3.org/TR/CSS21/conform.html#doclanguage">document |
jdaggett@7355 | 3410 | language</a>, user agents are required to infer the OpenType language |
jdaggett@7355 | 3411 | system from the content language and use that when selecting and |
jdaggett@7355 | 3412 | positioning glyphs using an OpenType font. |
jdaggett@7355 | 3413 | |
jdaggett@7355 | 3414 | <p>For OpenType fonts, in some cases it may be necessary to explicitly |
jdaggett@7355 | 3415 | declare the OpenType language to be used, for example when displaying text |
jdaggett@7355 | 3416 | in a given language that uses the typographic conventions of another |
jdaggett@7355 | 3417 | language or when the font does not explicitly support a given language but |
jdaggett@7355 | 3418 | supports a language that shares common typographic conventions. The ‘<a |
jdaggett@4624 | 3419 | href="#propdef-font-language-override"><code |
jdaggett@4624 | 3420 | class=property>font-language-override</code></a>’ property is used for |
jdaggett@8225 | 3421 | this purpose.</p> |
jdaggett@1662 | 3422 | <!-- prop: font-kerning --> |
jdaggett@1662 | 3423 | |
jdaggett@1856 | 3424 | <h3 id=font-kerning-prop><span class=secno>6.3 </span>Kerning: the <a |
jdaggett@1662 | 3425 | href="#propdef-font-kerning">font-kerning</a> property</h3> |
jdaggett@1662 | 3426 | |
jdaggett@4624 | 3427 | <table class=propdef id=namefont-kerningvalueauto-normal-noneini> |
jdaggett@1662 | 3428 | <tbody> |
jdaggett@1662 | 3429 | <tr> |
jdaggett@1662 | 3430 | <td>Name: |
jdaggett@1662 | 3431 | |
jdaggett@1662 | 3432 | <td><dfn id=propdef-font-kerning>font-kerning</dfn> |
jdaggett@1662 | 3433 | |
jdaggett@1662 | 3434 | <tr> |
jdaggett@1662 | 3435 | <td>Value: |
jdaggett@1662 | 3436 | |
jdaggett@1856 | 3437 | <td>auto | normal | none |
jdaggett@1662 | 3438 | |
jdaggett@1662 | 3439 | <tr> |
jdaggett@1662 | 3440 | <td>Initial: |
jdaggett@1662 | 3441 | |
jdaggett@1856 | 3442 | <td>auto |
jdaggett@1662 | 3443 | |
jdaggett@1662 | 3444 | <tr> |
jdaggett@1662 | 3445 | <td>Applies to: |
jdaggett@1662 | 3446 | |
jdaggett@1662 | 3447 | <td>all elements |
jdaggett@1662 | 3448 | |
jdaggett@1662 | 3449 | <tr> |
jdaggett@1662 | 3450 | <td>Inherited: |
jdaggett@1662 | 3451 | |
jdaggett@1662 | 3452 | <td>yes |
jdaggett@1662 | 3453 | |
jdaggett@1662 | 3454 | <tr> |
jdaggett@1662 | 3455 | <td>Percentages: |
jdaggett@1662 | 3456 | |
jdaggett@1662 | 3457 | <td>N/A |
jdaggett@1662 | 3458 | |
jdaggett@1662 | 3459 | <tr> |
jdaggett@1662 | 3460 | <td>Media: |
jdaggett@1662 | 3461 | |
jdaggett@1662 | 3462 | <td>visual |
jdaggett@1662 | 3463 | |
jdaggett@1662 | 3464 | <tr> |
jdaggett@1662 | 3465 | <td>Computed value: |
jdaggett@1662 | 3466 | |
jdaggett@1662 | 3467 | <td>as specified |
jdaggett@7377 | 3468 | |
jdaggett@7377 | 3469 | <tr> |
jdaggett@7377 | 3470 | <td>Animatable: |
jdaggett@7377 | 3471 | |
jdaggett@7377 | 3472 | <td>no |
jdaggett@1662 | 3473 | </table> |
jdaggett@1662 | 3474 | |
jdaggett@2509 | 3475 | <p>Kerning is the contextual adjustment of inter-glyph spacing. This |
jdaggett@2509 | 3476 | property controls metric kerning, kerning that utilizes adjustment data |
jdaggett@8276 | 3477 | contained in the font. |
jdaggett@8276 | 3478 | |
jdaggett@8276 | 3479 | <dl> |
jdaggett@8276 | 3480 | <dt>auto |
jdaggett@8276 | 3481 | |
jdaggett@8276 | 3482 | <dd>Specifies that kerning is applied at the discretion of the user agent |
jdaggett@8276 | 3483 | |
jdaggett@8276 | 3484 | <dt>normal |
jdaggett@8276 | 3485 | |
jdaggett@8276 | 3486 | <dd>Specifies that kerning is applied |
jdaggett@8276 | 3487 | |
jdaggett@8276 | 3488 | <dt>none |
jdaggett@8276 | 3489 | |
jdaggett@8276 | 3490 | <dd>Specifies that kerning is not applied |
jdaggett@8276 | 3491 | </dl> |
jdaggett@1662 | 3492 | |
jdaggett@1662 | 3493 | <p>For fonts that do not include kerning data this property will have no |
jdaggett@1662 | 3494 | visible effect. When rendering with OpenType fonts, the <a |
jdaggett@1662 | 3495 | href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> |
jdaggett@2515 | 3496 | specification suggests that kerning be enabled by default. When kerning is |
jdaggett@6436 | 3497 | enabled, the OpenType <span class=tag>kern</span> feature is enabled (for |
jdaggett@8276 | 3498 | vertical text runs the <span class=tag>vkrn</span> feature is enabled |
jdaggett@8276 | 3499 | instead). User agents must also support fonts that only support kerning |
jdaggett@8276 | 3500 | via data contained in a <span class=tag>kern</span> font table, as |
jdaggett@8276 | 3501 | detailed in the OpenType specification. If the ‘<code |
jdaggett@8276 | 3502 | class=property>letter-spacing</code>’ property is defined, kerning |
jdaggett@8276 | 3503 | adjustments are considered part of the default spacing and letter spacing |
jdaggett@8276 | 3504 | adjustments are made after kerning has been applied. |
jdaggett@8276 | 3505 | |
jdaggett@8276 | 3506 | <p>When set to ‘<code class=property>auto</code>’, user agents can |
jdaggett@8276 | 3507 | determine whether to apply kerning or not based on a number of factors: |
jdaggett@8276 | 3508 | text size, script, or other factors that influence text processing speed. |
jdaggett@8277 | 3509 | Authors who want proper kerning should use ‘<a href="#normal3"><code |
jdaggett@8276 | 3510 | class=property>normal</code></a>’ to explicitly enable kerning. |
jdaggett@8276 | 3511 | Likewise, some authors may prefer to disable kerning in situations where |
jdaggett@8276 | 3512 | performance is more important than precise appearance. However, in |
jdaggett@8276 | 3513 | well-designed modern implementations the use of kerning generally does not |
jdaggett@8276 | 3514 | have a large impact on text rendering speed.</p> |
jdaggett@6176 | 3515 | <!-- prop: font-variant-ligatures --> |
jdaggett@6176 | 3516 | |
jdaggett@6176 | 3517 | <h3 id=font-variant-ligatures-prop><span class=secno>6.4 </span>Ligatures: |
jdaggett@6176 | 3518 | the <a href="#propdef-font-variant-ligatures">font-variant-ligatures</a> |
jdaggett@6176 | 3519 | property</h3> |
jdaggett@6176 | 3520 | |
jdaggett@6436 | 3521 | <table class=propdef id=namefont-variant-ligaturesvaluenormal-no> |
jdaggett@6176 | 3522 | <tbody> |
jdaggett@6176 | 3523 | <tr> |
jdaggett@6176 | 3524 | <td>Name: |
jdaggett@6176 | 3525 | |
jdaggett@6176 | 3526 | <td><dfn id=propdef-font-variant-ligatures>font-variant-ligatures</dfn> |
jdaggett@6176 | 3527 | |
jdaggett@6176 | 3528 | <tr> |
jdaggett@6176 | 3529 | <td>Value: |
jdaggett@6176 | 3530 | |
jdaggett@8225 | 3531 | <td>normal | none | [ <a |
jdaggett@8225 | 3532 | href="#common-lig-values"><var><common-lig-values></var></a> || |
jdaggett@8225 | 3533 | <a |
jdaggett@8225 | 3534 | href="#discretionary-lig-values"><var><discretionary-lig-values></var></a> |
jdaggett@8225 | 3535 | || <a |
jdaggett@8225 | 3536 | href="#historical-lig-values"><var><historical-lig-values></var></a> |
jdaggett@8225 | 3537 | || <a |
jdaggett@8225 | 3538 | href="#contextual-alt-values"><var><contextual-alt-values></var></a> |
jdaggett@8225 | 3539 | ] |
jdaggett@6176 | 3540 | |
jdaggett@6176 | 3541 | <tr> |
jdaggett@6176 | 3542 | <td>Initial: |
jdaggett@6176 | 3543 | |
jdaggett@6176 | 3544 | <td>normal |
jdaggett@6176 | 3545 | |
jdaggett@6176 | 3546 | <tr> |
jdaggett@6176 | 3547 | <td>Applies to: |
jdaggett@6176 | 3548 | |
jdaggett@6176 | 3549 | <td>all elements |
jdaggett@6176 | 3550 | |
jdaggett@6176 | 3551 | <tr> |
jdaggett@6176 | 3552 | <td>Inherited: |
jdaggett@6176 | 3553 | |
jdaggett@6176 | 3554 | <td>yes |
jdaggett@6176 | 3555 | |
jdaggett@6176 | 3556 | <tr> |
jdaggett@6176 | 3557 | <td>Percentages: |
jdaggett@6176 | 3558 | |
jdaggett@6176 | 3559 | <td>N/A |
jdaggett@6176 | 3560 | |
jdaggett@6176 | 3561 | <tr> |
jdaggett@6176 | 3562 | <td>Media: |
jdaggett@6176 | 3563 | |
jdaggett@6176 | 3564 | <td>visual |
jdaggett@6176 | 3565 | |
jdaggett@6176 | 3566 | <tr> |
jdaggett@6176 | 3567 | <td>Computed value: |
jdaggett@6176 | 3568 | |
jdaggett@6176 | 3569 | <td>as specified |
jdaggett@7377 | 3570 | |
jdaggett@7377 | 3571 | <tr> |
jdaggett@7377 | 3572 | <td>Animatable: |
jdaggett@7377 | 3573 | |
jdaggett@7377 | 3574 | <td>no |
jdaggett@6176 | 3575 | </table> |
jdaggett@6176 | 3576 | |
jdaggett@6436 | 3577 | <p>Ligatures and contextual forms are ways of combining glyphs to produce |
jdaggett@8276 | 3578 | more harmonized forms. |
jdaggett@6176 | 3579 | |
jdaggett@6176 | 3580 | <pre |
jdaggett@8225 | 3581 | 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 | 3582 | |
jdaggett@6176 | 3583 | <pre |
jdaggett@8225 | 3584 | 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 | 3585 | |
jdaggett@6176 | 3586 | <pre |
jdaggett@8225 | 3587 | 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 | 3588 | |
jdaggett@6176 | 3589 | <pre |
jdaggett@8225 | 3590 | 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 | 3591 | |
jdaggett@6176 | 3592 | <p>Individual values have the following meanings: |
jdaggett@6176 | 3593 | |
jdaggett@6176 | 3594 | <dl> |
jdaggett@8277 | 3595 | <dt><dfn id=normal>normal</dfn> |
jdaggett@8277 | 3596 | |
jdaggett@8277 | 3597 | <dd>A value of ‘<a href="#normal3"><code |
jdaggett@8276 | 3598 | class=property>normal</code></a>’ specifies that common default |
jdaggett@8276 | 3599 | features are enabled, <a href="#font-feature-resolution">as described in |
jdaggett@8276 | 3600 | detail in the next section</a>. For OpenType fonts, common ligatures and |
jdaggett@8276 | 3601 | contextual forms are on by default, discretionary and historical |
jdaggett@8276 | 3602 | ligatures are not. |
jdaggett@8276 | 3603 | |
jdaggett@8277 | 3604 | <dt><dfn id=none>none</dfn> |
jdaggett@8276 | 3605 | |
jdaggett@8276 | 3606 | <dd>Specifies that all types of ligatures and contextual forms covered by |
jdaggett@8276 | 3607 | this property are explicitly disabled. In situations where ligatures are |
jdaggett@8276 | 3608 | not considered necessary, this may improve the speed of text rendering. |
jdaggett@8276 | 3609 | |
jdaggett@6176 | 3610 | <dt><dfn id=common-ligatures>common-ligatures</dfn> |
jdaggett@6176 | 3611 | |
jdaggett@6436 | 3612 | <dd>Enables display of common ligatures (OpenType features: <span |
jdaggett@6436 | 3613 | class=tag>liga, clig</span>). For OpenType fonts, common ligatures are |
jdaggett@6436 | 3614 | enabled by default. |
jdaggett@6176 | 3615 | </dl> |
jdaggett@6176 | 3616 | |
jdaggett@6176 | 3617 | <div class=featex><img alt="common ligature example" src=liga.png></div> |
jdaggett@6176 | 3618 | |
jdaggett@6176 | 3619 | <dl> |
jdaggett@6176 | 3620 | <dt><dfn id=no-common-ligatures>no-common-ligatures</dfn> |
jdaggett@6176 | 3621 | |
jdaggett@6436 | 3622 | <dd>Disables display of common ligatures (OpenType features: <span |
jdaggett@6436 | 3623 | class=tag>liga, clig</span>). |
jdaggett@6176 | 3624 | |
jdaggett@6176 | 3625 | <dt><dfn id=discretionary-ligatures>discretionary-ligatures</dfn> |
jdaggett@6176 | 3626 | |
jdaggett@6436 | 3627 | <dd>Enables display of discretionary ligatures (OpenType feature: <span |
jdaggett@8277 | 3628 | class=tag>dlig</span>). Which ligatures are discretionary or optional is |
jdaggett@8277 | 3629 | decided by the type designer, so authors will need to refer to the |
jdaggett@6176 | 3630 | documentation of a given font to understand which ligatures are |
jdaggett@6176 | 3631 | considered discretionary. |
jdaggett@6176 | 3632 | </dl> |
jdaggett@6176 | 3633 | |
jdaggett@6176 | 3634 | <div class=featex><img alt="discretionary ligature example" src=dlig.png></div> |
jdaggett@6176 | 3635 | |
jdaggett@6176 | 3636 | <dl> |
jdaggett@6176 | 3637 | <dt><dfn id=no-discretionary-ligatures>no-discretionary-ligatures</dfn> |
jdaggett@6176 | 3638 | |
jdaggett@6436 | 3639 | <dd>Disables display of discretionary ligatures (OpenType feature: <span |
jdaggett@6436 | 3640 | class=tag>dlig</span>). |
jdaggett@6176 | 3641 | |
jdaggett@6176 | 3642 | <dt><dfn id=historical-ligatures>historical-ligatures</dfn> |
jdaggett@6176 | 3643 | |
jdaggett@6436 | 3644 | <dd>Enables display of historical ligatures (OpenType feature: <span |
jdaggett@6436 | 3645 | class=tag>hlig</span>). |
jdaggett@6176 | 3646 | </dl> |
jdaggett@6176 | 3647 | |
jdaggett@6176 | 3648 | <div class=featex><img alt="historical ligature example" src=hlig.png></div> |
jdaggett@6176 | 3649 | |
jdaggett@6176 | 3650 | <dl> |
jdaggett@6176 | 3651 | <dt><dfn id=no-historical-ligatures>no-historical-ligatures</dfn> |
jdaggett@6176 | 3652 | |
jdaggett@6436 | 3653 | <dd>Disables display of historical ligatures (OpenType feature: <span |
jdaggett@6436 | 3654 | class=tag>hlig</span>). |
jdaggett@6176 | 3655 | |
jdaggett@6176 | 3656 | <dt><dfn id=contextual>contextual</dfn> |
jdaggett@6176 | 3657 | |
jdaggett@6436 | 3658 | <dd>Enables display of contextual alternates (OpenType feature: <span |
jdaggett@6436 | 3659 | class=tag>calt</span>). Although not strictly a ligature feature, like |
jdaggett@6176 | 3660 | ligatures this feature is commonly used to harmonize the shapes of glyphs |
jdaggett@6436 | 3661 | with the surrounding context. For OpenType fonts, this feature is on by |
jdaggett@6436 | 3662 | default. |
jdaggett@6176 | 3663 | </dl> |
jdaggett@6176 | 3664 | |
jdaggett@6176 | 3665 | <div class=featex><img alt="contextual alternate example" src=calt.png></div> |
jdaggett@6176 | 3666 | |
jdaggett@6176 | 3667 | <dl> |
jdaggett@6176 | 3668 | <dt><dfn id=no-contextual>no-contextual</dfn> |
jdaggett@6176 | 3669 | |
jdaggett@6436 | 3670 | <dd>Disables display of contextual alternates (OpenType feature: <span |
jdaggett@6436 | 3671 | class=tag>calt</span>). |
jdaggett@6176 | 3672 | </dl> |
jdaggett@6176 | 3673 | |
jdaggett@6176 | 3674 | <p>Required ligatures, needed for correctly rendering complex scripts, are |
jdaggett@8277 | 3675 | not affected by the settings above, including ‘<a href="#none"><code |
jdaggett@8276 | 3676 | class=property>none</code></a>’ (OpenType feature: <span |
jdaggett@6436 | 3677 | class=tag>rlig</span>).</p> |
jdaggett@3460 | 3678 | <!-- prop: font-variant-position --> |
jdaggett@3460 | 3679 | |
jdaggett@6176 | 3680 | <h3 id=font-variant-position-prop><span class=secno>6.5 </span>Subscript |
jdaggett@3638 | 3681 | and superscript forms: the <a |
jdaggett@3460 | 3682 | href="#propdef-font-variant-position">font-variant-position</a> property</h3> |
jdaggett@3460 | 3683 | |
jdaggett@4624 | 3684 | <table class=propdef id=namefont-variant-positionvaluenormal-sub> |
jdaggett@1662 | 3685 | <tbody> |
jdaggett@1662 | 3686 | <tr> |
jdaggett@1662 | 3687 | <td>Name: |
jdaggett@1662 | 3688 | |
jdaggett@3460 | 3689 | <td><dfn id=propdef-font-variant-position>font-variant-position</dfn> |
jdaggett@1662 | 3690 | |
jdaggett@1662 | 3691 | <tr> |
jdaggett@1662 | 3692 | <td>Value: |
jdaggett@1662 | 3693 | |
jdaggett@3638 | 3694 | <td>normal | sub | super |
jdaggett@1732 | 3695 | |
jdaggett@1732 | 3696 | <tr> |
jdaggett@1732 | 3697 | <td>Initial: |
jdaggett@1732 | 3698 | |
jdaggett@1732 | 3699 | <td>normal |
jdaggett@1732 | 3700 | |
jdaggett@1732 | 3701 | <tr> |
jdaggett@1732 | 3702 | <td>Applies to: |
jdaggett@1732 | 3703 | |
jdaggett@1732 | 3704 | <td>all elements |
jdaggett@1732 | 3705 | |
jdaggett@1732 | 3706 | <tr> |
jdaggett@1732 | 3707 | <td>Inherited: |
jdaggett@1732 | 3708 | |
jdaggett@1732 | 3709 | <td>yes |
jdaggett@1732 | 3710 | |
jdaggett@1732 | 3711 | <tr> |
jdaggett@1732 | 3712 | <td>Percentages: |
jdaggett@1732 | 3713 | |
jdaggett@1732 | 3714 | <td>N/A |
jdaggett@1732 | 3715 | |
jdaggett@1732 | 3716 | <tr> |
jdaggett@1732 | 3717 | <td>Media: |
jdaggett@1732 | 3718 | |
jdaggett@1732 | 3719 | <td>visual |
jdaggett@1732 | 3720 | |
jdaggett@1732 | 3721 | <tr> |
jdaggett@1732 | 3722 | <td>Computed value: |
jdaggett@1732 | 3723 | |
jdaggett@1732 | 3724 | <td>as specified |
jdaggett@7377 | 3725 | |
jdaggett@7377 | 3726 | <tr> |
jdaggett@7377 | 3727 | <td>Animatable: |
jdaggett@7377 | 3728 | |
jdaggett@7377 | 3729 | <td>no |
jdaggett@1732 | 3730 | </table> |
jdaggett@1732 | 3731 | |
jdaggett@5890 | 3732 | <p>This property is used to enable typographic subscript and superscript |
jdaggett@5890 | 3733 | glyphs. These are alternate glyphs designed within the same em-box as |
jdaggett@5890 | 3734 | default glyphs and are intended to be laid out on the same baseline as the |
jdaggett@5890 | 3735 | default glyphs, with no resizing or repositioning of the baseline. They |
jdaggett@5890 | 3736 | are explicitly designed to match the surrounding text and to be more |
jdaggett@5890 | 3737 | readable without affecting the line height. |
jdaggett@3511 | 3738 | |
jdaggett@3511 | 3739 | <div class=figure><img alt="comparison between real subscript glyphs and |
jdaggett@3511 | 3740 | synthesized ones" src=realsubscripts.png> |
jdaggett@3511 | 3741 | <p class=caption>Subscript glyphs (top) vs. typical synthesized subscripts |
jdaggett@3511 | 3742 | (bottom) |
jdaggett@3511 | 3743 | </div> |
jdaggett@3460 | 3744 | |
jdaggett@3638 | 3745 | <p>The values ‘<code class=property>sub</code>’ and ‘<code |
jdaggett@3638 | 3746 | class=property>super</code>’ imply the appropriate variant glyph is |
jdaggett@6436 | 3747 | displayed when available in the font (OpenType features: <span |
jdaggett@8277 | 3748 | class=tag>subs, sups</span>). A value of ‘<a href="#normal3"><code |
jdaggett@8276 | 3749 | class=property>normal</code></a>’ specifies neither of these alternate |
jdaggett@5890 | 3750 | glyphs are substituted. |
jdaggett@5890 | 3751 | |
jdaggett@5890 | 3752 | <p>Because of the semantic nature of subscripts and superscripts, when the |
jdaggett@5890 | 3753 | value is either ‘<code class=property>sub</code>’ or ‘<code |
jdaggett@8177 | 3754 | class=property>super</code>’ for a given contiguous run of text, if a |
jdaggett@8177 | 3755 | variant glyph is not available for all the characters in the run, |
jdaggett@8177 | 3756 | simulated glyphs must be synthesized for all characters using reduced |
jdaggett@8177 | 3757 | forms of the glyphs that would be used without this feature applied. This |
jdaggett@8177 | 3758 | is done to avoid a mixture of variant glyphs and synthesized ones that |
jdaggett@8177 | 3759 | would not align correctly. |
jdaggett@3460 | 3760 | |
jdaggett@3460 | 3761 | <p>In the case of OpenType fonts that lack subscript or superscript glyphs |
jdaggett@5891 | 3762 | for a given character, user agents must use the appropriate subscript and |
jdaggett@5891 | 3763 | superscript metrics specified in the selected font's <a |
jdaggett@3460 | 3764 | href="http://www.microsoft.com/typography/otspec/os2.htm#subxs">OS/2 |
jdaggett@3460 | 3765 | table</a> <a href="#OPENTYPE" |
jdaggett@5891 | 3766 | rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> to calculate the size |
jdaggett@5891 | 3767 | and offset of the synthesized substitutes. |
jdaggett@2461 | 3768 | |
jdaggett@2461 | 3769 | <p>In the past, user agents have used font-size and vertical-align to |
jdaggett@6436 | 3770 | simulate subscripts and superscripts for the <span class=tag>sub</span> |
jdaggett@6436 | 3771 | and <span class=tag>sup</span> elements. To allow a backwards compatible |
jdaggett@6436 | 3772 | way of defining subscripts and superscripts, it is recommended that |
jdaggett@6436 | 3773 | authors use conditional rules <a href="#CSS3-CONDITIONAL" |
jdaggett@3460 | 3774 | rel=biblioentry>[CSS3-CONDITIONAL]<!--{{CSS3-CONDITIONAL}}--></a> so that |
jdaggett@5890 | 3775 | older user agents will still render subscripts and superscripts via the |
jdaggett@5890 | 3776 | older mechanism. |
jdaggett@5890 | 3777 | |
jdaggett@5890 | 3778 | <p>Authors should note that fonts typically only provide subscript and |
jdaggett@5890 | 3779 | superscript glyphs for a subset of all characters supported by the font. |
jdaggett@5891 | 3780 | While subscript and superscript glyphs are often available for Latin |
jdaggett@5891 | 3781 | numbers, glyphs for punctuation and letter characters are less frequently |
jdaggett@5891 | 3782 | provided. The synthetic fallback rules defined for this property assure |
jdaggett@5891 | 3783 | that subscripts and superscripts will always appear but the appearance may |
jdaggett@5891 | 3784 | not match author expectations if the font used does not provide the |
jdaggett@5891 | 3785 | appropriate alternate glyph for all characters contained in a subscript or |
jdaggett@5890 | 3786 | superscript. |
jdaggett@5890 | 3787 | |
jdaggett@5890 | 3788 | <div class=figure><img alt="alternate superscripts vs. glyphs synthesized |
jdaggett@5890 | 3789 | using superscript metrics" src=superscript-alt-synth.png> |
jdaggett@5890 | 3790 | <p class=caption>Superscript alternate glyph (left), synthesized |
jdaggett@5890 | 3791 | superscript glyphs (middle), and incorrect mixture of the two (right) |
jdaggett@5890 | 3792 | </div> |
jdaggett@5890 | 3793 | |
jdaggett@5890 | 3794 | <p>This property is not cumulative, applying it to subelements within a |
jdaggett@5890 | 3795 | subscript or superscript won't nest the placement of a subscript or |
jdaggett@5890 | 3796 | superscript glyph. Images contained within text runs where the value of |
jdaggett@5890 | 3797 | this property is ‘<code class=property>sub</code>’ or ‘<code |
jdaggett@5890 | 3798 | class=property>super</code>’ will be drawn just as they would if the |
jdaggett@8277 | 3799 | value was ‘<a href="#normal3"><code class=property>normal</code></a>’. |
jdaggett@5890 | 3800 | Likewise, text decorations such as underlines or emphasis marks will |
jdaggett@5890 | 3801 | render in the same position as they would for the default glyphs, since |
jdaggett@5890 | 3802 | this property does not affect the baseline position. |
jdaggett@5890 | 3803 | |
jdaggett@5890 | 3804 | <p>Because of these limitations, font-variant-position is not recommended |
jdaggett@5890 | 3805 | for use in user agent stylesheets. Authors should use it in cases where |
jdaggett@5890 | 3806 | subscripts or superscripts will only contain the narrow range of |
jdaggett@5890 | 3807 | characters supported by the fonts specified. |
jdaggett@2509 | 3808 | |
jdaggett@2461 | 3809 | <div class=example> |
jdaggett@6436 | 3810 | <p>A typical user agent default style for the <span class=tag>sub</span> |
jdaggett@6436 | 3811 | element:</p> |
jdaggett@2461 | 3812 | |
jdaggett@2461 | 3813 | <pre>sub { |
jdaggett@2461 | 3814 | vertical-align: sub; |
jdaggett@2461 | 3815 | font-size: smaller; |
jdaggett@2461 | 3816 | line-height: normal; |
jdaggett@2461 | 3817 | } |
jdaggett@2461 | 3818 | </pre> |
jdaggett@2461 | 3819 | |
jdaggett@3460 | 3820 | <p>Using font-variant-position to specify typographic subscripts in a way |
jdaggett@3460 | 3821 | that will still show subscripts in older user agents:</p> |
jdaggett@3460 | 3822 | |
jdaggett@3460 | 3823 | <pre>@supports ( font-variant-position: sub ) { |
jdaggett@3460 | 3824 | |
jdaggett@3460 | 3825 | sub { |
jdaggett@3460 | 3826 | vertical-align: inherit; |
jdaggett@3460 | 3827 | font-size: 100%; |
jdaggett@3460 | 3828 | line-height: inherit; |
jdaggett@3460 | 3829 | font-variant-position: sub; |
jdaggett@3460 | 3830 | } |
jdaggett@3460 | 3831 | |
jdaggett@2461 | 3832 | } |
jdaggett@2461 | 3833 | </pre> |
jdaggett@2461 | 3834 | |
jdaggett@4624 | 3835 | <p>User agents that support the ‘<a |
jdaggett@4624 | 3836 | href="#propdef-font-variant-position"><code |
jdaggett@4624 | 3837 | class=property>font-variant-position</code></a>’ property will select a |
jdaggett@4624 | 3838 | subscript variant glyph and render this without adjusting the baseline or |
jdaggett@4624 | 3839 | font-size. Older user agents will ignore the ‘<a |
jdaggett@4624 | 3840 | href="#propdef-font-variant-position"><code |
jdaggett@4624 | 3841 | class=property>font-variant-position</code></a>’ property definition |
jdaggett@4624 | 3842 | and use the standard defaults for subscripts.</p> |
jdaggett@2461 | 3843 | </div> |
jdaggett@2118 | 3844 | <!-- prop: font-variant-caps --> |
jdaggett@2118 | 3845 | |
jdaggett@2118 | 3846 | <h3 id=font-variant-caps-prop><span class=secno>6.6 </span>Capitalization: |
jdaggett@1662 | 3847 | the <a href="#propdef-font-variant-caps">font-variant-caps</a> property</h3> |
jdaggett@1662 | 3848 | |
jdaggett@5809 | 3849 | <table class=propdef id=namefont-variant-capsvaluenormal-small-c> |
jdaggett@1662 | 3850 | <tbody> |
jdaggett@1662 | 3851 | <tr> |
jdaggett@1662 | 3852 | <td>Name: |
jdaggett@1662 | 3853 | |
jdaggett@1662 | 3854 | <td><dfn id=propdef-font-variant-caps>font-variant-caps</dfn> |
jdaggett@1662 | 3855 | |
jdaggett@1662 | 3856 | <tr> |
jdaggett@1662 | 3857 | <td>Value: |
jdaggett@1662 | 3858 | |
jdaggett@5809 | 3859 | <td>normal | small-caps | all-small-caps | petite-caps | all-petite-caps |
jdaggett@6648 | 3860 | | unicase | titling-caps |
jdaggett@1662 | 3861 | |
jdaggett@1662 | 3862 | <tr> |
jdaggett@1662 | 3863 | <td>Initial: |
jdaggett@1662 | 3864 | |
jdaggett@1662 | 3865 | <td>normal |
jdaggett@1662 | 3866 | |
jdaggett@1662 | 3867 | <tr> |
jdaggett@1662 | 3868 | <td>Applies to: |
jdaggett@1662 | 3869 | |
jdaggett@1662 | 3870 | <td>all elements |
jdaggett@1662 | 3871 | |
jdaggett@1662 | 3872 | <tr> |
jdaggett@1662 | 3873 | <td>Inherited: |
jdaggett@1662 | 3874 | |
jdaggett@1662 | 3875 | <td>yes |
jdaggett@1662 | 3876 | |
jdaggett@1662 | 3877 | <tr> |
jdaggett@1662 | 3878 | <td>Percentages: |
jdaggett@1662 | 3879 | |
jdaggett@1662 | 3880 | <td>N/A |
jdaggett@1662 | 3881 | |
jdaggett@1662 | 3882 | <tr> |
jdaggett@1662 | 3883 | <td>Media: |
jdaggett@1662 | 3884 | |
jdaggett@1662 | 3885 | <td>visual |
jdaggett@1662 | 3886 | |
jdaggett@1662 | 3887 | <tr> |
jdaggett@1662 | 3888 | <td>Computed value: |
jdaggett@1662 | 3889 | |
jdaggett@1662 | 3890 | <td>as specified |
jdaggett@7377 | 3891 | |
jdaggett@7377 | 3892 | <tr> |
jdaggett@7377 | 3893 | <td>Animatable: |
jdaggett@7377 | 3894 | |
jdaggett@7377 | 3895 | <td>no |
jdaggett@1662 | 3896 | </table> |
jdaggett@1662 | 3897 | |
jdaggett@1662 | 3898 | <p>Specifies control over capitalized forms. |
jdaggett@1662 | 3899 | |
jdaggett@1732 | 3900 | <p>Individual values have the following meanings: |
jdaggett@1662 | 3901 | |
jdaggett@1662 | 3902 | <dl> |
jdaggett@8277 | 3903 | <dt><dfn id=normal0>normal</dfn> |
jdaggett@5809 | 3904 | |
jdaggett@5809 | 3905 | <dd>None of the features listed below are enabled. |
jdaggett@5809 | 3906 | |
jdaggett@1662 | 3907 | <dt><dfn id=small-caps>small-caps</dfn> |
jdaggett@1662 | 3908 | |
jdaggett@6436 | 3909 | <dd>Enables display of small capitals (OpenType feature: <span |
jdaggett@6436 | 3910 | class=tag>smcp</span>). Small-caps glyphs typically use the form of |
jdaggett@6436 | 3911 | uppercase letters but are reduced to the size of lowercase letters. |
jdaggett@1662 | 3912 | </dl> |
jdaggett@1662 | 3913 | |
jdaggett@1662 | 3914 | <div class=featex><img alt="small-caps example" src=smcp.png></div> |
jdaggett@1662 | 3915 | |
jdaggett@1662 | 3916 | <dl> |
jdaggett@1732 | 3917 | <dt><dfn id=all-small-caps>all-small-caps</dfn> |
jdaggett@1732 | 3918 | |
jdaggett@1732 | 3919 | <dd>Enables display of small capitals for both upper and lowercase letters |
jdaggett@6436 | 3920 | (OpenType features: <span class=tag>c2sc, smcp</span>). |
jdaggett@1732 | 3921 | |
jdaggett@1662 | 3922 | <dt><dfn id=petite-caps>petite-caps</dfn> |
jdaggett@1662 | 3923 | |
jdaggett@6436 | 3924 | <dd>Enables display of petite capitals (OpenType feature: <span |
jdaggett@6436 | 3925 | class=tag>pcap</span>). |
jdaggett@1662 | 3926 | |
jdaggett@1732 | 3927 | <dt><dfn id=all-petite-caps>all-petite-caps</dfn> |
jdaggett@1732 | 3928 | |
jdaggett@1732 | 3929 | <dd>Enables display of petite capitals for both upper and lowercase |
jdaggett@6436 | 3930 | letters (OpenType features: <span class=tag>c2pc, pcap</span>). |
jdaggett@1732 | 3931 | |
jdaggett@6648 | 3932 | <dt><dfn id=unicase>unicase</dfn> |
jdaggett@6648 | 3933 | |
jdaggett@6648 | 3934 | <dd>Enables display of mixture of small capitals for uppercase letters |
jdaggett@6648 | 3935 | with normal lowercase letters (OpenType feature: <span |
jdaggett@6648 | 3936 | class=tag>unic</span>). |
jdaggett@6648 | 3937 | |
jdaggett@1662 | 3938 | <dt><dfn id=titling-caps>titling-caps</dfn> |
jdaggett@1662 | 3939 | |
jdaggett@6436 | 3940 | <dd>Enables display of titling capitals (OpenType feature: <span |
jdaggett@6436 | 3941 | class=tag>titl</span>). Uppercase letter glyphs are often designed for |
jdaggett@6436 | 3942 | use with lowercase letters. When used in all uppercase titling sequences |
jdaggett@6436 | 3943 | they can appear too strong. Titling capitals are designed specifically |
jdaggett@6436 | 3944 | for this situation. |
jdaggett@1662 | 3945 | </dl> |
jdaggett@1662 | 3946 | |
jdaggett@6648 | 3947 | <p>This property allows the selection of alternate glyphs used for small or |
jdaggett@6648 | 3948 | petite capitals or for titling. These glyphs are specifically designed to |
jdaggett@6648 | 3949 | blend well with the surrounding normal glyphs, to maintain the weight and |
jdaggett@6648 | 3950 | readability which suffers when text is simply resized to fit this purpose. |
jdaggett@6648 | 3951 | |
jdaggett@6648 | 3952 | <p>The availability of these glyphs is based on whether a given feature is |
jdaggett@6648 | 3953 | defined or not in the feature list of the font. User agents can optionally |
jdaggett@6648 | 3954 | decide this on a per-script basis but should explicitly not decide this on |
jdaggett@6648 | 3955 | a per-character basis. |
jdaggett@6648 | 3956 | |
jdaggett@6648 | 3957 | <p>Some fonts may only support a subset or none of the features described |
jdaggett@6648 | 3958 | for this property. For backwards compatibility with CSS 2.1, if ‘<a |
jdaggett@4624 | 3959 | href="#small-caps"><code class=property>small-caps</code></a>’ or ‘<a |
jdaggett@4624 | 3960 | href="#all-small-caps"><code class=property>all-small-caps</code></a>’ |
jdaggett@4624 | 3961 | is specified but small-caps glyphs are not available for a given font, |
jdaggett@4624 | 3962 | user agents should simulate a small-caps font, for example by taking a |
jdaggett@6648 | 3963 | normal font and replacing the glyphs for lowercase letters with scaled |
jdaggett@6648 | 3964 | versions of the glyphs for uppercase characters (replacing the glyphs for |
jdaggett@6648 | 3965 | both upper and lowercase letters in the case of ‘<a |
jdaggett@4624 | 3966 | href="#all-small-caps"><code class=property>all-small-caps</code></a>’). |
jdaggett@6648 | 3967 | |
jdaggett@6648 | 3968 | <div class=figure style="padding: 0; margin: auto;"><img alt="synthetic vs. |
jdaggett@6648 | 3969 | real small-caps" class=hires src=synthetic-vs-real-small-caps.png |
jdaggett@6648 | 3970 | width=512px> |
jdaggett@6648 | 3971 | <p class=caption>Synthetic vs. real small-caps |
jdaggett@6648 | 3972 | </div> |
jdaggett@6648 | 3973 | |
jdaggett@6648 | 3974 | <p>To match the surrounding text, a font may provide alternate glyphs for |
jdaggett@6648 | 3975 | caseless characters when these features are enabled but when a user agent |
jdaggett@6648 | 3976 | simulates small capitals, it must not attempt to simulate alternates for |
jdaggett@6648 | 3977 | codepoints which are considered caseless. |
jdaggett@6648 | 3978 | |
jdaggett@6648 | 3979 | <div class=figure style="padding: 0; margin: auto;"><img alt="caseless |
jdaggett@6648 | 3980 | characters with small-caps, all-small-caps enabled" class=hires |
jdaggett@6648 | 3981 | src=small-capitals-variations.png width=418px> |
jdaggett@6648 | 3982 | <p class=caption>Caseless characters with small-caps, all-small-caps |
jdaggett@6648 | 3983 | enabled |
jdaggett@6648 | 3984 | </div> |
jdaggett@6648 | 3985 | |
jdaggett@6648 | 3986 | <p>If either ‘<a href="#petite-caps"><code |
jdaggett@4624 | 3987 | class=property>petite-caps</code></a>’ or ‘<a |
jdaggett@4624 | 3988 | href="#all-petite-caps"><code class=property>all-petite-caps</code></a>’ |
jdaggett@4624 | 3989 | is specified for a font that doesn't support these features, the property |
jdaggett@4624 | 3990 | behaves as if ‘<a href="#small-caps"><code |
jdaggett@4624 | 3991 | class=property>small-caps</code></a>’ or ‘<a |
jdaggett@4624 | 3992 | href="#all-small-caps"><code class=property>all-small-caps</code></a>’, |
jdaggett@6648 | 3993 | respectively, had been specified. If ‘<a href="#unicase"><code |
jdaggett@6648 | 3994 | class=property>unicase</code></a>’ is specified for a font that doesn't |
jdaggett@6648 | 3995 | support that feature, the property behaves as if ‘<a |
jdaggett@6648 | 3996 | href="#small-caps"><code class=property>small-caps</code></a>’ was |
jdaggett@6648 | 3997 | applied only to lowercased uppercase letters. If ‘<a |
jdaggett@6648 | 3998 | href="#titling-caps"><code class=property>titling-caps</code></a>’ is |
jdaggett@6648 | 3999 | specified with a font that does not support this feature, this property |
jdaggett@6648 | 4000 | has no visible effect. When simulated small capital glyphs are used, for |
jdaggett@4624 | 4001 | scripts that lack uppercase and lowercase letters, ‘<a |
jdaggett@4624 | 4002 | href="#small-caps"><code class=property>small-caps</code></a>’, ‘<a |
jdaggett@4624 | 4003 | href="#all-small-caps"><code class=property>all-small-caps</code></a>’, |
jdaggett@4624 | 4004 | ‘<a href="#petite-caps"><code class=property>petite-caps</code></a>’, |
jdaggett@4624 | 4005 | ‘<a href="#all-petite-caps"><code |
jdaggett@4624 | 4006 | class=property>all-petite-caps</code></a>’ and ‘<a |
jdaggett@4624 | 4007 | href="#unicase"><code class=property>unicase</code></a>’ have no visible |
jdaggett@2462 | 4008 | effect. |
jdaggett@1662 | 4009 | |
jdaggett@6648 | 4010 | <p>When casing transforms are used to simulate small capitals, the casing |
jdaggett@6648 | 4011 | transformations should match those used for the <span |
jdaggett@6648 | 4012 | class=property>‘<code class=property>text-transform</code>’</span> |
jdaggett@6648 | 4013 | property. |
jdaggett@6648 | 4014 | |
jdaggett@6648 | 4015 | <p>As a last resort, unscaled uppercase letter glyphs in a normal font may |
jdaggett@6648 | 4016 | replace glyphs in a small-caps font so that the text appears in all |
jdaggett@6648 | 4017 | uppercase letters. |
jdaggett@6648 | 4018 | |
jdaggett@6648 | 4019 | <div class=figure style="padding: 0; margin: auto;"><img alt="using |
jdaggett@6648 | 4020 | all-small-caps in acronym-laden text" class=hires |
jdaggett@6648 | 4021 | src=acronym-laden-text.png width=596px> |
jdaggett@6648 | 4022 | <p class=caption>Using small capitals to improve readability in |
jdaggett@6648 | 4023 | acronym-laden text |
jdaggett@6648 | 4024 | </div> |
jdaggett@6648 | 4025 | |
jdaggett@1662 | 4026 | <div class=example> |
jdaggett@1662 | 4027 | <p>Quotes rendered italicised, with small-caps on the first line:</p> |
jdaggett@1662 | 4028 | |
jdaggett@1662 | 4029 | <pre>blockquote { font-style: italic; } |
jdaggett@1662 | 4030 | blockquote:first-line { font-variant: small-caps; } |
jdaggett@1662 | 4031 | |
jdaggett@1662 | 4032 | <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 | 4033 | </pre> |
jdaggett@1662 | 4034 | </div> |
jdaggett@2118 | 4035 | <!-- prop: font-variant-numeric --> |
jdaggett@2118 | 4036 | |
jdaggett@2118 | 4037 | <h3 id=font-variant-numeric-prop><span class=secno>6.7 </span>Numerical |
jdaggett@1662 | 4038 | formatting: the <a |
jdaggett@1662 | 4039 | href="#propdef-font-variant-numeric">font-variant-numeric</a> property</h3> |
jdaggett@1662 | 4040 | |
jdaggett@5809 | 4041 | <table class=propdef id=namefont-variant-numericvaluenormal-ltnu> |
jdaggett@1662 | 4042 | <tbody> |
jdaggett@1662 | 4043 | <tr> |
jdaggett@1662 | 4044 | <td>Name: |
jdaggett@1662 | 4045 | |
jdaggett@1662 | 4046 | <td><dfn id=propdef-font-variant-numeric>font-variant-numeric</dfn> |
jdaggett@1662 | 4047 | |
jdaggett@1662 | 4048 | <tr> |
jdaggett@1662 | 4049 | <td>Value: |
jdaggett@1662 | 4050 | |
jdaggett@8225 | 4051 | <td>normal | [ <a |
jdaggett@8225 | 4052 | href="#numeric-figure-values"><var><numeric-figure-values></var></a> |
jdaggett@8225 | 4053 | || <a |
jdaggett@8225 | 4054 | href="#numeric-spacing-values"><var><numeric-spacing-values></var></a> |
jdaggett@8225 | 4055 | || <a |
jdaggett@8225 | 4056 | href="#numeric-fraction-values"><var><numeric-fraction-values></var></a> |
jdaggett@8225 | 4057 | || <a href="#ordinal">ordinal</a> || <a |
jdaggett@8225 | 4058 | href="#slashed-zero">slashed-zero</a> ] |
jdaggett@1662 | 4059 | |
jdaggett@1662 | 4060 | <tr> |
jdaggett@1662 | 4061 | <td>Initial: |
jdaggett@1662 | 4062 | |
jdaggett@1662 | 4063 | <td>normal |
jdaggett@1662 | 4064 | |
jdaggett@1662 | 4065 | <tr> |
jdaggett@1662 | 4066 | <td>Applies to: |
jdaggett@1662 | 4067 | |
jdaggett@1662 | 4068 | <td>all elements |
jdaggett@1662 | 4069 | |
jdaggett@1662 | 4070 | <tr> |
jdaggett@1662 | 4071 | <td>Inherited: |
jdaggett@1662 | 4072 | |
jdaggett@1662 | 4073 | <td>yes |
jdaggett@1662 | 4074 | |
jdaggett@1662 | 4075 | <tr> |
jdaggett@1662 | 4076 | <td>Percentages: |
jdaggett@1662 | 4077 | |
jdaggett@1662 | 4078 | <td>N/A |
jdaggett@1662 | 4079 | |
jdaggett@1662 | 4080 | <tr> |
jdaggett@1662 | 4081 | <td>Media: |
jdaggett@1662 | 4082 | |
jdaggett@1662 | 4083 | <td>visual |
jdaggett@1662 | 4084 | |
jdaggett@1662 | 4085 | <tr> |
jdaggett@1662 | 4086 | <td>Computed value: |
jdaggett@1662 | 4087 | |
jdaggett@1662 | 4088 | <td>as specified |
jdaggett@7377 | 4089 | |
jdaggett@7377 | 4090 | <tr> |
jdaggett@7377 | 4091 | <td>Animatable: |
jdaggett@7377 | 4092 | |
jdaggett@7377 | 4093 | <td>no |
jdaggett@1662 | 4094 | </table> |
jdaggett@1662 | 4095 | |
jdaggett@1662 | 4096 | <p>Specifies control over numerical forms. |
jdaggett@1662 | 4097 | |
jdaggett@1662 | 4098 | <pre |
jdaggett@8225 | 4099 | 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@1732 | 4100 | |
jdaggett@1732 | 4101 | <pre |
jdaggett@8225 | 4102 | 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@1732 | 4103 | |
jdaggett@1732 | 4104 | <pre |
jdaggett@8225 | 4105 | 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@1732 | 4106 | |
jdaggett@1732 | 4107 | <p>Individual values have the following meanings: |
jdaggett@1662 | 4108 | |
jdaggett@1662 | 4109 | <dl> |
jdaggett@8277 | 4110 | <dt><dfn id=normal1>normal</dfn> |
jdaggett@5809 | 4111 | |
jdaggett@5809 | 4112 | <dd>None of the features listed below are enabled. |
jdaggett@5809 | 4113 | |
jdaggett@1662 | 4114 | <dt><dfn id=lining-nums>lining-nums</dfn> |
jdaggett@1662 | 4115 | |
jdaggett@6436 | 4116 | <dd>Enables display of lining numerals (OpenType feature: <span |
jdaggett@6436 | 4117 | class=tag>lnum</span>). |
jdaggett@1662 | 4118 | |
jdaggett@1662 | 4119 | <dt><dfn id=oldstyle-nums>oldstyle-nums</dfn> |
jdaggett@1662 | 4120 | |
jdaggett@6436 | 4121 | <dd>Enables display of old-style numerals (OpenType feature: <span |
jdaggett@6436 | 4122 | class=tag>onum</span>). |
jdaggett@1662 | 4123 | |
jdaggett@1662 | 4124 | <dt><dfn id=proportional-nums>proportional-nums</dfn> |
jdaggett@1662 | 4125 | |
jdaggett@6436 | 4126 | <dd>Enables display of proportional numerals (OpenType feature: <span |
jdaggett@6436 | 4127 | class=tag>pnum</span>). |
jdaggett@1662 | 4128 | |
jdaggett@1662 | 4129 | <dt><dfn id=tabular-nums>tabular-nums</dfn> |
jdaggett@1662 | 4130 | |
jdaggett@6436 | 4131 | <dd>Enables display of tabular numerals (OpenType feature: <span |
jdaggett@6436 | 4132 | class=tag>tnum</span>). |
jdaggett@1662 | 4133 | </dl> |
jdaggett@1662 | 4134 | |
jdaggett@1662 | 4135 | <p>The example below shows how these different properties can be combined |
jdaggett@1662 | 4136 | to influence the rendering of tabular data with fonts that support these |
jdaggett@1662 | 4137 | features. Within normal paragraph text, proportional numbers are used |
jdaggett@1662 | 4138 | while tabular numbers are used so that columns of numbers line up |
jdaggett@1662 | 4139 | properly: |
jdaggett@1662 | 4140 | |
jdaggett@1662 | 4141 | <div class=figure style="padding: 0; margin: auto;"><img alt="combining |
jdaggett@1662 | 4142 | number styles" src=numberstyles.png> |
jdaggett@1662 | 4143 | <p class=caption>Using number styles |
jdaggett@1662 | 4144 | </div> |
jdaggett@1662 | 4145 | |
jdaggett@1662 | 4146 | <dl> |
jdaggett@1662 | 4147 | <dt><dfn id=diagonal-fractions>diagonal-fractions</dfn> |
jdaggett@1662 | 4148 | |
jdaggett@6436 | 4149 | <dd>Enables display of lining diagonal fractions (OpenType feature: <span |
jdaggett@6436 | 4150 | class=tag>frac</span>). |
jdaggett@1662 | 4151 | </dl> |
jdaggett@1662 | 4152 | |
jdaggett@1662 | 4153 | <div class=featex><img alt="diagonal fraction example" src=frac.png></div> |
jdaggett@1662 | 4154 | |
jdaggett@1662 | 4155 | <dl> |
jdaggett@1662 | 4156 | <dt><dfn id=stacked-fractions>stacked-fractions</dfn> |
jdaggett@1662 | 4157 | |
jdaggett@6436 | 4158 | <dd>Enables display of lining stacked fractions (OpenType feature: <span |
jdaggett@6436 | 4159 | class=tag>afrc</span>). |
jdaggett@1662 | 4160 | </dl> |
jdaggett@1662 | 4161 | |
jdaggett@1662 | 4162 | <div class=featex><img alt="stacked fraction example" src=afrc.png></div> |
jdaggett@1662 | 4163 | |
jdaggett@1662 | 4164 | <dl> |
jdaggett@3638 | 4165 | <dt><dfn id=ordinal>ordinal</dfn> |
jdaggett@3638 | 4166 | |
jdaggett@3638 | 4167 | <dd>Enables display of forms used with ordinal numbers (OpenType feature: |
jdaggett@6436 | 4168 | <span class=tag>ordn</span>). |
jdaggett@3638 | 4169 | |
jdaggett@1662 | 4170 | <dt><dfn id=slashed-zero>slashed-zero</dfn> |
jdaggett@1662 | 4171 | |
jdaggett@6436 | 4172 | <dd>Enables display of slashed zeros (OpenType feature: <span |
jdaggett@6436 | 4173 | class=tag>zero</span>). |
jdaggett@1662 | 4174 | </dl> |
jdaggett@1662 | 4175 | |
jdaggett@1662 | 4176 | <div class=featex><img alt="slashed zero example" src=zero.png></div> |
jdaggett@1662 | 4177 | |
jdaggett@1662 | 4178 | <div class=example id=steak-marinade> |
jdaggett@1662 | 4179 | <p>A simple flank steak marinade recipe, rendered with automatic fractions |
jdaggett@1662 | 4180 | and old-style numerals:</p> |
jdaggett@1662 | 4181 | |
jdaggett@1662 | 4182 | <pre>.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; } |
jdaggett@1662 | 4183 | |
jdaggett@1662 | 4184 | <h4>Steak marinade:</h4> |
jdaggett@1662 | 4185 | <ul> |
jdaggett@1662 | 4186 | <li><span class="amount">2</span> tbsp olive oil</li> |
jdaggett@1662 | 4187 | <li><span class="amount">1</span> tbsp lemon juice</li> |
jdaggett@1662 | 4188 | <li><span class="amount">1</span> tbsp soy sauce</li> |
jdaggett@1662 | 4189 | <li><span class="amount">1 1/2</span> tbsp dry minced onion</li> |
jdaggett@1662 | 4190 | <li><span class="amount">2 1/2</span> tsp italian seasoning</li> |
jdaggett@1732 | 4191 | <li>Salt &amp; pepper</li> |
jdaggett@1662 | 4192 | </ul> |
jdaggett@1662 | 4193 | |
jdaggett@5596 | 4194 | <p>Mix the meat with the marinade and let it sit covered in the refrigerator |
jdaggett@5596 | 4195 | for a few hours or overnight.</p> |
jdaggett@1662 | 4196 | </pre> |
jdaggett@1662 | 4197 | </div> |
jdaggett@2118 | 4198 | <!-- prop: font-variant-alternates --> |
jdaggett@2118 | 4199 | |
jdaggett@2118 | 4200 | <h3 id=font-variant-alternates-prop><span class=secno>6.8 </span>Alternates |
jdaggett@2118 | 4201 | and swashes: the <a |
jdaggett@2118 | 4202 | href="#propdef-font-variant-alternates">font-variant-alternates</a> |
jdaggett@2118 | 4203 | property</h3> |
jdaggett@2118 | 4204 | |
jdaggett@6176 | 4205 | <table class=propdef id=namefont-variant-alternatesvaluenormal-s> |
jdaggett@2118 | 4206 | <tbody> |
jdaggett@2118 | 4207 | <tr> |
jdaggett@2118 | 4208 | <td>Name: |
jdaggett@2118 | 4209 | |
jdaggett@2118 | 4210 | <td><dfn |
jdaggett@2118 | 4211 | id=propdef-font-variant-alternates>font-variant-alternates</dfn> |
jdaggett@2118 | 4212 | |
jdaggett@2118 | 4213 | <tr> |
jdaggett@2118 | 4214 | <td>Value: |
jdaggett@2118 | 4215 | |
jdaggett@8225 | 4216 | <td>normal | [ <a href="#stylistic" |
jdaggett@8225 | 4217 | title=stylistic>stylistic(<feature-value-name>)</a> || <a |
jdaggett@8225 | 4218 | href="#historical-forms">historical-forms</a> || <a href="#styleset" |
jdaggett@8225 | 4219 | title=styleset>styleset(<feature-value-name> #)</a> || <a |
jdaggett@8225 | 4220 | href="#character-variant" |
jdaggett@8225 | 4221 | title=character-variant>character-variant(<feature-value-name> |
jdaggett@8225 | 4222 | #)</a> || <a href="#swash" |
jdaggett@8225 | 4223 | title=swash>swash(<feature-value-name>)</a> || <a |
jdaggett@8225 | 4224 | href="#ornaments" |
jdaggett@8225 | 4225 | title=ornaments>ornaments(<feature-value-name>)</a> || <a |
jdaggett@8225 | 4226 | href="#annotation" |
jdaggett@8225 | 4227 | title=annotation>annotation(<feature-value-name>)</a> ] |
jdaggett@2118 | 4228 | |
jdaggett@2118 | 4229 | <tr> |
jdaggett@2118 | 4230 | <td>Initial: |
jdaggett@2118 | 4231 | |
jdaggett@2118 | 4232 | <td>normal |
jdaggett@2118 | 4233 | |
jdaggett@2118 | 4234 | <tr> |
jdaggett@2118 | 4235 | <td>Applies to: |
jdaggett@2118 | 4236 | |
jdaggett@2118 | 4237 | <td>all elements |
jdaggett@2118 | 4238 | |
jdaggett@2118 | 4239 | <tr> |
jdaggett@2118 | 4240 | <td>Inherited: |
jdaggett@2118 | 4241 | |
jdaggett@2118 | 4242 | <td>yes |
jdaggett@2118 | 4243 | |
jdaggett@2118 | 4244 | <tr> |
jdaggett@2118 | 4245 | <td>Percentages: |
jdaggett@2118 | 4246 | |
jdaggett@2118 | 4247 | <td>N/A |
jdaggett@2118 | 4248 | |
jdaggett@2118 | 4249 | <tr> |
jdaggett@2118 | 4250 | <td>Media: |
jdaggett@2118 | 4251 | |
jdaggett@2118 | 4252 | <td>visual |
jdaggett@2118 | 4253 | |
jdaggett@2118 | 4254 | <tr> |
jdaggett@2118 | 4255 | <td>Computed value: |
jdaggett@2118 | 4256 | |
jdaggett@2118 | 4257 | <td>as specified |
jdaggett@7377 | 4258 | |
jdaggett@7377 | 4259 | <tr> |
jdaggett@7377 | 4260 | <td>Animatable: |
jdaggett@7377 | 4261 | |
jdaggett@7377 | 4262 | <td>no |
jdaggett@2118 | 4263 | </table> |
jdaggett@2118 | 4264 | |
jdaggett@2118 | 4265 | <p>For any given character, fonts can provide a variety of alternate glyphs |
jdaggett@2118 | 4266 | in addition to the default glyph for that character. This property |
jdaggett@2118 | 4267 | provides control over the selection of these alternate glyphs. |
jdaggett@2118 | 4268 | |
jdaggett@7041 | 4269 | <p>In cases where multiple alternates are possible, authors define a |
jdaggett@7041 | 4270 | <code><feature-value-name></code> using the |
jdaggett@7041 | 4271 | <code>@font-feature-values</code> rule described below to indicate the |
jdaggett@7041 | 4272 | specific alternate to be used. The nature of these alternates is font |
jdaggett@7041 | 4273 | specific, so the rule defines values for a specific font family or set of |
jdaggett@7041 | 4274 | families. When a particular value has not been defined for a given family, |
jdaggett@7041 | 4275 | the named value is treated as if the feature had omitted from the style |
jdaggett@7041 | 4276 | rule. If a given value is outside the range supported by a given font, the |
jdaggett@7041 | 4277 | value is ignored. These values never apply to generic font families, nor |
jdaggett@7041 | 4278 | to families selected as part of system font fallback. Values that behave |
jdaggett@7041 | 4279 | this way are marked as <em>font specific</em>. |
jdaggett@2556 | 4280 | |
jdaggett@2118 | 4281 | <p>Individual values have the following meanings: |
jdaggett@2118 | 4282 | |
jdaggett@2118 | 4283 | <dl> |
jdaggett@8277 | 4284 | <dt><dfn id=normal2>normal</dfn> |
jdaggett@5809 | 4285 | |
jdaggett@5809 | 4286 | <dd>None of the features listed below are enabled. |
jdaggett@5809 | 4287 | |
jdaggett@8225 | 4288 | <dt><dfn id=stylistic |
jdaggett@7060 | 4289 | title=stylistic>stylistic(<feature-value-name>)</dfn> |
jdaggett@2118 | 4290 | |
jdaggett@2118 | 4291 | <dd>Enables display of stylistic alternates (<em>font specific</em>, |
jdaggett@6436 | 4292 | OpenType feature: <span class=tag>salt |
jdaggett@6436 | 4293 | <feature-value-name></span>). |
jdaggett@2118 | 4294 | </dl> |
jdaggett@2118 | 4295 | |
jdaggett@2118 | 4296 | <div class=featex><img alt="stylistic alternate example" src=salt.png></div> |
jdaggett@2118 | 4297 | |
jdaggett@2118 | 4298 | <dl> |
jdaggett@2118 | 4299 | <dt><dfn id=historical-forms>historical-forms</dfn> |
jdaggett@2118 | 4300 | |
jdaggett@6436 | 4301 | <dd>Enables display of historical forms (OpenType feature: <span |
jdaggett@6436 | 4302 | class=tag>hist</span>). |
jdaggett@2118 | 4303 | </dl> |
jdaggett@2118 | 4304 | |
jdaggett@2118 | 4305 | <div class=featex><img alt="historical form example" src=hist.png></div> |
jdaggett@2118 | 4306 | |
jdaggett@2118 | 4307 | <dl> |
jdaggett@8225 | 4308 | <dt><dfn id=styleset title=styleset>styleset(<feature-value-name> |
jdaggett@8225 | 4309 | #)</dfn> |
jdaggett@2118 | 4310 | |
jdaggett@2118 | 4311 | <dd>Enables display with stylistic sets (<em>font specific</em>, OpenType |
jdaggett@6436 | 4312 | feature: <span class=tag>ss<feature-index></span> OpenType |
jdaggett@6436 | 4313 | currently defines <span class=tag>ss01</span> through <span |
jdaggett@6436 | 4314 | class=tag>ss20</span>). |
jdaggett@2118 | 4315 | </dl> |
jdaggett@2118 | 4316 | |
jdaggett@2118 | 4317 | <div class=featex><img alt="styleset example" src=ssnn.png></div> |
jdaggett@2118 | 4318 | |
jdaggett@2118 | 4319 | <dl> |
jdaggett@8225 | 4320 | <dt><dfn id=character-variant |
jdaggett@8225 | 4321 | title=character-variant>character-variant(<feature-value-name> |
jdaggett@8225 | 4322 | #)</dfn> |
jdaggett@2118 | 4323 | |
jdaggett@2118 | 4324 | <dd>Enables display of specific character variants (<em>font |
jdaggett@6436 | 4325 | specific</em>, OpenType feature: <span |
jdaggett@6436 | 4326 | class=tag>cv<feature-index></span> OpenType currently defines <span |
jdaggett@6436 | 4327 | class=tag>cv01</span> through <span class=tag>cv99</span>). |
jdaggett@2118 | 4328 | |
jdaggett@8225 | 4329 | <dt><dfn id=swash title=swash>swash(<feature-value-name>)</dfn> |
jdaggett@2118 | 4330 | |
jdaggett@2118 | 4331 | <dd>Enables display of swash glyphs (<em>font specific</em>, OpenType |
jdaggett@6436 | 4332 | feature: <span class=tag>swsh <feature-index>, cswh |
jdaggett@6436 | 4333 | <feature-index></span>). |
jdaggett@2118 | 4334 | </dl> |
jdaggett@2118 | 4335 | |
jdaggett@2118 | 4336 | <div class=featex><img alt="swash example" src=swsh.png></div> |
jdaggett@2118 | 4337 | |
jdaggett@2118 | 4338 | <dl> |
jdaggett@8225 | 4339 | <dt><dfn id=ornaments |
jdaggett@7060 | 4340 | title=ornaments>ornaments(<feature-value-name>)</dfn> |
jdaggett@2118 | 4341 | |
jdaggett@2118 | 4342 | <dd>Enables replacement of default glyphs with ornaments, if provided in |
jdaggett@6436 | 4343 | the font (<em>font specific</em>, OpenType feature: <span class=tag>ornm |
jdaggett@6436 | 4344 | <feature-index></span>). Some fonts may offer ornament glyphs as |
jdaggett@2118 | 4345 | alternates for a wide collection of characters; however, displaying |
jdaggett@2118 | 4346 | arbitrary characters (e.g., alphanumerics) as ornaments is poor practice |
jdaggett@2118 | 4347 | as it distorts the semantics of the data. Font designers are encouraged |
jdaggett@2118 | 4348 | to encode all ornaments (except those explicitly encoded in the Unicode |
jdaggett@2118 | 4349 | Dingbats blocks, etc.) as alternates for the bullet character (U+2022) to |
jdaggett@2118 | 4350 | allow authors to select the desired glyph using |
jdaggett@2118 | 4351 | <feature-value-name>. |
jdaggett@2118 | 4352 | </dl> |
jdaggett@2118 | 4353 | |
jdaggett@2118 | 4354 | <div class=featex><img alt="ornaments example" src=ornm.png></div> |
jdaggett@2118 | 4355 | |
jdaggett@2118 | 4356 | <dl> |
jdaggett@8225 | 4357 | <dt><dfn id=annotation |
jdaggett@7060 | 4358 | title=annotation>annotation(<feature-value-name>)</dfn> |
jdaggett@2118 | 4359 | |
jdaggett@2118 | 4360 | <dd>Enables display of alternate annotation forms (<em>font specific</em>, |
jdaggett@6436 | 4361 | OpenType feature: <span class=tag>nalt <feature-index></span>). |
jdaggett@2118 | 4362 | </dl> |
jdaggett@2118 | 4363 | |
jdaggett@2118 | 4364 | <div class=featex><img alt="alternate annotation form example" |
jdaggett@2118 | 4365 | src=nalt.png></div> |
jdaggett@2118 | 4366 | |
jdaggett@2472 | 4367 | <h3 id=font-feature-values><span class=secno>6.9 </span>Defining font |
jdaggett@7096 | 4368 | specific alternates: the <code>@font-feature-values</code> rule</h3> |
jdaggett@2472 | 4369 | |
jdaggett@4624 | 4370 | <p>Several of the possible values of ‘<a |
jdaggett@4624 | 4371 | href="#propdef-font-variant-alternates"><code |
jdaggett@4624 | 4372 | class=property>font-variant-alternates</code></a>’ listed above are |
jdaggett@4624 | 4373 | labeled as "font specific". For these features fonts may define not just a |
jdaggett@4624 | 4374 | single glyph but a set of alternate glyphs with an index to select a given |
jdaggett@7096 | 4375 | alternate. Since these are font family specific, the |
jdaggett@7096 | 4376 | <code>@font-feature-values</code> rule is used to define named-values for |
jdaggett@7096 | 4377 | these indices for a given family. |
jdaggett@2472 | 4378 | |
jdaggett@2472 | 4379 | <p>In the case of the swash Q in the example shown above, the swash could |
jdaggett@2472 | 4380 | be specified using these style rules: |
jdaggett@2472 | 4381 | |
jdaggett@2472 | 4382 | <pre> |
jdaggett@7041 | 4383 | |
jdaggett@2472 | 4384 | @font-feature-values Jupiter Sans { |
jdaggett@7041 | 4385 | @swash { |
jdaggett@7041 | 4386 | delicate: 1; |
jdaggett@7041 | 4387 | flowing: 2; |
jdaggett@7041 | 4388 | } |
jdaggett@2472 | 4389 | } |
jdaggett@2472 | 4390 | |
jdaggett@2472 | 4391 | h2 { font-family: Jupiter Sans, sans-serif; } |
jdaggett@2472 | 4392 | |
jdaggett@2472 | 4393 | /* show the second swash variant in h2 headings */ |
jdaggett@2472 | 4394 | h2:first-letter { font-variant-alternates: swash(flowing); } |
jdaggett@2472 | 4395 | |
jdaggett@2479 | 4396 | <h2>Quick</h2></pre> |
jdaggett@2472 | 4397 | |
jdaggett@2472 | 4398 | <p>When Jupiter Sans is present, the second alternate swash alternate will |
jdaggett@2472 | 4399 | be displayed. When not present, no swash character will be shown, since |
jdaggett@2472 | 4400 | the specific named-value "flowing" is only defined for the Jupiter Sans |
jdaggett@2472 | 4401 | family. The @-mark indicates the name of the property value for which a |
jdaggett@8031 | 4402 | named-value can be used. The name "flowing" is chosen by the author, the |
jdaggett@8031 | 4403 | values specified within a given font's data. |
jdaggett@8031 | 4404 | |
jdaggett@8031 | 4405 | <p>In terms of the grammar, this specification defines the following |
jdaggett@8225 | 4406 | productions:</p> |
jdaggett@8225 | 4407 | <!-- |
jdaggett@8225 | 4408 | <pre><dfn>supports_rule</dfn> |
jdaggett@8225 | 4409 | : <i>SUPPORTS_SYM</i> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <i>supports_condition</i> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <i>group_rule_body</i> |
jdaggett@8031 | 4410 | ; |
jdaggett@8031 | 4411 | |
jdaggett@8225 | 4412 | <dfn>supports_condition</dfn> |
jdaggett@8225 | 4413 | : <i>supports_negation</i> | <i>supports_conjunction</i> | <i>supports_disjunction</i> | |
jdaggett@8225 | 4414 | <i>supports_condition_in_parens</i> |
jdaggett@8031 | 4415 | ; |
jdaggett@8031 | 4416 | |
jdaggett@8225 | 4417 | <dfn>supports_condition_in_parens</dfn> |
jdaggett@8225 | 4418 | : ( '(' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <i>supports_condition</i> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* ')' ) | <i>supports_declaration_condition</i> | |
jdaggett@8225 | 4419 | <i>general_enclosed</i> |
jdaggett@8031 | 4420 | ; |
jdaggett@8031 | 4421 | |
jdaggett@8225 | 4422 | <dfn>supports_negation</dfn> |
jdaggett@8225 | 4423 | : <a href="http://www.w3.org/TR/css3-mediaqueries/#syntax"><i>NOT</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>+ <i>supports_condition_in_parens</i> |
jdaggett@8031 | 4424 | ; |
jdaggett@8031 | 4425 | |
jdaggett@8225 | 4426 | <dfn>supports_conjunction</dfn> |
jdaggett@8225 | 4427 | : <i>supports_condition_in_parens</i> ( <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>+ <a href="http://www.w3.org/TR/css3-mediaqueries/#syntax"><i>AND</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>+ <i>supports_condition_in_parens</i> )+ |
jdaggett@8031 | 4428 | ; |
jdaggett@8031 | 4429 | |
jdaggett@8225 | 4430 | <dfn>supports_disjunction</dfn> |
jdaggett@8225 | 4431 | : <i>supports_condition_in_parens</i> ( <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>+ <i>OR</i> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>+ <i>supports_condition_in_parens</i> )+ |
jdaggett@8225 | 4432 | ; |
jdaggett@8225 | 4433 | |
jdaggett@8225 | 4434 | <dfn>supports_declaration_condition</dfn> |
jdaggett@8225 | 4435 | : '(' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>declaration</i></a> ')' |
jdaggett@8225 | 4436 | ; |
jdaggett@8225 | 4437 | |
jdaggett@8225 | 4438 | <dfn>general_enclosed</dfn> |
jdaggett@8225 | 4439 | : ( <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>FUNCTION</i></a> | '(' ) ( <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>any</i></a> | <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>unused</i></a> )* ')' |
jdaggett@8031 | 4440 | ; |
jdaggett@8032 | 4441 | </pre> |
jdaggett@8032 | 4442 | |
jdaggett@8225 | 4443 | --> |
jdaggett@8225 | 4444 | |
jdaggett@8225 | 4445 | <pre><dfn id=fontfeaturevaluesrule>font_feature_values_rule</dfn> |
jdaggett@8225 | 4446 | : <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 | 4447 | '{' <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 | 4448 | ; |
jdaggett@8225 | 4449 | |
jdaggett@8225 | 4450 | <dfn id=fontfamilynamelist>font_family_name_list</dfn> |
jdaggett@8225 | 4451 | : <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 | 4452 | ; |
jdaggett@8225 | 4453 | |
jdaggett@8225 | 4454 | <dfn id=fontfamilyname>font_family_name</dfn> |
jdaggett@8225 | 4455 | : <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 | 4456 | ; |
jdaggett@8225 | 4457 | |
jdaggett@8225 | 4458 | <dfn id=featurevalueblock>feature_value_block</dfn> |
jdaggett@8225 | 4459 | : <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 | 4460 | '{' <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 | 4461 | ; |
jdaggett@8225 | 4462 | |
jdaggett@8225 | 4463 | <dfn id=featuretype>feature_type</dfn>: |
jdaggett@8225 | 4464 | <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>ATKEYWORD</i></a> |
jdaggett@8225 | 4465 | ; |
jdaggett@8225 | 4466 | |
jdaggett@8225 | 4467 | <dfn id=featurevaluedefinition>feature_value_definition</dfn> |
jdaggett@8225 | 4468 | : <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 | 4469 | ; |
jdaggett@8225 | 4470 | </pre> |
jdaggett@8225 | 4471 | |
jdaggett@8032 | 4472 | <p>The following new token is introduced: |
jdaggett@8032 | 4473 | |
jdaggett@8225 | 4474 | <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 | 4475 | </pre> |
jdaggett@2118 | 4476 | |
jdaggett@8113 | 4477 | <p>Feature value blocks are treated <a |
jdaggett@8113 | 4478 | href="http://www.w3.org/TR/CSS2/syndata.html#at-rules">similar to |
jdaggett@8113 | 4479 | at-rules</a>, they consist of everything up to the next block or |
jdaggett@8113 | 4480 | semi-colon, whichever comes first. |
jdaggett@8113 | 4481 | |
jdaggett@8113 | 4482 | <p>Font feature values rules define a set of values for a specific font |
jdaggett@8113 | 4483 | feature as used for a given set of families. Effectively, they define a |
jdaggett@8113 | 4484 | mapping of ⟨family, feature, ident⟩ → ⟨values⟩ where |
jdaggett@8113 | 4485 | ⟨values⟩ are the indices used for specific features defined for a |
jdaggett@8113 | 4486 | given font. |
jdaggett@8031 | 4487 | |
jdaggett@8031 | 4488 | <p>The font family list uses the same syntax as that used for the ‘<a |
jdaggett@8031 | 4489 | href="#descdef-font-family"><code class=property>font-family</code></a>’ |
jdaggett@8031 | 4490 | property. Within feature value blocks, the feature type is ‘<code |
jdaggett@8031 | 4491 | class=css>@</code>’ followed by the name of the font-specific property |
jdaggett@8225 | 4492 | value (e.g. <a href="#swash"><code>@swash</code></a>). The feature type |
jdaggett@8225 | 4493 | must match, using an ASCII case-insensitive comparison, one of the |
jdaggett@8031 | 4494 | <em>font specific</em> values of the <a |
jdaggett@7680 | 4495 | href="#propdef-font-variant-alternates"><code>font-variant-alternates</code></a> |
jdaggett@8031 | 4496 | property. The values associated with a given idenitifier are limited to |
jdaggett@8031 | 4497 | integer values 0 or greater. |
jdaggett@7679 | 4498 | |
jdaggett@7679 | 4499 | <p>If syntax errors occur within the font family list, the entire rule must |
jdaggett@7679 | 4500 | be ignored. When syntax errors occur within a feature value definition, |
jdaggett@7679 | 4501 | such as invalid identifiers or values, the entire feature value definition |
jdaggett@7679 | 4502 | must be omitted, similar to the way syntax errors in style declarations |
jdaggett@7679 | 4503 | are handled. When the <code><feature-type></code> is invalid, the |
jdaggett@8031 | 4504 | entire associated feature value block must be ignored. |
jdaggett@7679 | 4505 | |
jdaggett@7679 | 4506 | <pre>@font-feature-values Bongo { |
jdaggett@7679 | 4507 | @swash { ornate: 1; } |
jdaggett@7679 | 4508 | annotation { boxed: 4; } /* should be @annotation! */ |
jdaggett@8031 | 4509 | @swash { double-loops: 1; flowing: -1; } /* negative value */ |
jdaggett@8031 | 4510 | @ornaments ; /* incomplete definition */ |
jdaggett@8031 | 4511 | @styleset { double-W: 14; sharp-terminals: 16 1 } /* missing ; */ |
jdaggett@7680 | 4512 | <a href="http://www.angryalien.com/0504/shiningbunnies.html" style="text-decoration: none;">redrum</a> /* random editing mistake */ |
jdaggett@7679 | 4513 | }</pre> |
jdaggett@7679 | 4514 | |
jdaggett@7679 | 4515 | <p>The example above is equivalent to: |
jdaggett@7679 | 4516 | |
jdaggett@7679 | 4517 | <pre>@font-feature-values Bongo { |
jdaggett@7679 | 4518 | @swash { ornate: 1; } |
jdaggett@8031 | 4519 | @swash { double-loops: 1; } |
jdaggett@8031 | 4520 | @styleset { double-W: 14; sharp-terminals: 16 1; } |
jdaggett@7679 | 4521 | }</pre> |
jdaggett@7096 | 4522 | |
jdaggett@7096 | 4523 | <p>If multiple <code>@font-feature-values</code> rules are defined for a |
jdaggett@7096 | 4524 | given family, the resulting values defined are the union of these rules. |
jdaggett@7096 | 4525 | This allows a set of named-values to be defined for a given font family |
jdaggett@7096 | 4526 | globally for a site and specific additions made per-page. If the same |
jdaggett@6307 | 4527 | <feature-value-name> is defined mulitple times for a given |
jdaggett@6307 | 4528 | font-variant value, the last defined value is used. |
jdaggett@2472 | 4529 | |
jdaggett@2472 | 4530 | <pre> |
jdaggett@2472 | 4531 | site.css: |
jdaggett@2472 | 4532 | |
jdaggett@2472 | 4533 | @font-feature-values Mercury Serif { |
jdaggett@7041 | 4534 | @styleset { |
jdaggett@7041 | 4535 | stacked-g: 3; /* "two-storey" versions of g, a */ |
jdaggett@7041 | 4536 | stacked-a: 4; |
jdaggett@7041 | 4537 | } |
jdaggett@2472 | 4538 | } |
jdaggett@2472 | 4539 | |
jdaggett@2472 | 4540 | page.css: |
jdaggett@8277 | 4541 | |
jdaggett@2472 | 4542 | @font-feature-values Mercury Serif { |
jdaggett@7041 | 4543 | @styleset { |
jdaggett@7041 | 4544 | geometric-m: 7; /* alternate version of m */ |
jdaggett@7041 | 4545 | } |
jdaggett@2472 | 4546 | } |
jdaggett@8277 | 4547 | |
jdaggett@2472 | 4548 | body { |
jdaggett@2472 | 4549 | font-family: Mercury Serif, serif; |
jdaggett@2472 | 4550 | |
jdaggett@2472 | 4551 | /* enable both the use of stacked g and alternate m */ |
jdaggett@2472 | 4552 | font-variant-alternates: styleset(stacked-g, geometric-m); |
jdaggett@2472 | 4553 | }</pre> |
jdaggett@2472 | 4554 | |
jdaggett@3571 | 4555 | <p>Only named font families are allowed for <font-family>, rules that |
jdaggett@3571 | 4556 | include generic or system fonts in the list of font families are |
jdaggett@6307 | 4557 | considered syntax errors and the contents of the rules are ignored. |
jdaggett@6307 | 4558 | However, if a user agent defines a generic font to be a specific named |
jdaggett@6307 | 4559 | font (e.g. Helvetica), the settings associated with that family name will |
jdaggett@6307 | 4560 | be used. |
jdaggett@3571 | 4561 | |
jdaggett@3571 | 4562 | <p>For <font-variant-property-value>, only font specific property value |
jdaggett@4624 | 4563 | names supported by the ‘<a href="#propdef-font-variant"><code |
jdaggett@4624 | 4564 | class=property>font-variant</code></a>’ property are recognized, |
jdaggett@4624 | 4565 | definitions for other value names cause a syntax error and are ignored. |
jdaggett@4624 | 4566 | Each property value that is font specific is clearly marked as such. |
jdaggett@7309 | 4567 | Feature value names follow the rules of CSS user identifiers and are |
jdaggett@7229 | 4568 | case-sensitive. They are unique only for a given set of font families and |
jdaggett@3571 | 4569 | font-variant property value; the same identifier used with a different |
jdaggett@3571 | 4570 | font-variant property value is treated as a separate and distinct value. |
jdaggett@2472 | 4571 | |
jdaggett@2472 | 4572 | <p>Using a commonly named value allows authors to use a single style rule |
jdaggett@2472 | 4573 | to cover a set of fonts for which the underlying selector is different for |
jdaggett@2472 | 4574 | each font. If either font in the example below is found, a circled number |
jdaggett@2472 | 4575 | glyph will be used: |
jdaggett@2472 | 4576 | |
jdaggett@2472 | 4577 | <pre>@font-feature-values Taisho Gothic { |
jdaggett@7041 | 4578 | @annotation { boxed: 1; circled: 4; } |
jdaggett@2118 | 4579 | } |
jdaggett@2118 | 4580 | |
jdaggett@2118 | 4581 | @font-feature-values Otaru Kisa { |
jdaggett@7041 | 4582 | @annotation { circled: 1; black-boxed: 3; } |
jdaggett@2118 | 4583 | } |
jdaggett@2118 | 4584 | |
jdaggett@2118 | 4585 | h3.title { |
jdaggett@2118 | 4586 | /* circled form defined for both fonts */ |
jdaggett@2118 | 4587 | font-family: Taisho Gothic, Otaru Kisa; |
jdaggett@2118 | 4588 | font-variant: annotation(circled); |
jdaggett@2118 | 4589 | }</pre> |
jdaggett@2472 | 4590 | |
jdaggett@3571 | 4591 | <p>Most font specific font-variant property values take a single value |
jdaggett@3571 | 4592 | (e.g. swash). The character-variant property value allows two values and |
jdaggett@3571 | 4593 | styleset allows an unlimited number. If a larger number of values are |
jdaggett@3571 | 4594 | assigned to a given name, a syntax error occurs and the entire |
jdaggett@3571 | 4595 | <font-feature-values-declaration> is ignored. |
jdaggett@3571 | 4596 | |
jdaggett@3571 | 4597 | <p>For the styleset property value, multiple values indicate the style sets |
jdaggett@7095 | 4598 | to be enabled. Values between 1 and 99 enable OpenType features <span |
jdaggett@7095 | 4599 | class=tag>ss01</span> through <span class=tag>ss99</span>. However, the |
jdaggett@7095 | 4600 | OpenType standard only officially defines <span class=tag>ss01</span> |
jdaggett@7095 | 4601 | through <span class=tag>ss20</span>. Values greater than 99 or equal to 0 |
jdaggett@7095 | 4602 | are ignored but do not generate a syntax error when parsed. |
jdaggett@2472 | 4603 | |
jdaggett@2472 | 4604 | <pre>@font-feature-values Mars Serif { |
jdaggett@8277 | 4605 | @styleset { |
jdaggett@7041 | 4606 | alt-g: 1; /* implies ss01 = 1 */ |
jdaggett@7041 | 4607 | curly-quotes: 3; /* implies ss03 = 1 */ |
jdaggett@7041 | 4608 | code: 4 5; /* implies ss04 = 1, ss05 = 1 */ |
jdaggett@7041 | 4609 | } |
jdaggett@7041 | 4610 | |
jdaggett@7041 | 4611 | @styleset { |
jdaggett@7095 | 4612 | dumb: 125; /* >99, ignored */ |
jdaggett@7041 | 4613 | } |
jdaggett@7041 | 4614 | |
jdaggett@7041 | 4615 | @swash { |
jdaggett@7041 | 4616 | swishy: 3 5; /* more than 1 value for swash, syntax error */ |
jdaggett@7041 | 4617 | } |
jdaggett@2472 | 4618 | } |
jdaggett@2472 | 4619 | |
jdaggett@2472 | 4620 | p.codeblock { |
jdaggett@2472 | 4621 | /* implies ss03 = 1, ss04 = 1, ss05 = 1 */ |
jdaggett@2472 | 4622 | font-variant-alternates: styleset(curly-quotes, code); |
jdaggett@2472 | 4623 | }</pre> |
jdaggett@2472 | 4624 | |
jdaggett@2472 | 4625 | <p>For character-variant, a single value between 1 and 99 indicates the |
jdaggett@6436 | 4626 | enabling of OpenType feature <span class=tag>cv01</span> through <span |
jdaggett@7095 | 4627 | class=tag>cv99</span>. For OpenType fonts, values greater than 99 or equal |
jdaggett@7095 | 4628 | to 0 are ignored but do not generate a syntax error when parsed. When two |
jdaggett@7095 | 4629 | values are listed, the first value indicates the feature used and the |
jdaggett@7095 | 4630 | second the value passed for that feature. When two value names imply |
jdaggett@7095 | 4631 | different settings for the same underlying feature the last setting is |
jdaggett@7095 | 4632 | used. |
jdaggett@2472 | 4633 | |
jdaggett@2472 | 4634 | <pre>@font-feature-values MM Greek { |
jdaggett@7041 | 4635 | @character-variant { alpha-2: 1 2; } /* implies cv01 = 2 */ |
jdaggett@7041 | 4636 | @character-variant { beta-3: 2 3; } /* implies cv02 = 3 */ |
jdaggett@7041 | 4637 | @character-variant { epsilon: 5 3 6; } /* more than 2 values, syntax error, ignored */ |
jdaggett@7041 | 4638 | @character-variant { gamma: 12; } /* implies cv12 = 1 */ |
jdaggett@7041 | 4639 | @character-variant { zeta: 20 3; } /* implies cv20 = 3 */ |
jdaggett@7041 | 4640 | @character-variant { zeta-2: 20 2; } /* implies cv20 = 2 */ |
jdaggett@7041 | 4641 | @character-variant { silly: 105; } /* >99, ignored */ |
jdaggett@7041 | 4642 | @character-variant { dumb: 323 3; } /* >99, ignored */ |
jdaggett@2472 | 4643 | } |
jdaggett@2472 | 4644 | |
jdaggett@2472 | 4645 | #title { |
jdaggett@2472 | 4646 | /* use the third alternate beta, first alternate gamma */ |
jdaggett@2472 | 4647 | font-variant-alternates: character-variant(beta-3, gamma); |
jdaggett@3571 | 4648 | } |
jdaggett@3571 | 4649 | |
jdaggett@3571 | 4650 | p { |
jdaggett@3571 | 4651 | /* zeta-2 follows zeta, implies cv20 = 2 */ |
jdaggett@3571 | 4652 | font-variant-alternates: character-variant(zeta, zeta-2); |
jdaggett@3571 | 4653 | } |
jdaggett@3571 | 4654 | |
jdaggett@3571 | 4655 | .special { |
jdaggett@3571 | 4656 | /* zeta follows zeta-2, implies cv20 = 3 */ |
jdaggett@3571 | 4657 | font-variant-alternates: character-variant(zeta-2, zeta); |
jdaggett@2472 | 4658 | }</pre> |
jdaggett@2472 | 4659 | |
jdaggett@7377 | 4660 | <p>See the <a href="#om-fontfeaturevalues">object model reference |
jdaggett@7377 | 4661 | section</a> for a description of the interfaces used to modify these rules |
jdaggett@7377 | 4662 | via the CSS Object Model. |
jdaggett@3517 | 4663 | |
jdaggett@2472 | 4664 | <div class=figure><img alt="Matching text on Byzantine seals using |
jdaggett@2472 | 4665 | character variants" src=byzantineseal.png> |
jdaggett@2472 | 4666 | <p class=caption>Byzantine seal text displayed with character variants |
jdaggett@2472 | 4667 | </div> |
jdaggett@2472 | 4668 | |
jdaggett@2472 | 4669 | <div class=example> |
jdaggett@2472 | 4670 | <p>In the figure above, the text in red is rendered using a font |
jdaggett@2472 | 4671 | containing character variants that mimic the character forms found on a |
jdaggett@2472 | 4672 | Byzantine seal from the 8th century A.D. Two lines below is the same text |
jdaggett@2472 | 4673 | displayed in a font without variants. Note the two variants for U and N |
jdaggett@2509 | 4674 | used on the seal.</p> |
jdaggett@2472 | 4675 | |
jdaggett@2472 | 4676 | <pre>@font-feature-values Athena Ruby { |
jdaggett@7041 | 4677 | @character-variant { |
jdaggett@7041 | 4678 | leo-B: 2 1; |
jdaggett@7041 | 4679 | leo-M: 13 3; |
jdaggett@7041 | 4680 | leo-alt-N: 14 1; |
jdaggett@7041 | 4681 | leo-N: 14 2; |
jdaggett@8277 | 4682 | leo-T: 20 1; |
jdaggett@7041 | 4683 | leo-U: 21 2; |
jdaggett@7041 | 4684 | leo-alt-U: 21 4; |
jdaggett@7041 | 4685 | } |
jdaggett@2472 | 4686 | } |
jdaggett@2472 | 4687 | |
jdaggett@2472 | 4688 | p { |
jdaggett@6653 | 4689 | font-variant: discretionary-ligatures, |
jdaggett@6653 | 4690 | character-variant(leo-B, leo-M, leo-N, leo-T, leo-U); |
jdaggett@2472 | 4691 | } |
jdaggett@2472 | 4692 | |
jdaggett@8277 | 4693 | span.alt-N { |
jdaggett@2472 | 4694 | font-variant-alternates: character-variant(leo-alt-N); |
jdaggett@2472 | 4695 | } |
jdaggett@2472 | 4696 | |
jdaggett@2472 | 4697 | span.alt-U { |
jdaggett@2472 | 4698 | font-variant-alternates: character-variant(leo-alt-U); |
jdaggett@2472 | 4699 | } |
jdaggett@2472 | 4700 | |
jdaggett@2472 | 4701 | <p>ENO....UP͞RSTU<span class="alt-U">U</span>͞<span class="alt-U">U</span>ΚΑΙTỤẠG̣IUPNS</p> |
jdaggett@2472 | 4702 | |
jdaggett@8277 | 4703 | <p>LEON|ΚΑΙCONSTA|NTI<span class="alt-N">N</span>OS..|STOIBAṢ.|LIṢROM|AIO<span class="alt-N">N</span></p> |
jdaggett@2472 | 4704 | </pre> |
jdaggett@2118 | 4705 | </div> |
jdaggett@2118 | 4706 | |
jdaggett@2118 | 4707 | <h3 id=font-variant-east-asian-prop><span class=secno>6.10 </span>East |
jdaggett@2118 | 4708 | Asian text rendering: the <a |
jdaggett@1662 | 4709 | href="#propdef-font-variant-east-asian">font-variant-east-asian</a> |
jdaggett@1662 | 4710 | property</h3> |
jdaggett@1662 | 4711 | |
jdaggett@5809 | 4712 | <table class=propdef id=namefont-variant-east-asianvaluenormal-l> |
jdaggett@1662 | 4713 | <tbody> |
jdaggett@1662 | 4714 | <tr> |
jdaggett@1662 | 4715 | <td>Name: |
jdaggett@1662 | 4716 | |
jdaggett@1662 | 4717 | <td><dfn |
jdaggett@1662 | 4718 | id=propdef-font-variant-east-asian>font-variant-east-asian</dfn> |
jdaggett@1662 | 4719 | |
jdaggett@1662 | 4720 | <tr> |
jdaggett@1662 | 4721 | <td>Value: |
jdaggett@1662 | 4722 | |
jdaggett@8225 | 4723 | <td>normal | [ <a |
jdaggett@8225 | 4724 | href="#east-asian-variant-values"><var><east-asian-variant-values></var></a> |
jdaggett@8225 | 4725 | || <a |
jdaggett@8225 | 4726 | href="#east-asian-width-values"><var><east-asian-width-values></var></a> |
jdaggett@8225 | 4727 | || <a href="#ruby">ruby</a> ] |
jdaggett@1662 | 4728 | |
jdaggett@1662 | 4729 | <tr> |
jdaggett@1662 | 4730 | <td>Initial: |
jdaggett@1662 | 4731 | |
jdaggett@1662 | 4732 | <td>normal |
jdaggett@1662 | 4733 | |
jdaggett@1662 | 4734 | <tr> |
jdaggett@1662 | 4735 | <td>Applies to: |
jdaggett@1662 | 4736 | |
jdaggett@1662 | 4737 | <td>all elements |
jdaggett@1662 | 4738 | |
jdaggett@1662 | 4739 | <tr> |
jdaggett@1662 | 4740 | <td>Inherited: |
jdaggett@1662 | 4741 | |
jdaggett@1662 | 4742 | <td>yes |
jdaggett@1662 | 4743 | |
jdaggett@1662 | 4744 | <tr> |
jdaggett@1662 | 4745 | <td>Percentages: |
jdaggett@1662 | 4746 | |
jdaggett@1662 | 4747 | <td>N/A |
jdaggett@1662 | 4748 | |
jdaggett@1662 | 4749 | <tr> |
jdaggett@1662 | 4750 | <td>Media: |
jdaggett@1662 | 4751 | |
jdaggett@1662 | 4752 | <td>visual |
jdaggett@1662 | 4753 | |
jdaggett@1662 | 4754 | <tr> |
jdaggett@1662 | 4755 | <td>Computed value: |
jdaggett@1662 | 4756 | |
jdaggett@1662 | 4757 | <td>as specified |
jdaggett@7377 | 4758 | |
jdaggett@7377 | 4759 | <tr> |
jdaggett@7377 | 4760 | <td>Animatable: |
jdaggett@7377 | 4761 | |
jdaggett@7377 | 4762 | <td>no |
jdaggett@1662 | 4763 | </table> |
jdaggett@1662 | 4764 | |
jdaggett@6693 | 4765 | <p>Allows control of glyph substitution and sizing in East Asian text. |
jdaggett@1662 | 4766 | |
jdaggett@1662 | 4767 | <pre |
jdaggett@8225 | 4768 | 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 | 4769 | |
jdaggett@1662 | 4770 | <pre |
jdaggett@8225 | 4771 | 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 | 4772 | |
jdaggett@1732 | 4773 | <p>Individual values have the following meanings: |
jdaggett@1662 | 4774 | |
jdaggett@1662 | 4775 | <dl> |
jdaggett@8277 | 4776 | <dt><dfn id=normal3>normal</dfn> |
jdaggett@5809 | 4777 | |
jdaggett@5809 | 4778 | <dd>None of the features listed below are enabled. |
jdaggett@5809 | 4779 | |
jdaggett@1662 | 4780 | <dt><dfn id=jis78>jis78</dfn> |
jdaggett@1662 | 4781 | |
jdaggett@6436 | 4782 | <dd>Enables rendering of JIS78 forms (OpenType feature: <span |
jdaggett@6436 | 4783 | class=tag>jp78</span>). |
jdaggett@1662 | 4784 | </dl> |
jdaggett@1662 | 4785 | |
jdaggett@1662 | 4786 | <div class=featex><img alt="JIS78 form example" src=jp78.png></div> |
jdaggett@1662 | 4787 | |
jdaggett@1662 | 4788 | <dl> |
jdaggett@1662 | 4789 | <dt><dfn id=jis83>jis83</dfn> |
jdaggett@1662 | 4790 | |
jdaggett@6436 | 4791 | <dd>Enables rendering of JIS83 forms (OpenType feature: <span |
jdaggett@6436 | 4792 | class=tag>jp83</span>). |
jdaggett@1662 | 4793 | |
jdaggett@1662 | 4794 | <dt><dfn id=jis90>jis90</dfn> |
jdaggett@1662 | 4795 | |
jdaggett@6436 | 4796 | <dd>Enables rendering of JIS90 forms (OpenType feature: <span |
jdaggett@6436 | 4797 | class=tag>jp90</span>). |
jdaggett@1662 | 4798 | |
jdaggett@1662 | 4799 | <dt><dfn id=jis04>jis04</dfn> |
jdaggett@1662 | 4800 | |
jdaggett@6436 | 4801 | <dd>Enables rendering of JIS2004 forms (OpenType feature: <span |
jdaggett@6436 | 4802 | class=tag>jp04</span>). |
jdaggett@6693 | 4803 | <p>The various JIS variants reflect the glyph forms defined in different |
jdaggett@6693 | 4804 | Japanese national standards. Fonts generally include glyphs defined by |
jdaggett@6693 | 4805 | the most recent national standard but it's sometimes necessary to use |
jdaggett@6693 | 4806 | older variants, to match signage for example.</p> |
jdaggett@1662 | 4807 | |
jdaggett@2504 | 4808 | <dt><dfn id=simplified>simplified</dfn> |
jdaggett@2504 | 4809 | |
jdaggett@6436 | 4810 | <dd>Enables rendering of simplified forms (OpenType feature: <span |
jdaggett@6436 | 4811 | class=tag>smpl</span>). |
jdaggett@6693 | 4812 | <p>The ‘<a href="#simplified"><code |
jdaggett@6693 | 4813 | class=property>simplified</code></a>’ and ‘<a |
jdaggett@6693 | 4814 | href="#traditional"><code class=property>traditional</code></a>’ |
jdaggett@6693 | 4815 | values allow control over the glyph forms for characters which have been |
jdaggett@6693 | 4816 | simplified over time but for which the older, traditional form is still |
jdaggett@6693 | 4817 | used in some contexts. The exact set of characters and glyph forms will |
jdaggett@6693 | 4818 | vary to some degree by context for which a given font was designed.</p> |
jdaggett@2504 | 4819 | |
jdaggett@2504 | 4820 | <dt><dfn id=traditional>traditional</dfn> |
jdaggett@2504 | 4821 | |
jdaggett@6436 | 4822 | <dd>Enables rendering of traditional forms (OpenType feature: <span |
jdaggett@6436 | 4823 | class=tag>trad</span>). |
jdaggett@1662 | 4824 | </dl> |
jdaggett@1662 | 4825 | |
jdaggett@1662 | 4826 | <div class=featex><img alt="tradtional form example" src=trad.png></div> |
jdaggett@1662 | 4827 | |
jdaggett@1662 | 4828 | <dl> |
jdaggett@1662 | 4829 | <dt><dfn id=full-width>full-width</dfn> |
jdaggett@1662 | 4830 | |
jdaggett@6436 | 4831 | <dd>Enables rendering of full-width variants (OpenType feature: <span |
jdaggett@6436 | 4832 | class=tag>fwid</span>). |
jdaggett@1662 | 4833 | |
jdaggett@1662 | 4834 | <dt><dfn id=proportional-width>proportional-width</dfn> |
jdaggett@1662 | 4835 | |
jdaggett@1662 | 4836 | <dd>Enables rendering of proportionally-spaced variants (OpenType feature: |
jdaggett@6436 | 4837 | <span class=tag>pwid</span>). |
jdaggett@1662 | 4838 | </dl> |
jdaggett@1662 | 4839 | |
jdaggett@1662 | 4840 | <div class=featex><img alt="proportionally spaced Japanese example" |
jdaggett@1662 | 4841 | src=pwid.png></div> |
jdaggett@1662 | 4842 | |
jdaggett@3638 | 4843 | <dl> |
jdaggett@3638 | 4844 | <dt><dfn id=ruby>ruby</dfn> |
jdaggett@3638 | 4845 | |
jdaggett@6436 | 4846 | <dd>Enables display of ruby variant glyphs (OpenType feature: <span |
jdaggett@6436 | 4847 | class=tag>ruby</span>). Since ruby text is generally smaller than the |
jdaggett@3638 | 4848 | associated body text, font designers can design special glyphs for use |
jdaggett@3638 | 4849 | with ruby that are more readable than scaled down versions of the default |
jdaggett@3638 | 4850 | glyphs. Only glyph selection is affected, there is no associated font |
jdaggett@3638 | 4851 | scaling or other change that affects line layout. The red ruby text below |
jdaggett@3638 | 4852 | is shown with default glyphs (top) and with ruby variant glyphs (bottom). |
jdaggett@3638 | 4853 | Note the slight difference in stroke thickness. |
jdaggett@3638 | 4854 | </dl> |
jdaggett@3638 | 4855 | |
jdaggett@3638 | 4856 | <div class=featex><img alt="ruby variant example" src=rubyshinkansen.png></div> |
jdaggett@3638 | 4857 | |
jdaggett@2118 | 4858 | <h3 id=font-variant-prop><span class=secno>6.11 </span>Overall shorthand |
jdaggett@1856 | 4859 | for font rendering: the <a href="#propdef-font-variant">font-variant</a> |
jdaggett@1662 | 4860 | property</h3> |
jdaggett@1662 | 4861 | |
jdaggett@6436 | 4862 | <table class=propdef id=namefont-variantvaluenormal-none-ltcommo> |
jdaggett@1662 | 4863 | <tbody> |
jdaggett@1662 | 4864 | <tr> |
jdaggett@1662 | 4865 | <td>Name: |
jdaggett@1662 | 4866 | |
jdaggett@1662 | 4867 | <td><dfn id=propdef-font-variant>font-variant</dfn> |
jdaggett@1662 | 4868 | |
jdaggett@1662 | 4869 | <tr> |
jdaggett@1662 | 4870 | <td>Value: |
jdaggett@1662 | 4871 | |
jdaggett@8225 | 4872 | <td>normal | none | [ <a |
jdaggett@8225 | 4873 | href="#common-lig-values"><var><common-lig-values></var></a> || |
jdaggett@8225 | 4874 | <a |
jdaggett@8225 | 4875 | href="#discretionary-lig-values"><var><discretionary-lig-values></var></a> |
jdaggett@8225 | 4876 | || <a |
jdaggett@8225 | 4877 | href="#historical-lig-values"><var><historical-lig-values></var></a> |
jdaggett@8225 | 4878 | || <a |
jdaggett@8225 | 4879 | href="#contextual-alt-values"><var><contextual-alt-values></var></a> |
jdaggett@8225 | 4880 | || <a href="#stylistic"><var |
jdaggett@8225 | 4881 | title=stylistic>stylistic(<feature-value-name>)</var></a> || <a |
jdaggett@8225 | 4882 | href="#historical-forms"><var>historical-forms</var></a> || <a |
jdaggett@8225 | 4883 | href="#styleset"><var |
jdaggett@8225 | 4884 | title=styleset>styleset(<feature-value-name> #)</var></a> || <a |
jdaggett@8225 | 4885 | href="#character-variant"><var |
jdaggett@8225 | 4886 | title=character-variant>character-variant(<feature-value-name> |
jdaggett@8225 | 4887 | #)</var></a> || <a href="#swash"><var |
jdaggett@8225 | 4888 | title=swash>swash(<feature-value-name>)</var></a> || <a |
jdaggett@8225 | 4889 | href="#ornaments"><var |
jdaggett@8225 | 4890 | title=ornaments>ornaments(<feature-value-name>)</var></a> || <a |
jdaggett@8225 | 4891 | href="#annotation"><var |
jdaggett@8225 | 4892 | title=annotation>annotation(<feature-value-name>)</var></a> || [ |
jdaggett@8225 | 4893 | <a href="#small-caps"><i>small-caps</i></a> | <a |
jdaggett@8225 | 4894 | href="#all-small-caps"><i>all-small-caps</i></a> | <a |
jdaggett@8225 | 4895 | href="#petite-caps"><i>petite-caps</i></a> | <a |
jdaggett@8225 | 4896 | href="#all-petite-caps"><i>all-petite-caps</i></a> | <a |
jdaggett@8225 | 4897 | href="#unicase"><i>unicase</i></a> | <a |
jdaggett@8225 | 4898 | href="#titling-caps"><i>titling-caps</i></a> ] || <a |
jdaggett@8225 | 4899 | href="#numeric-figure-values"><var><numeric-figure-values></var></a> |
jdaggett@8225 | 4900 | || <a |
jdaggett@8225 | 4901 | href="#numeric-spacing-values"><var><numeric-spacing-values></var></a> |
jdaggett@8225 | 4902 | || <a |
jdaggett@8225 | 4903 | href="#numeric-fraction-values"><var><numeric-fraction-values></var></a> |
jdaggett@8225 | 4904 | || <a href="#ordinal"><i>ordinal</i></a> || <a |
jdaggett@8225 | 4905 | href="#slashed-zero"><i>slashed-zero</i></a> || <a |
jdaggett@8225 | 4906 | href="#east-asian-variant-values"><var><east-asian-variant-values></var></a> |
jdaggett@8225 | 4907 | || <a |
jdaggett@8225 | 4908 | href="#east-asian-width-values"><var><east-asian-width-values></var></a> |
jdaggett@8225 | 4909 | || <a href="#ruby"><i>ruby</i></a> ] |
jdaggett@1662 | 4910 | |
jdaggett@1662 | 4911 | <tr> |
jdaggett@1662 | 4912 | <td>Initial: |
jdaggett@1662 | 4913 | |
jdaggett@1662 | 4914 | <td>normal |
jdaggett@1662 | 4915 | |
jdaggett@1662 | 4916 | <tr> |
jdaggett@1662 | 4917 | <td>Applies to: |
jdaggett@1662 | 4918 | |
jdaggett@1662 | 4919 | <td>all elements |
jdaggett@1662 | 4920 | |
jdaggett@1662 | 4921 | <tr> |
jdaggett@1662 | 4922 | <td>Inherited: |
jdaggett@1662 | 4923 | |
jdaggett@1662 | 4924 | <td>yes |
jdaggett@1662 | 4925 | |
jdaggett@1662 | 4926 | <tr> |
jdaggett@1662 | 4927 | <td>Percentages: |
jdaggett@1662 | 4928 | |
jdaggett@7377 | 4929 | <td>see individual properties |
jdaggett@1662 | 4930 | |
jdaggett@1662 | 4931 | <tr> |
jdaggett@1662 | 4932 | <td>Media: |
jdaggett@1662 | 4933 | |
jdaggett@1662 | 4934 | <td>visual |
jdaggett@1662 | 4935 | |
jdaggett@1662 | 4936 | <tr> |
jdaggett@1662 | 4937 | <td>Computed value: |
jdaggett@1662 | 4938 | |
jdaggett@7377 | 4939 | <td>see individual properties |
jdaggett@7377 | 4940 | |
jdaggett@7377 | 4941 | <tr> |
jdaggett@7377 | 4942 | <td>Animatable: |
jdaggett@7377 | 4943 | |
jdaggett@7377 | 4944 | <td>see individual properties |
jdaggett@1662 | 4945 | </table> |
jdaggett@1662 | 4946 | |
jdaggett@8277 | 4947 | <p>The value ‘<a href="#normal3"><code |
jdaggett@5809 | 4948 | class=property>normal</code></a>’ resets all other font feature |
jdaggett@8277 | 4949 | properties to their inital value. The ‘<a href="#none"><code |
jdaggett@8276 | 4950 | class=property>none</code></a>’ value sets ‘<a |
jdaggett@6436 | 4951 | href="#propdef-font-variant-ligatures"><code |
jdaggett@8276 | 4952 | class=property>font-variant-ligatures</code></a>’ to ‘<a |
jdaggett@8277 | 4953 | href="#none"><code class=property>none</code></a>’ and resets all other |
jdaggett@8277 | 4954 | font feature properties to their initial value. Like other shorthands, |
jdaggett@8277 | 4955 | using ‘<a href="#propdef-font-variant"><code |
jdaggett@6436 | 4956 | class=property>font-variant</code></a>’ resets unspecified font-variant |
jdaggett@6436 | 4957 | subproperties to their initial values. It does not reset the values of |
jdaggett@6436 | 4958 | either ‘<a href="#propdef-font-language-override"><code |
jdaggett@4624 | 4959 | class=property>font-language-override</code></a>’ or ‘<a |
jdaggett@4624 | 4960 | href="#propdef-font-feature-settings"><code |
jdaggett@4624 | 4961 | class=property>font-feature-settings</code></a>’. |
jdaggett@1662 | 4962 | |
jdaggett@2118 | 4963 | <h3 id=font-feature-settings-prop><span class=secno>6.12 </span>Low-level |
jdaggett@2509 | 4964 | font feature settings control: the <a |
jdaggett@1662 | 4965 | href="#propdef-font-feature-settings">font-feature-settings</a> property</h3> |
jdaggett@1662 | 4966 | |
jdaggett@4624 | 4967 | <table class=propdef id=namefont-feature-settingsvaluenormal-ltf> |
jdaggett@1662 | 4968 | <tbody> |
jdaggett@1662 | 4969 | <tr> |
jdaggett@1662 | 4970 | <td>Name: |
jdaggett@1662 | 4971 | |
jdaggett@1662 | 4972 | <td><dfn id=propdef-font-feature-settings>font-feature-settings</dfn> |
jdaggett@1662 | 4973 | |
jdaggett@1662 | 4974 | <tr> |
jdaggett@1662 | 4975 | <td>Value: |
jdaggett@1662 | 4976 | |
jdaggett@8225 | 4977 | <td>normal | <a |
jdaggett@8225 | 4978 | href="#feature-tag-value"><var><feature-tag-value></var></a> # |
jdaggett@1662 | 4979 | |
jdaggett@1662 | 4980 | <tr> |
jdaggett@1662 | 4981 | <td>Initial: |
jdaggett@1662 | 4982 | |
jdaggett@1662 | 4983 | <td>normal |
jdaggett@1662 | 4984 | |
jdaggett@1662 | 4985 | <tr> |
jdaggett@1662 | 4986 | <td>Applies to: |
jdaggett@1662 | 4987 | |
jdaggett@1662 | 4988 | <td>all elements |
jdaggett@1662 | 4989 | |
jdaggett@1662 | 4990 | <tr> |
jdaggett@1662 | 4991 | <td>Inherited: |
jdaggett@1662 | 4992 | |
jdaggett@1662 | 4993 | <td>yes |
jdaggett@1662 | 4994 | |
jdaggett@1662 | 4995 | <tr> |
jdaggett@1662 | 4996 | <td>Percentages: |
jdaggett@1662 | 4997 | |
jdaggett@1662 | 4998 | <td>N/A |
jdaggett@1662 | 4999 | |
jdaggett@1662 | 5000 | <tr> |
jdaggett@1662 | 5001 | <td>Media: |
jdaggett@1662 | 5002 | |
jdaggett@1662 | 5003 | <td>visual |
jdaggett@1662 | 5004 | |
jdaggett@1662 | 5005 | <tr> |
jdaggett@1662 | 5006 | <td>Computed value: |
jdaggett@1662 | 5007 | |
jdaggett@1662 | 5008 | <td>as specified |
jdaggett@7377 | 5009 | |
jdaggett@7377 | 5010 | <tr> |
jdaggett@7377 | 5011 | <td>Animatable: |
jdaggett@7377 | 5012 | |
jdaggett@7377 | 5013 | <td>no |
jdaggett@1662 | 5014 | </table> |
jdaggett@2474 | 5015 | |
jdaggett@2474 | 5016 | <p>This property provides low-level control over OpenType font features. It |
jdaggett@2474 | 5017 | is intended as a way of providing access to font features that are not |
jdaggett@5809 | 5018 | widely used but are needed for a particular use case. A value of ‘<a |
jdaggett@8277 | 5019 | href="#normal3"><code class=property>normal</code></a>’ means that no |
jdaggett@5809 | 5020 | change in glyph selection or positioning occurs due to this property. |
jdaggett@2474 | 5021 | |
jdaggett@2474 | 5022 | <p> |
jdaggett@2474 | 5023 | |
jdaggett@2474 | 5024 | <pre>/* enable small caps and use second swash alternate */ |
jdaggett@2509 | 5025 | font-feature-settings: "smcp", "swsh" 2;</pre> |
jdaggett@2509 | 5026 | |
jdaggett@2509 | 5027 | <p>Feature tag values have the following syntax: |
jdaggett@2474 | 5028 | |
jdaggett@2474 | 5029 | <pre |
jdaggett@8225 | 5030 | class=prod><dfn id=feature-tag-value><var><feature-tag-value></var></dfn> = <string> [ <integer> | on | off ]?</pre> |
jdaggett@2509 | 5031 | |
jdaggett@5532 | 5032 | <p>The <string> is a case-sensitive OpenType feature tag. As |
jdaggett@5532 | 5033 | specified in the OpenType specification, feature tags contain four ASCII |
jdaggett@5532 | 5034 | characters. Tag strings longer or shorter than four characters, or |
jdaggett@5596 | 5035 | containing characters outside the U+20–7E codepoint range are invalid. |
jdaggett@5532 | 5036 | User agents must not use a feature tag created by truncating or padding |
jdaggett@5532 | 5037 | the string to four characters. Feature tags need only match a feature tag |
jdaggett@5532 | 5038 | defined in the font, they are not limited to explicitly registered |
jdaggett@5532 | 5039 | OpenType features. Fonts defining custom feature tags should follow the <a |
jdaggett@2474 | 5040 | href="http://www.microsoft.com/typography/otspec/featuretags.htm">tag name |
jdaggett@2474 | 5041 | rules</a> defined in the OpenType specification <a |
jdaggett@1662 | 5042 | href="#OPENTYPE-FEATURES" |
jdaggett@2474 | 5043 | rel=biblioentry>[OPENTYPE-FEATURES]<!--{{!OPENTYPE-FEATURES}}--></a>. |
jdaggett@2474 | 5044 | Feature tags not present in the font are ignored; a user agent must not |
jdaggett@2474 | 5045 | attempt to synthesize fallback behavior based on these feature tags. |
jdaggett@2474 | 5046 | |
jdaggett@6436 | 5047 | <p>This means that explicitly disabling the <span class=tag>kern</span> |
jdaggett@6436 | 5048 | feature will not affect the application of kerning data found in the |
jdaggett@6436 | 5049 | ‘<code class=property>kern</code>’ table (as opposed to kerning data |
jdaggett@6436 | 5050 | associated with the <span class=tag>kern</span> feature in the ‘<code |
jdaggett@5946 | 5051 | class=property>GPOS</code>’ table). Authors should use the ‘<a |
jdaggett@5946 | 5052 | href="#propdef-font-kerning"><code |
jdaggett@5946 | 5053 | class=property>font-kerning</code></a>’ property to explictly enable or |
jdaggett@5946 | 5054 | disable kerning since this property affects both types of kerning. |
jdaggett@5946 | 5055 | |
jdaggett@2509 | 5056 | <p>If present, a value indicates an index used for glyph selection. An |
jdaggett@2509 | 5057 | <integer> value must be 0 or greater. A value of 0 indicates that |
jdaggett@2509 | 5058 | the feature is disabled. For boolean features, a value of 1 enables the |
jdaggett@2509 | 5059 | feature. For non-boolean features, a value of 1 or greater enables the |
jdaggett@2509 | 5060 | feature and indicates the feature selection index. A value of ‘<code |
jdaggett@2509 | 5061 | class=property>on</code>’ is synonymous with 1 and ‘<code |
jdaggett@2509 | 5062 | class=property>off</code>’ is synonymous with 0. If the value is |
jdaggett@2509 | 5063 | omitted, a value of 1 is assumed. |
jdaggett@2474 | 5064 | |
jdaggett@2474 | 5065 | <pre> |
jdaggett@2509 | 5066 | font-feature-settings: "dlig" 1; /* dlig=1 enable discretionary ligatures */ |
jdaggett@2509 | 5067 | font-feature-settings: "smcp" on; /* smcp=1 enable small caps */ |
jdaggett@2515 | 5068 | font-feature-settings: 'c2sc'; /* c2sc=1 enable caps to small caps */ |
jdaggett@2509 | 5069 | font-feature-settings: "liga" off; /* liga=0 no common ligatures */ |
jdaggett@2515 | 5070 | font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms */ |
jdaggett@5530 | 5071 | font-feature-settings: "tnum" "hist"; /* invalid, need a comma-delimited list */ |
jdaggett@5530 | 5072 | font-feature-settings: "palin" off; /* good idea but invalid tagname */ |
jdaggett@2509 | 5073 | font-feature-settings: "PKRN"; /* PKRN=1 enable custom feature */ |
jdaggett@5530 | 5074 | font-feature-settings: dlig; /* invalid, tag must be a string */ |
jdaggett@2474 | 5075 | </pre> |
jdaggett@1662 | 5076 | |
jdaggett@8272 | 5077 | <p>When values greater than the range supported by the font are specified, |
jdaggett@8272 | 5078 | the behavior is explicitly undefined. For boolean features, in general |
jdaggett@8272 | 5079 | these will enable the feature. For non-boolean features, out of range |
jdaggett@8272 | 5080 | values will in general be equivalent to a 0 value. However, in both cases |
jdaggett@8272 | 5081 | the exact behavior will depend upon the way the font is designed |
jdaggett@8272 | 5082 | (specifically, which type of lookup is used to define the feature). |
jdaggett@8272 | 5083 | |
jdaggett@4624 | 5084 | <p>Authors should generally use ‘<a href="#propdef-font-variant"><code |
jdaggett@4624 | 5085 | class=property>font-variant</code></a>’ and its related subproperties |
jdaggett@4624 | 5086 | whenever possible and only use this property for special cases where its |
jdaggett@4624 | 5087 | use is the only way of accessing a particular infrequently used font |
jdaggett@4624 | 5088 | feature. |
jdaggett@2474 | 5089 | |
jdaggett@2474 | 5090 | <p>Although specifically defined for OpenType feature tags, feature tags |
jdaggett@2474 | 5091 | for other modern font formats that support font features may be added in |
jdaggett@5530 | 5092 | the future. Where possible, features defined for other font formats should |
jdaggett@5530 | 5093 | attempt to follow the pattern of registered OpenType tags. |
jdaggett@2509 | 5094 | |
jdaggett@1662 | 5095 | <div class=example> |
jdaggett@1662 | 5096 | <p>The Japanese text below will be rendered with half-width kana |
jdaggett@1662 | 5097 | characters:</p> |
jdaggett@1662 | 5098 | |
jdaggett@1662 | 5099 | <pre lang=ja> |
jdaggett@2509 | 5100 | body { font-feature-settings: "hwid"; /* Half-width OpenType feature */ } |
jdaggett@1662 | 5101 | |
jdaggett@1662 | 5102 | <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 | 5103 | </pre> |
jdaggett@1662 | 5104 | </div> |
jdaggett@1662 | 5105 | |
jdaggett@2118 | 5106 | <h3 id=font-language-override-prop><span class=secno>6.13 </span>Font |
jdaggett@1732 | 5107 | language override: the <a |
jdaggett@1732 | 5108 | href="#propdef-font-language-override">font-language-override</a> property</h3> |
jdaggett@1732 | 5109 | |
jdaggett@5809 | 5110 | <table class=propdef id=namefont-language-overridevaluenormal-lt> |
jdaggett@1662 | 5111 | <tbody> |
jdaggett@1662 | 5112 | <tr> |
jdaggett@1662 | 5113 | <td>Name: |
jdaggett@1662 | 5114 | |
jdaggett@1732 | 5115 | <td><dfn id=propdef-font-language-override>font-language-override</dfn> |
jdaggett@1662 | 5116 | |
jdaggett@1662 | 5117 | <tr> |
jdaggett@1662 | 5118 | <td>Value: |
jdaggett@1662 | 5119 | |
jdaggett@5809 | 5120 | <td>normal | <string> |
jdaggett@1662 | 5121 | |
jdaggett@1662 | 5122 | <tr> |
jdaggett@1662 | 5123 | <td>Initial: |
jdaggett@1662 | 5124 | |
jdaggett@1662 | 5125 | <td>normal |
jdaggett@1662 | 5126 | |
jdaggett@1662 | 5127 | <tr> |
jdaggett@1662 | 5128 | <td>Applies to: |
jdaggett@1662 | 5129 | |
jdaggett@1662 | 5130 | <td>all elements |
jdaggett@1662 | 5131 | |
jdaggett@1662 | 5132 | <tr> |
jdaggett@1662 | 5133 | <td>Inherited: |
jdaggett@1662 | 5134 | |
jdaggett@1662 | 5135 | <td>yes |
jdaggett@1662 | 5136 | |
jdaggett@1662 | 5137 | <tr> |
jdaggett@1662 | 5138 | <td>Percentages: |
jdaggett@1662 | 5139 | |
jdaggett@1662 | 5140 | <td>N/A |
jdaggett@1662 | 5141 | |
jdaggett@1662 | 5142 | <tr> |
jdaggett@1662 | 5143 | <td>Media: |
jdaggett@1662 | 5144 | |
jdaggett@1662 | 5145 | <td>visual |
jdaggett@1662 | 5146 | |
jdaggett@1662 | 5147 | <tr> |
jdaggett@1662 | 5148 | <td>Computed value: |
jdaggett@1662 | 5149 | |
jdaggett@1662 | 5150 | <td>as specified |
jdaggett@7377 | 5151 | |
jdaggett@7377 | 5152 | <tr> |
jdaggett@7377 | 5153 | <td>Animatable: |
jdaggett@7377 | 5154 | |
jdaggett@7377 | 5155 | <td>no |
jdaggett@1662 | 5156 | </table> |
jdaggett@1662 | 5157 | |
jdaggett@8277 | 5158 | <p>The value of ‘<a href="#normal3"><code |
jdaggett@8276 | 5159 | class=property>normal</code></a>’ specifies that when rendering with |
jdaggett@8276 | 5160 | OpenType fonts the content language of the element is used to infer the |
jdaggett@8276 | 5161 | OpenType language system. The value of the <string> is a single |
jdaggett@8276 | 5162 | three-letter OpenType <a |
jdaggett@1662 | 5163 | href="http://www.microsoft.com/typography/otspec/languagetags.htm">language |
jdaggett@1662 | 5164 | system tag</a>, defined in the layout tag registry of the OpenType |
jdaggett@8276 | 5165 | specification. It indicates the OpenType language system to be used |
jdaggett@8276 | 5166 | instead of the language system implied by the language of the element. |
jdaggett@1662 | 5167 | |
jdaggett@1662 | 5168 | <div class=example> |
jdaggett@7179 | 5169 | <p>The <a href="http://www.un.org/en/documents/udhr/index.shtml">Universal |
jdaggett@1662 | 5170 | Declaration of Human Rights</a> has been translated into a wide variety |
jdaggett@1662 | 5171 | of languages. In Turkish, Article 9 of this document might be marked up |
jdaggett@1662 | 5172 | as below:</p> |
jdaggett@1662 | 5173 | |
jdaggett@1662 | 5174 | <pre lang=tr><body lang="tr"> |
jdaggett@1662 | 5175 | |
jdaggett@1662 | 5176 | <h4>Madde 9</h4> |
jdaggett@1662 | 5177 | <p>Hiç kimse keyfi olarak tutuklanamaz, alıkonulanamaz veya sürülemez.</p> |
jdaggett@1662 | 5178 | </pre> |
jdaggett@1662 | 5179 | |
jdaggett@1662 | 5180 | <p>Here the user agent uses the value of the ‘<code |
jdaggett@1662 | 5181 | class=property>lang</code>’ attribute when rendering text and |
jdaggett@1662 | 5182 | appropriately renders this text without ‘<code |
jdaggett@4624 | 5183 | class=property>fi</code>’ ligatures. There is no need to use the ‘<a |
jdaggett@4624 | 5184 | href="#propdef-font-language-override"><code |
jdaggett@4624 | 5185 | class=property>font-language-override</code></a>’ property.</p> |
jdaggett@1662 | 5186 | |
jdaggett@1662 | 5187 | <p>However, a given font may lack support for a specific language. In this |
jdaggett@1662 | 5188 | situation authors may need to use the typographic conventions of a |
jdaggett@1662 | 5189 | related language that are supported by that font:</p> |
jdaggett@1662 | 5190 | |
jdaggett@1662 | 5191 | <pre lang=mk><body lang="mk"> <!-- Macedonian lang code --> |
jdaggett@1662 | 5192 | |
jdaggett@1732 | 5193 | body { font-language-override: "SRB"; /* Serbian OpenType language tag */ } |
jdaggett@1662 | 5194 | |
jdaggett@1662 | 5195 | <h4>Члeн 9</h4> |
jdaggett@1662 | 5196 | <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 | 5197 | |
jdaggett@1662 | 5198 | </pre> |
jdaggett@1662 | 5199 | |
jdaggett@1662 | 5200 | <p>The Macedonian text here will be rendered using Serbian typographic |
jdaggett@1662 | 5201 | conventions, with the assumption that the font specified supports |
jdaggett@1662 | 5202 | Serbian.</p> |
jdaggett@1662 | 5203 | </div> |
jdaggett@1662 | 5204 | |
jdaggett@6176 | 5205 | <p><a id=rendering-considerations></a> |
jdaggett@6176 | 5206 | |
jdaggett@6699 | 5207 | <h2 id=font-feature-resolution><span class=secno>7 </span>Font Feature |
jdaggett@6699 | 5208 | Resolution</h2> |
jdaggett@6176 | 5209 | |
jdaggett@6176 | 5210 | <p>As described in the previous section, font features can be enabled in a |
jdaggett@6176 | 5211 | variety of ways, either via the use of ‘<a |
jdaggett@6176 | 5212 | href="#propdef-font-variant"><code |
jdaggett@6176 | 5213 | class=property>font-variant</code></a>’ or ‘<a |
jdaggett@6176 | 5214 | href="#propdef-font-feature-settings"><code |
jdaggett@6176 | 5215 | class=property>font-feature-settings</code></a>’ in a style rule or |
jdaggett@7096 | 5216 | within an <code>@font-face</code> rule. The resolution order for the union |
jdaggett@7096 | 5217 | of these settings is defined below. Features defined via CSS properties |
jdaggett@7096 | 5218 | are applied on top of layout engine default features. |
jdaggett@6176 | 5219 | |
jdaggett@6699 | 5220 | <h3 id=default-features><span class=secno>7.1 </span>Default features</h3> |
jdaggett@6699 | 5221 | |
jdaggett@6176 | 5222 | <p>For OpenType fonts, user agents must enable the default features defined |
jdaggett@6436 | 5223 | in the OpenType documentation for a given script and writing mode. |
jdaggett@6436 | 5224 | Required ligatures, common ligatures and contextual forms must be enabled |
jdaggett@6436 | 5225 | by default (OpenType features: <span class=tag>rlig, liga, clig, |
jdaggett@6436 | 5226 | calt</span>), along with localized forms (OpenType feature: <span |
jdaggett@6436 | 5227 | class=tag>locl</span>), and features required for proper display of |
jdaggett@6436 | 5228 | composed characters and marks (OpenType features: <span class=tag>ccmp, |
jdaggett@6436 | 5229 | mark, mkmk</span>). These features must always be enabled, even when the |
jdaggett@6176 | 5230 | value of the ‘<a href="#propdef-font-variant"><code |
jdaggett@6176 | 5231 | class=property>font-variant</code></a>’ and ‘<a |
jdaggett@6176 | 5232 | href="#propdef-font-feature-settings"><code |
jdaggett@6176 | 5233 | class=property>font-feature-settings</code></a>’ properties is ‘<a |
jdaggett@8277 | 5234 | href="#normal3"><code class=property>normal</code></a>’. Individual |
jdaggett@7377 | 5235 | features are only disabled when explicitly overridden by the author, as |
jdaggett@7377 | 5236 | when ‘<a href="#propdef-font-variant-ligatures"><code |
jdaggett@6176 | 5237 | class=property>font-variant-ligatures</code></a>’ is set to ‘<a |
jdaggett@6176 | 5238 | href="#no-common-ligatures"><code |
jdaggett@7377 | 5239 | class=property>no-common-ligatures</code></a>’. For handling complex |
jdaggett@7377 | 5240 | scripts such as <a |
jdaggett@6176 | 5241 | href="http://www.microsoft.com/typography/otfntdev/arabicot/features.aspx">Arabic</a>, |
jdaggett@6176 | 5242 | <a |
jdaggett@6176 | 5243 | href="http://www.microsoft.com/typography/otfntdev/mongolot/features.htm">Mongolian</a> |
jdaggett@6176 | 5244 | or <a |
jdaggett@6176 | 5245 | href="http://www.microsoft.com/typography/otfntdev/devanot/features.aspx">Devanagari</a> |
jdaggett@6436 | 5246 | additional features are required. For upright text within vertical text |
jdaggett@6436 | 5247 | runs, vertical alternates (OpenType feature: <span class=tag>vert</span>) |
jdaggett@6436 | 5248 | must be enabled. |
jdaggett@1662 | 5249 | |
jdaggett@6699 | 5250 | <h3 id=feature-precedence><span class=secno>7.2 </span>Feature precedence</h3> |
jdaggett@6699 | 5251 | |
jdaggett@3571 | 5252 | <p>General and font specific font feature property settings are resolved in |
jdaggett@6176 | 5253 | the order below, in ascending precedence order. This ordering is used to |
jdaggett@3511 | 5254 | construct a combined list of font features that affect a given text run. |
jdaggett@1662 | 5255 | |
jdaggett@1662 | 5256 | <ol> |
jdaggett@6436 | 5257 | <li>Font features enabled by default, including features required for a |
jdaggett@6436 | 5258 | given script. |
jdaggett@6176 | 5259 | |
jdaggett@7096 | 5260 | <li>If the font is defined via an <code>@font-face</code> rule, the font |
jdaggett@7096 | 5261 | features implied by the font-variant descriptor in the |
jdaggett@7096 | 5262 | <code>@font-face</code> rule. |
jdaggett@7096 | 5263 | |
jdaggett@7096 | 5264 | <li>If the font is defined via an <code>@font-face</code> rule, the font |
jdaggett@7096 | 5265 | features implied by the font-feature-settings descriptor in the |
jdaggett@7096 | 5266 | <code>@font-face</code> rule. |
jdaggett@1662 | 5267 | |
jdaggett@6176 | 5268 | <li>Feature settings determined by properties other than ‘<a |
jdaggett@6176 | 5269 | href="#propdef-font-variant"><code |
jdaggett@6176 | 5270 | class=property>font-variant</code></a>’ or ‘<a |
jdaggett@6176 | 5271 | href="#propdef-font-feature-settings"><code |
jdaggett@6176 | 5272 | class=property>font-feature-settings</code></a>’. For example, setting |
jdaggett@6176 | 5273 | a non-default value for the ‘<code |
jdaggett@6176 | 5274 | class=property>letter-spacing</code>’ property disables ligatures. |
jdaggett@6176 | 5275 | |
jdaggett@4624 | 5276 | <li>Font features implied by the value of the ‘<a |
jdaggett@4624 | 5277 | href="#propdef-font-variant"><code |
jdaggett@4624 | 5278 | class=property>font-variant</code></a>’ property, the related |
jdaggett@4624 | 5279 | font-variant subproperties and any other CSS property that may use |
jdaggett@4624 | 5280 | OpenType features (e.g. the ‘<a href="#propdef-font-kerning"><code |
jdaggett@4624 | 5281 | class=property>font-kerning</code></a>’ property). |
jdaggett@4624 | 5282 | |
jdaggett@4624 | 5283 | <li>Font features implied by the value of ‘<a |
jdaggett@4624 | 5284 | href="#propdef-font-feature-settings"><code |
jdaggett@4624 | 5285 | class=property>font-feature-settings</code></a>’ property. |
jdaggett@1662 | 5286 | </ol> |
jdaggett@1662 | 5287 | |
jdaggett@3511 | 5288 | <p>This ordering allows authors to set up a general set of defaults for |
jdaggett@7096 | 5289 | fonts within their <code>@font-face</code> rules, then override them with |
jdaggett@7096 | 5290 | property settings for specific elements. General property settings |
jdaggett@7096 | 5291 | override the settings in <code>@font-face</code> rules and low-level font |
jdaggett@7096 | 5292 | feature settings override ‘<a href="#propdef-font-variant"><code |
jdaggett@4624 | 5293 | class=property>font-variant</code></a>’ property settings. |
jdaggett@1732 | 5294 | |
jdaggett@1732 | 5295 | <p>For situations where the combined list of font feature settings contains |
jdaggett@3511 | 5296 | more than one value for the same feature, the last value is used. When a |
jdaggett@3511 | 5297 | font lacks support for a given underlying font feature, text is simply |
jdaggett@3511 | 5298 | rendered as if that font feature was not enabled; font fallback does not |
jdaggett@3511 | 5299 | occur and no attempt is made to synthesize the feature except where |
jdaggett@3511 | 5300 | explicitly noted for specific properties. |
jdaggett@1662 | 5301 | |
jdaggett@6699 | 5302 | <h3 id=feature-precedence-examples><span class=secno>7.3 </span>Feature |
jdaggett@6699 | 5303 | precedence examples</h3> |
jdaggett@6699 | 5304 | |
jdaggett@1662 | 5305 | <div class=example> |
jdaggett@1662 | 5306 | <p>With the styles below, numbers are rendered proportionally when used |
jdaggett@1662 | 5307 | within a paragraph but are shown in tabular form within tables of prices:</p> |
jdaggett@1662 | 5308 | |
jdaggett@8277 | 5309 | <pre>body { |
jdaggett@8277 | 5310 | font-variant-numeric: proportional-nums; |
jdaggett@1662 | 5311 | } |
jdaggett@1662 | 5312 | |
jdaggett@1662 | 5313 | table.prices td { |
jdaggett@8277 | 5314 | font-variant-numeric: tabular-nums; |
jdaggett@1662 | 5315 | } |
jdaggett@1662 | 5316 | </pre> |
jdaggett@1662 | 5317 | </div> |
jdaggett@1662 | 5318 | |
jdaggett@1662 | 5319 | <div class=example> |
jdaggett@7096 | 5320 | <p>When the font-variant descriptor is used within an |
jdaggett@7096 | 5321 | <code>@font-face</code> rule, it only applies to the font defined by that |
jdaggett@7096 | 5322 | rule.</p> |
jdaggett@1662 | 5323 | |
jdaggett@1662 | 5324 | <pre>@font-face { |
jdaggett@1662 | 5325 | font-family: MainText; |
jdaggett@2556 | 5326 | src: url(http://example.com/font.ttf); |
jdaggett@1662 | 5327 | font-variant: oldstyle-nums proportional-nums styleset(1,3); |
jdaggett@1662 | 5328 | } |
jdaggett@1662 | 5329 | |
jdaggett@1662 | 5330 | body { |
jdaggett@1662 | 5331 | font-family: MainText, Helvetica; |
jdaggett@1662 | 5332 | } |
jdaggett@1662 | 5333 | |
jdaggett@1662 | 5334 | table.prices td { |
jdaggett@8277 | 5335 | font-variant-numeric: tabular-nums; |
jdaggett@1662 | 5336 | } |
jdaggett@1662 | 5337 | </pre> |
jdaggett@1662 | 5338 | |
jdaggett@1662 | 5339 | <p>In this case, old-style numerals will be used throughout but only where |
jdaggett@1662 | 5340 | the font "MainText" is used. Just as in the previous example, tabular |
jdaggett@4624 | 5341 | values will be used in price tables since ‘<a |
jdaggett@4624 | 5342 | href="#tabular-nums"><code class=property>tabular-nums</code></a>’ |
jdaggett@4624 | 5343 | appears in a general style rule and its use is mutually exclusive with |
jdaggett@4624 | 5344 | ‘<a href="#proportional-nums"><code |
jdaggett@4624 | 5345 | class=property>proportional-nums</code></a>’. Stylistic alternate sets |
jdaggett@4624 | 5346 | will only be used where MainText is used.</p> |
jdaggett@1662 | 5347 | </div> |
jdaggett@1662 | 5348 | |
jdaggett@1662 | 5349 | <div class=example> |
jdaggett@7096 | 5350 | <p>The <code>@font-face</code> rule can also be used to access font |
jdaggett@8198 | 5351 | features in locally available fonts via the use of <code>local()</code> |
jdaggett@8198 | 5352 | in the ‘<a href="#descdef-src"><code class=property>src</code></a>’ |
jdaggett@8198 | 5353 | descriptor of the <code>@font-face</code> definition:</p> |
jdaggett@1662 | 5354 | |
jdaggett@1662 | 5355 | <pre>@font-face { |
jdaggett@1662 | 5356 | font-family: BodyText; |
jdaggett@1662 | 5357 | src: local("HiraMaruPro-W4"); |
jdaggett@1662 | 5358 | font-variant: proportional-width; |
jdaggett@2509 | 5359 | font-feature-settings: "ital"; /* Latin italics within CJK text feature */ |
jdaggett@1662 | 5360 | } |
jdaggett@1662 | 5361 | |
jdaggett@1662 | 5362 | body { font-family: BodyText, serif; } |
jdaggett@1662 | 5363 | </pre> |
jdaggett@1662 | 5364 | |
jdaggett@1662 | 5365 | <p>If available, a Japanese font "Hiragino Maru Gothic" will be used. When |
jdaggett@1662 | 5366 | text rendering occurs, Japanese kana will be proportionally spaced and |
jdaggett@1662 | 5367 | Latin text will be italicised. Text rendered with the fallback serif font |
jdaggett@1662 | 5368 | will use default rendering properties.</p> |
jdaggett@1662 | 5369 | </div> |
jdaggett@1662 | 5370 | |
jdaggett@1662 | 5371 | <div class=example> |
jdaggett@3460 | 5372 | <p>In the example below, discretionary ligatures are enabled only for a |
jdaggett@1662 | 5373 | downloadable font but are disabled within spans of class "special":</p> |
jdaggett@1662 | 5374 | |
jdaggett@1662 | 5375 | <pre>@font-face { |
jdaggett@1662 | 5376 | font-family: main; |
jdaggett@1662 | 5377 | src: url(fonts/ffmeta.woff) format("woff"); |
jdaggett@3460 | 5378 | font-variant: discretionary-ligatures; |
jdaggett@1662 | 5379 | } |
jdaggett@1662 | 5380 | |
jdaggett@1662 | 5381 | body { font-family: main, Helvetica; } |
jdaggett@3460 | 5382 | span.special { font-variant-ligatures: no-discretionary-ligatures; } |
jdaggett@1662 | 5383 | </pre> |
jdaggett@1662 | 5384 | |
jdaggett@7096 | 5385 | <p>Adding an discretionary style rule with the <code>@font-face</code> |
jdaggett@7096 | 5386 | above:</p> |
jdaggett@1662 | 5387 | |
jdaggett@1662 | 5388 | <pre>body { font-family: main, Helvetica; } |
jdaggett@2509 | 5389 | span { font-feature-settings: "dlig"; } |
jdaggett@3460 | 5390 | span.special { font-variant-ligatures: no-discretionary-ligatures; } |
jdaggett@1662 | 5391 | </pre> |
jdaggett@1662 | 5392 | |
jdaggett@3460 | 5393 | <p>Within spans of class "special", discretionary ligatures <em>will</em> |
jdaggett@4624 | 5394 | be rendered. This is because both the ‘<a |
jdaggett@4624 | 5395 | href="#propdef-font-feature-settings"><code |
jdaggett@4624 | 5396 | class=property>font-feature-settings</code></a>’ and ‘<a |
jdaggett@4624 | 5397 | href="#propdef-font-variant-ligatures"><code |
jdaggett@4624 | 5398 | class=property>font-variant-ligatures</code></a>’ properties apply to |
jdaggett@4624 | 5399 | these spans. Although the ‘<code class=css>no-discretionary |
jdaggett@4624 | 5400 | ligatures</code>’ setting of ‘<a |
jdaggett@4624 | 5401 | href="#propdef-font-variant-ligatures"><code |
jdaggett@4624 | 5402 | class=property>font-variant-ligatures</code></a>’ effectively disables |
jdaggett@6436 | 5403 | the OpenType <span class=tag>dlig</span> feature, because the ‘<a |
jdaggett@4624 | 5404 | href="#propdef-font-feature-settings"><code |
jdaggett@4624 | 5405 | class=property>font-feature-settings</code></a>’ is resolved after |
jdaggett@4624 | 5406 | that, the ‘<code class=property>dlig</code>’ value reenables |
jdaggett@4624 | 5407 | discretionary ligatures.</p> |
jdaggett@1662 | 5408 | </div> |
jdaggett@1244 | 5409 | |
jdaggett@7021 | 5410 | <h2 id=object-model><span class=secno>8 </span>Object Model</h2> |
jdaggett@7021 | 5411 | |
jdaggett@7021 | 5412 | <p>The contents of <code>@font-face</code> and |
jdaggett@7021 | 5413 | <code>@font-feature-values</code> rules can be accessed via the following |
jdaggett@7021 | 5414 | extensions to the CSS Object Model. |
jdaggett@7021 | 5415 | |
jdaggett@7021 | 5416 | <h3 id=om-fontface><span class=secno>8.1 </span>The <a |
jdaggett@7021 | 5417 | href="#cssfontfacerule"><code>CSSFontFaceRule</code></a> interface</h3> |
jdaggett@7021 | 5418 | |
jdaggett@7021 | 5419 | <p>The <dfn id=cssfontfacerule>CSSFontFaceRule</dfn> interface represents a |
jdaggett@7096 | 5420 | <code>@font-face</code> rule. |
jdaggett@7021 | 5421 | |
jdaggett@7021 | 5422 | <pre class=idl> |
jdaggett@7021 | 5423 | interface CSSFontFaceRule : CSSRule { |
jdaggett@7041 | 5424 | attribute DOMString family; |
jdaggett@7041 | 5425 | attribute DOMString src; |
jdaggett@7041 | 5426 | attribute DOMString style; |
jdaggett@7041 | 5427 | attribute DOMString weight; |
jdaggett@7041 | 5428 | attribute DOMString stretch; |
jdaggett@7041 | 5429 | attribute DOMString unicodeRange; |
jdaggett@7041 | 5430 | attribute DOMString variant; |
jdaggett@7041 | 5431 | attribute DOMString featureSettings; |
jdaggett@7021 | 5432 | }</pre> |
jdaggett@7021 | 5433 | |
jdaggett@7022 | 5434 | <p>The DOM Level 2 Style specification <a href="#DOM-LEVEL-2-STYLE" |
jdaggett@7022 | 5435 | rel=biblioentry>[DOM-LEVEL-2-STYLE]<!--{{DOM-LEVEL-2-STYLE}}--></a> |
jdaggett@7022 | 5436 | defined a different variant of this rule. This definition supercedes that |
jdaggett@7022 | 5437 | one. |
jdaggett@7021 | 5438 | |
jdaggett@7021 | 5439 | <h3 id=om-fontfeaturevalues><span class=secno>8.2 </span>The <a |
jdaggett@7021 | 5440 | href="#cssfontfeaturevaluesrule"><code>CSSFontFeatureValuesRule</code></a> |
jdaggett@7021 | 5441 | interface</h3> |
jdaggett@7021 | 5442 | |
jdaggett@7021 | 5443 | <p>The <code>CSSRule</code> interface is extended as follows: |
jdaggett@7021 | 5444 | |
jdaggett@7021 | 5445 | <pre class=idl>partial interface CSSRule { |
jdaggett@7021 | 5446 | const unsigned short FONT_FEATURE_VALUES_RULE = 14; |
jdaggett@7021 | 5447 | }</pre> |
jdaggett@7021 | 5448 | |
jdaggett@7021 | 5449 | <p>The <dfn id=cssfontfeaturevaluesrule>CSSFontFeatureValuesRule</dfn> |
jdaggett@7096 | 5450 | interface represents a <code>@font-feature-values</code> rule. |
jdaggett@7021 | 5451 | |
jdaggett@7021 | 5452 | <pre class=idl>interface CSSFontFeatureValuesRule : CSSRule { |
jdaggett@7021 | 5453 | readonly attribute DOMString familyList; |
jdaggett@7021 | 5454 | readonly attribute DOMString valueText; |
jdaggett@7021 | 5455 | };</pre> |
jdaggett@7021 | 5456 | |
jdaggett@7021 | 5457 | <dl class=idl-attributes> |
jdaggett@7021 | 5458 | <dt><var>familyList</var> of type <code>DOMString</code>, readonly |
jdaggett@7021 | 5459 | |
jdaggett@7021 | 5460 | <dd>The list of one or more font families for which a given set of feature |
jdaggett@7021 | 5461 | values is defined. |
jdaggett@7021 | 5462 | |
jdaggett@7021 | 5463 | <dt><var>valueText</var> of type <code>DOMString</code>, readonly |
jdaggett@7021 | 5464 | |
jdaggett@7021 | 5465 | <dd>Serialized set of feature values. |
jdaggett@7021 | 5466 | </dl> |
jdaggett@7021 | 5467 | |
jdaggett@2737 | 5468 | <h2 class=no-num id=platform-props-to-css>Appendix A: Mapping platform font |
jdaggett@1662 | 5469 | properties to CSS properties</h2> |
jdaggett@1662 | 5470 | |
jdaggett@1662 | 5471 | <p><em>This appendix is included as background for some of the problems and |
jdaggett@890 | 5472 | situations that are described in other sections. It should be viewed as |
jdaggett@890 | 5473 | informative only.</em> |
jdaggett@890 | 5474 | |
jdaggett@512 | 5475 | <p>Font properties in CSS are designed to be independent of the underlying |
jdaggett@512 | 5476 | font formats used; they can be used to specify bitmap fonts, Type1 fonts, |
jdaggett@890 | 5477 | SVG fonts in addition to the common TrueType and OpenType fonts. But there |
jdaggett@1244 | 5478 | are facets of the TrueType and OpenType formats that often cause confusion |
jdaggett@2556 | 5479 | for authors and present challenges to implementers on different platforms. |
jdaggett@1244 | 5480 | |
jdaggett@1244 | 5481 | <p>Originally developed at Apple, TrueType was designed as an outline font |
jdaggett@1244 | 5482 | format for both screen and print. Microsoft joined Apple in developing the |
jdaggett@1244 | 5483 | TrueType format and both platforms have supported TrueType fonts since |
jdaggett@1244 | 5484 | then. Font data in the TrueType format consists of a set of tables |
jdaggett@1244 | 5485 | distinguished with common four-letter tag names, each containing a |
jdaggett@1244 | 5486 | specific type of data. For example, naming information, including |
jdaggett@1244 | 5487 | copyright and license information, is stored in the ‘<code |
jdaggett@7311 | 5488 | class=property>name</code>’ table. The <a |
jdaggett@7311 | 5489 | href="#character-map"><em>character map</em></a> (‘<code |
jdaggett@1244 | 5490 | class=property>cmap</code>’) table contains a mapping of character |
jdaggett@1244 | 5491 | encodings to glyphs. Apple later added additional tables for supporting |
jdaggett@1244 | 5492 | enhanced typographic functionality; these are now called Apple Advanced |
jdaggett@1244 | 5493 | Typography, or AAT, fonts. Microsoft and Adobe developed a separate set of |
jdaggett@1662 | 5494 | tables for advanced typography and called their format OpenType <a |
jdaggett@1662 | 5495 | href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>. |
jdaggett@890 | 5496 | |
jdaggett@890 | 5497 | <p>In many cases the font data used under Microsoft Windows or Linux is |
jdaggett@890 | 5498 | slightly different from the data used under Apple's Mac OS X because the |
jdaggett@6694 | 5499 | TrueType format allowed for explicit variation across platforms. This |
jdaggett@7311 | 5500 | includes font metrics, names and <a href="#character-map"><em>character |
jdaggett@7311 | 5501 | map</em></a> data. |
jdaggett@6694 | 5502 | |
jdaggett@6694 | 5503 | <p>Specifically, font family name data is handled differently across |
jdaggett@6694 | 5504 | platforms. For TrueType and OpenType fonts these names are contained in |
jdaggett@6694 | 5505 | the ‘<code class=property>name</code>’ table, in name records with |
jdaggett@8276 | 5506 | name ID 1. Mulitple names can be stored for different locales, but |
jdaggett@6694 | 5507 | Microsoft recommends fonts always include at least a US English version of |
jdaggett@6694 | 5508 | the name. On Windows, Microsoft made the decision for backwards |
jdaggett@6694 | 5509 | compatibility to limit this family name to a maximum of four faces; for |
jdaggett@6694 | 5510 | larger groupings the "preferred family" (name ID 16) or "WWS family" (name |
jdaggett@6694 | 5511 | ID 21) can be used. Other platforms such as OSX don't have this |
jdaggett@8276 | 5512 | limitation, so the family name is used to define all possible groupings. |
jdaggett@6694 | 5513 | |
jdaggett@6694 | 5514 | <p>Other name table data provides names used to uniquely identify a |
jdaggett@6694 | 5515 | specific face within a family. The full font name (name ID 4) and the |
jdaggett@8276 | 5516 | Postscript name (name ID 6) describe a single face uniquely. For example, |
jdaggett@8276 | 5517 | the bold face of the Gill Sans family has a fullname of "Gill Sans Bold" |
jdaggett@8276 | 5518 | and a Postscript name of "GillSans-Bold". There can be multiple localized |
jdaggett@8276 | 5519 | versions of the fullname for a given face, but the Postscript name is |
jdaggett@1244 | 5520 | always a unique name made from a limited set of ASCII characters. |
jdaggett@1244 | 5521 | |
jdaggett@1244 | 5522 | <p>On various platforms, different names are used to search for a font. For |
jdaggett@1244 | 5523 | example, with the Windows GDI CreateIndirectFont API, either a family or |
jdaggett@8276 | 5524 | fullname can be used to lookup a face, while on Mac OS X the |
jdaggett@8095 | 5525 | CTFontCreateWithName API call is used to lookup a given face using the |
jdaggett@8095 | 5526 | fullname and Postscript name. Under Linux, the fontconfig API allows fonts |
jdaggett@8095 | 5527 | to be searched using any of these names. In situations where platform |
jdaggett@8095 | 5528 | API's automatically substitute other font choices, it may be necessary to |
jdaggett@8095 | 5529 | verify a returned font matches a given name. |
jdaggett@1244 | 5530 | |
jdaggett@1244 | 5531 | <p>The weight of a given face can be determined via the usWeightClass field |
jdaggett@1244 | 5532 | of the OS/2 table or inferred from the style name (name ID 2). Likewise, |
jdaggett@1244 | 5533 | the width can be determined via the usWidthClass of the OS/2 table or |
jdaggett@6694 | 5534 | inferred from the style name. For historical reasons related to synthetic |
jdaggett@6694 | 5535 | bolding at weights 200 or lower with the Windows GDI API, font designers |
jdaggett@6694 | 5536 | have sometimes skewed values in the OS/2 table to avoid these weights. |
jdaggett@1244 | 5537 | |
jdaggett@1244 | 5538 | <p>Rendering complex scripts that use contextual shaping such as Thai, |
jdaggett@1244 | 5539 | Arabic and Devanagari requires features present only in OpenType or AAT |
jdaggett@1244 | 5540 | fonts. Currently, complex script rendering is supported on Windows and |
jdaggett@7521 | 5541 | Linux using OpenType font features while both OpenType and AAT font |
jdaggett@7521 | 5542 | features are used under Mac OS X. |
jdaggett@1244 | 5543 | |
jdaggett@2472 | 5544 | <h2 class=no-num id=ch-ch-ch-changes>Changes</h2> |
jdaggett@2472 | 5545 | |
jdaggett@2472 | 5546 | <h3 class=no-num id=recent-changes> Changes from the <a |
jdaggett@7451 | 5547 | href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/">February 2013 |
jdaggett@7242 | 5548 | CSS3 Fonts Working Draft</a></h3> |
jdaggett@2472 | 5549 | |
jdaggett@2472 | 5550 | <p>Major changes include: |
jdaggett@2472 | 5551 | |
jdaggett@2472 | 5552 | <ul> |
jdaggett@7521 | 5553 | <li>Moved font load events into a separate <a |
jdaggett@7521 | 5554 | href="http://dev.w3.org/csswg/css3-font-load-events/">spec</a> |
jdaggett@7679 | 5555 | |
jdaggett@7679 | 5556 | <li>Tightened error handling rules for <code>@font-feature-values</code> |
jdaggett@7679 | 5557 | rules |
jdaggett@8031 | 5558 | |
jdaggett@8031 | 5559 | <li>Added grammar productions for <code>@font-face</code> and |
jdaggett@8031 | 5560 | <code>@font-feature-values</code> rules |
jdaggett@8095 | 5561 | |
jdaggett@8095 | 5562 | <li>Tightened definition of synthetic oblique |
jdaggett@8225 | 5563 | |
jdaggett@8225 | 5564 | <li>Revised definition of ‘<a href="#descdef-unicode-range"><code |
jdaggett@8225 | 5565 | class=property>unicode-range</code></a>’ descriptor |
jdaggett@2472 | 5566 | </ul> |
jdaggett@2472 | 5567 | |
jdaggett@529 | 5568 | <h2 class=no-num id=acknowledgments>Acknowledgments</h2> |
jdaggett@529 | 5569 | |
jdaggett@1662 | 5570 | <p>I'd like to thank Tal Leming, Jonathan Kew and Christopher Slye for all |
jdaggett@1662 | 5571 | their help and feedback. John Hudson was kind enough to take the time to |
jdaggett@2472 | 5572 | explain the subtleties of OpenType language tags and provided the example |
jdaggett@2472 | 5573 | of character variant usage for displaying text on Byzantine seals. Ken |
jdaggett@2472 | 5574 | Lunde and Eric Muller provided valuable feedback on CJK OpenType features |
jdaggett@2472 | 5575 | and Unicode variation selectors. The idea for supporting font features by |
jdaggett@2472 | 5576 | using font-variant subproperties originated with Håkon Wium Lie, Adam |
jdaggett@5890 | 5577 | Twardoch and Tal Leming. Elika Etemad supplied some of the initial design |
jdaggett@7521 | 5578 | ideas for the <code>@font-feature-values</code> rule. Thanks also to House |
jdaggett@7355 | 5579 | Industries for allowing the use of Ed Interlock in the discretionary |
jdaggett@7355 | 5580 | ligatures example. |
jdaggett@1662 | 5581 | |
jdaggett@529 | 5582 | <p>A special thanks to Robert Bringhurst for the sublime mind expansion |
jdaggett@529 | 5583 | that is <em>The Elements of Typographic Style</em>. |
jdaggett@529 | 5584 | |
jdaggett@7242 | 5585 | <h2 class=no-num id=conformance> Conformance</h2> |
jdaggett@7242 | 5586 | |
jdaggett@7242 | 5587 | <h3 class=no-num id=conventions> Document Conventions</h3> |
jdaggett@7242 | 5588 | |
jdaggett@7242 | 5589 | <p>Conformance requirements are expressed with a combination of descriptive |
jdaggett@7242 | 5590 | assertions and RFC 2119 terminology. The key words “MUST”, “MUST |
jdaggett@7242 | 5591 | NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, |
jdaggett@7242 | 5592 | “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the |
jdaggett@7242 | 5593 | normative parts of this document are to be interpreted as described in RFC |
jdaggett@7242 | 5594 | 2119. However, for readability, these words do not appear in all uppercase |
jdaggett@7242 | 5595 | letters in this specification. |
jdaggett@7242 | 5596 | |
jdaggett@7242 | 5597 | <p>All of the text of this specification is normative except sections |
jdaggett@7242 | 5598 | explicitly marked as non-normative, examples, and notes. <a |
jdaggett@7242 | 5599 | href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a> |
jdaggett@7242 | 5600 | |
jdaggett@7242 | 5601 | <p>Examples in this specification are introduced with the words “for |
jdaggett@7242 | 5602 | example” or are set apart from the normative text with |
jdaggett@7242 | 5603 | <code>class="example"</code>, like this: |
jdaggett@7242 | 5604 | |
jdaggett@7242 | 5605 | <div class=example> |
jdaggett@7242 | 5606 | <p>This is an example of an informative example. |
jdaggett@7242 | 5607 | </div> |
jdaggett@7242 | 5608 | |
jdaggett@7242 | 5609 | <p>Informative notes begin with the word “Note” and are set apart from |
jdaggett@7242 | 5610 | the normative text with <code>class="note"</code>, like this: |
jdaggett@7242 | 5611 | |
jdaggett@7242 | 5612 | <p class=note>Note, this is an informative note. |
jdaggett@7242 | 5613 | |
jdaggett@7242 | 5614 | <h3 class=no-num id=conformance-classes> Conformance Classes</h3> |
jdaggett@7242 | 5615 | |
jdaggett@7242 | 5616 | <p>Conformance to CSS Fonts Level 3 Module is defined for three conformance |
jdaggett@7242 | 5617 | classes: |
jdaggett@7242 | 5618 | |
jdaggett@7242 | 5619 | <dl> |
jdaggett@7243 | 5620 | <dt><dfn id=style-sheet title="style sheet!!as conformance class">style |
jdaggett@7242 | 5621 | sheet</dfn> |
jdaggett@7242 | 5622 | |
jdaggett@7242 | 5623 | <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS |
jdaggett@7242 | 5624 | style sheet</a>. |
jdaggett@7242 | 5625 | |
jdaggett@7243 | 5626 | <dt><dfn id=renderer>renderer</dfn> |
jdaggett@7242 | 5627 | |
jdaggett@7242 | 5628 | <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> |
jdaggett@7242 | 5629 | that interprets the semantics of a style sheet and renders documents that |
jdaggett@7242 | 5630 | use them. |
jdaggett@7242 | 5631 | |
jdaggett@7242 | 5632 | <dt><dfn id=authoring-tool>authoring tool</dfn> |
jdaggett@7242 | 5633 | |
jdaggett@7242 | 5634 | <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> |
jdaggett@7242 | 5635 | that writes a style sheet. |
jdaggett@7242 | 5636 | </dl> |
jdaggett@7242 | 5637 | |
jdaggett@7242 | 5638 | <p>A style sheet is conformant to CSS Fonts Level 3 Module if all of its |
jdaggett@7242 | 5639 | declarations that use properties defined in this module have values that |
jdaggett@7242 | 5640 | are valid according to the generic CSS grammar and the individual grammars |
jdaggett@7242 | 5641 | of each property as given in this module. |
jdaggett@7242 | 5642 | |
jdaggett@7242 | 5643 | <p>A renderer is conformant to CSS Fonts Level 3 Module if, in addition to |
jdaggett@7242 | 5644 | interpreting the style sheet as defined by the appropriate specifications, |
jdaggett@7242 | 5645 | it supports all the features defined by CSS Fonts Level 3 Module by |
jdaggett@7242 | 5646 | parsing them correctly and rendering the document accordingly. However, |
jdaggett@7242 | 5647 | the inability of a UA to correctly render a document due to limitations of |
jdaggett@7242 | 5648 | the device does not make the UA non-conformant. (For example, a UA is not |
jdaggett@7242 | 5649 | required to render color on a monochrome monitor.) |
jdaggett@7242 | 5650 | |
jdaggett@7242 | 5651 | <p>An authoring tool is conformant to CSS Fonts Level 3 Module if it writes |
jdaggett@7242 | 5652 | style sheets that are syntactically correct according to the generic CSS |
jdaggett@7242 | 5653 | grammar and the individual grammars of each feature in this module, and |
jdaggett@7242 | 5654 | meet all other conformance requirements of style sheets as described in |
jdaggett@7242 | 5655 | this module. |
jdaggett@7242 | 5656 | |
jdaggett@7242 | 5657 | <h3 class=no-num id=partial> Partial Implementations</h3> |
jdaggett@7242 | 5658 | |
jdaggett@7242 | 5659 | <p>So that authors can exploit the forward-compatible parsing rules to |
jdaggett@7242 | 5660 | assign fallback values, CSS renderers <strong>must</strong> treat as |
jdaggett@7242 | 5661 | invalid (and <a |
jdaggett@7242 | 5662 | href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as |
jdaggett@7242 | 5663 | appropriate</a>) any at-rules, properties, property values, keywords, and |
jdaggett@7242 | 5664 | other syntactic constructs for which they have no usable level of support. |
jdaggett@7242 | 5665 | In particular, user agents <strong>must not</strong> selectively ignore |
jdaggett@7242 | 5666 | unsupported component values and honor supported values in a single |
jdaggett@7242 | 5667 | multi-value property declaration: if any value is considered invalid (as |
jdaggett@7242 | 5668 | unsupported values must be), CSS requires that the entire declaration be |
jdaggett@7242 | 5669 | ignored. |
jdaggett@7242 | 5670 | |
jdaggett@7242 | 5671 | <h3 class=no-num id=experimental> Experimental Implementations</h3> |
jdaggett@7242 | 5672 | |
jdaggett@7242 | 5673 | <p>To avoid clashes with future CSS features, the CSS2.1 specification |
jdaggett@7242 | 5674 | reserves a <a |
jdaggett@7242 | 5675 | href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed |
jdaggett@7242 | 5676 | syntax</a> for proprietary and experimental extensions to CSS. |
jdaggett@7242 | 5677 | |
jdaggett@7242 | 5678 | <p>Prior to a specification reaching the Candidate Recommendation stage in |
jdaggett@7242 | 5679 | the W3C process, all implementations of a CSS feature are considered |
jdaggett@7242 | 5680 | experimental. The CSS Working Group recommends that implementations use a |
jdaggett@7242 | 5681 | vendor-prefixed syntax for such features, including those in W3C Working |
jdaggett@7242 | 5682 | Drafts. This avoids incompatibilities with future changes in the draft. |
jdaggett@7242 | 5683 | |
jdaggett@7242 | 5684 | <h3 class=no-num id=testing> Non-Experimental Implementations</h3> |
jdaggett@7242 | 5685 | |
jdaggett@7242 | 5686 | <p>Once a specification reaches the Candidate Recommendation stage, |
jdaggett@7242 | 5687 | non-experimental implementations are possible, and implementors should |
jdaggett@7242 | 5688 | release an unprefixed implementation of any CR-level feature they can |
jdaggett@7242 | 5689 | demonstrate to be correctly implemented according to spec. |
jdaggett@7242 | 5690 | |
jdaggett@7242 | 5691 | <p>To establish and maintain the interoperability of CSS across |
jdaggett@7242 | 5692 | implementations, the CSS Working Group requests that non-experimental CSS |
jdaggett@7242 | 5693 | renderers submit an implementation report (and, if necessary, the |
jdaggett@7242 | 5694 | testcases used for that implementation report) to the W3C before releasing |
jdaggett@7242 | 5695 | an unprefixed implementation of any CSS features. Testcases submitted to |
jdaggett@7242 | 5696 | W3C are subject to review and correction by the CSS Working Group. |
jdaggett@7242 | 5697 | |
jdaggett@7242 | 5698 | <p>Further information on submitting testcases and implementation reports |
jdaggett@7242 | 5699 | can be found from on the CSS Working Group's website at <a |
jdaggett@7242 | 5700 | href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. |
jdaggett@7242 | 5701 | Questions should be directed to the <a |
jdaggett@7242 | 5702 | href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> |
jdaggett@7242 | 5703 | mailing list. |
jdaggett@7242 | 5704 | |
jdaggett@484 | 5705 | <h2 class=no-num id=references>References</h2> |
jdaggett@484 | 5706 | |
jdaggett@1662 | 5707 | <h3 class=no-num id=normative-references>Normative References</h3> |
jdaggett@484 | 5708 | <!--begin-normative--> |
jdaggett@484 | 5709 | <!-- Sorted by label --> |
jdaggett@484 | 5710 | |
jdaggett@484 | 5711 | <dl class=bibliography> |
jdaggett@8031 | 5712 | <dd style="display: none"><!-- keeps the doc valid if the DL is empty --> |
jdaggett@484 | 5713 | <!----> |
jdaggett@531 | 5714 | |
jdaggett@2461 | 5715 | <dt id=CHARMOD>[CHARMOD] |
jdaggett@2461 | 5716 | |
jdaggett@2461 | 5717 | <dd>Martin J. Dürst; et al. <a |
jdaggett@2737 | 5718 | href="http://www.w3.org/TR/2005/REC-charmod-20050215/"><cite>Character |
jdaggett@2461 | 5719 | Model for the World Wide Web 1.0: Fundamentals.</cite></a> 15 February |
jdaggett@2461 | 5720 | 2005. W3C Recommendation. URL: <a |
jdaggett@2737 | 5721 | href="http://www.w3.org/TR/2005/REC-charmod-20050215/">http://www.w3.org/TR/2005/REC-charmod-20050215/</a> |
jdaggett@2461 | 5722 | </dd> |
jdaggett@2461 | 5723 | <!----> |
jdaggett@2461 | 5724 | |
jdaggett@2457 | 5725 | <dt id=CORS>[CORS] |
jdaggett@1662 | 5726 | |
jdaggett@1662 | 5727 | <dd>Anne van Kesteren. <a |
jdaggett@7242 | 5728 | href="http://www.w3.org/TR/2013/CR-cors-20130129/"><cite>Cross-Origin |
jdaggett@7242 | 5729 | Resource Sharing.</cite></a> 29 January 2013. W3C Candidate |
jdaggett@7242 | 5730 | Recommendation. (Work in progress.) URL: <a |
jdaggett@7242 | 5731 | href="http://www.w3.org/TR/2013/CR-cors-20130129/">http://www.w3.org/TR/2013/CR-cors-20130129/</a> |
jdaggett@1662 | 5732 | </dd> |
jdaggett@1662 | 5733 | <!----> |
jdaggett@1662 | 5734 | |
jdaggett@3041 | 5735 | <dt id=CSS21>[CSS21] |
jdaggett@3041 | 5736 | |
jdaggett@3041 | 5737 | <dd>Bert Bos; et al. <a |
jdaggett@8031 | 5738 | href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style |
jdaggett@3041 | 5739 | Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June |
jdaggett@3041 | 5740 | 2011. W3C Recommendation. URL: <a |
jdaggett@8031 | 5741 | href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> |
jdaggett@3041 | 5742 | </dd> |
jdaggett@3041 | 5743 | <!----> |
jdaggett@3041 | 5744 | |
jdaggett@5833 | 5745 | <dt id=CSS3VAL>[CSS3VAL] |
jdaggett@5833 | 5746 | |
jdaggett@5833 | 5747 | <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a |
jdaggett@6701 | 5748 | href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS |
jdaggett@6701 | 5749 | Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate |
jdaggett@6701 | 5750 | Recommendation. (Work in progress.) URL: <a |
jdaggett@6701 | 5751 | href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a> |
jdaggett@5833 | 5752 | </dd> |
jdaggett@5833 | 5753 | <!----> |
jdaggett@5833 | 5754 | |
jdaggett@1662 | 5755 | <dt id=HTML5>[HTML5] |
jdaggett@1662 | 5756 | |
jdaggett@1856 | 5757 | <dd>Ian Hickson. <a |
jdaggett@7242 | 5758 | href="http://www.w3.org/TR/2012/CR-html5-20121217/"><cite>HTML5.</cite></a> |
jdaggett@7242 | 5759 | 17 December 2012. W3C Candidate Recommendation. (Work in progress.) URL: |
jdaggett@7242 | 5760 | <a |
jdaggett@7242 | 5761 | href="http://www.w3.org/TR/2012/CR-html5-20121217/">http://www.w3.org/TR/2012/CR-html5-20121217/</a> |
jdaggett@1662 | 5762 | </dd> |
jdaggett@1662 | 5763 | <!----> |
jdaggett@1662 | 5764 | |
jdaggett@1662 | 5765 | <dt id=OPEN-FONT-FORMAT>[OPEN-FONT-FORMAT] |
jdaggett@1662 | 5766 | |
jdaggett@1662 | 5767 | <dd><a |
jdaggett@1662 | 5768 | href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip"><cite>Information |
jdaggett@1662 | 5769 | technology — Coding of audio-visual objects — Part 22: Open Font |
jdaggett@1662 | 5770 | Format.</cite></a> International Organization for Standardization. |
jdaggett@1662 | 5771 | ISO/IEC 14496-22:2009. URL: <a |
jdaggett@1662 | 5772 | 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 | 5773 | </dd> |
jdaggett@1662 | 5774 | <!----> |
jdaggett@1662 | 5775 | |
jdaggett@1662 | 5776 | <dt id=OPENTYPE>[OPENTYPE] |
jdaggett@1662 | 5777 | |
jdaggett@1662 | 5778 | <dd><a |
jdaggett@1662 | 5779 | href="http://www.microsoft.com/typography/otspec/default.htm"><cite>OpenType |
jdaggett@1662 | 5780 | specification.</cite></a> Microsoft. URL: <a |
jdaggett@1662 | 5781 | href="http://www.microsoft.com/typography/otspec/default.htm">http://www.microsoft.com/typography/otspec/default.htm</a> |
jdaggett@1662 | 5782 | </dd> |
jdaggett@1662 | 5783 | <!----> |
jdaggett@1662 | 5784 | |
jdaggett@1662 | 5785 | <dt id=OPENTYPE-FEATURES>[OPENTYPE-FEATURES] |
jdaggett@1662 | 5786 | |
jdaggett@1662 | 5787 | <dd><a |
jdaggett@1662 | 5788 | href="http://www.microsoft.com/typography/otspec/featurelist.htm"><cite>OpenType |
jdaggett@1662 | 5789 | feature registry.</cite></a> Microsoft. URL: <a |
jdaggett@1662 | 5790 | href="http://www.microsoft.com/typography/otspec/featurelist.htm">http://www.microsoft.com/typography/otspec/featurelist.htm</a> |
jdaggett@1662 | 5791 | </dd> |
jdaggett@1662 | 5792 | <!----> |
jdaggett@1662 | 5793 | |
jdaggett@7103 | 5794 | <dt id=RFC2119>[RFC2119] |
jdaggett@7103 | 5795 | |
jdaggett@7103 | 5796 | <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key |
jdaggett@7103 | 5797 | words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet |
jdaggett@7103 | 5798 | RFC 2119. URL: <a |
jdaggett@7103 | 5799 | href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> |
jdaggett@7103 | 5800 | </dd> |
jdaggett@7103 | 5801 | <!----> |
jdaggett@7103 | 5802 | |
jdaggett@2457 | 5803 | <dt id=UAX15>[UAX15] |
jdaggett@2457 | 5804 | |
jdaggett@7242 | 5805 | <dd>Mark Davis; Ken Whistler. <a |
jdaggett@7242 | 5806 | href="http://www.unicode.org/reports/tr15/"><cite>Unicode Normalization |
jdaggett@7242 | 5807 | Forms.</cite></a> 31 August 2012. Unicode Standard Annex #15. URL: <a |
jdaggett@7242 | 5808 | href="http://www.unicode.org/reports/tr15/">http://www.unicode.org/reports/tr15/</a> |
jdaggett@2457 | 5809 | </dd> |
jdaggett@2457 | 5810 | <!----> |
jdaggett@2457 | 5811 | |
jdaggett@1856 | 5812 | <dt id=UAX29>[UAX29] |
jdaggett@1856 | 5813 | |
jdaggett@1856 | 5814 | <dd>Mark Davis. <a |
jdaggett@5809 | 5815 | href="http://www.unicode.org/reports/tr29/"><cite>Unicode Text |
jdaggett@7242 | 5816 | Segmentation.</cite></a> 12 September 2012. Unicode Standard Annex #29. |
jdaggett@2461 | 5817 | URL: <a |
jdaggett@5809 | 5818 | href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a> |
jdaggett@1856 | 5819 | </dd> |
jdaggett@1856 | 5820 | <!----> |
jdaggett@1856 | 5821 | |
jdaggett@3041 | 5822 | <dt id=UNICODE6>[UNICODE6] |
jdaggett@531 | 5823 | |
jdaggett@531 | 5824 | <dd>The Unicode Consortium. <a |
jdaggett@7242 | 5825 | href="http://www.unicode.org/versions/Unicode6.2.0/"><cite>The Unicode |
jdaggett@7242 | 5826 | Standard, Version 6.2.0.</cite></a> Defined by: The Unicode Standard, |
jdaggett@7242 | 5827 | Version 6.2.0 URL: <a |
jdaggett@7242 | 5828 | href="http://www.unicode.org/versions/Unicode6.2.0/">http://www.unicode.org/versions/Unicode6.2.0/</a> |
jdaggett@531 | 5829 | </dd> |
jdaggett@531 | 5830 | <!----> |
jdaggett@484 | 5831 | </dl> |
jdaggett@484 | 5832 | <!--end-normative--> |
jdaggett@3041 | 5833 | <!--{{!CSS21}}--> |
jdaggett@5833 | 5834 | <!--{{!CSS3VAL}}--> |
jdaggett@1662 | 5835 | <!--{{!OPENTYPE}}--> |
jdaggett@1662 | 5836 | <!--{{!OPENTYPE-FEATURES}}--> |
jdaggett@1662 | 5837 | <!--{{!OPEN-FONT-FORMAT}}--> |
jdaggett@3041 | 5838 | <!--{{!UNICODE6}}--> |
jdaggett@2457 | 5839 | <!--{{!UAX15}}--> |
jdaggett@1856 | 5840 | <!--{{!UAX29}}--> |
jdaggett@2457 | 5841 | <!--{{!CORS}}--> |
jdaggett@1662 | 5842 | <!--{{!HTML5}}--> |
jdaggett@2461 | 5843 | <!--{{!CHARMOD}}--> |
jdaggett@1662 | 5844 | |
jdaggett@1662 | 5845 | <h3 class=no-num id=other-references>Other References</h3> |
jdaggett@484 | 5846 | <!--begin-informative--> |
jdaggett@484 | 5847 | <!-- Sorted by label --> |
jdaggett@484 | 5848 | |
jdaggett@484 | 5849 | <dl class=bibliography> |
jdaggett@8031 | 5850 | <dd style="display: none"><!-- keeps the doc valid if the DL is empty --> |
jdaggett@484 | 5851 | <!----> |
jdaggett@484 | 5852 | |
jdaggett@3042 | 5853 | <dt id=AAT-FEATURES>[AAT-FEATURES] |
jdaggett@3042 | 5854 | |
jdaggett@3042 | 5855 | <dd><a href="http://developer.apple.com/fonts/registry/"><cite>Apple |
jdaggett@3042 | 5856 | Advanced Typography font feature registry.</cite></a> Apple. URL: <a |
jdaggett@3042 | 5857 | href="http://developer.apple.com/fonts/registry/">http://developer.apple.com/fonts/registry/</a> |
jdaggett@3042 | 5858 | </dd> |
jdaggett@3042 | 5859 | <!----> |
jdaggett@3042 | 5860 | |
jdaggett@512 | 5861 | <dt id=ARABIC-TYPO>[ARABIC-TYPO] |
jdaggett@512 | 5862 | |
jdaggett@513 | 5863 | <dd>Huda Smitshuijzen AbiFares. <cite>Arabic Typography: A Comprehensive |
jdaggett@1148 | 5864 | Sourcebook.</cite> Saqi Books. 2001. ISBN 0-86356-347-3.</dd> |
jdaggett@512 | 5865 | <!----> |
jdaggett@512 | 5866 | |
jdaggett@3042 | 5867 | <dt id=CHARMOD-NORM>[CHARMOD-NORM] |
jdaggett@3042 | 5868 | |
jdaggett@3042 | 5869 | <dd>François Yergeau; et al. <a |
jdaggett@5809 | 5870 | href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/"><cite>Character |
jdaggett@5809 | 5871 | Model for the World Wide Web 1.0: Normalization.</cite></a> 1 May 2012. |
jdaggett@5809 | 5872 | W3C Working Draft. (Work in progress.) URL: <a |
jdaggett@5809 | 5873 | href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/">http://www.w3.org/TR/2012/WD-charmod-norm-20120501/</a> |
jdaggett@3042 | 5874 | </dd> |
jdaggett@3042 | 5875 | <!----> |
jdaggett@3042 | 5876 | |
jdaggett@1732 | 5877 | <dt id=CJKV-INFO-PROCESSING>[CJKV-INFO-PROCESSING] |
jdaggett@1732 | 5878 | |
jdaggett@1732 | 5879 | <dd>Ken Lunde. <cite>CJKV Information Processing, Second Edition.</cite> |
jdaggett@1732 | 5880 | O'Reilly Media, Inc. 2009. ISBN 0-596-51447-1.</dd> |
jdaggett@1732 | 5881 | <!----> |
jdaggett@1732 | 5882 | |
jdaggett@3460 | 5883 | <dt id=CSS3-CONDITIONAL>[CSS3-CONDITIONAL] |
jdaggett@3460 | 5884 | |
jdaggett@3460 | 5885 | <dd>L. David Baron. <a |
jdaggett@7242 | 5886 | href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/"><cite>CSS |
jdaggett@7242 | 5887 | Conditional Rules Module Level 3.</cite></a> 13 December 2012. W3C |
jdaggett@3460 | 5888 | Working Draft. (Work in progress.) URL: <a |
jdaggett@7242 | 5889 | href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/">http://www.w3.org/TR/2012/WD-css3-conditional-20121213/</a> |
jdaggett@3460 | 5890 | </dd> |
jdaggett@3460 | 5891 | <!----> |
jdaggett@3460 | 5892 | |
jdaggett@6701 | 5893 | <dt id=CSS3TEXT>[CSS3TEXT] |
jdaggett@6701 | 5894 | |
jdaggett@6701 | 5895 | <dd>Elika J. Etemad; Koji Ishii. <a |
jdaggett@7041 | 5896 | href="http://www.w3.org/TR/2012/WD-css3-text-20121113/"><cite>CSS Text |
jdaggett@7041 | 5897 | Module Level 3.</cite></a> 13 November 2012. W3C Working Draft. (Work in |
jdaggett@6701 | 5898 | progress.) URL: <a |
jdaggett@7041 | 5899 | href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">http://www.w3.org/TR/2012/WD-css3-text-20121113/</a> |
jdaggett@6701 | 5900 | </dd> |
jdaggett@6701 | 5901 | <!----> |
jdaggett@6701 | 5902 | |
jdaggett@1856 | 5903 | <dt id=DIGITAL-TYPOGRAPHY>[DIGITAL-TYPOGRAPHY] |
jdaggett@1856 | 5904 | |
jdaggett@1856 | 5905 | <dd>Richard Rubinstein. <cite>Digital Typography, An Introduction to Type |
jdaggett@1856 | 5906 | and Composition for Computer System Design.</cite> Addison-Wesley. 1988. |
jdaggett@1856 | 5907 | ISBN 0-201-17633-5.</dd> |
jdaggett@1856 | 5908 | <!----> |
jdaggett@1856 | 5909 | |
jdaggett@7022 | 5910 | <dt id=DOM-LEVEL-2-STYLE>[DOM-LEVEL-2-STYLE] |
jdaggett@7022 | 5911 | |
jdaggett@7022 | 5912 | <dd>Chris Wilson; Philippe Le Hégaret; Vidur Apparao. <a |
jdaggett@7179 | 5913 | href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/"><cite>Document |
jdaggett@7022 | 5914 | Object Model (DOM) Level 2 Style Specification.</cite></a> 13 November |
jdaggett@7022 | 5915 | 2000. W3C Recommendation. URL: <a |
jdaggett@7179 | 5916 | 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 | 5917 | </dd> |
jdaggett@7022 | 5918 | <!----> |
jdaggett@7022 | 5919 | |
jdaggett@498 | 5920 | <dt id=ELEMTYPO>[ELEMTYPO] |
jdaggett@498 | 5921 | |
jdaggett@498 | 5922 | <dd>Robert Bringhurst. <cite>The Elements of Typographic Style, Version |
jdaggett@7488 | 5923 | 4.</cite> Hartley & Marks. 2013. ISBN 0-88179-212-8.</dd> |
jdaggett@498 | 5924 | <!----> |
jdaggett@498 | 5925 | |
jdaggett@513 | 5926 | <dt id=LANGCULTTYPE>[LANGCULTTYPE] |
jdaggett@513 | 5927 | |
jdaggett@1148 | 5928 | <dd>John D. Berry, Ed. <cite>Language Culture Type.</cite> Graphis. 2001. |
jdaggett@1148 | 5929 | ISBN 1-932026-01-0.</dd> |
jdaggett@512 | 5930 | <!----> |
jdaggett@1662 | 5931 | |
jdaggett@1662 | 5932 | <dt id=OPENTYPE-FONT-GUIDE>[OPENTYPE-FONT-GUIDE] |
jdaggett@1662 | 5933 | |
jdaggett@1662 | 5934 | <dd><a |
jdaggett@3538 | 5935 | href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf"><cite>OpenType |
jdaggett@1662 | 5936 | User Guide.</cite></a> FontShop International. URL: <a |
jdaggett@3538 | 5937 | 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 | 5938 | </dd> |
jdaggett@1662 | 5939 | <!----> |
jdaggett@1856 | 5940 | |
jdaggett@2527 | 5941 | <dt id=RASTER-TRAGEDY>[RASTER-TRAGEDY] |
jdaggett@2527 | 5942 | |
jdaggett@2527 | 5943 | <dd>Beat Stamm. <a href="http://www.rastertragedy.com/"><cite>The Raster |
jdaggett@6659 | 5944 | Tragedy at Low-Resolution Revisited.</cite></a> 7 December 2011. URL: <a |
jdaggett@2527 | 5945 | href="http://www.rastertragedy.com/">http://www.rastertragedy.com/</a></dd> |
jdaggett@2527 | 5946 | <!----> |
jdaggett@2527 | 5947 | |
jdaggett@1856 | 5948 | <dt id=WINDOWS-GLYPH-PROC>[WINDOWS-GLYPH-PROC] |
jdaggett@1856 | 5949 | |
jdaggett@1856 | 5950 | <dd>John Hudson. <a |
jdaggett@1856 | 5951 | href="http://www.microsoft.com/typography/developers/opentype/default.htm"><cite>Windows |
jdaggett@1856 | 5952 | Glyph Processing.</cite></a> Microsoft Typogrraphy. URL: <a |
jdaggett@1856 | 5953 | href="http://www.microsoft.com/typography/developers/opentype/default.htm">http://www.microsoft.com/typography/developers/opentype/default.htm</a> |
jdaggett@1856 | 5954 | </dd> |
jdaggett@1856 | 5955 | <!----> |
jdaggett@484 | 5956 | </dl> |
jdaggett@484 | 5957 | <!--end-informative--> |
jdaggett@518 | 5958 | <!--{{ARABIC-TYPO}}--> |
jdaggett@1732 | 5959 | <!--{{CJKV-INFO-PROCESSING}}--> |
jdaggett@1856 | 5960 | <!--{{DIGITAL-TYPOGRAPHY}}--> |
jdaggett@7022 | 5961 | <!--{{DOM-LEVEL-2-STYLE}}--> |
jdaggett@518 | 5962 | <!--{{ELEMTYPO}}--> |
jdaggett@1856 | 5963 | <!--{{LANGCULTTYPE}}--> |
jdaggett@1662 | 5964 | <!--{{OPENTYPE-FONT-GUIDE}}--> |
jdaggett@2527 | 5965 | <!--{{RASTER-TRAGEDY}}--> |
jdaggett@1856 | 5966 | <!--{{WINDOWS-GLYPH-PROC}}--> |
jdaggett@3042 | 5967 | <!--{{CHARMOD-NORM}}--> |
jdaggett@3042 | 5968 | <!--{{AAT-FEATURES}}--> |
jdaggett@3460 | 5969 | <!--{{CSS3-CONDITIONAL}}--> |
jdaggett@6701 | 5970 | <!--{{CSS3TEXT}}--> |
jdaggett@484 | 5971 | |
jdaggett@484 | 5972 | <h2 class=no-num id=index>Index</h2> |
jdaggett@484 | 5973 | <!--begin-index--> |
jdaggett@484 | 5974 | |
jdaggett@484 | 5975 | <ul class=indexlist> |
jdaggett@8225 | 5976 | <li><var><absolute-size></var>, <a href="#absolute-size-value" |
jdaggett@7060 | 5977 | title="<absolute-size>"><strong>3.5</strong></a> |
jdaggett@890 | 5978 | |
jdaggett@8225 | 5979 | <li><var><common-lig-values></var>, <a href="#common-lig-values" |
jdaggett@8225 | 5980 | title="<common-lig-values>"><strong>6.4</strong></a> |
jdaggett@2479 | 5981 | |
jdaggett@2479 | 5982 | <li><var><contextual-alt-values></var>, <a |
jdaggett@8225 | 5983 | href="#contextual-alt-values" |
jdaggett@6176 | 5984 | title="<contextual-alt-values>"><strong>6.4</strong></a> |
jdaggett@2479 | 5985 | |
jdaggett@8225 | 5986 | <li><var><discretionary-lig-values></var>, <a |
jdaggett@8225 | 5987 | href="#discretionary-lig-values" |
jdaggett@8225 | 5988 | title="<discretionary-lig-values>"><strong>6.4</strong></a> |
jdaggett@3460 | 5989 | |
jdaggett@2479 | 5990 | <li><var><east-asian-variant-values></var>, <a |
jdaggett@8225 | 5991 | href="#east-asian-variant-values" |
jdaggett@2479 | 5992 | title="<east-asian-variant-values>"><strong>6.10</strong></a> |
jdaggett@2479 | 5993 | |
jdaggett@2479 | 5994 | <li><var><east-asian-width-values></var>, <a |
jdaggett@8225 | 5995 | href="#east-asian-width-values" |
jdaggett@2479 | 5996 | title="<east-asian-width-values>"><strong>6.10</strong></a> |
jdaggett@2479 | 5997 | |
jdaggett@8225 | 5998 | <li><var><family-name></var>, <a href="#family-name-value" |
jdaggett@8225 | 5999 | title="<family-name>"><strong>3.1</strong></a> |
jdaggett@8225 | 6000 | |
jdaggett@8225 | 6001 | <li><var><feature-tag-value></var>, <a href="#feature-tag-value" |
jdaggett@2515 | 6002 | title="<feature-tag-value>"><strong>6.12</strong></a> |
jdaggett@2515 | 6003 | |
jdaggett@8225 | 6004 | <li><var><font-face-name></var>, <a href="#font-face-name-value" |
jdaggett@7060 | 6005 | title="<font-face-name>"><strong>4.3</strong></a> |
jdaggett@4624 | 6006 | |
jdaggett@4624 | 6007 | <li><var><font-variant-css21></var>, <a |
jdaggett@8225 | 6008 | href="#font-variant-css21-values" |
jdaggett@4624 | 6009 | title="<font-variant-css21>"><strong>3.7</strong></a> |
jdaggett@4624 | 6010 | |
jdaggett@8225 | 6011 | <li><var><generic-family></var>, <a href="#generic-family-value" |
jdaggett@8225 | 6012 | title="<generic-family>"><strong>3.1</strong></a> |
jdaggett@8225 | 6013 | |
jdaggett@8225 | 6014 | <li><var><historical-lig-values></var>, <a |
jdaggett@8225 | 6015 | href="#historical-lig-values" |
jdaggett@8225 | 6016 | title="<historical-lig-values>"><strong>6.4</strong></a> |
jdaggett@8225 | 6017 | |
jdaggett@8225 | 6018 | <li><var><length></var>, <a href="#length-size-value" |
jdaggett@8225 | 6019 | title="<length>"><strong>3.5</strong></a> |
jdaggett@8225 | 6020 | |
jdaggett@8225 | 6021 | <li><var><number></var>, <a href="#aspect-ratio-value" |
jdaggett@8225 | 6022 | title="<number>"><strong>3.6</strong></a> |
jdaggett@4624 | 6023 | |
jdaggett@4624 | 6024 | <li><var><numeric-figure-values></var>, <a |
jdaggett@8225 | 6025 | href="#numeric-figure-values" |
jdaggett@4624 | 6026 | title="<numeric-figure-values>"><strong>6.7</strong></a> |
jdaggett@4624 | 6027 | |
jdaggett@4624 | 6028 | <li><var><numeric-fraction-values></var>, <a |
jdaggett@8225 | 6029 | href="#numeric-fraction-values" |
jdaggett@4624 | 6030 | title="<numeric-fraction-values>"><strong>6.7</strong></a> |
jdaggett@4624 | 6031 | |
jdaggett@4624 | 6032 | <li><var><numeric-spacing-values></var>, <a |
jdaggett@8225 | 6033 | href="#numeric-spacing-values" |
jdaggett@4624 | 6034 | title="<numeric-spacing-values>"><strong>6.7</strong></a> |
jdaggett@4624 | 6035 | |
jdaggett@8225 | 6036 | <li><var><percentage></var>, <a href="#percentage-size-value" |
jdaggett@8225 | 6037 | title="<percentage>"><strong>3.5</strong></a> |
jdaggett@8225 | 6038 | |
jdaggett@8225 | 6039 | <li><var><relative-size></var>, <a href="#relative-size-value" |
jdaggett@7060 | 6040 | title="<relative-size>"><strong>3.5</strong></a> |
jdaggett@7060 | 6041 | |
jdaggett@8225 | 6042 | <li><var><urange></var>, <a href="#urange-value" |
jdaggett@8225 | 6043 | title="<urange>"><strong>4.5</strong></a> |
jdaggett@2479 | 6044 | |
jdaggett@8031 | 6045 | <li>@font-face, <a href="#font-face" title="@font-face">4.1</a>, <a |
jdaggett@8031 | 6046 | href="#font-face0" title="@font-face">4.3</a> |
jdaggett@2479 | 6047 | |
jdaggett@4624 | 6048 | <li>all-petite-caps, <a href="#all-petite-caps" |
jdaggett@4624 | 6049 | title=all-petite-caps><strong>6.6</strong></a> |
jdaggett@4624 | 6050 | |
jdaggett@4624 | 6051 | <li>all-small-caps, <a href="#all-small-caps" |
jdaggett@4624 | 6052 | title=all-small-caps><strong>6.6</strong></a> |
jdaggett@4624 | 6053 | |
jdaggett@8225 | 6054 | <li>annotation, <a href="#annotation" |
jdaggett@7060 | 6055 | title=annotation><strong>6.8</strong></a> |
jdaggett@4624 | 6056 | |
jdaggett@4624 | 6057 | <li>aspect value, <a href="#aspect-value0" title="aspect |
jdaggett@4624 | 6058 | value"><strong>3.6</strong></a> |
jdaggett@4624 | 6059 | |
jdaggett@7103 | 6060 | <li>authoring tool, <a href="#authoring-tool" title="authoring |
jdaggett@7243 | 6061 | tool"><strong>#</strong></a> |
jdaggett@7103 | 6062 | |
jdaggett@7311 | 6063 | <li>character map, <a href="#character-map" title="character |
jdaggett@7311 | 6064 | map"><strong>5.2</strong></a> |
jdaggett@7311 | 6065 | |
jdaggett@8225 | 6066 | <li>character-variant, <a href="#character-variant" |
jdaggett@7060 | 6067 | title=character-variant><strong>6.8</strong></a> |
jdaggett@4624 | 6068 | |
jdaggett@4624 | 6069 | <li>common-ligatures, <a href="#common-ligatures" |
jdaggett@6176 | 6070 | title=common-ligatures><strong>6.4</strong></a> |
jdaggett@4624 | 6071 | |
jdaggett@4624 | 6072 | <li>contextual, <a href="#contextual" |
jdaggett@6176 | 6073 | title=contextual><strong>6.4</strong></a> |
jdaggett@4624 | 6074 | |
jdaggett@7021 | 6075 | <li>CSSFontFaceRule, <a href="#cssfontfacerule" |
jdaggett@7021 | 6076 | title=CSSFontFaceRule><strong>8.1</strong></a> |
jdaggett@7021 | 6077 | |
jdaggett@7021 | 6078 | <li>CSSFontFeatureValuesRule, <a href="#cssfontfeaturevaluesrule" |
jdaggett@7021 | 6079 | title=CSSFontFeatureValuesRule><strong>8.2</strong></a> |
jdaggett@7021 | 6080 | |
jdaggett@4624 | 6081 | <li>cursive, definition of, <a href="#cursive0" title="cursive, definition |
jdaggett@4624 | 6082 | of"><strong>#</strong></a> |
jdaggett@4624 | 6083 | |
jdaggett@7232 | 6084 | <li>default face, <a href="#default-face" title="default |
jdaggett@7309 | 6085 | face"><strong>5.2</strong></a> |
jdaggett@7232 | 6086 | |
jdaggett@8031 | 6087 | <li>descriptor_declaration, <a href="#descriptordeclaration" |
jdaggett@8031 | 6088 | title="descriptor_declaration"><strong>4.1</strong></a> |
jdaggett@8031 | 6089 | |
jdaggett@4624 | 6090 | <li>diagonal-fractions, <a href="#diagonal-fractions" |
jdaggett@4624 | 6091 | title=diagonal-fractions><strong>6.7</strong></a> |
jdaggett@4624 | 6092 | |
jdaggett@4624 | 6093 | <li>discretionary-ligatures, <a href="#discretionary-ligatures" |
jdaggett@6176 | 6094 | title=discretionary-ligatures><strong>6.4</strong></a> |
jdaggett@4624 | 6095 | |
jdaggett@4624 | 6096 | <li>fantasy, definition of, <a href="#fantasy0" title="fantasy, definition |
jdaggett@4624 | 6097 | of"><strong>#</strong></a> |
jdaggett@4624 | 6098 | |
jdaggett@8031 | 6099 | <li>feature_type, <a href="#featuretype" |
jdaggett@8031 | 6100 | title="feature_type"><strong>6.9</strong></a> |
jdaggett@8031 | 6101 | |
jdaggett@8031 | 6102 | <li>feature_value_block, <a href="#featurevalueblock" |
jdaggett@8031 | 6103 | title="feature_value_block"><strong>6.9</strong></a> |
jdaggett@8031 | 6104 | |
jdaggett@8031 | 6105 | <li>feature_value_definition, <a href="#featurevaluedefinition" |
jdaggett@8031 | 6106 | title="feature_value_definition"><strong>6.9</strong></a> |
jdaggett@7679 | 6107 | |
jdaggett@4624 | 6108 | <li>font, <a href="#propdef-font" title=font><strong>3.7</strong></a> |
jdaggett@2472 | 6109 | |
jdaggett@1662 | 6110 | <li>font-family, <a href="#descdef-font-family" |
jdaggett@4624 | 6111 | title=font-family><strong>4.2</strong></a>, <a |
jdaggett@1662 | 6112 | href="#propdef-font-family" title=font-family><strong>3.1</strong></a> |
jdaggett@1662 | 6113 | |
jdaggett@7060 | 6114 | <li>font-feature-settings, <a href="#propdef-font-feature-settings" |
jdaggett@2118 | 6115 | title=font-feature-settings><strong>6.12</strong></a> |
jdaggett@1662 | 6116 | |
jdaggett@7060 | 6117 | <li>font-feature-settings (descriptor), <a |
jdaggett@7060 | 6118 | href="#descdef-font-feature-settings" title="font-feature-settings |
jdaggett@8225 | 6119 | (descriptor)"><strong>4.7</strong></a> |
jdaggett@7060 | 6120 | |
jdaggett@1662 | 6121 | <li>font-kerning, <a href="#propdef-font-kerning" |
jdaggett@1856 | 6122 | title=font-kerning><strong>6.3</strong></a> |
jdaggett@1662 | 6123 | |
jdaggett@1732 | 6124 | <li>font-language-override, <a href="#propdef-font-language-override" |
jdaggett@2118 | 6125 | title=font-language-override><strong>6.13</strong></a> |
jdaggett@1662 | 6126 | |
jdaggett@1662 | 6127 | <li>font-size, <a href="#propdef-font-size" |
jdaggett@1662 | 6128 | title=font-size><strong>3.5</strong></a> |
jdaggett@1662 | 6129 | |
jdaggett@1662 | 6130 | <li>font-size-adjust, <a href="#propdef-font-size-adjust" |
jdaggett@1662 | 6131 | title=font-size-adjust><strong>3.6</strong></a> |
jdaggett@1662 | 6132 | |
jdaggett@7060 | 6133 | <li>font-stretch, <a href="#propdef-font-stretch" |
jdaggett@7060 | 6134 | title=font-stretch><strong>3.3</strong></a> |
jdaggett@7060 | 6135 | |
jdaggett@7060 | 6136 | <li>font-stretch (descriptor), <a href="#descdef-font-stretch" |
jdaggett@7060 | 6137 | title="font-stretch (descriptor)"><strong>4.4</strong></a> |
jdaggett@7060 | 6138 | |
jdaggett@7060 | 6139 | <li>font-style, <a href="#propdef-font-style" |
jdaggett@1662 | 6140 | title=font-style><strong>3.4</strong></a> |
jdaggett@1662 | 6141 | |
jdaggett@7060 | 6142 | <li>font-style (descriptor), <a href="#descdef-font-style" |
jdaggett@7060 | 6143 | title="font-style (descriptor)"><strong>4.4</strong></a> |
jdaggett@7060 | 6144 | |
jdaggett@2487 | 6145 | <li>font-synthesis, <a href="#propdef-font-synthesis" |
jdaggett@2487 | 6146 | title=font-synthesis><strong>3.8</strong></a> |
jdaggett@2457 | 6147 | |
jdaggett@7060 | 6148 | <li>font-variant, <a href="#propdef-font-variant" |
jdaggett@7060 | 6149 | title=font-variant><strong>6.11</strong></a> |
jdaggett@7060 | 6150 | |
jdaggett@7060 | 6151 | <li>font-variant (descriptor), <a href="#descdef-font-variant" |
jdaggett@8225 | 6152 | title="font-variant (descriptor)"><strong>4.7</strong></a> |
jdaggett@1662 | 6153 | |
jdaggett@1662 | 6154 | <li>font-variant-alternates, <a href="#propdef-font-variant-alternates" |
jdaggett@2118 | 6155 | title=font-variant-alternates><strong>6.8</strong></a> |
jdaggett@1662 | 6156 | |
jdaggett@1662 | 6157 | <li>font-variant-caps, <a href="#propdef-font-variant-caps" |
jdaggett@2118 | 6158 | title=font-variant-caps><strong>6.6</strong></a> |
jdaggett@1732 | 6159 | |
jdaggett@1662 | 6160 | <li>font-variant-east-asian, <a href="#propdef-font-variant-east-asian" |
jdaggett@2118 | 6161 | title=font-variant-east-asian><strong>6.10</strong></a> |
jdaggett@1662 | 6162 | |
jdaggett@1662 | 6163 | <li>font-variant-ligatures, <a href="#propdef-font-variant-ligatures" |
jdaggett@6176 | 6164 | title=font-variant-ligatures><strong>6.4</strong></a> |
jdaggett@1662 | 6165 | |
jdaggett@1662 | 6166 | <li>font-variant-numeric, <a href="#propdef-font-variant-numeric" |
jdaggett@2118 | 6167 | title=font-variant-numeric><strong>6.7</strong></a> |
jdaggett@2118 | 6168 | |
jdaggett@3460 | 6169 | <li>font-variant-position, <a href="#propdef-font-variant-position" |
jdaggett@6176 | 6170 | title=font-variant-position><strong>6.5</strong></a> |
jdaggett@3460 | 6171 | |
jdaggett@7060 | 6172 | <li>font-weight, <a href="#propdef-font-weight" |
jdaggett@7060 | 6173 | title=font-weight><strong>3.2</strong></a> |
jdaggett@7060 | 6174 | |
jdaggett@7060 | 6175 | <li>font-weight (descriptor), <a href="#descdef-font-weight" |
jdaggett@7060 | 6176 | title="font-weight (descriptor)"><strong>4.4</strong></a> |
jdaggett@1662 | 6177 | |
jdaggett@8031 | 6178 | <li>font_face_rule, <a href="#fontfacerule" |
jdaggett@8031 | 6179 | title="font_face_rule"><strong>4.1</strong></a> |
jdaggett@8031 | 6180 | |
jdaggett@8225 | 6181 | <li>FONT_FACE_SYM, <a href="#fontfacesym" |
jdaggett@8225 | 6182 | title="FONT_FACE_SYM"><strong>4.1</strong></a> |
jdaggett@8225 | 6183 | |
jdaggett@8031 | 6184 | <li>font_family_name, <a href="#fontfamilyname" |
jdaggett@8031 | 6185 | title="font_family_name"><strong>6.9</strong></a> |
jdaggett@8031 | 6186 | |
jdaggett@8031 | 6187 | <li>font_family_name_list, <a href="#fontfamilynamelist" |
jdaggett@8031 | 6188 | title="font_family_name_list"><strong>6.9</strong></a> |
jdaggett@8031 | 6189 | |
jdaggett@8031 | 6190 | <li>font_feature_values_rule, <a href="#fontfeaturevaluesrule" |
jdaggett@8031 | 6191 | title="font_feature_values_rule"><strong>6.9</strong></a> |
jdaggett@8031 | 6192 | |
jdaggett@8225 | 6193 | <li>FONT_FEATURE_VALUES_SYM, <a href="#fontfeaturevaluessym" |
jdaggett@8225 | 6194 | title="FONT_FEATURE_VALUES_SYM"><strong>6.9</strong></a> |
jdaggett@8225 | 6195 | |
jdaggett@1662 | 6196 | <li>full-width, <a href="#full-width" |
jdaggett@2118 | 6197 | title=full-width><strong>6.10</strong></a> |
jdaggett@1662 | 6198 | |
jdaggett@1662 | 6199 | <li>historical-forms, <a href="#historical-forms" |
jdaggett@2118 | 6200 | title=historical-forms><strong>6.8</strong></a> |
jdaggett@1662 | 6201 | |
jdaggett@1662 | 6202 | <li>historical-ligatures, <a href="#historical-ligatures" |
jdaggett@6176 | 6203 | title=historical-ligatures><strong>6.4</strong></a> |
jdaggett@1732 | 6204 | |
jdaggett@2118 | 6205 | <li>jis04, <a href="#jis04" title=jis04><strong>6.10</strong></a> |
jdaggett@2118 | 6206 | |
jdaggett@2118 | 6207 | <li>jis78, <a href="#jis78" title=jis78><strong>6.10</strong></a> |
jdaggett@2118 | 6208 | |
jdaggett@2118 | 6209 | <li>jis83, <a href="#jis83" title=jis83><strong>6.10</strong></a> |
jdaggett@2118 | 6210 | |
jdaggett@2118 | 6211 | <li>jis90, <a href="#jis90" title=jis90><strong>6.10</strong></a> |
jdaggett@1662 | 6212 | |
jdaggett@1662 | 6213 | <li>lining-nums, <a href="#lining-nums" |
jdaggett@2118 | 6214 | title=lining-nums><strong>6.7</strong></a> |
jdaggett@890 | 6215 | |
jdaggett@890 | 6216 | <li>monospace, definition of, <a href="#monospace0" title="monospace, |
jdaggett@890 | 6217 | definition of"><strong>#</strong></a> |
jdaggett@890 | 6218 | |
jdaggett@1662 | 6219 | <li>no-common-ligatures, <a href="#no-common-ligatures" |
jdaggett@6176 | 6220 | title=no-common-ligatures><strong>6.4</strong></a> |
jdaggett@1662 | 6221 | |
jdaggett@1662 | 6222 | <li>no-contextual, <a href="#no-contextual" |
jdaggett@6176 | 6223 | title=no-contextual><strong>6.4</strong></a> |
jdaggett@1662 | 6224 | |
jdaggett@3460 | 6225 | <li>no-discretionary-ligatures, <a href="#no-discretionary-ligatures" |
jdaggett@6176 | 6226 | title=no-discretionary-ligatures><strong>6.4</strong></a> |
jdaggett@3460 | 6227 | |
jdaggett@1662 | 6228 | <li>no-historical-ligatures, <a href="#no-historical-ligatures" |
jdaggett@6176 | 6229 | title=no-historical-ligatures><strong>6.4</strong></a> |
jdaggett@1662 | 6230 | |
jdaggett@8277 | 6231 | <li>none, <a href="#none" title=none><strong>6.4</strong></a> |
jdaggett@8277 | 6232 | |
jdaggett@8277 | 6233 | <li>normal, <a href="#normal" title=normal><strong>6.4</strong></a>, <a |
jdaggett@8277 | 6234 | href="#normal0" title=normal><strong>6.6</strong></a>, <a href="#normal1" |
jdaggett@8277 | 6235 | title=normal><strong>6.7</strong></a>, <a href="#normal2" |
jdaggett@8277 | 6236 | title=normal><strong>6.8</strong></a>, <a href="#normal3" |
jdaggett@5809 | 6237 | title=normal><strong>6.10</strong></a> |
jdaggett@5809 | 6238 | |
jdaggett@1662 | 6239 | <li>oldstyle-nums, <a href="#oldstyle-nums" |
jdaggett@2118 | 6240 | title=oldstyle-nums><strong>6.7</strong></a> |
jdaggett@2118 | 6241 | |
jdaggett@3638 | 6242 | <li>ordinal, <a href="#ordinal" title=ordinal><strong>6.7</strong></a> |
jdaggett@3638 | 6243 | |
jdaggett@8225 | 6244 | <li>ornaments, <a href="#ornaments" |
jdaggett@7060 | 6245 | title=ornaments><strong>6.8</strong></a> |
jdaggett@2118 | 6246 | |
jdaggett@1662 | 6247 | <li>petite-caps, <a href="#petite-caps" |
jdaggett@2118 | 6248 | title=petite-caps><strong>6.6</strong></a> |
jdaggett@1662 | 6249 | |
jdaggett@1662 | 6250 | <li>proportional-nums, <a href="#proportional-nums" |
jdaggett@2118 | 6251 | title=proportional-nums><strong>6.7</strong></a> |
jdaggett@1662 | 6252 | |
jdaggett@1662 | 6253 | <li>proportional-width, <a href="#proportional-width" |
jdaggett@2118 | 6254 | title=proportional-width><strong>6.10</strong></a> |
jdaggett@512 | 6255 | |
jdaggett@7243 | 6256 | <li>renderer, <a href="#renderer" title=renderer><strong>#</strong></a> |
jdaggett@7103 | 6257 | |
jdaggett@3638 | 6258 | <li>ruby, <a href="#ruby" title=ruby><strong>6.10</strong></a> |
jdaggett@1662 | 6259 | |
jdaggett@890 | 6260 | <li>sans-serif, definition of, <a href="#sans-serif0" title="sans-serif, |
jdaggett@890 | 6261 | definition of"><strong>#</strong></a> |
jdaggett@890 | 6262 | |
jdaggett@890 | 6263 | <li>serif, definition of, <a href="#serif0" title="serif, definition |
jdaggett@890 | 6264 | of"><strong>#</strong></a> |
jdaggett@890 | 6265 | |
jdaggett@2504 | 6266 | <li>simplified, <a href="#simplified" |
jdaggett@2504 | 6267 | title=simplified><strong>6.10</strong></a> |
jdaggett@1662 | 6268 | |
jdaggett@1662 | 6269 | <li>slashed-zero, <a href="#slashed-zero" |
jdaggett@2118 | 6270 | title=slashed-zero><strong>6.7</strong></a> |
jdaggett@1662 | 6271 | |
jdaggett@1662 | 6272 | <li>small-caps, <a href="#small-caps" |
jdaggett@2118 | 6273 | title=small-caps><strong>6.6</strong></a> |
jdaggett@1662 | 6274 | |
jdaggett@1662 | 6275 | <li>src, <a href="#descdef-src" title=src><strong>4.3</strong></a> |
jdaggett@1662 | 6276 | |
jdaggett@1662 | 6277 | <li>stacked-fractions, <a href="#stacked-fractions" |
jdaggett@2118 | 6278 | title=stacked-fractions><strong>6.7</strong></a> |
jdaggett@2118 | 6279 | |
jdaggett@7103 | 6280 | <li>style sheet |
jdaggett@7103 | 6281 | <ul> |
jdaggett@7103 | 6282 | <li>as conformance class, <a href="#style-sheet" title="style sheet, as |
jdaggett@7243 | 6283 | conformance class"><strong>#</strong></a> |
jdaggett@7103 | 6284 | </ul> |
jdaggett@7103 | 6285 | |
jdaggett@8225 | 6286 | <li>styleset, <a href="#styleset" title=styleset><strong>6.8</strong></a> |
jdaggett@8225 | 6287 | |
jdaggett@8225 | 6288 | <li>stylistic, <a href="#stylistic" |
jdaggett@7060 | 6289 | title=stylistic><strong>6.8</strong></a> |
jdaggett@7060 | 6290 | |
jdaggett@8225 | 6291 | <li>swash, <a href="#swash" title=swash><strong>6.8</strong></a> |
jdaggett@1662 | 6292 | |
jdaggett@1662 | 6293 | <li>tabular-nums, <a href="#tabular-nums" |
jdaggett@2118 | 6294 | title=tabular-nums><strong>6.7</strong></a> |
jdaggett@1662 | 6295 | |
jdaggett@1662 | 6296 | <li>titling-caps, <a href="#titling-caps" |
jdaggett@2118 | 6297 | title=titling-caps><strong>6.6</strong></a> |
jdaggett@1856 | 6298 | |
jdaggett@2504 | 6299 | <li>traditional, <a href="#traditional" |
jdaggett@2504 | 6300 | title=traditional><strong>6.10</strong></a> |
jdaggett@2118 | 6301 | |
jdaggett@2118 | 6302 | <li>unicase, <a href="#unicase" title=unicase><strong>6.6</strong></a> |
jdaggett@1662 | 6303 | |
jdaggett@1662 | 6304 | <li>unicode-range, <a href="#descdef-unicode-range" |
jdaggett@890 | 6305 | title=unicode-range><strong>4.5</strong></a> |
jdaggett@7311 | 6306 | |
jdaggett@7311 | 6307 | <li>weight, <a href="#weight" title=weight><strong>2</strong></a> |
jdaggett@7311 | 6308 | |
jdaggett@7311 | 6309 | <li>width, <a href="#width" title=width><strong>2</strong></a> |
jdaggett@484 | 6310 | </ul> |
jdaggett@484 | 6311 | <!--end-index--> |
jdaggett@484 | 6312 | |
jdaggett@484 | 6313 | <h2 class=no-num id=property-index>Property index</h2> |
jdaggett@890 | 6314 | <!--begin-properties--> |
jdaggett@484 | 6315 | |
jdaggett@484 | 6316 | <table class=proptable> |
jdaggett@484 | 6317 | <thead> |
jdaggett@484 | 6318 | <tr> |
jdaggett@484 | 6319 | <th>Property |
jdaggett@484 | 6320 | |
jdaggett@484 | 6321 | <th>Values |
jdaggett@484 | 6322 | |
jdaggett@484 | 6323 | <th>Initial |
jdaggett@484 | 6324 | |
jdaggett@1148 | 6325 | <th>Applies to |
jdaggett@484 | 6326 | |
jdaggett@484 | 6327 | <th>Inh. |
jdaggett@484 | 6328 | |
jdaggett@484 | 6329 | <th>Percentages |
jdaggett@484 | 6330 | |
jdaggett@484 | 6331 | <th>Media |
jdaggett@484 | 6332 | |
jdaggett@484 | 6333 | <tbody> |
jdaggett@3460 | 6334 | <tr> |
jdaggett@3460 | 6335 | <th><a class=property href="#propdef-font">font</a> |
jdaggett@484 | 6336 | |
jdaggett@8225 | 6337 | <td>[ [ <‘font-style’> || <font-variant-css21> || |
jdaggett@8225 | 6338 | <‘font-weight’> || <‘font-stretch’ ]? |
jdaggett@8225 | 6339 | <‘font-size’> [ / <‘line-height’> ]? |
jdaggett@8225 | 6340 | <‘font-family’> ] | caption | icon | menu | message-box | |
jdaggett@7020 | 6341 | small-caption | status-bar |
jdaggett@484 | 6342 | |
jdaggett@484 | 6343 | <td>see individual properties |
jdaggett@484 | 6344 | |
jdaggett@484 | 6345 | <td>all elements |
jdaggett@484 | 6346 | |
jdaggett@484 | 6347 | <td>yes |
jdaggett@484 | 6348 | |
jdaggett@484 | 6349 | <td>see individual properties |
jdaggett@484 | 6350 | |
jdaggett@484 | 6351 | <td>visual |
jdaggett@484 | 6352 | |
jdaggett@3460 | 6353 | <tr> |
jdaggett@3460 | 6354 | <th><a class=property href="#descdef-font-family">font-family</a> |
jdaggett@484 | 6355 | |
jdaggett@8225 | 6356 | <td>[ <family-name> | <generic-family> ] # |
jdaggett@484 | 6357 | |
jdaggett@484 | 6358 | <td>depends on user agent |
jdaggett@484 | 6359 | |
jdaggett@484 | 6360 | <td>all elements |
jdaggett@484 | 6361 | |
jdaggett@484 | 6362 | <td>yes |
jdaggett@484 | 6363 | |
jdaggett@484 | 6364 | <td>N/A |
jdaggett@484 | 6365 | |
jdaggett@484 | 6366 | <td>visual |
jdaggett@484 | 6367 | |
jdaggett@3460 | 6368 | <tr> |
jdaggett@3460 | 6369 | <th><a class=property |
jdaggett@1662 | 6370 | href="#propdef-font-feature-settings">font-feature-settings</a> |
jdaggett@1662 | 6371 | |
jdaggett@8225 | 6372 | <td>normal | <feature-tag-value> # |
jdaggett@1662 | 6373 | |
jdaggett@1662 | 6374 | <td>normal |
jdaggett@1662 | 6375 | |
jdaggett@1662 | 6376 | <td>all elements |
jdaggett@1662 | 6377 | |
jdaggett@1662 | 6378 | <td>yes |
jdaggett@1662 | 6379 | |
jdaggett@1662 | 6380 | <td>N/A |
jdaggett@1662 | 6381 | |
jdaggett@1662 | 6382 | <td>visual |
jdaggett@1662 | 6383 | |
jdaggett@3460 | 6384 | <tr> |
jdaggett@3460 | 6385 | <th><a class=property href="#propdef-font-kerning">font-kerning</a> |
jdaggett@1662 | 6386 | |
jdaggett@1856 | 6387 | <td>auto | normal | none |
jdaggett@1856 | 6388 | |
jdaggett@1856 | 6389 | <td>auto |
jdaggett@1662 | 6390 | |
jdaggett@1662 | 6391 | <td>all elements |
jdaggett@1662 | 6392 | |
jdaggett@1662 | 6393 | <td>yes |
jdaggett@1662 | 6394 | |
jdaggett@1662 | 6395 | <td>N/A |
jdaggett@1662 | 6396 | |
jdaggett@1662 | 6397 | <td>visual |
jdaggett@1662 | 6398 | |
jdaggett@3460 | 6399 | <tr> |
jdaggett@3460 | 6400 | <th><a class=property |
jdaggett@1732 | 6401 | href="#propdef-font-language-override">font-language-override</a> |
jdaggett@1662 | 6402 | |
jdaggett@5809 | 6403 | <td>normal | <string> |
jdaggett@1662 | 6404 | |
jdaggett@1662 | 6405 | <td>normal |
jdaggett@1662 | 6406 | |
jdaggett@1662 | 6407 | <td>all elements |
jdaggett@1662 | 6408 | |
jdaggett@1662 | 6409 | <td>yes |
jdaggett@1662 | 6410 | |
jdaggett@1662 | 6411 | <td>N/A |
jdaggett@1662 | 6412 | |
jdaggett@1662 | 6413 | <td>visual |
jdaggett@1662 | 6414 | |
jdaggett@3460 | 6415 | <tr> |
jdaggett@3460 | 6416 | <th><a class=property href="#propdef-font-size">font-size</a> |
jdaggett@484 | 6417 | |
jdaggett@8225 | 6418 | <td><absolute-size> | <relative-size> | <length> | |
jdaggett@8225 | 6419 | <percentage> |
jdaggett@484 | 6420 | |
jdaggett@484 | 6421 | <td>medium |
jdaggett@484 | 6422 | |
jdaggett@484 | 6423 | <td>all elements |
jdaggett@484 | 6424 | |
jdaggett@484 | 6425 | <td>yes |
jdaggett@484 | 6426 | |
jdaggett@484 | 6427 | <td>refer to parent element's font size |
jdaggett@484 | 6428 | |
jdaggett@484 | 6429 | <td>visual |
jdaggett@484 | 6430 | |
jdaggett@3460 | 6431 | <tr> |
jdaggett@3460 | 6432 | <th><a class=property |
jdaggett@1662 | 6433 | href="#propdef-font-size-adjust">font-size-adjust</a> |
jdaggett@484 | 6434 | |
jdaggett@8225 | 6435 | <td>none | auto | <number> |
jdaggett@484 | 6436 | |
jdaggett@484 | 6437 | <td>none |
jdaggett@484 | 6438 | |
jdaggett@484 | 6439 | <td>all elements |
jdaggett@484 | 6440 | |
jdaggett@484 | 6441 | <td>yes |
jdaggett@484 | 6442 | |
jdaggett@554 | 6443 | <td>N/A |
jdaggett@484 | 6444 | |
jdaggett@484 | 6445 | <td>visual |
jdaggett@484 | 6446 | |
jdaggett@3460 | 6447 | <tr> |
jdaggett@7060 | 6448 | <th><a class=property href="#propdef-font-stretch">font-stretch</a> |
jdaggett@1662 | 6449 | |
jdaggett@1662 | 6450 | <td>normal | ultra-condensed | extra-condensed | condensed | |
jdaggett@1662 | 6451 | semi-condensed | semi-expanded | expanded | extra-expanded | |
jdaggett@5809 | 6452 | ultra-expanded |
jdaggett@484 | 6453 | |
jdaggett@484 | 6454 | <td>normal |
jdaggett@484 | 6455 | |
jdaggett@484 | 6456 | <td>all elements |
jdaggett@484 | 6457 | |
jdaggett@484 | 6458 | <td>yes |
jdaggett@484 | 6459 | |
jdaggett@484 | 6460 | <td>N/A |
jdaggett@484 | 6461 | |
jdaggett@484 | 6462 | <td>visual |
jdaggett@484 | 6463 | |
jdaggett@3460 | 6464 | <tr> |
jdaggett@7060 | 6465 | <th><a class=property href="#propdef-font-style">font-style</a> |
jdaggett@484 | 6466 | |
jdaggett@5809 | 6467 | <td>normal | italic | oblique |
jdaggett@484 | 6468 | |
jdaggett@484 | 6469 | <td>normal |
jdaggett@484 | 6470 | |
jdaggett@484 | 6471 | <td>all elements |
jdaggett@484 | 6472 | |
jdaggett@484 | 6473 | <td>yes |
jdaggett@484 | 6474 | |
jdaggett@484 | 6475 | <td>N/A |
jdaggett@484 | 6476 | |
jdaggett@484 | 6477 | <td>visual |
jdaggett@484 | 6478 | |
jdaggett@3460 | 6479 | <tr> |
jdaggett@3460 | 6480 | <th><a class=property href="#propdef-font-synthesis">font-synthesis</a> |
jdaggett@2487 | 6481 | |
jdaggett@2487 | 6482 | <td>none | [ weight || style ] |
jdaggett@2487 | 6483 | |
jdaggett@2487 | 6484 | <td>weight style |
jdaggett@2457 | 6485 | |
jdaggett@2457 | 6486 | <td>all elements |
jdaggett@2457 | 6487 | |
jdaggett@2457 | 6488 | <td>yes |
jdaggett@2457 | 6489 | |
jdaggett@2457 | 6490 | <td>N/A |
jdaggett@2457 | 6491 | |
jdaggett@2457 | 6492 | <td>visual |
jdaggett@2457 | 6493 | |
jdaggett@3460 | 6494 | <tr> |
jdaggett@3460 | 6495 | <th><a class=property href="#propdef-font-variant">font-variant</a> |
jdaggett@1662 | 6496 | |
jdaggett@6436 | 6497 | <td>normal | none | [ <common-lig-values> || |
jdaggett@3460 | 6498 | <discretionary-lig-values> || <historical-lig-values> || |
jdaggett@3041 | 6499 | <contextual-alt-values> || stylistic(<feature-value-name>) |
jdaggett@8225 | 6500 | || historical-forms || styleset(<feature-value-name> #) || |
jdaggett@8225 | 6501 | character-variant(<feature-value-name> #) || |
jdaggett@5833 | 6502 | swash(<feature-value-name>) || |
jdaggett@3041 | 6503 | ornaments(<feature-value-name>) || |
jdaggett@4545 | 6504 | annotation(<feature-value-name>) || [ small-caps | all-small-caps |
jdaggett@6648 | 6505 | | petite-caps | all-petite-caps | unicase | titling-caps ] || |
jdaggett@2509 | 6506 | <numeric-figure-values> || <numeric-spacing-values> || |
jdaggett@3638 | 6507 | <numeric-fraction-values> || ordinal || slashed-zero || |
jdaggett@3638 | 6508 | <east-asian-variant-values> || <east-asian-width-values> || |
jdaggett@3638 | 6509 | ruby ] |
jdaggett@484 | 6510 | |
jdaggett@484 | 6511 | <td>normal |
jdaggett@484 | 6512 | |
jdaggett@484 | 6513 | <td>all elements |
jdaggett@484 | 6514 | |
jdaggett@484 | 6515 | <td>yes |
jdaggett@484 | 6516 | |
jdaggett@7377 | 6517 | <td>see individual properties |
jdaggett@484 | 6518 | |
jdaggett@484 | 6519 | <td>visual |
jdaggett@484 | 6520 | |
jdaggett@3460 | 6521 | <tr> |
jdaggett@3460 | 6522 | <th><a class=property |
jdaggett@1662 | 6523 | href="#propdef-font-variant-alternates">font-variant-alternates</a> |
jdaggett@1662 | 6524 | |
jdaggett@6176 | 6525 | <td>normal | [ stylistic(<feature-value-name>) || historical-forms |
jdaggett@8225 | 6526 | || styleset(<feature-value-name> #) || |
jdaggett@8225 | 6527 | character-variant(<feature-value-name> #) || |
jdaggett@5833 | 6528 | swash(<feature-value-name>) || |
jdaggett@3638 | 6529 | ornaments(<feature-value-name>) || |
jdaggett@3638 | 6530 | annotation(<feature-value-name>) ] |
jdaggett@1662 | 6531 | |
jdaggett@1662 | 6532 | <td>normal |
jdaggett@1662 | 6533 | |
jdaggett@1662 | 6534 | <td>all elements |
jdaggett@1662 | 6535 | |
jdaggett@1662 | 6536 | <td>yes |
jdaggett@1662 | 6537 | |
jdaggett@1662 | 6538 | <td>N/A |
jdaggett@1662 | 6539 | |
jdaggett@1662 | 6540 | <td>visual |
jdaggett@1662 | 6541 | |
jdaggett@3460 | 6542 | <tr> |
jdaggett@3460 | 6543 | <th><a class=property |
jdaggett@1662 | 6544 | href="#propdef-font-variant-caps">font-variant-caps</a> |
jdaggett@1662 | 6545 | |
jdaggett@5809 | 6546 | <td>normal | small-caps | all-small-caps | petite-caps | all-petite-caps |
jdaggett@6648 | 6547 | | unicase | titling-caps |
jdaggett@1662 | 6548 | |
jdaggett@1662 | 6549 | <td>normal |
jdaggett@1662 | 6550 | |
jdaggett@1662 | 6551 | <td>all elements |
jdaggett@1662 | 6552 | |
jdaggett@1662 | 6553 | <td>yes |
jdaggett@1662 | 6554 | |
jdaggett@1662 | 6555 | <td>N/A |
jdaggett@1662 | 6556 | |
jdaggett@1662 | 6557 | <td>visual |
jdaggett@1662 | 6558 | |
jdaggett@3460 | 6559 | <tr> |
jdaggett@3460 | 6560 | <th><a class=property |
jdaggett@1662 | 6561 | href="#propdef-font-variant-east-asian">font-variant-east-asian</a> |
jdaggett@1662 | 6562 | |
jdaggett@5809 | 6563 | <td>normal | [ <east-asian-variant-values> || |
jdaggett@3638 | 6564 | <east-asian-width-values> || ruby ] |
jdaggett@1662 | 6565 | |
jdaggett@1662 | 6566 | <td>normal |
jdaggett@1662 | 6567 | |
jdaggett@1662 | 6568 | <td>all elements |
jdaggett@1662 | 6569 | |
jdaggett@1662 | 6570 | <td>yes |
jdaggett@1662 | 6571 | |
jdaggett@1662 | 6572 | <td>N/A |
jdaggett@1662 | 6573 | |
jdaggett@1662 | 6574 | <td>visual |
jdaggett@1662 | 6575 | |
jdaggett@3460 | 6576 | <tr> |
jdaggett@3460 | 6577 | <th><a class=property |
jdaggett@1662 | 6578 | href="#propdef-font-variant-ligatures">font-variant-ligatures</a> |
jdaggett@1662 | 6579 | |
jdaggett@8225 | 6580 | <td>normal | none | [ <common-lig-values> || |
jdaggett@8225 | 6581 | <discretionary-lig-values> || <historical-lig-values> || |
jdaggett@8225 | 6582 | <contextual-alt-values> ] |
jdaggett@1662 | 6583 | |
jdaggett@1662 | 6584 | <td>normal |
jdaggett@1662 | 6585 | |
jdaggett@1662 | 6586 | <td>all elements |
jdaggett@1662 | 6587 | |
jdaggett@1662 | 6588 | <td>yes |
jdaggett@1662 | 6589 | |
jdaggett@1662 | 6590 | <td>N/A |
jdaggett@1662 | 6591 | |
jdaggett@1662 | 6592 | <td>visual |
jdaggett@1662 | 6593 | |
jdaggett@3460 | 6594 | <tr> |
jdaggett@3460 | 6595 | <th><a class=property |
jdaggett@1662 | 6596 | href="#propdef-font-variant-numeric">font-variant-numeric</a> |
jdaggett@1662 | 6597 | |
jdaggett@5809 | 6598 | <td>normal | [ <numeric-figure-values> || |
jdaggett@1732 | 6599 | <numeric-spacing-values> || <numeric-fraction-values> || |
jdaggett@3638 | 6600 | ordinal || slashed-zero ] |
jdaggett@1662 | 6601 | |
jdaggett@1662 | 6602 | <td>normal |
jdaggett@1662 | 6603 | |
jdaggett@1662 | 6604 | <td>all elements |
jdaggett@1662 | 6605 | |
jdaggett@1662 | 6606 | <td>yes |
jdaggett@1662 | 6607 | |
jdaggett@1662 | 6608 | <td>N/A |
jdaggett@1662 | 6609 | |
jdaggett@1662 | 6610 | <td>visual |
jdaggett@1662 | 6611 | |
jdaggett@3460 | 6612 | <tr> |
jdaggett@3460 | 6613 | <th><a class=property |
jdaggett@3460 | 6614 | href="#propdef-font-variant-position">font-variant-position</a> |
jdaggett@3460 | 6615 | |
jdaggett@3638 | 6616 | <td>normal | sub | super |
jdaggett@3460 | 6617 | |
jdaggett@3460 | 6618 | <td>normal |
jdaggett@3460 | 6619 | |
jdaggett@3460 | 6620 | <td>all elements |
jdaggett@3460 | 6621 | |
jdaggett@3460 | 6622 | <td>yes |
jdaggett@3460 | 6623 | |
jdaggett@3460 | 6624 | <td>N/A |
jdaggett@3460 | 6625 | |
jdaggett@3460 | 6626 | <td>visual |
jdaggett@3460 | 6627 | |
jdaggett@3460 | 6628 | <tr> |
jdaggett@7060 | 6629 | <th><a class=property href="#propdef-font-weight">font-weight</a> |
jdaggett@484 | 6630 | |
jdaggett@484 | 6631 | <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |
jdaggett@5809 | 6632 | | 700 | 800 | 900 |
jdaggett@484 | 6633 | |
jdaggett@484 | 6634 | <td>normal |
jdaggett@484 | 6635 | |
jdaggett@484 | 6636 | <td>all elements |
jdaggett@484 | 6637 | |
jdaggett@484 | 6638 | <td>yes |
jdaggett@484 | 6639 | |
jdaggett@484 | 6640 | <td>N/A |
jdaggett@484 | 6641 | |
jdaggett@484 | 6642 | <td>visual |
jdaggett@484 | 6643 | </table> |
jdaggett@890 | 6644 | <!--end-properties--> |
jdaggett@5596 | 6645 | <!--begin-descriptors--> |
jdaggett@5596 | 6646 | |
jdaggett@5596 | 6647 | <table class=proptable> |
jdaggett@5596 | 6648 | <thead> |
jdaggett@5596 | 6649 | <tr> |
jdaggett@5596 | 6650 | <th>Descriptor |
jdaggett@5596 | 6651 | |
jdaggett@5596 | 6652 | <th>Value |
jdaggett@5596 | 6653 | |
jdaggett@5596 | 6654 | <th>Initial |
jdaggett@5596 | 6655 | |
jdaggett@5596 | 6656 | <th>Percentages |
jdaggett@5596 | 6657 | |
jdaggett@5596 | 6658 | <th>Media |
jdaggett@5596 | 6659 | |
jdaggett@5596 | 6660 | <tbody> |
jdaggett@5596 | 6661 | <tr> |
jdaggett@5596 | 6662 | <th><a class=property href="#descdef-font-family">font-family</a> |
jdaggett@5596 | 6663 | |
jdaggett@8225 | 6664 | <td><family-name> |
jdaggett@5596 | 6665 | |
jdaggett@5596 | 6666 | <td>N/A |
jdaggett@5596 | 6667 | |
jdaggett@5596 | 6668 | <tr> |
jdaggett@5596 | 6669 | <th><a class=property |
jdaggett@5596 | 6670 | href="#propdef-font-feature-settings">font-feature-settings</a> |
jdaggett@5596 | 6671 | |
jdaggett@8225 | 6672 | <td>normal | <feature-tag-value> # |
jdaggett@5596 | 6673 | |
jdaggett@5596 | 6674 | <td>normal |
jdaggett@5596 | 6675 | |
jdaggett@5596 | 6676 | <tr> |
jdaggett@7060 | 6677 | <th><a class=property href="#propdef-font-stretch">font-stretch</a> |
jdaggett@5596 | 6678 | |
jdaggett@5596 | 6679 | <td>normal | ultra-condensed | extra-condensed | condensed | |
jdaggett@5596 | 6680 | semi-condensed | semi-expanded | expanded | extra-expanded | |
jdaggett@5596 | 6681 | ultra-expanded |
jdaggett@5596 | 6682 | |
jdaggett@5596 | 6683 | <td>normal |
jdaggett@5596 | 6684 | |
jdaggett@5596 | 6685 | <tr> |
jdaggett@7060 | 6686 | <th><a class=property href="#propdef-font-style">font-style</a> |
jdaggett@5596 | 6687 | |
jdaggett@5596 | 6688 | <td>normal | italic | oblique |
jdaggett@5596 | 6689 | |
jdaggett@5596 | 6690 | <td>normal |
jdaggett@5596 | 6691 | |
jdaggett@5596 | 6692 | <tr> |
jdaggett@5596 | 6693 | <th><a class=property href="#propdef-font-variant">font-variant</a> |
jdaggett@5596 | 6694 | |
jdaggett@8225 | 6695 | <td>normal | none | [ <common-lig-values> || |
jdaggett@5596 | 6696 | <discretionary-lig-values> || <historical-lig-values> || |
jdaggett@5596 | 6697 | <contextual-alt-values> || stylistic(<feature-value-name>) |
jdaggett@8225 | 6698 | || historical-forms || styleset(<feature-value-name> #) || |
jdaggett@8225 | 6699 | character-variant(<feature-value-name> #) || |
jdaggett@5833 | 6700 | swash(<feature-value-name>) || |
jdaggett@5596 | 6701 | ornaments(<feature-value-name>) || |
jdaggett@5596 | 6702 | annotation(<feature-value-name>) || [ small-caps | all-small-caps |
jdaggett@6648 | 6703 | | petite-caps | all-petite-caps | unicase | titling-caps ] || |
jdaggett@5596 | 6704 | <numeric-figure-values> || <numeric-spacing-values> || |
jdaggett@5596 | 6705 | <numeric-fraction-values> || ordinal || slashed-zero || |
jdaggett@5596 | 6706 | <east-asian-variant-values> || <east-asian-width-values> || |
jdaggett@5596 | 6707 | ruby ] |
jdaggett@5596 | 6708 | |
jdaggett@5596 | 6709 | <td>normal |
jdaggett@5596 | 6710 | |
jdaggett@5596 | 6711 | <tr> |
jdaggett@7060 | 6712 | <th><a class=property href="#propdef-font-weight">font-weight</a> |
jdaggett@5596 | 6713 | |
jdaggett@5596 | 6714 | <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
jdaggett@5596 | 6715 | |
jdaggett@5596 | 6716 | <td>normal |
jdaggett@5596 | 6717 | |
jdaggett@5596 | 6718 | <tr> |
jdaggett@5596 | 6719 | <th><a class=property href="#descdef-src">src</a> |
jdaggett@5596 | 6720 | |
jdaggett@8225 | 6721 | <td>[ <url> [format(<string> #)]? | <font-face-name> ] # |
jdaggett@5596 | 6722 | |
jdaggett@5596 | 6723 | <td>N/A |
jdaggett@5596 | 6724 | |
jdaggett@5596 | 6725 | <tr> |
jdaggett@5596 | 6726 | <th><a class=property href="#descdef-unicode-range">unicode-range</a> |
jdaggett@5596 | 6727 | |
jdaggett@8225 | 6728 | <td><urange> # |
jdaggett@5596 | 6729 | |
jdaggett@5596 | 6730 | <td>U+0-10FFFF |
jdaggett@5596 | 6731 | </table> |
jdaggett@5596 | 6732 | <!--end-descriptors--> |
jdaggett@6648 | 6733 | <script type="text/javascript"> |
jdaggett@6648 | 6734 | window.onload = function () { |
jdaggett@6648 | 6735 | if (!("devicePixelRatio" in window && window.devicePixelRatio > 1)) return; |
jdaggett@6648 | 6736 | var i, hiresElements = document.getElementsByClassName("hires"); |
jdaggett@6648 | 6737 | for (i = 0; i < hiresElements.length; i++) { |
jdaggett@6648 | 6738 | var h = hiresElements[i]; |
jdaggett@6648 | 6739 | if (h.tagName != "IMG") continue; |
jdaggett@6648 | 6740 | var src = h.getAttribute("src"); |
jdaggett@6648 | 6741 | var src2x = src.replace(/\.\w+$/, function(m) { return "@2x" + m; }); |
jdaggett@6648 | 6742 | h.src = src2x; |
jdaggett@6648 | 6743 | } |
jdaggett@6648 | 6744 | } |
jdaggett@6648 | 6745 | </script> |
jdaggett@484 | 6746 | </html> |
jdaggett@484 | 6747 | <!-- Keep this comment at the end of the file |
jdaggett@484 | 6748 | Local variables: |
jdaggett@484 | 6749 | mode: sgml |
jdaggett@484 | 6750 | sgml-declaration:"~/SGML/HTML4.decl" |
jdaggett@484 | 6751 | sgml-default-doctype-name:"html" |
jdaggett@484 | 6752 | sgml-minimize-attributes:t |
jdaggett@484 | 6753 | sgml-nofill-elements:("pre" "style" "br") |
jdaggett@484 | 6754 | sgml-live-element-indicator:t |
jdaggett@484 | 6755 | sgml-omittag:nil |
jdaggett@484 | 6756 | sgml-shorttag:nil |
jdaggett@484 | 6757 | sgml-namecase-general:t |
jdaggett@484 | 6758 | sgml-general-insert-case:lower |
jdaggett@484 | 6759 | sgml-always-quote-attributes:t |
jdaggett@484 | 6760 | sgml-indent-step:nil |
jdaggett@484 | 6761 | sgml-indent-data:t |
jdaggett@484 | 6762 | sgml-parent-document:nil |
jdaggett@484 | 6763 | sgml-exposed-tags:nil |
jdaggett@484 | 6764 | sgml-local-catalogs:nil |
jdaggett@484 | 6765 | sgml-local-ecat-files:nil |
jdaggett@484 | 6766 | End: |
jdaggett@484 | 6767 | --> |
jdaggett@8277 | 6768 | <!-- |
jdaggett@1856 | 6769 | |
jdaggett@1856 | 6770 | to do: |
jdaggett@1856 | 6771 | |
jdaggett@1856 | 6772 | - wording of OpenType family name handling |
jdaggett@1856 | 6773 | - handling combining sequences in the font matching algorithm |
jdaggett@1856 | 6774 | - fix-up fi ligature example |
jdaggett@1856 | 6775 | |
jdaggett@1856 | 6776 | --> |