layout/reftests/font-matching/weightmapping-458.html

   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>