Font properties
Font properties
Setting font properties will be among the most common uses of style sheets.
Unfortunately, there exists no well-defined and universally accepted taxonomy
for classifying fonts, and terms that apply to one font family may not be
appropriate for others. 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 selection properties to a specific font.
Font matching
Because there is no accepted, universal taxonomy of font properties,
matching of properties to font faces must be done carefully. The properties are
matched in a well-defined order to insure that the results 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 User Agent makes (or accesses) a database of relevant CSS1 properties of
all the fonts of which the UA is aware. The UA may be aware of a font because it
has been installed locally or it has been previously downloaded over the web. If
there are two fonts with exactly the same properties, one of them is ignored.
- At a given element and for each character in that element, the UA assembles
the font-properties applicable to that element. Using the complete set of
properties, the UA uses the 'font-family' property to choose a tentative font
family. The remaining properties are tested against the family according to the
matching criteria described with each property. If there are matches for all the
remaining properties, then that is the matching font face for the given element.
- If there is no matching font face within the 'font-family' being processed
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'.
- If there is a matching font face, but it doesn't contain a glyph for the
current character, and if there is a next alternative 'font-family' in the font
sets, then repeat step 2 with the next alternative 'font-family'.
- 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.
(The above algorithm can be
optimized to avoid having to revisit the CSS1 properties for each character.)
The per-property matching rules from (2) above are as follows:
- 'font-style' is tried first. '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.
- '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 upper case letters. A small-caps font may be synthesized
by electronically scaling uppercase letters from a normal font.
- 'font-weight' is matched next, it will never fail. (See 'font-weight'
below.)
- 'font-size' must be matched within a UA-dependent margin of tolerance.
(Typically, sizes for scalable fonts are rounded to 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
'font-size' value that is used, not the one that is specified.
'font-family'
Value: [[<family-name> | <generic-family>],]*
[<family-name> | <generic-family>]
Initial: UA
specific
Applies to: all elements
Inherited:
yes
Percentage values: N/A
The value is a prioritized list of font family names and/or generic family
names. Unlike most other CSS1 properties, values are separated by a comma to
indicate that they are alternatives:
BODY { font-family: gill, helvetica,
sans-serif }
There are two types of list values:
<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. The following 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 family as a last
alternative.
Font names containing whitespace should be quoted:
BODY { font-family: "new century schoolbook",
serif }
<BODY STYLE="font-family: 'My own font',
fantasy">
If quoting is omitted, any whitespace characters before and after the font
name are ignored and any sequence of whitespace characters inside the font name
is converted to a single space.
'font-style'
Value: normal | italic | oblique
Initial:
normal
Applies to: all elements
Inherited:
yes
Percentage values: N/A
The 'font-style' property selects between normal (sometimes referred to as
"roman" or "upright"), italic and oblique faces within a 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 is labeled '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 may actually
have been generated by electronically slanting a normal font.
Fonts with Oblique, Slanted or Incline in their names will typically be
labeled 'oblique' in the UA's font database. Fonts with Italic, Cursive
or Kursiv in their names will typically 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 a normal
face.
'font-variant'
Value: normal | small-caps
Initial: normal
Applies
to: all elements
Inherited: yes
Percentage values:
N/A
Another type of variation within a font family is the small-caps. In a
small-caps font the lower case letters look similar to the uppercase ones, but
in a smaller size and with slightly different proportions. 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 not required) in
CSS1 if the small-caps font is a created by taking a normal font and replacing
the lower case letters by scaled uppercase characters. As a last resort,
uppercase letters will be used as replacement for a small-caps font.
The following example results in an 'H3' element in small-caps, with
emphasized words in 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.
CSS1 has no properties that select those.
CSS1 core: insofar as this property causes text to be transformed to
uppercase
'font-weight'
Value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 |
500 | 600 | 700 | 800 | 900
Initial: normal
Applies to: all
elements
Inherited: yes
Percentage values: N/A
The 'font-weight' property selects the weight of the font. The values '100'
to '900' form an ordered sequence, where each number indicates a weight that is
at least as dark as its predecessor. The keyword 'normal' is synonymous with
'400', and 'bold' is synonymous with '700'. Keywords other than 'normal' and
'bold' have been shown to be often confused with font names and a numerical
scale was therefore chosen for the 9-value list.
P { font-weight: normal } /* 400
*/
H1 { font-weight: 700 } /* bold
*/
The 'bolder' and 'lighter' values select font weights that are relative to
the weight inherited from the parent:
STRONG { font-weight: bolder
}
Child elements inherit the resultant weight, not the keyword value.
Fonts (the font data) typically have one or more properties whose values
are names that are descriptive of the "weight" of a font. There is no accepted,
universal meaning to these 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 you 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 "normal" face
of the font is within the design. Because there is no standard usage of names,
the weight property values in CSS1 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 darkness within that family.
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 (like
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.
The following two
examples illustrate the process. Assume four weights in the "Example1" family,
from lightest to darkest: Regular, Medium, Bold, Heavy. And assume six
weights in the "Example2" family: Book, Medium, Bold, Heavy, Black,
ExtraBlack. Note how in the second example it has been decided not to
assign "Example2 ExtraBlack" to anything.
Available faces | Assignments |
Filling the holes
----------------------+---------------+-------------------
"Example1 Regular" | 400 | 100,
200, 300
"Example1 Medium" | 500
|
"Example1 Bold" | 700 |
600
"Example1 Heavy" | 800 |
900
Available faces | Assignments |
Filling the holes
----------------------+---------------+-------------------
"Example2 Book" | 400 | 100,
200, 300
"Example2 Medium" | 500
|
"Example2 Bold" | 700 | 600
"Example2 Heavy" | 800
|
"Example2 Black" | 900
|
"Example2 ExtraBlack" | (none)
|
Since the intent of the relative keywords 'bolder' and 'lighter' is to
darken or lighten the face within the family and because a family may not
have faces aligned with all the symbolic weight values, the matching of 'bolder'
is to the next darker face available on the client within the family and the
matching of 'lighter' is to the next lighter face within the family. To be
precise, the meaning of the relative keywords 'bolder' and 'lighter' is as
follows:
- 'bolder' selects 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' is similar, but works in the opposite direction: it selects the
next lighter keyword with a different font from the inherited one, unless there
is no such font, in which case it selects the next lighter numerical value (and
keeps the font unchanged).
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. There is no guarantee on how a UA will map font faces within a family
to weight values. The only guarantee is that a face of a given value will be no
less dark than the faces of lighter values.
'font-size'
Value: <absolute-size> | <relative-size> |
<length> | <percentage> Initial: medium Applies
to: all elements Inherited: yes Percentage values:
relative to parent element's font size
<absolute-size>
An
<absolute-size> keyword is an index to a table of font sizes computed and
kept by the UA. Possible values are: [ xx-small | x-small | small | medium |
large | x-large | xx-large ]. On a computer screen a scaling factor of 1.5 is
suggested between adjacent indexes; if the 'medium' font is 10pt, the 'large'
font could be 15pt. Different media may need different scaling factors. Also,
the UA 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.
<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 UA is free to
interpolate between table entries or round off to the closest one. The UA may
have to extrapolate table values if the numerical value goes beyond the
keywords.
Length and percentage values should not take the font size table into
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 the font size
of the current element. On the 'font-size' property, these length units refer to
the 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 a different size because of
perspective distortion.
|
