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

Tab Atkins wrote:

> >> I'm not handling this quite yet - for now, people can track
> >> whether the fonts they care about have loaded or not by
> >> themselves.
> >
> > Which they can't do in all cases because that's determined by
> > style matching and fallback.  Authors would need to understand in
> > great detail how many fonts are going to be loaded to render the
> > text on a given page.
> 
> This is sufficient for the use-cases I'm trying to solve first.
> Simple pages that don't use many fonts are fine.  An app like Google
> Docs knows exactly what fonts are to be used, and is fine.  An app
> drawing text into <canvas> also knows exactly what fonts it's trying
> to use.

Only defining a crude font event is ignoring the most common use case,
namely an author wanting to perform some operation only after all
fonts are loaded.  That's true in the <canvas> use case, it's true in
the Google Docs case, and it's true in the case of an author measuring
elements containing text.

Your assertion is that in most cases the number of fonts involved is
"known" but even in some simple cases this can be tricky to pin down. 
There are lots of cases where this is harder than it seems.  Without a
simple API to determine whether all loads are done you're putting the
burden on the author to figure this out.

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.

Given that a user agent is quite capable of knowing whether font loads
are pending or not, it seems silly not to expose this, since that's
what an author (and Google Docs code!!!) wants to know.  The only
question in my mind is simply how to define it.

Regards,

John Daggett

Received on Thursday, 23 August 2012 00:57:32 UTC