CORS

Question

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

www.shawmut.com/happyholidays

昨天我用Mozilla Firefox遇到了一个问题，它没有显示我链接到我们的AWS S3 Bucket的自定义字体，我通过托管我们实际的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

CORS

首先使用相对路径，当有人使用非www前缀网址访问您的网站时，您会遇到问题，因为有些浏览器因为跨域资源限制而无法加载您的字体。

当然这可以通过发送正确的标题来修复，但坚持相对路径是更聪明的选择。

另见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个字体周围不符合Microsoft标准，通常由字体转换器生成）没有后备可用。

开发人员工具

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

Answer 2

我遇到了与自定义字体类似的问题，我设置的一个原因是出站网址重写规则，以便在请求字体时，服务器会添加一个CORS标头。这似乎解决了我的问题，所以值得一试。

您需要在网络服务器（http://www.iis.net/downloads/microsoft/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

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

转到互联网选项＆gt;安全＆gt;互联网＆gt; Medium修复了这个问题，加载了所有自定义图标，看起来就像在最现代的浏览器中一样。

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

自定义字体不在IE9和＆amp; IE10

3 个答案:

CORS

内容类型

缺少文件

开发人员工具