8000 [css-font-loading] Added example of how fonts work when added/not add… · w3c/csswg-drafts@d8078d6 · GitHub
Skip to content

Commit d8078d6

Browse files
tabatkinstabatkins
committed
[css-font-loading] Added example of how fonts work when added/not added to the document.
1 parent e7988e7 commit d8078d6

2 files changed

Lines changed: 100 additions & 0 deletions

File tree

‎css-font-loading/Overview.bs‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -663,6 +663,60 @@ Interaction with CSS Font Loading and Matching</h3>
663663
(This means it must run the same algorithm,
664664
not literally call the value currently stored in the <code>load</code> property of the object.)
665665

666+
<div class="example">
667+
Fonts are available when they are added to a <a idl>FontFaceSet</a>.
668+
Adding a new ''@font-face'' rule to a stylesheet
669+
also adds a new <a idl>FontFace</a> to the <a idl>FontFaceSet</a> of the <a interface>Document</a> object.
670+
671+
Adding a new ''@font-face'' rule:
672+
673+
<pre>
674+
document.styleSheets[0].insertRule(
675+
"@font-face { font-family: newfont; src: url(newfont.woff); }", 0);
676+
document.body.style.fontFamily = "newfont, serif";
677+
</pre>
678+
679+
Constructing a new <a idl>FontFace</a> object and adding it to <code>document.fonts</code>:
680+
681+
<pre>
682+
var f = new FontFace("newfont", "url(newfont.woff)");
683+
document.fonts.add(f);
684+
document.body.style.fontFamily = "newfont, serif";
685+
</pre>
686+
687+
In both cases, the loading of the font resource “newfont.woff” will be initiated by the layout engine,
688+
just as other ''@font-face'' rule fonts are loaded.
689+
690+
Omitting the addition to <code>document.fonts</code> means the font would never be loaded
691+
and text would be displayed in the default serif font:
692+
693+
<pre>
694+
var f = new FontFace("newfont", "url(newtest.woff)", {});
695+
696+
/* new <a idl>FontFace</a> not added to <a idl>FontFaceSet</a>,
697+
so the 'font-family' property can't see it,
698+
and serif will be used instead */
699+
document.body.style.fontFamily = "newfont, serif";
700+
</pre>
701+
702+
To explicitly preload a font before using it,
703+
authors can defer the addition of a new <a idl>FontFace</a> to a <a idl>FontFaceSet</a> until the load has completed:
704+
705+
<pre>
706+
var f = new FontFace("newfont", "url(newfont.woff)", {});
707+
f.load().then(function () {
708+
document.fonts.add(f);
709+
document.body.style.fontFamily = "newfont, serif";
710+
});
711+
</pre>
712+
713+
In this case, the font resource “newfont.woff” is first downloaded.
714+
Once the download completes,
715+
the font is added to the document's <a idl>FontFaceSet</a>,
716+
the body font is changed,
717+
and the layout engine uses the new font resource.
718+
</div>
719+
666720
<h2 id='font-face-source'>
667721
The <code>FontFaceSource</code> interface</h2>
668722

‎css-font-loading/Overview.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -756,6 +756,52 @@ <h3 class="heading settled heading" data-level=3.6 id=font-face-set-css><span cl
756756
<p> (This means it must run the same algorithm,
757757
not literally call the value currently stored in the <code>load</code> property of the object.)
758758

759+
<div class=example>
760+
Fonts are available when they are added to a <a data-link-type=idl href=#dom-fontfaceset title=fontfaceset>FontFaceSet</a>.
761+
Adding a new <a class=css data-link-type=maybe href=http://www.w3.org/TR/css-fonts-3/#at-font-face-rule title=@font-face>@font-face</a> rule to a stylesheet
762+
also adds a new <a data-link-type=idl href=#dom-fontface title=fontface>FontFace</a> to the <a data-link-type=idl href=#dom-fontfaceset title=fontfaceset>FontFaceSet</a> of the <a class=idl-code data-link-type=interface href=http://www.w3.org/TR/html5/infrastructure.html#dom-document title=document>Document</a> object.
763+
764+
<p> Adding a new <a class=css data-link-type=maybe href=http://www.w3.org/TR/css-fonts-3/#at-font-face-rule title=@font-face>@font-face</a> rule:
765+
766+
<pre>document.styleSheets[0].insertRule(
767+
"@font-face { font-family: newfont; src: url(newfont.woff); }", 0);
768+
document.body.style.fontFamily = "newfont, serif";
769+
</pre>
770+ 6CAA
<p> Constructing a new <a data-link-type=idl href=#dom-fontface title=fontface>FontFace</a> object and adding it to <code>document.fonts</code>:
771+
772+
<pre>var f = new FontFace("newfont", "url(newfont.woff)");
773+
document.fonts.add(f);
774+
document.body.style.fontFamily = "newfont, serif";
775+
</pre>
776+
<p> In both cases, the loading of the font resource “newfont.woff” will be initiated by the layout engine,
777+
just as other <a class=css data-link-type=maybe href=http://www.w3.org/TR/css-fonts-3/#at-font-face-rule title=@font-face>@font-face</a> rule fonts are loaded.
778+
779+
<p> Omitting the addition to <code>document.fonts</code> means the font would never be loaded
780+
and text would be displayed in the default serif font:
781+
782+
<pre>var f = new FontFace("newfont", "url(newtest.woff)", {});
783+
784+
/* new <a data-link-type=idl href=#dom-fontface title=fontface>FontFace</a> not added to <a data-link-type=idl href=#dom-fontfaceset title=fontfaceset>FontFaceSet</a>,
785+
so the 'font-family' property can’t see it,
786+
and serif will be used instead */
787+
document.body.style.fontFamily = "newfont, serif";
788+
</pre>
789+
<p> To explicitly preload a font before using it,
790+
authors can defer the addition of a new <a data-link-type=idl href=#dom-fontface title=fontface>FontFace</a> to a <a data-link-type=idl href=#dom-fontfaceset title=fontfaceset>FontFaceSet</a> until the load has completed:
791+
792+
<pre>var f = new FontFace("newfont", "url(newfont.woff)", {});
793+
f.load().then(function () {
794+
document.fonts.add(f);
795+
document.body.style.fontFamily = "newfont, serif";
796+
});
797+
</pre>
798+
<p> In this case, the font resource “newfont.woff” is first downloaded.
799+
Once the download completes,
800+
the font is added to the document’s <a data-link-type=idl href=#dom-fontfaceset title=fontfaceset>FontFaceSet</a>,
801+
the body font is changed,
802+
and the layout engine uses the new font resource.
803+
</div>
804+
759805
<h2 class="heading settled heading" data-level=4 id=font-face-source><span class=secno>4 </span><span class=content>
760806
The <code>FontFaceSource</code> interface</span><a class=self-link href=#font-face-source></a></h2>
761807

0 commit comments

Comments
 (0)