如何让Google字体在IE中运行？

时间：2010-09-12 07:13:13

标签： css internet-explorer webfonts google-webfonts

我一直在开发一个使用Google Fonts API的网站。它很棒，据说已在IE中测试过，但在IE 8中进行测试时，字体根本无法设置样式。

我将字体包含在Google instructs中，因此：

<link href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light"  
 rel="stylesheet" type="text/css" />

并将其名称添加到CSS中字体系列的前面：

body {
font-family: "Josefin Sans Std Light", "Times New Roman", Times, serif;
font-size: 16px;
overflow-y: scroll;
overflow-x: hidden;
color: #05121F;
}

就像Chrome，Firefox，Safari中的魅力一样。 IE 8中没有骰子。有人知道为什么吗？

10 个答案:

答案 0 :(得分：66)

通过使用link代码href的相同文件请求，看起来IE8-IE7无法理解多种Google Web字体样式。

这两个链接帮我解决了这个问题：

我在IE7-IE8中使用它的唯一方法是只有一个Google Web字体请求。并且href标记的link中只有一种字体样式：

通常你会有这个，在同一个请求中声明多种字体样式：

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic" />

但是在IE7-IE8中添加一个IE条件并指定每种Google字体样式单独它会起作用：

<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:800" />
<![endif]-->

希望这可以帮助别人！

答案 1 :(得分：53)

这个方法，正如他们的technical considerations页面所示，是正确的 - 所以你肯定没有做错任何事。但是，Google代码上的this bug report表示Google为此生成的字体存在问题，特别是IE版本。这似乎只影响一些字体，但它是一个真正的bummmer。

帖子上的答案表明问题在于Google正在提供的文件，所以你无能为力。作者建议从其他位置获取字体，例如FontSquirrel，然后在本地提供，在这种情况下，您可能也会对the League of Movable Type等网站感兴趣。

N.B。截至2010年10月，该问题在Google Code错误报告中报告已修复并已结束。

答案 2 :(得分：15)

Google字体使用Web开放字体格式（WOFF），这很好，因为它是W3C推荐的字体格式。

早于IE9的IE版本不支持Web开放字体格式（WOFF），因为它当时不存在。支持＆lt; IE9，您需要在嵌入式开放式（EOT）中提供您的字体。为此，您需要编写自己的@ font-face css标记，而不是使用Google的嵌入脚本。您还需要将原始的WOFF文件转换为EOT。

您可以通过首先将其转换为TTF然后转换为EOT将您的WOFF转换为EOT： http://convertfonts.com/

然后您可以像这样提供EOT字体：

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

现在它适用于＆lt; IE9。但是，现代浏览器不再支持EOT，所以现在你的字体在现代浏览器中不起作用。所以你需要指定它们。 src属性通过逗号分隔字体URL并拼写类型来支持：

src: url('myfont.woff') format('woff'),
     url('myfont.eot') format('embedded-opentype');

然而，＆lt; IE9不明白这一点，它只是在第一个引号和最后一个引号之间抓取文本，所以它实际上会得到：

