Permalink
Browse files

improve demo file names and index page

  • Loading branch information...
1 parent a502372 commit e33175dcc40704866d31a8043a96b1da78f17c89 @rcarver rcarver committed May 14, 2010
File renamed without changes.
@@ -34,7 +34,7 @@ <h1 class="tangerine">
<hr>
<p>
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
- <a href="/js-css-active-multiple.html">Reload Cached</a>
+ <a href="/event-css-active-multiple.html">Reload Cached</a>
</p>
<p>
The goal of this page is to use CSS to show each part of the page when
@@ -28,7 +28,7 @@
<hr>
<p>
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
- <a href="/js-css-active.html">Reload Cached</a>
+ <a href="/event-css-active.html">Reload Cached</a>
</p>
<p>
The goal of this page is to use CSS to hide the headline until its font
@@ -27,7 +27,7 @@
<hr>
<p>
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
- <a href="/js-css-inactive.html">Reload Cached</a>
+ <a href="/event-css-inactive.html">Reload Cached</a>
</p>
<p>
The goal of this page is to use CSS to present a fallback font until the custom font
@@ -44,7 +44,7 @@ <h1 id="content">
<hr>
<p>
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
- <a href="/js-css-loading.html">Reload Cached</a>
+ <a href="/event-css-loading.html">Reload Cached</a>
</p>
<p>
The goal of this page is to use CSS to show a loading message while the
@@ -29,7 +29,7 @@
<hr>
<p>
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
- <a href="/js-js-active.html">Reload Cached</a>
+ <a href="/event-js-active.html">Reload Cached</a>
</p>
<p>
The goal of this page is to use a combination of JavaScript and CSS to
@@ -30,7 +30,7 @@
<hr>
<p>
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
- <a href="/js-js-font-active.html">Reload Cached</a>
+ <a href="/event-js-font-active.html">Reload Cached</a>
</p>
<p>
The goal of this page is to use JavaScript to manipulate the page when
@@ -50,7 +50,7 @@ <h1 id="content" style="display:none;">
<hr>
<p>
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
- <a href="/js-js-loading.html">Reload Cached</a>
+ <a href="/event-js-loading.html">Reload Cached</a>
</p>
<p>
The goal of this page is to use JavaScript to manipulate the DOM while
@@ -18,7 +18,7 @@
<hr>
<p>
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
- <a href="/css-basic.html">Reload Cached</a>
+ <a href="/google-css.html">Reload Cached</a>
</p>
<p>
The goal of this page is simply to use fonts directly via CSS.
@@ -24,7 +24,7 @@
<hr>
<p>
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
- <a href="/js-basic.html">Reload Cached</a>
+ <a href="/google.html">Reload Cached</a>
</p>
<p>
The goal of this page is simply to use fonts via the JavaScript API.
@@ -14,43 +14,47 @@
real world usage.
</p>
- <h2>Pure CSS</h2>
+ <h2>Modules</h2>
+ <p>
+ WebFont Loader provides modules to load fonts from many places.
+ </p>
<ol>
- <li><a href="/css-basic.html">Basic</a>: Simplest possible font embedding with pure CSS.</li>
+ <li><a href="/google-css.html">Google / CSS Link</a>: Load fonts from Google with a <code>link</code> tag. Consider this a base case for font loading.</li>
+ <li><a href="/google.html">Google / WebFont Loader</a>: Load fonts from Google with WebFont Loader.</li>
+ <li><a href="/typekit.html">Typekit / WebFont Loader</a>: Load fonts from Typekit with WebFont Loader.</li>
+ <li><a href="/custom.html">Custom / WebFont Loader</a>: Load fonts from your own CSS with WebFont Loader.</li>
</ol>
- <h2>JavaScript Enhanced</h2>
+ <h2>Events</h2>
+ <p>
+ WebFont Loader provides events to help control font rendering across browsers. Here are some sample uses.
+ </p>
<ol>
- <li><a href="/js-basic.html">Basic</a>: Simplest font embedding with WebFont Loader.</li>
- <li><a href="/js-css-active.html">Show when rendered (CSS)</a>: Use CSS to show part of the page only when the font has rendered. (Webkit style)</li>
- <li><a href="/js-js-active.html">Show when rendered (JS)</a>: Use JS to show part of the page only when the font has rendered. (Webkit style)</li>
- <li><a href="/js-css-inactive.html">Fallback before rendered (CSS)</a>: Use CSS to show fallback font before the font has rendered. (Mozilla style)</li>
- <li><a href="/js-css-loading.html">Show loading message (CSS)</a>: Use CSS to show a message while the font loads.</li>
- <li><a href="/js-js-loading.html">Show loading message (JS)</a>: Use JS to show a message while the font loads.</li>
+ <li><a href="/event-css-active.html">Show when rendered (CSS)</a>: Use CSS to show part of the page only when the font has rendered. (Webkit style)</li>
+ <li><a href="/event-js-active.html">Show when rendered (JS)</a>: Use JS to show part of the page only when the font has rendered. (Webkit style)</li>
+ <li><a href="/event-css-inactive.html">Fallback before rendered (CSS)</a>: Use CSS to show fallback font before the font has rendered. (Mozilla style)</li>
+ <li><a href="/event-css-loading.html">Show loading message (CSS)</a>: Use CSS to show a message while the font loads.</li>
+ <li><a href="/event-js-loading.html">Show loading message (JS)</a>: Use JS to show a message while the font loads.</li>
</ol>
- <h2>More JavaScript samples</h2>
+ <h2>More Events</h2>
+ <p>
+ More complex samples using events.
+ </p>
<ol>
- <li><a href="/events.html">Events</a>: A demonstration of the full CSS and JS event cycle.</li>
- <li><a href="/js-css-active-multiple.html">Multiple font loads</a>: Use CSS to track each font load.</li>
+ <li><a href="/events.html">All events</a>: A demonstration of the full CSS and JS event cycle.</li>
+ <li><a href="/event-css-active-multiple.html">Multiple font loads</a>: Use CSS to track each font load.</li>
</ol>
<h2>IE Behavior</h2>
+ <p>
+ WebFont Loader helps workaround IE's page blocking behavior.
+ </p>
<ol>
<li><a href="/ie-slow-link.html">Slow Link</a>: Demonstrate that IE blocks the whole page when loading fonts via a LINK tag.</li>
<li><a href="/ie-fast-js.html">Fast JS</a>: By default, WebFont Loader works around the default IE loading behavior.</li>
<li><a href="/ie-slow-js.html">Slow JS</a>: Restore the default IE loading behavior.</li>
</ol>
- <h2>Typekit</h2>
- <ol>
- <li><a href="/typekit.html">Typekit</a>: Demonstration of using fonts from Typekit.</li>
- </ol>
-
- <h2>Custom Module</h2>
- <ol>
- <li><a href="/custom.html">Custom</a>: Demonstration of using fonts from a custom module.</li>
- </ol>
-
</body>
</html>

0 comments on commit e33175d

Please sign in to comment.