如何让谷歌字体在 IE 中工作?
Posted
技术标签:
【中文标题】如何让谷歌字体在 IE 中工作?【英文标题】:How to make Google Fonts work in IE? 【发布时间】:2011-04-11 06:41:54 【问题描述】:我一直在开发一个使用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 中没有骰子。有人知道为什么吗?
【问题讨论】:
使用 IE11 模拟回 IE8 的开发人员注意事项:您必须确保将 用户代理字符串 切换回旧 IE 版本,如只是切换文档模式不会让 Google 的服务器知道发送正确的字体类型 (EOT)。 【参考方案1】:看起来 IE8-IE7 无法通过使用link
标签href
的同一文件请求 理解多种 Google Web 字体样式。
这两个链接帮助我解决了这个问题:
查看此open Google issue,并查看 cmets。 另见 StackOverlow 答案Google Web Fonts don't work in IE8我让它在 IE7-IE8 中工作的唯一方法是只有一个 Google Web Font 请求。并且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]-->
希望这可以帮助其他人!
【讨论】:
这应该是公认的答案。 Smashing Magazine 的一篇文章深入探讨了这个问题(并提供了相同的解决方案):smashingmagazine.com/2012/07/11/… 但是旧的 IE 只支持 32 个样式表,所以这可能会导致更严重的问题:( 仅当使用@import
规则时.. 不在IE conditional
内。 @import 一直都有限制,更不用说性能缓慢了。我看不到您将加载那么多样式表的实例。如果是这样,最好的做法是结合所有样式表以获得最佳性能来限制服务器请求。【参考方案2】:
如他们的technical considerations 页面所示,该方法是正确的 - 所以您绝对没有做错任何事情。然而,谷歌代码上的this bug report 表明谷歌为此制作的字体存在问题,特别是 IE 版本。这似乎只影响一些字体,但它真的很糟糕。
线程上的答案表明问题出在 Google 提供的文件上,因此您无能为力。作者建议从其他位置获取字体,例如 FontSquirrel,并在本地提供字体,在这种情况下,您可能还会对 the League of Movable Type 等网站感兴趣。
注意截至 2010 年 10 月,该问题已在 Google 代码错误报告中报告为已修复并关闭。
【讨论】:
@Yi Jiang,你说得对,我是在本地提供文件,Font Squirrel 更健壮的@font-face kit 效果很好。 哦,至于这个问题正在修复和关闭,谷歌有很多流行的webfonts 在2013 年不能在IE 中运行。这闻起来像是故意“丑化” IE 浏览体验。使用 Font Squirrel 作为首选,直到浏览器完成人气竞赛。 它似乎影响了我在 ie9 中的所有字体。 有可能使这些字体在my answer。 问题真的解决了吗?我正在使用字体lato
,但它仍然没有被应用...【参考方案3】:
Google Fonts 使用 Web 开放字体格式 (WOFF),这很好,因为它是 W3C 推荐的字体格式。
早于 IE9 的 IE 版本不支持 Web 开放字体格式 (WOFF),因为它当时不存在。要支持
您可以在这里将您的 WOFF 转换为 EOT,方法是先将其转换为 TTF,然后再转换为 EOT: http://convertfonts.com/
然后你可以像这样提供 EOT 字体:
@font-face
font-family: 'MyFont';
src: url('myfont.eot');
现在它可以在
src: url('myfont.woff') format('woff'),
url('myfont.eot') format('embedded-opentype');
但是, 作为字体的 URL。我们可以通过首先指定一个只有一个 EOT 格式的 url 的 src 来解决此问题,然后指定第二个 src 属性,该属性适用于现代浏览器,而
所以只是因为在第二个 src 属性中你指定了 现在您的 Google Webfonts 可以在
有关不同字体类型和浏览器支持的更多信息,请阅读 Alex Tatiyants 的这篇完美文章:
http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/myfont.woff') format('woff'),
url('myfont.eot') format('embedded-opentype
src: url('myfont.eot');
src: url('myfont.woff') format('woff');
format('woff')
,myfont.woff') format('woff 处找不到字体)并且会继续使用第一个指定的一个(eot)。
【讨论】:
这就是我在使用 Open Sans Light、300、400 字体系列时所做的。他们中的一些人不想在 FF 中渲染,而有些人不想在 IE 中渲染。所以,我找到了在 .css 中使用@font-face
的相同解决方案,并且它有效。我不确定,但它是否是一个完美的解决方案,因为它使用的是一个 url,将来可能会改变
如果你自己托管字体也没问题。
这不是真的,谷歌字体确实发送 EOT 版本。它只是检测您的浏览器代理并仅向您发送必要的类型。你可以试试在你的 IE 中模拟它,不要忘记更改 user agent 字符串。使用 pacifico 字体、Josefin 和 Source Sans Pro 测试。
也许他们现在这样做了,我想他们在我写这个答案的时候还没有
按照这些思路,IE11 不支持 woff2,但支持 woff。因此,对于 IE11,我必须下载 .woff 版本的 Google 字体。有关如何执行此操作,请参阅这篇文章:medium.com/minitheory-design/…【参考方案4】:
虽然 Yijiang 的解决方案可能有效,但我不认为放弃 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>
那么我们为什么不对字体做同样的事情,特别是
<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's
@font-face Generator 创建本地网络字体。
创建一个fonts.css
文件,该文件调用新创建的本地托管字体文件(如果
@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 条件类来避免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,
当然,这需要做一些额外的工作,但我们难道没有期待 IE 会这样做吗?此外,它会在一段时间后成为第二天性。
【讨论】:
谨慎使用此方法,因为其中一些字体可能具有某些许可要求,需要从托管服务器提供它们。提醒一下:在将字体托管在自己的服务器上之前,请确保您拥有使用该字体的有效许可证。【参考方案5】:不管它的价值如何,我无法让它在 IE7/8/9 上运行,并且多重声明选项没有任何区别。
对我的修复是根据Technical Considerations Page 上的说明,它突出显示...
为了在 IE 中获得最佳显示效果,请将样式表的“链接”标记放在首位 HTML 'head' 部分中的元素。
我现在可以跨 IE7/8/9 工作。
【讨论】:
【参考方案6】:我尝试了上面的所有选项,但它们都不起作用。 然后我在我的文件夹(新)中找到了谷歌字体(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]-->
希望对你有帮助
【讨论】:
【参考方案7】:您可以尝试 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/
【讨论】:
【参考方案8】:这一切都是为了尝试所有这些答案,对我来说,除了下一个解决方案之外,没有任何效果: 谷歌字体建议
@import 'https://fonts.googleapis.com/css?family=Assistant';
但是,我在这里使用的是外文字体,它只在 IE11 上不起作用。我发现这个解决方案有效:
@import 'https://fonts.googleapis.com/css?family=Assistant&subset=hebrew';
希望能节省一些宝贵的时间
【讨论】:
【参考方案9】:试试这种类型的链接,它也可以在 IE 中运行。希望这可以帮助 。
<link href='//fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700,300italic' rel='stylesheet' type='text/css'>
【讨论】:
我认为实际上不会。 IE8 及以下版本需要为每种不同的字体粗细提供单独的链接。请参阅上面@PAPAFRESH 的答案。【参考方案10】:我和你有同样的问题。 我找到了一个使用 Adobe Web Fonts 代码的解决方案,在 Internet Explorer、Chrome、Firefox 和 Safari 中完美运行。
此页面中的更多信息:http://html.adobe.com/edge/webfonts/
【讨论】:
【参考方案11】:经过调查,我想出了这个解决方案:
//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;
将不起作用,因为在使用上述链接从 Google 导入时,我们没有在 URL 地址中包含 900
(如 200,300,400,600,700,800
)。我们可以在上面的 URL 中添加或包含 900
,但这只有在上面的 Google Font 在嵌入时具有此选项时才有效。
【讨论】:
以上是关于如何让谷歌字体在 IE 中工作?的主要内容,如果未能解决你的问题,请参考以下文章
谷歌地理编码 api 在 Apache Cordova 中的 Ripple 系统中工作时无法在 Android 手机中工作