Question

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

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

Answer 1

要防止IE9中的FOUT，您可以通过base64-encoding将TTF-Font-File嵌入CSS中 （此解决方案适用于所有浏览器）

要将EOT文件传送到IE＆lt; = 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 +支持媒体查询more info：

<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 - ＆gt;专家模式。很高兴知道：IE8支持dataURI直到32KiB。 IE9没有这样的限制。

适用于所有类型文件的

DataURI生成器：click here

<强> live demo from above »

改善下载时间

通过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 应用它来设置到期日期让网络浏览器知道，他应该缓存字体-files：这样就可以重新审视无格式内容的闪光。

<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/

保罗爱尔兰关于FOUT：http://paulirish.com/2009/fighting-the-font-face-fout/

兼容性详情和核对清单：http://www.aaronpeters.nl/blog/IE9-performance-checklist

Answer 2

您可以通过将字体声明放入单独的css文件并将导入到css顶部的此文件来阻止FOUT。这是有效的，因为@import是阻塞的，所以它确实会影响性能。

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

2 个答案: