导入字体到Internet Explorer

Question

我想要在我的网站上使用一些字体，我正在使用谷歌提供的以下代码进行导入。

HTML

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Cuprum:400,700' rel='stylesheet' type='text/css'>

CSS

font-family: "Droid Sans", sans-serif;

这段代码在Firefox和Google Chrome中可以正常工作，但在IE8中不行，为什么呢？

编辑：Adobe创建了一些类似于Google的东西，并且脚本比Google更好，在Internet Explorer中表现完美（详见http://html.adobe.com/edge/webfonts/）。

- Thyago Quintas

Answer 1

因为它只提供WOFF格式，这种格式不被IE8支持。

在这里：http://www.fontsquirrel.com/fontfacedemo/Droid-Sans，你可以下载包含所有所需格式的相同字体。

然后，在你的主CSS中添加以下代码：

@font-face {
    font-family: "Droid Sans";
    src: url('DroidSans-webfont.eot');
    src: url('DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('DroidSans-webfont.woff') format('woff'),
         url('DroidSans-webfont.ttf') format('truetype'),
         url('DroidSans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

因此，您将能够继续使用这种字体。

请注意，该字体的文件必须与您的样式表在同一个文件夹中。

- Giona

Answer 2

Google服务生成的字体文件存在问题，至少从IE的角度来看是这样。即使在IE 9中，也无法显示由Google提供的Droid Sans字体，并且我在检查模式（F12）下检查到Google向IE发送了EOT文件和WOFF文件。

该问题仅涉及某些字体，可能是间歇性的；例如，请参阅问题如何使Google字体在IE中工作？

因此，GionaF建议使用FontSquirrel生成文件并在本地托管似乎是正确的方法，

- Jukka K. Korpela

Answer 3

使用Google Fonts提供的@import代码时，我在IE8上遇到了问题。根据Google Fonts故障排除程序的建议，在IE中粘贴@import语句中引用的URL以查看是否会出现错误，以帮助我跟踪问题。它下载了一些@font-face代码，然后我将其放入CSS文件中，代替@import行，现在在IE8和Chrome中都可以正常工作。我已在iPad（Safari）上进行了测试，并且也很满意。

这可能对某些人有用，但不保证！希望这能帮助其他人，但我遇到了这个问题有一段时间，真的很痛苦。这似乎已经解决了它...至少暂时是这样！

- onionjohnny

Answer 4

Google 返回给 IE 的 CSS 包括一个 @font-face woff 字体，该字体仅支持 IE9 及更高版本。

- Roddy of the Frozen Peas

---

根据MDN（https://developer.mozilla.org/en-US/docs/CSS/@font-face），IE8不支持woff或svg字体的@font-face。我相信我已经指定了这一点。 - Roddy of the Frozen Peas

Answer 5

只需将 sans-serif 添加为您的字体。

像这样：

font-family:'fontname', sans-serif;

Sans-Serif 可以让它在每个浏览器上正常工作

- Robin