weightmapping-7.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  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-bold.ttf);
  18. font-weight: 700;
  19. }
  20. @font-face {
  21. font-family: test700;
  22. src: url(../fonts/mplus/mplus-1p-bold.ttf);
  23. }
  24. table {
  25. border-collapse: collapse;
  26. font-family: test;
  27. font-size: 20px;
  28. }
  29. td {
  30. padding: 0; margin: 0;
  31. }
  32. th {
  33. font-weight: inherit;
  34. }
  35. .red { color: red; }
  36. th.cnor { font-weight: inherit; }
  37. th.cbo { font-weight: bolder; }
  38. th.cbobo, th.cbobo span { font-weight: bolder; }
  39. th.cli { font-weight: lighter; }
  40. th.clili, th.clili span { font-weight: lighter; }
  41. td.cnor { font-weight: inherit; }
  42. td.cbo { font-weight: bolder; }
  43. td.cbobo, td.cbobo span { font-weight: bolder; }
  44. td.cli { font-weight: lighter; }
  45. td.clili, td.clili span { font-weight: lighter; }
  46. thead { font-weight: 400; font-size: 75%; }
  47. .w1 { font-weight: 100; }
  48. .w2 { font-weight: 200; }
  49. .w3 { font-weight: 300; }
  50. .w4 { font-weight: 400; }
  51. .w5 { font-weight: 500; }
  52. .w6 { font-weight: 600; }
  53. .w7 { font-weight: 700; }
  54. .w8 { font-weight: 800; }
  55. .w9 { font-weight: 900; }
  56. </style>
  57. </head>
  58. <body>
  59. <h3>Font family with 700 weight</h3>
  60. <table>
  61. <thead>
  62. <th></th>
  63. <th class="clili"><span>lighter lighter</span></th>
  64. <th class="cli"><span>lighter</span></th>
  65. <th class="cnor"><span>normal</span></th>
  66. <th class="cbo"><span>bolder</span></th>
  67. <th class="cbobo"><span>bolder bolder</span></th>
  68. </thead>
  69. <tr class="w1">
  70. <th>100</th>
  71. <td class="clili"><span>東京特許許可局</span></td>
  72. <td class="cli"><span>東京特許許可局</span></td>
  73. <td class="cnor"><span>東京特許許可局</span></td>
  74. <td class="cbo"><span>東京特許許可局</span></td>
  75. <td class="cbobo"><span>東京特許許可局</span></td>
  76. </tr>
  77. <tr class="w2">
  78. <th>200</th>
  79. <td class="clili"><span>東京特許許可局</span></td>
  80. <td class="cli"><span>東京特許許可局</span></td>
  81. <td class="cnor"><span>東京特許許可局</span></td>
  82. <td class="cbo"><span>東京特許許可局</span></td>
  83. <td class="cbobo"><span>東京特許許可局</span></td>
  84. </tr>
  85. <tr class="w3">
  86. <th>300</th>
  87. <td class="clili"><span>東京特許許可局</span></td>
  88. <td class="cli"><span>東京特許許可局</span></td>
  89. <td class="cnor"><span>東京特許許可局</span></td>
  90. <td class="cbo"><span>東京特許許可局</span></td>
  91. <td class="cbobo"><span>東京特許許可局</span></td>
  92. </tr>
  93. <tr class="w4">
  94. <th>400</th>
  95. <td class="clili"><span>東京特許許可局</span></td>
  96. <td class="cli"><span>東京特許許可局</span></td>
  97. <td class="cnor"><span>東京特許許可局</span></td>
  98. <td class="cbo"><span>東京特許許可局</span></td>
  99. <td class="cbobo"><span>東京特許許可局</span></td>
  100. </tr>
  101. <tr class="w5">
  102. <th>500</th>
  103. <td class="clili"><span>東京特許許可局</span></td>
  104. <td class="cli"><span>東京特許許可局</span></td>
  105. <td class="cnor"><span>東京特許許可局</span></td>
  106. <td class="cbo"><span>東京特許許可局</span></td>
  107. <td class="cbobo"><span>東京特許許可局</span></td>
  108. </tr>
  109. <tr class="w6">
  110. <th>600</th>
  111. <td class="clili"><span>東京特許許可局</span></td>
  112. <td class="cli"><span>東京特許許可局</span></td>
  113. <td class="cnor"><span>東京特許許可局</span></td>
  114. <td class="cbo"><span>東京特許許可局</span></td>
  115. <td class="cbobo"><span>東京特許許可局</span></td>
  116. </tr>
  117. <tr class="w7">
  118. <th class="red">700</th>
  119. <td class="clili"><span>東京特許許可局</span></td>
  120. <td class="cli"><span>東京特許許可局</span></td>
  121. <td class="cnor"><span>東京特許許可局</span></td>
  122. <td class="cbo"><span>東京特許許可局</span></td>
  123. <td class="cbobo"><span>東京特許許可局</span></td>
  124. </tr>
  125. <tr class="w8">
  126. <th>800</th>
  127. <td class="clili"><span>東京特許許可局</span></td>
  128. <td class="cli"><span>東京特許許可局</span></td>
  129. <td class="cnor"><span>東京特許許可局</span></td>
  130. <td class="cbo"><span>東京特許許可局</span></td>
  131. <td class="cbobo"><span>東京特許許可局</span></td>
  132. </tr>
  133. <tr class="w9">
  134. <th>900</th>
  135. <td class="clili"><span>東京特許許可局</span></td>
  136. <td class="cli"><span>東京特許許可局</span></td>
  137. <td class="cnor"><span>東京特許許可局</span></td>
  138. <td class="cbo"><span>東京特許許可局</span></td>
  139. <td class="cbobo"><span>東京特許許可局</span></td>
  140. </tr>
  141. </table>
  142. <p>tokyotokkyokyokakyoku</p>
  143. </body>
  144. </html>