Skip to content
This repository
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 131 lines (126 sloc) 4.486 kb
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 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130
<!doctype html>
<html>
<head>
  <script type="text/javascript" src="/webfont.js"></script>
  <script type="text/javascript">
    function progress(message) {
      var output = document.getElementById('events');
      if (output) {
        var e = document.createElement('li');
        e.innerHTML = message;
        output.appendChild(e);
      }
      if (window.console && window.console.log) {
        window.console.log(message);
      }
    }
    WebFont.load({
      google: {
        families: ['Droid Serif:r,i,b,bi']
      },
      loading: function() {
        progress('loading');
      },
      active: function() {
        progress('active');
      },
      inactive: function() {
        progress('inactive');
      },
      fontloading: function(fontFamily, fontDescription) {
        progress('fontloading: ' + fontFamily + ' (' + fontDescription + ')');
      },
      fontactive: function(fontFamily, fontDescription) {
        progress('fontactive: ' + fontFamily + ' (' + fontDescription + ')');
      },
      fontinactive: function(fontFamily, fontDescription) {
        progress('fontinactive: ' + fontFamily + ' (' + fontDescription + ')');
      }
    });
  </script>
  <style type="text/css">

    .droid p {
      font-family: 'Droid Serif';
      font-size: 2em;
      margin-bottom: 0;
      visibility: hidden;
    }

    .wf-droidserif-n4-active #droidregular {
      visibility: visible;
    }
    .wf-droidserif-i4-active #droiditalic {
      visibility: visible;
    }
    .wf-droidserif-n7-active #droidbold {
      visibility: visible;
    }
    .wf-droidserif-i7-active #droidbolditalic {
      visibility: visible;
    }

    /* All Class hooks */
    #classes { color: #ddd; }
    html.wf-loading #classes .Loading,
    html.wf-active #classes .Active,
    html.wf-inactive #classes .Inactive,
    html.wf-droidserif-n4-loading #classes #DroidSerifRegularLoading,
    html.wf-droidserif-n4-active #classes #DroidSerifRegularActive,
    html.wf-droidserif-n4-inactive #classes #DroidSerifRegularInactive,
    html.wf-droidserif-i4-loading #classes #DroidSerifItalicLoading,
    html.wf-droidserif-i4-active #classes #DroidSerifItalicActive,
    html.wf-droidserif-i4-inactive #classes #DroidSerifItalicInactive,
    html.wf-droidserif-n7-loading #classes #DroidSerifBoldLoading,
    html.wf-droidserif-n7-active #classes #DroidSerifBoldActive,
    html.wf-droidserif-n7-inactive #classes #DroidSerifBoldInactive,
    html.wf-droidserif-i7-loading #classes #DroidSerifBoldItalicLoading,
    html.wf-droidserif-i7-active #classes #DroidSerifBoldItalicActive,
    html.wf-droidserif-i7-inactive #classes #DroidSerifBoldItalicInactive {
      color: #000;
    }

  </style>
</head>
<body>
  <div class="droid">
    <p id="droidregular">
      Droid Serif Regular
    </p>
    <p id="droiditalic">
      <em>Droid Serif Italic</em>
    </p>
    <p id="droidbold">
      <strong>Droid Serif Bold</strong>
    </p>
    <p id="droidbolditalic">
      <strong><em>Droid Serif Bold Italic</em></strong>
    </p>
  </div>
  <hr>
  <p>
    <a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
    <a href="/events-variations.html">Reload Cached</a>
  </p>
  <p>
    The goal of this page is to show all of the font loading event callbacks when using
    multiple weights and styles of one typeface.
  </p>
  <h2>CSS Hook Status</h2>
  <ul id="classes">
    <li class="Loading">Loading</li>
    <li class="Active">Active</li>
    <li class="Inactive">Inactive</li>
    <li id="DroidSerifRegularLoading">Droid Serif Regular Loading</li>
    <li id="DroidSerifRegularActive">Droid Serif Regular Active</li>
    <li id="DroidSerifRegularInactive">Droid Serif Regular Inactive</li>
    <li id="DroidSerifItalicLoading">Droid Serif Italic Loading</li>
    <li id="DroidSerifItalicActive">Droid Serif Italic Active</li>
    <li id="DroidSerifItalicInactive">Droid Serif Italic Inactive</li>
    <li id="DroidSerifBoldLoading">Droid Serif Bold Loading</li>
    <li id="DroidSerifBoldActive">Droid Serif Bold Active</li>
    <li id="DroidSerifBoldInactive">Droid Serif Bold Inactive</li>
    <li id="DroidSerifBoldItalicLoading">Droid Serif Bold Italic Loading</li>
    <li id="DroidSerifBoldItalicActive">Droid Serif Bold Italic Active</li>
    <li id="DroidSerifBoldItalicInactive">Droid Serif Bold Italic Inactive</li>
  </ul>
  <h2>JavaScript Event Progress</h2>
  <ol id="events"></ol>
</body>
</html>
Something went wrong with that request. Please try again.