My
Perfidious pangram
@font-feature-values "Plex Serif" { @styleset { alt-a: 1; alt-g: 2; } @stylistic { alternates: 1; } } @font-feature-values "Dancing Script" { @stylistic { alternates: 1; } } .container1 * { font-variant-alternates: styleset(alt-a); } .container1 .script { font-variant-alternates: stylistic(alternates); } .inactive .container1 * { font-variant-alternates: normal; }
<div class="container container1"> <p><span class="script">My</span> Perfidious pangram</p> </div>
Alternates active
My
Perfidious pangram
.container2 * { font-feature-settings: 'ss01'; } .container2 .script { font-feature-settings: 'salt'; } .inactive .container2 * { font-feature-settings: 'ss01' 0, 'salt' 0; }
<div class="container container2"> <p><span class="script">My</span> Perfidious pangram</p> </div>
Alternates active