weightmapping-12.html (4914B)
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-thin.ttf); 23 font-weight: 100; 24 } 25 26 @font-face { 27 font-family: test; 28 src: url(../fonts/mplus/mplus-1p-light.ttf); 29 font-weight: 200; 30 } 31 32 @font-face { 33 font-family: test100; 34 src: url(../fonts/mplus/mplus-1p-thin.ttf); 35 } 36 37 @font-face { 38 font-family: test200; 39 src: url(../fonts/mplus/mplus-1p-light.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 td.cnor { font-weight: inherit; } 65 td.cbo { font-weight: bolder; } 66 td.cbobo, td.cbobo span { font-weight: bolder; } 67 td.cli { font-weight: lighter; } 68 td.clili, td.clili span { font-weight: lighter; } 69 70 thead { font-weight: 400; font-size: 75%; } 71 72 .w1 { font-weight: 100; } 73 .w2 { font-weight: 200; } 74 .w3 { font-weight: 300; } 75 .w4 { font-weight: 400; } 76 .w5 { font-weight: 500; } 77 .w6 { font-weight: 600; } 78 .w7 { font-weight: 700; } 79 .w8 { font-weight: 800; } 80 .w9 { font-weight: 900; } 81 82 </style> 83 </head> 84 <body> 85 86 <h3>Font family with 100, 200 weights</h3> 87 88 <table> 89 <thead> 90 <th></th> 91 <th class="clili"><span>lighter lighter</span></th> 92 <th class="cli"><span>lighter</span></th> 93 <th class="cnor"><span>normal</span></th> 94 <th class="cbo"><span>bolder</span></th> 95 <th class="cbobo"><span>bolder bolder</span></th> 96 </thead> 97 <tr class="w1"> 98 <th class="red">100</th> 99 <td class="clili"><span>東京特許許可局</span></td> 100 <td class="cli"><span>東京特許許可局</span></td> 101 <td class="cnor"><span>東京特許許可局</span></td> 102 <td class="cbo"><span>東京特許許可局</span></td> 103 <td class="cbobo"><span>東京特許許可局</span></td> 104 </tr> 105 <tr class="w2"> 106 <th class="red">200</th> 107 <td class="clili"><span>東京特許許可局</span></td> 108 <td class="cli"><span>東京特許許可局</span></td> 109 <td class="cnor"><span>東京特許許可局</span></td> 110 <td class="cbo"><span>東京特許許可局</span></td> 111 <td class="cbobo"><span>東京特許許可局</span></td> 112 </tr> 113 <tr class="w3"> 114 <th>300</th> 115 <td class="clili"><span>東京特許許可局</span></td> 116 <td class="cli"><span>東京特許許可局</span></td> 117 <td class="cnor"><span>東京特許許可局</span></td> 118 <td class="cbo"><span>東京特許許可局</span></td> 119 <td class="cbobo"><span>東京特許許可局</span></td> 120 </tr> 121 <tr class="w4"> 122 <th>400</th> 123 <td class="clili"><span>東京特許許可局</span></td> 124 <td class="cli"><span>東京特許許可局</span></td> 125 <td class="cnor"><span>東京特許許可局</span></td> 126 <td class="cbo"><span>東京特許許可局</span></td> 127 <td class="cbobo"><span>東京特許許可局</span></td> 128 </tr> 129 <tr class="w5"> 130 <th>500</th> 131 <td class="clili"><span>東京特許許可局</span></td> 132 <td class="cli"><span>東京特許許可局</span></td> 133 <td class="cnor"><span>東京特許許可局</span></td> 134 <td class="cbo"><span>東京特許許可局</span></td> 135 <td class="cbobo"><span>東京特許許可局</span></td> 136 </tr> 137 <tr class="w6"> 138 <th>600</th> 139 <td class="clili"><span>東京特許許可局</span></td> 140 <td class="cli"><span>東京特許許可局</span></td> 141 <td class="cnor"><span>東京特許許可局</span></td> 142 <td class="cbo"><span>東京特許許可局</span></td> 143 <td class="cbobo"><span>東京特許許可局</span></td> 144 </tr> 145 <tr class="w7"> 146 <th>700</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="w8"> 154 <th>800</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="w9"> 162 <th>900</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 </table> 170 171 <p>tokyotokkyokyokakyoku</p> 172 173 </body> 174 </html>