font-synthesis-position-001.html (1621B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="utf-8"/> 4 <title>CSS Test: font-synthesis-position: none disables fake super/subscripts</title> 5 <link rel="match" href="font-synthesis-position-001-ref.html"> 6 <meta name="assert" content="font-synthesis-position:none must prevent synthesizing forms for font-variant-position"> 7 <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-synthesis-intro"> 8 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7441#issuecomment-1680918811"> 9 10 <style> 11 /* Lato has superscript Latin letters, but not subscript ones; 12 * digits are available in both super- and subscript form. 13 */ 14 @font-face { 15 font-family: "lato"; 16 src: url(/fonts/Lato-Medium.ttf); 17 } 18 @supports not (font-synthesis-position: none) { 19 .test::before { 20 color: red; 21 content: "font-synthesis-position is unsupported!" 22 } 23 } 24 .test { 25 font-family: "lato"; 26 font-size: 2em; 27 } 28 .nosynth { 29 font-synthesis-position: none; 30 } 31 .sub { 32 font-variant-position: sub; 33 } 34 .super { 35 font-variant-position: super; 36 } 37 </style> 38 39 <section class="test nosynth"> 40 <p>Synthetic super- and subscripts <em>must not</em> be used:</p> 41 <p>Text with <span class="sub">sub</span> and <span class="sub">123</span> and <span class="sub">3.14</span></p> 42 <!-- note that Lato does not support a superscript FULL STOP, so it will look bad! --> 43 <p>Text with <span class="super">super</span> and <span class="super">123</span> and <span class="super">3.14</span></p> 44 </section>