Home Explore Help
Sign In
khronosschoty
/
palemoon-dev
Watch 2
Star 1
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: ac60e7ecec
Branches Tags
palemoon-dev
/
platform
/
layout
/
reftests
/
font-matching
/
font-shorthand-stretch-1.html

font-shorthand-stretch-1.html 3.0 KB
History Raw

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <style type="text/css">
    5. 

  5. /* load 9 faces of DejaVu Sans in the "dvs" family, with appropriate style descriptors */
    6. 

  6. @font-face {
    7. 

  7.   font-family: dvs;
    8. 

  8.   src: url(../fonts/dejavu-sans/DejaVuSans.ttf);
    9. 

  9. }
    10. 

  10. @font-face {
    11. 

  11.   font-family: dvs;
    12. 

  12.   font-weight: bold;
    13. 

  13.   src: url(../fonts/dejavu-sans/DejaVuSans-Bold.ttf);
    14. 

  14. }
    15. 

  15. @font-face {
    16. 

  16.   font-family: dvs;
    17. 

  17.   font-style: italic;
    18. 

  18.   src: url(../fonts/dejavu-sans/DejaVuSans-Oblique.ttf);
    19. 

  19. }
    20. 

  20. @font-face {
    21. 

  21.   font-family: dvs;
    22. 

  22.   font-style: italic;
    23. 

  23.   font-weight: bold;
    24. 

  24.   src: url(../fonts/dejavu-sans/DejaVuSans-BoldOblique.ttf);
    25. 

  25. }
    26. 

  26. @font-face { /* note that there is no ExtraLight Condensed or Oblique */
    27. 

  27.   font-family: dvs;
    28. 

  28.   font-weight: 200;
    29. 

  29.   src: url(../fonts/dejavu-sans/DejaVuSans-ExtraLight.ttf);
    30. 

  30. }
    31. 

  31. @font-face {
    32. 

  32.   font-family: dvs;
    33. 

  33.   font-stretch: condensed;
    34. 

  34.   src: url(../fonts/dejavu-sans/DejaVuSansCondensed.ttf);
    35. 

  35. }
    36. 

  36. @font-face {
    37. 

  37.   font-family: dvs;
    38. 

  38.   font-weight: bold;
    39. 

  39.   font-stretch: condensed;
    40. 

  40.   src: url(../fonts/dejavu-sans/DejaVuSansCondensed-Bold.ttf);
    41. 

  41. }
    42. 

  42. @font-face {
    43. 

  43.   font-family: dvs;
    44. 

  44.   font-style: italic;
    45. 

  45.   font-stretch: condensed;
    46. 

  46.   src: url(../fonts/dejavu-sans/DejaVuSansCondensed-Oblique.ttf);
    47. 

  47. }
    48. 

  48. @font-face {
    49. 

  49.   font-family: dvs;
    50. 

  50.   font-style: italic;
    51. 

  51.   font-weight: bold;
    52. 

  52.   font-stretch: condensed;
    53. 

  53.   src: url(../fonts/dejavu-sans/DejaVuSansCondensed-BoldOblique.ttf);
    54. 

  54. }
    55. 

  55. 

  56. body {
    57. 

  57.   font-family: dvs, serif;
    58. 

  58.   font-size: 24px;
    59. 

  59. }
    60. 

  60. .l {
    61. 

  61.   font-weight: 200;
    62. 

  62. }
    63. 

  63. </style>
    64. 

  64. </head>
    65. 

  65. <body>
    66. 

  66. <!-- all 4 levels of "condensed" come out the same; "condensed" takes priority over "light" -->
    67. 

  67. <div style="font: ultra-condensed 24px dvs, serif">ultra-condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
    68. 

  68. <div style="font: extra-condensed 24px dvs, serif">extra-condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
    69. 

  69. <div style="font: condensed 24px dvs, serif">condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
    70. 

  70. <div style="font: semi-condensed 24px dvs, serif">semi-condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
    71. 

  71. <!-- "normal" and all 4 levels of "expanded" come out the same; "light" is available, but only in upright, not italic -->
    72. 

  72. <div style="font: 24px dvs">normal <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
    73. 

  73. <div style="font: semi-expanded 24px dvs, serif">semi-expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
    74. 

  74. <div style="font: expanded 24px dvs, serif">expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
    75. 

  75. <div style="font: extra-expanded 24px dvs, serif">extra-expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
    76. 

  76. <div style="font: ultra-expanded 24px dvs, serif">ultra-expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
    77. 

  77. </body>
    78. 

  78. </html>
    79. 

  79. 

  80.