previous   next   contents   properties   index  

15 Fonts

Contents

15.2.6 Generic font families serif sans-serif cursive fantasy monospace 15.3 Font selection 15.3.115.1 Introduction

Setting font Descriptionsproperties will be among the most common uses of style sheets. Unfortunately, there exists no well-defined and @font-face 15.3.2 Descriptorsuniversally accepted taxonomy for Selecting a Font: 'font-family' , 'font-style' , 'font-variant' , 'font-weight' , 'font-stretch'classifying fonts, and 'font-size' 15.3.3 Descriptors forterms that apply to one font Data Qualification: 'unicode-range' 15.3.4 Descriptor for Numeric Values: 'units-per-em' 15.3.5 Descriptor for Referencing: 'src' 15.3.6 Descriptors for Matching: 'panose-1' , 'stemv' , 'stemh' , 'slope' , 'cap-height' , 'x-height' , 'ascent' , and 'descent' 15.3.7 Descriptors for Synthesis: 'widths' , 'bbox' and 'definition-src' 15.3.8 Descriptorsfamily may not be appropriate for Alignment: 'baseline' , 'centerline' , 'mathline' , and 'topline' 15.3.9 Examples 15.4 Font Characteristics 15.4.1 Introducing Font Characteristics 15.4.2 Full font name 15.4.3 Coordinate units on the em square 15.4.4 Central Baseline 15.4.5 Font Encoding 15.4.6others. E.g. 'italic' is commonly used to label slanted text, but slanted text may also be labeled as being Oblique, Slanted, Incline, Cursive or Kursiv. Therefore it is not a simple problem to map typical font family name 15.4.7 Glyph widths 15.4.8 Horizontal stem width 15.4.9 Height of uppercase glyphs 15.4.10 Height of lowercase glyphs 15.4.11 Lower Baseline 15.4.12 Mathematical Baseline 15.4.13 Maximal bounding box 15.4.14 Maximum unaccented height 15.4.15 Maximum unaccented depth 15.4.16 Panose-1 number 15.4.17 Range of ISO 10646 characters 15.4.18 Top Baseline 15.4.19 Vertical stem width 15.4.20 Vertical stroke angle 15.5selection properties to a specific font.

15.2 Font matching algorithm

15.5.1 Mapping font weight values to font names 15.5.2 ExamplesBecause there is no accepted, universal taxonomy of font properties, matching 15.1 Introduction When a document's text isof properties to be displayed visually, characters (abstract information elements)font faces must be mapped to abstract glyphs . One or more characters may be depicted by one or more abstract glyphs,done carefully. The properties are matched in a possibly context-dependent fashion. A glyph iswell-defined order to insure that the actual artistic representationresults of an abstract glyph, in some typographic style, inthis matching process are as consistent as possible across UAs (assuming that the formsame library of outlines or bitmaps that may be drawn on the screen or paper. Afont faces is presented to each of them).

  1. The User Agent makes (or accesses) a setdatabase of relevant CSS 2.1 properties of glyphs,all observingthe same basic motif according to design, size, appearance, and other attributes associatedfonts of which the UA is aware. If there are two fonts with exactly the same properties, the entire set, and a mapping from characters to abstract glyphs. A visualuser agent must address the following issues before actually renderingselects one of them.
  2. At a character: Is there, directly or by inheritance,given element and for each character in that element, the UA assembles the font properties applicable to that element. Using the complete set of properties, the UA uses the 'font-family' property to choose a tentative font specifiedfamily. The remaining properties are tested against the family according to the matching criteria described with each property. If there are matches for this character? Doesall the user agent have thisremaining properties, then that is the matching font available?face for the given element.
  3. If so, what glyph(s) does this character or sequence of characters map to?there is no matching font face within the 'font-family' being processed by step 2, and if not, what should be done? Shouldthere is a differentnext alternative 'font-family' in the font be substituted? Canset, then repeat step 2 with the next alternative 'font-family'.
  4. If there is a matching font be synthesized? Canface, but it be retrieved fromdoesn't contain a glyph for the Web? In both CSS1current character, and CSS2, authors specify font characteristics viaif there is a series ofnext alternative 'font-family' in the font properties. Howsets, then repeat step 2 with the user agent handles these properties, whennext alternative 'font-family'.
  5. If there is no matchingfont onwithin the client has expanded between CSS1 and CSS2.family selected in CSS1, all fonts were assumed to be present on the client system2, then use a UA-dependent default 'font-family' and were identified solely by name. Alternate fonts could be specified through the properties, but beyond that, user agents had no way to propose other fonts torepeat step 2, using the user (even stylistically similar fontsbest match that can be obtained within the user agent had available) other than genericdefault fonts. CSS2 changes all that, and allows much greater liberty for: style sheet authors, to describe the fonts they want to be used user agents, in selectingfont. If a font when an author's requested font is not immediately available. CSS2 improves client-side font matching, enables font synthesis and progressive rendering, and enables fonts toparticular character cannot be downloaded over the Web. These enhanced capabilities are referred to as 'WebFonts' In the CSS2 font model, as in CSS1, each user agent has a "font database" at its disposition. CSS1 referred todisplayed using this database but gave no details about what was in it. CSS2 defines the information in that database and allows style sheet authors to contribute to it. When asked to display a character with a particularfont, then the user agent first identifies theUA has no suitable font in the databasefor that "best fits" the specified font (according tocharacter. The font matching algorithm) OnceUA should map each character for which it has identifiedno suitable font to a font, it retrievesvisible symbol chosen by the font data locally orUA, preferably a "missing character" glyph from the Web, and may display the character using those glyphs. In lightone of this model, we have organized the specification into two sections. The first concernsthe font specification mechanism , whereby authors specify which fonts they would likefaces available to have used.the second concernsUA.

