stretchmapping-35.html (5768B)
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-light.ttf); 43 font-weight: 200; 44 } 45 46 @font-face { 47 font-family: test; 48 src: url(../fonts/mplus/mplus-1p-medium.ttf); 49 font-weight: 500; 50 } 51 52 @font-face { 53 font-family: test; 54 src: url(../fonts/mplus/mplus-1p-thin.ttf); 55 font-weight: 100; 56 font-stretch: condensed; 57 } 58 59 @font-face { 60 font-family: test; 61 src: url(../fonts/mplus/mplus-1p-black.ttf); 62 font-weight: 900; 63 font-stretch: condensed; 64 } 65 66 @font-face { 67 font-family: test100; 68 src: url(../fonts/mplus/mplus-1p-thin.ttf); 69 font-weight: 100; 70 } 71 72 @font-face { 73 font-family: test200; 74 src: url(../fonts/mplus/mplus-1p-light.ttf); 75 font-weight: 200; 76 } 77 78 @font-face { 79 font-family: test500; 80 src: url(../fonts/mplus/mplus-1p-medium.ttf); 81 font-weight: 500; 82 } 83 84 @font-face { 85 font-family: test900; 86 src: url(../fonts/mplus/mplus-1p-black.ttf); 87 font-weight: 900; 88 } 89 90 .w1 { font-weight: 100; } 91 .w2 { font-weight: 200; } 92 .w3 { font-weight: 300; } 93 .w4 { font-weight: 400; } 94 .w5 { font-weight: 500; } 95 .w6 { font-weight: 600; } 96 .w7 { font-weight: 700; } 97 .w8 { font-weight: 800; } 98 .w9 { font-weight: 900; } 99 100 .fs1 { font-stretch: ultra-condensed; } 101 .fs2 { font-stretch: extra-condensed; } 102 .fs3 { font-stretch: condensed; } 103 .fs4 { font-stretch: semi-condensed; } 104 .fs5 { font-stretch: normal; } 105 .fs6 { font-stretch: semi-expanded; } 106 .fs7 { font-stretch: expanded; } 107 .fs8 { font-stretch: extra-expanded; } 108 .fs9 { font-stretch: ultra-expanded; } 109 110 </style> 111 </head> 112 <body> 113 114 <p>Font family with normal width 200, 500 and condensed 100, 900</p> 115 116 <table> 117 <thead> 118 <th></th> 119 <th>1</th> 120 <th>2</th> 121 <th class="red">3</th> 122 <th>4</th> 123 <th class="red">5</th> 124 <th>6</th> 125 <th>7</th> 126 <th>8</th> 127 <th>9</th> 128 </thead> 129 <tr class="w1"> 130 <th>100</th> 131 <td class="fs1"><span>あ</span></td> 132 <td class="fs2"><span>あ</span></td> 133 <td class="fs3"><span>あ</span></td> 134 <td class="fs4"><span>あ</span></td> 135 <td class="fs5"><span>あ</span></td> 136 <td class="fs6"><span>あ</span></td> 137 <td class="fs7"><span>あ</span></td> 138 <td class="fs8"><span>あ</span></td> 139 <td class="fs9"><span>あ</span></td> 140 </tr> 141 <tr class="w2"> 142 <th>200</th> 143 <td class="fs1"><span>あ</span></td> 144 <td class="fs2"><span>あ</span></td> 145 <td class="fs3"><span>あ</span></td> 146 <td class="fs4"><span>あ</span></td> 147 <td class="fs5"><span>あ</span></td> 148 <td class="fs6"><span>あ</span></td> 149 <td class="fs7"><span>あ</span></td> 150 <td class="fs8"><span>あ</span></td> 151 <td class="fs9"><span>あ</span></td> 152 </tr> 153 <tr class="w3"> 154 <th>300</th> 155 <td class="fs1"><span>あ</span></td> 156 <td class="fs2"><span>あ</span></td> 157 <td class="fs3"><span>あ</span></td> 158 <td class="fs4"><span>あ</span></td> 159 <td class="fs5"><span>あ</span></td> 160 <td class="fs6"><span>あ</span></td> 161 <td class="fs7"><span>あ</span></td> 162 <td class="fs8"><span>あ</span></td> 163 <td class="fs9"><span>あ</span></td> 164 </tr> 165 <tr class="w4"> 166 <th>400</th> 167 <td class="fs1"><span>あ</span></td> 168 <td class="fs2"><span>あ</span></td> 169 <td class="fs3"><span>あ</span></td> 170 <td class="fs4"><span>あ</span></td> 171 <td class="fs5"><span>あ</span></td> 172 <td class="fs6"><span>あ</span></td> 173 <td class="fs7"><span>あ</span></td> 174 <td class="fs8"><span>あ</span></td> 175 <td class="fs9"><span>あ</span></td> 176 </tr> 177 <tr class="w5"> 178 <th>500</th> 179 <td class="fs1"><span>あ</span></td> 180 <td class="fs2"><span>あ</span></td> 181 <td class="fs3"><span>あ</span></td> 182 <td class="fs4"><span>あ</span></td> 183 <td class="fs5"><span>あ</span></td> 184 <td class="fs6"><span>あ</span></td> 185 <td class="fs7"><span>あ</span></td> 186 <td class="fs8"><span>あ</span></td> 187 <td class="fs9"><span>あ</span></td> 188 </tr> 189 <tr class="w6"> 190 <th>600</th> 191 <td class="fs1"><span>あ</span></td> 192 <td class="fs2"><span>あ</span></td> 193 <td class="fs3"><span>あ</span></td> 194 <td class="fs4"><span>あ</span></td> 195 <td class="fs5"><span>あ</span></td> 196 <td class="fs6"><span>あ</span></td> 197 <td class="fs7"><span>あ</span></td> 198 <td class="fs8"><span>あ</span></td> 199 <td class="fs9"><span>あ</span></td> 200 </tr> 201 <tr class="w7"> 202 <th>700</th> 203 <td class="fs1"><span>あ</span></td> 204 <td class="fs2"><span>あ</span></td> 205 <td class="fs3"><span>あ</span></td> 206 <td class="fs4"><span>あ</span></td> 207 <td class="fs5"><span>あ</span></td> 208 <td class="fs6"><span>あ</span></td> 209 <td class="fs7"><span>あ</span></td> 210 <td class="fs8"><span>あ</span></td> 211 <td class="fs9"><span>あ</span></td> 212 </tr> 213 <tr class="w8"> 214 <th>800</th> 215 <td class="fs1"><span>あ</span></td> 216 <td class="fs2"><span>あ</span></td> 217 <td class="fs3"><span>あ</span></td> 218 <td class="fs4"><span>あ</span></td> 219 <td class="fs5"><span>あ</span></td> 220 <td class="fs6"><span>あ</span></td> 221 <td class="fs7"><span>あ</span></td> 222 <td class="fs8"><span>あ</span></td> 223 <td class="fs9"><span>あ</span></td> 224 </tr> 225 <tr class="w9"> 226 <th>900</th> 227 <td class="fs1"><span>あ</span></td> 228 <td class="fs2"><span>あ</span></td> 229 <td class="fs3"><span>あ</span></td> 230 <td class="fs4"><span>あ</span></td> 231 <td class="fs5"><span>あ</span></td> 232 <td class="fs6"><span>あ</span></td> 233 <td class="fs7"><span>あ</span></td> 234 <td class="fs8"><span>あ</span></td> 235 <td class="fs9"><span>あ</span></td> 236 </tr> 237 </table> 238 239 </body> 240 </html>