subsuper-fallback.html 988 B

1234567891011121314151617181920212223242526272829303132333435
  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: 50px;
  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 synthesized glyphs:</h4>
  27. <p><span class=sub>3n</span>C<span class=super>2n</span> <span class=sub>n3</span>C<span class=super>n2</span></p>
  28. <p><span class=sub>3&pi;</span>C<span class=super>2&pi;</span> <span class=sub>&pi;3</span>C<span class=super>&pi;2</span></p>
  29. <p><span class=sub>3&#x1F4A9;</span>C<span class=super>2&#x1F4A9;</span> <span class=sub>&#x1F4A9;3</span>C<span class=super>&#x1F4A9;2</span></p>
  30. </body>
  31. </html>