synthetic-weight-style.html (7152B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>@font-face and synthetic rendering</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 7 <style type="text/css"> 8 9 @import url(../fonts/mplus/mplusfonts.css); 10 11 body { 12 margin: 50px; 13 font-family: mplus1p, Futura, sans-serif; 14 font-size: 18pt; 15 } 16 17 table { 18 border-collapse: collapse; 19 margin-left: 1em; 20 } 21 22 td + td { 23 padding-left: 1em; 24 } 25 26 @font-face { font-family: mplus-w1; font-weight: 100; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 27 @font-face { font-family: mplus-w1; font-style: italic; font-weight: 100; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 28 @font-face { font-family: mplus-w1; font-style: oblique; font-weight: 100; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 29 .mplus-w1 { font-family: mplus-w1; } 30 31 @font-face { font-family: mplus-w2; font-weight: 200; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 32 @font-face { font-family: mplus-w2; font-style: italic; font-weight: 200; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 33 @font-face { font-family: mplus-w2; font-style: oblique; font-weight: 200; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 34 .mplus-w2 { font-family: mplus-w2; } 35 36 @font-face { font-family: mplus-w3; font-weight: 300; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 37 @font-face { font-family: mplus-w3; font-style: italic; font-weight: 300; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 38 @font-face { font-family: mplus-w3; font-style: oblique; font-weight: 300; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 39 .mplus-w3 { font-family: mplus-w3; } 40 41 @font-face { font-family: mplus-w4; font-weight: 400; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 42 @font-face { font-family: mplus-w4; font-style: italic; font-weight: 400; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 43 @font-face { font-family: mplus-w4; font-style: oblique; font-weight: 400; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 44 .mplus-w4 { font-family: mplus-w4; } 45 46 @font-face { font-family: mplus-w5; font-weight: 500; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 47 @font-face { font-family: mplus-w5; font-style: italic; font-weight: 500; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 48 @font-face { font-family: mplus-w5; font-style: oblique; font-weight: 500; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 49 .mplus-w5 { font-family: mplus-w5; } 50 51 @font-face { font-family: mplus-w6; font-weight: 600; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 52 @font-face { font-family: mplus-w6; font-style: italic; font-weight: 600; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 53 @font-face { font-family: mplus-w6; font-style: oblique; font-weight: 600; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 54 .mplus-w6 { font-family: mplus-w6; } 55 56 @font-face { font-family: mplus-w7; font-weight: 700; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 57 @font-face { font-family: mplus-w7; font-style: italic; font-weight: 700; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 58 @font-face { font-family: mplus-w7; font-style: oblique; font-weight: 700; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 59 .mplus-w7 { font-family: mplus-w7; } 60 61 @font-face { font-family: mplus-w8; font-weight: 800; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 62 @font-face { font-family: mplus-w8; font-style: italic; font-weight: 800; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 63 @font-face { font-family: mplus-w8; font-style: oblique; font-weight: 800; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 64 .mplus-w8 { font-family: mplus-w8; } 65 66 @font-face { font-family: mplus-w9; font-weight: 900; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 67 @font-face { font-family: mplus-w9; font-style: italic; font-weight: 900; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 68 @font-face { font-family: mplus-w9; font-style: oblique; font-weight: 900; src: url(../fonts/mplus/mplus-1p-regular.ttf); } 69 .mplus-w9 { font-family: mplus-w9; } 70 71 </style> 72 73 74 </head> 75 76 <body> 77 78 <h4>Text below should appear in normal face with no synthetic bolding/italics</h4> 79 80 <table> 81 <tr class="mplus-w1"> 82 <td style="font-family: mplus1p;">100</td> 83 <td>Regular</td> 84 <td style="font-style: italic;">Italic</td> 85 <td style="font-style: oblique;">Oblique</td> 86 <td style="font-weight: 100;">Regular</td> 87 <td style="font-style: italic;font-weight: 100;">Italic</td> 88 <td style="font-style: oblique;font-weight: 100;">Oblique</td> 89 </tr> 90 <tr class="mplus-w2"> 91 <td style="font-family: mplus1p;">200</td> 92 <td>Regular</td> 93 <td style="font-style: italic;">Italic</td> 94 <td style="font-style: oblique;">Oblique</td> 95 <td style="font-weight: 200;">Regular</td> 96 <td style="font-style: italic;font-weight: 200;">Italic</td> 97 <td style="font-style: oblique;font-weight: 200;">Oblique</td> 98 </tr> 99 <tr class="mplus-w3"> 100 <td style="font-family: mplus1p;">300</td> 101 <td>Regular</td> 102 <td style="font-style: italic;">Italic</td> 103 <td style="font-style: oblique;">Oblique</td> 104 <td style="font-weight: 300;">Regular</td> 105 <td style="font-style: italic;font-weight: 300;">Italic</td> 106 <td style="font-style: oblique;font-weight: 300;">Oblique</td> 107 </tr> 108 <tr class="mplus-w4"> 109 <td style="font-family: mplus1p;">400</td> 110 <td>Regular</td> 111 <td style="font-style: italic;">Italic</td> 112 <td style="font-style: oblique;">Oblique</td> 113 <td style="font-weight: 400;">Regular</td> 114 <td style="font-style: italic;font-weight: 400;">Italic</td> 115 <td style="font-style: oblique;font-weight: 400;">Oblique</td> 116 </tr> 117 <tr class="mplus-w5"> 118 <td style="font-family: mplus1p;">500</td> 119 <td>Regular</td> 120 <td style="font-style: italic;">Italic</td> 121 <td style="font-style: oblique;">Oblique</td> 122 <td style="font-weight: 500;">Regular</td> 123 <td style="font-style: italic;font-weight: 500;">Italic</td> 124 <td style="font-style: oblique;font-weight: 500;">Oblique</td> 125 </tr> 126 <tr class="mplus-w6"> 127 <td style="font-family: mplus1p;">600</td> 128 <td>Regular</td> 129 <td style="font-style: italic;">Italic</td> 130 <td style="font-style: oblique;">Oblique</td> 131 <td style="font-weight: 600;">Regular</td> 132 <td style="font-style: italic;font-weight: 600;">Italic</td> 133 <td style="font-style: oblique;font-weight: 600;">Oblique</td> 134 </tr> 135 <tr class="mplus-w7"> 136 <td style="font-family: mplus1p;">700</td> 137 <td>Regular</td> 138 <td style="font-style: italic;">Italic</td> 139 <td style="font-style: oblique;">Oblique</td> 140 <td style="font-weight: 700;">Regular</td> 141 <td style="font-style: italic;font-weight: 700;">Italic</td> 142 <td style="font-style: oblique;font-weight: 700;">Oblique</td> 143 </tr> 144 <tr class="mplus-w8"> 145 <td style="font-family: mplus1p;">800</td> 146 <td>Regular</td> 147 <td style="font-style: italic;">Italic</td> 148 <td style="font-style: oblique;">Oblique</td> 149 <td style="font-weight: 800;">Regular</td> 150 <td style="font-style: italic;font-weight: 800;">Italic</td> 151 <td style="font-style: oblique;font-weight: 800;">Oblique</td> 152 </tr> 153 <tr class="mplus-w9"> 154 <td style="font-family: mplus1p;">900</td> 155 <td>Regular</td> 156 <td style="font-style: italic;">Italic</td> 157 <td style="font-style: oblique;">Oblique</td> 158 <td style="font-weight: 900;">Regular</td> 159 <td style="font-style: italic;font-weight: 900;">Italic</td> 160 <td style="font-style: oblique;font-weight: 900;">Oblique</td> 161 </tr> 162 </table> 163 164 </body> 165 </html>