|
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> |
|
73 |