[PR]lCނ̌ʔ̻:ްѽCherSi

W3C

CSS3のモジュール:フォント

2001年7月31日のW3Cの策定中の草案

このバージョン:
http://www.w3.org/TR/2001/WD-css3-fonts-20010731
最新のバージョン:
http://www.w3.org/TR/css3-fonts
前のバージョン:
適用不可。
編集者:
Michel Suignard (Microsoft)
Chris Lilley (W3C)
著者:
元のCSS2の著者
Tantek Çelik (Microsoft)
Marcin Sawicki (former editor)
Michel Suignard (Microsoft)
Steve Zilles (Adobe)


摘要

この文書はユーザーエージェントによるフォントの詳述を許容するプロパティの一そろいも、フォントの効果、強勢、でこぼこをならすことなど...のような、付加的なフォントの装飾のプロパティも提供する。フォントの詳述はCSSの2[CSS2]における同様の項と一致している。フォントの装飾のプロパティは、CSS3での新しいものである。

この文書の地位

この文書は、スタイルに関する活動の一部であるCSSの策定を行うグループの策定中の草案である。CSSの水準3の中に含まれるべき主要点に対する提案を含む。

意見は非常に歓迎される。批評は作者に直接に送ることもできるが、メーリングリストwww-style@w3.org(使用説明書を見よ)は、これまたはスタイルの範囲におけるほかの草案の検討のためにむしろ好まれる。

この策定中の草案は、いつでも、ほかのW3Cの草案によって、更新されたり、取って代わられたり、あるいは時代遅れにさせられたりするかもしれない。W3Cの策定中の草案を参考資料として用いたり、あるいは"策定進行中".とは別のものとして引用することは不適当である。その発行はW3Cの会員資格あるいはCSSの策定を行うグループ(会員専用)による保証は伴わない。

この策定中の草案の最新のバージョンを見つけるには、上の"最新のバージョン"というリンクをたどってくださるか、W3Cの技術報告の一覧表を訪れてください。

Contents


1 ほかのモジュールへの依存

このCSS3のモジュールは次に続くほかのCSS3のモジュールに依存している。

以下に続くほかのCSS3のモジュールへの標準を立てるものでない(知識を与える)言及がある。

2. 序説

文書のテキストが視覚的に表示されることになるとき、記号(抽象的な情報要素)は標識にマップされなければならない。ひとつ以上の多い記号は、フォント、言語、コンテキストによって決定される以下に続く規則にしたがって、ひとつ以上の抽象的な標識によって描かれるかもしれない。それから、抽象的な標識は、画面上か紙面上に描かれるかもしれないアウトラインやビットマップの形式における標識にされる。記号から抽象的な標識への変換は、フォントに関するプロパティの組み合わせから得られ、フォントフェースと、そのフォントフェースからのフォントのデータを選択するために用いられる。

フォントフェースは、ある媒体に関する記号を描くためにその標識を用いるのに必要な、フォントテーブルという情報と標識の集積からなる。標識の集積の組み合わせとフォントテーブルは、フォントデータと呼ばれる。フォントテーブルは記号を標識にマップするのに、標識の範囲の大きさを決定するのに、そして標識の範囲の位置を決定するのに必要な情報を含む。それぞれのフォントテーブルはひとつ以上のフォントのウェートやフォントのスタイルのようなフォントの特質からなる。

幾何学的なフォントの特質は、全角の枠に基礎付けられた座標体系の中に表現される。(全角はフォントの中の標識の高さの相対的な寸法である)1全角の高さと、1全角の幅の枠は設計空間と呼ばれる。全角を半角ごとのいくつかのユニットに半分割することによって、この空間は、幾何学座標を与えられる。

注:半角ごとのユニットはフォントの特質である。半角ごとのユニットに対する一般的な値は1000か2048である。

全角の枠の座標空間は、設計空間の座標体系と呼ばれる。スケーラブルフォントに対しては、標識を描くために用いられる曲線と直線は、この座標体系を用いて表現される。

