subsuper-fallback-size.html 778 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>font-variant-position fallback</title>
  5. <meta charset="UTF-8">
  6. <style>
  7. /* sups: 0-9 + - ( ) = subs: 0-9 + - ( ) */
  8. @font-face {
  9. font-family: subsuper;
  10. src: url(../fonts/subsuper.woff); /* FiraSans with blank omega */
  11. }
  12. body {
  13. margin: 20px;
  14. font-family: subsuper, sans-serif;
  15. }
  16. p {
  17. margin: 10px;
  18. font-size: 50px;
  19. line-height: 2;
  20. width: -moz-fit-content;
  21. background: black;
  22. }
  23. h4 { font-weight: normal; }
  24. span.sub { font-variant-position: sub; }
  25. span.super { font-variant-position: super; }
  26. </style>
  27. </head>
  28. <body>
  29. <h4>The black bars should NOT be the same length</h4>
  30. <p>&nbsp;XXXXXXXXXX&nbsp;</p>
  31. <p>&nbsp;X<span class=sub>XXXXXXXX</span>X&nbsp;</p>
  32. <p>&nbsp;X<span class=super>XXXXXXXX</span>X&nbsp;</p>
  33. </body>
  34. </html>