@font-face flash of unstyled text in internet explorer 9

问题

I'm currently building an asp site with @font-face but I have encountered the dreaded Flash Of Unstyled Text bug in internet explorer 9. So far I have moved my scripts underneath my css files and used the bullet proof syntax. As far as I can tell I have played by the rules but nothing seems to fix this problem. My question is this: Is this bug avoidable or are all these methods merely damage control via getting the browser to download the fonts quicker? I realise there similar questions, but its important for me to know if im just fighting against internet explorer's natural inclination to load fall back fonts whilst it waits for the @font-face. Sadly, I cannot use google web fonts and I'd prefer not hide my content for a few seconds and reveal it with jQuery (not really a fix!).

For those who interested the size of my files are approx 33k.

回答1:

To prevent the FOUT in IE9, you can embed the TTF-Font-File in CSS via base64-encoding (This solution works in all Browsers)

Be shure to deliver EOT files to IE <=8

<!--[if (lte IE 8) & (!IEMobile) ]>
    <link rel="stylesheet" media="screen" href="styles/fontface-ielte8.css" />
<![endif]-->

Put in your @font-face-rule (fontsquirrel recommended)

@font-face {
    font-family: 'MaidenDataURITest';
    src: url('MaidenOrange-webfont.eot');
    src: url('MaidenOrange-webfont.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

Next step, include the @font-face-declaration for all other browsers (IE9+ supports media-queries more info:

<link rel="stylesheet" media="screen and (min-device-width: 1px)" href="styles/fontface.css" />

Put in your @font-face-rule with the TTF-file via DataURI(base64-encoding):

@font-face {
    font-family: 'MaidenDataURITest';
    src: url('data:application/octet-stream;base64, [your-base64-data]') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Therefore use fontsquirrel to generate the DataURI -> expert mode.
Nice to know: IE8 supports dataURI until 32KiB. IE9 doesn't have such limitation.

DataURI Generator for all types of files: click here

live demo from above »

To improve the download-time

deliver just the characters you need via unicode-range: http://www.w3.org/TR/css3-fonts/#unicode-range-desc This will cut down the download time and file-size that have to be download (works in IE9+ and newer Browsers, otherwise the whole font will be downloaded)

@font-face {
    font-family: foo;
    src: url('foo.woff');
    unicode-range: U+31-33;
}

And the next step you can apply this to set expiration dates for it via .htaccess on apache servers to let the Web-Browser know, he should cache the font-files: This would leave the flash of unstyled content definitely on a revisit.

<IfModule mod_expires.c>
    ExpiresActive On
    <FilesMatch "\.(eot|woff|ttf|svg)$>
        ExpiresDefault "access plus 10 years"
    </FilesMatch>
</IfModule>

And then compress the font-files for faster download (via .htaccess-file):

AddOutputFilterByType DEFLATE  application/vnd.ms-fontobject application/x-font-ttf image/svg+xml

WOFF-files have allready a gzip compression built in.

You can create a .htaccess-file on your server and write this properties into. Works well on Apache-Servers :)

More details:

Live example: http://georgepantazis.com/demos/fontface-datauri/

Paul Irish about FOUT: http://paulirish.com/2009/fighting-the-font-face-fout/

Compatibility details and checklist: http://www.aaronpeters.nl/blog/IE9-performance-checklist

回答2:

You can prevent the FOUT by placing your font declarations into a separate css file and placing an import to this file at the top of your css. This works because @import is blocking so it does affect performance.

来源：https://stackoverflow.com/questions/10836529/font-face-flash-of-unstyled-text-in-internet-explorer-9

标签

internet-explorer-9

font-face