Contents
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.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, in a possibly context-dependent fashion. A glyph isdone
carefully. The actual artistic representation of an abstract glyph, in some typographic style,properties are matched in the form of outlines or bitmapsa well-defined order to
insure that may be drawn onthe screen or paper. Aresults of this matching process are as consistent as
possible across UAs (assuming that the same library of font faces is
presented to each of them).
(The above algorithm can be optimized to as 'WebFonts' Inavoid having to revisit
the CSS2 font model, as in CSS1,CSS 2.1 properties for each user agent hascharacter.)
The per-property matching rules from (2) above are as follows:
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 primary role of these namesvalue is to distinguish faces of differing darkness withina singleprioritized list of font family. There is no accepted, universal meaning to these weightfamily names and usage varies widely. For exampleand/or generic
family names. Unlike most other CSS properties, values are separated
by a fontcomma to indicate that you might think of as being bold might be described as being Regular, Roman, Book, Medium, Semi- or Demi-Bold, Bold, or Black, depending on how black the "normal" face of the font is withinthey are alternatives:
body { font-family: Gill, Helvetica, sans-serif }
Although many fonts provide the design."missing character" glyph,
typically an open box, as its name implies this lack of systematic naming makes it impossible, in the general case, to generateshould not be
considered a modified font face namematch
for characters that differscannot be found in the font. (It should,
however, be considered a particular way, such as being bolder. Because of this, CSS uses a different model . Fontsmatch for U+FFFD, the "missing character"
character's code point).
There are requested not through a single font name but through setting a seriestwo types of font properties. These property values formfamily names:
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 combinationescaped per CSS grammar rules. Similarly, quotation marks (both single and exhibiting similarities in design. One member of thedouble), semicolons,
exclamation marks, commas, and leading slashes within unquoted font family maynames must be italic, another bold, another condensed or using small caps.escaped.
Font familynames include "Helvetica",containing any such characters or 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 facesingle space.
Font family names that happen to be the normal face, but not so cursivesame as to make it a script face. Oblique isa slanted form of the normal face,keyword value (e.g. 'initial', 'inherit', 'default', 'serif', 'sans-serif', 'monospace', 'fantasy', and is more commonly used as a companion face to sans-serif. This definition avoids having'cursive') must be quoted to label slightly slanted normal faces as oblique, or normal Greek facesprevent confusion with the keywords with the same names. UAs must not consider these keywords as italic. Font variantmatching the '<family-name>' type.
Value: | |
Initial: | |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
| as specified |
The 'font-style' property specifiesselects between normal (sometimes
referred to as "roman" or "upright"), italic and oblique faces within
a prioritized listfont family.
A value of 'normal' selects a font family names and/or generic family names. To deal with the problemthat a single font may not contain glyphs to display all the charactersis classified as 'normal'
in the UA's font database, while 'oblique' selects a document, orfont that not all fonts are available on all systems, this property allows authors to specifyis
labeled 'oblique'. A list of fonts, allvalue of the same style and size, that are tried in sequence to see if they contain a glyph for a certain character. This list is called'italic' selects a font set . Example(s): For example, textthat contains English words mixed with mathematical symbols may need a font set of two fonts,is labeled
'italic', or, if that is not available, one containing Latin letters and digits,labeled 'oblique'.
The other containing mathematical symbols. Here is an example of afont set suitable for a textthat is expected to contain text with Latin characters, Japanese characters, and mathematical symbols: BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif } The glyphs availablelabeled 'oblique' in the "Baskerville" font (aUA's font that covers only Latin characters) will be taken from that font, Japanese glyphsdatabase may
actually have been generated by electronically slanting a normal font.
Fonts with Oblique, Slanted or Incline in their names will
typically be taken from "Heisi Mincho W3", and the mathematical symbol glyphs will come from "Symbol". Any others will come from the generic font family 'serif'.labeled 'oblique' in the genericUA's font familydatabase. Fonts with
Italic, Cursive or Kursiv in their names will
typically be used if one or more oflabeled 'italic'.
h1, h2, h3 { font-style: italic } h1 em { font-style: normal }
In the other fontsexample above, emphasized text within 'H1' will appear in a
font set is unavailable. Although many fonts providenormal face.
Value: | normal | |
Initial: | normal |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
| as |
Another type of variation within a font family. Values have the following meanings: normal Specifies a font thatfamily is classified as 'normal' inthe UA's font database. oblique Specifiessmall-caps.
In a small-caps font that is classified as 'oblique' inthe UA's font database. Fonts with Oblique, Slanted, or Incline in their names will typically be labeled 'oblique' in the font database. A font that is labeled 'oblique' in the UA's font database may actually have been generated by electronically slanting a normal font. italic Specifies a font that is classified as 'italic' in the UA's font database, or, if that is not available, one labeled 'oblique'. Fonts with Italic, Cursive , or Kursiv in their names will typically be labeled 'italic'. Example(s): In this example, normal text in an H1, H2, or H3 element will be displayed with an italic font. However, emphasized text (EM) within an H1 will appear in a normal face. H1, H2, H3 { font-style: italic } H1 EM { font-style: normal } 'font-variant' Value: normal | small-caps | inherit Initial: normal Applies to: all elements Inherited: yes Percentages: N/A Media: visual In a small-caps font, the glyphs for lowercaselower case letters look similar to the
uppercase ones, but in a smaller size and with slightly different
proportions. The 'font-variant' property requests such a font for bicameral (having two cases, as with Latin script). This property has no visible effect for scriptsselects that are unicameral (having only one case, as with mostfont.
A value of the world's writing systems). Values have the following meanings: normal Specifies'normal' selects a font that is not labeled asa small-caps font. small-caps Specifies a font that is labeled asfont,
'small-caps' selects a small-caps font. It is acceptable (but not
required) in CSS 2.1 if a genuinethe small-caps font is not available, user agents should simulatea small-caps font, for examplecreated by taking a
normal font and replacing the lowercaselower case letters by scaled uppercase
characters. As a last resort, unscaleduppercase letter glyphs in a normal font may replace glyphs inletters will be used as
replacement for a small-caps font so that the text appears in all uppercase letters. Example(s):font.
The following example results in an H3'H3' element in small-caps,
with any emphasized words (EM)in oblique small-caps: H3 { font-variant: small-capsoblique, 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 font family as well, such as fonts with old-style numerals, small-caps numerals, condensed or expanded letters, etc. CSS 2.1 has no properties that select those.
Note: insofar as this property causes text to be transformed to uppercase, the same considerations as for 'text-transform' apply.
Value: | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit |
Initial: | normal |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | see text |
The 'font-weight' property specifiesselects the weight of the font. Values haveThe
following meanings: 100 to 900 Thesevalues '100' to '900' form an ordered sequence, where each number
indicates a weight that is at least as dark as its predecessor. normal Same as '400'. bold Same as '700'. bolder SpecifiesThe
next weight thatkeyword 'normal' is assigned to a font thatsynonymous with '400', and 'bold' is darkersynonymous
with '700'. Keywords other than the inherited one. If there is no such weight, it simply results in the next darker numerical value (and the font remains unchanged), unless the inherited value was '900', in which case the resulting weight is also '900'. lighter Specifies the next weight that is assigned'normal' and 'bold' have been shown to
abe often confused with font that is lighter than the inherited one. If there is no such weight, it simply results in the next lighternames and a numerical value (and the font remains unchanged), unless the inherited valuescale was '100', in which casetherefore
chosen for the resulting weight is also '100'. Example(s):9-value list.
p { font-weight: normal } /* 400 */ h1 { font-weight: 700 } /* bold */
BODY { font-weight: 400 }The 'bolder' and 'lighter' values select font weights that are
relative to the weight inherited from the parent:
strong { font-weight: bolder }
/* 500 if available */Child elements inherit the computed value of the weight. 'font-stretch' Value: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit Initial: normal Applies to: all elements Inherited: yes Percentages: N/A Media: visualresultant weight, not the 'font-stretch' property selects a normal, condensed, or extended face from a font family. Absolutekeyword valuesvalue.
Fonts (the font data) typically have one or more properties whose
values are names that are descriptive of the following ordering, from narrowest"weight" of a font. There
is no accepted, universal meaning to widest : ultra-condensed extra-condensed condensed semi-condensed normal semi-expanded expanded extra-expanded ultra-expanded The relative keyword 'wider' sets the valuethese weight names. Their primary
role is to distinguish faces of differing darkness within a single
font family. Usage across font families is quite variant; for example,
a font that one might think of as being bold might be described as
being Regular, Roman, Book, Medium, Semi- or DemiBold,
Bold, or Black, depending on how black the next expanded value above"normal" face
of the inherited value (while not increasing it above 'ultra-expanded');font is within the relative keyword 'narrower' setsdesign. Because there is no standard usage
of names, the value toweight property values in CSS 2.1 are given on a numerical
scale in which the next condensedvalue below'400' (or 'normal') corresponds to the
inherited value (while not decreasing it below 'ultra-condensed'). 15.2.4 Font size :"normal" text face for that family. The 'font-size' and 'font-size-adjust' properties 'font-size' Value: <absolute-size> | <relative-size> | <length> | <percentage> | inherit Initial: weight name associated with
that face will typically be Book, Regular, Roman, Normal or
sometimes Medium Applies to: all elements Inherited: yes,.
The computed valueassociation of other weights within a family to the numerical
weight values is inherited Percentages: referintended only to parent element's font size Media: visual This property describespreserve the sizeordering of the font when set solid. Values havedarkness
within that family. However, the following meanings: <absolute-size> An <absolute-size> keyword refers to an entryheuristics tell how the
assignment is done in a table of font sizes computed and kept by the user agent. Possible values are: [ xx-small | x-small | small | medium | large | x-large | xx-large ] On a computer screen a scaling factor of 1.2 is suggested between adjacent indexes;typical cases:
The user agent may havefollowing two examples show typical mappings.
Assume four weights in the "Rattlesnake" family, from lightest to
extrapolate table values ifdarkest: Regular, Medium, Bold, Heavy.
Available faces | Assignments | Filling the |
---|---|---|
"Rattlesnake Regular" | 400 | 100, 200, 300 |
"Rattlesnake Medium" | 500 | |
"Rattlesnake Bold" | 700 | 600 |
"Rattlesnake Heavy" | 800 | 900 |
Assume six weights in the
keywords. <length> A length value specifies an absolute font size (that is independent of"Ice Prawn" family: Book, Medium, Bold, Heavy, Black,
ExtraBlack. Note that in this instance the user agent's font table). Negative lengths are illegal. <percentage>agent
has decided not to assign a percentagenumeric
value specifies an absolute font size relativeto "Ice Prawn ExtraBlack".
Available faces | Assignments | Filling the |
---|---|---|
"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 percentage values, or values in 'em's, leadsthe relative keywords 'bolder' and 'lighter' is
to more robustdarken or lighten the face within the family and cascadable style sheets.because a
family may not have faces aligned with all the actual valuesymbolic weight values,
the matching of this property may differ from'bolder' is to the computed value due a numerical valuenext darker face available on 'font-size-adjust'the
client within the family and the unavailabilitymatching of certain font sizes. Child elements inherit'lighter' is to the computed 'font-size' value (otherwise,next
lighter face within the effectfamily. To be precise, the meaning of 'font-size-adjust' would compound). Example(s): P { font-size: 12pt; } BLOCKQUOTE { font-size: larger } EM { font-size: 150% } EM { font-size: 1.5em } 'font-size-adjust' Value: <number> | none | inherit Initial: none Applies to: all elements Inherited: yes Percentages: N/A Media: visual In bicameral scripts,the
subjective apparent sizerelative keywords 'bolder' and legibility of'lighter' is as follows:
There is no guarantee that a font at smaller sizesthere will be legible. Inversely, faces witha lower aspect value will become illegible more rapidly belowdarker face for each of
the 'font-weight' values; for example, some fonts may have only a
given threshold size than faces withnormal and a higher aspect value. Straightforward font substitution that reliesbold face, while others may have eight face weights.
There is no guarantee on how a UA will map font size alone may leadfaces within a family
to illegible characters. For example,weight values. The popular font Verdana has an aspect value of 0.58; when Verdana's font size 100 units, its x-heightonly guarantee is 58 units. For comparison, Times New Roman has an aspect valuethat a face of 0.46. Verdanaa given value
will therefore tend to remain legible at smaller sizesbe no less dark than Times New Roman. Conversely, Verdana will often look 'too big' if substituted for Times New Roman at a chosen size. This property allows authors to specify an aspect value for an element that will preserve the x-height of the first choice font in the substitute font. Values have the following meanings: none Do not preserve the font's x-height. <number> Specifies the aspect value. The number refers tothe aspect valuefaces of lighter values.
The first choice font. The scaling factor for available fonts iscomputed according to the following formula: y(a/a') = c where: y = 'font-size' of first-choice font a' = aspect value of available font c = 'font-size' to apply to available font Example(s): For example, if 14px Verdana (with an aspectvalue of 0.58) was unavailable and an available font had an aspect value"font-weight" is either:
CSS 2.1 does not specify how the horizontal metricscomputed value of lines, as well. 15.2.5 Shorthandfont-weight is
represented internally or externally.
Value: | |
Initial: | |
Applies to: | all elements |
Inherited: | yes |
Percentages: | |
Media: | visual |
Computed value: | absolute length |
The 'font' property is, except as described below , a shorthand property for setting 'font-style' , 'font-variant' , 'font-weight' , 'font-size' , 'line-height' , and 'font-family' , at the same place in the style sheet.font size corresponds to the syntax of this property is based onem square, a traditional typographical shorthand notation to set multiple properties related to fonts. All font-related properties are first reset to their initial values, including those listedconcept used in the preceding paragraph plus 'font-stretch' and 'font-size-adjust' . Then, those propertiestypography.
Note that are given explicitcertain glyphs may bleed outside their em squares. Values
inhave the 'font' shorthand are setfollowing meanings:
[ xx-small | x-small | small | medium | large Palatino, serif } P { font: normal small-caps 120%/120% fantasy } P { font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed } In| x-large | xx-large ]
The second rule,following table provides user agent guidelines for the font size percentage value ('80%') refersabsolute-size
mapping to HTML heading and absolute font-sizes. The font size of the parent element. In the third rule, the line height percentage ('110%') refers to'medium' value is
the user's preferred font size ofand is used as the element itself. The first three rules do not specify the 'font-variant' and 'font-weight' explicitly, so these properties receive their initialreference middle value.
CSS absolute-size values | |
x-small | small | medium | large | x-large | xx-large | |
---|---|---|---|---|---|---|---|---|
HTML headings | h6 | h5 | h4 | h3 | h2 | h1 | ||
HTML font |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
Note: implementation experience has demonstrated that a fixed ratio between adjacent absolute-size keywords is enclosedproblematic, and this specification does NOT recommend such a fixed ratio, in quotes. The fourth rule sets the 'font-weight' to 'bold', the 'font-style'contrast to 'italic',previous specifications (CSS1 suggested 1.5, and implicitly sets 'font-variant' to 'normal'. The fifth rule sets the 'font-variant' ('small-caps'), the 'font-size' (120% of the parent's font size), the 'line-height' (120%CSS2 suggested 1.2).
Implementors should build a table of scaling factors for absolute-size keywords relative to the 'medium' font size)size and the 'font-family' ('fantasy'). It follows thatparticular device and its characteristics (e.g. the keyword 'normal' applies toresolution of the two remaining properties: 'font-style' and 'font-weight' .device).
Different media may need different scaling factors. Also, the sixth rule setsUA
should take the 'font-style' , 'font-size' ,quality and 'font-family' ,availability of fonts into account when
computing the othertable. The table may be different from one font properties being set to their initial values. It then sets 'font-stretch'family
to 'condensed' since that property cannot be setanother.
Note 1. To that value using the 'font' shorthand property.preserve readability, a UA applying
these guidelines should nevertheless avoid creating font-size resulting
in less than 9 pixels per EM unit on a computer display.
Note 2. In CSS1, the following values refersuggested
scaling factor between adjacent indexes was 1.5 which user experience
proved to system fonts : captionbe too large. In CSS2, the font usedsuggested scaling factor for computer
screen between adjacent indexes was 1.2 which still created issues for captioned controls (e.g., buttons, drop-downs, etc.). iconthe font usedsmall
sizes. The new scaling factor varies between each index to provide better
readability.
Length and percentage values should either intelligently substitute (e.g., a smaller version ofnot take the 'caption'font might be used forsize table
into account when calculating the 'smallcaption' font), or substitute a user agent default font. As for regular fonts, if, for a system font, anyfont size of the individual propertieselement.
Negative values are not partallowed.
On all other properties, 'em' and 'ex' length values refer to the
computed font size of the operating system's available user preferences, those properties should be set to their initial values. That is why this property is "almost" a shorthand property: system fonts can only be specified with thiscurrent element. On the 'font-size' property, not with 'font-family' itself, so 'font' allows authorsthese
length units refer to do more thanthe sumcomputed font size of its subproperties. However,the individual properties such as 'font-weight' are still given values taken fromparent element.
Note that an application may reinterpret an explicit size,
depending on the system font, which can be independently varied. Example(s): BUTTONcontext. E.g., inside a VR scene a font may get a
different size because of perspective distortion.
Examples:
p {font:300italic1.3em/1.7em"FBArmada",sans-seriffont-size: 16px; }BUTTON@media print { p {font:menufont-size: 12pt; } } blockquote { font-size: larger }BUTTONPem {font-weight:bolderfont-size: 150% }Ifthefontusedfordropdownmenusonaparticularsystemhappenedtobe,forexample,9-pointCharcoal,withaweightof600,thenPelementsthatweredescendantsofBUTTONwouldbedisplayedasifthisrulewereineffect:BUTTONPem {font:6009ptCharcoalfont-size: 1.5em }
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: | see individual properties |
Media: | visual |
Computed value: | see individual properties |
The same effect'font' property is,
except as this declaration: BUTTON P { font-style: normal; font-variant: normal; font-weight: 600; font-size: 9pt; line-height: normal; font-family: Charcoal } 15.2.6 Generic font families Generic font families are a fallback mechanism,described below, a means of preserving some ofshorthand property for
setting
'font-style',
'font-variant',
'font-weight',
'font-size',
'line-height' and
'font-family' at the style sheet author's intentsame
place in the worst case when none of the specified fonts can be selected. For optimum typographic control, particular named fonts should be used instyle
sheets.sheet. The syntax of this property is based on a traditional
typographical shorthand notation to set multiple properties related to
fonts.
All five generic font familiesfont-related properties are definedfirst reset to existtheir initial values,
including those listed in all CSS implementations (they need not necessarily map to five distinct actual fonts). User agents should provide reasonable default choices forthe generic font families, which express the characteristics of each family as well as possible within the limits allowed bypreceding paragraph.
Then, those properties that are given explicit values in the
underlying technology. User agents'font' shorthand are encouraged to allow usersset to select alternative choicesthose values.
For the generic fonts. serif Glyphs of serif fonts, as the term is used in CSS, have finishing strokes, flared or tapering ends, or have actual serifed endings (including slab serifs). Serif fonts are typically proportionately-spaced. They often displaya greater variation between thickdefinition of allowed and thin strokes than fonts from the 'sans-serif' generic font family. CSS uses the term 'serif' to apply to a font for any script, although other names may be more familiar for particular scripts, such as Mincho (Japanese), Sung or Song (Chinese), Totum or Kodig (Korean). Any font that is so described may be used to representinitial values, see the generic 'serif' family. Examples of fonts that fit this description include: Latin fonts Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit Greek fonts Bitstream Cyberbit Cyrillic fonts Adobe Minion Cyrillic, Excelcior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinst Hebrew fonts New Peninim, Raanana, Bitstream Cyberbit Japanese fonts Ryumin Light-KL, Kyokasho ICA, Futo Min A101 Arabic fonts Bitstream Cyberbit Cherokee fonts Lo Cicero Cherokeepreviously defined properties.
p { font: 12px/14px sans-serifGlyphsin} p { font: 80% sans-seriffonts,asthetermisusedinCSS,havestrokeendingsthatareplain--withoutanyflaring,crossstroke,orotherornamentation.Sans-seriffontsaretypicallyproportionately-spaced.Theyoftenhavelittlevariationbetweenthickandthinstrokes,comparedtofontsfromthe'serif'family.CSSusestheterm'sans-serif'toapplytoafontforanyscript,althoughothernamesmaybemorefamiliarforparticularscripts,suchasGothic(Japanese),Kai(Chinese),orPathang(Korean).Anyfontthatissodescribedmaybeusedtorepresentthegeneric'sans-serif'family.Examplesoffontsthatfitthisdescriptioninclude:LatinfontsMSTrebuchet,ITCAvantGardeGothic,MSArial,MSVerdana,Univers,Futura,ITCStoneSans,GillSans,AkzidenzGrotesk,HelveticaGreekfontsAttika,TypikoNewEra,MSTahoma,MonotypeGillSans571,HelveticaGreekCyrillicfontsHelveticaCyrillic,ERUnivers,LucidaSansUnicode,BastionHebrewfontsArialHebrew,MSTahomaJapanesefontsShinGo,HeiseiKakuGothicW5ArabicfontsMSTahomacursiveGlyphsincursivefonts,asthetermisusedinCSS,generallyhaveeitherjoiningstrokesorothercursivecharacteristicsbeyondthoseofitalictypefaces.Theglyphsarepartiallyorcompletelyconnected,andtheresultlooksmorelikehandwrittenpenorbrushwritingthanprintedletterwork.Fontsforsomescripts,suchasArabic,arealmostalwayscursive.CSSusestheterm'cursive'toapplytoafontforanyscript,althoughothernamessuchasChancery,Brush,SwingandScriptarealsousedinfontnames.Examplesoffontsthatfitthisdescriptioninclude:LatinfontsCaflischScript,AdobePoetica,Sanvito,ExPonto,SnellRoundhand,Zapf-ChanceryCyrillicfontsERArchitektHebrewfontsCorsivaArabicfontsDecoTypeNaskh,MonotypeUrdu507fantasyFantasyfonts,asusedinCSS,areprimarilydecorativewhilestillcontainingrepresentationsofcharacters(asopposedtoPiorPicturefonts,whichdonotrepresentcharacters).Examplesinclude:LatinfontsAlphaGeometrique,Critter,Cottonwood,FBReactor,StudzmonospaceThesolecriterionofamonospacefontisthatallglyphshavethesamefixedwidth.(Thiscanmakesomescripts,suchasArabic,lookmostpeculiar.)Theeffectissimilartoamanualtypewriter,andisoftenusedtosetsamplesofcomputercode.Examplesoffontswhichfitthisdescriptioninclude:LatinfontsCourier,MSCourierNew,Prestige,EversonMonoGreekFontsMSCourierNew,EversonMonoCyrillicfontsERKurier,EversonMonoJapanesefontsOsakaMonospacedCherokeefontsEversonMono15.3FontselectionThesecondphaseoftheCSS2fontmechanismconcernstheuseragent'sselectionofafontbasedonauthor-specifiedfontproperties,availablefonts,etc.Thedetailsofthefontmatchingalgorithmareprovidedbelow.Therearefourpossiblefontselectionactions:namematching,intelligentmatching,synthesis,anddownload.fontnamematchingInthiscase,theuseragentusesanexisting,accessiblefontthathasthesamefamilynameastherequestedfont.(Notethattheappearanceandthemetricsmightnotnecessarilymatch,ifthefontthatthedocumentauthorusedandthefontontheclientsystemarefromdifferentfoundries).ThematchinginformationisrestrictedtotheCSSfontproperties,includingthefamilyname.ThisistheonlymethodusedbyCSS1.intelligentfontmatchingInthiscase,theuseragentusesanexisting,accessiblefontthatistheclosestmatchinappearancetotherequestedfont.(Notethatthemetricsmightnotmatchexactly).Thematchinginformationincludesinformationaboutthekindoffont(textorsymbol),natureofserifs,weight,capheight,xheight,ascent,descent,slant,etc.fontsynthesisInthiscase,theuseragentcreatesafontthatisnotonlyaclosematchinappearance,butalsomatchesthemetricsoftherequestedfont.Thesynthesizinginformationincludesthematchinginformationandtypicallyrequiresmoreaccuratevaluesfortheparametersthanareusedforsomematchingschemes.Inparticular,synthesisrequiresaccuratewidthmetricsandcharactertoglyphsubstitutionandpositioninformationifallthelayoutcharacteristicsofthespecifiedfontaretobepreserved.fontdownloadFinally,theuseragentmayretrieveafontovertheWeb.Thisissimilartotheprocessoffetchingimages,sounds,orappletsovertheWebfordisplayinthecurrentdocument,andlikewisecancausesomedelaybeforethepagecanbedisplayed.Progressiverenderingisacombinationofdownloadandoneoftheothermethods;itprovidesatemporarysubstitutefont(usingnamematching,intelligentmatching,orsynthesis)toallowcontenttobereadwhiletherequestedfontdownloads.Oncetherealfonthasbeensuccessfullydownloaded,itreplacesthetemporaryfont,hopefullywithouttheneedtoreflow.Note.Progressiverenderingrequiresmetricinformationaboutthefontinordertoavoidre-layoutofthecontentwhentheactualfonthasbeenloadedandrendered.Thismetricinformationissufficientlyverbosethatitshouldonlybespecifiedatmostonceperfontinadocument.15.3.1FontDescriptionsand@font-faceThefontdescriptionprovidesthebridgebetweenanauthor'sfontspecificationandthefontdata,whichisthedataneededtoformattextandtorendertheabstractglyphstowhichthecharactersmap-theactualscalableoutlinesorbitmaps.Fontsarereferencedbystylesheetproperties.Thefontdescriptionisaddedtothefontdatabaseandthenusedtoselecttherelevantfontdata.ThefontdescriptioncontainsdescriptorssuchasthelocationofthefontdataontheWeb,andcharacterizationsofthatfontdata.Thefontdescriptorsarealsoneededtomatchthestylesheetfontpropertiestoparticularfontdata.Thelevelofdetailofafontdescriptioncanvaryfromjustthenameofthefontuptoalistofglyphwidths.Fontdescriptorsmaybeclassifiedintothreetypes:thosethatprovidethelinkbetweentheCSSusageofthefontandthefontdescription(thesehavethesamenamesasthecorrespondingCSSfontproperties),theURIforthelocationofthefontdata,thosethatfurthercharacterizethefont,toprovidealinkbetweenthefontdescriptionandthefontdata.Allfontdescriptionsarespecifiedviaa@font-faceat-rule.Thegeneralformis:@font-face{<font-description>}wherethe<font-description>hastheform:descriptor:value;descriptor:value;[...]descriptor:value;Each@font-facerulespecifiesavalueforeveryfontdescriptor,eitherimplicitlyorexplicitly.Thosenotgivenexplicitvaluesintheruletaketheinitialvaluelistedwitheachdescriptorinthisspecification.Thesedescriptorsapplysolelywithinthecontextofthe@font-faceruleinwhichtheyaredefined,anddonotapplytodocumentlanguageelements.Thus,thereisnonotionofwhichelementsthedescriptorsapplyto,orwhetherthevaluesareinheritedbychildelements.Theavailablefontdescriptorsaredescribedinlatersectionsofthisspecification.Forexample,herethefont'RobsonCeltic'isdefinedandreferencedinastylesheetcontainedinanHTMLdocument.<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0//EN"><HTML><HEAD><TITLE>Fonttest</TITLE><STYLETYPE="text/css"MEDIA="screen,print">@font-face{font-family:"RobsonCeltic";src:url("http://site/fonts/rob-celt")}H1{font-family:"RobsonCeltic",serif}</STYLE></HEAD><BODY><H1>ThisheadingisdisplayedusingRobsonCeltic</H1></BODY></HTML>Thestylesheet(intheSTYLEelement)containsaCSSrulethatsetsallH1elementstousethe'RobsonCeltic'fontfamily.ACSS1implementationwillsearchtheclientforafontwhosefamilynameandotherpropertiesmatch'RobsonCeltic'and,ifitfailstofindit,willusetheUA-specificfallbackseriffont(whichisdefinedtoexist).AuseragentimplementingCSS2willfirstexamine@font-facerulesinsearchofafontdescriptiondefining'RobsonCeltic'.Thisexamplecontainsarulethatmatches.Althoughthisruledoesn'tcontainmuchfontdata,itdoeshaveaURIwherethefontcanberetrievedforrenderingthisdocument.Downloadedfontsshouldnotbemadeavailabletootherapplications.Ifnomatching@font-faceisfound,theuseragentwillattemptthesamematchasauseragentimplementingCSS1.Notethatifthefont'RobsonCeltic'hadbeeninstalledontheclientsystem,thiswouldhavecausedtheUAtoaddanentryinthefontdatabasefortheinstalledcopyasdescribedinthesectiononthefontmatchingalgorithm.Theinstalledcopywouldhavebeenmatchedbeforethedownloadablefontintheexampleabove.CSS1implementations,whichdonotunderstandthe@font-facerule,willencountertheopeningcurlybracketsandwillignoreforwarduntilthematchingclosingcurlybrackets.Thisat-ruleconformswiththeforward-compatibleparsingrequirementofCSS.Parsersmayignoretheseruleswithouterror.Havingthefontdescriptorsseparatefromthefontdatahasabenefitbeyondbeingabletodofontselectionand/orsubstitution.Thedataprotectionandreplicationrestrictionsonthefontdescriptorsmaybemuchweakerthanonthefullfontdata.Thus,itmaybepossibletoinstallthefontdefinitionlocally,oratleasttohaveitinalocalcacheifitoccursinacommonlyreferencedstylesheet;thiswouldnotrequireaccessingthefullfontdefinitionovertheWebmorethanoncepernamedfont.Ifafontdescriptorisduplicated,thelastoccurringdescriptorwinsandtherestmustbeignored.Also,anydescriptorsthatarenotrecognizedorusefultotheuseragentmustbeignored.FutureversionsofCSSmayallowadditionaldescriptorsforthepurposeofbetterfontsubstitution,matching,orsynthesis.15.3.2DescriptorsforSelectingaFont:'font-family','font-style','font-variant','font-weight','font-stretch'and'font-size'ThefollowingdescriptorshavethesamenamesasthecorrespondingCSS2fontproperties,andtakeasinglevalueorcomma-separatedlistofvalues.Thevalueswithinthatlistare,exceptasexplicitlynoted,thesameasthoseforthecorrespondingCSS2property.Ifthereisasinglevalue,thatisthevaluethatmustbematched.Ifthereisalist,anylistitemconstitutesamatch.Ifthedescriptorisomittedfromthe@font-face,theinitialvalueforthedescriptorisused.'font-family'(Descriptor)Value:[<family-name>|<generic-family>][,[<family-name>|<generic-family>]]*Initial:dependsonuseragentMedia:visualThisisthedescriptorforthefontfamilynameofafontandtakesthesamevaluesasthe'font-family'property.'font-style'(Descriptor)Value:all|[normal|italic|oblique][,[normal|italic|oblique]]*Initial:allMedia:visualThisisthedescriptorforthestyleofafontandtakesthesamevaluesasthe'font-style'property,exceptthatacomma-separatedlistispermitted.'font-variant'(Descriptor)Value:[normal|small-caps][,[normal|small-caps]]*Initial:normalMedia:visualThisistheCSSindicationofwhetherthisfaceisthesmall-capsvariantofafont.Ittakesthesamevaluesasthe'font-variant'propertyexceptthatacomma-separatedlistispermitted.Note.Cyrillicpryamoĭfacesmaybelabeledwitha'font-variant'ofsmall-caps,whichwillgivebetterconsistencywithLatinfaces(andthecompanionkursivfacelabeledwith'font-style'italicforthesamereason).'font-weight'(Descriptor)Value:all|[normal|bold|100|200|300|400|500|600|700|800|900][,[normal|bold|100|200|300|400|500|600|700|800|900]]*Initial:allMedia:visualThisisthedescriptorfortheweightofafacerelativetoothersinthesamefontfamily.Ittakesthesamevaluesasthe'font-weight'propertywiththreeexceptions:relativekeywords(bolder,lighter)arenotpermitted.acomma-separatedlistofvaluesispermitted,forfontsthatcontainmultipleweights.anadditionalkeyword,'all'ispermitted,whichmeansthatthefontwillmatchforallpossibleweights;eitherbecauseitcontainsmultipleweights,orbecausethatfaceonlyhasasingleweight.'font-stretch'(Descriptor)Value:all|[normal|ultra-condensed|extra-condensed|condensed|semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded][,[normal|ultra-condensed|extra-condensed|condensed|semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded]]*Initial:normalMedia:visualThisistheCSSindicationofthecondensedorexpandednatureofthefacerelativetoothersinthesamefontfamily.Ittakesthesamevaluesasthe'font-stretch'propertyexceptthat:relativekeywords(wider,narrower)arenotpermittedacomma-separatedlistispermittedThekeyword'all'ispermitted'font-size'(Descriptor)Value:all|<length>[,<length>]*Initial:allMedia:visualThisisthedescriptorforthesizesprovidedbythisfont.Onlyabsolutelengthunitsarepermitted,incontrasttothe'font-size'property,whichallowsbothrelativeandabsolutelengthsandsizes.Acomma-separatedlistofabsolutelengthsispermitted.Theinitialvalueof'all'issuitableformostscalablefonts,sothisdescriptorisprimarilyforuseinan@font-faceforbitmapfonts,orscalablefontsdesignedtoberasterisedatarestrictedrangeoffontsizes.15.3.3DescriptorsforFontDataQualification:'unicode-range'Thefollowingdescriptorisoptionalwithinafontdefinition,butisusedtoavoidcheckingordownloadingafontthatdoesnothavesufficientglyphstorenderaparticularcharacter.'unicode-range'(Descriptor)Value:<urange>[,<urange>]*Initial:U+0-7FFFFFFFMedia:visualThisisthedescriptorfortherangeofISO10646characterscoveredbythefont.Thevaluesof<urange>areexpressedusinghexadecimalnumbersprefixedby"U+",correspondingtocharactercodepositionsinISO10646([ISO10646]).Forexample,U+05D1istheISO10646character'Hebrewletterbet'.ForvaluesoutsidetheBasicMultilingualPlane(BMP),additionalleadingdigitscorrespondingtotheplanenumberareadded,alsoinhexadecimal,likethis:U+A1234whichisthecharacteronPlane10athexadecimalcodeposition1234.AtthetimeofwritingnocharactershadbeenassignedoutsidetheBMP.Leadingzeros(forexample,0000004D)arevalid,butnotrequired.TheinitialvalueofthisdescriptorcoversnotonlytheentireBasicMultilingualPlane(BMP),whichwouldbeexpressedasU+0-FFFF,butalsothewholerepertoireofISO10646.Thus,theinitialvaluesaysthatthefontmayhaveglyphsforcharactersanywhereinISO10646.Specifyingavaluefor'unicode-range'providesinformationtomakesearchingefficient,bydeclaringaconstrainedrangeinwhichthefontmayhaveglyphsforcharacters.Thefontneednotbesearchedforcharactersoutsidethisrange.Valuesmaybewrittenwithanynumberofdigits.Forsinglenumbers,thecharacter'?'isassumedtomean'anyvalue'whichcreatesarangeofcharacterpositions.Thus,usingasinglenumber:unicode-range:U+20A7nowildcards-itindicatesasinglecharacterposition(theSpanishpesetacurrencysymbol)unicode-range:U+215?onewildcard,coverstherange2150to215F(thefractions)unicode-range:U+00??twowildcards,coverstherange0000to00FF(Latin-1)unicode-range:U+E??twowildcards,covers0E00to0EFF(theLaoscript)Apairofnumbersinthisformatcanbecombinedwiththedashcharactertoindicatelargerranges.Forexample:unicode-range:U+AC00-D7FFtherangeisAC00toD7FF(theHangulSyllablesarea)Multiple,discontinuousrangescanbespecified,separatedbyacomma.Aswithothercomma-separatedlistsinCSS,anywhitespacebeforeorafterthecommaisignored.Forexample:unicode-range:U+370-3FF,U+1F??Thiscoverstherange0370to03FF(ModernGreek)plus1F00to1FFF(AncientpolytonicGreek).unicode-range:U+3000-303F,U+3100-312F,U+32??,U+33??,U+4E00-9FFF,U+F9000-FAFF,U+FE30-FE4FSomethingofaworstcaseintermsofverbosity,thisverypreciselyindicatesthatthis(extremelylarge)fontcontainsonlyChinesecharactersfromISO10646,withoutincludinganycharactersthatareuniquelyJapaneseorKorean.Therangeis3000to303F(CJKsymbolsandpunctuation)plus3100to312F(Bopomofo)plus3200to32FF(enclosedCJKlettersandmonths)plus3300to33FF(CJKcompatibilityzone)plus4E00to9FFF(CJKunifiedIdeographs)plusF900toFAFF(CJKcompatibilityideographs)plusFE30toFE4F(CJKcompatibilityforms).AmorelikelyrepresentationforatypicalChinesefontwouldbe:unicode-range:U+3000-33FF,U+4E00-9FFFunicode-range:U+11E00-121FFThisfontcoversaproposedregistrationforAztecpictograms,coveringtherange1E00to21FFinplane1.unicode-range:U+1A00-1A1FThisfontcoversaproposedregistrationforIrishOghamcoveringtherange1A00to1A1F15.3.4DescriptorforNumericValues:'units-per-em'Thefollowingdescriptorspecifiesthenumberof"units"perem;theseunitsmaybeusedbyseveralotherdescriptorstoexpressvariouslengths,so'units-per-em'isrequiredifotherdescriptorsdependonit.'units-per-em'(Descriptor)Value:<number>Initial:undefinedMedia:visualThisisthedescriptorforthenumberofthecoordinateunitsontheemsquare,thesizeofthedesigngridonwhichglyphsarelaidout.15.3.5DescriptorforReferencing:'src'Thisdescriptorisrequiredforreferencingactualfontdata,whetherdownloadableorlocallyinstalled.'src'(Descriptor)Value:[<uri>[format(<string>[,<string>]*)]|<font-face-name>][,<uri>[format(<string>[,<string>]*)]|<font-face-name>]*Initial:undefinedMedia:visualThisisaprioritized,comma-separatedlistofexternalreferencesand/orlocallyinstalledfontfacenames.TheexternalreferencepointstothefontdataontheWeb.ThisisrequirediftheWebFontistobedownloaded.Thefontresourcemaybeasubsetofthesourcefont,forexampleitmaycontainonlytheglyphsneededforthecurrentpageorforasetofpages.TheexternalreferenceconsistsofaURI,followedbyanoptionalhintregardingtheformatoffontresourcetobefoundatthatURI,andthisinformationshouldbeusedbyclientstoavoidfollowinglinkstofontsinformatstheyareunabletouse.Aswithanyhypertextreference,theremaybeotherformatsavailable,buttheclienthasabetterideaofwhatislikelytobethere,inamorerobustwaythantryingtoparsefilenameextensionsinURIs.Theformathintcontainsacomma-separatedlistofformatstringsthatdenotewell-knownfontformats.Theuseragentwillrecognizethenameoffontformatsthatitsupports,andwillavoiddownloadingfontsinformatsthatitdoesnotrecognize.Aninitiallistofformatstringsdefinedbythisspecificationandrepresentingformatslikelytobeusedbyimplementationsonvariousplatformsis:StringFontFormatExamplesofcommonextensions"truedoc-pfr"TrueDoc™PortableFontResource.pfr"embedded-opentype"EmbeddedOpenType.eot"type-1"PostScript™Type1.pfb,.pfa"truetype"TrueType.ttf"opentype"OpenType,includingTrueTypeOpen.ttf"truetype-gx"TrueTypewithGXextensions"speedo"Speedo"intellifont"IntellifontAswithotherURIsinCSS,theURImaybepartial,inwhichcaseitisresolvedrelativetothelocationofthestylesheetcontainingthe@font-face.Thelocally-installed<font-face-name>isthefullfontnameofalocallyinstalledfont.Thefullfontnameisthenameofthefontasreportedbytheoperatingsystemandisthenamemostlikelytobeusedinreaderstylesheets,browserdefaultstylesheetsorpossiblyauthorstylesheetsonanintranet.Adornmentssuchasbold,italic,andunderlineareoftenusedtodifferentiatefaceswithinafontfamily.Formoreinformationaboutfullfontnamespleaseconsultthenotesbelow.Thenotationfora<font-face-name>isthefullfontname,whichmustbequotedsinceitmaycontainanycharacter,includingspacesandpunctuation,andalsomustbeenclosedin"local("and")".Example(s):src:url("http://foo/bar")afullURIandnoinformationaboutthefontformat(s)availabletheresrc:local("BTCentury751No.2SemiBoldItalic")referencesaparticularfaceofalocallyinstalledfontsrc:url("../fonts/bar")format("truedoc-pfr")apartialURIwhichhasafontavailableinTrueDocformatsrc:url("http://cgi-bin/bar?stuff")format("opentype","intellifont")afullURI,inthiscasetoascript,whichcangeneratetwodifferentformats-OpenTypeandIntellifontsrc:local("T-26TypekaMix"),url("http://site/magda-extra")format("type-1")twoalternativesaregiven,firstlyalocallyinstalledfontandsecondlyadownloadablefontavailableinType1format.Accesstolocallyinstalledfontsisviathe<font-face-name>.Thefontfacenameisnottrulyunique,norisittrulyplatformorfontformatindependent,butatthemomentitisthebestwaytoidentifylocallyinstalledfontdata.Theuseofthefontfacenamecanbemademoreaccuratebyprovidinganindicationoftheglyphcomplementrequired.ThismaybedonebyindicatingtherangeofISO10646characterpositionsforwhichthefontprovidessomeglyphs(see'unicode-range').15.3.6DescriptorsforMatching:'panose-1','stemv','stemh','slope','cap-height','x-height','ascent',and'descent'ThesedescriptorsareoptionalforaCSS2definition,butmaybeusedifintelligentfontmatchingorfontsizeadjustmentisdesiredbytheauthor.'panose-1'(Descriptor)Value:[<integer>]{10}Initial:0000000000Media:visualThisisthedescriptorforthePanose-1numberandconsistsoftendecimalintegers,separatedbywhitespace.Acomma-separatedlistisnotpermittedforthisdescriptor,becausethePanose-1systemcanindicatethatarangeofvaluesarematched.Theinitialvalueiszero,whichmeans"any",foreachPANOSEdigit;allfontswillmatchthePanosenumberifthisvalueisused.UseofthePanose-1descriptorisstronglyrecommendedforlatinfonts.Forfurtherdetails,seeAppendixC.'stemv'(Descriptor)Value:<number>Initial:undefinedMedia:visualThisisthedescriptorfortheverticalstemwidthofthefont.Ifthevalueisundefined,thedescriptorisnotusedformatching.Ifthisdescriptorisused,the'units-per-em'descriptormustalsobeused.'stemh'(Descriptor)Value:<number>Initial:undefinedMedia:visualThisisthedescriptorforthehorizontalstemwidthofthefont.Ifthevalueisundefined,thedescriptorisnotusedformatching.Ifthisdescriptorisused,the'units-per-em'descriptormustalsobeused.'slope'(Descriptor)Value:<number>Initial:0Media:visualThisisthedescriptorfortheverticalstrokeangleofthefont.'cap-height'(Descriptor)Value:<number>Initial:undefinedMedia:visualThisisthedescriptorforthenumberoftheheightofuppercaseglyphsofthefont.Ifthevalueisundefined,thedescriptorisnotusedformatching.Ifthisdescriptorisused,the'units-per-em'descriptormustalsobeused.'x-height'(Descriptor)Value:<number>Initial:undefinedMedia:visualThisisthedescriptorfortheheightoflowercaseglyphsofthefont.Ifthevalueisundefined,thedescriptorisnotusedformatching.Ifthisdescriptorisused,the'units-per-em'descriptormustalsobeused.Thisdescriptorcanbeveryusefulwhenusingthe'font-size-adjust'property,becausecomputationofthezvalueofcandidatefontsrequiresboththefontsizeandthex-height;itisthereforerecommendedtoincludethisdescriptor.'ascent'(Descriptor)Value:<number>Initial:undefinedMedia:visualThisisthedescriptorforthemaximumunaccentedheightofthefont.Ifthevalueisundefined,thedescriptorisnotusedformatching.Ifthisdescriptorisused,the'units-per-em'descriptormustalsobeused.'descent'(Descriptor)Value:<number>Initial:undefinedMedia:visualThisisthedescriptorfortheMaximumunaccenteddepthofthefont.Ifthevalueisundefined,thedescriptorisnotusedformatching.Ifthisdescriptorisused,the'units-per-em'descriptormustalsobeused.15.3.7DescriptorsforSynthesis:'widths','bbox'and'definition-src'Synthesizingafontmeans,atminimum,matchingthewidthmetricsofthespecifiedfont.Therefore,forsynthesis,thismetricinformationmustbeavailable.Similarly,progressiverenderingrequireswidthmetricsinordertoavoidreflowofthecontentwhentheactualfonthasbeenloaded.AlthoughthefollowingdescriptorsareoptionalforaCSS2definition,somearerequiredifsynthesizing(orreflow-freeprogressiverendering)isdesiredbytheauthor.Shouldtheactualfontbecomeavailable,thesubstituteshouldbereplacedbytheactualfont.Anyofthesedescriptorsthatarepresentwillbeusedtoprovideabetterorfasterapproximationoftheintendedfont.Ofthesedescriptors,themostimportantarethe'widths'descriptorand'bbox'whichareusedtopreventtextreflowshouldtheactualfontbecomeavailable.Inaddition,thedescriptorsinthesetofdescriptorsusedformatchingcanbeusedtoprovideabettersynthesisoftheactualfontappearance.'widths'(Descriptor)Value:[<urange>]?[<number>]+[,[<urange>]?<number>]+]Initial:undefinedMedia:visualThisisthedescriptorfortheglyphwidths.Thevalueisacomma-separatedlistof<urange>valueseachfollowedbyoneormoreglyphwidths.Ifthisdescriptorisused,the'units-per-em'descriptormustalsobeused.Ifthe<urange>isomitted,arangeofU+0-7FFFFFFFisassumedwhichcoversallcharactersandtheirglyphs.Ifnotenoughglyphwidthsaregiven,thelastinthelistisreplicatedtocoverthaturange.Iftoomanywidthsareprovided,theextrasareignored.Example(s):Forexample:widths:U+4E00-4E1F173618741692widths:U+1A??1490,U+215?1473183819271684135617921815184818701492171517451584199219781770Inthefirstexamplearangeof32charactersisgiven,from4E00to4E1F.Theglyphcorrespondingtothefirstcharacter(4E00)hasawidthof1736,thesecondhasawidthof1874andthethird,1692.Becausenotenoughwidthshavebeenprovided,thelastwidthreplicatestocovertherestofthespecifiedrange.Thesecondexamplesetsasinglewidth,1490,foranentirerangeof256glyphsandthenexplicitwidthsforarangeof16glyphs.Thisdescriptorcannotdescribemultipleglyphscorrespondingtoasinglecharacter,orligaturesofmultiplecharacters.Thus,thisdescriptorcanonlybeusedforscriptsthatdonothavecontextualformsormandatoryligatures.Itisneverthelessusefulinthosesituations.Scriptsthatrequireaone-to-manyormany-to-manymappingofcharacterstoglyphscannotatpresentusethisdescriptortoenablefontsynthesisalthoughtheycanstillusefontdownloadingorintelligentmatching.'bbox'(Descriptor)Value:<number>,<number>,<number>,<number>Initial:undefinedMedia:visualThisisthedescriptorforthemaximalboundingboxofthefont.Thevalueisacomma-separatedlistofexactlyfournumbersspecifying,inorder,thelowerleftx,lowerlefty,upperrightx,andupperrightyoftheboundingboxforthecompletefont.'definition-src'(Descriptor)Value:<uri>Initial:undefinedMedia:visualThefontdescriptorsmayeitherbewithinthefontdefinitioninthestylesheet,ormaybeprovidedwithinaseparatefontdefinitionresourceidentifiedbyaURI.Thelatterapproachcanreducenetworktrafficwhenmultiplestylesheetsreferencethesamefonts.15.3.8DescriptorsforAlignment:'baseline','centerline','mathline',and'topline'Theseoptionaldescriptorsareusedtoalignrunsofdifferentscriptswithoneanother.'baseline'(Descriptor)Value:<number>Initial:0Media:visualThisisthedescriptorforthelowerbaselineofafont.Ifthisdescriptorisgivenanon-default(non-zero)value,the'units-per-em'descriptormustalsobeused.'centerline'(Descriptor)Value:<number>Initial:undefinedMedia:visualThisisthedescriptorforthecentralbaselineofafont.Ifthevalueisundefined,theUAmayemployvariousheuristicssuchasthemidpointoftheascentanddescentvalues.Ifthisdescriptorisused,the'units-per-em'descriptormustalsobeused.'mathline'(Descriptor)Value:<number>Initial:undefinedMedia:visualThisisthedescriptorforthemathematicalbaselineofafont.Ifundefined,theUAmayusethecenterbaseline.Ifthisdescriptorisused,the'units-per-em'descriptormustalsobeused.'topline'(Descriptor)Value:<number>Initial:undefinedMedia:visualThisisthedescriptorforthetopbaselineofafont.Ifundefined,theUAmayuseanapproximatevaluesuchastheascent.Ifthisdescriptorisused,the'units-per-em'descriptormustalsobeused.15.3.9ExamplesExample(s):Giventhefollowinglistoffonts:Swiss721lightlight&lightitalicSwiss721roman,bold,italic,bolditalicSwiss721mediummedium&mediumitalicSwiss721heavyheavy&heavyitalicSwiss721blackblack,blackitalic,&black#2Swiss721Condensedroman,bold,italic,bolditalicSwiss721Expandedroman,bold,italic,bolditalicThefollowingfontdescriptionscouldbeusedtomakethemavailablefordownload.@font-face{font-family:"Swiss721";src:url("swiss721lt.pfr");/*Swiss721light*/font-style:normal,italic;font-weight:200;}@font-face{font-family:"Swiss721";src:url("swiss721.pfr");/*TheregularSwiss721*/}@font-face{font-family:"Swiss721";src:url("swiss721md.pfr");/*Swiss721medium*/font-style:normal,italic;font-weight:500;}@font-face{font-family:"Swiss721";src:url("swiss721hvy.pfr");/*Swiss721heavy*/font-style:normal,italic;font-weight:700;}@font-face{font-family:"Swiss721";src:url("swiss721blk.pfr");/*Swiss721black*/font-style:normal,italic;font-weight:800,900;/*notetheinterestingproblemthatthe900weightitalicdoesn'texist*/}@font-face{font-family:"Swiss721";src:url(swiss721.pfr);/*ThecondensedSwiss721*/font-stretch:condensed;}@font-face{font-family:"Swiss721";src:url(swiss721.pfr);/*TheexpandedSwiss721*/font-stretch:expanded;}15.4FontCharacteristics15.4.1IntroducingFontCharacteristicsInthissectionarelistedthefontcharacteristicsthathavebeenfoundusefulforclient-sidefontmatching,synthesis,anddownloadforheterogeneousplatformsaccessingtheWeb.ThedatamaybeusefulforanymediumthatneedstousefontsontheWebbysomeothermeansthanphysicalembeddingofthefontdatainsidethemedium.Thesecharacteristicsareusedtocharacterizefonts.TheyarenotspecifictoCSS,ortostylesheets.InCSS,eachcharacteristicisdescribedbyafontdescriptor.ThesecharacteristicscouldalsobemappedontoVRMLnodes,orCGMApplicationStructures,oraJavaAPI,oralternativestylesheetlanguages.Fontsretrievedbyonemediumandstoredinaproxycachecouldbere-usedbyanothermedium,savingdownloadtimeandnetworkbandwidth,ifacommonsystemoffontcharacteristicsareusedthroughout.Anon-exhaustivelistofexamplesofsuchmediaincludes:2-DvectorformatsComputerGraphicsMetafileSimpleVectorFormat3-DgraphicsformatsVRML3DMFObjectembeddingtechnologiesJavaActive-XObliq15.4.2FullfontnameThisisthefullnameofaparticularfaceofafontfamily.Ittypicallyincludesavarietyofnon-standardizedtextualqualifiersoradornmentsappendedtothefontfamilyname.Itmayalsoincludeafoundrynameorabbreviation,oftenprependedtothefontfamilyname.Itisonlyusedtorefertolocallyinstalledfonts,becausetheformatoftheadornednamecanvaryfromplatformtoplatform.Itmustbequoted.Forexample,thefontfamilynameoftheTrueTypefontandthePostScriptnamemaydifferintheuseofspacecharacters,punctuation,andintheabbreviationofsomewords(e.g.,tomeetvarioussystemorprinterinterpreterconstraintsonlengthofnames).Forexample,spacesarenotallowinaPostScriptname,butarecommoninfullfontnames.TheTrueTypenametablecanalsocontainthePostScriptname,whichhasnospaces.Thenameofthefontdefinitionisimportantbecauseitisthelinktoanylocallyinstalledfonts.Itisimportantthatthenameberobust,bothwithrespecttoplatformandapplicationindependence.Forthisreason,thenameshouldbeonethatisnotapplication-orlanguage-specific.Theidealsolutionwouldbetohaveanamethatuniquelyidentifieseachcollectionoffontdata.Thisnamedoesnotexistincurrentpracticeforfontdata.Fontswiththesamefacenamecanvaryoveranumberofdescriptors.Someofthesedescriptors,suchasdifferentcomplementsofglyphsinthefont,maybeinsignificantiftheneededglyphsareinthefont.Otherdescriptors,suchasdifferentwidthmetrics,makefontswiththesamenameincompatible.Itdoesnotseempossibletodefinearulethatwillalwaysidentifyincompatibilities,butwillnotpreventtheuseofaperfectlysuitablelocalcopyofthefontdatawithagivenname.Therefore,onlytherangeofISO10646characterswillbeusedtoqualifymatchesforthefontfacename.Sinceaprimegoalofthefontfacenameinthefontdefinitionistoallowauseragenttodeterminewhenthereisalocalcopyofthespecifiedfontdata,thefontfacenamemustbeanamethatwillbeinalllegitimatecopiesofthefontdata.Otherwise,unnecessaryWebtrafficmaybegeneratedduetomissedmatchesforthelocalcopy.15.4.3CoordinateunitsontheemsquareCertainvalues,suchaswidthmetrics,areexpressedinunitsthatarerelativetoanabstractsquarewhoseheightistheintendeddistancebetweenlinesoftypeinthesametypesize.Thissquareiscalledtheemsquareanditisthedesigngridonwhichtheglyphoutlinesaredefined.ThevalueofthisdescriptorspecifieshowmanyunitstheEMsquareisdividedinto.Commonvaluesareforexample250(Intellifont),1000(Type1)and2048(TrueType,TrueTypeGXandOpenType).Ifthisvalueisnotspecified,itbecomesimpossibletoknowwhatanyfontmetricsmean.Forexample,onefonthaslowercaseglyphsofheight450;anotherhassmalleronesofheight890!Thenumbersareactuallyfractions;thefirstfonthas450/1000andthesecondhas890/2048whichisindeedsmaller.15.4.4CentralBaselineThisgivesthepositionintheemsquareofthecentralbaseline.Thecentralbaselineisusedbyideographicscriptsforalignment,justasthebottombaselineisusedforLatin,Greek,andCyrillicscripts.15.4.5FontEncodingEitherexplicitlyorimplicitly,eachfonthasatableassociatedwithit,thefontencodingtable,thattellswhatcharactereachglyphrepresents.Thistableisalsoreferredtoasanencodingvector.Infact,manyfontscontainseveralglyphsforthesamecharacter.Whichofthoseglyphsshouldbeuseddependseitherontherulesofthelanguage,oronthepreferenceofthedesigner.InArabic,forexample,alllettershavefour(ortwo)differentshapes,dependingonwhethertheletterisusedatthestartofaword,inthemiddle,attheend,orinisolation.Itisthesamecharacterinallcases,andthusthereisonlyonecharacterinthesourcedocument,butwhenprinted,itlooksdifferenteachtime.Therearealsofontsthatleaveittothegraphicdesignertochoosefromamongvariousalternativeshapesprovided.Unfortunately,CSS2doesn'tyetprovidethemeanstoselectthosealternatives.Currently,itisalwaysthedefaultshapethatischosenfromsuchfonts.15.4.6FontfamilynameThisspecifiesthefamilynameportionofthefontfacename.Forexample,thefamilynameforHelvetica-BoldisHelveticaandthefamilynameofITCStoneSerifSemiboldItalicisITCStoneSerif.Somesystemstreatadornmentsrelatingtocondensedorexpandedfacesasiftheywerepartofthefamilyname.15.4.7GlyphwidthsThisisalistofwidths,onthedesigngrid,fortheglyphcorrespondingtoeachcharacter.ThelistisorderedbyISO10646codepoint.Widthscannotusefullybespecifiedwhenmorethanoneglyphmapstothesamecharacterorwhentherearemandatoryligatures.15.4.8HorizontalstemwidthThisvaluereferstothedominantstemofthefont.Theremaybetwoormoredesignedwidths.Forexample,themainverticalstemsofRomancharacterswilldifferfromthethinstemsonserifed"M"and"N",plustheremaybedifferentwidthsforuppercaseandlowercasecharactersinthesamefont.Also,eitherbydesignorbyerror,allstemsmayhaveslightlydifferentwidths.15.4.9HeightofuppercaseglyphsThismeasurementisthey-coordinateofthetopofflatuppercaselettersinLatin,Greek,andCyrillicscripts,measuredfromthebaseline.Thisdescriptorisnotnecessarilyusefulforfontsthatdonotcontainanyglyphsfromthesescripts.15.4.10HeightoflowercaseglyphsThismeasurementisthey-coordinateofthetopofunaccented,non-ascendinglowercaselettersinLatin,GreekandCyrillicscripts,measuredfromthebaseline.Flat-toppedlettersareused,ignoringanyopticalcorrectionzone.Thisisusuallyusedasaratiooflowercasetouppercaseheightsasameanstocomparefontfamilies.Thisdescriptorisnotusefulforfontsthatdonotcontainanyglyphsfromthesescripts.Sincetheheightsoflowercaseanduppercaselettersareoftenexpressedasaratioforcomparingdifferentfonts,itmaybeusefultosetboththelowercaseanduppercaseheightstothesamevalueforunicameralscriptssuchasHebrew,whereformixedLatinandHebrewtext,theHebrewcharactersaretypicallysetataheightmidwaybetweentheuppercaseandlowercaseheightsoftheLatinfont.15.4.11LowerBaselineThisgivesthepositionintheemsquareofthelowerbaseline.ThelowerbaselineisusedbyLatin,Greek,andCyrillicscriptsforalignment,justastheupperbaselineisusedforSanscrit-derivedscripts.15.4.12MathematicalBaselineThisgivesthepositionintheemsquareofthemathematicalbaseline.Themathematicalbaselineisusedbymathematicalsymbolsforalignment,justasthelowerbaselineisusedforLatin,Greek,andCyrillicscripts.15.4.13MaximalboundingboxThemaximalboundingboxisthesmallestrectangleenclosingtheshapethatresultsifallglyphsinthefontareplacedwiththeiroriginscoincident,andthenpainted.Ifadynamicallydownloadablefonthasbeengeneratedbysubsettingaparentfont,thebboxshouldbethatoftheparentfont.15.4.14MaximumunaccentedheightThismeasurement,ontheemsquare,isfromthebaselinetothehighestpointreachedbyanyglyph,excludinganyaccentsordiacriticalmarks.15.4.15MaximumunaccenteddepthThismeasurement,ontheemsquare,isfromthebaselinetothelowestpointreachedbyanyglyph,excludinganyaccentsordiacriticalmarks.15.4.16Panose-1numberPanose-1isanindustrystandardTrueTypefontclassificationandmatchingtechnology.ThePANOSEsystemconsistsofasetoftennumbersthatcategorizethekeyattributesofaLatintypeface,aclassificationprocedureforcreatingthosenumbers,andMappersoftwarethatdeterminestheclosestpossiblefontmatchgivenasetoftypefaces.Thesystemcould,withmodification,alsobeusedforGreekandCyrillic,butisnotsuitableforunicameralandideographicscripts(Hebrew,Armenian,Arabic,Chinese/Japanese/Korean).15.4.17RangeofISO10646charactersThisindicatestheglyphrepertoireofthefont,relativetoISO10646(Unicode).Sincethisissparse(mostfontsdonotcoverthewholeofISO10646)thisdescriptorlistsblocksorrangesthatdohavesomecoverage(nopromiseismadeofcompletecoverage)andisusedtoeliminateunsuitablefonts(onesthatwillnothavetherequiredglyphs).Itdoesnotindicatethatthefontdefinitelyhastherequiredglyphs,onlythatitisworthdownloadingandlookingatthefont.See[ISO10646]forinformationaboutusefuldocuments.ThismethodisextensibletofutureallocationofcharactersinUnicode,withoutchangeofsyntaxandwithoutinvalidatingexistingcontent.Fontformatsthatdonotincludethisinformation,explicitlyorindirectly,maystillusethischaracteristic,butthevaluemustbesuppliedbythedocumentorstylesheetauthor.Thereareotherclassificationsintoscripts,suchastheMonotypesystem(see[MONOTYPE])andaproposedISOscriptsystem.Thesearenotreadilyextensible.Becauseofthis,classificationofglyphrepertoiresbytherangeofISO10646charactersthatmayberepresentedwithaparticularfontisusedinthisspecification.Thissystemisextensibletocoveranyfutureallocation.15.4.18TopBaselineThisgivesthepositionintheemsquareofthetopbaseline.ThetopbaselineisusedbySanscrit-derivedscriptsforalignment,justasthebottombaselineisusedforLatin,Greek,andCyrillicscripts.15.4.19VerticalstemwidthThisisthewidthofvertical(ornear-vertical)stemsofglyphs.Thisinformationisoftentiedtohinting,andmaynotbedirectlyaccessibleinsomefontformats.Themeasurementshouldbeforthedominantverticalsteminthefontbecausetheremightbedifferentgroupingsofverticalstems(e.g.,onemainone,andonelighterweightoneasforanuppercaseMorN).15.4.20VerticalstrokeangleThisistheangle,indegreescounterclockwisefromthevertical,ofthedominantverticalstrokesofthefont.Thevalueisnegativeforfontsthatslopetotheright,asalmostallitalicfontsdo.Thisdescriptormayalsobespecifiedforobliquefonts,slantedfonts,scriptfonts,andingeneralforanyfontwhoseverticalstrokesarenotpreciselyvertical.Anon-zerovaluedoesnotofitselfindicateanitalicfont.15.5FontmatchingalgorithmThisspecificationextendsthealgorithmgivenintheCSS1specification.ThisalgorithmreducesdowntothealgorithmintheCSS1specificationwhentheauthorandreaderstylesheetsdonotcontainany@font-facerules.Matchingofdescriptorstofontfacesmustbedonecarefully.Thedescriptorsarematchedinawell-definedordertoinsurethattheresultsofthismatchingprocessareasconsistentaspossibleacrossUAs(assumingthatthesamelibraryoffontfacesandfontdescriptionsispresentedtoeachofthem).Thisalgorithmmaybeoptimized,providedthatanimplementationbehavesasifthealgorithmhadbeenfollowedexactly.Theuseragentmakes(oraccesses)adatabaseofrelevantfont-facedescriptorsofallthefontsofwhichtheUAisaware.Iftherearetwofontswithexactlythesamedescriptors,oneofthemisignored.TheUAmaybeawareofafontbecause:ithasbeeninstalledlocallyitisdeclaredusingan@font-faceruleinoneofthestylesheetslinkedtoorcontainedinthecurrentdocumentitisusedintheUAdefaultstylesheet,whichconceptuallyexistsinallUAsandisconsideredtohavefull@font-facerulesforallfontswhichtheUAwillusefordefaultpresentation,plus@font-facerulesforthefivespecialgenericfontfamilies(see'font-family')definedinCSS2Atagivenelementandforeachcharacterinthatelement,theUAassemblesthefontpropertiesapplicabletothatelement.Usingthecompletesetofproperties,theUAusesthe'font-family'descriptortochooseatentativefontfamily.Thus,matchingonafamilynamewillsucceedbeforematchingonsomeotherdescriptor.Theremainingpropertiesaretestedagainstthefamilyaccordingtothematchingcriteriadescribedwitheachdescriptor.Iftherearematchesforalltheremainingproperties,thenthatisthematchingfontfaceforthegivenelement.Ifthereisnomatchingfontfacewithinthe'font-family'beingprocessedbystep2,UAsthatimplementintelligentmatchingmayproceedtoexamineotherdescriptorssuchasx-height,glyphwidths,andpanose-1toidentifyadifferenttentativefontfamily.Iftherearematchesforalltheremainingdescriptors,thenthatisthematchingfontfaceforthegivenelement.The'font-family'descriptorthatisreflectedintotheCSS2propertiesisthefontfamilythatwasrequested,notwhatevernametheintelligentlymatchedfontmayhave.UAsthatdonotimplementintelligentmatchingareconsideredtofailatthisstep.Ifthereisnomatchingfontfacewithinthe'font-family'beingprocessedbystep3,UAsthatimplementfontdownloadingmayproceedtoexaminethe'src'descriptorofthetentativefontfaceidentifiedinstep2or3toidentifyanetworkresourcethatisavailable,andofthecorrectformat.Iftherearematchesforalltheremainingdescriptors,thenthatisthematchingfontfaceforthegivenelementandtheUAmayattempttodownloadthisfontresource.TheUAmaychoosetoblockonthisdownloadormaychoosetoproceedtothenextstepwhilethefontdownloads.UAsthatdonotimplementfontdownload,orarenotconnectedtoanetwork,orwheretheuserpreferenceshavedisabledfontdownload,orwheretherequestedresourceisunavailableforwhateverreason,orwherethedownloadedfontcannotbeusedforwhateverreason,areconsideredtofailatthisstep.Ifthereisnomatchingfontfacewithinthe'font-family'beingprocessedbystep3,UAsthatimplementfontsynthesismayproceedtoexamineotherdescriptorssuchas'x-height',glyphwidths,and'panose-1'toidentifyadifferenttentativefontfamilyforsynthesis.Iftherearematchesforalltheremainingdescriptors,thenthatisthematchingfontfaceforthegivenelementandsynthesisofthefauxfontmaybegin.UAsthatdonotimplementfontsynthesisareconsideredtofailatthisstep.Ifallofsteps3,4and5fail,andifthereisanextalternative'font-family'inthefontset,thenrepeatfromstep2withthenextalternative'font-family'.Ifthereisamatchingfontface,butitdoesn'tcontainglyph(s)forthecurrentcharacter(s),andifthereisanextalternative'font-family'inthefontsets,thenrepeatfromstep2withthenextalternative'font-family'.The'unicode-range'descriptormaybeusedtorapidlyeliminatefromconsiderationthosefontfacesthatdonothavethecorrectglyphs.Ifthe'unicode-range'descriptorindicatesthatafontcontainssomeglyphsinthecorrectrange,itmaybeexaminedbytheUAtoseeifithasthatparticularone.Ifthereisnofontwithinthefamilyselectedin2,thenusetheinheritedorUA-dependent'font-family'valueandrepeatfromstep2,usingthebestmatchthatcanbeobtainedwithinthisfont.Ifaparticularcharactercannotbedisplayedusingthisfont,theUAshouldindicatethatacharacterisnotbeingdisplayed(forexample,usingthe'missingcharacter'glyph).UAsthatimplementprogressiverenderingandhavependingfontdownloadsmay,oncedownloadissuccessful,usethedownloadedfontasafontfamily.Ifthedownloadedfontismissingsomeglyphsthatthetemporaryprogressivefontdidcontain,thedownloadedfontisnotusedforthatcharacterandthetemporaryfontcontinuestobeused.Note.TheabovealgorithmcanbeoptimizedtoavoidhavingtorevisittheCSS2propertiesforeachcharacter.Theper-descriptormatchingrulesfrom(2)aboveareasfollows:'font-style'istriedfirst.'italic'willbesatisfiedifthereiseitherafaceintheUA'sfontdatabaselabeledwiththeCSSkeyword'italic'(preferred)or'oblique'.Otherwisethevaluesmustbematchedexactlyorfont-stylewillfail.'font-variant'istriednext.'normal'matchesafontnotlabeledas'small-caps';'small-caps'matches(1)afontlabeledas'small-caps',(2)afontinwhichthesmallcapsaresynthesized,or(3)afontwherealllowercaselettersarereplacedbyuppercaseletters.Asmall-capsfontmaybesynthesizedbyelectronicallyscalinguppercaselettersfromanormalfont.'font-weight'ismatchednext,itwillneverfail.(See'font-weight'below.)'font-size'mustbematchedwithinaUA-dependentmarginoftolerance.(Typically,sizesforscalablefontsareroundedtothenearestwholepixel,whilethetoleranceforbitmappedfontscouldbeas} p { font: x-large/110% "New Century Schoolbook", serif } p { font: bold italic largeas20%.)Furthercomputations,e.g.,by'em'valuesinotherproperties,arebasedonthe'font-size'valuethatisused,nottheonethatisspecified.15.5.1MappingfontweightvaluestofontnamesThe'font-weight'propertyvaluesaregivenonanumericalscaleinwhichthevalue'400'(or'normal')correspondstothe"normal"textfaceforthatfamily.TheweightnameassociatedwiththatfacewilltypicallybeBook,Regular,Roman,Palatino, serif } p { font: normalorsometimesMedium.Theassociationofotherweightswithinafamilytothenumericalweightvaluesisintendedonlytopreservetheorderingofweightswithinthatfamily.Useragentsmustmapnamestovaluesinawaythatpreservesvisualorder;afacemappedtoavaluemustnotbelighterthanfacesmappedtolowervalues.Thereisnoguaranteeonhowauseragentwillmapfontfaceswithinafamilytoweightvalues.However,thefollowingheuristicstellhowtheassignmentisdoneintypicalcases:Ifthefontfamilyalreadyusesanumericalscalewithninevalues(ase.g.,OpenTypedoes),thefontweightsshouldbemappeddirectly.IfthereisbothafacelabeledMediumandonelabeledBook,Regular,RomanorNormal,thentheMediumisnormallyassignedtothe'500'.Thefontlabeled"Bold"willoftencorrespondtotheweightvalue'700'.Iftherearefewerthen9weightssmall-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:
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.
button {font-family:Excelsior;src:local("ExcelsiorEastARoman"),url("http://site/ear")format("intellifont");unicode-range:U+100-220;/*LatinExtendedAandB*/font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }@font-facebutton p {font-family:Excelsior;src:local("ExcelsiorCyrillicUpright"),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("TimesNewRoman"),local("NewYork"),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; }