Re: [css3-fonts][cssom] Load events for webfonts?

> Here are a couple patterns to consider:
>
> Example 1:
>
>   @font-face {
>     font-family: test1;
>     src: url(myfont-regular.ttf);
>   }
>
>   @font-face {
>     font-family: test1;
>     src: url(myfont-bold.ttf);
>     font-weight: bold;
>   }
>
>   body { font-family: test1; }
>
>   <h4>Simple example</h4>
>
>   <p>This is a <em>simple</em> example.</p>
>
> How many fonts load?  Three styles are used but only two fonts are
> loaded, the italic in the <em> element is synthesized.
>
> Example 2:
>
>   @font-face {
>     font-family: test2;
>     src: url(myfont-regular.ttf);
>   }
>
>   @font-face {
>     font-family: test2-fallback;
>     src: url(myfont-japanese.ttf);
>   }
>
>   body { font-family: test2, test2-fallback; }
>
>   <p>今日3時頃に会いましょう。</p>
>
> How many fonts load?  The author would need to know that the regular
> face doesn't contain any Japanese characters, such that two fonts
> would be loaded.
>
> Example 3:
>
>   @font-face {
>     font-family: test3;
>     src: url(myfont-regular.ttf);
>   }
>
>   @font-face {
>     font-family: test3;
>     src: url(myfont-bold.ttf);
>     font-weight: bold;
>   }
>
>   @font-face {
>     font-family: test3;
>     src: url(myfont-black.ttf);
>     font-weight: 900;
>   }
>
>   body { font-family: test3; }
>
>   <h4>Another <strong>simple</strong> example</h4>
>
> How many fonts load?  This will vary depending upon user agent
> stylesheet entry for <strong>, if it uses 'font-weight: bolder', two
> fonts, if it uses 'font-weight: bold', one font.
>

Maybe I'm missing something but to me it looks like the use case of
getting to know the number of loaded fonts is covered by that event.

Example:
var fontsLoaded = 0;

function increaseFontsNumber() {
  fontsLoaded++;
  alert(fontsLoaded+" web fonts have now been loaded");
}

document.addEventListener("fontload", increaseFontsNumber, false);

> Another case is an extension or something that adds a UA style rule setting "font-family: XYZ !important;" on a bunch of elements
> of the application. Now font-load events expected by the application will never fire.

As I understand it also in this case the event would be fired.

>> The event sounds reasonable, but can it really be called "load"? Won't that
>> trigger onload handlers that have been attached to the document? Seems to me
>> it should be called "fontload" or something like that.
>
> Hmm, I dunno!  Do the "type" names really need to be coordinated
> across all specifications?  I had assumed that that were scoped to the
> individual type of error.
Note that I used "fontload" as event name above. Of course you can't
reuse the name of an event defined in another spec. Or I am
understanding something here totally wrong.

Sebastian

Received on Thursday, 23 August 2012 05:30:54 UTC