Chrome 和 Google 网络字体有问题。显示来自 Firefox 的不同输出答案

【问题标题】：Problem with Chrome and Google web fonts. Showing different output from FirefoxChrome 和 Google 网络字体有问题。显示来自 Firefox 的不同输出
【发布时间】：2011-11-22 02:22:20
【问题描述】：

我正在为我的页面使用谷歌网络字体，但我在 Chrome 中得到了与 Firefox 不同的结果。 Firefox 的结果是正确的，我不知道 Chrome 为什么会出现这个问题。

代码很简单

intro { font-family: 'Open Sans Condensed', sans-serif; font-size:33px; line-height:38px; color: #404040;}
logo { font-family: 'Open Sans', sans-serif; }

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300italic&subset=greek' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600&subset=greek,latin' rel='stylesheet' type='text/css'>


<logo>Logo goes here</logo>
<br><br>
<intro>Text goes right here</intro>

或者正如您在http://jsfiddle.net/KSVTA/ 或http://fiddle.jshell.net/KSVTA/show/ 中看到的那样，Chrome 不使用 Open Sans Condensed。

为什么会这样，我该如何解决？

【问题讨论】：

标签： javascript jquery html css google-webfonts

【解决方案1】：

Open Sans Condensed 是用 font-style: italic 定义的，因此您还需要将该样式应用于第二个文本：http://jsfiddle.net/KSVTA/1/。

该字体的CSS文件如下：

@media screen {
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Cond Light Italic'), local('OpenSans-CondensedLightItalic'), url('http://themes.googleusercontent.com/static/fonts/opensanscondensed/v3/jIXlqT1WKafUSwj6s9AzV1qvxng10Zx7YyzmqNB25XX3rGVtsTkPsbDajuO5ueQw.woff') format('woff');
}
}

你可以看到斜体定义。

【讨论】：

【解决方案2】：

如果你给你的“介绍” CSS 属性

font-style: italic;

然后它在 Chrome 中运行良好。

另外，您可能想read this older question 了解非标准 HTML 标记。

【讨论】：