如何使IE中的Google字体有效？

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

css  internet-explorer  webfonts  google-webfonts 
— 艾萨克·卢博（Isaac Lubow）
source
5
使用IE11模拟回IE8-的开发人员的注释：您必须确保将用户代理字符串切换回旧的IE版本，因为仅切换文档模式不会让Google的服务器知道发送正确的字体类型（EOT）。
— Impirator

Answers:

53

正如他们的技术注意事项页面所指出的，该方法是正确的-因此，您绝对不会做错任何事情。但是，此关于Google Code的错误报告表明Google为此生成的字体（特别是IE版本）存在问题。这似乎只影响某些字体，但这确实是个笨蛋。

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

注意：自2010年10月起，此问题在Google Code错误报告中已报告为已修复，已关闭。

— 易江
source
1
@Yi Jiang，您是对的，我使用Font Squirrel更加强大的@ font-face工具包在本地提供文件，并且效果很好。
— 艾萨克·卢博
10
哦，至于这个问题已解决并得到解决，Google提供了许多流行的Web字体，这些字体在2013年无法在IE中使用。这闻起来像是故意故意“丑化”了IE浏览体验。首选使用Font Squirrel，直到浏览器完成其流行度竞赛为止。
— 3Dom
它对ie9中的所有字体似乎都产生了影响。
— Eric
但是，有可能使这些字体在<IE9中工作。看我的回答。
— gitaarik
这个问题真的解决了吗？我正在使用字体，lato但仍无法应用...
— Shubh 2015年
66

看起来IE8-IE7无法通过使用标记的同一文件请求来理解多种Google Web字体样式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条件，并指定每个谷歌字形分开，也将努力：

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

希望这可以帮助别人！

— 乔纳森·马尔祖洛
source
7
这应该是公认的答案。从碎杂志的一篇文章进入问题的深度（并提供相同的解决方案）：smashingmagazine.com/2012/07/11/...
— 杰弗里展位
但是较旧的IE仅支持32个样式表，因此这可能会导致更严重的问题:(
— NoBugs 2015年
只有在使用@import规则时才可以IE conditional。@import一直都有局限性，更不用说性能低下了。我看不到一个实例，您将在其中加载许多样式表。如果是这样，始终结合所有样式表以实现最佳性能以限制服务器请求始终是最佳实践。
— 乔纳森·马祖洛
15

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

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

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

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

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

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

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格式网址的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/

— 吉塔里克
source
这就是我与Open Sans Light（300、400种字体系列）一起工作的过程。其中一些不想在FF中渲染，而另一些则不想在IE中渲染。因此，我找到了@font-face在.css中使用的相同解决方案，并且有效。我不确定，但这是否是一个完美的解决方案，因为它使用的是网址，将来可能会更改
— eugene.it 2014年
如果您自己托管字体，那没问题。
— gitaarik 2014年
这是不正确的，google字体确实会发送EOT版本。它仅检测您的浏览器代理，并仅向您发送必要的类型。您可以尝试在IE中进行模拟，不要忘记更改用户代理字符串。经过pacifico字体，Josefin和Source Sans Pro测试。
— 卢卡斯·考兹
也许他们现在就这样做了，我认为他们在我撰写此答案
— 时还
因此，IE11不支持woff2，但支持woff。因此，对于IE11，我必须下载.woff版本的Google字体。请参阅有关此操作的文章：medium.com/minitheory-design/…–
— jaycer
7

虽然Yi Jiang的解决方案可能会起作用，但我不认为放弃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>

那么，为什么我们不对字体做同样的事情，特别是对<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中期待这一点吗？此外，一段时间后它变成了第二自然。

— 马特
source
3
请谨慎使用此方法，因为其中某些字体可能具有某些许可要求，这些要求要求从托管服务器提供它们。提醒您：在将字体托管在自己的服务器上之前，请确保您具有使用该字体的有效许可证。
— Damian Keeghan
4

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

对我而言，此修复程序是根据“技术注意事项”页面上的说明突出显示的...

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

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

— 亚当
source
2

我从上面尝试了所有选项，但它们没有起作用。然后我在我的文件夹（新）中找到了Google字体（彩虹之上），并在下面使用了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]-->

希望对您有所帮助

— 摄影阿尔伯特
source
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文件

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

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

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

— 帕维尔
source
1

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

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

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

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

希望能节省别人的宝贵时间

— 阿米特古尔
source
0

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

<link href='//fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700,300italic' rel='stylesheet' type='text/css'>
— 山姆
source
2
我认为实际上不会。IE8及以下版本要求每种不同的字体粗细都有单独的链接。请参阅上面@PAPAFRESH的答案。
— 乔纳森·莫法特
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正确编写此字体。例如：font-weight:900; 将无法工作，因为我们并没有包括900像200,300,400,600,700,800到URL地址，而从谷歌与上面的链接导入。我们可以900在上面的URL中添加或包括，但只有在嵌入时上面的Google字体具有此选项时，此方法才有效。

— 雷扎·马蒙（Reza Mamun）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.