注:座標体系における(0,0)の点は、なく全角の枠の左端に非常によく配置されるるが、左下の隅ではない。ローマ字の大文字の下のY座標はたいていゼロである。そして、小文字・数字・句読点のローマ字におけるディセンダは、負の座標の値を持つ。

注:また、CSSは、'font-size'というプロパティの計算された値を表現するために、'em'という単位も用いる。

CSSは、フォントテーブルが、上昇、降下と、基準線のテーブルのセットという、少なくとも三つのフォントの特質を提供すると決めてかかる。上昇はフォントの(0,0)の点から全角の枠の上までの距離であり、降下はフォントの(0,0)点から全角の枠の下までの距離である。基準線のテーブルは、CSS3のテキストのモジュールで説明される。

前文で要求されるフォントの特質に加えて、フォントは、再整理、結合、そしてひとつ以上の合成の標識を作ったりするための、標識の連続の配置ために、フォーマットするものによって使うことのできる、代用や配置を行うテーブルを与えてもよい。結合は、抱き字と同じくらい簡単でも、あるいは、多数の子音と、母音の標識を、再整形して、結合するインド語派の音節と同じぐらい複雑でもよい。

視覚的なユーザエージェントは、実際に文字を描写する前に以下に続く問題を処理しなければならない。

このモジュールはただフォントの詳述の部分だけを扱う。すべてのほかの検討は、フォントの選択、フォントの特質およびフォントの調和するアルゴリズムを扱う、フォントウェブフォントのモジュールに含まれる。

加えるに、このモジュールは、3Dの効果、外形、でこぼこを除くこと、強調のような標識に関連したさまざまなフォントの装飾の効果を明示する。

3 フォントの詳述

CSSのフォントの仕組みの第一段階は、どのフォントがユーザエージェントによって用いられるべきなのかを、どのようにスタイルシートの作者が明示するのかに関係している。最初は、フォントを明示する明白な方法は、ひとつの文字列である、その名前によるものと思われる。そしてそれは、たとえば、"BT Swiss 721 Heavy Italic"のように、別個の部分に分けられると思われる。

あいにく、その名前に基礎付けられた分類のフォントに対しての、申し分なく定義され、普遍的に受け入れられる分類学は存在せず、そして、ひとつのフォントファミリの名前に適用する用語は、ほかのものに対しては適当でないかもしれない。たとえば、'イタリック体'という用語は、斜めのテキストを呼ぶために一般に使われるが、斜めのテキストはOblique、Slanted、Incline、CursiveまたはKursivとも呼ばれる。同様に、フォントの名前は、一般的にフォントの"ウェート"を説明する用語を含む。それらの名前の主な役割は、ひとつのフォントファミリの中で、異なっているあいまいをはっきり区別することになる。たとえば、フォントの"標準"の面が、デザインの中でどれほど幅広のゴシックであるかに依存して、ボールドであるともなされているフォントが、Regular、Roman、Book、Medium、Semi-あるいはDemi-Bold、Bold、あるいはBlackであると説明されるかもしれない。

この系統的な名前付けの欠如は、よりボールドであるというような、個々の方法において、修正された異なるフォントフェースの名前を生成ことを、一般的な場合において、不可能にする。

このために、CSSは異なったモデルを用いる。フォントは、ひとつのフォントの名前を通してではなく、一連のフォントのプロパティを通してリクエストされる。このプロパティの値は、このユーザエージェントのフォントの選択の仕組み[リンク?]の基準を作る。フォントに関するプロパティは、たとえば、ボールドを増したりするように、個々に修正でき、それから、フォントに関するプロパティの値の新しいセットが、フォントのデータベースから再選択するために使われる。結果、スタイルシートの作者と実装にとって規則正しさが増加し、そして強固さが増加する。

3.1 Font face selection: font properties

CSS specifies fonts according to these characteristics:

