Web Fonts 59
OpenType font formats are capable of much more than face or weight
variations; they have a range of ligatures, swashes, special numeric char-
acters, and much more. (If none of those terms makes any sense to you, I
recommend Magnet Studio’s Beginners Guide to OpenType at http://www
.magnetstudio.com/words/2010/opentype-guide/).
Enabling Font Features
Many browsers have implemented a property that allows you to explore the
extra features afforded by OpenType and other similar formats. The new
property is called font-feature-settings, and here’s its syntax:
E { font-feature-settings: "parameters"; }
The parameters value is a series of strings containing shorthand codes
for each font feature, plus an optional binary value to enable or disable the
feature. Here’s an example:
E { font-feature-settings: "dlig" on; }
The first parameter is dlig, the short code for discretionary ligatures,
plus the value of on to show it’s being enabled—the default state is on, so
you can safely omit that value in this example.
If you want to disable a feature, you use the alternative binary value,
off; in the following example, I’m disabling the small caps OpenType
feature:
E { font-feature-settings: "smcp" off; }
You can, as I mentioned, have more than one parameter—just create
a comma-separated list. The following example enables common ligatures
and disables tabular numbers:
E { font-feature-settings: "liga", "tnum" off; }
Let’s look at some examples that show the advantage of using Open-
Type features. In “True vs. Artificial Font Faces” on page 50, I showed why
you should always use a true italic font rather than letting the browser create
one artificially. In this example, you’ll see that the same principle holds
when using the small caps font variant. Here are the relevant style rules:
.smallcaps { font-variant: small-caps; }
.ot-smallcaps { font-feature-settings: "smcp"; }
Here, I use two h1 elements: I apply the font-variant property with the
small-caps value to the first; for the second, I use font-feature-settings, with
the parameter used to toggle small caps, smcp. You can see the difference in
Figure 5-8.
