如何使谷歌字体在IE中工作？
我一直在开发一个使用Google Fonts API的网站。 这是伟大的，据说已经在IE中testing，但在IE 8testing时，字体根本没有风格。
我按照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.有人知道为什么？
正如他们的技术考虑页所示，这个方法是正确的 – 所以你绝对没有做错任何事情。 但是，Google代码的这个错误报告表明，Google为此生成的字体，特别是IE版本存在问题。 这似乎只影响一些字体，但它是一个真正的沮丧。
线程上的答案表明，问题出在Google提供的文件上，所以你无能为力。 作者build议从FontSquirrel等其他位置获取字体，然后在本地投放，在这种情况下，您可能也会对像Movable Type联盟这样的网站感兴趣。
NB截至2010年10月，该问题在Google Code错误报告中报告为固定并closures。
看起来像IE8-IE7不能通过使用link标签href 相同的文件请求了解多个Google Web字体样式。
这两个链接帮助我弄清楚了这一点：
- 看到这个开放的Google问题 ，并看看评论。
- 另请参阅此StackOverlow回答Google Web字体在IE8中不起作用
我在IE7-IE8中得到它的唯一方法是只有一个Google Web字体请求。 link标签的href中只有一种字体样式：
所以通常你会有这个，在同一个请求中声明多个字体样式：
<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]-->
希望这可以帮助别人！
谷歌字体使用Web Open字体格式（WOFF），这是很好的，因为它是由W3C推荐的字体格式。
IE 9以前的版本不支持Web Open字体格式（WOFF），因为它当时不存在。 要支持<IE9，您需要在embedded式打开types（EOT）中提供您的字体。 为此，您需要编写自己的@ font-face css标签，而不是使用Google的embedded脚本。 你也需要将原来的WOFF文件转换为EOT。
你可以转换你的WOFF到EOT在这里首先转换为TTF，然后到EOT： http : //convertfonts.com/
然后你可以像这样提供EOT字体：
@font-face { font-family: 'MyFont'; src: url('myfont.eot'); }
现在它工作在<IE9。 然而，现代浏览器不再支持EOT，所以现在你的字体在现代浏览器中将不起作用。 所以你需要指定他们两个。 src属性通过逗号分隔字体url和specefyingtypes来支持这个：
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('wofffind字体myfont.woff') format('woff ）和将继续使用第一个指定的一个（eot）。
所以，现在你的Google Webfonts可以用于<IE9和现代浏览器！
有关不同字体types和浏览器支持的更多信息，请阅读Alex Tatiyants的完美文章： http ://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/
尽pipe易江的解决scheme可能会起作用，但我不认为放弃Google Web Font API是正确的select。 我们提供一个本地的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]-->
这是我使用自定义字体的过程：
- 从Google下载字体的ZIP文件夹，然后使用Font Squirrel的@ font-face Generator创build本地networking字体。
-
创build一个调用新创build的本地托pipe字体文件的
fonts.css文件（如果<IE9，只能链接到文件，如上所示）。 注：@ font-face生成器为您创build此文件。@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, }
当然，这是一个额外的工作，但我们没有期望从IE浏览器这一点？ 此外，一段时间后，它变成了第二性。
对于它的价值，我无法在IE7 / 8/9上工作，多重声明选项没有任何区别。
对我来说，修复是由于技术注意事项页面上的说明，其中突出显示…
为了在IE中获得最佳显示效果，使样式表“链接”标记HTML头部的第一个元素。
现在为我工作在IE7 / 8/9上。
我尝试了上面的所有选项，但都没有工作。 然后，我find了谷歌字体（在彩虹）在我的文件夹（新），并使用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]-->
我希望这会有所帮助
您可以尝试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/
所有这些都是关于尝试所有这些答案的，对我而言，除了下一个解决scheme之外，没有任何工作可做：Google提供的字体
@import 'https://fonts.googleapis.com/css?family=Assistant';
但是，我在这里使用的是外语字体，而且它只在IE11上不起作用。 我发现这个工作的解决scheme：
@import 'https://fonts.googleapis.com/css?family=Assistant&subset=hebrew';
希望能省下一些宝贵的时间
尝试这种types的链接，它也会在IE中运行。 希望这可以帮助 。
<link href='//fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700,300italic' rel='stylesheet' type='text/css'>
我和你有同样的问题。 我find了一个使用Adobe Web Fonts代码的解决scheme，可以在Internet Explorer，Chrome，Firefox和Safari中完美工作。
更多信息在此页面： http : //html.adobe.com/edge/webfonts/