Font family
The font family 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", etc... 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.
Font style
The font style specifies whether the text is to be rendered using a normal, italic, or oblique face. Italic 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.
Font variant
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.
Font weight
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.
Font stretch
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.
Font size
The font size refers to the size of the font from baseline to baseline, when set solid (in CSS terms, this is when the 'font-size' and 'line-height' properties have the same value).

On all properties except 'font-size', 'em' and 'ex' length values refer to the font size of the current element. For 'font-size', these length units refer to the font size of the parent element. Please consult the section on length units [link to "values and units" module] for more information.

Each user agent constructs a font database from the fonts at its disposition. How the user agent constructs the font database lies outside the scope of this specification since the implementation of the database depends on such factors as the operating system, the windowing system, and the client. At a minimum, the database must contain an entry for each available font-face and columns for each of the font characteristics used in font selection. It must also contain a column for the 'unicode-range' characteristic, the range of Unicode code values for which the font-face has glyphs. If there are two or more font faces that have the same values for all of these characteristics, then all but one of these entries is eliminated from the data base.

In addition, font descriptors are used to describe the characteristics of fonts, so that a suitable font can be chosen to create the desired appearance. These font descriptors are used new font information to the font database which is built on locally available resources. For information about the font descriptors and classification of fonts, please consult the section on font descriptors [link] in the CSS Web Fonts module.

Matching of font properties to the database entries for the font faces must be done carefully. The font properties are matched in a well-defined order to insure that the results of this matching process are as consistent as possible across User Agents (assuming that the same library of font faces and the same set of values of the font properties is presented to each of them). This algorithm may be optimized, provided that an implementation behaves as if the algorithm had been followed exactly.

  1. At each element, the UA assembles the font properties applicable to that element. Using the complete set of properties, the UA uses the computed value of the 'font-family' property, which is a font set, to choose a tentative font family. Thus, matching on a family name will succeed before matching on some other characteristic. The remaining properties are tested against the entries in the font database that have that font family name according to the matching criteria used for each characteristic. If there are matches for all the remaining properties, then that is the matching font face for the given element. The matching criteria used for each characteristic are as follows:

    1. 'font-style' is tried first. For example, 'italic' will be satisfied if there is either a face in the UA's font database labeled 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. 'normal' matches a font not labeled as 'small-caps'; 'small-caps' matches (1) a font labeled as 'small-caps', (2) a font in which the small caps are synthesized, or (3) a font where all lowercase letters are replaced by uppercase letters. A small-caps font may be synthesized by electronically scaling uppercase letters from a normal font.

    3. 'font-weight' is matched next, it will never fail. (See 'font-weight' below.)

    4. 'font-size' must be matched within a UA-dependent margin of tolerance. (Typically, sizes for scalable fonts are rounded the nearest whole pixel, while the tolerance for bitmapped fonts could be as large as 20%.) Further computations, e.g., by 'em' values in other properties, are based on the computed 'font-size' value.

  2. If step 1 fails, and if there is a next alternative in the font set that is the value of the 'font-family' property, then repeat step 1 with that next alternative as the tentative font family.

  3. If there is a matching font face, then:

    1. either it is a textual element, in which case it is necessary to determine if the matching font-face has glyphs corresponding to the textual content. If not, and there is a next alternative font-family in the font set, then repeat from step 2 with the next alternative as the tentative font-family. The 'unicode-range' characteristic may be used to rapidly eliminate from consideration those font faces that do not have the needed glyph. If the 'unicode-range' characteristic indicates that a font contains a glyph in the correct range, that font must be used. If there is a corresponding glyph, then the matching font-face is the nominal font for the textual element.

    2. or, it is not a textual element, in this case, the matching font becomes the nominal font for the formatting object.

    In either case, the font data of the nominal font is expressed in terms of the EM box and the design coordinate system. This is natural for scalable fonts and for bit mapped fonts, equivalent design space coordinates can be computed from the font data and the computed font-size. (Using the computed font-size means that some of the font characteristics coordinate values may lie outside the EM box.)

    Since the font-size is used in the selection, the font-face and its font characteristics are scaled to the requested font-size. (For scalable fonts, the design space coordinates are multiplied by the computed font-size; for binary fonts, the values of the characteristics stored with the font are used.)

  4. If steps 1-3 above do not produce a matching font face, then use the UA-dependent default 'font-family' value and repeat from step 1, using the best match that can be obtained within this font. If a particular character cannot be displayed using this font, the UA should indicate that a character is not being displayed (for example, using the 'missing character' glyph).

