ascent-descent-override.html (1073B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" href="mailto:xiaochengh@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-metrics-override-desc"> 5 <link rel="match" href="ascent-descent-override-ref.html"> 6 <title>Tests the ascent-override and descent-override descriptors of @font-face</title> 7 <style> 8 @font-face { 9 font-family: Ahem; 10 src: local(Ahem), url(/fonts/Ahem.ttf); 11 /* The default ascent and descent are 80% and 20%, respectively. */ 12 ascent-override: 100%; 13 descent-override: 50%; 14 } 15 16 .target { 17 font: 20px Ahem; 18 color: green; 19 position: absolute; 20 top: 10px; 21 left: 10px; 22 } 23 24 .top-aligned { 25 display: inline-block; 26 background-color: green; 27 vertical-align: top; 28 width: 1em; 29 height: 1em; /* Same as the overridden ascent */ 30 } 31 32 .bottom-aligned { 33 display: inline-block; 34 background-color: green; 35 vertical-align: bottom; 36 width: 1em; 37 height: 0.5em; /* Same as the overridden descent */ 38 } 39 40 </style> 41 <div class="target"> 42 <span class="top-aligned"></span>X<span class="bottom-aligned"></span> 43 </div>