weightmapping-45-ref.html (6781B)
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: test400; 34 src: url(../fonts/mplus/mplus-1p-regular.ttf); 35 } 36 37 @font-face { 38 font-family: test500; 39 src: url(../fonts/mplus/mplus-1p-medium.ttf); 40 } 41 42 table { 43 border-collapse: collapse; 44 font-family: test; 45 font-size: 20px; 46 } 47 48 td { 49 padding: 0; margin: 0; 50 } 51 52 th { 53 font-weight: inherit; 54 } 55 56 .red { color: red; } 57 58 th.cnor { font-weight: inherit; } 59 th.cbo { font-weight: bolder; } 60 th.cbobo, th.cbobo span { font-weight: bolder; } 61 th.cli { font-weight: lighter; } 62 th.clili, th.clili span { font-weight: lighter; } 63 64 thead { font-weight: 400; font-size: 75%; } 65 66 .w1 .clili { font-family: test400; } 67 .w1 .cli { font-family: test400; } 68 .w1 .cnor { font-family: test400; } 69 .w1 .cbo { font-family: test400; } 70 .w1 .cbobo { font-family: test500; font-weight: bold; } 71 72 .w2 .clili { font-family: test400; } 73 .w2 .cli { font-family: test400; } 74 .w2 .cnor { font-family: test400; } 75 .w2 .cbo { font-family: test400; } 76 .w2 .cbobo { font-family: test500; font-weight: bold; } 77 78 .w3 .clili { font-family: test400; } 79 .w3 .cli { font-family: test400; } 80 .w3 .cnor { font-family: test400; } 81 .w3 .cbo { font-family: test400; } 82 .w3 .cbobo { font-family: test500; font-weight: bold; } 83 84 .w4 .clili { font-family: test400; } 85 .w4 .cli { font-family: test400; } 86 .w4 .cnor { font-family: test400; } 87 .w4 .cbo { font-family: test500; font-weight: bold; } 88 .w4 .cbobo { font-family: test500; font-weight: bold; } 89 90 .w5 .clili { font-family: test400; } 91 .w5 .cli { font-family: test400; } 92 .w5 .cnor { font-family: test500; } 93 .w5 .cbo { font-family: test500; font-weight: bold; } 94 .w5 .cbobo { font-family: test500; font-weight: bold; } 95 96 .w6 .clili { font-family: test400; } 97 .w6 .cli { font-family: test400; } 98 .w6 .cnor { font-family: test500; font-weight: bold; } 99 .w6 .cbo { font-family: test500; font-weight: bold; } 100 .w6 .cbobo { font-family: test500; font-weight: bold; } 101 102 .w7 .clili { font-family: test400; } 103 .w7 .cli { font-family: test400; } 104 .w7 .cnor { font-family: test500; font-weight: bold; } 105 .w7 .cbo { font-family: test500; font-weight: bold; } 106 .w7 .cbobo { font-family: test500; font-weight: bold; } 107 108 .w8 .clili { font-family: test400; } 109 .w8 .cli { font-family: test500; font-weight: bold; } 110 .w8 .cnor { font-family: test500; font-weight: bold; } 111 .w8 .cbo { font-family: test500; font-weight: bold; } 112 .w8 .cbobo { font-family: test500; font-weight: bold; } 113 114 .w9 .clili { font-family: test400; } 115 .w9 .cli { font-family: test500; font-weight: bold; } 116 .w9 .cnor { font-family: test500; font-weight: bold; } 117 .w9 .cbo { font-family: test500; font-weight: bold; } 118 .w9 .cbobo { font-family: test500; font-weight: bold; } 119 120 .w1 th { font-weight: 100; } 121 .w2 th { font-weight: 200; } 122 .w3 th { font-weight: 300; } 123 .w4 th { font-weight: 400; } 124 .w5 th { font-weight: 500; } 125 .w6 th { font-weight: 600; } 126 .w7 th { font-weight: 700; } 127 .w8 th { font-weight: 800; } 128 .w9 th { font-weight: 900; } 129 130 </style> 131 </head> 132 <body> 133 134 <h3>Font family with 400, 500 weights</h3> 135 136 <table> 137 <thead> 138 <th></th> 139 <th class="clili"><span>lighter lighter</span></th> 140 <th class="cli"><span>lighter</span></th> 141 <th class="cnor"><span>normal</span></th> 142 <th class="cbo"><span>bolder</span></th> 143 <th class="cbobo"><span>bolder bolder</span></th> 144 </thead> 145 <tr class="w1"> 146 <th>100</th> 147 <td class="clili"><span>東京特許許可局</span></td> 148 <td class="cli"><span>東京特許許可局</span></td> 149 <td class="cnor"><span>東京特許許可局</span></td> 150 <td class="cbo"><span>東京特許許可局</span></td> 151 <td class="cbobo"><span>東京特許許可局</span></td> 152 </tr> 153 <tr class="w2"> 154 <th>200</th> 155 <td class="clili"><span>東京特許許可局</span></td> 156 <td class="cli"><span>東京特許許可局</span></td> 157 <td class="cnor"><span>東京特許許可局</span></td> 158 <td class="cbo"><span>東京特許許可局</span></td> 159 <td class="cbobo"><span>東京特許許可局</span></td> 160 </tr> 161 <tr class="w3"> 162 <th>300</th> 163 <td class="clili"><span>東京特許許可局</span></td> 164 <td class="cli"><span>東京特許許可局</span></td> 165 <td class="cnor"><span>東京特許許可局</span></td> 166 <td class="cbo"><span>東京特許許可局</span></td> 167 <td class="cbobo"><span>東京特許許可局</span></td> 168 </tr> 169 <tr class="w4"> 170 <th class="red">400</th> 171 <td class="clili"><span>東京特許許可局</span></td> 172 <td class="cli"><span>東京特許許可局</span></td> 173 <td class="cnor"><span>東京特許許可局</span></td> 174 <td class="cbo"><span>東京特許許可局</span></td> 175 <td class="cbobo"><span>東京特許許可局</span></td> 176 </tr> 177 <tr class="w5"> 178 <th class="red">500</th> 179 <td class="clili"><span>東京特許許可局</span></td> 180 <td class="cli"><span>東京特許許可局</span></td> 181 <td class="cnor"><span>東京特許許可局</span></td> 182 <td class="cbo"><span>東京特許許可局</span></td> 183 <td class="cbobo"><span>東京特許許可局</span></td> 184 </tr> 185 <tr class="w6"> 186 <th>600</th> 187 <td class="clili"><span>東京特許許可局</span></td> 188 <td class="cli"><span>東京特許許可局</span></td> 189 <td class="cnor"><span>東京特許許可局</span></td> 190 <td class="cbo"><span>東京特許許可局</span></td> 191 <td class="cbobo"><span>東京特許許可局</span></td> 192 </tr> 193 <tr class="w7"> 194 <th>700</th> 195 <td class="clili"><span>東京特許許可局</span></td> 196 <td class="cli"><span>東京特許許可局</span></td> 197 <td class="cnor"><span>東京特許許可局</span></td> 198 <td class="cbo"><span>東京特許許可局</span></td> 199 <td class="cbobo"><span>東京特許許可局</span></td> 200 </tr> 201 <tr class="w8"> 202 <th>800</th> 203 <td class="clili"><span>東京特許許可局</span></td> 204 <td class="cli"><span>東京特許許可局</span></td> 205 <td class="cnor"><span>東京特許許可局</span></td> 206 <td class="cbo"><span>東京特許許可局</span></td> 207 <td class="cbobo"><span>東京特許許可局</span></td> 208 </tr> 209 <tr class="w9"> 210 <th>900</th> 211 <td class="clili"><span>東京特許許可局</span></td> 212 <td class="cli"><span>東京特許許可局</span></td> 213 <td class="cnor"><span>東京特許許可局</span></td> 214 <td class="cbo"><span>東京特許許可局</span></td> 215 <td class="cbobo"><span>東京特許許可局</span></td> 216 </tr> 217 </table> 218 219 <p>tokyotokkyokyokakyoku</p> 220 221 </body> 222 </html>