自定义网页字体在IE9中无法工作

Question

我下载了一个自定义字体(Gotham-Light.eot), 但它在Internet Explorer 9上无法使用。

@font-face {
    font-family: Gotham-Light;
    src: url('Gotham-Light.eot');
}

这个不起作用。我正在使用重新构建的ASP MVC3，使用了自定义工具，但仍然没有任何作用。

- shinra tensei

---

你可以参考我的相关答案。 - Jared Farrish

http://www.fontspring.com/blog/fixing-ie9-font-face-problems - AlienWebguy

这是我拥有的相同代码，但仍然无法工作。我的代码在内容文件夹中。 - shinra tensei

@AlienWebguy - 借用了你的链接作为答案（或多或少）。好东西。 - Jared Farrish

“不起作用”具体指什么？你做了哪些研究？ - Pavlo

Answer 1

首先，商品：

@font-face {
    font-family: 'ludger_duvernayregular';
    src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');
    src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot?#iefix') format('embedded-opentype'),
         url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.woff') format('woff'),
         url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.ttf') format('truetype'),
         url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.svg#ludger_duvernayregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

p.test {
    font-family: 'ludger_duvernayregular', Arial, serif;
    font-weight: 400;
    color: blue;
}

注意，我使用了一种特意易于查看的字体。 (而且我没有访问Gotham的web字体，所以...我甚至不确定Gotham是否有许可证可以在web字体形式中使用。如果您没有许可证或许可证不允许，请尊重这一点。) 因此，您需要对字体文件的路径进行一些思考。

我所做的是参考AlienWebGuy链接到的博客文章，很好。它不长，所以我会读它。它归结为:

1. 字体文件可能配置错误的MIME类型。有关更多信息，请参见下文。还有一个注意事项，Apache可能会出现这个问题，看起来更像是IIS的问题（根据文章）。
2. 您可以欺骗IE9使用EOT文件而不是WOFF文件，这显然可以解决问题（根据文章）。

此外，IE9在使用完全相同的CSS jsFiddle演示 时显示字体存在问题。非常奇怪。IE7和8正常工作，所以我知道它在某些方面起作用。我没有弄清楚那是什么问题，但我将相同的标记和CSS保存到我的网站上，它可以正常工作。

分解...

让我解释一下上面CSS中发生了什么。我会逐行解释。但是，请记住，以下是我拥有的Web字体文件格式：

• eot
• woff
• ttf
• svg

如果您不关心支持旧版iOS，则可能只需要eot，ttf和woff。虽然很难获得SVG转换。

现在，首先命名您的字体，以便您可以引用它：

font-family: 'ludger_duvernayregular';

IE9 兼容模式：

src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');

请记得验证您在此处使用的URL实际上将导向真实文件。将其放入地址栏中并查看会发生什么（是否下载？ 404？）。

以下是完整语句，包括结尾，我将删除完整的URL。

IE6、7和8：

src: url('http://../ludgerduvernay.eot?#iefix') format('embedded-opentype'),

注意这部分：

.eot?#iefix <<< See below for an explanation.

进一步解决IE CSS问题

在一些罕见的情况下，IE将会失败，因为@font-face声明字符过多。这个问题可以通过在问号‘？’后面加上井号‘#’来解决，在大多数情况下有效。这将为你提供额外的空间。

_{-摘自Font Spring文章}

我不知道为什么这个方法能解决问题，所以只能相信他们的说法。

现代浏览器：

url('http://../ludgerduvernay.woff') format('woff'),

Safari，Android，iOS：

url('http://../ludgerduvernay.ttf') format('truetype'),

传统iOS：

url('http://../ludgerduvernay.svg#ludger_duvernayregular') format('svg');

然后使用它：

p {
    font-family: 'ludger_duvernayregular', Arial, serif;
}

我其实很惊讶这可以在IE6上运行。无论如何，请注意我使用的是文件的完整路径，而不是相对路径。那通常是一个好的起点;检查链接是否下载。我强调这一点是因为它很基础并且容易出错。

所以，如果文件正在通过url下载，并且在其他浏览器中和IE6、7和/或8中都能正常工作，您可以看看另一个可能性：

解决服务器端（IIS）上的IE9问题

Microsoft的IIS服务器将拒绝发送它没有MIME类型的资源。我们开发的语法强制IE9使用WOFF而不是EOT，但是如果它在IIS上提供，则会失败。这是因为IE9请求WOFF文件，但由于WOFF在IIS中没有定义MIME类型，因此返回404 Not Found错误。要解决此问题，必须将“。woff”与MIME类型“application/x-font-woff”添加到您的IIS安装中。

-来自Font Spring文章

因此，您可能需要检查服务器是否损坏。 您还可以使用Chrome控制台或Firebug NET选项卡查看与文件一起发送的标头。

现在我在这里得到了一点帮助，我认为您应该考虑以下选项：

1. Google Web Fonts. 不要自作聪明。他们托管字体，提供包含样式表的标记，然后你就可以使用了。他们还有一些非常酷的字体。还有其他网页字体服务，如Typekit、Webtype、Fontdeck和Fonts Live。
2. Font Squirrel有一个@Font-Face Generator，它可以为您提供所需的所有文件（警告：仅提交您知道已经获得网页使用许可的字体。）。使用专家模式，它将为您提供一个ZIP文件，其中包括很多很棒的东西，包括演示。我收到的那个可以在这里下载。有趣的是，生成的CSS与Font Spring的CSS完全相同，只是没有注释。这可能不是巧合。
3. 我在这个Opera Dev页面上找到了一个很棒的工具。那也值得一读。
4. 当然，还有那个AlienWebGuy链接的Font Spring博客文章。

这些内容并不难，但您需要知道如何进行故障排除。始终检查文件是否正在下载；您可以使用Chrome控制台资源选项卡或Firefox的Firebug插件，并观察NET选项卡以查看是否正在下载。如果它根本无法工作，请将页面或代码发布在我们可以访问的地方，我们将进行审核。

愉快的编码。 :)

