OpenType features in web browsers — Tests

Firefox 13.0	Safari 5.1.7	Chrome 19.0	IE 10 Preview	Opera Next 12.00

• onum Oldstyle Figures
• lnum Lining Figures
• tnum Tabular Figures
• zero Slashed Zero
• frac Fractions
• sups Superscript
• subs Subscript
• ordn Ordinal
• smcp Small Caps
• c2sc Small Capitals From Capitals
• case Case-sensitive Forms
• liga Standard Ligatures
• dlig Discretionary Ligatures
• hlig Historical Ligatures
• calt Contextual Alternates
• swsh Swash
• hist Historical Forms
• ss** Stylistic Sets
• kern Kerning
• locl Localized Forms
• rlig Required ligatures
• medi Medial Forms
• init Initial Forms
• isol Isolated Forms
• fina Final Forms
• mark Mark
• mkmk Mark-to-mark Positioning

---

Oldstyle Figures (onum) ↑ back to index

High-level syntax

font-variant-numeric: oldstyle-nums;

Plan Grotesque 0123456789
0123456789

✘

✘

✘

✘

✘

Low-level syntax

font-feature-settings: 'onum';
/* vendor-prefixes */
-moz-font-feature-settings: 'onum=1';
-ms-font-feature-settings: 'onum';
-webkit-font-feature-settings: 'onum';
-o-font-feature-settings: 'onum';

Plan Grotesque 0123456789
0123456789

✘

✘

✘

✔

✘

---

Lining Figures (lnum) ↑ back to index

High-level syntax

font-variant-numeric: lining-nums;

Nara 0123456789
0123456789

✘

✘

✘

✘

✘

Low-level syntax

font-feature-settings: 'lnum';
/* vendor-prefixes */
-moz-font-feature-settings: 'lnum=1';
-ms-font-feature-settings: 'lnum';
-webkit-font-feature-settings: 'lnum';
-o-font-feature-settings: 'lnum';

Nara 0123456789
0123456789

✔

✘

✘

✔

✘

---

Tabular Figures (tnum) ↑ back to index

High-level syntax

font-variant-numeric: tabular-nums;

Fedra Sans 0123456789
0123456789

✘

✘

✘

✘

✘

Low-level syntax

font-feature-settings: 'tnum';
/* vendor-prefixes */
-moz-font-feature-settings: 'tnum=1';
-ms-font-feature-settings: 'tnum';
-webkit-font-feature-settings: 'tnum';
-o-font-feature-settings: 'tnum';

Fedra Sans 0123456789
0123456789

✔

✘

✘

✔

✘

---

Slashed Zero (zero) ↑ back to index

High-level syntax

font-variant: slashed-zero;

Greta Display 0123456789
0123456789

✘

✘

✘

✘

✘

Low-level syntax

font-feature-settings: "zero";
/* vendor-prefixes */
-moz-font-feature-settings: 'zero=1';
-ms-font-feature-settings: "zero";
-webkit-font-feature-settings: "zero";
-o-font-feature-settings: "zero";

Greta Display 0123456789
0123456789

✔

✘

✘

✔

✘

---

Fractions (frac) ↑ back to index

High-level syntax

font-variant-numeric: diagonal-fractions;

Fedra Serif Display 1 1/2 h 3 98/100
1 1/2 h 3 98/100

✘

✘

✘

✘

✘

Low-level syntax

font-feature-settings: "frac";
/* vendor-prefixes */
-moz-font-feature-settings: 'frac=1';
-ms-font-feature-settings: "frac";
-webkit-font-feature-settings: "frac";
-o-font-feature-settings: "frac";

Fedra Serif Display 1 1/2 h 3 98/100
1 1/2 h 3 98/100

✔

✘

✘

✔

✘

---

Superscript (sups) ↑ back to index

High-level syntax

font-variant-position: sup;

Brioni Text HO 0123456789
HO 0123456789

✘

✘

✘

✘

✘

Low-level syntax

