2

我在使用 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');
}

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

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

4

3 回答 3

6

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

于 2012-10-15T13:35:12.330 回答
1

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

于 2012-10-15T14:07:30.730 回答
1

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

最后深入挖掘问题，我得到了解决方案。我只是将下面的 url 粘贴到 IE 的导航栏中。

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

然后我得到了 IE（带有 .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支持的字体:)。

于 2012-10-16T05:49:27.240 回答