layout/reftests/font-matching/stretchmapping-35.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <title>font-stretch 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: Verdana, sans-serif;
  12 }
  13
  14 h3, h4 { font-weight: normal; }
  15
  16 table {
  17   border-collapse: collapse;
  18   font-size: 28px;
  19 }
  20
  21 td {
  22   padding: 0; margin: 0;
  23   font-family: test;
  24 }
  25
  26 th {
  27   font-weight: inherit;
  28 }
  29
  30 p { width: 300px; }
  31
  32 .red { color: red; }
  33
  34 thead { font-weight: 400; font-size: 75%; }
  35
  36 /* make all the spans blocks to avoid influence of what's outside them
  37    on line-height calculations */
  38 span { display: block; }
  39
  40 @font-face {
  41   font-family: test;
  42   src: url(../fonts/mplus/mplus-1p-light.ttf);
  43   font-weight: 200;
  44 }
  45
  46 @font-face {
  47   font-family: test;
  48   src: url(../fonts/mplus/mplus-1p-medium.ttf);
  49   font-weight: 500;
  50 }
  51
  52 @font-face {
  53   font-family: test;
  54   src: url(../fonts/mplus/mplus-1p-thin.ttf);
  55   font-weight: 100;
  56   font-stretch: condensed;
  57 }
  58
  59 @font-face {
  60   font-family: test;
  61   src: url(../fonts/mplus/mplus-1p-black.ttf);
  62   font-weight: 900;
  63   font-stretch: condensed;
  64 }
  65
  66 @font-face {
  67   font-family: test100;
  68   src: url(../fonts/mplus/mplus-1p-thin.ttf);
  69   font-weight: 100;
  70 }
  71
  72 @font-face {
  73   font-family: test200;
  74   src: url(../fonts/mplus/mplus-1p-light.ttf);
  75   font-weight: 200;
  76 }
  77
  78 @font-face {
  79   font-family: test500;
  80   src: url(../fonts/mplus/mplus-1p-medium.ttf);
  81   font-weight: 500;
  82 }
  83
  84 @font-face {
  85   font-family: test900;
  86   src: url(../fonts/mplus/mplus-1p-black.ttf);
  87   font-weight: 900;
  88 }
  89
  90 .w1 { font-weight: 100; }
  91 .w2 { font-weight: 200; }
  92 .w3 { font-weight: 300; }
  93 .w4 { font-weight: 400; }
  94 .w5 { font-weight: 500; }
  95 .w6 { font-weight: 600; }
  96 .w7 { font-weight: 700; }
  97 .w8 { font-weight: 800; }
  98 .w9 { font-weight: 900; }
  99
 100 .fs1 { font-stretch: ultra-condensed; }
 101 .fs2 { font-stretch: extra-condensed; }
 102 .fs3 { font-stretch: condensed; }
 103 .fs4 { font-stretch: semi-condensed; }
 104 .fs5 { font-stretch: normal; }
 105 .fs6 { font-stretch: semi-expanded; }
 106 .fs7 { font-stretch: expanded; }
 107 .fs8 { font-stretch: extra-expanded; }
 108 .fs9 { font-stretch: ultra-expanded; }
 109
 110 </style>
 111 </head>
 112 <body>
 113
 114 <p>Font family with normal width 200, 500 and condensed 100, 900</p>
 115
 116 <table>
 117 <thead>
 118 <th></th>
 119 <th>1</th>
 120 <th>2</th>
 121 <th class="red">3</th>
 122 <th>4</th>
 123 <th class="red">5</th>
 124 <th>6</th>
 125 <th>7</th>
 126 <th>8</th>
 127 <th>9</th>
 128 </thead>
 129 <tr class="w1">
 130 <th>100</th>
 131 <td class="fs1"><span>あ</span></td>
 132 <td class="fs2"><span>あ</span></td>
 133 <td class="fs3"><span>あ</span></td>
 134 <td class="fs4"><span>あ</span></td>
 135 <td class="fs5"><span>あ</span></td>
 136 <td class="fs6"><span>あ</span></td>
 137 <td class="fs7"><span>あ</span></td>
 138 <td class="fs8"><span>あ</span></td>
 139 <td class="fs9"><span>あ</span></td>
 140 </tr>
 141 <tr class="w2">
 142 <th>200</th>
 143 <td class="fs1"><span>あ</span></td>
 144 <td class="fs2"><span>あ</span></td>
 145 <td class="fs3"><span>あ</span></td>
 146 <td class="fs4"><span>あ</span></td>
 147 <td class="fs5"><span>あ</span></td>
 148 <td class="fs6"><span>あ</span></td>
 149 <td class="fs7"><span>あ</span></td>
 150 <td class="fs8"><span>あ</span></td>
 151 <td class="fs9"><span>あ</span></td>
 152 </tr>
 153 <tr class="w3">
 154 <th>300</th>
 155 <td class="fs1"><span>あ</span></td>
 156 <td class="fs2"><span>あ</span></td>
 157 <td class="fs3"><span>あ</span></td>
 158 <td class="fs4"><span>あ</span></td>
 159 <td class="fs5"><span>あ</span></td>
 160 <td class="fs6"><span>あ</span></td>
 161 <td class="fs7"><span>あ</span></td>
 162 <td class="fs8"><span>あ</span></td>
 163 <td class="fs9"><span>あ</span></td>
 164 </tr>
 165 <tr class="w4">
 166 <th>400</th>
 167 <td class="fs1"><span>あ</span></td>
 168 <td class="fs2"><span>あ</span></td>
 169 <td class="fs3"><span>あ</span></td>
 170 <td class="fs4"><span>あ</span></td>
 171 <td class="fs5"><span>あ</span></td>
 172 <td class="fs6"><span>あ</span></td>
 173 <td class="fs7"><span>あ</span></td>
 174 <td class="fs8"><span>あ</span></td>
 175 <td class="fs9"><span>あ</span></td>
 176 </tr>
 177 <tr class="w5">
 178 <th>500</th>
 179 <td class="fs1"><span>あ</span></td>
 180 <td class="fs2"><span>あ</span></td>
 181 <td class="fs3"><span>あ</span></td>
 182 <td class="fs4"><span>あ</span></td>
 183 <td class="fs5"><span>あ</span></td>
 184 <td class="fs6"><span>あ</span></td>
 185 <td class="fs7"><span>あ</span></td>
 186 <td class="fs8"><span>あ</span></td>
 187 <td class="fs9"><span>あ</span></td>
 188 </tr>
 189 <tr class="w6">
 190 <th>600</th>
 191 <td class="fs1"><span>あ</span></td>
 192 <td class="fs2"><span>あ</span></td>
 193 <td class="fs3"><span>あ</span></td>
 194 <td class="fs4"><span>あ</span></td>
 195 <td class="fs5"><span>あ</span></td>
 196 <td class="fs6"><span>あ</span></td>
 197 <td class="fs7"><span>あ</span></td>
 198 <td class="fs8"><span>あ</span></td>
 199 <td class="fs9"><span>あ</span></td>
 200 </tr>
 201 <tr class="w7">
 202 <th>700</th>
 203 <td class="fs1"><span>あ</span></td>
 204 <td class="fs2"><span>あ</span></td>
 205 <td class="fs3"><span>あ</span></td>
 206 <td class="fs4"><span>あ</span></td>
 207 <td class="fs5"><span>あ</span></td>
 208 <td class="fs6"><span>あ</span></td>
 209 <td class="fs7"><span>あ</span></td>
 210 <td class="fs8"><span>あ</span></td>
 211 <td class="fs9"><span>あ</span></td>
 212 </tr>
 213 <tr class="w8">
 214 <th>800</th>
 215 <td class="fs1"><span>あ</span></td>
 216 <td class="fs2"><span>あ</span></td>
 217 <td class="fs3"><span>あ</span></td>
 218 <td class="fs4"><span>あ</span></td>
 219 <td class="fs5"><span>あ</span></td>
 220 <td class="fs6"><span>あ</span></td>
 221 <td class="fs7"><span>あ</span></td>
 222 <td class="fs8"><span>あ</span></td>
 223 <td class="fs9"><span>あ</span></td>
 224 </tr>
 225 <tr class="w9">
 226 <th>900</th>
 227 <td class="fs1"><span>あ</span></td>
 228 <td class="fs2"><span>あ</span></td>
 229 <td class="fs3"><span>あ</span></td>
 230 <td class="fs4"><span>あ</span></td>
 231 <td class="fs5"><span>あ</span></td>
 232 <td class="fs6"><span>あ</span></td>
 233 <td class="fs7"><span>あ</span></td>
 234 <td class="fs8"><span>あ</span></td>
 235 <td class="fs9"><span>あ</span></td>
 236 </tr>
 237 </table>
 238
 239 </body>
 240 </html>