Problem with Chrome and Google web fonts. Showing different output from Firefox
I am using google web fonts for a page of mine, but I get a different result in Chrome from Firefox. Firefox's result is the correct and I don't have a clue why Chrome does this problem.
The code is simple
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/c开发者_开发知识库ss'>
<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>
or as you can see in http://jsfiddle.net/KSVTA/ or http://fiddle.jshell.net/KSVTA/show/ Chrome does not make use of Open Sans Condensed.
Why is that and how can I fix it?
Open Sans Condensed is defined with font-style: italic
, so you'd need to apply that style to your second text as well: http://jsfiddle.net/KSVTA/1/.
The CSS file of that font is as follows:
@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');
}
}
You can see the italic definition.
If you give your "intro" the CSS property
font-style: italic;
then it works fine in Chrome.
Also, you may want to read this older question about non-standard HTML tags.
精彩评论