asp.net - 自定义网页字体在 IE9 中不起作用

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 是否被许可以网络字体形式使用。如果您没有许可证或许可证不允许它，请尊重这一点。）因此，您将不得不考虑一下字体文件的路径。

我所做的是查阅链接到的博客文章 AlienWebGuy，这很好。时间不长，我就读了。它归结为：

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

此外，顺便说一句，IE9 在使用jsFiddle 演示 使用相同的 CSS显示字体时遇到问题。很奇怪。IE7 和 8 运行良好，所以我知道它在某些方面工作。我不知道那是什么，但我将相同的标记和 CSS 保存到我网站上的一个文件中，它工作正常。

分解...

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

• eot
• woff
• ttf
• svg

您真的可能只需要eot，ttf并且woff如果您不关心支持旧版 iOS。不过，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、安卓、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 错误。要解决此问题，您必须将 MIME 类型为“application/x-font-woff”的“.woff”添加到您的 IIS 安装中。

_{- 来自 Font Spring 文章}

因此，您可能必须检查您的服务器是否正在运行。您还可以使用 Chrome 控制台或 Firebug NET 选项卡查看随文件发送的标头。

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

1. 谷歌网络字体。不要成为英雄。他们托管字体，为您提供包含样式表标记，然后，您就开始做生意了。他们也有一些很酷的字体。还有其他网络字体服务，例如 Typekit、Webtype、Fontdeck 和 Fonts Live。
2. Font Squirrel有一个@Font-Face Generator，它可以为您提供您需要的所有文件（警告：只提交您知道要获得网络使用许可的字体。）。使用专家模式，它会给你一个包含很多很棒的东西的 ZIP 文件，包括一个演示。我收到的你可以在这里下载。有趣的是，生成的 CSS 与 Font Spring 相同，只是去掉了注释。这可能不是巧合。
3. 我在这个 Opera Dev 页面上发现了这个很棒的工具。这也值得一读。
4. 当然，该博客文章 AlienWebGuy 链接到Font Spring。

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

快乐编码。:)

---

演示中使用的超酷字体是Ludger Duvernay Regular。有关详细信息，请参阅Steve Cloutier/Cloutierfontes网站。感谢您将其免费供个人使用。:)

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';

这解决了我的问题。