谷歌网络字体在 IE 中不起作用

Question

我在使用 Google 网络字体时遇到了一些奇怪的行为。现在我像嵌入样式表一样使用它，它工作正常。

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Orienta' rel='stylesheet' type='text/css'>

但是当我将这个 @font-face 值用于我的 css 文件时，它无法正常工作。

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
}
@font-face {
  font-family: 'Orienta';
  font-style: normal;
  font-weight: 400;
  src: local('Orienta'), local('Orienta-Regular'), url(http://themes.googleusercontent.com/static/fonts/orienta/v1/nPJ0J30J_zQZtBhztPPbaA.woff) format('woff');
}

这些代码发生了什么，我认为两者的作用相同。有什么想法吗？

注意。我还计划将此字体下载到我的系统并从服务器加载它。提前致谢。

Answer 1

您的字体需要具有 .eot 扩展名才能在 IE 中运行。你可以在这里使用生成器http://www.fontsquirrel.com/fontface/generator

Answer 2

IE 不理解 WOFF 格式。因此，您应该使用处理不同字体格式的 CSS 代码，就像 Google 代码一样。最简单的方法是访问 Google Web Fonts 网站并在那里下载字体包；它包含不同的格式以及使用它们的 CSS 代码。

Answer 3

你是对的@Caelea，我需要为我的字体添加一个 .eot 扩展名才能在 IE 中工作。

终于深入研究了这个问题，我找到了解决方案。我只是将下面的网址粘贴到 IE 的导航栏中。

http://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Orienta

然后我得到了 IE（with .eot 文件）和 webkit 浏览器的相关 css。我下载了每种字体并保存到我的应用程序代码中。现在它在网站上工作正常

见下面的代码

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGBlTL9oEQvYTI0YAW1-Ysv0.eot);
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGBlTL9oEQvYTI0YAW1-Ysv0.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
}
@font-face {
  font-family: 'Orienta';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/orienta/v1/4h2F_2nQc3QO1h97-0ufEg.eot);
  src: local('Orienta'), local('Orienta-Regular'), url(http://themes.googleusercontent.com/static/fonts/orienta/v1/4h2F_2nQc3QO1h97-0ufEg.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/orienta/v1/nPJ0J30J_zQZtBhztPPbaA.woff) format('woff');
}

感谢大家的即时回复。非常感谢@Jukka K. Korpela 分享了一个好主意

编辑

为了获得谷歌字体eot，我已经在IE中浏览了字体网站，所以谷歌在那里加载了IE支持的字体:)。