css - 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 */
}