font-weight-1.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/fast/css/font-weight-1.html
