Wed, 30 Jan 2013 11:48:51 +0900
[css3-fonts] include example of system font keywords in font family names
jdaggett@484 | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" |
jdaggett@484 | 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
jdaggett@484 | 3 | |
jdaggett@484 | 4 | <html lang=en> |
jdaggett@484 | 5 | <head><meta content="text/html;charset=utf-8" http-equiv=Content-Type> |
jdaggett@484 | 6 | |
jdaggett@1244 | 7 | <title>CSS Fonts Module Level 3</title> |
jdaggett@484 | 8 | <!-- |
jdaggett@484 | 9 | FIXME when publishing: copy the current default.css and link to |
jdaggett@484 | 10 | "default.css" rather than "../default.css" |
jdaggett@484 | 11 | --> |
jdaggett@484 | 12 | <link href="../default.css" rel=stylesheet type="text/css"> |
jdaggett@4545 | 13 | <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon"> |
jdaggett@4546 | 14 | <!-- I'm just experimenting here, don't get your bee in a bonnet --> |
jdaggett@4546 | 15 | <script src="http://use.typekit.com/xon2bky.js" |
jdaggett@4546 | 16 | type="text/javascript"></script> |
jdaggett@4546 | 17 | <script type="text/javascript">try{Typekit.load();}catch(e){}</script> |
jdaggett@484 | 18 | |
jdaggett@497 | 19 | <style type="text/css"> |
jdaggett@4546 | 20 | |
jdaggett@4547 | 21 | body, th, td, h1, h2, h3, h4, h5, h6 { |
jdaggett@4547 | 22 | font-family: "myriad-pro", sans-serif !important; |
jdaggett@4547 | 23 | } |
jdaggett@4547 | 24 | |
jdaggett@524 | 25 | body { |
jdaggett@524 | 26 | padding: 2em 70px 2em 70px; |
jdaggett@524 | 27 | } |
jdaggett@4546 | 28 | |
jdaggett@497 | 29 | p + p, p.mtb { |
jdaggett@497 | 30 | margin-top: 0.8em; |
jdaggett@497 | 31 | text-indent: 0px; |
jdaggett@497 | 32 | } |
jdaggett@6651 | 33 | |
jdaggett@6651 | 34 | #bolderlighter { |
jdaggett@6651 | 35 | width: 40%; |
jdaggett@6651 | 36 | } |
jdaggett@6651 | 37 | |
jdaggett@6651 | 38 | #bolderlighter th { |
jdaggett@6651 | 39 | text-align: center; |
jdaggett@6651 | 40 | } |
jdaggett@497 | 41 | |
jdaggett@7103 | 42 | #fontformats td, #eventhandlers td, #fontformats th, #eventhandlers th { |
jdaggett@1244 | 43 | padding-right: 2em; |
jdaggett@512 | 44 | text-align: left; |
jdaggett@512 | 45 | } |
jdaggett@512 | 46 | |
jdaggett@518 | 47 | dd { |
jdaggett@518 | 48 | margin-bottom: 1em; |
jdaggett@514 | 49 | } |
jdaggett@514 | 50 | |
jdaggett@516 | 51 | #authors dd { |
jdaggett@516 | 52 | margin-bottom: 0; |
jdaggett@516 | 53 | } |
jdaggett@516 | 54 | |
jdaggett@531 | 55 | #fontstylematchingalg { |
jdaggett@531 | 56 | list-style-type: lower-alpha; |
jdaggett@531 | 57 | } |
jdaggett@531 | 58 | |
jdaggett@531 | 59 | #fontmatchingalg ul, #fontmatchingalg ol { |
jdaggett@531 | 60 | margin-top: 0.8em; |
jdaggett@531 | 61 | } |
jdaggett@531 | 62 | |
jdaggett@531 | 63 | #fontmatchingalg li + li { |
jdaggett@531 | 64 | margin-top: 0.8em; |
jdaggett@531 | 65 | } |
jdaggett@531 | 66 | |
jdaggett@531 | 67 | div.example { |
jdaggett@531 | 68 | padding: 1em; |
jdaggett@531 | 69 | margin-top: 1em; |
jdaggett@531 | 70 | } |
jdaggett@531 | 71 | |
jdaggett@531 | 72 | div.example + div.example { |
jdaggett@531 | 73 | margin-top: 2em; |
jdaggett@531 | 74 | } |
jdaggett@531 | 75 | |
jdaggett@531 | 76 | div.figure { |
jdaggett@531 | 77 | page-break-inside: avoid; |
jdaggett@531 | 78 | } |
jdaggett@1244 | 79 | |
jdaggett@1662 | 80 | pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em } |
jdaggett@1662 | 81 | |
jdaggett@1662 | 82 | div.featex { |
jdaggett@1662 | 83 | width: 700px; |
jdaggett@1662 | 84 | } |
jdaggett@1662 | 85 | |
jdaggett@1662 | 86 | div.featex img { |
jdaggett@1662 | 87 | margin: auto; |
jdaggett@1662 | 88 | display: block; |
jdaggett@1662 | 89 | } |
jdaggett@6436 | 90 | |
jdaggett@6436 | 91 | span.tag { |
jdaggett@6436 | 92 | font-family: monospace; |
jdaggett@6436 | 93 | font-size: 120%; |
jdaggett@6436 | 94 | } |
jdaggett@6648 | 95 | |
jdaggett@6701 | 96 | ol ol { |
jdaggett@6701 | 97 | list-style-type: lower-alpha; |
jdaggett@6701 | 98 | } |
jdaggett@7060 | 99 | |
jdaggett@7060 | 100 | .idl-code { |
jdaggett@7060 | 101 | font-weight: bold; |
jdaggett@7060 | 102 | color: #c50; |
jdaggett@7060 | 103 | } |
jdaggett@497 | 104 | </style> |
jdaggett@2556 | 105 | <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet |
jdaggett@2556 | 106 | type="text/css"> |
jdaggett@497 | 107 | |
jdaggett@484 | 108 | <body> |
jdaggett@484 | 109 | <div class=head> <!--begin-logo--> |
jdaggett@484 | 110 | <p><a href="http://www.w3.org/"><img alt=W3C height=48 |
jdaggett@890 | 111 | src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> |
jdaggett@890 | 112 | |
jdaggett@901 | 113 | <h1>CSS Fonts Module Level 3</h1> |
jdaggett@901 | 114 | |
jdaggett@7232 | 115 | <h2 class="no-num no-toc" id=editors-draft-30-january-2013>Editor's Draft |
jdaggett@7232 | 116 | 30 January 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@484 | 122 | href="http://dev.w3.org/csswg/css3-fonts/">http://dev.w3.org/csswg/css3-fonts/</a> |
jdaggett@7232 | 123 | <!-- <dd><a href="http://www.w3.org/TR/2013/ED-css3-fonts-20130130/">http://www.w3.org/TR/2013/ED-css3-fonts-20130130/</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@890 | 134 | href="http://dev.w3.org/csswg/css3-fonts/">http://dev.w3.org/csswg/css3-fonts/</a> |
jdaggett@890 | 135 | |
jdaggett@4624 | 136 | <dt>Previous version: |
jdaggett@890 | 137 | |
jdaggett@890 | 138 | <dd><a |
jdaggett@7103 | 139 | href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/">http://www.w3.org/TR/2012/WD-css3-fonts-20121211/</a> |
jdaggett@4624 | 140 | |
jdaggett@4624 | 141 | <dt>Issues List: |
jdaggett@4624 | 142 | |
jdaggett@4624 | 143 | <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/18">CSS3 Fonts |
jdaggett@4624 | 144 | issues in Tracker</a> |
jdaggett@2556 | 145 | |
jdaggett@2556 | 146 | <dd><a |
jdaggett@6648 | 147 | 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 | 148 | Fonts issues in Bugzilla</a> |
jdaggett@4624 | 149 | |
jdaggett@4624 | 150 | <dt>Discussion: |
jdaggett@1662 | 151 | |
jdaggett@1662 | 152 | <dd><a |
jdaggett@4624 | 153 | href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> |
jdaggett@4624 | 154 | with subject line “<kbd>[css3-fonts] topic</kbd>” |
jdaggett@890 | 155 | |
jdaggett@890 | 156 | <dt>Editor: |
jdaggett@484 | 157 | |
jdaggett@497 | 158 | <dd><a href="mailto:jdaggett@mozilla.com">John Daggett (Mozilla)</a> |
jdaggett@484 | 159 | </dl> |
jdaggett@484 | 160 | <!--begin-copyright--> |
jdaggett@484 | 161 | <p class=copyright><a |
jdaggett@484 | 162 | href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" |
jdaggett@7179 | 163 | rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr |
jdaggett@5530 | 164 | title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a |
jdaggett@5530 | 165 | href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of |
jdaggett@5530 | 166 | Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr |
jdaggett@1662 | 167 | title="European Research Consortium for Informatics and |
jdaggett@5530 | 168 | Mathematics">ERCIM</abbr></a>, <a |
jdaggett@484 | 169 | href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a |
jdaggett@484 | 170 | href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, |
jdaggett@484 | 171 | <a |
jdaggett@484 | 172 | href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> |
jdaggett@484 | 173 | and <a |
jdaggett@484 | 174 | href="http://www.w3.org/Consortium/Legal/copyright-documents">document |
jdaggett@484 | 175 | use</a> rules apply.</p> |
jdaggett@484 | 176 | <!--end-copyright--> |
jdaggett@484 | 177 | <hr title="Separator for header"> |
jdaggett@484 | 178 | </div> |
jdaggett@525 | 179 | |
jdaggett@484 | 180 | <h2 class="no-num no-toc" id=abstract>Abstract</h2> |
jdaggett@484 | 181 | |
jdaggett@890 | 182 | <p>This CSS3 module describes how font properties are specified and how |
jdaggett@890 | 183 | font resources are loaded dynamically. The contents of this specification |
jdaggett@1244 | 184 | are a consolidation of content previously divided into <a |
jdaggett@3538 | 185 | href="http://www.w3.org/TR/2002/WD-css3-fonts-20020802/">CSS3 Fonts</a> |
jdaggett@3538 | 186 | and <a href="http://www.w3.org/TR/2002/WD-css3-webfonts-20020802/">CSS3 |
jdaggett@3538 | 187 | Web Fonts</a> modules. |
jdaggett@484 | 188 | |
jdaggett@484 | 189 | <h2 class="no-num no-toc" id=status>Status of this document</h2> |
jdaggett@484 | 190 | <!--begin-status--> |
jdaggett@484 | 191 | |
jdaggett@484 | 192 | <p>This is a public copy of the editors' draft. It is provided for |
jdaggett@484 | 193 | discussion only and may change at any moment. Its publication here does |
jdaggett@484 | 194 | not imply endorsement of its contents by W3C. Don't cite this document |
jdaggett@484 | 195 | other than as work in progress. |
jdaggett@484 | 196 | |
jdaggett@484 | 197 | <p>The (<a |
jdaggett@484 | 198 | href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public |
jdaggett@1662 | 199 | mailing list <a |
jdaggett@1662 | 200 | href="mailto:www-style@w3.org?Subject=%5Bcss3-fonts%5D%20PUT%20SUBJECT%20HERE"> |
jdaggett@1662 | 201 | www-style@w3.org</a> (see <a |
jdaggett@1662 | 202 | href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for |
jdaggett@1662 | 203 | discussion of this specification. When sending e-mail, please put the text |
jdaggett@1662 | 204 | “css3-fonts” in the subject, preferably like this: |
jdaggett@1148 | 205 | “[<!---->css3-fonts<!---->] <em>…summary of comment…</em>” |
jdaggett@484 | 206 | |
jdaggett@484 | 207 | <p>This document was produced by the <a href="/Style/CSS/members">CSS |
jdaggett@484 | 208 | Working Group</a> (part of the <a href="/Style/">Style Activity</a>). |
jdaggett@484 | 209 | |
jdaggett@484 | 210 | <p>This document was produced by a group operating under the <a |
jdaggett@484 | 211 | href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent |
jdaggett@484 | 212 | Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status" |
jdaggett@484 | 213 | rel=disclosure>public list of any patent disclosures</a> made in |
jdaggett@484 | 214 | connection with the deliverables of the group; that page also includes |
jdaggett@484 | 215 | instructions for disclosing a patent. An individual who has actual |
jdaggett@484 | 216 | knowledge of a patent which the individual believes contains <a |
jdaggett@484 | 217 | href="/Consortium/Patent-Policy-20040205/#def-essential">Essential |
jdaggett@484 | 218 | Claim(s)</a> must disclose the information in accordance with <a |
jdaggett@484 | 219 | href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the |
jdaggett@484 | 220 | W3C Patent Policy</a>.</p> |
jdaggett@484 | 221 | <!--end-status--> |
jdaggett@4624 | 222 | <!-- |
jdaggett@4624 | 223 | <h3 class="no-num no-toc" id="atrisk">Features at risk</h3> |
jdaggett@4624 | 224 | |
jdaggett@4624 | 225 | <p>The following features are at risk and may be removed when exiting CR:</p> |
jdaggett@4624 | 226 | |
jdaggett@4624 | 227 | <ul> |
jdaggett@4624 | 228 | </ul> |
jdaggett@4624 | 229 | --> |
jdaggett@2472 | 230 | |
jdaggett@484 | 231 | <h2 class="no-num no-toc" id=contents>Table of contents</h2> |
jdaggett@484 | 232 | <!--begin-toc--> |
jdaggett@484 | 233 | |
jdaggett@484 | 234 | <ul class=toc> |
jdaggett@890 | 235 | <li><a href="#introduction"><span class=secno>1 </span>Introduction</a> |
jdaggett@890 | 236 | |
jdaggett@1244 | 237 | <li><a href="#typography-background"><span class=secno>2 </span>Typography |
jdaggett@545 | 238 | Background</a> |
jdaggett@545 | 239 | |
jdaggett@6699 | 240 | <li><a href="#basic-font-props"><span class=secno>3 </span>Basic Font |
jdaggett@6699 | 241 | Properties</a> |
jdaggett@484 | 242 | <ul class=toc> |
jdaggett@1662 | 243 | <li><a href="#font-family-prop"><span class=secno>3.1 </span>Font |
jdaggett@1662 | 244 | family: the font-family property</a> |
jdaggett@514 | 245 | <ul class=toc> |
jdaggett@1244 | 246 | <li><a href="#generic-font-families"><span class=secno>3.1.1 |
jdaggett@1244 | 247 | </span>Generic font families</a> |
jdaggett@514 | 248 | </ul> |
jdaggett@484 | 249 | |
jdaggett@1662 | 250 | <li><a href="#font-weight-prop"><span class=secno>3.2 </span>Font |
jdaggett@1662 | 251 | weight: the font-weight property</a> |
jdaggett@1662 | 252 | |
jdaggett@1662 | 253 | <li><a href="#font-stretch-prop"><span class=secno>3.3 </span>Font |
jdaggett@1662 | 254 | width: the font-stretch property</a> |
jdaggett@1662 | 255 | |
jdaggett@1662 | 256 | <li><a href="#font-style-prop"><span class=secno>3.4 </span>Font style: |
jdaggett@1662 | 257 | the font-style property</a> |
jdaggett@1662 | 258 | |
jdaggett@1662 | 259 | <li><a href="#font-size-prop"><span class=secno>3.5 </span>Font size: |
jdaggett@1662 | 260 | the font-size property</a> |
jdaggett@1662 | 261 | |
jdaggett@1662 | 262 | <li><a href="#font-size-adjust-prop"><span class=secno>3.6 |
jdaggett@1662 | 263 | </span>Relative sizing: the font-size-adjust property</a> |
jdaggett@1662 | 264 | |
jdaggett@1662 | 265 | <li><a href="#font-prop"><span class=secno>3.7 </span>Shorthand font |
jdaggett@1662 | 266 | property: the font property</a> |
jdaggett@2457 | 267 | |
jdaggett@2487 | 268 | <li><a href="#font-synthesis-prop"><span class=secno>3.8 |
jdaggett@2487 | 269 | </span>Controlling synthetic faces: the font-synthesis property</a> |
jdaggett@484 | 270 | </ul> |
jdaggett@484 | 271 | |
jdaggett@890 | 272 | <li><a href="#font-resources"><span class=secno>4 </span>Font |
jdaggett@6699 | 273 | Resources</a> |
jdaggett@512 | 274 | <ul class=toc> |
jdaggett@1662 | 275 | <li><a href="#font-face-rule"><span class=secno>4.1 </span>The |
jdaggett@7096 | 276 | <code>@font-face</code> rule</a> |
jdaggett@1244 | 277 | |
jdaggett@1662 | 278 | <li><a href="#font-family-desc"><span class=secno>4.2 </span>Font |
jdaggett@1662 | 279 | family: the font-family descriptor</a> |
jdaggett@1662 | 280 | |
jdaggett@1662 | 281 | <li><a href="#src-desc"><span class=secno>4.3 </span>Font reference: the |
jdaggett@1662 | 282 | src descriptor</a> |
jdaggett@1662 | 283 | |
jdaggett@1662 | 284 | <li><a href="#font-prop-desc"><span class=secno>4.4 </span>Font property |
jdaggett@1662 | 285 | descriptors: the font-style, font-weight, font-stretch descriptors</a> |
jdaggett@1662 | 286 | |
jdaggett@1662 | 287 | <li><a href="#unicode-range-desc"><span class=secno>4.5 </span>Character |
jdaggett@1662 | 288 | range: the unicode-range descriptor</a> |
jdaggett@1662 | 289 | |
jdaggett@1662 | 290 | <li><a href="#font-rend-desc"><span class=secno>4.6 </span>Font |
jdaggett@1732 | 291 | features: the font-variant and font-feature-settings descriptors</a> |
jdaggett@2563 | 292 | |
jdaggett@2563 | 293 | <li><a href="#font-face-loading"><span class=secno>4.7 </span>Font |
jdaggett@2563 | 294 | loading guidelines</a> |
jdaggett@2737 | 295 | |
jdaggett@2737 | 296 | <li><a href="#same-origin-restriction"><span class=secno>4.8 |
jdaggett@2737 | 297 | </span>Same-origin restriction for fonts</a> |
jdaggett@2740 | 298 | <ul class=toc> |
jdaggett@2740 | 299 | <li><a href="#default-same-origin-restriction"><span class=secno>4.8.1 |
jdaggett@2740 | 300 | </span>Default same-origin restriction</a> |
jdaggett@2740 | 301 | |
jdaggett@2740 | 302 | <li><a href="#allowing-cross-origin-font-loading"><span |
jdaggett@2740 | 303 | class=secno>4.8.2 </span>Allowing cross-origin font loading</a> |
jdaggett@2740 | 304 | </ul> |
jdaggett@512 | 305 | </ul> |
jdaggett@484 | 306 | |
jdaggett@1244 | 307 | <li><a href="#font-matching-algorithm"><span class=secno>5 </span>Font |
jdaggett@6699 | 308 | Matching Algorithm</a> |
jdaggett@2457 | 309 | <ul class=toc> |
jdaggett@2457 | 310 | <li><a href="#font-style-matching"><span class=secno>5.1 </span>Matching |
jdaggett@2457 | 311 | font styles</a> |
jdaggett@2457 | 312 | |
jdaggett@6701 | 313 | <li><a href="#cluster-matching"><span class=secno>5.2 </span>Cluster |
jdaggett@6701 | 314 | matching</a> |
jdaggett@6701 | 315 | |
jdaggett@6701 | 316 | <li><a href="#char-handling-issues"><span class=secno>5.3 |
jdaggett@2457 | 317 | </span>Character handling issues</a> |
jdaggett@2509 | 318 | |
jdaggett@6701 | 319 | <li><a href="#font-matching-changes"><span class=secno>5.4 </span>Font |
jdaggett@2509 | 320 | matching changes since CSS 2.1</a> |
jdaggett@6701 | 321 | |
jdaggett@6701 | 322 | <li><a href="#font-matching-examples"><span class=secno>5.5 </span>Font |
jdaggett@6701 | 323 | matching examples</a> |
jdaggett@2457 | 324 | </ul> |
jdaggett@1244 | 325 | |
jdaggett@6699 | 326 | <li><a href="#font-rend-props"><span class=secno>6 </span>Font Feature |
jdaggett@6699 | 327 | Properties</a> |
jdaggett@1662 | 328 | <ul class=toc> |
jdaggett@1856 | 329 | <li><a href="#glyph-selection-positioning"><span class=secno>6.1 |
jdaggett@1856 | 330 | </span>Glyph selection and positioning</a> |
jdaggett@1856 | 331 | |
jdaggett@1856 | 332 | <li><a href="#language-specific-support"><span class=secno>6.2 |
jdaggett@1856 | 333 | </span>Language-specific display</a> |
jdaggett@1856 | 334 | |
jdaggett@1856 | 335 | <li><a href="#font-kerning-prop"><span class=secno>6.3 </span>Kerning: |
jdaggett@1662 | 336 | the font-kerning property</a> |
jdaggett@1662 | 337 | |
jdaggett@6176 | 338 | <li><a href="#font-variant-ligatures-prop"><span class=secno>6.4 |
jdaggett@6176 | 339 | </span>Ligatures: the font-variant-ligatures property</a> |
jdaggett@6176 | 340 | |
jdaggett@6176 | 341 | <li><a href="#font-variant-position-prop"><span class=secno>6.5 |
jdaggett@3638 | 342 | </span>Subscript and superscript forms: the font-variant-position |
jdaggett@3638 | 343 | property</a> |
jdaggett@1856 | 344 | |
jdaggett@2118 | 345 | <li><a href="#font-variant-caps-prop"><span class=secno>6.6 |
jdaggett@2118 | 346 | </span>Capitalization: the font-variant-caps property</a> |
jdaggett@2118 | 347 | |
jdaggett@2118 | 348 | <li><a href="#font-variant-numeric-prop"><span class=secno>6.7 |
jdaggett@2118 | 349 | </span>Numerical formatting: the font-variant-numeric property</a> |
jdaggett@2118 | 350 | |
jdaggett@2118 | 351 | <li><a href="#font-variant-alternates-prop"><span class=secno>6.8 |
jdaggett@1662 | 352 | </span>Alternates and swashes: the font-variant-alternates property</a> |
jdaggett@1662 | 353 | |
jdaggett@1662 | 354 | |
jdaggett@2472 | 355 | <li><a href="#font-feature-values"><span class=secno>6.9 </span>Defining |
jdaggett@7096 | 356 | font specific alternates: the <code>@font-feature-values</code> |
jdaggett@7096 | 357 | rule</a> |
jdaggett@2118 | 358 | |
jdaggett@2118 | 359 | <li><a href="#font-variant-east-asian-prop"><span class=secno>6.10 |
jdaggett@1662 | 360 | </span>East Asian text rendering: the font-variant-east-asian |
jdaggett@1662 | 361 | property</a> |
jdaggett@1662 | 362 | |
jdaggett@2118 | 363 | <li><a href="#font-variant-prop"><span class=secno>6.11 </span>Overall |
jdaggett@1662 | 364 | shorthand for font rendering: the font-variant property</a> |
jdaggett@1662 | 365 | |
jdaggett@2118 | 366 | <li><a href="#font-feature-settings-prop"><span class=secno>6.12 |
jdaggett@2509 | 367 | </span>Low-level font feature settings control: the |
jdaggett@2509 | 368 | font-feature-settings property</a> |
jdaggett@1662 | 369 | |
jdaggett@2118 | 370 | <li><a href="#font-language-override-prop"><span class=secno>6.13 |
jdaggett@1732 | 371 | </span>Font language override: the font-language-override property</a> |
jdaggett@1662 | 372 | </ul> |
jdaggett@1662 | 373 | |
jdaggett@6176 | 374 | <li><a href="#font-feature-resolution"><span class=secno>7 </span>Font |
jdaggett@6699 | 375 | Feature Resolution </a> |
jdaggett@6699 | 376 | <ul class=toc> |
jdaggett@6699 | 377 | <li><a href="#default-features"><span class=secno>7.1 </span>Default |
jdaggett@6699 | 378 | features</a> |
jdaggett@6699 | 379 | |
jdaggett@6699 | 380 | <li><a href="#feature-precedence"><span class=secno>7.2 </span>Feature |
jdaggett@6699 | 381 | precedence</a> |
jdaggett@6699 | 382 | |
jdaggett@6699 | 383 | <li><a href="#feature-precedence-examples"><span class=secno>7.3 |
jdaggett@6699 | 384 | </span>Feature precedence examples</a> |
jdaggett@6699 | 385 | </ul> |
jdaggett@6699 | 386 | |
jdaggett@7021 | 387 | <li><a href="#object-model"><span class=secno>8 </span>Object Model</a> |
jdaggett@7021 | 388 | <ul class=toc> |
jdaggett@7021 | 389 | <li><a href="#om-fontface"><span class=secno>8.1 </span>The |
jdaggett@7021 | 390 | <code>CSSFontFaceRule</code> interface</a> |
jdaggett@7021 | 391 | |
jdaggett@7021 | 392 | <li><a href="#om-fontfeaturevalues"><span class=secno>8.2 </span>The |
jdaggett@7021 | 393 | <code>CSSFontFeatureValuesRule</code> interface</a> |
jdaggett@7021 | 394 | </ul> |
jdaggett@7021 | 395 | |
jdaggett@7021 | 396 | <li><a href="#font-load-events"><span class=secno>9 </span>Font Load |
jdaggett@6699 | 397 | Events</a> |
jdaggett@6699 | 398 | <ul class=toc> |
jdaggett@7021 | 399 | <li><a href="#document-fontloader"><span class=secno>9.1 |
jdaggett@6699 | 400 | </span>Extension to the <code>document</code> interface</a> |
jdaggett@6699 | 401 | |
jdaggett@7021 | 402 | <li><a href="#fontloader-interface"><span class=secno>9.2 </span>The |
jdaggett@6699 | 403 | <code>FontLoader</code> Interface</a> |
jdaggett@7060 | 404 | <ul class=toc> |
jdaggett@7060 | 405 | <li><a href="#events"><span class=secno>9.2.1 </span>Events</a> |
jdaggett@7060 | 406 | |
jdaggett@7060 | 407 | <li><a href="#methods"><span class=secno>9.2.2 </span>Methods</a> |
jdaggett@7060 | 408 | </ul> |
jdaggett@6699 | 409 | |
jdaggett@7021 | 410 | <li><a href="#font-load-event-examples"><span class=secno>9.3 |
jdaggett@6699 | 411 | </span>Font load event examples</a> |
jdaggett@6699 | 412 | </ul> |
jdaggett@6695 | 413 | |
jdaggett@7103 | 414 | <li><a href="#conformance"><span class=secno>10 </span> Conformance</a> |
jdaggett@7103 | 415 | <ul class=toc> |
jdaggett@7103 | 416 | <li><a href="#conventions"><span class=secno>10.1 </span> Document |
jdaggett@7103 | 417 | conventions</a> |
jdaggett@7103 | 418 | |
jdaggett@7103 | 419 | <li><a href="#conformance-classes"><span class=secno>10.2 </span> |
jdaggett@7103 | 420 | Conformance classes</a> |
jdaggett@7103 | 421 | |
jdaggett@7103 | 422 | <li><a href="#partial"><span class=secno>10.3 </span> Partial |
jdaggett@7103 | 423 | implementations</a> |
jdaggett@7103 | 424 | |
jdaggett@7103 | 425 | <li><a href="#experimental"><span class=secno>10.4 </span> Experimental |
jdaggett@7103 | 426 | implementations</a> |
jdaggett@7103 | 427 | |
jdaggett@7103 | 428 | <li><a href="#testing"><span class=secno>10.5 </span> Non-experimental |
jdaggett@7103 | 429 | implementations</a> |
jdaggett@7103 | 430 | </ul> |
jdaggett@7103 | 431 | |
jdaggett@2737 | 432 | <li class=no-num><a href="#platform-props-to-css">Appendix A: Mapping |
jdaggett@1662 | 433 | platform font properties to CSS properties</a> |
jdaggett@1662 | 434 | |
jdaggett@2472 | 435 | <li class=no-num><a href="#ch-ch-ch-changes">Changes</a> |
jdaggett@2472 | 436 | <ul class=toc> |
jdaggett@6648 | 437 | <li class=no-num><a href="#recent-changes"> Changes from the August 2012 |
jdaggett@6648 | 438 | CSS3 Fonts Working Draft</a> |
jdaggett@2472 | 439 | </ul> |
jdaggett@2472 | 440 | |
jdaggett@529 | 441 | <li class=no-num><a href="#acknowledgments">Acknowledgments</a> |
jdaggett@529 | 442 | |
jdaggett@484 | 443 | <li class=no-num><a href="#references">References</a> |
jdaggett@484 | 444 | <ul class=toc> |
jdaggett@1662 | 445 | <li class=no-num><a href="#normative-references">Normative |
jdaggett@1662 | 446 | References</a> |
jdaggett@1662 | 447 | |
jdaggett@1662 | 448 | <li class=no-num><a href="#other-references">Other References</a> |
jdaggett@484 | 449 | </ul> |
jdaggett@484 | 450 | |
jdaggett@484 | 451 | <li class=no-num><a href="#index">Index</a> |
jdaggett@484 | 452 | |
jdaggett@484 | 453 | <li class=no-num><a href="#property-index">Property index</a> |
jdaggett@484 | 454 | </ul> |
jdaggett@484 | 455 | <!--end-toc--> |
jdaggett@484 | 456 | |
jdaggett@890 | 457 | <h2 id=introduction><span class=secno>1 </span>Introduction</h2> |
jdaggett@545 | 458 | |
jdaggett@1148 | 459 | <p>A font provides a resource containing the visual representation of |
jdaggett@1662 | 460 | characters. At the simplest level it contains information that maps |
jdaggett@1662 | 461 | character codes to shapes (called glyphs) that represent these characters. |
jdaggett@1662 | 462 | Fonts sharing a common design style are commonly grouped into font |
jdaggett@1662 | 463 | families classified by a set of standard font properties. Within a family, |
jdaggett@1662 | 464 | the shape displayed for a given character can vary by stroke weight, slant |
jdaggett@1662 | 465 | or relative width, among others. A given font face is described by a |
jdaggett@1662 | 466 | unique combination of these properties. For a given range of text, CSS |
jdaggett@1662 | 467 | font properties are used to select a font family and a specific font face |
jdaggett@1662 | 468 | within that family to be used when rendering that text. As a simple |
jdaggett@1662 | 469 | example, to use the bold form of Helvetica one could use: |
jdaggett@1148 | 470 | |
jdaggett@1148 | 471 | <pre>body { |
jdaggett@1148 | 472 | font-family: Helvetica; |
jdaggett@1148 | 473 | font-weight: bold; |
jdaggett@1148 | 474 | }</pre> |
jdaggett@1148 | 475 | |
jdaggett@1148 | 476 | <p>Font resources may be local, installed on the system on which a user |
jdaggett@1148 | 477 | agent is running, or downloadable. For local font resources descriptive |
jdaggett@1148 | 478 | information can be obtained directly from the font resource. For |
jdaggett@1148 | 479 | downloadable font resources (sometimes referred to as web fonts), the |
jdaggett@1148 | 480 | descriptive information is included with the reference to the font |
jdaggett@1148 | 481 | resource. |
jdaggett@1148 | 482 | |
jdaggett@1148 | 483 | <p>Families of fonts typically don't contain a single face for each |
jdaggett@1148 | 484 | possible variation of font properties. The CSS font selection mechanism |
jdaggett@1148 | 485 | describes how to match a given set of CSS font properties to a given font |
jdaggett@1148 | 486 | face. |
jdaggett@890 | 487 | |
jdaggett@1244 | 488 | <h2 id=typography-background><span class=secno>2 </span>Typography |
jdaggett@1244 | 489 | Background</h2> |
jdaggett@890 | 490 | |
jdaggett@890 | 491 | <p><em>This section is included as background for some of the problems and |
jdaggett@890 | 492 | situations that are described in other sections. It should be viewed as |
jdaggett@890 | 493 | informative only.</em> |
jdaggett@890 | 494 | |
jdaggett@890 | 495 | <p> Typographic traditions vary across the globe so there is no unique way |
jdaggett@890 | 496 | to classify all fonts across languages and cultures. For even common Latin |
jdaggett@890 | 497 | letters, wide variations are possible: |
jdaggett@497 | 498 | |
jdaggett@1150 | 499 | <div class=figure><img alt="variations in glyphs for a single character" |
jdaggett@1150 | 500 | src=aaaaaa.png> |
jdaggett@890 | 501 | <p class=caption>One character, many glyph variations |
jdaggett@498 | 502 | </div> |
jdaggett@497 | 503 | |
jdaggett@497 | 504 | <p>Differences in the anatomy of letterforms is one way to distinguish |
jdaggett@497 | 505 | fonts. For Latin fonts, flourishes at the ends of a character's main |
jdaggett@497 | 506 | strokes, or serifs, can distinguish a font from those without. Similar |
jdaggett@534 | 507 | comparisons exist in non-Latin fonts between fonts with tapered strokes |
jdaggett@534 | 508 | and those using primarily uniform strokes: |
jdaggett@497 | 509 | |
jdaggett@1150 | 510 | <div class=figure><img alt="serif vs. non-serifs" src=serifvssansserif.png> |
jdaggett@890 | 511 | <p class=caption>Letterforms with and without serifs |
jdaggett@534 | 512 | </div> |
jdaggett@534 | 513 | |
jdaggett@1150 | 514 | <div class=figure><img alt="serif vs. non-serifs for japanese" |
jdaggett@1150 | 515 | src=minchovsgothic.png> |
jdaggett@890 | 516 | <p class=caption>Similar groupings for Japanese typefaces |
jdaggett@498 | 517 | </div> |
jdaggett@497 | 518 | |
jdaggett@497 | 519 | <p>Fonts contain letterforms and the data needed to map characters to these |
jdaggett@497 | 520 | letterforms. Often this may be a simple one-to-one mapping but more |
jdaggett@497 | 521 | complex mappings are also possible. The use of combining diacritic marks |
jdaggett@497 | 522 | creates many variations for an underlying letterform: |
jdaggett@497 | 523 | |
jdaggett@1150 | 524 | <div class=figure><img alt="diacritic marks" src=aaaaaa-diacritics.png> |
jdaggett@890 | 525 | <p class=caption>Variations with diacritic marks |
jdaggett@498 | 526 | </div> |
jdaggett@525 | 527 | |
jdaggett@497 | 528 | <p>A sequence of characters can be represented by a single glyph known as a |
jdaggett@497 | 529 | ligature: |
jdaggett@497 | 530 | |
jdaggett@1150 | 531 | <div class=figure><img alt="example of a fi ligature" |
jdaggett@1150 | 532 | src=final-ligature.png> |
jdaggett@890 | 533 | <p class=caption>Ligature example |
jdaggett@498 | 534 | </div> |
jdaggett@497 | 535 | |
jdaggett@497 | 536 | <p>Visual transformations based on textual context like this may be a |
jdaggett@1148 | 537 | stylistic option for European languages but are required to correctly |
jdaggett@498 | 538 | render languages like Arabic; the lam and alef characters below |
jdaggett@497 | 539 | <em>must</em> be combined when they exist in sequence: |
jdaggett@497 | 540 | |
jdaggett@1150 | 541 | <div class=figure><img alt="lam alef ligature" src=lamaleflig.png> |
jdaggett@890 | 542 | <p class=caption>Required Arabic ligature |
jdaggett@498 | 543 | </div> |
jdaggett@497 | 544 | |
jdaggett@498 | 545 | <p>The relative complexity of these shaping transformations requires |
jdaggett@498 | 546 | additional data within the font. |
jdaggett@497 | 547 | |
jdaggett@497 | 548 | <p>Sets of font faces with various stylistic variations are often grouped |
jdaggett@512 | 549 | together into font families. In the simplest case a regular face is |
jdaggett@512 | 550 | supplemented with bold and italic faces but much more extensive groupings |
jdaggett@512 | 551 | are possible. Variations in the thickness of letterform strokes, or the |
jdaggett@512 | 552 | weight, or the overall proportions of the letterform, or the width, are |
jdaggett@512 | 553 | most common. In the example below, each letter uses a different font face |
jdaggett@497 | 554 | within the Univers font family. The width used increases from top to |
jdaggett@497 | 555 | bottom and the weight increases from left to right: |
jdaggett@497 | 556 | |
jdaggett@1150 | 557 | <div class=figure><img alt="various width and weight variations within a |
jdaggett@1150 | 558 | single family" src=weightwidthvariations.png> |
jdaggett@890 | 559 | <p class=caption>Weight and width variations within a single font family |
jdaggett@498 | 560 | </div> |
jdaggett@497 | 561 | |
jdaggett@545 | 562 | <p>Creating fonts that support multiple scripts is a difficult task; |
jdaggett@1148 | 563 | designers need to understand the cultural traditions surrounding the use |
jdaggett@1148 | 564 | of type in different scripts and come up with letterforms that somehow |
jdaggett@1148 | 565 | share a common theme. Many languages often share a common script and each |
jdaggett@1148 | 566 | of these languages may have noticeable stylistic differences. The Arabic |
jdaggett@545 | 567 | script is shared by Persian and Urdu and Cyrillic is used with many |
jdaggett@545 | 568 | languages, not just Russian. |
jdaggett@518 | 569 | |
jdaggett@2472 | 570 | <p>The character map of a font defines the mapping of characters to glyphs |
jdaggett@2472 | 571 | for that font. If a document contains characters not supported by the |
jdaggett@2472 | 572 | character maps of explicitly specified fonts, a user agent may use a |
jdaggett@2472 | 573 | system font fallback procedure to locate an appropriate font that does. If |
jdaggett@2472 | 574 | no appropriate font can be found, some form of "missing glyph" character |
jdaggett@2472 | 575 | will be rendered by the user agent. Fallback can occur because fonts are |
jdaggett@2472 | 576 | not explicitly specified or because authors fail to explicitly indicate |
jdaggett@2472 | 577 | the encoding used by a document. |
jdaggett@2472 | 578 | |
jdaggett@2472 | 579 | <p>Although the character map of a font maps a given character to a glyph |
jdaggett@2472 | 580 | for that character, modern font technologies such as OpenType and AAT |
jdaggett@2472 | 581 | (Apple Advanced Typography) provide a richer set of rules for performing |
jdaggett@2472 | 582 | this mapping. Fonts in these forms allow these features to be embedded in |
jdaggett@2472 | 583 | the font itself and controlled by applications. Common typographic |
jdaggett@2472 | 584 | features which can be specified this way include ligatures, swashes, |
jdaggett@2472 | 585 | contextual alternates, proportional and tabular figures, and automatic |
jdaggett@2472 | 586 | fractions, to list just a few. For a visual overview of OpenType features, |
jdaggett@2472 | 587 | see the <a href="#OPENTYPE-FONT-GUIDE" |
jdaggett@6659 | 588 | rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>. |
jdaggett@1662 | 589 | |
jdaggett@6699 | 590 | <h2 id=basic-font-props><span class=secno>3 </span>Basic Font Properties</h2> |
jdaggett@512 | 591 | |
jdaggett@512 | 592 | <p>The particular font face used to render a character is determined by the |
jdaggett@515 | 593 | font family and other font properties that apply to a given element. This |
jdaggett@515 | 594 | structure allows settings to be varied independent of each other.</p> |
jdaggett@512 | 595 | <!-- prop: font-family --> |
jdaggett@484 | 596 | |
jdaggett@1662 | 597 | <h3 id=font-family-prop><span class=secno>3.1 </span>Font family: the <a |
jdaggett@1662 | 598 | href="#propdef-font-family">font-family</a> property</h3> |
jdaggett@1662 | 599 | |
jdaggett@4624 | 600 | <table class=propdef id=namefont-familyvalue-ltfamily-name-ltgen> |
jdaggett@484 | 601 | <tbody> |
jdaggett@484 | 602 | <tr> |
jdaggett@484 | 603 | <td>Name: |
jdaggett@484 | 604 | |
jdaggett@1662 | 605 | <td><dfn id=propdef-font-family>font-family</dfn> |
jdaggett@484 | 606 | |
jdaggett@484 | 607 | <tr> |
jdaggett@484 | 608 | <td>Value: |
jdaggett@484 | 609 | |
jdaggett@5833 | 610 | <td>[ <family-name> | <generic-family> ]# |
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@484 | 641 | </table> |
jdaggett@484 | 642 | |
jdaggett@514 | 643 | <p>This property specifies a prioritized list of font family names or |
jdaggett@6694 | 644 | generic family names. A font family defines a set of faces that vary in |
jdaggett@6694 | 645 | weight, width or slope. CSS uses the combination of a family name with |
jdaggett@6694 | 646 | other style attributes to select an individual face. Using this selection |
jdaggett@6694 | 647 | mechanism, rather than selecting a face via the style name as is often |
jdaggett@6694 | 648 | done in design applications, allows some degree of regularity in textual |
jdaggett@6694 | 649 | display when fallback occurs. |
jdaggett@6694 | 650 | |
jdaggett@6694 | 651 | <p class=note>Designers should note that the CSS definition of font |
jdaggett@6694 | 652 | attributes used for selection are explicitly not intended to define a font |
jdaggett@6694 | 653 | taxonomy. A type designer's idea of a family may often extend to a set of |
jdaggett@6694 | 654 | faces that vary along axes other than just the standard axes of weight, |
jdaggett@6694 | 655 | width and slope. A family may extend to include both a set of serif faces |
jdaggett@6694 | 656 | and a set of sans-serif faces or vary along axes that are unique to that |
jdaggett@6694 | 657 | family. The CSS font selection mechanism merely provides a way to |
jdaggett@6694 | 658 | determine the “closest” substitute when substitution is necessary. |
jdaggett@6694 | 659 | |
jdaggett@6694 | 660 | <p>Unlike other CSS properties, component values are a comma-separated list |
jdaggett@6694 | 661 | indicating alternatives. A user agent iterates through the list of family |
jdaggett@6694 | 662 | names until it matches an available font that contains a glyph for the |
jdaggett@6694 | 663 | character to be rendered. This allows for differences in available fonts |
jdaggett@6694 | 664 | across platforms and for differences in the range of characters supported |
jdaggett@6694 | 665 | by individual fonts. |
jdaggett@514 | 666 | |
jdaggett@514 | 667 | <p>A font family name only specifies a name given to a set of font faces, |
jdaggett@514 | 668 | it does not specify an individual face. Given the availability of the |
jdaggett@514 | 669 | fonts below, Futura would match but Futura Medium would not: |
jdaggett@514 | 670 | |
jdaggett@1150 | 671 | <div class=figure><img alt="family and face names" |
jdaggett@1150 | 672 | src=familyvsfacename.png> |
jdaggett@890 | 673 | <p class=caption>Family and individual face names |
jdaggett@514 | 674 | </div> |
jdaggett@514 | 675 | |
jdaggett@514 | 676 | <p>Consider the example below: |
jdaggett@512 | 677 | |
jdaggett@512 | 678 | <div class=example> |
jdaggett@514 | 679 | <pre>body { |
jdaggett@514 | 680 | font-family: Helvetica, Verdana, sans-serif; |
jdaggett@514 | 681 | }</pre> |
jdaggett@1758 | 682 | |
jdaggett@1758 | 683 | <p>If Helvetica is available it will be used when rendering. If neither |
jdaggett@1758 | 684 | Helvetica nor Verdana is present, then the user-agent-defined sans serif |
jdaggett@1758 | 685 | font will be used.</p> |
jdaggett@512 | 686 | </div> |
jdaggett@512 | 687 | |
jdaggett@514 | 688 | <p>There are two types of font family names: |
jdaggett@512 | 689 | |
jdaggett@512 | 690 | <dl> |
jdaggett@514 | 691 | <dt><family-name> |
jdaggett@514 | 692 | |
jdaggett@514 | 693 | <dd>The name of a font family of choice such as Helvetica or Verdana in |
jdaggett@2457 | 694 | the previous example. |
jdaggett@514 | 695 | |
jdaggett@514 | 696 | <dt><generic-family> |
jdaggett@514 | 697 | |
jdaggett@4624 | 698 | <dd> The following generic family keywords are defined: ‘<a |
jdaggett@4624 | 699 | href="#serif"><code class=property>serif</code></a>’, ‘<a |
jdaggett@4624 | 700 | href="#sans-serif"><code class=property>sans-serif</code></a>’, ‘<a |
jdaggett@4624 | 701 | href="#cursive"><code class=property>cursive</code></a>’, ‘<a |
jdaggett@4624 | 702 | href="#fantasy"><code class=property>fantasy</code></a>’, and ‘<a |
jdaggett@4624 | 703 | href="#monospace"><code class=property>monospace</code></a>’. These |
jdaggett@1148 | 704 | keywords can be used as a general fallback mechanism when an author's |
jdaggett@1758 | 705 | desired font choices are not available. As keywords, they must not be |
jdaggett@1148 | 706 | quoted. Authors are encouraged to append a generic font family as a last |
jdaggett@1148 | 707 | alternative for improved robustness. |
jdaggett@512 | 708 | </dl> |
jdaggett@512 | 709 | |
jdaggett@2457 | 710 | <p>Font family names must either be given quoted as <a |
jdaggett@2457 | 711 | href="//www.w3.org/TR/CSS21/syndata.html#strings">strings,</a> or unquoted |
jdaggett@2457 | 712 | as a sequence of one or more <a |
jdaggett@2457 | 713 | href="//www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers.</a> |
jdaggett@2457 | 714 | This means most punctuation characters and digits at the start of each |
jdaggett@2457 | 715 | token must be escaped in unquoted font family names. |
jdaggett@2457 | 716 | |
jdaggett@2457 | 717 | <p>For example, the following declarations are invalid: |
jdaggett@2457 | 718 | |
jdaggett@2457 | 719 | <pre> |
jdaggett@2457 | 720 | font-family: Red/Black, sans-serif; |
jdaggett@2457 | 721 | font-family: "Lucida" Grande, sans-serif; |
jdaggett@2457 | 722 | font-family: Ahem!, sans-serif; |
jdaggett@2457 | 723 | font-family: test@foo, sans-serif; |
jdaggett@2457 | 724 | font-family: #POUND, sans-serif; |
jdaggett@2457 | 725 | font-family: Hawaii 5-0, sans-serif; |
jdaggett@2457 | 726 | </pre> |
jdaggett@2457 | 727 | |
jdaggett@2457 | 728 | <p>If a sequence of identifiers is given as a font family name, the |
jdaggett@2457 | 729 | computed value is the name converted to a string by joining all the |
jdaggett@2457 | 730 | identifiers in the sequence by single spaces. |
jdaggett@2457 | 731 | |
jdaggett@2457 | 732 | <p>To avoid mistakes in escaping, it is recommended to quote font family |
jdaggett@2457 | 733 | names that contain white space, digits, or punctuation characters other |
jdaggett@2457 | 734 | than hyphens: |
jdaggett@2457 | 735 | |
jdaggett@2457 | 736 | <pre> |
jdaggett@2457 | 737 | body { font-family: "New Century Schoolbook", serif } |
jdaggett@2457 | 738 | |
jdaggett@2457 | 739 | <BODY STYLE="font-family: '21st Century', fantasy"> |
jdaggett@2457 | 740 | </pre> |
jdaggett@2457 | 741 | |
jdaggett@2457 | 742 | <p>Font family <em>names</em> that happen to be the same as a keyword value |
jdaggett@4624 | 743 | (‘<code class=property>inherit</code>’, ‘<a href="#serif"><code |
jdaggett@4624 | 744 | class=property>serif</code></a>’, ‘<a href="#sans-serif"><code |
jdaggett@4624 | 745 | class=property>sans-serif</code></a>’, ‘<a href="#monospace"><code |
jdaggett@4624 | 746 | class=property>monospace</code></a>’, ‘<a href="#fantasy"><code |
jdaggett@4624 | 747 | class=property>fantasy</code></a>’, and ‘<a href="#cursive"><code |
jdaggett@4624 | 748 | class=property>cursive</code></a>’) must be quoted to prevent confusion |
jdaggett@2457 | 749 | with the keywords with the same names. The keywords ‘<code |
jdaggett@2457 | 750 | class=property>initial</code>’ and ‘<code |
jdaggett@2457 | 751 | class=property>default</code>’ are reserved for future use and must also |
jdaggett@2457 | 752 | be quoted when used as font names. UAs must not consider these keywords as |
jdaggett@2457 | 753 | matching the ‘<code class=css><family-name></code>’ type. |
jdaggett@2457 | 754 | |
jdaggett@6694 | 755 | <p>The precise way a set of fonts are grouped into font families varies |
jdaggett@6694 | 756 | depending upon the platform font management API's. The Windows GDI API |
jdaggett@6694 | 757 | only allows four faces to be grouped into a family while the DirectWrite |
jdaggett@6694 | 758 | API and API's on OSX and other platforms support font families with a |
jdaggett@6695 | 759 | variety of weights, widths and slopes (see <a |
jdaggett@6694 | 760 | href="#platform-props-to-css">Appendix A</a> for more details). |
jdaggett@6694 | 761 | |
jdaggett@2457 | 762 | <p>Some font formats allow fonts to carry multiple localizations of the |
jdaggett@2457 | 763 | family name. User agents must recognize and correctly match all of these |
jdaggett@2457 | 764 | names independent of the underlying platform localization, system API used |
jdaggett@2457 | 765 | or document encoding: |
jdaggett@2457 | 766 | |
jdaggett@2457 | 767 | <div class=figure><img alt="examples of localized family names" |
jdaggett@2457 | 768 | src=localizedfamilynames.png> |
jdaggett@2457 | 769 | <p class=caption>Localized family names |
jdaggett@2457 | 770 | </div> |
jdaggett@2457 | 771 | |
jdaggett@1244 | 772 | <h4 id=generic-font-families><span class=secno>3.1.1 </span>Generic font |
jdaggett@1244 | 773 | families</h4> |
jdaggett@514 | 774 | |
jdaggett@518 | 775 | <p>All five generic font families are defined to exist in all CSS |
jdaggett@518 | 776 | implementations (they need not necessarily map to five distinct actual |
jdaggett@518 | 777 | fonts). User agents should provide reasonable default choices for the |
jdaggett@518 | 778 | generic font families, which express the characteristics of each family as |
jdaggett@518 | 779 | well as possible within the limits allowed by the underlying technology. |
jdaggett@518 | 780 | User agents are encouraged to allow users to select alternative choices |
jdaggett@514 | 781 | for the generic fonts. |
jdaggett@514 | 782 | |
jdaggett@890 | 783 | <h5 class="no-num no-toc"> <span class=index-def id=serif0 title="serif, |
jdaggett@890 | 784 | definition of"><a name=serif-def><dfn id=serif>serif</dfn></a></span></h5> |
jdaggett@514 | 785 | |
jdaggett@514 | 786 | <p>Glyphs of serif fonts, as the term is used in CSS, have finishing |
jdaggett@514 | 787 | strokes, flared or tapering ends, or have actual serifed endings |
jdaggett@514 | 788 | (including slab serifs). Serif fonts are typically proportionately-spaced. |
jdaggett@514 | 789 | They often display a greater variation between thick and thin strokes than |
jdaggett@4624 | 790 | fonts from the ‘<a href="#sans-serif"><code |
jdaggett@4624 | 791 | class=property>sans-serif</code></a>’ generic font family. CSS uses the |
jdaggett@4624 | 792 | term ‘<a href="#serif"><code class=property>serif</code></a>’ to apply |
jdaggett@4624 | 793 | to a font for any script, although other names may be more familiar for |
jdaggett@4624 | 794 | particular scripts, such as Mincho (Japanese), Sung, Song or Kai |
jdaggett@3041 | 795 | (Chinese), Batang (Korean). Any font that is so described may be used to |
jdaggett@4624 | 796 | represent the generic ‘<a href="#serif"><code |
jdaggett@4624 | 797 | class=property>serif</code></a>’ family. |
jdaggett@514 | 798 | |
jdaggett@1150 | 799 | <div class=figure><img alt="sample serif fonts" src=serifexamples.png> |
jdaggett@890 | 800 | <p class=caption>Sample serif fonts |
jdaggett@514 | 801 | </div> |
jdaggett@514 | 802 | |
jdaggett@890 | 803 | <h5 class="no-num no-toc"> <span class=index-def id=sans-serif0 |
jdaggett@890 | 804 | title="sans-serif, definition of"> <a name=sans-serif-def><dfn |
jdaggett@890 | 805 | id=sans-serif>sans-serif</dfn></a></span></h5> |
jdaggett@514 | 806 | |
jdaggett@514 | 807 | <p>Glyphs in sans-serif fonts, as the term is used in CSS, have stroke |
jdaggett@514 | 808 | endings that are plain -- without any flaring, cross stroke, or other |
jdaggett@514 | 809 | ornamentation. Sans-serif fonts are typically proportionately-spaced. They |
jdaggett@514 | 810 | often have little variation between thick and thin strokes, compared to |
jdaggett@4624 | 811 | fonts from the ‘<a href="#serif"><code |
jdaggett@4624 | 812 | class=property>serif</code></a>’ family. CSS uses the term ‘<a |
jdaggett@4624 | 813 | href="#sans-serif"><code class=property>sans-serif</code></a>’ to apply |
jdaggett@4624 | 814 | to a font for any script, although other names may be more familiar for |
jdaggett@3041 | 815 | particular scripts, such as Gothic (Japanese), Hei (Chinese), or Gulim |
jdaggett@1148 | 816 | (Korean). Any font that is so described may be used to represent the |
jdaggett@4624 | 817 | generic ‘<a href="#sans-serif"><code |
jdaggett@4624 | 818 | class=property>sans-serif</code></a>’ family. |
jdaggett@518 | 819 | |
jdaggett@1150 | 820 | <div class=figure><img alt="sample sans-serif fonts" |
jdaggett@1150 | 821 | src=sansserifexamples.png> |
jdaggett@890 | 822 | <p class=caption>Sample sans-serif fonts |
jdaggett@514 | 823 | </div> |
jdaggett@514 | 824 | |
jdaggett@890 | 825 | <h5 class="no-num no-toc"> <span class=index-def id=cursive0 |
jdaggett@545 | 826 | title="cursive, definition of"> <a name=cursive-def><dfn |
jdaggett@890 | 827 | id=cursive>cursive</dfn></a></span></h5> |
jdaggett@545 | 828 | |
jdaggett@545 | 829 | <p>Glyphs in cursive fonts generally have either joining strokes or other |
jdaggett@545 | 830 | cursive characteristics beyond those of italic typefaces. The glyphs are |
jdaggett@545 | 831 | partially or completely connected, and the result looks more like |
jdaggett@545 | 832 | handwritten pen or brush writing than printed letterwork. Some scripts, |
jdaggett@4624 | 833 | such as Arabic, are almost always cursive. CSS uses the term ‘<a |
jdaggett@4624 | 834 | href="#cursive"><code class=property>cursive</code></a>’ to apply to a |
jdaggett@4624 | 835 | font for any script, although other names such as Chancery, Brush, Swing |
jdaggett@4624 | 836 | and Script are also used in font names. |
jdaggett@514 | 837 | |
jdaggett@1150 | 838 | <div class=figure><img alt="sample cursive fonts" src=cursiveexamples.png> |
jdaggett@890 | 839 | <p class=caption>Sample cursive fonts |
jdaggett@514 | 840 | </div> |
jdaggett@514 | 841 | |
jdaggett@890 | 842 | <h5 class="no-num no-toc"> <span class=index-def id=fantasy0 |
jdaggett@545 | 843 | title="fantasy, definition of"> <a name=fantasy-def><dfn |
jdaggett@890 | 844 | id=fantasy>fantasy</dfn></a></span></h5> |
jdaggett@514 | 845 | |
jdaggett@518 | 846 | <p>Fantasy fonts are primarily decorative fonts that contain playful |
jdaggett@518 | 847 | representations of characters. These do not include Pi or Picture fonts |
jdaggett@518 | 848 | which do not represent actual characters. |
jdaggett@514 | 849 | |
jdaggett@1150 | 850 | <div class=figure><img alt="sample fantasy fonts" src=fantasyexamples.png> |
jdaggett@890 | 851 | <p class=caption>Sample fantasy fonts |
jdaggett@514 | 852 | </div> |
jdaggett@514 | 853 | |
jdaggett@890 | 854 | <h5 class="no-num no-toc"> <span class=index-def id=monospace0 |
jdaggett@545 | 855 | title="monospace, definition of"> <a name=monospace-def><dfn |
jdaggett@890 | 856 | id=monospace>monospace</dfn></a></span></h5> |
jdaggett@514 | 857 | |
jdaggett@514 | 858 | <p>The sole criterion of a monospace font is that all glyphs have the same |
jdaggett@518 | 859 | fixed width. This is often used to render samples of computer code. |
jdaggett@514 | 860 | |
jdaggett@1150 | 861 | <div class=figure><img alt="sample monospace fonts" |
jdaggett@1150 | 862 | src=monospaceexamples.png> |
jdaggett@890 | 863 | <p class=caption>Sample monospace fonts |
jdaggett@514 | 864 | </div> |
jdaggett@512 | 865 | <!-- prop: font-weight --> |
jdaggett@512 | 866 | |
jdaggett@1662 | 867 | <h3 id=font-weight-prop><span class=secno>3.2 </span>Font weight: the <a |
jdaggett@1662 | 868 | href="#propdef-font-weight">font-weight</a> property</h3> |
jdaggett@1662 | 869 | |
jdaggett@4624 | 870 | <table class=propdef id=namefont-weightvaluenormal-bold-bolder-l> |
jdaggett@484 | 871 | <tbody> |
jdaggett@484 | 872 | <tr> |
jdaggett@484 | 873 | <td>Name: |
jdaggett@484 | 874 | |
jdaggett@1662 | 875 | <td><dfn id=propdef-font-weight>font-weight</dfn> |
jdaggett@484 | 876 | |
jdaggett@484 | 877 | <tr> |
jdaggett@484 | 878 | <td>Value: |
jdaggett@484 | 879 | |
jdaggett@484 | 880 | <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |
jdaggett@5809 | 881 | | 700 | 800 | 900 |
jdaggett@484 | 882 | |
jdaggett@484 | 883 | <tr> |
jdaggett@484 | 884 | <td>Initial: |
jdaggett@484 | 885 | |
jdaggett@484 | 886 | <td>normal |
jdaggett@484 | 887 | |
jdaggett@484 | 888 | <tr> |
jdaggett@484 | 889 | <td>Applies to: |
jdaggett@484 | 890 | |
jdaggett@484 | 891 | <td>all elements |
jdaggett@484 | 892 | |
jdaggett@484 | 893 | <tr> |
jdaggett@484 | 894 | <td>Inherited: |
jdaggett@484 | 895 | |
jdaggett@484 | 896 | <td>yes |
jdaggett@484 | 897 | |
jdaggett@484 | 898 | <tr> |
jdaggett@484 | 899 | <td>Percentages: |
jdaggett@484 | 900 | |
jdaggett@484 | 901 | <td>N/A |
jdaggett@484 | 902 | |
jdaggett@484 | 903 | <tr> |
jdaggett@484 | 904 | <td>Media: |
jdaggett@484 | 905 | |
jdaggett@484 | 906 | <td>visual |
jdaggett@484 | 907 | |
jdaggett@484 | 908 | <tr> |
jdaggett@1148 | 909 | <td>Computed value: |
jdaggett@484 | 910 | |
jdaggett@484 | 911 | <td>see description |
jdaggett@484 | 912 | </table> |
jdaggett@484 | 913 | |
jdaggett@2556 | 914 | <p>The <a class=noxref href="#font-weight-prop"><span |
jdaggett@2556 | 915 | class=property>‘<code class=property>font-weight</code>’</span></a> |
jdaggett@2556 | 916 | property specifies weight of glyphs in the font, their degree of blackness |
jdaggett@2556 | 917 | or stroke thickness. |
jdaggett@531 | 918 | |
jdaggett@531 | 919 | <p>Values have the following meanings: |
jdaggett@512 | 920 | |
jdaggett@512 | 921 | <dl> |
jdaggett@514 | 922 | <dt>100 to 900 |
jdaggett@512 | 923 | |
jdaggett@512 | 924 | <dd>These values form an ordered sequence, where each number indicates a |
jdaggett@514 | 925 | weight that is at least as dark as its predecessor. These roughly |
jdaggett@514 | 926 | correspond to the commonly used weight names below: |
jdaggett@512 | 927 | </dl> |
jdaggett@512 | 928 | |
jdaggett@512 | 929 | <ul> |
jdaggett@512 | 930 | <li>100 - Thin |
jdaggett@512 | 931 | |
jdaggett@518 | 932 | <li>200 - Extra Light (Ultra Light) |
jdaggett@512 | 933 | |
jdaggett@512 | 934 | <li>300 - Light |
jdaggett@512 | 935 | |
jdaggett@512 | 936 | <li>400 - Normal |
jdaggett@512 | 937 | |
jdaggett@512 | 938 | <li>500 - Medium |
jdaggett@512 | 939 | |
jdaggett@518 | 940 | <li>600 - Semi Bold (Demi Bold) |
jdaggett@512 | 941 | |
jdaggett@512 | 942 | <li>700 - Bold |
jdaggett@512 | 943 | |
jdaggett@518 | 944 | <li>800 - Extra Bold (Ultra Bold) |
jdaggett@512 | 945 | |
jdaggett@512 | 946 | <li>900 - Black (Heavy) |
jdaggett@512 | 947 | </ul> |
jdaggett@512 | 948 | |
jdaggett@512 | 949 | <dl> |
jdaggett@5809 | 950 | <dt><a href="#normal2"><strong>normal</strong></a> |
jdaggett@512 | 951 | |
jdaggett@1148 | 952 | <dd>Same as ‘<code class=css>400</code>’. |
jdaggett@512 | 953 | |
jdaggett@512 | 954 | <dt><strong>bold</strong> |
jdaggett@512 | 955 | |
jdaggett@1148 | 956 | <dd>Same as ‘<code class=css>700</code>’. |
jdaggett@512 | 957 | |
jdaggett@512 | 958 | <dt><strong>bolder</strong> |
jdaggett@512 | 959 | |
jdaggett@532 | 960 | <dd>Specifies the weight of the face bolder than the inherited value. |
jdaggett@512 | 961 | |
jdaggett@512 | 962 | <dt><strong>lighter</strong> |
jdaggett@512 | 963 | |
jdaggett@532 | 964 | <dd>Specifies the weight of the face lighter than the inherited value. |
jdaggett@512 | 965 | </dl> |
jdaggett@512 | 966 | |
jdaggett@531 | 967 | <p>Font formats that use a scale other than a nine step scale should map |
jdaggett@531 | 968 | their scale onto the CSS scale so that 400 roughly corresponds with a face |
jdaggett@531 | 969 | that would be labeled as Regular, Book, Roman and 700 roughly matches a |
jdaggett@531 | 970 | face that would be labeled as Bold. Or weights may be inferred from the |
jdaggett@531 | 971 | style names, ones that correspond roughly with the scale above. The scale |
jdaggett@1662 | 972 | is relative, so a face with a larger weight value must never appear |
jdaggett@1148 | 973 | lighter. If style names are used to infer weights, care should be taken to |
jdaggett@1148 | 974 | handle variations in style names across locales. |
jdaggett@531 | 975 | |
jdaggett@531 | 976 | <p>Quite often there are only a few weights available for a particular font |
jdaggett@534 | 977 | family. When a weight is specified for which no face exists, a face with a |
jdaggett@534 | 978 | nearby weight is used. In general, bold weights map to faces with heavier |
jdaggett@1269 | 979 | weights and light weights map to faces with lighter weights (see the <a |
jdaggett@1269 | 980 | href="#font-matching-algorithm">font matching section below</a> for a |
jdaggett@1269 | 981 | precise definition). The examples here illustrate which face is used for |
jdaggett@1269 | 982 | different weights, grey indicates a face for that weight does not exist so |
jdaggett@1269 | 983 | a face with a nearby weight is used: |
jdaggett@532 | 984 | |
jdaggett@1150 | 985 | <div class=figure><img alt="weight mappings for a family with 400, 700 and |
jdaggett@1150 | 986 | 900 weights" src=optimaweights.png> |
jdaggett@532 | 987 | <p class=caption>Weight mappings for a font family with 400, 700 and 900 |
jdaggett@890 | 988 | weight faces |
jdaggett@518 | 989 | </div> |
jdaggett@518 | 990 | |
jdaggett@1150 | 991 | <div class=figure><img alt="weight mappings for a family with 300, 600 |
jdaggett@1150 | 992 | weights" src=hiraginoweights.png> |
jdaggett@532 | 993 | <p class=caption>Weight mappings for a font family with 300 and 600 weight |
jdaggett@890 | 994 | faces |
jdaggett@531 | 995 | </div> |
jdaggett@518 | 996 | |
jdaggett@2487 | 997 | <p>Although the practice is not well-loved by typographers, bold faces are |
jdaggett@2487 | 998 | often synthesized by user agents for faces that lack actual bold faces. |
jdaggett@2487 | 999 | For the purposes of style matching, these faces must be treated as if they |
jdaggett@2487 | 1000 | exist within the family. |
jdaggett@1148 | 1001 | |
jdaggett@1148 | 1002 | <p>Values of ‘<code class=property>bolder</code>’ and ‘<code |
jdaggett@1148 | 1003 | class=property>lighter</code>’ indicate values relative to the weight of |
jdaggett@1148 | 1004 | the parent element. Based on the inherited weight value, the weight used |
jdaggett@1148 | 1005 | is calculated using the chart below. Child elements inherit the calculated |
jdaggett@1148 | 1006 | weight, not a value of ‘<code class=property>bolder</code>’ or |
jdaggett@1148 | 1007 | ‘<code class=property>lighter</code>’. |
jdaggett@1148 | 1008 | |
jdaggett@6651 | 1009 | <table class=data id=bolderlighter summary="Bolder/lighter mappings"> |
jdaggett@1148 | 1010 | <thead> |
jdaggett@1148 | 1011 | <tr> |
jdaggett@6651 | 1012 | <th>Inherited value |
jdaggett@6651 | 1013 | |
jdaggett@6651 | 1014 | <th>bolder |
jdaggett@6651 | 1015 | |
jdaggett@6651 | 1016 | <th>lighter |
jdaggett@1148 | 1017 | |
jdaggett@1148 | 1018 | <tbody> |
jdaggett@1148 | 1019 | <tr> |
jdaggett@1244 | 1020 | <th>100 |
jdaggett@1148 | 1021 | |
jdaggett@1148 | 1022 | <td>400 |
jdaggett@1148 | 1023 | |
jdaggett@1148 | 1024 | <td>100 |
jdaggett@1148 | 1025 | |
jdaggett@1148 | 1026 | <tr> |
jdaggett@1244 | 1027 | <th>200 |
jdaggett@1148 | 1028 | |
jdaggett@1148 | 1029 | <td>400 |
jdaggett@1148 | 1030 | |
jdaggett@1148 | 1031 | <td>100 |
jdaggett@1148 | 1032 | |
jdaggett@1148 | 1033 | <tr> |
jdaggett@1244 | 1034 | <th>300 |
jdaggett@1148 | 1035 | |
jdaggett@1148 | 1036 | <td>400 |
jdaggett@1148 | 1037 | |
jdaggett@1148 | 1038 | <td>100 |
jdaggett@1148 | 1039 | |
jdaggett@1148 | 1040 | <tr> |
jdaggett@1244 | 1041 | <th>400 |
jdaggett@1148 | 1042 | |
jdaggett@1148 | 1043 | <td>700 |
jdaggett@1148 | 1044 | |
jdaggett@1148 | 1045 | <td>100 |
jdaggett@1148 | 1046 | |
jdaggett@1148 | 1047 | <tr> |
jdaggett@1244 | 1048 | <th>500 |
jdaggett@1148 | 1049 | |
jdaggett@1148 | 1050 | <td>700 |
jdaggett@1148 | 1051 | |
jdaggett@1148 | 1052 | <td>100 |
jdaggett@1148 | 1053 | |
jdaggett@1148 | 1054 | <tr> |
jdaggett@1244 | 1055 | <th>600 |
jdaggett@1148 | 1056 | |
jdaggett@1148 | 1057 | <td>900 |
jdaggett@1148 | 1058 | |
jdaggett@1148 | 1059 | <td>400 |
jdaggett@1148 | 1060 | |
jdaggett@1148 | 1061 | <tr> |
jdaggett@1244 | 1062 | <th>700 |
jdaggett@1148 | 1063 | |
jdaggett@1148 | 1064 | <td>900 |
jdaggett@1148 | 1065 | |
jdaggett@1148 | 1066 | <td>400 |
jdaggett@1148 | 1067 | |
jdaggett@1148 | 1068 | <tr> |
jdaggett@1244 | 1069 | <th>800 |
jdaggett@1148 | 1070 | |
jdaggett@1148 | 1071 | <td>900 |
jdaggett@1148 | 1072 | |
jdaggett@1148 | 1073 | <td>700 |
jdaggett@1148 | 1074 | |
jdaggett@1148 | 1075 | <tr> |
jdaggett@1244 | 1076 | <th>900 |
jdaggett@1148 | 1077 | |
jdaggett@1148 | 1078 | <td>900 |
jdaggett@1148 | 1079 | |
jdaggett@1148 | 1080 | <td>700 |
jdaggett@1148 | 1081 | </table> |
jdaggett@1148 | 1082 | |
jdaggett@1148 | 1083 | <p>The table above is equivalent to selecting the next relative bolder or |
jdaggett@1148 | 1084 | lighter face, given a font family containing normal and bold faces along |
jdaggett@1148 | 1085 | with a thin and a heavy face. Authors who desire finer control over the |
jdaggett@1148 | 1086 | exact weight values used for a given element should use numerical values |
jdaggett@1148 | 1087 | instead of relative weights.</p> |
jdaggett@512 | 1088 | <!-- prop: font-stretch --> |
jdaggett@512 | 1089 | |
jdaggett@1662 | 1090 | <h3 id=font-stretch-prop><span class=secno>3.3 </span>Font width: the <a |
jdaggett@1662 | 1091 | href="#propdef-font-stretch">font-stretch</a> property</h3> |
jdaggett@1662 | 1092 | |
jdaggett@4624 | 1093 | <table class=propdef id=namefont-stretchvaluenormal-ultra-conden> |
jdaggett@484 | 1094 | <tbody> |
jdaggett@484 | 1095 | <tr> |
jdaggett@484 | 1096 | <td>Name: |
jdaggett@484 | 1097 | |
jdaggett@1662 | 1098 | <td><dfn id=propdef-font-stretch>font-stretch</dfn> |
jdaggett@484 | 1099 | |
jdaggett@484 | 1100 | <tr> |
jdaggett@484 | 1101 | <td>Value: |
jdaggett@484 | 1102 | |
jdaggett@1662 | 1103 | <td>normal | ultra-condensed | extra-condensed | condensed | |
jdaggett@1662 | 1104 | semi-condensed | semi-expanded | expanded | extra-expanded | |
jdaggett@5809 | 1105 | ultra-expanded |
jdaggett@484 | 1106 | |
jdaggett@484 | 1107 | <tr> |
jdaggett@484 | 1108 | <td>Initial: |
jdaggett@484 | 1109 | |
jdaggett@484 | 1110 | <td>normal |
jdaggett@484 | 1111 | |
jdaggett@484 | 1112 | <tr> |
jdaggett@484 | 1113 | <td>Applies to: |
jdaggett@484 | 1114 | |
jdaggett@484 | 1115 | <td>all elements |
jdaggett@484 | 1116 | |
jdaggett@484 | 1117 | <tr> |
jdaggett@484 | 1118 | <td>Inherited: |
jdaggett@484 | 1119 | |
jdaggett@484 | 1120 | <td>yes |
jdaggett@484 | 1121 | |
jdaggett@484 | 1122 | <tr> |
jdaggett@484 | 1123 | <td>Percentages: |
jdaggett@484 | 1124 | |
jdaggett@484 | 1125 | <td>N/A |
jdaggett@484 | 1126 | |
jdaggett@484 | 1127 | <tr> |
jdaggett@484 | 1128 | <td>Media: |
jdaggett@484 | 1129 | |
jdaggett@484 | 1130 | <td>visual |
jdaggett@484 | 1131 | |
jdaggett@484 | 1132 | <tr> |
jdaggett@1148 | 1133 | <td>Computed value: |
jdaggett@484 | 1134 | |
jdaggett@484 | 1135 | <td>as specified |
jdaggett@484 | 1136 | </table> |
jdaggett@484 | 1137 | |
jdaggett@2556 | 1138 | <p>The <a class=noxref href="#font-stretch-prop"><span |
jdaggett@2556 | 1139 | class=property>‘<code class=property>font-stretch</code>’</span></a> |
jdaggett@2556 | 1140 | property selects a normal, condensed, or expanded face from a font family. |
jdaggett@2556 | 1141 | Absolute keyword values have the following ordering, from narrowest to |
jdaggett@2556 | 1142 | widest: |
jdaggett@512 | 1143 | |
jdaggett@512 | 1144 | <ul> |
jdaggett@518 | 1145 | <li>Ultra Condensed |
jdaggett@518 | 1146 | |
jdaggett@518 | 1147 | <li>Extra Condensed |
jdaggett@518 | 1148 | |
jdaggett@518 | 1149 | <li>Condensed |
jdaggett@518 | 1150 | |
jdaggett@518 | 1151 | <li>Semi Condensed |
jdaggett@518 | 1152 | |
jdaggett@518 | 1153 | <li>Normal |
jdaggett@518 | 1154 | |
jdaggett@518 | 1155 | <li>Semi Expanded |
jdaggett@518 | 1156 | |
jdaggett@518 | 1157 | <li>Expanded |
jdaggett@518 | 1158 | |
jdaggett@518 | 1159 | <li>Extra Expanded |
jdaggett@518 | 1160 | |
jdaggett@518 | 1161 | <li>Ultra Expanded |
jdaggett@512 | 1162 | </ul> |
jdaggett@512 | 1163 | |
jdaggett@1148 | 1164 | <p>The scale is relative, so a face with a font-stretch value higher in the |
jdaggett@1148 | 1165 | list above should never appear wider. When a face does not exist for a |
jdaggett@1148 | 1166 | given width, normal or condensed values map to a narrower face, otherwise |
jdaggett@1148 | 1167 | a wider face. Conversely, expanded values map to a wider face, otherwise a |
jdaggett@1148 | 1168 | narrower face. The figure below shows how the nine font-stretch property |
jdaggett@1148 | 1169 | settings affect font selection for font family containing a variety of |
jdaggett@1148 | 1170 | widths, grey indicates a width for which no face exists and a different |
jdaggett@1148 | 1171 | width is substituted: |
jdaggett@1148 | 1172 | |
jdaggett@1150 | 1173 | <div class=figure><img alt="width mappings for a family with condensed, |
jdaggett@1150 | 1174 | normal and expanded faces" src=universwidths.png> |
jdaggett@1148 | 1175 | <p class=caption>Width mappings for a font family with condensed, normal |
jdaggett@1148 | 1176 | and expanded width faces |
jdaggett@1148 | 1177 | </div> |
jdaggett@512 | 1178 | <!-- prop: font-style --> |
jdaggett@512 | 1179 | |
jdaggett@1662 | 1180 | <h3 id=font-style-prop><span class=secno>3.4 </span>Font style: the <a |
jdaggett@1662 | 1181 | href="#propdef-font-style">font-style</a> property</h3> |
jdaggett@1662 | 1182 | |
jdaggett@4624 | 1183 | <table class=propdef id=namefont-stylevaluenormal-italic-oblique> |
jdaggett@484 | 1184 | <tbody> |
jdaggett@484 | 1185 | <tr> |
jdaggett@484 | 1186 | <td>Name: |
jdaggett@484 | 1187 | |
jdaggett@1662 | 1188 | <td><dfn id=propdef-font-style>font-style</dfn> |
jdaggett@484 | 1189 | |
jdaggett@484 | 1190 | <tr> |
jdaggett@484 | 1191 | <td>Value: |
jdaggett@484 | 1192 | |
jdaggett@5809 | 1193 | <td>normal | italic | oblique |
jdaggett@484 | 1194 | |
jdaggett@484 | 1195 | <tr> |
jdaggett@484 | 1196 | <td>Initial: |
jdaggett@484 | 1197 | |
jdaggett@484 | 1198 | <td>normal |
jdaggett@484 | 1199 | |
jdaggett@484 | 1200 | <tr> |
jdaggett@484 | 1201 | <td>Applies to: |
jdaggett@484 | 1202 | |
jdaggett@484 | 1203 | <td>all elements |
jdaggett@484 | 1204 | |
jdaggett@484 | 1205 | <tr> |
jdaggett@484 | 1206 | <td>Inherited: |
jdaggett@484 | 1207 | |
jdaggett@484 | 1208 | <td>yes |
jdaggett@484 | 1209 | |
jdaggett@484 | 1210 | <tr> |
jdaggett@484 | 1211 | <td>Percentages: |
jdaggett@484 | 1212 | |
jdaggett@484 | 1213 | <td>N/A |
jdaggett@484 | 1214 | |
jdaggett@484 | 1215 | <tr> |
jdaggett@484 | 1216 | <td>Media: |
jdaggett@484 | 1217 | |
jdaggett@484 | 1218 | <td>visual |
jdaggett@484 | 1219 | |
jdaggett@484 | 1220 | <tr> |
jdaggett@1148 | 1221 | <td>Computed value: |
jdaggett@484 | 1222 | |
jdaggett@484 | 1223 | <td>as specified |
jdaggett@484 | 1224 | </table> |
jdaggett@484 | 1225 | |
jdaggett@2556 | 1226 | <p>The <a class=noxref href="#font-style-prop"><span |
jdaggett@2556 | 1227 | class=property>‘<code class=property>font-style</code>’</span></a> |
jdaggett@2556 | 1228 | property allows italic or oblique faces to be selected. Italic forms are |
jdaggett@2556 | 1229 | generally cursive in nature while oblique faces are typically sloped |
jdaggett@2556 | 1230 | versions of the regular face. Oblique faces can be simulated by |
jdaggett@2556 | 1231 | artificially sloping the glyphs of the regular face. Compare the |
jdaggett@2556 | 1232 | artificially sloped renderings of Palatino ‘<code |
jdaggett@2556 | 1233 | class=property>a</code>’ and Baskerville ‘<code |
jdaggett@1148 | 1234 | class=property>N</code>’ in grey with the actual italic versions: |
jdaggett@518 | 1235 | |
jdaggett@1150 | 1236 | <div class=figure><img alt="artificial sloping vs. real italics" |
jdaggett@1150 | 1237 | src=realvsfakeitalics.png> |
jdaggett@890 | 1238 | <p class=caption>Artificial sloping versus real italics |
jdaggett@512 | 1239 | </div> |
jdaggett@518 | 1240 | |
jdaggett@5809 | 1241 | <p>A value of ‘<a href="#normal2"><code |
jdaggett@5809 | 1242 | class=property>normal</code></a>’ selects a face that is classified as |
jdaggett@5809 | 1243 | ‘<a href="#normal2"><code class=property>normal</code></a>’, while |
jdaggett@5809 | 1244 | ‘<code class=property>oblique</code>’ selects a font that is labeled |
jdaggett@5809 | 1245 | ‘<code class=property>oblique</code>’. A value of ‘<code |
jdaggett@1148 | 1246 | class=property>italic</code>’ selects a font that is labeled ‘<code |
jdaggett@1148 | 1247 | class=property>italic</code>’, or, if that is not available, one labeled |
jdaggett@1148 | 1248 | ‘<code class=property>oblique</code>’. If no italic or oblique faces |
jdaggett@1148 | 1249 | is available, an oblique face can by synthesized by rendering the normal |
jdaggett@1148 | 1250 | face with a sloping transformation applied. |
jdaggett@518 | 1251 | |
jdaggett@518 | 1252 | <p>Many scripts lack the tradition of mixing a cursive form within text |
jdaggett@518 | 1253 | rendered with a normal face. Chinese, Japanese and Korean fonts almost |
jdaggett@518 | 1254 | always lack italic or oblique faces. Fonts that support a mixture of |
jdaggett@518 | 1255 | scripts will sometimes omit specific scripts such as Arabic from the set |
jdaggett@518 | 1256 | of glyphs supported in the italic face. User agents should be careful |
jdaggett@1148 | 1257 | about making character map assumptions across faces.</p> |
jdaggett@1662 | 1258 | <!-- prop: font-size --> |
jdaggett@1662 | 1259 | |
jdaggett@1662 | 1260 | <h3 id=font-size-prop><span class=secno>3.5 </span>Font size: the <a |
jdaggett@1662 | 1261 | href="#propdef-font-size">font-size</a> property</h3> |
jdaggett@1662 | 1262 | |
jdaggett@4624 | 1263 | <table class=propdef id=namefont-sizevalueltabsolute-size-ltrela> |
jdaggett@484 | 1264 | <tbody> |
jdaggett@484 | 1265 | <tr> |
jdaggett@484 | 1266 | <td>Name: |
jdaggett@484 | 1267 | |
jdaggett@1662 | 1268 | <td><dfn id=propdef-font-size>font-size</dfn> |
jdaggett@484 | 1269 | |
jdaggett@484 | 1270 | <tr> |
jdaggett@484 | 1271 | <td>Value: |
jdaggett@484 | 1272 | |
jdaggett@497 | 1273 | <td><absolute-size> | <relative-size> | <length> | |
jdaggett@5809 | 1274 | <percentage> |
jdaggett@484 | 1275 | |
jdaggett@484 | 1276 | <tr> |
jdaggett@484 | 1277 | <td>Initial: |
jdaggett@484 | 1278 | |
jdaggett@484 | 1279 | <td>medium |
jdaggett@484 | 1280 | |
jdaggett@484 | 1281 | <tr> |
jdaggett@484 | 1282 | <td>Applies to: |
jdaggett@484 | 1283 | |
jdaggett@484 | 1284 | <td>all elements |
jdaggett@484 | 1285 | |
jdaggett@484 | 1286 | <tr> |
jdaggett@484 | 1287 | <td>Inherited: |
jdaggett@484 | 1288 | |
jdaggett@484 | 1289 | <td>yes |
jdaggett@484 | 1290 | |
jdaggett@484 | 1291 | <tr> |
jdaggett@484 | 1292 | <td>Percentages: |
jdaggett@484 | 1293 | |
jdaggett@484 | 1294 | <td>refer to parent element's font size |
jdaggett@484 | 1295 | |
jdaggett@484 | 1296 | <tr> |
jdaggett@484 | 1297 | <td>Media: |
jdaggett@484 | 1298 | |
jdaggett@484 | 1299 | <td>visual |
jdaggett@484 | 1300 | |
jdaggett@484 | 1301 | <tr> |
jdaggett@1148 | 1302 | <td>Computed value: |
jdaggett@484 | 1303 | |
jdaggett@484 | 1304 | <td>absolute length |
jdaggett@484 | 1305 | </table> |
jdaggett@484 | 1306 | |
jdaggett@512 | 1307 | <p>This property indicates the desired height of glyphs from the font. For |
jdaggett@512 | 1308 | scalable fonts, the font-size is a scale factor applied to the EM unit of |
jdaggett@512 | 1309 | the font. (Note that certain glyphs may bleed outside their EM box.) For |
jdaggett@512 | 1310 | non-scalable fonts, the font-size is converted into absolute units and |
jdaggett@512 | 1311 | matched against the declared font-size of the font, using the same |
jdaggett@512 | 1312 | absolute coordinate space for both of the matched values. Values have the |
jdaggett@512 | 1313 | following meanings: |
jdaggett@512 | 1314 | |
jdaggett@512 | 1315 | <dl> |
jdaggett@512 | 1316 | <dt><a name=x18><span class=index-def id=ltabsolute-sizegt |
jdaggett@7060 | 1317 | title="<absolute-size>"> |
jdaggett@512 | 1318 | <strong><absolute-size></strong></span></a> |
jdaggett@512 | 1319 | |
jdaggett@512 | 1320 | <dd> An <a class=value-def |
jdaggett@512 | 1321 | name=value-def-absolute-size><absolute-size></a> keyword refers to |
jdaggett@512 | 1322 | an entry in a table of font sizes computed and kept by the user agent. |
jdaggett@512 | 1323 | Possible values are: |
jdaggett@512 | 1324 | <p> [ xx-small | x-small | small | medium | large | x-large | xx-large ]</p> |
jdaggett@512 | 1325 | |
jdaggett@512 | 1326 | <dt><a name=x19><span class=index-def id=ltrelative-sizegt |
jdaggett@7060 | 1327 | title="<relative-size>"> |
jdaggett@7060 | 1328 | <strong><relative-size></strong></span></a> |
jdaggett@512 | 1329 | |
jdaggett@512 | 1330 | <dd> A <a class=value-def |
jdaggett@512 | 1331 | name=value-def-relative-size><relative-size></a> keyword is |
jdaggett@512 | 1332 | interpreted relative to the table of font sizes and the font size of the |
jdaggett@512 | 1333 | parent element. Possible values are: |
jdaggett@890 | 1334 | <p> [ larger | smaller ] |
jdaggett@890 | 1335 | |
jdaggett@1148 | 1336 | <p> For example, if the parent element has a font size of ‘<code |
jdaggett@1148 | 1337 | class=property>medium</code>’, a value of ‘<code |
jdaggett@1148 | 1338 | class=property>larger</code>’ will make the font size of the current |
jdaggett@1148 | 1339 | element be ‘<code class=property>large</code>’. If the parent |
jdaggett@1148 | 1340 | element's size is not close to a table entry, the user agent is free to |
jdaggett@1148 | 1341 | interpolate between table entries or round off to the closest one. The |
jdaggett@1148 | 1342 | user agent may have to extrapolate table values if the numerical value |
jdaggett@1148 | 1343 | goes beyond the keywords. |
jdaggett@512 | 1344 | |
jdaggett@512 | 1345 | <dt><span class=index-inst id=ltlengthgt |
jdaggett@512 | 1346 | title="<length>"><length></span> |
jdaggett@512 | 1347 | |
jdaggett@512 | 1348 | <dd>A length value specifies an absolute font size (that is independent of |
jdaggett@512 | 1349 | the user agent's font table). Negative lengths are illegal. |
jdaggett@512 | 1350 | |
jdaggett@4624 | 1351 | <dt><span class=index-inst id=ltpercentagegt- |
jdaggett@512 | 1352 | title="<percentage>"><percentage> </span> |
jdaggett@512 | 1353 | |
jdaggett@512 | 1354 | <dd>A percentage value specifies an absolute font size relative to the |
jdaggett@512 | 1355 | parent element's font size. Use of percentage values, or values in |
jdaggett@1148 | 1356 | ‘<code class=property>em</code>’s, leads to more robust and |
jdaggett@512 | 1357 | cascadable style sheets. |
jdaggett@512 | 1358 | </dl> |
jdaggett@512 | 1359 | |
jdaggett@512 | 1360 | <p>The following table provides user agent's guideline for the |
jdaggett@512 | 1361 | absolute-size scaling factor and their mapping to XHTML heading and |
jdaggett@1148 | 1362 | absolute font-sizes. The ‘<code class=property>medium</code>’ value is |
jdaggett@1758 | 1363 | used as the reference middle value. The user agent may fine-tune these |
jdaggett@1244 | 1364 | values for different fonts or different types of display devices. |
jdaggett@1244 | 1365 | |
jdaggett@1244 | 1366 | <table class=data> |
jdaggett@1152 | 1367 | <thead> |
jdaggett@1152 | 1368 | <tr> |
jdaggett@1152 | 1369 | <th>CSS absolute-size values |
jdaggett@1152 | 1370 | |
jdaggett@1152 | 1371 | <th>xx-small |
jdaggett@1152 | 1372 | |
jdaggett@1152 | 1373 | <th>x-small |
jdaggett@1152 | 1374 | |
jdaggett@1152 | 1375 | <th>small |
jdaggett@1152 | 1376 | |
jdaggett@1152 | 1377 | <th>medium |
jdaggett@1152 | 1378 | |
jdaggett@1152 | 1379 | <th>large |
jdaggett@1152 | 1380 | |
jdaggett@1152 | 1381 | <th>x-large |
jdaggett@1152 | 1382 | |
jdaggett@1152 | 1383 | <th>xx-large |
jdaggett@1152 | 1384 | |
jdaggett@1152 | 1385 | <th> |
jdaggett@1152 | 1386 | |
jdaggett@512 | 1387 | <tbody> |
jdaggett@512 | 1388 | <tr> |
jdaggett@1152 | 1389 | <th>scaling factor |
jdaggett@1152 | 1390 | |
jdaggett@1152 | 1391 | <td>3/5 |
jdaggett@1152 | 1392 | |
jdaggett@1152 | 1393 | <td>3/4 |
jdaggett@1152 | 1394 | |
jdaggett@1152 | 1395 | <td>8/9 |
jdaggett@1152 | 1396 | |
jdaggett@1152 | 1397 | <td>1 |
jdaggett@1152 | 1398 | |
jdaggett@1152 | 1399 | <td>6/5 |
jdaggett@1152 | 1400 | |
jdaggett@1152 | 1401 | <td>3/2 |
jdaggett@1152 | 1402 | |
jdaggett@1152 | 1403 | <td>2/1 |
jdaggett@1152 | 1404 | |
jdaggett@1152 | 1405 | <td>3/1 |
jdaggett@512 | 1406 | |
jdaggett@512 | 1407 | <tr> |
jdaggett@1152 | 1408 | <th>XHTML headings |
jdaggett@1152 | 1409 | |
jdaggett@1152 | 1410 | <td>h6 |
jdaggett@1152 | 1411 | |
jdaggett@1152 | 1412 | <td> |
jdaggett@1152 | 1413 | |
jdaggett@1152 | 1414 | <td>h5 |
jdaggett@1152 | 1415 | |
jdaggett@1152 | 1416 | <td>h4 |
jdaggett@1152 | 1417 | |
jdaggett@1152 | 1418 | <td>h3 |
jdaggett@1152 | 1419 | |
jdaggett@1152 | 1420 | <td>h2 |
jdaggett@1152 | 1421 | |
jdaggett@1152 | 1422 | <td>h1 |
jdaggett@1152 | 1423 | |
jdaggett@1152 | 1424 | <td> |
jdaggett@512 | 1425 | |
jdaggett@512 | 1426 | <tr> |
jdaggett@1152 | 1427 | <th>XHTML font sizes |
jdaggett@1152 | 1428 | |
jdaggett@1152 | 1429 | <td>1 |
jdaggett@1152 | 1430 | |
jdaggett@1152 | 1431 | <td> |
jdaggett@1152 | 1432 | |
jdaggett@1152 | 1433 | <td>2 |
jdaggett@1152 | 1434 | |
jdaggett@1152 | 1435 | <td>3 |
jdaggett@1152 | 1436 | |
jdaggett@1152 | 1437 | <td>4 |
jdaggett@1152 | 1438 | |
jdaggett@1152 | 1439 | <td>5 |
jdaggett@1152 | 1440 | |
jdaggett@1152 | 1441 | <td>6 |
jdaggett@1152 | 1442 | |
jdaggett@1152 | 1443 | <td>7 |
jdaggett@512 | 1444 | </table> |
jdaggett@512 | 1445 | |
jdaggett@512 | 1446 | <p class=note><em><strong>Note 1.</strong> To preserve readability, an UA |
jdaggett@512 | 1447 | applying these guidelines should nevertheless avoid creating font-size |
jdaggett@512 | 1448 | resulting in less than 9 pixels per EM unit on a computer display .</em> |
jdaggett@512 | 1449 | |
jdaggett@512 | 1450 | <p class=note><em><strong>Note 2.</strong> In CSS1, the suggested scaling |
jdaggett@512 | 1451 | factor between adjacent indexes was 1.5 which user experience proved to be |
jdaggett@512 | 1452 | too large. In CSS2, the suggested scaling factor for computer screen |
jdaggett@512 | 1453 | between adjacent indexes was 1.2 which still created issues for the small |
jdaggett@512 | 1454 | sizes. The new scaling factor varies between each index to provide a |
jdaggett@512 | 1455 | better readability.</em> |
jdaggett@512 | 1456 | |
jdaggett@6659 | 1457 | <p>The actual value of this property may differ from the computed value due |
jdaggett@6659 | 1458 | a numerical value on ‘<a href="#propdef-font-size-adjust"><code |
jdaggett@4624 | 1459 | class=property>font-size-adjust</code></a>’ and the unavailability of |
jdaggett@4624 | 1460 | certain font sizes. |
jdaggett@512 | 1461 | |
jdaggett@512 | 1462 | <p>Child elements inherit the computed <a class=noxref |
jdaggett@6659 | 1463 | href="#font-size-prop"> <span class=property>‘<code |
jdaggett@1148 | 1464 | class=property>font-size</code>’</span></a> value (otherwise, the effect |
jdaggett@2556 | 1465 | of <a class=noxref href="#font-size-adjust-prop"><span |
jdaggett@2556 | 1466 | class=property>‘<code |
jdaggett@1148 | 1467 | class=property>font-size-adjust</code>’</span></a> would compound). |
jdaggett@512 | 1468 | |
jdaggett@512 | 1469 | <div class=example> |
jdaggett@4624 | 1470 | <p style="display:none">Example(s): |
jdaggett@890 | 1471 | |
jdaggett@890 | 1472 | <p> |
jdaggett@512 | 1473 | |
jdaggett@512 | 1474 | <pre>p { font-size: 12pt; } |
jdaggett@512 | 1475 | blockquote { font-size: larger } |
jdaggett@512 | 1476 | em { font-size: 150% } |
jdaggett@512 | 1477 | em { font-size: 1.5em } |
jdaggett@512 | 1478 | </pre> |
jdaggett@512 | 1479 | </div> |
jdaggett@512 | 1480 | <!-- prop: font-size-adjust --> |
jdaggett@512 | 1481 | |
jdaggett@1662 | 1482 | <h3 id=font-size-adjust-prop><span class=secno>3.6 </span>Relative sizing: |
jdaggett@1662 | 1483 | the <a href="#propdef-font-size-adjust">font-size-adjust</a> property</h3> |
jdaggett@1662 | 1484 | |
jdaggett@6659 | 1485 | <table class=propdef id=namefont-size-adjustvaluenone-auto-ltnum> |
jdaggett@484 | 1486 | <tbody> |
jdaggett@484 | 1487 | <tr> |
jdaggett@484 | 1488 | <td>Name: |
jdaggett@484 | 1489 | |
jdaggett@1662 | 1490 | <td><dfn id=propdef-font-size-adjust>font-size-adjust</dfn> |
jdaggett@484 | 1491 | |
jdaggett@484 | 1492 | <tr> |
jdaggett@484 | 1493 | <td>Value: |
jdaggett@484 | 1494 | |
jdaggett@6659 | 1495 | <td>none | auto | <number> |
jdaggett@484 | 1496 | |
jdaggett@484 | 1497 | <tr> |
jdaggett@484 | 1498 | <td>Initial: |
jdaggett@484 | 1499 | |
jdaggett@484 | 1500 | <td>none |
jdaggett@484 | 1501 | |
jdaggett@484 | 1502 | <tr> |
jdaggett@484 | 1503 | <td>Applies to: |
jdaggett@484 | 1504 | |
jdaggett@484 | 1505 | <td>all elements |
jdaggett@484 | 1506 | |
jdaggett@484 | 1507 | <tr> |
jdaggett@484 | 1508 | <td>Inherited: |
jdaggett@484 | 1509 | |
jdaggett@484 | 1510 | <td>yes |
jdaggett@484 | 1511 | |
jdaggett@484 | 1512 | <tr> |
jdaggett@484 | 1513 | <td>Percentages: |
jdaggett@484 | 1514 | |
jdaggett@554 | 1515 | <td>N/A |
jdaggett@484 | 1516 | |
jdaggett@484 | 1517 | <tr> |
jdaggett@484 | 1518 | <td>Media: |
jdaggett@484 | 1519 | |
jdaggett@484 | 1520 | <td>visual |
jdaggett@484 | 1521 | |
jdaggett@484 | 1522 | <tr> |
jdaggett@1148 | 1523 | <td>Computed value: |
jdaggett@484 | 1524 | |
jdaggett@554 | 1525 | <td>as specified |
jdaggett@484 | 1526 | </table> |
jdaggett@484 | 1527 | |
jdaggett@555 | 1528 | <p>For any given font size, the apparent size and legibility of text varies |
jdaggett@555 | 1529 | across fonts. For scripts such as Latin or Cyrillic that distinguish |
jdaggett@555 | 1530 | between upper and lowercase letters, the relative height of lowercase |
jdaggett@555 | 1531 | letters compared to their uppercase counterparts is a determining factor |
jdaggett@555 | 1532 | of legibility. This is commonly referred to as the <a class=index-def |
jdaggett@4624 | 1533 | href="#aspect-value" id=aspect-value0 title="aspect value"><dfn |
jdaggett@4624 | 1534 | id=aspect-value>aspect value</dfn></a>. Precisely defined, it is equal to |
jdaggett@4624 | 1535 | the x-height of a font divided by the font size. |
jdaggett@555 | 1536 | |
jdaggett@555 | 1537 | <p>In situations where font fallback occurs, fallback fonts may not share |
jdaggett@555 | 1538 | the same aspect ratio as the desired font family and will thus appear less |
jdaggett@555 | 1539 | readable. The font-size-adjust property is a way to preserve the |
jdaggett@547 | 1540 | readability of text when font fallback occurs. It does this by adjusting |
jdaggett@1662 | 1541 | the font-size so that the x-height is the same regardless of the font |
jdaggett@555 | 1542 | used. |
jdaggett@547 | 1543 | |
jdaggett@547 | 1544 | <div class=example> |
jdaggett@547 | 1545 | <p>The style defined below defines Verdana as the desired font family, but |
jdaggett@547 | 1546 | if Verdana is not available Futura or Times will be used.</p> |
jdaggett@547 | 1547 | |
jdaggett@547 | 1548 | <pre>p { |
jdaggett@547 | 1549 | font-family: Verdana, Futura, Times; |
jdaggett@547 | 1550 | } |
jdaggett@547 | 1551 | |
jdaggett@547 | 1552 | <p>Lorem ipsum dolor sit amet, ...</p> |
jdaggett@547 | 1553 | </pre> |
jdaggett@547 | 1554 | |
jdaggett@547 | 1555 | <p>Verdana has a relatively high aspect ratio, lowercase letters are |
jdaggett@547 | 1556 | relatively tall compared to uppercase letters, so at small sizes text |
jdaggett@547 | 1557 | appears legible. Times has a lower aspect ratio and so if fallback |
jdaggett@547 | 1558 | occurs, the text will be less legible at small sizes than Verdana.</p> |
jdaggett@547 | 1559 | </div> |
jdaggett@547 | 1560 | |
jdaggett@547 | 1561 | <p>How text rendered in each of these fonts compares is shown below, the |
jdaggett@547 | 1562 | columns show text rendered in Verdana, Futura and Times. The same |
jdaggett@547 | 1563 | font-size value is used across cells within each row and red lines are |
jdaggett@547 | 1564 | included to show the differences in x-height. In the upper half each row |
jdaggett@547 | 1565 | is rendered in the same font-size value. The same is true for the lower |
jdaggett@547 | 1566 | half but in this half the font-size-adjust property is also set so that |
jdaggett@2462 | 1567 | the actual font size is adjusted to preserve the x-height across each row. |
jdaggett@547 | 1568 | Note how small text remains relatively legible across each row in the |
jdaggett@547 | 1569 | lower half. |
jdaggett@547 | 1570 | |
jdaggett@1150 | 1571 | <div class=figure><img alt="text with and without font-size-adjust" |
jdaggett@1150 | 1572 | src=fontsizeadjust.png> |
jdaggett@890 | 1573 | <p class=caption>Text with and without the use of font-size-adjust |
jdaggett@547 | 1574 | </div> |
jdaggett@512 | 1575 | |
jdaggett@512 | 1576 | <p>This property allows authors to specify an aspect value for an element |
jdaggett@554 | 1577 | that will effectively preserve the x-height of the first choice font, |
jdaggett@554 | 1578 | whether it is substituted or not. Values have the following meanings: |
jdaggett@512 | 1579 | |
jdaggett@512 | 1580 | <dl> |
jdaggett@512 | 1581 | <dt><strong>none</strong> |
jdaggett@512 | 1582 | |
jdaggett@512 | 1583 | <dd>Do not preserve the font's x-height. |
jdaggett@512 | 1584 | |
jdaggett@6659 | 1585 | <dt><strong>auto</strong> |
jdaggett@6659 | 1586 | |
jdaggett@6659 | 1587 | <dd>Behaves just like <number>, except the number used is the aspect |
jdaggett@6659 | 1588 | value calculated by user agents for the first font in the list of fonts |
jdaggett@6659 | 1589 | defined for the initial value of the ‘<a |
jdaggett@6659 | 1590 | href="#descdef-font-family"><code |
jdaggett@6659 | 1591 | class=property>font-family</code></a>’ property. Effectively this is |
jdaggett@6659 | 1592 | the default font used when ‘<a href="#descdef-font-family"><code |
jdaggett@6659 | 1593 | class=property>font-family</code></a>’ is not otherwise specified. |
jdaggett@6659 | 1594 | <p>Authors can use this value to specify that font size should be |
jdaggett@6659 | 1595 | normalized across fonts based on the x-height without the need to |
jdaggett@6659 | 1596 | specify the aspect ratio explicitly.</p> |
jdaggett@6659 | 1597 | |
jdaggett@512 | 1598 | <dt><span class=index-inst id=ltnumbergt |
jdaggett@512 | 1599 | title="<number>"><number></span> |
jdaggett@512 | 1600 | |
jdaggett@554 | 1601 | <dd>Specifies the aspect value used in the calculation below to calculate |
jdaggett@554 | 1602 | the adjusted font size: |
jdaggett@554 | 1603 | <pre>c = ( a / a' ) s |
jdaggett@512 | 1604 | </pre> |
jdaggett@512 | 1605 | |
jdaggett@512 | 1606 | <p>where:</p> |
jdaggett@512 | 1607 | |
jdaggett@554 | 1608 | <pre>s = font-size value |
jdaggett@554 | 1609 | a = aspect value as specified by the font-size-adjust property |
jdaggett@554 | 1610 | a' = aspect value of actual font |
jdaggett@554 | 1611 | c = adjusted font-size to use |
jdaggett@512 | 1612 | </pre> |
jdaggett@554 | 1613 | |
jdaggett@554 | 1614 | <p>This value applies to any font that is selected but in typical usage |
jdaggett@554 | 1615 | it should be based on the aspect value of the first font in the |
jdaggett@555 | 1616 | font-family list. If this is specified accurately, the <tt>(a/a')</tt> |
jdaggett@555 | 1617 | term in the formula above is effectively 1 for the first font and no |
jdaggett@555 | 1618 | adjustment occurs. If the value is specified inaccurately, text rendered |
jdaggett@555 | 1619 | using the first font in the family list will display differently in |
jdaggett@555 | 1620 | older user agents that don't support font-size-adjust.</p> |
jdaggett@512 | 1621 | </dl> |
jdaggett@512 | 1622 | |
jdaggett@554 | 1623 | <p>Authors can calculate the aspect value for a given font by comparing |
jdaggett@554 | 1624 | spans with the same content but different font-size-adjust properties. If |
jdaggett@554 | 1625 | the same font-size is used, the spans will match when the font-size-adjust |
jdaggett@554 | 1626 | value is accurate for the given font. |
jdaggett@554 | 1627 | |
jdaggett@554 | 1628 | <div class=example> |
jdaggett@554 | 1629 | <p>Two spans with borders are used to determine the aspect value of a |
jdaggett@554 | 1630 | font. The font-size is the same for both spans but the font-size-adjust |
jdaggett@554 | 1631 | property is specified only for the right span. Starting with a value of |
jdaggett@554 | 1632 | 0.5, the aspect value can be adjusted until the borders around the two |
jdaggett@554 | 1633 | letters line up.</p> |
jdaggett@554 | 1634 | |
jdaggett@554 | 1635 | <pre>p { |
jdaggett@554 | 1636 | font-family: Futura; |
jdaggett@554 | 1637 | font-size: 500px; |
jdaggett@554 | 1638 | } |
jdaggett@554 | 1639 | |
jdaggett@554 | 1640 | span { |
jdaggett@554 | 1641 | border: solid 1px red; |
jdaggett@554 | 1642 | } |
jdaggett@554 | 1643 | |
jdaggett@554 | 1644 | .adjust { |
jdaggett@554 | 1645 | font-size-adjust: 0.5; |
jdaggett@554 | 1646 | } |
jdaggett@554 | 1647 | |
jdaggett@554 | 1648 | <p><span>b</span><span class="adjust">b</span></p> |
jdaggett@554 | 1649 | </pre> |
jdaggett@554 | 1650 | |
jdaggett@1150 | 1651 | <div class=figure><img alt="Futura with an aspect value of 0.5" |
jdaggett@1150 | 1652 | src=beforefontsizeadjust.png> |
jdaggett@890 | 1653 | <p class=caption>Futura with an aspect value of 0.5 |
jdaggett@554 | 1654 | </div> |
jdaggett@554 | 1655 | |
jdaggett@554 | 1656 | <p>The box on the right is a bit bigger than the one on the left, so the |
jdaggett@554 | 1657 | aspect value of this font is something less than 0.5. Adjust the value |
jdaggett@554 | 1658 | until the boxes align.</p> |
jdaggett@554 | 1659 | </div> |
jdaggett@512 | 1660 | <!-- prop: font --> |
jdaggett@3460 | 1661 | <!-- jtdfix, crap, preprocessor is inserting links to descriptors rather than properties. bert, make it stop... --> |
jdaggett@7020 | 1662 | <!-- <a href="#font-stretch-prop" class="noxref"><span class="property">'font-stretch'</span></a> --> |
jdaggett@512 | 1663 | |
jdaggett@1662 | 1664 | <h3 id=font-prop><span class=secno>3.7 </span>Shorthand font property: the |
jdaggett@1662 | 1665 | <a href="#propdef-font">font</a> property</h3> |
jdaggett@1662 | 1666 | |
jdaggett@4624 | 1667 | <table class=propdef id=namefontvalue-ltlsquofont-stylersquo-ltf> |
jdaggett@484 | 1668 | <tbody> |
jdaggett@484 | 1669 | <tr> |
jdaggett@484 | 1670 | <td>Name: |
jdaggett@484 | 1671 | |
jdaggett@1662 | 1672 | <td><dfn id=propdef-font>font</dfn> |
jdaggett@484 | 1673 | |
jdaggett@484 | 1674 | <tr> |
jdaggett@484 | 1675 | <td>Value: |
jdaggett@484 | 1676 | |
jdaggett@7060 | 1677 | <td>[ [ <‘<a href="#propdef-font-style"><code |
jdaggett@4624 | 1678 | class=property>font-style</code></a>’> || <font-variant-css21> || |
jdaggett@7060 | 1679 | <‘<a href="#propdef-font-weight"><code |
jdaggett@7020 | 1680 | class=property>font-weight</code></a>’> || <‘<a |
jdaggett@7060 | 1681 | href="#propdef-font-stretch"><code |
jdaggett@7020 | 1682 | class=property>font-stretch</code></a>’> ]? <‘<a |
jdaggett@4624 | 1683 | href="#propdef-font-size"><code class=property>font-size</code></a>’> |
jdaggett@4624 | 1684 | [ / <‘<code class=property>line-height</code>’> ]? <‘<a |
jdaggett@4624 | 1685 | href="#descdef-font-family"><code |
jdaggett@4624 | 1686 | class=property>font-family</code></a>’> ] | caption | icon | menu | |
jdaggett@5809 | 1687 | message-box | small-caption | status-bar |
jdaggett@484 | 1688 | |
jdaggett@484 | 1689 | <tr> |
jdaggett@484 | 1690 | <td>Initial: |
jdaggett@484 | 1691 | |
jdaggett@484 | 1692 | <td>see individual properties |
jdaggett@484 | 1693 | |
jdaggett@484 | 1694 | <tr> |
jdaggett@484 | 1695 | <td>Applies to: |
jdaggett@484 | 1696 | |
jdaggett@484 | 1697 | <td>all elements |
jdaggett@484 | 1698 | |
jdaggett@484 | 1699 | <tr> |
jdaggett@484 | 1700 | <td>Inherited: |
jdaggett@484 | 1701 | |
jdaggett@484 | 1702 | <td>yes |
jdaggett@484 | 1703 | |
jdaggett@484 | 1704 | <tr> |
jdaggett@484 | 1705 | <td>Percentages: |
jdaggett@484 | 1706 | |
jdaggett@484 | 1707 | <td>see individual properties |
jdaggett@484 | 1708 | |
jdaggett@484 | 1709 | <tr> |
jdaggett@484 | 1710 | <td>Media: |
jdaggett@484 | 1711 | |
jdaggett@484 | 1712 | <td>visual |
jdaggett@484 | 1713 | |
jdaggett@484 | 1714 | <tr> |
jdaggett@1148 | 1715 | <td>Computed value: |
jdaggett@484 | 1716 | |
jdaggett@484 | 1717 | <td>see individual properties |
jdaggett@484 | 1718 | </table> |
jdaggett@1732 | 1719 | |
jdaggett@4624 | 1720 | <p>The <span class=property>‘<a href="#propdef-font"><code |
jdaggett@4624 | 1721 | class=property>font</code></a>’</span> property is, except as described |
jdaggett@4624 | 1722 | below, a shorthand property for setting ‘<a |
jdaggett@7060 | 1723 | href="#propdef-font-style"><code class=property>font-style</code></a>’, |
jdaggett@4624 | 1724 | <span class=property>‘<a href="#propdef-font-variant"><code |
jdaggett@4624 | 1725 | class=property>font-variant</code></a>’</span>, <span |
jdaggett@7060 | 1726 | class=property>‘<a href="#propdef-font-weight"><code |
jdaggett@4624 | 1727 | class=property>font-weight</code></a>’</span>, <span |
jdaggett@7060 | 1728 | class=property>‘<a href="#propdef-font-stretch"><code |
jdaggett@7020 | 1729 | class=property>font-stretch</code></a>’</span>, <span |
jdaggett@4624 | 1730 | class=property>‘<a href="#propdef-font-size"><code |
jdaggett@4624 | 1731 | class=property>font-size</code></a>’</span>, ‘<code |
jdaggett@4624 | 1732 | class=property>line-height</code>’, <span class=property>‘<a |
jdaggett@4624 | 1733 | href="#descdef-font-family"><code |
jdaggett@4624 | 1734 | class=property>font-family</code></a>’</span> at the same place in the |
jdaggett@4624 | 1735 | stylesheet. Values for the <span class=property>‘<a |
jdaggett@4624 | 1736 | href="#propdef-font-variant"><code |
jdaggett@4624 | 1737 | class=property>font-variant</code></a>’</span> property may also be |
jdaggett@4624 | 1738 | included but only those supported in CSS 2.1, none of the font-variant |
jdaggett@4624 | 1739 | values added in this specification can be used in the <span |
jdaggett@4624 | 1740 | class=property>‘<a href="#propdef-font"><code |
jdaggett@4624 | 1741 | class=property>font</code></a>’</span> shorthand: |
jdaggett@1732 | 1742 | |
jdaggett@1732 | 1743 | <pre |
jdaggett@3460 | 1744 | class=prod><dfn id=ltfont-variant-css21gt><var><font-variant-css21></var></dfn> = [normal | small-caps]</pre> |
jdaggett@1732 | 1745 | |
jdaggett@1732 | 1746 | <p>The syntax of this property is based on a traditional typographical |
jdaggett@1732 | 1747 | shorthand notation to set multiple properties related to fonts. |
jdaggett@512 | 1748 | |
jdaggett@512 | 1749 | <p>All font-related properties are first reset to their initial values, |
jdaggett@1662 | 1750 | including those listed in the preceding paragraph plus <span |
jdaggett@4624 | 1751 | class=property>‘<a href="#propdef-font-size-adjust"><code |
jdaggett@4624 | 1752 | class=property>font-size-adjust</code></a>’</span>, <span |
jdaggett@4624 | 1753 | class=property>‘<a href="#propdef-font-kerning"><code |
jdaggett@4624 | 1754 | class=property>font-kerning</code></a>’</span> and all font feature |
jdaggett@4624 | 1755 | properties. Then, those properties that are given explicit values in the |
jdaggett@4624 | 1756 | <span class=property>‘<a href="#propdef-font"><code |
jdaggett@4624 | 1757 | class=property>font</code></a>’</span> shorthand are set to those |
jdaggett@512 | 1758 | values. For a definition of allowed and initial values, see the previously |
jdaggett@512 | 1759 | defined properties. For reasons of backwards compatibility, it is not |
jdaggett@4624 | 1760 | possible to set <span class=property>‘<a |
jdaggett@7020 | 1761 | href="#propdef-font-size-adjust"><code |
jdaggett@7020 | 1762 | class=property>font-size-adjust</code></a>’</span> to anything other |
jdaggett@7020 | 1763 | than its initial value using the <span class=property>‘<a |
jdaggett@4624 | 1764 | href="#propdef-font"><code class=property>font</code></a>’</span> |
jdaggett@7020 | 1765 | shorthand property; instead, use the individual property. |
jdaggett@512 | 1766 | |
jdaggett@512 | 1767 | <div class=example> |
jdaggett@4624 | 1768 | <p style="display:none">Example(s): |
jdaggett@890 | 1769 | |
jdaggett@890 | 1770 | <p> |
jdaggett@512 | 1771 | |
jdaggett@512 | 1772 | <pre>p { font: 12pt/14pt sans-serif } |
jdaggett@512 | 1773 | p { font: 80% sans-serif } |
jdaggett@512 | 1774 | p { font: x-large/110% "new century schoolbook", serif } |
jdaggett@512 | 1775 | p { font: bold italic large Palatino, serif } |
jdaggett@512 | 1776 | p { font: normal small-caps 120%/120% fantasy } |
jdaggett@7020 | 1777 | p { font: condensed oblique 12pt "Helvetica Neue", serif; } |
jdaggett@512 | 1778 | </pre> |
jdaggett@512 | 1779 | |
jdaggett@1148 | 1780 | <p> In the second rule, the font size percentage value (‘<code |
jdaggett@1148 | 1781 | class=css>80%</code>’) refers to the font size of the parent element. |
jdaggett@1148 | 1782 | In the third rule, the line height percentage (‘<code |
jdaggett@1148 | 1783 | class=css>110%</code>’) refers to the font size of the element itself. |
jdaggett@512 | 1784 | |
jdaggett@4624 | 1785 | <p>The first three rules do not specify the <span class=property>‘<a |
jdaggett@4624 | 1786 | href="#propdef-font-variant"><code |
jdaggett@4624 | 1787 | class=property>font-variant</code></a>’</span> and <span |
jdaggett@7060 | 1788 | class=property>‘<a href="#propdef-font-weight"><code |
jdaggett@4624 | 1789 | class=property>font-weight</code></a>’</span> explicitly, so these |
jdaggett@5809 | 1790 | properties receive their initial values (‘<a href="#normal2"><code |
jdaggett@5809 | 1791 | class=property>normal</code></a>’). Notice that the font family name |
jdaggett@5809 | 1792 | "new century schoolbook", which contains spaces, is enclosed in quotes. |
jdaggett@5809 | 1793 | The fourth rule sets the <span class=property>‘<a |
jdaggett@7060 | 1794 | href="#propdef-font-weight"><code |
jdaggett@4624 | 1795 | class=property>font-weight</code></a>’</span> to ‘<code |
jdaggett@4624 | 1796 | class=property>bold</code>’, the <span class=property>‘<a |
jdaggett@7060 | 1797 | href="#propdef-font-style"><code |
jdaggett@4624 | 1798 | class=property>font-style</code></a>’</span> to ‘<code |
jdaggett@1662 | 1799 | class=property>italic</code>’, and implicitly sets <span |
jdaggett@4624 | 1800 | class=property>‘<a href="#propdef-font-variant"><code |
jdaggett@5809 | 1801 | class=property>font-variant</code></a>’</span> to ‘<a |
jdaggett@5809 | 1802 | href="#normal2"><code class=property>normal</code></a>’. |
jdaggett@4624 | 1803 | |
jdaggett@4624 | 1804 | <p> The fifth rule sets the <span class=property>‘<a |
jdaggett@4624 | 1805 | href="#propdef-font-variant"><code |
jdaggett@4624 | 1806 | class=property>font-variant</code></a>’</span> (‘<a |
jdaggett@4624 | 1807 | href="#small-caps"><code class=property>small-caps</code></a>’), the |
jdaggett@4624 | 1808 | <span class=property>‘<a href="#propdef-font-size"><code |
jdaggett@4624 | 1809 | class=property>font-size</code></a>’</span> (120% of the parent's font |
jdaggett@4624 | 1810 | size), the <span class=property>‘<code |
jdaggett@1148 | 1811 | class=property>line-height</code>’</span> (120% of the font size) and |
jdaggett@4624 | 1812 | the <span class=property>‘<a href="#descdef-font-family"><code |
jdaggett@4624 | 1813 | class=property>font-family</code></a>’</span> (‘<a |
jdaggett@4624 | 1814 | href="#fantasy"><code class=property>fantasy</code></a>’). It follows |
jdaggett@5809 | 1815 | that the keyword ‘<a href="#normal2"><code |
jdaggett@5809 | 1816 | class=property>normal</code></a>’ applies to the two remaining |
jdaggett@7060 | 1817 | properties: <span class=property>‘<a href="#propdef-font-style"><code |
jdaggett@4624 | 1818 | class=property>font-style</code></a>’</span> and <span |
jdaggett@7060 | 1819 | class=property>‘<a href="#propdef-font-weight"><code |
jdaggett@4624 | 1820 | class=property>font-weight</code></a>’</span>. |
jdaggett@4624 | 1821 | |
jdaggett@7179 | 1822 | <p>The sixth rule sets the <span class=property>‘<a |
jdaggett@7060 | 1823 | href="#propdef-font-style"><code |
jdaggett@4624 | 1824 | class=property>font-style</code></a>’</span>, <span |
jdaggett@7060 | 1825 | class=property>‘<a href="#propdef-font-stretch"><code |
jdaggett@7020 | 1826 | class=property>font-stretch</code></a>’</span>, <span |
jdaggett@4624 | 1827 | class=property>‘<a href="#propdef-font-size"><code |
jdaggett@4624 | 1828 | class=property>font-size</code></a>’</span>, and <span |
jdaggett@4624 | 1829 | class=property>‘<a href="#descdef-font-family"><code |
jdaggett@4624 | 1830 | class=property>font-family</code></a>’</span>, the other font |
jdaggett@7020 | 1831 | properties being set to their initial values. |
jdaggett@512 | 1832 | </div> |
jdaggett@512 | 1833 | |
jdaggett@7060 | 1834 | <p>Since the ‘<a href="#propdef-font-stretch"><code |
jdaggett@7020 | 1835 | class=property>font-stretch</code></a>’ property was not defined in CSS |
jdaggett@7060 | 1836 | 2.1, when using ‘<a href="#propdef-font-stretch"><code |
jdaggett@7020 | 1837 | class=property>font-stretch</code></a>’ values within ‘<a |
jdaggett@7020 | 1838 | href="#propdef-font"><code class=property>font</code></a>’ rules, |
jdaggett@7020 | 1839 | authors should include a extra version compatible with older user agents: |
jdaggett@7020 | 1840 | |
jdaggett@7020 | 1841 | <pre>p { |
jdaggett@7020 | 1842 | font: 80% sans-serif; /* for older user agents */ |
jdaggett@7020 | 1843 | font: condensed 80% sans-serif; |
jdaggett@7020 | 1844 | }</pre> |
jdaggett@7020 | 1845 | |
jdaggett@1662 | 1846 | <p>The following values refer to system fonts: |
jdaggett@512 | 1847 | |
jdaggett@512 | 1848 | <dl> |
jdaggett@512 | 1849 | <dt><strong>caption</strong> |
jdaggett@512 | 1850 | |
jdaggett@512 | 1851 | <dd>The font used for captioned controls (e.g., buttons, drop-downs, |
jdaggett@512 | 1852 | etc.). |
jdaggett@512 | 1853 | |
jdaggett@512 | 1854 | <dt><strong>icon</strong> |
jdaggett@512 | 1855 | |
jdaggett@512 | 1856 | <dd>The font used to label icons. |
jdaggett@512 | 1857 | |
jdaggett@512 | 1858 | <dt><strong>menu</strong> |
jdaggett@512 | 1859 | |
jdaggett@512 | 1860 | <dd>The font used in menus (e.g., dropdown menus and menu lists). |
jdaggett@512 | 1861 | |
jdaggett@512 | 1862 | <dt><strong>message-box</strong> |
jdaggett@512 | 1863 | |
jdaggett@512 | 1864 | <dd>The font used in dialog boxes. |
jdaggett@512 | 1865 | |
jdaggett@512 | 1866 | <dt><strong>small-caption</strong> |
jdaggett@512 | 1867 | |
jdaggett@512 | 1868 | <dd>The font used for labeling small controls. |
jdaggett@512 | 1869 | |
jdaggett@512 | 1870 | <dt><strong>status-bar</strong> |
jdaggett@512 | 1871 | |
jdaggett@512 | 1872 | <dd>The font used in window status bars. |
jdaggett@512 | 1873 | </dl> |
jdaggett@512 | 1874 | |
jdaggett@512 | 1875 | <p>System fonts may only be set as a whole; that is, the font family, size, |
jdaggett@1662 | 1876 | weight, style, etc. are all set at the same time. These values may then be |
jdaggett@512 | 1877 | altered individually if desired. If no font with the indicated |
jdaggett@512 | 1878 | characteristics exists on a given platform, the user agent should either |
jdaggett@1148 | 1879 | intelligently substitute (e.g., a smaller version of the ‘<code |
jdaggett@1148 | 1880 | class=property>caption</code>’ font might be used for the ‘<code |
jdaggett@1148 | 1881 | class=property>smallcaption</code>’ font), or substitute a user agent |
jdaggett@1148 | 1882 | default font. As for regular fonts, if, for a system font, any of the |
jdaggett@1148 | 1883 | individual properties are not part of the operating system's available |
jdaggett@1148 | 1884 | user preferences, those properties should be set to their initial values. |
jdaggett@512 | 1885 | |
jdaggett@1662 | 1886 | <p>That is why this property is "almost" a shorthand property: system fonts |
jdaggett@1662 | 1887 | can only be specified with this property, not with <span |
jdaggett@4624 | 1888 | class=property>‘<a href="#descdef-font-family"><code |
jdaggett@4624 | 1889 | class=property>font-family</code></a>’</span> itself, so <span |
jdaggett@4624 | 1890 | class=property>‘<a href="#propdef-font"><code |
jdaggett@4624 | 1891 | class=property>font</code></a>’</span> allows authors to do more than |
jdaggett@4624 | 1892 | the sum of its subproperties. However, the individual properties such as |
jdaggett@7060 | 1893 | <span class=property>‘<a href="#propdef-font-weight"><code |
jdaggett@4624 | 1894 | class=property>font-weight</code></a>’</span> are still given values |
jdaggett@4624 | 1895 | taken from the system font, which can be independently varied. |
jdaggett@512 | 1896 | |
jdaggett@7235 | 1897 | <p>Note that the keywords used for the system fonts listed above are only |
jdaggett@7235 | 1898 | treated as keywords when they occur in the initial position, in other |
jdaggett@7235 | 1899 | positions the same string is treated as part of the font family name: |
jdaggett@7235 | 1900 | |
jdaggett@7235 | 1901 | <pre> font: menu; /* use the font settings for system menus */ |
jdaggett@7235 | 1902 | font: large menu; /* use a font family named "menu" */</pre> |
jdaggett@7235 | 1903 | |
jdaggett@512 | 1904 | <div class=example> |
jdaggett@4624 | 1905 | <p style="display:none">Example(s): |
jdaggett@890 | 1906 | |
jdaggett@890 | 1907 | <p> |
jdaggett@512 | 1908 | |
jdaggett@512 | 1909 | <pre>button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif } |
jdaggett@512 | 1910 | button p { font: menu } |
jdaggett@512 | 1911 | button p em { font-weight: bolder } |
jdaggett@512 | 1912 | </pre> |
jdaggett@512 | 1913 | |
jdaggett@512 | 1914 | <p>If the font used for dropdown menus on a particular system happened to |
jdaggett@512 | 1915 | be, for example, 9-point Charcoal, with a weight of 600, then P elements |
jdaggett@512 | 1916 | that were descendants of BUTTON would be displayed as if this rule were |
jdaggett@890 | 1917 | in effect: |
jdaggett@512 | 1918 | |
jdaggett@512 | 1919 | <pre>button p { font: 600 9pt Charcoal } |
jdaggett@512 | 1920 | </pre> |
jdaggett@512 | 1921 | |
jdaggett@4624 | 1922 | <p>Because the <span class=property>‘<a href="#propdef-font"><code |
jdaggett@4624 | 1923 | class=property>font</code></a>’</span> shorthand resets to its initial |
jdaggett@4624 | 1924 | value any property not explicitly given a value, this has the same effect |
jdaggett@4624 | 1925 | as this declaration: |
jdaggett@512 | 1926 | |
jdaggett@512 | 1927 | <pre>button p { |
jdaggett@512 | 1928 | font-style: normal; |
jdaggett@512 | 1929 | font-variant: normal; |
jdaggett@512 | 1930 | font-weight: 600; |
jdaggett@512 | 1931 | font-size: 9pt; |
jdaggett@512 | 1932 | line-height: normal; |
jdaggett@512 | 1933 | font-family: Charcoal |
jdaggett@512 | 1934 | } |
jdaggett@512 | 1935 | </pre> |
jdaggett@512 | 1936 | </div> |
jdaggett@2487 | 1937 | <!-- prop: font-synthesis --> |
jdaggett@2487 | 1938 | |
jdaggett@2487 | 1939 | <h3 id=font-synthesis-prop><span class=secno>3.8 </span>Controlling |
jdaggett@2487 | 1940 | synthetic faces: the <a href="#propdef-font-synthesis">font-synthesis</a> |
jdaggett@2487 | 1941 | property</h3> |
jdaggett@2487 | 1942 | |
jdaggett@4624 | 1943 | <table class=propdef id=namefont-synthesisvaluenone-weight-style> |
jdaggett@2457 | 1944 | <tbody> |
jdaggett@2457 | 1945 | <tr> |
jdaggett@2457 | 1946 | <td>Name: |
jdaggett@2457 | 1947 | |
jdaggett@2487 | 1948 | <td><dfn id=propdef-font-synthesis>font-synthesis</dfn> |
jdaggett@2457 | 1949 | |
jdaggett@2457 | 1950 | <tr> |
jdaggett@2457 | 1951 | <td>Value: |
jdaggett@2457 | 1952 | |
jdaggett@2487 | 1953 | <td>none | [ weight || style ] |
jdaggett@2457 | 1954 | |
jdaggett@2457 | 1955 | <tr> |
jdaggett@2457 | 1956 | <td>Initial: |
jdaggett@2457 | 1957 | |
jdaggett@2487 | 1958 | <td>weight style |
jdaggett@2457 | 1959 | |
jdaggett@2457 | 1960 | <tr> |
jdaggett@2457 | 1961 | <td>Applies to: |
jdaggett@2457 | 1962 | |
jdaggett@2457 | 1963 | <td>all elements |
jdaggett@2457 | 1964 | |
jdaggett@2457 | 1965 | <tr> |
jdaggett@2457 | 1966 | <td>Inherited: |
jdaggett@2457 | 1967 | |
jdaggett@2457 | 1968 | <td>yes |
jdaggett@2457 | 1969 | |
jdaggett@2457 | 1970 | <tr> |
jdaggett@2457 | 1971 | <td>Percentages: |
jdaggett@2457 | 1972 | |
jdaggett@2457 | 1973 | <td>N/A |
jdaggett@2457 | 1974 | |
jdaggett@2457 | 1975 | <tr> |
jdaggett@2457 | 1976 | <td>Media: |
jdaggett@2457 | 1977 | |
jdaggett@2457 | 1978 | <td>visual |
jdaggett@2457 | 1979 | |
jdaggett@2457 | 1980 | <tr> |
jdaggett@2457 | 1981 | <td>Computed value: |
jdaggett@2457 | 1982 | |
jdaggett@2457 | 1983 | <td>as specified |
jdaggett@2457 | 1984 | </table> |
jdaggett@2457 | 1985 | |
jdaggett@2487 | 1986 | <p>This property controls whether user agents are allowed to synthesize |
jdaggett@2487 | 1987 | bold or oblique font faces when a font family lacks bold or italic faces. |
jdaggett@2487 | 1988 | If ‘<code class=property>weight</code>’ is not specified, user agents |
jdaggett@2487 | 1989 | must not synthesize bold faces and if ‘<code |
jdaggett@2487 | 1990 | class=property>style</code>’ is not specified user agents must not |
jdaggett@2487 | 1991 | synthesize italic faces. A value of ‘<code class=property>none</code>’ |
jdaggett@2487 | 1992 | disallows all synthetic faces. |
jdaggett@2457 | 1993 | |
jdaggett@2457 | 1994 | <div class=example> |
jdaggett@2488 | 1995 | <p>The style rule below disables the use of synthetically obliqued Arabic:</p> |
jdaggett@2457 | 1996 | |
jdaggett@2487 | 1997 | <pre>*:lang(ar) { font-synthesis: none; } |
jdaggett@2457 | 1998 | </pre> |
jdaggett@2457 | 1999 | </div> |
jdaggett@512 | 2000 | |
jdaggett@6699 | 2001 | <h2 id=font-resources><span class=secno>4 </span>Font Resources</h2> |
jdaggett@545 | 2002 | |
jdaggett@7096 | 2003 | <h3 id=font-face-rule><span class=secno>4.1 </span>The |
jdaggett@7096 | 2004 | <code>@font-face</code> rule</h3> |
jdaggett@7096 | 2005 | |
jdaggett@7096 | 2006 | <p>The <code>@font-face</code> rule allows for linking to fonts that are |
jdaggett@7096 | 2007 | automatically activated when needed. This allows authors to select a font |
jdaggett@7096 | 2008 | that closely matches the design goals for a given page rather than |
jdaggett@7096 | 2009 | limiting the font choice to a set of fonts available on all platforms. A |
jdaggett@7096 | 2010 | set of font descriptors define the location of a font resource, either |
jdaggett@7096 | 2011 | locally or externally, along with the style characteristics of an |
jdaggett@7096 | 2012 | individual face. Multiple <code>@font-face</code> rules can be used to |
jdaggett@7096 | 2013 | construct font families with a variety of faces. Using CSS font matching |
jdaggett@7096 | 2014 | rules, a user agent can selectively download only those faces that are |
jdaggett@7096 | 2015 | needed for a given piece of text. |
jdaggett@890 | 2016 | |
jdaggett@1244 | 2017 | <p>The general form of an <span class=index-def id=font-face |
jdaggett@7096 | 2018 | title="@font-face"><code>@font-face</code></span> <span class=index-inst |
jdaggett@890 | 2019 | id=at-rule title=at-rules>at-rule</span> is: |
jdaggett@512 | 2020 | |
jdaggett@525 | 2021 | <pre> |
jdaggett@525 | 2022 | @font-face { <span class=value-inst-font-description><font-description></span> } |
jdaggett@525 | 2023 | </pre> |
jdaggett@512 | 2024 | |
jdaggett@1244 | 2025 | <p>where <span class=index-def id=ltfont-descriptiongt |
jdaggett@7060 | 2026 | title="<font-description>"><a |
jdaggett@512 | 2027 | name=value-def-font-description><font-description></a></span> has |
jdaggett@512 | 2028 | the form: |
jdaggett@512 | 2029 | |
jdaggett@512 | 2030 | <pre> |
jdaggett@512 | 2031 | descriptor: value; |
jdaggett@512 | 2032 | descriptor: value; |
jdaggett@512 | 2033 | [...] |
jdaggett@512 | 2034 | descriptor: value; |
jdaggett@512 | 2035 | </pre> |
jdaggett@512 | 2036 | |
jdaggett@518 | 2037 | <p>Each <span class=index-inst id=font-face0 |
jdaggett@7096 | 2038 | title="@font-face"><code>@font-face</code></span> rule specifies a value |
jdaggett@7096 | 2039 | for every font descriptor, either implicitly or explicitly. Those not |
jdaggett@7096 | 2040 | given explicit values in the rule take the initial value listed with each |
jdaggett@7096 | 2041 | descriptor in this specification. These descriptors apply solely within |
jdaggett@7096 | 2042 | the context of the <code>@font-face</code> rule in which they are defined, |
jdaggett@7096 | 2043 | and do not apply to document language elements. There is no notion of |
jdaggett@7096 | 2044 | which elements the descriptors apply to or whether the values are |
jdaggett@7096 | 2045 | inherited by child elements. When a given descriptor occurs multiple times |
jdaggett@7096 | 2046 | in a given <code>@font-face</code> rule, only the last specified value is |
jdaggett@7096 | 2047 | used, all prior values for that descriptor are ignored. |
jdaggett@512 | 2048 | |
jdaggett@525 | 2049 | <div class=example> |
jdaggett@525 | 2050 | <p>To use a downloadable font called Gentium:</p> |
jdaggett@512 | 2051 | |
jdaggett@512 | 2052 | <pre> |
jdaggett@525 | 2053 | @font-face { |
jdaggett@525 | 2054 | font-family: Gentium; |
jdaggett@2556 | 2055 | src: url(http://example.com/fonts/Gentium.ttf); |
jdaggett@525 | 2056 | } |
jdaggett@525 | 2057 | |
jdaggett@525 | 2058 | p { font-family: Gentium, serif; } |
jdaggett@512 | 2059 | </pre> |
jdaggett@512 | 2060 | |
jdaggett@573 | 2061 | <p>The user agent will download Gentium and use it when rendering text |
jdaggett@573 | 2062 | within paragraph elements. If for some reason the site serving the font |
jdaggett@573 | 2063 | is unavailable, the default serif font will be used.</p> |
jdaggett@512 | 2064 | </div> |
jdaggett@512 | 2065 | |
jdaggett@7096 | 2066 | <p>A given set of <code>@font-face</code> rules define a set of fonts |
jdaggett@7096 | 2067 | available to containing documents. Multiple rules can be used to define a |
jdaggett@7096 | 2068 | family with a large set of faces. When font matching is done fonts defined |
jdaggett@7096 | 2069 | using these rules are considered before other available fonts on a system. |
jdaggett@7096 | 2070 | |
jdaggett@525 | 2071 | |
jdaggett@525 | 2072 | <p>Downloaded fonts are only available to documents that reference them, |
jdaggett@2472 | 2073 | the process of activating these fonts should not make them available to |
jdaggett@2472 | 2074 | other applications or to documents that don't directly link to the same |
jdaggett@2556 | 2075 | font. User agent implementers might consider it convenient to use |
jdaggett@2472 | 2076 | downloaded fonts when rendering characters in other documents for which no |
jdaggett@2472 | 2077 | other available font exists as part of the system font fallback procedure. |
jdaggett@2472 | 2078 | This would cause a security leak since the contents of one page would be |
jdaggett@2472 | 2079 | able to affect other pages, something an attacker could use as an attack |
jdaggett@2472 | 2080 | vector. These restrictions do not affect caching behavior, fonts are |
jdaggett@2472 | 2081 | cached the same way other web resources are cached. |
jdaggett@525 | 2082 | |
jdaggett@7096 | 2083 | <p>User agents which do not understand the <code>@font-face</code> rule |
jdaggett@7096 | 2084 | encounter the opening curly bracket and ignore forward until the closing |
jdaggett@7096 | 2085 | curly bracket. This at-rule conforms with the forward-compatible parsing |
jdaggett@7096 | 2086 | requirement of CSS, parsers may ignore these rules without error. Any |
jdaggett@7096 | 2087 | descriptors that are not recognized or implemented by a given user agent |
jdaggett@7096 | 2088 | must be ignored. <code>@font-face</code> rules require a font-family and |
jdaggett@7096 | 2089 | src descriptor, if either of these are missing the <code>@font-face</code> |
jdaggett@7096 | 2090 | must be ignored. |
jdaggett@1244 | 2091 | |
jdaggett@1244 | 2092 | <p>In cases where user agents have limited platform resources or implement |
jdaggett@7096 | 2093 | the ability to disable downloadable font resources, |
jdaggett@7096 | 2094 | <code>@font-face</code> rules must simply be ignored; the behavior of |
jdaggett@7096 | 2095 | individual descriptors as defined in this specification should not be |
jdaggett@7096 | 2096 | altered. |
jdaggett@1662 | 2097 | |
jdaggett@1662 | 2098 | <h3 id=font-family-desc><span class=secno>4.2 </span>Font family: the <a |
jdaggett@1662 | 2099 | href="#descdef-font-family">font-family</a> descriptor</h3> |
jdaggett@512 | 2100 | |
jdaggett@512 | 2101 | <table class=descdef> |
jdaggett@512 | 2102 | <tbody> |
jdaggett@512 | 2103 | <tr> |
jdaggett@512 | 2104 | <td>Name: |
jdaggett@512 | 2105 | |
jdaggett@1662 | 2106 | <td><dfn id=descdef-font-family>font-family</dfn> |
jdaggett@512 | 2107 | |
jdaggett@512 | 2108 | <tr> |
jdaggett@512 | 2109 | <td>Value: |
jdaggett@512 | 2110 | |
jdaggett@525 | 2111 | <td><family-name> |
jdaggett@890 | 2112 | |
jdaggett@890 | 2113 | <tr> |
jdaggett@890 | 2114 | <td><em>Initial:</em> |
jdaggett@890 | 2115 | |
jdaggett@890 | 2116 | <td>N/A |
jdaggett@512 | 2117 | </table> |
jdaggett@512 | 2118 | |
jdaggett@525 | 2119 | <p>This descriptor defines the font family name that will be used in all |
jdaggett@1244 | 2120 | CSS font family name matching, overriding font family names contained in |
jdaggett@1244 | 2121 | the underlying font data. If the font family name is the same as a font |
jdaggett@1244 | 2122 | family available in a given user's environment, it effectively hides the |
jdaggett@1244 | 2123 | underlying font for documents that use the stylesheet. This permits a web |
jdaggett@1244 | 2124 | author to freely choose font-family names without worrying about conflicts |
jdaggett@1244 | 2125 | with font family names present in a given user's environment. Errors |
jdaggett@1244 | 2126 | loading font data do not affect font name matching behavior. User agents |
jdaggett@1244 | 2127 | that apply platform font aliasing rules to font family names defined via |
jdaggett@7096 | 2128 | <code>@font-face</code> rules are considered non-conformant. |
jdaggett@1244 | 2129 | |
jdaggett@1662 | 2130 | <h3 id=src-desc><span class=secno>4.3 </span>Font reference: the <a |
jdaggett@1662 | 2131 | href="#descdef-src">src</a> descriptor</h3> |
jdaggett@512 | 2132 | |
jdaggett@512 | 2133 | <table class=descdef> |
jdaggett@512 | 2134 | <tbody> |
jdaggett@512 | 2135 | <tr> |
jdaggett@512 | 2136 | <td>Name: |
jdaggett@512 | 2137 | |
jdaggett@1662 | 2138 | <td><dfn id=descdef-src>src</dfn> |
jdaggett@512 | 2139 | |
jdaggett@512 | 2140 | <tr> |
jdaggett@512 | 2141 | <td>Value: |
jdaggett@512 | 2142 | |
jdaggett@5833 | 2143 | <td>[ <uri> [format(<string>#)]? | <font-face-name> ]# |
jdaggett@890 | 2144 | |
jdaggett@890 | 2145 | <tr> |
jdaggett@890 | 2146 | <td><em>Initial:</em> |
jdaggett@890 | 2147 | |
jdaggett@890 | 2148 | <td>N/A |
jdaggett@512 | 2149 | </table> |
jdaggett@512 | 2150 | |
jdaggett@899 | 2151 | <p>This descriptor specifies the resource containing font data. It is |
jdaggett@1758 | 2152 | required, whether the font is downloadable or locally installed. Its value |
jdaggett@1758 | 2153 | is a prioritized, comma-separated list of external references or locally |
jdaggett@1758 | 2154 | installed font face names. When a font is needed the user agent iterates |
jdaggett@1758 | 2155 | over the set of references listed, using the first one it can successfully |
jdaggett@2527 | 2156 | activate. Fonts containing invalid data or local font faces that are not |
jdaggett@2527 | 2157 | found are ignored and the user agent loads the next font in the list |
jdaggett@2527 | 2158 | (platform substitutions for a given font must not be used). |
jdaggett@525 | 2159 | |
jdaggett@1244 | 2160 | <p>As with other URIs in CSS, the URI may be partial, in which case it is |
jdaggett@1244 | 2161 | resolved relative to the location of the style sheet containing the <span |
jdaggett@7096 | 2162 | class=index-inst id=font-face1 |
jdaggett@7096 | 2163 | title="@font-face"><code>@font-face</code></span> rule. In the case of SVG |
jdaggett@7096 | 2164 | fonts, the URL points to an element within a document containing SVG font |
jdaggett@7096 | 2165 | definitions. If the element reference is omitted, a reference to the first |
jdaggett@7096 | 2166 | defined font is implied. Similarly, font container formats that can |
jdaggett@7096 | 2167 | contain more than one font must load one and only one of the fonts for a |
jdaggett@7096 | 2168 | given <code>@font-face</code> rule. Fragment identifiers are used to |
jdaggett@5928 | 2169 | indicate which font to load. If a container format lacks a defined |
jdaggett@5928 | 2170 | fragment identifier scheme, implementations should use a simple 1-based |
jdaggett@5928 | 2171 | indexing scheme (e.g. "font-collection#1" for the first font, |
jdaggett@5928 | 2172 | "font-collection#2" for the second font). |
jdaggett@1244 | 2173 | |
jdaggett@2527 | 2174 | <pre> |
jdaggett@2527 | 2175 | src: url(fonts/simple.ttf); /* load simple.ttf relative to stylesheet location */ |
jdaggett@2527 | 2176 | src: url(/fonts/simple.ttf); /* load simple.ttf from absolute location */ |
jdaggett@2527 | 2177 | src: url(fonts.svg#simple); /* load SVG font with id 'simple' */ |
jdaggett@2527 | 2178 | </pre> |
jdaggett@2527 | 2179 | |
jdaggett@2527 | 2180 | <p>External references consist of a URI, followed by an optional hint |
jdaggett@2527 | 2181 | describing the format of the font resource referenced by that URI. The |
jdaggett@2527 | 2182 | format hint contains a comma-separated list of format strings that denote |
jdaggett@2527 | 2183 | well-known font formats. Conformant user agents must skip downloading a |
jdaggett@2527 | 2184 | font resource if the format hints indicate only unsupported or unknown |
jdaggett@2527 | 2185 | font formats. If no format hints are supplied, the user agent should |
jdaggett@2527 | 2186 | download the font resource. |
jdaggett@2527 | 2187 | |
jdaggett@2527 | 2188 | <pre> |
jdaggett@2527 | 2189 | /* load WOFF font if possible, otherwise use OpenType font */ |
jdaggett@2527 | 2190 | @font-face { |
jdaggett@2527 | 2191 | font-family: bodytext; |
jdaggett@2527 | 2192 | src: url(ideal-sans-serif.woff) format("woff"), |
jdaggett@2527 | 2193 | url(basic-sans-serif.ttf) format("opentype"); |
jdaggett@2527 | 2194 | } |
jdaggett@2527 | 2195 | </pre> |
jdaggett@2527 | 2196 | |
jdaggett@2527 | 2197 | <p>Format strings defined by this specification: |
jdaggett@2527 | 2198 | |
jdaggett@2527 | 2199 | <table class=data id=fontformats> |
jdaggett@2527 | 2200 | <thead> |
jdaggett@2527 | 2201 | <tr> |
jdaggett@2527 | 2202 | <th>String |
jdaggett@2527 | 2203 | |
jdaggett@2527 | 2204 | <th>Font Format |
jdaggett@2527 | 2205 | |
jdaggett@2527 | 2206 | <th>Common extensions |
jdaggett@2527 | 2207 | |
jdaggett@2527 | 2208 | <tbody> |
jdaggett@2527 | 2209 | <tr> |
jdaggett@2527 | 2210 | <th>"woff" |
jdaggett@2527 | 2211 | |
jdaggett@4624 | 2212 | <td><a href="http://www.w3.org/TR/WOFF/">WOFF (Web Open Font Format)</a> |
jdaggett@2527 | 2213 | |
jdaggett@2527 | 2214 | <td>.woff |
jdaggett@2527 | 2215 | |
jdaggett@2527 | 2216 | <tr> |
jdaggett@2527 | 2217 | <th>"truetype" |
jdaggett@2527 | 2218 | |
jdaggett@4624 | 2219 | <td><a |
jdaggett@4624 | 2220 | href="http://www.microsoft.com/typography/otspec/default.htm">TrueType</a> |
jdaggett@2527 | 2221 | |
jdaggett@2527 | 2222 | <td>.ttf |
jdaggett@2527 | 2223 | |
jdaggett@2527 | 2224 | <tr> |
jdaggett@2527 | 2225 | <th>"opentype" |
jdaggett@2527 | 2226 | |
jdaggett@4624 | 2227 | <td><a |
jdaggett@4624 | 2228 | href="http://www.microsoft.com/typography/otspec/default.htm">OpenType</a> |
jdaggett@2527 | 2229 | |
jdaggett@2527 | 2230 | <td>.ttf, .otf |
jdaggett@2527 | 2231 | |
jdaggett@2527 | 2232 | <tr> |
jdaggett@2527 | 2233 | <th>"embedded-opentype" |
jdaggett@2527 | 2234 | |
jdaggett@4624 | 2235 | <td><a |
jdaggett@4624 | 2236 | href="http://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded |
jdaggett@4624 | 2237 | OpenType</a> |
jdaggett@2527 | 2238 | |
jdaggett@2527 | 2239 | <td>.eot |
jdaggett@2527 | 2240 | |
jdaggett@2527 | 2241 | <tr> |
jdaggett@2527 | 2242 | <th>"svg" |
jdaggett@2527 | 2243 | |
jdaggett@4624 | 2244 | <td><a href="http://www.w3.org/TR/SVG/fonts.html">SVG Font</a> |
jdaggett@2527 | 2245 | |
jdaggett@2527 | 2246 | <td>.svg, .svgz |
jdaggett@2527 | 2247 | </table> |
jdaggett@2527 | 2248 | |
jdaggett@2527 | 2249 | <p>Given the overlap in common usage between TrueType and OpenType, the |
jdaggett@2527 | 2250 | format hints "truetype" and "opentype" must be considered as synonymous; a |
jdaggett@2527 | 2251 | format hint of "opentype" does not imply that the font contains Postscript |
jdaggett@2527 | 2252 | CFF style glyph data or that it contains OpenType layout information (see |
jdaggett@2737 | 2253 | Appendix A for more background on this). |
jdaggett@2527 | 2254 | |
jdaggett@2527 | 2255 | <p>When authors would prefer to use a locally available copy of a given |
jdaggett@2527 | 2256 | font and download it if it's not, local() can be used. The locally |
jdaggett@2527 | 2257 | installed <span class=index-def id=ltfont-face-namegt |
jdaggett@7060 | 2258 | title="<font-face-name>"><a |
jdaggett@525 | 2259 | name=value-def-font-face-name><font-face-name></a></span> is a |
jdaggett@890 | 2260 | format-specific string that uniquely identifies a single font face within |
jdaggett@2527 | 2261 | a larger family. The syntax for a <font-face-name> is a unique font |
jdaggett@2527 | 2262 | face name enclosed by "local(" and ")". |
jdaggett@2527 | 2263 | |
jdaggett@2527 | 2264 | <pre> |
jdaggett@2527 | 2265 | /* regular face of Gentium */ |
jdaggett@573 | 2266 | @font-face { |
jdaggett@2527 | 2267 | font-family: MyGentium; |
jdaggett@2527 | 2268 | src: local(Gentium), /* use locally available Gentium */ |
jdaggett@2527 | 2269 | url(Gentium.ttf); /* otherwise, download it */ |
jdaggett@573 | 2270 | } |
jdaggett@573 | 2271 | </pre> |
jdaggett@573 | 2272 | |
jdaggett@2527 | 2273 | <p>The name can optionally be enclosed in quotes. For OpenType and TrueType |
jdaggett@2527 | 2274 | fonts, this string is used to match only the Postscript name or the full |
jdaggett@2527 | 2275 | font name in the name table of locally available fonts. Which is used |
jdaggett@2527 | 2276 | varies by platform and font, so authors should include both of these names |
jdaggett@2527 | 2277 | to assure proper matching across platforms. |
jdaggett@2527 | 2278 | |
jdaggett@2527 | 2279 | <pre> |
jdaggett@2527 | 2280 | /* bold face of Gentium */ |
jdaggett@2527 | 2281 | @font-face { |
jdaggett@2527 | 2282 | font-family: MyGentium; |
jdaggett@2527 | 2283 | src: local(Gentium Bold), /* full font name */ |
jdaggett@2527 | 2284 | local(Gentium-Bold), /* Postscript name */ |
jdaggett@2527 | 2285 | url(GentiumBold.ttf); /* otherwise, download it */ |
jdaggett@2527 | 2286 | font-weight: bold; |
jdaggett@2527 | 2287 | } |
jdaggett@2527 | 2288 | </pre> |
jdaggett@2527 | 2289 | |
jdaggett@7096 | 2290 | <p>Just as a <code>@font-face</code> rule specifies the characteristics of |
jdaggett@7096 | 2291 | a single font within a family, the unique name used with local() specifies |
jdaggett@7096 | 2292 | a single font, not an entire font family. Defined in terms of OpenType |
jdaggett@7096 | 2293 | font data, the Postscript name is found in the font's <a |
jdaggett@2527 | 2294 | href="http://www.microsoft.com/typography/otspec/name.htm">name table</a>, |
jdaggett@2527 | 2295 | in the name record with nameID = 6 (see <a href="#OPENTYPE" |
jdaggett@2556 | 2296 | rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> for more details). The |
jdaggett@2527 | 2297 | Postscript name is the commonly used key for all fonts on OSX and for |
jdaggett@2527 | 2298 | Postscript CFF fonts under Windows. The full font name (nameID = 4) is |
jdaggett@2527 | 2299 | used as a unique key for fonts with TrueType glyphs on Windows. |
jdaggett@2527 | 2300 | |
jdaggett@2527 | 2301 | <p>For OpenType fonts with multiple localizations of the full font name, |
jdaggett@2527 | 2302 | the US English version is used (language ID = 0x409 for Windows and |
jdaggett@2527 | 2303 | language ID = 0 for Macintosh) or the first localization when a US English |
jdaggett@2527 | 2304 | full font name is not available (the OpenType specification recommends |
jdaggett@2527 | 2305 | that <a href="http://www.microsoft.com/typography/otspec/recom.htm">all |
jdaggett@2527 | 2306 | fonts minimally include US English names</a>). User agents that also match |
jdaggett@2527 | 2307 | other full font names, e.g. matching the Dutch name when the current |
jdaggett@2527 | 2308 | system locale is set to Dutch, are considered non-conformant. This is done |
jdaggett@2527 | 2309 | not to prefer English but to avoid matching inconsistencies across font |
jdaggett@2527 | 2310 | versions and OS localizations, since font style names (e.g. "Bold") are |
jdaggett@2527 | 2311 | frequently localized into many languages and the set of localizations |
jdaggett@2527 | 2312 | available varies widely across platform and font version. User agents that |
jdaggett@2527 | 2313 | match a concatenation of family name (nameID = 1) with style name (nameID |
jdaggett@2527 | 2314 | = 2) are considered non-conformant. |
jdaggett@2527 | 2315 | |
jdaggett@2527 | 2316 | <p>This also allows for referencing faces that belong to larger families |
jdaggett@2527 | 2317 | that cannot otherwise be referenced. |
jdaggett@2527 | 2318 | |
jdaggett@2527 | 2319 | <div class=example> |
jdaggett@525 | 2320 | <p>Use a local font or reference an SVG font in another document:</p> |
jdaggett@525 | 2321 | |
jdaggett@525 | 2322 | <pre> |
jdaggett@525 | 2323 | @font-face { |
jdaggett@525 | 2324 | font-family: Headline; |
jdaggett@1148 | 2325 | src: local(Futura-Medium), |
jdaggett@1148 | 2326 | url(fonts.svg#MyGeometricModern) format("svg"); |
jdaggett@525 | 2327 | } |
jdaggett@525 | 2328 | </pre> |
jdaggett@525 | 2329 | |
jdaggett@525 | 2330 | <p>Create an alias for local Japanese fonts on different platforms:</p> |
jdaggett@525 | 2331 | |
jdaggett@525 | 2332 | <pre> |
jdaggett@525 | 2333 | @font-face { |
jdaggett@2527 | 2334 | font-family: jpgothic; |
jdaggett@525 | 2335 | src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic); |
jdaggett@525 | 2336 | } |
jdaggett@525 | 2337 | </pre> |
jdaggett@525 | 2338 | |
jdaggett@525 | 2339 | <p>Reference a font face that cannot be matched within a larger family:</p> |
jdaggett@525 | 2340 | |
jdaggett@525 | 2341 | <pre> |
jdaggett@525 | 2342 | @font-face { |
jdaggett@525 | 2343 | font-family: Hoefler Text Ornaments; |
jdaggett@525 | 2344 | /* has the same font properties as Hoefler Text Regular */ |
jdaggett@525 | 2345 | src: local(HoeflerText-Ornaments); |
jdaggett@525 | 2346 | } |
jdaggett@525 | 2347 | </pre> |
jdaggett@2527 | 2348 | |
jdaggett@1662 | 2349 | <p>Since localized fullnames should never match, a document with the |
jdaggett@1662 | 2350 | header style rules below would always render using the default serif |
jdaggett@1662 | 2351 | font, regardless whether a particular system locale parameter is set to |
jdaggett@1662 | 2352 | Finnish or not:</p> |
jdaggett@1662 | 2353 | |
jdaggett@1662 | 2354 | <pre> |
jdaggett@1662 | 2355 | @font-face { |
jdaggett@1662 | 2356 | font-family: SectionHeader; |
jdaggett@6653 | 2357 | src: local("Arial Lihavoitu"); /* Finnish fullname for Arial Bold, should fail */ |
jdaggett@1662 | 2358 | font-weight: bold; |
jdaggett@1662 | 2359 | } |
jdaggett@1662 | 2360 | |
jdaggett@1662 | 2361 | h2 { font-family: SectionHeader, serif; } |
jdaggett@1662 | 2362 | </pre> |
jdaggett@1662 | 2363 | |
jdaggett@1662 | 2364 | <p>A conformant user agent should never load the font ‘<code |
jdaggett@1662 | 2365 | class=css>gentium.eot</code>’ in the example below, since it is |
jdaggett@4624 | 2366 | included in the first definition of the ‘<a href="#descdef-src"><code |
jdaggett@4624 | 2367 | class=property>src</code></a>’ descriptor which is overridden by the |
jdaggett@7096 | 2368 | second definition in the same <code>@font-face</code> rule:</p> |
jdaggett@1662 | 2369 | |
jdaggett@1662 | 2370 | <pre> |
jdaggett@1662 | 2371 | @font-face { |
jdaggett@1662 | 2372 | font-family: MainText; |
jdaggett@6653 | 2373 | src: url(gentium.eot); /* for use with older non-conformant user agents */ |
jdaggett@1662 | 2374 | src: local("Gentium"), url(gentium.ttf); /* Overrides src definition */ |
jdaggett@1662 | 2375 | } |
jdaggett@1662 | 2376 | </pre> |
jdaggett@1662 | 2377 | </div> |
jdaggett@1662 | 2378 | |
jdaggett@1662 | 2379 | <h3 id=font-prop-desc><span class=secno>4.4 </span>Font property |
jdaggett@1662 | 2380 | descriptors: the <a href="#descdef-font-style">font-style</a>, <a |
jdaggett@1662 | 2381 | href="#descdef-font-weight">font-weight</a>, <a |
jdaggett@1662 | 2382 | href="#descdef-font-stretch">font-stretch</a> descriptors</h3> |
jdaggett@518 | 2383 | |
jdaggett@518 | 2384 | <table class=descdef> |
jdaggett@518 | 2385 | <tbody> |
jdaggett@518 | 2386 | <tr> |
jdaggett@518 | 2387 | <td>Name: |
jdaggett@518 | 2388 | |
jdaggett@7060 | 2389 | <td><dfn id=descdef-font-style title="font-style |
jdaggett@7060 | 2390 | (descriptor)">font-style</dfn> |
jdaggett@518 | 2391 | |
jdaggett@518 | 2392 | <tr> |
jdaggett@518 | 2393 | <td>Value: |
jdaggett@518 | 2394 | |
jdaggett@545 | 2395 | <td>normal | italic | oblique |
jdaggett@890 | 2396 | |
jdaggett@890 | 2397 | <tr> |
jdaggett@890 | 2398 | <td><em>Initial:</em> |
jdaggett@890 | 2399 | |
jdaggett@890 | 2400 | <td>normal |
jdaggett@518 | 2401 | </table> |
jdaggett@518 | 2402 | |
jdaggett@518 | 2403 | <table class=descdef> |
jdaggett@518 | 2404 | <tbody> |
jdaggett@518 | 2405 | <tr> |
jdaggett@518 | 2406 | <td>Name: |
jdaggett@518 | 2407 | |
jdaggett@7060 | 2408 | <td><dfn id=descdef-font-weight title="font-weight |
jdaggett@7060 | 2409 | (descriptor)">font-weight</dfn> |
jdaggett@518 | 2410 | |
jdaggett@518 | 2411 | <tr> |
jdaggett@518 | 2412 | <td>Value: |
jdaggett@518 | 2413 | |
jdaggett@545 | 2414 | <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
jdaggett@890 | 2415 | |
jdaggett@890 | 2416 | <tr> |
jdaggett@890 | 2417 | <td><em>Initial:</em> |
jdaggett@890 | 2418 | |
jdaggett@890 | 2419 | <td>normal |
jdaggett@518 | 2420 | </table> |
jdaggett@518 | 2421 | |
jdaggett@518 | 2422 | <table class=descdef> |
jdaggett@518 | 2423 | <tbody> |
jdaggett@518 | 2424 | <tr> |
jdaggett@518 | 2425 | <td>Name: |
jdaggett@518 | 2426 | |
jdaggett@7060 | 2427 | <td><dfn id=descdef-font-stretch title="font-stretch |
jdaggett@7060 | 2428 | (descriptor)">font-stretch</dfn> |
jdaggett@518 | 2429 | |
jdaggett@518 | 2430 | <tr> |
jdaggett@518 | 2431 | <td>Value: |
jdaggett@518 | 2432 | |
jdaggett@545 | 2433 | <td>normal | ultra-condensed | extra-condensed | condensed | |
jdaggett@518 | 2434 | semi-condensed | semi-expanded | expanded | extra-expanded | |
jdaggett@525 | 2435 | ultra-expanded |
jdaggett@890 | 2436 | |
jdaggett@890 | 2437 | <tr> |
jdaggett@890 | 2438 | <td><em>Initial:</em> |
jdaggett@890 | 2439 | |
jdaggett@890 | 2440 | <td>normal |
jdaggett@518 | 2441 | </table> |
jdaggett@518 | 2442 | |
jdaggett@573 | 2443 | <p>These descriptors define the characteristics of a font face and are used |
jdaggett@573 | 2444 | in the process of matching styles to specific faces. For a font family |
jdaggett@7096 | 2445 | defined with several <code>@font-face</code> rules, user agents can either |
jdaggett@7096 | 2446 | download all faces in the family or use these descriptors to selectively |
jdaggett@7096 | 2447 | download font faces that match actual styles used in document. The values |
jdaggett@7096 | 2448 | for these descriptors are the same as those for the corresponding font |
jdaggett@7096 | 2449 | properties except that relative keywords are not allowed, ‘<code |
jdaggett@2527 | 2450 | class=property>bolder</code>’ and ‘<code |
jdaggett@2527 | 2451 | class=property>lighter</code>’. If these descriptors are omitted, |
jdaggett@2527 | 2452 | default values are assumed. |
jdaggett@890 | 2453 | |
jdaggett@890 | 2454 | <p>The value for these font face style attributes is used in place of the |
jdaggett@890 | 2455 | style implied by the underlying font data. This allows authors to combine |
jdaggett@890 | 2456 | faces in flexible combinations, even in situations where the original font |
jdaggett@890 | 2457 | data was arranged differently. User agents that implement synthetic |
jdaggett@1662 | 2458 | bolding and obliqueing must only apply synthetic styling in cases where |
jdaggett@890 | 2459 | the font descriptors imply this is needed, rather than based on the style |
jdaggett@890 | 2460 | attributes implied by the font data. |
jdaggett@573 | 2461 | |
jdaggett@1662 | 2462 | <h3 id=unicode-range-desc><span class=secno>4.5 </span>Character range: the |
jdaggett@1662 | 2463 | <a href="#descdef-unicode-range">unicode-range</a> descriptor</h3> |
jdaggett@518 | 2464 | |
jdaggett@518 | 2465 | <table class=descdef> |
jdaggett@518 | 2466 | <tbody> |
jdaggett@518 | 2467 | <tr> |
jdaggett@518 | 2468 | <td>Name: |
jdaggett@518 | 2469 | |
jdaggett@1662 | 2470 | <td><dfn id=descdef-unicode-range>unicode-range</dfn> |
jdaggett@518 | 2471 | |
jdaggett@518 | 2472 | <tr> |
jdaggett@518 | 2473 | <td>Value: |
jdaggett@518 | 2474 | |
jdaggett@5833 | 2475 | <td><urange># |
jdaggett@890 | 2476 | |
jdaggett@890 | 2477 | <tr> |
jdaggett@890 | 2478 | <td><em>Initial:</em> |
jdaggett@890 | 2479 | |
jdaggett@1148 | 2480 | <td>U+0-10FFFF |
jdaggett@518 | 2481 | </table> |
jdaggett@518 | 2482 | |
jdaggett@890 | 2483 | <p>This descriptor defines the range of Unicode characters supported by a |
jdaggett@890 | 2484 | given font. The values of <span class=index-def id=lturangegt |
jdaggett@7060 | 2485 | title="<urange>"><a name=value-def-urange><urange></a></span> |
jdaggett@7060 | 2486 | are expressed using hexadecimal numbers prefixed by "U+", corresponding to |
jdaggett@7060 | 2487 | <a href="http://www.unicode.org/charts/">Unicode character code |
jdaggett@7060 | 2488 | points</a>. The unicode-range descriptor serves as a hint for user agents |
jdaggett@7060 | 2489 | when deciding whether or not to download a font resource. |
jdaggett@529 | 2490 | |
jdaggett@7229 | 2491 | <p>Unicode range values are written using hexadecimal values and are ASCII |
jdaggett@7229 | 2492 | case-insensitive. Each is prefixed by "U+" and multiple, discontinuous |
jdaggett@7229 | 2493 | ranges are separated by commas. Whitespace before or after commas is |
jdaggett@7229 | 2494 | ignored. Valid character code values vary between 0 and 10FFFF inclusive. |
jdaggett@7229 | 2495 | A single range has three basic forms: |
jdaggett@573 | 2496 | |
jdaggett@573 | 2497 | <ul> |
jdaggett@1149 | 2498 | <li>a single code point (e.g. U+416) |
jdaggett@573 | 2499 | |
jdaggett@573 | 2500 | <li>an interval value range (e.g. U+400-4ff) |
jdaggett@573 | 2501 | |
jdaggett@1148 | 2502 | <li>a range where trailing ‘<code class=css>?</code>’ characters imply |
jdaggett@1148 | 2503 | ‘<code class=css>any digit value</code>’ (e.g. U+4??) |
jdaggett@573 | 2504 | </ul> |
jdaggett@573 | 2505 | |
jdaggett@1149 | 2506 | <p>Ranges that do not fit any of the above three forms are considered to be |
jdaggett@1149 | 2507 | parse errors and the descriptor is omitted. Interval ranges consisting of |
jdaggett@1149 | 2508 | a single code point are valid. Ranges specified with ‘?’ that lack an |
jdaggett@1149 | 2509 | initial digit (e.g. "U+???") are also valid, and are treated as if there |
jdaggett@1149 | 2510 | was a single 0 before the question marks (thus, "U+???" = "U+0???" = |
jdaggett@1149 | 2511 | "U+0000-0FFF"). "U+??????" is not a syntax error, even though "U+0??????" |
jdaggett@1149 | 2512 | would be. Ranges can overlap but interval ranges that descend (e.g. |
jdaggett@1149 | 2513 | U+400-32f) are invalid and omitted rather than treated as parse errors; |
jdaggett@1149 | 2514 | they have no effect on other ranges in a list of ranges. Ranges are |
jdaggett@5596 | 2515 | clipped to the domain of Unicode code points (currently 0 – 10FFFF |
jdaggett@1149 | 2516 | inclusive); a range entirely outside the domain is omitted. Without any |
jdaggett@1149 | 2517 | valid ranges, the descriptor is omitted. User agents may normalize the |
jdaggett@1758 | 2518 | list of ranges into a list that is different but represents the same set |
jdaggett@1758 | 2519 | of character code points. |
jdaggett@901 | 2520 | |
jdaggett@901 | 2521 | <p>The character range can be a subset of the full character map of the |
jdaggett@1148 | 2522 | underlying font. The effective unicode-range used when mapping characters |
jdaggett@1148 | 2523 | to fonts is the intersection of the unicode range specified and the |
jdaggett@1148 | 2524 | underlying character map of the font. This means that authors do not need |
jdaggett@1148 | 2525 | to define the unicode-range of a font precisely, broad ranges for which a |
jdaggett@1149 | 2526 | sparse set of code points are defined in the font can be used. Code points |
jdaggett@1662 | 2527 | outside of the defined unicode-range are ignored, regardless of whether |
jdaggett@1149 | 2528 | the font contains a glyph for that code point or not. User agents that |
jdaggett@1148 | 2529 | download fonts for characters outside the defined unicode-range are |
jdaggett@1148 | 2530 | considered non-conformant. Likewise, user agents that render a character |
jdaggett@1148 | 2531 | using a font resource for which the defined unicode-range does not include |
jdaggett@1148 | 2532 | that character are also considered non-conformant. |
jdaggett@890 | 2533 | |
jdaggett@890 | 2534 | <p>Example ranges for specific languages or characters: |
jdaggett@518 | 2535 | |
jdaggett@518 | 2536 | <dl> |
jdaggett@529 | 2537 | <dt>unicode-range: U+A5; |
jdaggett@529 | 2538 | |
jdaggett@1149 | 2539 | <dd>a single code point, the yen/yuan symbol |
jdaggett@529 | 2540 | |
jdaggett@1148 | 2541 | <dt>unicode-range: U+0-7F; |
jdaggett@1148 | 2542 | |
jdaggett@1148 | 2543 | <dd>code range for basic ASCII characters |
jdaggett@1148 | 2544 | |
jdaggett@529 | 2545 | <dt>unicode-range: U+590-5ff; |
jdaggett@529 | 2546 | |
jdaggett@529 | 2547 | <dd>code range for Hebrew characters |
jdaggett@529 | 2548 | |
jdaggett@529 | 2549 | <dt>unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F; |
jdaggett@529 | 2550 | |
jdaggett@529 | 2551 | <dd>code range for Japanese kanji, hiragana and katakana characters plus |
jdaggett@529 | 2552 | yen/yuan symbol |
jdaggett@518 | 2553 | </dl> |
jdaggett@518 | 2554 | |
jdaggett@529 | 2555 | <div class=example> |
jdaggett@531 | 2556 | <p>The BBC provides news services in a wide variety of languages, many |
jdaggett@7096 | 2557 | that are not well supported across all platforms. Using an |
jdaggett@7096 | 2558 | <code>@font-face</code> rule, the BBC could provide a font for any of |
jdaggett@7096 | 2559 | these languages, as it already does via a manual font download.</p> |
jdaggett@531 | 2560 | |
jdaggett@531 | 2561 | <pre> |
jdaggett@531 | 2562 | @font-face { |
jdaggett@531 | 2563 | font-family: BBCBengali; |
jdaggett@531 | 2564 | src: url(fonts/BBCBengali.ttf) format("opentype"); |
jdaggett@531 | 2565 | unicode-range: U+00-FF, U+980-9FF; |
jdaggett@531 | 2566 | } |
jdaggett@531 | 2567 | </pre> |
jdaggett@529 | 2568 | </div> |
jdaggett@529 | 2569 | |
jdaggett@529 | 2570 | <div class=example> |
jdaggett@531 | 2571 | <p>Technical documents often require a wide range of symbols. The STIX |
jdaggett@531 | 2572 | Fonts project is one project aimed at providing fonts to support a wide |
jdaggett@531 | 2573 | range of technical typesetting in a standardized way. The example below |
jdaggett@531 | 2574 | shows the use of a font that provides glyphs for many of the mathematical |
jdaggett@531 | 2575 | and technical symbol ranges within Unicode:</p> |
jdaggett@531 | 2576 | |
jdaggett@531 | 2577 | <pre> |
jdaggett@531 | 2578 | @font-face { |
jdaggett@531 | 2579 | font-family: STIXGeneral; |
jdaggett@531 | 2580 | src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf); |
jdaggett@531 | 2581 | unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF; |
jdaggett@531 | 2582 | } |
jdaggett@531 | 2583 | </pre> |
jdaggett@529 | 2584 | </div> |
jdaggett@529 | 2585 | |
jdaggett@7096 | 2586 | <p>Multiple <code>@font-face</code> rules with different unicode ranges for |
jdaggett@7096 | 2587 | the same family and style descriptor values can be used to create |
jdaggett@7096 | 2588 | composite fonts that mix the glyphs from different fonts for different |
jdaggett@7096 | 2589 | scripts. This can be used to combine fonts that only contain glyphs for a |
jdaggett@7096 | 2590 | single script (e.g. Latin, Greek, Cyrillic) or it can be used by authors |
jdaggett@7096 | 2591 | as a way of segmenting a font into fonts for commonly used characters and |
jdaggett@7096 | 2592 | less frequently used characters. Since the user agent will only pull down |
jdaggett@7096 | 2593 | the fonts it needs this helps reduce page bandwidth. |
jdaggett@7096 | 2594 | |
jdaggett@7096 | 2595 | <p>If the unicode ranges overlap for a set of <code>@font-face</code> rules |
jdaggett@7096 | 2596 | with the same family and style descriptor values, the rules are ordered in |
jdaggett@7096 | 2597 | the reverse order they were defined; the last rule defined is the first to |
jdaggett@7096 | 2598 | be checked for a given character. |
jdaggett@529 | 2599 | |
jdaggett@529 | 2600 | <div class=example> |
jdaggett@529 | 2601 | <p>This example shows how an author can override the glyphs used for Latin |
jdaggett@529 | 2602 | characters in a Japanese font with glyphs from a different font. The |
jdaggett@529 | 2603 | first rule specifies no range so it defaults to the entire range. The |
jdaggett@529 | 2604 | range specified in the second rule overlaps but takes precedence because |
jdaggett@529 | 2605 | it is defined later.</p> |
jdaggett@529 | 2606 | |
jdaggett@529 | 2607 | <pre> |
jdaggett@529 | 2608 | @font-face { |
jdaggett@529 | 2609 | font-family: JapaneseWithGentium; |
jdaggett@529 | 2610 | src: local(MSMincho); |
jdaggett@529 | 2611 | /* no range specified, defaults to entire range */ |
jdaggett@529 | 2612 | } |
jdaggett@529 | 2613 | |
jdaggett@529 | 2614 | @font-face { |
jdaggett@529 | 2615 | font-family: JapaneseWithGentium; |
jdaggett@529 | 2616 | src: url(../fonts/Gentium.ttf); |
jdaggett@529 | 2617 | unicode-range: U+0-2FF; |
jdaggett@529 | 2618 | } |
jdaggett@529 | 2619 | </pre> |
jdaggett@529 | 2620 | </div> |
jdaggett@1148 | 2621 | |
jdaggett@1148 | 2622 | <div class=example> |
jdaggett@1148 | 2623 | <p>Consider a family constructed to optimize bandwidth by separating out |
jdaggett@1148 | 2624 | Latin, Japanese and other characters into different font files:</p> |
jdaggett@1148 | 2625 | |
jdaggett@1148 | 2626 | <pre> |
jdaggett@1148 | 2627 | /* fallback font - size: 4.5MB */ |
jdaggett@1148 | 2628 | @font-face { |
jdaggett@1148 | 2629 | font-family: DroidSans; |
jdaggett@1148 | 2630 | src: url(DroidSansFallback.ttf); |
jdaggett@1148 | 2631 | /* no range specified, defaults to entire range */ |
jdaggett@1148 | 2632 | } |
jdaggett@1148 | 2633 | |
jdaggett@1148 | 2634 | /* Japanese glyphs - size: 1.2MB */ |
jdaggett@1148 | 2635 | @font-face { |
jdaggett@1148 | 2636 | font-family: DroidSans; |
jdaggett@1148 | 2637 | src: url(DroidSansJapanese.ttf); |
jdaggett@1148 | 2638 | unicode-range: U+3000-9FFF, U+ff??; |
jdaggett@1148 | 2639 | } |
jdaggett@1148 | 2640 | |
jdaggett@1148 | 2641 | /* Latin, Greek, Cyrillic along with some |
jdaggett@1148 | 2642 | punctuation and symbols - size: 190KB */ |
jdaggett@1148 | 2643 | @font-face { |
jdaggett@1148 | 2644 | font-family: DroidSans; |
jdaggett@1148 | 2645 | src: url(DroidSans.ttf); |
jdaggett@1148 | 2646 | unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300; |
jdaggett@1148 | 2647 | } |
jdaggett@1148 | 2648 | </pre> |
jdaggett@1148 | 2649 | |
jdaggett@1148 | 2650 | <p>For simple Latin text, only the font for Latin characters is |
jdaggett@1148 | 2651 | downloaded:</p> |
jdaggett@1148 | 2652 | |
jdaggett@1148 | 2653 | <pre> |
jdaggett@1148 | 2654 | body { font-family: DroidSans; } |
jdaggett@1148 | 2655 | |
jdaggett@1148 | 2656 | <p>This is that</p> |
jdaggett@1148 | 2657 | </pre> |
jdaggett@1148 | 2658 | |
jdaggett@1148 | 2659 | <p>In this case the user agent first checks the unicode-range for the font |
jdaggett@1148 | 2660 | containing Latin characters (DroidSans.ttf). Since all the characters |
jdaggett@1148 | 2661 | above are in the range U+0-5FF, the user agent downloads the font and |
jdaggett@1148 | 2662 | renders the text with that font.</p> |
jdaggett@1148 | 2663 | |
jdaggett@1148 | 2664 | <p>Next, consider text that makes use of an arrow character (⇨):</p> |
jdaggett@1148 | 2665 | |
jdaggett@1148 | 2666 | <pre> |
jdaggett@1148 | 2667 | <p>This &#x21e8; that<p> |
jdaggett@1148 | 2668 | </pre> |
jdaggett@1148 | 2669 | |
jdaggett@1148 | 2670 | <p>The user agent again first checks the unicode-range of the font |
jdaggett@1149 | 2671 | containing Latin characters. Since U+2000-2300 includes the arrow code |
jdaggett@1149 | 2672 | point (U+21E8), the user agent downloads the font. For this character |
jdaggett@1148 | 2673 | however the Latin font does not have a matching glyph, so the effective |
jdaggett@1149 | 2674 | unicode-range used for font matching excludes this code point. Next, the |
jdaggett@1148 | 2675 | user agent evaluates the Japanese font. The unicode-range for the |
jdaggett@1148 | 2676 | Japanese font, U+3000-9FFF and U+ff??, does not include U+21E8, so the |
jdaggett@1662 | 2677 | user agent does not download the Japanese font. Next the fallback font is |
jdaggett@7096 | 2678 | considered. The <code>@font-face</code> rule for the fallback font does |
jdaggett@7096 | 2679 | not define unicode-range so its value defaults to the range of all |
jdaggett@7096 | 2680 | Unicode code points. The fallback font is downloaded and used to render |
jdaggett@7096 | 2681 | the arrow character.</p> |
jdaggett@1148 | 2682 | </div> |
jdaggett@890 | 2683 | |
jdaggett@1732 | 2684 | <h3 id=font-rend-desc><span class=secno>4.6 </span>Font features: the <a |
jdaggett@1662 | 2685 | href="#descdef-font-variant">font-variant</a> and <a |
jdaggett@1662 | 2686 | href="#descdef-font-feature-settings">font-feature-settings</a> |
jdaggett@1662 | 2687 | descriptors</h3> |
jdaggett@1662 | 2688 | |
jdaggett@1662 | 2689 | <table class=descdef> |
jdaggett@1662 | 2690 | <tbody> |
jdaggett@1662 | 2691 | <tr> |
jdaggett@1662 | 2692 | <td>Name: |
jdaggett@1662 | 2693 | |
jdaggett@7060 | 2694 | <td><dfn id=descdef-font-variant title="font-variant |
jdaggett@7060 | 2695 | (descriptor)">font-variant</dfn> |
jdaggett@1662 | 2696 | |
jdaggett@1662 | 2697 | <tr> |
jdaggett@1662 | 2698 | <td>Value: |
jdaggett@1662 | 2699 | |
jdaggett@3460 | 2700 | <td>normal | [ <common-lig-values> || |
jdaggett@3460 | 2701 | <discretionary-lig-values> || <historical-lig-values> || |
jdaggett@3460 | 2702 | <contextual-alt-values> || stylistic(<feature-value-name>) |
jdaggett@5833 | 2703 | || historical-forms || styleset(<feature-value-name>#) || |
jdaggett@5833 | 2704 | character-variant(<feature-value-name>#) || |
jdaggett@5833 | 2705 | swash(<feature-value-name>) || |
jdaggett@3460 | 2706 | ornaments(<feature-value-name>) || |
jdaggett@4545 | 2707 | annotation(<feature-value-name>) || [ small-caps | all-small-caps |
jdaggett@6648 | 2708 | | petite-caps | all-petite-caps | unicase | titling-caps ] || |
jdaggett@3460 | 2709 | <numeric-figure-values> || <numeric-spacing-values> || |
jdaggett@3638 | 2710 | <numeric-fraction-values> || ordinal || slashed-zero || |
jdaggett@3638 | 2711 | <east-asian-variant-values> || <east-asian-width-values> || |
jdaggett@3638 | 2712 | ruby ] |
jdaggett@1662 | 2713 | |
jdaggett@1662 | 2714 | <tr> |
jdaggett@1662 | 2715 | <td><em>Initial:</em> |
jdaggett@1662 | 2716 | |
jdaggett@1662 | 2717 | <td>normal |
jdaggett@1662 | 2718 | </table> |
jdaggett@1662 | 2719 | |
jdaggett@1662 | 2720 | <table class=descdef> |
jdaggett@1662 | 2721 | <tbody> |
jdaggett@1662 | 2722 | <tr> |
jdaggett@1662 | 2723 | <td>Name: |
jdaggett@1662 | 2724 | |
jdaggett@7060 | 2725 | <td><dfn id=descdef-font-feature-settings title="font-feature-settings |
jdaggett@7060 | 2726 | (descriptor)">font-feature-settings</dfn> |
jdaggett@1662 | 2727 | |
jdaggett@1662 | 2728 | <tr> |
jdaggett@1662 | 2729 | <td>Value: |
jdaggett@1662 | 2730 | |
jdaggett@5833 | 2731 | <td>normal | <feature-tag-value># |
jdaggett@1662 | 2732 | |
jdaggett@1662 | 2733 | <tr> |
jdaggett@1662 | 2734 | <td><em>Initial:</em> |
jdaggett@1662 | 2735 | |
jdaggett@1662 | 2736 | <td>normal |
jdaggett@1662 | 2737 | </table> |
jdaggett@1662 | 2738 | |
jdaggett@1662 | 2739 | <p>These descriptors define settings that apply when the font defined by an |
jdaggett@7096 | 2740 | <code>@font-face</code> rule is rendered. They do not affect font |
jdaggett@7096 | 2741 | selection. Values are identical to those defined for the corresponding |
jdaggett@7096 | 2742 | ‘<a href="#propdef-font-variant"><code |
jdaggett@4624 | 2743 | class=property>font-variant</code></a>’ and ‘<a |
jdaggett@4624 | 2744 | href="#propdef-font-feature-settings"><code |
jdaggett@4624 | 2745 | class=property>font-feature-settings</code></a>’ properties defined |
jdaggett@4624 | 2746 | below except that the value ‘<code class=property>inherit</code>’ is |
jdaggett@4624 | 2747 | omitted. When multiple font feature descriptors or properties are used, |
jdaggett@4624 | 2748 | the cumulative effect on text rendering is described below. |
jdaggett@1662 | 2749 | |
jdaggett@2563 | 2750 | <h3 id=font-face-loading><span class=secno>4.7 </span>Font loading |
jdaggett@2563 | 2751 | guidelines</h3> |
jdaggett@2563 | 2752 | |
jdaggett@7096 | 2753 | <p>The <code>@font-face</code> rule is designed to allow lazy loading of |
jdaggett@7096 | 2754 | fonts, fonts are only downloaded when needed for use within a document. A |
jdaggett@7096 | 2755 | stylesheet can include <code>@font-face</code> rules for a library of |
jdaggett@7096 | 2756 | fonts of which only a select set are used; user agents must only download |
jdaggett@7096 | 2757 | those fonts that are referred to within the style rules applicable to a |
jdaggett@7096 | 2758 | given page. User agents that download all fonts defined in |
jdaggett@7096 | 2759 | <code>@font-face</code> rules without considering whether those fonts are |
jdaggett@7096 | 2760 | in fact used within a page are considered non-conformant. In cases where a |
jdaggett@7096 | 2761 | font might be downloaded in character fallback cases, user agents may |
jdaggett@7096 | 2762 | download a font if it's listed in a font list but is not actually used for |
jdaggett@7096 | 2763 | a given text run. |
jdaggett@2563 | 2764 | |
jdaggett@2563 | 2765 | <pre> |
jdaggett@2563 | 2766 | @font-face { |
jdaggett@2563 | 2767 | font-family: GeometricModern; |
jdaggett@2563 | 2768 | src: url(font.ttf); |
jdaggett@2563 | 2769 | } |
jdaggett@2563 | 2770 | |
jdaggett@2563 | 2771 | p { |
jdaggett@2563 | 2772 | /* font will be downloaded for pages with p elements */ |
jdaggett@2563 | 2773 | font-family: GeometricModern, sans-serif; |
jdaggett@2563 | 2774 | } |
jdaggett@2563 | 2775 | |
jdaggett@2563 | 2776 | h2 { |
jdaggett@2563 | 2777 | /* font may be downloaded for pages with h2 elements, even if Futura is available locally */ |
jdaggett@2563 | 2778 | font-family: Futura, GeometricModern, sans-serif; |
jdaggett@2563 | 2779 | } |
jdaggett@2563 | 2780 | </pre> |
jdaggett@2563 | 2781 | |
jdaggett@2563 | 2782 | <p>In cases where textual content is loaded before downloadable fonts are |
jdaggett@2563 | 2783 | available, user agents may render text as it would be rendered if |
jdaggett@2563 | 2784 | downloadable font resources are not available or they may render text |
jdaggett@2563 | 2785 | transparently with fallback fonts to avoid a flash of text using a |
jdaggett@2563 | 2786 | fallback font. In cases where the font download fails user agents must |
jdaggett@2563 | 2787 | display text, simply leaving transparent text is considered non-conformant |
jdaggett@2563 | 2788 | behavior. Authors are advised to use fallback fonts in their font lists |
jdaggett@2563 | 2789 | that closely match the vertical metrics of the downloadable fonts to avoid |
jdaggett@2563 | 2790 | large page reflows where possible. |
jdaggett@2563 | 2791 | |
jdaggett@2737 | 2792 | <h3 id=same-origin-restriction><span class=secno>4.8 </span>Same-origin |
jdaggett@2737 | 2793 | restriction for fonts</h3> |
jdaggett@2737 | 2794 | |
jdaggett@2740 | 2795 | <h4 id=default-same-origin-restriction><span class=secno>4.8.1 |
jdaggett@2740 | 2796 | </span>Default same-origin restriction</h4> |
jdaggett@2740 | 2797 | |
jdaggett@2737 | 2798 | <p>User agents must implement a same-origin restriction when loading fonts |
jdaggett@7096 | 2799 | via the <code>@font-face</code> mechanism. This restriction limits the |
jdaggett@7096 | 2800 | loading of fonts for a given document to fonts loaded from the same |
jdaggett@7096 | 2801 | origin. Fonts can only be loaded via the same host, port, and method |
jdaggett@7096 | 2802 | combination as the containing document, using the <a |
jdaggett@7179 | 2803 | href="http://www.w3.org/TR/html5/browsers.html#origin">origin matching |
jdaggett@2737 | 2804 | algorithm</a> described in the <a href="#HTML5" |
jdaggett@2737 | 2805 | rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> specification. The origin of |
jdaggett@7096 | 2806 | the stylesheet containing <code>@font-face</code> rules is not used when |
jdaggett@7096 | 2807 | deciding whether a font is same origin or not, only the origin of the |
jdaggett@7096 | 2808 | containing document is used. The restriction applies to all font types. |
jdaggett@2737 | 2809 | |
jdaggett@2737 | 2810 | <p>Given a document located at http://example.com/page.html, fonts defined |
jdaggett@4624 | 2811 | with ‘<a href="#descdef-src"><code class=property>src</code></a>’ |
jdaggett@2737 | 2812 | definitions considered cross origin must not be loaded: |
jdaggett@2737 | 2813 | |
jdaggett@2737 | 2814 | <pre> |
jdaggett@2737 | 2815 | /* same origin (i.e. domain, protocol, port match document) */ |
jdaggett@2737 | 2816 | src: url(fonts/simple.ttf); |
jdaggett@2737 | 2817 | src: url(//fonts/simple.ttf); |
jdaggett@2737 | 2818 | |
jdaggett@2737 | 2819 | /* cross origin, different protocol */ |
jdaggett@2737 | 2820 | src: url(https://example.com/fonts/simple.ttf); |
jdaggett@2737 | 2821 | |
jdaggett@2737 | 2822 | /* cross origin, different domain */ |
jdaggett@2737 | 2823 | src: url(http://another.example.com/fonts/simple.ttf); |
jdaggett@2737 | 2824 | </pre> |
jdaggett@2737 | 2825 | |
jdaggett@2740 | 2826 | <h4 id=allowing-cross-origin-font-loading><span class=secno>4.8.2 |
jdaggett@2740 | 2827 | </span>Allowing cross-origin font loading</h4> |
jdaggett@2740 | 2828 | |
jdaggett@2737 | 2829 | <p>User agents must also implement the ability to relax this restriction |
jdaggett@2737 | 2830 | using cross-site origin controls <a href="#CORS" |
jdaggett@2737 | 2831 | rel=biblioentry>[CORS]<!--{{!CORS}}--></a>. Sites can explicitly allow |
jdaggett@2737 | 2832 | cross-site downloading of font data using the |
jdaggett@2737 | 2833 | <code>Access-Control-Allow-Origin</code> HTTP header. |
jdaggett@2737 | 2834 | |
jdaggett@6699 | 2835 | <h2 id=font-matching-algorithm><span class=secno>5 </span>Font Matching |
jdaggett@6699 | 2836 | Algorithm</h2> |
jdaggett@484 | 2837 | |
jdaggett@2457 | 2838 | <p>The algorithm below describes how fonts are associated with individual |
jdaggett@2457 | 2839 | runs of text. For each character in the run a font family is chosen and a |
jdaggett@2457 | 2840 | particular font face is selected containing a glyph for that character. |
jdaggett@2457 | 2841 | |
jdaggett@2457 | 2842 | <h3 id=font-style-matching><span class=secno>5.1 </span>Matching font |
jdaggett@2457 | 2843 | styles</h3> |
jdaggett@2457 | 2844 | |
jdaggett@6701 | 2845 | <p>The procedure for choosing fonts consists of iterating over the font |
jdaggett@531 | 2846 | families determined by the font-family property, selecting a font face |
jdaggett@531 | 2847 | with the appropriate style based on other font properties and then |
jdaggett@6701 | 2848 | determining whether a glyph exists for a given character. Codepoint |
jdaggett@6701 | 2849 | sequences consisting of a base character followed by a sequence of |
jdaggett@6701 | 2850 | combining characters are treated slightly differently, see the section on |
jdaggett@6701 | 2851 | <a href="#cluster-matching">cluster matching</a> below. |
jdaggett@531 | 2852 | |
jdaggett@7232 | 2853 | <p>For this procedure, the <dfn id=default-face>default face</dfn> for a |
jdaggett@7232 | 2854 | given font family is defined to be the face that would be selected if all |
jdaggett@7232 | 2855 | font style properties were set to their initial value. |
jdaggett@7232 | 2856 | |
jdaggett@531 | 2857 | <ol id=fontmatchingalg> |
jdaggett@2457 | 2858 | <li>Using the computed font property values for a given element, the user |
jdaggett@2457 | 2859 | agent starts with the first family name in the fontlist specified by the |
jdaggett@4624 | 2860 | <span class=property>‘<a href="#descdef-font-family"><code |
jdaggett@4624 | 2861 | class=property>font-family</code></a>’</span> property. |
jdaggett@2457 | 2862 | |
jdaggett@2457 | 2863 | <li>If the family name is unquoted and is a generic family name, the user |
jdaggett@2457 | 2864 | agent looks up the appropriate font family name to be used. User agents |
jdaggett@2457 | 2865 | may choose the generic font family to use based on the language of the |
jdaggett@2457 | 2866 | containing element or the Unicode range of the character. |
jdaggett@2457 | 2867 | |
jdaggett@2457 | 2868 | <li>For other family names, the user agent attempts to find the family |
jdaggett@7096 | 2869 | name among fonts defined via <code>@font-face</code> rules and then among |
jdaggett@7096 | 2870 | available system fonts, matching names with a case-insensitive |
jdaggett@7096 | 2871 | comparison. On systems containing fonts with multiple localized font |
jdaggett@7096 | 2872 | family names, user agents must match any of these names independent of |
jdaggett@7096 | 2873 | the underlying system locale or platform API used. If a font family |
jdaggett@7096 | 2874 | defined via <code>@font-face</code> rules contains only invalid font |
jdaggett@7096 | 2875 | data, it should be considered as if a font was present but contained an |
jdaggett@7096 | 2876 | empty character map; matching a platform font with the same name must not |
jdaggett@7096 | 2877 | occur in this case. |
jdaggett@7229 | 2878 | <p class=issue>Need to define explicitly the case-insensitive matching |
jdaggett@7229 | 2879 | algorithm for matching font family names</p> |
jdaggett@2457 | 2880 | |
jdaggett@2457 | 2881 | <li>If a font family match occurs, the user agent assembles the set of |
jdaggett@6701 | 2882 | font faces in that family and then narrows the set to a single face using |
jdaggett@6701 | 2883 | other font properties in the order given below: |
jdaggett@2457 | 2884 | <ol id=fontstylematchingalg> |
jdaggett@7060 | 2885 | <li><span class=property>‘<a href="#propdef-font-stretch"><code |
jdaggett@4624 | 2886 | class=property>font-stretch</code></a>’</span> is tried first. If the |
jdaggett@4624 | 2887 | matching set contains faces with width values matching the ‘<a |
jdaggett@7060 | 2888 | href="#propdef-font-stretch"><code |
jdaggett@4624 | 2889 | class=property>font-stretch</code></a>’ value, faces with other width |
jdaggett@4624 | 2890 | values are removed from the matching set. If there is no face that |
jdaggett@4624 | 2891 | exactly matches the width value the nearest width is used instead. If |
jdaggett@7060 | 2892 | the value of ‘<a href="#propdef-font-stretch"><code |
jdaggett@5809 | 2893 | class=property>font-stretch</code></a>’ is ‘<a |
jdaggett@5809 | 2894 | href="#normal2"><code class=property>normal</code></a>’ or one of the |
jdaggett@5809 | 2895 | condensed values, narrower width values are checked first, then wider |
jdaggett@7060 | 2896 | values. If the value of ‘<a href="#propdef-font-stretch"><code |
jdaggett@4624 | 2897 | class=property>font-stretch</code></a>’ is one of the expanded |
jdaggett@4624 | 2898 | values, wider values are checked first, followed by narrower values. |
jdaggett@4624 | 2899 | Once the closest matching width has been determined by this process, |
jdaggett@4624 | 2900 | faces with other widths are removed from the matching set. |
jdaggett@4624 | 2901 | |
jdaggett@7060 | 2902 | <li><span class=property>‘<a href="#propdef-font-style"><code |
jdaggett@4624 | 2903 | class=property>font-style</code></a>’</span> is tried next. If the |
jdaggett@7060 | 2904 | value of ‘<a href="#propdef-font-style"><code |
jdaggett@4624 | 2905 | class=property>font-style</code></a>’ is ‘<code |
jdaggett@2457 | 2906 | class=property>italic</code>’, italic faces are checked first, then |
jdaggett@2457 | 2907 | oblique, then normal faces. If the value is ‘<code |
jdaggett@2457 | 2908 | class=property>oblique</code>’, oblique faces are checked first, then |
jdaggett@5809 | 2909 | italic faces and then normal faces. If the value is ‘<a |
jdaggett@5809 | 2910 | href="#normal2"><code class=property>normal</code></a>’, normal faces |
jdaggett@5809 | 2911 | are checked first, then oblique faces, then italic faces. Faces with |
jdaggett@5809 | 2912 | other style values are excluded from the matching set. User agents are |
jdaggett@5809 | 2913 | permitted to distinguish between italic and oblique faces within |
jdaggett@5809 | 2914 | platform font families but this is not required, they may treat all |
jdaggett@5809 | 2915 | italic or oblique faces as italic faces. However, within font families |
jdaggett@7096 | 2916 | defined via <code>@font-face</code> rules, italic and oblique faces |
jdaggett@7096 | 2917 | must be distinguished using the value of the ‘<a |
jdaggett@7060 | 2918 | href="#propdef-font-style"><code |
jdaggett@4624 | 2919 | class=property>font-style</code></a>’ descriptor. |
jdaggett@4624 | 2920 | |
jdaggett@7060 | 2921 | <li><span class=property>‘<a href="#propdef-font-weight"><code |
jdaggett@4624 | 2922 | class=property>font-weight</code></a>’</span> is matched next, it |
jdaggett@4624 | 2923 | will always reduce the matching set to a single font face. If |
jdaggett@2457 | 2924 | bolder/lighter relative weights are used, the effective weight is |
jdaggett@2457 | 2925 | calculated based on the inherited weight value, as described in the |
jdaggett@7060 | 2926 | definition of the ‘<a href="#propdef-font-weight"><code |
jdaggett@4624 | 2927 | class=property>font-weight</code></a>’ property. Given the desired |
jdaggett@4624 | 2928 | weight and the weights of faces in the matching set after the steps |
jdaggett@4624 | 2929 | above, if the desired weight is available that face matches. Otherwise, |
jdaggett@4624 | 2930 | a weight is chosen using the rules below: |
jdaggett@531 | 2931 | <ul> |
jdaggett@531 | 2932 | <li>If the desired weight is less than 400, weights below the desired |
jdaggett@531 | 2933 | weight are checked in descending order followed by weights above the |
jdaggett@531 | 2934 | desired weight in ascending order until a match is found. |
jdaggett@531 | 2935 | |
jdaggett@531 | 2936 | <li>If the desired weight is greater than 500, weights above the |
jdaggett@531 | 2937 | desired weight are checked in ascending order followed by weights |
jdaggett@531 | 2938 | below the desired weight in descending order until a match is found. |
jdaggett@531 | 2939 | |
jdaggett@531 | 2940 | <li>If the desired weight is 400, 500 is checked first and then the |
jdaggett@531 | 2941 | rule for desired weights less than 400 is used. |
jdaggett@531 | 2942 | |
jdaggett@531 | 2943 | <li>If the desired weight is 500, 400 is checked first and then the |
jdaggett@532 | 2944 | rule for desired weights less than 400 is used. |
jdaggett@531 | 2945 | </ul> |
jdaggett@531 | 2946 | |
jdaggett@4624 | 2947 | <li><span class=property>‘<a href="#propdef-font-size"><code |
jdaggett@4624 | 2948 | class=property>font-size</code></a>’</span> must be matched within a |
jdaggett@4624 | 2949 | UA-dependent margin of tolerance. (Typically, sizes for scalable fonts |
jdaggett@4624 | 2950 | are rounded to the nearest whole pixel, while the tolerance for |
jdaggett@4624 | 2951 | bitmapped fonts could be as large as 20%.) Further computations, e.g., |
jdaggett@4624 | 2952 | by ‘<code class=property>em</code>’ values in other properties, are |
jdaggett@4624 | 2953 | based on the <span class=property>‘<a href="#propdef-font-size"><code |
jdaggett@4624 | 2954 | class=property>font-size</code></a>’</span> value that is used, not |
jdaggett@4624 | 2955 | the one that is specified. |
jdaggett@531 | 2956 | </ol> |
jdaggett@531 | 2957 | |
jdaggett@7232 | 2958 | <li> |
jdaggett@7232 | 2959 | <p>If no matching face exists or the matched face does not contain a |
jdaggett@7232 | 2960 | glyph for the character to be rendered, the next family name is selected |
jdaggett@7232 | 2961 | and the previous two steps repeated. Glyphs from other faces in the |
jdaggett@7232 | 2962 | family are not considered. The only exception is that user agents may |
jdaggett@7232 | 2963 | optionally substitute a synthetic version of the <a |
jdaggett@7232 | 2964 | href="#default-face"><em>default face</em></a> if that face supports a |
jdaggett@7232 | 2965 | given glyph (e.g. a synthetic italic version of the regular face may be |
jdaggett@7232 | 2966 | used if the italic face doesn't support glyphs for Arabic).</p> |
jdaggett@7232 | 2967 | |
jdaggett@7232 | 2968 | <p>If the matched font is defined via an <code>@font-face</code> rule and |
jdaggett@7232 | 2969 | needs to be downloaded, the font resource is downloaded. While the |
jdaggett@7232 | 2970 | download occurs, the user agent can either wait until the font is |
jdaggett@7232 | 2971 | downloaded or render once with substituted font metrics and render again |
jdaggett@7232 | 2972 | once the font is downloaded.</p> |
jdaggett@531 | 2973 | |
jdaggett@531 | 2974 | <li>If there are no more font families to be evaluated and no matching |
jdaggett@2457 | 2975 | face has been found, then the user agent performs a <em>system font |
jdaggett@2457 | 2976 | fallback</em> procedure to find the best match for the character to be |
jdaggett@2457 | 2977 | rendered. The result of this procedure may vary across user agents. |
jdaggett@531 | 2978 | |
jdaggett@531 | 2979 | <li>If a particular character cannot be displayed using any font, the user |
jdaggett@531 | 2980 | agent should indicate by some means that a character is not being |
jdaggett@2457 | 2981 | displayed, displaying either a symbolic representation of the missing |
jdaggett@2457 | 2982 | glyph (e.g. using a <a |
jdaggett@2457 | 2983 | href="http://en.wikipedia.org/wiki/Last_resort_font">Last Resort |
jdaggett@2457 | 2984 | Font</a>) or using the missing character glyph from a default font. |
jdaggett@512 | 2985 | </ol> |
jdaggett@2457 | 2986 | |
jdaggett@6701 | 2987 | <h3 id=cluster-matching><span class=secno>5.2 </span>Cluster matching</h3> |
jdaggett@6701 | 2988 | |
jdaggett@6701 | 2989 | <p>When text contains characters such as combining diacritics, ideally the |
jdaggett@6701 | 2990 | base character should be rendered using the same font as the diacritic, |
jdaggett@6701 | 2991 | this assures proper placement of the diacritic. For this reason, the font |
jdaggett@6701 | 2992 | matching algorithm for clusters is more specialized than the general case |
jdaggett@6701 | 2993 | of matching a single character by itself. For sequences containing |
jdaggett@6701 | 2994 | variation selectors, which indicate the precise glyph to be used for a |
jdaggett@6701 | 2995 | given character, user agents always attempt system font fallback to find |
jdaggett@6701 | 2996 | the appropriate glyph before using the default glyph of the base |
jdaggett@6701 | 2997 | character. |
jdaggett@6701 | 2998 | |
jdaggett@7020 | 2999 | <p>A font is considered to <em>support</em> a given character if (1) the |
jdaggett@7020 | 3000 | character is contained in the font's character map and (2) if required by |
jdaggett@7020 | 3001 | the containing script, shaping information is available for that |
jdaggett@7020 | 3002 | character. Some legacy fonts may include a given character in the |
jdaggett@7020 | 3003 | character map but lack the shaping information (e.g. <a |
jdaggett@7020 | 3004 | href="http://www.microsoft.com/typography/otspec/ttochap1.htm">OpenType |
jdaggett@7020 | 3005 | layout tables</a> or <a |
jdaggett@7103 | 3006 | href="http://scripts.sil.org/cms/scripts/page.php?site_id=projects&item_id=graphite_techAbout">Graphite |
jdaggett@7020 | 3007 | tables</a>) necessary for correctly rendering text runs containing that |
jdaggett@7020 | 3008 | character. |
jdaggett@7020 | 3009 | |
jdaggett@6701 | 3010 | <p>A sequence of codepoints containing combining diacritics or other |
jdaggett@6701 | 3011 | modifiers is termed a grapheme cluster (see <a href="#CSS3TEXT" |
jdaggett@6701 | 3012 | rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a> for a more complete |
jdaggett@6701 | 3013 | description). For a given cluster containing a base character, <em>b</em> |
jdaggett@6701 | 3014 | and a sequence of combining characters <em>c1, c2…</em>, the entire |
jdaggett@6701 | 3015 | cluster is matched using these steps: |
jdaggett@6701 | 3016 | |
jdaggett@6701 | 3017 | <ol> |
jdaggett@6701 | 3018 | <li>For each family in the font list, a face is chosen using the style |
jdaggett@6701 | 3019 | selection rules defined in the previous section. |
jdaggett@6701 | 3020 | <ol> |
jdaggett@7020 | 3021 | <li>If all characters in the sequence <em>b + c1 + c2 …</em> are |
jdaggett@7021 | 3022 | completely supported by the font, select this font for the sequence. |
jdaggett@6701 | 3023 | |
jdaggett@6701 | 3024 | <li>If a sequence of multiple codepoints is canonically equivalent to a |
jdaggett@7021 | 3025 | single character and the font supports that character, select this font |
jdaggett@7021 | 3026 | for the sequence. |
jdaggett@6701 | 3027 | </ol> |
jdaggett@6701 | 3028 | |
jdaggett@6701 | 3029 | <li>If no font was found in the font list in step 1: |
jdaggett@6701 | 3030 | <ol> |
jdaggett@6701 | 3031 | <li>If <em>c1</em> is a variation selector, system fallback must be used |
jdaggett@6701 | 3032 | to find a font that supports the full sequence of <em>b + c1</em>. If |
jdaggett@6701 | 3033 | no font on the system supports the full sequence, match the single |
jdaggett@6701 | 3034 | character <em>b</em> using the normal procedure for matching single |
jdaggett@6701 | 3035 | characters and ignore the variation selector. Note: a sequence with |
jdaggett@6701 | 3036 | more than one variation selector is treated as an encoding error and |
jdaggett@6701 | 3037 | the trailing selectors are ignored. |
jdaggett@6701 | 3038 | |
jdaggett@6701 | 3039 | <li>Otherwise, the user agent may optionally use system font fallback to |
jdaggett@6701 | 3040 | match a font that supports the entire cluster. |
jdaggett@6701 | 3041 | </ol> |
jdaggett@6701 | 3042 | |
jdaggett@6701 | 3043 | <li>If no font is found in step 2, use the matching sequence from step 1 |
jdaggett@6701 | 3044 | to determine the longest sequence that is completely matched by a font in |
jdaggett@6701 | 3045 | the font list and attempt to match the remaining combining characters |
jdaggett@6701 | 3046 | separately using the rules for single characters. |
jdaggett@6701 | 3047 | </ol> |
jdaggett@6701 | 3048 | |
jdaggett@6701 | 3049 | <h3 id=char-handling-issues><span class=secno>5.3 </span>Character handling |
jdaggett@2457 | 3050 | issues</h3> |
jdaggett@2457 | 3051 | |
jdaggett@2461 | 3052 | <p>The procedure above is always performed on text runs containing Unicode |
jdaggett@2461 | 3053 | characters, documents using legacy encodings are assumed to have been |
jdaggett@2461 | 3054 | transcoded before matching fonts. For fonts containing character maps for |
jdaggett@2461 | 3055 | both legacy encodings and Unicode, the contents of the legacy encoding |
jdaggett@2461 | 3056 | character map must have no effect on the results of the font matching |
jdaggett@2461 | 3057 | process. |
jdaggett@2461 | 3058 | |
jdaggett@2461 | 3059 | <p>The font matching process does not assume that text runs are in either |
jdaggett@2461 | 3060 | normalized or denormalized form (see <a href="#CHARMOD-NORM" |
jdaggett@3042 | 3061 | rel=biblioentry>[CHARMOD-NORM]<!--{{CHARMOD-NORM}}--></a> for more |
jdaggett@2461 | 3062 | details). Layout engines often convert base character plus combining |
jdaggett@6701 | 3063 | character sequences into precomposed characters if they exist. The font |
jdaggett@6701 | 3064 | matching algorithm outlined here supports both ways and fonts can |
jdaggett@6701 | 3065 | generally support either but variations can occur. Authors should always |
jdaggett@6701 | 3066 | tailor their choice of fonts to their content, including whether that |
jdaggett@6701 | 3067 | content contains normalized or denormalized character streams. |
jdaggett@2457 | 3068 | |
jdaggett@2457 | 3069 | <p>If a given character is a Private-Use Area Unicode codepoint and none of |
jdaggett@2457 | 3070 | the fonts in the fontlist contain a glyph for that codepoint, user agents |
jdaggett@2457 | 3071 | must display some form of missing glyph symbol for that character rather |
jdaggett@2457 | 3072 | than attempting system font fallback for that codepoint. When matching the |
jdaggett@2457 | 3073 | replacement character U+FFFD, user agents may skip the font matching |
jdaggett@2457 | 3074 | process and immediately display some form of missing glyph symbol, they |
jdaggett@2457 | 3075 | are not required to display the glyph from the font that would be selected |
jdaggett@2457 | 3076 | by the font matching process. |
jdaggett@2457 | 3077 | |
jdaggett@2457 | 3078 | <p>In general, the fonts for a given family will all have the same or |
jdaggett@2457 | 3079 | similar character maps. The process outlined here is designed to handle |
jdaggett@2457 | 3080 | even font families containing faces with widely variant character maps. |
jdaggett@2457 | 3081 | However, authors are cautioned that the use of such families can lead to |
jdaggett@6701 | 3082 | unexpected results. |
jdaggett@2457 | 3083 | |
jdaggett@2457 | 3084 | <p>Optimizations of this process are allowed provided that an |
jdaggett@2457 | 3085 | implementation behaves as if the algorithm had been followed exactly. |
jdaggett@2457 | 3086 | Matching occurs in a well-defined order to insure that the results are as |
jdaggett@2457 | 3087 | consistent as possible across user agents, given an identical set of |
jdaggett@2509 | 3088 | available fonts and rendering technology. |
jdaggett@2509 | 3089 | |
jdaggett@6701 | 3090 | <h3 id=font-matching-changes><span class=secno>5.4 </span>Font matching |
jdaggett@2509 | 3091 | changes since CSS 2.1</h3> |
jdaggett@2509 | 3092 | |
jdaggett@2509 | 3093 | <p>The algorithm above is different from CSS 2.1 in a number of key places. |
jdaggett@2509 | 3094 | These changes were made to better reflect actual font matching behavior |
jdaggett@2509 | 3095 | across user agent implementations. |
jdaggett@2509 | 3096 | |
jdaggett@2509 | 3097 | <p>Differences compared to the font matching algorithm in CSS 2.1: |
jdaggett@2509 | 3098 | |
jdaggett@2509 | 3099 | <ul> |
jdaggett@2509 | 3100 | <li>The algorithm includes font-stretch matching. |
jdaggett@2509 | 3101 | |
jdaggett@2509 | 3102 | <li>All possible font-style matching scenarios are delineated. |
jdaggett@2509 | 3103 | |
jdaggett@2509 | 3104 | <li>Small-caps fonts are not matched as part of the font matching process, |
jdaggett@2509 | 3105 | they are now handled via font features. |
jdaggett@2509 | 3106 | |
jdaggett@2509 | 3107 | <li>Unicode variation selector matching is required. |
jdaggett@6701 | 3108 | |
jdaggett@6701 | 3109 | <li>Cluster sequences are matched as a unit. |
jdaggett@2509 | 3110 | </ul> |
jdaggett@531 | 3111 | |
jdaggett@6701 | 3112 | <h3 id=font-matching-examples><span class=secno>5.5 </span>Font matching |
jdaggett@6701 | 3113 | examples</h3> |
jdaggett@6701 | 3114 | |
jdaggett@531 | 3115 | <div class=example> |
jdaggett@531 | 3116 | <p>It's useful to note that the CSS selector syntax may be used to create |
jdaggett@531 | 3117 | language-sensitive typography. For example, some Chinese and Japanese |
jdaggett@1149 | 3118 | characters are unified to have the same Unicode code point, although the |
jdaggett@890 | 3119 | abstract glyphs are not the same in the two languages. |
jdaggett@531 | 3120 | |
jdaggett@531 | 3121 | <pre>*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif; } |
jdaggett@531 | 3122 | *:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif; } |
jdaggett@512 | 3123 | </pre> |
jdaggett@531 | 3124 | |
jdaggett@531 | 3125 | <p>This selects any element that has the given language - Japanese or |
jdaggett@890 | 3126 | Traditional Chinese - and uses the appropriate font. |
jdaggett@512 | 3127 | </div> |
jdaggett@1662 | 3128 | |
jdaggett@6699 | 3129 | <h2 id=font-rend-props><span class=secno>6 </span>Font Feature Properties</h2> |
jdaggett@1662 | 3130 | |
jdaggett@1856 | 3131 | <p>Modern font technologies support a variety of advanced typographic and |
jdaggett@1856 | 3132 | language-specific font features. Using these features, a single font can |
jdaggett@1856 | 3133 | provide glyphs for a wide range of ligatures, contextual and stylistic |
jdaggett@1856 | 3134 | alternates, tabular and old-style figures, small capitals, automatic |
jdaggett@1856 | 3135 | fractions, swashes, and alternates specific to a given language. To allow |
jdaggett@1856 | 3136 | authors control over these font capabilities, the font-variant property |
jdaggett@1856 | 3137 | has been expanded for CSS3, it now functions as a shorthand for a set of |
jdaggett@1856 | 3138 | properties that provide control over stylistic font features. |
jdaggett@1856 | 3139 | |
jdaggett@1856 | 3140 | <h3 id=glyph-selection-positioning><span class=secno>6.1 </span>Glyph |
jdaggett@1856 | 3141 | selection and positioning</h3> |
jdaggett@1856 | 3142 | |
jdaggett@1856 | 3143 | <p>Simple fonts used for displaying Latin text use a very basic processing |
jdaggett@1856 | 3144 | model, fonts contain a character map which maps a given character to a |
jdaggett@1856 | 3145 | glyph for that character. Glyphs for subsequent characters are simply |
jdaggett@1856 | 3146 | placed next in line along a run of text. Font formats such as OpenType and |
jdaggett@1856 | 3147 | AAT (Apple Advanced Typography) use a richer processing model, the glyph |
jdaggett@1856 | 3148 | for a given character can be chosen and positioned not just based on a |
jdaggett@1856 | 3149 | single character, but also based on surrounding characters along with the |
jdaggett@1856 | 3150 | language, script, and features enabled for the text. Font features may be |
jdaggett@1856 | 3151 | required for specific scripts, or recommended as enabled by default or |
jdaggett@1856 | 3152 | they may be stylistic features meant to be used under author control. |
jdaggett@1856 | 3153 | |
jdaggett@1856 | 3154 | <p>For a good visual overview of these features, see the <a |
jdaggett@1856 | 3155 | href="#OPENTYPE-FONT-GUIDE" |
jdaggett@1856 | 3156 | rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>. |
jdaggett@1856 | 3157 | For a detailed description of glyph processing for OpenType fonts, see <a |
jdaggett@1856 | 3158 | href="#WINDOWS-GLYPH-PROC" |
jdaggett@1856 | 3159 | rel=biblioentry>[WINDOWS-GLYPH-PROC]<!--{{WINDOWS-GLYPH-PROC}}--></a>. |
jdaggett@1856 | 3160 | |
jdaggett@6176 | 3161 | <p>Stylistic font features can be classified into two broad categories, |
jdaggett@6177 | 3162 | ones that affect the harmonization of glyph shapes with the surrounding |
jdaggett@6177 | 3163 | context, such as kerning and ligature features, and those such as the |
jdaggett@6177 | 3164 | small-caps, subscript/superscript and alternate features that affect shape |
jdaggett@6177 | 3165 | selection. |
jdaggett@6176 | 3166 | |
jdaggett@1856 | 3167 | <p>The subproperties of font-variant listed below are used to control these |
jdaggett@1856 | 3168 | stylistic font features; they do not control features that are required |
jdaggett@1856 | 3169 | for displaying certain scripts, such as the OpenType features used when |
jdaggett@1856 | 3170 | displaying Arabic or Indic language text. They affect glyph selection and |
jdaggett@1856 | 3171 | positioning, they do not affect font selection as described in the font |
jdaggett@1856 | 3172 | matching section (except in cases required for compatibility with CSS |
jdaggett@1856 | 3173 | 2.1). |
jdaggett@1856 | 3174 | |
jdaggett@1856 | 3175 | <p>To assure consistent behavior across user agents, the equivalent |
jdaggett@1662 | 3176 | OpenType property settings are listed for individual properties and must |
jdaggett@1856 | 3177 | be considered normative. When using other font formats these should be |
jdaggett@1856 | 3178 | used as a guideline to map CSS font feature property values to specific |
jdaggett@1856 | 3179 | font features. |
jdaggett@1856 | 3180 | |
jdaggett@1856 | 3181 | <h3 id=language-specific-support><span class=secno>6.2 |
jdaggett@1856 | 3182 | </span>Language-specific display</h3> |
jdaggett@1856 | 3183 | |
jdaggett@1856 | 3184 | <p>OpenType also supports language-specific glyph selection and |
jdaggett@1856 | 3185 | positioning, so that text can be displayed correctly in cases where the |
jdaggett@1856 | 3186 | language dictates a specific display behavior. Languages often share a |
jdaggett@1856 | 3187 | common script but the shape of certain letters may vary across those |
jdaggett@1856 | 3188 | languages, such as the variations in certain Cyrillic letters used in |
jdaggett@1856 | 3189 | Russian and Bulgarian text. In Latin text, it's common to render "fi" with |
jdaggett@1856 | 3190 | an explicit fi-ligature that lacks a dot on the "i". However, in languages |
jdaggett@1856 | 3191 | such as Turkish which uses both a dotted-i and a dotless-i, it's important |
jdaggett@1856 | 3192 | to not use this ligature or use a specialized version that contains a dot |
jdaggett@2515 | 3193 | over the "i". The example below shows language-specific variations based |
jdaggett@2515 | 3194 | on stylistic traditions found in Spanish, Italian and French orthography: |
jdaggett@2515 | 3195 | |
jdaggett@2515 | 3196 | <div class=featex><img alt="language specific forms, spanish" |
jdaggett@2515 | 3197 | src=locl-1.png></div> |
jdaggett@2515 | 3198 | |
jdaggett@2515 | 3199 | <div class=featex><img alt="language specific forms, italian" |
jdaggett@2515 | 3200 | src=locl-2.png></div> |
jdaggett@2515 | 3201 | |
jdaggett@2515 | 3202 | <div class=featex><img alt="language specific forms, french" |
jdaggett@2515 | 3203 | src=locl-3.png></div> |
jdaggett@1856 | 3204 | |
jdaggett@1856 | 3205 | <p>Users agents are required to infer the OpenType language system from the |
jdaggett@1856 | 3206 | value of the ‘<code class=property>lang</code>’ attribute and use that |
jdaggett@1856 | 3207 | when selecting and positioning glyphs using an OpenType font. If the |
jdaggett@1856 | 3208 | ‘<code class=property>lang</code>’ attribute is not defined, the |
jdaggett@1856 | 3209 | default OpenType language system must be used. |
jdaggett@1662 | 3210 | |
jdaggett@1662 | 3211 | <p>In some cases it may be necessary to explicitly declare the OpenType |
jdaggett@1662 | 3212 | language to be used, for example when displaying text in a given language |
jdaggett@1662 | 3213 | that uses the typographic conventions of another language, or when the |
jdaggett@1662 | 3214 | font does not explicitly support a given language but supports a language |
jdaggett@4624 | 3215 | that shares common typographic conventions. The ‘<a |
jdaggett@4624 | 3216 | href="#propdef-font-language-override"><code |
jdaggett@4624 | 3217 | class=property>font-language-override</code></a>’ property is used for |
jdaggett@4624 | 3218 | this purpose. |
jdaggett@2479 | 3219 | |
jdaggett@7232 | 3220 | <p class=issue>Should user agents be allowed to infer the OpenType language |
jdaggett@2479 | 3221 | or simply use only the default language system?</p> |
jdaggett@1662 | 3222 | <!-- prop: font-kerning --> |
jdaggett@1662 | 3223 | |
jdaggett@1856 | 3224 | <h3 id=font-kerning-prop><span class=secno>6.3 </span>Kerning: the <a |
jdaggett@1662 | 3225 | href="#propdef-font-kerning">font-kerning</a> property</h3> |
jdaggett@1662 | 3226 | |
jdaggett@4624 | 3227 | <table class=propdef id=namefont-kerningvalueauto-normal-noneini> |
jdaggett@1662 | 3228 | <tbody> |
jdaggett@1662 | 3229 | <tr> |
jdaggett@1662 | 3230 | <td>Name: |
jdaggett@1662 | 3231 | |
jdaggett@1662 | 3232 | <td><dfn id=propdef-font-kerning>font-kerning</dfn> |
jdaggett@1662 | 3233 | |
jdaggett@1662 | 3234 | <tr> |
jdaggett@1662 | 3235 | <td>Value: |
jdaggett@1662 | 3236 | |
jdaggett@1856 | 3237 | <td>auto | normal | none |
jdaggett@1662 | 3238 | |
jdaggett@1662 | 3239 | <tr> |
jdaggett@1662 | 3240 | <td>Initial: |
jdaggett@1662 | 3241 | |
jdaggett@1856 | 3242 | <td>auto |
jdaggett@1662 | 3243 | |
jdaggett@1662 | 3244 | <tr> |
jdaggett@1662 | 3245 | <td>Applies to: |
jdaggett@1662 | 3246 | |
jdaggett@1662 | 3247 | <td>all elements |
jdaggett@1662 | 3248 | |
jdaggett@1662 | 3249 | <tr> |
jdaggett@1662 | 3250 | <td>Inherited: |
jdaggett@1662 | 3251 | |
jdaggett@1662 | 3252 | <td>yes |
jdaggett@1662 | 3253 | |
jdaggett@1662 | 3254 | <tr> |
jdaggett@1662 | 3255 | <td>Percentages: |
jdaggett@1662 | 3256 | |
jdaggett@1662 | 3257 | <td>N/A |
jdaggett@1662 | 3258 | |
jdaggett@1662 | 3259 | <tr> |
jdaggett@1662 | 3260 | <td>Media: |
jdaggett@1662 | 3261 | |
jdaggett@1662 | 3262 | <td>visual |
jdaggett@1662 | 3263 | |
jdaggett@1662 | 3264 | <tr> |
jdaggett@1662 | 3265 | <td>Computed value: |
jdaggett@1662 | 3266 | |
jdaggett@1662 | 3267 | <td>as specified |
jdaggett@1662 | 3268 | </table> |
jdaggett@1662 | 3269 | |
jdaggett@2509 | 3270 | <p>Kerning is the contextual adjustment of inter-glyph spacing. This |
jdaggett@2509 | 3271 | property controls metric kerning, kerning that utilizes adjustment data |
jdaggett@5809 | 3272 | contained in the font. The value ‘<a href="#normal2"><code |
jdaggett@5809 | 3273 | class=property>normal</code></a>’ implies that kerning is applied while |
jdaggett@5809 | 3274 | the value ‘<code class=property>none</code>’ implies that kerning is |
jdaggett@5809 | 3275 | not applied when rendering text. If the value is ‘<code |
jdaggett@5809 | 3276 | class=property>auto</code>’, a user agent is free to choose whether |
jdaggett@5809 | 3277 | kerning is enabled or not by default and to vary that default based on the |
jdaggett@5809 | 3278 | underlying text script. |
jdaggett@1662 | 3279 | |
jdaggett@1662 | 3280 | <p>For fonts that do not include kerning data this property will have no |
jdaggett@1662 | 3281 | visible effect. When rendering with OpenType fonts, the <a |
jdaggett@1662 | 3282 | href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> |
jdaggett@2515 | 3283 | specification suggests that kerning be enabled by default. When kerning is |
jdaggett@6436 | 3284 | enabled, the OpenType <span class=tag>kern</span> feature is enabled (for |
jdaggett@6436 | 3285 | vertical text runs the <span class=tag>vkrn</span> feature is enabled). |
jdaggett@6436 | 3286 | User agents must also support fonts that only support kerning via data |
jdaggett@6436 | 3287 | contained in a ‘<code class=property>kern</code>’ font table, as |
jdaggett@6436 | 3288 | detailed in the OpenType specification. Authors may prefer to disable |
jdaggett@6436 | 3289 | kerning in situations where performance is more important that precise |
jdaggett@6436 | 3290 | appearance. If the ‘<code class=property>letter-spacing</code>’ |
jdaggett@6436 | 3291 | property is defined, kerning adjustments are considered part of the |
jdaggett@6436 | 3292 | default spacing, letter spacing adjustments are made after kerning has |
jdaggett@6436 | 3293 | been applied.</p> |
jdaggett@6176 | 3294 | <!-- prop: font-variant-ligatures --> |
jdaggett@6176 | 3295 | |
jdaggett@6176 | 3296 | <h3 id=font-variant-ligatures-prop><span class=secno>6.4 </span>Ligatures: |
jdaggett@6176 | 3297 | the <a href="#propdef-font-variant-ligatures">font-variant-ligatures</a> |
jdaggett@6176 | 3298 | property</h3> |
jdaggett@6176 | 3299 | |
jdaggett@6436 | 3300 | <table class=propdef id=namefont-variant-ligaturesvaluenormal-no> |
jdaggett@6176 | 3301 | <tbody> |
jdaggett@6176 | 3302 | <tr> |
jdaggett@6176 | 3303 | <td>Name: |
jdaggett@6176 | 3304 | |
jdaggett@6176 | 3305 | <td><dfn id=propdef-font-variant-ligatures>font-variant-ligatures</dfn> |
jdaggett@6176 | 3306 | |
jdaggett@6176 | 3307 | <tr> |
jdaggett@6176 | 3308 | <td>Value: |
jdaggett@6176 | 3309 | |
jdaggett@6436 | 3310 | <td>normal | none | [ <common-lig-values> || |
jdaggett@6436 | 3311 | <discretionary-lig-values> || <historical-lig-values> || |
jdaggett@6436 | 3312 | <contextual-alt-values> ] |
jdaggett@6176 | 3313 | |
jdaggett@6176 | 3314 | <tr> |
jdaggett@6176 | 3315 | <td>Initial: |
jdaggett@6176 | 3316 | |
jdaggett@6176 | 3317 | <td>normal |
jdaggett@6176 | 3318 | |
jdaggett@6176 | 3319 | <tr> |
jdaggett@6176 | 3320 | <td>Applies to: |
jdaggett@6176 | 3321 | |
jdaggett@6176 | 3322 | <td>all elements |
jdaggett@6176 | 3323 | |
jdaggett@6176 | 3324 | <tr> |
jdaggett@6176 | 3325 | <td>Inherited: |
jdaggett@6176 | 3326 | |
jdaggett@6176 | 3327 | <td>yes |
jdaggett@6176 | 3328 | |
jdaggett@6176 | 3329 | <tr> |
jdaggett@6176 | 3330 | <td>Percentages: |
jdaggett@6176 | 3331 | |
jdaggett@6176 | 3332 | <td>N/A |
jdaggett@6176 | 3333 | |
jdaggett@6176 | 3334 | <tr> |
jdaggett@6176 | 3335 | <td>Media: |
jdaggett@6176 | 3336 | |
jdaggett@6176 | 3337 | <td>visual |
jdaggett@6176 | 3338 | |
jdaggett@6176 | 3339 | <tr> |
jdaggett@6176 | 3340 | <td>Computed value: |
jdaggett@6176 | 3341 | |
jdaggett@6176 | 3342 | <td>as specified |
jdaggett@6176 | 3343 | </table> |
jdaggett@6176 | 3344 | |
jdaggett@6436 | 3345 | <p>Ligatures and contextual forms are ways of combining glyphs to produce |
jdaggett@6436 | 3346 | more harmonized forms. A value of ‘<a href="#normal2"><code |
jdaggett@6451 | 3347 | class=property>normal</code></a>’ implies that common default features |
jdaggett@6451 | 3348 | are enabled, <a href="#font-feature-resolution">as described in detail in |
jdaggett@6451 | 3349 | the next section</a>. For OpenType fonts, common ligatures and contextual |
jdaggett@6451 | 3350 | forms are on by default, discretionary and historical ligatures are not. A |
jdaggett@6451 | 3351 | value of ‘<code class=property>none</code>’ implies that all types of |
jdaggett@6451 | 3352 | ligatures and contextual forms covered by this property are explicitly |
jdaggett@6451 | 3353 | disabled. In situations where ligatures are not considered necessary, this |
jdaggett@6451 | 3354 | may improve the speed of text rendering. |
jdaggett@6176 | 3355 | |
jdaggett@6176 | 3356 | <pre |
jdaggett@6176 | 3357 | class=prod><dfn id=ltcommon-lig-values><var><common-lig-values></var></dfn> = [ common-ligatures | no-common-ligatures ]</pre> |
jdaggett@6176 | 3358 | |
jdaggett@6176 | 3359 | <pre |
jdaggett@6176 | 3360 | class=prod><dfn id=ltdiscretionary-lig-values><var><discretionary-lig-values></var></dfn> = [ discretionary-ligatures | no-discretionary-ligatures ]</pre> |
jdaggett@6176 | 3361 | |
jdaggett@6176 | 3362 | <pre |
jdaggett@6176 | 3363 | class=prod><dfn id=lthistorical-lig-values><var><historical-lig-values></var></dfn> = [ historical-ligatures | no-historical-ligatures ]</pre> |
jdaggett@6176 | 3364 | |
jdaggett@6176 | 3365 | <pre |
jdaggett@6176 | 3366 | class=prod><dfn id=ltcontextual-alt-valuesgt><var><contextual-alt-values></var></dfn> = [ contextual | no-contextual ]</pre> |
jdaggett@6176 | 3367 | |
jdaggett@6176 | 3368 | <p>Individual values have the following meanings: |
jdaggett@6176 | 3369 | |
jdaggett@6176 | 3370 | <dl> |
jdaggett@6176 | 3371 | <dt><dfn id=common-ligatures>common-ligatures</dfn> |
jdaggett@6176 | 3372 | |
jdaggett@6436 | 3373 | <dd>Enables display of common ligatures (OpenType features: <span |
jdaggett@6436 | 3374 | class=tag>liga, clig</span>). For OpenType fonts, common ligatures are |
jdaggett@6436 | 3375 | enabled by default. |
jdaggett@6176 | 3376 | </dl> |
jdaggett@6176 | 3377 | |
jdaggett@6176 | 3378 | <div class=featex><img alt="common ligature example" src=liga.png></div> |
jdaggett@6176 | 3379 | |
jdaggett@6176 | 3380 | <dl> |
jdaggett@6176 | 3381 | <dt><dfn id=no-common-ligatures>no-common-ligatures</dfn> |
jdaggett@6176 | 3382 | |
jdaggett@6436 | 3383 | <dd>Disables display of common ligatures (OpenType features: <span |
jdaggett@6436 | 3384 | class=tag>liga, clig</span>). |
jdaggett@6176 | 3385 | |
jdaggett@6176 | 3386 | <dt><dfn id=discretionary-ligatures>discretionary-ligatures</dfn> |
jdaggett@6176 | 3387 | |
jdaggett@6436 | 3388 | <dd>Enables display of discretionary ligatures (OpenType feature: <span |
jdaggett@6436 | 3389 | class=tag>dlig</span>). Which ligatures are discretionary, or optional, |
jdaggett@6436 | 3390 | is decided by the type designer so authors will need to refer to the |
jdaggett@6176 | 3391 | documentation of a given font to understand which ligatures are |
jdaggett@6176 | 3392 | considered discretionary. |
jdaggett@6176 | 3393 | </dl> |
jdaggett@6176 | 3394 | |
jdaggett@6176 | 3395 | <div class=featex><img alt="discretionary ligature example" src=dlig.png></div> |
jdaggett@6176 | 3396 | |
jdaggett@6176 | 3397 | <dl> |
jdaggett@6176 | 3398 | <dt><dfn id=no-discretionary-ligatures>no-discretionary-ligatures</dfn> |
jdaggett@6176 | 3399 | |
jdaggett@6436 | 3400 | <dd>Disables display of discretionary ligatures (OpenType feature: <span |
jdaggett@6436 | 3401 | class=tag>dlig</span>). |
jdaggett@6176 | 3402 | |
jdaggett@6176 | 3403 | <dt><dfn id=historical-ligatures>historical-ligatures</dfn> |
jdaggett@6176 | 3404 | |
jdaggett@6436 | 3405 | <dd>Enables display of historical ligatures (OpenType feature: <span |
jdaggett@6436 | 3406 | class=tag>hlig</span>). |
jdaggett@6176 | 3407 | </dl> |
jdaggett@6176 | 3408 | |
jdaggett@6176 | 3409 | <div class=featex><img alt="historical ligature example" src=hlig.png></div> |
jdaggett@6176 | 3410 | |
jdaggett@6176 | 3411 | <dl> |
jdaggett@6176 | 3412 | <dt><dfn id=no-historical-ligatures>no-historical-ligatures</dfn> |
jdaggett@6176 | 3413 | |
jdaggett@6436 | 3414 | <dd>Disables display of historical ligatures (OpenType feature: <span |
jdaggett@6436 | 3415 | class=tag>hlig</span>). |
jdaggett@6176 | 3416 | |
jdaggett@6176 | 3417 | <dt><dfn id=contextual>contextual</dfn> |
jdaggett@6176 | 3418 | |
jdaggett@6436 | 3419 | <dd>Enables display of contextual alternates (OpenType feature: <span |
jdaggett@6436 | 3420 | class=tag>calt</span>). Although not strictly a ligature feature, like |
jdaggett@6176 | 3421 | ligatures this feature is commonly used to harmonize the shapes of glyphs |
jdaggett@6436 | 3422 | with the surrounding context. For OpenType fonts, this feature is on by |
jdaggett@6436 | 3423 | default. |
jdaggett@6176 | 3424 | </dl> |
jdaggett@6176 | 3425 | |
jdaggett@6176 | 3426 | <div class=featex><img alt="contextual alternate example" src=calt.png></div> |
jdaggett@6176 | 3427 | |
jdaggett@6176 | 3428 | <dl> |
jdaggett@6176 | 3429 | <dt><dfn id=no-contextual>no-contextual</dfn> |
jdaggett@6176 | 3430 | |
jdaggett@6436 | 3431 | <dd>Disables display of contextual alternates (OpenType feature: <span |
jdaggett@6436 | 3432 | class=tag>calt</span>). |
jdaggett@6176 | 3433 | </dl> |
jdaggett@6176 | 3434 | |
jdaggett@6176 | 3435 | <p>Required ligatures, needed for correctly rendering complex scripts, are |
jdaggett@6436 | 3436 | not affected by the settings above, including ‘<code |
jdaggett@6436 | 3437 | class=property>none</code>’ (OpenType feature: <span |
jdaggett@6436 | 3438 | class=tag>rlig</span>).</p> |
jdaggett@3460 | 3439 | <!-- prop: font-variant-position --> |
jdaggett@3460 | 3440 | |
jdaggett@6176 | 3441 | <h3 id=font-variant-position-prop><span class=secno>6.5 </span>Subscript |
jdaggett@3638 | 3442 | and superscript forms: the <a |
jdaggett@3460 | 3443 | href="#propdef-font-variant-position">font-variant-position</a> property</h3> |
jdaggett@3460 | 3444 | |
jdaggett@4624 | 3445 | <table class=propdef id=namefont-variant-positionvaluenormal-sub> |
jdaggett@1662 | 3446 | <tbody> |
jdaggett@1662 | 3447 | <tr> |
jdaggett@1662 | 3448 | <td>Name: |
jdaggett@1662 | 3449 | |
jdaggett@3460 | 3450 | <td><dfn id=propdef-font-variant-position>font-variant-position</dfn> |
jdaggett@1662 | 3451 | |
jdaggett@1662 | 3452 | <tr> |
jdaggett@1662 | 3453 | <td>Value: |
jdaggett@1662 | 3454 | |
jdaggett@3638 | 3455 | <td>normal | sub | super |
jdaggett@1732 | 3456 | |
jdaggett@1732 | 3457 | <tr> |
jdaggett@1732 | 3458 | <td>Initial: |
jdaggett@1732 | 3459 | |
jdaggett@1732 | 3460 | <td>normal |
jdaggett@1732 | 3461 | |
jdaggett@1732 | 3462 | <tr> |
jdaggett@1732 | 3463 | <td>Applies to: |
jdaggett@1732 | 3464 | |
jdaggett@1732 | 3465 | <td>all elements |
jdaggett@1732 | 3466 | |
jdaggett@1732 | 3467 | <tr> |
jdaggett@1732 | 3468 | <td>Inherited: |
jdaggett@1732 | 3469 | |
jdaggett@1732 | 3470 | <td>yes |
jdaggett@1732 | 3471 | |
jdaggett@1732 | 3472 | <tr> |
jdaggett@1732 | 3473 | <td>Percentages: |
jdaggett@1732 | 3474 | |
jdaggett@1732 | 3475 | <td>N/A |
jdaggett@1732 | 3476 | |
jdaggett@1732 | 3477 | <tr> |
jdaggett@1732 | 3478 | <td>Media: |
jdaggett@1732 | 3479 | |
jdaggett@1732 | 3480 | <td>visual |
jdaggett@1732 | 3481 | |
jdaggett@1732 | 3482 | <tr> |
jdaggett@1732 | 3483 | <td>Computed value: |
jdaggett@1732 | 3484 | |
jdaggett@1732 | 3485 | <td>as specified |
jdaggett@1732 | 3486 | </table> |
jdaggett@1732 | 3487 | |
jdaggett@5890 | 3488 | <p>This property is used to enable typographic subscript and superscript |
jdaggett@5890 | 3489 | glyphs. These are alternate glyphs designed within the same em-box as |
jdaggett@5890 | 3490 | default glyphs and are intended to be laid out on the same baseline as the |
jdaggett@5890 | 3491 | default glyphs, with no resizing or repositioning of the baseline. They |
jdaggett@5890 | 3492 | are explicitly designed to match the surrounding text and to be more |
jdaggett@5890 | 3493 | readable without affecting the line height. |
jdaggett@3511 | 3494 | |
jdaggett@3511 | 3495 | <div class=figure><img alt="comparison between real subscript glyphs and |
jdaggett@3511 | 3496 | synthesized ones" src=realsubscripts.png> |
jdaggett@3511 | 3497 | <p class=caption>Subscript glyphs (top) vs. typical synthesized subscripts |
jdaggett@3511 | 3498 | (bottom) |
jdaggett@3511 | 3499 | </div> |
jdaggett@3460 | 3500 | |
jdaggett@3638 | 3501 | <p>The values ‘<code class=property>sub</code>’ and ‘<code |
jdaggett@3638 | 3502 | class=property>super</code>’ imply the appropriate variant glyph is |
jdaggett@6436 | 3503 | displayed when available in the font (OpenType features: <span |
jdaggett@6436 | 3504 | class=tag>subs, sups</span>). A value of ‘<a href="#normal2"><code |
jdaggett@5890 | 3505 | class=property>normal</code></a>’ implies neither of these alternate |
jdaggett@5890 | 3506 | glyphs are substituted. |
jdaggett@5890 | 3507 | |
jdaggett@5890 | 3508 | <p>Because of the semantic nature of subscripts and superscripts, when the |
jdaggett@5890 | 3509 | value is either ‘<code class=property>sub</code>’ or ‘<code |
jdaggett@5890 | 3510 | class=property>super</code>’ for a given run of text and a variant glyph |
jdaggett@5890 | 3511 | is not available for all the characters in the run, simulated glyphs are |
jdaggett@5890 | 3512 | synthesized for all characters using reduced forms of the default glyph. |
jdaggett@5890 | 3513 | This is done to avoid a mixture of variant glyphs and synthesized ones |
jdaggett@5890 | 3514 | within the same run of text, since there is no guarantee that two types of |
jdaggett@5890 | 3515 | glyphs would be aligned correctly. |
jdaggett@3460 | 3516 | |
jdaggett@3460 | 3517 | <p>In the case of OpenType fonts that lack subscript or superscript glyphs |
jdaggett@5891 | 3518 | for a given character, user agents must use the appropriate subscript and |
jdaggett@5891 | 3519 | superscript metrics specified in the selected font's <a |
jdaggett@3460 | 3520 | href="http://www.microsoft.com/typography/otspec/os2.htm#subxs">OS/2 |
jdaggett@3460 | 3521 | table</a> <a href="#OPENTYPE" |
jdaggett@5891 | 3522 | rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> to calculate the size |
jdaggett@5891 | 3523 | and offset of the synthesized substitutes. |
jdaggett@2461 | 3524 | |
jdaggett@2461 | 3525 | <p>In the past, user agents have used font-size and vertical-align to |
jdaggett@6436 | 3526 | simulate subscripts and superscripts for the <span class=tag>sub</span> |
jdaggett@6436 | 3527 | and <span class=tag>sup</span> elements. To allow a backwards compatible |
jdaggett@6436 | 3528 | way of defining subscripts and superscripts, it is recommended that |
jdaggett@6436 | 3529 | authors use conditional rules <a href="#CSS3-CONDITIONAL" |
jdaggett@3460 | 3530 | rel=biblioentry>[CSS3-CONDITIONAL]<!--{{CSS3-CONDITIONAL}}--></a> so that |
jdaggett@5890 | 3531 | older user agents will still render subscripts and superscripts via the |
jdaggett@5890 | 3532 | older mechanism. |
jdaggett@5890 | 3533 | |
jdaggett@5890 | 3534 | <p>Authors should note that fonts typically only provide subscript and |
jdaggett@5890 | 3535 | superscript glyphs for a subset of all characters supported by the font. |
jdaggett@5891 | 3536 | While subscript and superscript glyphs are often available for Latin |
jdaggett@5891 | 3537 | numbers, glyphs for punctuation and letter characters are less frequently |
jdaggett@5891 | 3538 | provided. The synthetic fallback rules defined for this property assure |
jdaggett@5891 | 3539 | that subscripts and superscripts will always appear but the appearance may |
jdaggett@5891 | 3540 | not match author expectations if the font used does not provide the |
jdaggett@5891 | 3541 | appropriate alternate glyph for all characters contained in a subscript or |
jdaggett@5890 | 3542 | superscript. |
jdaggett@5890 | 3543 | |
jdaggett@5890 | 3544 | <div class=figure><img alt="alternate superscripts vs. glyphs synthesized |
jdaggett@5890 | 3545 | using superscript metrics" src=superscript-alt-synth.png> |
jdaggett@5890 | 3546 | <p class=caption>Superscript alternate glyph (left), synthesized |
jdaggett@5890 | 3547 | superscript glyphs (middle), and incorrect mixture of the two (right) |
jdaggett@5890 | 3548 | </div> |
jdaggett@5890 | 3549 | |
jdaggett@5890 | 3550 | <p>This property is not cumulative, applying it to subelements within a |
jdaggett@5890 | 3551 | subscript or superscript won't nest the placement of a subscript or |
jdaggett@5890 | 3552 | superscript glyph. Images contained within text runs where the value of |
jdaggett@5890 | 3553 | this property is ‘<code class=property>sub</code>’ or ‘<code |
jdaggett@5890 | 3554 | class=property>super</code>’ will be drawn just as they would if the |
jdaggett@5890 | 3555 | value was ‘<a href="#normal2"><code class=property>normal</code></a>’. |
jdaggett@5890 | 3556 | Likewise, text decorations such as underlines or emphasis marks will |
jdaggett@5890 | 3557 | render in the same position as they would for the default glyphs, since |
jdaggett@5890 | 3558 | this property does not affect the baseline position. |
jdaggett@5890 | 3559 | |
jdaggett@5890 | 3560 | <p>Because of these limitations, font-variant-position is not recommended |
jdaggett@5890 | 3561 | for use in user agent stylesheets. Authors should use it in cases where |
jdaggett@5890 | 3562 | subscripts or superscripts will only contain the narrow range of |
jdaggett@5890 | 3563 | characters supported by the fonts specified. |
jdaggett@2509 | 3564 | |
jdaggett@2461 | 3565 | <div class=example> |
jdaggett@6436 | 3566 | <p>A typical user agent default style for the <span class=tag>sub</span> |
jdaggett@6436 | 3567 | element:</p> |
jdaggett@2461 | 3568 | |
jdaggett@2461 | 3569 | <pre>sub { |
jdaggett@2461 | 3570 | vertical-align: sub; |
jdaggett@2461 | 3571 | font-size: smaller; |
jdaggett@2461 | 3572 | line-height: normal; |
jdaggett@2461 | 3573 | } |
jdaggett@2461 | 3574 | </pre> |
jdaggett@2461 | 3575 | |
jdaggett@3460 | 3576 | <p>Using font-variant-position to specify typographic subscripts in a way |
jdaggett@3460 | 3577 | that will still show subscripts in older user agents:</p> |
jdaggett@3460 | 3578 | |
jdaggett@3460 | 3579 | <pre>@supports ( font-variant-position: sub ) { |
jdaggett@3460 | 3580 | |
jdaggett@3460 | 3581 | sub { |
jdaggett@3460 | 3582 | vertical-align: inherit; |
jdaggett@3460 | 3583 | font-size: 100%; |
jdaggett@3460 | 3584 | line-height: inherit; |
jdaggett@3460 | 3585 | font-variant-position: sub; |
jdaggett@3460 | 3586 | } |
jdaggett@3460 | 3587 | |
jdaggett@2461 | 3588 | } |
jdaggett@2461 | 3589 | </pre> |
jdaggett@2461 | 3590 | |
jdaggett@4624 | 3591 | <p>User agents that support the ‘<a |
jdaggett@4624 | 3592 | href="#propdef-font-variant-position"><code |
jdaggett@4624 | 3593 | class=property>font-variant-position</code></a>’ property will select a |
jdaggett@4624 | 3594 | subscript variant glyph and render this without adjusting the baseline or |
jdaggett@4624 | 3595 | font-size. Older user agents will ignore the ‘<a |
jdaggett@4624 | 3596 | href="#propdef-font-variant-position"><code |
jdaggett@4624 | 3597 | class=property>font-variant-position</code></a>’ property definition |
jdaggett@4624 | 3598 | and use the standard defaults for subscripts.</p> |
jdaggett@2461 | 3599 | </div> |
jdaggett@2118 | 3600 | <!-- prop: font-variant-caps --> |
jdaggett@2118 | 3601 | |
jdaggett@2118 | 3602 | <h3 id=font-variant-caps-prop><span class=secno>6.6 </span>Capitalization: |
jdaggett@1662 | 3603 | the <a href="#propdef-font-variant-caps">font-variant-caps</a> property</h3> |
jdaggett@1662 | 3604 | |
jdaggett@5809 | 3605 | <table class=propdef id=namefont-variant-capsvaluenormal-small-c> |
jdaggett@1662 | 3606 | <tbody> |
jdaggett@1662 | 3607 | <tr> |
jdaggett@1662 | 3608 | <td>Name: |
jdaggett@1662 | 3609 | |
jdaggett@1662 | 3610 | <td><dfn id=propdef-font-variant-caps>font-variant-caps</dfn> |
jdaggett@1662 | 3611 | |
jdaggett@1662 | 3612 | <tr> |
jdaggett@1662 | 3613 | <td>Value: |
jdaggett@1662 | 3614 | |
jdaggett@5809 | 3615 | <td>normal | small-caps | all-small-caps | petite-caps | all-petite-caps |
jdaggett@6648 | 3616 | | unicase | titling-caps |
jdaggett@1662 | 3617 | |
jdaggett@1662 | 3618 | <tr> |
jdaggett@1662 | 3619 | <td>Initial: |
jdaggett@1662 | 3620 | |
jdaggett@1662 | 3621 | <td>normal |
jdaggett@1662 | 3622 | |
jdaggett@1662 | 3623 | <tr> |
jdaggett@1662 | 3624 | <td>Applies to: |
jdaggett@1662 | 3625 | |
jdaggett@1662 | 3626 | <td>all elements |
jdaggett@1662 | 3627 | |
jdaggett@1662 | 3628 | <tr> |
jdaggett@1662 | 3629 | <td>Inherited: |
jdaggett@1662 | 3630 | |
jdaggett@1662 | 3631 | <td>yes |
jdaggett@1662 | 3632 | |
jdaggett@1662 | 3633 | <tr> |
jdaggett@1662 | 3634 | <td>Percentages: |
jdaggett@1662 | 3635 | |
jdaggett@1662 | 3636 | <td>N/A |
jdaggett@1662 | 3637 | |
jdaggett@1662 | 3638 | <tr> |
jdaggett@1662 | 3639 | <td>Media: |
jdaggett@1662 | 3640 | |
jdaggett@1662 | 3641 | <td>visual |
jdaggett@1662 | 3642 | |
jdaggett@1662 | 3643 | <tr> |
jdaggett@1662 | 3644 | <td>Computed value: |
jdaggett@1662 | 3645 | |
jdaggett@1662 | 3646 | <td>as specified |
jdaggett@1662 | 3647 | </table> |
jdaggett@1662 | 3648 | |
jdaggett@1662 | 3649 | <p>Specifies control over capitalized forms. |
jdaggett@1662 | 3650 | |
jdaggett@1732 | 3651 | <p>Individual values have the following meanings: |
jdaggett@1662 | 3652 | |
jdaggett@1662 | 3653 | <dl> |
jdaggett@5809 | 3654 | <dt><dfn id=normal>normal</dfn> |
jdaggett@5809 | 3655 | |
jdaggett@5809 | 3656 | <dd>None of the features listed below are enabled. |
jdaggett@5809 | 3657 | |
jdaggett@1662 | 3658 | <dt><dfn id=small-caps>small-caps</dfn> |
jdaggett@1662 | 3659 | |
jdaggett@6436 | 3660 | <dd>Enables display of small capitals (OpenType feature: <span |
jdaggett@6436 | 3661 | class=tag>smcp</span>). Small-caps glyphs typically use the form of |
jdaggett@6436 | 3662 | uppercase letters but are reduced to the size of lowercase letters. |
jdaggett@1662 | 3663 | </dl> |
jdaggett@1662 | 3664 | |
jdaggett@1662 | 3665 | <div class=featex><img alt="small-caps example" src=smcp.png></div> |
jdaggett@1662 | 3666 | |
jdaggett@1662 | 3667 | <dl> |
jdaggett@1732 | 3668 | <dt><dfn id=all-small-caps>all-small-caps</dfn> |
jdaggett@1732 | 3669 | |
jdaggett@1732 | 3670 | <dd>Enables display of small capitals for both upper and lowercase letters |
jdaggett@6436 | 3671 | (OpenType features: <span class=tag>c2sc, smcp</span>). |
jdaggett@1732 | 3672 | |
jdaggett@1662 | 3673 | <dt><dfn id=petite-caps>petite-caps</dfn> |
jdaggett@1662 | 3674 | |
jdaggett@6436 | 3675 | <dd>Enables display of petite capitals (OpenType feature: <span |
jdaggett@6436 | 3676 | class=tag>pcap</span>). |
jdaggett@1662 | 3677 | |
jdaggett@1732 | 3678 | <dt><dfn id=all-petite-caps>all-petite-caps</dfn> |
jdaggett@1732 | 3679 | |
jdaggett@1732 | 3680 | <dd>Enables display of petite capitals for both upper and lowercase |
jdaggett@6436 | 3681 | letters (OpenType features: <span class=tag>c2pc, pcap</span>). |
jdaggett@1732 | 3682 | |
jdaggett@6648 | 3683 | <dt><dfn id=unicase>unicase</dfn> |
jdaggett@6648 | 3684 | |
jdaggett@6648 | 3685 | <dd>Enables display of mixture of small capitals for uppercase letters |
jdaggett@6648 | 3686 | with normal lowercase letters (OpenType feature: <span |
jdaggett@6648 | 3687 | class=tag>unic</span>). |
jdaggett@6648 | 3688 | |
jdaggett@1662 | 3689 | <dt><dfn id=titling-caps>titling-caps</dfn> |
jdaggett@1662 | 3690 | |
jdaggett@6436 | 3691 | <dd>Enables display of titling capitals (OpenType feature: <span |
jdaggett@6436 | 3692 | class=tag>titl</span>). Uppercase letter glyphs are often designed for |
jdaggett@6436 | 3693 | use with lowercase letters. When used in all uppercase titling sequences |
jdaggett@6436 | 3694 | they can appear too strong. Titling capitals are designed specifically |
jdaggett@6436 | 3695 | for this situation. |
jdaggett@1662 | 3696 | </dl> |
jdaggett@1662 | 3697 | |
jdaggett@6648 | 3698 | <p>This property allows the selection of alternate glyphs used for small or |
jdaggett@6648 | 3699 | petite capitals or for titling. These glyphs are specifically designed to |
jdaggett@6648 | 3700 | blend well with the surrounding normal glyphs, to maintain the weight and |
jdaggett@6648 | 3701 | readability which suffers when text is simply resized to fit this purpose. |
jdaggett@6648 | 3702 | |
jdaggett@6648 | 3703 | <p>The availability of these glyphs is based on whether a given feature is |
jdaggett@6648 | 3704 | defined or not in the feature list of the font. User agents can optionally |
jdaggett@6648 | 3705 | decide this on a per-script basis but should explicitly not decide this on |
jdaggett@6648 | 3706 | a per-character basis. |
jdaggett@6648 | 3707 | |
jdaggett@6648 | 3708 | <p>Some fonts may only support a subset or none of the features described |
jdaggett@6648 | 3709 | for this property. For backwards compatibility with CSS 2.1, if ‘<a |
jdaggett@4624 | 3710 | href="#small-caps"><code class=property>small-caps</code></a>’ or ‘<a |
jdaggett@4624 | 3711 | href="#all-small-caps"><code class=property>all-small-caps</code></a>’ |
jdaggett@4624 | 3712 | is specified but small-caps glyphs are not available for a given font, |
jdaggett@4624 | 3713 | user agents should simulate a small-caps font, for example by taking a |
jdaggett@6648 | 3714 | normal font and replacing the glyphs for lowercase letters with scaled |
jdaggett@6648 | 3715 | versions of the glyphs for uppercase characters (replacing the glyphs for |
jdaggett@6648 | 3716 | both upper and lowercase letters in the case of ‘<a |
jdaggett@4624 | 3717 | href="#all-small-caps"><code class=property>all-small-caps</code></a>’). |
jdaggett@6648 | 3718 | |
jdaggett@6648 | 3719 | <div class=figure style="padding: 0; margin: auto;"><img alt="synthetic vs. |
jdaggett@6648 | 3720 | real small-caps" class=hires src=synthetic-vs-real-small-caps.png |
jdaggett@6648 | 3721 | width=512px> |
jdaggett@6648 | 3722 | <p class=caption>Synthetic vs. real small-caps |
jdaggett@6648 | 3723 | </div> |
jdaggett@6648 | 3724 | |
jdaggett@6648 | 3725 | <p>To match the surrounding text, a font may provide alternate glyphs for |
jdaggett@6648 | 3726 | caseless characters when these features are enabled but when a user agent |
jdaggett@6648 | 3727 | simulates small capitals, it must not attempt to simulate alternates for |
jdaggett@6648 | 3728 | codepoints which are considered caseless. |
jdaggett@6648 | 3729 | |
jdaggett@6648 | 3730 | <div class=figure style="padding: 0; margin: auto;"><img alt="caseless |
jdaggett@6648 | 3731 | characters with small-caps, all-small-caps enabled" class=hires |
jdaggett@6648 | 3732 | src=small-capitals-variations.png width=418px> |
jdaggett@6648 | 3733 | <p class=caption>Caseless characters with small-caps, all-small-caps |
jdaggett@6648 | 3734 | enabled |
jdaggett@6648 | 3735 | </div> |
jdaggett@6648 | 3736 | |
jdaggett@6648 | 3737 | <p>If either ‘<a href="#petite-caps"><code |
jdaggett@4624 | 3738 | class=property>petite-caps</code></a>’ or ‘<a |
jdaggett@4624 | 3739 | href="#all-petite-caps"><code class=property>all-petite-caps</code></a>’ |
jdaggett@4624 | 3740 | is specified for a font that doesn't support these features, the property |
jdaggett@4624 | 3741 | behaves as if ‘<a href="#small-caps"><code |
jdaggett@4624 | 3742 | class=property>small-caps</code></a>’ or ‘<a |
jdaggett@4624 | 3743 | href="#all-small-caps"><code class=property>all-small-caps</code></a>’, |
jdaggett@6648 | 3744 | respectively, had been specified. If ‘<a href="#unicase"><code |
jdaggett@6648 | 3745 | class=property>unicase</code></a>’ is specified for a font that doesn't |
jdaggett@6648 | 3746 | support that feature, the property behaves as if ‘<a |
jdaggett@6648 | 3747 | href="#small-caps"><code class=property>small-caps</code></a>’ was |
jdaggett@6648 | 3748 | applied only to lowercased uppercase letters. If ‘<a |
jdaggett@6648 | 3749 | href="#titling-caps"><code class=property>titling-caps</code></a>’ is |
jdaggett@6648 | 3750 | specified with a font that does not support this feature, this property |
jdaggett@6648 | 3751 | has no visible effect. When simulated small capital glyphs are used, for |
jdaggett@4624 | 3752 | scripts that lack uppercase and lowercase letters, ‘<a |
jdaggett@4624 | 3753 | href="#small-caps"><code class=property>small-caps</code></a>’, ‘<a |
jdaggett@4624 | 3754 | href="#all-small-caps"><code class=property>all-small-caps</code></a>’, |
jdaggett@4624 | 3755 | ‘<a href="#petite-caps"><code class=property>petite-caps</code></a>’, |
jdaggett@4624 | 3756 | ‘<a href="#all-petite-caps"><code |
jdaggett@4624 | 3757 | class=property>all-petite-caps</code></a>’ and ‘<a |
jdaggett@4624 | 3758 | href="#unicase"><code class=property>unicase</code></a>’ have no visible |
jdaggett@2462 | 3759 | effect. |
jdaggett@1662 | 3760 | |
jdaggett@6648 | 3761 | <p>When casing transforms are used to simulate small capitals, the casing |
jdaggett@6648 | 3762 | transformations should match those used for the <span |
jdaggett@6648 | 3763 | class=property>‘<code class=property>text-transform</code>’</span> |
jdaggett@6648 | 3764 | property. |
jdaggett@6648 | 3765 | |
jdaggett@6648 | 3766 | <p>As a last resort, unscaled uppercase letter glyphs in a normal font may |
jdaggett@6648 | 3767 | replace glyphs in a small-caps font so that the text appears in all |
jdaggett@6648 | 3768 | uppercase letters. |
jdaggett@6648 | 3769 | |
jdaggett@6648 | 3770 | <div class=figure style="padding: 0; margin: auto;"><img alt="using |
jdaggett@6648 | 3771 | all-small-caps in acronym-laden text" class=hires |
jdaggett@6648 | 3772 | src=acronym-laden-text.png width=596px> |
jdaggett@6648 | 3773 | <p class=caption>Using small capitals to improve readability in |
jdaggett@6648 | 3774 | acronym-laden text |
jdaggett@6648 | 3775 | </div> |
jdaggett@6648 | 3776 | |
jdaggett@1662 | 3777 | <div class=example> |
jdaggett@1662 | 3778 | <p>Quotes rendered italicised, with small-caps on the first line:</p> |
jdaggett@1662 | 3779 | |
jdaggett@1662 | 3780 | <pre>blockquote { font-style: italic; } |
jdaggett@1662 | 3781 | blockquote:first-line { font-variant: small-caps; } |
jdaggett@1662 | 3782 | |
jdaggett@1662 | 3783 | <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 | 3784 | </pre> |
jdaggett@1662 | 3785 | </div> |
jdaggett@2118 | 3786 | <!-- prop: font-variant-numeric --> |
jdaggett@2118 | 3787 | |
jdaggett@2118 | 3788 | <h3 id=font-variant-numeric-prop><span class=secno>6.7 </span>Numerical |
jdaggett@1662 | 3789 | formatting: the <a |
jdaggett@1662 | 3790 | href="#propdef-font-variant-numeric">font-variant-numeric</a> property</h3> |
jdaggett@1662 | 3791 | |
jdaggett@5809 | 3792 | <table class=propdef id=namefont-variant-numericvaluenormal-ltnu> |
jdaggett@1662 | 3793 | <tbody> |
jdaggett@1662 | 3794 | <tr> |
jdaggett@1662 | 3795 | <td>Name: |
jdaggett@1662 | 3796 | |
jdaggett@1662 | 3797 | <td><dfn id=propdef-font-variant-numeric>font-variant-numeric</dfn> |
jdaggett@1662 | 3798 | |
jdaggett@1662 | 3799 | <tr> |
jdaggett@1662 | 3800 | <td>Value: |
jdaggett@1662 | 3801 | |
jdaggett@5809 | 3802 | <td>normal | [ <numeric-figure-values> || |
jdaggett@1732 | 3803 | <numeric-spacing-values> || <numeric-fraction-values> || |
jdaggett@3638 | 3804 | ordinal || slashed-zero ] |
jdaggett@1662 | 3805 | |
jdaggett@1662 | 3806 | <tr> |
jdaggett@1662 | 3807 | <td>Initial: |
jdaggett@1662 | 3808 | |
jdaggett@1662 | 3809 | <td>normal |
jdaggett@1662 | 3810 | |
jdaggett@1662 | 3811 | <tr> |
jdaggett@1662 | 3812 | <td>Applies to: |
jdaggett@1662 | 3813 | |
jdaggett@1662 | 3814 | <td>all elements |
jdaggett@1662 | 3815 | |
jdaggett@1662 | 3816 | <tr> |
jdaggett@1662 | 3817 | <td>Inherited: |
jdaggett@1662 | 3818 | |
jdaggett@1662 | 3819 | <td>yes |
jdaggett@1662 | 3820 | |
jdaggett@1662 | 3821 | <tr> |
jdaggett@1662 | 3822 | <td>Percentages: |
jdaggett@1662 | 3823 | |
jdaggett@1662 | 3824 | <td>N/A |
jdaggett@1662 | 3825 | |
jdaggett@1662 | 3826 | <tr> |
jdaggett@1662 | 3827 | <td>Media: |
jdaggett@1662 | 3828 | |
jdaggett@1662 | 3829 | <td>visual |
jdaggett@1662 | 3830 | |
jdaggett@1662 | 3831 | <tr> |
jdaggett@1662 | 3832 | <td>Computed value: |
jdaggett@1662 | 3833 | |
jdaggett@1662 | 3834 | <td>as specified |
jdaggett@1662 | 3835 | </table> |
jdaggett@1662 | 3836 | |
jdaggett@1662 | 3837 | <p>Specifies control over numerical forms. |
jdaggett@1662 | 3838 | |
jdaggett@1662 | 3839 | <pre |
jdaggett@1732 | 3840 | class=prod><dfn id=ltnumeric-figure-valuesgt><var><numeric-figure-values></var></dfn> = [ lining-nums | oldstyle-nums ]</pre> |
jdaggett@1732 | 3841 | |
jdaggett@1732 | 3842 | <pre |
jdaggett@1732 | 3843 | class=prod><dfn id=ltnumeric-spacing-valuesgt><var><numeric-spacing-values></var></dfn> = [ proportional-nums | tabular-nums ]</pre> |
jdaggett@1732 | 3844 | |
jdaggett@1732 | 3845 | <pre |
jdaggett@1732 | 3846 | class=prod><dfn id=ltnumeric-fraction-valuesgt><var><numeric-fraction-values></var></dfn> = [ diagonal-fractions | stacked-fractions ]</pre> |
jdaggett@1732 | 3847 | |
jdaggett@1732 | 3848 | <p>Individual values have the following meanings: |
jdaggett@1662 | 3849 | |
jdaggett@1662 | 3850 | <dl> |
jdaggett@5809 | 3851 | <dt><dfn id=normal0>normal</dfn> |
jdaggett@5809 | 3852 | |
jdaggett@5809 | 3853 | <dd>None of the features listed below are enabled. |
jdaggett@5809 | 3854 | |
jdaggett@1662 | 3855 | <dt><dfn id=lining-nums>lining-nums</dfn> |
jdaggett@1662 | 3856 | |
jdaggett@6436 | 3857 | <dd>Enables display of lining numerals (OpenType feature: <span |
jdaggett@6436 | 3858 | class=tag>lnum</span>). |
jdaggett@1662 | 3859 | |
jdaggett@1662 | 3860 | <dt><dfn id=oldstyle-nums>oldstyle-nums</dfn> |
jdaggett@1662 | 3861 | |
jdaggett@6436 | 3862 | <dd>Enables display of old-style numerals (OpenType feature: <span |
jdaggett@6436 | 3863 | class=tag>onum</span>). |
jdaggett@1662 | 3864 | |
jdaggett@1662 | 3865 | <dt><dfn id=proportional-nums>proportional-nums</dfn> |
jdaggett@1662 | 3866 | |
jdaggett@6436 | 3867 | <dd>Enables display of proportional numerals (OpenType feature: <span |
jdaggett@6436 | 3868 | class=tag>pnum</span>). |
jdaggett@1662 | 3869 | |
jdaggett@1662 | 3870 | <dt><dfn id=tabular-nums>tabular-nums</dfn> |
jdaggett@1662 | 3871 | |
jdaggett@6436 | 3872 | <dd>Enables display of tabular numerals (OpenType feature: <span |
jdaggett@6436 | 3873 | class=tag>tnum</span>). |
jdaggett@1662 | 3874 | </dl> |
jdaggett@1662 | 3875 | |
jdaggett@1662 | 3876 | <p>The example below shows how these different properties can be combined |
jdaggett@1662 | 3877 | to influence the rendering of tabular data with fonts that support these |
jdaggett@1662 | 3878 | features. Within normal paragraph text, proportional numbers are used |
jdaggett@1662 | 3879 | while tabular numbers are used so that columns of numbers line up |
jdaggett@1662 | 3880 | properly: |
jdaggett@1662 | 3881 | |
jdaggett@1662 | 3882 | <div class=figure style="padding: 0; margin: auto;"><img alt="combining |
jdaggett@1662 | 3883 | number styles" src=numberstyles.png> |
jdaggett@1662 | 3884 | <p class=caption>Using number styles |
jdaggett@1662 | 3885 | </div> |
jdaggett@1662 | 3886 | |
jdaggett@1662 | 3887 | <dl> |
jdaggett@1662 | 3888 | <dt><dfn id=diagonal-fractions>diagonal-fractions</dfn> |
jdaggett@1662 | 3889 | |
jdaggett@6436 | 3890 | <dd>Enables display of lining diagonal fractions (OpenType feature: <span |
jdaggett@6436 | 3891 | class=tag>frac</span>). |
jdaggett@1662 | 3892 | </dl> |
jdaggett@1662 | 3893 | |
jdaggett@1662 | 3894 | <div class=featex><img alt="diagonal fraction example" src=frac.png></div> |
jdaggett@1662 | 3895 | |
jdaggett@1662 | 3896 | <dl> |
jdaggett@1662 | 3897 | <dt><dfn id=stacked-fractions>stacked-fractions</dfn> |
jdaggett@1662 | 3898 | |
jdaggett@6436 | 3899 | <dd>Enables display of lining stacked fractions (OpenType feature: <span |
jdaggett@6436 | 3900 | class=tag>afrc</span>). |
jdaggett@1662 | 3901 | </dl> |
jdaggett@1662 | 3902 | |
jdaggett@1662 | 3903 | <div class=featex><img alt="stacked fraction example" src=afrc.png></div> |
jdaggett@1662 | 3904 | |
jdaggett@1662 | 3905 | <dl> |
jdaggett@3638 | 3906 | <dt><dfn id=ordinal>ordinal</dfn> |
jdaggett@3638 | 3907 | |
jdaggett@3638 | 3908 | <dd>Enables display of forms used with ordinal numbers (OpenType feature: |
jdaggett@6436 | 3909 | <span class=tag>ordn</span>). |
jdaggett@3638 | 3910 | |
jdaggett@1662 | 3911 | <dt><dfn id=slashed-zero>slashed-zero</dfn> |
jdaggett@1662 | 3912 | |
jdaggett@6436 | 3913 | <dd>Enables display of slashed zeros (OpenType feature: <span |
jdaggett@6436 | 3914 | class=tag>zero</span>). |
jdaggett@1662 | 3915 | </dl> |
jdaggett@1662 | 3916 | |
jdaggett@1662 | 3917 | <div class=featex><img alt="slashed zero example" src=zero.png></div> |
jdaggett@1662 | 3918 | |
jdaggett@1662 | 3919 | <div class=example id=steak-marinade> |
jdaggett@1662 | 3920 | <p>A simple flank steak marinade recipe, rendered with automatic fractions |
jdaggett@1662 | 3921 | and old-style numerals:</p> |
jdaggett@1662 | 3922 | |
jdaggett@1662 | 3923 | <pre>.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; } |
jdaggett@1662 | 3924 | |
jdaggett@1662 | 3925 | <h4>Steak marinade:</h4> |
jdaggett@1662 | 3926 | <ul> |
jdaggett@1662 | 3927 | <li><span class="amount">2</span> tbsp olive oil</li> |
jdaggett@1662 | 3928 | <li><span class="amount">1</span> tbsp lemon juice</li> |
jdaggett@1662 | 3929 | <li><span class="amount">1</span> tbsp soy sauce</li> |
jdaggett@1662 | 3930 | <li><span class="amount">1 1/2</span> tbsp dry minced onion</li> |
jdaggett@1662 | 3931 | <li><span class="amount">2 1/2</span> tsp italian seasoning</li> |
jdaggett@1732 | 3932 | <li>Salt &amp; pepper</li> |
jdaggett@1662 | 3933 | </ul> |
jdaggett@1662 | 3934 | |
jdaggett@5596 | 3935 | <p>Mix the meat with the marinade and let it sit covered in the refrigerator |
jdaggett@5596 | 3936 | for a few hours or overnight.</p> |
jdaggett@1662 | 3937 | </pre> |
jdaggett@1662 | 3938 | </div> |
jdaggett@2118 | 3939 | <!-- prop: font-variant-alternates --> |
jdaggett@2118 | 3940 | |
jdaggett@2118 | 3941 | <h3 id=font-variant-alternates-prop><span class=secno>6.8 </span>Alternates |
jdaggett@2118 | 3942 | and swashes: the <a |
jdaggett@2118 | 3943 | href="#propdef-font-variant-alternates">font-variant-alternates</a> |
jdaggett@2118 | 3944 | property</h3> |
jdaggett@2118 | 3945 | |
jdaggett@6176 | 3946 | <table class=propdef id=namefont-variant-alternatesvaluenormal-s> |
jdaggett@2118 | 3947 | <tbody> |
jdaggett@2118 | 3948 | <tr> |
jdaggett@2118 | 3949 | <td>Name: |
jdaggett@2118 | 3950 | |
jdaggett@2118 | 3951 | <td><dfn |
jdaggett@2118 | 3952 | id=propdef-font-variant-alternates>font-variant-alternates</dfn> |
jdaggett@2118 | 3953 | |
jdaggett@2118 | 3954 | <tr> |
jdaggett@2118 | 3955 | <td>Value: |
jdaggett@2118 | 3956 | |
jdaggett@6176 | 3957 | <td>normal | [ stylistic(<feature-value-name>) || historical-forms |
jdaggett@6176 | 3958 | || styleset(<feature-value-name>#) || |
jdaggett@5833 | 3959 | character-variant(<feature-value-name>#) || |
jdaggett@5833 | 3960 | swash(<feature-value-name>) || |
jdaggett@3041 | 3961 | ornaments(<feature-value-name>) || |
jdaggett@3638 | 3962 | annotation(<feature-value-name>) ] |
jdaggett@2118 | 3963 | |
jdaggett@2118 | 3964 | <tr> |
jdaggett@2118 | 3965 | <td>Initial: |
jdaggett@2118 | 3966 | |
jdaggett@2118 | 3967 | <td>normal |
jdaggett@2118 | 3968 | |
jdaggett@2118 | 3969 | <tr> |
jdaggett@2118 | 3970 | <td>Applies to: |
jdaggett@2118 | 3971 | |
jdaggett@2118 | 3972 | <td>all elements |
jdaggett@2118 | 3973 | |
jdaggett@2118 | 3974 | <tr> |
jdaggett@2118 | 3975 | <td>Inherited: |
jdaggett@2118 | 3976 | |
jdaggett@2118 | 3977 | <td>yes |
jdaggett@2118 | 3978 | |
jdaggett@2118 | 3979 | <tr> |
jdaggett@2118 | 3980 | <td>Percentages: |
jdaggett@2118 | 3981 | |
jdaggett@2118 | 3982 | <td>N/A |
jdaggett@2118 | 3983 | |
jdaggett@2118 | 3984 | <tr> |
jdaggett@2118 | 3985 | <td>Media: |
jdaggett@2118 | 3986 | |
jdaggett@2118 | 3987 | <td>visual |
jdaggett@2118 | 3988 | |
jdaggett@2118 | 3989 | <tr> |
jdaggett@2118 | 3990 | <td>Computed value: |
jdaggett@2118 | 3991 | |
jdaggett@2118 | 3992 | <td>as specified |
jdaggett@2118 | 3993 | </table> |
jdaggett@2118 | 3994 | |
jdaggett@2118 | 3995 | <p>For any given character, fonts can provide a variety of alternate glyphs |
jdaggett@2118 | 3996 | in addition to the default glyph for that character. This property |
jdaggett@2118 | 3997 | provides control over the selection of these alternate glyphs. |
jdaggett@2118 | 3998 | |
jdaggett@7041 | 3999 | <p>In cases where multiple alternates are possible, authors define a |
jdaggett@7041 | 4000 | <code><feature-value-name></code> using the |
jdaggett@7041 | 4001 | <code>@font-feature-values</code> rule described below to indicate the |
jdaggett@7041 | 4002 | specific alternate to be used. The nature of these alternates is font |
jdaggett@7041 | 4003 | specific, so the rule defines values for a specific font family or set of |
jdaggett@7041 | 4004 | families. When a particular value has not been defined for a given family, |
jdaggett@7041 | 4005 | the named value is treated as if the feature had omitted from the style |
jdaggett@7041 | 4006 | rule. If a given value is outside the range supported by a given font, the |
jdaggett@7041 | 4007 | value is ignored. These values never apply to generic font families, nor |
jdaggett@7041 | 4008 | to families selected as part of system font fallback. Values that behave |
jdaggett@7041 | 4009 | this way are marked as <em>font specific</em>. |
jdaggett@2556 | 4010 | |
jdaggett@2118 | 4011 | <p>Individual values have the following meanings: |
jdaggett@2118 | 4012 | |
jdaggett@2118 | 4013 | <dl> |
jdaggett@5809 | 4014 | <dt><dfn id=normal1>normal</dfn> |
jdaggett@5809 | 4015 | |
jdaggett@5809 | 4016 | <dd>None of the features listed below are enabled. |
jdaggett@5809 | 4017 | |
jdaggett@7060 | 4018 | <dt><dfn id=stylisticltfeature-value-namegt |
jdaggett@7060 | 4019 | title=stylistic>stylistic(<feature-value-name>)</dfn> |
jdaggett@2118 | 4020 | |
jdaggett@2118 | 4021 | <dd>Enables display of stylistic alternates (<em>font specific</em>, |
jdaggett@6436 | 4022 | OpenType feature: <span class=tag>salt |
jdaggett@6436 | 4023 | <feature-value-name></span>). |
jdaggett@2118 | 4024 | </dl> |
jdaggett@2118 | 4025 | |
jdaggett@2118 | 4026 | <div class=featex><img alt="stylistic alternate example" src=salt.png></div> |
jdaggett@2118 | 4027 | |
jdaggett@2118 | 4028 | <dl> |
jdaggett@2118 | 4029 | <dt><dfn id=historical-forms>historical-forms</dfn> |
jdaggett@2118 | 4030 | |
jdaggett@6436 | 4031 | <dd>Enables display of historical forms (OpenType feature: <span |
jdaggett@6436 | 4032 | class=tag>hist</span>). |
jdaggett@2118 | 4033 | </dl> |
jdaggett@2118 | 4034 | |
jdaggett@2118 | 4035 | <div class=featex><img alt="historical form example" src=hist.png></div> |
jdaggett@2118 | 4036 | |
jdaggett@2118 | 4037 | <dl> |
jdaggett@7060 | 4038 | <dt><dfn id=stylesetltfeature-value-namegt |
jdaggett@7060 | 4039 | title=styleset>styleset(<feature-value-name>#)</dfn> |
jdaggett@2118 | 4040 | |
jdaggett@2118 | 4041 | <dd>Enables display with stylistic sets (<em>font specific</em>, OpenType |
jdaggett@6436 | 4042 | feature: <span class=tag>ss<feature-index></span> OpenType |
jdaggett@6436 | 4043 | currently defines <span class=tag>ss01</span> through <span |
jdaggett@6436 | 4044 | class=tag>ss20</span>). |
jdaggett@2118 | 4045 | </dl> |
jdaggett@2118 | 4046 | |
jdaggett@2118 | 4047 | <div class=featex><img alt="styleset example" src=ssnn.png></div> |
jdaggett@2118 | 4048 | |
jdaggett@2118 | 4049 | <dl> |
jdaggett@7060 | 4050 | <dt><dfn id=character-variantltfeature-value-namegt |
jdaggett@7060 | 4051 | title=character-variant>character-variant(<feature-value-name>#)</dfn> |
jdaggett@5833 | 4052 | |
jdaggett@2118 | 4053 | |
jdaggett@2118 | 4054 | <dd>Enables display of specific character variants (<em>font |
jdaggett@6436 | 4055 | specific</em>, OpenType feature: <span |
jdaggett@6436 | 4056 | class=tag>cv<feature-index></span> OpenType currently defines <span |
jdaggett@6436 | 4057 | class=tag>cv01</span> through <span class=tag>cv99</span>). |
jdaggett@2118 | 4058 | |
jdaggett@7060 | 4059 | <dt><dfn id=swashltfeature-value-namegt |
jdaggett@7060 | 4060 | title=swash>swash(<feature-value-name>)</dfn> |
jdaggett@2118 | 4061 | |
jdaggett@2118 | 4062 | <dd>Enables display of swash glyphs (<em>font specific</em>, OpenType |
jdaggett@6436 | 4063 | feature: <span class=tag>swsh <feature-index>, cswh |
jdaggett@6436 | 4064 | <feature-index></span>). |
jdaggett@2118 | 4065 | </dl> |
jdaggett@2118 | 4066 | |
jdaggett@2118 | 4067 | <div class=featex><img alt="swash example" src=swsh.png></div> |
jdaggett@2118 | 4068 | |
jdaggett@2118 | 4069 | <dl> |
jdaggett@7060 | 4070 | <dt><dfn id=ornamentsltfeature-value-namegt |
jdaggett@7060 | 4071 | title=ornaments>ornaments(<feature-value-name>)</dfn> |
jdaggett@2118 | 4072 | |
jdaggett@2118 | 4073 | <dd>Enables replacement of default glyphs with ornaments, if provided in |
jdaggett@6436 | 4074 | the font (<em>font specific</em>, OpenType feature: <span class=tag>ornm |
jdaggett@6436 | 4075 | <feature-index></span>). Some fonts may offer ornament glyphs as |
jdaggett@2118 | 4076 | alternates for a wide collection of characters; however, displaying |
jdaggett@2118 | 4077 | arbitrary characters (e.g., alphanumerics) as ornaments is poor practice |
jdaggett@2118 | 4078 | as it distorts the semantics of the data. Font designers are encouraged |
jdaggett@2118 | 4079 | to encode all ornaments (except those explicitly encoded in the Unicode |
jdaggett@2118 | 4080 | Dingbats blocks, etc.) as alternates for the bullet character (U+2022) to |
jdaggett@2118 | 4081 | allow authors to select the desired glyph using |
jdaggett@2118 | 4082 | <feature-value-name>. |
jdaggett@2118 | 4083 | </dl> |
jdaggett@2118 | 4084 | |
jdaggett@2118 | 4085 | <div class=featex><img alt="ornaments example" src=ornm.png></div> |
jdaggett@2118 | 4086 | |
jdaggett@2118 | 4087 | <dl> |
jdaggett@7060 | 4088 | <dt><dfn id=annotationltfeature-value-namegt |
jdaggett@7060 | 4089 | title=annotation>annotation(<feature-value-name>)</dfn> |
jdaggett@2118 | 4090 | |
jdaggett@2118 | 4091 | <dd>Enables display of alternate annotation forms (<em>font specific</em>, |
jdaggett@6436 | 4092 | OpenType feature: <span class=tag>nalt <feature-index></span>). |
jdaggett@2118 | 4093 | </dl> |
jdaggett@2118 | 4094 | |
jdaggett@2118 | 4095 | <div class=featex><img alt="alternate annotation form example" |
jdaggett@2118 | 4096 | src=nalt.png></div> |
jdaggett@2118 | 4097 | |
jdaggett@2472 | 4098 | <h3 id=font-feature-values><span class=secno>6.9 </span>Defining font |
jdaggett@7096 | 4099 | specific alternates: the <code>@font-feature-values</code> rule</h3> |
jdaggett@2472 | 4100 | |
jdaggett@4624 | 4101 | <p>Several of the possible values of ‘<a |
jdaggett@4624 | 4102 | href="#propdef-font-variant-alternates"><code |
jdaggett@4624 | 4103 | class=property>font-variant-alternates</code></a>’ listed above are |
jdaggett@4624 | 4104 | labeled as "font specific". For these features fonts may define not just a |
jdaggett@4624 | 4105 | single glyph but a set of alternate glyphs with an index to select a given |
jdaggett@7096 | 4106 | alternate. Since these are font family specific, the |
jdaggett@7096 | 4107 | <code>@font-feature-values</code> rule is used to define named-values for |
jdaggett@7096 | 4108 | these indices for a given family. |
jdaggett@2472 | 4109 | |
jdaggett@2472 | 4110 | <p>In the case of the swash Q in the example shown above, the swash could |
jdaggett@2472 | 4111 | be specified using these style rules: |
jdaggett@2472 | 4112 | |
jdaggett@2472 | 4113 | <pre> |
jdaggett@7041 | 4114 | |
jdaggett@2472 | 4115 | @font-feature-values Jupiter Sans { |
jdaggett@7041 | 4116 | @swash { |
jdaggett@7041 | 4117 | delicate: 1; |
jdaggett@7041 | 4118 | flowing: 2; |
jdaggett@7041 | 4119 | } |
jdaggett@2472 | 4120 | } |
jdaggett@2472 | 4121 | |
jdaggett@2472 | 4122 | h2 { font-family: Jupiter Sans, sans-serif; } |
jdaggett@2472 | 4123 | |
jdaggett@2472 | 4124 | /* show the second swash variant in h2 headings */ |
jdaggett@2472 | 4125 | h2:first-letter { font-variant-alternates: swash(flowing); } |
jdaggett@2472 | 4126 | |
jdaggett@2479 | 4127 | <h2>Quick</h2></pre> |
jdaggett@2472 | 4128 | |
jdaggett@2472 | 4129 | <p>When Jupiter Sans is present, the second alternate swash alternate will |
jdaggett@2472 | 4130 | be displayed. When not present, no swash character will be shown, since |
jdaggett@2472 | 4131 | the specific named-value "flowing" is only defined for the Jupiter Sans |
jdaggett@2472 | 4132 | family. The @-mark indicates the name of the property value for which a |
jdaggett@2472 | 4133 | named-value can be used. The name "flowing" is chosen by the author. |
jdaggett@2472 | 4134 | |
jdaggett@7096 | 4135 | <p>The syntax of the <code>@font-feature-values</code> rule is defined as: |
jdaggett@2118 | 4136 | |
jdaggett@7041 | 4137 | <pre>@font-feature-values <font-family># { |
jdaggett@7041 | 4138 | @<feature-type> { |
jdaggett@7041 | 4139 | <feature-ident> : <feature-index>+; |
jdaggett@7041 | 4140 | <feature-ident> : <feature-index>+; |
jdaggett@7041 | 4141 | ... |
jdaggett@7041 | 4142 | } |
jdaggett@7041 | 4143 | ... |
jdaggett@2118 | 4144 | } |
jdaggett@2118 | 4145 | </pre> |
jdaggett@2118 | 4146 | |
jdaggett@2118 | 4147 | <p>where: |
jdaggett@2118 | 4148 | |
jdaggett@2118 | 4149 | <pre |
jdaggett@7041 | 4150 | class=prod><dfn id=ltfont-familygt><var><font-family></var></dfn> = font family name, same syntax as font-family property</pre> |
jdaggett@2118 | 4151 | |
jdaggett@2118 | 4152 | <pre |
jdaggett@7041 | 4153 | class=prod><dfn id=ltfeature-typegt><var><feature-type></var></dfn> = the name of one of the font specific font-variant property values |
jdaggett@7041 | 4154 | (e.g. swash, styleset, annotation)</pre> |
jdaggett@2118 | 4155 | |
jdaggett@2118 | 4156 | <pre |
jdaggett@7041 | 4157 | class=prod><dfn id=ltfeature-identgt><var><feature-ident></var></dfn> = a user-defined identifier used to describe a set of indices</pre> |
jdaggett@2118 | 4158 | |
jdaggett@2118 | 4159 | <pre |
jdaggett@7041 | 4160 | class=prod><dfn id=ltfeature-indexgt><var><feature-index></var></dfn> = an integer value greater than 0 specific to a given font or set of fonts</pre> |
jdaggett@2118 | 4161 | |
jdaggett@7096 | 4162 | <p>These <code>@font-feature-values</code> rules can appear anywhere within |
jdaggett@7096 | 4163 | a stylesheet and are exposed bidirectionally across @import boundaries. |
jdaggett@7096 | 4164 | Within each font feature values declaration, syntax errors such as unknown |
jdaggett@7096 | 4165 | property value names, invalid identifiers or values result in the |
jdaggett@7096 | 4166 | declaration being dropped, similar to the way syntax errors in style |
jdaggett@7096 | 4167 | declarations are handled. |
jdaggett@7096 | 4168 | |
jdaggett@7096 | 4169 | <p>If multiple <code>@font-feature-values</code> rules are defined for a |
jdaggett@7096 | 4170 | given family, the resulting values defined are the union of these rules. |
jdaggett@7096 | 4171 | This allows a set of named-values to be defined for a given font family |
jdaggett@7096 | 4172 | globally for a site and specific additions made per-page. If the same |
jdaggett@6307 | 4173 | <feature-value-name> is defined mulitple times for a given |
jdaggett@6307 | 4174 | font-variant value, the last defined value is used. |
jdaggett@2472 | 4175 | |
jdaggett@2472 | 4176 | <pre> |
jdaggett@2472 | 4177 | site.css: |
jdaggett@2472 | 4178 | |
jdaggett@2472 | 4179 | @font-feature-values Mercury Serif { |
jdaggett@7041 | 4180 | @styleset { |
jdaggett@7041 | 4181 | stacked-g: 3; /* "two-storey" versions of g, a */ |
jdaggett@7041 | 4182 | stacked-a: 4; |
jdaggett@7041 | 4183 | } |
jdaggett@2472 | 4184 | } |
jdaggett@2472 | 4185 | |
jdaggett@2472 | 4186 | page.css: |
jdaggett@2472 | 4187 | |
jdaggett@2472 | 4188 | @font-feature-values Mercury Serif { |
jdaggett@7041 | 4189 | @styleset { |
jdaggett@7041 | 4190 | geometric-m: 7; /* alternate version of m */ |
jdaggett@7041 | 4191 | } |
jdaggett@2472 | 4192 | } |
jdaggett@2472 | 4193 | |
jdaggett@2472 | 4194 | body { |
jdaggett@2472 | 4195 | font-family: Mercury Serif, serif; |
jdaggett@2472 | 4196 | |
jdaggett@2472 | 4197 | /* enable both the use of stacked g and alternate m */ |
jdaggett@2472 | 4198 | font-variant-alternates: styleset(stacked-g, geometric-m); |
jdaggett@2472 | 4199 | }</pre> |
jdaggett@2472 | 4200 | |
jdaggett@3571 | 4201 | <p>Only named font families are allowed for <font-family>, rules that |
jdaggett@3571 | 4202 | include generic or system fonts in the list of font families are |
jdaggett@6307 | 4203 | considered syntax errors and the contents of the rules are ignored. |
jdaggett@6307 | 4204 | However, if a user agent defines a generic font to be a specific named |
jdaggett@6307 | 4205 | font (e.g. Helvetica), the settings associated with that family name will |
jdaggett@6307 | 4206 | be used. |
jdaggett@3571 | 4207 | |
jdaggett@3571 | 4208 | <p>For <font-variant-property-value>, only font specific property value |
jdaggett@4624 | 4209 | names supported by the ‘<a href="#propdef-font-variant"><code |
jdaggett@4624 | 4210 | class=property>font-variant</code></a>’ property are recognized, |
jdaggett@4624 | 4211 | definitions for other value names cause a syntax error and are ignored. |
jdaggett@4624 | 4212 | Each property value that is font specific is clearly marked as such. |
jdaggett@7229 | 4213 | Feature value names follow the rules of CSS identifiers and are |
jdaggett@7229 | 4214 | case-sensitive. They are unique only for a given set of font families and |
jdaggett@3571 | 4215 | font-variant property value; the same identifier used with a different |
jdaggett@3571 | 4216 | font-variant property value is treated as a separate and distinct value. |
jdaggett@2472 | 4217 | |
jdaggett@7229 | 4218 | <p class=issue>Matching of feature value names is dependent on the |
jdaggett@7229 | 4219 | resolution of matching for user-defined identifiers in CSS. |
jdaggett@7229 | 4220 | |
jdaggett@2472 | 4221 | <p>Using a commonly named value allows authors to use a single style rule |
jdaggett@2472 | 4222 | to cover a set of fonts for which the underlying selector is different for |
jdaggett@2472 | 4223 | each font. If either font in the example below is found, a circled number |
jdaggett@2472 | 4224 | glyph will be used: |
jdaggett@2472 | 4225 | |
jdaggett@2472 | 4226 | <pre>@font-feature-values Taisho Gothic { |
jdaggett@7041 | 4227 | @annotation { boxed: 1; circled: 4; } |
jdaggett@2118 | 4228 | } |
jdaggett@2118 | 4229 | |
jdaggett@2118 | 4230 | @font-feature-values Otaru Kisa { |
jdaggett@7041 | 4231 | @annotation { circled: 1; black-boxed: 3; } |
jdaggett@2118 | 4232 | } |
jdaggett@2118 | 4233 | |
jdaggett@2118 | 4234 | h3.title { |
jdaggett@2118 | 4235 | /* circled form defined for both fonts */ |
jdaggett@2118 | 4236 | font-family: Taisho Gothic, Otaru Kisa; |
jdaggett@2118 | 4237 | font-variant: annotation(circled); |
jdaggett@2118 | 4238 | }</pre> |
jdaggett@2472 | 4239 | |
jdaggett@3571 | 4240 | <p>Most font specific font-variant property values take a single value |
jdaggett@3571 | 4241 | (e.g. swash). The character-variant property value allows two values and |
jdaggett@3571 | 4242 | styleset allows an unlimited number. If a larger number of values are |
jdaggett@3571 | 4243 | assigned to a given name, a syntax error occurs and the entire |
jdaggett@3571 | 4244 | <font-feature-values-declaration> is ignored. |
jdaggett@3571 | 4245 | |
jdaggett@3571 | 4246 | <p>For the styleset property value, multiple values indicate the style sets |
jdaggett@7095 | 4247 | to be enabled. Values between 1 and 99 enable OpenType features <span |
jdaggett@7095 | 4248 | class=tag>ss01</span> through <span class=tag>ss99</span>. However, the |
jdaggett@7095 | 4249 | OpenType standard only officially defines <span class=tag>ss01</span> |
jdaggett@7095 | 4250 | through <span class=tag>ss20</span>. Values greater than 99 or equal to 0 |
jdaggett@7095 | 4251 | are ignored but do not generate a syntax error when parsed. |
jdaggett@2472 | 4252 | |
jdaggett@2472 | 4253 | <pre>@font-feature-values Mars Serif { |
jdaggett@7041 | 4254 | @styleset { |
jdaggett@7041 | 4255 | alt-g: 1; /* implies ss01 = 1 */ |
jdaggett@7041 | 4256 | curly-quotes: 3; /* implies ss03 = 1 */ |
jdaggett@7041 | 4257 | code: 4 5; /* implies ss04 = 1, ss05 = 1 */ |
jdaggett@7041 | 4258 | } |
jdaggett@7041 | 4259 | |
jdaggett@7041 | 4260 | @styleset { |
jdaggett@7095 | 4261 | dumb: 125; /* >99, ignored */ |
jdaggett@7041 | 4262 | } |
jdaggett@7041 | 4263 | |
jdaggett@7041 | 4264 | @swash { |
jdaggett@7041 | 4265 | swishy: 3 5; /* more than 1 value for swash, syntax error */ |
jdaggett@7041 | 4266 | } |
jdaggett@2472 | 4267 | } |
jdaggett@2472 | 4268 | |
jdaggett@2472 | 4269 | p.codeblock { |
jdaggett@2472 | 4270 | /* implies ss03 = 1, ss04 = 1, ss05 = 1 */ |
jdaggett@2472 | 4271 | font-variant-alternates: styleset(curly-quotes, code); |
jdaggett@2472 | 4272 | }</pre> |
jdaggett@2472 | 4273 | |
jdaggett@2472 | 4274 | <p>For character-variant, a single value between 1 and 99 indicates the |
jdaggett@6436 | 4275 | enabling of OpenType feature <span class=tag>cv01</span> through <span |
jdaggett@7095 | 4276 | class=tag>cv99</span>. For OpenType fonts, values greater than 99 or equal |
jdaggett@7095 | 4277 | to 0 are ignored but do not generate a syntax error when parsed. When two |
jdaggett@7095 | 4278 | values are listed, the first value indicates the feature used and the |
jdaggett@7095 | 4279 | second the value passed for that feature. When two value names imply |
jdaggett@7095 | 4280 | different settings for the same underlying feature the last setting is |
jdaggett@7095 | 4281 | used. |
jdaggett@2472 | 4282 | |
jdaggett@2472 | 4283 | <pre>@font-feature-values MM Greek { |
jdaggett@7041 | 4284 | @character-variant { alpha-2: 1 2; } /* implies cv01 = 2 */ |
jdaggett@7041 | 4285 | @character-variant { beta-3: 2 3; } /* implies cv02 = 3 */ |
jdaggett@7041 | 4286 | @character-variant { epsilon: 5 3 6; } /* more than 2 values, syntax error, ignored */ |
jdaggett@7041 | 4287 | @character-variant { gamma: 12; } /* implies cv12 = 1 */ |
jdaggett@7041 | 4288 | @character-variant { zeta: 20 3; } /* implies cv20 = 3 */ |
jdaggett@7041 | 4289 | @character-variant { zeta-2: 20 2; } /* implies cv20 = 2 */ |
jdaggett@7041 | 4290 | @character-variant { silly: 105; } /* >99, ignored */ |
jdaggett@7041 | 4291 | @character-variant { dumb: 323 3; } /* >99, ignored */ |
jdaggett@2472 | 4292 | } |
jdaggett@2472 | 4293 | |
jdaggett@2472 | 4294 | #title { |
jdaggett@2472 | 4295 | /* use the third alternate beta, first alternate gamma */ |
jdaggett@2472 | 4296 | font-variant-alternates: character-variant(beta-3, gamma); |
jdaggett@3571 | 4297 | } |
jdaggett@3571 | 4298 | |
jdaggett@3571 | 4299 | p { |
jdaggett@3571 | 4300 | /* zeta-2 follows zeta, implies cv20 = 2 */ |
jdaggett@3571 | 4301 | font-variant-alternates: character-variant(zeta, zeta-2); |
jdaggett@3571 | 4302 | } |
jdaggett@3571 | 4303 | |
jdaggett@3571 | 4304 | .special { |
jdaggett@3571 | 4305 | /* zeta follows zeta-2, implies cv20 = 3 */ |
jdaggett@3571 | 4306 | font-variant-alternates: character-variant(zeta-2, zeta); |
jdaggett@2472 | 4307 | }</pre> |
jdaggett@2472 | 4308 | |
jdaggett@7218 | 4309 | <p>See <a href="#font-feature-values-DOM">Appendix B</a> for a description |
jdaggett@3517 | 4310 | of the interfaces used to modify these rules via the CSS Object Model. |
jdaggett@3517 | 4311 | |
jdaggett@2472 | 4312 | <div class=figure><img alt="Matching text on Byzantine seals using |
jdaggett@2472 | 4313 | character variants" src=byzantineseal.png> |
jdaggett@2472 | 4314 | <p class=caption>Byzantine seal text displayed with character variants |
jdaggett@2472 | 4315 | </div> |
jdaggett@2472 | 4316 | |
jdaggett@2472 | 4317 | <div class=example> |
jdaggett@2472 | 4318 | <p>In the figure above, the text in red is rendered using a font |
jdaggett@2472 | 4319 | containing character variants that mimic the character forms found on a |
jdaggett@2472 | 4320 | Byzantine seal from the 8th century A.D. Two lines below is the same text |
jdaggett@2472 | 4321 | displayed in a font without variants. Note the two variants for U and N |
jdaggett@2509 | 4322 | used on the seal.</p> |
jdaggett@2472 | 4323 | |
jdaggett@2472 | 4324 | <pre>@font-feature-values Athena Ruby { |
jdaggett@7041 | 4325 | @character-variant { |
jdaggett@7041 | 4326 | leo-B: 2 1; |
jdaggett@7041 | 4327 | leo-M: 13 3; |
jdaggett@7041 | 4328 | leo-alt-N: 14 1; |
jdaggett@7041 | 4329 | leo-N: 14 2; |
jdaggett@7041 | 4330 | leo-T: 20 1; |
jdaggett@7041 | 4331 | leo-U: 21 2; |
jdaggett@7041 | 4332 | leo-alt-U: 21 4; |
jdaggett@7041 | 4333 | } |
jdaggett@2472 | 4334 | } |
jdaggett@2472 | 4335 | |
jdaggett@2472 | 4336 | p { |
jdaggett@6653 | 4337 | font-variant: discretionary-ligatures, |
jdaggett@6653 | 4338 | character-variant(leo-B, leo-M, leo-N, leo-T, leo-U); |
jdaggett@2472 | 4339 | } |
jdaggett@2472 | 4340 | |
jdaggett@2472 | 4341 | span.alt-N { |
jdaggett@2472 | 4342 | font-variant-alternates: character-variant(leo-alt-N); |
jdaggett@2472 | 4343 | } |
jdaggett@2472 | 4344 | |
jdaggett@2472 | 4345 | span.alt-U { |
jdaggett@2472 | 4346 | font-variant-alternates: character-variant(leo-alt-U); |
jdaggett@2472 | 4347 | } |
jdaggett@2472 | 4348 | |
jdaggett@2472 | 4349 | <p>ENO....UP͞RSTU<span class="alt-U">U</span>͞<span class="alt-U">U</span>ΚΑΙTỤẠG̣IUPNS</p> |
jdaggett@2472 | 4350 | |
jdaggett@2472 | 4351 | <p>LEON|ΚΑΙCONSTA|NTI<span class="alt-N">N</span>OS..|STOIBAṢ.|LIṢROM|AIO<span class="alt-N">N</span></p> |
jdaggett@2472 | 4352 | </pre> |
jdaggett@2118 | 4353 | </div> |
jdaggett@2118 | 4354 | |
jdaggett@2118 | 4355 | <h3 id=font-variant-east-asian-prop><span class=secno>6.10 </span>East |
jdaggett@2118 | 4356 | Asian text rendering: the <a |
jdaggett@1662 | 4357 | href="#propdef-font-variant-east-asian">font-variant-east-asian</a> |
jdaggett@1662 | 4358 | property</h3> |
jdaggett@1662 | 4359 | |
jdaggett@5809 | 4360 | <table class=propdef id=namefont-variant-east-asianvaluenormal-l> |
jdaggett@1662 | 4361 | <tbody> |
jdaggett@1662 | 4362 | <tr> |
jdaggett@1662 | 4363 | <td>Name: |
jdaggett@1662 | 4364 | |
jdaggett@1662 | 4365 | <td><dfn |
jdaggett@1662 | 4366 | id=propdef-font-variant-east-asian>font-variant-east-asian</dfn> |
jdaggett@1662 | 4367 | |
jdaggett@1662 | 4368 | <tr> |
jdaggett@1662 | 4369 | <td>Value: |
jdaggett@1662 | 4370 | |
jdaggett@5809 | 4371 | <td>normal | [ <east-asian-variant-values> || |
jdaggett@3638 | 4372 | <east-asian-width-values> || ruby ] |
jdaggett@1662 | 4373 | |
jdaggett@1662 | 4374 | <tr> |
jdaggett@1662 | 4375 | <td>Initial: |
jdaggett@1662 | 4376 | |
jdaggett@1662 | 4377 | <td>normal |
jdaggett@1662 | 4378 | |
jdaggett@1662 | 4379 | <tr> |
jdaggett@1662 | 4380 | <td>Applies to: |
jdaggett@1662 | 4381 | |
jdaggett@1662 | 4382 | <td>all elements |
jdaggett@1662 | 4383 | |
jdaggett@1662 | 4384 | <tr> |
jdaggett@1662 | 4385 | <td>Inherited: |
jdaggett@1662 | 4386 | |
jdaggett@1662 | 4387 | <td>yes |
jdaggett@1662 | 4388 | |
jdaggett@1662 | 4389 | <tr> |
jdaggett@1662 | 4390 | <td>Percentages: |
jdaggett@1662 | 4391 | |
jdaggett@1662 | 4392 | <td>N/A |
jdaggett@1662 | 4393 | |
jdaggett@1662 | 4394 | <tr> |
jdaggett@1662 | 4395 | <td>Media: |
jdaggett@1662 | 4396 | |
jdaggett@1662 | 4397 | <td>visual |
jdaggett@1662 | 4398 | |
jdaggett@1662 | 4399 | <tr> |
jdaggett@1662 | 4400 | <td>Computed value: |
jdaggett@1662 | 4401 | |
jdaggett@1662 | 4402 | <td>as specified |
jdaggett@1662 | 4403 | </table> |
jdaggett@1662 | 4404 | |
jdaggett@6693 | 4405 | <p>Allows control of glyph substitution and sizing in East Asian text. |
jdaggett@1662 | 4406 | |
jdaggett@1662 | 4407 | <pre |
jdaggett@3460 | 4408 | class=prod><dfn id=lteast-asian-variant-valuesgt><var><east-asian-variant-values></var></dfn> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]</pre> |
jdaggett@1662 | 4409 | |
jdaggett@1662 | 4410 | <pre |
jdaggett@1732 | 4411 | class=prod><dfn id=lteast-asian-width-valuesgt><var><east-asian-width-values></var></dfn> = [ full-width | proportional-width ]</pre> |
jdaggett@1732 | 4412 | |
jdaggett@1732 | 4413 | <p>Individual values have the following meanings: |
jdaggett@1662 | 4414 | |
jdaggett@1662 | 4415 | <dl> |
jdaggett@5809 | 4416 | <dt><dfn id=normal2>normal</dfn> |
jdaggett@5809 | 4417 | |
jdaggett@5809 | 4418 | <dd>None of the features listed below are enabled. |
jdaggett@5809 | 4419 | |
jdaggett@1662 | 4420 | <dt><dfn id=jis78>jis78</dfn> |
jdaggett@1662 | 4421 | |
jdaggett@6436 | 4422 | <dd>Enables rendering of JIS78 forms (OpenType feature: <span |
jdaggett@6436 | 4423 | class=tag>jp78</span>). |
jdaggett@1662 | 4424 | </dl> |
jdaggett@1662 | 4425 | |
jdaggett@1662 | 4426 | <div class=featex><img alt="JIS78 form example" src=jp78.png></div> |
jdaggett@1662 | 4427 | |
jdaggett@1662 | 4428 | <dl> |
jdaggett@1662 | 4429 | <dt><dfn id=jis83>jis83</dfn> |
jdaggett@1662 | 4430 | |
jdaggett@6436 | 4431 | <dd>Enables rendering of JIS83 forms (OpenType feature: <span |
jdaggett@6436 | 4432 | class=tag>jp83</span>). |
jdaggett@1662 | 4433 | |
jdaggett@1662 | 4434 | <dt><dfn id=jis90>jis90</dfn> |
jdaggett@1662 | 4435 | |
jdaggett@6436 | 4436 | <dd>Enables rendering of JIS90 forms (OpenType feature: <span |
jdaggett@6436 | 4437 | class=tag>jp90</span>). |
jdaggett@1662 | 4438 | |
jdaggett@1662 | 4439 | <dt><dfn id=jis04>jis04</dfn> |
jdaggett@1662 | 4440 | |
jdaggett@6436 | 4441 | <dd>Enables rendering of JIS2004 forms (OpenType feature: <span |
jdaggett@6436 | 4442 | class=tag>jp04</span>). |
jdaggett@6693 | 4443 | <p>The various JIS variants reflect the glyph forms defined in different |
jdaggett@6693 | 4444 | Japanese national standards. Fonts generally include glyphs defined by |
jdaggett@6693 | 4445 | the most recent national standard but it's sometimes necessary to use |
jdaggett@6693 | 4446 | older variants, to match signage for example.</p> |
jdaggett@1662 | 4447 | |
jdaggett@2504 | 4448 | <dt><dfn id=simplified>simplified</dfn> |
jdaggett@2504 | 4449 | |
jdaggett@6436 | 4450 | <dd>Enables rendering of simplified forms (OpenType feature: <span |
jdaggett@6436 | 4451 | class=tag>smpl</span>). |
jdaggett@6693 | 4452 | <p>The ‘<a href="#simplified"><code |
jdaggett@6693 | 4453 | class=property>simplified</code></a>’ and ‘<a |
jdaggett@6693 | 4454 | href="#traditional"><code class=property>traditional</code></a>’ |
jdaggett@6693 | 4455 | values allow control over the glyph forms for characters which have been |
jdaggett@6693 | 4456 | simplified over time but for which the older, traditional form is still |
jdaggett@6693 | 4457 | used in some contexts. The exact set of characters and glyph forms will |
jdaggett@6693 | 4458 | vary to some degree by context for which a given font was designed.</p> |
jdaggett@2504 | 4459 | |
jdaggett@2504 | 4460 | <dt><dfn id=traditional>traditional</dfn> |
jdaggett@2504 | 4461 | |
jdaggett@6436 | 4462 | <dd>Enables rendering of traditional forms (OpenType feature: <span |
jdaggett@6436 | 4463 | class=tag>trad</span>). |
jdaggett@1662 | 4464 | </dl> |
jdaggett@1662 | 4465 | |
jdaggett@1662 | 4466 | <div class=featex><img alt="tradtional form example" src=trad.png></div> |
jdaggett@1662 | 4467 | |
jdaggett@1662 | 4468 | <dl> |
jdaggett@1662 | 4469 | <dt><dfn id=full-width>full-width</dfn> |
jdaggett@1662 | 4470 | |
jdaggett@6436 | 4471 | <dd>Enables rendering of full-width variants (OpenType feature: <span |
jdaggett@6436 | 4472 | class=tag>fwid</span>). |
jdaggett@1662 | 4473 | |
jdaggett@1662 | 4474 | <dt><dfn id=proportional-width>proportional-width</dfn> |
jdaggett@1662 | 4475 | |
jdaggett@1662 | 4476 | <dd>Enables rendering of proportionally-spaced variants (OpenType feature: |
jdaggett@6436 | 4477 | <span class=tag>pwid</span>). |
jdaggett@1662 | 4478 | </dl> |
jdaggett@1662 | 4479 | |
jdaggett@1662 | 4480 | <div class=featex><img alt="proportionally spaced Japanese example" |
jdaggett@1662 | 4481 | src=pwid.png></div> |
jdaggett@1662 | 4482 | |
jdaggett@3638 | 4483 | <dl> |
jdaggett@3638 | 4484 | <dt><dfn id=ruby>ruby</dfn> |
jdaggett@3638 | 4485 | |
jdaggett@6436 | 4486 | <dd>Enables display of ruby variant glyphs (OpenType feature: <span |
jdaggett@6436 | 4487 | class=tag>ruby</span>). Since ruby text is generally smaller than the |
jdaggett@3638 | 4488 | associated body text, font designers can design special glyphs for use |
jdaggett@3638 | 4489 | with ruby that are more readable than scaled down versions of the default |
jdaggett@3638 | 4490 | glyphs. Only glyph selection is affected, there is no associated font |
jdaggett@3638 | 4491 | scaling or other change that affects line layout. The red ruby text below |
jdaggett@3638 | 4492 | is shown with default glyphs (top) and with ruby variant glyphs (bottom). |
jdaggett@3638 | 4493 | Note the slight difference in stroke thickness. |
jdaggett@3638 | 4494 | </dl> |
jdaggett@3638 | 4495 | |
jdaggett@3638 | 4496 | <div class=featex><img alt="ruby variant example" src=rubyshinkansen.png></div> |
jdaggett@3638 | 4497 | |
jdaggett@2118 | 4498 | <h3 id=font-variant-prop><span class=secno>6.11 </span>Overall shorthand |
jdaggett@1856 | 4499 | for font rendering: the <a href="#propdef-font-variant">font-variant</a> |
jdaggett@1662 | 4500 | property</h3> |
jdaggett@1662 | 4501 | |
jdaggett@6436 | 4502 | <table class=propdef id=namefont-variantvaluenormal-none-ltcommo> |
jdaggett@1662 | 4503 | <tbody> |
jdaggett@1662 | 4504 | <tr> |
jdaggett@1662 | 4505 | <td>Name: |
jdaggett@1662 | 4506 | |
jdaggett@1662 | 4507 | <td><dfn id=propdef-font-variant>font-variant</dfn> |
jdaggett@1662 | 4508 | |
jdaggett@1662 | 4509 | <tr> |
jdaggett@1662 | 4510 | <td>Value: |
jdaggett@1662 | 4511 | |
jdaggett@6436 | 4512 | <td>normal | none | [ <common-lig-values> || |
jdaggett@3460 | 4513 | <discretionary-lig-values> || <historical-lig-values> || |
jdaggett@3041 | 4514 | <contextual-alt-values> || stylistic(<feature-value-name>) |
jdaggett@5833 | 4515 | || historical-forms || styleset(<feature-value-name>#) || |
jdaggett@5833 | 4516 | character-variant(<feature-value-name>#) || |
jdaggett@5833 | 4517 | swash(<feature-value-name>) || |
jdaggett@3041 | 4518 | ornaments(<feature-value-name>) || |
jdaggett@4545 | 4519 | annotation(<feature-value-name>) || [ small-caps | all-small-caps |
jdaggett@6648 | 4520 | | petite-caps | all-petite-caps | unicase | titling-caps ] || |
jdaggett@2509 | 4521 | <numeric-figure-values> || <numeric-spacing-values> || |
jdaggett@3638 | 4522 | <numeric-fraction-values> || ordinal || slashed-zero || |
jdaggett@3638 | 4523 | <east-asian-variant-values> || <east-asian-width-values> || |
jdaggett@3638 | 4524 | ruby ] |
jdaggett@1662 | 4525 | |
jdaggett@1662 | 4526 | <tr> |
jdaggett@1662 | 4527 | <td>Initial: |
jdaggett@1662 | 4528 | |
jdaggett@1662 | 4529 | <td>normal |
jdaggett@1662 | 4530 | |
jdaggett@1662 | 4531 | <tr> |
jdaggett@1662 | 4532 | <td>Applies to: |
jdaggett@1662 | 4533 | |
jdaggett@1662 | 4534 | <td>all elements |
jdaggett@1662 | 4535 | |
jdaggett@1662 | 4536 | <tr> |
jdaggett@1662 | 4537 | <td>Inherited: |
jdaggett@1662 | 4538 | |
jdaggett@1662 | 4539 | <td>yes |
jdaggett@1662 | 4540 | |
jdaggett@1662 | 4541 | <tr> |
jdaggett@1662 | 4542 | <td>Percentages: |
jdaggett@1662 | 4543 | |
jdaggett@1662 | 4544 | <td>N/A |
jdaggett@1662 | 4545 | |
jdaggett@1662 | 4546 | <tr> |
jdaggett@1662 | 4547 | <td>Media: |
jdaggett@1662 | 4548 | |
jdaggett@1662 | 4549 | <td>visual |
jdaggett@1662 | 4550 | |
jdaggett@1662 | 4551 | <tr> |
jdaggett@1662 | 4552 | <td>Computed value: |
jdaggett@1662 | 4553 | |
jdaggett@1662 | 4554 | <td>as specified |
jdaggett@1662 | 4555 | </table> |
jdaggett@1662 | 4556 | |
jdaggett@5809 | 4557 | <p>The value ‘<a href="#normal2"><code |
jdaggett@5809 | 4558 | class=property>normal</code></a>’ resets all other font feature |
jdaggett@6436 | 4559 | properties to their inital value. The ‘<code |
jdaggett@6436 | 4560 | class=property>none</code>’ value sets ‘<a |
jdaggett@6436 | 4561 | href="#propdef-font-variant-ligatures"><code |
jdaggett@6436 | 4562 | class=property>font-variant-ligatures</code></a>’ to ‘<code |
jdaggett@6436 | 4563 | class=property>none</code>’ and resets all other font feature properties |
jdaggett@6436 | 4564 | to their initial value. Like other shorthands, using ‘<a |
jdaggett@6436 | 4565 | href="#propdef-font-variant"><code |
jdaggett@6436 | 4566 | class=property>font-variant</code></a>’ resets unspecified font-variant |
jdaggett@6436 | 4567 | subproperties to their initial values. It does not reset the values of |
jdaggett@6436 | 4568 | either ‘<a href="#propdef-font-language-override"><code |
jdaggett@4624 | 4569 | class=property>font-language-override</code></a>’ or ‘<a |
jdaggett@4624 | 4570 | href="#propdef-font-feature-settings"><code |
jdaggett@4624 | 4571 | class=property>font-feature-settings</code></a>’. |
jdaggett@1662 | 4572 | |
jdaggett@2118 | 4573 | <h3 id=font-feature-settings-prop><span class=secno>6.12 </span>Low-level |
jdaggett@2509 | 4574 | font feature settings control: the <a |
jdaggett@1662 | 4575 | href="#propdef-font-feature-settings">font-feature-settings</a> property</h3> |
jdaggett@1662 | 4576 | |
jdaggett@4624 | 4577 | <table class=propdef id=namefont-feature-settingsvaluenormal-ltf> |
jdaggett@1662 | 4578 | <tbody> |
jdaggett@1662 | 4579 | <tr> |
jdaggett@1662 | 4580 | <td>Name: |
jdaggett@1662 | 4581 | |
jdaggett@1662 | 4582 | <td><dfn id=propdef-font-feature-settings>font-feature-settings</dfn> |
jdaggett@1662 | 4583 | |
jdaggett@1662 | 4584 | <tr> |
jdaggett@1662 | 4585 | <td>Value: |
jdaggett@1662 | 4586 | |
jdaggett@5833 | 4587 | <td>normal | <feature-tag-value># |
jdaggett@1662 | 4588 | |
jdaggett@1662 | 4589 | <tr> |
jdaggett@1662 | 4590 | <td>Initial: |
jdaggett@1662 | 4591 | |
jdaggett@1662 | 4592 | <td>normal |
jdaggett@1662 | 4593 | |
jdaggett@1662 | 4594 | <tr> |
jdaggett@1662 | 4595 | <td>Applies to: |
jdaggett@1662 | 4596 | |
jdaggett@1662 | 4597 | <td>all elements |
jdaggett@1662 | 4598 | |
jdaggett@1662 | 4599 | <tr> |
jdaggett@1662 | 4600 | <td>Inherited: |
jdaggett@1662 | 4601 | |
jdaggett@1662 | 4602 | <td>yes |
jdaggett@1662 | 4603 | |
jdaggett@1662 | 4604 | <tr> |
jdaggett@1662 | 4605 | <td>Percentages: |
jdaggett@1662 | 4606 | |
jdaggett@1662 | 4607 | <td>N/A |
jdaggett@1662 | 4608 | |
jdaggett@1662 | 4609 | <tr> |
jdaggett@1662 | 4610 | <td>Media: |
jdaggett@1662 | 4611 | |
jdaggett@1662 | 4612 | <td>visual |
jdaggett@1662 | 4613 | |
jdaggett@1662 | 4614 | <tr> |
jdaggett@1662 | 4615 | <td>Computed value: |
jdaggett@1662 | 4616 | |
jdaggett@1662 | 4617 | <td>as specified |
jdaggett@1662 | 4618 | </table> |
jdaggett@2474 | 4619 | |
jdaggett@2474 | 4620 | <p>This property provides low-level control over OpenType font features. It |
jdaggett@2474 | 4621 | is intended as a way of providing access to font features that are not |
jdaggett@5809 | 4622 | widely used but are needed for a particular use case. A value of ‘<a |
jdaggett@5809 | 4623 | href="#normal2"><code class=property>normal</code></a>’ means that no |
jdaggett@5809 | 4624 | change in glyph selection or positioning occurs due to this property. |
jdaggett@2474 | 4625 | |
jdaggett@2474 | 4626 | <p> |
jdaggett@2474 | 4627 | |
jdaggett@2474 | 4628 | <pre>/* enable small caps and use second swash alternate */ |
jdaggett@2509 | 4629 | font-feature-settings: "smcp", "swsh" 2;</pre> |
jdaggett@2509 | 4630 | |
jdaggett@2509 | 4631 | <p>Feature tag values have the following syntax: |
jdaggett@2474 | 4632 | |
jdaggett@2474 | 4633 | <pre |
jdaggett@2515 | 4634 | class=prod><dfn id=ltfeature-tag-valuegt><var><feature-tag-value></var></dfn> = <string> [ <integer> | on | off ]?</pre> |
jdaggett@2509 | 4635 | |
jdaggett@5532 | 4636 | <p>The <string> is a case-sensitive OpenType feature tag. As |
jdaggett@5532 | 4637 | specified in the OpenType specification, feature tags contain four ASCII |
jdaggett@5532 | 4638 | characters. Tag strings longer or shorter than four characters, or |
jdaggett@5596 | 4639 | containing characters outside the U+20–7E codepoint range are invalid. |
jdaggett@5532 | 4640 | User agents must not use a feature tag created by truncating or padding |
jdaggett@5532 | 4641 | the string to four characters. Feature tags need only match a feature tag |
jdaggett@5532 | 4642 | defined in the font, they are not limited to explicitly registered |
jdaggett@5532 | 4643 | OpenType features. Fonts defining custom feature tags should follow the <a |
jdaggett@2474 | 4644 | href="http://www.microsoft.com/typography/otspec/featuretags.htm">tag name |
jdaggett@2474 | 4645 | rules</a> defined in the OpenType specification <a |
jdaggett@1662 | 4646 | href="#OPENTYPE-FEATURES" |
jdaggett@2474 | 4647 | rel=biblioentry>[OPENTYPE-FEATURES]<!--{{!OPENTYPE-FEATURES}}--></a>. |
jdaggett@2474 | 4648 | Feature tags not present in the font are ignored; a user agent must not |
jdaggett@2474 | 4649 | attempt to synthesize fallback behavior based on these feature tags. |
jdaggett@2474 | 4650 | |
jdaggett@6436 | 4651 | <p>This means that explicitly disabling the <span class=tag>kern</span> |
jdaggett@6436 | 4652 | feature will not affect the application of kerning data found in the |
jdaggett@6436 | 4653 | ‘<code class=property>kern</code>’ table (as opposed to kerning data |
jdaggett@6436 | 4654 | associated with the <span class=tag>kern</span> feature in the ‘<code |
jdaggett@5946 | 4655 | class=property>GPOS</code>’ table). Authors should use the ‘<a |
jdaggett@5946 | 4656 | href="#propdef-font-kerning"><code |
jdaggett@5946 | 4657 | class=property>font-kerning</code></a>’ property to explictly enable or |
jdaggett@5946 | 4658 | disable kerning since this property affects both types of kerning. |
jdaggett@5946 | 4659 | |
jdaggett@2509 | 4660 | <p>If present, a value indicates an index used for glyph selection. An |
jdaggett@2509 | 4661 | <integer> value must be 0 or greater. A value of 0 indicates that |
jdaggett@2509 | 4662 | the feature is disabled. For boolean features, a value of 1 enables the |
jdaggett@2509 | 4663 | feature. For non-boolean features, a value of 1 or greater enables the |
jdaggett@2509 | 4664 | feature and indicates the feature selection index. A value of ‘<code |
jdaggett@2509 | 4665 | class=property>on</code>’ is synonymous with 1 and ‘<code |
jdaggett@2509 | 4666 | class=property>off</code>’ is synonymous with 0. If the value is |
jdaggett@2509 | 4667 | omitted, a value of 1 is assumed. |
jdaggett@2474 | 4668 | |
jdaggett@2474 | 4669 | <pre> |
jdaggett@2509 | 4670 | font-feature-settings: "dlig" 1; /* dlig=1 enable discretionary ligatures */ |
jdaggett@2509 | 4671 | font-feature-settings: "smcp" on; /* smcp=1 enable small caps */ |
jdaggett@2515 | 4672 | font-feature-settings: 'c2sc'; /* c2sc=1 enable caps to small caps */ |
jdaggett@2509 | 4673 | font-feature-settings: "liga" off; /* liga=0 no common ligatures */ |
jdaggett@2515 | 4674 | font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms */ |
jdaggett@5530 | 4675 | font-feature-settings: "tnum" "hist"; /* invalid, need a comma-delimited list */ |
jdaggett@5530 | 4676 | font-feature-settings: "palin" off; /* good idea but invalid tagname */ |
jdaggett@2509 | 4677 | font-feature-settings: "PKRN"; /* PKRN=1 enable custom feature */ |
jdaggett@5530 | 4678 | font-feature-settings: dlig; /* invalid, tag must be a string */ |
jdaggett@2474 | 4679 | </pre> |
jdaggett@1662 | 4680 | |
jdaggett@4624 | 4681 | <p>Authors should generally use ‘<a href="#propdef-font-variant"><code |
jdaggett@4624 | 4682 | class=property>font-variant</code></a>’ and its related subproperties |
jdaggett@4624 | 4683 | whenever possible and only use this property for special cases where its |
jdaggett@4624 | 4684 | use is the only way of accessing a particular infrequently used font |
jdaggett@4624 | 4685 | feature. |
jdaggett@2474 | 4686 | |
jdaggett@2474 | 4687 | <p>Although specifically defined for OpenType feature tags, feature tags |
jdaggett@2474 | 4688 | for other modern font formats that support font features may be added in |
jdaggett@5530 | 4689 | the future. Where possible, features defined for other font formats should |
jdaggett@5530 | 4690 | attempt to follow the pattern of registered OpenType tags. |
jdaggett@2509 | 4691 | |
jdaggett@1662 | 4692 | <div class=example> |
jdaggett@1662 | 4693 | <p>The Japanese text below will be rendered with half-width kana |
jdaggett@1662 | 4694 | characters:</p> |
jdaggett@1662 | 4695 | |
jdaggett@1662 | 4696 | <pre lang=ja> |
jdaggett@2509 | 4697 | body { font-feature-settings: "hwid"; /* Half-width OpenType feature */ } |
jdaggett@1662 | 4698 | |
jdaggett@1662 | 4699 | <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 | 4700 | </pre> |
jdaggett@1662 | 4701 | </div> |
jdaggett@1662 | 4702 | |
jdaggett@2118 | 4703 | <h3 id=font-language-override-prop><span class=secno>6.13 </span>Font |
jdaggett@1732 | 4704 | language override: the <a |
jdaggett@1732 | 4705 | href="#propdef-font-language-override">font-language-override</a> property</h3> |
jdaggett@1732 | 4706 | |
jdaggett@5809 | 4707 | <table class=propdef id=namefont-language-overridevaluenormal-lt> |
jdaggett@1662 | 4708 | <tbody> |
jdaggett@1662 | 4709 | <tr> |
jdaggett@1662 | 4710 | <td>Name: |
jdaggett@1662 | 4711 | |
jdaggett@1732 | 4712 | <td><dfn id=propdef-font-language-override>font-language-override</dfn> |
jdaggett@1662 | 4713 | |
jdaggett@1662 | 4714 | <tr> |
jdaggett@1662 | 4715 | <td>Value: |
jdaggett@1662 | 4716 | |
jdaggett@5809 | 4717 | <td>normal | <string> |
jdaggett@1662 | 4718 | |
jdaggett@1662 | 4719 | <tr> |
jdaggett@1662 | 4720 | <td>Initial: |
jdaggett@1662 | 4721 | |
jdaggett@1662 | 4722 | <td>normal |
jdaggett@1662 | 4723 | |
jdaggett@1662 | 4724 | <tr> |
jdaggett@1662 | 4725 | <td>Applies to: |
jdaggett@1662 | 4726 | |
jdaggett@1662 | 4727 | <td>all elements |
jdaggett@1662 | 4728 | |
jdaggett@1662 | 4729 | <tr> |
jdaggett@1662 | 4730 | <td>Inherited: |
jdaggett@1662 | 4731 | |
jdaggett@1662 | 4732 | <td>yes |
jdaggett@1662 | 4733 | |
jdaggett@1662 | 4734 | <tr> |
jdaggett@1662 | 4735 | <td>Percentages: |
jdaggett@1662 | 4736 | |
jdaggett@1662 | 4737 | <td>N/A |
jdaggett@1662 | 4738 | |
jdaggett@1662 | 4739 | <tr> |
jdaggett@1662 | 4740 | <td>Media: |
jdaggett@1662 | 4741 | |
jdaggett@1662 | 4742 | <td>visual |
jdaggett@1662 | 4743 | |
jdaggett@1662 | 4744 | <tr> |
jdaggett@1662 | 4745 | <td>Computed value: |
jdaggett@1662 | 4746 | |
jdaggett@1662 | 4747 | <td>as specified |
jdaggett@1662 | 4748 | </table> |
jdaggett@1662 | 4749 | |
jdaggett@5809 | 4750 | <p>The value of ‘<a href="#normal2"><code |
jdaggett@5809 | 4751 | class=property>normal</code></a>’ implies that when rendering with |
jdaggett@5809 | 4752 | OpenType fonts the language of the document is used to infer the OpenType |
jdaggett@5809 | 4753 | language system, used to select language specific features when rendering. |
jdaggett@5809 | 4754 | The value of the <string> is a single three-letter OpenType <a |
jdaggett@1662 | 4755 | href="http://www.microsoft.com/typography/otspec/languagetags.htm">language |
jdaggett@1662 | 4756 | system tag</a>, defined in the layout tag registry of the OpenType |
jdaggett@1662 | 4757 | specification. |
jdaggett@1662 | 4758 | |
jdaggett@1662 | 4759 | <div class=example> |
jdaggett@7179 | 4760 | <p>The <a href="http://www.un.org/en/documents/udhr/index.shtml">Universal |
jdaggett@1662 | 4761 | Declaration of Human Rights</a> has been translated into a wide variety |
jdaggett@1662 | 4762 | of languages. In Turkish, Article 9 of this document might be marked up |
jdaggett@1662 | 4763 | as below:</p> |
jdaggett@1662 | 4764 | |
jdaggett@1662 | 4765 | <pre lang=tr><body lang="tr"> |
jdaggett@1662 | 4766 | |
jdaggett@1662 | 4767 | <h4>Madde 9</h4> |
jdaggett@1662 | 4768 | <p>Hiç kimse keyfi olarak tutuklanamaz, alıkonulanamaz veya sürülemez.</p> |
jdaggett@1662 | 4769 | </pre> |
jdaggett@1662 | 4770 | |
jdaggett@1662 | 4771 | <p>Here the user agent uses the value of the ‘<code |
jdaggett@1662 | 4772 | class=property>lang</code>’ attribute when rendering text and |
jdaggett@1662 | 4773 | appropriately renders this text without ‘<code |
jdaggett@4624 | 4774 | class=property>fi</code>’ ligatures. There is no need to use the ‘<a |
jdaggett@4624 | 4775 | href="#propdef-font-language-override"><code |
jdaggett@4624 | 4776 | class=property>font-language-override</code></a>’ property.</p> |
jdaggett@1662 | 4777 | |
jdaggett@1662 | 4778 | <p>However, a given font may lack support for a specific language. In this |
jdaggett@1662 | 4779 | situation authors may need to use the typographic conventions of a |
jdaggett@1662 | 4780 | related language that are supported by that font:</p> |
jdaggett@1662 | 4781 | |
jdaggett@1662 | 4782 | <pre lang=mk><body lang="mk"> <!-- Macedonian lang code --> |
jdaggett@1662 | 4783 | |
jdaggett@1732 | 4784 | body { font-language-override: "SRB"; /* Serbian OpenType language tag */ } |
jdaggett@1662 | 4785 | |
jdaggett@1662 | 4786 | <h4>Члeн 9</h4> |
jdaggett@1662 | 4787 | <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 | 4788 | |
jdaggett@1662 | 4789 | </pre> |
jdaggett@1662 | 4790 | |
jdaggett@1662 | 4791 | <p>The Macedonian text here will be rendered using Serbian typographic |
jdaggett@1662 | 4792 | conventions, with the assumption that the font specified supports |
jdaggett@1662 | 4793 | Serbian.</p> |
jdaggett@1662 | 4794 | </div> |
jdaggett@1662 | 4795 | |
jdaggett@6176 | 4796 | <p><a id=rendering-considerations></a> |
jdaggett@6176 | 4797 | |
jdaggett@6699 | 4798 | <h2 id=font-feature-resolution><span class=secno>7 </span>Font Feature |
jdaggett@6699 | 4799 | Resolution</h2> |
jdaggett@6176 | 4800 | |
jdaggett@6176 | 4801 | <p>As described in the previous section, font features can be enabled in a |
jdaggett@6176 | 4802 | variety of ways, either via the use of ‘<a |
jdaggett@6176 | 4803 | href="#propdef-font-variant"><code |
jdaggett@6176 | 4804 | class=property>font-variant</code></a>’ or ‘<a |
jdaggett@6176 | 4805 | href="#propdef-font-feature-settings"><code |
jdaggett@6176 | 4806 | class=property>font-feature-settings</code></a>’ in a style rule or |
jdaggett@7096 | 4807 | within an <code>@font-face</code> rule. The resolution order for the union |
jdaggett@7096 | 4808 | of these settings is defined below. Features defined via CSS properties |
jdaggett@7096 | 4809 | are applied on top of layout engine default features. |
jdaggett@6176 | 4810 | |
jdaggett@6699 | 4811 | <h3 id=default-features><span class=secno>7.1 </span>Default features</h3> |
jdaggett@6699 | 4812 | |
jdaggett@6176 | 4813 | <p>For OpenType fonts, user agents must enable the default features defined |
jdaggett@6436 | 4814 | in the OpenType documentation for a given script and writing mode. |
jdaggett@6436 | 4815 | Required ligatures, common ligatures and contextual forms must be enabled |
jdaggett@6436 | 4816 | by default (OpenType features: <span class=tag>rlig, liga, clig, |
jdaggett@6436 | 4817 | calt</span>), along with localized forms (OpenType feature: <span |
jdaggett@6436 | 4818 | class=tag>locl</span>), and features required for proper display of |
jdaggett@6436 | 4819 | composed characters and marks (OpenType features: <span class=tag>ccmp, |
jdaggett@6436 | 4820 | mark, mkmk</span>). These features must always be enabled, even when the |
jdaggett@6176 | 4821 | value of the ‘<a href="#propdef-font-variant"><code |
jdaggett@6176 | 4822 | class=property>font-variant</code></a>’ and ‘<a |
jdaggett@6176 | 4823 | href="#propdef-font-feature-settings"><code |
jdaggett@6176 | 4824 | class=property>font-feature-settings</code></a>’ properties is ‘<a |
jdaggett@6436 | 4825 | href="#normal2"><code class=property>normal</code></a>’. Individual |
jdaggett@6436 | 4826 | features are only disabled when explicitly overridden by the author, when |
jdaggett@6436 | 4827 | ‘<a href="#propdef-font-variant-ligatures"><code |
jdaggett@6176 | 4828 | class=property>font-variant-ligatures</code></a>’ is set to ‘<a |
jdaggett@6176 | 4829 | href="#no-common-ligatures"><code |
jdaggett@6176 | 4830 | class=property>no-common-ligatures</code></a>’ for example. For handling |
jdaggett@6176 | 4831 | complex scripts such as <a |
jdaggett@6176 | 4832 | href="http://www.microsoft.com/typography/otfntdev/arabicot/features.aspx">Arabic</a>, |
jdaggett@6176 | 4833 | <a |
jdaggett@6176 | 4834 | href="http://www.microsoft.com/typography/otfntdev/mongolot/features.htm">Mongolian</a> |
jdaggett@6176 | 4835 | or <a |
jdaggett@6176 | 4836 | href="http://www.microsoft.com/typography/otfntdev/devanot/features.aspx">Devanagari</a> |
jdaggett@6436 | 4837 | additional features are required. For upright text within vertical text |
jdaggett@6436 | 4838 | runs, vertical alternates (OpenType feature: <span class=tag>vert</span>) |
jdaggett@6436 | 4839 | must be enabled. |
jdaggett@1662 | 4840 | |
jdaggett@6699 | 4841 | <h3 id=feature-precedence><span class=secno>7.2 </span>Feature precedence</h3> |
jdaggett@6699 | 4842 | |
jdaggett@3571 | 4843 | <p>General and font specific font feature property settings are resolved in |
jdaggett@6176 | 4844 | the order below, in ascending precedence order. This ordering is used to |
jdaggett@3511 | 4845 | construct a combined list of font features that affect a given text run. |
jdaggett@1662 | 4846 | |
jdaggett@1662 | 4847 | <ol> |
jdaggett@6436 | 4848 | <li>Font features enabled by default, including features required for a |
jdaggett@6436 | 4849 | given script. |
jdaggett@6176 | 4850 | |
jdaggett@7096 | 4851 | <li>If the font is defined via an <code>@font-face</code> rule, the font |
jdaggett@7096 | 4852 | features implied by the font-variant descriptor in the |
jdaggett@7096 | 4853 | <code>@font-face</code> rule. |
jdaggett@7096 | 4854 | |
jdaggett@7096 | 4855 | <li>If the font is defined via an <code>@font-face</code> rule, the font |
jdaggett@7096 | 4856 | features implied by the font-feature-settings descriptor in the |
jdaggett@7096 | 4857 | <code>@font-face</code> rule. |
jdaggett@1662 | 4858 | |
jdaggett@6176 | 4859 | <li>Feature settings determined by properties other than ‘<a |
jdaggett@6176 | 4860 | href="#propdef-font-variant"><code |
jdaggett@6176 | 4861 | class=property>font-variant</code></a>’ or ‘<a |
jdaggett@6176 | 4862 | href="#propdef-font-feature-settings"><code |
jdaggett@6176 | 4863 | class=property>font-feature-settings</code></a>’. For example, setting |
jdaggett@6176 | 4864 | a non-default value for the ‘<code |
jdaggett@6176 | 4865 | class=property>letter-spacing</code>’ property disables ligatures. |
jdaggett@6176 | 4866 | |
jdaggett@4624 | 4867 | <li>Font features implied by the value of the ‘<a |
jdaggett@4624 | 4868 | href="#propdef-font-variant"><code |
jdaggett@4624 | 4869 | class=property>font-variant</code></a>’ property, the related |
jdaggett@4624 | 4870 | font-variant subproperties and any other CSS property that may use |
jdaggett@4624 | 4871 | OpenType features (e.g. the ‘<a href="#propdef-font-kerning"><code |
jdaggett@4624 | 4872 | class=property>font-kerning</code></a>’ property). |
jdaggett@4624 | 4873 | |
jdaggett@4624 | 4874 | <li>Font features implied by the value of ‘<a |
jdaggett@4624 | 4875 | href="#propdef-font-feature-settings"><code |
jdaggett@4624 | 4876 | class=property>font-feature-settings</code></a>’ property. |
jdaggett@1662 | 4877 | </ol> |
jdaggett@1662 | 4878 | |
jdaggett@3511 | 4879 | <p>This ordering allows authors to set up a general set of defaults for |
jdaggett@7096 | 4880 | fonts within their <code>@font-face</code> rules, then override them with |
jdaggett@7096 | 4881 | property settings for specific elements. General property settings |
jdaggett@7096 | 4882 | override the settings in <code>@font-face</code> rules and low-level font |
jdaggett@7096 | 4883 | feature settings override ‘<a href="#propdef-font-variant"><code |
jdaggett@4624 | 4884 | class=property>font-variant</code></a>’ property settings. |
jdaggett@1732 | 4885 | |
jdaggett@1732 | 4886 | <p>For situations where the combined list of font feature settings contains |
jdaggett@3511 | 4887 | more than one value for the same feature, the last value is used. When a |
jdaggett@3511 | 4888 | font lacks support for a given underlying font feature, text is simply |
jdaggett@3511 | 4889 | rendered as if that font feature was not enabled; font fallback does not |
jdaggett@3511 | 4890 | occur and no attempt is made to synthesize the feature except where |
jdaggett@3511 | 4891 | explicitly noted for specific properties. |
jdaggett@1662 | 4892 | |
jdaggett@6699 | 4893 | <h3 id=feature-precedence-examples><span class=secno>7.3 </span>Feature |
jdaggett@6699 | 4894 | precedence examples</h3> |
jdaggett@6699 | 4895 | |
jdaggett@1662 | 4896 | <div class=example> |
jdaggett@1662 | 4897 | <p>With the styles below, numbers are rendered proportionally when used |
jdaggett@1662 | 4898 | within a paragraph but are shown in tabular form within tables of prices:</p> |
jdaggett@1662 | 4899 | |
jdaggett@1662 | 4900 | <pre>body { |
jdaggett@1662 | 4901 | font-variant-numeric: proportional-nums; |
jdaggett@1662 | 4902 | } |
jdaggett@1662 | 4903 | |
jdaggett@1662 | 4904 | table.prices td { |
jdaggett@1662 | 4905 | font-variant-numeric: tabular-nums; |
jdaggett@1662 | 4906 | } |
jdaggett@1662 | 4907 | </pre> |
jdaggett@1662 | 4908 | </div> |
jdaggett@1662 | 4909 | |
jdaggett@1662 | 4910 | <div class=example> |
jdaggett@7096 | 4911 | <p>When the font-variant descriptor is used within an |
jdaggett@7096 | 4912 | <code>@font-face</code> rule, it only applies to the font defined by that |
jdaggett@7096 | 4913 | rule.</p> |
jdaggett@1662 | 4914 | |
jdaggett@1662 | 4915 | <pre>@font-face { |
jdaggett@1662 | 4916 | font-family: MainText; |
jdaggett@2556 | 4917 | src: url(http://example.com/font.ttf); |
jdaggett@1662 | 4918 | font-variant: oldstyle-nums proportional-nums styleset(1,3); |
jdaggett@1662 | 4919 | } |
jdaggett@1662 | 4920 | |
jdaggett@1662 | 4921 | body { |
jdaggett@1662 | 4922 | font-family: MainText, Helvetica; |
jdaggett@1662 | 4923 | } |
jdaggett@1662 | 4924 | |
jdaggett@1662 | 4925 | table.prices td { |
jdaggett@1662 | 4926 | font-variant-numeric: tabular-nums; |
jdaggett@1662 | 4927 | } |
jdaggett@1662 | 4928 | </pre> |
jdaggett@1662 | 4929 | |
jdaggett@1662 | 4930 | <p>In this case, old-style numerals will be used throughout but only where |
jdaggett@1662 | 4931 | the font "MainText" is used. Just as in the previous example, tabular |
jdaggett@4624 | 4932 | values will be used in price tables since ‘<a |
jdaggett@4624 | 4933 | href="#tabular-nums"><code class=property>tabular-nums</code></a>’ |
jdaggett@4624 | 4934 | appears in a general style rule and its use is mutually exclusive with |
jdaggett@4624 | 4935 | ‘<a href="#proportional-nums"><code |
jdaggett@4624 | 4936 | class=property>proportional-nums</code></a>’. Stylistic alternate sets |
jdaggett@4624 | 4937 | will only be used where MainText is used.</p> |
jdaggett@1662 | 4938 | </div> |
jdaggett@1662 | 4939 | |
jdaggett@1662 | 4940 | <div class=example> |
jdaggett@7096 | 4941 | <p>The <code>@font-face</code> rule can also be used to access font |
jdaggett@7096 | 4942 | features in locally available fonts via the use of local() in the ‘<a |
jdaggett@4624 | 4943 | href="#descdef-src"><code class=property>src</code></a>’ descriptor of |
jdaggett@7096 | 4944 | the <code>@font-face</code> definition:</p> |
jdaggett@1662 | 4945 | |
jdaggett@1662 | 4946 | <pre>@font-face { |
jdaggett@1662 | 4947 | font-family: BodyText; |
jdaggett@1662 | 4948 | src: local("HiraMaruPro-W4"); |
jdaggett@1662 | 4949 | font-variant: proportional-width; |
jdaggett@2509 | 4950 | font-feature-settings: "ital"; /* Latin italics within CJK text feature */ |
jdaggett@1662 | 4951 | } |
jdaggett@1662 | 4952 | |
jdaggett@1662 | 4953 | body { font-family: BodyText, serif; } |
jdaggett@1662 | 4954 | </pre> |
jdaggett@1662 | 4955 | |
jdaggett@1662 | 4956 | <p>If available, a Japanese font "Hiragino Maru Gothic" will be used. When |
jdaggett@1662 | 4957 | text rendering occurs, Japanese kana will be proportionally spaced and |
jdaggett@1662 | 4958 | Latin text will be italicised. Text rendered with the fallback serif font |
jdaggett@1662 | 4959 | will use default rendering properties.</p> |
jdaggett@1662 | 4960 | </div> |
jdaggett@1662 | 4961 | |
jdaggett@1662 | 4962 | <div class=example> |
jdaggett@3460 | 4963 | <p>In the example below, discretionary ligatures are enabled only for a |
jdaggett@1662 | 4964 | downloadable font but are disabled within spans of class "special":</p> |
jdaggett@1662 | 4965 | |
jdaggett@1662 | 4966 | <pre>@font-face { |
jdaggett@1662 | 4967 | font-family: main; |
jdaggett@1662 | 4968 | src: url(fonts/ffmeta.woff) format("woff"); |
jdaggett@3460 | 4969 | font-variant: discretionary-ligatures; |
jdaggett@1662 | 4970 | } |
jdaggett@1662 | 4971 | |
jdaggett@1662 | 4972 | body { font-family: main, Helvetica; } |
jdaggett@3460 | 4973 | span.special { font-variant-ligatures: no-discretionary-ligatures; } |
jdaggett@1662 | 4974 | </pre> |
jdaggett@1662 | 4975 | |
jdaggett@7096 | 4976 | <p>Adding an discretionary style rule with the <code>@font-face</code> |
jdaggett@7096 | 4977 | above:</p> |
jdaggett@1662 | 4978 | |
jdaggett@1662 | 4979 | <pre>body { font-family: main, Helvetica; } |
jdaggett@2509 | 4980 | span { font-feature-settings: "dlig"; } |
jdaggett@3460 | 4981 | span.special { font-variant-ligatures: no-discretionary-ligatures; } |
jdaggett@1662 | 4982 | </pre> |
jdaggett@1662 | 4983 | |
jdaggett@3460 | 4984 | <p>Within spans of class "special", discretionary ligatures <em>will</em> |
jdaggett@4624 | 4985 | be rendered. This is because both the ‘<a |
jdaggett@4624 | 4986 | href="#propdef-font-feature-settings"><code |
jdaggett@4624 | 4987 | class=property>font-feature-settings</code></a>’ and ‘<a |
jdaggett@4624 | 4988 | href="#propdef-font-variant-ligatures"><code |
jdaggett@4624 | 4989 | class=property>font-variant-ligatures</code></a>’ properties apply to |
jdaggett@4624 | 4990 | these spans. Although the ‘<code class=css>no-discretionary |
jdaggett@4624 | 4991 | ligatures</code>’ setting of ‘<a |
jdaggett@4624 | 4992 | href="#propdef-font-variant-ligatures"><code |
jdaggett@4624 | 4993 | class=property>font-variant-ligatures</code></a>’ effectively disables |
jdaggett@6436 | 4994 | the OpenType <span class=tag>dlig</span> feature, because the ‘<a |
jdaggett@4624 | 4995 | href="#propdef-font-feature-settings"><code |
jdaggett@4624 | 4996 | class=property>font-feature-settings</code></a>’ is resolved after |
jdaggett@4624 | 4997 | that, the ‘<code class=property>dlig</code>’ value reenables |
jdaggett@4624 | 4998 | discretionary ligatures.</p> |
jdaggett@1662 | 4999 | </div> |
jdaggett@1244 | 5000 | |
jdaggett@7021 | 5001 | <h2 id=object-model><span class=secno>8 </span>Object Model</h2> |
jdaggett@7021 | 5002 | |
jdaggett@7021 | 5003 | <p>The contents of <code>@font-face</code> and |
jdaggett@7021 | 5004 | <code>@font-feature-values</code> rules can be accessed via the following |
jdaggett@7021 | 5005 | extensions to the CSS Object Model. |
jdaggett@7021 | 5006 | |
jdaggett@7021 | 5007 | <h3 id=om-fontface><span class=secno>8.1 </span>The <a |
jdaggett@7021 | 5008 | href="#cssfontfacerule"><code>CSSFontFaceRule</code></a> interface</h3> |
jdaggett@7021 | 5009 | |
jdaggett@7021 | 5010 | <p>The <dfn id=cssfontfacerule>CSSFontFaceRule</dfn> interface represents a |
jdaggett@7096 | 5011 | <code>@font-face</code> rule. |
jdaggett@7021 | 5012 | |
jdaggett@7021 | 5013 | <pre class=idl> |
jdaggett@7021 | 5014 | interface CSSFontFaceRule : CSSRule { |
jdaggett@7041 | 5015 | attribute DOMString family; |
jdaggett@7041 | 5016 | attribute DOMString src; |
jdaggett@7041 | 5017 | attribute DOMString style; |
jdaggett@7041 | 5018 | attribute DOMString weight; |
jdaggett@7041 | 5019 | attribute DOMString stretch; |
jdaggett@7041 | 5020 | attribute DOMString unicodeRange; |
jdaggett@7041 | 5021 | attribute DOMString variant; |
jdaggett@7041 | 5022 | attribute DOMString featureSettings; |
jdaggett@7021 | 5023 | }</pre> |
jdaggett@7021 | 5024 | |
jdaggett@7022 | 5025 | <p>The DOM Level 2 Style specification <a href="#DOM-LEVEL-2-STYLE" |
jdaggett@7022 | 5026 | rel=biblioentry>[DOM-LEVEL-2-STYLE]<!--{{DOM-LEVEL-2-STYLE}}--></a> |
jdaggett@7022 | 5027 | defined a different variant of this rule. This definition supercedes that |
jdaggett@7022 | 5028 | one. |
jdaggett@7021 | 5029 | |
jdaggett@7021 | 5030 | <h3 id=om-fontfeaturevalues><span class=secno>8.2 </span>The <a |
jdaggett@7021 | 5031 | href="#cssfontfeaturevaluesrule"><code>CSSFontFeatureValuesRule</code></a> |
jdaggett@7021 | 5032 | interface</h3> |
jdaggett@7021 | 5033 | |
jdaggett@7021 | 5034 | <p>The <code>CSSRule</code> interface is extended as follows: |
jdaggett@7021 | 5035 | |
jdaggett@7021 | 5036 | <pre class=idl>partial interface CSSRule { |
jdaggett@7021 | 5037 | const unsigned short FONT_FEATURE_VALUES_RULE = 14; |
jdaggett@7021 | 5038 | }</pre> |
jdaggett@7021 | 5039 | |
jdaggett@7021 | 5040 | <p>The <dfn id=cssfontfeaturevaluesrule>CSSFontFeatureValuesRule</dfn> |
jdaggett@7096 | 5041 | interface represents a <code>@font-feature-values</code> rule. |
jdaggett@7021 | 5042 | |
jdaggett@7021 | 5043 | <pre class=idl>interface CSSFontFeatureValuesRule : CSSRule { |
jdaggett@7021 | 5044 | readonly attribute DOMString familyList; |
jdaggett@7021 | 5045 | readonly attribute DOMString valueText; |
jdaggett@7021 | 5046 | };</pre> |
jdaggett@7021 | 5047 | |
jdaggett@7021 | 5048 | <dl class=idl-attributes> |
jdaggett@7021 | 5049 | <dt><var>familyList</var> of type <code>DOMString</code>, readonly |
jdaggett@7021 | 5050 | |
jdaggett@7021 | 5051 | <dd>The list of one or more font families for which a given set of feature |
jdaggett@7021 | 5052 | values is defined. |
jdaggett@7021 | 5053 | |
jdaggett@7021 | 5054 | <dt><var>valueText</var> of type <code>DOMString</code>, readonly |
jdaggett@7021 | 5055 | |
jdaggett@7021 | 5056 | <dd>Serialized set of feature values. |
jdaggett@7021 | 5057 | </dl> |
jdaggett@7021 | 5058 | |
jdaggett@7021 | 5059 | <h2 id=font-load-events><span class=secno>9 </span>Font Load Events</h2> |
jdaggett@6695 | 5060 | |
jdaggett@7060 | 5061 | <p>Since fonts defined via <code>@font-face</code> rules are loaded on |
jdaggett@7060 | 5062 | demand, pages may need to know precisely when fonts have completed |
jdaggett@7060 | 5063 | downloading before measuring text elements on the page or to show some |
jdaggett@7060 | 5064 | form of interim user interface state. |
jdaggett@6695 | 5065 | |
jdaggett@7021 | 5066 | <h3 id=document-fontloader><span class=secno>9.1 </span>Extension to the |
jdaggett@6699 | 5067 | <code>document</code> interface</h3> |
jdaggett@6699 | 5068 | |
jdaggett@6695 | 5069 | <p>To allow font loading to be tracked explicitly within content the |
jdaggett@6699 | 5070 | following event target is added to the <code>document</code> of the page: |
jdaggett@6699 | 5071 | |
jdaggett@6699 | 5072 | <pre class=idl>partial interface Document { |
jdaggett@6695 | 5073 | readonly attribute FontLoader fontloader; |
jdaggett@6695 | 5074 | }; |
jdaggett@6699 | 5075 | </pre> |
jdaggett@6699 | 5076 | |
jdaggett@7021 | 5077 | <h3 id=fontloader-interface><span class=secno>9.2 </span>The |
jdaggett@6699 | 5078 | <code>FontLoader</code> Interface</h3> |
jdaggett@6699 | 5079 | |
jdaggett@7097 | 5080 | <pre class=idl>dictionary CSSFontFaceLoadEventInit : EventInit { |
jdaggett@7097 | 5081 | CSSFontFaceRule fontface = null; |
jdaggett@7097 | 5082 | DOMError error = null; |
jdaggett@7060 | 5083 | }; |
jdaggett@7060 | 5084 | |
jdaggett@7218 | 5085 | dictionary LoadFontParameters { |
jdaggett@7218 | 5086 | DOMString font; |
jdaggett@7218 | 5087 | DOMString text = " "; |
jdaggett@7218 | 5088 | FontsReadyCallback onsuccess; |
jdaggett@7218 | 5089 | FontsReadyCallback onerror; |
jdaggett@7218 | 5090 | }; |
jdaggett@7218 | 5091 | |
jdaggett@7060 | 5092 | [Constructor(DOMString type, optional CSSFontFaceLoadEventInit eventInitDict)] |
jdaggett@6695 | 5093 | interface CSSFontFaceLoadEvent : Event { |
jdaggett@6695 | 5094 | readonly attribute CSSFontFaceRule fontface; |
jdaggett@7060 | 5095 | readonly attribute DOMError error; |
jdaggett@6695 | 5096 | } |
jdaggett@6695 | 5097 | |
jdaggett@7060 | 5098 | callback FontsReadyCallback = void (); |
jdaggett@6695 | 5099 | |
jdaggett@6695 | 5100 | interface FontLoader : EventTarget { |
jdaggett@6695 | 5101 | |
jdaggett@7060 | 5102 | // -- events for when loading state changes |
jdaggett@7060 | 5103 | attribute EventHandler <a href="#fontloader-loading">onloading</a>; |
jdaggett@7060 | 5104 | attribute EventHandler <a href="#fontloader-loadingdone">onloadingdone</a>; |
jdaggett@6695 | 5105 | |
jdaggett@6695 | 5106 | // -- events for each individual font load |
jdaggett@7060 | 5107 | attribute EventHandler <a href="#fontloader-loadstart">onloadstart</a>; |
jdaggett@7060 | 5108 | attribute EventHandler <a href="#fontloader-load">onload</a>; |
jdaggett@7060 | 5109 | attribute EventHandler <a href="#fontloader-error">onerror</a>; |
jdaggett@7060 | 5110 | |
jdaggett@7060 | 5111 | // check and start load if appropriate |
jdaggett@7218 | 5112 | // and fire callback when all loads complete |
jdaggett@7218 | 5113 | void <a href="#fontloader-loadfont">loadFont</a>(LoadFontParameters params); |
jdaggett@7218 | 5114 | |
jdaggett@7220 | 5115 | // return whether all fonts in the fontlist are loaded (does not initiate load if not available) |
jdaggett@7218 | 5116 | boolean <a href="#fontloader-checkfont">checkFont</a>(DOMString font, optional DOMString text = " "); |
jdaggett@7060 | 5117 | |
jdaggett@7060 | 5118 | // async notify upon completion, pending layout changes |
jdaggett@7060 | 5119 | void <a href="#fontloader-notifywhenfontsready">notifyWhenFontsReady</a>(FontsReadyCallback fontsReadyCallback); |
jdaggett@7060 | 5120 | |
jdaggett@7060 | 5121 | // loading state, true while one or more fonts loading, false otherwise |
jdaggett@7060 | 5122 | readonly attribute boolean loading; |
jdaggett@6695 | 5123 | };</pre> |
jdaggett@6695 | 5124 | |
jdaggett@7060 | 5125 | <p>Because font families defined with <code>@font-face</code> rules are |
jdaggett@7060 | 5126 | loaded only when they are used, content sometimes needs to understand when |
jdaggett@7060 | 5127 | the loading of fonts occurs. Authors can use the events and methods |
jdaggett@7060 | 5128 | defined here to allow greater control over actions that are dependent upon |
jdaggett@7060 | 5129 | the availability of specific fonts. |
jdaggett@7060 | 5130 | |
jdaggett@7060 | 5131 | <p>The term <dfn id=font-load>font load</dfn> is used below to indicate |
jdaggett@7060 | 5132 | when the loading of content for a given <code>@font-face</code> rule |
jdaggett@7060 | 5133 | completes. An <code>@font-face</code> rule may list multiple alternate |
jdaggett@7060 | 5134 | resources within the ‘<a href="#descdef-src"><code |
jdaggett@7060 | 5135 | class=property>src</code></a>’ descriptor, including references to local |
jdaggett@7060 | 5136 | fonts, but the term font load only refers to the loading of the finally |
jdaggett@7060 | 5137 | selected resource for a given rule, not to the loading of each individual |
jdaggett@7060 | 5138 | resource. |
jdaggett@7060 | 5139 | |
jdaggett@7060 | 5140 | <h4 id=events><span class=secno>9.2.1 </span>Events</h4> |
jdaggett@7060 | 5141 | |
jdaggett@7098 | 5142 | <p>The following are the event handlers (and their corresponding event |
jdaggett@7098 | 5143 | handler event types) that must be supported by <code>FontLoader</code> |
jdaggett@7098 | 5144 | objects as IDL attributes: |
jdaggett@7098 | 5145 | |
jdaggett@7103 | 5146 | <table class=data id=eventhandlers> |
jdaggett@7098 | 5147 | <thead> |
jdaggett@7098 | 5148 | <tr> |
jdaggett@7098 | 5149 | <th>Event handler |
jdaggett@7098 | 5150 | |
jdaggett@7098 | 5151 | <th>Event handler event type |
jdaggett@7098 | 5152 | |
jdaggett@7098 | 5153 | <tbody> |
jdaggett@7098 | 5154 | <tr> |
jdaggett@7098 | 5155 | <th><code class=idl-code>onloading</code> |
jdaggett@7098 | 5156 | |
jdaggett@7098 | 5157 | <td><code class=idl-code>loading</code> |
jdaggett@7098 | 5158 | |
jdaggett@7098 | 5159 | <tr> |
jdaggett@7098 | 5160 | <th><code class=idl-code>onloadingdone</code> |
jdaggett@7098 | 5161 | |
jdaggett@7098 | 5162 | <td><code class=idl-code>loadingdone</code> |
jdaggett@7098 | 5163 | |
jdaggett@7098 | 5164 | <tr> |
jdaggett@7098 | 5165 | <th><code class=idl-code>onloadstart</code> |
jdaggett@7098 | 5166 | |
jdaggett@7098 | 5167 | <td><code class=idl-code>loadstart</code> |
jdaggett@7098 | 5168 | |
jdaggett@7098 | 5169 | <tr> |
jdaggett@7098 | 5170 | <th><code class=idl-code>onload</code> |
jdaggett@7098 | 5171 | |
jdaggett@7098 | 5172 | <td><code class=idl-code>load</code> |
jdaggett@7098 | 5173 | |
jdaggett@7098 | 5174 | <tr> |
jdaggett@7098 | 5175 | <th><code class=idl-code>onerror</code> |
jdaggett@7098 | 5176 | |
jdaggett@7098 | 5177 | <td><code class=idl-code>error</code> |
jdaggett@7098 | 5178 | </table> |
jdaggett@7098 | 5179 | |
jdaggett@7060 | 5180 | <p>To <dfn id=fire-a-font-load-event>fire a font load event</dfn> named |
jdaggett@7060 | 5181 | <var>e</var> with a given <var>font face rule</var> and an |
jdaggett@7060 | 5182 | <var>error</var> at an object <var>target</var> means to <a href="">fire |
jdaggett@7060 | 5183 | an event named e</a> at <var>target</var> with an <a>event</a> using the |
jdaggett@7060 | 5184 | <code>CSSFontFaceLoadEvent</code> interface that also meets these |
jdaggett@7060 | 5185 | conditions: |
jdaggett@7060 | 5186 | |
jdaggett@7060 | 5187 | <ol> |
jdaggett@7060 | 5188 | <li>The <code class=idl-code>fontface</code> attribute is initialized to |
jdaggett@7060 | 5189 | the given <var>font face rule</var>. |
jdaggett@7060 | 5190 | |
jdaggett@7060 | 5191 | <li>The <code class=idl-code>error</code> attribute is initialized to the |
jdaggett@7060 | 5192 | given <var>error</var>. |
jdaggett@7060 | 5193 | </ol> |
jdaggett@7060 | 5194 | |
jdaggett@7060 | 5195 | <p>When the user agent determines that one or more fonts defined via |
jdaggett@7060 | 5196 | <code>@font-face</code> rules in a document <var>doc</var> need to be |
jdaggett@7060 | 5197 | loaded, it must run the following steps: |
jdaggett@7060 | 5198 | |
jdaggett@7060 | 5199 | <ol> |
jdaggett@7060 | 5200 | <li>Let <var>font loader</var> be the value of the <code |
jdaggett@7060 | 5201 | class=idl-code>fontloader</code> attribute of <var>doc</var>. |
jdaggett@7060 | 5202 | |
jdaggett@7060 | 5203 | <li>Set the <code class=idl-code>loading</code> attribute of <var>font |
jdaggett@7060 | 5204 | loader</var> to true. |
jdaggett@7060 | 5205 | |
jdaggett@7060 | 5206 | <li><a href="#fire-a-font-load-event">Fire a font load event</a> named <a |
jdaggett@7060 | 5207 | id=fontloader-loading><code class=idl-code>"loading"</code></a> with |
jdaggett@7060 | 5208 | <var>font face rule</var> and <var>error</var> at <var>font loader</var>. |
jdaggett@7060 | 5209 | |
jdaggett@7060 | 5210 | <li>When the user agent begins loading the first resource for a given |
jdaggett@7060 | 5211 | <code>@font-face</code> rule, it must <a |
jdaggett@7060 | 5212 | href="#fire-a-font-load-event">fire a font load event</a> named <a |
jdaggett@7060 | 5213 | id=fontloader-loadstart><code class=idl-code>"loadstart"</code></a> with |
jdaggett@7060 | 5214 | <var>font face</var> set to the <code>@font-face</code> rule that caused |
jdaggett@7060 | 5215 | this load to start and <var>error</var> set to <code>????</code> at |
jdaggett@7060 | 5216 | <var>font loader</var>. |
jdaggett@7060 | 5217 | </ol> |
jdaggett@7060 | 5218 | |
jdaggett@7060 | 5219 | <p class=issue>What are the error types that should be used here? |
jdaggett@7060 | 5220 | |
jdaggett@7060 | 5221 | <p>The term “font load” covers any of the resources listed in the |
jdaggett@7060 | 5222 | ‘src’ descriptor, including local fonts. When multiple resources are |
jdaggett@7060 | 5223 | listed, the “font load” is the first resource in the list to |
jdaggett@7060 | 5224 | successfully load or the error that occurs on the last resource for which |
jdaggett@7060 | 5225 | a load is attempted. |
jdaggett@7060 | 5226 | |
jdaggett@7060 | 5227 | <p class=issue>Given that a set of <code>@font-face</code> rules might load |
jdaggett@7060 | 5228 | concurrently, does it make sense to have a non-null value for the <code |
jdaggett@7060 | 5229 | class=idl-code>"loading"</code> event? |
jdaggett@7060 | 5230 | |
jdaggett@7060 | 5231 | <p>When the user agent completes each font load for a document |
jdaggett@7060 | 5232 | <var>doc</var>, it must run the following steps: |
jdaggett@7060 | 5233 | |
jdaggett@7060 | 5234 | <ol> |
jdaggett@7060 | 5235 | <li>Let <var>font loader</var> be the value of the <code |
jdaggett@7060 | 5236 | class=idl-code>fontloader</code> attribute of <var>doc</var>. |
jdaggett@7060 | 5237 | |
jdaggett@7060 | 5238 | <li>If none of the resources listed for the ‘<a |
jdaggett@7060 | 5239 | href="#descdef-src"><code class=property>src</code></a>’ descriptor |
jdaggett@7060 | 5240 | contain valid data, <a href="#fire-a-font-load-event">fire a font load |
jdaggett@7060 | 5241 | event</a> named <a id=fontloader-error><code |
jdaggett@7060 | 5242 | class=idl-code>"error"</code></a> with <var>font face</var> the |
jdaggett@7060 | 5243 | <code>@font-face</code> rule that caused this load to start and |
jdaggett@7060 | 5244 | <var>error</var> [something?] at <var>font loader</var>. |
jdaggett@7060 | 5245 | |
jdaggett@7060 | 5246 | <li>Otherwise, <a href="#fire-a-font-load-event">fire a font load |
jdaggett@7060 | 5247 | event</a> named <a id=fontloader-load><code |
jdaggett@7060 | 5248 | class=idl-code>"load"</code></a> with <var>font face</var> the |
jdaggett@7060 | 5249 | <code>@font-face</code> rule that caused this load to start and |
jdaggett@7060 | 5250 | <var>error</var> [something?] at <var>font loader</var>. |
jdaggett@7060 | 5251 | </ol> |
jdaggett@7060 | 5252 | |
jdaggett@7060 | 5253 | <p>When the user agent completes the final font load for document |
jdaggett@7060 | 5254 | <var>doc</var>, it must run the following steps: |
jdaggett@7060 | 5255 | |
jdaggett@7060 | 5256 | <ol> |
jdaggett@7060 | 5257 | <li>Let <var>font loader</var> be the value of the <code |
jdaggett@7060 | 5258 | class=idl-code>fontloader</code> attribute of <var>doc</var>. |
jdaggett@7060 | 5259 | |
jdaggett@7060 | 5260 | <li>Set the <code class=idl-code>loading</code> attribute of <var>font |
jdaggett@7060 | 5261 | loader</var> to false. |
jdaggett@7060 | 5262 | |
jdaggett@7060 | 5263 | <li><a href="#fire-a-font-load-event">Fire a font load event</a> named <a |
jdaggett@7060 | 5264 | id=fontloader-loadingdone><code class=idl-code>"loadingdone"</code></a> |
jdaggett@7060 | 5265 | with <var>font face rule</var>, set to the last font to load, and |
jdaggett@7060 | 5266 | <var>error</var> at <var>font loader</var>. |
jdaggett@7060 | 5267 | </ol> |
jdaggett@7060 | 5268 | |
jdaggett@7060 | 5269 | <p>Note: For example, if three fonts are loaded at the same time, a <code |
jdaggett@7060 | 5270 | class=idl-code>"loading"</code> event followed by three <code |
jdaggett@7060 | 5271 | class=idl-code>"loadstart"</code> events and three <code |
jdaggett@7060 | 5272 | class=idl-code>"load"</code> or <code class=idl-code>"error"</code> |
jdaggett@7060 | 5273 | events, followed by a <code class=idl-code>"loadingdone"</code> event will |
jdaggett@7060 | 5274 | occur. |
jdaggett@7060 | 5275 | |
jdaggett@7060 | 5276 | <h4 id=methods><span class=secno>9.2.2 </span>Methods</h4> |
jdaggett@7060 | 5277 | |
jdaggett@7220 | 5278 | <p>The methods <code class=idl-code>loadFont</code> and <code |
jdaggett@7220 | 5279 | class=idl-code>checkFont</code> must determine whether all fonts in the |
jdaggett@7060 | 5280 | given font list have been loaded and are available. If all fonts are |
jdaggett@7220 | 5281 | available, <code class=idl-code>checkFont</code> must return true, false |
jdaggett@7220 | 5282 | if one or more fonts are not available. In the case of <code |
jdaggett@7060 | 5283 | class=idl-code>loadFont</code>, if any fonts are downloadable fonts and |
jdaggett@7060 | 5284 | have not already been loaded, the user agent must initiate the load of |
jdaggett@7060 | 5285 | each of these fonts. |
jdaggett@7060 | 5286 | |
jdaggett@7220 | 5287 | <p>The <a id=fontloader-loadfont><code |
jdaggett@7220 | 5288 | class=idl-code>loadFont(params)</code></a> method must use these steps: |
jdaggett@7060 | 5289 | |
jdaggett@7060 | 5290 | <ol> |
jdaggett@7220 | 5291 | <li>Parse the value of the <code class=idl-code>font</code> member of |
jdaggett@7220 | 5292 | <code class=idl-code>params</code>, using the CSS value syntax of the |
jdaggett@7220 | 5293 | ‘<a href="#propdef-font"><code class=property>font</code></a>’ |
jdaggett@7220 | 5294 | property. |
jdaggett@7220 | 5295 | |
jdaggett@7220 | 5296 | <li>If a syntax error occurs, return. |
jdaggett@7060 | 5297 | |
jdaggett@7060 | 5298 | <li>Otherwise, let <var>font family list</var> be the set of families and |
jdaggett@7060 | 5299 | <var>font style</var> be the other font style attributes. |
jdaggett@7060 | 5300 | |
jdaggett@7060 | 5301 | <li>For each family in <var>font family list</var>, use the font matching |
jdaggett@7060 | 5302 | rules to select the font faces that match the <var>font style</var>. In |
jdaggett@7060 | 5303 | the case where these are font faces defined via <code>@font-face</code> |
jdaggett@7060 | 5304 | rules, the use of ‘<a href="#descdef-unicode-range"><code |
jdaggett@7060 | 5305 | class=property>unicode-range</code></a>’ means that this may be more |
jdaggett@7060 | 5306 | than just a single font face. |
jdaggett@7060 | 5307 | |
jdaggett@7060 | 5308 | <li>Remove from the set of font faces all faces that have defined ‘<a |
jdaggett@7060 | 5309 | href="#descdef-unicode-range"><code |
jdaggett@7060 | 5310 | class=property>unicode-range</code></a>’ values that don't intersect |
jdaggett@7060 | 5311 | the range of character values in the <code class=idl-code>text</code> |
jdaggett@7220 | 5312 | member of <code class=idl-code>params</code> and set this to be the |
jdaggett@7220 | 5313 | <var>font load list</var>. |
jdaggett@7220 | 5314 | |
jdaggett@7220 | 5315 | <li>For all of the font faces in the <var>font load list</var>, initiate |
jdaggett@7220 | 5316 | the load of any font that has not already been loaded and return. |
jdaggett@7220 | 5317 | |
jdaggett@7220 | 5318 | <li>When all fonts in the <var>font load list</var> have been loaded, fire |
jdaggett@7220 | 5319 | the appropriate callback handler. If all fonts loaded successfully, call |
jdaggett@7220 | 5320 | the callback specified by the <code class=idl-code>onsuccess</code> |
jdaggett@7220 | 5321 | member of <code class=idl-code>params</code>. If an error occurred with |
jdaggett@7220 | 5322 | any one of the fonts in the <var>font load list</var> or if the list is |
jdaggett@7220 | 5323 | empty, call the callback specified by the <code |
jdaggett@7220 | 5324 | class=idl-code>onerror</code> member of <code |
jdaggett@7220 | 5325 | class=idl-code>params</code>. |
jdaggett@7060 | 5326 | </ol> |
jdaggett@7060 | 5327 | |
jdaggett@7220 | 5328 | <p>Callsbacks for <code class=idl-code>loadFont</code> fire in addition to |
jdaggett@7220 | 5329 | the callbacks that fire due to font event handlers. |
jdaggett@7220 | 5330 | |
jdaggett@7220 | 5331 | <p>The <a id=fontloader-checkfont><code class=idl-code>checkFont(font, |
jdaggett@7220 | 5332 | text)</code></a> method must use these steps: |
jdaggett@7060 | 5333 | |
jdaggett@7060 | 5334 | <ol> |
jdaggett@7220 | 5335 | <li>Parse the value of the <code class=idl-code>font</code> parameter, |
jdaggett@7220 | 5336 | using the CSS value syntax of the ‘<a href="#propdef-font"><code |
jdaggett@7220 | 5337 | class=property>font</code></a>’ property. |
jdaggett@7220 | 5338 | |
jdaggett@7220 | 5339 | <li>If a syntax error occurs, return <code class=idl-code>false</code>. |
jdaggett@7060 | 5340 | |
jdaggett@7060 | 5341 | <li>Otherwise, let <var>font family list</var> be the set of families and |
jdaggett@7060 | 5342 | <var>font style</var> be the other font style attributes. |
jdaggett@7060 | 5343 | |
jdaggett@7060 | 5344 | <li>For each family in <var>font family list</var>, use the font matching |
jdaggett@7060 | 5345 | rules to select the font faces that match the <var>font style</var>. In |
jdaggett@7060 | 5346 | the case where these are font faces defined via <code>@font-face</code> |
jdaggett@7060 | 5347 | rules, the use of ‘<a href="#descdef-unicode-range"><code |
jdaggett@7060 | 5348 | class=property>unicode-range</code></a>’ means that this may be more |
jdaggett@7060 | 5349 | than just a single font face. |
jdaggett@7060 | 5350 | |
jdaggett@7060 | 5351 | <li>Remove from the set of font faces all faces that have defined ‘<a |
jdaggett@7060 | 5352 | href="#descdef-unicode-range"><code |
jdaggett@7060 | 5353 | class=property>unicode-range</code></a>’ values that don't intersect |
jdaggett@7060 | 5354 | the range of character values in the <code class=idl-code>text</code> |
jdaggett@7218 | 5355 | parameter and set this to be the <var>font load list</var>. |
jdaggett@7218 | 5356 | |
jdaggett@7220 | 5357 | <li>If the <var>font load list</var> contains no font faces, return <code |
jdaggett@7220 | 5358 | class=idl-code>false</code>. |
jdaggett@7220 | 5359 | |
jdaggett@7218 | 5360 | <li>If all fonts in the <var>font load list</var> have already |
jdaggett@7218 | 5361 | successfully been loaded, return <code class=idl-code>true</code>. |
jdaggett@7218 | 5362 | Otherwise, return <code class=idl-code>false</code>. |
jdaggett@7060 | 5363 | </ol> |
jdaggett@6695 | 5364 | |
jdaggett@7220 | 5365 | <p>The <code class=idl-code>font</code> parameter of <code |
jdaggett@7220 | 5366 | class=idl-code>checkFont</code> and the <code class=idl-code>font</code> |
jdaggett@7220 | 5367 | member of <code class=idl-code>params</code> parameter of <code |
jdaggett@7220 | 5368 | class=idl-code>loadFont</code> both specify the list of fonts to load. |
jdaggett@7220 | 5369 | These values must be parsed using the same syntax as values for the CSS |
jdaggett@7220 | 5370 | ‘<a href="#propdef-font"><code class=property>font</code></a>’ |
jdaggett@7220 | 5371 | property, the same way the <code class=idl-code>font</code> attribute of |
jdaggett@7220 | 5372 | the <code>CanvasRenderingContext2D</code> is interpreted. <a href="#HTML5" |
jdaggett@7220 | 5373 | rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> This yields a list of font |
jdaggett@7220 | 5374 | families along with font style attributes. |
jdaggett@7220 | 5375 | |
jdaggett@6695 | 5376 | <p>Because the number of fonts loaded depends on the how many fonts are |
jdaggett@6695 | 5377 | used for a given piece of text, in some cases whether fonts need to be |
jdaggett@7060 | 5378 | loaded or not may not be known. The <a |
jdaggett@7060 | 5379 | id=fontloader-notifywhenfontsready><code |
jdaggett@7060 | 5380 | class=idl-code>notifyWhenFontsReady</code></a> method provides a way for |
jdaggett@7060 | 5381 | authors to avoid having to keep track of which fonts have or haven't been |
jdaggett@7060 | 5382 | loaded before examining content affected by which font is used. |
jdaggett@7060 | 5383 | |
jdaggett@7060 | 5384 | <p>The <code class=idl-code>notifyWhenFontsReady(fontsReadyCallback)</code> |
jdaggett@7060 | 5385 | method must use these steps: |
jdaggett@7060 | 5386 | |
jdaggett@7060 | 5387 | <ol> |
jdaggett@7060 | 5388 | <li>Let <var>font loader</var> be the value of the <code |
jdaggett@7060 | 5389 | class=idl-code>fontloader</code> attribute of <var>doc</var>. |
jdaggett@7060 | 5390 | |
jdaggett@7098 | 5391 | <li>Add the value of the <code class=idl-code>fontsReadyCallback</code> |
jdaggett@7098 | 5392 | parameter to the <var>notify</var> callback list of the <var>font |
jdaggett@7098 | 5393 | loader</var> and return. |
jdaggett@7060 | 5394 | |
jdaggett@7060 | 5395 | <li>Once all pending layout operations have completed, determine whether |
jdaggett@7060 | 5396 | font resources need to be loaded. |
jdaggett@7060 | 5397 | |
jdaggett@7098 | 5398 | <li>If no loads are in progress, copy the contents of the |
jdaggett@7098 | 5399 | <var>notify</var> callback list to the <var>notify pending</var> list of |
jdaggett@7229 | 5400 | the <var>font loader</var> and clear out the <var>notify</var> list. |
jdaggett@7229 | 5401 | After the <code class=idl-code>"loadingdone"</code> event fires, call |
jdaggett@7229 | 5402 | each of the callbacks in the <var>notify pending</var> list and clear out |
jdaggett@7229 | 5403 | the <var>notify pending</var> list. |
jdaggett@7229 | 5404 | |
jdaggett@7229 | 5405 | <li>Otherwise, after all font loads complete and subsequent layout |
jdaggett@7229 | 5406 | operations finish, again check whether loads are in progress. If no loads |
jdaggett@7229 | 5407 | are in progress, execute the previous step. If fonts are still loading, |
jdaggett@7229 | 5408 | continue waiting until those loads complete and repeat this step. |
jdaggett@7060 | 5409 | </ol> |
jdaggett@7060 | 5410 | |
jdaggett@7060 | 5411 | <p>Authors should note here that the callback only fires once, the method |
jdaggett@7060 | 5412 | needs to be called again when further font loads might occur. This method |
jdaggett@7098 | 5413 | is similar to the callback function of the <code |
jdaggett@7060 | 5414 | class=idl-code>"loadingdone"</code> event handler, except that in this |
jdaggett@7060 | 5415 | case the callback will <strong>always</strong> get called, even when no |
jdaggett@7098 | 5416 | font loads occur because the fonts in question are already loaded. It's a |
jdaggett@7098 | 5417 | simple, easy way to sync code to font loads without the need to keep track |
jdaggett@7098 | 5418 | of what fonts are needed and precisely when they load. |
jdaggett@7060 | 5419 | |
jdaggett@7229 | 5420 | <p>Note that the user agent may need to iterate over multiple font loads |
jdaggett@7229 | 5421 | before the notify callback is called. This can occur with font fallback |
jdaggett@7229 | 5422 | situations, where one font in the fontlist is loaded but doesn't contain a |
jdaggett@7229 | 5423 | particular glyph and other fonts in the fontlist need to be loaded. The |
jdaggett@7229 | 5424 | notify callback only fires after layout operations complete and no |
jdaggett@7229 | 5425 | additional font loads are necessary. |
jdaggett@6695 | 5426 | |
jdaggett@7021 | 5427 | <h3 id=font-load-event-examples><span class=secno>9.3 </span>Font load |
jdaggett@6699 | 5428 | event examples</h3> |
jdaggett@6699 | 5429 | |
jdaggett@6695 | 5430 | <div class=example> |
jdaggett@6695 | 5431 | <p>To show content only after all font loads complete:</p> |
jdaggett@6695 | 5432 | |
jdaggett@6695 | 5433 | <pre> document.fontloader.onloadingdone = function() { |
jdaggett@6695 | 5434 | var content = document.getElementById("content"); |
jdaggett@6695 | 5435 | content.style.visibility = "visible"; |
jdaggett@6695 | 5436 | } |
jdaggett@6695 | 5437 | </pre> |
jdaggett@6695 | 5438 | </div> |
jdaggett@6695 | 5439 | |
jdaggett@6695 | 5440 | <div class=example> |
jdaggett@6695 | 5441 | <p>Drawing text in a canvas with a downloadable font, explicitly |
jdaggett@6695 | 5442 | initiating the font download and drawing upon completion:</p> |
jdaggett@6695 | 5443 | |
jdaggett@6695 | 5444 | <pre> function drawStuff() { |
jdaggett@6695 | 5445 | var ctx = document.getElementById("c").getContext("2d"); |
jdaggett@6695 | 5446 | |
jdaggett@6695 | 5447 | ctx.fillStyle = "red"; |
jdaggett@6695 | 5448 | ctx.font = "50px MyDownloadableFont"; |
jdaggett@6695 | 5449 | ctx.fillText("Hello!", 100, 100); |
jdaggett@6695 | 5450 | } |
jdaggett@6695 | 5451 | |
jdaggett@7218 | 5452 | document.fontloader.loadFont({font: "50px MyDownloadableFont", |
jdaggett@7218 | 5453 | onsuccess: drawStuff, |
jdaggett@7218 | 5454 | onerror: handleError});</pre> |
jdaggett@6695 | 5455 | </div> |
jdaggett@6695 | 5456 | |
jdaggett@6695 | 5457 | <div class=example> |
jdaggett@6695 | 5458 | <p>A rich text editing application may need to measure text elements after |
jdaggett@6695 | 5459 | editing operations have taken place. Since style changes may or may not |
jdaggett@6695 | 5460 | require additional fonts to be downloaded, or the fonts may already have |
jdaggett@6695 | 5461 | been downloaded, the measurement procedures need to occur after those |
jdaggett@6695 | 5462 | font loads complete:</p> |
jdaggett@6695 | 5463 | |
jdaggett@6695 | 5464 | <pre> function measureTextElements() { |
jdaggett@6695 | 5465 | // contents can now be measured using the metrics of |
jdaggett@6695 | 5466 | // the downloadable font(s) |
jdaggett@6695 | 5467 | } |
jdaggett@6695 | 5468 | |
jdaggett@6695 | 5469 | function doEditing() { |
jdaggett@6695 | 5470 | |
jdaggett@6695 | 5471 | // content/layout operations that may cause additional font loads |
jdaggett@6695 | 5472 | |
jdaggett@6695 | 5473 | document.fontloader.notifyWhenFontsReady(measureTextElements); |
jdaggett@6695 | 5474 | } |
jdaggett@6695 | 5475 | </pre> |
jdaggett@6695 | 5476 | </div> |
jdaggett@6695 | 5477 | |
jdaggett@7103 | 5478 | <h2 id=conformance><span class=secno>10 </span> Conformance</h2> |
jdaggett@7103 | 5479 | |
jdaggett@7103 | 5480 | <h3 id=conventions><span class=secno>10.1 </span> Document conventions</h3> |
jdaggett@7103 | 5481 | |
jdaggett@7103 | 5482 | <p>Conformance requirements are expressed with a combination of descriptive |
jdaggett@7103 | 5483 | assertions and RFC 2119 terminology. The key words “MUST”, “MUST |
jdaggett@7103 | 5484 | NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, |
jdaggett@7103 | 5485 | “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the |
jdaggett@7103 | 5486 | normative parts of this document are to be interpreted as described in RFC |
jdaggett@7103 | 5487 | 2119. However, for readability, these words do not appear in all uppercase |
jdaggett@7103 | 5488 | letters in this specification. |
jdaggett@7103 | 5489 | |
jdaggett@7103 | 5490 | <p>All of the text of this specification is normative except sections |
jdaggett@7103 | 5491 | explicitly marked as non-normative, examples, and notes. <a |
jdaggett@7103 | 5492 | href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a> |
jdaggett@7103 | 5493 | |
jdaggett@7103 | 5494 | <p>Examples in this specification are introduced with the words “for |
jdaggett@7103 | 5495 | example” or are set apart from the normative text with |
jdaggett@7103 | 5496 | <code>class="example"</code>, like this: |
jdaggett@7103 | 5497 | |
jdaggett@7103 | 5498 | <div class=example> |
jdaggett@7103 | 5499 | <p>This is an example of an informative example.</p> |
jdaggett@7103 | 5500 | </div> |
jdaggett@7103 | 5501 | |
jdaggett@7103 | 5502 | <p>Informative notes begin with the word “Note” and are set apart from |
jdaggett@7103 | 5503 | the normative text with <code>class="note"</code>, like this: |
jdaggett@7103 | 5504 | |
jdaggett@7103 | 5505 | <p class=note>Note, this is an informative note. |
jdaggett@7103 | 5506 | |
jdaggett@7103 | 5507 | <h3 id=conformance-classes><span class=secno>10.2 </span> Conformance |
jdaggett@7103 | 5508 | classes</h3> |
jdaggett@7103 | 5509 | |
jdaggett@7103 | 5510 | <p>Conformance to CSS Fonts Module Level 3 is defined for three conformance |
jdaggett@7103 | 5511 | classes: |
jdaggett@7103 | 5512 | |
jdaggett@7103 | 5513 | <dl> |
jdaggett@7103 | 5514 | <dt><dfn id=style-sheet title="style sheet!!as conformance class">style |
jdaggett@7103 | 5515 | sheet</dfn> |
jdaggett@7103 | 5516 | |
jdaggett@7103 | 5517 | <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS |
jdaggett@7103 | 5518 | style sheet</a>. |
jdaggett@7103 | 5519 | |
jdaggett@7103 | 5520 | <dt><dfn id=renderer>renderer</dfn> |
jdaggett@7103 | 5521 | |
jdaggett@7103 | 5522 | <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> |
jdaggett@7103 | 5523 | that interprets the semantics of a style sheet and renders documents that |
jdaggett@7103 | 5524 | use them. |
jdaggett@7103 | 5525 | |
jdaggett@7103 | 5526 | <dt><dfn id=authoring-tool>authoring tool</dfn> |
jdaggett@7103 | 5527 | |
jdaggett@7103 | 5528 | <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> |
jdaggett@7103 | 5529 | that writes a style sheet. |
jdaggett@7103 | 5530 | </dl> |
jdaggett@7103 | 5531 | |
jdaggett@7103 | 5532 | <p>A style sheet is conformant to CSS Fonts Module Level 3 if all of its |
jdaggett@7103 | 5533 | statements that use syntax defined in this module are valid according to |
jdaggett@7103 | 5534 | the generic CSS grammar and the individual grammars of each feature |
jdaggett@7103 | 5535 | defined in this module. |
jdaggett@7103 | 5536 | |
jdaggett@7103 | 5537 | <p>A renderer is conformant to CSS Fonts Module Level 3 if, in addition to |
jdaggett@7103 | 5538 | interpreting the style sheet as defined by the appropriate specifications, |
jdaggett@7103 | 5539 | it supports all the features defined by CSS Fonts Module Level 3 by |
jdaggett@7103 | 5540 | parsing them correctly and rendering the document accordingly. However, |
jdaggett@7103 | 5541 | the inability of a UA to correctly render a document due to limitations of |
jdaggett@7103 | 5542 | the device does not make the UA non-conformant. (For example, a UA is not |
jdaggett@7103 | 5543 | required to render color on a monochrome monitor.) |
jdaggett@7103 | 5544 | |
jdaggett@7103 | 5545 | <p>An authoring tool is conformant to CSS Fonts Module Level 3 if it writes |
jdaggett@7103 | 5546 | style sheets that are syntactically correct according to the generic CSS |
jdaggett@7103 | 5547 | grammar and the individual grammars of each feature in this module, and |
jdaggett@7103 | 5548 | meet all other conformance requirements of style sheets as described in |
jdaggett@7103 | 5549 | this module. |
jdaggett@7103 | 5550 | |
jdaggett@7103 | 5551 | <h3 id=partial><span class=secno>10.3 </span> Partial implementations</h3> |
jdaggett@7103 | 5552 | |
jdaggett@7103 | 5553 | <p>So that authors can exploit the forward-compatible parsing rules to |
jdaggett@7103 | 5554 | assign fallback values, CSS renderers <strong>must</strong> treat as |
jdaggett@7103 | 5555 | invalid (and <a |
jdaggett@7103 | 5556 | href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as |
jdaggett@7103 | 5557 | appropriate</a>) any at-rules, properties, property values, keywords, and |
jdaggett@7103 | 5558 | other syntactic constructs for which they have no usable level of support. |
jdaggett@7103 | 5559 | In particular, user agents <strong>must not</strong> selectively ignore |
jdaggett@7103 | 5560 | unsupported component values and honor supported values in a single |
jdaggett@7103 | 5561 | multi-value property declaration: if any value is considered invalid (as |
jdaggett@7103 | 5562 | unsupported values must be), CSS requires that the entire declaration be |
jdaggett@7103 | 5563 | ignored. |
jdaggett@7103 | 5564 | |
jdaggett@7103 | 5565 | <h3 id=experimental><span class=secno>10.4 </span> Experimental |
jdaggett@7103 | 5566 | implementations</h3> |
jdaggett@7103 | 5567 | |
jdaggett@7103 | 5568 | <p>To avoid clashes with future CSS features, the CSS2.1 specification |
jdaggett@7103 | 5569 | reserves a <a |
jdaggett@7103 | 5570 | href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed |
jdaggett@7103 | 5571 | syntax</a> for proprietary and experimental extensions to CSS. |
jdaggett@7103 | 5572 | |
jdaggett@7103 | 5573 | <p>Prior to a specification reaching the Candidate Recommendation stage in |
jdaggett@7103 | 5574 | the W3C process, all implementations of a CSS feature are considered |
jdaggett@7103 | 5575 | experimental. The CSS Working Group recommends that implementations use a |
jdaggett@7103 | 5576 | vendor-prefixed syntax for such features, including those in W3C Working |
jdaggett@7103 | 5577 | Drafts. This avoids incompatibilities with future changes in the draft. |
jdaggett@7103 | 5578 | |
jdaggett@7103 | 5579 | <h3 id=testing><span class=secno>10.5 </span> Non-experimental |
jdaggett@7103 | 5580 | implementations</h3> |
jdaggett@7103 | 5581 | |
jdaggett@7103 | 5582 | <p>Once a specification reaches the Candidate Recommendation stage, |
jdaggett@7103 | 5583 | non-experimental implementations are possible, and implementors should |
jdaggett@7103 | 5584 | release an unprefixed implementation of any CR-level feature they can |
jdaggett@7103 | 5585 | demonstrate to be correctly implemented according to spec. |
jdaggett@7103 | 5586 | |
jdaggett@7103 | 5587 | <p>To establish and maintain the interoperability of CSS across |
jdaggett@7103 | 5588 | implementations, the CSS Working Group requests that non-experimental CSS |
jdaggett@7103 | 5589 | renderers submit an implementation report (and, if necessary, the |
jdaggett@7103 | 5590 | testcases used for that implementation report) to the W3C before releasing |
jdaggett@7103 | 5591 | an unprefixed implementation of any CSS features. Testcases submitted to |
jdaggett@7103 | 5592 | W3C are subject to review and correction by the CSS Working Group. |
jdaggett@7103 | 5593 | |
jdaggett@7103 | 5594 | <p>Further information on submitting testcases and implementation reports |
jdaggett@7103 | 5595 | can be found from on the CSS Working Group's website at <a |
jdaggett@7103 | 5596 | href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. |
jdaggett@7103 | 5597 | Questions should be directed to the <a |
jdaggett@7103 | 5598 | href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> |
jdaggett@7103 | 5599 | mailing list. |
jdaggett@7103 | 5600 | |
jdaggett@2737 | 5601 | <h2 class=no-num id=platform-props-to-css>Appendix A: Mapping platform font |
jdaggett@1662 | 5602 | properties to CSS properties</h2> |
jdaggett@1662 | 5603 | |
jdaggett@1662 | 5604 | <p><em>This appendix is included as background for some of the problems and |
jdaggett@890 | 5605 | situations that are described in other sections. It should be viewed as |
jdaggett@890 | 5606 | informative only.</em> |
jdaggett@890 | 5607 | |
jdaggett@512 | 5608 | <p>Font properties in CSS are designed to be independent of the underlying |
jdaggett@512 | 5609 | font formats used; they can be used to specify bitmap fonts, Type1 fonts, |
jdaggett@890 | 5610 | SVG fonts in addition to the common TrueType and OpenType fonts. But there |
jdaggett@1244 | 5611 | are facets of the TrueType and OpenType formats that often cause confusion |
jdaggett@2556 | 5612 | for authors and present challenges to implementers on different platforms. |
jdaggett@1244 | 5613 | |
jdaggett@1244 | 5614 | <p>Originally developed at Apple, TrueType was designed as an outline font |
jdaggett@1244 | 5615 | format for both screen and print. Microsoft joined Apple in developing the |
jdaggett@1244 | 5616 | TrueType format and both platforms have supported TrueType fonts since |
jdaggett@1244 | 5617 | then. Font data in the TrueType format consists of a set of tables |
jdaggett@1244 | 5618 | distinguished with common four-letter tag names, each containing a |
jdaggett@1244 | 5619 | specific type of data. For example, naming information, including |
jdaggett@1244 | 5620 | copyright and license information, is stored in the ‘<code |
jdaggett@1244 | 5621 | class=property>name</code>’ table. The character map (‘<code |
jdaggett@1244 | 5622 | class=property>cmap</code>’) table contains a mapping of character |
jdaggett@1244 | 5623 | encodings to glyphs. Apple later added additional tables for supporting |
jdaggett@1244 | 5624 | enhanced typographic functionality; these are now called Apple Advanced |
jdaggett@1244 | 5625 | Typography, or AAT, fonts. Microsoft and Adobe developed a separate set of |
jdaggett@1662 | 5626 | tables for advanced typography and called their format OpenType <a |
jdaggett@1662 | 5627 | href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>. |
jdaggett@890 | 5628 | |
jdaggett@890 | 5629 | <p>In many cases the font data used under Microsoft Windows or Linux is |
jdaggett@890 | 5630 | slightly different from the data used under Apple's Mac OS X because the |
jdaggett@6694 | 5631 | TrueType format allowed for explicit variation across platforms. This |
jdaggett@6694 | 5632 | includes font metrics, names and character map data. |
jdaggett@6694 | 5633 | |
jdaggett@6694 | 5634 | <p>Specifically, font family name data is handled differently across |
jdaggett@6694 | 5635 | platforms. For TrueType and OpenType fonts these names are contained in |
jdaggett@6694 | 5636 | the ‘<code class=property>name</code>’ table, in name records with |
jdaggett@6694 | 5637 | name ID 1. Mulitple names can be stored for different locales but |
jdaggett@6694 | 5638 | Microsoft recommends fonts always include at least a US English version of |
jdaggett@6694 | 5639 | the name. On Windows, Microsoft made the decision for backwards |
jdaggett@6694 | 5640 | compatibility to limit this family name to a maximum of four faces; for |
jdaggett@6694 | 5641 | larger groupings the "preferred family" (name ID 16) or "WWS family" (name |
jdaggett@6694 | 5642 | ID 21) can be used. Other platforms such as OSX don't have this |
jdaggett@6694 | 5643 | limitation, the family name is used to define all possible groupings. |
jdaggett@6694 | 5644 | |
jdaggett@6694 | 5645 | <p>Other name table data provides names used to uniquely identify a |
jdaggett@6694 | 5646 | specific face within a family. The full font name (name ID 4) and the |
jdaggett@1244 | 5647 | Postscript name (name ID 6) describe a single face uniquely. The bold face |
jdaggett@1244 | 5648 | of the Gill Sans family has a fullname of "Gill Sans Bold" and a |
jdaggett@1244 | 5649 | Postscript name of "GillSans-Bold". There can be multiple localized |
jdaggett@1244 | 5650 | versions of the fullname for a given face but the Postscript name is |
jdaggett@1244 | 5651 | always a unique name made from a limited set of ASCII characters. |
jdaggett@1244 | 5652 | |
jdaggett@1244 | 5653 | <p>On various platforms, different names are used to search for a font. For |
jdaggett@1244 | 5654 | example, with the Windows GDI CreateIndirectFont API, either a family or |
jdaggett@1244 | 5655 | fullname can be used to lookup a face while on Mac OS X the |
jdaggett@1244 | 5656 | ATSFontFindFromName and ATSFontFindFromPostScriptName API calls are used |
jdaggett@1244 | 5657 | to lookup a given face using the fullname and Postscript name. Under |
jdaggett@1244 | 5658 | Linux, the fontconfig API allows fonts to be searched using any of these |
jdaggett@1244 | 5659 | names. In situations where platform API's automatically substitute other |
jdaggett@1244 | 5660 | font choices, it may be necessary to verify a returned font matches a |
jdaggett@1244 | 5661 | given name. |
jdaggett@1244 | 5662 | |
jdaggett@1244 | 5663 | <p>The weight of a given face can be determined via the usWeightClass field |
jdaggett@1244 | 5664 | of the OS/2 table or inferred from the style name (name ID 2). Likewise, |
jdaggett@1244 | 5665 | the width can be determined via the usWidthClass of the OS/2 table or |
jdaggett@6694 | 5666 | inferred from the style name. For historical reasons related to synthetic |
jdaggett@6694 | 5667 | bolding at weights 200 or lower with the Windows GDI API, font designers |
jdaggett@6694 | 5668 | have sometimes skewed values in the OS/2 table to avoid these weights. |
jdaggett@1244 | 5669 | |
jdaggett@1244 | 5670 | <p>Rendering complex scripts that use contextual shaping such as Thai, |
jdaggett@1244 | 5671 | Arabic and Devanagari requires features present only in OpenType or AAT |
jdaggett@1244 | 5672 | fonts. Currently, complex script rendering is supported on Windows and |
jdaggett@1244 | 5673 | Linux using OpenType font features while AAT font features are used under |
jdaggett@1758 | 5674 | Mac OS X. Apple has indicated it intends to support complex script |
jdaggett@1758 | 5675 | rendering using OpenType font features in the future. |
jdaggett@1244 | 5676 | |
jdaggett@2472 | 5677 | <h2 class=no-num id=ch-ch-ch-changes>Changes</h2> |
jdaggett@2472 | 5678 | |
jdaggett@2472 | 5679 | <h3 class=no-num id=recent-changes> Changes from the <a |
jdaggett@6648 | 5680 | href="http://www.w3.org/TR/2012/WD-css3-fonts-20120823/">August 2012 CSS3 |
jdaggett@2472 | 5681 | Fonts Working Draft</a></h3> |
jdaggett@2472 | 5682 | |
jdaggett@2472 | 5683 | <p>Major changes include: |
jdaggett@2472 | 5684 | |
jdaggett@2472 | 5685 | <ul> |
jdaggett@6648 | 5686 | <li>Tightened description and fixed errors in description of |
jdaggett@6648 | 5687 | font-variant-caps |
jdaggett@6659 | 5688 | |
jdaggett@6659 | 5689 | <li>Added ‘<code class=property>auto</code>’ value to ‘<a |
jdaggett@6659 | 5690 | href="#propdef-font-size-adjust"><code |
jdaggett@6659 | 5691 | class=property>font-size-adjust</code></a>’ |
jdaggett@6699 | 5692 | |
jdaggett@6699 | 5693 | <li>Added definition of font load events |
jdaggett@6701 | 5694 | |
jdaggett@6701 | 5695 | <li>Defined explicit steps for font matching grapheme clusters |
jdaggett@7021 | 5696 | |
jdaggett@7021 | 5697 | <li>Added font-stretch values to the font shorthand |
jdaggett@7021 | 5698 | |
jdaggett@7021 | 5699 | <li>Created object model section and revised definition of CSSFontFaceRule |
jdaggett@7060 | 5700 | |
jdaggett@7096 | 5701 | <li>Updated syntax of <code>@font-feature-values</code> rule based on <a |
jdaggett@7095 | 5702 | href="http://lists.w3.org/Archives/Public/www-style/2012Nov/0292.html">CSS |
jdaggett@7095 | 5703 | WG resolution</a> |
jdaggett@7095 | 5704 | |
jdaggett@7095 | 5705 | <li>Other light cleaning and dusting |
jdaggett@2472 | 5706 | </ul> |
jdaggett@2472 | 5707 | |
jdaggett@529 | 5708 | <h2 class=no-num id=acknowledgments>Acknowledgments</h2> |
jdaggett@529 | 5709 | |
jdaggett@1662 | 5710 | <p>I'd like to thank Tal Leming, Jonathan Kew and Christopher Slye for all |
jdaggett@1662 | 5711 | their help and feedback. John Hudson was kind enough to take the time to |
jdaggett@2472 | 5712 | explain the subtleties of OpenType language tags and provided the example |
jdaggett@2472 | 5713 | of character variant usage for displaying text on Byzantine seals. Ken |
jdaggett@2472 | 5714 | Lunde and Eric Muller provided valuable feedback on CJK OpenType features |
jdaggett@2472 | 5715 | and Unicode variation selectors. The idea for supporting font features by |
jdaggett@2472 | 5716 | using font-variant subproperties originated with Håkon Wium Lie, Adam |
jdaggett@5890 | 5717 | Twardoch and Tal Leming. Elika Etemad supplied some of the initial design |
jdaggett@7096 | 5718 | ideas for the <code>@font-feature-values</code> rule. Several members of |
jdaggett@7096 | 5719 | the Google Fonts team provided helpful feedback on font load events. |
jdaggett@7096 | 5720 | Thanks also to House Industries for allowing the use of Ed Interlock in |
jdaggett@7096 | 5721 | the discretionary ligatures example. |
jdaggett@1662 | 5722 | |
jdaggett@529 | 5723 | <p>A special thanks to Robert Bringhurst for the sublime mind expansion |
jdaggett@529 | 5724 | that is <em>The Elements of Typographic Style</em>. |
jdaggett@529 | 5725 | |
jdaggett@484 | 5726 | <h2 class=no-num id=references>References</h2> |
jdaggett@484 | 5727 | |
jdaggett@1662 | 5728 | <h3 class=no-num id=normative-references>Normative References</h3> |
jdaggett@484 | 5729 | <!--begin-normative--> |
jdaggett@484 | 5730 | <!-- Sorted by label --> |
jdaggett@484 | 5731 | |
jdaggett@484 | 5732 | <dl class=bibliography> |
jdaggett@484 | 5733 | <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> |
jdaggett@484 | 5734 | <!----> |
jdaggett@531 | 5735 | |
jdaggett@2461 | 5736 | <dt id=CHARMOD>[CHARMOD] |
jdaggett@2461 | 5737 | |
jdaggett@2461 | 5738 | <dd>Martin J. Dürst; et al. <a |
jdaggett@2737 | 5739 | href="http://www.w3.org/TR/2005/REC-charmod-20050215/"><cite>Character |
jdaggett@2461 | 5740 | Model for the World Wide Web 1.0: Fundamentals.</cite></a> 15 February |
jdaggett@2461 | 5741 | 2005. W3C Recommendation. URL: <a |
jdaggett@2737 | 5742 | href="http://www.w3.org/TR/2005/REC-charmod-20050215/">http://www.w3.org/TR/2005/REC-charmod-20050215/</a> |
jdaggett@2461 | 5743 | </dd> |
jdaggett@2461 | 5744 | <!----> |
jdaggett@2461 | 5745 | |
jdaggett@2457 | 5746 | <dt id=CORS>[CORS] |
jdaggett@1662 | 5747 | |
jdaggett@1662 | 5748 | <dd>Anne van Kesteren. <a |
jdaggett@6701 | 5749 | href="http://www.w3.org/TR/2012/WD-cors-20120403/"><cite>Cross-Origin |
jdaggett@6701 | 5750 | Resource Sharing.</cite></a> 3 April 2012. W3C Working Draft. (Work in |
jdaggett@1662 | 5751 | progress.) URL: <a |
jdaggett@6701 | 5752 | href="http://www.w3.org/TR/2012/WD-cors-20120403/">http://www.w3.org/TR/2012/WD-cors-20120403/</a> |
jdaggett@1662 | 5753 | </dd> |
jdaggett@1662 | 5754 | <!----> |
jdaggett@1662 | 5755 | |
jdaggett@3041 | 5756 | <dt id=CSS21>[CSS21] |
jdaggett@3041 | 5757 | |
jdaggett@3041 | 5758 | <dd>Bert Bos; et al. <a |
jdaggett@7179 | 5759 | href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style |
jdaggett@3041 | 5760 | Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June |
jdaggett@3041 | 5761 | 2011. W3C Recommendation. URL: <a |
jdaggett@7179 | 5762 | href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a> |
jdaggett@3041 | 5763 | </dd> |
jdaggett@3041 | 5764 | <!----> |
jdaggett@3041 | 5765 | |
jdaggett@5833 | 5766 | <dt id=CSS3VAL>[CSS3VAL] |
jdaggett@5833 | 5767 | |
jdaggett@5833 | 5768 | <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a |
jdaggett@6701 | 5769 | href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS |
jdaggett@6701 | 5770 | Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate |
jdaggett@6701 | 5771 | Recommendation. (Work in progress.) URL: <a |
jdaggett@6701 | 5772 | href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a> |
jdaggett@5833 | 5773 | </dd> |
jdaggett@5833 | 5774 | <!----> |
jdaggett@5833 | 5775 | |
jdaggett@1662 | 5776 | <dt id=HTML5>[HTML5] |
jdaggett@1662 | 5777 | |
jdaggett@1856 | 5778 | <dd>Ian Hickson. <a |
jdaggett@3041 | 5779 | href="http://www.w3.org/TR/2011/WD-html5-20110525/"><cite>HTML5.</cite></a> |
jdaggett@3041 | 5780 | 25 May 2011. W3C Working Draft. (Work in progress.) URL: <a |
jdaggett@3041 | 5781 | href="http://www.w3.org/TR/2011/WD-html5-20110525/">http://www.w3.org/TR/2011/WD-html5-20110525/</a> |
jdaggett@1662 | 5782 | </dd> |
jdaggett@1662 | 5783 | <!----> |
jdaggett@1662 | 5784 | |
jdaggett@1662 | 5785 | <dt id=OPEN-FONT-FORMAT>[OPEN-FONT-FORMAT] |
jdaggett@1662 | 5786 | |
jdaggett@1662 | 5787 | <dd><a |
jdaggett@1662 | 5788 | href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip"><cite>Information |
jdaggett@1662 | 5789 | technology — Coding of audio-visual objects — Part 22: Open Font |
jdaggett@1662 | 5790 | Format.</cite></a> International Organization for Standardization. |
jdaggett@1662 | 5791 | ISO/IEC 14496-22:2009. URL: <a |
jdaggett@1662 | 5792 | 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 | 5793 | </dd> |
jdaggett@1662 | 5794 | <!----> |
jdaggett@1662 | 5795 | |
jdaggett@1662 | 5796 | <dt id=OPENTYPE>[OPENTYPE] |
jdaggett@1662 | 5797 | |
jdaggett@1662 | 5798 | <dd><a |
jdaggett@1662 | 5799 | href="http://www.microsoft.com/typography/otspec/default.htm"><cite>OpenType |
jdaggett@1662 | 5800 | specification.</cite></a> Microsoft. URL: <a |
jdaggett@1662 | 5801 | href="http://www.microsoft.com/typography/otspec/default.htm">http://www.microsoft.com/typography/otspec/default.htm</a> |
jdaggett@1662 | 5802 | </dd> |
jdaggett@1662 | 5803 | <!----> |
jdaggett@1662 | 5804 | |
jdaggett@1662 | 5805 | <dt id=OPENTYPE-FEATURES>[OPENTYPE-FEATURES] |
jdaggett@1662 | 5806 | |
jdaggett@1662 | 5807 | <dd><a |
jdaggett@1662 | 5808 | href="http://www.microsoft.com/typography/otspec/featurelist.htm"><cite>OpenType |
jdaggett@1662 | 5809 | feature registry.</cite></a> Microsoft. URL: <a |
jdaggett@1662 | 5810 | href="http://www.microsoft.com/typography/otspec/featurelist.htm">http://www.microsoft.com/typography/otspec/featurelist.htm</a> |
jdaggett@1662 | 5811 | </dd> |
jdaggett@1662 | 5812 | <!----> |
jdaggett@1662 | 5813 | |
jdaggett@7103 | 5814 | <dt id=RFC2119>[RFC2119] |
jdaggett@7103 | 5815 | |
jdaggett@7103 | 5816 | <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key |
jdaggett@7103 | 5817 | words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet |
jdaggett@7103 | 5818 | RFC 2119. URL: <a |
jdaggett@7103 | 5819 | href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> |
jdaggett@7103 | 5820 | </dd> |
jdaggett@7103 | 5821 | <!----> |
jdaggett@7103 | 5822 | |
jdaggett@2457 | 5823 | <dt id=UAX15>[UAX15] |
jdaggett@2457 | 5824 | |
jdaggett@2457 | 5825 | <dd>Mark Davis. <a |
jdaggett@2461 | 5826 | href="http://www.unicode.org/reports/tr15/tr15-33.html"><cite>Unicode |
jdaggett@2461 | 5827 | Normalization Forms.</cite></a> 17 September 2010. Unicode Standard Annex |
jdaggett@2461 | 5828 | #15. URL: <a |
jdaggett@2461 | 5829 | href="http://www.unicode.org/reports/tr15/tr15-33.html">http://www.unicode.org/reports/tr15/tr15-33.html</a> |
jdaggett@2457 | 5830 | </dd> |
jdaggett@2457 | 5831 | <!----> |
jdaggett@2457 | 5832 | |
jdaggett@1856 | 5833 | <dt id=UAX29>[UAX29] |
jdaggett@1856 | 5834 | |
jdaggett@1856 | 5835 | <dd>Mark Davis. <a |
jdaggett@5809 | 5836 | href="http://www.unicode.org/reports/tr29/"><cite>Unicode Text |
jdaggett@5809 | 5837 | Segmentation.</cite></a> 24 January 2012. Unicode Standard Annex #29. |
jdaggett@2461 | 5838 | URL: <a |
jdaggett@5809 | 5839 | href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a> |
jdaggett@1856 | 5840 | </dd> |
jdaggett@1856 | 5841 | <!----> |
jdaggett@1856 | 5842 | |
jdaggett@3041 | 5843 | <dt id=UNICODE6>[UNICODE6] |
jdaggett@531 | 5844 | |
jdaggett@531 | 5845 | <dd>The Unicode Consortium. <a |
jdaggett@5890 | 5846 | href="http://www.unicode.org/versions/Unicode6.1.0/"><cite>The Unicode |
jdaggett@5890 | 5847 | Standard, Version 6.1.0.</cite></a> Defined by: The Unicode Standard, |
jdaggett@5890 | 5848 | Version 6.1.0 (Mountain View, CA: The Unicode Consortium, 2012. ISBN |
jdaggett@5890 | 5849 | 978-1-936213-02-3) URL: <a |
jdaggett@5890 | 5850 | href="http://www.unicode.org/versions/Unicode6.1.0/">http://www.unicode.org/versions/Unicode6.1.0/</a> |
jdaggett@531 | 5851 | </dd> |
jdaggett@531 | 5852 | <!----> |
jdaggett@484 | 5853 | </dl> |
jdaggett@484 | 5854 | <!--end-normative--> |
jdaggett@3041 | 5855 | <!--{{!CSS21}}--> |
jdaggett@5833 | 5856 | <!--{{!CSS3VAL}}--> |
jdaggett@1662 | 5857 | <!--{{!OPENTYPE}}--> |
jdaggett@1662 | 5858 | <!--{{!OPENTYPE-FEATURES}}--> |
jdaggett@1662 | 5859 | <!--{{!OPEN-FONT-FORMAT}}--> |
jdaggett@3041 | 5860 | <!--{{!UNICODE6}}--> |
jdaggett@2457 | 5861 | <!--{{!UAX15}}--> |
jdaggett@1856 | 5862 | <!--{{!UAX29}}--> |
jdaggett@2457 | 5863 | <!--{{!CORS}}--> |
jdaggett@1662 | 5864 | <!--{{!HTML5}}--> |
jdaggett@2461 | 5865 | <!--{{!CHARMOD}}--> |
jdaggett@1662 | 5866 | |
jdaggett@1662 | 5867 | <h3 class=no-num id=other-references>Other References</h3> |
jdaggett@484 | 5868 | <!--begin-informative--> |
jdaggett@484 | 5869 | <!-- Sorted by label --> |
jdaggett@484 | 5870 | |
jdaggett@484 | 5871 | <dl class=bibliography> |
jdaggett@484 | 5872 | <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> |
jdaggett@484 | 5873 | <!----> |
jdaggett@484 | 5874 | |
jdaggett@3042 | 5875 | <dt id=AAT-FEATURES>[AAT-FEATURES] |
jdaggett@3042 | 5876 | |
jdaggett@3042 | 5877 | <dd><a href="http://developer.apple.com/fonts/registry/"><cite>Apple |
jdaggett@3042 | 5878 | Advanced Typography font feature registry.</cite></a> Apple. URL: <a |
jdaggett@3042 | 5879 | href="http://developer.apple.com/fonts/registry/">http://developer.apple.com/fonts/registry/</a> |
jdaggett@3042 | 5880 | </dd> |
jdaggett@3042 | 5881 | <!----> |
jdaggett@3042 | 5882 | |
jdaggett@512 | 5883 | <dt id=ARABIC-TYPO>[ARABIC-TYPO] |
jdaggett@512 | 5884 | |
jdaggett@513 | 5885 | <dd>Huda Smitshuijzen AbiFares. <cite>Arabic Typography: A Comprehensive |
jdaggett@1148 | 5886 | Sourcebook.</cite> Saqi Books. 2001. ISBN 0-86356-347-3.</dd> |
jdaggett@512 | 5887 | <!----> |
jdaggett@512 | 5888 | |
jdaggett@3042 | 5889 | <dt id=CHARMOD-NORM>[CHARMOD-NORM] |
jdaggett@3042 | 5890 | |
jdaggett@3042 | 5891 | <dd>François Yergeau; et al. <a |
jdaggett@5809 | 5892 | href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/"><cite>Character |
jdaggett@5809 | 5893 | Model for the World Wide Web 1.0: Normalization.</cite></a> 1 May 2012. |
jdaggett@5809 | 5894 | W3C Working Draft. (Work in progress.) URL: <a |
jdaggett@5809 | 5895 | href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/">http://www.w3.org/TR/2012/WD-charmod-norm-20120501/</a> |
jdaggett@3042 | 5896 | </dd> |
jdaggett@3042 | 5897 | <!----> |
jdaggett@3042 | 5898 | |
jdaggett@1732 | 5899 | <dt id=CJKV-INFO-PROCESSING>[CJKV-INFO-PROCESSING] |
jdaggett@1732 | 5900 | |
jdaggett@1732 | 5901 | <dd>Ken Lunde. <cite>CJKV Information Processing, Second Edition.</cite> |
jdaggett@1732 | 5902 | O'Reilly Media, Inc. 2009. ISBN 0-596-51447-1.</dd> |
jdaggett@1732 | 5903 | <!----> |
jdaggett@1732 | 5904 | |
jdaggett@3460 | 5905 | <dt id=CSS3-CONDITIONAL>[CSS3-CONDITIONAL] |
jdaggett@3460 | 5906 | |
jdaggett@3460 | 5907 | <dd>L. David Baron. <a |
jdaggett@7041 | 5908 | href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/"><cite>CSS |
jdaggett@7041 | 5909 | Conditional Rules Module Level 3.</cite></a> 11 September 2012. W3C |
jdaggett@3460 | 5910 | Working Draft. (Work in progress.) URL: <a |
jdaggett@7041 | 5911 | href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/">http://www.w3.org/TR/2012/WD-css3-conditional-20120911/</a> |
jdaggett@3460 | 5912 | </dd> |
jdaggett@3460 | 5913 | <!----> |
jdaggett@3460 | 5914 | |
jdaggett@6701 | 5915 | <dt id=CSS3TEXT>[CSS3TEXT] |
jdaggett@6701 | 5916 | |
jdaggett@6701 | 5917 | <dd>Elika J. Etemad; Koji Ishii. <a |
jdaggett@7041 | 5918 | href="http://www.w3.org/TR/2012/WD-css3-text-20121113/"><cite>CSS Text |
jdaggett@7041 | 5919 | Module Level 3.</cite></a> 13 November 2012. W3C Working Draft. (Work in |
jdaggett@6701 | 5920 | progress.) URL: <a |
jdaggett@7041 | 5921 | href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">http://www.w3.org/TR/2012/WD-css3-text-20121113/</a> |
jdaggett@6701 | 5922 | </dd> |
jdaggett@6701 | 5923 | <!----> |
jdaggett@6701 | 5924 | |
jdaggett@1856 | 5925 | <dt id=DIGITAL-TYPOGRAPHY>[DIGITAL-TYPOGRAPHY] |
jdaggett@1856 | 5926 | |
jdaggett@1856 | 5927 | <dd>Richard Rubinstein. <cite>Digital Typography, An Introduction to Type |
jdaggett@1856 | 5928 | and Composition for Computer System Design.</cite> Addison-Wesley. 1988. |
jdaggett@1856 | 5929 | ISBN 0-201-17633-5.</dd> |
jdaggett@1856 | 5930 | <!----> |
jdaggett@1856 | 5931 | |
jdaggett@7022 | 5932 | <dt id=DOM-LEVEL-2-STYLE>[DOM-LEVEL-2-STYLE] |
jdaggett@7022 | 5933 | |
jdaggett@7022 | 5934 | <dd>Chris Wilson; Philippe Le Hégaret; Vidur Apparao. <a |
jdaggett@7179 | 5935 | href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/"><cite>Document |
jdaggett@7022 | 5936 | Object Model (DOM) Level 2 Style Specification.</cite></a> 13 November |
jdaggett@7022 | 5937 | 2000. W3C Recommendation. URL: <a |
jdaggett@7179 | 5938 | 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 | 5939 | </dd> |
jdaggett@7022 | 5940 | <!----> |
jdaggett@7022 | 5941 | |
jdaggett@498 | 5942 | <dt id=ELEMTYPO>[ELEMTYPO] |
jdaggett@498 | 5943 | |
jdaggett@498 | 5944 | <dd>Robert Bringhurst. <cite>The Elements of Typographic Style, Version |
jdaggett@1148 | 5945 | 3.1.</cite> Hartley & Marks. 2005. ISBN 0-88179-206-3.</dd> |
jdaggett@498 | 5946 | <!----> |
jdaggett@498 | 5947 | |
jdaggett@513 | 5948 | <dt id=LANGCULTTYPE>[LANGCULTTYPE] |
jdaggett@513 | 5949 | |
jdaggett@1148 | 5950 | <dd>John D. Berry, Ed. <cite>Language Culture Type.</cite> Graphis. 2001. |
jdaggett@1148 | 5951 | ISBN 1-932026-01-0.</dd> |
jdaggett@512 | 5952 | <!----> |
jdaggett@1662 | 5953 | |
jdaggett@1662 | 5954 | <dt id=OPENTYPE-FONT-GUIDE>[OPENTYPE-FONT-GUIDE] |
jdaggett@1662 | 5955 | |
jdaggett@1662 | 5956 | <dd><a |
jdaggett@3538 | 5957 | href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf"><cite>OpenType |
jdaggett@1662 | 5958 | User Guide.</cite></a> FontShop International. URL: <a |
jdaggett@3538 | 5959 | 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 | 5960 | </dd> |
jdaggett@1662 | 5961 | <!----> |
jdaggett@1856 | 5962 | |
jdaggett@2527 | 5963 | <dt id=RASTER-TRAGEDY>[RASTER-TRAGEDY] |
jdaggett@2527 | 5964 | |
jdaggett@2527 | 5965 | <dd>Beat Stamm. <a href="http://www.rastertragedy.com/"><cite>The Raster |
jdaggett@6659 | 5966 | Tragedy at Low-Resolution Revisited.</cite></a> 7 December 2011. URL: <a |
jdaggett@2527 | 5967 | href="http://www.rastertragedy.com/">http://www.rastertragedy.com/</a></dd> |
jdaggett@2527 | 5968 | <!----> |
jdaggett@2527 | 5969 | |
jdaggett@1856 | 5970 | <dt id=WINDOWS-GLYPH-PROC>[WINDOWS-GLYPH-PROC] |
jdaggett@1856 | 5971 | |
jdaggett@1856 | 5972 | <dd>John Hudson. <a |
jdaggett@1856 | 5973 | href="http://www.microsoft.com/typography/developers/opentype/default.htm"><cite>Windows |
jdaggett@1856 | 5974 | Glyph Processing.</cite></a> Microsoft Typogrraphy. URL: <a |
jdaggett@1856 | 5975 | href="http://www.microsoft.com/typography/developers/opentype/default.htm">http://www.microsoft.com/typography/developers/opentype/default.htm</a> |
jdaggett@1856 | 5976 | </dd> |
jdaggett@1856 | 5977 | <!----> |
jdaggett@484 | 5978 | </dl> |
jdaggett@484 | 5979 | <!--end-informative--> |
jdaggett@518 | 5980 | <!--{{ARABIC-TYPO}}--> |
jdaggett@1732 | 5981 | <!--{{CJKV-INFO-PROCESSING}}--> |
jdaggett@1856 | 5982 | <!--{{DIGITAL-TYPOGRAPHY}}--> |
jdaggett@7022 | 5983 | <!--{{DOM-LEVEL-2-STYLE}}--> |
jdaggett@518 | 5984 | <!--{{ELEMTYPO}}--> |
jdaggett@1856 | 5985 | <!--{{LANGCULTTYPE}}--> |
jdaggett@1662 | 5986 | <!--{{OPENTYPE-FONT-GUIDE}}--> |
jdaggett@2527 | 5987 | <!--{{RASTER-TRAGEDY}}--> |
jdaggett@1856 | 5988 | <!--{{WINDOWS-GLYPH-PROC}}--> |
jdaggett@3042 | 5989 | <!--{{CHARMOD-NORM}}--> |
jdaggett@3042 | 5990 | <!--{{AAT-FEATURES}}--> |
jdaggett@3460 | 5991 | <!--{{CSS3-CONDITIONAL}}--> |
jdaggett@6701 | 5992 | <!--{{CSS3TEXT}}--> |
jdaggett@484 | 5993 | |
jdaggett@484 | 5994 | <h2 class=no-num id=index>Index</h2> |
jdaggett@484 | 5995 | <!--begin-index--> |
jdaggett@484 | 5996 | |
jdaggett@484 | 5997 | <ul class=indexlist> |
jdaggett@7060 | 5998 | <li><absolute-size>, <a href="#ltabsolute-sizegt" |
jdaggett@7060 | 5999 | title="<absolute-size>"><strong>3.5</strong></a> |
jdaggett@890 | 6000 | |
jdaggett@2479 | 6001 | <li><var><common-lig-values></var>, <a href="#ltcommon-lig-values" |
jdaggett@6176 | 6002 | title="<common-lig-values>"><strong>6.4</strong></a> |
jdaggett@2479 | 6003 | |
jdaggett@2479 | 6004 | <li><var><contextual-alt-values></var>, <a |
jdaggett@2479 | 6005 | href="#ltcontextual-alt-valuesgt" |
jdaggett@6176 | 6006 | title="<contextual-alt-values>"><strong>6.4</strong></a> |
jdaggett@2479 | 6007 | |
jdaggett@3460 | 6008 | <li><var><discretionary-lig-values></var>, <a |
jdaggett@3460 | 6009 | href="#ltdiscretionary-lig-values" |
jdaggett@6176 | 6010 | title="<discretionary-lig-values>"><strong>6.4</strong></a> |
jdaggett@3460 | 6011 | |
jdaggett@2479 | 6012 | <li><var><east-asian-variant-values></var>, <a |
jdaggett@2479 | 6013 | href="#lteast-asian-variant-valuesgt" |
jdaggett@2479 | 6014 | title="<east-asian-variant-values>"><strong>6.10</strong></a> |
jdaggett@2479 | 6015 | |
jdaggett@2479 | 6016 | <li><var><east-asian-width-values></var>, <a |
jdaggett@2479 | 6017 | href="#lteast-asian-width-valuesgt" |
jdaggett@2479 | 6018 | title="<east-asian-width-values>"><strong>6.10</strong></a> |
jdaggett@2479 | 6019 | |
jdaggett@7041 | 6020 | <li><var><feature-ident></var>, <a href="#ltfeature-identgt" |
jdaggett@7041 | 6021 | title="<feature-ident>"><strong>6.9</strong></a> |
jdaggett@7041 | 6022 | |
jdaggett@2479 | 6023 | <li><var><feature-index></var>, <a href="#ltfeature-indexgt" |
jdaggett@2479 | 6024 | title="<feature-index>"><strong>6.9</strong></a> |
jdaggett@2479 | 6025 | |
jdaggett@2515 | 6026 | <li><var><feature-tag-value></var>, <a href="#ltfeature-tag-valuegt" |
jdaggett@2515 | 6027 | title="<feature-tag-value>"><strong>6.12</strong></a> |
jdaggett@2515 | 6028 | |
jdaggett@7041 | 6029 | <li><var><feature-type></var>, <a href="#ltfeature-typegt" |
jdaggett@7041 | 6030 | title="<feature-type>"><strong>6.9</strong></a> |
jdaggett@2479 | 6031 | |
jdaggett@7060 | 6032 | <li><font-description>, <a href="#ltfont-descriptiongt" |
jdaggett@7060 | 6033 | title="<font-description>"><strong>4.1</strong></a> |
jdaggett@7060 | 6034 | |
jdaggett@7060 | 6035 | <li><font-face-name>, <a href="#ltfont-face-namegt" |
jdaggett@7060 | 6036 | title="<font-face-name>"><strong>4.3</strong></a> |
jdaggett@4624 | 6037 | |
jdaggett@4624 | 6038 | <li><var><font-family></var>, <a href="#ltfont-familygt" |
jdaggett@4624 | 6039 | title="<font-family>"><strong>6.9</strong></a> |
jdaggett@4624 | 6040 | |
jdaggett@4624 | 6041 | <li><var><font-variant-css21></var>, <a |
jdaggett@4624 | 6042 | href="#ltfont-variant-css21gt" |
jdaggett@4624 | 6043 | title="<font-variant-css21>"><strong>3.7</strong></a> |
jdaggett@4624 | 6044 | |
jdaggett@4624 | 6045 | <li><var><historical-lig-values></var>, <a |
jdaggett@4624 | 6046 | href="#lthistorical-lig-values" |
jdaggett@6176 | 6047 | title="<historical-lig-values>"><strong>6.4</strong></a> |
jdaggett@4624 | 6048 | |
jdaggett@4624 | 6049 | <li><length>, <a href="#ltlengthgt" title="<length>">3.5</a> |
jdaggett@4624 | 6050 | |
jdaggett@4624 | 6051 | <li><number>, <a href="#ltnumbergt" title="<number>">3.6</a> |
jdaggett@4624 | 6052 | |
jdaggett@4624 | 6053 | <li><var><numeric-figure-values></var>, <a |
jdaggett@4624 | 6054 | href="#ltnumeric-figure-valuesgt" |
jdaggett@4624 | 6055 | title="<numeric-figure-values>"><strong>6.7</strong></a> |
jdaggett@4624 | 6056 | |
jdaggett@4624 | 6057 | <li><var><numeric-fraction-values></var>, <a |
jdaggett@4624 | 6058 | href="#ltnumeric-fraction-valuesgt" |
jdaggett@4624 | 6059 | title="<numeric-fraction-values>"><strong>6.7</strong></a> |
jdaggett@4624 | 6060 | |
jdaggett@4624 | 6061 | <li><var><numeric-spacing-values></var>, <a |
jdaggett@4624 | 6062 | href="#ltnumeric-spacing-valuesgt" |
jdaggett@4624 | 6063 | title="<numeric-spacing-values>"><strong>6.7</strong></a> |
jdaggett@4624 | 6064 | |
jdaggett@4624 | 6065 | <li><percentage>, <a href="#ltpercentagegt-" |
jdaggett@4624 | 6066 | title="<percentage>">3.5</a> |
jdaggett@4624 | 6067 | |
jdaggett@7060 | 6068 | <li><relative-size>, <a href="#ltrelative-sizegt" |
jdaggett@7060 | 6069 | title="<relative-size>"><strong>3.5</strong></a> |
jdaggett@7060 | 6070 | |
jdaggett@7060 | 6071 | <li><urange>, <a href="#lturangegt" |
jdaggett@7060 | 6072 | title="<urange>"><strong>4.5</strong></a> |
jdaggett@2479 | 6073 | |
jdaggett@2479 | 6074 | <li>@font-face, <a href="#font-face" |
jdaggett@2479 | 6075 | title="@font-face"><strong>4.1</strong></a>, <a href="#font-face0" |
jdaggett@2479 | 6076 | title="@font-face">4.1</a>, <a href="#font-face1" |
jdaggett@2479 | 6077 | title="@font-face">4.3</a> |
jdaggett@2479 | 6078 | |
jdaggett@4624 | 6079 | <li>all-petite-caps, <a href="#all-petite-caps" |
jdaggett@4624 | 6080 | title=all-petite-caps><strong>6.6</strong></a> |
jdaggett@4624 | 6081 | |
jdaggett@4624 | 6082 | <li>all-small-caps, <a href="#all-small-caps" |
jdaggett@4624 | 6083 | title=all-small-caps><strong>6.6</strong></a> |
jdaggett@4624 | 6084 | |
jdaggett@7060 | 6085 | <li>annotation, <a href="#annotationltfeature-value-namegt" |
jdaggett@7060 | 6086 | title=annotation><strong>6.8</strong></a> |
jdaggett@4624 | 6087 | |
jdaggett@4624 | 6088 | <li>aspect value, <a href="#aspect-value0" title="aspect |
jdaggett@4624 | 6089 | value"><strong>3.6</strong></a> |
jdaggett@4624 | 6090 | |
jdaggett@4624 | 6091 | <li>at-rules, <a href="#at-rule" title=at-rules>4.1</a> |
jdaggett@4624 | 6092 | |
jdaggett@7103 | 6093 | <li>authoring tool, <a href="#authoring-tool" title="authoring |
jdaggett@7103 | 6094 | tool"><strong>10.2</strong></a> |
jdaggett@7103 | 6095 | |
jdaggett@7060 | 6096 | <li>character-variant, <a href="#character-variantltfeature-value-namegt" |
jdaggett@7060 | 6097 | title=character-variant><strong>6.8</strong></a> |
jdaggett@4624 | 6098 | |
jdaggett@4624 | 6099 | <li>common-ligatures, <a href="#common-ligatures" |
jdaggett@6176 | 6100 | title=common-ligatures><strong>6.4</strong></a> |
jdaggett@4624 | 6101 | |
jdaggett@4624 | 6102 | <li>contextual, <a href="#contextual" |
jdaggett@6176 | 6103 | title=contextual><strong>6.4</strong></a> |
jdaggett@4624 | 6104 | |
jdaggett@7021 | 6105 | <li>CSSFontFaceRule, <a href="#cssfontfacerule" |
jdaggett@7021 | 6106 | title=CSSFontFaceRule><strong>8.1</strong></a> |
jdaggett@7021 | 6107 | |
jdaggett@7021 | 6108 | <li>CSSFontFeatureValuesRule, <a href="#cssfontfeaturevaluesrule" |
jdaggett@7021 | 6109 | title=CSSFontFeatureValuesRule><strong>8.2</strong></a> |
jdaggett@7021 | 6110 | |
jdaggett@4624 | 6111 | <li>cursive, definition of, <a href="#cursive0" title="cursive, definition |
jdaggett@4624 | 6112 | of"><strong>#</strong></a> |
jdaggett@4624 | 6113 | |
jdaggett@7232 | 6114 | <li>default face, <a href="#default-face" title="default |
jdaggett@7232 | 6115 | face"><strong>5.1</strong></a> |
jdaggett@7232 | 6116 | |
jdaggett@4624 | 6117 | <li>diagonal-fractions, <a href="#diagonal-fractions" |
jdaggett@4624 | 6118 | title=diagonal-fractions><strong>6.7</strong></a> |
jdaggett@4624 | 6119 | |
jdaggett@4624 | 6120 | <li>discretionary-ligatures, <a href="#discretionary-ligatures" |
jdaggett@6176 | 6121 | title=discretionary-ligatures><strong>6.4</strong></a> |
jdaggett@4624 | 6122 | |
jdaggett@4624 | 6123 | <li>fantasy, definition of, <a href="#fantasy0" title="fantasy, definition |
jdaggett@4624 | 6124 | of"><strong>#</strong></a> |
jdaggett@4624 | 6125 | |
jdaggett@7060 | 6126 | <li>fire a font load event, <a href="#fire-a-font-load-event" title="fire |
jdaggett@7060 | 6127 | a font load event"><strong>9.2.1</strong></a> |
jdaggett@7060 | 6128 | |
jdaggett@4624 | 6129 | <li>font, <a href="#propdef-font" title=font><strong>3.7</strong></a> |
jdaggett@2472 | 6130 | |
jdaggett@7060 | 6131 | <li>font load, <a href="#font-load" title="font |
jdaggett@7060 | 6132 | load"><strong>9.2</strong></a> |
jdaggett@7060 | 6133 | |
jdaggett@1662 | 6134 | <li>font-family, <a href="#descdef-font-family" |
jdaggett@4624 | 6135 | title=font-family><strong>4.2</strong></a>, <a |
jdaggett@1662 | 6136 | href="#propdef-font-family" title=font-family><strong>3.1</strong></a> |
jdaggett@1662 | 6137 | |
jdaggett@7060 | 6138 | <li>font-feature-settings, <a href="#propdef-font-feature-settings" |
jdaggett@2118 | 6139 | title=font-feature-settings><strong>6.12</strong></a> |
jdaggett@1662 | 6140 | |
jdaggett@7060 | 6141 | <li>font-feature-settings (descriptor), <a |
jdaggett@7060 | 6142 | href="#descdef-font-feature-settings" title="font-feature-settings |
jdaggett@7060 | 6143 | (descriptor)"><strong>4.6</strong></a> |
jdaggett@7060 | 6144 | |
jdaggett@1662 | 6145 | <li>font-kerning, <a href="#propdef-font-kerning" |
jdaggett@1856 | 6146 | title=font-kerning><strong>6.3</strong></a> |
jdaggett@1662 | 6147 | |
jdaggett@1732 | 6148 | <li>font-language-override, <a href="#propdef-font-language-override" |
jdaggett@2118 | 6149 | title=font-language-override><strong>6.13</strong></a> |
jdaggett@1662 | 6150 | |
jdaggett@1662 | 6151 | <li>font-size, <a href="#propdef-font-size" |
jdaggett@1662 | 6152 | title=font-size><strong>3.5</strong></a> |
jdaggett@1662 | 6153 | |
jdaggett@1662 | 6154 | <li>font-size-adjust, <a href="#propdef-font-size-adjust" |
jdaggett@1662 | 6155 | title=font-size-adjust><strong>3.6</strong></a> |
jdaggett@1662 | 6156 | |
jdaggett@7060 | 6157 | <li>font-stretch, <a href="#propdef-font-stretch" |
jdaggett@7060 | 6158 | title=font-stretch><strong>3.3</strong></a> |
jdaggett@7060 | 6159 | |
jdaggett@7060 | 6160 | <li>font-stretch (descriptor), <a href="#descdef-font-stretch" |
jdaggett@7060 | 6161 | title="font-stretch (descriptor)"><strong>4.4</strong></a> |
jdaggett@7060 | 6162 | |
jdaggett@7060 | 6163 | <li>font-style, <a href="#propdef-font-style" |
jdaggett@1662 | 6164 | title=font-style><strong>3.4</strong></a> |
jdaggett@1662 | 6165 | |
jdaggett@7060 | 6166 | <li>font-style (descriptor), <a href="#descdef-font-style" |
jdaggett@7060 | 6167 | title="font-style (descriptor)"><strong>4.4</strong></a> |
jdaggett@7060 | 6168 | |
jdaggett@2487 | 6169 | <li>font-synthesis, <a href="#propdef-font-synthesis" |
jdaggett@2487 | 6170 | title=font-synthesis><strong>3.8</strong></a> |
jdaggett@2457 | 6171 | |
jdaggett@7060 | 6172 | <li>font-variant, <a href="#propdef-font-variant" |
jdaggett@7060 | 6173 | title=font-variant><strong>6.11</strong></a> |
jdaggett@7060 | 6174 | |
jdaggett@7060 | 6175 | <li>font-variant (descriptor), <a href="#descdef-font-variant" |
jdaggett@7060 | 6176 | title="font-variant (descriptor)"><strong>4.6</strong></a> |
jdaggett@1662 | 6177 | |
jdaggett@1662 | 6178 | <li>font-variant-alternates, <a href="#propdef-font-variant-alternates" |
jdaggett@2118 | 6179 | title=font-variant-alternates><strong>6.8</strong></a> |
jdaggett@1662 | 6180 | |
jdaggett@1662 | 6181 | <li>font-variant-caps, <a href="#propdef-font-variant-caps" |
jdaggett@2118 | 6182 | title=font-variant-caps><strong>6.6</strong></a> |
jdaggett@1732 | 6183 | |
jdaggett@1662 | 6184 | <li>font-variant-east-asian, <a href="#propdef-font-variant-east-asian" |
jdaggett@2118 | 6185 | title=font-variant-east-asian><strong>6.10</strong></a> |
jdaggett@1662 | 6186 | |
jdaggett@1662 | 6187 | <li>font-variant-ligatures, <a href="#propdef-font-variant-ligatures" |
jdaggett@6176 | 6188 | title=font-variant-ligatures><strong>6.4</strong></a> |
jdaggett@1662 | 6189 | |
jdaggett@1662 | 6190 | <li>font-variant-numeric, <a href="#propdef-font-variant-numeric" |
jdaggett@2118 | 6191 | title=font-variant-numeric><strong>6.7</strong></a> |
jdaggett@2118 | 6192 | |
jdaggett@3460 | 6193 | <li>font-variant-position, <a href="#propdef-font-variant-position" |
jdaggett@6176 | 6194 | title=font-variant-position><strong>6.5</strong></a> |
jdaggett@3460 | 6195 | |
jdaggett@7060 | 6196 | <li>font-weight, <a href="#propdef-font-weight" |
jdaggett@7060 | 6197 | title=font-weight><strong>3.2</strong></a> |
jdaggett@7060 | 6198 | |
jdaggett@7060 | 6199 | <li>font-weight (descriptor), <a href="#descdef-font-weight" |
jdaggett@7060 | 6200 | title="font-weight (descriptor)"><strong>4.4</strong></a> |
jdaggett@1662 | 6201 | |
jdaggett@1662 | 6202 | <li>full-width, <a href="#full-width" |
jdaggett@2118 | 6203 | title=full-width><strong>6.10</strong></a> |
jdaggett@1662 | 6204 | |
jdaggett@1662 | 6205 | <li>historical-forms, <a href="#historical-forms" |
jdaggett@2118 | 6206 | title=historical-forms><strong>6.8</strong></a> |
jdaggett@1662 | 6207 | |
jdaggett@1662 | 6208 | <li>historical-ligatures, <a href="#historical-ligatures" |
jdaggett@6176 | 6209 | title=historical-ligatures><strong>6.4</strong></a> |
jdaggett@1732 | 6210 | |
jdaggett@2118 | 6211 | <li>jis04, <a href="#jis04" title=jis04><strong>6.10</strong></a> |
jdaggett@2118 | 6212 | |
jdaggett@2118 | 6213 | <li>jis78, <a href="#jis78" title=jis78><strong>6.10</strong></a> |
jdaggett@2118 | 6214 | |
jdaggett@2118 | 6215 | <li>jis83, <a href="#jis83" title=jis83><strong>6.10</strong></a> |
jdaggett@2118 | 6216 | |
jdaggett@2118 | 6217 | <li>jis90, <a href="#jis90" title=jis90><strong>6.10</strong></a> |
jdaggett@1662 | 6218 | |
jdaggett@1662 | 6219 | <li>lining-nums, <a href="#lining-nums" |
jdaggett@2118 | 6220 | title=lining-nums><strong>6.7</strong></a> |
jdaggett@890 | 6221 | |
jdaggett@890 | 6222 | <li>monospace, definition of, <a href="#monospace0" title="monospace, |
jdaggett@890 | 6223 | definition of"><strong>#</strong></a> |
jdaggett@890 | 6224 | |
jdaggett@1662 | 6225 | <li>no-common-ligatures, <a href="#no-common-ligatures" |
jdaggett@6176 | 6226 | title=no-common-ligatures><strong>6.4</strong></a> |
jdaggett@1662 | 6227 | |
jdaggett@1662 | 6228 | <li>no-contextual, <a href="#no-contextual" |
jdaggett@6176 | 6229 | title=no-contextual><strong>6.4</strong></a> |
jdaggett@1662 | 6230 | |
jdaggett@3460 | 6231 | <li>no-discretionary-ligatures, <a href="#no-discretionary-ligatures" |
jdaggett@6176 | 6232 | title=no-discretionary-ligatures><strong>6.4</strong></a> |
jdaggett@3460 | 6233 | |
jdaggett@1662 | 6234 | <li>no-historical-ligatures, <a href="#no-historical-ligatures" |
jdaggett@6176 | 6235 | title=no-historical-ligatures><strong>6.4</strong></a> |
jdaggett@1662 | 6236 | |
jdaggett@5809 | 6237 | <li>normal, <a href="#normal" title=normal><strong>6.6</strong></a>, <a |
jdaggett@5809 | 6238 | href="#normal0" title=normal><strong>6.7</strong></a>, <a href="#normal1" |
jdaggett@5809 | 6239 | title=normal><strong>6.8</strong></a>, <a href="#normal2" |
jdaggett@5809 | 6240 | title=normal><strong>6.10</strong></a> |
jdaggett@5809 | 6241 | |
jdaggett@1662 | 6242 | <li>oldstyle-nums, <a href="#oldstyle-nums" |
jdaggett@2118 | 6243 | title=oldstyle-nums><strong>6.7</strong></a> |
jdaggett@2118 | 6244 | |
jdaggett@3638 | 6245 | <li>ordinal, <a href="#ordinal" title=ordinal><strong>6.7</strong></a> |
jdaggett@3638 | 6246 | |
jdaggett@7060 | 6247 | <li>ornaments, <a href="#ornamentsltfeature-value-namegt" |
jdaggett@7060 | 6248 | title=ornaments><strong>6.8</strong></a> |
jdaggett@2118 | 6249 | |
jdaggett@1662 | 6250 | <li>petite-caps, <a href="#petite-caps" |
jdaggett@2118 | 6251 | title=petite-caps><strong>6.6</strong></a> |
jdaggett@1662 | 6252 | |
jdaggett@1662 | 6253 | <li>proportional-nums, <a href="#proportional-nums" |
jdaggett@2118 | 6254 | title=proportional-nums><strong>6.7</strong></a> |
jdaggett@1662 | 6255 | |
jdaggett@1662 | 6256 | <li>proportional-width, <a href="#proportional-width" |
jdaggett@2118 | 6257 | title=proportional-width><strong>6.10</strong></a> |
jdaggett@512 | 6258 | |
jdaggett@7103 | 6259 | <li>renderer, <a href="#renderer" title=renderer><strong>10.2</strong></a> |
jdaggett@7103 | 6260 | |
jdaggett@7103 | 6261 | |
jdaggett@3638 | 6262 | <li>ruby, <a href="#ruby" title=ruby><strong>6.10</strong></a> |
jdaggett@1662 | 6263 | |
jdaggett@890 | 6264 | <li>sans-serif, definition of, <a href="#sans-serif0" title="sans-serif, |
jdaggett@890 | 6265 | definition of"><strong>#</strong></a> |
jdaggett@890 | 6266 | |
jdaggett@890 | 6267 | <li>serif, definition of, <a href="#serif0" title="serif, definition |
jdaggett@890 | 6268 | of"><strong>#</strong></a> |
jdaggett@890 | 6269 | |
jdaggett@2504 | 6270 | <li>simplified, <a href="#simplified" |
jdaggett@2504 | 6271 | title=simplified><strong>6.10</strong></a> |
jdaggett@1662 | 6272 | |
jdaggett@1662 | 6273 | <li>slashed-zero, <a href="#slashed-zero" |
jdaggett@2118 | 6274 | title=slashed-zero><strong>6.7</strong></a> |
jdaggett@1662 | 6275 | |
jdaggett@1662 | 6276 | <li>small-caps, <a href="#small-caps" |
jdaggett@2118 | 6277 | title=small-caps><strong>6.6</strong></a> |
jdaggett@1662 | 6278 | |
jdaggett@1662 | 6279 | <li>src, <a href="#descdef-src" title=src><strong>4.3</strong></a> |
jdaggett@1662 | 6280 | |
jdaggett@1662 | 6281 | <li>stacked-fractions, <a href="#stacked-fractions" |
jdaggett@2118 | 6282 | title=stacked-fractions><strong>6.7</strong></a> |
jdaggett@2118 | 6283 | |
jdaggett@7103 | 6284 | <li>style sheet |
jdaggett@7103 | 6285 | <ul> |
jdaggett@7103 | 6286 | <li>as conformance class, <a href="#style-sheet" title="style sheet, as |
jdaggett@7103 | 6287 | conformance class"><strong>10.2</strong></a> |
jdaggett@7103 | 6288 | </ul> |
jdaggett@7103 | 6289 | |
jdaggett@7060 | 6290 | <li>styleset, <a href="#stylesetltfeature-value-namegt" |
jdaggett@7060 | 6291 | title=styleset><strong>6.8</strong></a> |
jdaggett@7060 | 6292 | |
jdaggett@7060 | 6293 | <li>stylistic, <a href="#stylisticltfeature-value-namegt" |
jdaggett@7060 | 6294 | title=stylistic><strong>6.8</strong></a> |
jdaggett@7060 | 6295 | |
jdaggett@7060 | 6296 | <li>swash, <a href="#swashltfeature-value-namegt" |
jdaggett@7060 | 6297 | title=swash><strong>6.8</strong></a> |
jdaggett@1662 | 6298 | |
jdaggett@1662 | 6299 | <li>tabular-nums, <a href="#tabular-nums" |
jdaggett@2118 | 6300 | title=tabular-nums><strong>6.7</strong></a> |
jdaggett@1662 | 6301 | |
jdaggett@1662 | 6302 | <li>titling-caps, <a href="#titling-caps" |
jdaggett@2118 | 6303 | title=titling-caps><strong>6.6</strong></a> |
jdaggett@1856 | 6304 | |
jdaggett@2504 | 6305 | <li>traditional, <a href="#traditional" |
jdaggett@2504 | 6306 | title=traditional><strong>6.10</strong></a> |
jdaggett@2118 | 6307 | |
jdaggett@2118 | 6308 | <li>unicase, <a href="#unicase" title=unicase><strong>6.6</strong></a> |
jdaggett@1662 | 6309 | |
jdaggett@1662 | 6310 | <li>unicode-range, <a href="#descdef-unicode-range" |
jdaggett@890 | 6311 | title=unicode-range><strong>4.5</strong></a> |
jdaggett@484 | 6312 | </ul> |
jdaggett@484 | 6313 | <!--end-index--> |
jdaggett@484 | 6314 | |
jdaggett@484 | 6315 | <h2 class=no-num id=property-index>Property index</h2> |
jdaggett@890 | 6316 | <!--begin-properties--> |
jdaggett@484 | 6317 | |
jdaggett@484 | 6318 | <table class=proptable> |
jdaggett@484 | 6319 | <thead> |
jdaggett@484 | 6320 | <tr> |
jdaggett@484 | 6321 | <th>Property |
jdaggett@484 | 6322 | |
jdaggett@484 | 6323 | <th>Values |
jdaggett@484 | 6324 | |
jdaggett@484 | 6325 | <th>Initial |
jdaggett@484 | 6326 | |
jdaggett@1148 | 6327 | <th>Applies to |
jdaggett@484 | 6328 | |
jdaggett@484 | 6329 | <th>Inh. |
jdaggett@484 | 6330 | |
jdaggett@484 | 6331 | <th>Percentages |
jdaggett@484 | 6332 | |
jdaggett@484 | 6333 | <th>Media |
jdaggett@484 | 6334 | |
jdaggett@484 | 6335 | <tbody> |
jdaggett@3460 | 6336 | <tr> |
jdaggett@3460 | 6337 | <th><a class=property href="#propdef-font">font</a> |
jdaggett@484 | 6338 | |
jdaggett@1732 | 6339 | <td>[ [ <‘font-style’> || <font-variant-css21> || |
jdaggett@7020 | 6340 | <‘font-weight’> || <‘font-stretch’> ]? |
jdaggett@7020 | 6341 | <‘font-size’> [ / <‘line-height’> ]? |
jdaggett@7020 | 6342 | <‘font-family’> ] | caption | icon | menu | message-box | |
jdaggett@7020 | 6343 | small-caption | status-bar |
jdaggett@484 | 6344 | |
jdaggett@484 | 6345 | <td>see individual properties |
jdaggett@484 | 6346 | |
jdaggett@484 | 6347 | <td>all elements |
jdaggett@484 | 6348 | |
jdaggett@484 | 6349 | <td>yes |
jdaggett@484 | 6350 | |
jdaggett@484 | 6351 | <td>see individual properties |
jdaggett@484 | 6352 | |
jdaggett@484 | 6353 | <td>visual |
jdaggett@484 | 6354 | |
jdaggett@3460 | 6355 | <tr> |
jdaggett@3460 | 6356 | <th><a class=property href="#descdef-font-family">font-family</a> |
jdaggett@484 | 6357 | |
jdaggett@5833 | 6358 | <td>[ <family-name> | <generic-family> ]# |
jdaggett@484 | 6359 | |
jdaggett@484 | 6360 | <td>depends on user agent |
jdaggett@484 | 6361 | |
jdaggett@484 | 6362 | <td>all elements |
jdaggett@484 | 6363 | |
jdaggett@484 | 6364 | <td>yes |
jdaggett@484 | 6365 | |
jdaggett@484 | 6366 | <td>N/A |
jdaggett@484 | 6367 | |
jdaggett@484 | 6368 | <td>visual |
jdaggett@484 | 6369 | |
jdaggett@3460 | 6370 | <tr> |
jdaggett@3460 | 6371 | <th><a class=property |
jdaggett@1662 | 6372 | href="#propdef-font-feature-settings">font-feature-settings</a> |
jdaggett@1662 | 6373 | |
jdaggett@5833 | 6374 | <td>normal | <feature-tag-value># |
jdaggett@1662 | 6375 | |
jdaggett@1662 | 6376 | <td>normal |
jdaggett@1662 | 6377 | |
jdaggett@1662 | 6378 | <td>all elements |
jdaggett@1662 | 6379 | |
jdaggett@1662 | 6380 | <td>yes |
jdaggett@1662 | 6381 | |
jdaggett@1662 | 6382 | <td>N/A |
jdaggett@1662 | 6383 | |
jdaggett@1662 | 6384 | <td>visual |
jdaggett@1662 | 6385 | |
jdaggett@3460 | 6386 | <tr> |
jdaggett@3460 | 6387 | <th><a class=property href="#propdef-font-kerning">font-kerning</a> |
jdaggett@1662 | 6388 | |
jdaggett@1856 | 6389 | <td>auto | normal | none |
jdaggett@1856 | 6390 | |
jdaggett@1856 | 6391 | <td>auto |
jdaggett@1662 | 6392 | |
jdaggett@1662 | 6393 | <td>all elements |
jdaggett@1662 | 6394 | |
jdaggett@1662 | 6395 | <td>yes |
jdaggett@1662 | 6396 | |
jdaggett@1662 | 6397 | <td>N/A |
jdaggett@1662 | 6398 | |
jdaggett@1662 | 6399 | <td>visual |
jdaggett@1662 | 6400 | |
jdaggett@3460 | 6401 | <tr> |
jdaggett@3460 | 6402 | <th><a class=property |
jdaggett@1732 | 6403 | href="#propdef-font-language-override">font-language-override</a> |
jdaggett@1662 | 6404 | |
jdaggett@5809 | 6405 | <td>normal | <string> |
jdaggett@1662 | 6406 | |
jdaggett@1662 | 6407 | <td>normal |
jdaggett@1662 | 6408 | |
jdaggett@1662 | 6409 | <td>all elements |
jdaggett@1662 | 6410 | |
jdaggett@1662 | 6411 | <td>yes |
jdaggett@1662 | 6412 | |
jdaggett@1662 | 6413 | <td>N/A |
jdaggett@1662 | 6414 | |
jdaggett@1662 | 6415 | <td>visual |
jdaggett@1662 | 6416 | |
jdaggett@3460 | 6417 | <tr> |
jdaggett@3460 | 6418 | <th><a class=property href="#propdef-font-size">font-size</a> |
jdaggett@484 | 6419 | |
jdaggett@497 | 6420 | <td><absolute-size> | <relative-size> | <length> | |
jdaggett@5809 | 6421 | <percentage> |
jdaggett@484 | 6422 | |
jdaggett@484 | 6423 | <td>medium |
jdaggett@484 | 6424 | |
jdaggett@484 | 6425 | <td>all elements |
jdaggett@484 | 6426 | |
jdaggett@484 | 6427 | <td>yes |
jdaggett@484 | 6428 | |
jdaggett@484 | 6429 | <td>refer to parent element's font size |
jdaggett@484 | 6430 | |
jdaggett@484 | 6431 | <td>visual |
jdaggett@484 | 6432 | |
jdaggett@3460 | 6433 | <tr> |
jdaggett@3460 | 6434 | <th><a class=property |
jdaggett@1662 | 6435 | href="#propdef-font-size-adjust">font-size-adjust</a> |
jdaggett@484 | 6436 | |
jdaggett@6659 | 6437 | <td>none | auto | <number> |
jdaggett@484 | 6438 | |
jdaggett@484 | 6439 | <td>none |
jdaggett@484 | 6440 | |
jdaggett@484 | 6441 | <td>all elements |
jdaggett@484 | 6442 | |
jdaggett@484 | 6443 | <td>yes |
jdaggett@484 | 6444 | |
jdaggett@554 | 6445 | <td>N/A |
jdaggett@484 | 6446 | |
jdaggett@484 | 6447 | <td>visual |
jdaggett@484 | 6448 | |
jdaggett@3460 | 6449 | <tr> |
jdaggett@7060 | 6450 | <th><a class=property href="#propdef-font-stretch">font-stretch</a> |
jdaggett@1662 | 6451 | |
jdaggett@1662 | 6452 | <td>normal | ultra-condensed | extra-condensed | condensed | |
jdaggett@1662 | 6453 | semi-condensed | semi-expanded | expanded | extra-expanded | |
jdaggett@5809 | 6454 | ultra-expanded |
jdaggett@484 | 6455 | |
jdaggett@484 | 6456 | <td>normal |
jdaggett@484 | 6457 | |
jdaggett@484 | 6458 | <td>all elements |
jdaggett@484 | 6459 | |
jdaggett@484 | 6460 | <td>yes |
jdaggett@484 | 6461 | |
jdaggett@484 | 6462 | <td>N/A |
jdaggett@484 | 6463 | |
jdaggett@484 | 6464 | <td>visual |
jdaggett@484 | 6465 | |
jdaggett@3460 | 6466 | <tr> |
jdaggett@7060 | 6467 | <th><a class=property href="#propdef-font-style">font-style</a> |
jdaggett@484 | 6468 | |
jdaggett@5809 | 6469 | <td>normal | italic | oblique |
jdaggett@484 | 6470 | |
jdaggett@484 | 6471 | <td>normal |
jdaggett@484 | 6472 | |
jdaggett@484 | 6473 | <td>all elements |
jdaggett@484 | 6474 | |
jdaggett@484 | 6475 | <td>yes |
jdaggett@484 | 6476 | |
jdaggett@484 | 6477 | <td>N/A |
jdaggett@484 | 6478 | |
jdaggett@484 | 6479 | <td>visual |
jdaggett@484 | 6480 | |
jdaggett@3460 | 6481 | <tr> |
jdaggett@3460 | 6482 | <th><a class=property href="#propdef-font-synthesis">font-synthesis</a> |
jdaggett@2487 | 6483 | |
jdaggett@2487 | 6484 | <td>none | [ weight || style ] |
jdaggett@2487 | 6485 | |
jdaggett@2487 | 6486 | <td>weight style |
jdaggett@2457 | 6487 | |
jdaggett@2457 | 6488 | <td>all elements |
jdaggett@2457 | 6489 | |
jdaggett@2457 | 6490 | <td>yes |
jdaggett@2457 | 6491 | |
jdaggett@2457 | 6492 | <td>N/A |
jdaggett@2457 | 6493 | |
jdaggett@2457 | 6494 | <td>visual |
jdaggett@2457 | 6495 | |
jdaggett@3460 | 6496 | <tr> |
jdaggett@3460 | 6497 | <th><a class=property href="#propdef-font-variant">font-variant</a> |
jdaggett@1662 | 6498 | |
jdaggett@6436 | 6499 | <td>normal | none | [ <common-lig-values> || |
jdaggett@3460 | 6500 | <discretionary-lig-values> || <historical-lig-values> || |
jdaggett@3041 | 6501 | <contextual-alt-values> || stylistic(<feature-value-name>) |
jdaggett@5833 | 6502 | || historical-forms || styleset(<feature-value-name>#) || |
jdaggett@5833 | 6503 | character-variant(<feature-value-name>#) || |
jdaggett@5833 | 6504 | swash(<feature-value-name>) || |
jdaggett@3041 | 6505 | ornaments(<feature-value-name>) || |
jdaggett@4545 | 6506 | annotation(<feature-value-name>) || [ small-caps | all-small-caps |
jdaggett@6648 | 6507 | | petite-caps | all-petite-caps | unicase | titling-caps ] || |
jdaggett@2509 | 6508 | <numeric-figure-values> || <numeric-spacing-values> || |
jdaggett@3638 | 6509 | <numeric-fraction-values> || ordinal || slashed-zero || |
jdaggett@3638 | 6510 | <east-asian-variant-values> || <east-asian-width-values> || |
jdaggett@3638 | 6511 | ruby ] |
jdaggett@484 | 6512 | |
jdaggett@484 | 6513 | <td>normal |
jdaggett@484 | 6514 | |
jdaggett@484 | 6515 | <td>all elements |
jdaggett@484 | 6516 | |
jdaggett@484 | 6517 | <td>yes |
jdaggett@484 | 6518 | |
jdaggett@484 | 6519 | <td>N/A |
jdaggett@484 | 6520 | |
jdaggett@484 | 6521 | <td>visual |
jdaggett@484 | 6522 | |
jdaggett@3460 | 6523 | <tr> |
jdaggett@3460 | 6524 | <th><a class=property |
jdaggett@1662 | 6525 | href="#propdef-font-variant-alternates">font-variant-alternates</a> |
jdaggett@1662 | 6526 | |
jdaggett@6176 | 6527 | <td>normal | [ stylistic(<feature-value-name>) || historical-forms |
jdaggett@6176 | 6528 | || styleset(<feature-value-name>#) || |
jdaggett@5833 | 6529 | character-variant(<feature-value-name>#) || |
jdaggett@5833 | 6530 | swash(<feature-value-name>) || |
jdaggett@3638 | 6531 | ornaments(<feature-value-name>) || |
jdaggett@3638 | 6532 | annotation(<feature-value-name>) ] |
jdaggett@1662 | 6533 | |
jdaggett@1662 | 6534 | <td>normal |
jdaggett@1662 | 6535 | |
jdaggett@1662 | 6536 | <td>all elements |
jdaggett@1662 | 6537 | |
jdaggett@1662 | 6538 | <td>yes |
jdaggett@1662 | 6539 | |
jdaggett@1662 | 6540 | <td>N/A |
jdaggett@1662 | 6541 | |
jdaggett@1662 | 6542 | <td>visual |
jdaggett@1662 | 6543 | |
jdaggett@3460 | 6544 | <tr> |
jdaggett@3460 | 6545 | <th><a class=property |
jdaggett@1662 | 6546 | href="#propdef-font-variant-caps">font-variant-caps</a> |
jdaggett@1662 | 6547 | |
jdaggett@5809 | 6548 | <td>normal | small-caps | all-small-caps | petite-caps | all-petite-caps |
jdaggett@6648 | 6549 | | unicase | titling-caps |
jdaggett@1662 | 6550 | |
jdaggett@1662 | 6551 | <td>normal |
jdaggett@1662 | 6552 | |
jdaggett@1662 | 6553 | <td>all elements |
jdaggett@1662 | 6554 | |
jdaggett@1662 | 6555 | <td>yes |
jdaggett@1662 | 6556 | |
jdaggett@1662 | 6557 | <td>N/A |
jdaggett@1662 | 6558 | |
jdaggett@1662 | 6559 | <td>visual |
jdaggett@1662 | 6560 | |
jdaggett@3460 | 6561 | <tr> |
jdaggett@3460 | 6562 | <th><a class=property |
jdaggett@1662 | 6563 | href="#propdef-font-variant-east-asian">font-variant-east-asian</a> |
jdaggett@1662 | 6564 | |
jdaggett@5809 | 6565 | <td>normal | [ <east-asian-variant-values> || |
jdaggett@3638 | 6566 | <east-asian-width-values> || ruby ] |
jdaggett@1662 | 6567 | |
jdaggett@1662 | 6568 | <td>normal |
jdaggett@1662 | 6569 | |
jdaggett@1662 | 6570 | <td>all elements |
jdaggett@1662 | 6571 | |
jdaggett@1662 | 6572 | <td>yes |
jdaggett@1662 | 6573 | |
jdaggett@1662 | 6574 | <td>N/A |
jdaggett@1662 | 6575 | |
jdaggett@1662 | 6576 | <td>visual |
jdaggett@1662 | 6577 | |
jdaggett@3460 | 6578 | <tr> |
jdaggett@3460 | 6579 | <th><a class=property |
jdaggett@1662 | 6580 | href="#propdef-font-variant-ligatures">font-variant-ligatures</a> |
jdaggett@1662 | 6581 | |
jdaggett@6436 | 6582 | <td>normal | none | [ <common-lig-values> || |
jdaggett@6436 | 6583 | <discretionary-lig-values> || <historical-lig-values> || |
jdaggett@6436 | 6584 | <contextual-alt-values> ] |
jdaggett@1662 | 6585 | |
jdaggett@1662 | 6586 | <td>normal |
jdaggett@1662 | 6587 | |
jdaggett@1662 | 6588 | <td>all elements |
jdaggett@1662 | 6589 | |
jdaggett@1662 | 6590 | <td>yes |
jdaggett@1662 | 6591 | |
jdaggett@1662 | 6592 | <td>N/A |
jdaggett@1662 | 6593 | |
jdaggett@1662 | 6594 | <td>visual |
jdaggett@1662 | 6595 | |
jdaggett@3460 | 6596 | <tr> |
jdaggett@3460 | 6597 | <th><a class=property |
jdaggett@1662 | 6598 | href="#propdef-font-variant-numeric">font-variant-numeric</a> |
jdaggett@1662 | 6599 | |
jdaggett@5809 | 6600 | <td>normal | [ <numeric-figure-values> || |
jdaggett@1732 | 6601 | <numeric-spacing-values> || <numeric-fraction-values> || |
jdaggett@3638 | 6602 | ordinal || slashed-zero ] |
jdaggett@1662 | 6603 | |
jdaggett@1662 | 6604 | <td>normal |
jdaggett@1662 | 6605 | |
jdaggett@1662 | 6606 | <td>all elements |
jdaggett@1662 | 6607 | |
jdaggett@1662 | 6608 | <td>yes |
jdaggett@1662 | 6609 | |
jdaggett@1662 | 6610 | <td>N/A |
jdaggett@1662 | 6611 | |
jdaggett@1662 | 6612 | <td>visual |
jdaggett@1662 | 6613 | |
jdaggett@3460 | 6614 | <tr> |
jdaggett@3460 | 6615 | <th><a class=property |
jdaggett@3460 | 6616 | href="#propdef-font-variant-position">font-variant-position</a> |
jdaggett@3460 | 6617 | |
jdaggett@3638 | 6618 | <td>normal | sub | super |
jdaggett@3460 | 6619 | |
jdaggett@3460 | 6620 | <td>normal |
jdaggett@3460 | 6621 | |
jdaggett@3460 | 6622 | <td>all elements |
jdaggett@3460 | 6623 | |
jdaggett@3460 | 6624 | <td>yes |
jdaggett@3460 | 6625 | |
jdaggett@3460 | 6626 | <td>N/A |
jdaggett@3460 | 6627 | |
jdaggett@3460 | 6628 | <td>visual |
jdaggett@3460 | 6629 | |
jdaggett@3460 | 6630 | <tr> |
jdaggett@7060 | 6631 | <th><a class=property href="#propdef-font-weight">font-weight</a> |
jdaggett@484 | 6632 | |
jdaggett@484 | 6633 | <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 |
jdaggett@5809 | 6634 | | 700 | 800 | 900 |
jdaggett@484 | 6635 | |
jdaggett@484 | 6636 | <td>normal |
jdaggett@484 | 6637 | |
jdaggett@484 | 6638 | <td>all elements |
jdaggett@484 | 6639 | |
jdaggett@484 | 6640 | <td>yes |
jdaggett@484 | 6641 | |
jdaggett@484 | 6642 | <td>N/A |
jdaggett@484 | 6643 | |
jdaggett@484 | 6644 | <td>visual |
jdaggett@484 | 6645 | </table> |
jdaggett@890 | 6646 | <!--end-properties--> |
jdaggett@5596 | 6647 | <!--begin-descriptors--> |
jdaggett@5596 | 6648 | |
jdaggett@5596 | 6649 | <table class=proptable> |
jdaggett@5596 | 6650 | <thead> |
jdaggett@5596 | 6651 | <tr> |
jdaggett@5596 | 6652 | <th>Descriptor |
jdaggett@5596 | 6653 | |
jdaggett@5596 | 6654 | <th>Value |
jdaggett@5596 | 6655 | |
jdaggett@5596 | 6656 | <th>Initial |
jdaggett@5596 | 6657 | |
jdaggett@5596 | 6658 | <th>Percentages |
jdaggett@5596 | 6659 | |
jdaggett@5596 | 6660 | <th>Media |
jdaggett@5596 | 6661 | |
jdaggett@5596 | 6662 | <tbody> |
jdaggett@5596 | 6663 | <tr> |
jdaggett@5596 | 6664 | <th><a class=property href="#descdef-font-family">font-family</a> |
jdaggett@5596 | 6665 | |
jdaggett@5596 | 6666 | <td><family-name> |
jdaggett@5596 | 6667 | |
jdaggett@5596 | 6668 | <td>N/A |
jdaggett@5596 | 6669 | |
jdaggett@5596 | 6670 | <tr> |
jdaggett@5596 | 6671 | <th><a class=property |
jdaggett@5596 | 6672 | href="#propdef-font-feature-settings">font-feature-settings</a> |
jdaggett@5596 | 6673 | |
jdaggett@5833 | 6674 | <td>normal | <feature-tag-value># |
jdaggett@5596 | 6675 | |
jdaggett@5596 | 6676 | <td>normal |
jdaggett@5596 | 6677 | |
jdaggett@5596 | 6678 | <tr> |
jdaggett@7060 | 6679 | <th><a class=property href="#propdef-font-stretch">font-stretch</a> |
jdaggett@5596 | 6680 | |
jdaggett@5596 | 6681 | <td>normal | ultra-condensed | extra-condensed | condensed | |
jdaggett@5596 | 6682 | semi-condensed | semi-expanded | expanded | extra-expanded | |
jdaggett@5596 | 6683 | ultra-expanded |
jdaggett@5596 | 6684 | |
jdaggett@5596 | 6685 | <td>normal |
jdaggett@5596 | 6686 | |
jdaggett@5596 | 6687 | <tr> |
jdaggett@7060 | 6688 | <th><a class=property href="#propdef-font-style">font-style</a> |
jdaggett@5596 | 6689 | |
jdaggett@5596 | 6690 | <td>normal | italic | oblique |
jdaggett@5596 | 6691 | |
jdaggett@5596 | 6692 | <td>normal |
jdaggett@5596 | 6693 | |
jdaggett@5596 | 6694 | <tr> |
jdaggett@5596 | 6695 | <th><a class=property href="#propdef-font-variant">font-variant</a> |
jdaggett@5596 | 6696 | |
jdaggett@5596 | 6697 | <td>normal | [ <common-lig-values> || |
jdaggett@5596 | 6698 | <discretionary-lig-values> || <historical-lig-values> || |
jdaggett@5596 | 6699 | <contextual-alt-values> || stylistic(<feature-value-name>) |
jdaggett@5833 | 6700 | || historical-forms || styleset(<feature-value-name>#) || |
jdaggett@5833 | 6701 | character-variant(<feature-value-name>#) || |
jdaggett@5833 | 6702 | swash(<feature-value-name>) || |
jdaggett@5596 | 6703 | ornaments(<feature-value-name>) || |
jdaggett@5596 | 6704 | annotation(<feature-value-name>) || [ small-caps | all-small-caps |
jdaggett@6648 | 6705 | | petite-caps | all-petite-caps | unicase | titling-caps ] || |
jdaggett@5596 | 6706 | <numeric-figure-values> || <numeric-spacing-values> || |
jdaggett@5596 | 6707 | <numeric-fraction-values> || ordinal || slashed-zero || |
jdaggett@5596 | 6708 | <east-asian-variant-values> || <east-asian-width-values> || |
jdaggett@5596 | 6709 | ruby ] |
jdaggett@5596 | 6710 | |
jdaggett@5596 | 6711 | <td>normal |
jdaggett@5596 | 6712 | |
jdaggett@5596 | 6713 | <tr> |
jdaggett@7060 | 6714 | <th><a class=property href="#propdef-font-weight">font-weight</a> |
jdaggett@5596 | 6715 | |
jdaggett@5596 | 6716 | <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
jdaggett@5596 | 6717 | |
jdaggett@5596 | 6718 | <td>normal |
jdaggett@5596 | 6719 | |
jdaggett@5596 | 6720 | <tr> |
jdaggett@5596 | 6721 | <th><a class=property href="#descdef-src">src</a> |
jdaggett@5596 | 6722 | |
jdaggett@5833 | 6723 | <td>[ <uri> [format(<string>#)]? | <font-face-name> ]# |
jdaggett@5596 | 6724 | |
jdaggett@5596 | 6725 | <td>N/A |
jdaggett@5596 | 6726 | |
jdaggett@5596 | 6727 | <tr> |
jdaggett@5596 | 6728 | <th><a class=property href="#descdef-unicode-range">unicode-range</a> |
jdaggett@5596 | 6729 | |
jdaggett@5833 | 6730 | <td><urange># |
jdaggett@5596 | 6731 | |
jdaggett@5596 | 6732 | <td>U+0-10FFFF |
jdaggett@5596 | 6733 | </table> |
jdaggett@5596 | 6734 | <!--end-descriptors--> |
jdaggett@6648 | 6735 | <script type="text/javascript"> |
jdaggett@6648 | 6736 | window.onload = function () { |
jdaggett@6648 | 6737 | if (!("devicePixelRatio" in window && window.devicePixelRatio > 1)) return; |
jdaggett@6648 | 6738 | var i, hiresElements = document.getElementsByClassName("hires"); |
jdaggett@6648 | 6739 | for (i = 0; i < hiresElements.length; i++) { |
jdaggett@6648 | 6740 | var h = hiresElements[i]; |
jdaggett@6648 | 6741 | if (h.tagName != "IMG") continue; |
jdaggett@6648 | 6742 | var src = h.getAttribute("src"); |
jdaggett@6648 | 6743 | var src2x = src.replace(/\.\w+$/, function(m) { return "@2x" + m; }); |
jdaggett@6648 | 6744 | h.src = src2x; |
jdaggett@6648 | 6745 | } |
jdaggett@6648 | 6746 | } |
jdaggett@6648 | 6747 | </script> |
jdaggett@484 | 6748 | </html> |
jdaggett@484 | 6749 | <!-- Keep this comment at the end of the file |
jdaggett@484 | 6750 | Local variables: |
jdaggett@484 | 6751 | mode: sgml |
jdaggett@484 | 6752 | sgml-declaration:"~/SGML/HTML4.decl" |
jdaggett@484 | 6753 | sgml-default-doctype-name:"html" |
jdaggett@484 | 6754 | sgml-minimize-attributes:t |
jdaggett@484 | 6755 | sgml-nofill-elements:("pre" "style" "br") |
jdaggett@484 | 6756 | sgml-live-element-indicator:t |
jdaggett@484 | 6757 | sgml-omittag:nil |
jdaggett@484 | 6758 | sgml-shorttag:nil |
jdaggett@484 | 6759 | sgml-namecase-general:t |
jdaggett@484 | 6760 | sgml-general-insert-case:lower |
jdaggett@484 | 6761 | sgml-always-quote-attributes:t |
jdaggett@484 | 6762 | sgml-indent-step:nil |
jdaggett@484 | 6763 | sgml-indent-data:t |
jdaggett@484 | 6764 | sgml-parent-document:nil |
jdaggett@484 | 6765 | sgml-exposed-tags:nil |
jdaggett@484 | 6766 | sgml-local-catalogs:nil |
jdaggett@484 | 6767 | sgml-local-ecat-files:nil |
jdaggett@484 | 6768 | End: |
jdaggett@484 | 6769 | --> |
jdaggett@1856 | 6770 | <!-- |
jdaggett@1856 | 6771 | |
jdaggett@1856 | 6772 | to do: |
jdaggett@1856 | 6773 | |
jdaggett@1856 | 6774 | - wording of OpenType family name handling |
jdaggett@1856 | 6775 | - handling combining sequences in the font matching algorithm |
jdaggett@1856 | 6776 | - fix-up fi ligature example |
jdaggett@1856 | 6777 | |
jdaggett@1856 | 6778 | --> |