Internet Explorer 9中未样式化文本的@ font-face Flash [英] @font-face flash of unstyled text in internet explorer 9
问题描述
我目前正在使用@ font-face构建一个ASP站点，但是我在Internet Explorer 9中遇到了可怕的Flash of Unstyled Text错误.到目前为止，我已经将脚本移动到了CSS文件下方，并使用了项目符号证明语法.据我所知，我遵守规则，但似乎没有任何办法可以解决此问题.我的问题是:这个错误是可以避免的，还是所有这些方法都只是通过使浏览器更快地下载字体来破坏控制?我意识到也存在类似的问题，但对于我来说，知道我是否正在与Internet Explorer等待@ font-face时加载后退字体的自然倾向作斗争对我来说很重要.可悲的是，我不能使用Google网络字体，我宁愿不隐藏我的内容几秒钟，并使用jQuery来显示它(不是一个真正的解决方案！).
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!).
对于那些感兴趣的人，我的文件大小约为33,000.
For those who interested the size of my files are approx 33k.
推荐答案
要防止IE9中的FOUT，您可以通过base64-encoding将TTF-Font-File嵌入CSS中 (此解决方案适用于所有浏览器)
To prevent the FOUT in IE9, you can embed the TTF-Font-File in CSS via base64-encoding (This solution works in all Browsers)
请务必将EOT文件传送到IE< = 8
<!--[if (lte IE 8) & (!IEMobile) ]>
<link rel="stylesheet" media="screen" href="styles/fontface-ielte8.css" />
<![endif]-->
输入您的@ font-face-rule(推荐使用 fontsquirrel )
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;
}
下一步，包括所有其他浏览器的@ font-face-declaration(IE9 +支持媒体查询
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" />
通过DataURI(base64-encoding)将带有TTF文件的@ font-face-rule放入:
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;
}
因此，请使用 fontsquirrel 来生成DataURI->专家模式.知道:IE8支持dataURI直到32KiB. IE9没有这样的限制.
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 (适用于所有类型的文件):单击此处
DataURI Generator for all types of files: click here
live demo from above »
要缩短下载时间
通过unicode范围仅提供所需的字符: http://www.w3.org/TR/css3-fonts/#unicode-range-desc 这样可以减少必须下载的下载时间和文件大小(可在IE9 +和更高版本的浏览器中使用，否则将下载整个字体)
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;
}
然后下一步，您可以通过apache服务器上的.htaccess将其应用此设置来设置到期日期，以通知Web浏览器，他应该缓存字体-文件: 毫无疑问，这将使重新浏览未样式化的内容.
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>
然后压缩字体文件以加快下载速度(通过.htaccess文件):
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文件已经内置了gzip压缩.
WOFF-files have allready a gzip compression built in.
您可以在服务器上创建一个.htaccess文件，并将此属性写入其中. 在Apache服务器上运行良好:)
You can create a .htaccess-file on your server and write this properties into. Works well on Apache-Servers :)
更多详细信息:
实时示例: http://georgepantazis.com/demos/fontface-datauri/
Paul Irish关于FOUT: http://paulirish.com/2009/战斗的字体脸fout/
Paul Irish about FOUT: http://paulirish.com/2009/fighting-the-font-face-fout/
兼容性详细信息和清单: http://www.aaronpeters.nl/blog/IE9 -性能检查表
Compatibility details and checklist: http://www.aaronpeters.nl/blog/IE9-performance-checklist
这篇关于Internet Explorer 9中未样式化文本的@ font-face Flash的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