(The above algorithm can be optimized to avoid having to revisit the font selection mechanism , wherebyCSS 2.1 properties for each character.)

The client's user agent identifies and loadsper-property matching rules from (2) above are as follows:

  1. 'font-style' is tried first. 'italic' will be satisfied if there is either a font that best fits the author's specification. How the user agent constructsface in the UA's font database lies outsidelabeled with the scope of this specification sinceCSS keyword 'italic' (preferred) or 'oblique'. Otherwise the database's implementation depends on such factorsvalues must be matched exactly or font-style will fail.
  2. 'font-variant' is tried next. 'normal' matches a font not labeled as the operating system, the windowing system, and the client. 15.2'small-caps'; 'small-caps' matches (1) a font specification The first phase of the CSSlabeled as 'small-caps', (2) a font mechanism concerns how style sheet authors specifyin which fonts should be used by a user agent. At first, it seem thatthe obvious way to specifysmall caps are synthesized, or (3) a font iswhere all lowercase letters are replaced by it's name,upper case letters. A single string - which appears to be separated into distinct parts; for example "BT Swiss 721 Heavy Italic" . Unfortunately, there exists no well-defined and universally accepted taxonomy for classifying fonts based on their names, and terms that apply to onesmall-caps font family name may not be appropriate for others. For example, the term 'italic' is commonly used to label slanted text, but slanted textmay alsobe labeled Oblique, Slanted, Incline, Cursive , or Kursiv . Similarly, font names typically contain terms that describe the "weight" ofsynthesized by electronically scaling uppercase letters from a normal font.
  3. The primary role of these names'font-weight' is to distinguish faces of differing darknessmatched next, it will never fail. (See 'font-weight' below.)
  4. 'font-size' must be matched within a single font family. There is no accepted, universal meaningUA-dependent margin of tolerance. (Typically, sizes for scalable fonts are rounded to these weight names and usage varies widely.the nearest whole pixel, while the tolerance for example a font that you might think of as being bold mightbitmapped fonts could be describedas being Regular, Roman, Book, Medium, Semi- or Demi-Bold, Bold, or Black, dependinglarge as 20%.) Further computations, e.g. by 'em' values in other properties, are based on how blackthe "normal" facecomputed value of the'font-size'.

