Question

我下载了自定义字体（Gotham-Light.eot），但它在Internet Explorer 9上不起作用。

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

这不起作用。我正在使用ASP MVC3重建，使用自定义工具，仍然没有。

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，所以......我甚至不确定Gotham是否有权使用网络字体形式。如果您没有许可证或许可证不允许，请尊重它。）所以你必须考虑一下你的字体文件的路径。

我所做的是咨询blog post AlienWebGuy linked to，这很好。它不久，所以我读了它。归结为：

可能是字体文件的错误配置的MIME类型。有关详细信息，请参见下文还有一个说明Apache可能有这个问题，它似乎更像是一个IIS问题（根据文章）。
您可以欺骗（？）IE9使用EOT文件而不是WOFF，这显然可以解决问题（根据文章）。

此外，另外，IE9使用相同的CSS 显示带有jsFiddle demo 的字体时出现问题。很奇怪。 IE7和8工作正常，所以我知道它在某些方面有效。我没弄清楚那是什么，但我将相同的标记和CSS保存到我网站上的文件中，并且工作正常。

击穿...

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

EOT

WOFF

TTF

SVG

如果您不关心支持旧版iOS，那么您可能只需要eot，ttf和woff。但是，很难获得SVG翻译。

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

font-family: 'ludger_duvernayregular';

IE9 Compat Modes：

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

请记住验证您在此处使用的网址实际上会导致真实文件。把它放在地址栏中，看看会发生什么（它下载了吗？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。无论如何，请注意我使用文件的完整路径，而不是相对文件。这通常是一个好的起点; 检查以确保链接下载 。我做了很多这方面的事情，因为它基本且易于搞砸。

因此，如果文件是使用网址下载的，并且您已经在其他浏览器中工作，并且在IE6,7和/或8中，您可以查看另一种可能性：

修复服务器端的IE9（IIS）


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

_{- 来自Font Spring文章}

所以你可能需要检查你的服务器是不是很麻烦。您还可以使用Chrome控制台或Firebug NET标签查看随文件发送的标头。

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

Google Web Fonts。不要成为英雄。他们托管字体，为您提供包含样式表标记，以及presto whammo，您已经开始营业了。他们也有一些非常酷的字体。有other web font services，例如Typekit，Webtype，Fontdeck和Fonts Live。

Font Squirrel has a @Font-Face Generator，它可以为您提供所需的所有文件（警告：仅提交您知道的许可供网络使用的字体。）。使用专家模式，它将为您提供包含许多精彩内容的ZIP文件，包括演示。我收到你的那个可以在这里下载。有趣的是，生成的CSS与Font Spring一样，减去了注释。这可能不是巧合。

我在this Opera Dev page找到了很棒的工具。这也值得一读。

当然，{{3>} Font Spring 。

这个东西并不难，但你需要知道如何排除故障。始终检查文件是否正在下载;您可以使用Chrome控制台资源标签或Firefox的Firebug插件，并观看NET标签以查看是否下载。如果只是字面意义上的工作，请将页面或代码发布到我们可以访问的地方，我们可以对其进行审核。

快乐的编码。 :)

演示中使用的超级酷炫字体是 Ludger Duvernay Regular 。有关详细信息，请参阅blog post AlienWebGuy linked to网站。感谢您免费供个人使用。 :)

Answer 2

如果您按照此处列出的说明进行操作 - http://www.fontspring.com/blog/fixing-ie9-font-face-problems - 那么您很可能会调用字体。

确保从样式表指向正确的位置 - 上面的代码仅在字体文件与样式表位于同一目录中时才有效。

希望这有帮助。

Answer 3

Gotham是一种商业产品，如果你刚刚从某个地方下载它，它可能是非法的副本或假的，也可能在技术上也被打破。

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

Answer 4

对于googlers：我遇到了长字体名称或与已安装字体冲突的问题。无论如何，IE浏览器是唯一有问题的浏览器。

我改变了

font-family: 'HelveticaLTUltraCompressedRegular';

到

font-family: 'HelveticaLTUCR';

解决了我的问题。

自定义Web字体在IE9中不起作用

4 个答案:

击穿...