The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

Web Fonts 61

At the time of writing, font-feature-settings are implemented in IE10+

and in Chrome and Firefox with appropriate vendor prefixes. You can also

get access to these properties in Safari, but in a slightly different way; read

on to find out how.

noTe These features are all suggestions to the browser, not commands; some browsers will
choose how fonts are rendered considering the platform and potential performance,
and these feature suggestions may be ignored.

Font Feature Properties

The individual features enabled or disabled by font-feature-settings are

also specified to be implemented as individual properties, known as the

font-variant-* properties. For example, to work with ligatures, you use the

font-variant-ligatures property with a keyword value representing the liga-

tures you wanted to set; the following code disables discretionary ligatures:

E { font-variant-ligatures: no-discretionary-ligatures; }

You can also use font-variant-position for super- or subscript, font-

variant-caps for titling capitalization, font-variant-numeric for numerical

forms, and font-variant-alternates for swashes, ornaments, and so on.

Chrome and Safari are the only browsers to support the font- variant-*

properties currently, with the -webkit- prefix, and the examples in Fig-

ures 5-7, 5-8, and 5-9 should all work in Safari using these properties

instead of font-feature-settings.

One other related property is font-kerning, which (fairly obviously) con-

trols the kerning of a font. This accepts values of normal, where kerning is

applied; none, where kerning is disabled; and auto (the default), which lets

the browser make the decision of whether to kern.

E { font-kerning: normal; }

In Figure 5-10, you can see this property in action. The upper heading

has kerning disabled, whereas the lower has it applied. I’ve added some

background lines to make it easier to see.

Figure 5-10: Text with kerning disabled (top) and

enabled (bottom) using the font-kerning property