IE9 阻止下载跨域网络字体答案

【问题标题】：IE9 blocks download of cross-origin web fontIE9 阻止下载跨域网络字体
【发布时间】：2011-07-01 05:22:34
【问题描述】：

这快把我逼疯了。

刚刚在 IE9 上测试了一个网站，发现“实时”版本正在渲染我使用的网络字体，比开发版本小。

这里是屏幕截图的选择：

我正在使用 Font Squirrel @font-face 套件。如您所见，在 Firefox、Chrome 甚至 IE9 上查看网站的本地版本时都很好。

本地和实时版本之间的唯一区别是字体是从实时站点上的不同域加载的（我已经正确设置了跨域策略，正如它在 Firefox 和 Chrome 上运行的事实所示)。

我不记得它在 IE8 中的样子（微软再一次没有考虑开发人员，并且在 IE8 之上安装了 IE9，但没有同时运行它们的选项）

该站点位于http://enplanner.com，因此您可以查看源代码。

对此的任何帮助将不胜感激 - 在此先感谢您。

编辑：我删除了 IE9，发现它在本地和 IE8 中看起来完全一样。看来 IE8 具有比 IE9 更接近 FF/Chrome 的卓越渲染引擎。这是一个相当令人沮丧的发现。

【问题讨论】：

IE9 版本的字体与 live 版本不同。如果您查看字母“l”上的衬线，您会发现它们是不同的。为什么 IE9 不会加载与 IE8 相同的字体我不能说。

标签： internet-explorer cross-domain internet-explorer-9 webfonts

【解决方案1】：

IE9 支持.WOFF； IE8 不支持，仅支持 .EOT 字体。

打开 IE9 F12 开发者工具，您会看到以下消息：

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
Neuton-webfont.woff

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
YanoneKaffeesatz-Regular-webfont.woff

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
Neuton-webfont.ttf

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
YanoneKaffeesatz-Regular-webfont.ttf

检查您的 HTTP 标头，很明显您的跨域访问配置不正确，因为您的 WOFF 文件中没有 Access-Control-Allow-Origin 响应标头。它们还使用错误的 MIME 类型 (text/plain) 交付，尽管这不会导致您的问题。但是，未能将 woff 映射到正确的 MIME 类型可能会导致问题，因为某些服务器不会提供具有“未定义”扩展名的文件，而是会返回 HTTP/404 错误。

【讨论】：

那么 IE9 实际加载了哪些文件来渲染它们？它正在显示网络字体，它似乎只是以与 FF/Chrome/IE8 不同的大小呈现它们。为平台预览提示干杯顺便说一句 - 我忘了我已经安装了......
啊哈！我错过了 Apache 配置中 FilesMatch 行中的“woff”。我将发布完整的块作为答案，以便其他遇到此问题的人知道该怎么做。
另外，我今天刚刚发现了 Fiddler（正在尝试调试它！），这是一个很棒的软件，所以谢谢你！
如果 iis 未配置为发送 .woff 文件的 MIME 类型，也会出现此错误。在 IIS 中添加 .woff 文件的映射解决了我的特定问题。假设正在运行“IIS 推荐设置”更新可能会解决这个问题？？？ stackoverflow.com/questions/4689304/…
这只是解决了我的 .woff 字体文件得到 404 的问题。设置 MIME 类型并返回它！

【解决方案2】：

好的，这就是有效的方法。将以下部分放在您提供字体的主机的 Apache 配置中：

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "http://mydomain.com"
    </IfModule>
</FilesMatch>

将“mydomain.com”替换为您自己的域或*（但请小心使用*，因为这意味着任何人都可以使用您的 CDN）

“|woff”是我忘记的。呵呵！

【讨论】：

我已经尝试过使用 ttf 字体 - 没有任何乐趣，不适用于我的域甚至 *.我有工作模块头，甚至正确配置的 MIME 类型，但没有任何工作。
是的，有一天Apple 说Flash 不再酷了。那天大家都同意了。而现在人们面对所有的小问题，处理不同版本的 IE。 nuff 说，这真的是世界末日：P
注意，如果您使用 CDN，例如 cloudflare，您需要清除缓存，以便服务器上的更改传播

