自定义字体在 IE 中消失答案

【问题标题】：Custom fonts disappearing in IE自定义字体在 IE 中消失
【发布时间】：2013-05-09 19:46:22
【问题描述】：

这是我第一次看到自定义字体嵌入会发生这种情况。作为参考，我有几十个使用自定义字体的客户端站点没有问题。

这个特定的客户端有自己创建的自定义字体文件。不幸的是，有问题的应用程序存在于主站点的 iframe 中（域/子域匹配，但在主页、iframe 和字体文件之间）。

当页面首次加载时，字体显示精美。我一刷新页面，字体就被破坏了：它恢复为备用 ("Sans-Serif") 字体，并且字母间距都被抬高了。

使用了 3 个单独的字体文件，它们都显示相同的行为。我相信这是一个缓存问题。最初正确显示的字体表明文件没问题，引用路径正确，域安全不存在问题。

我们使用 font-squirrel 生成的 css 进行嵌入。到目前为止，我只在 IE8 上进行了测试，尽管有人告诉我 IE9 也有同样的问题。其他浏览器的字体似乎没有任何问题。

很遗憾，我无法分享这是用于哪个网站的。

@font-face {
    font-family: 'myfont70';
    src: url('../font/myfont-070.eot');
    src: url('../font/myfont-070.svg#myfont70') format('svg'),
    url('../font/myfont-070.eot?#iefix') format('embedded-opentype'),
    url('../font/myfont-070.woff') format('woff'),
    url('../font/myfont-070.ttf') format('truetype'),
    url('../font/myfont-070.svg#myfont70') format('svg');
    font-weight: normal;
    font-style: normal;
}

（SVG 的双重声明是有意的）

谢谢！

【问题讨论】：

你需要添加一些代码伙伴 - 至少你的 css 方法 - 使用 jsfiddle -

标签： css internet-explorer caching font-face

【解决方案1】：

这具体是由于在 IE 中被保存在 iframe 中造成的。解决方案是刷新声明字体系列的css标签上的href。这并不理想，因为它会触发 css 的重新加载，并且字体会瞬间闪烁到它们的后备位置。

如果有人有更好的解决方案，我会全神贯注。

【讨论】：