myfont.woff') format('woff'),
url('myfont.eot') format('embedded-opentype

作为字体的URL。我们可以通过首先指定一个只有一个url（即EOT格式）的src来解决这个问题，然后指定第二个src属性，它适用于现代浏览器和＆lt; IE9不会理解。因为＆lt; IE9不会理解它会忽略标签，因此EOT仍然可以工作。现代浏览器将使用它们支持的最后指定字体，因此可能是WOFF。

src: url('myfont.eot');
src: url('myfont.woff') format('woff');

因此，仅在第二个src属性中指定format('woff')，＆lt; IE9不会理解它（实际上它只是在网址myfont.woff') format('woff找不到字体）并将继续使用第一个指定的字体（eot）。

所以现在你的Google Webfonts正在为＆lt; IE9和现代浏览器！

有关不同字体类型和浏览器支持的更多信息，请阅读Alex Tatiyants的完美文章： http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/

答案 3 :(得分：7)

虽然易江的解决方案可行，但我不认为放弃Google Web Font API是正确的答案。当它没有从CDN正确加载时我们提供本地jQuery文件，对吗？

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-1.9.0.min.js"><\/script>')</script>

那么我们为什么不对字体做同样的事情，特别是对于＆lt; IE9？

<link href='http://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]><link href='/css/fonts.css' rel='stylesheet' type='text/css'><![endif]-->

这是我使用自定义字体时的过程：

  1. 从Google下载字体的ZIP文件夹，然后使用Font Squirrel's @font-face Generator创建本地网络字体。

  2. 创建一个fonts.css文件，调用新创建的本地托管字体文件（如果＆lt; IE9，则仅链接到文件，如上所示）。注意：@ font-face Generator会为您创建此文件。

    @font-face {
  font-family: 'cardoitalic';
  src: url('cardo-italic-webfont.eot');
  src: url('cardo-italic-webfont.eot?#iefix') format('embedded-opentype'),
    url('cardo-italic-webfont.woff') format('woff'),
    url('cardo-italic-webfont.ttf') format('truetype'),
    url('cardo-italic-webfont.svg#cardoitalic') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'cardobold';
  src: url('cardo-bold-webfont.eot');
  src: url('cardo-bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('cardo-bold-webfont.woff') format('woff'),
    url('cardo-bold-webfont.ttf') format('truetype'),
    url('cardo-bold-webfont.svg#cardobold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'cardoregular';
  src: url('cardo-regular-webfont.eot');
  src: url('cardo-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('cardo-regular-webfont.woff') format('woff'),
     url('cardo-regular-webfont.ttf') format('truetype'),
     url('cardo-regular-webfont.svg#cardoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

  3. 在主样式表中使用IE条件类来避免使用faux weights and styles，您的字体样式可能如下所示：

    h1{
  font-size:3.25em;
  font-weight:normal;
  font-style:italic;
  font-family:'Cardo','cardoitalic',serif;
  line-height:1.25em;
}
h2{
  font-size:2.75em;
  font-weight:700;
  font-family:'Cardo','cardobold',serif;
  line-height:1.25em;
}
strong
,b{
  font-family:'Cardo','cardobold',serif;
  font-weight:700,
}
.lt-ie9 h1{
  font-style:normal;
}
.lt-ie9 h2{
  font-weight:normal;
}
.lt-ie9 strong,
.lt-ie9 b{
  font-weight:normal,
}

    4. 当然，这是一项额外的工作，但我们不是从IE开始期待这个吗？此外，它在一段时间后变成了第二天性。

答案 4 :(得分：4)

对于它的价值，我无法让它在IE7 / 8/9上工作，并且多重声明选项没有任何区别。

对我来说，修正是因为Technical Considerations Page上的说明突出显示了......

  

要在IE中获得最佳显示效果，请先将样式表“链接”标记设为第一个   HTML“head”部分中的元素。

现在可以在IE7 / 8/9上使用。

答案 5 :(得分：2)

我尝试了上面的所有选项但它们没有用。 然后我在我的文件夹（新）中找到谷歌字体（Over the Rainbow）并在下面使用IE条件，它工作得很完美。

<!--[if IE]>
<style type="text/css">
    @font-face {
    font-family: "Over the Rainbow";
    src: url("../new/over.ttf");
    src: local("Over the Rainbow"), url("../new/over.ttf");
    }
</style>
<![endif]-->

我希望它会有所帮助

答案 6 :(得分：1)

您可以尝试fontsforweb.com，其中字体适用于所有浏览器，因为它们以TTF，WOFF和EOT格式提供，并且CSS代码可以粘贴到您的页面上，即

@font-face{ 
    font-family: "gothambold1";
    src: url('http://fontsforweb.com/public/fonts/5903/gothambold1.eot');
    src: local("Gotham-Bold"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.woff') format("woff"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.ttf') format("truetype");
}
.fontsforweb_fontid_5903 {
    font-family: "gothambold1";
}

或者您可以将它们下载到附带CSS文件的包中

然后只需将类添加到任何元素即可应用该字体，即

<h2 class="fontsforweb_fontid_5903">This will be written with Gotham Bold font and will work in all browsers</h2>

看到它正常工作：http://jsfiddle.net/SD4MP/

答案 7 :(得分：1)

这就是尝试所有这些答案，对我来说，除了下一个解决方案之外没有任何作用： Google字体建议

@import 'https://fonts.googleapis.com/css?family=Assistant';

但是，我在这里使用的是外语字体，而且它只适用于IE11。我发现这个解决方案有效：

@import 'https://fonts.googleapis.com/css?family=Assistant&subset=hebrew';

希望能节省宝贵的时间

答案 8 :(得分：0)

尝试这种类型的链接，它也会在IE中运行。希望这可以帮助 。 

<link href='//fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700,300italic' rel='stylesheet' type='text/css'>

答案 9 :(得分：0)

我遇到了同样的问题。 我找到了一个使用Adobe Web Fonts代码的解决方案，在Internet Explorer，Chrome，Firefox和Safari中都很完美。

此页面中的更多信息：http://html.adobe.com/edge/webfonts/

相关问题
最新问题