font-weight-normal-001

font weight mapping with various families

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
font, should
Assertion
Font weights should map to corresponding font faces in a family with all weights

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3      <head>
 4         <link rel="reference" href="font-weight-normal-001-ref.xht">
 5         <title>CSS Test: font weight mapping with various families</title>
 6         <link rel="author" title="Mozilla" href="http://www.mozilla.com/">
 7         <link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight">
 8         <link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#font-boldness">
 9         <meta name="flags" content="font should">
10         <meta name="assert" content="Font weights should map to corresponding font faces in a family with all weights">
11         <style type="text/css">
12             span#verify { font-family: CSSTest Verify; font-weight: normal; }
13             div { margin-bottom: 1em; }
14             body { margin: 50px; }
15             table {
16                 border-collapse: collapse;
17             }
18             th {
19                 font-weight: normal;
20                 text-align: left;
21                 padding-right: 1em;
22             }
23             span {  }
24             thead th { text-align: center; padding-bottom: 1em; }
25             td { width: 5em; text-align: center; }
26             td.f1 { font-family: CSSTest Weights Full; }
27             td.f2 { font-family: CSSTest Weights W1479; }
28             td.f3 { font-family: CSSTest Weights W15; }
29             td.f4 { font-family: CSSTest Weights W24; }
30             td.f5 { font-family: CSSTest Weights W2569; }
31             td.f6 { font-family: CSSTest Weights W258; }
32             td.f7 { font-family: CSSTest Weights W3589; }
33             td.f8 { font-family: CSSTest Weights W47; }
34             th.f1 { display: table-cell; }
35             th.f2 { display: table-cell; }
36             th.f3 { display: table-cell; }
37             th.f4 { display: table-cell; }
38             th.f5 { display: table-cell; }
39             th.f6 { display: table-cell; }
40             th.f7 { display: table-cell; }
41             th.f8 { display: table-cell; }
42 
43             tr.w1 td { font-weight: 100; }
44             tr.w2 td { font-weight: 200; }
45             tr.w3 td { font-weight: 300; }
46             tr.w4 td { font-weight: 400; }
47             tr.w5 td { font-weight: 500; }
48             tr.w6 td { font-weight: 600; }
49             tr.w7 td { font-weight: 700; }
50             tr.w8 td { font-weight: 800; }
51             tr.w9 td { font-weight: 900; }
52         </style>
53     </head>
54     <body>
55         <div><a href="http://www.w3.org/Style/CSS/Test/Fonts/">Test fonts</a> must be installed for this test: <span id="verify">FAIL</span></div>
56         <table>
57           <thead><th class="f1"></th><th class="f1">Full</th><th class="f2">W1479</th><th class="f3">W15</th><th class="f4">W24</th><th class="f5">W2569</th><th class="f6">W258</th><th class="f7">W3589</th><th class="f8">W47</th></thead>
58           <tr class="w1"><th>100</th><td class="f1"><span>A</span></td><td class="f2"><span>A</span></td><td class="f3"><span>A</span></td><td class="f4"><span>A</span></td><td class="f5"><span>A</span></td><td class="f6"><span>A</span></td><td class="f7"><span>A</span></td><td class="f8"><span>A</span></td></tr>
59           <tr class="w2"><th>200</th><td class="f1"><span>A</span></td><td class="f2"><span>A</span></td><td class="f3"><span>A</span></td><td class="f4"><span>A</span></td><td class="f5"><span>A</span></td><td class="f6"><span>A</span></td><td class="f7"><span>A</span></td><td class="f8"><span>A</span></td></tr>
60           <tr class="w3"><th>300</th><td class="f1"><span>A</span></td><td class="f2"><span>A</span></td><td class="f3"><span>A</span></td><td class="f4"><span>A</span></td><td class="f5"><span>A</span></td><td class="f6"><span>A</span></td><td class="f7"><span>A</span></td><td class="f8"><span>A</span></td></tr>
61           <tr class="w4"><th>400</th><td class="f1"><span>A</span></td><td class="f2"><span>A</span></td><td class="f3"><span>A</span></td><td class="f4"><span>A</span></td><td class="f5"><span>A</span></td><td class="f6"><span>A</span></td><td class="f7"><span>A</span></td><td class="f8"><span>A</span></td></tr>
62           <tr class="w5"><th>500</th><td class="f1"><span>A</span></td><td class="f2"><span>A</span></td><td class="f3"><span>A</span></td><td class="f4"><span>A</span></td><td class="f5"><span>A</span></td><td class="f6"><span>A</span></td><td class="f7"><span>A</span></td><td class="f8"><span>A</span></td></tr>
63           <tr class="w6"><th>600</th><td class="f1"><span>A</span></td><td class="f2"><span>A</span></td><td class="f3"><span>A</span></td><td class="f4"><span>A</span></td><td class="f5"><span>A</span></td><td class="f6"><span>A</span></td><td class="f7"><span>A</span></td><td class="f8"><span>A</span></td></tr>
64           <tr class="w7"><th>700</th><td class="f1"><span>A</span></td><td class="f2"><span>A</span></td><td class="f3"><span>A</span></td><td class="f4"><span>A</span></td><td class="f5"><span>A</span></td><td class="f6"><span>A</span></td><td class="f7"><span>A</span></td><td class="f8"><span>A</span></td></tr>
65           <tr class="w8"><th>800</th><td class="f1"><span>A</span></td><td class="f2"><span>A</span></td><td class="f3"><span>A</span></td><td class="f4"><span>A</span></td><td class="f5"><span>A</span></td><td class="f6"><span>A</span></td><td class="f7"><span>A</span></td><td class="f8"><span>A</span></td></tr>
66           <tr class="w9"><th>900</th><td class="f1"><span>A</span></td><td class="f2"><span>A</span></td><td class="f3"><span>A</span></td><td class="f4"><span>A</span></td><td class="f5"><span>A</span></td><td class="f6"><span>A</span></td><td class="f7"><span>A</span></td><td class="f8"><span>A</span></td></tr>
67         </table>
68         <p>The table above should match the image below.  The numbers and bolding (if present) must match to pass.</p>
69         <img src="support/font-weight-normal-001-ref.png">
70     </body>
71 </html>