@ font-face flash in Internet Explorer 9中的无文字文字

Question

我目前正在使用@ font-face构建一个asp站点但我在Internet Explorer 9中遇到了可怕的Flash of Unstyled Text错误.到目前为止,我已经将我的脚本移到我的css文件下并使用了防弹语法.据我所知,我已经遵守规则,但似乎没有什么能解决这个问题.我的问题是:这个bug是否可以避免,或者所有这些方法只是通过让浏览器更快地下载字体来破坏控制？我意识到有类似的问题,但重要的是我要知道我是否只是在与Internet浏览器等待@ font-face时自然倾向于加载回退字体.可悲的是,我不能使用谷歌网络字体,我宁愿不隐藏我的内容几秒钟,并用jQuery揭示它(不是真的修复!).

对于那些感兴趣的人,我的文件大小约为33k.

Answer 1

为了防止IE9中的FOUT,您可以通过base64-encoding将TTF-Font-File嵌入到CSS中 (此解决方案适用于所有浏览器)

要将EOT文件传送到IE <= 8

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

放入@ font-face-rule(建议使用fontsquirrel)

@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 +支持媒体查询更多信息:

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

通过DataURI(base64-encoding)将TTF文件放入@ font-face-rule:

@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没有这样的限制.

适用于所有类型文件的DataURI Generator:单击此处

上面的现场演示»

为了提高下载时间

通过unicode-range 提供您需要的字符:http://www.w3.org/TR/css3-fonts/#unicode-range-desc 这将减少必须下载的下载时间和文件大小(适用于IE9 +和更新的浏览器,否则将下载整个字体)

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

而下一步,你可以应用此设置的有效期通过在Apache服务器的.htaccess它让网络浏览器知道,他应该缓存的字体文件:这将离开无样式内容的闪存绝对的重访.

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

然后压缩字体文件以便更快下载(通过.htaccess文件):

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

WOFF文件已经内置了gzip压缩.

您可以在服务器上创建.htaccess文件并将此属性写入.适用于Apache-Servers :)

更多细节:

实例:http://georgepantazis.com/demos/fontface-datauri/

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

兼容性详细信息和清单:http://www.aaronpeters.nl/blog/IE9-performance-checklist