blob: 4b9bf2aa2239c89d5d4ce7c1c86ba993aae0c348 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
<!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: 500.4; 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>
|
