weightmapping-458.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  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. <style type="text/css">
  7. body {
  8. margin: 50px;
  9. font-family: Futura, Verdana, sans-serif;
  10. }
  11. h3, h4 { font-weight: normal; }
  12. /* make all the spans blocks to avoid influence of what's outside them
  13. on line-height calculations */
  14. span { display: block; }
  15. @font-face {
  16. font-family: test;
  17. src: url(../fonts/mplus/mplus-1p-regular.ttf);
  18. font-weight: normal;
  19. }
  20. @font-face {
  21. font-family: test;
  22. src: url(../fonts/mplus/mplus-1p-medium.ttf);
  23. font-weight: 500;
  24. }
  25. @font-face {
  26. font-family: test;
  27. src: url(../fonts/mplus/mplus-1p-heavy.ttf);
  28. font-weight: 800;
  29. }
  30. @font-face {
  31. font-family: test400;
  32. src: url(../fonts/mplus/mplus-1p-regular.ttf);
  33. }
  34. @font-face {
  35. font-family: test500;
  36. src: url(../fonts/mplus/mplus-1p-medium.ttf);
  37. }
  38. @font-face {
  39. font-family: test800;
  40. src: url(../fonts/mplus/mplus-1p-heavy.ttf);
  41. }
  42. table {
  43. border-collapse: collapse;
  44. font-family: test;
  45. font-size: 20px;
  46. }
  47. td {
  48. padding: 0; margin: 0;
  49. }
  50. th {
  51. font-weight: inherit;
  52. }
  53. .red { color: red; }
  54. th.cnor { font-weight: inherit; }
  55. th.cbo { font-weight: bolder; }
  56. th.cbobo, th.cbobo span { font-weight: bolder; }
  57. th.cli { font-weight: lighter; }
  58. th.clili, th.clili span { font-weight: lighter; }
  59. td.cnor { font-weight: inherit; }
  60. td.cbo { font-weight: bolder; }
  61. td.cbobo, td.cbobo span { font-weight: bolder; }
  62. td.cli { font-weight: lighter; }
  63. td.clili, td.clili span { font-weight: lighter; }
  64. thead { font-weight: 400; font-size: 75%; }
  65. .w1 { font-weight: 100; }
  66. .w2 { font-weight: 200; }
  67. .w3 { font-weight: 300; }
  68. .w4 { font-weight: 400; }
  69. .w5 { font-weight: 500; }
  70. .w6 { font-weight: 600; }
  71. .w7 { font-weight: 700; }
  72. .w8 { font-weight: 800; }
  73. .w9 { font-weight: 900; }
  74. </style>
  75. </head>
  76. <body>
  77. <h3>Font family with 400, 500, 800 weights</h3>
  78. <table>
  79. <thead>
  80. <th></th>
  81. <th class="clili"><span>lighter lighter</span></th>
  82. <th class="cli"><span>lighter</span></th>
  83. <th class="cnor"><span>normal</span></th>
  84. <th class="cbo"><span>bolder</span></th>
  85. <th class="cbobo"><span>bolder bolder</span></th>
  86. </thead>
  87. <tr class="w1">
  88. <th>100</th>
  89. <td class="clili"><span>東京特許許可局</span></td>
  90. <td class="cli"><span>東京特許許可局</span></td>
  91. <td class="cnor"><span>東京特許許可局</span></td>
  92. <td class="cbo"><span>東京特許許可局</span></td>
  93. <td class="cbobo"><span>東京特許許可局</span></td>
  94. </tr>
  95. <tr class="w2">
  96. <th>200</th>
  97. <td class="clili"><span>東京特許許可局</span></td>
  98. <td class="cli"><span>東京特許許可局</span></td>
  99. <td class="cnor"><span>東京特許許可局</span></td>
  100. <td class="cbo"><span>東京特許許可局</span></td>
  101. <td class="cbobo"><span>東京特許許可局</span></td>
  102. </tr>
  103. <tr class="w3">
  104. <th>300</th>
  105. <td class="clili"><span>東京特許許可局</span></td>
  106. <td class="cli"><span>東京特許許可局</span></td>
  107. <td class="cnor"><span>東京特許許可局</span></td>
  108. <td class="cbo"><span>東京特許許可局</span></td>
  109. <td class="cbobo"><span>東京特許許可局</span></td>
  110. </tr>
  111. <tr class="w4">
  112. <th class="red">400</th>
  113. <td class="clili"><span>東京特許許可局</span></td>
  114. <td class="cli"><span>東京特許許可局</span></td>
  115. <td class="cnor"><span>東京特許許可局</span></td>
  116. <td class="cbo"><span>東京特許許可局</span></td>
  117. <td class="cbobo"><span>東京特許許可局</span></td>
  118. </tr>
  119. <tr class="w5">
  120. <th class="red">500</th>
  121. <td class="clili"><span>東京特許許可局</span></td>
  122. <td class="cli"><span>東京特許許可局</span></td>
  123. <td class="cnor"><span>東京特許許可局</span></td>
  124. <td class="cbo"><span>東京特許許可局</span></td>
  125. <td class="cbobo"><span>東京特許許可局</span></td>
  126. </tr>
  127. <tr class="w6">
  128. <th>600</th>
  129. <td class="clili"><span>東京特許許可局</span></td>
  130. <td class="cli"><span>東京特許許可局</span></td>
  131. <td class="cnor"><span>東京特許許可局</span></td>
  132. <td class="cbo"><span>東京特許許可局</span></td>
  133. <td class="cbobo"><span>東京特許許可局</span></td>
  134. </tr>
  135. <tr class="w7">
  136. <th>700</th>
  137. <td class="clili"><span>東京特許許可局</span></td>
  138. <td class="cli"><span>東京特許許可局</span></td>
  139. <td class="cnor"><span>東京特許許可局</span></td>
  140. <td class="cbo"><span>東京特許許可局</span></td>
  141. <td class="cbobo"><span>東京特許許可局</span></td>
  142. </tr>
  143. <tr class="w8">
  144. <th class="red">800</th>
  145. <td class="clili"><span>東京特許許可局</span></td>
  146. <td class="cli"><span>東京特許許可局</span></td>
  147. <td class="cnor"><span>東京特許許可局</span></td>
  148. <td class="cbo"><span>東京特許許可局</span></td>
  149. <td class="cbobo"><span>東京特許許可局</span></td>
  150. </tr>
  151. <tr class="w9">
  152. <th>900</th>
  153. <td class="clili"><span>東京特許許可局</span></td>
  154. <td class="cli"><span>東京特許許可局</span></td>
  155. <td class="cnor"><span>東京特許許可局</span></td>
  156. <td class="cbo"><span>東京特許許可局</span></td>
  157. <td class="cbobo"><span>東京特許許可局</span></td>
  158. </tr>
  159. </table>
  160. <p>tokyotokkyokyokakyoku</p>
  161. </body>
  162. </html>