[css3-fonts] add one more font load event example

Author: John Daggett

css3-fonts/Fonts.html

@@ -112,15 +112,15 @@
 
    <h1>CSS Fonts Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=editors-draft-13-february-2013>Editor's Draft
-    13 February 2013</h2>
+   <h2 class="no-num no-toc" id=editors-draft-14-february-2013>Editor's Draft
+    14 February 2013</h2>
 
    <dl id=authors>
     <dt>This version:
 
     <dd><a
      href="http://dev.w3.org/csswg/css3-fonts/">http://dev.w3.org/csswg/css3-fonts/</a>
-     <!-- <dd><a href="http://www.w3.org/TR/2013/ED-css3-fonts-20130213/">http://www.w3.org/TR/2013/ED-css3-fonts-20130213/</a> -->
+     <!-- <dd><a href="http://www.w3.org/TR/2013/ED-css3-fonts-20130214/">http://www.w3.org/TR/2013/ED-css3-fonts-20130214/</a> -->
 
 
     <dt>Latest version:
@@ -5668,14 +5668,42 @@ <h3 id=font-load-event-examples><span class=secno>9.3 </span>Font load
   }
 
   function doEditing() {
-
     // content/layout operations that may cause additional font loads
-
     document.fontloader.notifyWhenFontsReady(measureTextElements);
   }
 </pre>
   </div>
 
+  <div class=example>
+   <p>Unlike the per-font load events, the <code
+    class=idl-code>"loadingdone"</code> event only fires after all font
+    related loads have completed <strong>and</strong> text has been laid out
+    without causing additional font loads:</p>
+
+   <pre>  @font-face {
+    font-family: latin-serif;
+    src: url(latinserif.woff) format("woff"); /* contains no kanji/kana */
+  }
+
+  @font-face {
+    font-family: jpn-mincho;
+    src: url(mincho.woff) format("woff");
+  }
+
+  body { font-family: latin-serif, jpn-mincho; }
+
+  &lt;p><a href="https://twitter.com/maji_kichi_/status/292546415685693440/photo/1" style="text-decoration: none;">納豆はいかがでしょうか</a>&lt;/p>
+</pre>
+
+   <p>In this situation, the user agent first downloads ‘<code
+    class=css>latinserif.woff</code>’ and then tries to use this to draw
+    the Japanese text. But because no Japanese glyphs are present in that
+    font, fallback occurs and the font ‘<code
+    class=css>mincho.woff</code>’ is downloaded. Only after the second font
+    is downloaded and the Japanese text laid out does the <code
+    class=idl-code>"loadingdone"</code> event fire.</p>
+  </div>
+
   <h2 class=no-num id=platform-props-to-css>Appendix A: Mapping platform font
    properties to CSS properties</h2>