weightmapping-458-ref.html (6590B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Weight 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: Futura, Verdana, sans-serif; 12 } 13 14 h3, h4 { font-weight: normal; } 15 16 /* make all the spans blocks to avoid influence of what's outside them 17 on line-height calculations */ 18 span { display: block; } 19 20 @font-face { 21 font-family: test; 22 src: url(../fonts/mplus/mplus-1p-regular.ttf); 23 font-weight: normal; 24 } 25 26 @font-face { 27 font-family: test; 28 src: url(../fonts/mplus/mplus-1p-medium.ttf); 29 font-weight: 500; 30 } 31 32 @font-face { 33 font-family: test; 34 src: url(../fonts/mplus/mplus-1p-heavy.ttf); 35 font-weight: 800; 36 } 37 38 @font-face { 39 font-family: test400; 40 src: url(../fonts/mplus/mplus-1p-regular.ttf); 41 } 42 43 @font-face { 44 font-family: test500; 45 src: url(../fonts/mplus/mplus-1p-medium.ttf); 46 } 47 48 @font-face { 49 font-family: test800; 50 src: url(../fonts/mplus/mplus-1p-heavy.ttf); 51 } 52 53 table { 54 border-collapse: collapse; 55 font-family: test; 56 font-size: 20px; 57 } 58 59 td { 60 padding: 0; margin: 0; 61 } 62 63 th { 64 font-weight: inherit; 65 } 66 67 .red { color: red; } 68 69 th.cnor { font-weight: inherit; } 70 th.cbo { font-weight: bolder; } 71 th.cbobo, th.cbobo span { font-weight: bolder; } 72 th.cli { font-weight: lighter; } 73 th.clili, th.clili span { font-weight: lighter; } 74 75 thead { font-weight: 400; font-size: 75%; } 76 77 .w1 .clili { font-family: test400; } 78 .w1 .cli { font-family: test400; } 79 .w1 .cnor { font-family: test400; } 80 .w1 .cbo { font-family: test400; } 81 .w1 .cbobo { font-family: test800; } 82 83 .w2 .clili { font-family: test400; } 84 .w2 .cli { font-family: test400; } 85 .w2 .cnor { font-family: test400; } 86 .w2 .cbo { font-family: test400; } 87 .w2 .cbobo { font-family: test800; } 88 89 .w3 .clili { font-family: test400; } 90 .w3 .cli { font-family: test400; } 91 .w3 .cnor { font-family: test400; } 92 .w3 .cbo { font-family: test400; } 93 .w3 .cbobo { font-family: test800; } 94 95 .w4 .clili { font-family: test400; } 96 .w4 .cli { font-family: test400; } 97 .w4 .cnor { font-family: test400; } 98 .w4 .cbo { font-family: test800; } 99 .w4 .cbobo { font-family: test800; } 100 101 .w5 .clili { font-family: test400; } 102 .w5 .cli { font-family: test400; } 103 .w5 .cnor { font-family: test500; } 104 .w5 .cbo { font-family: test800; } 105 .w5 .cbobo { font-family: test800; } 106 107 .w6 .clili { font-family: test400; } 108 .w6 .cli { font-family: test400; } 109 .w6 .cnor { font-family: test800; } 110 .w6 .cbo { font-family: test800; } 111 .w6 .cbobo { font-family: test800; } 112 113 .w7 .clili { font-family: test400; } 114 .w7 .cli { font-family: test400; } 115 .w7 .cnor { font-family: test800; } 116 .w7 .cbo { font-family: test800; } 117 .w7 .cbobo { font-family: test800; } 118 119 .w8 .clili { font-family: test400; } 120 .w8 .cli { font-family: test800; } 121 .w8 .cnor { font-family: test800; } 122 .w8 .cbo { font-family: test800; } 123 .w8 .cbobo { font-family: test800; } 124 125 .w9 .clili { font-family: test400; } 126 .w9 .cli { font-family: test800; } 127 .w9 .cnor { font-family: test800; } 128 .w9 .cbo { font-family: test800; } 129 .w9 .cbobo { font-family: test800; } 130 131 .w1 th { font-weight: 100; } 132 .w2 th { font-weight: 200; } 133 .w3 th { font-weight: 300; } 134 .w4 th { font-weight: 400; } 135 .w5 th { font-weight: 500; } 136 .w6 th { font-weight: 600; } 137 .w7 th { font-weight: 700; } 138 .w8 th { font-weight: 800; } 139 .w9 th { font-weight: 900; } 140 141 </style> 142 </head> 143 <body> 144 145 <h3>Font family with 400, 500, 800 weights</h3> 146 147 <table> 148 <thead> 149 <th></th> 150 <th class="clili"><span>lighter lighter</span></th> 151 <th class="cli"><span>lighter</span></th> 152 <th class="cnor"><span>normal</span></th> 153 <th class="cbo"><span>bolder</span></th> 154 <th class="cbobo"><span>bolder bolder</span></th> 155 </thead> 156 <tr class="w1"> 157 <th>100</th> 158 <td class="clili"><span>東京特許許可局</span></td> 159 <td class="cli"><span>東京特許許可局</span></td> 160 <td class="cnor"><span>東京特許許可局</span></td> 161 <td class="cbo"><span>東京特許許可局</span></td> 162 <td class="cbobo"><span>東京特許許可局</span></td> 163 </tr> 164 <tr class="w2"> 165 <th>200</th> 166 <td class="clili"><span>東京特許許可局</span></td> 167 <td class="cli"><span>東京特許許可局</span></td> 168 <td class="cnor"><span>東京特許許可局</span></td> 169 <td class="cbo"><span>東京特許許可局</span></td> 170 <td class="cbobo"><span>東京特許許可局</span></td> 171 </tr> 172 <tr class="w3"> 173 <th>300</th> 174 <td class="clili"><span>東京特許許可局</span></td> 175 <td class="cli"><span>東京特許許可局</span></td> 176 <td class="cnor"><span>東京特許許可局</span></td> 177 <td class="cbo"><span>東京特許許可局</span></td> 178 <td class="cbobo"><span>東京特許許可局</span></td> 179 </tr> 180 <tr class="w4"> 181 <th class="red">400</th> 182 <td class="clili"><span>東京特許許可局</span></td> 183 <td class="cli"><span>東京特許許可局</span></td> 184 <td class="cnor"><span>東京特許許可局</span></td> 185 <td class="cbo"><span>東京特許許可局</span></td> 186 <td class="cbobo"><span>東京特許許可局</span></td> 187 </tr> 188 <tr class="w5"> 189 <th class="red">500</th> 190 <td class="clili"><span>東京特許許可局</span></td> 191 <td class="cli"><span>東京特許許可局</span></td> 192 <td class="cnor"><span>東京特許許可局</span></td> 193 <td class="cbo"><span>東京特許許可局</span></td> 194 <td class="cbobo"><span>東京特許許可局</span></td> 195 </tr> 196 <tr class="w6"> 197 <th>600</th> 198 <td class="clili"><span>東京特許許可局</span></td> 199 <td class="cli"><span>東京特許許可局</span></td> 200 <td class="cnor"><span>東京特許許可局</span></td> 201 <td class="cbo"><span>東京特許許可局</span></td> 202 <td class="cbobo"><span>東京特許許可局</span></td> 203 </tr> 204 <tr class="w7"> 205 <th>700</th> 206 <td class="clili"><span>東京特許許可局</span></td> 207 <td class="cli"><span>東京特許許可局</span></td> 208 <td class="cnor"><span>東京特許許可局</span></td> 209 <td class="cbo"><span>東京特許許可局</span></td> 210 <td class="cbobo"><span>東京特許許可局</span></td> 211 </tr> 212 <tr class="w8"> 213 <th class="red">800</th> 214 <td class="clili"><span>東京特許許可局</span></td> 215 <td class="cli"><span>東京特許許可局</span></td> 216 <td class="cnor"><span>東京特許許可局</span></td> 217 <td class="cbo"><span>東京特許許可局</span></td> 218 <td class="cbobo"><span>東京特許許可局</span></td> 219 </tr> 220 <tr class="w9"> 221 <th>900</th> 222 <td class="clili"><span>東京特許許可局</span></td> 223 <td class="cli"><span>東京特許許可局</span></td> 224 <td class="cnor"><span>東京特許許可局</span></td> 225 <td class="cbo"><span>東京特許許可局</span></td> 226 <td class="cbobo"><span>東京特許許可局</span></td> 227 </tr> 228 </table> 229 230 <p>tokyotokkyokyokakyoku</p> 231 232 </body> 233 </html>