在Internet Explorer浏览器中，使用@import导入谷歌字体无法正常工作。

Question

我正在尝试在我的网站上使用Google字体，但在Internet Explorer浏览器中遇到了问题。我使用@import导入字体，当我搜索时，看到其他人这样使用：

@import url('http://fonts.googleapis.com/css?family=Open+Sans');

事情是我得到的链接长这样：

@import url(http://fonts.googleapis.com/earlyaccess/opensanshebrew.css);

当我在IE上打开网页时，根本没有文字。

我需要获取Web字体文件吗？还是有其他方法可以解决这个问题？

- Guy Aston

---

你是否在CSS文件中声明了字体？例如：body { font-family: open-sans; } - sheriffderek

你使用的是哪个版本的Internet Explorer？ - Dev'Hamz

你按照这些指示操作了吗？http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans - sheriffderek

使用这个 jsFiddle 来在你的 IE 浏览器上检查。http://jsfiddle.net/sheriffderek/c662j/ - sheriffderek

不要使用Arial或其他字体。使用此jsFiddle检查您的IE：https://jsfiddle.net/f365cn7j/（如果!!!具有圆点和尖锐的顶部边缘，则很好，否则您正在使用Arial或其他字体） - Aur Saraf

Answer 1

嗨， 我曾经遇到过同样的问题，因此我创建了这个新的网页版本字体，现在已经可以在IE上很好地使用了。 你可以在这里下载它： http://assafk.com/staff/open_sans_hebrew/Opes_Sans_Hebrew_Fixed.rar 谢谢！ Assaf

在下载rar文件后，添加以下CSS即可使用：

@font-face {
    font-family: 'Open Sans Hebrew';
    font-style: italic;
    font-weight: 300;
    src: url(opensanshebrew-lightitalic-webfont.eot);
    src: url(opensanshebrew-lightitalic-webfont.eot?#iefix) format('embedded-opentype'),
    url(opensanshebrew-lightitalic-webfont.woff) format('woff'),
    url(opensanshebrew-lightitalic-webfont.ttf) format('truetype');
}
@font-face {
    font-family: 'Open Sans Hebrew';
    font-style: normal;
    font-weight: 300;
    src: url(opensanshebrew-light-webfont.eot);
    src: url(opensanshebrew-light-webfont.eot?#iefix) format('embedded-opentype'),
    url(opensanshebrew-light-webfont.woff) format('woff'),
    url(opensanshebrew-light-webfont.ttf) format('truetype');
}
@font-face {
    font-family: 'Open Sans Hebrew';
    font-style: italic;
    font-weight: 400;
    src: url(opensanshebrew-italic-webfont.eot);
    src: url(opensanshebrew-italic-webfont.eot?#iefix) format('embedded-opentype'),
    url(opensanshebrew-italic-webfont.woff) format('woff'),
    url(opensanshebrew-italic-webfont.ttf) format('truetype');
}
@font-face {
    font-family: 'Open Sans Hebrew';
    font-style: normal;
    font-weight: 400;
    src: url(opensanshebrew-regular-webfont.eot);
    src: url(opensanshebrew-regular-webfont.eot?#iefix) format('embedded-opentype'),
    url(opensanshebrew-regular-webfont.woff) format('woff'),
    url(opensanshebrew-regular-webfont.ttf) format('truetype');
}
@font-face {
    font-family: 'Open Sans Hebrew';
    font-style: italic;
    font-weight: 700;
    src: url(opensanshebrew-bolditalic-webfont.eot);
    src: url(opensanshebrew-bolditalic-webfont.eot?#iefix) format('embedded-opentype'),
    url(opensanshebrew-bolditalic-webfont.woff) format('woff'),
    url(opensanshebrew-bolditalic-webfont.ttf) format('truetype');
}
@font-face {
    font-family: 'Open Sans Hebrew';
    font-style: normal;
    font-weight: 700;
    src: url(opensanshebrew-bold-webfont.eot);
    src: url(opensanshebrew-bold-webfont.eot?#iefix) format('embedded-opentype'),
    url(opensanshebrew-bold-webfont.woff) format('woff'),
    url(opensanshebrew-bold-webfont.ttf) format('truetype');
}
@font-face {
    font-family: 'Open Sans Hebrew';
    font-style: italic;
    font-weight: 800;
    src: url(opensanshebrew-extrabold-webfont.eot);
    src: url(opensanshebrew-extrabold-webfont.eot?#iefix) format('embedded-opentype'),
    url(opensanshebrew-extrabold-webfont.woff) format('woff'),
    url(opensanshebrew-extrabold-webfont.ttf) format('truetype');
}
@font-face {
    font-family: 'Open Sans Hebrew';
    font-style: normal;
    font-weight: 800;
    src: url(opensanshebrew-extrabold-webfont.eot);
    src: url(opensanshebrew-extrabold-webfont.eot?#iefix) format('embedded-opentype'),
    url(opensanshebrew-extrabold-webfont.woff) format('woff'),
    url(opensanshebrew-extrabold-webfont.ttf) format('truetype');
}

- Assaf Katz

---

多谢了！你救了我。 - Alon Eitan

它能够工作，但会增加网站的负载。 这行代码对我有效，但字体看起来不好。 @import url(http://fonts.googleapis.com/earlyaccess/alefhebrew.css); - buzibuzi

איזה אלוף אתה... תודה גבר - Guy Aston

我最近注意到这个修复版本有一个有缺陷的“extra-bold”字重。字母错位，看起来很糟糕。其他字重也可能受到影响。 - adi518

Answer 2

Sheriffderek 在其中一个回答的评论中是正确的 - 你不应该使用 @import - 但他/她没有做出解释。很可能你遇到了跨域问题，无论是IE还是Firefox都会阻止像这样的远程请求。你需要将内容类型与你的远程请求关联起来，以便它不被阻止。

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

这里的“类型”参数很关键——它使得 IE 和 FF 能够进行远程请求。CSS 允许这种跨域链接，因为它被 W3C 认为是低安全风险。

点击以下链接了解更多 CORS 相关信息：

- IE 的解释：http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx - Mozilla 的想法：https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy - JS 方面的实现（如果您真的很好奇）：http://www.html5rocks.com/en/tutorials/cors/

- serraosays

---

这不是每个人都遇到的问题。Assaf Katz 是正确的。 - Aur Saraf

这与@import声明有什么关系？ - Nathan Hornby

@NathanHornby - O.P. 不应该使用 @import。如果不使用 @import，你需要确保在远程样式表声明中包含 type 参数，以便它不会针对 CORS 运行。 - serraosays

Answer 3

为什么不使用：

<link href='link-to-your-css/file.css' rel='stylesheet' type='text/css'>

不要使用@import

- Dev'Hamz

---

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> - sheriffderek

我认为你没有理解重点。请查看字体页面：http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans - sheriffderek

为什么不使用@import！那么你想如何将CDN字体添加到WordPress？ - Murhaf Sousli

Answer 4

这是Open Sans Hebrew字体本身存在的问题，在Google Fonts Early Access Discussions论坛上已经有多次报告，但目前还没有解决方案。建议考虑使用其他“早期访问”（即实验性）字体，例如Alef Hebrew。

- Jukka K. Korpela

---

我非常确定那就是问题所在。我已经尝试上传我的网站，完全没有链接字体（我已经在本地电脑上下载了它们），但仍然只在IE浏览器上出现问题。在Chrome、Firefox、Opera和Safari上都可以正常工作。谢谢！ - Guy Aston

看看@Assaf Katz的答案，他为我解决了这个问题。也许可以将其更改为已接受？ - Aur Saraf