| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| @font-face { |
| font-family: 'WebKit WeightWatcher'; |
| font-weight: 100; |
| src: url('../../resources/WebKitWeightWatcher100.ttf'); |
| } |
| @font-face { |
| font-family: 'WebKit WeightWatcher'; |
| font-weight: 200; |
| src: url('../../resources/WebKitWeightWatcher200.ttf'); |
| } |
| @font-face { |
| font-family: 'WebKit WeightWatcher'; |
| font-weight: 300; |
| src: url('../../resources/WebKitWeightWatcher300.ttf'); |
| } |
| @font-face { |
| font-family: 'WebKit WeightWatcher'; |
| font-weight: 400; |
| src: url('../../resources/WebKitWeightWatcher400.ttf'); |
| } |
| @font-face { |
| font-family: 'WebKit WeightWatcher'; |
| font-weight: 500; |
| src: url('../../resources/WebKitWeightWatcher500.ttf'); |
| } |
| @font-face { |
| font-family: 'WebKit WeightWatcher'; |
| font-weight: 600; |
| src: url('../../resources/WebKitWeightWatcher600.ttf'); |
| } |
| @font-face { |
| font-family: 'WebKit WeightWatcher'; |
| font-weight: 700; |
| src: url('../../resources/WebKitWeightWatcher700.ttf'); |
| } |
| @font-face { |
| font-family: 'WebKit WeightWatcher'; |
| font-weight: 800; |
| src: url('../../resources/WebKitWeightWatcher800.ttf'); |
| } |
| @font-face { |
| font-family: 'WebKit WeightWatcher'; |
| font-weight: 900; |
| src: url('../../resources/WebKitWeightWatcher900.ttf'); |
| } |
| div { font-family: 'WebKit WeightWatcher'; font-size: 48px; } |
| .w1 { font-weight: 100; font-weight: 1001; font-weight: 0; font-weight: 500px; font-weigth: 500.4px; } |
| .w2 { font-weight: 200; } |
| .w3 { font-weight: 300; } |
| .w4 { font-weight: 400; } |
| .w5 { font-weight: 500; } |
| .w6 { font-weight: 600; } |
| .w7 { font-weight: 700; } |
| .w8 { font-weight: 800; } |
| .w9 { font-weight: 900; } |
| </style> |
| </head> |
| <body> |
| <p> |
| You should see the numbers 1 to 9 below. |
| </p> |
| <div class="w1"> |
| A |
| </div> |
| <div class="w2"> |
| A |
| </div> |
| <div class="w3"> |
| A |
| </div> |
| <div class="w4"> |
| A |
| </div> |
| <div class="w5"> |
| A |
| </div> |
| <div class="w6"> |
| A |
| </div> |
| <div class="w7"> |
| A |
| </div> |
| <div class="w8"> |
| A |
| </div> |
| <div class="w9"> |
| A |
| </div> |
| |
| <script> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| document.fonts.ready.then(function () { testRunner.notifyDone(); }); |
| } |
| </script> |
| </body> |
| </html> |
