stretchmapping-137.html (6346B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>font-stretch mapping tests</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 7 <style type="text/css"> 8 9 body { 10 margin: 50px; 11 font-family: Verdana, sans-serif; 12 } 13 14 h3, h4 { font-weight: normal; } 15 16 table { 17 border-collapse: collapse; 18 font-size: 28px; 19 } 20 21 td { 22 padding: 0; margin: 0; 23 font-family: test; 24 } 25 26 th { 27 font-weight: inherit; 28 } 29 30 p { width: 300px; } 31 32 .red { color: red; } 33 34 thead { font-weight: 400; font-size: 75%; } 35 36 /* make all the spans blocks to avoid influence of what's outside them 37 on line-height calculations */ 38 span { display: block; } 39 40 @font-face { 41 font-family: test; 42 src: url(../fonts/mplus/mplus-1p-thin.ttf); 43 font-weight: 100; 44 font-stretch: ultra-condensed; 45 } 46 47 @font-face { 48 font-family: test; 49 src: url(../fonts/mplus/mplus-1p-regular.ttf); 50 font-weight: 400; 51 font-stretch: ultra-condensed; 52 } 53 54 @font-face { 55 font-family: test; 56 src: url(../fonts/mplus/mplus-1p-light.ttf); 57 font-weight: 200; 58 font-stretch: condensed; 59 } 60 61 @font-face { 62 font-family: test; 63 src: url(../fonts/mplus/mplus-1p-heavy.ttf); 64 font-weight: 800; 65 font-stretch: condensed; 66 } 67 68 @font-face { 69 font-family: test; 70 src: url(../fonts/mplus/mplus-1p-medium.ttf); 71 font-weight: 500; 72 font-stretch: expanded; 73 } 74 75 @font-face { 76 font-family: test; 77 src: url(../fonts/mplus/mplus-1p-black.ttf); 78 font-weight: 900; 79 font-stretch: expanded; 80 } 81 82 @font-face { 83 font-family: test100; 84 src: url(../fonts/mplus/mplus-1p-thin.ttf); 85 font-weight: 100; 86 } 87 88 @font-face { 89 font-family: test200; 90 src: url(../fonts/mplus/mplus-1p-light.ttf); 91 font-weight: 200; 92 } 93 94 @font-face { 95 font-family: test400; 96 src: url(../fonts/mplus/mplus-1p-regular.ttf); 97 font-weight: 400; 98 } 99 100 @font-face { 101 font-family: test500; 102 src: url(../fonts/mplus/mplus-1p-medium.ttf); 103 font-weight: 500; 104 } 105 106 @font-face { 107 font-family: test800; 108 src: url(../fonts/mplus/mplus-1p-heavy.ttf); 109 font-weight: 800; 110 } 111 112 @font-face { 113 font-family: test900; 114 src: url(../fonts/mplus/mplus-1p-black.ttf); 115 font-weight: 900; 116 } 117 118 .w1 { font-weight: 100; } 119 .w2 { font-weight: 200; } 120 .w3 { font-weight: 300; } 121 .w4 { font-weight: 400; } 122 .w5 { font-weight: 500; } 123 .w6 { font-weight: 600; } 124 .w7 { font-weight: 700; } 125 .w8 { font-weight: 800; } 126 .w9 { font-weight: 900; } 127 128 .fs1 { font-stretch: ultra-condensed; } 129 .fs2 { font-stretch: extra-condensed; } 130 .fs3 { font-stretch: condensed; } 131 .fs4 { font-stretch: semi-condensed; } 132 .fs5 { font-stretch: normal; } 133 .fs6 { font-stretch: semi-expanded; } 134 .fs7 { font-stretch: expanded; } 135 .fs8 { font-stretch: extra-expanded; } 136 .fs9 { font-stretch: ultra-expanded; } 137 138 </style> 139 </head> 140 <body> 141 142 <p>Font family with ultra-condensed 100, 400, condensed 200, 800 and expanded 500, 900</p> 143 144 <table> 145 <thead> 146 <th></th> 147 <th class="red">1</th> 148 <th>2</th> 149 <th class="red">3</th> 150 <th>4</th> 151 <th>5</th> 152 <th>6</th> 153 <th class="red">7</th> 154 <th>8</th> 155 <th>9</th> 156 </thead> 157 <tr class="w1"> 158 <th>100</th> 159 <td class="fs1"><span>か</span></td> 160 <td class="fs2"><span>か</span></td> 161 <td class="fs3"><span>か</span></td> 162 <td class="fs4"><span>か</span></td> 163 <td class="fs5"><span>か</span></td> 164 <td class="fs6"><span>か</span></td> 165 <td class="fs7"><span>か</span></td> 166 <td class="fs8"><span>か</span></td> 167 <td class="fs9"><span>か</span></td> 168 </tr> 169 <tr class="w2"> 170 <th>200</th> 171 <td class="fs1"><span>か</span></td> 172 <td class="fs2"><span>か</span></td> 173 <td class="fs3"><span>か</span></td> 174 <td class="fs4"><span>か</span></td> 175 <td class="fs5"><span>か</span></td> 176 <td class="fs6"><span>か</span></td> 177 <td class="fs7"><span>か</span></td> 178 <td class="fs8"><span>か</span></td> 179 <td class="fs9"><span>か</span></td> 180 </tr> 181 <tr class="w3"> 182 <th>300</th> 183 <td class="fs1"><span>か</span></td> 184 <td class="fs2"><span>か</span></td> 185 <td class="fs3"><span>か</span></td> 186 <td class="fs4"><span>か</span></td> 187 <td class="fs5"><span>か</span></td> 188 <td class="fs6"><span>か</span></td> 189 <td class="fs7"><span>か</span></td> 190 <td class="fs8"><span>か</span></td> 191 <td class="fs9"><span>か</span></td> 192 </tr> 193 <tr class="w4"> 194 <th>400</th> 195 <td class="fs1"><span>か</span></td> 196 <td class="fs2"><span>か</span></td> 197 <td class="fs3"><span>か</span></td> 198 <td class="fs4"><span>か</span></td> 199 <td class="fs5"><span>か</span></td> 200 <td class="fs6"><span>か</span></td> 201 <td class="fs7"><span>か</span></td> 202 <td class="fs8"><span>か</span></td> 203 <td class="fs9"><span>か</span></td> 204 </tr> 205 <tr class="w5"> 206 <th>500</th> 207 <td class="fs1"><span>か</span></td> 208 <td class="fs2"><span>か</span></td> 209 <td class="fs3"><span>か</span></td> 210 <td class="fs4"><span>か</span></td> 211 <td class="fs5"><span>か</span></td> 212 <td class="fs6"><span>か</span></td> 213 <td class="fs7"><span>か</span></td> 214 <td class="fs8"><span>か</span></td> 215 <td class="fs9"><span>か</span></td> 216 </tr> 217 <tr class="w6"> 218 <th>600</th> 219 <td class="fs1"><span>か</span></td> 220 <td class="fs2"><span>か</span></td> 221 <td class="fs3"><span>か</span></td> 222 <td class="fs4"><span>か</span></td> 223 <td class="fs5"><span>か</span></td> 224 <td class="fs6"><span>か</span></td> 225 <td class="fs7"><span>か</span></td> 226 <td class="fs8"><span>か</span></td> 227 <td class="fs9"><span>か</span></td> 228 </tr> 229 <tr class="w7"> 230 <th>700</th> 231 <td class="fs1"><span>か</span></td> 232 <td class="fs2"><span>か</span></td> 233 <td class="fs3"><span>か</span></td> 234 <td class="fs4"><span>か</span></td> 235 <td class="fs5"><span>か</span></td> 236 <td class="fs6"><span>か</span></td> 237 <td class="fs7"><span>か</span></td> 238 <td class="fs8"><span>か</span></td> 239 <td class="fs9"><span>か</span></td> 240 </tr> 241 <tr class="w8"> 242 <th>800</th> 243 <td class="fs1"><span>か</span></td> 244 <td class="fs2"><span>か</span></td> 245 <td class="fs3"><span>か</span></td> 246 <td class="fs4"><span>か</span></td> 247 <td class="fs5"><span>か</span></td> 248 <td class="fs6"><span>か</span></td> 249 <td class="fs7"><span>か</span></td> 250 <td class="fs8"><span>か</span></td> 251 <td class="fs9"><span>か</span></td> 252 </tr> 253 <tr class="w9"> 254 <th>900</th> 255 <td class="fs1"><span>か</span></td> 256 <td class="fs2"><span>か</span></td> 257 <td class="fs3"><span>か</span></td> 258 <td class="fs4"><span>か</span></td> 259 <td class="fs5"><span>か</span></td> 260 <td class="fs6"><span>か</span></td> 261 <td class="fs7"><span>か</span></td> 262 <td class="fs8"><span>か</span></td> 263 <td class="fs9"><span>か</span></td> 264 </tr> 265 </table> 266 267 </body> 268 </html>