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 files ）和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给我一个好主意

修改

要获得谷歌字体，我已经浏览了IE中的字体网站，所以google加载了IE支持的字体：）。

google webfont无法在IE中工作

3 个答案: