font-stretch-1-ref.html (3252B)
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 44 body { 45 font-family: dvs, serif; 46 font-size: 24px; 47 } 48 49 .b { font-family: dvsb; } 50 .i { font-family: dvsi; } 51 .bi { font-family: dvsbi; } 52 .l { font-family: dvsl; } 53 .c { font-family: dvsc; } 54 .cb { font-family: dvscb; } 55 .ci { font-family: dvsci; } 56 .cbi { font-family: dvscbi; } 57 </style> 58 </head> 59 <body> 60 <!-- all 4 levels of "condensed" come out the same; "condensed" takes priority over "light" --> 61 <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> 62 <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> 63 <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> 64 <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> 65 <!-- "normal" and all 4 levels of "expanded" come out the same; "light" is available, but only in upright, not italic --> 66 <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> 67 <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> 68 <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> 69 <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> 70 <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> 71 </body> 72 </html>