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

Question

我一直在开发一个使用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中没有骰子.任何人都知道为什么？

Answer 1

看起来IE8-IE7无法通过使用标签的同一文件请求了解多个Google Web Font样式.linkhref

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

• 查看这个开放的Google问题,并查看评论.
• 另请参阅此StackOverlow答案Google Web Fonts在IE8中不起作用

我在IE7-IE8中使用它的唯一方法是只有一个Google Web字体请求.而只有在一个字体样式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]-->

希望这可以帮助别人!

Answer 2

如技术考虑页面所示,该方法是正确的 - 所以你肯定没有做错任何事情.但是,这个关于Google代码的错误报告表明Google为此制作的字体存在问题,特别是IE版本.这似乎只影响一些字体,但它是一个真正的bummmer.

线程上的答案表明问题在于Google提供的文件,所以你无能为力.作者建议从其他位置获取字体,比如FontSquirrel,并在本地服务,在这种情况下,您可能也会对像Movable Type这样的网站感兴趣.

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

Answer 3

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将无法理解它(或实际上它只是无法在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/

Answer 4

虽然易江的解决方案可行,但我不认为放弃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创建本地Web字体.

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

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开始期待这个吗？此外,它在一段时间后变成了第二自然.