font-feature-settings: "sups";
/* vendor-prefixes */
-moz-font-feature-settings: 'sups=1';
-ms-font-feature-settings: "sups";
-webkit-font-feature-settings: "sups";
-o-font-feature-settings: "sups";

Brioni Text HO 0123456789
HO 0123456789

✔

✘

✘

✔

✘

---

Subscript (subs) ↑ back to index

High-level syntax

font-variant-position: sub;

Fedra Sans HO 0123456789
HO 0123456789

✘

✘

✘

✘

✘

Low-level syntax

font-feature-settings: "subs";
/* vendor-prefixes */
-moz-font-feature-settings: 'subs=1';
-ms-font-feature-settings: "subs";
-webkit-font-feature-settings: "subs";
-o-font-feature-settings: "subs";

Fedra Sans HO 0123456789
HO 0123456789

✔

✘

✘

✔

✘

---

Ordinals (ordn) ↑ back to index

High-level syntax

font-variant-position: ordinal;

Fedra Serif A apto 2a-feira
apto 2a-feira

✘

✘

✘

✘

✘

Low-level syntax

font-feature-settings: "ordn";
/* vendor-prefixes */
-moz-font-feature-settings: 'ordn=1';
-ms-font-feature-settings: "ordn";
-webkit-font-feature-settings: "ordn";
-o-font-feature-settings: "ordn";

Fedra Serif A apto 2a-feira
apto 2a-feira

✘

✘

✘

✔

✘

---

Small Caps (smcp) ↑ back to index

High-level syntax

font-variant-caps: small-caps;

Brioni Text Hello World
Hello World

✘

✘

✘

✘

✘

Low-level syntax

font-feature-settings: "smcp";
/* vendor-prefixes */
-moz-font-feature-settings: 'smcp=1';
-ms-font-feature-settings: "smcp";
-webkit-font-feature-settings: "smcp";
-o-font-feature-settings: "smcp";

Brioni Text Hello World
Hello World

✔

✘

✘

✔

✘

---

Capitals to Small Caps (c2sc) ↑ back to index

[signup]

High-level syntax

font-variant-caps: all-small-caps;

Greta Display Hello World
Hello World

✘

✘

✘

✘

✘

This is not exactly the same as c2sc, since it transforms both lower- and uppercase to small caps.

Low-level syntax

font-feature-settings: "c2sc";
/* vendor-prefixes */
-moz-font-feature-settings: 'c2sc=1';
-ms-font-feature-settings: "c2sc";
-webkit-font-feature-settings: "c2sc";
-o-font-feature-settings: "c2sc";

Greta Display Hello World
Hello World

✔

✘

✘

✔

✘

---

Case-sensitive Forms (case) ↑ back to index

High-level syntax

text-transform: uppercase;

Nara {¿¡HO-HO—HO!?}
{¿¡HO-HO—HO!?}

✘

✘

✘

✘

✘

This is not exactly the same as case, since it only transforms lowercase letters into uppercase.

Low-level syntax

font-feature-settings: "case";
/* vendor-prefixes */
-moz-font-feature-settings: "case=1";
-ms-font-feature-settings: "case";
-webkit-font-feature-settings: "case";
-o-font-feature-settings: "case";

Nara {¿¡HO-HO—HO!?}
{¿¡HO-HO—HO!?}

✔

✘

✘

✔

✘

---

Standard Ligatures (liga) ↑ back to index

Default state

Fedra Sans tipografia influence

on

off

off

off

off

High-level syntax – ON

font-variant-ligatures: common-ligatures;

Fedra Sans tipografia influence
tipografia influence

on

off

off

off

off

High-level syntax – OFF

font-variant-ligatures: no-common-ligatures;

Fedra Sans tipografia influence
tipografia influence

on

off

off

off

off

Low-level syntax – ON

font-feature-settings: "liga" on;   
/* vendor-prefixes */
-moz-font-feature-settings: 'liga=1';
-ms-font-feature-settings: "liga" on;
-webkit-font-feature-settings: "liga" on;
-o-font-feature-settings: "liga" on;

