Intelligent font matching

The @font-face property allows you tell the browser to carry out intelligent font mapping. For example:

panose-1: 0 0 0 0 0 0 0 0 0 0

The panose-1 property gives the font's panose number for matching. Panose-1 is an industry standard TrueType font classification and matching technology. The PANOSE system consists of a set of ten numbers that categorise the key attributes of a Latin typeface, a classification procedure for creating those numbers, and Mapper software that determines the closest possible font match given a set of typefaces. It makes sure that you get a font similar to the one you want.

You enter up to ten decimal integers; there is a space between each number (not a comma, a space). Our example would match all fonts. Not all fonts have panose-1 information.

Here are the other properties that you can use.

• The stemv and stemh property give the font's vertical and horizontal width. This allows intelligent font size adjustment
• The slope property specifies the angle of the vertical strokes. For slanted, oblique, and italic fonts, this value makes it easier for the browser to determine if a font matches the slant of your desired font
• The cap-height property specifies the height of a capital letter in the font
• The x-height property specifies the x-height (the height of the lower case letter x) of the font
• The ascent property specifies the maximum unaccented height of the font. The height of a typical ascender
• The descent property specifies the maximum unaccented depth of the font. The height of a typical descender

If you use stemv, stemh, cap-height, x-height, ascent or descent properties, you must also specify the units-per-em property. This property is the number of units that the em square is divided into. The browser uses the value to give a true measurement. For example, if you set stemh property to 200, the browser divides 200 by the units-per-em to give the true height.

Typical values are 2048 (for TrueType) and 250 (for Intellifont).