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?
"feature=value"syntax in the actual property value, so I'm guessing the old Mozilla syntax is non-standard. All three WebKit examples that you mention are equivalent as far as the draft spec is concerned.