font-size-adjust-009-ref.html (990B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Fonts Reference: font-size-adjust - two-value syntax</title> 4 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 5 <style> 6 @font-face { 7 font-family: test; 8 src: url(/fonts/noto/noto-sans-v8-latin-regular.woff); 9 /* this font has a cap-height of 1462/2048 units */ 10 } 11 div { 12 clear: left; 13 float: left; 14 font: 56px/112px test; 15 color: orange; 16 background: orange; 17 } 18 #test1 { 19 color: green; 20 background: green; 21 } 22 #test2 { 23 color: blue; 24 background: blue; 25 font-size: 84px; 26 } 27 #test3 { 28 color: magenta; 29 background: magenta; 30 font-size: 42px; 31 } 32 </style> 33 <body> 34 <p>Test passes if the size of the green rectangle matches the orange rectangle, 35 the blue rectangle is longer, and the magenta rectangle is shorter.</p> 36 <div>Filler Text</div> 37 <div id="test1">Filler Text</div> 38 <div id="test2">Filler Text</div> 39 <div id="test3">Filler Text</div> 40 </body>