intrinsic-fit-2b.html 469 B

1234567891011121314151617181920
  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>