Re: [css-font-loading] how/when do FontFace objects end up in a FontFaceSet

On Sun, Mar 9, 2014 at 7:05 PM, John Daggett <jdaggett@mozilla.com> wrote:
> Tab Atkins wrote:
>>>> Construction doesn't mention anything about automatically adding
>>>> it to the document's font source, so it doesn't do so.
>>>
>>> I think the spec should state that explicitly.
>>
>> Done.
>
> Ok, found it. I think I would word it slightly differently and
> emphasize the implication of what this means for authors.
>
> Current text:
>
>> Note: Note that constructing a FontFace object does not
>> automatically add it to the document’s font source. If it’s desired
>> that the newly-constructed FontFace object is usable from CSS/etc,
>> it must be explicitly added to a font source.
>
> Emphasizing what this means for authors:
>
> Newly constructed FontFace objects are not automatically added to the
> FontFaceSet associated with a document or a context for a worker
> thread. This means that while newly constructed fonts can be
> preloaded, they cannot actually be used until they are explicitly
> added to a FontFaceSet.  See the following section for a more complete
> description of FontFaceSet.

That sounds pretty good.  I've replaced my note with your text.

> Aside: as much as possible I would avoid the term "font source" as it
> adds an extra level of indirection when reading the spec.
>
> I think it would also be a good idea to have an example demonstrating
> the different usage patterns that this suggests.
>
> Example for the end of section 3.6:
>
> Fonts are available when they are added to a FontFaceSet. Adding a new
> @font-face rule to a stylesheet also adds a new FontFace to the
> FontFaceSet of the Document object.
>
> Adding a new @font-face rule:
>
>   document.styleSheets[0].insertRule(
>     "@font-face { font-family: newtest; src: url(newtest.woff); }", 0);
>   document.getElementsByTagName("body")[0].style.fontFamily = "newtest, serif";
>
> Constructing a new FontFace object and adding it to document.fonts:
>
>   var newfont = new FontFace("newtest", "url(newtest.woff)", {});
>   document.fonts.add(newfont);
>   document.getElementsByTagName("body")[0].style.fontFamily = "newtest, serif";
>
> In both cases, the loading of the font resource 'newtest.woff' will be
> initiated by the layout engine, just as other @font-face rule fonts
> are loaded.
>
> Omitting the addition to document.fonts means the font would never be
> loaded and text would be displayed in the default serif font:
>
>   var newfont = new FontFace("newtest", "url(newtest.woff)", {});
>
>   /* new FontFace not added to FontFaceSet so serif will be used */
>   document.getElementsByTagName("body")[0].style.fontFamily = "newtest, serif";
>
> To explicitly preload a font before using it, authors can defer the
> addition of a new FontFace to a FontFaceSet until the load has completed:
>
>   var newfont = new FontFace("newtest", "url(newtest.woff)", {});
>   newfont.load().then(function () {
>     document.getElementsByTagName("body")[0].style.fontFamily = "newtest, serif";
>   }, handleError);
>
> In this case, the font resource 'newtest.woff' is first downloaded.
> Once the download completes, the body font is changed and the layout
> engine uses the new font resource.

Excellent example.  I added it, with only minor tweaks.


Also, this example showed that it probably makes sense to let the
load() promise resolve to the FontFace.

~TJ

Received on Monday, 10 March 2014 21:11:01 UTC