css-fonts/Fonts.html

Thu, 30 May 2013 17:21:45 +0900

author
John Daggett <jdaggett@mozilla.com>
date
Thu, 30 May 2013 17:21:45 +0900
changeset 8280
1792b2222114
parent 8279
a548c37dce4c
child 8311
35cf30e4d0ec
permissions
-rw-r--r--

[css-fonts] minor edits of font-variant subproperties

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
     2 "http://www.w3.org/TR/html4/strict.dtd">
     4 <html lang=en>
     5  <head><meta content="text/html;charset=utf-8" http-equiv=Content-Type>
     7   <title>CSS Fonts Module Level 3</title>
     8   <!--
     9       FIXME when publishing: copy the current default.css and link to
    10       "default.css" rather than "../default.css"
    11    -->
    12   <link href="../default.css" rel=stylesheet type="text/css">
    13   <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
    14   <!-- I'm just experimenting here, don't get your bee in a bonnet -->
    15   <script src="http://use.typekit.com/xon2bky.js"
    16   type="text/javascript"></script>
    17   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    19   <style type="text/css">
    21   body, th, td, h1, h2, h3, h4, h5, h6 {
    22     font-family: "myriad-pro", sans-serif !important;
    23   }
    25   body {
    26     padding: 2em 70px 2em 70px;
    27   }
    29   p + p, p.mtb {
    30     margin-top: 0.8em;
    31     text-indent: 0px;
    32   }
    34   #bolderlighter {
    35     width: 40%;
    36   }
    38   #bolderlighter th {
    39     text-align: center;
    40   }
    42   #fontformats td, #eventhandlers td, #fontformats th, #eventhandlers th {
    43     padding-right: 2em;
    44     text-align: left;
    45   }
    47   dd {
    48     margin-bottom: 1em;
    49   }
    51   #authors dd {
    52     margin-bottom: 0;
    53   }
    55   #fontstylematchingalg {
    56     list-style-type: lower-alpha;
    57   }
    59   #fontmatchingalg ul, #fontmatchingalg ol {
    60     margin-top: 0.8em;
    61   }
    63   #fontmatchingalg li + li {
    64     margin-top: 0.8em;
    65   }
    67   div.example {
    68     padding: 1em;
    69     margin-top: 1em;
    70   }
    72   div.example + div.example {
    73     margin-top: 2em;
    74   }
    76   div.figure {
    77     page-break-inside: avoid;
    78   }
    80   pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em }
    82   div.featex {
    83     width: 700px;
    84   }
    86   div.featex img {
    87     margin: auto;
    88     display: block;
    89   }
    91   span.tag {
    92     font-family: monospace;
    93     font-size: 120%;
    94   }
    96   ol ol {
    97     list-style-type: lower-alpha;
    98   }
   100   .idl-code {
   101     font-weight: bold;
   102     color: #c50;
   103   }
   104   </style>
   105   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
   106   type="text/css">
   108  <body>
   109   <div class=head> <!--begin-logo-->
   110    <p><a href="http://www.w3.org/"><img alt=W3C height=48
   111     src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
   113    <h1>CSS Fonts Module Level 3</h1>
   115    <h2 class="no-num no-toc" id=editors-draft-30-may-2013>Editor's Draft 30
   116     May 2013</h2>
   118    <dl id=authors>
   119     <dt>This version:
   121     <dd><a
   122      href="http://dev.w3.org/csswg/css-fonts/">http://dev.w3.org/csswg/css-fonts/</a>
   123      <!-- <dd><a href="http://www.w3.org/TR/2013/ED-css3-fonts-20130530/">http://www.w3.org/TR/2013/ED-css3-fonts-20130530/</a> -->
   126     <dt>Latest version:
   128     <dd><a
   129      href="http://www.w3.org/TR/css3-fonts/">http://www.w3.org/TR/css3-fonts/</a>
   131     <dt>Latest editor's draft:
   133     <dd><a
   134      href="http://dev.w3.org/csswg/css-fonts/">http://dev.w3.org/csswg/css-fonts/</a>
   135      (<a
   136      href="https://dvcs.w3.org/hg/csswg/log/tip/css-fonts/Fonts.html">change
   137      log</a>)
   139     <dt>Previous version:
   141     <dd><a
   142      href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/">http://www.w3.org/TR/2013/WD-css3-fonts-20130212/</a>
   144     <dt>Issues List:
   146     <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/18">CSS3 Fonts
   147      issues in Tracker</a>
   149     <dd><a
   150      href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&amp;product=CSS&amp;component=Fonts&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED">CSS3
   151      Fonts issues in Bugzilla</a>
   153     <dt>Discussion:
   155     <dd><a
   156      href="mailto:www-style@w3.org?subject=%5Bcss-fonts%5D%20feedback">www-style@w3.org</a>
   157      with subject line “<kbd>[css-fonts] <var>… message topic
   158      …</var></kbd>” (<a
   159      href="http://lists.w3.org/Archives/Public/www-style/"
   160      rel=discussion>archives</a>)
   162     <dt>Editor:
   164     <dd><a href="mailto:jdaggett@mozilla.com">John Daggett (Mozilla)</a>
   165    </dl>
   166    <!--begin-copyright-->
   167    <p class=copyright><a
   168     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
   169     rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
   170     title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
   171     href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of
   172     Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr
   173     title="European Research Consortium for Informatics and
   174     Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>,
   175     <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C
   176     <a
   177     href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
   178     <a
   179     href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
   180     and <a
   181     href="http://www.w3.org/Consortium/Legal/copyright-documents">document
   182     use</a> rules apply.</p>
   183    <!--end-copyright-->
   184    <hr title="Separator for header">
   185   </div>
   187   <h2 class="no-num no-toc" id=abstract>Abstract</h2>
   189   <p>This CSS3 module describes how font properties are specified and how
   190    font resources are loaded dynamically. The contents of this specification
   191    are a consolidation of content previously divided into <a
   192    href="http://www.w3.org/TR/2002/WD-css3-fonts-20020802/">CSS3 Fonts</a>
   193    and <a href="http://www.w3.org/TR/2002/WD-css3-webfonts-20020802/">CSS3
   194    Web Fonts</a> modules. The description of font load events was moved into
   195    the <a href="http://dev.w3.org/csswg/css3-font-load-events/">CSS3 Font
   196    Load Events</a> module.
   198   <h2 class="no-num no-toc" id=status>Status of this document</h2>
   199   <!--begin-status-->
   201   <p>This is a public copy of the editors' draft. It is provided for
   202    discussion only and may change at any moment. Its publication here does
   203    not imply endorsement of its contents by W3C. Don't cite this document
   204    other than as work in progress.
   206   <p>The (<a
   207    href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   208    mailing list <a
   209    href="mailto:www-style@w3.org?Subject=%5Bcss3-fonts%5D%20PUT%20SUBJECT%20HERE">
   210    www-style@w3.org</a> (see <a
   211    href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
   212    discussion of this specification. When sending e-mail, please put the text
   213    “css3-fonts” in the subject, preferably like this:
   214    “[<!---->css3-fonts<!---->] <em>…summary of comment…</em>”
   216   <p>This document was produced by the <a
   217    href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
   218    the <a href="http://www.w3.org/Style/">Style Activity</a>).
   220   <p>This document was produced by a group operating under the <a
   221    href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
   222    2004 W3C Patent Policy</a>. W3C maintains a <a
   223    href="http://www.w3.org/2004/01/pp-impl/32061/status"
   224    rel=disclosure>public list of any patent disclosures</a> made in
   225    connection with the deliverables of the group; that page also includes
   226    instructions for disclosing a patent. An individual who has actual
   227    knowledge of a patent which the individual believes contains <a
   228    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
   229    Claim(s)</a> must disclose the information in accordance with <a
   230    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
   231    6 of the W3C Patent Policy</a>.</p>
   232   <!--end-status-->
   233   <!--
   234 <h3 class="no-num no-toc" id="atrisk">Features at risk</h3>
   236 <p>The following features are at risk and may be removed when exiting CR:</p>
   238 <ul>
   239 </ul>
   240 -->
   242   <h2 class="no-num no-toc" id=contents>Table of contents</h2>
   243   <!--begin-toc-->
   245   <ul class=toc>
   246    <li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
   248    <li><a href="#typography-background"><span class=secno>2 </span>Typography
   249     Background</a>
   251    <li><a href="#basic-font-props"><span class=secno>3 </span>Basic Font
   252     Properties</a>
   253     <ul class=toc>
   254      <li><a href="#font-family-prop"><span class=secno>3.1 </span>Font
   255       family: the font-family property</a>
   256       <ul class=toc>
   257        <li><a href="#generic-font-families"><span class=secno>3.1.1
   258         </span>Generic font families</a>
   259       </ul>
   261      <li><a href="#font-weight-prop"><span class=secno>3.2 </span>Font
   262       weight: the font-weight property</a>
   264      <li><a href="#font-stretch-prop"><span class=secno>3.3 </span>Font
   265       width: the font-stretch property</a>
   267      <li><a href="#font-style-prop"><span class=secno>3.4 </span>Font style:
   268       the font-style property</a>
   270      <li><a href="#font-size-prop"><span class=secno>3.5 </span>Font size:
   271       the font-size property</a>
   273      <li><a href="#font-size-adjust-prop"><span class=secno>3.6
   274       </span>Relative sizing: the font-size-adjust property</a>
   276      <li><a href="#font-prop"><span class=secno>3.7 </span>Shorthand font
   277       property: the font property</a>
   279      <li><a href="#font-synthesis-prop"><span class=secno>3.8
   280       </span>Controlling synthetic faces: the font-synthesis property</a>
   281     </ul>
   283    <li><a href="#font-resources"><span class=secno>4 </span>Font
   284     Resources</a>
   285     <ul class=toc>
   286      <li><a href="#font-face-rule"><span class=secno>4.1 </span>The
   287       <code>@font-face</code> rule</a>
   289      <li><a href="#font-family-desc"><span class=secno>4.2 </span>Font
   290       family: the font-family descriptor</a>
   292      <li><a href="#src-desc"><span class=secno>4.3 </span>Font reference: the
   293       src descriptor</a>
   295      <li><a href="#font-prop-desc"><span class=secno>4.4 </span>Font property
   296       descriptors: the font-style, font-weight, font-stretch descriptors</a>
   298      <li><a href="#unicode-range-desc"><span class=secno>4.5 </span>Character
   299       range: the unicode-range descriptor</a>
   301      <li><a href="#composite-fonts"><span class=secno>4.6 </span>Using
   302       character ranges to define composite fonts</a>
   304      <li><a href="#font-rend-desc"><span class=secno>4.7 </span>Font
   305       features: the font-variant and font-feature-settings descriptors</a>
   307      <li><a href="#font-face-loading"><span class=secno>4.8 </span>Font
   308       loading guidelines</a>
   310      <li><a href="#same-origin-restriction"><span class=secno>4.9
   311       </span>Same-origin restriction for fonts</a>
   312       <ul class=toc>
   313        <li><a href="#default-same-origin-restriction"><span class=secno>4.9.1
   314         </span>Default same-origin restriction</a>
   316        <li><a href="#allowing-cross-origin-font-loading"><span
   317         class=secno>4.9.2 </span>Allowing cross-origin font loading</a>
   318       </ul>
   319     </ul>
   321    <li><a href="#font-matching-algorithm"><span class=secno>5 </span>Font
   322     Matching Algorithm</a>
   323     <ul class=toc>
   324      <li><a href="#font-family-casing"><span class=secno>5.1 </span>Case
   325       sensitivity of font family names</a>
   327      <li><a href="#font-style-matching"><span class=secno>5.2 </span>Matching
   328       font styles</a>
   330      <li><a href="#cluster-matching"><span class=secno>5.3 </span>Cluster
   331       matching</a>
   333      <li><a href="#char-handling-issues"><span class=secno>5.4
   334       </span>Character handling issues</a>
   336      <li><a href="#font-matching-changes"><span class=secno>5.5 </span>Font
   337       matching changes since CSS 2.1</a>
   339      <li><a href="#font-matching-examples"><span class=secno>5.6 </span>Font
   340       matching examples</a>
   341     </ul>
   343    <li><a href="#font-rend-props"><span class=secno>6 </span>Font Feature
   344     Properties</a>
   345     <ul class=toc>
   346      <li><a href="#glyph-selection-positioning"><span class=secno>6.1
   347       </span>Glyph selection and positioning</a>
   349      <li><a href="#language-specific-support"><span class=secno>6.2
   350       </span>Language-specific display</a>
   352      <li><a href="#font-kerning-prop"><span class=secno>6.3 </span>Kerning:
   353       the font-kerning property</a>
   355      <li><a href="#font-variant-ligatures-prop"><span class=secno>6.4
   356       </span>Ligatures: the font-variant-ligatures property</a>
   358      <li><a href="#font-variant-position-prop"><span class=secno>6.5
   359       </span>Subscript and superscript forms: the font-variant-position
   360       property</a>
   362      <li><a href="#font-variant-caps-prop"><span class=secno>6.6
   363       </span>Capitalization: the font-variant-caps property</a>
   365      <li><a href="#font-variant-numeric-prop"><span class=secno>6.7
   366       </span>Numerical formatting: the font-variant-numeric property</a>
   368      <li><a href="#font-variant-alternates-prop"><span class=secno>6.8
   369       </span>Alternates and swashes: the font-variant-alternates property</a>
   372      <li><a href="#font-feature-values"><span class=secno>6.9 </span>Defining
   373       font specific alternates: the <code>@font-feature-values</code>
   374       rule</a>
   376      <li><a href="#font-variant-east-asian-prop"><span class=secno>6.10
   377       </span>East Asian text rendering: the font-variant-east-asian
   378       property</a>
   380      <li><a href="#font-variant-prop"><span class=secno>6.11 </span>Overall
   381       shorthand for font rendering: the font-variant property</a>
   383      <li><a href="#font-feature-settings-prop"><span class=secno>6.12
   384       </span>Low-level font feature settings control: the
   385       font-feature-settings property</a>
   387      <li><a href="#font-language-override-prop"><span class=secno>6.13
   388       </span>Font language override: the font-language-override property</a>
   389     </ul>
   391    <li><a href="#font-feature-resolution"><span class=secno>7 </span>Font
   392     Feature Resolution </a>
   393     <ul class=toc>
   394      <li><a href="#default-features"><span class=secno>7.1 </span>Default
   395       features</a>
   397      <li><a href="#feature-precedence"><span class=secno>7.2 </span>Feature
   398       precedence</a>
   400      <li><a href="#feature-precedence-examples"><span class=secno>7.3
   401       </span>Feature precedence examples</a>
   402     </ul>
   404    <li><a href="#object-model"><span class=secno>8 </span>Object Model</a>
   405     <ul class=toc>
   406      <li><a href="#om-fontface"><span class=secno>8.1 </span>The
   407       <code>CSSFontFaceRule</code> interface</a>
   409      <li><a href="#om-fontfeaturevalues"><span class=secno>8.2 </span>The
   410       <code>CSSFontFeatureValuesRule</code> interface</a>
   411     </ul>
   413    <li class=no-num><a href="#platform-props-to-css">Appendix A: Mapping
   414     platform font properties to CSS properties</a>
   416    <li class=no-num><a href="#ch-ch-ch-changes">Changes</a>
   417     <ul class=toc>
   418      <li class=no-num><a href="#recent-changes"> Changes from the February
   419       2013 CSS3 Fonts Working Draft</a>
   420     </ul>
   422    <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
   424    <li class=no-num><a href="#conformance"> Conformance</a>
   425     <ul class=toc>
   426      <li class=no-num><a href="#conventions"> Document Conventions</a>
   428      <li class=no-num><a href="#conformance-classes"> Conformance Classes</a>
   431      <li class=no-num><a href="#partial"> Partial Implementations</a>
   433      <li class=no-num><a href="#experimental"> Experimental
   434       Implementations</a>
   436      <li class=no-num><a href="#testing"> Non-Experimental
   437       Implementations</a>
   438     </ul>
   440    <li class=no-num><a href="#references">References</a>
   441     <ul class=toc>
   442      <li class=no-num><a href="#normative-references">Normative
   443       References</a>
   445      <li class=no-num><a href="#other-references">Other References</a>
   446     </ul>
   448    <li class=no-num><a href="#index">Index</a>
   450    <li class=no-num><a href="#property-index">Property index</a>
   451   </ul>
   452   <!--end-toc-->
   454   <h2 id=introduction><span class=secno>1 </span>Introduction</h2>
   456   <p>A font provides a resource containing the visual representation of
   457    characters. At the simplest level it contains information that maps
   458    character codes to shapes (called glyphs) that represent these characters.
   459    Fonts sharing a common design style are commonly grouped into font
   460    families classified by a set of standard font properties. Within a family,
   461    the shape displayed for a given character can vary by stroke weight, slant
   462    or relative width, among others. An individual font face is described by a
   463    unique combination of these properties. For a given range of text, CSS
   464    font properties are used to select a font family and a specific font face
   465    within that family to be used when rendering that text. As a simple
   466    example, to use the bold form of Helvetica one could use:
   468   <pre>body {
   469     font-family: Helvetica;
   470     font-weight: bold;
   471 }</pre>
   473   <p>Font resources may be installed locally on the system on which a user
   474    agent is running or downloadable. For local font resources descriptive
   475    information can be obtained directly from the font resource. For
   476    downloadable font resources (sometimes referred to as web fonts), the
   477    descriptive information is included with the reference to the font
   478    resource.
   480   <p>Families of fonts typically don't contain a single face for each
   481    possible variation of font properties. The CSS font selection mechanism
   482    describes how to match a given set of CSS font properties to a single font
   483    face.
   485   <h2 id=typography-background><span class=secno>2 </span>Typography
   486    Background</h2>
   488   <p><em>This section is non-normative.</em>
   490   <p> Typographic traditions vary across the globe, so there is no unique way
   491    to classify all fonts across languages and cultures. For even common Latin
   492    letters, wide variations are possible:
   494   <div class=figure><img alt="variations in glyphs for a single character"
   495    src=aaaaaa.png>
   496    <p class=caption>One character, many glyph variations
   497   </div>
   499   <p>Differences in the anatomy of letterforms is one way to distinguish
   500    fonts. For Latin fonts, flourishes at the ends of a character's main
   501    strokes, or serifs, can distinguish a font from those without. Similar
   502    comparisons exist in non-Latin fonts between fonts with tapered strokes
   503    and those using primarily uniform strokes:
   505   <div class=figure><img alt="serif vs. non-serifs" src=serifvssansserif.png>
   506    <p class=caption>Letterforms with and without serifs
   507   </div>
   509   <div class=figure><img alt="serif vs. non-serifs for japanese"
   510    src=minchovsgothic.png>
   511    <p class=caption>Similar groupings for Japanese typefaces
   512   </div>
   514   <p>Fonts contain letterforms and the data needed to map characters to these
   515    letterforms. Often this may be a simple one-to-one mapping, but more
   516    complex mappings are also possible. The use of combining diacritic marks
   517    creates many variations for an underlying letterform:
   519   <div class=figure><img alt="diacritic marks" src=aaaaaa-diacritics.png>
   520    <p class=caption>Variations with diacritic marks
   521   </div>
   523   <p>A sequence of characters can be represented by a single glyph known as a
   524    ligature:
   526   <div class=figure><img alt="example of a fi ligature"
   527    src=final-ligature.png>
   528    <p class=caption>Ligature example
   529   </div>
   531   <p>Visual transformations based on textual context are often stylistic
   532    option in European languages. They are required to correctly render
   533    languages like Arabic, the lam and alef characters below <em>must</em> be
   534    combined when they exist in sequence:
   536   <div class=figure><img alt="lam alef ligature" src=lamaleflig.png>
   537    <p class=caption>Required Arabic ligature
   538   </div>
   540   <p>The relative complexity of these shaping transformations requires
   541    additional data within the font.
   543   <p>Sets of font faces with various stylistic variations are often grouped
   544    together into font families. In the simplest case a regular face is
   545    supplemented with bold and italic faces, but much more extensive groupings
   546    are possible. Variations in the thickness of letterform strokes, the <dfn
   547    id=weight>weight</dfn>, and the overall proportions of the letterform, the
   548    <dfn id=width>width</dfn>, are most common. In the example below, each
   549    letter uses a different font face within the Univers font family. The
   550    width used increases from top to bottom and the weight increases from left
   551    to right:
   553   <div class=figure><img alt="various width and weight variations within a
   554    single family" src=weightwidthvariations.png>
   555    <p class=caption>Weight and width variations within a single font family
   556   </div>
   558   <p>Creating fonts that support multiple scripts is a difficult task;
   559    designers need to understand the cultural traditions surrounding the use
   560    of type in different scripts and come up with letterforms that somehow
   561    share a common theme. Many languages often share a common script and each
   562    of these languages may have noticeable stylistic differences. For example,
   563    the Arabic script is shared by Persian and Urdu and Cyrillic is used with
   564    many languages, not just Russian.
   566   <p>The <a href="#character-map"><em>character map</em></a> of a font
   567    defines the mapping of characters to glyphs for that font. If a document
   568    contains characters not supported by the <a href="#character-map"><em
   569    title="character map">character maps</em></a> of the fonts contained in a
   570    font family list, a user agent may use a system font fallback procedure to
   571    locate an appropriate font that does. If no appropriate font can be found,
   572    some form of "missing glyph" character will be rendered by the user agent.
   573    System fallback can occur when the specified list of font families does
   574    not include a font that supports a given character.
   576   <p>Although the <a href="#character-map"><em>character map</em></a> of a
   577    font maps a given character to a glyph for that character, modern font
   578    technologies such as OpenType and AAT (Apple Advanced Typography) provide
   579    ways of mapping a character to different glyphs based upon feature
   580    settings. Fonts in these formats allow these features to be embedded in
   581    the font itself and controlled by applications. Common typographic
   582    features which can be specified this way include ligatures, swashes,
   583    contextual alternates, proportional and tabular figures, and automatic
   584    fractions, to list just a few. For a visual overview of OpenType features,
   585    see the <a href="#OPENTYPE-FONT-GUIDE"
   586    rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
   588   <h2 id=basic-font-props><span class=secno>3 </span>Basic Font Properties</h2>
   590   <p>The particular font face used to render a character is determined by the
   591    font family and other font properties that apply to a given element. This
   592    structure allows settings to be varied independent of each other.</p>
   593   <!-- prop: font-family -->
   595   <h3 id=font-family-prop><span class=secno>3.1 </span>Font family: the <a
   596    href="#propdef-font-family">font-family</a> property</h3>
   598   <table class=propdef id=namefont-familyvalue-ltfamily-namegt-ltg>
   599    <tbody>
   600     <tr>
   601      <td>Name:
   603      <td><dfn id=propdef-font-family
   604       title="font-family!!property">font-family</dfn>
   606     <tr>
   607      <td>Value:
   609      <td>[ <a href="#family-name-value"><var>&lt;family-name&gt;</var></a> |
   610       <a href="#generic-family-value"><var>&lt;generic-family&gt;</var></a> ]
   611       #
   613     <tr>
   614      <td>Initial:
   616      <td>depends on user agent
   618     <tr>
   619      <td>Applies to:
   621      <td>all elements
   623     <tr>
   624      <td>Inherited:
   626      <td>yes
   628     <tr>
   629      <td>Percentages:
   631      <td>N/A
   633     <tr>
   634      <td>Media:
   636      <td>visual
   638     <tr>
   639      <td>Computed value:
   641      <td>as specified
   643     <tr>
   644      <td>Animatable:
   646      <td>no
   647   </table>
   649   <p>This property specifies a prioritized list of font family names or
   650    generic family names. A font family defines a set of faces that vary in
   651    weight, width or slope. CSS uses the combination of a family name with
   652    other style attributes to select an individual face. Using this selection
   653    mechanism, rather than selecting a face via the style name as is often
   654    done in design applications, allows some degree of regularity in textual
   655    display when fallback occurs.
   657   <p class=note>Designers should note that the CSS definition of font
   658    attributes used for selection are explicitly not intended to define a font
   659    taxonomy. A type designer's idea of a family may often extend to a set of
   660    faces that vary along axes other than just the standard axes of weight,
   661    width and slope. A family may extend to include both a set of serif faces
   662    and a set of sans-serif faces or vary along axes that are unique to that
   663    family. The CSS font selection mechanism merely provides a way to
   664    determine the “closest” substitute when substitution is necessary.
   666   <p>Unlike other CSS properties, component values are a comma-separated list
   667    indicating alternatives. A user agent iterates through the list of family
   668    names until it matches an available font that contains a glyph for the
   669    character to be rendered. This allows for differences in available fonts
   670    across platforms and for differences in the range of characters supported
   671    by individual fonts.
   673   <p>A font family name only specifies a name given to a set of font faces,
   674    it does not specify an individual face. For example, given the
   675    availability of the fonts below, Futura would match but Futura Medium
   676    would not:
   678   <div class=figure><img alt="family and face names"
   679    src=familyvsfacename.png>
   680    <p class=caption>Family and individual face names
   681   </div>
   683   <p>Consider the example below:
   685   <div class=example>
   686    <pre>body {
   687     font-family: Helvetica, Verdana, sans-serif;
   688 }</pre>
   690    <p>If Helvetica is available it will be used when rendering. If neither
   691     Helvetica nor Verdana is present, then the user-agent-defined sans serif
   692     font will be used.</p>
   693   </div>
   695   <p>There are two types of font family names:
   697   <dl>
   698    <dt><dfn id=family-name-value><var>&lt;family-name&gt;</var></dfn>
   700    <dd>The name of a font family of choice such as Helvetica or Verdana in
   701     the previous example.
   703    <dt><dfn id=generic-family-value><var>&lt;generic-family&gt;</var></dfn>
   705    <dd> The following generic family keywords are defined: ‘<a
   706     href="#serif"><code class=property>serif</code></a>’, ‘<a
   707     href="#sans-serif"><code class=property>sans-serif</code></a>’, ‘<a
   708     href="#cursive"><code class=property>cursive</code></a>’, ‘<a
   709     href="#fantasy"><code class=property>fantasy</code></a>’, and ‘<a
   710     href="#monospace"><code class=property>monospace</code></a>’. These
   711     keywords can be used as a general fallback mechanism when an author's
   712     desired font choices are not available. As keywords, they must not be
   713     quoted. Authors are encouraged to append a generic font family as a last
   714     alternative for improved robustness.
   715   </dl>
   717   <p>Font family names other than generic families must either be given
   718    quoted as <a
   719    href="//www.w3.org/TR/CSS21/syndata.html#strings">strings,</a> or unquoted
   720    as a sequence of one or more <a
   721    href="//www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifiers.</a>
   722    This means most punctuation characters and digits at the start of each
   723    token must be escaped in unquoted font family names.
   725   <p>To illustrate this, the following declarations are invalid:
   727   <pre>
   728 font-family: Red/Black, sans-serif;
   729 font-family: "Lucida" Grande, sans-serif;
   730 font-family: Ahem!, sans-serif;
   731 font-family: test@foo, sans-serif;
   732 font-family: #POUND, sans-serif;
   733 font-family: Hawaii 5-0, sans-serif;
   734 </pre>
   736   <p>If a sequence of identifiers is given as a font family name, the
   737    computed value is the name converted to a string by joining all the
   738    identifiers in the sequence by single spaces.
   740   <p>To avoid mistakes in escaping, it is recommended to quote font family
   741    names that contain white space, digits, or punctuation characters other
   742    than hyphens:
   744   <pre>
   745 body { font-family: "New Century Schoolbook", serif }
   747 &lt;BODY STYLE="font-family: '21st Century', fantasy">
   748 </pre>
   750   <p>Font family <em>names</em> that happen to be the same as a keyword value
   751    (‘<code class=property>inherit</code>’, ‘<a href="#serif"><code
   752    class=property>serif</code></a>’, ‘<a href="#sans-serif"><code
   753    class=property>sans-serif</code></a>’, ‘<a href="#monospace"><code
   754    class=property>monospace</code></a>’, ‘<a href="#fantasy"><code
   755    class=property>fantasy</code></a>’, and ‘<a href="#cursive"><code
   756    class=property>cursive</code></a>’) must be quoted to prevent confusion
   757    with the keywords with the same names. The keywords ‘<code
   758    class=property>initial</code>’ and ‘<code
   759    class=property>default</code>’ are reserved for future use and must also
   760    be quoted when used as font names. UAs must not consider these keywords as
   761    matching the <a
   762    href="#family-name-value"><var>&lt;family-name&gt;</var></a> type.
   764   <p>The precise way a set of fonts are grouped into font families varies
   765    depending upon the platform font management API's. The Windows GDI API
   766    only allows four faces to be grouped into a family while the DirectWrite
   767    API and API's on OSX and other platforms support font families with a
   768    variety of weights, widths and slopes (see <a
   769    href="#platform-props-to-css">Appendix A</a> for more details).
   771   <p>Some font formats allow fonts to carry multiple localizations of the
   772    family name. User agents must recognize and correctly match all of these
   773    names independent of the underlying platform localization, system API used
   774    or document encoding:
   776   <div class=figure><img alt="examples of localized family names"
   777    src=localizedfamilynames.png>
   778    <p class=caption>Localized family names
   779   </div>
   781   <h4 id=generic-font-families><span class=secno>3.1.1 </span>Generic font
   782    families</h4>
   784   <p>All five generic font families are defined to exist in all CSS
   785    implementations (they need not necessarily map to five distinct actual
   786    fonts). User agents should provide reasonable default choices for the
   787    generic font families, which express the characteristics of each family as
   788    well as possible within the limits allowed by the underlying technology.
   789    User agents are encouraged to allow users to select alternative choices
   790    for the generic fonts.
   792   <h5 class="no-num no-toc"> <span class=index-def id=serif0 title="serif,
   793    definition of"><a name=serif-def><dfn id=serif>serif</dfn></a></span></h5>
   795   <p>Serif fonts represent the formal text style for a script. This often
   796    means but is not limited to glyphs that have finishing strokes, flared or
   797    tapering ends, or have actual serifed endings (including slab serifs).
   798    Serif fonts are typically proportionately-spaced. They often display a
   799    greater variation between thick and thin strokes than fonts from the ‘<a
   800    href="#sans-serif"><code class=property>sans-serif</code></a>’ generic
   801    font family. CSS uses the term ‘<a href="#serif"><code
   802    class=property>serif</code></a>’ to apply to a font for any script,
   803    although other names may be more familiar for particular scripts, such as
   804    Mincho (Japanese), Sung, Song or Kai (Chinese), Batang (Korean). For
   805    Arabic, the Naskh style would correspond to ‘<a href="#serif"><code
   806    class=property>serif</code></a>’ more due to its typographic role rather
   807    than its actual design style. Any font that is so described may be used to
   808    represent the generic ‘<a href="#serif"><code
   809    class=property>serif</code></a>’ family.
   811   <div class=figure><img alt="sample serif fonts" src=serifexamples.png>
   812    <p class=caption>Sample serif fonts
   813   </div>
   815   <h5 class="no-num no-toc"> <span class=index-def id=sans-serif0
   816    title="sans-serif, definition of"> <a name=sans-serif-def><dfn
   817    id=sans-serif>sans-serif</dfn></a></span></h5>
   819   <p>Glyphs in sans-serif fonts, as the term is used in CSS, are generally
   820    low contrast (vertical and horizontal stems have the close to the same
   821    thickness) and have stroke endings that are plain -- without any flaring,
   822    cross stroke, or other ornamentation. Sans-serif fonts are typically
   823    proportionately-spaced. They often have little variation between thick and
   824    thin strokes, compared to fonts from the ‘<a href="#serif"><code
   825    class=property>serif</code></a>’ family. CSS uses the term ‘<a
   826    href="#sans-serif"><code class=property>sans-serif</code></a>’ to apply
   827    to a font for any script, although other names may be more familiar for
   828    particular scripts, such as Gothic (Japanese), Hei (Chinese), or Gulim
   829    (Korean). Any font that is so described may be used to represent the
   830    generic ‘<a href="#sans-serif"><code
   831    class=property>sans-serif</code></a>’ family.
   833   <div class=figure><img alt="sample sans-serif fonts"
   834    src=sansserifexamples.png>
   835    <p class=caption>Sample sans-serif fonts
   836   </div>
   838   <h5 class="no-num no-toc"> <span class=index-def id=cursive0
   839    title="cursive, definition of"> <a name=cursive-def><dfn
   840    id=cursive>cursive</dfn></a></span></h5>
   842   <p>Glyphs in cursive fonts generally use a more informal script style, and
   843    the result looks more like handwritten pen or brush writing than printed
   844    letterwork. CSS uses the term ‘<a href="#cursive"><code
   845    class=property>cursive</code></a>’ to apply to a font for any script,
   846    although other names such as Chancery, Brush, Swing and Script are also
   847    used in font names.
   849   <div class=figure><img alt="sample cursive fonts" src=cursiveexamples.png>
   850    <p class=caption>Sample cursive fonts
   851   </div>
   853   <h5 class="no-num no-toc"> <span class=index-def id=fantasy0
   854    title="fantasy, definition of"> <a name=fantasy-def><dfn
   855    id=fantasy>fantasy</dfn></a></span></h5>
   857   <p>Fantasy fonts are primarily decorative or expressive fonts that contain
   858    playful representations of characters. These do not include Pi or Picture
   859    fonts which do not represent actual characters.
   861   <div class=figure><img alt="sample fantasy fonts" src=fantasyexamples.png>
   862    <p class=caption>Sample fantasy fonts
   863   </div>
   865   <h5 class="no-num no-toc"> <span class=index-def id=monospace0
   866    title="monospace, definition of"> <a name=monospace-def><dfn
   867    id=monospace>monospace</dfn></a></span></h5>
   869   <p>The sole criterion of a monospace font is that all glyphs have the same
   870    fixed width. This is often used to render samples of computer code.
   872   <div class=figure><img alt="sample monospace fonts"
   873    src=monospaceexamples.png>
   874    <p class=caption>Sample monospace fonts
   875   </div>
   876   <!-- prop: font-weight -->
   878   <h3 id=font-weight-prop><span class=secno>3.2 </span>Font weight: the <a
   879    href="#propdef-font-weight">font-weight</a> property</h3>
   881   <table class=propdef id=namefont-weightvaluenormal-bold-bolder-l>
   882    <tbody>
   883     <tr>
   884      <td>Name:
   886      <td><dfn id=propdef-font-weight
   887       title="font-weight!!property">font-weight</dfn>
   889     <tr>
   890      <td>Value:
   892      <td><a href="#font-weight-normal-value"
   893       title="normal!!font-weight">normal</a> | <a href="#bold">bold</a> | <a
   894       href="#bolder">bolder</a> | <a href="#lighter">lighter</a> | <a
   895       href="#font-weight-numeric-values" title="100...900 weight
   896       values">100</a> | <a href="#font-weight-numeric-values"
   897       title="100...900 weight values">200</a> | <a
   898       href="#font-weight-numeric-values" title="100...900 weight
   899       values">300</a> | <a href="#font-weight-numeric-values"
   900       title="100...900 weight values">400</a> | <a
   901       href="#font-weight-numeric-values" title="100...900 weight
   902       values">500</a> | <a href="#font-weight-numeric-values"
   903       title="100...900 weight values">600</a> | <a
   904       href="#font-weight-numeric-values" title="100...900 weight
   905       values">700</a> | <a href="#font-weight-numeric-values"
   906       title="100...900 weight values">800</a> | <a
   907       href="#font-weight-numeric-values" title="100...900 weight
   908       values">900</a>
   910     <tr>
   911      <td>Initial:
   913      <td>normal
   915     <tr>
   916      <td>Applies to:
   918      <td>all elements
   920     <tr>
   921      <td>Inherited:
   923      <td>yes
   925     <tr>
   926      <td>Percentages:
   928      <td>N/A
   930     <tr>
   931      <td>Media:
   933      <td>visual
   935     <tr>
   936      <td>Computed value:
   938      <td>numeric weight value (see description)
   940     <tr>
   941      <td>Animatable:
   943      <td>as <a
   944       href="http://dev.w3.org/csswg/css3-transitions/#animtype-font-weight">font
   945       weight</a>
   946   </table>
   948   <p>The <a href="#propdef-font-weight"
   949    title="font-weight!!property">‘<code
   950    class=property>font-weight</code>’</a> property specifies the weight of
   951    glyphs in the font, their degree of blackness or stroke thickness.
   953   <p>Values have the following meanings:
   955   <dl>
   956    <dt><dfn id=font-weight-numeric-values title="100...900 weight values">100
   957     to 900</dfn>
   959    <dd>These values form an ordered sequence, where each number indicates a
   960     weight that is at least as dark as its predecessor. These roughly
   961     correspond to the commonly used weight names below:
   962   </dl>
   964   <ul>
   965    <li>100 - Thin
   967    <li>200 - Extra Light (Ultra Light)
   969    <li>300 - Light
   971    <li>400 - Normal
   973    <li>500 - Medium
   975    <li>600 - Semi Bold (Demi Bold)
   977    <li>700 - Bold
   979    <li>800 - Extra Bold (Ultra Bold)
   981    <li>900 - Black (Heavy)
   982   </ul>
   984   <dl>
   985    <dt><dfn id=font-weight-normal-value
   986     title="normal!!font-weight">normal</dfn>
   988    <dd>Same as ‘<code class=css>400</code>’.
   990    <dt><dfn id=bold>bold</dfn>
   992    <dd>Same as ‘<code class=css>700</code>’.
   994    <dt><dfn id=bolder>bolder</dfn>
   996    <dd>Specifies a bolder weight than the inherited value.
   998    <dt><dfn id=lighter>lighter</dfn>
  1000    <dd>Specifies a lighter weight than the inherited value.
  1001   </dl>
  1003   <p>Font formats that use a scale other than a nine-step scale should map
  1004    their scale onto the CSS scale so that 400 roughly corresponds with a face
  1005    that would be labeled as Regular, Book, Roman and 700 roughly matches a
  1006    face that would be labeled as Bold. Or weights may be inferred from the
  1007    style names, ones that correspond roughly with the scale above. The scale
  1008    is relative, so a face with a larger weight value must never appear
  1009    lighter. If style names are used to infer weights, care should be taken to
  1010    handle variations in style names across locales.
  1012   <p>Quite often there are only a few weights available for a particular font
  1013    family. When a weight is specified for which no face exists, a face with a
  1014    nearby weight is used. In general, bold weights map to faces with heavier
  1015    weights and light weights map to faces with lighter weights (see the <a
  1016    href="#font-matching-algorithm">font matching section below</a> for a
  1017    precise definition). The examples here illustrate which face is used for
  1018    different weights, grey indicates a face for that weight does not exist so
  1019    a face with a nearby weight is used:
  1021   <div class=figure><img alt="weight mappings for a family with 400, 700 and
  1022    900 weights" src=optimaweights.png>
  1023    <p class=caption>Weight mappings for a font family with 400, 700 and 900
  1024     weight faces
  1025   </div>
  1027   <div class=figure><img alt="weight mappings for a family with 300, 600
  1028    weights" src=hiraginoweights.png>
  1029    <p class=caption>Weight mappings for a font family with 300 and 600 weight
  1030     faces
  1031   </div>
  1033   <p>Although the practice is not well-loved by typographers, bold faces are
  1034    often synthesized by user agents for faces that lack actual bold faces.
  1035    For the purposes of style matching, these faces must be treated as if they
  1036    exist within the family. Authors can explicitly avoid this behavior by
  1037    using the ‘<a href="#propdef-font-synthesis"><code
  1038    class=property>font-synthesis</code></a>’ property.
  1040   <p>Specified values of ‘<a href="#bolder"><code
  1041    class=property>bolder</code></a>’ and ‘<a href="#lighter"><code
  1042    class=property>lighter</code></a>’ indicate weights relative to the
  1043    weight of the parent element. The computed weight is calculated based on
  1044    the inherited <a href="#propdef-font-weight"
  1045    title="font-weight!!property">‘<code
  1046    class=property>font-weight</code>’</a> value using the chart below.
  1048   <table class=data id=bolderlighter summary="Bolder/lighter mappings">
  1049    <thead>
  1050     <tr>
  1051      <th>Inherited value
  1053      <th>bolder
  1055      <th>lighter
  1057    <tbody>
  1058     <tr>
  1059      <th>100
  1061      <td>400
  1063      <td>100
  1065     <tr>
  1066      <th>200
  1068      <td>400
  1070      <td>100
  1072     <tr>
  1073      <th>300
  1075      <td>400
  1077      <td>100
  1079     <tr>
  1080      <th>400
  1082      <td>700
  1084      <td>100
  1086     <tr>
  1087      <th>500
  1089      <td>700
  1091      <td>100
  1093     <tr>
  1094      <th>600
  1096      <td>900
  1098      <td>400
  1100     <tr>
  1101      <th>700
  1103      <td>900
  1105      <td>400
  1107     <tr>
  1108      <th>800
  1110      <td>900
  1112      <td>700
  1114     <tr>
  1115      <th>900
  1117      <td>900
  1119      <td>700
  1120   </table>
  1122   <p>The table above is equivalent to selecting the next relative bolder or
  1123    lighter face, given a font family containing normal and bold faces along
  1124    with a thin and a heavy face. Authors who desire finer control over the
  1125    exact weight values used for a given element may use numerical values
  1126    instead of relative weights.</p>
  1127   <!-- prop: font-stretch -->
  1129   <h3 id=font-stretch-prop><span class=secno>3.3 </span>Font width: the <a
  1130    href="#propdef-font-stretch">font-stretch</a> property</h3>
  1132   <table class=propdef id=namefont-stretchvalue-normal-ultra-conde>
  1133    <tbody>
  1134     <tr>
  1135      <td>Name:
  1137      <td><dfn id=propdef-font-stretch
  1138       title="font-stretch!!property">font-stretch</dfn>
  1140     <tr>
  1141      <td>Value:
  1143      <td> <a href="#font-stretch-normal-value"
  1144       title="normal!!font-stretch">normal</a> | <a
  1145       href="#ultra-condensed">ultra-condensed</a> | <a
  1146       href="#extra-condensed">extra-condensed</a> | <a
  1147       href="#condensed">condensed</a> | <a
  1148       href="#semi-condensed-">semi-condensed</a> | <a
  1149       href="#semi-expanded">semi-expanded</a> | <a
  1150       href="#expanded">expanded</a> | <a
  1151       href="#extra-expanded">extra-expanded</a> | <a
  1152       href="#ultra-expanded">ultra-expanded</a>
  1154     <tr>
  1155      <td>Initial:
  1157      <td>normal
  1159     <tr>
  1160      <td>Applies to:
  1162      <td>all elements
  1164     <tr>
  1165      <td>Inherited:
  1167      <td>yes
  1169     <tr>
  1170      <td>Percentages:
  1172      <td>N/A
  1174     <tr>
  1175      <td>Media:
  1177      <td>visual
  1179     <tr>
  1180      <td>Computed value:
  1182      <td>as specified
  1184     <tr>
  1185      <td>Animatable:
  1187      <td>as <a href="#font-stretch-animation">font stretch</a>
  1188   </table>
  1190   <p>The <a href="#propdef-font-stretch"
  1191    title="font-stretch!!property">‘<code
  1192    class=property>font-stretch</code>’</a> property selects a normal,
  1193    condensed, or expanded face from a font family. Absolute keyword values
  1194    have the following ordering, from narrowest to widest:
  1196   <ul>
  1197    <li><dfn id=ultra-condensed>ultra-condensed</dfn>
  1199    <li><dfn id=extra-condensed>extra-condensed</dfn>
  1201    <li><dfn id=condensed>condensed</dfn>
  1203    <li><dfn id=semi-condensed->semi-condensed </dfn>
  1205    <li><dfn id=font-stretch-normal-value
  1206     title="normal!!font-stretch">normal</dfn>
  1208    <li><dfn id=semi-expanded>semi-expanded</dfn>
  1210    <li><dfn id=expanded>expanded</dfn>
  1212    <li><dfn id=extra-expanded>extra-expanded</dfn>
  1214    <li><dfn id=ultra-expanded>ultra-expanded</dfn>
  1215   </ul>
  1217   <p>When a face does not exist for a given width, normal or condensed values
  1218    map to a narrower face, otherwise a wider face. Conversely, expanded
  1219    values map to a wider face, otherwise a narrower face. The figure below
  1220    shows how the nine font-stretch property settings affect font selection
  1221    for font family containing a variety of widths, grey indicates a width for
  1222    which no face exists and a different width is substituted:
  1224   <div class=figure><img alt="width mappings for a family with condensed,
  1225    normal and expanded faces" src=universwidths.png>
  1226    <p class=caption>Width mappings for a font family with condensed, normal
  1227     and expanded width faces
  1228   </div>
  1230   <p id=font-stretch-animation>Animation of font stretch: Font stretch is
  1231    interpolated in discrete steps. The interpolation happens as though the
  1232    ordered values are equally spaced real numbers. The interpolation result
  1233    is rounded to the nearest value, with values exactly halfway between two
  1234    values rounded towards the later value in the list above.</p>
  1235   <!-- prop: font-style -->
  1237   <h3 id=font-style-prop><span class=secno>3.4 </span>Font style: the <a
  1238    href="#propdef-font-style">font-style</a> property</h3>
  1240   <table class=propdef id=namefont-stylevaluenormal-italic-oblique>
  1241    <tbody>
  1242     <tr>
  1243      <td>Name:
  1245      <td><dfn id=propdef-font-style
  1246       title="font-style!!property">font-style</dfn>
  1248     <tr>
  1249      <td>Value:
  1251      <td><a href="#font-style-normal-value"
  1252       title="normal!!font-style">normal</a> | <a href="#italic">italic</a> |
  1253       <a href="#oblique">oblique</a>
  1255     <tr>
  1256      <td>Initial:
  1258      <td>normal
  1260     <tr>
  1261      <td>Applies to:
  1263      <td>all elements
  1265     <tr>
  1266      <td>Inherited:
  1268      <td>yes
  1270     <tr>
  1271      <td>Percentages:
  1273      <td>N/A
  1275     <tr>
  1276      <td>Media:
  1278      <td>visual
  1280     <tr>
  1281      <td>Computed value:
  1283      <td>as specified
  1285     <tr>
  1286      <td>Animatable:
  1288      <td>no
  1289   </table>
  1291   <p>The <a href="#propdef-font-style" title="font-style!!property">‘<code
  1292    class=property>font-style</code>’</a> property allows italic or oblique
  1293    faces to be selected. Italic forms are generally cursive in nature while
  1294    oblique faces are typically sloped versions of the regular face. Oblique
  1295    faces can be simulated by artificially sloping the glyphs of the regular
  1296    face. Compare the artificially sloped renderings of Palatino ‘<code
  1297    class=property>a</code>’ and Baskerville ‘<code
  1298    class=property>N</code>’ in grey with the actual italic versions:
  1300   <div class=figure><img alt="artificial sloping vs. real italics"
  1301    src=realvsfakeitalics.png>
  1302    <p class=caption>Artificial sloping versus real italics
  1303   </div>
  1305   <p>Values have the following meanings:
  1307   <dl>
  1308    <dt><dfn id=font-style-normal-value
  1309     title="normal!!font-style">normal</dfn>
  1311    <dd>selects a face that is classified as a normal face, one that is
  1312     neither italic or obliqued
  1314    <dt><dfn id=italic>italic</dfn>
  1316    <dd>selects a font that is labeled as an italic face, or an oblique face
  1317     if one is not
  1319    <dt><dfn id=oblique>oblique</dfn>
  1321    <dd>selects a font that is labeled as an oblique face, or an italic face
  1322     if one is not
  1323   </dl>
  1325   <p>If no italic or oblique face is available, oblique faces can be
  1326    synthesized by rendering non-obliqued faces with a right sloping
  1327    transformation applied. When synthesizing these faces, the transformation
  1328    should apply to all glyphs in the same way and not vary based on codepoint
  1329    or due to horizontal or vertical line orientation.
  1331   <p class=issue>It has been <a
  1332    href="http://lists.w3.org/Archives/Public/www-style/2013May/0272.html">proposed</a>
  1333    that for vertical text runs, synthetic italics should not mimic normal
  1334    italic glyphs but instead mimic the customs of Japanese obliquing
  1335    (斜体、shatai), where the obliquing is applied across the text run
  1336    regardless of glyph orientation.
  1338   <p>Many scripts lack the tradition of mixing a cursive form within text
  1339    rendered with a normal face. Chinese, Japanese and Korean fonts almost
  1340    always lack italic or oblique faces. Fonts that support a mixture of
  1341    scripts will sometimes omit specific scripts such as Arabic from the set
  1342    of glyphs supported in the italic face. User agents should be careful
  1343    about making <a href="#character-map"><em>character map</em></a>
  1344    assumptions across faces.</p>
  1345   <!-- prop: font-size -->
  1347   <h3 id=font-size-prop><span class=secno>3.5 </span>Font size: the <a
  1348    href="#propdef-font-size">font-size</a> property</h3>
  1350   <table class=propdef id=namefont-sizevalueltabsolute-sizegt-ltre>
  1351    <tbody>
  1352     <tr>
  1353      <td>Name:
  1355      <td><dfn id=propdef-font-size>font-size</dfn>
  1357     <tr>
  1358      <td>Value:
  1360      <td><a href="#absolute-size-value"><var>&lt;absolute-size&gt;</var></a>
  1361       | <a href="#relative-size-value"><var>&lt;relative-size&gt;</var></a> |
  1362       <a href="#length-size-value"><var>&lt;length&gt;</var></a> | <a
  1363       href="#percentage-size-value"><var>&lt;percentage&gt;</var></a>
  1365     <tr>
  1366      <td>Initial:
  1368      <td>medium
  1370     <tr>
  1371      <td>Applies to:
  1373      <td>all elements
  1375     <tr>
  1376      <td>Inherited:
  1378      <td>yes
  1380     <tr>
  1381      <td>Percentages:
  1383      <td>refer to parent element's font size
  1385     <tr>
  1386      <td>Media:
  1388      <td>visual
  1390     <tr>
  1391      <td>Computed value:
  1393      <td>absolute length
  1395     <tr>
  1396      <td>Animatable:
  1398      <td>as <a
  1399       href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a>
  1400   </table>
  1402   <p>This property indicates the desired height of glyphs from the font. For
  1403    scalable fonts, the font-size is a scale factor applied to the EM unit of
  1404    the font. (Note that certain glyphs may bleed outside their EM box.) For
  1405    non-scalable fonts, the font-size is converted into absolute units and
  1406    matched against the declared font-size of the font, using the same
  1407    absolute coordinate space for both of the matched values. Values have the
  1408    following meanings:
  1410   <dl>
  1411    <dt><dfn id=absolute-size-value><var>&lt;absolute-size&gt;</var></dfn>
  1413    <dd> An <a
  1414     href="#absolute-size-value"><var>&lt;absolute-size&gt;</var></a> keyword
  1415     refers to an entry in a table of font sizes computed and kept by the user
  1416     agent. Possible values are:
  1417     <p> [ xx-small | x-small | small | medium | large | x-large | xx-large ]</p>
  1419    <dt><dfn id=relative-size-value><var>&lt;relative-size&gt;</var></dfn>
  1421    <dd> A <a href="#relative-size-value"><var>&lt;relative-size&gt;</var></a>
  1422     keyword is interpreted relative to the table of font sizes and the
  1423     computed ‘<a href="#propdef-font-size"><code
  1424     class=property>font-size</code></a>’ of the parent element. Possible
  1425     values are:
  1426     <p> [ larger | smaller ]
  1428     <p> For example, if the parent element has a font size of ‘<code
  1429      class=property>medium</code>’, a value of ‘<code
  1430      class=property>larger</code>’ will make the font size of the current
  1431      element be ‘<code class=property>large</code>’. If the parent
  1432      element's size is not close to a table entry, the user agent is free to
  1433      interpolate between table entries or round off to the closest one. The
  1434      user agent may have to extrapolate table values if the numerical value
  1435      goes beyond the keywords.
  1437    <dt><dfn id=length-size-value><var>&lt;length&gt;</var></dfn>
  1439    <dd>A length value specifies an absolute font size (independent of the
  1440     user agent's font table). Negative lengths are illegal.
  1442    <dt><dfn id=percentage-size-value><var>&lt;percentage&gt;</var></dfn>
  1444    <dd>A percentage value specifies an absolute font size relative to the
  1445     parent element's font size. Use of percentage values, or values in
  1446     ‘<code class=property>em</code>’s, leads to more robust and
  1447     cascadable style sheets.
  1448   </dl>
  1450   <p>The following table provides user agent guidelines for the absolute-size
  1451    scaling factor and their mapping to HTML heading and absolute font-sizes.
  1452    The ‘<code class=property>medium</code>’ value is used as the
  1453    reference middle value. The user agent may fine-tune these values for
  1454    different fonts or different types of display devices.
  1456   <table class=data>
  1457    <thead>
  1458     <tr>
  1459      <th>CSS absolute-size values
  1461      <th>xx-small
  1463      <th>x-small
  1465      <th>small
  1467      <th>medium
  1469      <th>large
  1471      <th>x-large
  1473      <th>xx-large
  1475      <th> 
  1477    <tbody>
  1478     <tr>
  1479      <th>scaling factor
  1481      <td>3/5
  1483      <td>3/4
  1485      <td>8/9
  1487      <td>1
  1489      <td>6/5
  1491      <td>3/2
  1493      <td>2/1
  1495      <td>3/1
  1497     <tr>
  1498      <th>HTML headings
  1500      <td>h6
  1502      <td> 
  1504      <td>h5
  1506      <td>h4
  1508      <td>h3
  1510      <td>h2
  1512      <td>h1
  1514      <td> 
  1516     <tr>
  1517      <th>HTML font sizes
  1519      <td>1
  1521      <td> 
  1523      <td>2
  1525      <td>3
  1527      <td>4
  1529      <td>5
  1531      <td>6
  1533      <td>7
  1534   </table>
  1536   <p class=note><em><strong>Note 1.</strong> To preserve readability, an UA
  1537    applying these guidelines should nevertheless avoid creating font-size
  1538    resulting in less than 9 device pixels per EM unit on a computer
  1539    display.</em>
  1541   <p class=note><em><strong>Note 2.</strong> In CSS1, the suggested scaling
  1542    factor between adjacent indexes was 1.5 which user experience proved to be
  1543    too large. In CSS2, the suggested scaling factor for computer screen
  1544    between adjacent indexes was 1.2 which still created issues for the small
  1545    sizes. The new scaling factor varies between each index to provide a
  1546    better readability.</em>
  1548   <p>The actual value of this property may differ from the computed value due
  1549    a numerical value on ‘<a href="#propdef-font-size-adjust"><code
  1550    class=property>font-size-adjust</code></a>’ and the unavailability of
  1551    certain font sizes.
  1553   <p>Child elements inherit the computed <a class=noxref
  1554    href="#font-size-prop"> <span class=property>‘<code
  1555    class=property>font-size</code>’</span></a> value (otherwise, the effect
  1556    of <a class=noxref href="#font-size-adjust-prop"><span
  1557    class=property>‘<code
  1558    class=property>font-size-adjust</code>’</span></a> would compound).
  1560   <div class=example>
  1561    <p style="display:none">Example(s):
  1563    <p>
  1565    <pre>p { font-size: 12pt; }
  1566 blockquote { font-size: larger }
  1567 em { font-size: 150% }
  1568 em { font-size: 1.5em }
  1569 </pre>
  1570   </div>
  1571   <!-- prop: font-size-adjust -->
  1573   <h3 id=font-size-adjust-prop><span class=secno>3.6 </span>Relative sizing:
  1574    the <a href="#propdef-font-size-adjust">font-size-adjust</a> property</h3>
  1576   <table class=propdef id=namefont-size-adjustvaluenone-auto-ltnum>
  1577    <tbody>
  1578     <tr>
  1579      <td>Name:
  1581      <td><dfn id=propdef-font-size-adjust>font-size-adjust</dfn>
  1583     <tr>
  1584      <td>Value:
  1586      <td><a href="#font-size-adjust-none-value"
  1587       title="none!!font-size-adjust">none</a> | <a
  1588       href="#font-size-adjust-auto-value"
  1589       title="auto!!font-size-adjust">auto</a> | <a
  1590       href="#aspect-ratio-value"><var>&lt;number&gt;</var></a>
  1592     <tr>
  1593      <td>Initial:
  1595      <td>none
  1597     <tr>
  1598      <td>Applies to:
  1600      <td>all elements
  1602     <tr>
  1603      <td>Inherited:
  1605      <td>yes
  1607     <tr>
  1608      <td>Percentages:
  1610      <td>N/A
  1612     <tr>
  1613      <td>Media:
  1615      <td>visual
  1617     <tr>
  1618      <td>Computed value:
  1620      <td>as specified
  1622     <tr>
  1623      <td>Animatable:
  1625      <td>as <a
  1626       href="http://dev.w3.org/csswg/css3-transitions/#animtype-number">number</a>
  1627   </table>
  1629   <p>For any given font size, the apparent size and legibility of text varies
  1630    across fonts. For scripts such as Latin or Cyrillic that distinguish
  1631    between upper and lowercase letters, the relative height of lowercase
  1632    letters compared to their uppercase counterparts is a determining factor
  1633    of legibility. This is commonly referred to as the <a class=index-def
  1634    href="#aspect-value" id=aspect-value0 title="aspect value"><dfn
  1635    id=aspect-value>aspect value</dfn></a>. Precisely defined, it is equal to
  1636    the x-height of a font divided by the font size.
  1638   <p>In situations where font fallback occurs, fallback fonts may not share
  1639    the same aspect ratio as the desired font family and will thus appear less
  1640    readable. The font-size-adjust property is a way to preserve the
  1641    readability of text when font fallback occurs. It does this by adjusting
  1642    the font-size so that the x-height is the same regardless of the font
  1643    used.
  1645   <div class=example>
  1646    <p>The style defined below defines Verdana as the desired font family, but
  1647     if Verdana is not available Futura or Times will be used.</p>
  1649    <pre>p {
  1650     font-family: Verdana, Futura, Times;
  1653 &lt;p>Lorem ipsum dolor sit amet, ...&lt;/p>
  1654 </pre>
  1656    <p>Verdana has a relatively high aspect ratio, lowercase letters are
  1657     relatively tall compared to uppercase letters, so at small sizes text
  1658     appears legible. Times has a lower aspect ratio and so if fallback
  1659     occurs, the text will be less legible at small sizes than Verdana.</p>
  1660   </div>
  1662   <p>How text rendered in each of these fonts compares is shown below, the
  1663    columns show text rendered in Verdana, Futura and Times. The same
  1664    font-size value is used across cells within each row and red lines are
  1665    included to show the differences in x-height. In the upper half each row
  1666    is rendered in the same font-size value. The same is true for the lower
  1667    half but in this half the font-size-adjust property is also set so that
  1668    the actual font size is adjusted to preserve the x-height across each row.
  1669    Note how small text remains relatively legible across each row in the
  1670    lower half.
  1672   <div class=figure><img alt="text with and without font-size-adjust"
  1673    src=fontsizeadjust.png>
  1674    <p class=caption>Text with and without the use of font-size-adjust
  1675   </div>
  1677   <p>This property allows authors to specify an aspect value for an element
  1678    that will effectively preserve the x-height of the first choice font,
  1679    whether it is substituted or not. Values have the following meanings:
  1681   <dl>
  1682    <dt><dfn id=font-size-adjust-none-value
  1683     title="none!!font-size-adjust">none</dfn>
  1685    <dd>Do not preserve the font's x-height.
  1687    <dt><dfn id=font-size-adjust-auto-value
  1688     title="auto!!font-size-adjust">auto</dfn>
  1690    <dd>Behaves just like &lt;number>, except the number used is the aspect
  1691     value calculated by user agents for the first font in the list of fonts
  1692     defined for the initial value of the <a href="#propdef-font-family"
  1693     title="font-family!!property">‘<code
  1694     class=property>font-family</code>’</a> property. Effectively this is
  1695     the default font used when <a href="#propdef-font-family"
  1696     title="font-family!!property">‘<code
  1697     class=property>font-family</code>’</a> is not otherwise specified.
  1698     <p>Authors can use this value to specify that font size should be
  1699      normalized across fonts based on the x-height without the need to
  1700      specify the aspect ratio explicitly.</p>
  1702    <dt><dfn id=aspect-ratio-value><var>&lt;number&gt;</var></dfn>
  1704    <dd>Specifies the aspect value used in the calculation below to calculate
  1705     the adjusted font size:
  1706     <pre>c  =  ( a / a' ) s
  1707 </pre>
  1709     <p>where:</p>
  1711     <pre>s  =  font-size value
  1712 a  =  aspect value as specified by the font-size-adjust property
  1713 a' =  aspect value of actual font
  1714 c  =  adjusted font-size to use
  1715 </pre>
  1717     <p>This value applies to any font that is selected but in typical usage
  1718      it should be based on the aspect value of the first font in the
  1719      font-family list. If this is specified accurately, the <tt>(a/a')</tt>
  1720      term in the formula above is effectively 1 for the first font and no
  1721      adjustment occurs. If the value is specified inaccurately, text rendered
  1722      using the first font in the family list will display differently in
  1723      older user agents that don't support font-size-adjust.</p>
  1724   </dl>
  1726   <p>Authors can calculate the aspect value for a given font by comparing
  1727    spans with the same content but different font-size-adjust properties. If
  1728    the same font-size is used, the spans will match when the font-size-adjust
  1729    value is accurate for the given font.
  1731   <div class=example>
  1732    <p>Two spans with borders are used to determine the aspect value of a
  1733     font. The font-size is the same for both spans but the font-size-adjust
  1734     property is specified only for the right span. Starting with a value of
  1735     0.5, the aspect value can be adjusted until the borders around the two
  1736     letters line up.</p>
  1738    <pre>p {
  1739     font-family: Futura;
  1740     font-size: 500px;
  1743 span {
  1744     border: solid 1px red;
  1747 .adjust {
  1748     font-size-adjust: 0.5;
  1751 &lt;p>&lt;span>b&lt;/span>&lt;span class="adjust">b&lt;/span>&lt;/p>
  1752 </pre>
  1754    <div class=figure><img alt="Futura with an aspect value of 0.5"
  1755     src=beforefontsizeadjust.png>
  1756     <p class=caption>Futura with an aspect value of 0.5
  1757    </div>
  1759    <p>The box on the right is a bit bigger than the one on the left, so the
  1760     aspect value of this font is something less than 0.5. Adjust the value
  1761     until the boxes align.</p>
  1762   </div>
  1763   <!-- prop: font -->
  1765   <h3 id=font-prop><span class=secno>3.7 </span>Shorthand font property: the
  1766    <a href="#propdef-font">font</a> property</h3>
  1768   <table class=propdef id=namefontvalue-ltlsquofont-stylersquogt-l>
  1769    <tbody>
  1770     <tr>
  1771      <td>Name:
  1773      <td><dfn id=propdef-font>font</dfn>
  1775     <tr>
  1776      <td>Value:
  1778      <td>[ [ <var>&lt;<a href="#propdef-font-style"
  1779       title="font-style!!property">‘<code
  1780       class=property>font-style</code>’</a>&gt;</var> || <a
  1781       href="#font-variant-css21-values"><var>&lt;font-variant-css21&gt;</var></a>
  1782       || <var>&lt;<a href="#propdef-font-weight"
  1783       title="font-weight!!property">‘<code
  1784       class=property>font-weight</code>’</a>&gt;</var> || <var>&lt;<a
  1785       href="#propdef-font-stretch" title="font-stretch!!property">‘<code
  1786       class=property>font-stretch</code>’</a></var> ]? <var>&lt;‘<a
  1787       href="#propdef-font-size"><code
  1788       class=property>font-size</code></a>’&gt;</var> [ / <var>&lt;‘<code
  1789       class=property>line-height</code>’&gt;</var> ]? <var>&lt;<a
  1790       href="#propdef-font-family" title="font-family!!property">‘<code
  1791       class=property>font-family</code>’</a>&gt;</var> ] | caption | icon |
  1792       menu | message-box | small-caption | status-bar
  1794     <tr>
  1795      <td>Initial:
  1797      <td>see individual properties
  1799     <tr>
  1800      <td>Applies to:
  1802      <td>all elements
  1804     <tr>
  1805      <td>Inherited:
  1807      <td>yes
  1809     <tr>
  1810      <td>Percentages:
  1812      <td>see individual properties
  1814     <tr>
  1815      <td>Media:
  1817      <td>visual
  1819     <tr>
  1820      <td>Computed value:
  1822      <td>see individual properties
  1824     <tr>
  1825      <td>Animatable:
  1827      <td>see individual properties
  1828   </table>
  1830   <p>The <span class=property>‘<a href="#propdef-font"><code
  1831    class=property>font</code></a>’</span> property is, except as described
  1832    below, a shorthand property for setting <a href="#propdef-font-style"
  1833    title="font-style!!property">‘<code
  1834    class=property>font-style</code>’</a>, <a href="#propdef-font-variant"
  1835    title="font-variant!!property">‘<code
  1836    class=property>font-variant</code>’</a>, <a href="#propdef-font-weight"
  1837    title="font-weight!!property">‘<code
  1838    class=property>font-weight</code>’</a>, <a href="#propdef-font-stretch"
  1839    title="font-stretch!!property">‘<code
  1840    class=property>font-stretch</code>’</a>, <span class=property>‘<a
  1841    href="#propdef-font-size"><code
  1842    class=property>font-size</code></a>’</span>, <a class=property
  1843    href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
  1844    class=property>line-height</code>’</a>, <a href="#propdef-font-family"
  1845    title="font-family!!property">‘<code
  1846    class=property>font-family</code>’</a> at the same place in the
  1847    stylesheet. Values for the <a href="#propdef-font-variant"
  1848    title="font-variant!!property">‘<code
  1849    class=property>font-variant</code>’</a> property may also be included
  1850    but only those supported in CSS 2.1, none of the font-variant values added
  1851    in this specification can be used in the <span class=property>‘<a
  1852    href="#propdef-font"><code class=property>font</code></a>’</span>
  1853    shorthand:
  1855   <pre
  1856    class=prod><dfn id=font-variant-css21-values><var>&lt;font-variant-css21&gt;</var></dfn> = [normal | small-caps]</pre>
  1858   <p>The syntax of this property is based on a traditional typographical
  1859    shorthand notation to set multiple properties related to fonts.
  1861   <p>All subproperties of the ‘<a href="#propdef-font"><code
  1862    class=property>font</code></a>’ property are first reset to their
  1863    initial values, including those listed above plus <span
  1864    class=property>‘<a href="#propdef-font-size-adjust"><code
  1865    class=property>font-size-adjust</code></a>’</span>, <span
  1866    class=property>‘<a href="#propdef-font-kerning"><code
  1867    class=property>font-kerning</code></a>’</span>, subproperties of <a
  1868    href="#propdef-font-variant" title="font-variant!!property">‘<code
  1869    class=property>font-variant</code>’</a> and and <span>‘<a
  1870    href="#propdef-font-language-override"><code
  1871    class=property>font-language-override</code></a>’</span>. Then, those
  1872    properties that are given explicit values in the <span
  1873    class=property>‘<a href="#propdef-font"><code
  1874    class=property>font</code></a>’</span> shorthand are set to those
  1875    values. For a definition of allowed and initial values, see the previously
  1876    defined properties. For reasons of backwards compatibility, it is not
  1877    possible to set <span class=property>‘<a
  1878    href="#propdef-font-size-adjust"><code
  1879    class=property>font-size-adjust</code></a>’</span> to anything other
  1880    than its initial value using the <span class=property>‘<a
  1881    href="#propdef-font"><code class=property>font</code></a>’</span>
  1882    shorthand property; instead, use the individual property.
  1884   <div class=example>
  1885    <p style="display:none">Example(s):
  1887    <p>
  1889    <pre>p { font: 12pt/14pt sans-serif }
  1890 p { font: 80% sans-serif }
  1891 p { font: x-large/110% &quot;new century schoolbook&quot;, serif }
  1892 p { font: bold italic large Palatino, serif }
  1893 p { font: normal small-caps 120%/120% fantasy }
  1894 p { font: condensed oblique 12pt &quot;Helvetica Neue&quot;, serif; }
  1895 </pre>
  1897    <p> In the second rule, the font size percentage value (‘<code
  1898     class=css>80%</code>’) refers to the computed ‘<a
  1899     href="#propdef-font-size"><code class=property>font-size</code></a>’ of
  1900     the parent element. In the third rule, the line height percentage
  1901     (‘<code class=css>110%</code>’) refers to the font size of the
  1902     element itself.
  1904    <p>The first three rules do not specify the <a
  1905     href="#propdef-font-variant" title="font-variant!!property">‘<code
  1906     class=property>font-variant</code>’</a> and <a
  1907     href="#propdef-font-weight" title="font-weight!!property">‘<code
  1908     class=property>font-weight</code>’</a> explicitly, so these properties
  1909     receive their initial values (‘<a href="#normal"><code
  1910     class=property>normal</code></a>’). Notice that the font family name
  1911     "new century schoolbook", which contains spaces, is enclosed in quotes.
  1912     The fourth rule sets the <a href="#propdef-font-weight"
  1913     title="font-weight!!property">‘<code
  1914     class=property>font-weight</code>’</a> to ‘<a href="#bold"><code
  1915     class=property>bold</code></a>’, the <a href="#propdef-font-style"
  1916     title="font-style!!property">‘<code
  1917     class=property>font-style</code>’</a> to ‘<a href="#italic"><code
  1918     class=property>italic</code></a>’, and implicitly sets <a
  1919     href="#propdef-font-variant" title="font-variant!!property">‘<code
  1920     class=property>font-variant</code>’</a> to ‘<a href="#normal"><code
  1921     class=property>normal</code></a>’.
  1923    <p> The fifth rule sets the <a href="#propdef-font-variant"
  1924     title="font-variant!!property">‘<code
  1925     class=property>font-variant</code>’</a> (‘<a href="#small-caps"><code
  1926     class=property>small-caps</code></a>’), the <span class=property>‘<a
  1927     href="#propdef-font-size"><code
  1928     class=property>font-size</code></a>’</span> (120% of the parent's font
  1929     size), the <a class=property
  1930     href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
  1931     class=property>line-height</code>’</a> (120% of the font size) and the
  1932     <a href="#propdef-font-family" title="font-family!!property">‘<code
  1933     class=property>font-family</code>’</a> (‘<a href="#fantasy"><code
  1934     class=property>fantasy</code></a>’). It follows that the keyword ‘<a
  1935     href="#normal"><code class=property>normal</code></a>’ applies to the
  1936     two remaining properties: <a href="#propdef-font-style"
  1937     title="font-style!!property">‘<code
  1938     class=property>font-style</code>’</a> and <a
  1939     href="#propdef-font-weight" title="font-weight!!property">‘<code
  1940     class=property>font-weight</code>’</a>.
  1942    <p>The sixth rule sets the <a href="#propdef-font-style"
  1943     title="font-style!!property">‘<code
  1944     class=property>font-style</code>’</a>, <a href="#propdef-font-stretch"
  1945     title="font-stretch!!property">‘<code
  1946     class=property>font-stretch</code>’</a>, <span class=property>‘<a
  1947     href="#propdef-font-size"><code
  1948     class=property>font-size</code></a>’</span>, and <a
  1949     href="#propdef-font-family" title="font-family!!property">‘<code
  1950     class=property>font-family</code>’</a>, the other font properties being
  1951     set to their initial values.
  1952   </div>
  1954   <p>Since the <a href="#propdef-font-stretch"
  1955    title="font-stretch!!property">‘<code
  1956    class=property>font-stretch</code>’</a> property was not defined in CSS
  1957    2.1, when using <a href="#propdef-font-stretch"
  1958    title="font-stretch!!property">‘<code
  1959    class=property>font-stretch</code>’</a> values within ‘<a
  1960    href="#propdef-font"><code class=property>font</code></a>’ rules,
  1961    authors should include a extra version compatible with older user agents:
  1963   <pre>p {
  1964   font: 80% sans-serif;   /* for older user agents */
  1965   font: condensed 80% sans-serif;
  1966 }</pre>
  1968   <p>The following values refer to system fonts:
  1970   <dl>
  1971    <dt><strong>caption</strong>
  1973    <dd>The font used for captioned controls (e.g., buttons, drop-downs,
  1974     etc.).
  1976    <dt><strong>icon</strong>
  1978    <dd>The font used to label icons.
  1980    <dt><strong>menu</strong>
  1982    <dd>The font used in menus (e.g., dropdown menus and menu lists).
  1984    <dt><strong>message-box</strong>
  1986    <dd>The font used in dialog boxes.
  1988    <dt><strong>small-caption</strong>
  1990    <dd>The font used for labeling small controls.
  1992    <dt><strong>status-bar</strong>
  1994    <dd>The font used in window status bars.
  1995   </dl>
  1997   <p>System fonts may only be set as a whole; that is, the font family, size,
  1998    weight, style, etc. are all set at the same time. These values may then be
  1999    altered individually if desired. If no font with the indicated
  2000    characteristics exists on a given platform, the user agent should either
  2001    intelligently substitute (e.g., a smaller version of the ‘<code
  2002    class=property>caption</code>’ font might be used for the ‘<code
  2003    class=property>small-caption</code>’ font), or substitute a user agent
  2004    default font. As for regular fonts, if, for a system font, any of the
  2005    individual properties are not part of the operating system's available
  2006    user preferences, those properties should be set to their initial values.
  2008   <p>That is why this property is "almost" a shorthand property: system fonts
  2009    can only be specified with this property, not with <a
  2010    href="#propdef-font-family" title="font-family!!property">‘<code
  2011    class=property>font-family</code>’</a> itself, so <span
  2012    class=property>‘<a href="#propdef-font"><code
  2013    class=property>font</code></a>’</span> allows authors to do more than
  2014    the sum of its subproperties. However, the individual properties such as
  2015    <a href="#propdef-font-weight" title="font-weight!!property">‘<code
  2016    class=property>font-weight</code>’</a> are still given values taken from
  2017    the system font, which can be independently varied.
  2019   <p>Note that the keywords used for the system fonts listed above are only
  2020    treated as keywords when they occur in the initial position, in other
  2021    positions the same string is treated as part of the font family name:
  2023   <pre>  font: menu;        /* use the font settings for system menus */
  2024   font: large menu;  /* use a font family named "menu" */</pre>
  2026   <div class=example>
  2027    <p style="display:none">Example(s):
  2029    <p>
  2031    <pre>button { font: 300 italic 1.3em/1.7em &quot;FB Armada&quot;, sans-serif }
  2032 button p { font: menu }
  2033 button p em { font-weight: bolder }
  2034 </pre>
  2036    <p>If the font used for dropdown menus on a particular system happened to
  2037     be, for example, 9-point Charcoal, with a weight of 600, then P elements
  2038     that were descendants of BUTTON would be displayed as if this rule were
  2039     in effect:
  2041    <pre>button p { font: 600 9pt Charcoal }
  2042 </pre>
  2044    <p>Because the <span class=property>‘<a href="#propdef-font"><code
  2045     class=property>font</code></a>’</span> shorthand resets to its initial
  2046     value any property not explicitly given a value, this has the same effect
  2047     as this declaration:
  2049    <pre>button p {
  2050   font-style: normal;
  2051   font-variant: normal;
  2052   font-weight: 600;
  2053   font-size: 9pt;
  2054   line-height: normal;
  2055   font-family: Charcoal
  2057 </pre>
  2058   </div>
  2059   <!-- prop: font-synthesis -->
  2061   <h3 id=font-synthesis-prop><span class=secno>3.8 </span>Controlling
  2062    synthetic faces: the <a href="#propdef-font-synthesis">font-synthesis</a>
  2063    property</h3>
  2065   <table class=propdef id=namefont-synthesisvaluenone-weight-style>
  2066    <tbody>
  2067     <tr>
  2068      <td>Name:
  2070      <td><dfn id=propdef-font-synthesis>font-synthesis</dfn>
  2072     <tr>
  2073      <td>Value:
  2075      <td>none | [ weight || style ]
  2077     <tr>
  2078      <td>Initial:
  2080      <td>weight style
  2082     <tr>
  2083      <td>Applies to:
  2085      <td>all elements
  2087     <tr>
  2088      <td>Inherited:
  2090      <td>yes
  2092     <tr>
  2093      <td>Percentages:
  2095      <td>N/A
  2097     <tr>
  2098      <td>Media:
  2100      <td>visual
  2102     <tr>
  2103      <td>Computed value:
  2105      <td>as specified
  2107     <tr>
  2108      <td>Animatable:
  2110      <td>no
  2111   </table>
  2113   <p>This property controls whether user agents are allowed to synthesize
  2114    bold or oblique font faces when a font family lacks bold or italic faces.
  2115    If ‘<a href="#weight"><code class=property>weight</code></a>’ is not
  2116    specified, user agents must not synthesize bold faces and if ‘<code
  2117    class=property>style</code>’ is not specified user agents must not
  2118    synthesize italic faces. A value of ‘<code class=property>none</code>’
  2119    disallows all synthetic faces.
  2121   <div class=example>
  2122    <p>The style rule below disables the use of synthetically obliqued Arabic:</p>
  2124    <pre>*:lang(ar) { font-synthesis: none; }
  2125 </pre>
  2126   </div>
  2128   <h2 id=font-resources><span class=secno>4 </span>Font Resources</h2>
  2130   <h3 id=font-face-rule><span class=secno>4.1 </span>The
  2131    <code>@font-face</code> rule</h3>
  2133   <p>The <code>@font-face</code> rule allows for linking to fonts that are
  2134    automatically fetched and activated when needed. This allows authors to
  2135    select a font that closely matches the design goals for a given page
  2136    rather than limiting the font choice to a set of fonts available on all
  2137    platforms. A set of font descriptors define the location of a font
  2138    resource, either locally or externally, along with the style
  2139    characteristics of an individual face. Multiple <code>@font-face</code>
  2140    rules can be used to construct font families with a variety of faces.
  2141    Using CSS font matching rules, a user agent can selectively download only
  2142    those faces that are needed for a given piece of text.
  2144   <p>The @font-face rule consists of the @font-face at-keyword followed by a
  2145    block of descriptor declarations. In terms of the grammar, this
  2146    specification defines the following productions:
  2148   <pre><dfn id=fontfacerule>font_face_rule</dfn>
  2149   : <a href="#fontfacesym"><i>FONT_FACE_SYM</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* '{' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#descriptordeclaration"><i>descriptor_declaration</i></a>? [ ';' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#descriptordeclaration"><i>descriptor_declaration</i></a>? ]* '}' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
  2152 <dfn id=descriptordeclaration>descriptor_declaration</dfn>
  2153   : <a href="http://www.w3.org/TR/CSS21/grammar.html#grammar"><i>property</i></a> ':' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/grammar.html#grammar"><i>expr</i></a>
  2154   ;</pre>
  2156   <p>The following new definitions are introduced:
  2158   <pre>-    -|\\0{0,4}2d(\r\n|[ \t\r\n\f])?
  2159 F    f|\\0{0,4}(46|66)(\r\n|[ \t\r\n\f])?</pre>
  2161   <p>The following new token is introduced:
  2163   <pre>@{F}{O}{N}{T}{-}{F}{A}{C}{E} {return <dfn id=fontfacesym>FONT_FACE_SYM</dfn>;}</pre>
  2165   <p>Each <span class=index-inst id=font-face
  2166    title="@font-face"><code>@font-face</code></span> rule specifies a value
  2167    for every font descriptor, either implicitly or explicitly. Those not
  2168    given explicit values in the rule take the initial value listed with each
  2169    descriptor in this specification. These descriptors apply solely within
  2170    the context of the <code>@font-face</code> rule in which they are defined,
  2171    and do not apply to document language elements. There is no notion of
  2172    which elements the descriptors apply to or whether the values are
  2173    inherited by child elements. When a given descriptor occurs multiple times
  2174    in a given <code>@font-face</code> rule, only the last descriptor
  2175    declaration is used and all prior declarations for that descriptor are
  2176    ignored.
  2178   <div class=example>
  2179    <p>To use a downloadable font called Gentium:</p>
  2181    <pre>
  2182 @font-face {
  2183   font-family: Gentium;
  2184   src: url(http://example.com/fonts/Gentium.ttf);
  2187 p { font-family: Gentium, serif; }
  2188 </pre>
  2190    <p>The user agent will download Gentium and use it when rendering text
  2191     within paragraph elements. If for some reason the site serving the font
  2192     is unavailable, the default serif font will be used.</p>
  2193   </div>
  2195   <p>A given set of <code>@font-face</code> rules define a set of fonts
  2196    available for use within the documents that contain these rules. When font
  2197    matching is done, fonts defined using these rules are considered before
  2198    other available fonts on a system.
  2200   <p>Downloaded fonts are only available to documents that reference them.
  2201    The process of activating these fonts must not make them available to
  2202    other applications or to documents that don't directly link to the same
  2203    font. User agent implementers might consider it convenient to use
  2204    downloaded fonts when rendering characters in other documents for which no
  2205    other available font exists as part of the system font fallback procedure.
  2206    However, this would cause a security leak since the contents of one page
  2207    would be able to affect other pages, something an attacker could use as an
  2208    attack vector. These restrictions do not affect caching behavior, fonts
  2209    are cached the same way other web resources are cached.
  2211   <p>This at-rule follows the forward-compatible parsing rules of CSS. Like
  2212    properties in a declaration block, declarations of any descriptors that
  2213    are not supported by the user agent must be ignored.
  2214    <code>@font-face</code> rules require a font-family and src descriptor; if
  2215    either of these are missing, the <code>@font-face</code> rule is invalid
  2216    and must be ignored entirely.
  2218   <p>In cases where user agents have limited platform resources or implement
  2219    the ability to disable downloadable font resources,
  2220    <code>@font-face</code> rules must simply be ignored; the behavior of
  2221    individual descriptors as defined in this specification should not be
  2222    altered.
  2224   <h3 id=font-family-desc><span class=secno>4.2 </span>Font family: the <a
  2225    href="#descdef-font-family">font-family</a> descriptor</h3>
  2227   <table class=descdef>
  2228    <tbody>
  2229     <tr>
  2230      <td>Name:
  2232      <td><dfn id=descdef-font-family
  2233       title="font-family!!descriptor">font-family</dfn>
  2235     <tr>
  2236      <td>Value:
  2238      <td><a href="#family-name-value"><var>&lt;family-name&gt;</var></a>
  2240     <tr>
  2241      <td><em>Initial:</em>
  2243      <td>N/A
  2244   </table>
  2246   <p>This descriptor defines the font family name that will be used in all
  2247    CSS font family name matching. It is required for the @font-face rule to
  2248    be valid. It overrides the font family names contained in the underlying
  2249    font data. If the font family name is the same as a font family available
  2250    in a given user's environment, it effectively hides the underlying font
  2251    for documents that use the stylesheet. This permits a web author to freely
  2252    choose font-family names without worrying about conflicts with font family
  2253    names present in a given user's environment. Likewise, platform
  2254    substitutions for a given font family name must not be used.
  2256   <h3 id=src-desc><span class=secno>4.3 </span>Font reference: the <a
  2257    href="#descdef-src">src</a> descriptor</h3>
  2259   <table class=descdef>
  2260    <tbody>
  2261     <tr>
  2262      <td>Name:
  2264      <td><dfn id=descdef-src>src</dfn>
  2266     <tr>
  2267      <td>Value:
  2269      <td>[ &lt;url> [format(&lt;string> #)]? | <a
  2270       href="#font-face-name-value"><var>&lt;font-face-name&gt;</var></a> ] #
  2272     <tr>
  2273      <td><em>Initial:</em>
  2275      <td>N/A
  2276   </table>
  2278   <p>This descriptor specifies the resource containing font data. It is
  2279    required for the <code>@font-face</code> rule to be valid. Its value is a
  2280    prioritized, comma-separated list of external references or
  2281    locally-installed font face names. When a font is needed the user agent
  2282    iterates over the set of references listed, using the first one it can
  2283    successfully activate. Fonts containing invalid data or local font faces
  2284    that are not found are ignored and the user agent loads the next font in
  2285    the list.
  2287   <p>As with other URLs in CSS, the URL may be relative, in which case it is
  2288    resolved relative to the location of the style sheet containing the <span
  2289    class=index-inst id=font-face0
  2290    title="@font-face"><code>@font-face</code></span> rule. In the case of SVG
  2291    fonts, the URL points to an element within a document containing SVG font
  2292    definitions. If the element reference is omitted, a reference to the first
  2293    defined font is implied. Similarly, font container formats that can
  2294    contain more than one font must load one and only one of the fonts for a
  2295    given <code>@font-face</code> rule. Fragment identifiers are used to
  2296    indicate which font to load. If a container format lacks a defined
  2297    fragment identifier scheme, implementations should use a simple 1-based
  2298    indexing scheme (e.g. "font-collection#1" for the first font,
  2299    "font-collection#2" for the second font).
  2301   <pre>
  2302 src: url(fonts/simple.ttf);   /* load simple.ttf relative to stylesheet location */
  2303 src: url(/fonts/simple.ttf);  /* load simple.ttf from absolute location */
  2304 src: url(fonts.svg#simple);   /* load SVG font with id 'simple' */
  2305 </pre>
  2307   <p>External references consist of a URL, followed by an optional hint
  2308    describing the format of the font resource referenced by that URL. The
  2309    format hint contains a comma-separated list of format strings that denote
  2310    well-known font formats. Conformant user agents must skip downloading a
  2311    font resource if the format hints indicate only unsupported or unknown
  2312    font formats. If no format hints are supplied, the user agent should
  2313    download the font resource.
  2315   <pre>
  2316 /* load WOFF font if possible, otherwise use OpenType font */
  2317 @font-face {
  2318   font-family: bodytext;
  2319   src: url(ideal-sans-serif.woff) format("woff"),
  2320        url(basic-sans-serif.ttf) format("opentype");
  2322 </pre>
  2324   <p>Format strings defined by this specification:
  2326   <table class=data id=fontformats>
  2327    <thead>
  2328     <tr>
  2329      <th>String
  2331      <th>Font Format
  2333      <th>Common extensions
  2335    <tbody>
  2336     <tr>
  2337      <th>"woff"
  2339      <td><a href="http://www.w3.org/TR/WOFF/">WOFF (Web Open Font Format)</a>
  2341      <td>.woff
  2343     <tr>
  2344      <th>"truetype"
  2346      <td><a
  2347       href="http://www.microsoft.com/typography/otspec/default.htm">TrueType</a>
  2349      <td>.ttf
  2351     <tr>
  2352      <th>"opentype"
  2354      <td><a
  2355       href="http://www.microsoft.com/typography/otspec/default.htm">OpenType</a>
  2357      <td>.ttf, .otf
  2359     <tr>
  2360      <th>"embedded-opentype"
  2362      <td><a
  2363       href="http://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded
  2364       OpenType</a>
  2366      <td>.eot
  2368     <tr>
  2369      <th>"svg"
  2371      <td><a href="http://www.w3.org/TR/SVG/fonts.html">SVG Font</a>
  2373      <td>.svg, .svgz
  2374   </table>
  2376   <p>Given the overlap in common usage between TrueType and OpenType, the
  2377    format hints "truetype" and "opentype" must be considered as synonymous; a
  2378    format hint of "opentype" does not imply that the font contains Postscript
  2379    CFF style glyph data or that it contains OpenType layout information (see
  2380    <a href="#platform-props-to-css">Appendix A</a> for more background on
  2381    this).
  2383   <p>When authors would prefer to use a locally available copy of a given
  2384    font and download it if it's not, <code>local()</code> can be used. The
  2385    locally-installed <dfn
  2386    id=font-face-name-value><var>&lt;font-face-name&gt;</var></dfn> argument
  2387    to <code>local()</code> is a format-specific string that uniquely
  2388    identifies a single font face within a larger family. The syntax for a <a
  2389    href="#font-face-name-value"><var>&lt;font-face-name&gt;</var></a> is a
  2390    unique font face name enclosed by "local(" and ")". The name can
  2391    optionally be enclosed in quotes. If unquoted, the unquoted font family
  2392    name processing conventions apply; the name must be a sequence of
  2393    identifiers separated by whitespace which is converted to a string by
  2394    joining the identifiers together separated by a single space.
  2396   <pre>
  2397 /* regular face of Gentium */
  2398 @font-face {
  2399   font-family: MyGentium;
  2400   src: local(Gentium),   /* use locally available Gentium */
  2401        url(Gentium.ttf); /* otherwise, download it */
  2403 </pre>
  2405   <p>For OpenType and TrueType fonts, this string is used to match only the
  2406    Postscript name or the full font name in the name table of locally
  2407    available fonts. Which type of name is used varies by platform and font,
  2408    so authors should include both of these names to assure proper matching
  2409    across platforms. Platform substitutions for a given font name must not be
  2410    used.
  2412   <pre>
  2413 /* bold face of Gentium */
  2414 @font-face {
  2415   font-family: MyGentium;
  2416   src: local(Gentium Bold),   /* full font name */
  2417        local(Gentium-Bold),   /* Postscript name */
  2418        url(GentiumBold.ttf);  /* otherwise, download it */
  2419   font-weight: bold;
  2421 </pre>
  2423   <p>Just as a <code>@font-face</code> rule specifies the characteristics of
  2424    a single font within a family, the unique name used with
  2425    <code>local()</code> specifies a single font, not an entire font family.
  2426    Defined in terms of OpenType font data, the Postscript name is found in
  2427    the font's <a
  2428    href="http://www.microsoft.com/typography/otspec/name.htm">name table</a>,
  2429    in the name record with nameID = 6 (see <a href="#OPENTYPE"
  2430    rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> for more details). The
  2431    Postscript name is the commonly used key for all fonts on OSX and for
  2432    Postscript CFF fonts under Windows. The full font name (nameID = 4) is
  2433    used as a unique key for fonts with TrueType glyphs on Windows.
  2435   <p>For OpenType fonts with multiple localizations of the full font name,
  2436    the US English version is used (language ID = 0x409 for Windows and
  2437    language ID = 0 for Macintosh) or the first localization when a US English
  2438    full font name is not available (the OpenType specification recommends
  2439    that <a href="http://www.microsoft.com/typography/otspec/recom.htm">all
  2440    fonts minimally include US English names</a>). User agents that also match
  2441    other full font names, e.g. matching the Dutch name when the current
  2442    system locale is set to Dutch, are considered non-conformant. This is done
  2443    not to prefer English but to avoid matching inconsistencies across font
  2444    versions and OS localizations, since font style names (e.g. "Bold") are
  2445    frequently localized into many languages and the set of localizations
  2446    available varies widely across platform and font version. User agents that
  2447    match a concatenation of family name (nameID = 1) with style name (nameID
  2448    = 2) are considered non-conformant.
  2450   <p>This also allows for referencing faces that belong to larger families
  2451    that cannot otherwise be referenced.
  2453   <div class=example>
  2454    <p>Use a local font or reference an SVG font in another document:</p>
  2456    <pre>
  2457 @font-face {
  2458   font-family: Headline;
  2459   src: local(Futura-Medium),
  2460        url(fonts.svg#MyGeometricModern) format("svg");
  2462 </pre>
  2464    <p>Create an alias for local Japanese fonts on different platforms:</p>
  2466    <pre>
  2467 @font-face {
  2468   font-family: jpgothic;
  2469   src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic);
  2471 </pre>
  2473    <p>Reference a font face that cannot be matched within a larger family:</p>
  2475    <pre>
  2476 @font-face {
  2477   font-family: Hoefler Text Ornaments;
  2478   /* has the same font properties as Hoefler Text Regular */
  2479   src: local(HoeflerText-Ornaments);
  2481 </pre>
  2483    <p>Since localized fullnames never match, a document with the header style
  2484     rules below would always render using the default serif font, regardless
  2485     whether a particular system locale parameter is set to Finnish or not:</p>
  2487    <pre>
  2488 @font-face {
  2489   font-family: SectionHeader;
  2490   src: local("Arial Lihavoitu");  /* Finnish fullname for Arial Bold, should fail */
  2491   font-weight: bold;
  2494 h2 { font-family: SectionHeader, serif; }
  2495 </pre>
  2497    <p>A conformant user agent would never load the font ‘<code
  2498     class=css>gentium.eot</code>’ in the example below, since it is
  2499     included in the first definition of the ‘<a href="#descdef-src"><code
  2500     class=property>src</code></a>’ descriptor which is overridden by the
  2501     second definition in the same <code>@font-face</code> rule:</p>
  2503    <pre>
  2504 @font-face {
  2505   font-family: MainText;
  2506   src: url(gentium.eot); /* for use with older non-conformant user agents */
  2507   src: local("Gentium"), url(gentium.ttf);  /* Overrides src definition */
  2509 </pre>
  2510   </div>
  2512   <h3 id=font-prop-desc><span class=secno>4.4 </span>Font property
  2513    descriptors: the <a href="#descdef-font-style">font-style</a>, <a
  2514    href="#descdef-font-weight">font-weight</a>, <a
  2515    href="#descdef-font-stretch">font-stretch</a> descriptors</h3>
  2517   <table class=descdef>
  2518    <tbody>
  2519     <tr>
  2520      <td>Name:
  2522      <td><dfn id=descdef-font-style
  2523       title="font-style!!descriptor">font-style</dfn>
  2525     <tr>
  2526      <td>Value:
  2528      <td>normal | italic | oblique
  2530     <tr>
  2531      <td><em>Initial:</em>
  2533      <td>normal
  2534   </table>
  2536   <table class=descdef>
  2537    <tbody>
  2538     <tr>
  2539      <td>Name:
  2541      <td><dfn id=descdef-font-weight
  2542       title="font-weight!!descriptor">font-weight</dfn>
  2544     <tr>
  2545      <td>Value:
  2547      <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  2549     <tr>
  2550      <td><em>Initial:</em>
  2552      <td>normal
  2553   </table>
  2555   <table class=descdef>
  2556    <tbody>
  2557     <tr>
  2558      <td>Name:
  2560      <td><dfn id=descdef-font-stretch
  2561       title="font-stretch!!descriptor">font-stretch</dfn>
  2563     <tr>
  2564      <td>Value:
  2566      <td>normal | ultra-condensed | extra-condensed | condensed |
  2567       semi-condensed | semi-expanded | expanded | extra-expanded |
  2568       ultra-expanded
  2570     <tr>
  2571      <td><em>Initial:</em>
  2573      <td>normal
  2574   </table>
  2576   <p>These descriptors define the characteristics of a font face and are used
  2577    in the process of matching styles to specific faces. For a font family
  2578    defined with several <code>@font-face</code> rules, user agents can either
  2579    download all faces in the family or use these descriptors to selectively
  2580    download font faces that match actual styles used in document. The values
  2581    for these descriptors are the same as those for the corresponding font
  2582    properties except that relative keywords are not allowed, ‘<a
  2583    href="#bolder"><code class=property>bolder</code></a>’ and ‘<a
  2584    href="#lighter"><code class=property>lighter</code></a>’. If these
  2585    descriptors are omitted, initial values are assumed.
  2587   <p>The value for these font face style attributes is used in place of the
  2588    style implied by the underlying font data. This allows authors to combine
  2589    faces in flexible combinations, even in situations where the original font
  2590    data was arranged differently. User agents that implement synthetic
  2591    bolding and obliquing must only apply synthetic styling in cases where the
  2592    font descriptors imply this is needed, rather than based on the style
  2593    attributes implied by the font data.
  2595   <h3 id=unicode-range-desc><span class=secno>4.5 </span>Character range: the
  2596    <a href="#descdef-unicode-range">unicode-range</a> descriptor</h3>
  2598   <table class=descdef>
  2599    <tbody>
  2600     <tr>
  2601      <td>Name:
  2603      <td><dfn id=descdef-unicode-range>unicode-range</dfn>
  2605     <tr>
  2606      <td>Value:
  2608      <td><a href="#urange-value"><var>&lt;urange&gt;</var></a> #
  2610     <tr>
  2611      <td><em>Initial:</em>
  2613      <td>U+0-10FFFF
  2614   </table>
  2616   <p>This descriptor defines the set of Unicode codepoints that may be
  2617    supported by the font face for which it is declared. The descriptor value
  2618    is a comma-delimited list of Unicode range (<a
  2619    href="#urange-value"><var>&lt;urange&gt;</var></a>) values. The union of
  2620    these ranges defines the set of codepoints that serves as a hint for user
  2621    agents when deciding whether or not to download a font resource for a
  2622    given text run.
  2624   <p>Each <dfn id=urange-value><var>&lt;urange&gt;</var></dfn> value is a <a
  2625    href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code
  2626    title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token made up of a
  2627    "U+" or "u+" prefix followed by a codepoint range in one of the three
  2628    forms listed below. Ranges that do not fit one of the these forms are
  2629    invalid and cause the declaration to be ignored.
  2631   <dl>
  2632    <dt>single codepoint (e.g. U+416)
  2634    <dd>a valid Unicode codepoint, represented as one to six hexadecimal
  2635     digits
  2637    <dt>interval range (e.g. U+400-4ff)
  2639    <dd>represented as two hyphen-separated valid Unicode codepoints
  2640     indicating the inclusive start and end codepoints of a range
  2642    <dt>wildcard range (e.g. U+4??)
  2644    <dd>defined by the set of codepoints implied when trailing ‘<code
  2645     class=css>?</code>’ characters signify any hexadeximal digit
  2646   </dl>
  2648   <p>Individual codepoints are written using hexadecimal values that
  2649    correspond to <a href="http://www.unicode.org/charts/">Unicode character
  2650    codepoints</a>. Valid Unicode codepoint values vary between 0 and 10FFFF
  2651    inclusive. Digit values of codepoints are ASCII case-insensitive. For
  2652    interval ranges, the start and end codepoints must be valid Unicode values
  2653    and the end codepoint must be greater than or equal to the start
  2654    codepoint.
  2656   <p>Wildcard ranges specified with ‘?’ that lack an initial digit (e.g.
  2657    "U+???") are valid and equivalent to a wildcard range with an initial zero
  2658    digit (e.g. "U+0???" = "U+0000-0FFF"). Wildcard ranges that extend beyond
  2659    the range of valid Unicode codepoints are invalid. Because of this, the
  2660    maximum number of trailing ‘<code class=css>?</code>’ wildcard
  2661    characters is five, even though the <a
  2662    href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><code
  2663    title="UNICODE-RANGE token">UNICODE-RANGE</code></a> token accepts six.
  2665   <p>Within the comma-delimited list of Unicode ranges in a ‘<a
  2666    href="#descdef-unicode-range"><code
  2667    class=property>unicode-range</code></a>’ descriptor declaration, ranges
  2668    may overlap. The union of these ranges defines the set of codepoints for
  2669    which the corresponding font may be used. User agents must not download or
  2670    use the font for codepoints outside this set. User agents may normalize
  2671    the list of ranges into a list that is different but represents the same
  2672    set of codepoints.
  2674   <p>The associated font might not contain glyphs for the entire set of
  2675    codepoints defined by the ‘<a href="#descdef-unicode-range"><code
  2676    class=property>unicode-range</code></a>’ descriptor. When the font is
  2677    used the effective <a href="#character-map"><em>character map</em></a> is
  2678    the intersection of the codepoints defined by ‘<a
  2679    href="#descdef-unicode-range"><code
  2680    class=property>unicode-range</code></a>’ with the font's <a
  2681    href="#character-map"><em>character map</em></a>. This allows authors to
  2682    define supported ranges in terms of broad ranges without worrying about
  2683    the precise codepoint ranges supported by the underlying font.
  2685   <h3 id=composite-fonts><span class=secno>4.6 </span>Using character ranges
  2686    to define composite fonts</h3>
  2688   <p>Multiple <code>@font-face</code> rules with different unicode ranges for
  2689    the same family and style descriptor values can be used to create
  2690    composite fonts that mix the glyphs from different fonts for different
  2691    scripts. This can be used to combine fonts that only contain glyphs for a
  2692    single script (e.g. Latin, Greek, Cyrillic) or it can be used by authors
  2693    as a way of segmenting a font into fonts for commonly used characters and
  2694    less frequently used characters. Since the user agent will only pull down
  2695    the fonts it needs this helps reduce page bandwidth.
  2697   <p>If the unicode ranges overlap for a set of <code>@font-face</code> rules
  2698    with the same family and style descriptor values, the rules are ordered in
  2699    the reverse order they were defined; the last rule defined is the first to
  2700    be checked for a given character.
  2702   <p>Example ranges for specific languages or characters:
  2704   <dl>
  2705    <dt>unicode-range: U+A5;
  2707    <dd>a single code point, the yen/yuan symbol
  2709    <dt>unicode-range: U+0-7F;
  2711    <dd>code range for basic ASCII characters
  2713    <dt>unicode-range: U+590-5ff;
  2715    <dd>code range for Hebrew characters
  2717    <dt>unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;
  2719    <dd>code range for Japanese kanji, hiragana and katakana characters plus
  2720     yen/yuan symbol
  2721   </dl>
  2723   <div class=example>
  2724    <p>The BBC provides news services in a wide variety of languages, many
  2725     that are not well supported across all platforms. Using an
  2726     <code>@font-face</code> rule, the BBC could provide a font for any of
  2727     these languages, as it already does via a manual font download.</p>
  2729    <pre>
  2730 @font-face {
  2731   font-family: BBCBengali;
  2732   src: url(fonts/BBCBengali.ttf) format("opentype");
  2733   unicode-range: U+00-FF, U+980-9FF;
  2735 </pre>
  2736   </div>
  2738   <div class=example>
  2739    <p>Technical documents often require a wide range of symbols. The STIX
  2740     Fonts project is one project aimed at providing fonts to support a wide
  2741     range of technical typesetting in a standardized way. The example below
  2742     shows the use of a font that provides glyphs for many of the mathematical
  2743     and technical symbol ranges within Unicode:</p>
  2745    <pre>
  2746 @font-face {
  2747   font-family: STIXGeneral;
  2748   src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
  2749   unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
  2751 </pre>
  2752   </div>
  2754   <div class=example>
  2755    <p>This example shows how an author can override the glyphs used for Latin
  2756     characters in a Japanese font with glyphs from a different font. The
  2757     first rule specifies no range so it defaults to the entire range. The
  2758     range specified in the second rule overlaps but takes precedence because
  2759     it is defined later.</p>
  2761    <pre>
  2762 @font-face {
  2763   font-family: JapaneseWithGentium;
  2764   src: local(MSMincho);
  2765   /* no range specified, defaults to entire range */
  2768 @font-face {
  2769   font-family: JapaneseWithGentium;
  2770   src: url(../fonts/Gentium.ttf);
  2771   unicode-range: U+0-2FF;
  2773 </pre>
  2774   </div>
  2776   <div class=example>
  2777    <p>Consider a family constructed to optimize bandwidth by separating out
  2778     Latin, Japanese and other characters into different font files:</p>
  2780    <pre>
  2781 /* fallback font - size: 4.5MB */
  2782 @font-face {
  2783   font-family: DroidSans;
  2784   src: url(DroidSansFallback.ttf);
  2785   /* no range specified, defaults to entire range */
  2788 /* Japanese glyphs - size: 1.2MB */
  2789 @font-face {
  2790   font-family: DroidSans;
  2791   src: url(DroidSansJapanese.ttf);
  2792   unicode-range: U+3000-9FFF, U+ff??;
  2795 /* Latin, Greek, Cyrillic along with some
  2796    punctuation and symbols - size: 190KB */
  2797 @font-face {
  2798   font-family: DroidSans;
  2799   src: url(DroidSans.ttf);
  2800   unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
  2802 </pre>
  2804    <p>For simple Latin text, only the font for Latin characters is
  2805     downloaded:</p>
  2807    <pre>
  2808 body { font-family: DroidSans; }
  2810 &lt;p>This is that&lt;/p>
  2811 </pre>
  2813    <p>In this case the user agent first checks the unicode-range for the font
  2814     containing Latin characters (DroidSans.ttf). Since all the characters
  2815     above are in the range U+0-5FF, the user agent downloads the font and
  2816     renders the text with that font.</p>
  2818    <p>Next, consider text that makes use of an arrow character (⇨):</p>
  2820    <pre>
  2821 &lt;p>This &amp;#x21e8; that&lt;p>
  2822 </pre>
  2824    <p>The user agent again first checks the unicode-range of the font
  2825     containing Latin characters. Since U+2000-2300 includes the arrow code
  2826     point (U+21E8), the user agent downloads the font. For this character
  2827     however the Latin font does not have a matching glyph, so the effective
  2828     unicode-range used for font matching excludes this code point. Next, the
  2829     user agent evaluates the Japanese font. The unicode-range for the
  2830     Japanese font, U+3000-9FFF and U+ff??, does not include U+21E8, so the
  2831     user agent does not download the Japanese font. Next the fallback font is
  2832     considered. The <code>@font-face</code> rule for the fallback font does
  2833     not define unicode-range so its value defaults to the range of all
  2834     Unicode code points. The fallback font is downloaded and used to render
  2835     the arrow character.</p>
  2836   </div>
  2838   <h3 id=font-rend-desc><span class=secno>4.7 </span>Font features: the <a
  2839    href="#descdef-font-variant">font-variant</a> and <a
  2840    href="#descdef-font-feature-settings">font-feature-settings</a>
  2841    descriptors</h3>
  2843   <table class=descdef>
  2844    <tbody>
  2845     <tr>
  2846      <td>Name:
  2848      <td><dfn id=descdef-font-variant
  2849       title="font-variant!!descriptor">font-variant</dfn>
  2851     <tr>
  2852      <td>Value:
  2854      <td><a href="#font-variant-normal-value"
  2855       title="normal!!font-variant">normal</a> | <a
  2856       href="#font-variant-none-value" title="none!!font-variant">none</a> | [
  2857       <a href="#common-lig-values"><var>&lt;common-lig-values&gt;</var></a>
  2858       || <a
  2859       href="#discretionary-lig-values"><var>&lt;discretionary-lig-values&gt;</var></a>
  2860       || <a
  2861       href="#historical-lig-values"><var>&lt;historical-lig-values&gt;</var></a>
  2862       || <a
  2863       href="#contextual-alt-values"><var>&lt;contextual-alt-values&gt;</var></a>
  2864       || <a href="#stylistic"><var
  2865       title=stylistic>stylistic(&lt;feature-value-name&gt;)</var></a> || <a
  2866       href="#historical-forms"><var>historical-forms</var></a> || <a
  2867       href="#styleset"><var
  2868       title=styleset>styleset(&lt;feature-value-name&gt; #)</var></a> || <a
  2869       href="#character-variant"><var
  2870       title=character-variant>character-variant(&lt;feature-value-name&gt;
  2871       #)</var></a> || <a href="#swash"><var
  2872       title=swash>swash(&lt;feature-value-name&gt;)</var></a> || <a
  2873       href="#ornaments"><var
  2874       title=ornaments>ornaments(&lt;feature-value-name&gt;)</var></a> || <a
  2875       href="#annotation"><var
  2876       title=annotation>annotation(&lt;feature-value-name&gt;)</var></a> || [
  2877       <a href="#small-caps"><i>small-caps</i></a> | <a
  2878       href="#all-small-caps"><i>all-small-caps</i></a> | <a
  2879       href="#petite-caps"><i>petite-caps</i></a> | <a
  2880       href="#all-petite-caps"><i>all-petite-caps</i></a> | <a
  2881       href="#unicase"><i>unicase</i></a> | <a
  2882       href="#titling-caps"><i>titling-caps</i></a> ] || <a
  2883       href="#numeric-figure-values"><var>&lt;numeric-figure-values&gt;</var></a>
  2884       || <a
  2885       href="#numeric-spacing-values"><var>&lt;numeric-spacing-values&gt;</var></a>
  2886       || <a
  2887       href="#numeric-fraction-values"><var>&lt;numeric-fraction-values&gt;</var></a>
  2888       || <a href="#ordinal"><i>ordinal</i></a> || <a
  2889       href="#slashed-zero"><i>slashed-zero</i></a> || <a
  2890       href="#east-asian-variant-values"><var>&lt;east-asian-variant-values&gt;</var></a>
  2891       || <a
  2892       href="#east-asian-width-values"><var>&lt;east-asian-width-values&gt;</var></a>
  2893       || <a href="#ruby"><i>ruby</i></a> ]
  2895     <tr>
  2896      <td><em>Initial:</em>
  2898      <td>normal
  2899   </table>
  2901   <table class=descdef>
  2902    <tbody>
  2903     <tr>
  2904      <td>Name:
  2906      <td><dfn id=descdef-font-feature-settings
  2907       title="font-feature-settings!!descriptor">font-feature-settings</dfn>
  2909     <tr>
  2910      <td>Value:
  2912      <td><a href="#font-feature-settings-normal-value"
  2913       title="normal!!font-feature-settings">normal</a> | <a
  2914       href="#feature-tag-value"><var>&lt;feature-tag-value&gt;</var></a> #
  2916     <tr>
  2917      <td><em>Initial:</em>
  2919      <td>normal
  2920   </table>
  2922   <p>These descriptors define initial settings that apply when the font
  2923    defined by an <code>@font-face</code> rule is rendered. They do not affect
  2924    font selection. Values are identical to those defined for the
  2925    corresponding <a href="#propdef-font-variant"
  2926    title="font-variant!!property">‘<code
  2927    class=property>font-variant</code>’</a> and <a
  2928    href="#propdef-font-feature-settings"
  2929    title="font-feature-settings!!property">‘<code
  2930    class=property>font-feature-settings</code>’</a> properties defined
  2931    below except that the value ‘<code class=property>inherit</code>’ is
  2932    omitted. When multiple font feature descriptors or properties are used,
  2933    the cumulative effect on text rendering is detailed in the section <a
  2934    href="#font-feature-resolution">Font Feature Resolution</a> below. In
  2935    cases where specific values define synthesized fallback for certain <a
  2936    href="#propdef-font-variant" title="font-variant!!property">‘<code
  2937    class=property>font-variant</code>’</a> subproperties, the same
  2938    synthesized fallback applies when used within those values are used with
  2939    the <a href="#descdef-font-style" title="font-style!!descriptor">‘<code
  2940    class=property>font-variant</code>’</a> descriptor.
  2942   <h3 id=font-face-loading><span class=secno>4.8 </span>Font loading
  2943    guidelines</h3>
  2945   <p>The <code>@font-face</code> rule is designed to allow lazy loading of
  2946    font resources that are only downloaded when used within a document. A
  2947    stylesheet can include <code>@font-face</code> rules for a library of
  2948    fonts of which only a select set are used; user agents must only download
  2949    those fonts that are referred to within the style rules applicable to a
  2950    given page. User agents that download all fonts defined in
  2951    <code>@font-face</code> rules without considering whether those fonts are
  2952    in fact used within a page are considered non-conformant. In cases where a
  2953    font might be downloaded in character fallback cases, user agents may
  2954    download a font if it's listed in a font list but is not actually used for
  2955    a given text run.
  2957   <pre>
  2958 @font-face {
  2959   font-family: GeometricModern;
  2960   src: url(font.ttf);
  2963 p {
  2964   /* font will be downloaded for pages with p elements */
  2965   font-family: GeometricModern, sans-serif;
  2968 h2 {
  2969   /* font may be downloaded for pages with h2 elements, even if Futura is available locally */
  2970   font-family: Futura, GeometricModern, sans-serif;
  2972 </pre>
  2974   <p>In cases where textual content is loaded before downloadable fonts are
  2975    available, user agents may render text as it would be rendered if
  2976    downloadable font resources are not available or they may render text
  2977    transparently with fallback fonts to avoid a flash of text using a
  2978    fallback font. In cases where the font download fails user agents must
  2979    display text, simply leaving transparent text is considered non-conformant
  2980    behavior. Authors are advised to use fallback fonts in their font lists
  2981    that closely match the vertical metrics of the downloadable fonts to avoid
  2982    large page reflows where possible.
  2984   <h3 id=same-origin-restriction><span class=secno>4.9 </span>Same-origin
  2985    restriction for fonts</h3>
  2987   <h4 id=default-same-origin-restriction><span class=secno>4.9.1
  2988    </span>Default same-origin restriction</h4>
  2989   <!-- TPAC 2011 Resolution to require same-origin restriction for loading fonts:
  2990   http://lists.w3.org/Archives/Public/www-style/2011Nov/0711.html
  2991   http://www.w3.org/2011/10/31-webapps-minutes.html#item02
  2992 -->
  2994   <p>User agents must implement a same-origin restriction when loading fonts
  2995    via the <code>@font-face</code> mechanism. This restriction limits the
  2996    loading of fonts for a given document to fonts loaded from the same
  2997    origin. Fonts can only be loaded via the same host, port, and method
  2998    combination as the containing document, using the <a
  2999    href="http://www.w3.org/TR/html5/browsers.html#origin">origin matching
  3000    algorithm</a> described in the <a href="#HTML5"
  3001    rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> specification. The origin of
  3002    the stylesheet containing <code>@font-face</code> rules is not used when
  3003    deciding whether a font is same origin or not, only the origin of the
  3004    containing document is used. The restriction applies to all font types.
  3006   <p>Given a document located at http://example.com/page.html, fonts defined
  3007    with ‘<a href="#descdef-src"><code class=property>src</code></a>’
  3008    definitions considered cross origin must not be loaded:
  3010   <pre>
  3011 /* same origin (i.e. domain, protocol, port match document) */
  3012 src: url(fonts/simple.ttf);
  3013 src: url(//fonts/simple.ttf);
  3015 /* cross origin, different protocol */
  3016 src: url(https://example.com/fonts/simple.ttf);
  3018 /* cross origin, different domain */
  3019 src: url(http://another.example.com/fonts/simple.ttf);
  3020 </pre>
  3022   <h4 id=allowing-cross-origin-font-loading><span class=secno>4.9.2
  3023    </span>Allowing cross-origin font loading</h4>
  3025   <p>User agents must also implement the ability to relax this restriction
  3026    using cross-site origin controls <a href="#CORS"
  3027    rel=biblioentry>[CORS]<!--{{!CORS}}--></a> for fonts loaded via HTTP.
  3028    Sites can explicitly allow cross-site downloading of font data using the
  3029    <code>Access-Control-Allow-Origin</code> HTTP header. For other protocols,
  3030    no explicit relaxation mechanism is defined or required.
  3032   <p>For font loads over HTTP, cross-origin requests must be made with the
  3033    following parameter settings which are used in conjunction with the <a
  3034    href="http://www.w3.org/TR/cors/#cross-origin-request-0"> <em>cross-origin
  3035    request algorithm</em></a> <a href="#CORS"
  3036    rel=biblioentry>[CORS]<!--{{!CORS}}--></a>:
  3038   <ul>
  3039    <li><em>request URL</em> — the URL of the font resource in the <a
  3040     href="#descdef-src"><code>src</code></a> descriptor
  3042    <li><em>request method</em> — GET
  3044    <li><em>author request headers</em> — none
  3046    <li><em>request entity body</em> — empty
  3048    <li><em>source origin</em> — the origin of the page which linked to the
  3049     stylesheet
  3051    <li><em>manual redirect flag</em> — false
  3053    <li><em>omit credentials flag</em> — true
  3055    <li><em>force preflight flag</em> — false
  3056   </ul>
  3058   <h2 id=font-matching-algorithm><span class=secno>5 </span>Font Matching
  3059    Algorithm</h2>
  3061   <p>The algorithm below describes how fonts are associated with individual
  3062    runs of text. For each character in the run a font family is chosen and a
  3063    particular font face is selected containing a glyph for that character.
  3065   <h3 id=font-family-casing><span class=secno>5.1 </span>Case sensitivity of
  3066    font family names</h3>
  3068   <p>As part of the font matching algorithm outlined below, user agents must
  3069    match font family names used in style rules with actual font family names
  3070    contained in fonts available in a given environment or defined via
  3071    <code>@font-face</code> rules. User agents must match these names case
  3072    insensitively, using the "Default Caseless Matching" algorithm outlined in
  3073    the Unicode specification <a href="#UNICODE6"
  3074    rel=biblioentry>[UNICODE6]<!--{{!UNICODE6}}--></a>. This algorithm is
  3075    detailed in section 3.13 entitled "Default Case Algorithms". Specifically,
  3076    the algorithm must be applied without normalizing the strings involved and
  3077    without applying any language-specific tailorings. The case folding method
  3078    specified by this algorithm uses the case mappings with status field
  3079    ‘<code class=property>C</code>’ or ‘<code class=property>F</code>’
  3080    in the CaseFolding.txt file of the Unicode Character Database.
  3082   <p class=note> Implementors should take care to verify that a given
  3083    caseless string comparison implementation uses this precise algorithm and
  3084    not assume that a given platform string matching routine follows it, as
  3085    many of these have locale-specific behavior or use some level of string
  3086    normalization.
  3088   <p class=note> For authors this means that font family names are matched
  3089    case insensitively, whether those names exist in a platform font or in the
  3090    <code>@font-face</code> rules contained in a stylesheet. Authors should
  3091    take care to ensure that names use a character sequence consistent with
  3092    the actual font family name, particularly when using combining characters
  3093    such as diacritical marks. For example, a family name that contains an
  3094    uppercase A (U+0041) followed by a combining ring (U+030A) will
  3095    <strong>not</strong> match a name that looks identical but which uses the
  3096    precomposed lowercase a-ring character (U+00E5) instead of the combining
  3097    sequence.
  3099   <h3 id=font-style-matching><span class=secno>5.2 </span>Matching font
  3100    styles</h3>
  3102   <p>The procedure for choosing fonts consists of iterating over the font
  3103    families determined by the font-family property, selecting a font face
  3104    with the appropriate style based on other font properties and then
  3105    determining whether a glyph exists for a given character. This is done
  3106    using the <dfn id=character-map>character map</dfn> of the font, data
  3107    which maps characters to the default glyph for that character. Codepoint
  3108    sequences consisting of a base character followed by a sequence of
  3109    combining characters are treated slightly differently, see the section on
  3110    <a href="#cluster-matching">cluster matching</a> below.
  3112   <p>For this procedure, the <dfn id=default-face>default face</dfn> for a
  3113    given font family is defined to be the face that would be selected if all
  3114    font style properties were set to their initial value.
  3116   <ol id=fontmatchingalg>
  3117    <li>Using the computed font property values for a given element, the user
  3118     agent starts with the first family name in the fontlist specified by the
  3119     <a href="#propdef-font-family" title="font-family!!property">‘<code
  3120     class=property>font-family</code>’</a> property.
  3122    <li>If the family name is unquoted and is a generic family name, the user
  3123     agent looks up the appropriate font family name to be used. User agents
  3124     may choose the generic font family to use based on the language of the
  3125     containing element or the Unicode range of the character.
  3127    <li>For other family names, the user agent attempts to find the family
  3128     name among fonts defined via <code>@font-face</code> rules and then among
  3129     available system fonts, matching names with a case-insensitive comparison
  3130     as outlined <a href="#font-family-casing">in the section above</a>. On
  3131     systems containing fonts with multiple localized font family names, user
  3132     agents must match any of these names independent of the underlying system
  3133     locale or platform API used. If the font resources defined for a given
  3134     face in an @font-face rule are either not available or contain invalid
  3135     font data, then the face should be treated as not present in the family.
  3136     If no faces are present for a family defined via @font-face rules, the
  3137     family should be treated as missing; matching a platform font with the
  3138     same name must not occur in this case.
  3140    <li>If a font family match occurs, the user agent assembles the set of
  3141     font faces in that family and then narrows the set to a single face using
  3142     other font properties in the order given below:
  3143     <ol id=fontstylematchingalg>
  3144      <li><a href="#propdef-font-stretch"
  3145       title="font-stretch!!property">‘<code
  3146       class=property>font-stretch</code>’</a> is tried first. If the
  3147       matching set contains faces with width values matching the <a
  3148       href="#propdef-font-stretch" title="font-stretch!!property">‘<code
  3149       class=property>font-stretch</code>’</a> value, faces with other width
  3150       values are removed from the matching set. If there is no face that
  3151       exactly matches the width value the nearest width is used instead. If
  3152       the value of <a href="#propdef-font-stretch"
  3153       title="font-stretch!!property">‘<code
  3154       class=property>font-stretch</code>’</a> is ‘<a href="#normal"><code
  3155       class=property>normal</code></a>’ or one of the condensed values,
  3156       narrower width values are checked first, then wider values. If the
  3157       value of <a href="#propdef-font-stretch"
  3158       title="font-stretch!!property">‘<code
  3159       class=property>font-stretch</code>’</a> is one of the expanded
  3160       values, wider values are checked first, followed by narrower values.
  3161       Once the closest matching width has been determined by this process,
  3162       faces with other widths are removed from the matching set.
  3164      <li><a href="#propdef-font-style" title="font-style!!property">‘<code
  3165       class=property>font-style</code>’</a> is tried next. If the value of
  3166       <a href="#propdef-font-style" title="font-style!!property">‘<code
  3167       class=property>font-style</code>’</a> is ‘<a href="#italic"><code
  3168       class=property>italic</code></a>’, italic faces are checked first,
  3169       then oblique, then normal faces. If the value is ‘<a
  3170       href="#oblique"><code class=property>oblique</code></a>’, oblique
  3171       faces are checked first, then italic faces and then normal faces. If
  3172       the value is ‘<a href="#normal"><code
  3173       class=property>normal</code></a>’, normal faces are checked first,
  3174       then oblique faces, then italic faces. Faces with other style values
  3175       are excluded from the matching set. User agents are permitted to
  3176       distinguish between italic and oblique faces within platform font
  3177       families but this is not required, they may treat all italic or oblique
  3178       faces as italic faces. However, within font families defined via
  3179       <code>@font-face</code> rules, italic and oblique faces must be
  3180       distinguished using the value of the <a href="#descdef-font-style"
  3181       title="font-style!!descriptor">‘<code
  3182       class=property>font-style</code>’</a> descriptor.
  3184      <li><a href="#propdef-font-weight"
  3185       title="font-weight!!property">‘<code
  3186       class=property>font-weight</code>’</a> is matched next, it will
  3187       always reduce the matching set to a single font face. If bolder/lighter
  3188       relative weights are used, the effective weight is calculated based on
  3189       the inherited weight value, as described in the definition of the <a
  3190       href="#propdef-font-weight" title="font-weight!!property">‘<code
  3191       class=property>font-weight</code>’</a> property. Given the desired
  3192       weight and the weights of faces in the matching set after the steps
  3193       above, if the desired weight is available that face matches. Otherwise,
  3194       a weight is chosen using the rules below:
  3195       <ul>
  3196        <li>If the desired weight is less than 400, weights below the desired
  3197         weight are checked in descending order followed by weights above the
  3198         desired weight in ascending order until a match is found.
  3200        <li>If the desired weight is greater than 500, weights above the
  3201         desired weight are checked in ascending order followed by weights
  3202         below the desired weight in descending order until a match is found.
  3204        <li>If the desired weight is 400, 500 is checked first and then the
  3205         rule for desired weights less than 400 is used.
  3207        <li>If the desired weight is 500, 400 is checked first and then the
  3208         rule for desired weights less than 400 is used.
  3209       </ul>
  3211      <li><span class=property>‘<a href="#propdef-font-size"><code
  3212       class=property>font-size</code></a>’</span> must be matched within a
  3213       UA-dependent margin of tolerance. (Typically, sizes for scalable fonts
  3214       are rounded to the nearest whole pixel, while the tolerance for
  3215       bitmapped fonts could be as large as 20%.) Further computations, e.g.,
  3216       by ‘<code class=property>em</code>’ values in other properties, are
  3217       based on the <span class=property>‘<a href="#propdef-font-size"><code
  3218       class=property>font-size</code></a>’</span> value that is used, not
  3219       the one that is specified.
  3220     </ol>
  3222    <li>
  3223     <p>If no matching face exists or the matched face does not contain a
  3224      glyph for the character to be rendered, the next family name is selected
  3225      and the previous two steps repeated. Glyphs from other faces in the
  3226      family are not considered. The only exception is that user agents may
  3227      optionally substitute a synthetic version of the <a
  3228      href="#default-face"><em>default face</em></a> if that face supports a
  3229      given glyph (e.g. a synthetic italic version of the regular face may be
  3230      used if the italic face doesn't support glyphs for Arabic).</p>
  3231     <!-- resolution on the above: http://lists.w3.org/Archives/Public/www-style/2012Nov/0292.html -->
  3233     <p>If the matched font is defined via an <code>@font-face</code> rule and
  3234      needs to be downloaded, the font resource is downloaded. While the
  3235      download occurs, the user agent can either wait until the font is
  3236      downloaded or render once with substituted font metrics and render again
  3237      once the font is downloaded.</p>
  3239    <li>If there are no more font families to be evaluated and no matching
  3240     face has been found, then the user agent performs a <em>system font
  3241     fallback</em> procedure to find the best match for the character to be
  3242     rendered. The result of this procedure may vary across user agents.
  3244    <li>If a particular character cannot be displayed using any font, the user
  3245     agent should indicate by some means that a character is not being
  3246     displayed, displaying either a symbolic representation of the missing
  3247     glyph (e.g. using a <a
  3248     href="http://en.wikipedia.org/wiki/Last_resort_font">Last Resort
  3249     Font</a>) or using the missing character glyph from a default font.
  3250   </ol>
  3252   <h3 id=cluster-matching><span class=secno>5.3 </span>Cluster matching</h3>
  3254   <p>When text contains characters such as combining diacritics, ideally the
  3255    base character should be rendered using the same font as the diacritic,
  3256    this assures proper placement of the diacritic. For this reason, the font
  3257    matching algorithm for clusters is more specialized than the general case
  3258    of matching a single character by itself. For sequences containing
  3259    variation selectors, which indicate the precise glyph to be used for a
  3260    given character, user agents always attempt system font fallback to find
  3261    the appropriate glyph before using the default glyph of the base
  3262    character.
  3264   <p>A font is considered to <em>support</em> a given character if (1) the
  3265    character is contained in the font's <a
  3266    href="#character-map"><em>character map</em></a> and (2) if required by
  3267    the containing script, shaping information is available for that
  3268    character. Some legacy fonts may include a given character in the <a
  3269    href="#character-map"><em>character map</em></a> but lack the shaping
  3270    information (e.g. <a
  3271    href="http://www.microsoft.com/typography/otspec/ttochap1.htm">OpenType
  3272    layout tables</a> or <a
  3273    href="http://scripts.sil.org/cms/scripts/page.php?site_id=projects&amp;item_id=graphite_techAbout">Graphite
  3274    tables</a>) necessary for correctly rendering text runs containing that
  3275    character.
  3277   <p>A sequence of codepoints containing combining diacritics or other
  3278    modifiers is termed a grapheme cluster (see <a href="#CSS3TEXT"
  3279    rel=biblioentry>[CSS3TEXT]<!--{{CSS3TEXT}}--></a> for a more complete
  3280    description). For a given cluster containing a base character, <em>b</em>
  3281    and a sequence of combining characters <em>c1, c2…</em>, the entire
  3282    cluster is matched using these steps:
  3284   <ol>
  3285    <li>For each family in the font list, a face is chosen using the style
  3286     selection rules defined in the previous section.
  3287     <ol>
  3288      <li>If all characters in the sequence <em>b + c1 + c2 …</em> are
  3289       completely supported by the font, select this font for the sequence.
  3291      <li>If a sequence of multiple codepoints is canonically equivalent to a
  3292       single character and the font supports that character, select this font
  3293       for the sequence.
  3294     </ol>
  3296    <li>If no font was found in the font list in step 1:
  3297     <ol>
  3298      <li>If <em>c1</em> is a variation selector, system fallback must be used
  3299       to find a font that supports the full sequence of <em>b + c1</em>. If
  3300       no font on the system supports the full sequence, match the single
  3301       character <em>b</em> using the normal procedure for matching single
  3302       characters and ignore the variation selector. Note: a sequence with
  3303       more than one variation selector is treated as an encoding error and
  3304       the trailing selectors are ignored.
  3306      <li>Otherwise, the user agent may optionally use system font fallback to
  3307       match a font that supports the entire cluster.
  3308     </ol>
  3310    <li>If no font is found in step 2, use the matching sequence from step 1
  3311     to determine the longest sequence that is completely matched by a font in
  3312     the font list and attempt to match the remaining combining characters
  3313     separately using the rules for single characters.
  3314   </ol>
  3316   <h3 id=char-handling-issues><span class=secno>5.4 </span>Character handling
  3317    issues</h3>
  3319   <p>The procedure above is always performed on text runs containing Unicode
  3320    characters, documents using legacy encodings are assumed to have been
  3321    transcoded before matching fonts. For fonts containing <a
  3322    href="#character-map"><em title="character map">character maps</em></a>
  3323    for both legacy encodings and Unicode, the contents of the legacy encoding
  3324    <a href="#character-map"><em>character map</em></a> must have no effect on
  3325    the results of the font matching process.
  3327   <p>The font matching process does not assume that text runs are in either
  3328    normalized or denormalized form (see <a href="#CHARMOD-NORM"
  3329    rel=biblioentry>[CHARMOD-NORM]<!--{{CHARMOD-NORM}}--></a> for more
  3330    details). Layout engines often convert base character plus combining
  3331    character sequences into precomposed characters if they exist. The font
  3332    matching algorithm outlined here supports both ways and fonts can
  3333    generally support either but variations can occur. Authors should always
  3334    tailor their choice of fonts to their content, including whether that
  3335    content contains normalized or denormalized character streams.
  3337   <p>If a given character is a Private-Use Area Unicode codepoint and none of
  3338    the fonts in the fontlist contain a glyph for that codepoint, user agents
  3339    must display some form of missing glyph symbol for that character rather
  3340    than attempting system font fallback for that codepoint. When matching the
  3341    replacement character U+FFFD, user agents may skip the font matching
  3342    process and immediately display some form of missing glyph symbol, they
  3343    are not required to display the glyph from the font that would be selected
  3344    by the font matching process.
  3346   <p>In general, the fonts for a given family will all have the same or
  3347    similar <a href="#character-map"><em title="character map">character
  3348    maps</em></a>. The process outlined here is designed to handle even font
  3349    families containing faces with widely variant <a href="#character-map"><em
  3350    title="character map">character maps</em></a>. However, authors are
  3351    cautioned that the use of such families can lead to unexpected results.
  3353   <p>Optimizations of this process are allowed provided that an
  3354    implementation behaves as if the algorithm had been followed exactly.
  3355    Matching occurs in a well-defined order to insure that the results are as
  3356    consistent as possible across user agents, given an identical set of
  3357    available fonts and rendering technology.
  3359   <h3 id=font-matching-changes><span class=secno>5.5 </span>Font matching
  3360    changes since CSS 2.1</h3>
  3362   <p>The algorithm above is different from CSS 2.1 in a number of key places.
  3363    These changes were made to better reflect actual font matching behavior
  3364    across user agent implementations.
  3366   <p>Differences compared to the font matching algorithm in CSS 2.1:
  3368   <ul>
  3369    <li>The algorithm includes font-stretch matching.
  3371    <li>All possible font-style matching scenarios are delineated.
  3373    <li>Small-caps fonts are not matched as part of the font matching process,
  3374     they are now handled via font features.
  3376    <li>Unicode variation selector matching is required.
  3378    <li>Cluster sequences are matched as a unit.
  3379   </ul>
  3381   <h3 id=font-matching-examples><span class=secno>5.6 </span>Font matching
  3382    examples</h3>
  3384   <div class=example>
  3385    <p>It's useful to note that the CSS selector syntax may be used to create
  3386     language-sensitive typography. For example, some Chinese and Japanese
  3387     characters are unified to have the same Unicode code point, although the
  3388     abstract glyphs are not the same in the two languages.
  3390    <pre>*:lang(ja-jp) { font: 900 14pt/16pt &quot;Heisei Mincho W9&quot;, serif; }
  3391 *:lang(zh-tw) { font: 800 14pt/16.5pt &quot;Li Sung&quot;, serif; }
  3392 </pre>
  3394    <p>This selects any element that has the given language - Japanese or
  3395     Traditional Chinese - and uses the appropriate font.
  3396   </div>
  3398   <h2 id=font-rend-props><span class=secno>6 </span>Font Feature Properties</h2>
  3400   <p>Modern font technologies support a variety of advanced typographic and
  3401    language-specific font features. Using these features, a single font can
  3402    provide glyphs for a wide range of ligatures, contextual and stylistic
  3403    alternates, tabular and old-style figures, small capitals, automatic
  3404    fractions, swashes, and alternates specific to a given language. To allow
  3405    authors control over these font capabilities, the font-variant property
  3406    has been expanded for CSS3, it now functions as a shorthand for a set of
  3407    properties that provide control over stylistic font features.
  3409   <h3 id=glyph-selection-positioning><span class=secno>6.1 </span>Glyph
  3410    selection and positioning</h3>
  3412   <p>Simple fonts used for displaying Latin text use a very basic processing
  3413    model, fonts contain a <a href="#character-map"><em>character map</em></a>
  3414    which maps a given character to a glyph for that character. Glyphs for
  3415    subsequent characters are simply placed next in line along a run of text.
  3416    Font formats such as OpenType and AAT (Apple Advanced Typography) use a
  3417    richer processing model, the glyph for a given character can be chosen and
  3418    positioned not just based on a single character, but also based on
  3419    surrounding characters along with the language, script, and features
  3420    enabled for the text. Font features may be required for specific scripts,
  3421    or recommended as enabled by default or they may be stylistic features
  3422    meant to be used under author control.
  3424   <p>For a good visual overview of these features, see the <a
  3425    href="#OPENTYPE-FONT-GUIDE"
  3426    rel=biblioentry>[OPENTYPE-FONT-GUIDE]<!--{{OPENTYPE-FONT-GUIDE}}--></a>.
  3427    For a detailed description of glyph processing for OpenType fonts, see <a
  3428    href="#WINDOWS-GLYPH-PROC"
  3429    rel=biblioentry>[WINDOWS-GLYPH-PROC]<!--{{WINDOWS-GLYPH-PROC}}--></a>.
  3431   <p>Stylistic font features can be classified into two broad categories,
  3432    ones that affect the harmonization of glyph shapes with the surrounding
  3433    context, such as kerning and ligature features, and those such as the
  3434    small-caps, subscript/superscript and alternate features that affect shape
  3435    selection.
  3437   <p>The subproperties of font-variant listed below are used to control these
  3438    stylistic font features; they do not control features that are required
  3439    for displaying certain scripts, such as the OpenType features used when
  3440    displaying Arabic or Indic language text. They affect glyph selection and
  3441    positioning, they do not affect font selection as described in the font
  3442    matching section (except in cases required for compatibility with CSS
  3443    2.1).
  3445   <p>To assure consistent behavior across user agents, the equivalent
  3446    OpenType property settings are listed for individual properties and must
  3447    be considered normative. When using other font formats these should be
  3448    used as a guideline to map CSS font feature property values to specific
  3449    font features.
  3451   <h3 id=language-specific-support><span class=secno>6.2
  3452    </span>Language-specific display</h3>
  3454   <p>OpenType also supports language-specific glyph selection and
  3455    positioning, so that text can be displayed correctly in cases where the
  3456    language dictates a specific display behavior. Languages often share a
  3457    common script but the shape of certain letters may vary across those
  3458    languages, such as the variations in certain Cyrillic letters used in
  3459    Russian and Bulgarian text. In Latin text, it's common to render "fi" with
  3460    an explicit fi-ligature that lacks a dot on the "i". However, in languages
  3461    such as Turkish which uses both a dotted-i and a dotless-i, it's important
  3462    to not use this ligature or use a specialized version that contains a dot
  3463    over the "i". The example below shows language-specific variations based
  3464    on stylistic traditions found in Spanish, Italian and French orthography:
  3466   <div class=featex><img alt="language specific forms, spanish"
  3467    src=locl-1.png></div>
  3469   <div class=featex><img alt="language specific forms, italian"
  3470    src=locl-2.png></div>
  3472   <div class=featex><img alt="language specific forms, french"
  3473    src=locl-3.png></div>
  3475   <p>If the content language of the element is known, according to the rules
  3476    of the <a
  3477    href="http://www.w3.org/TR/CSS21/conform.html#doclanguage">document
  3478    language</a>, user agents are required to infer the OpenType language
  3479    system from the content language and use that when selecting and
  3480    positioning glyphs using an OpenType font.
  3482   <p>For OpenType fonts, in some cases it may be necessary to explicitly
  3483    declare the OpenType language to be used, for example when displaying text
  3484    in a given language that uses the typographic conventions of another
  3485    language or when the font does not explicitly support a given language but
  3486    supports a language that shares common typographic conventions. The ‘<a
  3487    href="#propdef-font-language-override"><code
  3488    class=property>font-language-override</code></a>’ property is used for
  3489    this purpose.</p>
  3490   <!-- prop: font-kerning -->
  3492   <h3 id=font-kerning-prop><span class=secno>6.3 </span>Kerning: the <a
  3493    href="#propdef-font-kerning">font-kerning</a> property</h3>
  3495   <table class=propdef id=namefont-kerningvalueauto-normal-noneini>
  3496    <tbody>
  3497     <tr>
  3498      <td>Name:
  3500      <td><dfn id=propdef-font-kerning>font-kerning</dfn>
  3502     <tr>
  3503      <td>Value:
  3505      <td><a href="#font-kerning-auto-value"
  3506       title="auto!!font-kerning">auto</a> | <a
  3507       href="#font-kerning-normal-value"
  3508       title="normal!!font-kerning">normal</a> | <a
  3509       href="#font-kerning-none-value" title="none!!font-kerning">none</a>
  3511     <tr>
  3512      <td>Initial:
  3514      <td>auto
  3516     <tr>
  3517      <td>Applies to:
  3519      <td>all elements
  3521     <tr>
  3522      <td>Inherited:
  3524      <td>yes
  3526     <tr>
  3527      <td>Percentages:
  3529      <td>N/A
  3531     <tr>
  3532      <td>Media:
  3534      <td>visual
  3536     <tr>
  3537      <td>Computed value:
  3539      <td>as specified
  3541     <tr>
  3542      <td>Animatable:
  3544      <td>no
  3545   </table>
  3547   <p>Kerning is the contextual adjustment of inter-glyph spacing. This
  3548    property controls metric kerning, kerning that utilizes adjustment data
  3549    contained in the font.
  3551   <dl>
  3552    <dt><dfn id=font-kerning-auto-value title="auto!!font-kerning">auto</dfn>
  3554    <dd>Specifies that kerning is applied at the discretion of the user agent
  3556    <dt><dfn id=font-kerning-normal-value
  3557     title="normal!!font-kerning">normal</dfn>
  3559    <dd>Specifies that kerning is applied
  3561    <dt><dfn id=font-kerning-none-value title="none!!font-kerning">none</dfn>
  3563    <dd>Specifies that kerning is not applied
  3564   </dl>
  3566   <p>For fonts that do not include kerning data this property will have no
  3567    visible effect. When rendering with OpenType fonts, the <a
  3568    href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>
  3569    specification suggests that kerning be enabled by default. When kerning is
  3570    enabled, the OpenType <span class=tag>kern</span> feature is enabled (for
  3571    vertical text runs the <span class=tag>vkrn</span> feature is enabled
  3572    instead). User agents must also support fonts that only support kerning
  3573    via data contained in a <span class=tag>kern</span> font table, as
  3574    detailed in the OpenType specification. If the ‘<code
  3575    class=property>letter-spacing</code>’ property is defined, kerning
  3576    adjustments are considered part of the default spacing and letter spacing
  3577    adjustments are made after kerning has been applied.
  3579   <p>When set to ‘<code class=property>auto</code>’, user agents can
  3580    determine whether to apply kerning or not based on a number of factors:
  3581    text size, script, or other factors that influence text processing speed.
  3582    Authors who want proper kerning should use ‘<a href="#normal"><code
  3583    class=property>normal</code></a>’ to explicitly enable kerning.
  3584    Likewise, some authors may prefer to disable kerning in situations where
  3585    performance is more important than precise appearance. However, in
  3586    well-designed modern implementations the use of kerning generally does not
  3587    have a large impact on text rendering speed.</p>
  3588   <!-- prop: font-variant-ligatures -->
  3590   <h3 id=font-variant-ligatures-prop><span class=secno>6.4 </span>Ligatures:
  3591    the <a href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
  3592    property</h3>
  3594   <table class=propdef id=namefont-variant-ligaturesvaluenormal-no>
  3595    <tbody>
  3596     <tr>
  3597      <td>Name:
  3599      <td><dfn id=propdef-font-variant-ligatures>font-variant-ligatures</dfn>
  3601     <tr>
  3602      <td>Value:
  3604      <td><a href="#font-variant-ligatures-normal-value"
  3605       title="normal!!font-variant-ligatures">normal</a> | <a
  3606       href="#font-variant-ligatures-none-value"
  3607       title="none!!font-variant-ligatures">none</a> | [ <a
  3608       href="#common-lig-values"><var>&lt;common-lig-values&gt;</var></a> ||
  3609       <a
  3610       href="#discretionary-lig-values"><var>&lt;discretionary-lig-values&gt;</var></a>
  3611       || <a
  3612       href="#historical-lig-values"><var>&lt;historical-lig-values&gt;</var></a>
  3613       || <a
  3614       href="#contextual-alt-values"><var>&lt;contextual-alt-values&gt;</var></a>
  3617     <tr>
  3618      <td>Initial:
  3620      <td>normal
  3622     <tr>
  3623      <td>Applies to:
  3625      <td>all elements
  3627     <tr>
  3628      <td>Inherited:
  3630      <td>yes
  3632     <tr>
  3633      <td>Percentages:
  3635      <td>N/A
  3637     <tr>
  3638      <td>Media:
  3640      <td>visual
  3642     <tr>
  3643      <td>Computed value:
  3645      <td>as specified
  3647     <tr>
  3648      <td>Animatable:
  3650      <td>no
  3651   </table>
  3653   <p>Ligatures and contextual forms are ways of combining glyphs to produce
  3654    more harmonized forms.
  3656   <pre
  3657    class=prod><dfn id=common-lig-values><var>&lt;common-lig-values&gt;</var></dfn>        = [ <a href="#common-ligatures">common-ligatures</a> | <a href="#no-common-ligatures">no-common-ligatures</a> ]</pre>
  3659   <pre
  3660    class=prod><dfn id=discretionary-lig-values><var>&lt;discretionary-lig-values&gt;</var></dfn> = [ <a href="#discretionary-ligatures">discretionary-ligatures</a> | <a href="#no-discretionary-ligatures">no-discretionary-ligatures</a> ]</pre>
  3662   <pre
  3663    class=prod><dfn id=historical-lig-values><var>&lt;historical-lig-values&gt;</var></dfn>    = [ <a href="#historical-ligatures">historical-ligatures</a> | <a href="#no-historical-ligatures">no-historical-ligatures</a> ]</pre>
  3665   <pre
  3666    class=prod><dfn id=contextual-alt-values><var>&lt;contextual-alt-values&gt;</var></dfn>    = [ <a href="#contextual">contextual</a> | <a href="#no-contextual">no-contextual</a> ]</pre>
  3668   <p>Individual values have the following meanings:
  3670   <dl>
  3671    <dt><dfn id=font-variant-ligatures-normal-value
  3672     title="normal!!font-variant-ligatures">normal</dfn>
  3674    <dd>A value of ‘<a href="#normal"><code
  3675     class=property>normal</code></a>’ specifies that common default
  3676     features are enabled, <a href="#font-feature-resolution">as described in
  3677     detail in the next section</a>. For OpenType fonts, common ligatures and
  3678     contextual forms are on by default, discretionary and historical
  3679     ligatures are not.
  3681    <dt><dfn id=font-variant-ligatures-none-value
  3682     title="none!!font-variant-ligatures">none</dfn>
  3684    <dd>Specifies that all types of ligatures and contextual forms covered by
  3685     this property are explicitly disabled. In situations where ligatures are
  3686     not considered necessary, this may improve the speed of text rendering.
  3688    <dt><dfn id=common-ligatures>common-ligatures</dfn>
  3690    <dd>Enables display of common ligatures (OpenType features: <span
  3691     class=tag>liga, clig</span>). For OpenType fonts, common ligatures are
  3692     enabled by default.
  3693   </dl>
  3695   <div class=featex><img alt="common ligature example" src=liga.png></div>
  3697   <dl>
  3698    <dt><dfn id=no-common-ligatures>no-common-ligatures</dfn>
  3700    <dd>Disables display of common ligatures (OpenType features: <span
  3701     class=tag>liga, clig</span>).
  3703    <dt><dfn id=discretionary-ligatures>discretionary-ligatures</dfn>
  3705    <dd>Enables display of discretionary ligatures (OpenType feature: <span
  3706     class=tag>dlig</span>). Which ligatures are discretionary or optional is
  3707     decided by the type designer, so authors will need to refer to the
  3708     documentation of a given font to understand which ligatures are
  3709     considered discretionary.
  3710   </dl>
  3712   <div class=featex><img alt="discretionary ligature example" src=dlig.png></div>
  3714   <dl>
  3715    <dt><dfn id=no-discretionary-ligatures>no-discretionary-ligatures</dfn>
  3717    <dd>Disables display of discretionary ligatures (OpenType feature: <span
  3718     class=tag>dlig</span>).
  3720    <dt><dfn id=historical-ligatures>historical-ligatures</dfn>
  3722    <dd>Enables display of historical ligatures (OpenType feature: <span
  3723     class=tag>hlig</span>).
  3724   </dl>
  3726   <div class=featex><img alt="historical ligature example" src=hlig.png></div>
  3728   <dl>
  3729    <dt><dfn id=no-historical-ligatures>no-historical-ligatures</dfn>
  3731    <dd>Disables display of historical ligatures (OpenType feature: <span
  3732     class=tag>hlig</span>).
  3734    <dt><dfn id=contextual>contextual</dfn>
  3736    <dd>Enables display of contextual alternates (OpenType feature: <span
  3737     class=tag>calt</span>). Although not strictly a ligature feature, like
  3738     ligatures this feature is commonly used to harmonize the shapes of glyphs
  3739     with the surrounding context. For OpenType fonts, this feature is on by
  3740     default.
  3741   </dl>
  3743   <div class=featex><img alt="contextual alternate example" src=calt.png></div>
  3745   <dl>
  3746    <dt><dfn id=no-contextual>no-contextual</dfn>
  3748    <dd>Disables display of contextual alternates (OpenType feature: <span
  3749     class=tag>calt</span>).
  3750   </dl>
  3752   <p>Required ligatures, needed for correctly rendering complex scripts, are
  3753    not affected by the settings above, including ‘<code
  3754    class=property>none</code>’ (OpenType feature: <span
  3755    class=tag>rlig</span>).</p>
  3756   <!-- prop: font-variant-position -->
  3758   <h3 id=font-variant-position-prop><span class=secno>6.5 </span>Subscript
  3759    and superscript forms: the <a
  3760    href="#propdef-font-variant-position">font-variant-position</a> property</h3>
  3762   <table class=propdef id=namefont-variant-positionvaluenormal-sub>
  3763    <tbody>
  3764     <tr>
  3765      <td>Name:
  3767      <td><dfn id=propdef-font-variant-position>font-variant-position</dfn>
  3769     <tr>
  3770      <td>Value:
  3772      <td><span title="normal!!font-variant-position">normal</span> | <a
  3773       href="#sub">sub</a> | <a href="#super">super</a>
  3775     <tr>
  3776      <td>Initial:
  3778      <td>normal
  3780     <tr>
  3781      <td>Applies to:
  3783      <td>all elements
  3785     <tr>
  3786      <td>Inherited:
  3788      <td>yes
  3790     <tr>
  3791      <td>Percentages:
  3793      <td>N/A
  3795     <tr>
  3796      <td>Media:
  3798      <td>visual
  3800     <tr>
  3801      <td>Computed value:
  3803      <td>as specified
  3805     <tr>
  3806      <td>Animatable:
  3808      <td>no
  3809   </table>
  3811   <p>This property is used to enable typographic subscript and superscript
  3812    glyphs. These are alternate glyphs designed within the same em-box as
  3813    default glyphs and are intended to be laid out on the same baseline as the
  3814    default glyphs, with no resizing or repositioning of the baseline. They
  3815    are explicitly designed to match the surrounding text and to be more
  3816    readable without affecting the line height.
  3818   <div class=figure><img alt="comparison between real subscript glyphs and
  3819    synthesized ones" src=realsubscripts.png>
  3820    <p class=caption>Subscript glyphs (top) vs. typical synthesized subscripts
  3821     (bottom)
  3822   </div>
  3824   <p>Individual values have the following meanings:
  3826   <dl>
  3827    <dt><dfn id=normal>normal</dfn>
  3829    <dd>None of the features listed below are enabled.
  3831    <dt><dfn id=sub>sub</dfn>
  3833    <dd>Enables display of subscript variants (OpenType feature: <span
  3834     class=tag>subs</span>).
  3836    <dt><dfn id=super>super</dfn>
  3838    <dd>Enables display of superscript variants (OpenType feature: <span
  3839     class=tag>sups</span>).
  3840   </dl>
  3842   <p>Because of the semantic nature of subscripts and superscripts, when the
  3843    value is either ‘<a href="#sub"><code class=property>sub</code></a>’
  3844    or ‘<a href="#super"><code class=property>super</code></a>’ for a
  3845    given contiguous run of text, if a variant glyph is not available for all
  3846    the characters in the run, simulated glyphs must be synthesized for all
  3847    characters using reduced forms of the glyphs that would be used without
  3848    this feature applied. This is done per run to avoid a mixture of variant
  3849    glyphs and synthesized ones that would not align correctly. In the case of
  3850    OpenType fonts that lack subscript or superscript glyphs for a given
  3851    character, user agents must use the appropriate subscript and superscript
  3852    metrics specified in the selected font's <a
  3853    href="http://www.microsoft.com/typography/otspec/os2.htm#subxs">OS/2
  3854    table</a> <a href="#OPENTYPE"
  3855    rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a> to calculate the size
  3856    and offset of the synthesized substitutes.
  3858   <div class=figure><img alt="alternate superscripts vs. glyphs synthesized
  3859    using superscript metrics" src=superscript-alt-synth.png>
  3860    <p class=caption>Superscript alternate glyph (left), synthesized
  3861     superscript glyphs (middle), and incorrect mixture of the two (right)
  3862   </div>
  3864   <p>In the past, user agents have used font-size and vertical-align to
  3865    simulate subscripts and superscripts for the <a class=tag
  3866    href="#sub">sub</a> and <span class=tag>sup</span> elements. To allow a
  3867    backwards compatible way of defining subscripts and superscripts, it is
  3868    recommended that authors use conditional rules <a href="#CSS3-CONDITIONAL"
  3869    rel=biblioentry>[CSS3-CONDITIONAL]<!--{{CSS3-CONDITIONAL}}--></a> so that
  3870    older user agents will still render subscripts and superscripts via the
  3871    older mechanism.
  3873   <p>Authors should note that fonts typically only provide subscript and
  3874    superscript glyphs for a subset of all characters supported by the font.
  3875    For example, while subscript and superscript glyphs are often available
  3876    for Latin numbers, glyphs for punctuation and letter characters are less
  3877    frequently provided. The synthetic fallback rules defined for this
  3878    property assure that subscripts and superscripts will always appear but
  3879    the appearance may not match author expectations if the font used does not
  3880    provide the appropriate alternate glyph for all characters contained in a
  3881    subscript or superscript.
  3883   <p>This property is not cumulative. Applying it to elements within a
  3884    subscript or superscript won't nest the placement of a subscript or
  3885    superscript glyph. Images contained within text runs where the value of
  3886    this property is ‘<a href="#sub"><code class=property>sub</code></a>’
  3887    or ‘<a href="#super"><code class=property>super</code></a>’ will be
  3888    drawn just as they would if the value was ‘<a href="#normal"><code
  3889    class=property>normal</code></a>’. Likewise, text decorations such as
  3890    underlines or emphasis marks will render in the same position as they
  3891    would for the default glyphs, since this property does not affect the
  3892    baseline position.
  3894   <p class=issue>Some have suggested that text decorations should apply to
  3895    the visual baseline of the variant glyphs, rather than the baseline
  3896    defined by the font.
  3898   <p>Because of these limitations, ‘<a
  3899    href="#propdef-font-variant-position"><code
  3900    class=property>font-variant-position</code></a>’ is not recommended for
  3901    use in user agent stylesheets. Authors should use it in cases where
  3902    subscripts or superscripts will only contain the narrow range of
  3903    characters supported by the fonts specified.
  3905   <div class=example>
  3906    <p>A typical user agent default style for the <a class=tag
  3907     href="#sub">sub</a> element:</p>
  3909    <pre>sub {
  3910   vertical-align: sub;
  3911   font-size: smaller;
  3912   line-height: normal;
  3914 </pre>
  3916    <p>Using font-variant-position to specify typographic subscripts in a way
  3917     that will still show subscripts in older user agents:</p>
  3919    <pre>@supports ( font-variant-position: sub ) {
  3921   sub {
  3922     vertical-align: baseline;
  3923     font-size: 100%;
  3924     line-height: inherit;
  3925     font-variant-position: sub;
  3929 </pre>
  3931    <p>User agents that support the ‘<a
  3932     href="#propdef-font-variant-position"><code
  3933     class=property>font-variant-position</code></a>’ property will select a
  3934     subscript variant glyph and render this without adjusting the baseline or
  3935     font-size. Older user agents will ignore the ‘<a
  3936     href="#propdef-font-variant-position"><code
  3937     class=property>font-variant-position</code></a>’ property definition
  3938     and use the standard defaults for subscripts.</p>
  3939   </div>
  3940   <!-- prop: font-variant-caps -->
  3942   <h3 id=font-variant-caps-prop><span class=secno>6.6 </span>Capitalization:
  3943    the <a href="#propdef-font-variant-caps">font-variant-caps</a> property</h3>
  3945   <table class=propdef id=namefont-variant-capsvaluenormal-small-c>
  3946    <tbody>
  3947     <tr>
  3948      <td>Name:
  3950      <td><dfn id=propdef-font-variant-caps>font-variant-caps</dfn>
  3952     <tr>
  3953      <td>Value:
  3955      <td><a href="#font-variant-caps-normal-value"
  3956       title="normal!!font-variant-caps">normal</a> | <a
  3957       href="#small-caps">small-caps</a> | <a
  3958       href="#all-small-caps">all-small-caps</a> | <a
  3959       href="#petite-caps">petite-caps</a> | <a
  3960       href="#all-petite-caps">all-petite-caps</a> | <a
  3961       href="#unicase">unicase</a> | <a href="#titling-caps">titling-caps</a>
  3963     <tr>
  3964      <td>Initial:
  3966      <td>normal
  3968     <tr>
  3969      <td>Applies to:
  3971      <td>all elements
  3973     <tr>
  3974      <td>Inherited:
  3976      <td>yes
  3978     <tr>
  3979      <td>Percentages:
  3981      <td>N/A
  3983     <tr>
  3984      <td>Media:
  3986      <td>visual
  3988     <tr>
  3989      <td>Computed value:
  3991      <td>as specified
  3993     <tr>
  3994      <td>Animatable:
  3996      <td>no
  3997   </table>
  3999   <p>This property allows the selection of alternate glyphs used for small or
  4000    petite capitals or for titling. These glyphs are specifically designed to
  4001    blend well with the surrounding normal glyphs, to maintain the weight and
  4002    readability which suffers when text is simply resized to fit this purpose.
  4004   <p>Individual values have the following meanings:
  4006   <dl>
  4007    <dt><dfn id=font-variant-caps-normal-value
  4008     title="normal!!font-variant-caps">normal</dfn>
  4010    <dd>None of the features listed below are enabled.
  4012    <dt><dfn id=small-caps>small-caps</dfn>
  4014    <dd>Enables display of small capitals (OpenType feature: <span
  4015     class=tag>smcp</span>). Small-caps glyphs typically use the form of
  4016     uppercase letters but are reduced to the size of lowercase letters.
  4017   </dl>
  4019   <div class=featex><img alt="small-caps example" src=smcp.png></div>
  4021   <dl>
  4022    <dt><dfn id=all-small-caps>all-small-caps</dfn>
  4024    <dd>Enables display of small capitals for both upper and lowercase letters
  4025     (OpenType features: <span class=tag>c2sc, smcp</span>).
  4027    <dt><dfn id=petite-caps>petite-caps</dfn>
  4029    <dd>Enables display of petite capitals (OpenType feature: <span
  4030     class=tag>pcap</span>).
  4032    <dt><dfn id=all-petite-caps>all-petite-caps</dfn>
  4034    <dd>Enables display of petite capitals for both upper and lowercase
  4035     letters (OpenType features: <span class=tag>c2pc, pcap</span>).
  4037    <dt><dfn id=unicase>unicase</dfn>
  4039    <dd>Enables display of mixture of small capitals for uppercase letters
  4040     with normal lowercase letters (OpenType feature: <span
  4041     class=tag>unic</span>).
  4043    <dt><dfn id=titling-caps>titling-caps</dfn>
  4045    <dd>Enables display of titling capitals (OpenType feature: <span
  4046     class=tag>titl</span>). Uppercase letter glyphs are often designed for
  4047     use with lowercase letters. When used in all uppercase titling sequences
  4048     they can appear too strong. Titling capitals are designed specifically
  4049     for this situation.
  4050   </dl>
  4052   <p>The availability of these glyphs is based on whether a given feature is
  4053    defined or not in the feature list of the font. User agents can optionally
  4054    decide this on a per-script basis but should explicitly not decide this on
  4055    a per-character basis.
  4057   <p>Some fonts may only support a subset or none of the features described
  4058    for this property. For backwards compatibility with CSS 2.1, if ‘<a
  4059    href="#small-caps"><code class=property>small-caps</code></a>’ or ‘<a
  4060    href="#all-small-caps"><code class=property>all-small-caps</code></a>’
  4061    is specified but small-caps glyphs are not available for a given font,
  4062    user agents should simulate a small-caps font, for example by taking a
  4063    normal font and replacing the glyphs for lowercase letters with scaled
  4064    versions of the glyphs for uppercase characters (replacing the glyphs for
  4065    both upper and lowercase letters in the case of ‘<a
  4066    href="#all-small-caps"><code class=property>all-small-caps</code></a>’).
  4068   <div class=figure style="padding: 0; margin: auto;"><img alt="synthetic vs.
  4069    real small-caps" class=hires src=synthetic-vs-real-small-caps.png
  4070    width=512px>
  4071    <p class=caption>Synthetic vs. real small-caps
  4072   </div>
  4074   <p>To match the surrounding text, a font may provide alternate glyphs for
  4075    caseless characters when these features are enabled but when a user agent
  4076    simulates small capitals, it must not attempt to simulate alternates for
  4077    codepoints which are considered caseless.
  4079   <div class=figure style="padding: 0; margin: auto;"><img alt="caseless
  4080    characters with small-caps, all-small-caps enabled" class=hires
  4081    src=small-capitals-variations.png width=418px>
  4082    <p class=caption>Caseless characters with small-caps, all-small-caps
  4083     enabled
  4084   </div>
  4086   <p>If either ‘<a href="#petite-caps"><code
  4087    class=property>petite-caps</code></a>’ or ‘<a
  4088    href="#all-petite-caps"><code class=property>all-petite-caps</code></a>’
  4089    is specified for a font that doesn't support these features, the property
  4090    behaves as if ‘<a href="#small-caps"><code
  4091    class=property>small-caps</code></a>’ or ‘<a
  4092    href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
  4093    respectively, had been specified. If ‘<a href="#unicase"><code
  4094    class=property>unicase</code></a>’ is specified for a font that doesn't
  4095    support that feature, the property behaves as if ‘<a
  4096    href="#small-caps"><code class=property>small-caps</code></a>’ was
  4097    applied only to lowercased uppercase letters. If ‘<a
  4098    href="#titling-caps"><code class=property>titling-caps</code></a>’ is
  4099    specified with a font that does not support this feature, this property
  4100    has no visible effect. When simulated small capital glyphs are used, for
  4101    scripts that lack uppercase and lowercase letters, ‘<a
  4102    href="#small-caps"><code class=property>small-caps</code></a>’, ‘<a
  4103    href="#all-small-caps"><code class=property>all-small-caps</code></a>’,
  4104    ‘<a href="#petite-caps"><code class=property>petite-caps</code></a>’,
  4105    ‘<a href="#all-petite-caps"><code
  4106    class=property>all-petite-caps</code></a>’ and ‘<a
  4107    href="#unicase"><code class=property>unicase</code></a>’ have no visible
  4108    effect.
  4110   <p>When casing transforms are used to simulate small capitals, the casing
  4111    transformations must match those used for the <span
  4112    class=property>‘<code class=property>text-transform</code>’</span>
  4113    property.
  4115   <p>As a last resort, unscaled uppercase letter glyphs in a normal font may
  4116    replace glyphs in a small-caps font so that the text appears in all
  4117    uppercase letters.
  4119   <div class=figure style="padding: 0; margin: auto;"><img alt="using
  4120    all-small-caps in acronym-laden text" class=hires
  4121    src=acronym-laden-text.png width=596px>
  4122    <p class=caption>Using small capitals to improve readability in
  4123     acronym-laden text
  4124   </div>
  4126   <div class=example>
  4127    <p>Quotes rendered italicised, with small-caps on the first line:</p>
  4129    <pre>blockquote            { font-style: italic; }
  4130 blockquote:first-line { font-variant: small-caps; }
  4132 &lt;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>&lt;/blockquote>
  4133 </pre>
  4134   </div>
  4135   <!-- prop: font-variant-numeric -->
  4137   <h3 id=font-variant-numeric-prop><span class=secno>6.7 </span>Numerical
  4138    formatting: the <a
  4139    href="#propdef-font-variant-numeric">font-variant-numeric</a> property</h3>
  4141   <table class=propdef id=namefont-variant-numericvaluenormal-ltnu>
  4142    <tbody>
  4143     <tr>
  4144      <td>Name:
  4146      <td><dfn id=propdef-font-variant-numeric>font-variant-numeric</dfn>
  4148     <tr>
  4149      <td>Value:
  4151      <td><a href="#font-variant-numeric-normal-value"
  4152       title="normal!!font-variant-numeric">normal</a> | [ <a
  4153       href="#numeric-figure-values"><var>&lt;numeric-figure-values&gt;</var></a>
  4154       || <a
  4155       href="#numeric-spacing-values"><var>&lt;numeric-spacing-values&gt;</var></a>
  4156       || <a
  4157       href="#numeric-fraction-values"><var>&lt;numeric-fraction-values&gt;</var></a>
  4158       || <a href="#ordinal">ordinal</a> || <a
  4159       href="#slashed-zero">slashed-zero</a> ]
  4161     <tr>
  4162      <td>Initial:
  4164      <td>normal
  4166     <tr>
  4167      <td>Applies to:
  4169      <td>all elements
  4171     <tr>
  4172      <td>Inherited:
  4174      <td>yes
  4176     <tr>
  4177      <td>Percentages:
  4179      <td>N/A
  4181     <tr>
  4182      <td>Media:
  4184      <td>visual
  4186     <tr>
  4187      <td>Computed value:
  4189      <td>as specified
  4191     <tr>
  4192      <td>Animatable:
  4194      <td>no
  4195   </table>
  4197   <p>Specifies control over numerical forms.
  4199   <pre
  4200    class=prod><dfn id=numeric-figure-values><var>&lt;numeric-figure-values&gt;</var></dfn>   = [ <a href="#lining-nums">lining-nums</a> | <a href="#oldstyle-nums">oldstyle-nums</a> ]</pre>
  4202   <pre
  4203    class=prod><dfn id=numeric-spacing-values><var>&lt;numeric-spacing-values&gt;</var></dfn>  = [ <a href="#proportional-nums">proportional-nums</a> | <a href="#tabular-nums">tabular-nums</a> ]</pre>
  4205   <pre
  4206    class=prod><dfn id=numeric-fraction-values><var>&lt;numeric-fraction-values&gt;</var></dfn> = [ <a href="#diagonal-fractions">diagonal-fractions</a> | <a href="#stacked-fractions">stacked-fractions</a> ]</pre>
  4208   <p>Individual values have the following meanings:
  4210   <dl>
  4211    <dt><dfn id=font-variant-numeric-normal-value
  4212     title="normal!!font-variant-numeric">normal</dfn>
  4214    <dd>None of the features listed below are enabled.
  4216    <dt><dfn id=lining-nums>lining-nums</dfn>
  4218    <dd>Enables display of lining numerals (OpenType feature: <span
  4219     class=tag>lnum</span>).
  4221    <dt><dfn id=oldstyle-nums>oldstyle-nums</dfn>
  4223    <dd>Enables display of old-style numerals (OpenType feature: <span
  4224     class=tag>onum</span>).
  4226    <dt><dfn id=proportional-nums>proportional-nums</dfn>
  4228    <dd>Enables display of proportional numerals (OpenType feature: <span
  4229     class=tag>pnum</span>).
  4231    <dt><dfn id=tabular-nums>tabular-nums</dfn>
  4233    <dd>Enables display of tabular numerals (OpenType feature: <span
  4234     class=tag>tnum</span>).
  4235   </dl>
  4237   <p>The example below shows how these different properties can be combined
  4238    to influence the rendering of tabular data with fonts that support these
  4239    features. Within normal paragraph text, proportional numbers are used
  4240    while tabular numbers are used so that columns of numbers line up
  4241    properly:
  4243   <div class=figure style="padding: 0; margin: auto;"><img alt="combining
  4244    number styles" src=numberstyles.png>
  4245    <p class=caption>Using number styles
  4246   </div>
  4248   <dl>
  4249    <dt><dfn id=diagonal-fractions>diagonal-fractions</dfn>
  4251    <dd>Enables display of lining diagonal fractions (OpenType feature: <span
  4252     class=tag>frac</span>).
  4253   </dl>
  4255   <div class=featex><img alt="diagonal fraction example" src=frac.png></div>
  4257   <dl>
  4258    <dt><dfn id=stacked-fractions>stacked-fractions</dfn>
  4260    <dd>Enables display of lining stacked fractions (OpenType feature: <span
  4261     class=tag>afrc</span>).
  4262   </dl>
  4264   <div class=featex><img alt="stacked fraction example" src=afrc.png></div>
  4266   <dl>
  4267    <dt><dfn id=ordinal>ordinal</dfn>
  4269    <dd>Enables display of forms used with ordinal numbers (OpenType feature:
  4270     <span class=tag>ordn</span>).
  4272    <dt><dfn id=slashed-zero>slashed-zero</dfn>
  4274    <dd>Enables display of slashed zeros (OpenType feature: <span
  4275     class=tag>zero</span>).
  4276   </dl>
  4278   <div class=featex><img alt="slashed zero example" src=zero.png></div>
  4280   <div class=example id=steak-marinade>
  4281    <p>A simple flank steak marinade recipe, rendered with automatic fractions
  4282     and old-style numerals:</p>
  4284    <pre>.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; }
  4286 &lt;h4>Steak marinade:&lt;/h4>
  4287 &lt;ul>
  4288   &lt;li>&lt;span class="amount">2&lt;/span> tbsp olive oil&lt;/li>
  4289   &lt;li>&lt;span class="amount">1&lt;/span> tbsp lemon juice&lt;/li>
  4290   &lt;li>&lt;span class="amount">1&lt;/span> tbsp soy sauce&lt;/li>
  4291   &lt;li>&lt;span class="amount">1 1/2&lt;/span> tbsp dry minced onion&lt;/li>
  4292   &lt;li>&lt;span class="amount">2 1/2&lt;/span> tsp italian seasoning&lt;/li>
  4293   &lt;li>Salt &amp;amp; pepper&lt;/li>
  4294 &lt;/ul>
  4296 &lt;p>Mix the meat with the marinade and let it sit covered in the refrigerator
  4297 for a few hours or overnight.&lt;/p>
  4298 </pre>
  4299   </div>
  4300   <!-- prop: font-variant-alternates -->
  4302   <h3 id=font-variant-alternates-prop><span class=secno>6.8 </span>Alternates
  4303    and swashes: the <a
  4304    href="#propdef-font-variant-alternates">font-variant-alternates</a>
  4305    property</h3>
  4307   <table class=propdef id=namefont-variant-alternatesvaluenormal-s>
  4308    <tbody>
  4309     <tr>
  4310      <td>Name:
  4312      <td><dfn
  4313       id=propdef-font-variant-alternates>font-variant-alternates</dfn>
  4315     <tr>
  4316      <td>Value:
  4318      <td>normal | [ <a href="#stylistic"
  4319       title=stylistic>stylistic(&lt;feature-value-name&gt;)</a> || <a
  4320       href="#historical-forms">historical-forms</a> || <a href="#styleset"
  4321       title=styleset>styleset(&lt;feature-value-name&gt; #)</a> || <a
  4322       href="#character-variant"
  4323       title=character-variant>character-variant(&lt;feature-value-name&gt;
  4324       #)</a> || <a href="#swash"
  4325       title=swash>swash(&lt;feature-value-name&gt;)</a> || <a
  4326       href="#ornaments"
  4327       title=ornaments>ornaments(&lt;feature-value-name&gt;)</a> || <a
  4328       href="#annotation"
  4329       title=annotation>annotation(&lt;feature-value-name&gt;)</a> ]
  4331     <tr>
  4332      <td>Initial:
  4334      <td>normal
  4336     <tr>
  4337      <td>Applies to:
  4339      <td>all elements
  4341     <tr>
  4342      <td>Inherited:
  4344      <td>yes
  4346     <tr>
  4347      <td>Percentages:
  4349      <td>N/A
  4351     <tr>
  4352      <td>Media:
  4354      <td>visual
  4356     <tr>
  4357      <td>Computed value:
  4359      <td>as specified
  4361     <tr>
  4362      <td>Animatable:
  4364      <td>no
  4365   </table>
  4367   <p>For any given character, fonts can provide a variety of alternate glyphs
  4368    in addition to the default glyph for that character. This property
  4369    provides control over the selection of these alternate glyphs.
  4371   <p>In cases where multiple alternates are possible, authors define a
  4372    <code>&lt;feature-value-name&gt;</code> using the
  4373    <code>@font-feature-values</code> rule described below to indicate the
  4374    specific alternate to be used. The nature of these alternates is font
  4375    specific, so the rule defines values for a specific font family or set of
  4376    families. When a particular value has not been defined for a given family,
  4377    the named value is treated as if the feature had omitted from the style
  4378    rule. If a given value is outside the range supported by a given font, the
  4379    value is ignored. These values never apply to generic font families, nor
  4380    to families selected as part of system font fallback. Values that behave
  4381    this way are marked as <em>font specific</em>.
  4383   <p>Individual values have the following meanings:
  4385   <dl>
  4386    <dt><dfn id=font-variant-alternates-normal-value
  4387     title="normal!!font-variant-alternates">normal</dfn>
  4389    <dd>None of the features listed below are enabled.
  4391    <dt><dfn id=stylistic
  4392     title=stylistic>stylistic(&lt;feature-value-name&gt;)</dfn>
  4394    <dd>Enables display of stylistic alternates (<em>font specific</em>,
  4395     OpenType feature: <span class=tag>salt
  4396     &lt;feature-value-name&gt;</span>).
  4397   </dl>
  4399   <div class=featex><img alt="stylistic alternate example" src=salt.png></div>
  4401   <dl>
  4402    <dt><dfn id=historical-forms>historical-forms</dfn>
  4404    <dd>Enables display of historical forms (OpenType feature: <span
  4405     class=tag>hist</span>).
  4406   </dl>
  4408   <div class=featex><img alt="historical form example" src=hist.png></div>
  4410   <dl>
  4411    <dt><dfn id=styleset title=styleset>styleset(&lt;feature-value-name&gt;
  4412     #)</dfn>
  4414    <dd>Enables display with stylistic sets (<em>font specific</em>, OpenType
  4415     feature: <span class=tag>ss&lt;feature-index&gt;</span> OpenType
  4416     currently defines <span class=tag>ss01</span> through <span
  4417     class=tag>ss20</span>).
  4418   </dl>
  4420   <div class=featex><img alt="styleset example" src=ssnn.png></div>
  4422   <dl>
  4423    <dt><dfn id=character-variant
  4424     title=character-variant>character-variant(&lt;feature-value-name&gt;
  4425     #)</dfn>
  4427    <dd>Enables display of specific character variants (<em>font
  4428     specific</em>, OpenType feature: <span
  4429     class=tag>cv&lt;feature-index&gt;</span> OpenType currently defines <span
  4430     class=tag>cv01</span> through <span class=tag>cv99</span>).
  4432    <dt><dfn id=swash title=swash>swash(&lt;feature-value-name&gt;)</dfn>
  4434    <dd>Enables display of swash glyphs (<em>font specific</em>, OpenType
  4435     feature: <span class=tag>swsh &lt;feature-index&gt;, cswh
  4436     &lt;feature-index&gt;</span>).
  4437   </dl>
  4439   <div class=featex><img alt="swash example" src=swsh.png></div>
  4441   <dl>
  4442    <dt><dfn id=ornaments
  4443     title=ornaments>ornaments(&lt;feature-value-name&gt;)</dfn>
  4445    <dd>Enables replacement of default glyphs with ornaments, if provided in
  4446     the font (<em>font specific</em>, OpenType feature: <span class=tag>ornm
  4447     &lt;feature-index&gt;</span>). Some fonts may offer ornament glyphs as
  4448     alternates for a wide collection of characters; however, displaying
  4449     arbitrary characters (e.g., alphanumerics) as ornaments is poor practice
  4450     as it distorts the semantics of the data. Font designers are encouraged
  4451     to encode all ornaments (except those explicitly encoded in the Unicode
  4452     Dingbats blocks, etc.) as alternates for the bullet character (U+2022) to
  4453     allow authors to select the desired glyph using
  4454     &lt;feature-value-name&gt;.
  4455   </dl>
  4457   <div class=featex><img alt="ornaments example" src=ornm.png></div>
  4459   <dl>
  4460    <dt><dfn id=annotation
  4461     title=annotation>annotation(&lt;feature-value-name&gt;)</dfn>
  4463    <dd>Enables display of alternate annotation forms (<em>font specific</em>,
  4464     OpenType feature: <span class=tag>nalt &lt;feature-index&gt;</span>).
  4465   </dl>
  4467   <div class=featex><img alt="alternate annotation form example"
  4468    src=nalt.png></div>
  4470   <h3 id=font-feature-values><span class=secno>6.9 </span>Defining font
  4471    specific alternates: the <code>@font-feature-values</code> rule</h3>
  4473   <p>Several of the possible values of ‘<a
  4474    href="#propdef-font-variant-alternates"><code
  4475    class=property>font-variant-alternates</code></a>’ listed above are
  4476    labeled as "font specific". For these features fonts may define not just a
  4477    single glyph but a set of alternate glyphs with an index to select a given
  4478    alternate. Since these are font family specific, the
  4479    <code>@font-feature-values</code> rule is used to define named-values for
  4480    these indices for a given family.
  4482   <p>In the case of the swash Q in the example shown above, the swash could
  4483    be specified using these style rules:
  4485   <pre>
  4487 @font-feature-values Jupiter Sans {
  4488   @swash {
  4489     delicate: 1;
  4490     flowing: 2;
  4494 h2 { font-family: Jupiter Sans, sans-serif; }
  4496 /* show the second swash variant in h2 headings */
  4497 h2:first-letter { font-variant-alternates: swash(flowing); }
  4499 &lt;h2>Quick&lt;/h2></pre>
  4501   <p>When Jupiter Sans is present, the second alternate swash alternate will
  4502    be displayed. When not present, no swash character will be shown, since
  4503    the specific named-value "flowing" is only defined for the Jupiter Sans
  4504    family. The @-mark indicates the name of the property value for which a
  4505    named-value can be used. The name "flowing" is chosen by the author, the
  4506    values specified within a given font's data.
  4508   <p>In terms of the grammar, this specification defines the following
  4509    productions:</p>
  4510   <!--
  4511 <pre><dfn>supports_rule</dfn>
  4512   : <i>SUPPORTS_SYM</i> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <i>supports_condition</i> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <i>group_rule_body</i>
  4515 <dfn>supports_condition</dfn>
  4516   : <i>supports_negation</i> | <i>supports_conjunction</i> | <i>supports_disjunction</i> |
  4517     <i>supports_condition_in_parens</i>
  4520 <dfn>supports_condition_in_parens</dfn>
  4521   : ( '(' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <i>supports_condition</i> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* ')' ) | <i>supports_declaration_condition</i> |
  4522     <i>general_enclosed</i>
  4525 <dfn>supports_negation</dfn>
  4526   : <a href="http://www.w3.org/TR/css3-mediaqueries/#syntax"><i>NOT</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>+ <i>supports_condition_in_parens</i>
  4529 <dfn>supports_conjunction</dfn>
  4530   : <i>supports_condition_in_parens</i> ( <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>+ <a href="http://www.w3.org/TR/css3-mediaqueries/#syntax"><i>AND</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>+ <i>supports_condition_in_parens</i> )+
  4533 <dfn>supports_disjunction</dfn>
  4534   : <i>supports_condition_in_parens</i> ( <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>+ <i>OR</i> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>+ <i>supports_condition_in_parens</i> )+
  4537 <dfn>supports_declaration_condition</dfn>
  4538   : '(' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>declaration</i></a> ')'
  4541 <dfn>general_enclosed</dfn>
  4542   : ( <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>FUNCTION</i></a> | '(' ) ( <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>any</i></a> | <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>unused</i></a> )* ')'
  4544 </pre>
  4546 -->
  4548   <pre><dfn id=fontfeaturevaluesrule>font_feature_values_rule</dfn>
  4549   : <a href="#fontfeaturevaluessym"><i>FONT_FEATURE_VALUES_SYM</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#fontfamilynamelist"><i>font_family_name_list</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
  4550     '{' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevalueblock"><i>feature_value_block</i></a>? [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevalueblock"><i>feature_value_block</i></a>? ]* '}' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
  4553 <dfn id=fontfamilynamelist>font_family_name_list</dfn>
  4554   : <a href="#fontfamilyname"><i>font_family_name</i></a> [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* ',' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#fontfamilyname"><i>font_family_name</i></a> ]*
  4557 <dfn id=fontfamilyname>font_family_name</dfn>
  4558   : <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>STRING</i></a> | [ <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>IDENT</i></a> [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>IDENT</i></a> ]* ]
  4561 <dfn id=featurevalueblock>feature_value_block</dfn>
  4562   : <a href="#featuretype"><i>feature_type</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
  4563     '{' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevaluedefinition"><i>feature_value_definition</i></a>? [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* ';' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="#featurevaluedefinition"><i>feature_value_definition</i></a>? ]* '}' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>*
  4566 <dfn id=featuretype>feature_type</dfn>:
  4567   <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>ATKEYWORD</i></a>
  4570 <dfn id=featurevaluedefinition>feature_value_definition</dfn>
  4571   : <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>IDENT</i></a> <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* ':' <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>NUMBER</i></a> [ <a href="http://www.w3.org/TR/CSS21/grammar.html#scanner"><i>S</i></a>* <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization"><i>NUMBER</i></a> ]*
  4573 </pre>
  4575   <p>The following new token is introduced:
  4577   <pre>@{F}{O}{N}{T}{-}{F}{E}{A}{T}{U}{R}{E}{-}{V}{A}{L}{U}{E}{S}   {return <dfn id=fontfeaturevaluessym>FONT_FEATURE_VALUES_SYM</dfn>;}
  4578 </pre>
  4580   <p>Feature value blocks are treated <a
  4581    href="http://www.w3.org/TR/CSS2/syndata.html#at-rules">similar to
  4582    at-rules</a>, they consist of everything up to the next block or
  4583    semi-colon, whichever comes first.
  4585   <p>Font feature values rules define a set of values for a specific font
  4586    feature as used for a given set of families. Effectively, they define a
  4587    mapping of ⟨family, feature, ident⟩ → ⟨values⟩ where
  4588    ⟨values⟩ are the indices used for specific features defined for a
  4589    given font.
  4591   <p>The font family list uses the same syntax as that used for the <a
  4592    href="#propdef-font-family" title="font-family!!property">‘<code
  4593    class=property>font-family</code>’</a> property. Within feature value
  4594    blocks, the feature type is ‘<code class=css>@</code>’ followed by the
  4595    name of the font-specific property value (e.g. <a
  4596    href="#swash"><code>@swash</code></a>). The feature type must match, using
  4597    an ASCII case-insensitive comparison, one of the <em>font specific</em>
  4598    values of the ‘<a href="#propdef-font-variant-alternates"><code
  4599    class=property>font-variant-alternates</code></a>’ property. The values
  4600    associated with a given idenitifier are limited to integer values 0 or
  4601    greater.
  4603   <p>If syntax errors occur within the font family list, the entire rule must
  4604    be ignored. When syntax errors occur within a feature value definition,
  4605    such as invalid identifiers or values, the entire feature value definition
  4606    must be omitted, similar to the way syntax errors in style declarations
  4607    are handled. When the <code>&lt;feature-type></code> is invalid, the
  4608    entire associated feature value block must be ignored.
  4610   <pre>@font-feature-values Bongo {
  4611   @swash { ornate: 1; }
  4612   annotation { boxed: 4; } /* should be @annotation! */
  4613   @swash { double-loops: 1; flowing: -1; } /* negative value */
  4614   @ornaments ; /* incomplete definition */
  4615   @styleset { double-W: 14; sharp-terminals: 16 1 } /* missing ; */
  4616   <a href="http://www.angryalien.com/0504/shiningbunnies.html" style="text-decoration: none;">redrum</a>  /* random editing mistake */
  4617 }</pre>
  4619   <p>The example above is equivalent to:
  4621   <pre>@font-feature-values Bongo {
  4622   @swash { ornate: 1; }
  4623   @swash { double-loops: 1; }
  4624   @styleset { double-W: 14; sharp-terminals: 16 1; }
  4625 }</pre>
  4627   <p>If multiple <code>@font-feature-values</code> rules are defined for a
  4628    given family, the resulting values defined are the union of these rules.
  4629    This allows a set of named-values to be defined for a given font family
  4630    globally for a site and specific additions made per-page. If the same
  4631    &lt;feature-value-name&gt; is defined mulitple times for a given
  4632    font-variant value, the last defined value is used.
  4634   <pre>
  4635 site.css:
  4637   @font-feature-values Mercury Serif {
  4638     @styleset {
  4639       stacked-g: 3; /* "two-storey" versions of g, a */
  4640       stacked-a: 4;
  4644 page.css:
  4646   @font-feature-values Mercury Serif {
  4647     @styleset {
  4648       geometric-m: 7; /* alternate version of m */
  4652   body {
  4653     font-family: Mercury Serif, serif;
  4655     /* enable both the use of stacked g and alternate m */
  4656     font-variant-alternates: styleset(stacked-g, geometric-m);
  4657   }</pre>
  4659   <p>Only named font families are allowed for &lt;font-family&gt;, rules that
  4660    include generic or system fonts in the list of font families are
  4661    considered syntax errors and the contents of the rules are ignored.
  4662    However, if a user agent defines a generic font to be a specific named
  4663    font (e.g. Helvetica), the settings associated with that family name will
  4664    be used.
  4666   <p>For &lt;font-variant-property-value>, only font specific property value
  4667    names supported by the <a href="#propdef-font-variant"
  4668    title="font-variant!!property">‘<code
  4669    class=property>font-variant</code>’</a> property are recognized,
  4670    definitions for other value names cause a syntax error and are ignored.
  4671    Each property value that is font specific is clearly marked as such.
  4672    Feature value names follow the rules of CSS user identifiers and are
  4673    case-sensitive. They are unique only for a given set of font families and
  4674    font-variant property value; the same identifier used with a different
  4675    font-variant property value is treated as a separate and distinct value.
  4677   <p>Using a commonly named value allows authors to use a single style rule
  4678    to cover a set of fonts for which the underlying selector is different for
  4679    each font. If either font in the example below is found, a circled number
  4680    glyph will be used:
  4682   <pre>@font-feature-values Taisho Gothic {
  4683   @annotation { boxed: 1; circled: 4; }
  4686 @font-feature-values Otaru Kisa {
  4687   @annotation { circled: 1; black-boxed: 3; }
  4690 h3.title {
  4691   /* circled form defined for both fonts */
  4692   font-family: Taisho Gothic, Otaru Kisa;
  4693   font-variant: annotation(circled);
  4694 }</pre>
  4696   <p>Most font specific font-variant property values take a single value
  4697    (e.g. swash). The character-variant property value allows two values and
  4698    styleset allows an unlimited number. If a larger number of values are
  4699    assigned to a given name, a syntax error occurs and the entire
  4700    &lt;font-feature-values-declaration&gt; is ignored.
  4702   <p>For the styleset property value, multiple values indicate the style sets
  4703    to be enabled. Values between 1 and 99 enable OpenType features <span
  4704    class=tag>ss01</span> through <span class=tag>ss99</span>. However, the
  4705    OpenType standard only officially defines <span class=tag>ss01</span>
  4706    through <span class=tag>ss20</span>. Values greater than 99 or equal to 0
  4707    are ignored but do not generate a syntax error when parsed.
  4709   <pre>@font-feature-values Mars Serif {
  4710   @styleset {
  4711     alt-g: 1;        /* implies ss01 = 1 */
  4712     curly-quotes: 3; /* implies ss03 = 1 */
  4713     code: 4 5;       /* implies ss04 = 1, ss05 = 1 */
  4716   @styleset {
  4717     dumb: 125;        /* &gt;99, ignored */
  4720   @swash {
  4721     swishy: 3 5;     /* more than 1 value for swash, syntax error */
  4725 p.codeblock {
  4726   /* implies ss03 = 1, ss04 = 1, ss05 = 1 */
  4727   font-variant-alternates: styleset(curly-quotes, code);
  4728 }</pre>
  4730   <p>For character-variant, a single value between 1 and 99 indicates the
  4731    enabling of OpenType feature <span class=tag>cv01</span> through <span
  4732    class=tag>cv99</span>. For OpenType fonts, values greater than 99 or equal
  4733    to 0 are ignored but do not generate a syntax error when parsed. When two
  4734    values are listed, the first value indicates the feature used and the
  4735    second the value passed for that feature. When two value names imply
  4736    different settings for the same underlying feature the last setting is
  4737    used.
  4739   <pre>@font-feature-values MM Greek {
  4740   @character-variant { alpha-2: 1 2; }   /* implies cv01 = 2 */
  4741   @character-variant { beta-3: 2 3; }    /* implies cv02 = 3 */
  4742   @character-variant { epsilon: 5 3 6; } /* more than 2 values, syntax error, ignored */
  4743   @character-variant { gamma: 12; }      /* implies cv12 = 1 */
  4744   @character-variant { zeta:   20 3; }   /* implies cv20 = 3 */
  4745   @character-variant { zeta-2: 20 2; }   /* implies cv20 = 2 */
  4746   @character-variant { silly: 105; }     /* &gt;99, ignored */
  4747   @character-variant { dumb: 323 3; }    /* &gt;99, ignored */
  4750 #title {
  4751   /* use the third alternate beta, first alternate gamma */
  4752   font-variant-alternates: character-variant(beta-3, gamma);
  4755 p {
  4756   /* zeta-2 follows zeta, implies cv20 = 2  */
  4757   font-variant-alternates: character-variant(zeta, zeta-2);
  4760 .special {
  4761   /* zeta follows zeta-2, implies cv20 = 3  */
  4762   font-variant-alternates: character-variant(zeta-2, zeta);
  4763 }</pre>
  4765   <p>See the <a href="#om-fontfeaturevalues">object model reference
  4766    section</a> for a description of the interfaces used to modify these rules
  4767    via the CSS Object Model.
  4769   <div class=figure><img alt="Matching text on Byzantine seals using
  4770    character variants" src=byzantineseal.png>
  4771    <p class=caption>Byzantine seal text displayed with character variants
  4772   </div>
  4774   <div class=example>
  4775    <p>In the figure above, the text in red is rendered using a font
  4776     containing character variants that mimic the character forms found on a
  4777     Byzantine seal from the 8th century A.D. Two lines below is the same text
  4778     displayed in a font without variants. Note the two variants for U and N
  4779     used on the seal.</p>
  4781    <pre>@font-feature-values Athena Ruby {
  4782   @character-variant {
  4783     leo-B: 2 1;
  4784     leo-M: 13 3;
  4785     leo-alt-N: 14 1;
  4786     leo-N: 14 2;
  4787     leo-T: 20 1;
  4788     leo-U: 21 2;
  4789     leo-alt-U: 21 4;
  4793 p {
  4794   font-variant: discretionary-ligatures,
  4795                 character-variant(leo-B, leo-M, leo-N, leo-T, leo-U);
  4798 span.alt-N {
  4799   font-variant-alternates: character-variant(leo-alt-N);
  4802 span.alt-U {
  4803   font-variant-alternates: character-variant(leo-alt-U);
  4806 &lt;p>ENO....UP͞RSTU&lt;span class="alt-U">U&lt;/span>͞&lt;span class="alt-U">U&lt;/span>ΚΑΙTỤẠG̣IUPNS&lt;/p>
  4808 &lt;p>LEON|ΚΑΙCONSTA|NTI&lt;span class="alt-N">N&lt;/span>OS..|STOIBAṢ.|LIṢROM|AIO&lt;span class="alt-N">N&lt;/span>&lt;/p>
  4809 </pre>
  4810   </div>
  4812   <h3 id=font-variant-east-asian-prop><span class=secno>6.10 </span>East
  4813    Asian text rendering: the <a
  4814    href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
  4815    property</h3>
  4817   <table class=propdef id=namefont-variant-east-asianvaluenormal-l>
  4818    <tbody>
  4819     <tr>
  4820      <td>Name:
  4822      <td><dfn
  4823       id=propdef-font-variant-east-asian>font-variant-east-asian</dfn>
  4825     <tr>
  4826      <td>Value:
  4828      <td><a href="#font-variant-east-asian-normal-value"
  4829       title="normal!!font-variant-east-asian">normal</a> | [ <a
  4830       href="#east-asian-variant-values"><var>&lt;east-asian-variant-values&gt;</var></a>
  4831       || <a
  4832       href="#east-asian-width-values"><var>&lt;east-asian-width-values&gt;</var></a>
  4833       || <a href="#ruby">ruby</a> ]
  4835     <tr>
  4836      <td>Initial:
  4838      <td>normal
  4840     <tr>
  4841      <td>Applies to:
  4843      <td>all elements
  4845     <tr>
  4846      <td>Inherited:
  4848      <td>yes
  4850     <tr>
  4851      <td>Percentages:
  4853      <td>N/A
  4855     <tr>
  4856      <td>Media:
  4858      <td>visual
  4860     <tr>
  4861      <td>Computed value:
  4863      <td>as specified
  4865     <tr>
  4866      <td>Animatable:
  4868      <td>no
  4869   </table>
  4871   <p>Allows control of glyph substitution and sizing in East Asian text.
  4873   <pre
  4874    class=prod><dfn id=east-asian-variant-values><var>&lt;east-asian-variant-values&gt;</var></dfn> = [ <a href="#jis78">jis78</a> | <a href="#jis83">jis83</a> | <a href="#jis90">jis90</a> | <a href="#jis04">jis04</a> | <a href="#simplified">simplified</a> | <a href="#traditional">traditional</a> ]</pre>
  4876   <pre
  4877    class=prod><dfn id=east-asian-width-values><var>&lt;east-asian-width-values&gt;</var></dfn>   = [ <a href="#full-width">full-width</a> | <a href="#proportional-width">proportional-width</a> ]</pre>
  4879   <p>Individual values have the following meanings:
  4881   <dl>
  4882    <dt><dfn id=font-variant-east-asian-normal-value
  4883     title="normal!!font-variant-east-asian">normal</dfn>
  4885    <dd>None of the features listed below are enabled.
  4887    <dt><dfn id=jis78>jis78</dfn>
  4889    <dd>Enables rendering of JIS78 forms (OpenType feature: <span
  4890     class=tag>jp78</span>).
  4891   </dl>
  4893   <div class=featex><img alt="JIS78 form example" src=jp78.png></div>
  4895   <dl>
  4896    <dt><dfn id=jis83>jis83</dfn>
  4898    <dd>Enables rendering of JIS83 forms (OpenType feature: <span
  4899     class=tag>jp83</span>).
  4901    <dt><dfn id=jis90>jis90</dfn>
  4903    <dd>Enables rendering of JIS90 forms (OpenType feature: <span
  4904     class=tag>jp90</span>).
  4906    <dt><dfn id=jis04>jis04</dfn>
  4908    <dd>Enables rendering of JIS2004 forms (OpenType feature: <span
  4909     class=tag>jp04</span>).
  4910     <p>The various JIS variants reflect the glyph forms defined in different
  4911      Japanese national standards. Fonts generally include glyphs defined by
  4912      the most recent national standard but it's sometimes necessary to use
  4913      older variants, to match signage for example.</p>
  4915    <dt><dfn id=simplified>simplified</dfn>
  4917    <dd>Enables rendering of simplified forms (OpenType feature: <span
  4918     class=tag>smpl</span>).
  4919     <p>The ‘<a href="#simplified"><code
  4920      class=property>simplified</code></a>’ and ‘<a
  4921      href="#traditional"><code class=property>traditional</code></a>’
  4922      values allow control over the glyph forms for characters which have been
  4923      simplified over time but for which the older, traditional form is still
  4924      used in some contexts. The exact set of characters and glyph forms will
  4925      vary to some degree by context for which a given font was designed.</p>
  4927    <dt><dfn id=traditional>traditional</dfn>
  4929    <dd>Enables rendering of traditional forms (OpenType feature: <span
  4930     class=tag>trad</span>).
  4931   </dl>
  4933   <div class=featex><img alt="tradtional form example" src=trad.png></div>
  4935   <dl>
  4936    <dt><dfn id=full-width>full-width</dfn>
  4938    <dd>Enables rendering of full-width variants (OpenType feature: <span
  4939     class=tag>fwid</span>).
  4941    <dt><dfn id=proportional-width>proportional-width</dfn>
  4943    <dd>Enables rendering of proportionally-spaced variants (OpenType feature:
  4944     <span class=tag>pwid</span>).
  4945   </dl>
  4947   <div class=featex><img alt="proportionally spaced Japanese example"
  4948    src=pwid.png></div>
  4950   <dl>
  4951    <dt><dfn id=ruby>ruby</dfn>
  4953    <dd>Enables display of ruby variant glyphs (OpenType feature: <span
  4954     class=tag>ruby</span>). Since ruby text is generally smaller than the
  4955     associated body text, font designers can design special glyphs for use
  4956     with ruby that are more readable than scaled down versions of the default
  4957     glyphs. Only glyph selection is affected, there is no associated font
  4958     scaling or other change that affects line layout. The red ruby text below
  4959     is shown with default glyphs (top) and with ruby variant glyphs (bottom).
  4960     Note the slight difference in stroke thickness.
  4961   </dl>
  4963   <div class=featex><img alt="ruby variant example" src=rubyshinkansen.png></div>
  4965   <h3 id=font-variant-prop><span class=secno>6.11 </span>Overall shorthand
  4966    for font rendering: the <a href="#propdef-font-variant">font-variant</a>
  4967    property</h3>
  4969   <table class=propdef id=namefont-variantvaluenormal-none-ltcommo>
  4970    <tbody>
  4971     <tr>
  4972      <td>Name:
  4974      <td><dfn id=propdef-font-variant
  4975       title="font-variant!!property">font-variant</dfn>
  4977     <tr>
  4978      <td>Value:
  4980      <td><a href="#font-variant-normal-value"
  4981       title="normal!!font-variant">normal</a> | <a
  4982       href="#font-variant-none-value" title="none!!font-variant">none</a> | [
  4983       <a href="#common-lig-values"><var>&lt;common-lig-values&gt;</var></a>
  4984       || <a
  4985       href="#discretionary-lig-values"><var>&lt;discretionary-lig-values&gt;</var></a>
  4986       || <a
  4987       href="#historical-lig-values"><var>&lt;historical-lig-values&gt;</var></a>
  4988       || <a
  4989       href="#contextual-alt-values"><var>&lt;contextual-alt-values&gt;</var></a>
  4990       || <a href="#stylistic"><var
  4991       title=stylistic>stylistic(&lt;feature-value-name&gt;)</var></a> || <a
  4992       href="#historical-forms"><var>historical-forms</var></a> || <a
  4993       href="#styleset"><var
  4994       title=styleset>styleset(&lt;feature-value-name&gt; #)</var></a> || <a
  4995       href="#character-variant"><var
  4996       title=character-variant>character-variant(&lt;feature-value-name&gt;
  4997       #)</var></a> || <a href="#swash"><var
  4998       title=swash>swash(&lt;feature-value-name&gt;)</var></a> || <a
  4999       href="#ornaments"><var
  5000       title=ornaments>ornaments(&lt;feature-value-name&gt;)</var></a> || <a
  5001       href="#annotation"><var
  5002       title=annotation>annotation(&lt;feature-value-name&gt;)</var></a> || [
  5003       <a href="#small-caps"><i>small-caps</i></a> | <a
  5004       href="#all-small-caps"><i>all-small-caps</i></a> | <a
  5005       href="#petite-caps"><i>petite-caps</i></a> | <a
  5006       href="#all-petite-caps"><i>all-petite-caps</i></a> | <a
  5007       href="#unicase"><i>unicase</i></a> | <a
  5008       href="#titling-caps"><i>titling-caps</i></a> ] || <a
  5009       href="#numeric-figure-values"><var>&lt;numeric-figure-values&gt;</var></a>
  5010       || <a
  5011       href="#numeric-spacing-values"><var>&lt;numeric-spacing-values&gt;</var></a>
  5012       || <a
  5013       href="#numeric-fraction-values"><var>&lt;numeric-fraction-values&gt;</var></a>
  5014       || <a href="#ordinal"><i>ordinal</i></a> || <a
  5015       href="#slashed-zero"><i>slashed-zero</i></a> || <a
  5016       href="#east-asian-variant-values"><var>&lt;east-asian-variant-values&gt;</var></a>
  5017       || <a
  5018       href="#east-asian-width-values"><var>&lt;east-asian-width-values&gt;</var></a>
  5019       || <a href="#ruby"><i>ruby</i></a> ]
  5021     <tr>
  5022      <td>Initial:
  5024      <td>normal
  5026     <tr>
  5027      <td>Applies to:
  5029      <td>all elements
  5031     <tr>
  5032      <td>Inherited:
  5034      <td>yes
  5036     <tr>
  5037      <td>Percentages:
  5039      <td>see individual properties
  5041     <tr>
  5042      <td>Media:
  5044      <td>visual
  5046     <tr>
  5047      <td>Computed value:
  5049      <td>see individual properties
  5051     <tr>
  5052      <td>Animatable:
  5054      <td>see individual properties
  5055   </table>
  5057   <p>The value <dfn id=font-variant-normal-value
  5058    title="normal!!font-variant">‘<code
  5059    class=property>normal</code>’</dfn> resets all other font feature
  5060    properties to their inital value. The <dfn id=font-variant-none-value
  5061    title="none!!font-variant">‘<code class=property>none</code>’</dfn>
  5062    value sets ‘<a href="#propdef-font-variant-ligatures"><code
  5063    class=property>font-variant-ligatures</code></a>’ to ‘<code
  5064    class=property>none</code>’ and resets all other font feature properties
  5065    to their initial value. Like other shorthands, using <a
  5066    href="#propdef-font-variant" title="font-variant!!property">‘<code
  5067    class=property>font-variant</code>’</a> resets unspecified font-variant
  5068    subproperties to their initial values. It does not reset the values of
  5069    either ‘<a href="#propdef-font-language-override"><code
  5070    class=property>font-language-override</code></a>’ or <a
  5071    href="#propdef-font-feature-settings"
  5072    title="font-feature-settings!!property">‘<code
  5073    class=property>font-feature-settings</code>’</a>.
  5075   <h3 id=font-feature-settings-prop><span class=secno>6.12 </span>Low-level
  5076    font feature settings control: the <a
  5077    href="#propdef-font-feature-settings">font-feature-settings</a> property</h3>
  5079   <table class=propdef id=namefont-feature-settingsvaluenormal-ltf>
  5080    <tbody>
  5081     <tr>
  5082      <td>Name:
  5084      <td><dfn id=propdef-font-feature-settings
  5085       title="font-feature-settings!!property">font-feature-settings</dfn>
  5087     <tr>
  5088      <td>Value:
  5090      <td><a href="#font-feature-settings-normal-value"
  5091       title="normal!!font-feature-settings">normal</a> | <a
  5092       href="#feature-tag-value"><var>&lt;feature-tag-value&gt;</var></a> #
  5094     <tr>
  5095      <td>Initial:
  5097      <td>normal
  5099     <tr>
  5100      <td>Applies to:
  5102      <td>all elements
  5104     <tr>
  5105      <td>Inherited:
  5107      <td>yes
  5109     <tr>
  5110      <td>Percentages:
  5112      <td>N/A
  5114     <tr>
  5115      <td>Media:
  5117      <td>visual
  5119     <tr>
  5120      <td>Computed value:
  5122      <td>as specified
  5124     <tr>
  5125      <td>Animatable:
  5127      <td>no
  5128   </table>
  5130   <p>This property provides low-level control over OpenType font features. It
  5131    is intended as a way of providing access to font features that are not
  5132    widely used but are needed for a particular use case. A value of <dfn
  5133    id=font-feature-settings-normal-value
  5134    title="normal!!font-feature-settings">‘<code
  5135    class=property>normal</code>’</dfn> means that no change in glyph
  5136    selection or positioning occurs due to this property.
  5138   <p>
  5140   <pre>/* enable small caps and use second swash alternate */
  5141 font-feature-settings: "smcp", "swsh" 2;</pre>
  5143   <p>Feature tag values have the following syntax:
  5145   <pre
  5146    class=prod><dfn id=feature-tag-value><var>&lt;feature-tag-value&gt;</var></dfn> = &lt;string&gt; [ &lt;integer&gt; | on | off ]?</pre>
  5148   <p>The &lt;string&gt; is a case-sensitive OpenType feature tag. As
  5149    specified in the OpenType specification, feature tags contain four ASCII
  5150    characters. Tag strings longer or shorter than four characters, or
  5151    containing characters outside the U+20–7E codepoint range are invalid.
  5152    User agents must not use a feature tag created by truncating or padding
  5153    the string to four characters. Feature tags need only match a feature tag
  5154    defined in the font, they are not limited to explicitly registered
  5155    OpenType features. Fonts defining custom feature tags should follow the <a
  5156    href="http://www.microsoft.com/typography/otspec/featuretags.htm">tag name
  5157    rules</a> defined in the OpenType specification <a
  5158    href="#OPENTYPE-FEATURES"
  5159    rel=biblioentry>[OPENTYPE-FEATURES]<!--{{!OPENTYPE-FEATURES}}--></a>.
  5160    Feature tags not present in the font are ignored; a user agent must not
  5161    attempt to synthesize fallback behavior based on these feature tags.
  5163   <p>This means that explicitly disabling the <span class=tag>kern</span>
  5164    feature will not affect the application of kerning data found in the
  5165    ‘<code class=property>kern</code>’ table (as opposed to kerning data
  5166    associated with the <span class=tag>kern</span> feature in the ‘<code
  5167    class=property>GPOS</code>’ table). Authors should use the ‘<a
  5168    href="#propdef-font-kerning"><code
  5169    class=property>font-kerning</code></a>’ property to explictly enable or
  5170    disable kerning since this property affects both types of kerning.
  5172   <p>If present, a value indicates an index used for glyph selection. An
  5173    &lt;integer&gt; value must be 0 or greater. A value of 0 indicates that
  5174    the feature is disabled. For boolean features, a value of 1 enables the
  5175    feature. For non-boolean features, a value of 1 or greater enables the
  5176    feature and indicates the feature selection index. A value of ‘<code
  5177    class=property>on</code>’ is synonymous with 1 and ‘<code
  5178    class=property>off</code>’ is synonymous with 0. If the value is
  5179    omitted, a value of 1 is assumed.
  5181   <pre>
  5182 font-feature-settings: "dlig" 1;       /* dlig=1 enable discretionary ligatures */
  5183 font-feature-settings: "smcp" on;      /* smcp=1 enable small caps */
  5184 font-feature-settings: 'c2sc';         /* c2sc=1 enable caps to small caps */
  5185 font-feature-settings: "liga" off;     /* liga=0 no common ligatures */
  5186 font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms */
  5187 font-feature-settings: "tnum" "hist";  /* invalid, need a comma-delimited list */
  5188 font-feature-settings: "palin" off;    /* good idea but invalid tagname */
  5189 font-feature-settings: "PKRN";         /* PKRN=1 enable custom feature */
  5190 font-feature-settings: dlig;           /* invalid, tag must be a string */
  5191 </pre>
  5193   <p>When values greater than the range supported by the font are specified,
  5194    the behavior is explicitly undefined. For boolean features, in general
  5195    these will enable the feature. For non-boolean features, out of range
  5196    values will in general be equivalent to a 0 value. However, in both cases
  5197    the exact behavior will depend upon the way the font is designed
  5198    (specifically, which type of lookup is used to define the feature).
  5200   <p>Authors should generally use <a href="#propdef-font-variant"
  5201    title="font-variant!!property">‘<code
  5202    class=property>font-variant</code>’</a> and its related subproperties
  5203    whenever possible and only use this property for special cases where its
  5204    use is the only way of accessing a particular infrequently used font
  5205    feature.
  5207   <p>Although specifically defined for OpenType feature tags, feature tags
  5208    for other modern font formats that support font features may be added in
  5209    the future. Where possible, features defined for other font formats should
  5210    attempt to follow the pattern of registered OpenType tags.
  5212   <div class=example>
  5213    <p>The Japanese text below will be rendered with half-width kana
  5214     characters:</p>
  5216    <pre lang=ja>
  5217 body { font-feature-settings: "hwid"; /* Half-width OpenType feature */ }
  5219 &lt;p>毎日<a href="http://images.google.com/images?q=%E3%82%AB%E3%83%AC%E3%83%BC" style="text-decoration: none;">カレー</a>食べてるのに、飽きない&lt;/p>
  5220 </pre>
  5221   </div>
  5223   <h3 id=font-language-override-prop><span class=secno>6.13 </span>Font
  5224    language override: the <a
  5225    href="#propdef-font-language-override">font-language-override</a> property</h3>
  5227   <table class=propdef id=namefont-language-overridevaluenormal-lt>
  5228    <tbody>
  5229     <tr>
  5230      <td>Name:
  5232      <td><dfn id=propdef-font-language-override>font-language-override</dfn>
  5234     <tr>
  5235      <td>Value:
  5237      <td><a href="#font-language-override-normal-value"
  5238       title="normal!!font-language-override">normal</a> | <a
  5239       href="#font-language-override-string-value"><var>&lt;string&gt;</var></a>
  5241     <tr>
  5242      <td>Initial:
  5244      <td><a href="#font-language-override-normal-value"
  5245       title="normal!!font-language-override">normal</a>
  5247     <tr>
  5248      <td>Applies to:
  5250      <td>all elements
  5252     <tr>
  5253      <td>Inherited:
  5255      <td>yes
  5257     <tr>
  5258      <td>Percentages:
  5260      <td>N/A
  5262     <tr>
  5263      <td>Media:
  5265      <td>visual
  5267     <tr>
  5268      <td>Computed value:
  5270      <td>as specified
  5272     <tr>
  5273      <td>Animatable:
  5275      <td>no
  5276   </table>
  5278   <p>Normally, authors can control the use of language-specific glyph
  5279    substitutions and positioning by setting the content language of an
  5280    element, as <a href="#language-specific-support">described above</a>:
  5282   <pre>&lt;!-- Display text using S'gaw Karen specific features -->
  5283 &ltp lang="ksw">...&lt;/p></pre>
  5285   <p>In some cases, authors may need to specify a language system that
  5286    differs from the content language, for example due to the need to mimic
  5287    another language's typographic traditions. The ‘<a
  5288    href="#propdef-font-language-override"><code
  5289    class=property>font-language-override</code></a>’ property allows
  5290    authors to explicitly specify the language system of the font, overriding
  5291    the language system implied by the content language.
  5293   <p>Values have the following meanings:
  5295   <dl>
  5296    <dt><dfn id=font-language-override-normal-value
  5297     title="normal!!font-language-override">normal</dfn>
  5299    <dd>specifies that when rendering with OpenType fonts, the content
  5300     language of the element is used to infer the OpenType language system
  5302    <dt><dfn
  5303     id=font-language-override-string-value><var>&lt;string&gt;</var></dfn>
  5305    <dd>single three-letter OpenType <a
  5306     href="http://www.microsoft.com/typography/otspec/languagetags.htm">language
  5307     system tag</a>, specifies the OpenType language system to be used instead
  5308     of the language system implied by the language of the element
  5309   </dl>
  5311   <div class=example>
  5312    <p>The <a href="http://www.un.org/en/documents/udhr/index.shtml">Universal
  5313     Declaration of Human Rights</a> has been translated into a wide variety
  5314     of languages. In Turkish, Article 9 of this document might be marked up
  5315     as below:</p>
  5317    <pre lang=tr>&lt;body lang="tr">
  5319 &lt;h4>Madde 9&lt;/h4>
  5320 &lt;p>Hiç kimse keyfi olarak tutuklanamaz, alıkonulanamaz veya sürülemez.&lt;/p>
  5321 </pre>
  5323    <p>Here the user agent uses the value of the ‘<code
  5324     class=property>lang</code>’ attribute when rendering text and
  5325     appropriately renders this text without ‘<code
  5326     class=property>fi</code>’ ligatures. There is no need to use the ‘<a
  5327     href="#propdef-font-language-override"><code
  5328     class=property>font-language-override</code></a>’ property.</p>
  5330    <p>However, a given font may lack support for a specific language. In this
  5331     situation authors may need to use the typographic conventions of a
  5332     related language that are supported by that font:</p>
  5334    <pre lang=mk>&lt;body lang="mk">     &lt;!-- Macedonian lang code --&gt;
  5336 body { font-language-override: "SRB"; /* Serbian OpenType language tag */ }
  5338 &lt;h4>Члeн 9&lt;/h4>
  5339 &lt;p>Никoj чoвeк нeмa дa бидe пoдлoжeн нa прoизвoлнo aпсeњe, притвoр или прoгoнувaњe.&lt;/p>
  5341 </pre>
  5343    <p>The Macedonian text here will be rendered using Serbian typographic
  5344     conventions, with the assumption that the font specified supports
  5345     Serbian.</p>
  5346   </div>
  5348   <p><a id=rendering-considerations></a>
  5350   <h2 id=font-feature-resolution><span class=secno>7 </span>Font Feature
  5351    Resolution</h2>
  5353   <p>As described in the previous section, font features can be enabled in a
  5354    variety of ways, either via the use of <a href="#propdef-font-variant"
  5355    title="font-variant!!property">‘<code
  5356    class=property>font-variant</code>’</a> or <a
  5357    href="#propdef-font-feature-settings"
  5358    title="font-feature-settings!!property">‘<code
  5359    class=property>font-feature-settings</code>’</a> in a style rule or
  5360    within an <code>@font-face</code> rule. The resolution order for the union
  5361    of these settings is defined below. Features defined via CSS properties
  5362    are applied on top of layout engine default features.
  5364   <h3 id=default-features><span class=secno>7.1 </span>Default features</h3>
  5366   <p>For OpenType fonts, user agents must enable the default features defined
  5367    in the OpenType documentation for a given script and writing mode.
  5368    Required ligatures, common ligatures and contextual forms must be enabled
  5369    by default (OpenType features: <span class=tag>rlig, liga, clig,
  5370    calt</span>), along with localized forms (OpenType feature: <span
  5371    class=tag>locl</span>), and features required for proper display of
  5372    composed characters and marks (OpenType features: <span class=tag>ccmp,
  5373    mark, mkmk</span>). These features must always be enabled, even when the
  5374    value of the <a href="#propdef-font-variant"
  5375    title="font-variant!!property">‘<code
  5376    class=property>font-variant</code>’</a> and <a
  5377    href="#propdef-font-feature-settings"
  5378    title="font-feature-settings!!property">‘<code
  5379    class=property>font-feature-settings</code>’</a> properties is ‘<a
  5380    href="#normal"><code class=property>normal</code></a>’. Individual
  5381    features are only disabled when explicitly overridden by the author, as
  5382    when ‘<a href="#propdef-font-variant-ligatures"><code
  5383    class=property>font-variant-ligatures</code></a>’ is set to ‘<a
  5384    href="#no-common-ligatures"><code
  5385    class=property>no-common-ligatures</code></a>’. For handling complex
  5386    scripts such as <a
  5387    href="http://www.microsoft.com/typography/otfntdev/arabicot/features.aspx">Arabic</a>,
  5388    <a
  5389    href="http://www.microsoft.com/typography/otfntdev/mongolot/features.htm">Mongolian</a>
  5390    or <a
  5391    href="http://www.microsoft.com/typography/otfntdev/devanot/features.aspx">Devanagari</a>
  5392    additional features are required. For upright text within vertical text
  5393    runs, vertical alternates (OpenType feature: <span class=tag>vert</span>)
  5394    must be enabled.
  5396   <h3 id=feature-precedence><span class=secno>7.2 </span>Feature precedence</h3>
  5398   <p>General and font specific font feature property settings are resolved in
  5399    the order below, in ascending precedence order. This ordering is used to
  5400    construct a combined list of font features that affect a given text run.
  5402   <ol>
  5403    <li>Font features enabled by default, including features required for a
  5404     given script.
  5406    <li>If the font is defined via an <code>@font-face</code> rule, the font
  5407     features implied by the font-variant descriptor in the
  5408     <code>@font-face</code> rule.
  5410    <li>If the font is defined via an <code>@font-face</code> rule, the font
  5411     features implied by the font-feature-settings descriptor in the
  5412     <code>@font-face</code> rule.
  5414    <li>Feature settings determined by properties other than <a
  5415     href="#propdef-font-variant" title="font-variant!!property">‘<code
  5416     class=property>font-variant</code>’</a> or <a
  5417     href="#propdef-font-feature-settings"
  5418     title="font-feature-settings!!property">‘<code
  5419     class=property>font-feature-settings</code>’</a>. For example, setting
  5420     a non-default value for the ‘<code
  5421     class=property>letter-spacing</code>’ property disables ligatures.
  5423    <li>Font features implied by the value of the <a
  5424     href="#propdef-font-variant" title="font-variant!!property">‘<code
  5425     class=property>font-variant</code>’</a> property, the related
  5426     font-variant subproperties and any other CSS property that may use
  5427     OpenType features (e.g. the ‘<a href="#propdef-font-kerning"><code
  5428     class=property>font-kerning</code></a>’ property).
  5430    <li>Font features implied by the value of <a
  5431     href="#propdef-font-feature-settings"
  5432     title="font-feature-settings!!property">‘<code
  5433     class=property>font-feature-settings</code>’</a> property.
  5434   </ol>
  5436   <p>This ordering allows authors to set up a general set of defaults for
  5437    fonts within their <code>@font-face</code> rules, then override them with
  5438    property settings for specific elements. General property settings
  5439    override the settings in <code>@font-face</code> rules and low-level font
  5440    feature settings override <a href="#propdef-font-variant"
  5441    title="font-variant!!property">‘<code
  5442    class=property>font-variant</code>’</a> property settings.
  5444   <p>For situations where the combined list of font feature settings contains
  5445    more than one value for the same feature, the last value is used. When a
  5446    font lacks support for a given underlying font feature, text is simply
  5447    rendered as if that font feature was not enabled; font fallback does not
  5448    occur and no attempt is made to synthesize the feature except where
  5449    explicitly noted for specific properties.
  5451   <h3 id=feature-precedence-examples><span class=secno>7.3 </span>Feature
  5452    precedence examples</h3>
  5454   <div class=example>
  5455    <p>With the styles below, numbers are rendered proportionally when used
  5456     within a paragraph but are shown in tabular form within tables of prices:</p>
  5458    <pre>body {
  5459   font-variant-numeric: proportional-nums;
  5462 table.prices td {
  5463   font-variant-numeric: tabular-nums;
  5465 </pre>
  5466   </div>
  5468   <div class=example>
  5469    <p>When the font-variant descriptor is used within an
  5470     <code>@font-face</code> rule, it only applies to the font defined by that
  5471     rule.</p>
  5473    <pre>@font-face {
  5474   font-family: MainText;
  5475   src: url(http://example.com/font.ttf);
  5476   font-variant: oldstyle-nums proportional-nums styleset(1,3);
  5479 body {
  5480   font-family: MainText, Helvetica;
  5483 table.prices td {
  5484   font-variant-numeric: tabular-nums;
  5486 </pre>
  5488    <p>In this case, old-style numerals will be used throughout but only where
  5489     the font "MainText" is used. Just as in the previous example, tabular
  5490     values will be used in price tables since ‘<a
  5491     href="#tabular-nums"><code class=property>tabular-nums</code></a>’
  5492     appears in a general style rule and its use is mutually exclusive with
  5493     ‘<a href="#proportional-nums"><code
  5494     class=property>proportional-nums</code></a>’. Stylistic alternate sets
  5495     will only be used where MainText is used.</p>
  5496   </div>
  5498   <div class=example>
  5499    <p>The <code>@font-face</code> rule can also be used to access font
  5500     features in locally available fonts via the use of <code>local()</code>
  5501     in the ‘<a href="#descdef-src"><code class=property>src</code></a>’
  5502     descriptor of the <code>@font-face</code> definition:</p>
  5504    <pre>@font-face {
  5505   font-family: BodyText;
  5506   src: local("HiraMaruPro-W4");
  5507   font-variant: proportional-width;
  5508   font-feature-settings: "ital"; /* Latin italics within CJK text feature */
  5511 body { font-family: BodyText, serif; }
  5512 </pre>
  5514    <p>If available, a Japanese font "Hiragino Maru Gothic" will be used. When
  5515     text rendering occurs, Japanese kana will be proportionally spaced and
  5516     Latin text will be italicised. Text rendered with the fallback serif font
  5517     will use default rendering properties.</p>
  5518   </div>
  5520   <div class=example>
  5521    <p>In the example below, discretionary ligatures are enabled only for a
  5522     downloadable font but are disabled within spans of class "special":</p>
  5524    <pre>@font-face {
  5525   font-family: main;
  5526   src: url(fonts/ffmeta.woff) format("woff");
  5527   font-variant: discretionary-ligatures;
  5530 body         { font-family: main, Helvetica; }
  5531 span.special { font-variant-ligatures: no-discretionary-ligatures; }
  5532 </pre>
  5534    <p>Adding an discretionary style rule with the <code>@font-face</code>
  5535     above:</p>
  5537    <pre>body         { font-family: main, Helvetica; }
  5538 span         { font-feature-settings: "dlig"; }
  5539 span.special { font-variant-ligatures: no-discretionary-ligatures; }
  5540 </pre>
  5542    <p>Within spans of class "special", discretionary ligatures <em>will</em>
  5543     be rendered. This is because both the <a
  5544     href="#propdef-font-feature-settings"
  5545     title="font-feature-settings!!property">‘<code
  5546     class=property>font-feature-settings</code>’</a> and ‘<a
  5547     href="#propdef-font-variant-ligatures"><code
  5548     class=property>font-variant-ligatures</code></a>’ properties apply to
  5549     these spans. Although the ‘<code class=css>no-discretionary
  5550     ligatures</code>’ setting of ‘<a
  5551     href="#propdef-font-variant-ligatures"><code
  5552     class=property>font-variant-ligatures</code></a>’ effectively disables
  5553     the OpenType <span class=tag>dlig</span> feature, because the <a
  5554     href="#propdef-font-feature-settings"
  5555     title="font-feature-settings!!property">‘<code
  5556     class=property>font-feature-settings</code>’</a> is resolved after
  5557     that, the ‘<code class=property>dlig</code>’ value reenables
  5558     discretionary ligatures.</p>
  5559   </div>
  5561   <h2 id=object-model><span class=secno>8 </span>Object Model</h2>
  5563   <p>The contents of <code>@font-face</code> and
  5564    <code>@font-feature-values</code> rules can be accessed via the following
  5565    extensions to the CSS Object Model.
  5567   <h3 id=om-fontface><span class=secno>8.1 </span>The <a
  5568    href="#cssfontfacerule"><code>CSSFontFaceRule</code></a> interface</h3>
  5570   <p>The <dfn id=cssfontfacerule>CSSFontFaceRule</dfn> interface represents a
  5571    <code>@font-face</code> rule.
  5573   <pre class=idl>
  5574 interface CSSFontFaceRule : CSSRule {
  5575   attribute DOMString family;
  5576   attribute DOMString src;
  5577   attribute DOMString style;
  5578   attribute DOMString weight;
  5579   attribute DOMString stretch;
  5580   attribute DOMString unicodeRange;
  5581   attribute DOMString variant;
  5582   attribute DOMString featureSettings;
  5583 }</pre>
  5585   <p>The DOM Level 2 Style specification <a href="#DOM-LEVEL-2-STYLE"
  5586    rel=biblioentry>[DOM-LEVEL-2-STYLE]<!--{{DOM-LEVEL-2-STYLE}}--></a>
  5587    defined a different variant of this rule. This definition supercedes that
  5588    one.
  5590   <h3 id=om-fontfeaturevalues><span class=secno>8.2 </span>The <a
  5591    href="#cssfontfeaturevaluesrule"><code>CSSFontFeatureValuesRule</code></a>
  5592    interface</h3>
  5594   <p>The <code>CSSRule</code> interface is extended as follows:
  5596   <pre class=idl>partial interface CSSRule {
  5597   const unsigned short FONT_FEATURE_VALUES_RULE = 14;
  5598 }</pre>
  5600   <p>The <dfn id=cssfontfeaturevaluesrule>CSSFontFeatureValuesRule</dfn>
  5601    interface represents a <code>@font-feature-values</code> rule.
  5603   <pre class=idl>interface CSSFontFeatureValuesRule : CSSRule {
  5604   readonly attribute DOMString familyList;
  5605   readonly attribute DOMString valueText;
  5606 };</pre>
  5608   <dl class=idl-attributes>
  5609    <dt><var>familyList</var> of type <code>DOMString</code>, readonly
  5611    <dd>The list of one or more font families for which a given set of feature
  5612     values is defined.
  5614    <dt><var>valueText</var> of type <code>DOMString</code>, readonly
  5616    <dd>Serialized set of feature values.
  5617   </dl>
  5619   <p class=issue>Should this be extended to make <a
  5620    href="#cssfontfeaturevaluesrule"><code>CSSFontFeatureValuesRule</code></a>
  5621    be a subclass of <code>CSSGroupingRule</code> with other CSSRule
  5622    subclasses for each value definition block?
  5624   <h2 class=no-num id=platform-props-to-css>Appendix A: Mapping platform font
  5625    properties to CSS properties</h2>
  5627   <p><em>This appendix is included as background for some of the problems and
  5628    situations that are described in other sections. It should be viewed as
  5629    informative only.</em>
  5631   <p>Font properties in CSS are designed to be independent of the underlying
  5632    font formats used; they can be used to specify bitmap fonts, Type1 fonts,
  5633    SVG fonts in addition to the common TrueType and OpenType fonts. But there
  5634    are facets of the TrueType and OpenType formats that often cause confusion
  5635    for authors and present challenges to implementers on different platforms.
  5637   <p>Originally developed at Apple, TrueType was designed as an outline font
  5638    format for both screen and print. Microsoft joined Apple in developing the
  5639    TrueType format and both platforms have supported TrueType fonts since
  5640    then. Font data in the TrueType format consists of a set of tables
  5641    distinguished with common four-letter tag names, each containing a
  5642    specific type of data. For example, naming information, including
  5643    copyright and license information, is stored in the ‘<code
  5644    class=property>name</code>’ table. The <a
  5645    href="#character-map"><em>character map</em></a> (‘<code
  5646    class=property>cmap</code>’) table contains a mapping of character
  5647    encodings to glyphs. Apple later added additional tables for supporting
  5648    enhanced typographic functionality; these are now called Apple Advanced
  5649    Typography, or AAT, fonts. Microsoft and Adobe developed a separate set of
  5650    tables for advanced typography and called their format OpenType <a
  5651    href="#OPENTYPE" rel=biblioentry>[OPENTYPE]<!--{{!OPENTYPE}}--></a>.
  5653   <p>In many cases the font data used under Microsoft Windows or Linux is
  5654    slightly different from the data used under Apple's Mac OS X because the
  5655    TrueType format allowed for explicit variation across platforms. This
  5656    includes font metrics, names and <a href="#character-map"><em>character
  5657    map</em></a> data.
  5659   <p>Specifically, font family name data is handled differently across
  5660    platforms. For TrueType and OpenType fonts these names are contained in
  5661    the ‘<code class=property>name</code>’ table, in name records with
  5662    name ID 1. Mulitple names can be stored for different locales, but
  5663    Microsoft recommends fonts always include at least a US English version of
  5664    the name. On Windows, Microsoft made the decision for backwards
  5665    compatibility to limit this family name to a maximum of four faces; for
  5666    larger groupings the "preferred family" (name ID 16) or "WWS family" (name
  5667    ID 21) can be used. Other platforms such as OSX don't have this
  5668    limitation, so the family name is used to define all possible groupings.
  5670   <p>Other name table data provides names used to uniquely identify a
  5671    specific face within a family. The full font name (name ID 4) and the
  5672    Postscript name (name ID 6) describe a single face uniquely. For example,
  5673    the bold face of the Gill Sans family has a fullname of "Gill Sans Bold"
  5674    and a Postscript name of "GillSans-Bold". There can be multiple localized
  5675    versions of the fullname for a given face, but the Postscript name is
  5676    always a unique name made from a limited set of ASCII characters.
  5678   <p>On various platforms, different names are used to search for a font. For
  5679    example, with the Windows GDI CreateIndirectFont API, either a family or
  5680    fullname can be used to lookup a face, while on Mac OS X the
  5681    CTFontCreateWithName API call is used to lookup a given face using the
  5682    fullname and Postscript name. Under Linux, the fontconfig API allows fonts
  5683    to be searched using any of these names. In situations where platform
  5684    API's automatically substitute other font choices, it may be necessary to
  5685    verify a returned font matches a given name.
  5687   <p>The weight of a given face can be determined via the usWeightClass field
  5688    of the OS/2 table or inferred from the style name (name ID 2). Likewise,
  5689    the width can be determined via the usWidthClass of the OS/2 table or
  5690    inferred from the style name. For historical reasons related to synthetic
  5691    bolding at weights 200 or lower with the Windows GDI API, font designers
  5692    have sometimes skewed values in the OS/2 table to avoid these weights.
  5694   <p>Rendering complex scripts that use contextual shaping such as Thai,
  5695    Arabic and Devanagari requires features present only in OpenType or AAT
  5696    fonts. Currently, complex script rendering is supported on Windows and
  5697    Linux using OpenType font features while both OpenType and AAT font
  5698    features are used under Mac OS X.
  5700   <h2 class=no-num id=ch-ch-ch-changes>Changes</h2>
  5702   <h3 class=no-num id=recent-changes> Changes from the <a
  5703    href="http://www.w3.org/TR/2013/WD-css3-fonts-20130212/">February 2013
  5704    CSS3 Fonts Working Draft</a></h3>
  5706   <p>Major changes include:
  5708   <ul>
  5709    <li>Moved font load events into a separate <a
  5710     href="http://dev.w3.org/csswg/css3-font-load-events/">spec</a>
  5712    <li>Tightened error handling rules for <code>@font-feature-values</code>
  5713     rules
  5715    <li>Added grammar productions for <code>@font-face</code> and
  5716     <code>@font-feature-values</code> rules
  5718    <li>Tightened definition of synthetic oblique
  5720    <li>Revised definition of ‘<a href="#descdef-unicode-range"><code
  5721     class=property>unicode-range</code></a>’ descriptor
  5722   </ul>
  5724   <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
  5726   <p>I'd like to thank Tal Leming, Jonathan Kew and Christopher Slye for all
  5727    their help and feedback. John Hudson was kind enough to take the time to
  5728    explain the subtleties of OpenType language tags and provided the example
  5729    of character variant usage for displaying text on Byzantine seals. Ken
  5730    Lunde and Eric Muller provided valuable feedback on CJK OpenType features
  5731    and Unicode variation selectors. The idea for supporting font features by
  5732    using font-variant subproperties originated with Håkon Wium Lie, Adam
  5733    Twardoch and Tal Leming. Elika Etemad supplied some of the initial design
  5734    ideas for the <code>@font-feature-values</code> rule. Thanks also to House
  5735    Industries for allowing the use of Ed Interlock in the discretionary
  5736    ligatures example.
  5738   <p>A special thanks to Robert Bringhurst for the sublime mind expansion
  5739    that is <em>The Elements of Typographic Style</em>.
  5741   <h2 class=no-num id=conformance> Conformance</h2>
  5743   <h3 class=no-num id=conventions> Document Conventions</h3>
  5745   <p>Conformance requirements are expressed with a combination of descriptive
  5746    assertions and RFC 2119 terminology. The key words “MUST”, “MUST
  5747    NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
  5748    “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
  5749    normative parts of this document are to be interpreted as described in RFC
  5750    2119. However, for readability, these words do not appear in all uppercase
  5751    letters in this specification.
  5753   <p>All of the text of this specification is normative except sections
  5754    explicitly marked as non-normative, examples, and notes. <a
  5755    href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
  5757   <p>Examples in this specification are introduced with the words “for
  5758    example” or are set apart from the normative text with
  5759    <code>class="example"</code>, like this:
  5761   <div class=example>
  5762    <p>This is an example of an informative example.
  5763   </div>
  5765   <p>Informative notes begin with the word “Note” and are set apart from
  5766    the normative text with <code>class="note"</code>, like this:
  5768   <p class=note>Note, this is an informative note.
  5770   <h3 class=no-num id=conformance-classes> Conformance Classes</h3>
  5772   <p>Conformance to CSS Fonts Level 3 Module is defined for three conformance
  5773    classes:
  5775   <dl>
  5776    <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
  5777     sheet</dfn>
  5779    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
  5780     style sheet</a>.
  5782    <dt><dfn id=renderer>renderer</dfn>
  5784    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
  5785     that interprets the semantics of a style sheet and renders documents that
  5786     use them.
  5788    <dt><dfn id=authoring-tool>authoring tool</dfn>
  5790    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
  5791     that writes a style sheet.
  5792   </dl>
  5794   <p>A style sheet is conformant to CSS Fonts Level 3 Module if all of its
  5795    declarations that use properties defined in this module have values that
  5796    are valid according to the generic CSS grammar and the individual grammars
  5797    of each property as given in this module.
  5799   <p>A renderer is conformant to CSS Fonts Level 3 Module if, in addition to
  5800    interpreting the style sheet as defined by the appropriate specifications,
  5801    it supports all the features defined by CSS Fonts Level 3 Module by
  5802    parsing them correctly and rendering the document accordingly. However,
  5803    the inability of a UA to correctly render a document due to limitations of
  5804    the device does not make the UA non-conformant. (For example, a UA is not
  5805    required to render color on a monochrome monitor.)
  5807   <p>An authoring tool is conformant to CSS Fonts Level 3 Module if it writes
  5808    style sheets that are syntactically correct according to the generic CSS
  5809    grammar and the individual grammars of each feature in this module, and
  5810    meet all other conformance requirements of style sheets as described in
  5811    this module.
  5813   <h3 class=no-num id=partial> Partial Implementations</h3>
  5815   <p>So that authors can exploit the forward-compatible parsing rules to
  5816    assign fallback values, CSS renderers <strong>must</strong> treat as
  5817    invalid (and <a
  5818    href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
  5819    appropriate</a>) any at-rules, properties, property values, keywords, and
  5820    other syntactic constructs for which they have no usable level of support.
  5821    In particular, user agents <strong>must not</strong> selectively ignore
  5822    unsupported component values and honor supported values in a single
  5823    multi-value property declaration: if any value is considered invalid (as
  5824    unsupported values must be), CSS requires that the entire declaration be
  5825    ignored.
  5827   <h3 class=no-num id=experimental> Experimental Implementations</h3>
  5829   <p>To avoid clashes with future CSS features, the CSS2.1 specification
  5830    reserves a <a
  5831    href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
  5832    syntax</a> for proprietary and experimental extensions to CSS.
  5834   <p>Prior to a specification reaching the Candidate Recommendation stage in
  5835    the W3C process, all implementations of a CSS feature are considered
  5836    experimental. The CSS Working Group recommends that implementations use a
  5837    vendor-prefixed syntax for such features, including those in W3C Working
  5838    Drafts. This avoids incompatibilities with future changes in the draft.
  5840   <h3 class=no-num id=testing> Non-Experimental Implementations</h3>
  5842   <p>Once a specification reaches the Candidate Recommendation stage,
  5843    non-experimental implementations are possible, and implementors should
  5844    release an unprefixed implementation of any CR-level feature they can
  5845    demonstrate to be correctly implemented according to spec.
  5847   <p>To establish and maintain the interoperability of CSS across
  5848    implementations, the CSS Working Group requests that non-experimental CSS
  5849    renderers submit an implementation report (and, if necessary, the
  5850    testcases used for that implementation report) to the W3C before releasing
  5851    an unprefixed implementation of any CSS features. Testcases submitted to
  5852    W3C are subject to review and correction by the CSS Working Group.
  5854   <p>Further information on submitting testcases and implementation reports
  5855    can be found from on the CSS Working Group's website at <a
  5856    href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
  5857    Questions should be directed to the <a
  5858    href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
  5859    mailing list.
  5861   <h2 class=no-num id=references>References</h2>
  5863   <h3 class=no-num id=normative-references>Normative References</h3>
  5864   <!--begin-normative-->
  5865   <!-- Sorted by label -->
  5867   <dl class=bibliography>
  5868    <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
  5869     <!---->
  5871    <dt id=CHARMOD>[CHARMOD]
  5873    <dd>Martin J. Dürst; et al. <a
  5874     href="http://www.w3.org/TR/2005/REC-charmod-20050215/"><cite>Character
  5875     Model for the World Wide Web 1.0: Fundamentals.</cite></a> 15 February
  5876     2005. W3C Recommendation. URL: <a
  5877     href="http://www.w3.org/TR/2005/REC-charmod-20050215/">http://www.w3.org/TR/2005/REC-charmod-20050215/</a>
  5878     </dd>
  5879    <!---->
  5881    <dt id=CORS>[CORS]
  5883    <dd>Anne van Kesteren. <a
  5884     href="http://www.w3.org/TR/2013/CR-cors-20130129/"><cite>Cross-Origin
  5885     Resource Sharing.</cite></a> 29 January 2013. W3C Candidate
  5886     Recommendation. (Work in progress.) URL: <a
  5887     href="http://www.w3.org/TR/2013/CR-cors-20130129/">http://www.w3.org/TR/2013/CR-cors-20130129/</a>
  5888     </dd>
  5889    <!---->
  5891    <dt id=CSS21>[CSS21]
  5893    <dd>Bert Bos; et al. <a
  5894     href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
  5895     Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
  5896     2011. W3C Recommendation. URL: <a
  5897     href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
  5898     </dd>
  5899    <!---->
  5901    <dt id=CSS3VAL>[CSS3VAL]
  5903    <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
  5904     href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS
  5905     Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate
  5906     Recommendation. (Work in progress.) URL: <a
  5907     href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a>
  5908     </dd>
  5909    <!---->
  5911    <dt id=HTML5>[HTML5]
  5913    <dd>Ian Hickson. <a
  5914     href="http://www.w3.org/TR/2012/CR-html5-20121217/"><cite>HTML5.</cite></a>
  5915     17 December 2012. W3C Candidate Recommendation. (Work in progress.) URL:
  5916     <a
  5917     href="http://www.w3.org/TR/2012/CR-html5-20121217/">http://www.w3.org/TR/2012/CR-html5-20121217/</a>
  5918     </dd>
  5919    <!---->
  5921    <dt id=OPEN-FONT-FORMAT>[OPEN-FONT-FORMAT]
  5923    <dd><a
  5924     href="http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009(E).zip"><cite>Information
  5925     technology — Coding of audio-visual objects — Part 22: Open Font
  5926     Format.</cite></a> International Organization for Standardization.
  5927     ISO/IEC 14496-22:2009. URL: <a
  5928     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>
  5929     </dd>
  5930    <!---->
  5932    <dt id=OPENTYPE>[OPENTYPE]
  5934    <dd><a
  5935     href="http://www.microsoft.com/typography/otspec/default.htm"><cite>OpenType
  5936     specification.</cite></a> Microsoft. URL: <a
  5937     href="http://www.microsoft.com/typography/otspec/default.htm">http://www.microsoft.com/typography/otspec/default.htm</a>
  5938     </dd>
  5939    <!---->
  5941    <dt id=OPENTYPE-FEATURES>[OPENTYPE-FEATURES]
  5943    <dd><a
  5944     href="http://www.microsoft.com/typography/otspec/featurelist.htm"><cite>OpenType
  5945     feature registry.</cite></a> Microsoft. URL: <a
  5946     href="http://www.microsoft.com/typography/otspec/featurelist.htm">http://www.microsoft.com/typography/otspec/featurelist.htm</a>
  5947     </dd>
  5948    <!---->
  5950    <dt id=RFC2119>[RFC2119]
  5952    <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
  5953     words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
  5954     RFC 2119. URL: <a
  5955     href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
  5956     </dd>
  5957    <!---->
  5959    <dt id=UAX15>[UAX15]
  5961    <dd>Mark Davis; Ken Whistler. <a
  5962     href="http://www.unicode.org/reports/tr15/"><cite>Unicode Normalization
  5963     Forms.</cite></a> 31 August 2012. Unicode Standard Annex #15. URL: <a
  5964     href="http://www.unicode.org/reports/tr15/">http://www.unicode.org/reports/tr15/</a>
  5965     </dd>
  5966    <!---->
  5968    <dt id=UAX29>[UAX29]
  5970    <dd>Mark Davis. <a
  5971     href="http://www.unicode.org/reports/tr29/"><cite>Unicode Text
  5972     Segmentation.</cite></a> 12 September 2012. Unicode Standard Annex #29.
  5973     URL: <a
  5974     href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a>
  5975     </dd>
  5976    <!---->
  5978    <dt id=UNICODE6>[UNICODE6]
  5980    <dd>The Unicode Consortium. <a
  5981     href="http://www.unicode.org/versions/Unicode6.2.0/"><cite>The Unicode
  5982     Standard, Version 6.2.0.</cite></a> Defined by: The Unicode Standard,
  5983     Version 6.2.0 URL: <a
  5984     href="http://www.unicode.org/versions/Unicode6.2.0/">http://www.unicode.org/versions/Unicode6.2.0/</a>
  5985     </dd>
  5986    <!---->
  5987   </dl>
  5988   <!--end-normative-->
  5989   <!--{{!CSS21}}-->
  5990   <!--{{!CSS3VAL}}-->
  5991   <!--{{!OPENTYPE}}-->
  5992   <!--{{!OPENTYPE-FEATURES}}-->
  5993   <!--{{!OPEN-FONT-FORMAT}}-->
  5994   <!--{{!UNICODE6}}-->
  5995   <!--{{!UAX15}}-->
  5996   <!--{{!UAX29}}-->
  5997   <!--{{!CORS}}-->
  5998   <!--{{!HTML5}}-->
  5999   <!--{{!CHARMOD}}-->
  6001   <h3 class=no-num id=other-references>Other References</h3>
  6002   <!--begin-informative-->
  6003   <!-- Sorted by label -->
  6005   <dl class=bibliography>
  6006    <dd style="display: none"><!-- keeps the doc valid if the DL is empty -->
  6007     <!---->
  6009    <dt id=AAT-FEATURES>[AAT-FEATURES]
  6011    <dd><a href="http://developer.apple.com/fonts/registry/"><cite>Apple
  6012     Advanced Typography font feature registry.</cite></a> Apple. URL: <a
  6013     href="http://developer.apple.com/fonts/registry/">http://developer.apple.com/fonts/registry/</a>
  6014     </dd>
  6015    <!---->
  6017    <dt id=ARABIC-TYPO>[ARABIC-TYPO]
  6019    <dd>Huda Smitshuijzen AbiFares. <cite>Arabic Typography: A Comprehensive
  6020     Sourcebook.</cite> Saqi Books. 2001. ISBN 0-86356-347-3.</dd>
  6021    <!---->
  6023    <dt id=CHARMOD-NORM>[CHARMOD-NORM]
  6025    <dd>François Yergeau; et al. <a
  6026     href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/"><cite>Character
  6027     Model for the World Wide Web 1.0: Normalization.</cite></a> 1 May 2012.
  6028     W3C Working Draft. (Work in progress.) URL: <a
  6029     href="http://www.w3.org/TR/2012/WD-charmod-norm-20120501/">http://www.w3.org/TR/2012/WD-charmod-norm-20120501/</a>
  6030     </dd>
  6031    <!---->
  6033    <dt id=CJKV-INFO-PROCESSING>[CJKV-INFO-PROCESSING]
  6035    <dd>Ken Lunde. <cite>CJKV Information Processing, Second Edition.</cite>
  6036     O'Reilly Media, Inc. 2009. ISBN 0-596-51447-1.</dd>
  6037    <!---->
  6039    <dt id=CSS3-CONDITIONAL>[CSS3-CONDITIONAL]
  6041    <dd>L. David Baron. <a
  6042     href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/"><cite>CSS
  6043     Conditional Rules Module Level 3.</cite></a> 13 December 2012. W3C
  6044     Working Draft. (Work in progress.) URL: <a
  6045     href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/">http://www.w3.org/TR/2012/WD-css3-conditional-20121213/</a>
  6046     </dd>
  6047    <!---->
  6049    <dt id=CSS3TEXT>[CSS3TEXT]
  6051    <dd>Elika J. Etemad; Koji Ishii. <a
  6052     href="http://www.w3.org/TR/2012/WD-css3-text-20121113/"><cite>CSS Text
  6053     Module Level 3.</cite></a> 13 November 2012. W3C Working Draft. (Work in
  6054     progress.) URL: <a
  6055     href="http://www.w3.org/TR/2012/WD-css3-text-20121113/">http://www.w3.org/TR/2012/WD-css3-text-20121113/</a>
  6056     </dd>
  6057    <!---->
  6059    <dt id=DIGITAL-TYPOGRAPHY>[DIGITAL-TYPOGRAPHY]
  6061    <dd>Richard Rubinstein. <cite>Digital Typography, An Introduction to Type
  6062     and Composition for Computer System Design.</cite> Addison-Wesley. 1988.
  6063     ISBN 0-201-17633-5.</dd>
  6064    <!---->
  6066    <dt id=DOM-LEVEL-2-STYLE>[DOM-LEVEL-2-STYLE]
  6068    <dd>Chris Wilson; Philippe Le Hégaret; Vidur Apparao. <a
  6069     href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/"><cite>Document
  6070     Object Model (DOM) Level 2 Style Specification.</cite></a> 13 November
  6071     2000. W3C Recommendation. URL: <a
  6072     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>
  6073     </dd>
  6074    <!---->
  6076    <dt id=ELEMTYPO>[ELEMTYPO]
  6078    <dd>Robert Bringhurst. <cite>The Elements of Typographic Style, Version
  6079     4.</cite> Hartley &amp; Marks. 2013. ISBN 0-88179-212-8.</dd>
  6080    <!---->
  6082    <dt id=LANGCULTTYPE>[LANGCULTTYPE]
  6084    <dd>John D. Berry, Ed. <cite>Language Culture Type.</cite> Graphis. 2001.
  6085     ISBN 1-932026-01-0.</dd>
  6086    <!---->
  6088    <dt id=OPENTYPE-FONT-GUIDE>[OPENTYPE-FONT-GUIDE]
  6090    <dd><a
  6091     href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf"><cite>OpenType
  6092     User Guide.</cite></a> FontShop International. URL: <a
  6093     href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf">https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf</a>
  6094     </dd>
  6095    <!---->
  6097    <dt id=RASTER-TRAGEDY>[RASTER-TRAGEDY]
  6099    <dd>Beat Stamm. <a href="http://www.rastertragedy.com/"><cite>The Raster
  6100     Tragedy at Low-Resolution Revisited.</cite></a> 7 December 2011. URL: <a
  6101     href="http://www.rastertragedy.com/">http://www.rastertragedy.com/</a></dd>
  6102    <!---->
  6104    <dt id=WINDOWS-GLYPH-PROC>[WINDOWS-GLYPH-PROC]
  6106    <dd>John Hudson. <a
  6107     href="http://www.microsoft.com/typography/developers/opentype/default.htm"><cite>Windows
  6108     Glyph Processing.</cite></a> Microsoft Typogrraphy. URL: <a
  6109     href="http://www.microsoft.com/typography/developers/opentype/default.htm">http://www.microsoft.com/typography/developers/opentype/default.htm</a>
  6110     </dd>
  6111    <!---->
  6112   </dl>
  6113   <!--end-informative-->
  6114   <!--{{ARABIC-TYPO}}-->
  6115   <!--{{CJKV-INFO-PROCESSING}}-->
  6116   <!--{{DIGITAL-TYPOGRAPHY}}-->
  6117   <!--{{DOM-LEVEL-2-STYLE}}-->
  6118   <!--{{ELEMTYPO}}-->
  6119   <!--{{LANGCULTTYPE}}-->
  6120   <!--{{OPENTYPE-FONT-GUIDE}}-->
  6121   <!--{{RASTER-TRAGEDY}}-->
  6122   <!--{{WINDOWS-GLYPH-PROC}}-->
  6123   <!--{{CHARMOD-NORM}}-->
  6124   <!--{{AAT-FEATURES}}-->
  6125   <!--{{CSS3-CONDITIONAL}}-->
  6126   <!--{{CSS3TEXT}}-->
  6128   <h2 class=no-num id=index>Index</h2>
  6129   <!--begin-index-->
  6131   <ul class=indexlist>
  6132    <li>100...900 weight values, <a href="#font-weight-numeric-values"
  6133     title="100...900 weight values"><strong>3.2</strong></a>
  6135    <li><var>&lt;absolute-size&gt;</var>, <a href="#absolute-size-value"
  6136     title="&lt;absolute-size&gt;"><strong>3.5</strong></a>
  6138    <li><var>&lt;common-lig-values&gt;</var>, <a href="#common-lig-values"
  6139     title="&lt;common-lig-values&gt;"><strong>6.4</strong></a>
  6141    <li><var>&lt;contextual-alt-values&gt;</var>, <a
  6142     href="#contextual-alt-values"
  6143     title="&lt;contextual-alt-values&gt;"><strong>6.4</strong></a>
  6145    <li><var>&lt;discretionary-lig-values&gt;</var>, <a
  6146     href="#discretionary-lig-values"
  6147     title="&lt;discretionary-lig-values&gt;"><strong>6.4</strong></a>
  6149    <li><var>&lt;east-asian-variant-values&gt;</var>, <a
  6150     href="#east-asian-variant-values"
  6151     title="&lt;east-asian-variant-values&gt;"><strong>6.10</strong></a>
  6153    <li><var>&lt;east-asian-width-values&gt;</var>, <a
  6154     href="#east-asian-width-values"
  6155     title="&lt;east-asian-width-values&gt;"><strong>6.10</strong></a>
  6157    <li><var>&lt;family-name&gt;</var>, <a href="#family-name-value"
  6158     title="&lt;family-name&gt;"><strong>3.1</strong></a>
  6160    <li><var>&lt;feature-tag-value&gt;</var>, <a href="#feature-tag-value"
  6161     title="&lt;feature-tag-value&gt;"><strong>6.12</strong></a>
  6163    <li><var>&lt;font-face-name&gt;</var>, <a href="#font-face-name-value"
  6164     title="&lt;font-face-name&gt;"><strong>4.3</strong></a>
  6166    <li><var>&lt;font-variant-css21&gt;</var>, <a
  6167     href="#font-variant-css21-values"
  6168     title="&lt;font-variant-css21&gt;"><strong>3.7</strong></a>
  6170    <li><var>&lt;generic-family&gt;</var>, <a href="#generic-family-value"
  6171     title="&lt;generic-family&gt;"><strong>3.1</strong></a>
  6173    <li><var>&lt;historical-lig-values&gt;</var>, <a
  6174     href="#historical-lig-values"
  6175     title="&lt;historical-lig-values&gt;"><strong>6.4</strong></a>
  6177    <li><var>&lt;length&gt;</var>, <a href="#length-size-value"
  6178     title="&lt;length&gt;"><strong>3.5</strong></a>
  6180    <li><var>&lt;number&gt;</var>, <a href="#aspect-ratio-value"
  6181     title="&lt;number&gt;"><strong>3.6</strong></a>
  6183    <li><var>&lt;numeric-figure-values&gt;</var>, <a
  6184     href="#numeric-figure-values"
  6185     title="&lt;numeric-figure-values&gt;"><strong>6.7</strong></a>
  6187    <li><var>&lt;numeric-fraction-values&gt;</var>, <a
  6188     href="#numeric-fraction-values"
  6189     title="&lt;numeric-fraction-values&gt;"><strong>6.7</strong></a>
  6191    <li><var>&lt;numeric-spacing-values&gt;</var>, <a
  6192     href="#numeric-spacing-values"
  6193     title="&lt;numeric-spacing-values&gt;"><strong>6.7</strong></a>
  6195    <li><var>&lt;percentage&gt;</var>, <a href="#percentage-size-value"
  6196     title="&lt;percentage&gt;"><strong>3.5</strong></a>
  6198    <li><var>&lt;relative-size&gt;</var>, <a href="#relative-size-value"
  6199     title="&lt;relative-size&gt;"><strong>3.5</strong></a>
  6201    <li><var>&lt;string&gt;</var>, <a
  6202     href="#font-language-override-string-value"
  6203     title="&lt;string&gt;"><strong>6.13</strong></a>
  6205    <li><var>&lt;urange&gt;</var>, <a href="#urange-value"
  6206     title="&lt;urange&gt;"><strong>4.5</strong></a>
  6208    <li>@font-face, <a href="#font-face" title="@font-face">4.1</a>, <a
  6209     href="#font-face0" title="@font-face">4.3</a>
  6211    <li>all-petite-caps, <a href="#all-petite-caps"
  6212     title=all-petite-caps><strong>6.6</strong></a>
  6214    <li>all-small-caps, <a href="#all-small-caps"
  6215     title=all-small-caps><strong>6.6</strong></a>
  6217    <li>annotation, <a href="#annotation"
  6218     title=annotation><strong>6.8</strong></a>
  6220    <li>aspect value, <a href="#aspect-value0" title="aspect
  6221     value"><strong>3.6</strong></a>
  6223    <li>authoring tool, <a href="#authoring-tool" title="authoring
  6224     tool"><strong>#</strong></a>
  6226    <li>auto
  6227     <ul>
  6228      <li>font-kerning, <a href="#font-kerning-auto-value" title="auto,
  6229       font-kerning"><strong>6.3</strong></a>
  6231      <li>font-size-adjust, <a href="#font-size-adjust-auto-value"
  6232       title="auto, font-size-adjust"><strong>3.6</strong></a>
  6233     </ul>
  6235    <li>bold, <a href="#bold" title=bold><strong>3.2</strong></a>
  6237    <li>bolder, <a href="#bolder" title=bolder><strong>3.2</strong></a>
  6239    <li>character map, <a href="#character-map" title="character
  6240     map"><strong>5.2</strong></a>
  6242    <li>character-variant, <a href="#character-variant"
  6243     title=character-variant><strong>6.8</strong></a>
  6245    <li>common-ligatures, <a href="#common-ligatures"
  6246     title=common-ligatures><strong>6.4</strong></a>
  6248    <li>condensed, <a href="#condensed"
  6249     title=condensed><strong>3.3</strong></a>
  6251    <li>contextual, <a href="#contextual"
  6252     title=contextual><strong>6.4</strong></a>
  6254    <li>CSSFontFaceRule, <a href="#cssfontfacerule"
  6255     title=CSSFontFaceRule><strong>8.1</strong></a>
  6257    <li>CSSFontFeatureValuesRule, <a href="#cssfontfeaturevaluesrule"
  6258     title=CSSFontFeatureValuesRule><strong>8.2</strong></a>
  6260    <li>cursive, definition of, <a href="#cursive0" title="cursive, definition
  6261     of"><strong>#</strong></a>
  6263    <li>default face, <a href="#default-face" title="default
  6264     face"><strong>5.2</strong></a>
  6266    <li>descriptor_declaration, <a href="#descriptordeclaration"
  6267     title="descriptor_declaration"><strong>4.1</strong></a>
  6269    <li>diagonal-fractions, <a href="#diagonal-fractions"
  6270     title=diagonal-fractions><strong>6.7</strong></a>
  6272    <li>discretionary-ligatures, <a href="#discretionary-ligatures"
  6273     title=discretionary-ligatures><strong>6.4</strong></a>
  6275    <li>expanded, <a href="#expanded" title=expanded><strong>3.3</strong></a>
  6277    <li>extra-condensed, <a href="#extra-condensed"
  6278     title=extra-condensed><strong>3.3</strong></a>
  6280    <li>extra-expanded, <a href="#extra-expanded"
  6281     title=extra-expanded><strong>3.3</strong></a>
  6283    <li>fantasy, definition of, <a href="#fantasy0" title="fantasy, definition
  6284     of"><strong>#</strong></a>
  6286    <li>feature_type, <a href="#featuretype"
  6287     title="feature_type"><strong>6.9</strong></a>
  6289    <li>feature_value_block, <a href="#featurevalueblock"
  6290     title="feature_value_block"><strong>6.9</strong></a>
  6292    <li>feature_value_definition, <a href="#featurevaluedefinition"
  6293     title="feature_value_definition"><strong>6.9</strong></a>
  6295    <li>font, <a href="#propdef-font" title=font><strong>3.7</strong></a>
  6297    <li>font-family
  6298     <ul>
  6299      <li>descriptor, <a href="#descdef-font-family" title="font-family,
  6300       descriptor"><strong>4.2</strong></a>
  6302      <li>property, <a href="#propdef-font-family" title="font-family,
  6303       property"><strong>3.1</strong></a>
  6304     </ul>
  6306    <li>font-feature-settings
  6307     <ul>
  6308      <li>descriptor, <a href="#descdef-font-feature-settings"
  6309       title="font-feature-settings, descriptor"><strong>4.7</strong></a>
  6311      <li>property, <a href="#propdef-font-feature-settings"
  6312       title="font-feature-settings, property"><strong>6.12</strong></a>
  6313     </ul>
  6315    <li>font-kerning, <a href="#propdef-font-kerning"
  6316     title=font-kerning><strong>6.3</strong></a>
  6318    <li>font-language-override, <a href="#propdef-font-language-override"
  6319     title=font-language-override><strong>6.13</strong></a>
  6321    <li>font-size, <a href="#propdef-font-size"
  6322     title=font-size><strong>3.5</strong></a>
  6324    <li>font-size-adjust, <a href="#propdef-font-size-adjust"
  6325     title=font-size-adjust><strong>3.6</strong></a>
  6327    <li>font-stretch
  6328     <ul>
  6329      <li>descriptor, <a href="#descdef-font-stretch" title="font-stretch,
  6330       descriptor"><strong>4.4</strong></a>
  6332      <li>property, <a href="#propdef-font-stretch" title="font-stretch,
  6333       property"><strong>3.3</strong></a>
  6334     </ul>
  6336    <li>font-style
  6337     <ul>
  6338      <li>descriptor, <a href="#descdef-font-style" title="font-style,
  6339       descriptor"><strong>4.4</strong></a>
  6341      <li>property, <a href="#propdef-font-style" title="font-style,
  6342       property"><strong>3.4</strong></a>
  6343     </ul>
  6345    <li>font-synthesis, <a href="#propdef-font-synthesis"
  6346     title=font-synthesis><strong>3.8</strong></a>
  6348    <li>font-variant
  6349     <ul>
  6350      <li>descriptor, <a href="#descdef-font-variant" title="font-variant,
  6351       descriptor"><strong>4.7</strong></a>
  6353      <li>property, <a href="#propdef-font-variant" title="font-variant,
  6354       property"><strong>6.11</strong></a>
  6355     </ul>
  6357    <li>font-variant-alternates, <a href="#propdef-font-variant-alternates"
  6358     title=font-variant-alternates><strong>6.8</strong></a>
  6360    <li>font-variant-caps, <a href="#propdef-font-variant-caps"
  6361     title=font-variant-caps><strong>6.6</strong></a>
  6363    <li>font-variant-east-asian, <a href="#propdef-font-variant-east-asian"
  6364     title=font-variant-east-asian><strong>6.10</strong></a>
  6366    <li>font-variant-ligatures, <a href="#propdef-font-variant-ligatures"
  6367     title=font-variant-ligatures><strong>6.4</strong></a>
  6369    <li>font-variant-numeric, <a href="#propdef-font-variant-numeric"
  6370     title=font-variant-numeric><strong>6.7</strong></a>
  6372    <li>font-variant-position, <a href="#propdef-font-variant-position"
  6373     title=font-variant-position><strong>6.5</strong></a>
  6375    <li>font-weight
  6376     <ul>
  6377      <li>descriptor, <a href="#descdef-font-weight" title="font-weight,
  6378       descriptor"><strong>4.4</strong></a>
  6380      <li>property, <a href="#propdef-font-weight" title="font-weight,
  6381       property"><strong>3.2</strong></a>
  6382     </ul>
  6384    <li>font_face_rule, <a href="#fontfacerule"
  6385     title="font_face_rule"><strong>4.1</strong></a>
  6387    <li>FONT_FACE_SYM, <a href="#fontfacesym"
  6388     title="FONT_FACE_SYM"><strong>4.1</strong></a>
  6390    <li>font_family_name, <a href="#fontfamilyname"
  6391     title="font_family_name"><strong>6.9</strong></a>
  6393    <li>font_family_name_list, <a href="#fontfamilynamelist"
  6394     title="font_family_name_list"><strong>6.9</strong></a>
  6396    <li>font_feature_values_rule, <a href="#fontfeaturevaluesrule"
  6397     title="font_feature_values_rule"><strong>6.9</strong></a>
  6399    <li>FONT_FEATURE_VALUES_SYM, <a href="#fontfeaturevaluessym"
  6400     title="FONT_FEATURE_VALUES_SYM"><strong>6.9</strong></a>
  6402    <li>full-width, <a href="#full-width"
  6403     title=full-width><strong>6.10</strong></a>
  6405    <li>historical-forms, <a href="#historical-forms"
  6406     title=historical-forms><strong>6.8</strong></a>
  6408    <li>historical-ligatures, <a href="#historical-ligatures"
  6409     title=historical-ligatures><strong>6.4</strong></a>
  6411    <li>italic, <a href="#italic" title=italic><strong>3.4</strong></a>
  6413    <li>jis04, <a href="#jis04" title=jis04><strong>6.10</strong></a>
  6415    <li>jis78, <a href="#jis78" title=jis78><strong>6.10</strong></a>
  6417    <li>jis83, <a href="#jis83" title=jis83><strong>6.10</strong></a>
  6419    <li>jis90, <a href="#jis90" title=jis90><strong>6.10</strong></a>
  6421    <li>lighter, <a href="#lighter" title=lighter><strong>3.2</strong></a>
  6423    <li>lining-nums, <a href="#lining-nums"
  6424     title=lining-nums><strong>6.7</strong></a>
  6426    <li>monospace, definition of, <a href="#monospace0" title="monospace,
  6427     definition of"><strong>#</strong></a>
  6429    <li>no-common-ligatures, <a href="#no-common-ligatures"
  6430     title=no-common-ligatures><strong>6.4</strong></a>
  6432    <li>no-contextual, <a href="#no-contextual"
  6433     title=no-contextual><strong>6.4</strong></a>
  6435    <li>no-discretionary-ligatures, <a href="#no-discretionary-ligatures"
  6436     title=no-discretionary-ligatures><strong>6.4</strong></a>
  6438    <li>no-historical-ligatures, <a href="#no-historical-ligatures"
  6439     title=no-historical-ligatures><strong>6.4</strong></a>
  6441    <li>none
  6442     <ul>
  6443      <li>font-kerning, <a href="#font-kerning-none-value" title="none,
  6444       font-kerning"><strong>6.3</strong></a>
  6446      <li>font-size-adjust, <a href="#font-size-adjust-none-value"
  6447       title="none, font-size-adjust"><strong>3.6</strong></a>
  6449      <li>font-variant, <a href="#font-variant-none-value" title="none,
  6450       font-variant"><strong>6.11</strong></a>
  6452      <li>font-variant-ligatures, <a href="#font-variant-ligatures-none-value"
  6453       title="none, font-variant-ligatures"><strong>6.4</strong></a>
  6454     </ul>
  6456    <li>normal, <a href="#normal" title=normal><strong>6.5</strong></a>
  6457     <ul>
  6458      <li>font-feature-settings, <a href="#font-feature-settings-normal-value"
  6459       title="normal, font-feature-settings"><strong>6.12</strong></a>
  6461      <li>font-kerning, <a href="#font-kerning-normal-value" title="normal,
  6462       font-kerning"><strong>6.3</strong></a>
  6464      <li>font-language-override, <a
  6465       href="#font-language-override-normal-value" title="normal,
  6466       font-language-override"><strong>6.13</strong></a>
  6468      <li>font-stretch, <a href="#font-stretch-normal-value" title="normal,
  6469       font-stretch"><strong>3.3</strong></a>
  6471      <li>font-style, <a href="#font-style-normal-value" title="normal,
  6472       font-style"><strong>3.4</strong></a>
  6474      <li>font-variant, <a href="#font-variant-normal-value" title="normal,
  6475       font-variant"><strong>6.11</strong></a>
  6477      <li>font-variant-alternates, <a
  6478       href="#font-variant-alternates-normal-value" title="normal,
  6479       font-variant-alternates"><strong>6.8</strong></a>
  6481      <li>font-variant-caps, <a href="#font-variant-caps-normal-value"
  6482       title="normal, font-variant-caps"><strong>6.6</strong></a>
  6484      <li>font-variant-east-asian, <a
  6485       href="#font-variant-east-asian-normal-value" title="normal,
  6486       font-variant-east-asian"><strong>6.10</strong></a>
  6488      <li>font-variant-ligatures, <a
  6489       href="#font-variant-ligatures-normal-value" title="normal,
  6490       font-variant-ligatures"><strong>6.4</strong></a>
  6492      <li>font-variant-numeric, <a href="#font-variant-numeric-normal-value"
  6493       title="normal, font-variant-numeric"><strong>6.7</strong></a>
  6495      <li>font-weight, <a href="#font-weight-normal-value" title="normal,
  6496       font-weight"><strong>3.2</strong></a>
  6497     </ul>
  6499    <li>oblique, <a href="#oblique" title=oblique><strong>3.4</strong></a>
  6501    <li>oldstyle-nums, <a href="#oldstyle-nums"
  6502     title=oldstyle-nums><strong>6.7</strong></a>
  6504    <li>ordinal, <a href="#ordinal" title=ordinal><strong>6.7</strong></a>
  6506    <li>ornaments, <a href="#ornaments"
  6507     title=ornaments><strong>6.8</strong></a>
  6509    <li>petite-caps, <a href="#petite-caps"
  6510     title=petite-caps><strong>6.6</strong></a>
  6512    <li>proportional-nums, <a href="#proportional-nums"
  6513     title=proportional-nums><strong>6.7</strong></a>
  6515    <li>proportional-width, <a href="#proportional-width"
  6516     title=proportional-width><strong>6.10</strong></a>
  6518    <li>renderer, <a href="#renderer" title=renderer><strong>#</strong></a>
  6520    <li>ruby, <a href="#ruby" title=ruby><strong>6.10</strong></a>
  6522    <li>sans-serif, definition of, <a href="#sans-serif0" title="sans-serif,
  6523     definition of"><strong>#</strong></a>
  6525    <li>semi-condensed, <a href="#semi-condensed-"
  6526     title=semi-condensed><strong>3.3</strong></a>
  6528    <li>semi-expanded, <a href="#semi-expanded"
  6529     title=semi-expanded><strong>3.3</strong></a>
  6531    <li>serif, definition of, <a href="#serif0" title="serif, definition
  6532     of"><strong>#</strong></a>
  6534    <li>simplified, <a href="#simplified"
  6535     title=simplified><strong>6.10</strong></a>
  6537    <li>slashed-zero, <a href="#slashed-zero"
  6538     title=slashed-zero><strong>6.7</strong></a>
  6540    <li>small-caps, <a href="#small-caps"
  6541     title=small-caps><strong>6.6</strong></a>
  6543    <li>src, <a href="#descdef-src" title=src><strong>4.3</strong></a>
  6545    <li>stacked-fractions, <a href="#stacked-fractions"
  6546     title=stacked-fractions><strong>6.7</strong></a>
  6548    <li>style sheet
  6549     <ul>
  6550      <li>as conformance class, <a href="#style-sheet" title="style sheet, as
  6551       conformance class"><strong>#</strong></a>
  6552     </ul>
  6554    <li>styleset, <a href="#styleset" title=styleset><strong>6.8</strong></a>
  6556    <li>stylistic, <a href="#stylistic"
  6557     title=stylistic><strong>6.8</strong></a>
  6559    <li>sub, <a href="#sub" title=sub><strong>6.5</strong></a>
  6561    <li>super, <a href="#super" title=super><strong>6.5</strong></a>
  6563    <li>swash, <a href="#swash" title=swash><strong>6.8</strong></a>
  6565    <li>tabular-nums, <a href="#tabular-nums"
  6566     title=tabular-nums><strong>6.7</strong></a>
  6568    <li>titling-caps, <a href="#titling-caps"
  6569     title=titling-caps><strong>6.6</strong></a>
  6571    <li>traditional, <a href="#traditional"
  6572     title=traditional><strong>6.10</strong></a>
  6574    <li>ultra-condensed, <a href="#ultra-condensed"
  6575     title=ultra-condensed><strong>3.3</strong></a>
  6577    <li>ultra-expanded, <a href="#ultra-expanded"
  6578     title=ultra-expanded><strong>3.3</strong></a>
  6580    <li>unicase, <a href="#unicase" title=unicase><strong>6.6</strong></a>
  6582    <li>unicode-range, <a href="#descdef-unicode-range"
  6583     title=unicode-range><strong>4.5</strong></a>
  6585    <li>weight, <a href="#weight" title=weight><strong>2</strong></a>
  6587    <li>width, <a href="#width" title=width><strong>2</strong></a>
  6588   </ul>
  6589   <!--end-index-->
  6591   <h2 class=no-num id=property-index>Property index</h2>
  6592   <!--begin-properties-->
  6594   <table class=proptable>
  6595    <thead>
  6596     <tr>
  6597      <th>Property
  6599      <th>Values
  6601      <th>Initial
  6603      <th>Applies to
  6605      <th>Inh.
  6607      <th>Percentages
  6609      <th>Media
  6611    <tbody>
  6612     <tr>
  6613      <th><a class=property href="#propdef-font">font</a>
  6615      <td>[ [ &lt;‘font-style’&gt; || &lt;font-variant-css21&gt; ||
  6616       &lt;‘font-weight’&gt; || &lt;‘font-stretch’ ]?
  6617       &lt;‘font-size’&gt; [ / &lt;‘line-height’&gt; ]?
  6618       &lt;‘font-family’&gt; ] | caption | icon | menu | message-box |
  6619       small-caption | status-bar
  6621      <td>see individual properties
  6623      <td>all elements
  6625      <td>yes
  6627      <td>see individual properties
  6629      <td>visual
  6631     <tr>
  6632      <th><span class=property>font-family</span>
  6634      <td>[ &lt;family-name&gt; | &lt;generic-family&gt; ] #
  6636      <td>depends on user agent
  6638      <td>all elements
  6640      <td>yes
  6642      <td>N/A
  6644      <td>visual
  6646     <tr>
  6647      <th><span class=property>font-feature-settings</span>
  6649      <td>normal | &lt;feature-tag-value&gt; #
  6651      <td>normal
  6653      <td>all elements
  6655      <td>yes
  6657      <td>N/A
  6659      <td>visual
  6661     <tr>
  6662      <th><a class=property href="#propdef-font-kerning">font-kerning</a>
  6664      <td>auto | normal | none
  6666      <td>auto
  6668      <td>all elements
  6670      <td>yes
  6672      <td>N/A
  6674      <td>visual
  6676     <tr>
  6677      <th><a class=property
  6678       href="#propdef-font-language-override">font-language-override</a>
  6680      <td>normal | &lt;string&gt;
  6682      <td>normal
  6684      <td>all elements
  6686      <td>yes
  6688      <td>N/A
  6690      <td>visual
  6692     <tr>
  6693      <th><a class=property href="#propdef-font-size">font-size</a>
  6695      <td>&lt;absolute-size&gt; | &lt;relative-size&gt; | &lt;length&gt; |
  6696       &lt;percentage&gt;
  6698      <td>medium
  6700      <td>all elements
  6702      <td>yes
  6704      <td>refer to parent element's font size
  6706      <td>visual
  6708     <tr>
  6709      <th><a class=property
  6710       href="#propdef-font-size-adjust">font-size-adjust</a>
  6712      <td>none | auto | &lt;number&gt;
  6714      <td>none
  6716      <td>all elements
  6718      <td>yes
  6720      <td>N/A
  6722      <td>visual
  6724     <tr>
  6725      <th><span class=property>font-stretch</span>
  6727      <td>normal | ultra-condensed | extra-condensed | condensed |
  6728       semi-condensed | semi-expanded | expanded | extra-expanded |
  6729       ultra-expanded
  6731      <td>normal
  6733      <td>all elements
  6735      <td>yes
  6737      <td>N/A
  6739      <td>visual
  6741     <tr>
  6742      <th><span class=property>font-style</span>
  6744      <td>normal | italic | oblique
  6746      <td>normal
  6748      <td>all elements
  6750      <td>yes
  6752      <td>N/A
  6754      <td>visual
  6756     <tr>
  6757      <th><a class=property href="#propdef-font-synthesis">font-synthesis</a>
  6759      <td>none | [ weight || style ]
  6761      <td>weight style
  6763      <td>all elements
  6765      <td>yes
  6767      <td>N/A
  6769      <td>visual
  6771     <tr>
  6772      <th><span class=property>font-variant</span>
  6774      <td>normal | none | [ &lt;common-lig-values&gt; ||
  6775       &lt;discretionary-lig-values&gt; || &lt;historical-lig-values&gt; ||
  6776       &lt;contextual-alt-values&gt; || stylistic(&lt;feature-value-name&gt;)
  6777       || historical-forms || styleset(&lt;feature-value-name&gt; #) ||
  6778       character-variant(&lt;feature-value-name&gt; #) ||
  6779       swash(&lt;feature-value-name&gt;) ||
  6780       ornaments(&lt;feature-value-name&gt;) ||
  6781       annotation(&lt;feature-value-name&gt;) || [ small-caps | all-small-caps
  6782       | petite-caps | all-petite-caps | unicase | titling-caps ] ||
  6783       &lt;numeric-figure-values&gt; || &lt;numeric-spacing-values&gt; ||
  6784       &lt;numeric-fraction-values&gt; || ordinal || slashed-zero ||
  6785       &lt;east-asian-variant-values&gt; || &lt;east-asian-width-values&gt; ||
  6786       ruby ]
  6788      <td>normal
  6790      <td>all elements
  6792      <td>yes
  6794      <td>see individual properties
  6796      <td>visual
  6798     <tr>
  6799      <th><a class=property
  6800       href="#propdef-font-variant-alternates">font-variant-alternates</a>
  6802      <td>normal | [ stylistic(&lt;feature-value-name&gt;) || historical-forms
  6803       || styleset(&lt;feature-value-name&gt; #) ||
  6804       character-variant(&lt;feature-value-name&gt; #) ||
  6805       swash(&lt;feature-value-name&gt;) ||
  6806       ornaments(&lt;feature-value-name&gt;) ||
  6807       annotation(&lt;feature-value-name&gt;) ]
  6809      <td>normal
  6811      <td>all elements
  6813      <td>yes
  6815      <td>N/A
  6817      <td>visual
  6819     <tr>
  6820      <th><a class=property
  6821       href="#propdef-font-variant-caps">font-variant-caps</a>
  6823      <td>normal | small-caps | all-small-caps | petite-caps | all-petite-caps
  6824       | unicase | titling-caps
  6826      <td>normal
  6828      <td>all elements
  6830      <td>yes
  6832      <td>N/A
  6834      <td>visual
  6836     <tr>
  6837      <th><a class=property
  6838       href="#propdef-font-variant-east-asian">font-variant-east-asian</a>
  6840      <td>normal | [ &lt;east-asian-variant-values&gt; ||
  6841       &lt;east-asian-width-values&gt; || ruby ]
  6843      <td>normal
  6845      <td>all elements
  6847      <td>yes
  6849      <td>N/A
  6851      <td>visual
  6853     <tr>
  6854      <th><a class=property
  6855       href="#propdef-font-variant-ligatures">font-variant-ligatures</a>
  6857      <td>normal | none | [ &lt;common-lig-values&gt; ||
  6858       &lt;discretionary-lig-values&gt; || &lt;historical-lig-values&gt; ||
  6859       &lt;contextual-alt-values&gt; ]
  6861      <td>normal
  6863      <td>all elements
  6865      <td>yes
  6867      <td>N/A
  6869      <td>visual
  6871     <tr>
  6872      <th><a class=property
  6873       href="#propdef-font-variant-numeric">font-variant-numeric</a>
  6875      <td>normal | [ &lt;numeric-figure-values&gt; ||
  6876       &lt;numeric-spacing-values&gt; || &lt;numeric-fraction-values&gt; ||
  6877       ordinal || slashed-zero ]
  6879      <td>normal
  6881      <td>all elements
  6883      <td>yes
  6885      <td>N/A
  6887      <td>visual
  6889     <tr>
  6890      <th><a class=property
  6891       href="#propdef-font-variant-position">font-variant-position</a>
  6893      <td>normal | sub | super
  6895      <td>normal
  6897      <td>all elements
  6899      <td>yes
  6901      <td>N/A
  6903      <td>visual
  6905     <tr>
  6906      <th><span class=property>font-weight</span>
  6908      <td>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600
  6909       | 700 | 800 | 900
  6911      <td>normal
  6913      <td>all elements
  6915      <td>yes
  6917      <td>N/A
  6919      <td>visual
  6920   </table>
  6921   <!--end-properties-->
  6922   <!--begin-descriptors-->
  6924   <table class=proptable>
  6925    <thead>
  6926     <tr>
  6927      <th>Descriptor
  6929      <th>Value
  6931      <th>Initial
  6933      <th>Percentages
  6935      <th>Media
  6937    <tbody>
  6938     <tr>
  6939      <th><span class=property>font-family</span>
  6941      <td>&lt;family-name&gt;
  6943      <td>N/A
  6945     <tr>
  6946      <th><span class=property>font-feature-settings</span>
  6948      <td>normal | &lt;feature-tag-value&gt; #
  6950      <td>normal
  6952     <tr>
  6953      <th><span class=property>font-stretch</span>
  6955      <td>normal | ultra-condensed | extra-condensed | condensed |
  6956       semi-condensed | semi-expanded | expanded | extra-expanded |
  6957       ultra-expanded
  6959      <td>normal
  6961     <tr>
  6962      <th><span class=property>font-style</span>
  6964      <td>normal | italic | oblique
  6966      <td>normal
  6968     <tr>
  6969      <th><span class=property>font-variant</span>
  6971      <td>normal | none | [ &lt;common-lig-values&gt; ||
  6972       &lt;discretionary-lig-values&gt; || &lt;historical-lig-values&gt; ||
  6973       &lt;contextual-alt-values&gt; || stylistic(&lt;feature-value-name&gt;)
  6974       || historical-forms || styleset(&lt;feature-value-name&gt; #) ||
  6975       character-variant(&lt;feature-value-name&gt; #) ||
  6976       swash(&lt;feature-value-name&gt;) ||
  6977       ornaments(&lt;feature-value-name&gt;) ||
  6978       annotation(&lt;feature-value-name&gt;) || [ small-caps | all-small-caps
  6979       | petite-caps | all-petite-caps | unicase | titling-caps ] ||
  6980       &lt;numeric-figure-values&gt; || &lt;numeric-spacing-values&gt; ||
  6981       &lt;numeric-fraction-values&gt; || ordinal || slashed-zero ||
  6982       &lt;east-asian-variant-values&gt; || &lt;east-asian-width-values&gt; ||
  6983       ruby ]
  6985      <td>normal
  6987     <tr>
  6988      <th><span class=property>font-weight</span>
  6990      <td>normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  6992      <td>normal
  6994     <tr>
  6995      <th><a class=property href="#descdef-src">src</a>
  6997      <td>[ &lt;url> [format(&lt;string> #)]? | &lt;font-face-name&gt; ] #
  6999      <td>N/A
  7001     <tr>
  7002      <th><a class=property href="#descdef-unicode-range">unicode-range</a>
  7004      <td>&lt;urange&gt; #
  7006      <td>U+0-10FFFF
  7007   </table>
  7008   <!--end-descriptors-->
  7009   <script type="text/javascript">
  7010 window.onload = function () {
  7011   if (!("devicePixelRatio" in window && window.devicePixelRatio > 1)) return;
  7012   var i, hiresElements = document.getElementsByClassName("hires");
  7013   for (i = 0; i < hiresElements.length; i++) {
  7014     var h = hiresElements[i];
  7015     if (h.tagName != "IMG") continue;
  7016     var src = h.getAttribute("src");
  7017     var src2x = src.replace(/\.\w+$/, function(m) { return "@2x" + m; });
  7018     h.src = src2x;
  7021 </script>
  7022 </html>
  7023 <!-- Keep this comment at the end of the file
  7024 Local variables:
  7025 mode: sgml
  7026 sgml-declaration:"~/SGML/HTML4.decl"
  7027 sgml-default-doctype-name:"html"
  7028 sgml-minimize-attributes:t
  7029 sgml-nofill-elements:("pre" "style" "br")
  7030 sgml-live-element-indicator:t
  7031 sgml-omittag:nil
  7032 sgml-shorttag:nil
  7033 sgml-namecase-general:t
  7034 sgml-general-insert-case:lower
  7035 sgml-always-quote-attributes:t
  7036 sgml-indent-step:nil
  7037 sgml-indent-data:t
  7038 sgml-parent-document:nil
  7039 sgml-exposed-tags:nil
  7040 sgml-local-catalogs:nil
  7041 sgml-local-ecat-files:nil
  7042 End:
  7043 -->
  7044 <!--
  7046 to do:
  7048 - wording of OpenType family name handling
  7049 - handling combining sequences in the font matching algorithm
  7050 - fix-up fi ligature example
  7052 -->

mercurial