font-shorthand-stretch-1.html (3035B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 /* load 9 faces of DejaVu Sans in the "dvs" family, with appropriate style descriptors */ 6 @font-face { 7 font-family: dvs; 8 src: url(../fonts/dejavu-sans/DejaVuSans.ttf); 9 } 10 @font-face { 11 font-family: dvs; 12 font-weight: bold; 13 src: url(../fonts/dejavu-sans/DejaVuSans-Bold.ttf); 14 } 15 @font-face { 16 font-family: dvs; 17 font-style: italic; 18 src: url(../fonts/dejavu-sans/DejaVuSans-Oblique.ttf); 19 } 20 @font-face { 21 font-family: dvs; 22 font-style: italic; 23 font-weight: bold; 24 src: url(../fonts/dejavu-sans/DejaVuSans-BoldOblique.ttf); 25 } 26 @font-face { /* note that there is no ExtraLight Condensed or Oblique */ 27 font-family: dvs; 28 font-weight: 200; 29 src: url(../fonts/dejavu-sans/DejaVuSans-ExtraLight.ttf); 30 } 31 @font-face { 32 font-family: dvs; 33 font-stretch: condensed; 34 src: url(../fonts/dejavu-sans/DejaVuSansCondensed.ttf); 35 } 36 @font-face { 37 font-family: dvs; 38 font-weight: bold; 39 font-stretch: condensed; 40 src: url(../fonts/dejavu-sans/DejaVuSansCondensed-Bold.ttf); 41 } 42 @font-face { 43 font-family: dvs; 44 font-style: italic; 45 font-stretch: condensed; 46 src: url(../fonts/dejavu-sans/DejaVuSansCondensed-Oblique.ttf); 47 } 48 @font-face { 49 font-family: dvs; 50 font-style: italic; 51 font-weight: bold; 52 font-stretch: condensed; 53 src: url(../fonts/dejavu-sans/DejaVuSansCondensed-BoldOblique.ttf); 54 } 55 56 body { 57 font-family: dvs, serif; 58 font-size: 24px; 59 } 60 .l { 61 font-weight: 200; 62 } 63 </style> 64 </head> 65 <body> 66 <!-- all 4 levels of "condensed" come out the same; "condensed" takes priority over "light" --> 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 <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 <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 <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 <!-- "normal" and all 4 levels of "expanded" come out the same; "light" is available, but only in upright, not italic --> 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 <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 <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 <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 <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 </body> 78 </html>