IE9阻止跨源Web字体下载

Question

这让我发疯。

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

以下是屏幕截图的选择：

我正在使用 Font Squirrel @font-face 套件。正如您所看到的，在 Firefox、Chrome 甚至 IE9 上查看该网站的本地版本时都没有问题。

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

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

该站点位于 http://enplanner.com 这样您就可以查看源代码。

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

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

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

Answer 2

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

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

将 mydomain.example 替换为您自己的域或 * （但要小心使用 < code>* 因为这意味着任何人都可以使用您的 CDN）

|woff 是我忘记的。哎哟！

Answer 3

对于上面meanstreakuk的回答，我想补充一下。
我们遇到了同样的问题，我们搜索了 Google Web Font 的功能。
所以，我们输入 htaccess：

标头设置 Access-Control-Allow-Origin "*"

instead of our domain.
If the asterisc, as Google does, it works all the time.

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

Answer 5

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

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

Answer 6

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

Answer 7

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

我在本网站 (Robòtica educativa) 中使用此说明，我将原始 < code>.ttf 字体 (http://www.font2web.com/)

Answer 8

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

• http://docs.aws.amazon.com/AmazonS3/latest/UG/EditingBucketPermissions.html
• http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

Answer 9

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

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

Answer 10

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

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

Answer 11

我尝试了一切方法，包括修改我的 apache 配置和 .htaccess 文件，但没有成功。在IE开发工具中我偶然发现了“文档模式”，默认是IE7。因此，经过一些研究，我发现了这个元标记：

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

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

希望有帮助...

Answer 12

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

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

Answer 13

在控制台 (F12) 中注意到此错误后：@font-face 跨源请求失败。资源访问受到限制 我发现我的浏览器（IE11，仿真：IE9）“阻止了内容以帮助保护我的隐私”。通过解锁内容 - 单击网址旁边的标志 - 它可以正常工作。