首页 文章

如何让Google字体在IE中运行？

提问于
浏览 次
66

我一直在开发一个使用Google Fonts API的网站 . 它__79856_ t样式 .

我包含了字体，如Google instructs，因此：

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

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

身体{
font-family：“Josefin Sans Std Light”，“Times New Roman”，Times，serif;
font-size：16px;
overflow-y：scroll;
overflow-x：hidden;
颜色：＃05121F;
}

就像Chrome，Firefox，Safari中的魅力一样 . IE 8中没有骰子 . 任何人都知道为什么？

css internet-explorer webfonts google-webfonts

11 回答

  • 65

    这个方法，正如他们的technical considerations页所示，是正确的 - 所以你绝对没有做错任何事 . 但是，Google代码上的this bug report表示Google为此制作的字体存在问题，特别是IE版本 . 这似乎只影响一些字体，但它是一个真正的bummmer .

    线程上的答案表明问题在于Google 's serving up, so there'你无能为力 . 作者建议从其他位置获取字体，例如FontSquirrel，然后在本地提供，在这种情况下，您可能也会对像the League of Movable Type这样的网站感兴趣 .

    注：截至2010年10月，该问题在Google Code错误报告中报告为已修复和已结束 .

    回复于
  • 0

    看起来IE8-IE7无法通过 same file request 使用 link 标签 href 了解多种Google Web字体样式 .

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

    我在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字体样式 separately 它会起作用：

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

    希望这可以帮助别人！

    回复于
  • 15

    Google字体使用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 . 我们可以通过首先指定一个只有一个url（即EOT格式）的src来解决这个问题，然后指定第二个src属性，它适用于现代浏览器，<IE9将无法理解 . 因为<IE9将无法理解它，它将忽略标记，因此EOT仍然可以正常工作 . 现代浏览器将使用它们支持的最后指定字体，因此可能是WOFF .

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

    所以只是因为在第二个src属性中你指定 format('woff') ，<IE9赢得't understand it (or actually it just can' t在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/

    回复于
  • 7

    虽然易江的解决方案可行，但我不认为放弃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]-->

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

    • 从Google下载字体的ZIP文件夹，并使用Font Squirrel's @font-face Generator创建本地Web字体 .

    • 创建一个调用新创建的本地托管字体文件的 fonts.css 文件（仅在<IE9时链接到文件，如上所示） . 注意：@ font-face Generator会为您创建此文件 .

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

    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预期这一点？此外，它在一段时间后变成了第二天性 .

    回复于
  • 2

    对于它的 Value ，我无法让它在IE7 / 8/9上工作，并且多重声明选项没有任何区别 .

    对我的修复是由于Technical Considerations Page上的说明突出显示的......

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

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

    回复于
  • 0

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

    我希望它会有所帮助

    回复于
  • 0

    您可以尝试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/

    回复于
  • 1

    这一切都是关于尝试所有这些答案，对我来说，除了下一个解决方案之外没有任何作用：谷歌字体建议

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

    但是，我在这里使用的是外语字体，而且它只适用于IE11 . 我发现这个解决方案有效：

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

    希望能节省宝贵的时间

    回复于
  • 53

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

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

    我和你有同样的问题 . 我找到了一个使用Adobe Web Fonts代码的解决方案，在Internet Explorer，Chrome，Firefox和Safari中都很完美 .

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

    回复于
  • 4

    经过我的调查，我找到了这个解决方案：

    //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: 我们必须正确编写此字体的 font-weight . 例如： font-weight:900; will not work 因为我们在使用上述链接从Google导入时没有将 900 像 200,300,400,600,700,800 包含在URL地址中 . 我们可以在上面的网址中添加或包含 900 ，但是 work only if 上面的Google Font在嵌入时有此选项 .

    回复于

相关问题