letter-spacing-ligatures-002.html (1021B)
1 <!DOCTYPE html> 2 <html lang="en" > 3 <meta charset="utf-8"> 4 <title>letter spacing and ligatures</title> 5 <link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'> 6 <link rel='help' href='https://drafts.csswg.org/css-text-3/#letter-spacing-property'> 7 <link rel='match' href='reference/letter-spacing-ligatures-002-ref.html'> 8 <meta name=flags content="should"> 9 <meta name="assert" content="When the effective spacing between two characters is not zero (due to […] letter spacing), user agents should not apply optional ligatures"> 10 <style> 11 @font-face { 12 font-family: 'mplus'; 13 src: url('/fonts/mplus-1p-regular.woff'); 14 } 15 div { 16 font-size: 2em; 17 font-family: mplus; 18 width: 12ch; 19 letter-spacing: 20px; 20 font-kerning: none; 21 } 22 i { 23 padding-left: 20px; 24 } 25 .ref { 26 color: blue; 27 letter-spacing: 0; 28 font-variant-ligatures: none; 29 } 30 </style> 31 <p>Test passes if the black text looks like the blue one. 32 <div>office</div> 33 <div class=ref>o<i></i>f<i></i>f<i></i>i<i></i>c<i></i>e</div>