Chrome和Google网络字体有问题。显示来自Firefox的不同输出
问题描述:
我在使用谷歌网页字体作为我的页面,但我从Firefox获得了不同的Chrome浏览器结果。 Firefox的结果是正确的,我不知道Chrome为什么会这样做。Chrome和Google网络字体有问题。显示来自Firefox的不同输出
代码很简单
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/看到浏览器不使用开放三世简明的。
这是为什么,我该如何解决?
答
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');
}
}
你可以看到斜体的定义。
答
如果你给你的 “前奏” 的CSS属性
font-style: italic;
然后正常工作在Chrome中。
此外,你可能想要read this older question关于非标准的HTML标签。