font-feature-settings: What is the correct syntax?

Question

I purchased a webfont that supports some open type features and of course I want to use them.
Unfortunately, I wasn't able to find a source online that explains the best way to use the syntax - it seems to me that font-feature-settings are another example of prefix hell.

At the moment I have it written like that but I am not sure if it covers really all browsers that support those features.

.element {
    -webkit-font-feature-settings: "kern" 1, "liga" 1, "case" 1;
       -moz-font-feature-settings: "kern=1", "liga=1", "case=1";
       -moz-font-feature-settings: "kern" on, "liga" on, "case" on;
        -ms-font-feature-settings: "kern" 1, "liga" 1, "case";
         -o-font-feature-settings: "kern", "liga", "case";
            font-feature-settings: "kern", "liga", "case";
}

More specifically, the -moz syntax seems strange. Some sources claim that this is the syntax to be used:

-moz-font-feature-settings: "liga=1";  /* Firefox 14 and before */
-moz-font-feature-settings: "liga" on; /* Firefox 15 */

Others do it simply like this:

-moz-font-feature-settings: "cswh=1";
-moz-font-feature-settings: "cswh";

The same goes for -webkit; some write it like that:

-webkit-font-feature-settings: "liga" on, "dlig" on;

While others do it like this:

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

Or like this:

-webkit-font-feature-settings: "liga" 1, "dlig" 1;  

And on top, there is also text-rendering: optimizelegibility; which seems to be the same as "kern" and "liga", at least in webkit browsers.

So, what is the correct, bulletproof way to use Open Type font features on the web in 2013?

Answer 1

Well, the best place to look for how 2013 web features should work would be the W3 CSS3 Specification:

If present, a value indicates an index used for glyph selection. An value must be 0 or greater. A value of 0 indicates that the feature is disabled. For boolean features, a value of 1 enables the feature. For non-boolean features, a value of 1 or greater enables the feature and indicates the feature selection index. A value of ‘on’ is synonymous with 1 and ‘off’ is synonymous with 0. If the value is omitted, a value of 1 is assumed.

This means that "liga" 1, "liga" on and liga all do the same thing.

As BoltClock mentioned in his comment on the question, "feature=value" isn't valid syntax, and seems to be something specific to Firefox.

Opera and IE (<10) do not support font-feature-settings at all, so the -o-* and -ms-* attributes are presumably useless.

Overall, a working syntax for all currently supported browsers would appear to be:

.element {
    -webkit-font-feature-settings: "kern", "liga", "case"; /* No variation */
       -moz-font-feature-settings: "kern=1", "liga=1", "case=1"; /* Firefox 4.0 to 14.0 */
       -moz-font-feature-settings: "kern", "liga" , "case"; /* Firefox 15.0 onwards */
       -moz-font-feature-settings: "kern" 1, "liga" 1, "case" 1; /* Firefox 15.0 onwards explicitly set feature values */
            font-feature-settings: "kern", "liga", "case"; /* No variation */
}

Answer 2

http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/ would probably be a good place to start, as well as the specification itself.

It should also be noted that you won't get a fully bulletproof way of using font-features in the sense that it would work across all browser. According to caniuse, font-features has kind of sketchy support (nothing at all in Opera, nothing prior to IE10, nothing in most of the mobile browsers, partial and prefixed in what's left), in part due to it still being in "Working Draft" status, which means there's still a chance it will change. Therefore, it would be a good idea to not depend on this feature quite yet, and expect that it's just not going to work in all browsers.

On another note, since you mentioned "prefix hell" (which actually isn't that bad - prefixes are meant to be dropped over time; did you know you no longer need prefixes at all for border-radius unless you're stuck supporting truly ancient browsers?) - you might want to look into one of the CSS preprocessors, such as LESS or Sass. These tools can help you with the cutting-edge CSS by putting in the prefixes and correct syntax for you, while you keep your source clean with declarations that follow the W3C standards.