CSS 如何让谷歌字体在 IE 中工作？

Question

提问by Isaac Lubow

I've been developing a site that uses the Google Fonts API. It's great, and supposedly has been tested in IE, but when testing in IE 8 the fonts simply don't get styled.

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

I included the font, as Google instructs, thus:

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

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

and added its name to the front of a font family in CSS thus:

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

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

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

Works like a charm in Chrome, Firefox, Safari. No dice in IE 8. Anybody know why?

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

Answer 1

采纳答案by Yi Jiang

The method, as indicated by their technical considerationspage, is correct - so you're definitely not doing anything wrong. However, this bug reporton Google Code indicate that there is a problem with the fonts Google produced for this, specifically the IE version. This only seems to affect only some fonts, but it's a real bummmer.

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

The answers on the thread indicate that the problem lies with the files Google's serving up, so there's nothing you can do about it. The author suggest getting the fonts from alternative locations, like FontSquirrel, and serving it locally instead, in which case you might also be interested in sites like the League of Movable Type.

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

N.B. As of Oct 2010 the issue is reported as fixed and closed on the Google Code bug report.

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

Answer 2

回答by Jonathan Marzullo

Looks like IE8-IE7 can't understand multiple Google Web Font styles through the same file requestusing the linktags href.

看起来 IE8-IE7 无法通过使用标签的相同文件请求来理解多种 Google Web 字体样式。linkhref

These two links helped me figure this out:

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

See this open Google issue, and look at the comments.
Also see this StackOverlow Answer Google Web Fonts don't work in IE8

请参阅此未解决的 Google 问题，并查看评论。
另请参阅此 StackOverlow 答案Google Web Fonts 在 IE8 中不起作用

The only way I have gotten it to work in IE7-IE8 is to only have one Google Web Font request. And only have one font style in the hrefof the linktag:

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

So normally you would have this, declaring multiple font styles in the same request:

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

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

But in IE7-IE8 add a IE conditional and specify each Google font style separatelyand it will work:

但在IE7，IE8添加一个IE条件，并指定每个谷歌字形分开，也将努力：

<!--[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]-->

Hope this can help others!

希望这可以帮助其他人！

Answer 3

回答by gitaarik

Google Fonts uses Web Open Font Format (WOFF), which is good, because it's the recommended font format by the W3C.

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

IE versions older than IE9 don't support Web Open Font Format (WOFF) because it didn't exist back then. To support < IE9, you need to serve your font in Embedded Open Type (EOT). To do this you will need to write your own @font-face css tag instead of using the embed script from Google. Also you need to convert the original WOFF file to EOT.

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

You can convert your WOFF to EOT over here by first converting it to TTF and then to EOT: http://convertfonts.com/

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

Then you can serve the EOT font like this:

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

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

Now it works in < IE9. However, modern browsers don't support EOT anymore, so now your fonts won't work in modern browsers. So you need to specify them both. The src property supports this by comma seperating the font urls and specefying the type:

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

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

However, < IE9 doesn't understand this, it just graps the text between the first quote and the last quote, so it will actually get:

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

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

as the URL to the font. We can fix this by first specifying a src with only one url which is the EOT format, then specifying a second src property that's meant for the modern browsers and < IE9 will not understand. Because < IE9 will not understand it it will ignore the tag so the EOT will still be working. The modern browsers will use the last specified font they support, so probably WOFF.

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

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

So only because in the second src property you specify the format('woff'), < IE9 won't understand it (or actually it just can't find the font at the url myfont.woff') format('woff) and will keep using the first specified one (eot).

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

So now you got your Google Webfonts working for < IE9 and modern browsers!

所以现在您的 Google Webfonts 可用于 < IE9 和现代浏览器！

For more information about different font type and browser support, read this perfect article by Alex Tatiyants: http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/

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

Answer 4

回答by Matt

While Yi Jiang's solution may work, I don't believe abandoning the Google Web Font API is the right answer here. We serve a local jQuery file when it's not properly loaded from the CDN, right?

