subsuper-nofallback.html 768 B

12345678910111213141516171819202122232425262728293031323334353637
  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: 0;
  18. font-size: 75px;
  19. }
  20. h4 { font-weight: normal }
  21. span.sub { font-variant-position: sub }
  22. span.super { font-variant-position: super }
  23. </style>
  24. </head>
  25. <body>
  26. <h4>All the subscripts and superscripts should display with variant glyphs:</h4>
  27. <p>
  28. <span class=sub>3</span>C<span class=super>2</span>
  29. <span class=sub>(3)</span>C<span class=super>(2)</span>
  30. <span class=sub>21+3</span>C<span class=super>45</span>
  31. </p>
  32. </body>
  33. </html>