对谷歌字体使用@import 不适用于 Internet Explorer

Posted 2023-03-06

【中文标题】对谷歌字体使用@import 不适用于 Internet Explorer

【英文标题】：Using @import for google fonts is not working on internet explorer

【发布时间】：2014-06-19 17:43:55

【问题描述】：

我正在尝试在我的网络上使用谷歌字体，但我在使用 Internet Explorer 时遇到了问题。我正在使用@import，当我用谷歌搜索时，我看到人们这样使用它：

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

问题是我得到的链接是这样的：

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

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

我必须获取 webfont 文件吗？或者有没有办法解决这个问题？

【问题讨论】：

您是否在 CSS 文件中声明字体？ body font-family: open-sans; 等

您使用的是哪个版本的 Internet Explorer？

您是否遵循了这些指示？ google.com/fonts#UsePlace:use/Collection:Open+Sans

使用这个 jsFiddle 来检查你的 IE。 jsfiddle.net/sheriffderek/c662j

不，使用 this jsFiddle 来检查你的 IE：jsfiddle.net/f365cn7j（如果 !!! 有圆点和尖锐的顶部边缘，你很好，否则你'正在使用 Arial 什么的）

【参考方案1】：

喂 我也遇到了同样的问题，所以我创建了这个字体的新网页版本，它在 IE 上效果很好。 你可以在这里下载： http://assafk.com/staff/open_sans_hebrew/Opes_Sans_Hebrew_Fixed.rar 谢谢！ 阿萨夫

下载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');

【讨论】：

户田拉巴！你救了我

它可以工作，但网站负载很重。这条线对我有用，但字体看起来很糟糕 @import url(fonts.googleapis.com/earlyaccess/alefhebrew.css);

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

我最近注意到这个固定版本有一个错误的extra-bold 权重。字母没有对齐，看起来很糟糕。其他权重也可能会受到影响。

【参考方案2】：

Sheriffderek 在这些答案之一的 cmets 中是正确的 - 你不应该使用 @import - 但没有解释他/她自己。您可能遇到了跨域问题，并且 IE 和 Firefox 都阻止了这样的远程请求。您必须将内容类型与您的远程请求相关联，以免被阻止。

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

这里的'type' 参数是关键——它允许远程请求在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/

【讨论】：

这不是每个人都遇到的问题。 Assaf Katz 说得对。

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

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

【参考方案3】：

你为什么不使用：

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

Don't use @import

【讨论】：

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

我认为你没有抓住重点。查看字体页面：google.com/fonts#UsePlace:use/Collection:Open+Sans

为什么不使用@import！那你想怎么给wordpress添加CDN字体呢？

【参考方案4】：

这是Open Sans Hebrew字体本身的问题，这个问题已经在Google Fonts Early Access Discussions论坛上多次报告过，至今没有发布解决方案。考虑使用其他一些“Early Access”（即实验性）字体，例如 Alef 希伯来语。

【讨论】：

我很确定这就是问题所在。我试图在不链接字体的情况下上传我的网页（我已经在我的电脑上本地下载了它们），但我仍然只在资源管理器上遇到这个问题。在 chrome FF 歌剧和 safari 上运行良好。谢谢！

查看@Assaf Katz 的回答，他为我解决了这个问题。也许将其更改为接受？