虽然 Yi Jiang 的解决方案可能有效，但我认为放弃 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>

So why wouldn't we do the same for fonts, specifically for < IE9?

那么为什么我们不对字体做同样的事情，特别是对于 < 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]-->

Here's my process when using custom fonts:

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

Download the font's ZIP folder from Google, and use Font Squirrel's @font-face Generatorto create the local web font.

Create a fonts.cssfile that calls the newly created, locally hosted font files (only linking to the file if < IE9, as shown above). NOTE: The @font-face Generator creates this file for you.

@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;
}

Using IE conditional classes in your main stylesheet to avoide faux weights and styles, your font styles might look like this:

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

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

创建一个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;
}

在主样式表中使用 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,
}

Sure, it's a little extra work, but haven't we come to expect this from IE? Besides, it becomes second-nature after awhile.

当然，这需要一些额外的工作，但我们是否已经开始期待 IE 的这一点？此外，一段时间后它就变成了第二天性。

Answer 5

回答by Adam

For what its worth, I couldn't get it working on IE7/8/9 and the multiple declaration option didn't make any difference.

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

The fix for me was as a result of the instructions on the Technical Considerations Pagewhere it highlights...

对我来说，修复是根据技术注意事项页面上的说明进行的，其中突出显示了...

For best display in IE, make the stylesheet 'link' tag the first element in the HTML 'head' section.

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

Works across IE7/8/9 for me now.

现在对我来说跨 IE7/8/9 工作。

Answer 6

回答by PhotoAlbert

I tried all the options from above and they didn't work. Then I located the google font (Over the Rainbow) in my folder (new) and used IE conditional below and it worked perfect.

我尝试了上面的所有选项，但它们都不起作用。然后我在我的文件夹（新）中找到了谷歌字体（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]-->

I hope it will help

我希望它会有所帮助

Answer 7

回答by amitgur

It's all about trying all those answers, for me, nothing works except the next solution: Google font suggested

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

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

But, I'm using here foreign language fonts, and it didn't work on IE11 only. I found out this solution that worked:

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

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

Hope that save someone precious time

希望节省某人宝贵的时间

Answer 8

回答by Pawel

You can try fontsforweb.com where fonts are working for all browsers, because they are provided in TTF, WOFF and EOT formats together with CSS code ready to be pasted on your page i.e.

您可以尝试 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";
}

or you can download them zipped in a package with CSS file attached

或者您可以将它们下载到一个带有 CSS 文件的压缩包中

then just add class to any element to apply that font i.e.

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

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

See it working: http://jsfiddle.net/SD4MP/

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

Answer 9

回答by Reza Mamun

After my investigation, I came up to this solution:

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

//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');

MUST OBSERVE:We must need to write the font-weightcorrectly of this font. For example: font-weight:900;will not workas we have not included 900like 200,300,400,600,700,800into the URL address while importing from Google with the above link. We can add or include 900to the above URL, but that will work only ifthe above Google Fonthas this option while embedding.

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

Answer 10

回答by sam

Try this type of link , it will run in also IE . hope this helps .

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

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

CSS 如何让谷歌字体在 IE 中工作？

提问by Isaac Lubow

采纳答案by Yi Jiang

回答by Jonathan Marzullo

回答by gitaarik

回答by Matt

回答by Adam

回答by PhotoAlbert

回答by amitgur

回答by Pawel

回答by Reza Mamun

回答by sam

相关推荐

最近更新

标签

CSS 如何让谷歌字体在 IE 中工作？

提问by Isaac Lubow

采纳答案by Yi Jiang

回答by Jonathan Marzullo

回答by gitaarik

回答by Matt

回答by Adam

回答by PhotoAlbert

回答by amitgur

回答by Pawel

回答by Reza Mamun

回答by sam

相关推荐

CSS css3 动画/过渡/变换：如何使图像增长？

CSS Bootstrap 3 与当前的 AngularJS 引导程序指令兼容吗？

CSS 具有指定 HTML id 的 Html.ActionLink？

按钮中心 CSS

相关推荐

最近更新

标签