weightmapping-7.html (4705B)
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 td.cnor { font-weight: inherit; } 54 td.cbo { font-weight: bolder; } 55 td.cbobo, td.cbobo span { font-weight: bolder; } 56 td.cli { font-weight: lighter; } 57 td.clili, td.clili span { font-weight: lighter; } 58 59 thead { font-weight: 400; font-size: 75%; } 60 61 .w1 { font-weight: 100; } 62 .w2 { font-weight: 200; } 63 .w3 { font-weight: 300; } 64 .w4 { font-weight: 400; } 65 .w5 { font-weight: 500; } 66 .w6 { font-weight: 600; } 67 .w7 { font-weight: 700; } 68 .w8 { font-weight: 800; } 69 .w9 { font-weight: 900; } 70 71 </style> 72 </head> 73 <body> 74 75 <h3>Font family with 700 weight</h3> 76 77 <table> 78 <thead> 79 <th></th> 80 <th class="clili"><span>lighter lighter</span></th> 81 <th class="cli"><span>lighter</span></th> 82 <th class="cnor"><span>normal</span></th> 83 <th class="cbo"><span>bolder</span></th> 84 <th class="cbobo"><span>bolder bolder</span></th> 85 </thead> 86 <tr class="w1"> 87 <th>100</th> 88 <td class="clili"><span>東京特許許可局</span></td> 89 <td class="cli"><span>東京特許許可局</span></td> 90 <td class="cnor"><span>東京特許許可局</span></td> 91 <td class="cbo"><span>東京特許許可局</span></td> 92 <td class="cbobo"><span>東京特許許可局</span></td> 93 </tr> 94 <tr class="w2"> 95 <th>200</th> 96 <td class="clili"><span>東京特許許可局</span></td> 97 <td class="cli"><span>東京特許許可局</span></td> 98 <td class="cnor"><span>東京特許許可局</span></td> 99 <td class="cbo"><span>東京特許許可局</span></td> 100 <td class="cbobo"><span>東京特許許可局</span></td> 101 </tr> 102 <tr class="w3"> 103 <th>300</th> 104 <td class="clili"><span>東京特許許可局</span></td> 105 <td class="cli"><span>東京特許許可局</span></td> 106 <td class="cnor"><span>東京特許許可局</span></td> 107 <td class="cbo"><span>東京特許許可局</span></td> 108 <td class="cbobo"><span>東京特許許可局</span></td> 109 </tr> 110 <tr class="w4"> 111 <th>400</th> 112 <td class="clili"><span>東京特許許可局</span></td> 113 <td class="cli"><span>東京特許許可局</span></td> 114 <td class="cnor"><span>東京特許許可局</span></td> 115 <td class="cbo"><span>東京特許許可局</span></td> 116 <td class="cbobo"><span>東京特許許可局</span></td> 117 </tr> 118 <tr class="w5"> 119 <th>500</th> 120 <td class="clili"><span>東京特許許可局</span></td> 121 <td class="cli"><span>東京特許許可局</span></td> 122 <td class="cnor"><span>東京特許許可局</span></td> 123 <td class="cbo"><span>東京特許許可局</span></td> 124 <td class="cbobo"><span>東京特許許可局</span></td> 125 </tr> 126 <tr class="w6"> 127 <th>600</th> 128 <td class="clili"><span>東京特許許可局</span></td> 129 <td class="cli"><span>東京特許許可局</span></td> 130 <td class="cnor"><span>東京特許許可局</span></td> 131 <td class="cbo"><span>東京特許許可局</span></td> 132 <td class="cbobo"><span>東京特許許可局</span></td> 133 </tr> 134 <tr class="w7"> 135 <th class="red">700</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="w8"> 143 <th>800</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="w9"> 151 <th>900</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 </table> 159 160 <p>tokyotokkyokyokakyoku</p> 161 162 </body> 163 </html>