The css font-feature-settings property is a new and upcoming typographic feature that will allow for better typographic detail with web typography. The property essentially brings OpenType features such as small caps, ligatures, fractions, alternate sets and numbers to the web. Of course this is experimental at this point and is not a w3c recommendation, although, it is
currently in the process of recommendation in the Editor’s Draft. Browser support is hit and miss so be aware of your choice in browser. Google Chrome seems to have the best support at this time closely followed by Mozilla Firefox. If you would like more technical information please visit the blog.
-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";Fractions
1/2 2/3 1/4 1/3 3/4 1/8 7/8
-moz-font-feature-settings:"frac" 1; -moz-font-feature-settings:"frac=1"; -ms-font-feature-settings:"frac" 1; -o-font-feature-settings:"frac" 1; -webkit-font-feature-settings:"frac" 1; font-feature-settings:"frac" 1;
Numbers
0123456789
-moz-font-feature-settings:"onum" 1; -moz-font-feature-settings:"onum=1"; -ms-font-feature-settings:"onum" 1; -o-font-feature-settings:"onum" 1; -webkit-font-feature-settings:"onum" 1; font-feature-settings:"onum" 1;-moz-font-feature-settings:"lnum" 1; -moz-font-feature-settings:"lnum=1"; -ms-font-feature-settings:"lnum" 1; -o-font-feature-settings:"lnum" 1; -webkit-font-feature-settings:"lnum" 1; font-feature-settings:"lnum" 1;Small Caps
real small caps
-moz-font-feature-settings:"smcp" 1; -moz-font-feature-settings:"smcp=1"; -ms-font-feature-settings:"smcp" 1; -o-font-feature-settings:"smcp" 1; -webkit-font-feature-settings:"smcp" 1; font-feature-settings:"smcp" 1;Swash
Touch the Swash
-moz-font-feature-settings:"swsh" 1; -moz-font-feature-settings:"swsh=1"; -ms-font-feature-settings:"swsh" 1; -o-font-feature-settings:"swsh" 1; -webkit-font-feature-settings:"swsh" 1; font-feature-settings:"swsh" 1;Subscript
Mg(OH)2 N2O + H2O
- How Design
- WebINK
- Microsoft Dev Network
-moz-font-feature-settings:"subs" 1; -moz-font-feature-settings:"subs=1"; -ms-font-feature-settings:"subs" 1; -o-font-feature-settings:"subs" 1; -webkit-font-feature-settings:"subs" 1; font-feature-settings:"subs" 1;Superscript
Cu2
- How Design
- WebINK
- Microsoft Dev Network
-moz-font-feature-settings:"sups" 1; -moz-font-feature-settings:"sups=1"; -ms-font-feature-settings:"sups" 1; -o-font-feature-settings:"sups" 1; -webkit-font-feature-settings:"sups" 1; font-feature-settings:"sups" 1;