weightmapping-458.html (5133B)
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 td.cnor { font-weight: inherit; } 76 td.cbo { font-weight: bolder; } 77 td.cbobo, td.cbobo span { font-weight: bolder; } 78 td.cli { font-weight: lighter; } 79 td.clili, td.clili span { font-weight: lighter; } 80 81 thead { font-weight: 400; font-size: 75%; } 82 83 .w1 { font-weight: 100; } 84 .w2 { font-weight: 200; } 85 .w3 { font-weight: 300; } 86 .w4 { font-weight: 400; } 87 .w5 { font-weight: 500; } 88 .w6 { font-weight: 600; } 89 .w7 { font-weight: 700; } 90 .w8 { font-weight: 800; } 91 .w9 { font-weight: 900; } 92 93 </style> 94 </head> 95 <body> 96 97 <h3>Font family with 400, 500, 800 weights</h3> 98 99 <table> 100 <thead> 101 <th></th> 102 <th class="clili"><span>lighter lighter</span></th> 103 <th class="cli"><span>lighter</span></th> 104 <th class="cnor"><span>normal</span></th> 105 <th class="cbo"><span>bolder</span></th> 106 <th class="cbobo"><span>bolder bolder</span></th> 107 </thead> 108 <tr class="w1"> 109 <th>100</th> 110 <td class="clili"><span>東京特許許可局</span></td> 111 <td class="cli"><span>東京特許許可局</span></td> 112 <td class="cnor"><span>東京特許許可局</span></td> 113 <td class="cbo"><span>東京特許許可局</span></td> 114 <td class="cbobo"><span>東京特許許可局</span></td> 115 </tr> 116 <tr class="w2"> 117 <th>200</th> 118 <td class="clili"><span>東京特許許可局</span></td> 119 <td class="cli"><span>東京特許許可局</span></td> 120 <td class="cnor"><span>東京特許許可局</span></td> 121 <td class="cbo"><span>東京特許許可局</span></td> 122 <td class="cbobo"><span>東京特許許可局</span></td> 123 </tr> 124 <tr class="w3"> 125 <th>300</th> 126 <td class="clili"><span>東京特許許可局</span></td> 127 <td class="cli"><span>東京特許許可局</span></td> 128 <td class="cnor"><span>東京特許許可局</span></td> 129 <td class="cbo"><span>東京特許許可局</span></td> 130 <td class="cbobo"><span>東京特許許可局</span></td> 131 </tr> 132 <tr class="w4"> 133 <th class="red">400</th> 134 <td class="clili"><span>東京特許許可局</span></td> 135 <td class="cli"><span>東京特許許可局</span></td> 136 <td class="cnor"><span>東京特許許可局</span></td> 137 <td class="cbo"><span>東京特許許可局</span></td> 138 <td class="cbobo"><span>東京特許許可局</span></td> 139 </tr> 140 <tr class="w5"> 141 <th class="red">500</th> 142 <td class="clili"><span>東京特許許可局</span></td> 143 <td class="cli"><span>東京特許許可局</span></td> 144 <td class="cnor"><span>東京特許許可局</span></td> 145 <td class="cbo"><span>東京特許許可局</span></td> 146 <td class="cbobo"><span>東京特許許可局</span></td> 147 </tr> 148 <tr class="w6"> 149 <th>600</th> 150 <td class="clili"><span>東京特許許可局</span></td> 151 <td class="cli"><span>東京特許許可局</span></td> 152 <td class="cnor"><span>東京特許許可局</span></td> 153 <td class="cbo"><span>東京特許許可局</span></td> 154 <td class="cbobo"><span>東京特許許可局</span></td> 155 </tr> 156 <tr class="w7"> 157 <th>700</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="w8"> 165 <th class="red">800</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="w9"> 173 <th>900</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 </table> 181 182 <p>tokyotokkyokyokakyoku</p> 183 184 </body> 185 </html>