Movatterモバイル変換

15 Fonts

15.1Introduction

Setting font properties will be among the most common uses of stylesheets. Unfortunately, there exists no well-defined and universallyaccepted taxonomy for classifying fonts, and terms that apply to onefont family may not be appropriate for others. E.g., 'italic' iscommonly used to label slanted text, but slanted text may also belabeled as beingOblique, Slanted, Incline, Cursive orKursiv. Therefore it is not a simple problem to map typicalfont selection properties to a specific font.

15.2Font matching algorithm

Because there is no accepted, universal taxonomy of fontproperties, matching of properties to font faces must be donecarefully. The properties are matched in a well-defined order toinsure that the results of this matching process are as consistent aspossible across UAs (assuming that the same library of font faces ispresented to each of them).

1. The User Agent makes (or accesses) a database of relevant CSS 2.2properties of all the fonts of which the UA is aware.If there are two fonts with exactly the same properties, the useragent selects one of them.
2. At a given element and for each character in that element, the UAassembles the font properties applicable to that element. Using thecomplete set of properties, the UA uses the 'font-family' property tochoose a tentative font family. The remaining properties are testedagainst the family according to the matching criteria described witheach property. If there are matches for all the remaining properties,then that is the matching font face for the given element or character.
3. If there is no matching font face within the 'font-family' beingprocessed by step 2, and if there is a next alternative 'font-family'in the font set, then repeat step 2 with the next alternative'font-family'.
4. If there is a matching font face, but it does not contain a glyphfor the current character, and if there is a next alternative'font-family' in the font sets, then repeat step 2 with the nextalternative 'font-family'.
5. If there is no font within the family selected in 2, then use a UA-dependent default 'font-family' and repeat step 2, using the best match that can be obtained within the default font. If a particular character cannot be displayed using this font, then the UA may use other means to determine a suitable font for that character. The UA should map each character for which it has no suitable font to a visible symbol chosen by the UA, preferably a "missing character" glyph from one of the font faces available to the UA.

(The above algorithm can be optimized to avoid having to revisitthe CSS 2.2 properties for each character.)

The per-property matching rules from (2) above are as follows:

1. 'font-style' is tried first. 'Italic'will be satisfied if there is either a face in the UA's font databaselabeled with the CSS keyword 'italic' (preferred) or 'oblique'.Otherwise the values must be matched exactly or font-style will fail.
2. 'font-variant' is tried next. 'Small-caps' matches (1) afont labeled as 'small-caps', (2) a font in which the small caps aresynthesized, or (3) a font where all lowercase letters are replaced byupper case letters. A small-caps font may be synthesized byelectronically scaling uppercase letters from a normal font.'normal' matches a font's normal (non-small-caps) variant. A font cannot fail to have a normal variant. A font that is only available as small-caps shall be selectable as either a 'normal' face or a 'small-caps' face.
3. 'font-weight' is matched next, it willnever fail. (See 'font-weight' below.)
4. 'font-size' must be matched within aUA-dependent margin of tolerance. (Typically, sizes for scalable fontsare rounded to the nearest whole pixel, while the tolerance forbitmapped fonts could be as large as 20%.) Further computations, e.g.,by 'em' values in other properties, are based onthe computed value of 'font-size'.

15.3Font family: the'font-family' property

