HTML and CSS Reference
In-Depth Information
ENABLING ADVANCED FONT FEATURES ON THE
WEB WITH FONT-FEATURE-SETTINGS
The web typography story does not end with “a bit more line-height” (commonly
known as leading) or even some of the features explored earlier, like ligatures and
hyphenation. Oh no! OpenType fonts often contain many alternative letter forms,
flourishes, fractional number glyphs, and other such goodies that are just crying
out to be utilized. Fortunately, these can be turned on in supporting browsers (at
the moment IE10 and later, Chrome 17 and later on Windows, and Firefox 8 and
later, and currently only with vendor prefixes) using the
font-feature-settings
property, which takes as its value a comma-delimited series of features you want
to use. For example, to specify that you want to use discretionary ligatures, kerning,
and fractions in Firefox, you'd use this:
-moz-font-feature-settings: “dlig=1, kern=1, frac=1”;
IE and Chrome use a slightly newer version of the syntax, which hopefully
Mozilla and other browsers will adopt soon after this topic is published:
-webkit-font-feature-settings: “dlig” 1, “kern” 1, “frac” 1
-ms-font-feature-settings: “dlig” 1, “kern” 1, “frac” 1;
NOTE:
Microsoft's “Use the whole font” showcase provides some
very good examples of font feature usage at
http://ie.microsoft.com/
Fonts will often have different sets of the same feature available—for example,
multiple different styles of kerning. You can access these by changing the number
after the declaration—for example, “
dlig” 0
(in some cases),
“dlig” 1, “dlig”
2,
“dlig 3”
.
With that, let's go forward and explore the different font features available
to you!
