synthetic-bold-zero-width-01.html (1483B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <style> 4 @font-face { 5 font-family: Fira; 6 src: url(../fonts/fira/FiraSansOT-Regular.otf); 7 } 8 body { 9 /* We want a font that only has a single weight, and supports 'x' and zero-width U+0301. 10 * The Apple Symbols and Segoe UI Symbol fonts appear to meet this requirement on macOS 11 * and Win10 respectively. 12 * If they're not available, we use a single face of Fira loaded via @font-face. 13 */ 14 font: 24px Apple Symbols, Segoe UI Symbol, Fira; 15 } 16 .bold { 17 font-weight: bold; 18 } 19 span { 20 color: transparent; 21 } 22 </style> 23 <body> 24 <!-- any number of zero-width characters should not result in any extra space between the 'x' glyphs ... --> 25 <div> 26 xx<br> 27 x<span>́</span>x<br> 28 x<span>́́</span>x<br> 29 x<span>́́́</span>x<br> 30 x<span>́́́́</span>x<br> 31 x<span>́́́́́</span>x<br> 32 x<span>́́́́́́</span>x<br> 33 x<span>́́́́́́́</span>x<br> 34 </div> 35 <!-- ... even when synthetic bold is in effect --> 36 <div class=bold> 37 xx<br> 38 x<span>́</span>x<br> 39 x<span>́́</span>x<br> 40 x<span>́́́</span>x<br> 41 x<span>́́́́</span>x<br> 42 x<span>́́́́́</span>x<br> 43 x<span>́́́́́́</span>x<br> 44 x<span>́́́́́́́</span>x<br> 45 </div>