2

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

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

4

2 回答 2

6

为了防止 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) 将 @font-face-rule 与 TTF 文件一起放入：

@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 生成器：单击此处

上面的现场演示 »

改善下载时间

通过 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;
}

下一步，您可以通过 .htaccess 在 apache 服务器上应用它来设置过期日期，让 Web 浏览器知道，他应该缓存字体文件：这将使无样式内容的闪存肯定会重新访问。

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

然后压缩字体文件以加快下载速度（通过 .htaccess-file）：

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

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

您可以在您的服务器上创建一个 .htaccess 文件并将此属性写入其中。在 Apache 服务器上运行良好 :)

更多细节：

现场示例： 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

于 2012-05-31T15:41:31.323 回答
1

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

于 2013-01-10T17:46:12.457 回答