webfontloader 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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>
|