The property value is a prioritized list of font family namesand/orgeneric family names.Unlike most other CSS properties, component values are separatedby a comma to indicate that they are alternatives:

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 be considered a match for characters that cannot be found in the font. (It should,however, be considered a match for U+FFFD, the "missing character"character's code point).

There are two types of font family names:

<family-name>

The name of a font family of choice. In the last example, "Gill"and "Helvetica" are font families.

<generic-family>

In the example above, the last value is a generic family name. Thefollowing generic families are defined:

• 'serif' (e.g., Times)
• 'sans-serif' (e.g., Helvetica)
• 'cursive' (e.g., Zapf-Chancery)
• 'fantasy' (e.g., Western)
• 'monospace' (e.g., Courier)

Style sheet designers are encouraged to offer a generic font familyas a last alternative. Generic font family names are keywords and must NOT be quoted.

Font family names must either be given quoted asstrings, or unquoted as a sequence ofone or moreidentifiers. This meansmost punctuation characters and digits at the start of each token mustbe escaped in unquoted font family names.

For example, the following declarations are invalid:

font-family: Red/Black, sans-serif;font-family: "Lucida" Grande, sans-serif;font-family: Ahem!, sans-serif;font-family: test@foo, sans-serif;font-family: #POUND, sans-serif;font-family: Hawaii 5-0, sans-serif;

If a sequence of identifiers is given as a font family name, thecomputed value is the name converted to a string by joining all theidentifiers in the sequence by single spaces.

To avoid mistakes in escaping, it is recommended to quote fontfamily names that contain white space, digits, or punctuationcharacters other than hyphens:

body { font-family: "New Century Schoolbook", serif }<BODY>

Unquoted font familynames that happen to be the same asthe keyword values 'inherit', 'default' and 'initial' or the genericfont keywords ('serif', 'sans-serif', 'monospace', 'fantasy', and'cursive') do not match the '<family-name>' type. These namesmust be quoted to prevent confusion with the keywords with the samenames. Note that 'font-family: Times, inherit' is therefore an invaliddeclaration, because 'inherit' in that position can neither be a validkeyword nor a valid font family name.

15.3.1Generic font families

Generic font families are a fallback mechanism, a means ofpreserving some of the style sheet author's intent in the worst casewhen none of the specified fonts can be selected. For optimumtypographic control, particular named fonts should be used instyle sheets.

All five generic font families are defined to exist in allCSS implementations (they need not necessarily map to five distinctactual fonts). User agents should provide reasonabledefault choices for the generic font families, which express thecharacteristics of each family as well as possible within the limitsallowed by the underlying technology.

User agents are encouraged to allow users to select alternativechoices for the generic fonts.

15.3.1.1serif

Glyphs of serif fonts, as the term is used in CSS, tend to have finishingstrokes, flared or tapering ends, or have actual serifed endings(including slab serifs). Serif fonts are typicallyproportionately-spaced. They often display a greater variation betweenthick and thin strokes than fonts from the 'sans-serif' generic fontfamily. CSS uses the term 'serif' to apply to a font for any script,although other names may be more familiar for particular scripts, suchas Mincho (Japanese), Sung or Song (Chinese), Totum or Kodig (Korean).Any font that is so described may be used to represent thegeneric 'serif' family.

Examples of fonts that fit this description include:

15.3.1.2sans-serif

Glyphs in sans-serif fonts, as the term is used in CSS, tend to have strokeendings that are plain -- with little or no flaring, cross stroke, or otherornamentation. Sans-serif fonts are typicallyproportionately-spaced. They often have little variation between thickand thin strokes, compared to fonts from the 'serif' family. CSS usesthe term 'sans-serif' to apply to a font for any script, althoughother names may be more familiar for particular scripts, such asGothic (Japanese), Kai (Chinese), or Pathang (Korean). Any font thatis so described may be used to represent the generic 'sans-serif'family.

Examples of fonts that fit this description include:

15.3.1.3cursive

Glyphs in cursive fonts, as the term is used in CSS, generally haveeither joining strokes or other cursive characteristics beyond thoseof italic typefaces. The glyphs are partially or completelyconnected, and the result looks more like handwritten pen or brushwriting than printed letterwork. Fonts for some scripts, such asArabic, are almost always cursive. CSS uses the term 'cursive' toapply to a font for any script, although other names such as Chancery,Brush, Swing and Script are also used in font names.

Examples of fonts that fit this description include:

15.3.1.4fantasy

Fantasy fonts, as used in CSS, are primarily decorative whilestill containing representations of characters (as opposed to Pi orPicture fonts, which do not represent characters). Examples include:

15.3.1.5monospace

The sole criterion of a monospace font is that all glyphs have the same fixed width. (This can make some scripts,such as Arabic, look most peculiar.) The effect is similar to a manualtypewriter, and is often used to set samples of computer code.

Examples of fonts which fit this description include:

15.4Font styling: the'font-style' property

The 'font-style' property selects between normal (sometimesreferred to as "roman" or "upright"), italic and oblique faces withina font family.

A value of 'normal' selects a font that is classified as 'normal'in the UA's font database, while 'oblique' selects a font that islabeled 'oblique'. A value of 'italic' selects a font that is labeled'italic', or, if that is not available, one labeled 'oblique'.

The font that is labeled 'oblique' in the UA's font database mayactually have been generated by electronically slanting a normal font.

Fonts with Oblique, Slanted or Incline in their names willtypically be labeled 'oblique' in the UA's font database. Fonts withItalic, Cursive orKursiv in their names willtypically be labeled 'italic'.

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

In the example above, emphasized text within 'H1' will appear in anormal face.

15.5Small-caps: the'font-variant' property

Another type of variation within a font family is the small-caps.In a small-caps font the lower case letters look similar to theuppercase ones, but in a smaller size and with slightly differentproportions. The 'font-variant' property selects that font.

A value of 'normal' selects a font that is not a small-caps font,'small-caps' selects a small-caps font. It is acceptable (but notrequired) in CSS 2.2 if the small-caps font is a created by taking anormal font and replacing the lower case letters by scaled uppercasecharacters. As a last resort, uppercase letters will be used asreplacement for a small-caps font.

The following example results in an 'H3' element in small-caps,with any emphasized words in oblique, and any emphasized words withinan '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 asfonts with old-style numerals, small-caps numerals, condensed orexpanded letters, etc. CSS 2.2 has no properties that select those.

Note: insofar as this property causes text to betransformed to uppercase, the same considerations as for'text-transform' apply.

15.6Font boldness: the'font-weight' property

The 'font-weight' property selects the weight of the font. Thevalues '100' to '900' form an ordered sequence, where each numberindicates a weight that is at least as dark as its predecessor. Thekeyword 'normal' is synonymous with '400', and 'bold' is synonymouswith '700'. Keywords other than 'normal' and 'bold' have been shown tobe often confused with font names and a numerical scale was thereforechosen for the 9-value list.

p { font-weight: normal }   /* 400 */h1 { font-weight: 700 }     /* bold */

The 'bolder' and 'lighter' values select font weights that arerelative to the weight inherited from the parent:

strong { font-weight: bolder }

Fonts (the font data) typically have one or more properties whosevalues are names that are descriptive of the "weight" of a font. Thereis no accepted, universal meaning to these weight names. Their primaryrole is to distinguish faces of differing darkness within a singlefont family. Usage across font families is quite variant; for example,a font that one might think of as being bold might be described asbeingRegular, Roman, Book, Medium, Semi- orDemiBold,Bold, orBlack, depending on how black the "normal" faceof the font is within the design. Because there is no standard usageof names, the weight property values in CSS 2.2 are given on a numericalscale in which the value '400' (or 'normal') corresponds to the"normal" text face for that family. The weight name associated withthat face will typically beBook, Regular, Roman, Normal orsometimesMedium.

The association of other weights within a family to the numericalweight values is intended only to preserve the ordering of darknesswithin that family. However, the following heuristics tell how theassignment is done in this case:

• If the font family already uses a numerical scale with nine values(like e.g.,OpenType does), the font weights should be mappeddirectly.
• If there is both a face labeledMedium and one labeledBook, Regular, Roman orNormal, then theMedium is normally assigned to the '500'.
• The font labeled "Bold" will often correspond to the weight value '700'.

Once the font family's weights are mapped onto the CSS scale,missing weights are selected as follows:

• If the desired weight is less than 400, weights below the desiredweight are checked in descending order followed by weights above thedesired weight in ascending order until a match is found.
• If the desired weight is greater than 500, weights above desiredweight are checked in ascending order followed by weights below thedesired weight in descending order until a match is found.
• If the desired weight is 400, 500 is checked first and then therule for desired weights less than 400 is used.
• If the desired weight is 500, 400 is checked first and then therule for desired weights less than 400 is used.

The following two examples show typical mappings.

Values of 'bolder' and 'lighter' indicate values relative to theweight of the parent element. Based on the inherited weight value,the weight used is calculated using the chart below. Child elementsinherit the calculated weight, not a value of 'bolder' or 'lighter'.

The table above is equivalent to selecting the next relative bolderor lighter face, given a font family containing normal and bold facesalong with a thin and a heavy face. Authors who desire finer controlover the exact weight values used for a given element should usenumerical values instead of relative weights.

There is no guarantee that there will be a darker face for each ofthe 'font-weight' values; for example, some fonts may have only anormal and a bold face, while others may have eight face weights.There is no guarantee on how a UA will map font faces within a familyto weight values. The only guarantee is that a face of a given valuewill be no less dark than the faces of lighter values.

15.7Font size: the'font-size'property

The font size corresponds to the em square, a concept used in typography.Note that certain glyphs may bleed outside their em squares. Valueshave the following meanings:

<absolute-size>

An <absolute-size> keyword is an index to a table of fontsizes computed and kept by the UA. Possible values are:

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

The following table provides user agent guidelines for the absolute-size mapping to HTML heading and absolute font-sizes. The 'medium' value is the user's preferred font size and is used as the reference middle value.

CSS absolute-size values	xx-small	x-small	small	medium	large	x-large	xx-large
HTML font sizes	1		2	3	4	5	6	7

Implementors should build a table of scaling factors for absolute-size keywords relative to the 'medium' font size and the particular device and its characteristics (e.g., the resolution of the device).

Different media may need different scaling factors. Also, the UAshould take the quality and availability of fonts into account whencomputing the table. The table may be different from one font familyto another.

Note 1. To preserve readability, a UA applyingthese 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 suggestedscaling factor between adjacent indexes was 1.5, which user experienceproved to be too large. In CSS2, the suggested scaling factor for acomputer screen between adjacent indexes was 1.2, which still createdissues for the small sizes. Implementation experience has demonstratedthat a fixed ratio between adjacent absolute-size keywords isproblematic, and this specification doesnot recommend such afixed ratio.

<relative-size>

A <relative-size> keyword is interpreted relative to thetable of font sizes and the font size of the parent element. Possiblevalues are: [ larger | smaller ]. For example, if the parent elementhas a font size of 'medium', a value of 'larger' will make the fontsize of the current element be 'large'. If the parent element's sizeis not close to a table entry, the UA is free to interpolate betweentable entries or round off to the closest one. The UA may have toextrapolate table values if the numerical value goes beyond thekeywords.

Length and percentage values should not take the font size tableinto account when calculating the font size of the element.

Negative values are not allowed.

On all other properties, 'em' and 'ex' length values refer to thecomputed font size of the current element. On the 'font-size' property, theselength units refer to the computed font size of the parent element.

Note that an application may reinterpret an explicit size,depending on the context. E.g., inside a VR scene a font may get adifferent 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.8Shorthand font property: the'font' property

The'font' property is,except as describedbelow, a shorthand property forsetting'font-style','font-variant','font-weight','font-size','line-height' and'font-family' at the sameplace in the stylesheet. The syntax of this property is based on a traditionaltypographical shorthand notation to set multiple properties related tofonts.

All font-related properties are first reset to their initial values,including those listed in the preceding paragraph.Then, those properties that are given explicit values in the'font' shorthand are set to those values.For a definition of allowed and initial values, see the previously 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 second rule, the font size percentage value ('80%') refersto the font size of the parent element. In the third rule, the lineheight percentage refers to the font size of the element itself.

In the first three rules above, the 'font-style', 'font-variant'and 'font-weight' are not explicitly mentioned, which means they areall three set to their initial value ('normal'). The fourth rule setsthe 'font-weight' to 'bold', the 'font-style' to 'italic' andimplicitly sets 'font-variant' to 'normal'.

The fifth rule sets the 'font-variant' ('small-caps'), the'font-size' (120% of the parent's font), the 'line-height' (120% timesthe font size) and the 'font-family' ('fantasy'). It follows that thekeyword 'normal' applies to the two remaining properties: 'font-style'and 'font-weight'.

The following values refer tosystem fonts:

caption

The font used for captioned controls (e.g., buttons, drop-downs, etc.).

icon

The font used to label icons.

menu

The font used in menus (e.g., dropdown menus and menu lists).

message-box

The font used in dialog boxes.

small-caption

The font used for labeling small controls.

status-bar

The font used in window status bars.

System fonts may only be set as a whole; that is, the fontfamily, size, weight, style, etc. are all set at the same time.These values may then be altered individually if desired. If nofont with the indicated characteristics exists on a given platform,the user agent should either intelligently substitute (e.g., a smallerversion of the 'caption' font might be used for the 'small-caption'font), or substitute a user agent default font. As for regular fonts,if, for a system font, any of the individual properties are not partof the operating system's available user preferences, those propertiesshould be set to their initial values.

That is why this property is "almost" a shorthand property: systemfonts can only be specified with this property, not with'font-family' itself, so'font' allows authors to do more than thesum of its subproperties. However, the individual properties such as'font-weight' are still given values taken from the system font, which can be independently varied.

button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }button p { font: menu }button p em { font-weight: bolder }

button p { font: 600 9px Charcoal }

button p {  font-family: Charcoal;  font-style: normal;  font-variant: normal;  font-weight: 600;  font-size: 9px;  line-height: normal;}