font-stretch-1-ref.html 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. /* each face is loaded as a separate family, so we can address them individually
  6. without involving the style-matching algorithm */
  7. @font-face {
  8. font-family: dvs;
  9. src: url(../fonts/dejavu-sans/DejaVuSans.ttf);
  10. }
  11. @font-face {
  12. font-family: dvsb;
  13. src: url(../fonts/dejavu-sans/DejaVuSans-Bold.ttf);
  14. }
  15. @font-face {
  16. font-family: dvsi;
  17. src: url(../fonts/dejavu-sans/DejaVuSans-Oblique.ttf);
  18. }
  19. @font-face {
  20. font-family: dvsbi;
  21. src: url(../fonts/dejavu-sans/DejaVuSans-BoldOblique.ttf);
  22. }
  23. @font-face { /* note that there is no ExtraLight Condensed or Oblique */
  24. font-family: dvsl;
  25. src: url(../fonts/dejavu-sans/DejaVuSans-ExtraLight.ttf);
  26. }
  27. @font-face {
  28. font-family: dvsc;
  29. src: url(../fonts/dejavu-sans/DejaVuSansCondensed.ttf);
  30. }
  31. @font-face {
  32. font-family: dvscb;
  33. src: url(../fonts/dejavu-sans/DejaVuSansCondensed-Bold.ttf);
  34. }
  35. @font-face {
  36. font-family: dvsci;
  37. src: url(../fonts/dejavu-sans/DejaVuSansCondensed-Oblique.ttf);
  38. }
  39. @font-face {
  40. font-family: dvscbi;
  41. src: url(../fonts/dejavu-sans/DejaVuSansCondensed-BoldOblique.ttf);
  42. }
  43. body {
  44. font-family: dvs, serif;
  45. font-size: 24px;
  46. }
  47. .b { font-family: dvsb; }
  48. .i { font-family: dvsi; }
  49. .bi { font-family: dvsbi; }
  50. .l { font-family: dvsl; }
  51. .c { font-family: dvsc; }
  52. .cb { font-family: dvscb; }
  53. .ci { font-family: dvsci; }
  54. .cbi { font-family: dvscbi; }
  55. </style>
  56. </head>
  57. <body>
  58. <!-- all 4 levels of "condensed" come out the same; "condensed" takes priority over "light" -->
  59. <div class="c">ultra-condensed <span class="ci">italic</span> <span class="cb">bold <span class="cbi">italic</span></span> <span class="c">light <span class="ci">italic</span></span></div>
  60. <div class="c">extra-condensed <span class="ci">italic</span> <span class="cb">bold <span class="cbi">italic</span></span> <span class="c">light <span class="ci">italic</span></span></div>
  61. <div class="c">condensed <span class="ci">italic</span> <span class="cb">bold <span class="cbi">italic</span></span> <span class="c">light <span class="ci">italic</span></span></div>
  62. <div class="c">semi-condensed <span class="ci">italic</span> <span class="cb">bold <span class="cbi">italic</span></span> <span class="c">light <span class="ci">italic</span></span></div>
  63. <!-- "normal" and all 4 levels of "expanded" come out the same; "light" is available, but only in upright, not italic -->
  64. <div>normal <span class="i">italic</span> <span class="b">bold <span class="bi">italic</span></span> <span class="l">light <span class="i">italic</span></span></div>
  65. <div>semi-expanded <span class="i">italic</span> <span class="b">bold <span class="bi">italic</span></span> <span class="l">light <span class="i">italic</span></span></div>
  66. <div>expanded <span class="i">italic</span> <span class="b">bold <span class="bi">italic</span></span> <span class="l">light <span class="i">italic</span></span></div>
  67. <div>extra-expanded <span class="i">italic</span> <span class="b">bold <span class="bi">italic</span></span> <span class="l">light <span class="i">italic</span></span></div>
  68. <div>ultra-expanded <span class="i">italic</span> <span class="b">bold <span class="bi">italic</span></span> <span class="l">light <span class="i">italic</span></span></div>
  69. </body>
  70. </html>