📄 fonts.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html lang="en"><HEAD><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><TITLE>Fonts</TITLE><link rel="stylesheet" href="style/default.css" type="text/css"><link rel="prev" href="colors.html"><link rel="next" href="text.html"><link rel="contents" href="cover.html#minitoc"><link rel="CSS-properties" href="propidx.html" title="properties"><link rel="index" href="indexlist.html" title="index"></HEAD><BODY><div class="navbar" align="center"><p><a href="colors.html">previous</a> <a href="text.html">next</a> <a href="cover.html#minitoc">contents</a> <a href="propidx.html">properties</a> <a href="indexlist.html">index</a> </div><hr class="navbar"><H1 align="center">15 Fonts</H1><div class="subtoc"><p><strong>Contents</strong> <ul class="toc"> <li class="tocline2"><a href="fonts.html#q1" class="tocxref">15.1 Introduction</a> <li class="tocline2"><a href="fonts.html#font-specification" class="tocxref">15.2 Font specification</a> <ul class="toc"> <li class="tocline3"><a href="fonts.html#font-properties" class="tocxref">15.2.1 Font specification properties</a> <li class="tocline3"><a href="fonts.html#font-family-prop" class="tocxref">15.2.2 Font family: the <span class="propinst-font-family">'font-family'</span> property</a> <li class="tocline3"><a href="fonts.html#font-styling" class="tocxref">15.2.3 Font styling: the <span class="propinst-font-style">'font-style'</span>, <span class="propinst-font-variant">'font-variant'</span>, <span class="propinst-font-weight">'font-weight'</span> and <span class="propinst-font-stretch">'font-stretch'</span> properties</a> <li class="tocline3"><a href="fonts.html#font-size-props" class="tocxref">15.2.4 Font size: the <span class="propinst-font-size">'font-size'</span> and <span class="propinst-font-size-adjust">'font-size-adjust'</span> properties</a> <li class="tocline3"><a href="fonts.html#font-shorthand" class="tocxref">15.2.5 Shorthand font property: the <span class="propinst-font">'font'</span> property</a> <li class="tocline3"><a href="fonts.html#generic-font-families" class="tocxref">15.2.6 Generic font families</a> <ul class="toc"> <li class="tocline4"><a href="fonts.html#serif-def" class="tocxref"> <span class="index-def" title="serif, definition of"><dfn>serif</dfn></span></a> <li class="tocline4"><a href="fonts.html#sans-serif-def" class="tocxref"> <span class="index-def" title="sans-serif, definition of"> <dfn>sans-serif</dfn></span></a> <li class="tocline4"><a href="fonts.html#cursive-def" class="tocxref"> <span class="index-def" title="cursive, definition of"> <dfn>cursive</dfn></span></a> <li class="tocline4"><a href="fonts.html#fantasy-def" class="tocxref"> <span class="index-def" title="fantasy, definition of"> <dfn>fantasy</dfn></span></a> <li class="tocline4"><a href="fonts.html#monospace-def" class="tocxref"> <span class="index-def" title="monospace, definition of"> <dfn>monospace</dfn></span></a> </ul> </ul> <li class="tocline2"><a href="fonts.html#font-selection" class="tocxref">15.3 Font selection</a> <ul class="toc"> <li class="tocline3"><a href="fonts.html#font-descriptions" class="tocxref">15.3.1 <span class="index-inst" title="font description"> Font Descriptions</span> and @font-face</a> <li class="tocline3"><a href="fonts.html#select" class="tocxref">15.3.2 Descriptors for Selecting a Font: <span class="descinst-font-family">'font-family'</span>, <span class="descinst-font-style">'font-style'</span>, <span class="descinst-font-variant">'font-variant'</span>, <span class="descinst-font-weight">'font-weight'</span>, <span class="descinst-font-stretch">'font-stretch'</span> and <span class="descinst-font-size">'font-size'</span></a> <li class="tocline3"><a href="fonts.html#dataqual" class="tocxref">15.3.3 Descriptors for Font Data Qualification: <span class="descinst-unicode-range">'unicode-range'</span></a> <li class="tocline3"><a href="fonts.html#unitsperem" class="tocxref">15.3.4 Descriptor for Numeric Values: <span class="descinst-units-per-em">'units-per-em'</span></a> <li class="tocline3"><a href="fonts.html#referencing" class="tocxref">15.3.5 Descriptor for Referencing: <span class="descinst-src">'src'</span></a> <li class="tocline3"><a href="fonts.html#matching" class="tocxref">15.3.6 Descriptors for Matching: <span class="descinst-panose-1">'panose-1'</span>, <span class="descinst-stemv">'stemv'</span>, <span class="descinst-stemh">'stemh'</span>, <span class="descinst-slope">'slope'</span>, <span class="descinst-cap-height">'cap-height'</span>, <span class="descinst-x-height">'x-height'</span>, <span class="descinst-ascent">'ascent'</span>, and <span class="descinst-descent">'descent'</span></a> <li class="tocline3"><a href="fonts.html#synthesizing" class="tocxref">15.3.7 Descriptors for Synthesis: <span class="descinst-widths">'widths'</span>, <span class="descinst-bbox">'bbox'</span> and <span class="descinst-definition-src">'definition-src'</span></a> <li class="tocline3"><a href="fonts.html#alignment" class="tocxref">15.3.8 Descriptors for Alignment: <span class="descinst-baseline">'baseline'</span>, <span class="descinst-centerline">'centerline'</span>, <span class="descinst-mathline">'mathline'</span>, and <span class="descinst-topline">'topline'</span></a> <li class="tocline3"><a href="fonts.html#q23" class="tocxref">15.3.9 Examples</a> </ul> <li class="tocline2"><a href="fonts.html#font-descriptors" class="tocxref">15.4 Font Characteristics</a> <ul class="toc"> <li class="tocline3"><a href="fonts.html#universal" class="tocxref">15.4.1 Introducing Font Characteristics</a> <li class="tocline3"><a href="fonts.html#aname" class="tocxref">15.4.2 Full font name</a> <li class="tocline3"><a href="fonts.html#emsq" class="tocxref">15.4.3 Coordinate units on the em square</a> <li class="tocline3"><a href="fonts.html#cline" class="tocxref">15.4.4 Central Baseline</a> <li class="tocline3"><a href="fonts.html#encoding" class="tocxref">15.4.5 Font Encoding</a> <li class="tocline3"><a href="fonts.html#family" class="tocxref">15.4.6 Font family name</a> <li class="tocline3"><a href="fonts.html#lrwidth" class="tocxref">15.4.7 Glyph widths</a> <li class="tocline3"><a href="fonts.html#stemh" class="tocxref">15.4.8 Horizontal stem width</a> <li class="tocline3"><a href="fonts.html#cap" class="tocxref">15.4.9 Height of uppercase glyphs</a> <li class="tocline3"><a href="fonts.html#xht" class="tocxref">15.4.10 Height of lowercase glyphs</a> <li class="tocline3"><a href="fonts.html#bline" class="tocxref">15.4.11 Lower Baseline</a> <li class="tocline3"><a href="fonts.html#mline" class="tocxref">15.4.12 Mathematical Baseline</a> <li class="tocline3"><a href="fonts.html#bbox" class="tocxref">15.4.13 Maximal bounding box</a> <li class="tocline3"><a href="fonts.html#ascent" class="tocxref">15.4.14 Maximum unaccented height</a> <li class="tocline3"><a href="fonts.html#descent" class="tocxref">15.4.15 Maximum unaccented depth</a> <li class="tocline3"><a href="fonts.html#pan1" class="tocxref">15.4.16 Panose-1 number</a> <li class="tocline3"><a href="fonts.html#ucode" class="tocxref">15.4.17 Range of ISO 10646 characters</a> <li class="tocline3"><a href="fonts.html#tline" class="tocxref">15.4.18 Top Baseline</a> <li class="tocline3"><a href="fonts.html#stemv" class="tocxref">15.4.19 Vertical stem width</a> <li class="tocline3"><a href="fonts.html#slope" class="tocxref">15.4.20 Vertical stroke angle</a> </ul> <li class="tocline2"><a href="fonts.html#algorithm" class="tocxref">15.5 Font matching algorithm</a> <ul class="toc"> <li class="tocline3"><a href="fonts.html#q46" class="tocxref">15.5.1 Mapping font weight values to font names</a> <li class="tocline3"><a href="fonts.html#q47" class="tocxref">15.5.2 Examples of font matching</a> </ul> </ul></div><h2><a name="q1">15.1 Introduction</a></h2><P>When a document's text is to be displayed visually, <a name="x0"><spanclass="index-inst" title="character">characters</span></a> (abstractinformation elements) must be mapped to <a name="x1"><span class="index-def"title="abstract glyph"><dfn>abstract glyphs</dfn></span></a>. One or more characters may be depicted by one or more abstract glyphs, in a possibly context-dependent fashion. A <a name="x2"><span class="index-def" title="glyph"><dfn>glyph</dfn></span></a> is the actualartistic representation of an abstract glyph, in some typographicstyle, in the form of outlines or bitmaps thatmay be drawn on the screen or paper. A <a name="x3"><span class="index-def"title="font"><dfn>font</dfn></span></a> is a set of glyphs,all observing the same basic motif according to design, size,appearance, and other attributes associated with the entire set, and amapping from characters to abstract glyphs.<P>A visual user agent must address the following issues before actually rendering a character:</p><ul><li>Is there, directly or by inheritance, a font specified for this character?<li>Does the user agent have this font available?<li>If so, what glyph(s) does this character or sequence ofcharacters map to?<li>If not, what should be done? Should a different font be substituted?Can the font be synthesized? Can it be retrieved from the Web?</ul><P>In both CSS1 and CSS2, authors specify font characteristicsvia a series of font properties.<P>How the user agent handles these properties, when there is no matching font on the client has expandedbetween CSS1 and CSS2. In CSS1, all fonts were assumed to be presenton the client system and were identified solely by name. Alternatefonts could be specified through the properties, but beyond that, useragents had no way to propose other fonts to the user (evenstylistically similar fonts that the user agent had available) otherthan generic default fonts.<P>CSS2 changes all that, and allows much greater liberty for:</p><ul><li>style sheet authors, to describe the fonts they want to be used<li>user agents, in selecting a font when an author's requested fontis not immediately available.</ul><p>CSS2 improves client-side font matching, enables fontsynthesis and progressive rendering, and enables fonts to bedownloaded over the Web. These enhanced capabilities are referred to as 'WebFonts'<P>In the CSS2 font model, as in CSS1, each user agent has a "fontdatabase" at its disposition. CSS1 referred to this database but gave no details about what was in it. CSS2 defines the information in that database and allows style sheet authors to contribute to it. When asked to display a character with a particular font,the user agent first identifies the font in the database that "bestfits" the specified font (according to the <a href="#algorithm">fontmatching algorithm)</a> Once it has identified a font, it retrievesthe font data locally or from the Web, and may display the characterusing those glyphs.<P>In light of this model, we have organized the specificationinto two sections. The first concerns the <ahref="#font-specification">font specification mechanism</a>, wherebyauthors specify which fonts they would like to have used. Thesecond concerns the <a href="#font-selection">font selectionmechanism</a>, whereby the client's user agent identifies and loads afont that best fits the author's specification.<P>How the user agent constructs the font database liesoutside the scope of this specification since the database'simplementation depends on such factors as the operating system, the windowing system, and the client.<H2>15.2 <a name="font-specification">Font specification</a></h2><P> The first phase of the CSS font mechanism concerns how style sheet authors specify which fonts should be used by a useragent. At first, it seem that the obvious way to specify a font is by it's name, a single string - which appears to be separated into distinct parts; for example <span class="example">"BT Swiss 721 Heavy Italic"</span>.<p>Unfortunately, there exists no well-defined and universallyaccepted taxonomy for classifying fonts based on their names, and terms that apply to one font family name may not be appropriate for others. For example, the term 'italic' is commonly used to label slanted text, but slanted text may also be labeled <EM>Oblique, Slanted, Incline, Cursive</EM>, or<EM>Kursiv</EM>. Similarly, font names typically contain terms that describe the "weight" of a font. The primary role of these names is to distinguishfaces of differing darkness within a single font family. There is noaccepted, universal meaning to these weight names and usage varieswidely. For example a font that you might think of as being boldmight be described as being <EM>Regular, Roman, Book, Medium,Semi-</EM> or <EM>Demi-Bold, Bold,</EM> or <EM>Black,</EM> depending onhow black the "normal" face of the font is within the design. <p>This lack of systematic naming makes it impossible, in the general case, to generate a modified font face name that differs in a particular way, such as being bolder.<P>Because of this, CSS uses a <a href="#font-properties">different model</a>. Fonts are requested not through a single font name but through setting a series of font properties. These property values form thebasis of the user agent's <a href="#font-selection">fontselection</a> mechanism. The font properties can be individually modified, for example to increase the boldness, and the new set of font property values will then be used to select from the font database again. The result is an increase in regularity for style sheet authors and implementors, and an increase in robustness.<h3>15.2.1 <a name="font-properties">Font specification properties</a></h3><P>CSS2 specifies fonts according to these characteristics:</p><dl><dt><strong><a name="font-family">Font family</a></strong> <dd>The <a name="x4"><span class="index-def" title="font family"> font family</span></a> specifies which font family is to be used to render the text. A font family is a group of fonts,designed to be used in combination and exhibiting similarities in design. One member of the family may be italic, another bold, another condensed or using small caps. Font family names include "Helvetica", "New Century Schoolbook", and "Kyokasho ICA L". Font family names are not restricted to Latin characters. Font families may be grouped into different categories: those with or without serifs, those whose characters are or are not proportionally spaced, those that resemble handwriting, those that are fantasy fonts, etc.<dt><strong><a name="font-style">Font style</a></strong> <dd>The font style specifies whether the text is to be rendered using a normal, italic, or oblique face. <a name="x5"><span class="index-def" title="Italic, definition of"><dfn>Italic</dfn></span></a> is a more cursive companion face to the normal face, but not so cursive as to make it a script face. Oblique is a slanted form of the normal face, and is more commonly used as a companion face to sans-serif. This definition avoids having to label slightly slanted normal faces as oblique, or normal Greek faces as italic.<dt><strong><a name="font-variant">Font variant</a></strong> <dd>The font variant indicates whether the text is to be rendered using the normal glyphs for lowercase characters or using small-caps glyphs for lowercase characters. A particular font may contain only normal, only small-caps, or both types of glyph; this property is used to request an appropriate font and, if the font contains both variants, the appropriate glyphs.<dt><strong><a name="font-weight">Font weight</a></strong> <dd>The font weight refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.<dt><strong><a name="font-stretch">Font stretch</a></strong> <dd>The font stretch indicates the desired amount of condensing or expansion in the glyphs used to render the text, relative to other fonts in the same font family.<dt><strong><a name="font-size">Font size</a></strong> <dd>The font size refers to the size of the font from baseline to baseline, when set solid (in CSS terms, this is when the <a href="fonts.html#propdef-font-size" class="noxref"><span class="propinst-font-size">'font-size'</span></a> and <a href="visudet.html#propdef-line-height" class="noxref"><span class="propinst-line-height">'line-height'</span></a> properties have the same value).</dl><P> On all properties except <a href="fonts.html#propdef-font-size" class="noxref"><spanclass="propinst-font-size">'font-size'</span></a>, 'em' and 'ex' lengthvalues refer to the font size of the current element. For <a href="fonts.html#propdef-font-size" class="noxref"><spanclass="propinst-font-size">'font-size'</span></a>, these length units⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -