• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 5. Fonts > Font Matching

5.7. Font Matching

As we've seen, CSS allows for the matching of font families, weights, and variants. This is all done through font matching, which is a vaguely complicated procedure. Understanding it is important for authors who want to help user agents make good font selections when displaying their documents. I left it for the end of the chapter because it's not really necessary to understand how the font properties work, and some people will probably want to skip this part and go on to the next chapter. If you're still interested, here's how font matching works.

  1. The user agent creates, or otherwise accesses, a database of font properties. This database lists the various CSS properties of all the fonts to which the user agent has access. Typically, this will be all fonts installed on the machine, although there could be others (for example, the user agent could have its own built-in fonts). If the user agent encounters two identical fonts, it will simply ignore one of them.

  2. The user agent takes apart an element to which font properties have been applied and constructs a list of font properties necessary for the display of that element. Based on that list, the user agent makes an initial choice of a font family to use in displaying the element. If there is a complete match, then the user agent can use that font. Otherwise, it needs to do a little more work.

    1. A font is first matched against the font-style. The keyword italic is matched by any font that is labeled as either "italic" or "oblique." If neither is available, then the match fails.

    2. The next match attempt is on font-variant. Any font that is not labeled "small-caps" is assumed to be normal. A font can be matched to small-caps by any font that is labeled as "small-caps," by any font that allows the synthesis of a small-caps style, or by any font where lowercase letters are replaced by uppercase letters.

    3. The next match is to font-weight, which can never fail thanks to the way font-weight is handled in CSS (explained earlier in the chapter).

    4. Then, font-size is tackled. This must be matched within a certain tolerance, but the tolerance is left to the user agent to define. Thus, one user agent might allow matching within a 20% margin of error, whereas another might allow only 10% differences between the size specified and the size that is actually used.

  3. If there was no font match in Step 2, the user agent looks for alternate fonts within the same font family. If it finds any, then it repeats Step 2 for that font.

  4. Assuming a generic match has been found, but it doesn't contain everything needed to display a given element—the font is missing the copyright symbol, for instance—then the user agent goes back to Step 3, which entails a search for another alternate font and another trip through Step 2.

  5. Finally, if no match has been made and all alternate fonts have been tried, then the user agent selects the default font for the given generic font family and does the best it can to display the element correctly.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint