68

我一直在开发一个使用Google Fonts API的网站。它很棒，据说已经在 IE 中测试过了，但是在 IE 8 中测试时，字体根本就没有样式。

按照 Google 的指示，我包含了字体，因此：

<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 中没有骰子。有人知道为什么吗？

4

11 回答 11

66

看起来 IE8-IE7 无法通过使用tags的同一个文件请求来理解多种 Google Web Font 样式。linkhref

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

我让它在 IE7-IE8 中工作的唯一方法是只有一个 Google Web Font 请求。并且标签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]-->

希望这可以帮助别人！

于 2012-06-04T18:03:49.827 回答
53

正如他们的技术考虑页面所示，该方法是正确的 - 所以你绝对没有做错任何事情。然而，这个关于谷歌代码的错误报告表明谷歌为此制作的字体存在问题，特别是 IE 版本。这似乎只影响某些字体，但它真的很糟糕。

线程上的答案表明问题出在谷歌提供的文件上，所以你无能为力。作者建议从其他位置获取字体，例如FontSquirrel并在本地提供字体，在这种情况下，您可能还会对诸如League of Movable Type 之类的网站感兴趣。

注意截至 2010 年 10 月，该问题已在 Google 代码错误报告中报告为已修复并已关闭。

于 2010-09-12T08:12:03.883 回答
15

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

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

您可以在这里将您的 WOFF 转换为 EOT，首先将其转换为 TTF，然后再转换为 EOT： http ://convertfonts.com/

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

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

现在它可以在 < IE9 中运行。但是，现代浏览器不再支持 EOT，因此现在您的字体将无法在现代浏览器中使用。所以你需要同时指定它们。src 属性通过逗号分隔字体 url 并指定类型来支持这一点：

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

但是，< IE9 不理解这一点，它只是抓住了第一个引号和最后一个引号之间的文本，所以它实际上会得到：

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

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

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

因此，仅因为在第二个 src 属性中您指定了format('woff'), < IE9 将无法理解它（或者实际上它只是无法在 url 找到字体myfont.woff') format('woff）并将继续使用第一个指定的字体（eot）。

所以现在您的 Google Webfonts 可以在 < IE9 和现代浏览器上运行！

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

于 2013-04-15T19:15:53.890 回答
7

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

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

那么为什么我们不对字体做同样的事情，特别是 < 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 的 @font-face Generator创建本地网络字体。

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

    @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 条件类来避免虚假的权重和样式，你的字体样式可能如下所示：

    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,
}

当然，这是一些额外的工作，但我们难道没有期待 IE 会这样做吗？此外，它会在一段时间后成为第二天性。

于 2013-01-31T16:42:31.850 回答
4

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

对我来说，修复是由于技术注意事项页面上的说明，它突出显示......

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

现在适用于我的 IE7/8/9。

于 2012-08-19T13:50:30.443 回答
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]-->

我希望它会有所帮助

于 2012-08-29T14:44:20.233 回答
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/

于 2011-07-08T15:10:42.823 回答
1

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

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

但是，我在这里使用的是外文字体，它只在 IE11 上不起作用。我发现这个解决方案有效：

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

希望能节省一些宝贵的时间

于 2016-09-10T15:07:58.153 回答
0

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

<link href='//fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700,300italic' rel='stylesheet' type='text/css'>
于 2012-09-18T19:56:10.213 回答
0

我和你有同样的问题。我找到了一个使用 Adob​​e Web Fonts 代码的解决方案，在 Internet Explorer、Chrome、Firefox 和 Safari 中完美运行。

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

于 2012-09-25T16:50:18.523 回答
0

经过我的调查，我想出了这个解决方案：

//writing the below line into the top of my style.css file
@import url('https://fonts.googleapis.com/css?family=Assistant:200,300,400,600,700,800&subset=hebrew');

必须注意： 我们必须font-weight正确书写这种字体。例如：在使用上述链接从 Google 导入时，我们没有将like包含在 URL 地址中，font-weight:900; 因此无法正常工作。我们可以在上面的 URL 中添加或包含，但这只有在上面的Google 字体在嵌入时有这个选项时才有效。900200,300,400,600,700,800900

于 2018-09-14T21:03:56.803 回答