synthetic-variations-ref.html (4047B)
1 <!DOCTYPE HTML> 2 <html><head> 3 4 5 <title>@font-face and synthetic rendering</title> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 8 <style type="text/css"> 9 10 @font-face { 11 font-family: test; 12 src: url(../fonts/mplus/mplus-1p-regular.ttf); 13 font-weight: normal; 14 } 15 16 body { 17 margin: 50px; 18 font-family: sans-serif; 19 font-size: 18pt; 20 } 21 22 table { 23 border-collapse: collapse; 24 } 25 26 #test1, #test2, #test3 { font-family: test, Times New Roman, Times, Bitstream Vera, serif; } 27 28 th, td { 29 padding-left: 1em; 30 padding-right: 1em; 31 text-align: left; 32 } 33 34 th { font-weight: normal; } 35 td { font-weight: bold; } 36 em { font-style: italic; } 37 38 </style> 39 40 41 </head><body> 42 43 <p>All lines should appear in a sans-serif face with proper bolding</p> 44 45 <table id="test1"> 46 <tr class="w1"><th>normal</th><th><em>italic</em></th><td>bold</td><td><em>bolditalic</em></td></tr> 47 <tr class="w2"><th>normal</th><th><em>italic</em></th><td>bold</td><td><em>bolditalic</em></td></tr> 48 <tr class="w3"><th>normal</th><th><em>italic</em></th><td>bold</td><td><em>bolditalic</em></td></tr> 49 <tr class="w4"><th>normal</th><th><em>italic</em></th><td>bold</td><td><em>bolditalic</em></td></tr> 50 <tr class="w5"><th>normal</th><th><em>italic</em></th><td>bold</td><td><em>bolditalic</em></td></tr> 51 <tr class="w6"><th>normal</th><th><em>italic</em></th><td>bold</td><td><em>bolditalic</em></td></tr> 52 <tr class="w7"><th>normal</th><th><em>italic</em></th><td>bold</td><td><em>bolditalic</em></td></tr> 53 <tr class="w8"><th>normal</th><th><em>italic</em></th><td>bold</td><td><em>bolditalic</em></td></tr> 54 <tr class="w9"><th>normal</th><th><em>italic</em></th><td>bold</td><td><em>bolditalic</em></td></tr> 55 </table> 56 57 <table id="test2"> 58 <tr class="w9"><th>normal</th><th><em>italic</em></th><td>bold</td><td><em>bolditalic</em></td></tr> 59 <tr class="w8"><th>normal</th><th><em>italic</em></th><td>bold</td><td><em>bolditalic</em></td></tr> 60 <tr class="w7"><th>normal</th><th><em>italic</em></th><td>bold</td><td><em>bolditalic</em></td></tr> 61 <tr class="w6"><th>normal</th><th><em>italic</em></th><td>bold</td><td><em>bolditalic</em></td></tr> 62 <tr class="w5"><th>normal</th><th><em>italic</em></th><td>bold</td><td><em>bolditalic</em></td></tr> 63 <tr class="w4"><th>normal</th><th><em>italic</em></th><td>bold</td><td><em>bolditalic</em></td></tr> 64 <tr class="w3"><th>normal</th><th><em>italic</em></th><td>bold</td><td><em>bolditalic</em></td></tr> 65 <tr class="w2"><th>normal</th><th><em>italic</em></th><td>bold</td><td><em>bolditalic</em></td></tr> 66 <tr class="w1"><th>normal</th><th><em>italic</em></th><td>bold</td><td><em>bolditalic</em></td></tr> 67 </table> 68 69 <table id="test3"> 70 <tr class="w1"><th><span>normal</span></th><th><span><em>italic</em></span></th><td><span>bold</span></td><td><span><em>bolditalic</em></span></td></tr> 71 <tr class="w2"><th><span>normal</span></th><th><span><em>italic</em></span></th><td><span>bold</span></td><td><span><em>bolditalic</em></span></td></tr> 72 <tr class="w3"><th><span>normal</span></th><th><span><em>italic</em></span></th><td><span>bold</span></td><td><span><em>bolditalic</em></span></td></tr> 73 <tr class="w4"><th><span>normal</span></th><th><span><em>italic</em></span></th><td><span>bold</span></td><td><span><em>bolditalic</em></span></td></tr> 74 <tr class="w5"><th><span>normal</span></th><th><span><em>italic</em></span></th><td><span>bold</span></td><td><span><em>bolditalic</em></span></td></tr> 75 <tr class="w6"><th><span>normal</span></th><th><span><em>italic</em></span></th><td><span>bold</span></td><td><span><em>bolditalic</em></span></td></tr> 76 <tr class="w7"><th><span>normal</span></th><th><span><em>italic</em></span></th><td><span>bold</span></td><td><span><em>bolditalic</em></span></td></tr> 77 <tr class="w8"><th><span>normal</span></th><th><span><em>italic</em></span></th><td><span>bold</span></td><td><span><em>bolditalic</em></span></td></tr> 78 <tr class="w9"><th><span>normal</span></th><th><span><em>italic</em></span></th><td><span>bold</span></td><td><span><em>bolditalic</em></span></td></tr> 79 </table> 80 81 </body></html>