weightmapping-45.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  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: test400;
  27. src: url(../fonts/mplus/mplus-1p-regular.ttf);
  28. }
  29. @font-face {
  30. font-family: test500;
  31. src: url(../fonts/mplus/mplus-1p-medium.ttf);
  32. }
  33. table {
  34. border-collapse: collapse;
  35. font-family: test;
  36. font-size: 20px;
  37. }
  38. td {
  39. padding: 0; margin: 0;
  40. }
  41. th {
  42. font-weight: inherit;
  43. }
  44. .red { color: red; }
  45. th.cnor { font-weight: inherit; }
  46. th.cbo { font-weight: bolder; }
  47. th.cbobo, th.cbobo span { font-weight: bolder; }
  48. th.cli { font-weight: lighter; }
  49. th.clili, th.clili span { font-weight: lighter; }
  50. td.cnor { font-weight: inherit; }
  51. td.cbo { font-weight: bolder; }
  52. td.cbobo, td.cbobo span { font-weight: bolder; }
  53. td.cli { font-weight: lighter; }
  54. td.clili, td.clili span { font-weight: lighter; }
  55. thead { font-weight: 400; font-size: 75%; }
  56. .w1 { font-weight: 100; }
  57. .w2 { font-weight: 200; }
  58. .w3 { font-weight: 300; }
  59. .w4 { font-weight: 400; }
  60. .w5 { font-weight: 500; }
  61. .w6 { font-weight: 600; }
  62. .w7 { font-weight: 700; }
  63. .w8 { font-weight: 800; }
  64. .w9 { font-weight: 900; }
  65. </style>
  66. </head>
  67. <body>
  68. <h3>Font family with 400, 500 weights</h3>
  69. <table>
  70. <thead>
  71. <th></th>
  72. <th class="clili"><span>lighter lighter</span></th>
  73. <th class="cli"><span>lighter</span></th>
  74. <th class="cnor"><span>normal</span></th>
  75. <th class="cbo"><span>bolder</span></th>
  76. <th class="cbobo"><span>bolder bolder</span></th>
  77. </thead>
  78. <tr class="w1">
  79. <th>100</th>
  80. <td class="clili"><span>東京特許許可局</span></td>
  81. <td class="cli"><span>東京特許許可局</span></td>
  82. <td class="cnor"><span>東京特許許可局</span></td>
  83. <td class="cbo"><span>東京特許許可局</span></td>
  84. <td class="cbobo"><span>東京特許許可局</span></td>
  85. </tr>
  86. <tr class="w2">
  87. <th>200</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="w3">
  95. <th>300</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="w4">
  103. <th class="red">400</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="w5">
  111. <th class="red">500</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="w6">
  119. <th>600</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="w7">
  127. <th>700</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="w8">
  135. <th>800</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="w9">
  143. <th>900</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. </table>
  151. <p>tokyotokkyokyokakyoku</p>
  152. </body>
  153. </html>