Saturday, August 8, 2009

Font Matching is the process that a
browser employs to find the font to be used to render an (X)HTML
element. Usually, the process is straightforward, but becomes
complicated when the font-family does not have a font for bold or
italic or small
caps (or for any combination of these), or if it does not contain the
glyphs necessary to render the text.

Web browsers maintain a database of all the fonts that are
available to a web page — operating system fonts, @font-face
fonts and
the browser's internal fonts (if any).

The Font Matching Process

All the properties of the font that is required to display
the element are determined.

The value of the font-family
property of the text will be the name of the first font family with
which a match will be attempted.

font-style is handled in
this step:

If the element's text does not
have
the
property oblique or italic,
the currently selected font is retained and the
browser goes to step 4.

If the element's text has the property oblique
or italic, and the the
font
family contains an oblique or italic font, the font is chosen and then
the browser goes to step 4.

If the element's text has the property oblique
or italic, and the font family
does not
contain an
oblique or italic font, the normal font is slanted to simulate
oblique/italic text and then the browser goes to step 4.

font-variant is handled
in this step:

If the element's text does not have the property small-caps,
the currently selected font is retained and
the
browser goes to step 5.

If the element's text has the property small-caps,
then the browser looks for a small caps version of the currently
selected font. For example, if the currently selected font is Arial
Italic, the browser looks for Arial Italic Small Caps. This leaves two
possibilities:

The font family does not
contain a small
caps version of the currently
selected font — the browser then simulates small caps by down
scaling capital
letters of the currently selected font. The browser then goes to step
5.

The font family contains a small
caps version of the currently
selected font — the browser then selects the small caps
version of the currently selected font. The browser then goes to step 5.

In this step, font-weight is
checked:

If the element's text has the font weight property set
to normal, the currently selected font is retained and the browser goes
to step 6.

If the element's text has the font weight property set
to anything other than normal, the browser looks for a matching weight
in the font family. For example, if font-weight:
100; or if font-weight: bold;,
the browser looks for a font in the font family of weight 100 or 700,
respectively. Therefore, there are two possibilities:

The element's text has the font weight set to
lighter than normal ( 100,200,
or 300)
or 500:

If the font family contains a version of the
currently selected font of the required weight, the font is selected
and the browser goes to step 6.

If the font family does not
contain a version of the currently selected font of
the required weight, the browser chooses the normal
version of the currently selected font and goes to step 6.

The element's text has the font weight set
to bold or 600,
700, 800
or 900:

If the font family contains a version of the
currently selected font of the required weight, the font is selected
and the browser goes to step 6.

If the font family does not
contain a version of the currently selected font of
the required weight, and if the font-family contains a bold version of
the currently selected font, the browser chooses the bold
version of the currently selected font and goes to step 6.

If the font family does not
contain a version of the currently selected font of
the required weight, and if the font-family does not
contains a bold version of the currently selected font, the browser
simulates boldface by increasing the stroke
width of the currently selected font and goes to step 6.

In this step, the selected font is scaled to the required
font size.

Note 1: If the element contains a glyph that is not found in the first
font family, the browser chooses the next specified font family (if
any) or the browser's default fallback font. The browser then goes
through the entire font matching process for
that glyph only. However, Internet Explorer 6 does not
follow this process, it displays an empty "box" character when a glyph
is not available.

For example, if Comic Sans MS does not contain a
particular mathematical symbol, then, to display that symbol only, the
browser will use the next specified font in the CSS declaration that
does contain the symbol (say Times New Roman). Therefore, Comic Sans MS
will be used for all the element's text except for the mathematical
symbol, which will use Times New Roman.