3.2 Font family: the 'font-family' property

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

This property specifies a prioritized list of font family names and/or generic family names. To deal with the problem that a single font may not contain glyphs to display all the characters in a document, or that not all fonts are available on all systems, this property allows authors to specify a list of fonts, all 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 a font set.

Example(s):

For example, text that contains English words mixed with mathematical symbols may need a font set of two fonts, one containing Latin letters and digits, the other containing mathematical symbols. Here is an example of a font set suitable for a text that is expected to contain text with Latin characters, Japanese characters, and mathematical symbols:

BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }

The glyphs available in the "Baskerville" font (a font that covers only Latin characters) will be taken from that font, Japanese glyphs will 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'.

The generic font family will be used if one or more of the other fonts in a font set is unavailable. Although many fonts provide the "missing character" glyph, typically an open box, as its name implies this should not be considered a match except for the last font in a font set.

There are two types of font family names:

<family-name>
The name of a font family of choice. In the previous example, "Baskerville", "Heisi Mincho W3", and "Symbol" are font families. Font family names containing whitespace [link to syntax module] should be quoted. If quoting is omitted, any whitespace characters before and after the font name are ignored and any sequence of whitespace characters inside the font name is converted to a single space.
<generic-family>
The following generic families are defined: 'serif', 'sans-serif', 'cursive', 'fantasy', and 'monospace'. Please see the section on generic font families for descriptions of these families. Generic font family names are keywords, and therefore must not be quoted.

Authors are encouraged to offer a generic font family as a last alternative, for improved robustness.

For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Font test</TITLE>
<STYLE type="text/css">
BODY { font-family: "new century schoolbook", serif }
    </STYLE>
</HEAD>
<BODY>
<H1 style="font-family: 'My own font', fantasy">Test</H1>
<P>What's up, Doc?
  </BODY>
</HTML>

Example(s):

The richer selector syntax of CSS2 may be used to create language-sensitive typography. For example, some Chinese and Japanese characters are unified to have the same Unicode codepoint, although the abstract glyphs are not the same in the two languages.

*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif }
*:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif }

This selects any element that has the given language - Japanese or Traditional Chinese - and requests the appropriate font.

3.3 Font styling: the 'font-style', 'font-variant', 'font-weight' and 'font-stretch' properties

'font-style'
Value:  normal | italic | oblique | inherit
Initial:  normal
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

The 'font-style' property requests normal (sometimes referred to as "roman" or "upright"), italic, and oblique faces within a font family. Values have the following meanings:

