自定义字体不在 IE9 和 IE10 中显示

Question

我在以下位置使用自定义字体时遇到了多个问题：

• www.shawmut.com/happyholidays

我昨天在使用 Mozilla Firefox 时遇到了一个问题，它没有显示我链接到我们的 AWS S3 存储桶的自定义字体，我通过托管我们实际 Web 服务器的字体解决了这个问题。现在，我遇到了 IE9/10 的问题，字体不再显示。我在这里找到了以下讨论：IE9 Refusing to Load custom font? 这有点触及我的问题，但是，我没有运行 Apache 或 nginx 设置，我在 IIS 上（没有实际的 IIS 访问权限）。

这是 CSS 代码：

/* GOBOLD */
@font-face {
    font-family: 'Gobold';
    src: url('www.shawmut.com/happyholidays/fonts/Gobold.eot');
    src: url('www.shawmut.com/happyholidays/fonts/Gobold.eot#iefix') format('embedded-opentype'),
         url('www.shawmut.com/happyholidays/fonts/Gobold.eot?') format('eot'),
         url('www.shawmut.com/happyholidays/fonts/Gobold.woff') format('woff'),
         url('www.shawmut.com/happyholidays/fonts/Gobold.ttf') format('truetype'),
         url('www.shawmut.com/happyholidays/fonts/Gobold.svg#Gobold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* MOTION PICTURE */
@font-face {
    font-family: 'MotionPicture';
    src: url('www.shawmut.com/happyholidays/fonts/MotionPicture.eot');
    src: url('www.shawmut.com/happyholidays/fonts/MotionPicture.eot#iefix') format('embedded-opentype'),
         url('www.shawmut.com/happyholidays/fonts/MotionPicture.eot?') format('eot'),
         url('www.shawmut.com/happyholidays/fonts/MotionPicture.woff') format('woff'),
         url('www.shawmut.com/happyholidays/fonts/MotionPicture.ttf') format('truetype'),
         url('www.shawmut.com/happyholidays/fonts/MotionPicture.svg#MotionPicture') format('svg');
    font-weight: normal;
    font-style: normal;
}

有人可以帮我解决这个问题吗，这让我发疯了！ :)

Answer 1

我们尝试了所有建议的解决方案并花费数小时研究为什么我们的某些网站用户无法在 IE9 中加载带有图标的自定义字体 - 只是发现是 IE9 中的安全设置阻止了字体文件正在加载。

转到 Internet 选项 > 安全 > Internet > 中解决了该问题，所有自定义图标都已加载并且看起来很完美，就像在最现代的浏览器中一样。

请注意，我们不使用 Windows，我们只使用它在 Mac 上通过 Parallels 进行测试，但我希望它至少可以为你们中的一些人节省一些时间。

Answer 2

我在使用自定义字体时遇到过类似的问题，我设置的其中一件事是出站 URL 重写规则，以便在请求字体时，服务器会添加一个 CORS 标头。这似乎已经解决了我的问题，所以值得一试。

您需要在您的网络服务器 (http://www.iis.net/downloads/microsoft/url-rewrite) 上安装 URL Rewrite 才能使其工作。

<configuration>
    <system.webServer>
        <rewrite>
            <outboundRules>
                <rule name="Fonts CORS">
                    <match serverVariable="RESPONSE_Access_Control_Allow_Origin" pattern=".*" />
                    <conditions>
                        <add input="{REQUEST_URI}" pattern=".*\.(ttf|otf|eot|woff|svg)\?*.*$" />
                    </conditions>
                    <action type="Rewrite" value="*"/>
              </rule>
            </outboundRules>
        </rewrite>
    </system.webServer>
</configuration>

Answer 3

CORS

从使用相对路径开始，当有人使用非 www 前缀 URL 访问您的网站时，您会遇到问题，因为某些浏览器由于跨源资源限制而不会加载您的字体。

当然，这可以通过发送适当的标头来解决，但在这里坚持相对路径是更明智的选择。

另见https://developer.mozilla.org/en/docs/HTTP/Access_control_CORS

内容类型

确保您的服务器发送正确的 Content-Type 标头，浏览器可能对此很挑剔。

.ttf  > application/octet-stream
     or application/x-font-ttf
     or application/x-font-truetype

.eot  > application/vnd.ms-fontobject

.woff > application/font-woff

.svg  > note sure, probably image/svg+xml

缺少文件

还有一些文件不可用，特别是.woff 和.svg 的，所以如果.eot 不能使用（周围有很多EOT 字体不符合微软标准，通常由字体转换器生成）没有可用的后备。

开发者工具

如果上述方法不能解决问题，请检查开发人员工具中的网络和控制台选项卡，如果字体文件确实没有被加载/使用，它们可能会为您提供线索。