intrinsic-fit-2b.html (469B)
1 <!DOCTYPE HTML> 2 <style> 3 @font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); } 4 html, body { margin: 0; padding: 0; } 5 body { width: 450px } 6 p { 7 margin: 0; 8 background: yellow; 9 color: blue; 10 float: left; 11 width: auto; /* computes to 300px */ 12 font: 12px Ahem; 13 } 14 </style> 15 <!-- 16 In a 300px container, the minimum font size at 15em per line is 20px. 17 This means we map 0px-30px into 20px-30px, so 12px gets mapped to 24px. 18 --> 19 <p>This is tiny bit of text.</p>