Fedra Sans tipografia influence
tipografia influence

on

off

on

on

off

Low-level syntax – OFF

font-feature-settings: "liga" off;  
/* vendor-prefixes */
-moz-font-feature-settings: 'liga=0';
-ms-font-feature-settings: "liga" off;
-webkit-font-feature-settings: "liga" off;
-o-font-feature-settings: "liga" off;

Fedra Sans tipografia influence
tipografia influence

on

off

on

off

off

The ‘text-rendering’ property – ON

text-rendering: optimizeLegibility;

Fedra Sans tipografia influence
tipografia influence

on

on

on

off

off

The ‘text-rendering’ property – OFF

text-rendering: optimizeSpeed;

Fedra Sans tipografia influence
tipografia influence

on

off

off

off

off

---

Discretionary Ligatures (dlig) ↑ back to index

Default state

Irma Slab HB HE OO UP

Fedra Sans (1) (2) [3] -^ ^-

off

off

off

off

off

High-level syntax – ON

font-variant-ligatures: discretionary-ligatures;

Irma Slab HB HE OO UP
HB HE OO UP

Fedra Sans (1) (2) [3] -^ ^-
(1) (2) [3] -^ ^-

off

off

off

off

off

High-level syntax – OFF

font-variant-ligatures: no-discretionary-ligatures;

Irma Slab HB HE OO UP
HB HE OO UP

Fedra Sans (1) (2) [3] -^ ^-
(1) (2) [3] -^ ^-

off

off

off

off

off

Low-level syntax – ON

font-feature-settings: "dlig";
/* vendor-prefixes */
-moz-font-feature-settings: 'dlig=1';
-ms-font-feature-settings: "dlig";
-webkit-font-feature-settings: "dlig";
-o-font-feature-settings: "dlig";

Irma Slab HB HE OO UP
HB HE OO UP

off

off

off

on

off

Fedra Sans (1) (2) [3] -^ ^-
(1) (2) [3] -^ ^-

on

off

off

on

off

---

Historical Ligatures (hlig) ↑ back to index

High-level syntax – ON

font-variant-ligatures: historical-ligatures;

Fedra Serif B ſinfulness poeſia
ſinfulness poeſia

off

off

off

off

off

High-level syntax – OFF

font-variant-ligatures: no-historical-ligatures;

Fedra Serif B ſinfulness poeſia
ſinfulness poeſia

off

off

off

off

off

Low-level syntax – ON

font-feature-settings: "hlig";
/* vendor-prefixes */
-moz-font-feature-settings: 'hlig=1';
-ms-font-feature-settings: "hlig";
-webkit-font-feature-settings: "hlig";
-o-font-feature-settings: "hlig";

Fedra Serif B ſinfulness poeſia
ſinfulness poeſia

on

off

off

on

off

---

Contextual Alternates (calt) ↑ back to index

[social]

Default state

Fedra Serif Display monger mongre
monger mongre

on

off

off

off

off

Fedra Sans Display 1 BILLY THE KIDD
BILLY THE KIDD

off

off

off

off

off

High-level syntax – ON

font-variant-alternates: contextual;

Fedra Serif Display monger mongre
monger mongre

on

off

off

off

off

Fedra Sans Display 1 BILLY THE KIDD
BILLY THE KIDD

off

off

off

off

off

High-level syntax – OFF

font-variant-alternates: no-contextual;

Fedra Serif Display monger mongre
monger mongre

on

off

off

off

off

Fedra Sans Display 1 BILLY THE KIDD
BILLY THE KIDD

off

off

off

off

off

This property also activates contextual ligatures clig.
The fonts used in the tests do not include this feature.

Low-level syntax – ON

font-feature-settings: "calt";
/* vendor-prefixes */
-moz-font-feature-settings: 'calt=1';
-ms-font-feature-settings: "calt";
-webkit-font-feature-settings: "calt";
-o-font-feature-settings: "calt";

