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

changeset 2
7e26c7da4463
equal deleted inserted replaced
-1:000000000000 0:a786eae781a7
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: test400;
34 src: url(../fonts/mplus/mplus-1p-regular.ttf);
35 }
36
37 @font-face {
38 font-family: test500;
39 src: url(../fonts/mplus/mplus-1p-medium.ttf);
40 }
41
42 table {
43 border-collapse: collapse;
44 font-family: test;
45 font-size: 20px;
46 }
47
48 td {
49 padding: 0; margin: 0;
50 }
51
52 th {
53 font-weight: inherit;
54 }
55
56 .red { color: red; }
57
58 th.cnor { font-weight: inherit; }
59 th.cbo { font-weight: bolder; }
60 th.cbobo, th.cbobo span { font-weight: bolder; }
61 th.cli { font-weight: lighter; }
62 th.clili, th.clili span { font-weight: lighter; }
63
64 td.cnor { font-weight: inherit; }
65 td.cbo { font-weight: bolder; }
66 td.cbobo, td.cbobo span { font-weight: bolder; }
67 td.cli { font-weight: lighter; }
68 td.clili, td.clili span { font-weight: lighter; }
69
70 thead { font-weight: 400; font-size: 75%; }
71
72 .w1 { font-weight: 100; }
73 .w2 { font-weight: 200; }
74 .w3 { font-weight: 300; }
75 .w4 { font-weight: 400; }
76 .w5 { font-weight: 500; }
77 .w6 { font-weight: 600; }
78 .w7 { font-weight: 700; }
79 .w8 { font-weight: 800; }
80 .w9 { font-weight: 900; }
81
82 </style>
83 </head>
84 <body>
85
86 <h3>Font family with 400, 500 weights</h3>
87
88 <table>
89 <thead>
90 <th></th>
91 <th class="clili"><span>lighter lighter</span></th>
92 <th class="cli"><span>lighter</span></th>
93 <th class="cnor"><span>normal</span></th>
94 <th class="cbo"><span>bolder</span></th>
95 <th class="cbobo"><span>bolder bolder</span></th>
96 </thead>
97 <tr class="w1">
98 <th>100</th>
99 <td class="clili"><span>東京特許許可局</span></td>
100 <td class="cli"><span>東京特許許可局</span></td>
101 <td class="cnor"><span>東京特許許可局</span></td>
102 <td class="cbo"><span>東京特許許可局</span></td>
103 <td class="cbobo"><span>東京特許許可局</span></td>
104 </tr>
105 <tr class="w2">
106 <th>200</th>
107 <td class="clili"><span>東京特許許可局</span></td>
108 <td class="cli"><span>東京特許許可局</span></td>
109 <td class="cnor"><span>東京特許許可局</span></td>
110 <td class="cbo"><span>東京特許許可局</span></td>
111 <td class="cbobo"><span>東京特許許可局</span></td>
112 </tr>
113 <tr class="w3">
114 <th>300</th>
115 <td class="clili"><span>東京特許許可局</span></td>
116 <td class="cli"><span>東京特許許可局</span></td>
117 <td class="cnor"><span>東京特許許可局</span></td>
118 <td class="cbo"><span>東京特許許可局</span></td>
119 <td class="cbobo"><span>東京特許許可局</span></td>
120 </tr>
121 <tr class="w4">
122 <th class="red">400</th>
123 <td class="clili"><span>東京特許許可局</span></td>
124 <td class="cli"><span>東京特許許可局</span></td>
125 <td class="cnor"><span>東京特許許可局</span></td>
126 <td class="cbo"><span>東京特許許可局</span></td>
127 <td class="cbobo"><span>東京特許許可局</span></td>
128 </tr>
129 <tr class="w5">
130 <th class="red">500</th>
131 <td class="clili"><span>東京特許許可局</span></td>
132 <td class="cli"><span>東京特許許可局</span></td>
133 <td class="cnor"><span>東京特許許可局</span></td>
134 <td class="cbo"><span>東京特許許可局</span></td>
135 <td class="cbobo"><span>東京特許許可局</span></td>
136 </tr>
137 <tr class="w6">
138 <th>600</th>
139 <td class="clili"><span>東京特許許可局</span></td>
140 <td class="cli"><span>東京特許許可局</span></td>
141 <td class="cnor"><span>東京特許許可局</span></td>
142 <td class="cbo"><span>東京特許許可局</span></td>
143 <td class="cbobo"><span>東京特許許可局</span></td>
144 </tr>
145 <tr class="w7">
146 <th>700</th>
147 <td class="clili"><span>東京特許許可局</span></td>
148 <td class="cli"><span>東京特許許可局</span></td>
149 <td class="cnor"><span>東京特許許可局</span></td>
150 <td class="cbo"><span>東京特許許可局</span></td>
151 <td class="cbobo"><span>東京特許許可局</span></td>
152 </tr>
153 <tr class="w8">
154 <th>800</th>
155 <td class="clili"><span>東京特許許可局</span></td>
156 <td class="cli"><span>東京特許許可局</span></td>
157 <td class="cnor"><span>東京特許許可局</span></td>
158 <td class="cbo"><span>東京特許許可局</span></td>
159 <td class="cbobo"><span>東京特許許可局</span></td>
160 </tr>
161 <tr class="w9">
162 <th>900</th>
163 <td class="clili"><span>東京特許許可局</span></td>
164 <td class="cli"><span>東京特許許可局</span></td>
165 <td class="cnor"><span>東京特許許可局</span></td>
166 <td class="cbo"><span>東京特許許可局</span></td>
167 <td class="cbobo"><span>東京特許許可局</span></td>
168 </tr>
169 </table>
170
171 <p>tokyotokkyokyokakyoku</p>
172
173 </body>
174 </html>

mercurial