Databases
StackOverflow2013
Postsdbo
POfont-feature-settings: What is the correct syntax?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POfont-feature-settings: What is the correct syntax?
    text
    copied!<p>I purchased a webfont that supports some open type features and of course I want to use them.<br> Unfortunately, I wasn't able to find a source online that explains the best way to use the syntax - it seems to me that <code>font-feature-settings</code> are another example of prefix hell. </p> <p>At the moment I have it written like that but I am not sure if it covers really all browsers that support those features.</p> <pre><code>.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"; } </code></pre> <p>More specifically, the <code>-moz</code> syntax seems strange. Some sources claim that this is the syntax to be used: </p> <pre><code>-moz-font-feature-settings: "liga=1"; /* Firefox 14 and before */ -moz-font-feature-settings: "liga" on; /* Firefox 15 */ </code></pre> <p>Others do it simply like this: </p> <pre><code>-moz-font-feature-settings: "cswh=1"; -moz-font-feature-settings: "cswh"; </code></pre> <p>The same goes for <code>-webkit</code>; some write it like that: </p> <pre><code>-webkit-font-feature-settings: "liga" on, "dlig" on; </code></pre> <p>While others do it like this: </p> <pre><code>-webkit-font-feature-settings: "liga", "dlig"; </code></pre> <p>Or like this: </p> <pre><code>-webkit-font-feature-settings: "liga" 1, "dlig" 1; </code></pre> <p>And on top, there is also <code>text-rendering: optimizelegibility;</code> which seems to be the same as <code>"kern"</code> and <code>"liga"</code>, at least in webkit browsers. </p> <p>So, what is the correct, bulletproof way to use Open Type font features on the web in 2013?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload