67

这真让我抓狂。

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

以下是精选的屏幕截图：

在此处输入图像描述

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

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

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

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

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

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

4

13 回答 13

62

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错误。

于 2011-02-21T15:05:55.460 回答
35

好的，这就是有效的。将以下部分放在您提供字体的主机的 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' 是我忘记的。嗬！

于 2011-02-21T15:47:27.430 回答
8

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

标头集 Access-Control-Allow-Origin "*"
而不是我们的域名。如果星号，就像谷歌那样，它一直有效。

于 2011-12-20T21:08:06.853 回答
8

对于 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>
于 2013-02-15T16:47:10.700 回答
3

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

BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support
于 2012-10-08T22:15:46.897 回答
3

检查是否可以在 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 字体

于 2013-04-19T08:46:53.240 回答
3

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

于 2014-01-02T20:52:24.907 回答
1

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

于 2013-07-25T18:54:00.337 回答
1

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

<FilesMatch "\.(eot|otf|svg|woff|ttf)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>
于 2014-11-05T23:21:26.653 回答
0

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

Response.AppendHeader("Access-Control-Allow-Origin", "*");
于 2012-12-21T20:58:45.417 回答
0

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

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

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

希望有帮助...

于 2013-09-19T21:13:28.900 回答
0

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

location ~ \.(ttf|otf|eot|woff)$ { 
    Access-Control-Allow-Origin: * 
}
于 2014-07-07T14:25:20.993 回答
-3

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

于 2015-01-29T10:24:33.080 回答