Font features are usually listed in a document called Specimen
...
.mono {font-feature-settings: "tnum";}
...
.ffs1 {font-feature-settings: 'ss01'}
...
.ffs2 {font-feature-settings: 'ss02'}
...
.ffs3 {font-feature-settings: 'ss03'}
...
.ffs5 {font-feature-settings: 'ss05'}
...
.ffs6 {font-feature-settings: 'ss06'}
...
.liga {font-variant-ligatures: discretionary-ligatures;}
...
.fffrac { font-feature-settings: "frac"; }
...
.fftitl { font-feature-settings: "titl"; }
...
.of-liga--off { font-feature-settings: "liga" 0, "clig" 0; }
This script look for strings of characters and wrap them into a <span> with the desired class to activate a font feature on the span only.
<script>
$(document).ready(function(){
$('.ligatures').each(function(){
$(this).html($(this).html().replace(/oo|OO|tt|TT|Th/g, '<span class="liga">$&</span>'));
$(this).html($(this).html().replace(/8/g, '<span class="ffs6">$&</span>'));
});
});
</script>
Normal
.ligatures with features
Clone this website (soon)
→ Join us on the FigJam