IE9和IE中未显示的自定义字体IE10 [英] Custom fonts not displaying within IE9 & IE10

问题描述

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

I've been running into multiple issues with utilizing custom fonts at the following location:

• www.shawmut.com/happyholidays

• www.shawmut.com/happyholidays

我昨天遇到了Mozilla Firefox的一个问题，它没有显示我链接到我们的AWS S3 Bucket的自定义字体，我通过托管我们实际的Web服务器的字体解决了这个问题。现在，我遇到IE9 / 10的问题，其中字体不再显示。我在这里找到了以下讨论： IE9拒绝加载自定义字体？触及我的问题，但是，我没有运行Apache或nginx设置，我在IIS上（没有实际的IIS访问权限）。

I ran into an issue yesterday with Mozilla Firefox and it not displaying a custom font I was linking to our AWS S3 Bucket, which I resolved by hosting the fonts of our actual web server. Now, I'm experiencing an issue with IE9/10 where the fonts are not displaying once again. I found the following discussion here: IE9 Refusing to Load custom font? which somewhat touches on my issue, however, I'm not running an Apache or a nginx setup, I'm on IIS (without actual IIS access).

这是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;
}

有人可以帮我解决这个问题，这有点让我感到疯狂！ ：）

Can someone PLEASE assist me with resolving this issue, it's kind of driving me bonkers! :)

推荐答案

CORS

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

CORS

Start by using relative paths, you'll run into problems when someone accesses your site with a non www prefixed URL, as some browsers then won't load your font because of cross origin resource restrictions.

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

Of course this could be fixed by sending proper headers, but sticking to relative paths is the smarter option here.

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

确保您的服务器发送正确的Content-Type标头，浏览器可以挑剔关于那个。

Make sure that your server sends the proper Content-Type headers, browsers can be picky about that.

.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标准，通常由字体转换器生成）没有后备可用。

Missing files

Also some files are not available, specifically the .woff and .svg ones, so in case the .eot ones cannot be used (there are a lot of EOT fonts around that do not comply with the Microsoft standard, often produced by font converters) there is no fallback available.

如果上述情况不适用解决问题，检查开发人员工具中的网络和控制台选项卡，他们可能会给你一个线索，以防真正没有加载/使用字体文件。

In case the above doesn't fix the problem, check the network and console tabs in the developer tools, they might give you a clue in case the font files are really not being loaded/used.

这篇关于IE9和IE中未显示的自定义字体IE10的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！