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