stretchmapping-137-ref.html (8856B)
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 .w1 .fs1 { font-family: test100; } 129 .w2 .fs1 { font-family: test100; } 130 .w3 .fs1 { font-family: test100; } 131 .w4 .fs1 { font-family: test400; } 132 .w5 .fs1 { font-family: test400; } 133 .w6 .fs1 { font-family: test400; } 134 .w7 .fs1 { font-family: test400; } 135 .w8 .fs1 { font-family: test400; } 136 .w9 .fs1 { font-family: test400; } 137 138 .w1 .fs2 { font-family: test100; } 139 .w2 .fs2 { font-family: test100; } 140 .w3 .fs2 { font-family: test100; } 141 .w4 .fs2 { font-family: test400; } 142 .w5 .fs2 { font-family: test400; } 143 .w6 .fs2 { font-family: test400; } 144 .w7 .fs2 { font-family: test400; } 145 .w8 .fs2 { font-family: test400; } 146 .w9 .fs2 { font-family: test400; } 147 148 .w1 .fs3 { font-family: test200; } 149 .w2 .fs3 { font-family: test200; } 150 .w3 .fs3 { font-family: test200; } 151 .w4 .fs3 { font-family: test200; } 152 .w5 .fs3 { font-family: test200; } 153 .w6 .fs3 { font-family: test800; } 154 .w7 .fs3 { font-family: test800; } 155 .w8 .fs3 { font-family: test800; } 156 .w9 .fs3 { font-family: test800; } 157 158 .w1 .fs4 { font-family: test200; } 159 .w2 .fs4 { font-family: test200; } 160 .w3 .fs4 { font-family: test200; } 161 .w4 .fs4 { font-family: test200; } 162 .w5 .fs4 { font-family: test200; } 163 .w6 .fs4 { font-family: test800; } 164 .w7 .fs4 { font-family: test800; } 165 .w8 .fs4 { font-family: test800; } 166 .w9 .fs4 { font-family: test800; } 167 168 .w1 .fs5 { font-family: test200; } 169 .w2 .fs5 { font-family: test200; } 170 .w3 .fs5 { font-family: test200; } 171 .w4 .fs5 { font-family: test200; } 172 .w5 .fs5 { font-family: test200; } 173 .w6 .fs5 { font-family: test800; } 174 .w7 .fs5 { font-family: test800; } 175 .w8 .fs5 { font-family: test800; } 176 .w9 .fs5 { font-family: test800; } 177 178 .w1 .fs6 { font-family: test500; } 179 .w2 .fs6 { font-family: test500; } 180 .w3 .fs6 { font-family: test500; } 181 .w4 .fs6 { font-family: test500; } 182 .w5 .fs6 { font-family: test500; } 183 .w6 .fs6 { font-family: test900; } 184 .w7 .fs6 { font-family: test900; } 185 .w8 .fs6 { font-family: test900; } 186 .w9 .fs6 { font-family: test900; } 187 188 .w1 .fs7 { font-family: test500; } 189 .w2 .fs7 { font-family: test500; } 190 .w3 .fs7 { font-family: test500; } 191 .w4 .fs7 { font-family: test500; } 192 .w5 .fs7 { font-family: test500; } 193 .w6 .fs7 { font-family: test900; } 194 .w7 .fs7 { font-family: test900; } 195 .w8 .fs7 { font-family: test900; } 196 .w9 .fs7 { font-family: test900; } 197 198 .w1 .fs8 { font-family: test500; } 199 .w2 .fs8 { font-family: test500; } 200 .w3 .fs8 { font-family: test500; } 201 .w4 .fs8 { font-family: test500; } 202 .w5 .fs8 { font-family: test500; } 203 .w6 .fs8 { font-family: test900; } 204 .w7 .fs8 { font-family: test900; } 205 .w8 .fs8 { font-family: test900; } 206 .w9 .fs8 { font-family: test900; } 207 208 .w1 .fs9 { font-family: test500; } 209 .w2 .fs9 { font-family: test500; } 210 .w3 .fs9 { font-family: test500; } 211 .w4 .fs9 { font-family: test500; } 212 .w5 .fs9 { font-family: test500; } 213 .w6 .fs9 { font-family: test900; } 214 .w7 .fs9 { font-family: test900; } 215 .w8 .fs9 { font-family: test900; } 216 .w9 .fs9 { font-family: test900; } 217 218 </style> 219 </head> 220 <body> 221 222 <p>Font family with ultra-condensed 100, 400, condensed 200, 800 and expanded 500, 900</p> 223 224 <table> 225 <thead> 226 <th></th> 227 <th class="red">1</th> 228 <th>2</th> 229 <th class="red">3</th> 230 <th>4</th> 231 <th>5</th> 232 <th>6</th> 233 <th class="red">7</th> 234 <th>8</th> 235 <th>9</th> 236 </thead> 237 <tr class="w1"> 238 <th>100</th> 239 <td class="fs1"><span>か</span></td> 240 <td class="fs2"><span>か</span></td> 241 <td class="fs3"><span>か</span></td> 242 <td class="fs4"><span>か</span></td> 243 <td class="fs5"><span>か</span></td> 244 <td class="fs6"><span>か</span></td> 245 <td class="fs7"><span>か</span></td> 246 <td class="fs8"><span>か</span></td> 247 <td class="fs9"><span>か</span></td> 248 </tr> 249 <tr class="w2"> 250 <th>200</th> 251 <td class="fs1"><span>か</span></td> 252 <td class="fs2"><span>か</span></td> 253 <td class="fs3"><span>か</span></td> 254 <td class="fs4"><span>か</span></td> 255 <td class="fs5"><span>か</span></td> 256 <td class="fs6"><span>か</span></td> 257 <td class="fs7"><span>か</span></td> 258 <td class="fs8"><span>か</span></td> 259 <td class="fs9"><span>か</span></td> 260 </tr> 261 <tr class="w3"> 262 <th>300</th> 263 <td class="fs1"><span>か</span></td> 264 <td class="fs2"><span>か</span></td> 265 <td class="fs3"><span>か</span></td> 266 <td class="fs4"><span>か</span></td> 267 <td class="fs5"><span>か</span></td> 268 <td class="fs6"><span>か</span></td> 269 <td class="fs7"><span>か</span></td> 270 <td class="fs8"><span>か</span></td> 271 <td class="fs9"><span>か</span></td> 272 </tr> 273 <tr class="w4"> 274 <th>400</th> 275 <td class="fs1"><span>か</span></td> 276 <td class="fs2"><span>か</span></td> 277 <td class="fs3"><span>か</span></td> 278 <td class="fs4"><span>か</span></td> 279 <td class="fs5"><span>か</span></td> 280 <td class="fs6"><span>か</span></td> 281 <td class="fs7"><span>か</span></td> 282 <td class="fs8"><span>か</span></td> 283 <td class="fs9"><span>か</span></td> 284 </tr> 285 <tr class="w5"> 286 <th>500</th> 287 <td class="fs1"><span>か</span></td> 288 <td class="fs2"><span>か</span></td> 289 <td class="fs3"><span>か</span></td> 290 <td class="fs4"><span>か</span></td> 291 <td class="fs5"><span>か</span></td> 292 <td class="fs6"><span>か</span></td> 293 <td class="fs7"><span>か</span></td> 294 <td class="fs8"><span>か</span></td> 295 <td class="fs9"><span>か</span></td> 296 </tr> 297 <tr class="w6"> 298 <th>600</th> 299 <td class="fs1"><span>か</span></td> 300 <td class="fs2"><span>か</span></td> 301 <td class="fs3"><span>か</span></td> 302 <td class="fs4"><span>か</span></td> 303 <td class="fs5"><span>か</span></td> 304 <td class="fs6"><span>か</span></td> 305 <td class="fs7"><span>か</span></td> 306 <td class="fs8"><span>か</span></td> 307 <td class="fs9"><span>か</span></td> 308 </tr> 309 <tr class="w7"> 310 <th>700</th> 311 <td class="fs1"><span>か</span></td> 312 <td class="fs2"><span>か</span></td> 313 <td class="fs3"><span>か</span></td> 314 <td class="fs4"><span>か</span></td> 315 <td class="fs5"><span>か</span></td> 316 <td class="fs6"><span>か</span></td> 317 <td class="fs7"><span>か</span></td> 318 <td class="fs8"><span>か</span></td> 319 <td class="fs9"><span>か</span></td> 320 </tr> 321 <tr class="w8"> 322 <th>800</th> 323 <td class="fs1"><span>か</span></td> 324 <td class="fs2"><span>か</span></td> 325 <td class="fs3"><span>か</span></td> 326 <td class="fs4"><span>か</span></td> 327 <td class="fs5"><span>か</span></td> 328 <td class="fs6"><span>か</span></td> 329 <td class="fs7"><span>か</span></td> 330 <td class="fs8"><span>か</span></td> 331 <td class="fs9"><span>か</span></td> 332 </tr> 333 <tr class="w9"> 334 <th>900</th> 335 <td class="fs1"><span>か</span></td> 336 <td class="fs2"><span>か</span></td> 337 <td class="fs3"><span>か</span></td> 338 <td class="fs4"><span>か</span></td> 339 <td class="fs5"><span>か</span></td> 340 <td class="fs6"><span>か</span></td> 341 <td class="fs7"><span>か</span></td> 342 <td class="fs8"><span>か</span></td> 343 <td class="fs9"><span>か</span></td> 344 </tr> 345 </table> 346 347 </body> 348 </html>