【解决方案3】：

关于上面meanstreakuk的答案，我想补充一下。我们遇到了同样的问题，我们搜索了 Google Web Font 的功能。所以，我们把我们的htaccess，这个：

标头集 Access-Control-Allow-Origin "*"

而不是我们的域。如果星号，就像谷歌那样，它一直有效。

【讨论】：

【解决方案4】：

对于 IIS 添加下面的行......就像一个魅力

<system.webServer>
          <httpProtocol>
          <customHeaders>
              <add name="Access-Control-Allow-Origin" value="*" />
              <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
              <add name="Access-Control-Allow-Headers" value="Content-Type" />
          </customHeaders>
      </httpProtocol>
  </system.webServer>

【讨论】：

这真的不是一个好主意：方法列表只需要允许 GET 请求，以便提供字体 - 允许所有内容（PUT、POST、DELETE、OPTIONS）到任何地方（*）门开得太宽了。
很好，只是在这里它提到了 iis 其他地方它唯一的方法
这行现在是还是，是否还需要指定文件类型而不是 * 值？
您能否将此答案更新为仅适用于特定文件？

【解决方案5】：

检查是否可以在 IE 中打开文件 (your-web.com/your-font.woff)，如果收到错误 404 转到 IIS，请在具有 IIS 根节点时双击“MIME 类型”配置选项在左侧面板中选择并单击右侧“操作”面板中的“添加...”链接。这将弹出以下对话框。添加 .woff 文件扩展名并指定“application/x-font-woff”作为对应的 MIME 类型。

我在这个网站 (Robòtica educativa) 中使用了这个指令，我在 (http://www.font2web.com/) 上转换了我原来的 .ttf 字体

【讨论】：

【解决方案6】：

我找到了一种解决方法。将此添加到 htaccess。

BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support

【讨论】：

【解决方案7】：

使用 Access-Control-Allow-Origin 标头的另一种解决方案是使用数据将字体嵌入到 CSS 中：。

【讨论】：

你可以使用Font Squirrel's webfont generator在CSS中嵌入字体。点击“专家”模式，向下滚动到“CSS”行并选择“Base64 Encode”

【解决方案8】：

还值得注意的是，如果您的资产托管在 Amazon AWS S3 上，您将无法设置服务器发送的标头。相反，您需要按照以下说明在存储桶上配置 CORS 设置：

【讨论】：

【解决方案9】：

不要忘记包含 .svg - 在某些情况下这可能是必要的。添加它解决了 IE 11 中的问题

<FilesMatch "\.(eot|otf|svg|woff|ttf)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

【讨论】：

【解决方案10】：

要在 ASP.Net 中实现，您可以使用此语法

Response.AppendHeader("Access-Control-Allow-Origin", "*");

【讨论】：

具体是如何实现的？

【解决方案11】：

我尝试了从修改我的 apache 配置到 .htaccess 文件的所有方法，但都没有成功。在 IE 开发工具中，我偶然发现了“文档模式”，默认为 IE7。所以经过一番研究，我发现了这个元标记：

<meta http-equiv="X-UA-Compatible" content="IE=9">

现在 IE 10 和 9 可以正确格式化我的网站并正确显示所有 Font Awesome 图标。

希望对您有所帮助...

【讨论】：

【解决方案12】：

未经测试！
Nginx 站点文件位，如果您的 CDN 不公开，则仅允许对字体文件进行原始访问 :-) 快乐编码

location ~ \.(ttf|otf|eot|woff)$ { 
    Access-Control-Allow-Origin: * 
}

【讨论】：

我认为这应该是位置 ~* \.(eot|otf|ttf|woff|woff2)$ { add_header Access-Control-Allow-Origin *; }

【解决方案13】：

在控制台 (F12) 中注意到此错误后：@font-face failed cross-origin request. Resource access is restricted 我发现我的浏览器（IE11，仿真：IE9）“阻止内容以帮助保护我的隐私”。通过取消阻止内容 - 单击 url 旁边的标志 - 它可以正常工作。

【讨论】：

虽然这对您的个人情况很好，但它并不能解决 OP 为广大公众服务的问题。