webfontloader 1.0.5
Sign up to get free protection for your applications and to get access to all the features.
- data/Gemfile +9 -0
- data/LICENSE +201 -0
- data/README.md +148 -0
- data/Rakefile +243 -0
- data/bin/webfontloader-demos +28 -0
- data/docs/EVENTS.md +115 -0
- data/docs/MODULES.md +49 -0
- data/docs/TRANSITIONS.md +107 -0
- data/lib/webfontloader.rb +10 -0
- data/lib/webfontloader/demo/public/ascender.html +99 -0
- data/lib/webfontloader/demo/public/basic.css +9 -0
- data/lib/webfontloader/demo/public/custom.html +88 -0
- data/lib/webfontloader/demo/public/event-css-active-multiple.html +44 -0
- data/lib/webfontloader/demo/public/event-css-active.html +38 -0
- data/lib/webfontloader/demo/public/event-css-inactive.html +38 -0
- data/lib/webfontloader/demo/public/event-css-loading.html +55 -0
- data/lib/webfontloader/demo/public/event-js-active.html +39 -0
- data/lib/webfontloader/demo/public/event-js-font-active.html +40 -0
- data/lib/webfontloader/demo/public/event-js-loading.html +60 -0
- data/lib/webfontloader/demo/public/events-variations.html +130 -0
- data/lib/webfontloader/demo/public/events.html +103 -0
- data/lib/webfontloader/demo/public/google-css.html +27 -0
- data/lib/webfontloader/demo/public/google.html +33 -0
- data/lib/webfontloader/demo/public/ie-fast-js.html +47 -0
- data/lib/webfontloader/demo/public/ie-slow-js.html +48 -0
- data/lib/webfontloader/demo/public/ie-slow-link.html +38 -0
- data/lib/webfontloader/demo/public/index.html +70 -0
- data/lib/webfontloader/demo/public/typekit-variations.html +50 -0
- data/lib/webfontloader/demo/public/typekit.html +41 -0
- data/lib/webfontloader/demo/server.rb +92 -0
- data/lib/webfontloader/modules.rb +44 -0
- data/src-test/ascender/ascender_script_test.js +48 -0
- data/src-test/core/cssclassnametest.js +42 -0
- data/src-test/core/cssfontfamilynametest.js +54 -0
- data/src-test/core/domhelpertest.js +81 -0
- data/src-test/core/eventdispatchertest.js +99 -0
- data/src-test/core/fontmoduleloadertest.js +30 -0
- data/src-test/core/fonttest.js +92 -0
- data/src-test/core/fontvariationdescriptiontest.js +76 -0
- data/src-test/core/fontwatchertest.js +510 -0
- data/src-test/core/useragenttest.js +395 -0
- data/src-test/custom/customcsstest.js +30 -0
- data/src-test/google/fontapiparsertest.js +92 -0
- data/src-test/google/fontapiurlbuildertest.js +28 -0
- data/src-test/google/googlefontapitest.js +173 -0
- data/src-test/typekit/typekit_script_test.js +171 -0
- data/src/ascender/ascender_script.js +84 -0
- data/src/async_load.js +3 -0
- data/src/closure.js +3 -0
- data/src/core/cssclassname.js +21 -0
- data/src/core/cssfontfamilyname.js +20 -0
- data/src/core/domhelper.js +103 -0
- data/src/core/eventdispatcher.js +78 -0
- data/src/core/font.js +84 -0
- data/src/core/fontmoduleloader.js +25 -0
- data/src/core/fontvariationdescription.js +112 -0
- data/src/core/fontwatcher.js +121 -0
- data/src/core/initialize.js +26 -0
- data/src/core/namespace.js +11 -0
- data/src/core/useragent.js +41 -0
- data/src/core/useragentparser.js +234 -0
- data/src/custom/customcss.js +37 -0
- data/src/google/fontapiparser.js +94 -0
- data/src/google/fontapiurlbuilder.js +39 -0
- data/src/google/googlefontapi.js +49 -0
- data/src/modules.yml +27 -0
- data/src/typekit/typekit_script.js +58 -0
- data/tools/compiler/compiler.jar +0 -0
- data/tools/jstestdriver/JsTestDriver-1.2.1.jar +0 -0
- data/webfontloader.gemspec +144 -0
- metadata +191 -0
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<link href="/basic.css" rel="stylesheet" type="text/css">
|
|
5
|
+
<script type="text/javascript" src="/webfont.js"></script>
|
|
6
|
+
<script type="text/javascript">
|
|
7
|
+
WebFont.load({
|
|
8
|
+
google: {
|
|
9
|
+
families: ['Droid Sans', 'Tangerine']
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
</script>
|
|
13
|
+
<style type="text/css">
|
|
14
|
+
h1 {
|
|
15
|
+
visibility: hidden;
|
|
16
|
+
}
|
|
17
|
+
html.wf-droidsans-n4-active h1.droid {
|
|
18
|
+
visibility: visible;
|
|
19
|
+
font-family: 'Droid Sans';
|
|
20
|
+
}
|
|
21
|
+
html.wf-tangerine-n4-active h1.tangerine {
|
|
22
|
+
visibility: visible;
|
|
23
|
+
font-family: 'Tangerine';
|
|
24
|
+
}
|
|
25
|
+
</style>
|
|
26
|
+
</head>
|
|
27
|
+
<body>
|
|
28
|
+
<h1 class="droid">
|
|
29
|
+
Hello World. I am Droid Sans.
|
|
30
|
+
</h1>
|
|
31
|
+
<h1 class="tangerine">
|
|
32
|
+
Hello World. I am Tangerine.
|
|
33
|
+
</h1>
|
|
34
|
+
<hr>
|
|
35
|
+
<p>
|
|
36
|
+
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
|
|
37
|
+
<a href="/event-css-active-multiple.html">Reload Cached</a>
|
|
38
|
+
</p>
|
|
39
|
+
<p>
|
|
40
|
+
The goal of this page is to use CSS to show each part of the page when
|
|
41
|
+
its font has loaded.
|
|
42
|
+
</p>
|
|
43
|
+
</body>
|
|
44
|
+
</html>
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<link href="/basic.css" rel="stylesheet" type="text/css">
|
|
5
|
+
<script type="text/javascript" src="/webfont.js"></script>
|
|
6
|
+
<script type="text/javascript">
|
|
7
|
+
WebFont.load({
|
|
8
|
+
google: {
|
|
9
|
+
families: ['Droid Sans'],
|
|
10
|
+
api: '/fonts/api'
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
</script>
|
|
14
|
+
<style type="text/css">
|
|
15
|
+
h1 {
|
|
16
|
+
visibility: hidden;
|
|
17
|
+
}
|
|
18
|
+
html.wf-active h1 {
|
|
19
|
+
visibility: visible;
|
|
20
|
+
font-family: 'Droid Sans';
|
|
21
|
+
}
|
|
22
|
+
</style>
|
|
23
|
+
</head>
|
|
24
|
+
<body>
|
|
25
|
+
<h1>
|
|
26
|
+
Hello World. I am Droid Sans.
|
|
27
|
+
</h1>
|
|
28
|
+
<hr>
|
|
29
|
+
<p>
|
|
30
|
+
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
|
|
31
|
+
<a href="/event-css-active.html">Reload Cached</a>
|
|
32
|
+
</p>
|
|
33
|
+
<p>
|
|
34
|
+
The goal of this page is to use CSS to hide the headline until its font
|
|
35
|
+
has completely rendered.
|
|
36
|
+
</p>
|
|
37
|
+
</body>
|
|
38
|
+
</html>
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<link href="/basic.css" rel="stylesheet" type="text/css">
|
|
5
|
+
<script type="text/javascript" src="/webfont.js"></script>
|
|
6
|
+
<script type="text/javascript">
|
|
7
|
+
WebFont.load({
|
|
8
|
+
google: {
|
|
9
|
+
families: ['Droid Sans'],
|
|
10
|
+
api: '/fonts/api'
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
</script>
|
|
14
|
+
<style type="text/css">
|
|
15
|
+
h1 {
|
|
16
|
+
font-family: sans-serif;
|
|
17
|
+
font-weight: normal;
|
|
18
|
+
}
|
|
19
|
+
html.wf-active h1 {
|
|
20
|
+
font-family: 'Droid Sans';
|
|
21
|
+
}
|
|
22
|
+
</style>
|
|
23
|
+
</head>
|
|
24
|
+
<body>
|
|
25
|
+
<h1>
|
|
26
|
+
Hello World. I am Droid Sans.
|
|
27
|
+
</h1>
|
|
28
|
+
<hr>
|
|
29
|
+
<p>
|
|
30
|
+
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
|
|
31
|
+
<a href="/event-css-inactive.html">Reload Cached</a>
|
|
32
|
+
</p>
|
|
33
|
+
<p>
|
|
34
|
+
The goal of this page is to use CSS to present a fallback font until the custom font
|
|
35
|
+
has completely rendered.
|
|
36
|
+
</p>
|
|
37
|
+
</body>
|
|
38
|
+
</html>
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<link href="/basic.css" rel="stylesheet" type="text/css">
|
|
5
|
+
<script type="text/javascript" src="/webfont.js"></script>
|
|
6
|
+
<script type="text/javascript">
|
|
7
|
+
WebFont.load({
|
|
8
|
+
google: {
|
|
9
|
+
families: ['Droid Sans'],
|
|
10
|
+
api: '/fonts/api',
|
|
11
|
+
blocking: false
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
</script>
|
|
15
|
+
<style type="text/css">
|
|
16
|
+
|
|
17
|
+
/* Show and style the loading message while fonts are loading */
|
|
18
|
+
html.wf-loading #loading-message {
|
|
19
|
+
display: block;
|
|
20
|
+
color: #999;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Hide the content while fonts are loading */
|
|
24
|
+
html.wf-loading #content {
|
|
25
|
+
display: none;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* Hide the loading message after fonts render */
|
|
29
|
+
html.wf-active #loading-message {
|
|
30
|
+
display: none;
|
|
31
|
+
}
|
|
32
|
+
html.wf-active h1 {
|
|
33
|
+
font-family: 'Droid Sans';
|
|
34
|
+
}
|
|
35
|
+
</style>
|
|
36
|
+
</head>
|
|
37
|
+
<body>
|
|
38
|
+
<h1 id="loading-message">
|
|
39
|
+
I'm loading!
|
|
40
|
+
</h1>
|
|
41
|
+
<h1 id="content">
|
|
42
|
+
Hello World. I am Droid Sans.
|
|
43
|
+
</h1>
|
|
44
|
+
<hr>
|
|
45
|
+
<p>
|
|
46
|
+
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
|
|
47
|
+
<a href="/event-css-loading.html">Reload Cached</a>
|
|
48
|
+
</p>
|
|
49
|
+
<p>
|
|
50
|
+
The goal of this page is to use CSS to show a loading message while the
|
|
51
|
+
headline's font is loading, then hide the loading message and show the
|
|
52
|
+
headline once the font has rendered.
|
|
53
|
+
</p>
|
|
54
|
+
</body>
|
|
55
|
+
</html>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<link href="/basic.css" rel="stylesheet" type="text/css">
|
|
5
|
+
<script type="text/javascript" src="/webfont.js"></script>
|
|
6
|
+
<script type="text/javascript">
|
|
7
|
+
WebFont.load({
|
|
8
|
+
google: {
|
|
9
|
+
families: ['Droid Sans'],
|
|
10
|
+
api: '/fonts/api'
|
|
11
|
+
},
|
|
12
|
+
active: function() {
|
|
13
|
+
var h1 = document.getElementsByTagName('h1')[0];
|
|
14
|
+
h1.style.visibility = 'visible';
|
|
15
|
+
h1.style.fontFamily = 'Droid Sans';
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
</script>
|
|
19
|
+
<style type="text/css">
|
|
20
|
+
h1 {
|
|
21
|
+
visibility: hidden;
|
|
22
|
+
}
|
|
23
|
+
</style>
|
|
24
|
+
</head>
|
|
25
|
+
<body>
|
|
26
|
+
<h1>
|
|
27
|
+
Hello World. I am Droid Sans.
|
|
28
|
+
</h1>
|
|
29
|
+
<hr>
|
|
30
|
+
<p>
|
|
31
|
+
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
|
|
32
|
+
<a href="/event-js-active.html">Reload Cached</a>
|
|
33
|
+
</p>
|
|
34
|
+
<p>
|
|
35
|
+
The goal of this page is to use a combination of JavaScript and CSS to
|
|
36
|
+
hide the headline until its font has completely rendered.
|
|
37
|
+
</p>
|
|
38
|
+
</body>
|
|
39
|
+
</html>
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<link href="/basic.css" rel="stylesheet" type="text/css">
|
|
5
|
+
<script type="text/javascript" src="/webfont.js"></script>
|
|
6
|
+
<script type="text/javascript">
|
|
7
|
+
WebFont.load({
|
|
8
|
+
google: {
|
|
9
|
+
families: ['Droid Sans'],
|
|
10
|
+
api: '/fonts/api'
|
|
11
|
+
},
|
|
12
|
+
fontactive: function(familyName, fontDescription) {
|
|
13
|
+
if (fontFamilyName == 'Droid Sans') {
|
|
14
|
+
var h1 = document.getElementsByTagName('h1')[0];
|
|
15
|
+
h1.innerHTML = 'Hello World. I am ' + fontFamilyName + ' (' + fontDescription + ')';
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
</script>
|
|
20
|
+
<style type="text/css">
|
|
21
|
+
h1 {
|
|
22
|
+
font-family: 'Droid Sans';
|
|
23
|
+
}
|
|
24
|
+
</style>
|
|
25
|
+
</head>
|
|
26
|
+
<body>
|
|
27
|
+
<h1>
|
|
28
|
+
Hello World.
|
|
29
|
+
</h1>
|
|
30
|
+
<hr>
|
|
31
|
+
<p>
|
|
32
|
+
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
|
|
33
|
+
<a href="/event-js-font-active.html">Reload Cached</a>
|
|
34
|
+
</p>
|
|
35
|
+
<p>
|
|
36
|
+
The goal of this page is to use JavaScript to manipulate the page when
|
|
37
|
+
a particular font loads.
|
|
38
|
+
</p>
|
|
39
|
+
</body>
|
|
40
|
+
</html>
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<link href="/basic.css" rel="stylesheet" type="text/css">
|
|
5
|
+
<script type="text/javascript" src="/webfont.js"></script>
|
|
6
|
+
<script type="text/javascript">
|
|
7
|
+
WebFont.load({
|
|
8
|
+
google: {
|
|
9
|
+
families: ['Droid Sans'],
|
|
10
|
+
api: '/fonts/api'
|
|
11
|
+
},
|
|
12
|
+
|
|
13
|
+
/*
|
|
14
|
+
* Style the document while fonts are loading.
|
|
15
|
+
*/
|
|
16
|
+
loading: function() {
|
|
17
|
+
// The <body> doesn't exist yet, so wait a moment.
|
|
18
|
+
setTimeout(function() {
|
|
19
|
+
document.body.style.color = '#999';
|
|
20
|
+
}, 10);
|
|
21
|
+
},
|
|
22
|
+
|
|
23
|
+
/*
|
|
24
|
+
* When fonts are rendered, hide the loading message, show the
|
|
25
|
+
* content, and change the style of the document.
|
|
26
|
+
*/
|
|
27
|
+
active: function() {
|
|
28
|
+
var loadingMessage = document.getElementById('loading-message');
|
|
29
|
+
var content = document.getElementById('content');
|
|
30
|
+
loadingMessage.style.display = 'none';
|
|
31
|
+
content.style.display = 'block';
|
|
32
|
+
document.body.style.color = '#000';
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
});
|
|
36
|
+
</script>
|
|
37
|
+
<style type="text/css">
|
|
38
|
+
h1 {
|
|
39
|
+
font-family: 'Droid Sans';
|
|
40
|
+
}
|
|
41
|
+
</style>
|
|
42
|
+
</head>
|
|
43
|
+
<body>
|
|
44
|
+
<h1 id="loading-message">
|
|
45
|
+
I'm loading!
|
|
46
|
+
</h1>
|
|
47
|
+
<h1 id="content" style="display:none;">
|
|
48
|
+
Hello World. I am Droid Sans.
|
|
49
|
+
</h1>
|
|
50
|
+
<hr>
|
|
51
|
+
<p>
|
|
52
|
+
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
|
|
53
|
+
<a href="/event-js-loading.html">Reload Cached</a>
|
|
54
|
+
</p>
|
|
55
|
+
<p>
|
|
56
|
+
The goal of this page is to use JavaScript to manipulate the DOM while
|
|
57
|
+
fonts are loading, and once they have all rendered.
|
|
58
|
+
</p>
|
|
59
|
+
</body>
|
|
60
|
+
</html>
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<script type="text/javascript" src="/webfont.js"></script>
|
|
5
|
+
<script type="text/javascript">
|
|
6
|
+
function progress(message) {
|
|
7
|
+
var output = document.getElementById('events');
|
|
8
|
+
if (output) {
|
|
9
|
+
var e = document.createElement('li');
|
|
10
|
+
e.innerHTML = message;
|
|
11
|
+
output.appendChild(e);
|
|
12
|
+
}
|
|
13
|
+
if (window.console && window.console.log) {
|
|
14
|
+
window.console.log(message);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
WebFont.load({
|
|
18
|
+
google: {
|
|
19
|
+
families: ['Droid Serif:r,i,b,bi']
|
|
20
|
+
},
|
|
21
|
+
loading: function() {
|
|
22
|
+
progress('loading');
|
|
23
|
+
},
|
|
24
|
+
active: function() {
|
|
25
|
+
progress('active');
|
|
26
|
+
},
|
|
27
|
+
inactive: function() {
|
|
28
|
+
progress('inactive');
|
|
29
|
+
},
|
|
30
|
+
fontloading: function(fontFamily, fontDescription) {
|
|
31
|
+
progress('fontloading: ' + fontFamily + ' (' + fontDescription + ')');
|
|
32
|
+
},
|
|
33
|
+
fontactive: function(fontFamily, fontDescription) {
|
|
34
|
+
progress('fontactive: ' + fontFamily + ' (' + fontDescription + ')');
|
|
35
|
+
},
|
|
36
|
+
fontinactive: function(fontFamily, fontDescription) {
|
|
37
|
+
progress('fontinactive: ' + fontFamily + ' (' + fontDescription + ')');
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
</script>
|
|
41
|
+
<style type="text/css">
|
|
42
|
+
|
|
43
|
+
.droid p {
|
|
44
|
+
font-family: 'Droid Serif';
|
|
45
|
+
font-size: 2em;
|
|
46
|
+
margin-bottom: 0;
|
|
47
|
+
visibility: hidden;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.wf-droidserif-n4-active #droidregular {
|
|
51
|
+
visibility: visible;
|
|
52
|
+
}
|
|
53
|
+
.wf-droidserif-i4-active #droiditalic {
|
|
54
|
+
visibility: visible;
|
|
55
|
+
}
|
|
56
|
+
.wf-droidserif-n7-active #droidbold {
|
|
57
|
+
visibility: visible;
|
|
58
|
+
}
|
|
59
|
+
.wf-droidserif-i7-active #droidbolditalic {
|
|
60
|
+
visibility: visible;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* All Class hooks */
|
|
64
|
+
#classes { color: #ddd; }
|
|
65
|
+
html.wf-loading #classes .Loading,
|
|
66
|
+
html.wf-active #classes .Active,
|
|
67
|
+
html.wf-inactive #classes .Inactive,
|
|
68
|
+
html.wf-droidserif-n4-loading #classes #DroidSerifRegularLoading,
|
|
69
|
+
html.wf-droidserif-n4-active #classes #DroidSerifRegularActive,
|
|
70
|
+
html.wf-droidserif-n4-inactive #classes #DroidSerifRegularInactive,
|
|
71
|
+
html.wf-droidserif-i4-loading #classes #DroidSerifItalicLoading,
|
|
72
|
+
html.wf-droidserif-i4-active #classes #DroidSerifItalicActive,
|
|
73
|
+
html.wf-droidserif-i4-inactive #classes #DroidSerifItalicInactive,
|
|
74
|
+
html.wf-droidserif-n7-loading #classes #DroidSerifBoldLoading,
|
|
75
|
+
html.wf-droidserif-n7-active #classes #DroidSerifBoldActive,
|
|
76
|
+
html.wf-droidserif-n7-inactive #classes #DroidSerifBoldInactive,
|
|
77
|
+
html.wf-droidserif-i7-loading #classes #DroidSerifBoldItalicLoading,
|
|
78
|
+
html.wf-droidserif-i7-active #classes #DroidSerifBoldItalicActive,
|
|
79
|
+
html.wf-droidserif-i7-inactive #classes #DroidSerifBoldItalicInactive {
|
|
80
|
+
color: #000;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
</style>
|
|
84
|
+
</head>
|
|
85
|
+
<body>
|
|
86
|
+
<div class="droid">
|
|
87
|
+
<p id="droidregular">
|
|
88
|
+
Droid Serif Regular
|
|
89
|
+
</p>
|
|
90
|
+
<p id="droiditalic">
|
|
91
|
+
<em>Droid Serif Italic</em>
|
|
92
|
+
</p>
|
|
93
|
+
<p id="droidbold">
|
|
94
|
+
<strong>Droid Serif Bold</strong>
|
|
95
|
+
</p>
|
|
96
|
+
<p id="droidbolditalic">
|
|
97
|
+
<strong><em>Droid Serif Bold Italic</em></strong>
|
|
98
|
+
</p>
|
|
99
|
+
</div>
|
|
100
|
+
<hr>
|
|
101
|
+
<p>
|
|
102
|
+
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
|
|
103
|
+
<a href="/events-variations.html">Reload Cached</a>
|
|
104
|
+
</p>
|
|
105
|
+
<p>
|
|
106
|
+
The goal of this page is to show all of the font loading event callbacks when using
|
|
107
|
+
multiple weights and styles of one typeface.
|
|
108
|
+
</p>
|
|
109
|
+
<h2>CSS Hook Status</h2>
|
|
110
|
+
<ul id="classes">
|
|
111
|
+
<li class="Loading">Loading</li>
|
|
112
|
+
<li class="Active">Active</li>
|
|
113
|
+
<li class="Inactive">Inactive</li>
|
|
114
|
+
<li id="DroidSerifRegularLoading">Droid Serif Regular Loading</li>
|
|
115
|
+
<li id="DroidSerifRegularActive">Droid Serif Regular Active</li>
|
|
116
|
+
<li id="DroidSerifRegularInactive">Droid Serif Regular Inactive</li>
|
|
117
|
+
<li id="DroidSerifItalicLoading">Droid Serif Italic Loading</li>
|
|
118
|
+
<li id="DroidSerifItalicActive">Droid Serif Italic Active</li>
|
|
119
|
+
<li id="DroidSerifItalicInactive">Droid Serif Italic Inactive</li>
|
|
120
|
+
<li id="DroidSerifBoldLoading">Droid Serif Bold Loading</li>
|
|
121
|
+
<li id="DroidSerifBoldActive">Droid Serif Bold Active</li>
|
|
122
|
+
<li id="DroidSerifBoldInactive">Droid Serif Bold Inactive</li>
|
|
123
|
+
<li id="DroidSerifBoldItalicLoading">Droid Serif Bold Italic Loading</li>
|
|
124
|
+
<li id="DroidSerifBoldItalicActive">Droid Serif Bold Italic Active</li>
|
|
125
|
+
<li id="DroidSerifBoldItalicInactive">Droid Serif Bold Italic Inactive</li>
|
|
126
|
+
</ul>
|
|
127
|
+
<h2>JavaScript Event Progress</h2>
|
|
128
|
+
<ol id="events"></ol>
|
|
129
|
+
</body>
|
|
130
|
+
</html>
|