Question

我正在使用iframe中的链接加载外部css。

css包含@ font-faces

@font-face {
    font-family: "MyFont";
    font-weight: normal;
    font-style: normal;
    src: url('/assets/fonts/myFont.woff');
}

和字体适用于除IE 10,11之外的所有浏览器（我在下面不感兴趣）。加载了css（其他规则也在IE中应用）但@ font-faces不是。

如果我使用硬核风格标签移植字体，它就可以工作。

<style>
@font-face {
    font-family: "MyFont";
    font-weight: normal;
    font-style: normal;
    src: url('/assets/fonts/myFont.woff');
}
</style>

也许有人找到了解决外部css资源的方法？

Answer 1

您必须使用EOT扩展名字体添加类型字体，因为IE支持嵌入式OpenType（EOT）文件（.eot或.ote格式）。

如果您没有.eot或.ote文件，请在此网址everythingfont中转换字体。

更正字体格式，

 <style type="text/css" >
   @font-face {
    font-family: 'Sri-TSCRegular';
    src: url('sri-tsc-webfont.eot');
    src: url('sri-tsc-webfont.eot?#iefix') format('embedded-opentype'),
         url('sri-tsc-webfont.woff') format('woff'),
         url('sri-tsc-webfont.ttf') format('truetype'),
         url('sri-tsc-webfont.svg#Sri-TSCRegular') format('svg');
    font-weight: normal;
    font-style: normal;
   }
   body { font-family: "Sri-TSCRegular", serif }
  </style>

希望这对你有所帮助。

Answer 2

我相信它是IE中的一个错误，唯一的解决方法是在标签id iframe文档的头部硬连线。

Answer 3

我们遇到了几乎完全相同的问题。我们使用Google的Webfont加载程序在父级和iFrame中加载css字体。

iFrame是跨域的，因此我们无法使用内置于Webfont api的iFrame方法。 iFrame负责加载自己的字体。

Webfont加载程序还提供了成功加载字体的回调。我们发现使用IE（特别是版本11）在页面加载后加载调试工具，是因为字体加载器在HTML标记上放置了一个非活动类，这意味着字体没有成功。如果我们在页面加载之前运行调试器，字体会按预期神奇地加载，并且Web字体加载器会将Active类放在HTML元素上，表示加载成功。

更奇怪的是，当我们在字体失败时尝试将错误写入控制台时，什么都不会发生 - 从未弄清楚问题是什么。

经过大量的研究，如果我们在页面中对@FontFace声明进行硬编码，我们能够复制良好的行为，就像这个问题的作者所做的那样。但由于我们的服务不知道我们的用户将使用哪种字体，因此硬编码样式无法作为选项。

最后，它似乎是某种缓存错误，因为字体加载器在调试器运行时工作（显然IE在调试时使用不同的缓存规则 - 好主意，不是）。我们尝试设置No Cache元标记无济于事。

无论如何，我找到的唯一可行答案是： IE8 web font iframe bug workarounds 特别是卸载和重新加载样式表：

var sheets = document.styleSheets;
for(var s = 0, slen = sheets.length; s < slen; s++) {
  sheets[s].disabled = true;
  sheets[s].disabled = false;
}

我希望这可以帮助其他一些可怜的编码人员再次被不称职的团队在IE上所吸引。

IE 10,11 iframe和外部css中的字体

3 个答案: