#font-feature-settings

[studiodoli]

CSSの縦書きで文字の中心がずれる

font-feature-settings: initial;

OpenTypeフォントの文字詰めを行う機能

[rich-fontdeck]

Using OpenType font features with CSS 3: Part 1

The vast majority of fonts contain lowercase and uppercase alphabets, numerals, punctuation and accents. But there can be much more to fonts than this basic set of characters. Many professionally-designed fonts also contain ligatures, alternative characters, smallcaps, different kinds of numbers, and sometimes much more besides.

Discretionary ligatures in Magneta · Stylistic alternate in Raisonne · Swash alternate in Trilogy Fatface

Nowadays these additional font features are all included in the same font file and accessed through OpenType, a technology jointly developed by Adobe and Microsoft in the late 1990s. Web designers have had access to OpenType features for a year or so, through properties proposed in the CSS 3 Fonts Module. Firefox has supported this since version 4, and but until recently it was the only browser do so. Now Microsoft has joined the party by announcing OpenType support in Internet Explorer 10, along with Chrome on Windows (not Mac yet).

Introducing font-feature-settings

The CSS 3 Fonts Module proposes many properties to access popular OpenType features. For example this is the proposed syntax for turning on common ligatures:

font-variant-ligatures: common-ligatures

At the moment there is no support for that or any other font-variant- properties. However there is one property which is supported: font-feature-settings. This one property can be used to access just about all OpenType features. It takes values which map to the somewhat cryptic four-letter OpenType features names. For example, to turn on common ligatures, we would use:

font-feature-settings: "liga"

To turn on discretionary ligatures as well, we would add a second property:

font-feature-settings: "liga", "dlig"

To keep common ligatures but turn off discretionary ligatures, we follow the OpenType feature name with a zero:

font-feature-settings: "liga", "dlig" 0

To make this work in Internet Explorer 10 you need to add the -ms- vendor prefix as follows:

-ms-font-feature-settings: "liga", "dlig" 0

Webkit uses the same syntax as above, but unfortunately Firefox currently uses a slightly different (older) syntax:

-moz-font-feature-settings: "liga=1, dlig=0"

Assuming Opera will join in sometime too, a full CSS rule to turn on both and discretionary ligatures would look like this:

h1 { -moz-font-feature-settings: "liga=1, dlig=1"; -ms-font-feature-settings: "liga", "dlig"; -webkit-font-feature-settings: "liga", "dlig"; -o-font-feature-settings: "liga", "dlig"; font-feature-settings: "liga", "dlig"; }

See this example of turning on common and discretionary ligatures using Magneta by Positype.

Common OpenType Features

Here's some common, but by no means all, OpenType features mapped to their font-feature-settings values:

Common ligatures"liga" Discretionary ligatures"dlig" Small caps"smcp" Lining numerals"lnum" Old-style numerals"onum" Swash alternates (index number)"swsh" n Styleset (01–20)"ss01–20"

For more details on OpenType features see FontShop's Introduction to OpenType. We'll be adding more tutorials over the coming weeks showing how to use these properties in detail.

Many fonts from Fontdeck include OpenType features, particularly common ligatures. We're going through the process of tagging them with opentype. The list isn't complete at the time of writing, but should give you a starting point – remember you can try all Fontdeck fonts for free, for as long as you like.

Of course using OpenType features is fine if you're taking a progressive enhancement approach to your web typography, but what if you really want support for browsers other than Firefox, Chrome/Win and Internet Explorer 10? We've got a solution for that too: it's called expert subsets and we'll be talking more about in a post very soon.