microsoft.com Home   All Products  |   Support  |   Search  |   microsoft.com Home  
Microsoft

Microsoft Typography | Typography on the Web | Font embedding | About the demo


Progressive rendering


demo 4 screen capture at 25% title: Progressive rendering
design: Si Daniels
jscript: Calum Brown

This IE4 specific page uses five fonts; Braggadocio, Curlz MT, OCR A Extended, Gradl and Snap ITC.


About the page

Microsoft Internet Explorer 4.0 will not render a page until the font objects referenced by that page have been downloaded, decompressed and temporarily installed. In some cases you may wish to have a page displayed using an installed font which is dynamically replaced by the font stored within the font object.

The code required to implement this progressive rendering is very compact, and takes the following form:


<SCRIPT LANGUAGE="JavaScript">
function createbreak() {
alert("Click here to continue the demo");
document.styleSheets(i).href="ftembed.css";
}
</SCRIPT>

Where stylesheets(i) is the element of the stylesheet collection you wish to replace. In this example, a null stylesheet corresponding to stylesheets(0) is dimensioned so as to create a stylesheet element. This requires the following code to be added in the <HEAD> element of your HTML code:

<LINK rel=stylesheet href=null>

The font object links are contained in the external stylesheet and are therefore referenced only after the page itself has downloaded. The Msgbox code has been inserted so that those lucky enough to have fast connections can see how the progressive rendering effect works. This line may be removed if you implement this code on your own pages.

If this all seems a little bit too complicated please see the Internet Client SDK.


font used unique characters object size
Braggadocio 18 3.16KB
Curlz MT 36 10.4KB
OCR A Extended 19 4.75KB
Gradl 23 4.08KB
Snap ITC 29 7.09KB

Table 1. The font objects used by the page


this page was last updated 29 August 1997
© 1997 Microsoft Corporation. All rights reserved. Terms of use.
comments to the MST group: how to contact us

 

Microsoft Typography | Typography on the Web | Font embedding | About the demo