---

演示中使用的超级酷炫字体是 Ludger Duvernay Regular。有关更多信息，请参见Steve Cloutier/Cloutierfontes网站。感谢您免费提供个人使用。:)

- Jared Farrish

---

谢谢。它的工作原理是将其转换为woff文件，应该早点尝试。非常感谢。 - shinra tensei

@shinratensei：你好，我已经按照这个答案的每一个步骤进行了操作。但是，在Firefox或IE中字体从未出现过。 请检查Chrome以查看字体。 访问此处以查看网站：www.tryst-iitd.com/13/beta - xan

Answer 2

如果您正在按照此处列出的指示http://www.fontspring.com/blog/fixing-ie9-font-face-problems进行操作，那么最有可能的原因是您调用字体的方式不正确。

请确保您从样式表中指向正确的位置 - 如果字体文件与样式表在同一目录中，则上面的代码才能正常工作。

希望这可以帮到您。

- streetlight

Answer 3

Gotham是一款商业产品，如果你刚从某个地方下载它，那么它很可能是一个非法副本或假货，而且可能在技术上也存在问题。

考虑使用类似设计的免费字体，比如Cicle。

- Jukka K. Korpela

---

当查看添加到问题中的http://jsfiddle.net/d8w2K时，IE 9会在开发人员工具（F12）中的控制台部分显示错误消息CSS3114，该消息指出@font-face未通过OpenType嵌入的使用权测试。 - Jukka K. Korpela

Answer 4

针对谷歌员工：我遇到了一个问题，可能是由于字体名称过长或与已安装的字体冲突导致的。无论如何，只有IE浏览器出现了问题。

我将

font-family: 'HelveticaLTUltraCompressedRegular';

更改为

font-family: 'HelveticaLTUCR';

这解决了我的问题。

- Jonas Äppelgran