fontface-override-descriptors.html (967B)
1 <!DOCTYPE html> 2 <title>Tests that the ascentOverride, descentOverride and lineGapOverride attributes of FontFace work</title> 3 <link rel="help" href="https://drafts.csswg.org/css-font-loading/#fontface-interface"> 4 <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-metrics-override-desc"> 5 <link rel="match" href="fontface-override-descriptors-ref.html"> 6 <script> 7 const face = new FontFace( 8 'Ahem', 9 'local("Ahem"), url("/fonts/Ahem.ttf")', 10 {ascentOverride: '100%', descentOverride: '100%', lineGapOverride: '100%'}); 11 document.fonts.add(face); 12 13 // Line height is ascent + descent + lineGap = 3em 14 // Baseline is placed at lineGap * 0.5 + ascent = 1.5em below line box top 15 // Since each Ahem 'X' glyph has 0.8em above baseline, the top of each glyph 16 // should be placed at 0.7em below line box top 17 </script> 18 <style> 19 #target { 20 position: absolute; 21 font-family: Ahem; 22 font-size: 20px; 23 } 24 </style> 25 26 <div id="target"> 27 XXXXX<br> 28 XXXXX 29 </div>