synthetic-variations.html (7095B)
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: test1; 12 src: url(../fonts/mplus/mplus-1p-regular.ttf); 13 font-weight: normal; 14 } 15 16 @font-face { 17 font-family: test2; 18 src: url(../fonts/mplus/mplus-1p-regular.ttf); 19 font-weight: normal; 20 } 21 22 @font-face { 23 font-family: test3; 24 src: url(../fonts/mplus/mplus-1p-thin.ttf); 25 font-weight: 100; 26 } 27 28 @font-face { 29 font-family: test3; 30 src: url(../fonts/mplus/mplus-1p-regular.ttf); 31 font-weight: 300; 32 } 33 34 body { 35 margin: 50px; 36 font-family: sans-serif; 37 font-size: 18pt; 38 } 39 40 table { 41 border-collapse: collapse; 42 } 43 44 .w1 { font-weight: 100; } 45 .w2 { font-weight: 200; } 46 .w3 { font-weight: 300; } 47 .w4 { font-weight: 400; } 48 .w5 { font-weight: 500; } 49 .w6 { font-weight: 600; } 50 .w7 { font-weight: 700; } 51 .w8 { font-weight: 800; } 52 .w9 { font-weight: 900; } 53 54 #test1 { font-family: test1, Times New Roman, Times, Bitstream Vera, serif; } 55 #test2 { font-family: test2, Times New Roman, Times, Bitstream Vera, serif; } 56 #test3 { font-family: test3, Times New Roman, Times, Bitstream Vera, serif; } 57 58 th, td { 59 font-weight: inherit; 60 padding-left: 1em; 61 padding-right: 1em; 62 text-align: left; 63 } 64 65 em { font-style: italic; } 66 67 #test1 .w1 td, #test1 .w1 td span { font-weight: bolder; } 68 #test1 .w2 td, #test1 .w2 td span { font-weight: bolder; } 69 #test1 .w3 td, #test1 .w3 td span { font-weight: bolder; } 70 #test1 .w4 td { font-weight: bolder; } 71 #test1 .w5 td { font-weight: bolder; } 72 #test1 .w6 th { font-weight: lighter; } 73 #test1 .w7 th { font-weight: lighter; } 74 #test1 .w8 th, #test1 .w8 th span { font-weight: lighter; } 75 #test1 .w9 th, #test1 .w9 th span { font-weight: lighter; } 76 77 #test2 .w1 td, #test2 .w1 td span { font-weight: bolder; } 78 #test2 .w2 td, #test2 .w2 td span { font-weight: bolder; } 79 #test2 .w3 td, #test2 .w3 td span { font-weight: bolder; } 80 #test2 .w4 td { font-weight: bolder; } 81 #test2 .w5 td { font-weight: bolder; } 82 #test2 .w6 th { font-weight: lighter; } 83 #test2 .w7 th { font-weight: lighter; } 84 #test2 .w8 th, #test2 .w8 th span { font-weight: lighter; } 85 #test2 .w9 th, #test2 .w9 th span { font-weight: lighter; } 86 87 #test3 .w1 th, #test3 .w1 td, #test3 .w1 td span { font-weight: bolder; } 88 #test3 .w2 th, #test3 .w2 td, #test3 .w2 td span { font-weight: bolder; } 89 #test3 .w3 th, #test3 .w3 td, #test3 .w3 td span { font-weight: bolder; } 90 #test3 .w4 td { font-weight: bolder; } 91 #test3 .w5 td { font-weight: bolder; } 92 #test3 .w6 th { font-weight: lighter; } 93 #test3 .w7 th { font-weight: lighter; } 94 #test3 .w8 td, #test3 .w8 th, #test3 .w8 th span { font-weight: lighter; } 95 #test3 .w9 td, #test3 .w9 th, #test3 .w9 th span { font-weight: lighter; } 96 97 </style> 98 99 100 </head><body> 101 102 <p>All lines should appear in a sans-serif face with proper bolding</p> 103 104 <table id="test1"> 105 <tr class="w1"><th><span>normal</span></th><th><em><span>italic</span></em></th><td><span>bold</span></td><td><em><span>bolditalic</span></em></td></tr> 106 <tr class="w2"><th><span>normal</span></th><th><em><span>italic</span></em></th><td><span>bold</span></td><td><em><span>bolditalic</span></em></td></tr> 107 <tr class="w3"><th><span>normal</span></th><th><em><span>italic</span></em></th><td><span>bold</span></td><td><em><span>bolditalic</span></em></td></tr> 108 <tr class="w4"><th><span>normal</span></th><th><em><span>italic</span></em></th><td><span>bold</span></td><td><em><span>bolditalic</span></em></td></tr> 109 <tr class="w5"><th><span>normal</span></th><th><em><span>italic</span></em></th><td><span>bold</span></td><td><em><span>bolditalic</span></em></td></tr> 110 <tr class="w6"><th><span>normal</span></th><th><em><span>italic</span></em></th><td><span>bold</span></td><td><em><span>bolditalic</span></em></td></tr> 111 <tr class="w7"><th><span>normal</span></th><th><em><span>italic</span></em></th><td><span>bold</span></td><td><em><span>bolditalic</span></em></td></tr> 112 <tr class="w8"><th><span>normal</span></th><th><em><span>italic</span></em></th><td><span>bold</span></td><td><em><span>bolditalic</span></em></td></tr> 113 <tr class="w9"><th><span>normal</span></th><th><em><span>italic</span></em></th><td><span>bold</span></td><td><em><span>bolditalic</span></em></td></tr> 114 </table> 115 116 <table id="test2"> 117 <tr class="w9"><th><span>normal</span></th><th><em><span>italic</span></em></th><td><span>bold</span></td><td><em><span>bolditalic</span></em></td></tr> 118 <tr class="w8"><th><span>normal</span></th><th><em><span>italic</span></em></th><td><span>bold</span></td><td><em><span>bolditalic</span></em></td></tr> 119 <tr class="w7"><th><span>normal</span></th><th><em><span>italic</span></em></th><td><span>bold</span></td><td><em><span>bolditalic</span></em></td></tr> 120 <tr class="w6"><th><span>normal</span></th><th><em><span>italic</span></em></th><td><span>bold</span></td><td><em><span>bolditalic</span></em></td></tr> 121 <tr class="w5"><th><span>normal</span></th><th><em><span>italic</span></em></th><td><span>bold</span></td><td><em><span>bolditalic</span></em></td></tr> 122 <tr class="w4"><th><span>normal</span></th><th><em><span>italic</span></em></th><td><span>bold</span></td><td><em><span>bolditalic</span></em></td></tr> 123 <tr class="w3"><th><span>normal</span></th><th><em><span>italic</span></em></th><td><span>bold</span></td><td><em><span>bolditalic</span></em></td></tr> 124 <tr class="w2"><th><span>normal</span></th><th><em><span>italic</span></em></th><td><span>bold</span></td><td><em><span>bolditalic</span></em></td></tr> 125 <tr class="w1"><th><span>normal</span></th><th><em><span>italic</span></em></th><td><span>bold</span></td><td><em><span>bolditalic</span></em></td></tr> 126 </table> 127 128 <table id="test3"> 129 <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> 130 <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> 131 <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> 132 <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> 133 <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> 134 <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> 135 <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> 136 <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> 137 <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> 138 </table> 139 140 </body></html>