15.3 Font is withinfamily: the design. This lack of systematic naming makes it impossible, in'font-family' property

'font-family'
Value:  [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit
Initial:  depends on user agent
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual
Computed value:  as specified

The general case, to generate a modified font face name that differs invalue is a particular way, such as being bolder. Becauseprioritized list of this,font family names and/or generic family names. Unlike most other CSS usesproperties, values are separated by a different model . Fontscomma to indicate that they are requestedalternatives: 

body { font-family: Gill, Helvetica, sans-serif }

Although many fonts provide the "missing character" glyph, typically an open box, as its name implies this should not throughbe considered a single font name but through settingmatch for characters that cannot be found in the font. (It should, however, be considered a series of font properties. These property values formmatch for U+FFFD, the basis"missing character" character's code point).

There are two types of the user agent'sfont selection mechanism.family names:

<family-name>
The name of a font properties can be individually modified, for example to increasefamily of choice. In the boldness,last example, "Gill" and the new set of"Helvetica" are font property values will then be used to select fromfamilies.
<generic-family>
In the font database again.example above, the resultlast value is an increase in regularity fora generic family name. The following generic families are defined:

Style sheet authors and implementors, and an increase in robustness. 15.2.1 Font specification properties CSS2 specifies fonts accordingdesigners are encouraged to these characteristics: Font family Theoffer a generic font family specifies whichas a last alternative. Generic font family is tonames are keywords and must NOT be used to render the text. Aquoted.

If an unquoted font family is a group of fonts,designed toname contains parentheses, brackets, and/or braces, they must still be used in combinationeither balanced or escaped per CSS grammar rules. Similarly, quote marks, semicolons, exclamation marks and exhibiting similarities in design. One member of thecommas within unquoted font family maynames must be italic, another bold, another condensedescaped. Font names containing any such characters or using small caps.whitespace should be quoted:

Font familynames include "Helvetica",containing whitespace should be quoted: 

body { font-family: "New Century Schoolbook", serif }
  
<BODY STYLE="font-family: 'My own font', fantasy">

If quoting is omitted, any whitespace characters before and "Kyokasho ICA L".after the font family namesname are not restricted to Latin characters. Font families may be grouped into different categories: those with or without serifs, those whoseignored and any sequence of whitespace characters are or are not proportionally spaced, those that resemble handwriting, those that are fantasy fonts, etc. Font styleinside the font style specifies whether the textname is converted to be rendered using a normal, italic, or oblique face. Italic isa more cursive companion face tosingle space.

15.4 Font styling: the 'font-style' property

'font-style'
Value:  normal face, but not so cursive as to make it a script face.| italic | oblique is a slanted form of the| inherit
Initial:  normal
face, and is more commonly usedApplies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual
Computed value:  as a companion face to sans-serif. This definition avoids having to label slightly slantedspecified

The 'font-style' property selects between normal faces(sometimes referred to as oblique,"roman" or normal Greek"upright"), italic and oblique faces as italic.within a font variant Thefamily.

A value of 'normal' selects a font variant indicates whether the textthat is to be rendered usingclassified as 'normal' in the normal glyphs for lowercase characters or using small-caps glyphs for lowercase characters.UA's font database, while 'oblique' selects a particularfont may contain only normal, only small-caps, or both types of glyph; this propertythat is used to request an appropriatelabeled 'oblique'. A value of 'italic' selects a font and,that is labeled 'italic', or, if that is not available, one labeled 'oblique'.

The font contains both variants, the appropriate glyphs. Font weightthat is labeled 'oblique' in the UA's font weight refers to the boldness or lightness of the glyphs used to render the text, relative to otherdatabase may actually have been generated by electronically slanting a normal font.

Fonts with Oblique, Slanted or Incline in their names will typically be labeled 'oblique' in the same font family. Font stretch TheUA's font stretch indicates the desired amount of condensingdatabase. Fonts with Italic, Cursive or expansionKursiv in their names will typically be labeled 'italic'. 

h1, h2, h3 { font-style: italic }
h1 em { font-style: normal }

In the glyphs used to render the text, relative to other fontsexample above, emphasized text within 'H1' will appear in a normal face.

15.5 Small-caps: the same font family.'font-variant' property

'font-variant'
Value:  normal | small-caps | inherit
Initial:  normal
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual
Computed value:  as specified

Another type of variation within a font sizefamily is the small-caps. In a small-caps font size refersthe lower case letters look similar to the uppercase ones, but in a smaller size ofand with slightly different proportions. The 'font-variant' property selects that font.

A value of 'normal' selects a font from baseline to baseline, when set solid (in CSS terms, thisthat is whennot a small-caps font, 'small-caps' selects a small-caps font. It is acceptable (but not required) in CSS 2.1 if the 'font-size'small-caps font is a created by taking a normal font and 'line-height' properties havereplacing the same value). On all properties except 'font-size' , 'em' and 'ex' length values refer to the font size of the current element.lower case letters by scaled uppercase characters. As a last resort, uppercase letters will be used as replacement for 'font-size' , these length units refer to the font size of the parent element. Please consulta small-caps font.

The section on length units for more information.following example results in an 'H3' element in small-caps, with any emphasized words in oblique, and any emphasized words within an 'H3' oblique small-caps: 

h3 { font-variant: small-caps }
em { font-style: oblique }

There may be other variants in the CSSfont family as well, such as fonts with old-style numerals, small-caps numerals, condensed or expanded letters, etc. CSS 2.1 has no properties are used to describe the desired appearance ofthat select those.

Note: insofar as this property causes text in the document. The font descriptors, in contrast, are usedto describe the characteristics of fonts, so that a suitable font canbe chosentransformed to createuppercase, the desired appearance.same considerations as for information about the classification of fonts, please consult the section on font descriptors . 15.2.2'text-transform' apply.

15.6 Font familyboldness: the 'font-family''font-weight' property

'font-family''font-weight'
Value:   [[ <family-name>normal | <generic-family> ],]* [ <family-name>bold | <generic-family> ]bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Initial:   depends on user agentnormal
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual
ThisComputed value:  see text

The 'font-weight' property specifies a prioritized listselects the weight of font family names and/or generic family names. To deal withthe problem that a single font may not contain glyphs to display allfont. The characters in a document, or that not all fonts are available on all systems, this property allows authorsvalues '100' to specify'900' form an ordered sequence, where each number indicates a list of fonts, all of the same style and size,weight that are tried in sequence to see if they contain a glyph for a certain character. This listis called a font set . Example(s): For example, text that contains English words mixed with mathematical symbols may need a font set of two fonts, one containing Latin letters and digits,at least as dark as its predecessor. The other containing mathematical symbols. Herekeyword 'normal' is an example of a font set suitable for a text thatsynonymous with '400', and 'bold' is expectedsynonymous with '700'. Keywords other than 'normal' and 'bold' have been shown to contain textbe often confused with Latin characters, Japanese characters,font names and mathematical symbols: BODYa numerical scale was therefore chosen for the 9-value list. 

p {  font-family: Baskerville, "Heisi Mincho W3", Symbol, seriffont-weight: normal }   /* 400 */
h1 { font-weight: 700 }     /* bold */

The glyphs available in the "Baskerville" font (a'bolder' and 'lighter' values select font weights that covers only Latin characters) will be taken from that font, Japanese glyphs will be taken from "Heisi Mincho W3", andare relative to the mathematical symbol glyphs will come from "Symbol". Any others will comeweight inherited from the generic font family 'serif'.parent: 

strong { font-weight: bolder }

Child elements inherit the genericresultant weight, not the keyword value.

Fonts (the font family will be used ifdata) typically have one or more properties whose values are names that are descriptive of the other fonts in"weight" of a font setfont. There is unavailable. Although many fonts provide the "missing character" glyph, typically an open box, as its name implies this should not be considered a match except for the last font inno accepted, universal meaning to these weight names. Their primary role is to distinguish faces of differing darkness within a single font set. There are two types offamily. Usage across font family names: <family-name> The name offamilies is quite variant; for example, a font family of choice. In the previous example, "Baskerville", "Heisi Mincho W3", and "Symbol" are font families. Font family names containing whitespace shouldthat one might think of as being bold might be quoted. If quoting is omitted, any whitespace characters before and afterdescribed as being Regular, Roman, Book, Medium, Semi- or DemiBold, Bold, or Black, depending on how black the font name are ignored and any sequence"normal" face of whitespace characters insidethe font nameis converted to a single space. <generic-family>within the following generic families are defined: 'serif', 'sans-serif', 'cursive', 'fantasy', and 'monospace'. Please seedesign. Because there is no standard usage of names, the sectionweight property values in CSS 2.1 are given on generic font familiesa numerical scale in which the value '400' (or 'normal') corresponds to the "normal" text face for descriptionsthat family. The weight name associated with that face will typically be Book, Regular, Roman, Normal or sometimes Medium.

The association of these families. Generic fontother weights within a family names are keywords, and therefore must not be quoted. Authors are encouragedto offer a genericthe numerical weight values is intended only to preserve the ordering of darkness within that family. However, the following heuristics tell how the assignment is done in typical cases:

The UA may attempt to download this font resource.following two examples show typical mappings.

Assume four weights in the UA may choose to block on this download or may choose to proceed"Rattlesnake" family, from lightest to darkest: Regular, Medium, Bold, Heavy.

First example of font-weight mapping
Available faces Assignments Filling the next step whileholes
"Rattlesnake Regular" 400 100, 200, 300
"Rattlesnake Medium" 500  
"Rattlesnake Bold" 700 600
"Rattlesnake Heavy" 800 900

Assume six weights in the font downloads. UAs"Ice Prawn" family: Book, Medium, Bold, Heavy, Black, ExtraBlack. Note that do not implement font download, or arein this instance the user agent has decided not connectedto assign a network, or wherenumeric value to "Ice Prawn ExtraBlack".

Second example of font-weight mapping
Available faces Assignments Filling the user preferences have disabled font download, or whereholes
"Ice Prawn Book" 400 100, 200, 300
"Ice Prawn Medium" 500  
"Ice Prawn Bold" 700 600
"Ice Prawn Heavy" 800  
"Ice Prawn Black" 900  
"Ice Prawn ExtraBlack" (none)  

Since the intent of the requested resourcerelative keywords 'bolder' and 'lighter' is unavailable for whatever reason,to darken or wherelighten the downloaded font cannot be used for whatever reason, are considered to fail at this step. If there is no matching fontface within the 'font-family' being processed by step 3, UAs that implement font synthesis may proceed to examine other descriptors such as 'x-height' , glyph widths,family and 'panose-1' to identifybecause a different tentative fontfamily for synthesis. If there are matches formay not have faces aligned with all the remaining descriptors, then thatsymbolic weight values, the matching of 'bolder' is to the matching fontnext darker face foravailable on the given elementclient within the family and synthesisthe matching of 'lighter' is to the faux font may begin. UAs that do not implement font synthesis are considerednext lighter face within the family. To fail at this step. If allbe precise, the meaning of steps 3, 4 and 5 fail,the relative keywords 'bolder' and 'lighter' is as follows:

There is no guarantee that there will be a matching font face, but it doesn't contain glyph(s)darker face for each of the current character(s),'font-weight' values; for example, some fonts may have only a normal and ifa bold face, while others may have eight face weights. There is no guarantee on how a next alternative 'font-family' in theUA will map font sets, then repeat from step 2 with the next alternative 'font-family' .faces within a family to weight values. The 'unicode-range' descriptor mayonly guarantee is that a face of a given value will be usedno less dark than the faces of lighter values.

15.7 Font size: the 'font-size' property

'font-size'
Value:  <absolute-size> | <relative-size> | <length> | <percentage> | inherit
Initial:  medium
Applies to:  all elements
Inherited:  yes
Percentages:  refer to rapidly eliminate from consideration thoseparent element's font faces that do not havesize
Media:  visual
Computed value:  absolute length

The correct glyphs. Iffont size corresponds to the 'unicode-range' descriptor indicates thatem square, a font contains some glyphsconcept used in the correct range, ittypography. Note that certain glyphs may be examined bybleed outside their em squares. Values have the UA to see if it has that particular one. If therefollowing meanings:

<absolute-size>
An <absolute-size> keyword is noan index to a table of font within the family selected in 2, then use the inherited or UA-dependent 'font-family' valuesizes computed and repeat from step 2, usingkept by the best match that can be obtained within this font. If a particular character cannot be displayed using this font,UA. Possible values are:

[ xx-small | x-small | small | medium | large | x-large | xx-large ]

The UA should indicate that a character is not being displayed (for example, usingfollowing table provides user agent guidelines for the 'missing character' glyph). UAs that implement progressive renderingabsolute-size scaling factor and have pending font downloads may, once download is successful, usetheir mapping to HTML heading and absolute font-sizes. The downloaded font'medium' value is used as a font family. Ifthe downloaded font is missing some glyphs thatreference middle value. The temporary progressiveuser agent may fine tune these values for different fonts or different types of display devices.

CSS absolute-size values xx-small x-small small medium large x-large xx-large  
scaling factor 3/5 3/4 8/9 1 6/5 3/2 2/1 3/1
HTML headings h6   h5 h4 h3 h2 h1  
HTML font did contain,sizes 1   2 3 4 5 6 7

Different media may need different scaling factors. Also, the downloaded font is not used for that characterUA should take the quality and availability of fonts into account when computing the temporary font continues to be used. Note.table. The above algorithm cantable may be optimizeddifferent from one font family to another.

Note 1. To preserve readability, a UA applying these guidelines should nevertheless avoid havingcreating font-size resulting in less than 9 pixels per EM unit on a computer display.

Note 2. In CSS1, the suggested scaling factor between adjacent indexes was 1.5 which user experience proved to revisitbe too large. In CSS2, the CSS2 propertiessuggested scaling factor for computer screen between adjacent indexes was 1.2 which still created issues for each character.the per-descriptor matching rules from (2) above are as follows: 'font-style' is tried first. 'italic' will be satisfied if there is eithersmall sizes. The new scaling factor varies between each index to provide better readability.

<relative-size>
A face in<relative-size> keyword is interpreted relative to the UA'stable of font database labeled withsizes and the CSS keyword 'italic' (preferred) or 'oblique'. Otherwisefont size of the parent element. Possible values must be matched exactly or font-style will fail. 'font-variant' is tried next. 'normal' matches a font not labeled as 'small-caps'; 'small-caps' matches (1) a font labeled as 'small-caps', (2) a font in whichare: [ larger | smaller ]. For example, if the small caps are synthesized, or (3)parent element has a font where all lowercase letters are replaced by uppercase letters.size of 'medium', a small-capsvalue of 'larger' will make the font maysize of the current element be synthesized by electronically scaling uppercase letters from a normal font. 'font-weight''large'. If the parent element's size is matched next, it will never fail. (See 'font-weight' below.) 'font-size' must be matched within a UA-dependent margin of tolerance. (Typically, sizes for scalable fonts are roundednot close to a table entry, the nearest whole pixel, whileUA is free to interpolate between table entries or round off to the tolerance for bitmapped fonts could be as large as 20%.) Further computations, e.g., by 'em'closest one. The UA may have to extrapolate table values in other properties, are based onif the 'font-size'numerical value that is used,goes beyond the keywords.

Length and percentage values should not take the one that is specified. 15.5.1 Mappingfont weight values tosize table into account when calculating the font namessize of the 'font-weight' propertyelement.

Negative values are givennot allowed.

On a numerical scale in whichall other properties, 'em' and 'ex' length values refer to the value '400' (or 'normal') correspondscomputed font size of the current element. On the 'font-size' property, these length units refer to the "normal" text face for that family.computed font size of the weight name associated withparent element.

Note that face will typically be Book, Regular, Roman, Normal or sometimes Medium .an application may reinterpret an explicit size, depending on the context. E.g., inside a VR scene a font may get a different size because of perspective distortion.

Examples: 

p { font-size: 16px; }
@media print {
	p { font-size: 12pt; }
}
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }

15.8 Shorthand font property: the 'font' property

'font'
Value:  [ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
Initial:  see individual properties
Applies to:  all elements
Inherited:  yes
Percentages:  allowed on 'font-size' and 'line-height'
Media:  visual
Computed value:  see individual properties

The association of other weights within'font' property is, except as described below, a family toshorthand property for setting 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' and 'font-family' at the numerical weight values is intended only to preservesame place in the orderingstyle sheet. The syntax of weights within that family. User agents must map names to values in a way that preserves visual order; a face mapped to a value must not be lighter than faces mapped to lower values. Therethis property is no guaranteebased on how a user agent will map font faces withina familytraditional typographical shorthand notation to weight values. However, the following heuristics tell how the assignment is doneset multiple properties related to fonts.

All font-related properties are first reset to their initial values, including those listed in typical cases: Ifthe font family already uses a numerical scale with ninepreceding paragraph. Then, those properties that are given explicit values (as e.g., OpenType does),in the font weights should be mapped directly. If there is both'font' shorthand are set to those values. For a face labeled Mediumdefinition of allowed and one labeled Book, Regular, Roman or Normal, then the Medium is normally assigned to the '500'. The font labeled "Bold" will often correspond toinitial values, see the weight value '700'. If there are fewer then 9 weightspreviously defined properties. 

p { font: 12px/14px sans-serif }
p { font: 80% sans-serif }
p { font: x-large/110% "New Century Schoolbook", serif }
p { font: bold italic large Palatino, serif }
p { font: normal small-caps 120%/120% fantasy }

In the family, the default algorithm for fillingsecond rule, the "holes" is as follows. If '500' is unassigned, it will be assignedfont size percentage value ('80%') refers to the samefont as '400'. If anysize of the values '600', '700', '800', or '900' remains unassigned, they are assigned to the same face asparent element. In the next darker assigned keyword, if any, orthird rule, the next lighter one otherwise. If any of '300', '200', or '100' remains unassigned, it is assignedline height percentage refers to the next lighter assigned keyword, if any, or the next darker otherwise. There is no guarantee that there will be a darker face for eachfont size of the 'font-weight' values; for example, some fonts may have only a normal and a bold face, others may have eight different face weights. The following two examples show typical mappings. Assume four weightselement itself.

In the "Rattlesnake" family, from lightest to darkest: Regular, Medium, Bold, Heavy.first example of font-weight mapping Available faces Assignments Filling the holes "Rattlesnake Regular" 400 100, 200, 300 "Rattlesnake Medium" 500   "Rattlesnake Bold" 700 600 "Rattlesnake Heavy" 800 900 Assume six weights in the "Ice Prawn" family: Book, Medium, Bold, Heavy, Black, ExtraBlack. Note that in this instancethree rules above, the user agent has decided'font-style', 'font-variant' and 'font-weight' are not explicitly mentioned, which means they are all three set to assign a numerictheir initial value ('normal'). The fourth rule sets the 'font-weight' to "Example2 ExtraBlack". Second example of font-weight mapping Available faces Assignments Filling'bold', the 'font-style' to 'italic' and implicitly sets 'font-variant' to 'normal'.

The fifth rule sets the 'font-variant' ('small-caps'), the holes "Ice Prawn Book" 400 100, 200, 300 "Ice Prawn Medium" 500   "Ice Prawn Bold" 700 600 "Ice Prawn Heavy" 800   "Ice Prawn Black" 900   "Ice Prawn ExtraBlack" (none)   15.5.2 Examples'font-size' (120% of the parent's font), the 'line-height' (120% times the font matching Example(s):size) and the 'font-family' ('fantasy'). It follows that the keyword 'normal' applies to the two remaining properties: 'font-style' and 'font-weight'.

The following example defines a specific font face, Alabama Italic. A panosevalues refer to system fonts:

caption
The font description and source URIused for retrieving a truetype servercaptioned controls (e.g., buttons, drop-downs, etc.).
icon
The font are also provided. Font-weight and font-style descriptors are providedused to describe the font.label icons.
menu
The declaration says thatfont used in menus (e.g., dropdown menus and menu lists).
message-box
The weight will also match any requestfont used in dialog boxes.
small-caption
The range 300 to 500.font used for labeling small controls.
status-bar
The font family is Alabama andused in window status bars.

System fonts may only be set as a whole; that is, the adornedfont name is Alabama Italic. @font-face { src: local("Alabama Italic"), url(http://www.fonts.org/A/alabama-italic) format("truetype"); panose-1: 2 4 5 2 5 4 5 9 3 3; font-family: Alabama, serif; font-weight: 300, 400, 500; font-style: italic, oblique; } Example(s):family, size, weight, style, etc. are all set at the next example definessame time. These values may then be altered individually if desired. If no font with the indicated characteristics exists on a family of fonts.given platform, the user agent should either intelligently substitute (e.g., a single URI is provided for retrievingsmaller version of the 'caption' font data. This data file will contain multiple styles and weights ofmight be used for the named'small-caption' font), or substitute a user agent default font. Once oneAs for regular fonts, if, for a system font, any of the individual properties are not part of these @font-face definitions has been dereferenced,the data willoperating system's available user preferences, those properties should be in the UA cache for other facesset to their initial values.

That use the same URI. @font-face { src: local("Helvetica Medium"), url(http://www.fonts.org/sans/Helvetica_family) format("truedoc"); font-family: "Helvetica"; font-style: normal } @font-face { src: local("Helvetica Oblique"), url("http://www.fonts.org/sans/Helvetica_family") format("truedoc"); font-family: "Helvetica"; font-style: oblique; slope: -18 } Example(s): The following example groups three physicalis why this property is "almost" a shorthand property: system fonts into one virtual fontcan only be specified with extended coverage. In each case,this property, not with 'font-family' itself, so 'font' allows authors to do more than the adorned font name issum of its subproperties. However, the individual properties such as 'font-weight' are still given invalues taken from the src descriptor to allow locally installed versions tosystem font, which can be preferentially used if available. A fourth rule points to a font with the same coverage, but contained in a single resource. @font-face { font-family: Excelsior; src: local("Excelsior Roman"), url("http://site/er") format("intellifont"); unicode-range: U+??; /* Latin-1 */ } @font-faceindependently varied.

Example(s):

button {  font-family: Excelsior; src: local("Excelsior EastA Roman"), url("http://site/ear") format("intellifont"); unicode-range: U+100-220; /* Latin Extended A and B */font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
 @font-facebutton p {  font-family: Excelsior; src: local("Excelsior Cyrillic Upright"), url("http://site/ecr") format("intellifont"); unicode-range: U+4??; /* Cyrillic */font: menu }
 @font-facebutton p em {  font-family: Excelsior; src: url("http://site/excels") format("truedoc"); unicode-range: U+??,U+100-220,U+4??;font-weight: bolder }

Example(s): This next example might be found in a UA's default style sheet. It implementsIf the CSS2 genericfont family, serif by mapping itused for dropdown menus on a particular system happened to be, for example, 9-point Charcoal, with a wide varietyweight of serif fonts600, then P elements that might exist on various platforms. No metrics arewere descendants of BUTTON would be displayed as if this rule were in effect: 

button p { font: 600 9px Charcoal }

Because the 'font' shorthand property resets any property not explicitly given since these vary amonga value to its initial value, this has the possible alternatives. @font-facesame effect as this declaration: 

button p {
   src: local("Palatino"), local("Times New Roman"), local("New York"), local("Utopia"), url("http://somewhere/free/font");font-family:  serif; font-weight: 100, 200, 300, 400, 500;Charcoal;
  font-style: normal;
  font-variant: normal;
  font-weight: 600;
  font-size:  all9px;
  line-height: normal;
}

previous   next   contents   properties   index