ascent-descent-override-ref.html (1065B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Tests the ascent-override and descent-override descriptors of @font-face</title> 4 <style> 5 .target { 6 position: absolute; 7 font-size: 20px; 8 top: 10px; 9 left: 10px; 10 width: 60px; 11 height: 30px; 12 } 13 14 .top-aligned { 15 display: inline-block; 16 background-color: green; 17 width: 1em; 18 height: 1em; /* Same as the overridden ascent */ 19 position: absolute; 20 top: 0; 21 left: 0; 22 } 23 24 .character { 25 display: inline-block; 26 background-color: green; 27 width: 1em; /* Same as an 'X' in Ahem */ 28 height: 1em; /* Same as an 'X' in Ahem */ 29 position: absolute; 30 top: 0.2em; /* Difference between the overridden ascent and the origianl ascent */ 31 left: 1em; 32 } 33 34 .bottom-aligned { 35 display: inline-block; 36 background-color: green; 37 width: 1em; 38 height: 0.5em; /* Same as the overridden descent */ 39 position: absolute; 40 top: 1em; /* Same as the overridden ascent */ 41 left: 2em; 42 } 43 44 </style> 45 <div class="target"> 46 <span class="top-aligned"></span><span class="character"></span><span class="bottom-aligned"></span> 47 </div>