normal
Specifies a font that is classified as 'normal' in the UA's font database.
oblique
Specifies a font that is classified as 'oblique' in the 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 lowercase 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 scripts that are unicameral (having only one case, as with most of the world's writing systems). Values have the following meanings:

normal
Specifies a font that is not labeled as a small-caps font.
small-caps
Specifies a font that is labeled as a small-caps font. If a genuine small-caps font is not available, user agents should simulate a small-caps font, for example by taking a normal font and replacing the lowercase letters by scaled uppercase characters. As a last resort, unscaled uppercase letter glyphs in a normal font may replace glyphs in a small-caps font so that the text appears in all uppercase letters.

Example(s):

The following example results in an H3 element in small-caps, with emphasized words (EM) in oblique small-caps:

H3 { font-variant: small-caps }
EM { font-style: oblique }

Insofar as this property causes text to be transformed to uppercase, the same considerations as for 'text-transform' apply.

'font-weight'
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

The 'font-weight' property specifies the weight of the font. Values have the following meanings:

100 to 900
These values 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
Specifies the next weight that is assigned to a font that is darker 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 to a font that is lighter than the inherited one. If there is no such weight, it simply results in the next lighter numerical value (and the font remains unchanged), unless the inherited value was '100', in which case the resulting weight is also '100'.

Example(s):

P { font-weight: normal }   /* 400 */
H1 { font-weight: 700 }     /* bold */
BODY { font-weight: 400 }
STRONG { font-weight: bolder } /* 500 if available */

Child elements inherit the computed value [link to Cascading module] of the weight.

The 'font-weight' property values are given on a numerical scale in which the value '400' (or 'normal') corresponds to the "normal" text face for that family. The weight name associated with that face will typically be Book, Regular, Roman, Normal or sometimes Medium.

The association of other weights within a family to the numerical weight values is intended only to preserve the ordering of weights within that family. User agents must map names to values in a way that preserves visual order; a face mapped to a value must not be lighter than faces mapped to lower values. There is no guarantee on how a user agent will map font faces within a family to weight values. However, the following heuristics tell how the assignment is done in typical cases: If the font family already uses a numerical scale with nine values (as e.g., OpenType does), the font weights should be mapped directly.

If there is both a face labeled Medium and one labeled Book, Regular, Roman or Normal, then the Medium is normally assigned to the '500'.

The font labeled "Bold" will often correspond to the weight value '700'.

If there are fewer then 9 weights in the family, the default algorithm for filling the "holes" is as follows. If '500' is unassigned, it will be assigned the same font as '400'. If any of the values '600', '700', '800', or '900' remains unassigned, they are assigned to the same face as the next darker assigned keyword, if any, or the next lighter one otherwise. If any of '300', '200', or '100' remains unassigned, it is assigned 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 each 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.

'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:  visual

The 'font-stretch' property selects a normal, condensed, or extended face from a font family. Absolute keyword values have the following ordering, from narrowest to widest :

  1. ultra-condensed
  2. extra-condensed
  3. condensed
  4. semi-condensed
  5. normal
  6. semi-expanded
  7. expanded
  8. extra-expanded
  9. ultra-expanded

The relative keyword 'wider' sets the value to the next expanded value above the inherited value (while not increasing it above 'ultra-expanded'); the relative keyword 'narrower' sets the value to the next condensed value below the inherited value (while not decreasing it below 'ultra-condensed').

3.4 Font size: the 'font-size' and 'font-size-adjust' properties

'font-size'
Value:  <absolute-size> | <relative-size> | <length> | <percentage> | inherit
Initial:  medium
Applies to:  all elements
Inherited:  yes, the computed value is inherited
Percentages:  refer to parent element's font size
Media:  visual

This property describes the size of the font when set solid. Values have the following meanings:

<absolute-size>
An <absolute-size> keyword refers to an entry 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; if the 'medium' font is 12pt, the 'large' font could be 14.4pt. Different media may need different scaling factors. Also, the user agent should take the quality and availability of fonts into account when computing the table. The table may be different from one font family to another.

Note. In CSS1, the suggested scaling factor between adjacent indexes was 1.5 which user experience proved to be too large.

<relative-size>
A <relative-size> keyword is interpreted relative to the table of font sizes and the font size of the parent element. Possible values are:

[ larger | smaller ]

For example, if the parent element has a font size of 'medium', a value of 'larger' will make the font size of the current element be 'large'. If the parent element's size is not close to a table entry, the user agent is free to interpolate between table entries or round off to the closest one. The user agent may have to extrapolate table values if the numerical value goes beyond the keywords.

<length>
A length value specifies an absolute font size (that is independent of the user agent's font table). Negative lengths are illegal.
<percentage>
A percentage value specifies an absolute font size relative to the parent element's font size. Use of percentage values, or values in 'em's, leads to more robust and cascadable style sheets.

The actual value [link to Cascading module] of this property may differ from the computed value due a numerical value on 'font-size-adjust' and the unavailability of certain font sizes.

Child elements inherit the computed 'font-size' value (otherwise, the effect 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 size and legibility of a font are less dependent on their 'font-size' value than on the value of their 'x-height', or, more usefully, on the ratio of these two values, called the aspect value (font size divided by x-height). The higher the aspect value, the more likely it is that a font at smaller sizes will be legible. Inversely, faces with a lower aspect value will become illegible more rapidly below a given threshold size than faces with a higher aspect value. Straightforward font substitution that relies on font size alone may lead to illegible characters.

For example, the popular font Verdana has an aspect value of 0.58; when Verdana's font size 100 units, its x-height is 58 units. For comparison, Times New Roman has an aspect value of 0.46. Verdana will therefore tend to remain legible at smaller sizes 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, whether it is substituted or not. Values have the following meanings:

none
Do not preserve the font's x-height.
<number>
Specifies the aspect value. The number typically refers to the aspect value of the first choice font. The scaling factor for all fonts is computed according to the following formula:
 y(a/a') = c

where:

y = 'font-size' actual value
a  = font-size-adjust property value
a' = aspect value of font
c = 'font-size' to apply to font

Example(s):

For example, if 14px Verdana (with an aspect value of 0.58) was unavailable and an available font had an aspect value of 0.46, the font-size of the substitute would be 14 * (0.58/0.46) = 17.65px. If Verdana is available, no adjustment occurs, as long as its actual aspect value is the same as the hypothetical aspect value provided by the font-size-adjust property.

Font size adjustments take place when computing the actual value of 'font-size'. Since inheritance is based on the computed value, child elements will inherit unadjusted values. Font size adjustments are applied to all fonts used by child elements, substituted or not.

The first image below shows several typefaces rasterized at a common font size (11pt. at 72 ppi), together with their aspect values. Note that faces with higher aspect values appear larger than those with lower. Faces with very low aspect values are illegible at the size shown.

Comparison of 12 point fonts

The next image shows the results of 'font-size-adjust' where Verdana has been taken as the"first choice", together with the scaling factor applied. As adjusted, the apparent sizes are nearly linear across faces, though the actual (em) sizes vary by more than 100%. Note that 'font-size-adjust' tends to stabilize the horizontal metrics of lines, as well.

Comparison of font-adjusted fonts

3.5 Shorthand font property: the 'font' property

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

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. The syntax of this property is based on 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 listed in the preceding paragraph plus 'font-stretch' and 'font-size-adjust'. 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. For reasons of backwards compatibility, it is not possible to set 'font-stretch' and 'font-size-adjust' to other than their initial values using the 'font' shorthand property; instead, set the individual properties.

Example(s):

P { font: 12pt/14pt 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 }
P { font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }

In the second rule, the font size percentage value ('80%') refers to the font size of the parent element. In the third rule, the line height percentage ('110%') refers to the font size of the element itself.

The first three rules do not specify the 'font-variant' and 'font-weight' explicitly, so these properties receive their initial values ('normal'). Notice that the font family name "new century schoolbook", which contains spaces, is enclosed in quotes. The fourth rule sets the 'font-weight' to 'bold', the 'font-style' to 'italic', 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% of the font size) and the 'font-family' ('fantasy'). It follows that the keyword 'normal' applies to the two remaining properties: 'font-style' and 'font-weight'.

The sixth rule sets the 'font-style', 'font-size', and 'font-family', the other font properties being set to their initial values. It then sets 'font-stretch' to 'condensed' since that property cannot be set to that value using the 'font' shorthand property.

The following values refer to system 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 font family, size, weight, style, etc. are all set at the same time.These values may then be altered individually if desired. If no font with the indicated characteristics exists on a given platform, the user agent should either intelligently substitute (e.g., a smaller version of the 'caption' font might be used for the 'smallcaption' font), or substitute a user agent default font. As for regular fonts, if, for a system font, any of the individual properties are not part 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 this property, not with 'font-family' itself, so 'font' allows authors to do more than the sum 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.

Example(s):

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

If the font used for dropdown menus on a particular system happened to be, for example, 9-point Charcoal, with a weight of 600, then P elements that were descendants of BUTTON would be displayed as if this rule were in effect:

BUTTON P { font: 600 9pt Charcoal }

Because the 'font' shorthand resets to its initial value any property not explicitly given a value, this has the same effect as this declaration:

BUTTON P {
  font-style: normal;
  font-variant: normal;
  font-weight: 600;
  font-size: 9pt;
  line-height: normal;
  font-family: Charcoal
} 

3.6 Generic font families

Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent in the worst case when none of the specified fonts can be selected. For optimum typographic control, particular named fonts should be used in style sheets.

All five generic font families are defined to exist in all CSS implementations (they need not necessarily map to five distinct actual fonts). User agents should provide reasonable default choices for the generic font families, which express the characteristics of each family as well as possible within the limits allowed by the underlying technology.

User agents are encouraged to allow users to select alternative choices 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 display a greater variation between thick 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 represent 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, Futo Min A101
Arabic fonts Bitstream Cyberbit
Cherokee fonts Lo Cicero Cherokee

sans-serif

Glyphs in sans-serif fonts, as the term is used in CSS, have stroke endings that are plain -- without any flaring, cross stroke, or other ornamentation. Sans-serif fonts are typically proportionately-spaced. They often have little variation between thick and thin strokes, compared to fonts from the 'serif' family. CSS uses the term 'sans-serif' to apply to a font for any script, although other names may be more familiar for particular scripts, such as Gothic (Japanese), Kai (Chinese), or Pathang (Korean). Any font that is so described may be used to represent the generic 'sans-serif' family.

Examples of fonts that fit this description include:

Latin fonts MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
Greek fonts Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
Cyrillic fonts Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
Hebrew fonts Arial Hebrew, MS Tahoma
Japanese fonts Shin Go, Heisei Kaku Gothic W5
Arabic fonts MS Tahoma

cursive

Glyphs in cursive fonts, as the term is used in CSS, generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork. Fonts for some scripts, such as Arabic, are almost always cursive. CSS uses the term 'cursive' to apply 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:

Latin fonts Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery
Cyrillic fonts ER Architekt
Hebrew fonts Corsiva
Arabic fonts DecoType Naskh, Monotype Urdu 507

fantasy

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

Latin fonts Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz

monospace

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 manual typewriter, and is often used to set samples of computer code.

Examples of fonts which fit this description include:
Latin fonts Courier, MS Courier New, Prestige, Everson Mono
Greek Fonts MS Courier New, Everson Mono
Cyrillic fonts ER Kurier, Everson Mono
Japanese fonts Osaka Monospaced
Cherokee fonts Everson Mono


4. Font decoration

Font decoration properties describes decoration that affect the rendering of fonts. Although similar in principle to the text-decoration properties, they differ by being close related to the font and glyphs they influence. For example, the shape of the font emphasis which is a decoration widely used in East Asian typography will vary upon the font on which it is applied. 

4.1 Font effect: the 'font-effect' property

'font-effect'
Value:  none | emboss | engrave | outline | inherit
Initial:  none
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

This property controls the special effect applied to glyphs. Possible values:

none
no font effect is applied
engrave
the glyphs appear as if they were engraved into the page. (This effect is also sometimes referred to as "sunken text")
emboss
the glyphs appear "embossed", or "raised" above the page surface.
outline
only the outlines of the glyphs are drawn.

Example of engraved, embossed and outline text

Figure 4.1: Example of engraved, embossed and outline text

4.2 Font smoothing: the 'font-smooth' property

'font-smooth'
Value:  auto | never | always | <absolute-size> | length | inherit
Initial:  auto
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

This property allows author control over applying anti-aliasing fonts when rendered.

auto
smooth text according to system defaults.
never
don't smooth text.
always
always smooth text at any size.
<absolute-size> <length>
If the actual value of the font-size property for the element is greater than or equal to the value specified, then apply font smoothing when rendering the text.

4.3 Font emphasis: the 'font-emphasize-style' 'font-emphasize-position' properties and the shorthand 'font-emphasize' property

'font-emphasize-style'
Value:  none | accent | dot | circle | disc | inherit
Initial:  none
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

This property sets the style for the emphasis formatting applied to text. East Asian documents use the following symbols on top of each glyph to emphasize a run of text: an 'accent' symbol, a 'dot', a hollow 'circle', or a solid 'disc'.

For example:

Example of emphasis in Japanese appearing above the text

Figure 4.3.1: Accent emphasis (shown in blue for clarity) applied to Japanese text

Note, that unlike 'text-decoration', this property can affect the line height. Furthermore the emphasis style should be distinguished from the text-decoration which is another method to 'emphasize' text content.

'font-emphasize-position'
Value:  before | after | inherit
Initial:  before
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

This property sets the position of the emphasis symbols. They can appear either 'before' or 'after' the emphasized run of horizontal text. The values 'before' and 'after' should be understood as relative to the line baseline. In an horizontal layout flow, 'before' means above the text. In a vertical layout flow, if the position is set to 'before' then the emphasis marks should appear on the right side of the vertical text column. If the position is set to 'after', then the emphasis should appear the the left side of the column. 

In Japanese for example, the preferred position is 'before':

Example of emphasis in Japanese appearing above the text

Figure 4.3.2: Emphasis (shown in blue for clarity) applied above a fragment of Japanese text

In Chinese used in the PRC, on the other hand, the preferred position is 'after':

Example of emphasis in simplified Chinese appearing below the text

Figure 4.3.3: Emphasis (shown in blue for clarity) applied below a fragment of Chinese text

The table below summarizes the preferred emphasis mark position depending on the language:

Language Preferred emphasis position
Japanese before
Chinese (Traditional) before
Chinese (Simplified) after

Figure 4.3.4: Emphasis and ruby position depending on the language

'font-emphasize'
Value:  <'font-emphasize-style'> || <'font-emphasize-position'> | inherit
Initial:  see individual properties
Applies to:  all elements
Inherited:  yes
Percentages:  N/A
Media:  visual

This is a shorthand property for setting the style and position of the font emphasis decoration.


5 Properties index

NameValuesInitial valueApplies to
(Default: all)
Inherited?Percentages
(Default: N/A)
Media groups
'font' [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit see individual properties   yes allowed on 'font-size' and 'line-height' visual
'font-effect' none | emboss | engrave | outline | inherit none   yes   visual
'font-emphasize' <'font-emphasize-style'> || <'font-emphasize-position'> | inherit see individual properties   yes   visual
'font-emphasize-position' before | after | inherit before   yes   visual
'font-emphasize-style' none | accent | dot | circle | disc | inherit none   yes   visual
font-family' [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit depends on user agent   yes   visual
'font-size' <absolute-size> | <relative-size> | <length> | <percentage> | inherit medium   yes, the computed value is inherited refer to parent element's font size visual
'font-size-adjust' <number> | none | inherit none   yes   visual
'font-smooth' auto | never | always | <absolute-size> | length | inherit auto   yes   visual
'font-stretch' normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit normal   yes   visual
'font-style' normal | italic | oblique | inherit normal   yes   visual
'font-variant' normal | small-caps | inherit normal   yes   visual
'font-weight' normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit normal   yes   visual

 


Acknowledgements

This specification would not have been possible without the help from the original contributors to CSS 2 [CSS2]  who wrote most of the text of this module.


References

[CSS2]
Cascading Stylesheets, level 2 (CSS2) Specification, W3C Recommendation
Bert Bos, Håkon Wium Lie, Chris Lilley and Ian Jacobs, 12 May 1998
Available at: http://www.w3.org/TR/REC-CSS2
[HTML4]
HTML 4.0 Specification, W3C Recommendation
Dave Raggett, Arnaud Le Hors and Ian Jacobs, 18 December 1997, revised 24 April 1998
Available at: http://www.w3.org/TR/REC-html40

[PR]̐_lȂ肢700!:z178~!܂ȂJ^Ҏ