Fedra Serif Display monger mongre
monger mongre

on

off

on

on

off

Fedra Sans Display 1 BILLY THE KIDD
BILLY THE KIDD

off

off

?

on

off

Low-level syntax – OFF

font-feature-settings: "calt" off;
/* vendor-prefixes */
-moz-font-feature-settings: 'calt=0';
-ms-font-feature-settings: "calt" off;
-webkit-font-feature-settings: "calt" off;
-o-font-feature-settings: "calt" off;

Fedra Serif Display monger mongre
monger mongre

on

off

off

off

off

Fedra Sans Display 1 BILLY THE KIDD
BILLY THE KIDD

off

off

off

off

off

---

Swash (swsh) ↑ back to index

Low-level syntax

font-feature-settings: "swsh";
/* vendor-prefixes */
-moz-font-feature-settings: 'swsh=1';
-ms-font-feature-settings: "swsh";
-webkit-font-feature-settings: "swsh";
-o-font-feature-settings: "swsh";

Fedra Serif A Alpha Beta Quality
Alpha Beta Quality

✔

✘

✘

✔

✘

---

Historical Forms (hist) ↑ back to index

High-level syntax

font-variant-alternates: historical-forms;

Fedra Serif A paradise lost
paradise lost

✘

✘

✘

✘

✘

Low-level syntax

font-feature-settings: "hist";
/* vendor-prefixes */
-moz-font-feature-settings: 'hist=1';
-ms-font-feature-settings: "hist";
-webkit-font-feature-settings: "hist";
-o-font-feature-settings: "hist";

Fedra Serif A paradise lost
paradise lost

✔

✘

✘

✔

✘

---

Stylistic Sets 1-20 (ss**) ↑ back to index

Low-level syntax

font-feature-settings: "ss01", "ss02";
/* vendor-prefixes */
-moz-font-feature-settings: 'ss01=1, ss02=1';
-ms-font-feature-settings: "ss01", "ss02";
-webkit-font-feature-settings: "ss01", "ss02";
-o-font-feature-settings: "ss01", "ss02";

Fedra Sans figure afgelopen
figure afgelopen

on

off

off

on

off

---

Localised Forms (locl) ↑ back to index

High-level syntax

<span lang='ru'>гпклдвзитжц</span>
<span lang='bg'>гпклдвзитжц</span>

Fedra Sans Pro гпклдвзитжц
гпклдвзитжц

✔

✘

✘

✘

✘

---

Kerning (kern) ↑ back to index

Default state

Fedra Sans AVATAR LT.

on

off

off

off

off

High-level syntax – Auto

font-kerning: auto;

Fedra Sans AVATAR LT.
AVATAR LT.

on

off

off

off

off

High-level syntax – ON

font-kerning: normal;

Fedra Sans AVATAR LT.
AVATAR LT.

on

off

off

off

off

High-level syntax – OFF

font-kerning: none;

Fedra Sans AVATAR LT.
AVATAR LT.

on

off

off

off

off

Low-level syntax – ON

font-feature-settings: "kern";
/* vendor-prefixes */
-moz-font-feature-settings: "kern=1";
-ms-font-feature-settings: "kern";
-webkit-font-feature-settings: "kern";
-o-font-feature-settings: "kern";

Fedra Sans AVATAR LT.
AVATAR LT.

on

off

?

on

off

Low-level syntax – OFF

font-feature-settings: "kern";
/* vendor-prefixes */
-moz-font-feature-settings: "kern=0";
-ms-font-feature-settings: "kern";
-webkit-font-feature-settings: "kern";
-o-font-feature-settings: "kern";

Fedra Sans AVATAR LT.
AVATAR LT.

off

off

?

on

off

The ‘text-rendering’ property – ON

text-rendering: optimizeLegibility;

Fedra Sans AVATAR LT.
AVATAR LT.

on

on

on