Fri, 16 Jan 2015 18:13:44 +0100
Integrate suggestion from review to improve consistency with existing code.
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 }
44 body {
45 font-family: dvs, serif;
46 font-size: 24px;
47 }
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>